/* ═══════════════════════════════════════════════════════════
   OxeAI — Applied Intelligence
   Design system: deep navy field, hairline architecture,
   warm orange as the only source of energy.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ground */
  --bg:        #06090F;
  --bg-lift:   #0A0F1A;
  --bg-deep:   #04070C;

  /* structure */
  --line:      rgba(255,255,255,.075);
  --line-soft: rgba(255,255,255,.045);
  --line-hot:  rgba(245,155,35,.32);
  --glass:     rgba(255,255,255,.018);

  /* ink */
  --ink:       #EEF1F6;
  --ink-2:     #A6B0C0;
  --ink-3:     #6B7789;
  --ink-4:     #3D4757;

  /* energy */
  --amber:     #F59B23;
  --amber-lit: #FFB755;
  --amber-dim: rgba(245,155,35,.12);
  --azure:     #4B9BE0;
  --azure-dim: rgba(75,155,224,.14);

  /* metric */
  --gut: clamp(20px, 5vw, 72px);
  --max: 1360px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);

  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.011em;
  font-feature-settings:"cv02","cv03","cv04","ss01","tnum" 0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,canvas{ display:block; max-width:100%; }
h1,h2,h3,h4,p,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }

::selection{ background:var(--amber); color:#06090F; }

:focus-visible{
  outline:1px solid var(--amber);
  outline-offset:4px;
  border-radius:2px;
}

.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--amber); color:#06090F;
  padding:10px 18px; font-size:13px; font-weight:600;
  transition:top .3s var(--ease);
}
.skip:focus{ top:16px; }

/* ── film grain ─────────────────────────────── */
.grain{
  position:fixed; inset:-50%;
  z-index:99; pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ── scroll progress ────────────────────────── */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:1px;
  z-index:120; background:transparent; pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, rgba(245,155,35,0), var(--amber) 60%, var(--amber-lit));
  box-shadow:0 0 12px rgba(245,155,35,.55);
}

