@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Fira+Code:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Noto+Sans+Mono+JP:wght@300;400;500;600;700&display=swap');

:root{
  --slate-anthracite:#1E2A3A;
  --signal-orange:#FF4D00;
  --steel-cold:#5A6B7D;
  --paper-white:#FFFFFF;
  --radiator-base:#F4F6F9;
  --graphite-line:#B0B7C3;
  --panel-edge:#D0D5DD;
  --shadow-hard:4px 4px 0 var(--slate-anthracite);
  --shadow-hard-orange:6px 6px 0 var(--signal-orange);
  --mono-display:'JetBrains Mono',monospace;
  --mono-body:'Fira Code',monospace;
  --mono-jp:'Noto Sans Mono JP',monospace;
}

strong,p,b,span,a,h1,h2,h3,h4,h5,h6,li,button,label,input,textarea,select{
  color:inherit;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:var(--mono-display);
  background:var(--radiator-base);
  color:var(--slate-anthracite);
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
}

.mono-jp{font-family:var(--mono-jp)}

.font-display{font-family:var(--mono-display)}
.font-body{font-family:var(--mono-body)}
.font-jp{font-family:var(--mono-jp)}

.skel-grid{
  background-image:
    linear-gradient(rgba(176,183,195,0.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(176,183,195,0.18) 1px,transparent 1px);
  background-size:32px 32px;
  background-position:-1px -1px;
}

.skew-plate{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--panel-edge);
  position:relative;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}

.skew-plate-orange{
  background:var(--paper-white);
  border:2px solid var(--signal-orange);
  position:relative;
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));
  box-shadow:var(--shadow-hard-orange);
}

.skew-card{
  background:var(--paper-white);
  border:1px solid var(--panel-edge);
  position:relative;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  transition:all 320ms cubic-bezier(0.45,0,0.55,1);
}

.skew-card:hover{
  border-color:var(--signal-orange);
  border-width:2px;
  transform:translate(-3px,-3px);
  box-shadow:6px 6px 0 var(--signal-orange);
}

.skew-parallelogram{
  transform:skewX(-6deg);
}
.skew-parallelogram>*{transform:skewX(6deg)}

.cta-skew{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--signal-orange);
  color:#FFFFFF;
  font-family:var(--mono-display);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:18px 32px;
  min-height:54px;
  border:2px solid var(--slate-anthracite);
  transform:skewX(-6deg);
  box-shadow:var(--shadow-hard);
  cursor:pointer;
  transition:all 280ms cubic-bezier(0.45,0,0.55,1);
  white-space:nowrap;
  text-decoration:none;
}
.cta-skew>*{transform:skewX(6deg);display:inline-flex;align-items:center;gap:8px}
.cta-skew:hover{
  transform:translate(-3px,-3px) skewX(-6deg);
  box-shadow:7px 7px 0 var(--slate-anthracite);
}

.cta-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--slate-anthracite);
  font-family:var(--mono-display);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:16px 28px;
  min-height:50px;
  border:1.5px solid var(--slate-anthracite);
  transform:skewX(-6deg);
  cursor:pointer;
  transition:all 280ms ease;
  white-space:nowrap;
  text-decoration:none;
}
.cta-ghost>*{transform:skewX(6deg);display:inline-flex;align-items:center;gap:6px}
.cta-ghost:hover{
  background:var(--slate-anthracite);
  color:#FFFFFF;
}

.particle-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
}

.fade-up{
  opacity:0;
  transform:translateY(6px);
  transition:opacity 700ms cubic-bezier(0.33,0,0.2,1),transform 700ms cubic-bezier(0.33,0,0.2,1);
}
.fade-up.visible{opacity:1;transform:translateY(0)}

.typewriter{overflow:hidden;white-space:nowrap;border-right:2px solid var(--signal-orange);animation:blink 800ms step-end infinite}
@keyframes blink{50%{border-color:transparent}}

.pulse-dot{
  display:inline-block;
  width:8px;height:8px;
  background:var(--signal-orange);
  border-radius:50%;
  margin-right:8px;
  animation:pulse 1400ms ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(255,77,0,0.5)}
  50%{opacity:0.6;transform:scale(1.15);box-shadow:0 0 0 8px rgba(255,77,0,0)}
}

