:root {
  --bg: #05070c;
  --bg-raised: #0a0e18;
  --ink: #edf2fa;
  --ink-dim: #8b95a8;
  --blue: #3d7fff;
  --blue-bright: #6fb4ff;
  --blue-deep: #123064;
  --line: rgba(237, 242, 250, 0.12);
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --shell: min(1320px, calc(100% - 8rem));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.accent { color: var(--blue); }
.skip-link { position: fixed; z-index: 200; top: -70px; left: 20px; padding: 12px 16px; background: var(--blue); color: white; }
.skip-link:focus { top: 20px; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 4px; }

.accent-glow {
  font-style: normal;
  background: linear-gradient(100deg, var(--blue) 0%, var(--blue-bright) 60%, #a5d8ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(61, 127, 255, 0.35));
}

.intro { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: #030509; cursor: pointer; }
.intro-inner { text-align: center; }
.intro-mark { position: relative; width: 56px; height: 56px; margin: 0 auto 1.25rem; border: 1px solid rgba(61,127,255,.35); border-radius: 18px; display: grid; place-items: center; font: 700 31px/1 var(--font-display); color: var(--ink); box-shadow: inset 0 0 28px rgba(61,127,255,.12); opacity: 0; transform: scale(.8); }
.intro-mark i { position: absolute; width: 7px; height: 7px; right: 8px; bottom: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 13px rgba(61,127,255,.9); }
.intro-mask { overflow: hidden; }
.intro-word { display: block; font: 700 clamp(2.4rem, 8vw, 6rem)/1.05 var(--font-display); letter-spacing: .08em; transform: translateY(110%); }
.intro-word-accent { color: var(--blue); text-shadow: 0 0 40px rgba(61,127,255,.5); }
.intro-line { height: 2px; margin-top: 1.5rem; background: linear-gradient(90deg, transparent, var(--blue), transparent); transform: scaleX(0); }

.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hero-canvas-wrap { position: absolute; inset: 0; z-index: 0; opacity: 0; }
#hero-canvas { display: block; width: 100%; height: 100%; }
.hero-static .hero-canvas-wrap { opacity: 1; background: radial-gradient(ellipse 80% 55% at 50% 78%, rgba(61,127,255,.22), transparent 65%), radial-gradient(ellipse 45% 35% at 72% 60%, rgba(18,48,100,.55), transparent 70%); }
.hero-static #hero-canvas { display: none; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,7,12,.55) 0%, rgba(5,7,12,.15) 35%, rgba(5,7,12,.25) 70%, var(--bg) 100%); }

.hero-nav { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 1.6rem clamp(1.5rem,5vw,4rem); }
.nav-brand { display: inline-flex; align-items: center; gap: .7rem; font: 700 1.15rem/1 var(--font-display); letter-spacing: .02em; color: var(--ink); }
.brand-mark { position: relative; width: 30px; height: 30px; border: 1px solid rgba(61,127,255,.32); border-radius: 9px; display: grid; place-items: center; background: rgba(10,14,24,.8); font: 700 17px/1 var(--font-display); }
.brand-mark i { position: absolute; width: 4px; height: 4px; right: 4px; bottom: 5px; border-radius: 50%; background: var(--blue); }
.nav-right { display: flex; align-items: center; gap: 1.4rem; }
.nav-links { display: flex; gap: 1.3rem; margin-right: .4rem; }
.nav-links a, .nav-phone { color: var(--ink-dim); font-size: .95rem; font-weight: 500; transition: color .25s; }
.nav-links a:hover, .nav-phone:hover { color: var(--blue-bright); }
.nav-call { padding: .55rem 1.2rem; border: 1px solid rgba(237,242,250,.25); border-radius: 99px; font-size: .95rem; font-weight: 500; transition: border-color .25s, box-shadow .25s, color .25s; }
.nav-call:hover { border-color: var(--blue); color: var(--blue-bright); box-shadow: 0 0 18px rgba(61,127,255,.35); }

.hero-content { position: relative; z-index: 2; width: min(68rem, calc(100% - 3rem)); margin-left: clamp(1.5rem,5vw,4rem); }
.hero-eyebrow { display: block; margin-bottom: 1.4rem; color: var(--ink-dim); font: 500 clamp(.8rem,1.4vw,.95rem)/1.6 var(--font-body); letter-spacing: .22em; text-transform: uppercase; }
.hero-title { margin-bottom: 1.8rem; font: 700 clamp(2.6rem,7.2vw,6.2rem)/1.04 var(--font-display); letter-spacing: -.02em; }
.hero-line { display: block; overflow: hidden; }
.hero-line-inner { display: block; transform: translateY(110%); }
.hero-sub { max-width: 38rem; margin-bottom: 2.4rem; color: var(--ink-dim); font-size: clamp(1rem,1.6vw,1.2rem); }
[data-hero-fade] { opacity: 0; }
.motion-static [data-hero-fade] { opacity: 1; }
.motion-static .hero-line-inner { transform: none; }
.motion-static .hero-canvas-wrap { opacity: 1; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn { display: inline-flex; justify-content: center; align-items: center; min-height: 54px; padding: .8rem 2.1rem; border: 1px solid transparent; border-radius: 99px; font: 500 1.05rem/1 var(--font-display); transition: transform .25s, box-shadow .25s, background .25s, border-color .25s; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 0 28px rgba(61,127,255,.45); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 44px rgba(61,127,255,.65); }
.btn-ghost { border-color: rgba(237,242,250,.25); color: var(--ink); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-bright); transform: translateY(-2px); }
.hero-scroll-cue { position: absolute; z-index: 2; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .6rem; color: var(--ink-dim); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; }
.scroll-cue-line { width: 1px; height: 44px; background: linear-gradient(180deg,var(--blue),transparent); animation: cue-drop 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue-drop { 0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom} }

.concept-section { width: var(--shell); margin: 0 auto; padding: clamp(6rem,12vh,10rem) 0; }
.section-head { display: grid; grid-template-columns:minmax(0,1fr) minmax(280px,390px); column-gap: clamp(3rem,8vw,8rem); align-items:end; margin-bottom: 3.5rem; }
.kicker { grid-column: 1/-1; margin-bottom: 1rem; color: var(--blue); font-size: .8rem; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; }
.section-title { max-width: 48rem; font: 700 clamp(2.4rem,5vw,4.7rem)/1.04 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.section-lead { color: var(--ink-dim); }
.filter-row { display: flex; gap: .55rem; padding: 1.4rem 0 2.2rem; border-top: 1px solid var(--line); }
.filter-row button { min-height: 42px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink-dim); cursor: pointer; font-size: .78rem; transition: background .2s,border-color .2s,color .2s; }
.filter-row button:hover, .filter-row button:focus-visible, .filter-row button.active { border-color: var(--blue); background: var(--blue); color: white; }

.concept-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6rem 1.4rem; }
.concept-card { min-width: 0; }
.concept-card-wide { grid-column: 1/-1; }
.concept-card[hidden] { display: none; }
.concept-card a { display: block; }
.concept-image { position: relative; height: 430px; overflow: hidden; background: var(--bg-raised); box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.concept-card-wide .concept-image { height: min(66vw,700px); }
.concept-image::before { content:""; position:absolute; z-index:1; inset:0; border:1px solid var(--line); pointer-events:none; }
.concept-image::after { content:""; position:absolute; z-index:2; left:0; right:100%; bottom:0; height:3px; background:var(--blue); box-shadow:0 0 18px rgba(61,127,255,.8); transition:right .55s cubic-bezier(.2,.75,.2,1); }
.concept-card:hover .concept-image::after, .concept-card:focus-within .concept-image::after { right:0; }
.concept-image img { width:100%; height:115%; display:block; object-fit:cover; filter:saturate(.72) brightness(.78); transform:translateY(-6%); transition:filter .5s,transform .8s cubic-bezier(.2,.75,.2,1); }
.concept-card:hover img, .concept-card:focus-within img { filter:saturate(1) brightness(.94); transform:translateY(-6%) scale(1.035); }
.concept-copy { min-height: 116px; display:grid; grid-template-columns:42px 1fr auto; gap:1rem; align-items:start; padding:1.5rem .1rem 0; }
.concept-copy>span { padding-top:.3rem; color:var(--blue); font-size:.68rem; font-weight:600; }
.concept-copy h3 { font:700 1.7rem/1.05 var(--font-display); letter-spacing:-.025em; }
.concept-copy p { margin-top:.45rem; color:var(--ink-dim); font-size:.82rem; }
.concept-copy b { padding-top:.35rem; color:var(--ink-dim); font-size:.72rem; font-weight:500; transition:color .2s; }
.concept-card:hover .concept-copy b { color:var(--blue-bright); }

.closing { position:relative; width:var(--shell); min-height:670px; margin:0 auto; padding:7rem 0; border-top:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.closing-glow { position:absolute; width:min(70vw,900px); aspect-ratio:1; right:-25%; top:5%; border-radius:50%; background:radial-gradient(circle,rgba(61,127,255,.16),transparent 68%); pointer-events:none; }
.closing h2 { position:relative; max-width:66rem; font:700 clamp(3rem,6.2vw,5.8rem)/.98 var(--font-display); letter-spacing:-.035em; text-wrap:balance; }
.closing-actions { position:relative; display:flex; gap:1rem; margin-top:2.5rem; }
.footer { width:var(--shell); min-height:130px; margin:0 auto; padding:2rem 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1.4fr auto; gap:2rem; align-items:center; color:var(--ink-dim); font-size:.78rem; }
.footer>a:last-child { color:var(--ink); }

@media (max-width: 900px) {
  :root { --shell: calc(100% - 3rem); }
  .nav-links { display:none; }
  .section-head { grid-template-columns:1fr; gap:1.8rem; }
  .section-head .kicker { grid-column:auto; }
  .concept-image { height:350px; }
  .concept-card-wide .concept-image { height:590px; }
}

@media (max-width: 600px) {
  :root { --shell: calc(100% - 2rem); }
  .hero-nav { padding:1.25rem 1rem; }
  .brand-mark { width:28px; height:28px; }
  .nav-brand { font-size:.95rem; gap:.5rem; }
  .nav-phone { display:none; }
  .nav-call { padding:.52rem .9rem; font-size:.82rem; }
  .hero-content { width:calc(100% - 2rem); margin-left:1rem; }
  .hero-eyebrow { font-size:.68rem; letter-spacing:.16em; }
  .hero-title { font-size:clamp(2.15rem,9.3vw,2.5rem); }
  .hero-line-inner { white-space:nowrap; }
  .hero-sub { font-size:.98rem; max-width:31rem; }
  .hero-cta { flex-direction:column; }
  .hero-cta .btn { width:100%; }
  .hero-scroll-cue { display:none; }
  .concept-section { padding:6rem 0; }
  .section-title { font-size:2.65rem; }
  .filter-row { overflow-x:auto; }
  .filter-row button { flex:none; }
  .concept-grid { display:block; }
  .concept-card, .concept-card-wide { margin-bottom:4.3rem; }
  .concept-image, .concept-card-wide .concept-image { height:330px; }
  .concept-copy { grid-template-columns:28px 1fr; }
  .concept-copy b { grid-column:2; }
  .closing { min-height:600px; padding:6rem 0; }
  .closing h2 { font-size:3rem; }
  .closing-actions { flex-direction:column; }
  .footer { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; padding:2.5rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .intro { display:none; }
  .intro-word, .hero-line-inner { transform:none; }
  [data-hero-fade] { opacity:1; }
  .hero-canvas-wrap { opacity:1; }
  .scroll-cue-line { animation:none; }
  .concept-image img, .concept-image::after, .btn { transition:none; }
}