/* ═══════════ LAYOUT PRIMITIVES ═══════════ */
.wrap{
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.section{
  position:relative;
  padding-block:clamp(88px, 12vw, 180px);
}
.section + .section{ border-top:1px solid var(--line-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:26px;
}
.eyebrow i{
  font-style:normal;
  color:var(--amber);
  font-variant-numeric:tabular-nums;
  letter-spacing:.1em;
}
.eyebrow::after{
  content:""; width:clamp(28px,6vw,64px); height:1px;
  background:linear-gradient(90deg,var(--line-hot),transparent);
}

.h2{
  font-size:clamp(30px, 4.4vw, 60px);
  line-height:1.06;
  letter-spacing:-.036em;
  font-weight:500;
}
.h2--xl{ font-size:clamp(36px, 6vw, 82px); letter-spacing:-.042em; }
.soft{ color:var(--ink-3); }
.accent{
  background:linear-gradient(96deg, var(--amber-lit), var(--amber) 55%, #C87A17);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.lede{
  margin-top:26px;
  max-width:56ch;
  font-size:clamp(15px, 1.15vw, 17.5px);
  line-height:1.72;
  color:var(--ink-2);
  font-weight:300;
}
.lede--right{ margin-top:0; align-self:end; }
.lede--center{ margin-inline:auto; text-align:center; }

.head{ max-width:820px; }
.head--split{
  display:grid; gap:clamp(28px,4vw,72px);
  grid-template-columns:1fr; max-width:none;
}
.head--center{ max-width:760px; margin-inline:auto; text-align:center; }
.head--center .eyebrow::after{ display:none; }

@media (min-width:900px){
  .head--split{ grid-template-columns:1.25fr .9fr; align-items:end; }
}

/* ═══════════ BUTTONS ═══════════ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:15px 26px;
  font-size:14px; font-weight:500; letter-spacing:-.005em;
  border-radius:2px;
  transition:color .4s var(--ease), background .4s var(--ease),
             border-color .4s var(--ease), transform .5s var(--ease);
  overflow:hidden;
  white-space:nowrap;
}
.btn svg{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .5s var(--ease);
}
.btn:hover svg{ transform:translateX(4px); }
.btn span{ position:relative; z-index:1; }

.btn--solid{
  background:var(--amber); color:#080B10; font-weight:600;
  box-shadow:0 0 0 rgba(245,155,35,0);
}
.btn--solid::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg,var(--amber-lit),var(--amber));
  opacity:0; transition:opacity .45s var(--ease);
}
.btn--solid:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 40px -14px rgba(245,155,35,.65);
}
.btn--solid:hover::before{ opacity:1; }
.btn--solid svg{ position:relative; z-index:1; }

.btn--line{
  border:1px solid var(--line);
  color:var(--ink);
  background:rgba(255,255,255,.012);
  backdrop-filter:blur(8px);
}
.btn--line:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.045);
  transform:translateY(-2px);
}

.btn--ghost{ color:var(--ink-2); border:1px solid var(--line); }
.btn--ghost:hover{ color:var(--ink); border-color:var(--line-hot); }
.btn--sm{ padding:10px 18px; font-size:13px; }
.btn--full{ width:100%; margin-top:10px; }

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  height:var(--nav-h);
  transition:background .5s var(--ease), border-color .5s var(--ease), height .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  height:64px;
  background:rgba(6,9,15,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav__inner{
  height:100%;
  max-width:var(--max); margin-inline:auto;
  padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand__mark{ width:30px; height:30px; flex:none; overflow:visible; }
.bm-ring{ fill:none; stroke:rgba(255,255,255,.10); stroke-width:1.4; }
.bm-arc{
  fill:none; stroke:var(--amber); stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:88; stroke-dashoffset:0;
  transition:stroke-dashoffset .9s var(--ease);
}
.bm-core{ fill:var(--azure); }
.bm-node{ fill:var(--amber); }
.bm-line{ stroke:rgba(245,155,35,.45); stroke-width:1.2; }
.brand:hover .bm-arc{ stroke-dashoffset:88; }

.brand__type{
  font-size:20px; font-weight:600; letter-spacing:-.035em; color:var(--ink);
}
.brand__type em{
  font-style:normal; font-weight:600;
  background:linear-gradient(100deg,#8FC6F2,var(--azure));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.nav__links{ display:none; gap:34px; }
.nav__links a{
  position:relative;
  display:inline-flex; align-items:baseline; gap:7px;
  font-size:13.5px; color:var(--ink-2);
  transition:color .35s var(--ease);
}
.nav__links a i{
  font-style:normal; font-size:10px; color:var(--ink-4);
  font-variant-numeric:tabular-nums; letter-spacing:.08em;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:100%; height:1px; background:var(--amber);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover i{ color:var(--amber); }
.nav__links a:hover::after{ transform:scaleX(1); }

.nav__right{ display:flex; align-items:center; gap:14px; }
.nav__right .btn--ghost{ display:none; }

.burger{
  width:40px; height:40px;
  display:grid; place-content:center; gap:6px;
  border:1px solid var(--line); border-radius:2px;
}
.burger span{
  display:block; width:17px; height:1px; background:var(--ink);
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

@media (min-width:1040px){
  .nav__links{ display:flex; }
  .nav__right .btn--ghost{ display:inline-flex; }
  .burger{ display:none; }
}

/* ── mobile menu ── */
.menu{
  position:fixed; inset:0; z-index:105;
  background:rgba(4,7,12,.97);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  padding:calc(var(--nav-h) + 40px) var(--gut) 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.menu.is-open{ opacity:1; visibility:visible; }
.menu__list{ display:flex; flex-direction:column; gap:4px; }
.menu__list a{
  display:flex; align-items:baseline; gap:14px;
  padding:16px 0;
  font-size:clamp(26px,7vw,38px); font-weight:500; letter-spacing:-.035em;
  border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.menu.is-open .menu__list a{ opacity:1; transform:none; }
.menu.is-open .menu__list a:nth-child(1){ transition-delay:.08s; }
.menu.is-open .menu__list a:nth-child(2){ transition-delay:.14s; }
.menu.is-open .menu__list a:nth-child(3){ transition-delay:.20s; }
.menu.is-open .menu__list a:nth-child(4){ transition-delay:.26s; }
.menu.is-open .menu__list a:nth-child(5){ transition-delay:.32s; }
.menu__list a i{
  font-style:normal; font-size:11px; color:var(--amber);
  letter-spacing:.1em; font-variant-numeric:tabular-nums;
}
.menu__list a:hover{ color:var(--amber); }
.menu__foot{
  display:flex; justify-content:space-between; gap:16px;
  font-size:12px; color:var(--ink-3); letter-spacing:.02em;
}

/* ═══════════ 1 · HERO ═══════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:calc(var(--nav-h) + 48px) 104px;
  overflow:hidden;
  isolation:isolate;
}
.hero__canvas{
  position:absolute; inset:0; z-index:-3;
  width:100%; height:100%;
}
.hero__veil{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  /* scrim on the reading side only — the structure stays legible on the right */
  background:
    radial-gradient(70% 55% at 8% 86%, rgba(245,155,35,.07), transparent 68%),
    linear-gradient(96deg, rgba(6,9,15,.94) 0%, rgba(6,9,15,.80) 26%, rgba(6,9,15,.30) 52%, rgba(6,9,15,0) 74%),
    linear-gradient(180deg, rgba(6,9,15,.55) 0%, rgba(6,9,15,0) 22%, rgba(6,9,15,0) 62%, rgba(6,9,15,.72) 92%, var(--bg) 100%);
}
@media (max-width:899px){
  .hero__veil{
    background:
      linear-gradient(180deg, rgba(6,9,15,.68) 0%, rgba(6,9,15,.58) 34%, rgba(6,9,15,.80) 78%, var(--bg) 100%);
  }
}
.hero__horizon{
  position:absolute; left:0; right:0; bottom:0; height:38vh; z-index:-2;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--bg) 84%);
}
.hero__grid{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  max-width:var(--max); margin-inline:auto;
  padding-inline:var(--gut);
  display:none; justify-content:space-between;
}
.hero__grid span{ width:1px; height:100%; background:var(--line-soft); }
@media (min-width:900px){ .hero__grid{ display:flex; } }

.hero__inner{ position:relative; width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

.hero__meta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:34px;
}
.hero__meta .dot{ color:var(--ink-4); }
/* the separator would dangle at a line end once the meta wraps */
@media (max-width:560px){ .hero__meta .dot{ display:none; } }
.tick{
  width:6px; height:6px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 0 rgba(245,155,35,.55);
  animation:pulse 3s var(--ease-io) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(245,155,35,.5); }
  70%{ box-shadow:0 0 0 11px rgba(245,155,35,0); }
  100%{ box-shadow:0 0 0 0 rgba(245,155,35,0); }
}

/* The headline is built as a record: an observed fact, then an unanswered
   field. Scale carries the hierarchy — amber is a rule, never fill. */
.hero__title{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(18px, 2.4vw, 32px);
  font-weight:500;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.08em; }
.hero__title .line__in{
  display:block;
  transform:translateY(105%);
  opacity:0;
  transition:transform 1.15s var(--ease), opacity 1.15s var(--ease);
}
.is-ready .hero__title .line__in{ transform:none; opacity:1; }

/* ── the stated fact: deliberately understated ── */
.hero__stmt{
  display:block;
  font-size:clamp(20px, 2.45vw, 37px);
  line-height:1.15;
  letter-spacing:-.026em;
  font-weight:400;
  color:var(--ink-2);
}
.hero__stmt .stop{ font-style:normal; color:var(--amber); }
.hero__stmt .line:nth-child(1) .line__in{ transition-delay:.14s; }
.hero__stmt .line:nth-child(2) .line__in{ transition-delay:.24s; }

/* ── the unanswered field ── */
.hero__ask{
  position:relative;
  display:flex; align-items:baseline; gap:.14em;
  width:min(640px, 100%);
  padding-bottom:.16em;
  font-size:clamp(42px, 6vw, 86px);
  line-height:1.02;
  letter-spacing:-.048em;
  color:var(--ink);
}
.hero__ask .line__in{ transition-delay:.40s; }

/* the rule runs past the words into the blank the visitor has not filled */
.hero__ask::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--amber) 0%, var(--amber) 58%, rgba(245,155,35,.12) 100%);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s var(--ease) .72s;
}
.is-ready .hero__ask::after{ transform:scaleX(1); }