.skel-nav-link{
  position:relative;
  font-family:var(--mono-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--slate-anthracite);
  padding:8px 4px;
  text-decoration:none;
  transition:transform 220ms ease;
}
.skel-nav-link:hover{transform:translateY(-2px)}
.skel-nav-link::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:2px;
  height:2px;
  background:var(--signal-orange);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 240ms ease;
}
.skel-nav-link:hover::after{transform:scaleX(1)}

.skel-card-grow{
  position:relative;
  background:var(--paper-white);
  border:1px solid var(--panel-edge);
  padding:32px 26px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  transition:all 360ms cubic-bezier(0.45,0,0.55,1);
  cursor:pointer;
  min-height:280px;
  display:flex;
  flex-direction:column;
}
.skel-card-grow:hover{
  transform:scale(1.045);
  border-color:var(--signal-orange);
  border-width:2px;
  padding:31px 25px;
  box-shadow:var(--shadow-hard-orange);
  z-index:5;
}

.stack-card{
  background:var(--paper-white);
  border:1px solid var(--panel-edge);
  padding:28px;
  position:relative;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
  transition:all 340ms cubic-bezier(0.45,0,0.55,1);
  margin-bottom:10px;
}
.stack-card:nth-child(1){z-index:5;transform:translate(0,0)}
.stack-card:nth-child(2){z-index:4;transform:translate(18px,18px)}
.stack-card:nth-child(3){z-index:3;transform:translate(36px,36px)}
.stack-card:nth-child(4){z-index:2;transform:translate(54px,54px)}
.stack-card:nth-child(5){z-index:1;transform:translate(72px,72px)}
.stack-card:hover{
  transform:translate(0,0) !important;
  border-color:var(--signal-orange);
  border-width:2px;
  padding:27px;
  z-index:10;
  box-shadow:var(--shadow-hard-orange);
}
.stack-card:last-child{margin-bottom:0}

.node-edge{
  stroke:var(--slate-anthracite);
  stroke-width:1.5;
  stroke-dasharray:5 3;
  transition:stroke 240ms ease,stroke-width 240ms ease;
}
.node-edge.hot{stroke:var(--signal-orange);stroke-width:2.5;stroke-dasharray:none}

.flow-node{
  fill:var(--paper-white);
  stroke:var(--slate-anthracite);
  stroke-width:1.5;
  transition:fill 240ms ease,stroke 240ms ease;
  cursor:pointer;
}
.flow-node.hot{fill:var(--signal-orange);stroke:var(--signal-orange)}

.faq-plate{
  background:var(--paper-white);
  border:1px solid var(--panel-edge);
  position:relative;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  transition:all 320ms ease;
}
.faq-plate.active{border-color:var(--signal-orange);border-width:2px}
.faq-plate .faq-bar{
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:transparent;
  transition:background 240ms ease;
}
.faq-plate.active .faq-bar{background:var(--signal-orange)}
.faq-chev{transition:transform 280ms ease}
.faq-plate.active .faq-chev{transform:rotate(180deg)}