.hero__caret{
  display:inline-block; flex:none;
  width:.052em; height:.72em;
  background:var(--amber);
  opacity:0;
  animation:caret 1.2s steps(1) 1.7s infinite;
}
@keyframes caret{ 0%,45%{ opacity:1; } 46%,100%{ opacity:0; } }

.hero__sub{
  margin-top:34px; max-width:52ch;
  font-size:clamp(15px, 1.28vw, 19px);
  line-height:1.68; font-weight:300;
  color:var(--ink-2);
}

.hero__cta{ margin-top:44px; display:flex; flex-wrap:wrap; gap:14px; }

.hero__strap{
  margin-top:clamp(48px, 6vw, 74px);
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--line-soft);
  border-block:1px solid var(--line-soft);
  max-width:820px;
}
.hero__strap div{
  background:var(--bg);
  padding:18px 22px 18px 0;
  display:flex; flex-direction:column; gap:3px;
}
.hero__strap b{ font-size:13px; font-weight:600; letter-spacing:-.01em; }
.hero__strap span{ font-size:12.5px; color:var(--ink-3); font-weight:300; }
@media (min-width:760px){
  .hero__strap{ grid-template-columns:repeat(3,1fr); }
  .hero__strap div{ padding-inline:26px; }
  .hero__strap div:first-child{ padding-left:0; }
}

.hero__scroll{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-4);
  opacity:0; transition:opacity 1s var(--ease) 1.4s, color .3s;
}
.is-ready .hero__scroll{ opacity:1; }
.hero__scroll:hover{ color:var(--ink-2); }
.hero__scroll-line{
  position:relative; width:1px; height:52px;
  background:var(--line); overflow:hidden;
}
.hero__scroll-line i{
  position:absolute; inset:0; display:block;
  background:linear-gradient(180deg, transparent, var(--amber));
  animation:trickle 2.6s var(--ease-io) infinite;
}
@keyframes trickle{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}
@media (max-width:759px){ .hero__scroll{ display:none; } }

/* ═══════════ 2 · POSITIONING ═══════════ */
.pillars{
  margin-top:clamp(56px, 7vw, 96px);
  display:grid; gap:20px;
  grid-template-columns:1fr;
}
@media (min-width:820px){ .pillars{ grid-template-columns:repeat(3,1fr); gap:24px; } }

.pillar{
  position:relative;
  padding:clamp(26px,3vw,40px) clamp(24px,2.6vw,36px) clamp(30px,3.4vw,44px);
  border:1px solid var(--line-soft);
  border-radius:3px;
  background:
    linear-gradient(168deg, rgba(255,255,255,.030), rgba(255,255,255,.004) 46%),
    rgba(10,15,26,.42);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
  transition:border-color .6s var(--ease), transform .6s var(--ease), background .6s var(--ease);
}
.pillar::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16) 22%, rgba(255,255,255,.16) 78%, transparent);
  opacity:.7;
}
.pillar__glow{
  position:absolute; top:-40%; left:-20%; width:80%; height:80%;
  background:radial-gradient(circle, rgba(245,155,35,.20), transparent 66%);
  filter:blur(30px); opacity:0;
  transition:opacity .7s var(--ease), transform .9s var(--ease);
  pointer-events:none;
}
.pillar:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.14);
}
.pillar:hover .pillar__glow{ opacity:1; transform:translate(18%,14%); }

.pillar__idx{
  display:block; font-size:11px; letter-spacing:.2em;
  color:var(--amber); font-variant-numeric:tabular-nums;
  margin-bottom:26px;
}
.pillar h3{
  font-size:clamp(21px,1.9vw,27px); font-weight:500; letter-spacing:-.028em;
  margin-bottom:14px;
}
.pillar p{
  font-size:14.5px; line-height:1.72; color:var(--ink-2); font-weight:300;
}
.pillar ul{
  margin-top:26px; padding-top:20px;
  border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:10px;
}
.pillar li{
  display:flex; align-items:center; gap:11px;
  font-size:13px; color:var(--ink-3);
}
.pillar li::before{
  content:""; width:4px; height:4px; flex:none;
  background:var(--amber); opacity:.55;
  transform:rotate(45deg);
}

/* ═══════════ 3 · SERVICES ═══════════ */
.index{
  margin-top:clamp(52px, 7vw, 88px);
  border-top:1px solid var(--line);
}
.row{ border-bottom:1px solid var(--line); position:relative; }
.row::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:linear-gradient(90deg,var(--amber),rgba(245,155,35,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease);
}
.row[data-open="true"]::after{ transform:scaleX(1); }