.coverflow-scene{
  perspective:1200px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-height:380px;
  position:relative;
  overflow:hidden;
}
.coverflow-card{
  flex:0 0 320px;
  background:var(--paper-white);
  border:1px solid var(--panel-edge);
  padding:32px 28px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  transition:all 480ms cubic-bezier(0.45,0,0.55,1);
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.coverflow-card[data-pos="0"]{
  transform:translateX(0) rotateY(0deg) scale(1);
  opacity:1;z-index:5;pointer-events:auto;
  border-color:var(--signal-orange);border-width:2px;
  box-shadow:var(--shadow-hard-orange);
}
.coverflow-card[data-pos="-1"]{
  transform:translateX(-340px) rotateY(28deg) scale(0.86);
  opacity:0.55;z-index:3;
}
.coverflow-card[data-pos="1"]{
  transform:translateX(340px) rotateY(-28deg) scale(0.86);
  opacity:0.55;z-index:3;
}
.coverflow-card[data-pos="-2"]{
  transform:translateX(-560px) rotateY(40deg) scale(0.7);
  opacity:0.25;z-index:2;
}
.coverflow-card[data-pos="2"]{
  transform:translateX(560px) rotateY(-40deg) scale(0.7);
  opacity:0.25;z-index:2;
}

.hover-reveal-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  padding:18px 12px;
  border-bottom:1px dashed var(--panel-edge);
  transition:background 240ms ease;
  cursor:pointer;
}
.hover-reveal-row:hover{background:rgba(255,77,0,0.04)}
.hover-reveal-row .reveal-photo{
  width:140px;
  height:140px;
  object-fit:cover;
  opacity:0;
  transform:translateX(20px);
  transition:opacity 280ms ease,transform 280ms ease;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.hover-reveal-row:hover .reveal-photo{opacity:1;transform:translateX(0)}

.cookie-banner{
  position:fixed;
  left:50%;bottom:24px;
  transform:translateX(-50%);
  background:var(--paper-white);
  border:2px solid var(--slate-anthracite);
  padding:22px 24px;
  max-width:380px;
  width:calc(100% - 48px);
  z-index:9999;
  box-shadow:6px 6px 0 var(--signal-orange);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  font-size:12px;
}

.sticky-split{
  display:grid;
  grid-template-columns:44% 56%;
  gap:48px;
  align-items:start;
}
.sticky-split .stick-col{
  position:sticky;
  top:120px;
}

.live-indicator{
  display:inline-flex;
  align-items:center;
  background:var(--paper-white);
  border:1px solid var(--signal-orange);
  padding:8px 14px;
  font-family:var(--mono-display);
  font-size:11px;
  font-weight:600;
  color:var(--slate-anthracite);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}

.skel-divider{
  height:3px;
  width:120px;
  background:var(--signal-orange);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 0,calc(100% - 4px) 100%,0 100%);
}

.pull-quote{
  font-family:var(--mono-body);
  font-style:italic;
  font-size:28px;
  line-height:1.35;
  position:relative;
  padding-left:20px;
}
.pull-quote::before{
  content:"";
  position:absolute;
  left:0;top:6px;bottom:6px;
  width:3px;
  background:var(--signal-orange);
}

.masonry-grid{
  column-count:3;
  column-gap:24px;
}
.masonry-card{
  break-inside:avoid;
  margin-bottom:24px;
  background:var(--paper-white);
  border:1px solid var(--panel-edge);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  overflow:hidden;
  transition:all 280ms ease;
}
.masonry-card:hover{
  border-color:var(--signal-orange);
  box-shadow:0 0 0 1px var(--signal-orange),0 12px 30px -8px rgba(255,77,0,0.25);
  transform:translateY(-3px);
}

.map-capsule{
  position:relative;
  border:2px solid var(--signal-orange);
  background:var(--paper-white);
  box-shadow:var(--shadow-hard-orange);
  padding:36px 32px;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
}

.skel-section{padding:96px 0;position:relative;overflow:hidden;overflow-x:hidden}
.skel-section-tight{padding:64px 0;position:relative;overflow:hidden}

.skel-h1{
  font-family:var(--mono-display);
  font-size:clamp(40px,7vw,96px);
  font-weight:800;
  line-height:0.95;
  letter-spacing:-0.02em;
  color:var(--slate-anthracite);
}
.skel-h2{
  font-family:var(--mono-display);
  font-size:clamp(30px,4.6vw,64px);
  font-weight:800;
  line-height:1;
  letter-spacing:-0.01em;
  color:var(--slate-anthracite);
}
.skel-eyebrow{
  font-family:var(--mono-display);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--steel-cold);
}