.row__bar{
  width:100%;
  display:grid; align-items:center; gap:16px;
  grid-template-columns:auto 1fr auto;
  padding:clamp(24px,2.8vw,34px) 0;
  text-align:left;
  transition:padding-left .6s var(--ease);
}
.row__bar:hover{ padding-left:8px; }
.row__idx{
  font-size:11px; letter-spacing:.18em; color:var(--ink-4);
  font-variant-numeric:tabular-nums;
  transition:color .5s var(--ease);
}
.row[data-open="true"] .row__idx, .row__bar:hover .row__idx{ color:var(--amber); }

.row__title{
  font-size:clamp(22px,3.2vw,44px); font-weight:400; letter-spacing:-.035em;
  line-height:1.1; color:var(--ink-2);
  transition:color .5s var(--ease);
}
.row[data-open="true"] .row__title, .row__bar:hover .row__title{ color:var(--ink); }

.row__hint{
  display:none;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4);
  text-align:right;
}
@media (min-width:900px){
  .row__hint{ display:block; }
  /* the hint joins the bar, so the bar needs a fourth track */
  .row__bar{ grid-template-columns:auto 1fr auto auto; gap:24px; }
}

.row__sign{
  position:relative; width:34px; height:34px; flex:none;
  border:1px solid var(--line); border-radius:50%;
  display:grid; place-content:center;
  transition:border-color .5s var(--ease), transform .6s var(--ease), background .5s;
}
.row__sign i{
  position:absolute; top:50%; left:50%; width:11px; height:1px;
  background:var(--ink-2); transform:translate(-50%,-50%);
  transition:transform .55s var(--ease), background .5s;
}
.row__sign i:last-child{ transform:translate(-50%,-50%) rotate(90deg); }
.row[data-open="true"] .row__sign{ border-color:var(--line-hot); background:var(--amber-dim); }
.row[data-open="true"] .row__sign i{ background:var(--amber); }
.row[data-open="true"] .row__sign i:last-child{ transform:translate(-50%,-50%) rotate(180deg); }
.row__bar:hover .row__sign{ transform:rotate(90deg); border-color:rgba(255,255,255,.2); }

.row__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .75s var(--ease);
}
.row[data-open="true"] .row__body{ grid-template-rows:1fr; }
.row__inner{
  overflow:hidden; min-height:0;
  opacity:0; transition:opacity .5s var(--ease) .08s;
}
.row[data-open="true"] .row__inner{ opacity:1; }

.row__inner > *:first-child{ padding-top:2px; }
.row__desc{
  max-width:54ch; font-size:15px; line-height:1.74;
  color:var(--ink-2); font-weight:300;
  padding-bottom:34px;
}
.row__list{
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--line-soft);
  border-top:1px solid var(--line-soft);
  margin-bottom:clamp(30px,3.4vw,46px);
}
@media (min-width:700px){ .row__list{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .row__list{ grid-template-columns:repeat(4,1fr); } }
.row__list li{
  background:var(--bg);
  padding:20px 20px 22px 0;
  display:flex; flex-direction:column; gap:6px;
  transition:background .5s var(--ease);
}
@media (min-width:700px){
  .row__list li{ padding-inline:22px; }
  .row__list li:first-child{ padding-left:0; }
}
.row__list li:hover{ background:var(--bg-lift); }
.row__list b{ font-size:13.5px; font-weight:600; letter-spacing:-.012em; }
.row__list span{ font-size:12.8px; color:var(--ink-3); font-weight:300; line-height:1.6; }

@media (min-width:900px){
  .row__desc{ padding-left:calc(48px + 16px); }
  .row__list{ margin-left:calc(48px + 16px); }
}

/* ═══════════ 4 · WHY ═══════════ */
.why{ overflow:hidden; }
.why__aura{
  position:absolute; top:-10%; right:-14%;
  width:min(760px,86vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(30,58,95,.5), transparent 66%);
  filter:blur(60px); pointer-events:none;
  will-change:transform;
}
.why__grid{
  display:grid; gap:clamp(48px,6vw,96px);
  grid-template-columns:1fr;
}
@media (min-width:980px){
  .why__grid{ grid-template-columns:1fr 1fr; align-items:start; }
  .why__lead{ position:sticky; top:calc(var(--nav-h) + 56px); }
}

.why__list{ display:flex; flex-direction:column; }
.why__list li{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,2.4vw,34px);
  padding:clamp(24px,3vw,34px) 0;
  border-top:1px solid var(--line-soft);
  transition:border-color .5s var(--ease);
}
.why__list li:last-child{ border-bottom:1px solid var(--line-soft); }
.why__list li:hover{ border-top-color:var(--line-hot); }
.why__no{
  font-size:11px; letter-spacing:.2em; color:var(--ink-4);
  font-variant-numeric:tabular-nums; padding-top:6px;
  transition:color .5s var(--ease);
}
.why__list li:hover .why__no{ color:var(--amber); }
.why__list h3{
  font-size:clamp(18px,1.7vw,23px); font-weight:500;
  letter-spacing:-.026em; margin-bottom:9px;
}
.why__list p{
  font-size:14.5px; line-height:1.72; color:var(--ink-2); font-weight:300;
  max-width:46ch;
}

/* ═══════════ 5 · VISION ═══════════ */
.vision{ background:linear-gradient(180deg, var(--bg), var(--bg-deep) 55%, var(--bg)); }

.timeline{ position:relative; margin-top:clamp(64px,8vw,110px); }
.timeline__rail{
  position:absolute; left:0; top:5px;
  width:1px; height:100%;
  background:var(--line);
  overflow:hidden;
}
.timeline__rail span{
  display:block; width:100%; height:0;
  background:linear-gradient(180deg, var(--azure), var(--amber));
  box-shadow:0 0 10px rgba(245,155,35,.4);
  transition:height .2s linear;
}
.timeline__items{
  display:grid; gap:0;
  grid-template-columns:1fr;
  padding-left:32px;
}
@media (min-width:860px){
  .timeline__rail{ top:0; left:0; width:100%; height:1px; }
  .timeline__rail span{
    height:100%; width:0;
    background:linear-gradient(90deg, var(--azure), var(--amber));
    transition:width .2s linear;
  }
  .timeline__items{
    grid-template-columns:repeat(3,1fr);
    padding-left:0; gap:1px;
    background:var(--line-soft);
  }
}

.era{
  position:relative;
  padding:34px 0 40px;
  border-bottom:1px solid var(--line-soft);
}
@media (min-width:860px){
  .era{
    background:var(--bg-deep);
    padding:44px clamp(22px,2.4vw,40px) clamp(44px,5vw,72px);
    border-bottom:0;
  }
  .era:first-child{ padding-left:0; }
}
.era__node{
  position:absolute; left:-32px; top:40px;
  width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:1px solid var(--ink-4);
  transform:translateX(-4px);
  transition:border-color .6s var(--ease), background .6s var(--ease), box-shadow .6s;
}
@media (min-width:860px){
  .era__node{ left:0; top:0; transform:translate(-4px,-5px); }
  .era:first-child .era__node{ left:0; }
}
.era.is-in .era__node{ border-color:var(--azure); background:var(--azure); }
.era--now.is-in .era__node{
  border-color:var(--amber); background:var(--amber);
  box-shadow:0 0 0 5px rgba(245,155,35,.14), 0 0 22px rgba(245,155,35,.6);
}
.era__year{
  display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}
.era--now .era__year{ color:var(--amber); }
.era h3{
  font-size:clamp(23px,2.4vw,34px); font-weight:500; letter-spacing:-.032em;
  color:var(--ink-3); margin-bottom:14px;
  transition:color .6s var(--ease);
}
.era.is-in h3{ color:var(--ink-2); }
.era--now.is-in h3{ color:var(--ink); }
.era p{
  font-size:14.5px; line-height:1.72; color:var(--ink-3); font-weight:300;
  max-width:38ch;
}
.era--now p{ color:var(--ink-2); }

.vision__close{
  margin:clamp(64px,8vw,104px) auto 0;
  max-width:62ch; text-align:center;
  font-size:clamp(17px,1.7vw,23px); line-height:1.62;
  font-weight:300; letter-spacing:-.022em;
  color:var(--ink-2);
}