.skel-input{
  background:var(--paper-white);
  border:1.5px solid var(--slate-anthracite);
  padding:14px 16px;
  font-family:var(--mono-display);
  font-size:14px;
  color:var(--slate-anthracite);
  width:100%;
  transition:border-color 220ms ease;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.skel-input:focus{
  outline:none;
  border-color:var(--signal-orange);
  border-width:2px;
  padding:13px 15px;
}
.skel-input::placeholder{color:var(--steel-cold)}

.skel-textarea{
  background:var(--paper-white);
  border:1.5px solid var(--slate-anthracite);
  padding:14px 16px;
  font-family:var(--mono-display);
  font-size:14px;
  color:var(--slate-anthracite);
  width:100%;
  min-height:140px;
  resize:vertical;
  transition:border-color 220ms ease;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.skel-textarea:focus{
  outline:none;
  border-color:var(--signal-orange);
  border-width:2px;
  padding:13px 15px;
}

.site-header{
  position:fixed;
  top:0;left:0;right:0;
  height:80px;
  z-index:100;
  background:rgba(244,246,249,0.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--panel-edge);
}

.site-logo-wrap{
  position:relative;
  z-index:110;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
  text-align:center;
}

.burger{
  display:none;
  width:40px;
  height:40px;
  background:transparent;
  border:1.5px solid var(--slate-anthracite);
  cursor:pointer;
  position:relative;
  z-index:120;
}
.burger span{
  display:block;
  width:18px;
  height:2px;
  background:var(--slate-anthracite);
  margin:4px auto;
  transition:all 240ms ease;
}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{
  position:fixed;
  top:80px;left:0;right:0;
  background:rgba(244,246,249,0.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--panel-edge);
  z-index:90;
  max-height:0;
  overflow:hidden;
  transition:max-height 480ms cubic-bezier(0.45,0,0.55,1);
}
.mobile-menu.open{max-height:80vh}
.mobile-menu a{
  display:block;
  padding:18px 24px;
  border-bottom:1px solid var(--panel-edge);
  font-family:var(--mono-display);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--slate-anthracite);
  text-decoration:none;
}

.site-footer{
  background:var(--slate-anthracite);
  color:#FFFFFF;
  padding:80px 0 32px;
  position:relative;
  overflow:hidden;
}
.site-footer a{color:#FFFFFF;text-decoration:none;transition:color 220ms ease}
.site-footer a:hover{color:var(--signal-orange)}

.skel-mono-num{
  font-family:var(--mono-display);
  font-size:48px;
  font-weight:800;
  color:var(--signal-orange);
  line-height:1;
}

.skel-mono-sm{
  font-family:var(--mono-display);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--steel-cold);
}

@media (max-width:1024px){
  .sticky-split{grid-template-columns:1fr;gap:32px}
  .sticky-split .stick-col{position:static}
  .masonry-grid{column-count:2}
  .coverflow-card[data-pos="-1"]{transform:translateX(-260px) rotateY(28deg) scale(0.82)}
  .coverflow-card[data-pos="1"]{transform:translateX(260px) rotateY(-28deg) scale(0.82)}
  .coverflow-card[data-pos="-2"]{transform:translateX(-400px) rotateY(40deg) scale(0.6)}
  .coverflow-card[data-pos="2"]{transform:translateX(400px) rotateY(-40deg) scale(0.6)}
}

@media (max-width:768px){
  .skel-section{padding:64px 0}
  .site-nav-desktop{display:none}
  .burger{display:block}
  .mobile-menu{display:block}
  .skel-card-grow{min-height:220px}
  .stack-card{margin-bottom:16px;transform:none !important}
  .stack-card:nth-child(n){transform:none !important}
  .masonry-grid{column-count:1}
  .coverflow-card{flex:0 0 84vw}
  .coverflow-card[data-pos="0"]{transform:translateX(0) rotateY(0) scale(1)}
  .coverflow-card[data-pos="-1"]{transform:translateX(-78vw) rotateY(24deg) scale(0.78);opacity:0.4}
  .coverflow-card[data-pos="1"]{transform:translateX(78vw) rotateY(-24deg) scale(0.78);opacity:0.4}
  .coverflow-card[data-pos="-2"],.coverflow-card[data-pos="2"]{display:none}
  .hover-reveal-row{grid-template-columns:auto 1fr}
  .hover-reveal-row .reveal-photo{display:none}
  .cookie-banner{left:12px;right:12px;bottom:12px;max-width:none}
}

@media (max-width:480px){
  .pull-quote{font-size:20px}
  .site-header{height:72px}
  .mobile-menu{top:72px}
  .skew-plate{padding:32px 20px !important}
}