/* ═══════════ 6 · CONTACT ═══════════ */
.contact{ position:relative; overflow:hidden; }
.contact__aura{
  position:absolute; left:50%; bottom:-46%; transform:translateX(-50%);
  width:min(1000px,120vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(245,155,35,.11), transparent 62%);
  filter:blur(50px); pointer-events:none;
}
.contact__grid{
  display:grid; gap:clamp(48px,6vw,88px);
  grid-template-columns:1fr;
}
@media (min-width:980px){
  .contact__grid{ grid-template-columns:1.1fr .9fr; align-items:start; }
}
.contact__direct{
  margin-top:40px; padding-top:24px;
  border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:6px;
}
.contact__direct a{
  font-size:clamp(17px,1.7vw,21px); letter-spacing:-.02em;
  color:var(--ink); width:max-content;
  border-bottom:1px solid var(--line-hot);
  padding-bottom:3px;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.contact__direct a:hover{ color:var(--amber); border-color:var(--amber); }
.contact__direct span{ font-size:12.5px; color:var(--ink-4); }

/* form */
.form{
  padding:clamp(26px,3vw,38px);
  border:1px solid var(--line-soft); border-radius:3px;
  background:linear-gradient(170deg, rgba(255,255,255,.028), rgba(255,255,255,.004) 52%), rgba(10,15,26,.4);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.field{ position:relative; margin-bottom:26px; }
.field input, .field textarea{
  width:100%; background:transparent; border:0;
  border-bottom:1px solid var(--line);
  padding:14px 0 11px;
  font-size:15px; letter-spacing:-.012em;
  border-radius:0; resize:vertical;
  transition:border-color .4s var(--ease);
}
.field textarea{ min-height:76px; }
/* iOS zooms the page when a focused control is under 16px */
@media (max-width:820px){
  .field input, .field textarea, .field label{ font-size:16px; }
}
.field label{
  position:absolute; left:0; top:14px;
  font-size:15px; color:var(--ink-3); pointer-events:none;
  transition:transform .4s var(--ease), font-size .4s var(--ease), color .4s var(--ease);
  transform-origin:left top;
}
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--amber); }
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-19px) scale(.72);
  color:var(--amber);
}
.field.is-bad input, .field.is-bad textarea{ border-bottom-color:#D1524A; }

.form__note{
  margin-top:18px; min-height:18px;
  font-size:12.5px; color:var(--ink-3);
}
.form__note.is-ok{ color:var(--amber); }

/* ═══════════ FOOTER ═══════════ */
.footer{
  border-top:1px solid var(--line-soft);
  padding-block:clamp(56px,7vw,88px) 34px;
  background:var(--bg-deep);
}
.footer__top{
  display:grid; gap:clamp(32px,4vw,64px);
  grid-template-columns:1fr;
  padding-bottom:clamp(48px,6vw,76px);
}
@media (min-width:820px){
  .footer__top{ grid-template-columns:auto 1fr; align-items:start; }
}
.brand--foot .brand__mark{ width:38px; height:38px; }
.brand--foot .brand__type{ font-size:25px; }
/* Single unbroken line: inputs read quiet, the arrow carries the accent,
   the outcome lands bright. Sized in vw so nowrap can never overflow —
   the tightest point is just above 820px, where the footer splits into
   two columns and the available width drops sharply. */
.footer__stmt{
  font-size:clamp(12px, 3.1vw, 26px); line-height:1.3;
  letter-spacing:-.03em; font-weight:400;
  white-space:nowrap;
  margin-left:auto;
}
.footer__inputs{ color:var(--ink-2); }
.footer__arrow{
  color:var(--amber);
  margin-inline:.16em;
  font-weight:300;
}
.footer__outcome{ color:var(--ink); }
@media (max-width:819px){ .footer__stmt{ margin-left:0; } }

.footer__bottom{
  display:flex; flex-wrap:wrap; gap:20px 30px;
  justify-content:space-between; align-items:center;
  padding-top:30px; border-top:1px solid var(--line-soft);
}
.footer__nav{ display:flex; flex-wrap:wrap; gap:8px 26px; }
.footer__nav a{
  font-size:13px; color:var(--ink-3);
  transition:color .35s var(--ease);
}
.footer__nav a:hover{ color:var(--amber); }
.footer__copy{ font-size:12px; color:var(--ink-4); letter-spacing:.01em; }

/* ═══════════ REVEAL ═══════════ */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:calc(var(--d, 0) * 95ms);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal, .hero__title .line__in, .hero__scroll{ opacity:1 !important; transform:none !important; }
  /* the caret reads as a resting cursor rather than disappearing */
  .hero__caret{ opacity:1 !important; }
  .hero__ask::after{ transform:scaleX(1) !important; }
}