/* ============================================================
   AHMED FINE — dark cinematic textile house
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=TASA+Orbiter:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #06090F;
  --ink-2:      #090D17;
  --ink-3:      #0C1322;
  --navy:       #0A2A66;
  --navy-soft:  #103a86;
  /* accent — navy blue family (replaces former teal) */
  --teal:       #1E3F8F;
  --teal-bright:#5E84EE;
  --teal-glow:  rgba(94,132,238,.50);
  --paper:      #F4F1EA;
  --text:       rgba(244,241,234,.90);
  --muted:      rgba(244,241,234,.52);
  --faint:      rgba(244,241,234,.34);
  --line:       rgba(244,241,234,.12);
  --line-2:     rgba(244,241,234,.07);

  --sans: "TASA Orbiter", system-ui, -apple-system, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1320px;
  --pad: clamp(20px, 5vw, 88px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  font-weight:400;
}
body.menu-open{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--teal); color:#fff; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:#1a2438; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#243150; }

/* ---------- shared layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
section{ position:relative; }

.eyebrow{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--teal-bright);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:linear-gradient(90deg,var(--teal-bright),transparent);
}
.serif{ font-family:var(--serif); font-style:italic; font-weight:400; }

h1,h2,h3{ font-weight:600; letter-spacing:-.022em; line-height:1; color:var(--paper); }
.h-sec{ font-size:clamp(2.1rem,4.6vw,3.9rem); line-height:1.02; letter-spacing:-.03em; }
.sub{ color:var(--muted); font-size:clamp(1.02rem,1.3vw,1.22rem); line-height:1.62; max-width:46ch; }

/* progress bar */
.scroll-prog{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--teal),var(--teal-bright));
  z-index:200; box-shadow:0 0 12px var(--teal-glow);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:120;
  padding:22px var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  transition:padding .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:14px var(--pad);
  background:rgba(6,9,15,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line-2);
}
.nav-logo{ display:flex; align-items:center; gap:13px; }
.nav-logo img{ width:30px; height:30px; transition:transform .6s var(--ease); }
.nav-logo:hover img{ transform:rotate(90deg); }
.nav-logo .nl-txt{ display:flex; flex-direction:column; line-height:1; white-space:nowrap; }
.nav-logo b{ font-size:1rem; font-weight:600; letter-spacing:.18em; color:var(--paper); white-space:nowrap; }
.nav-logo span{ font-family:var(--mono); font-size:.54rem; letter-spacing:.3em; color:var(--faint); margin-top:5px; white-space:nowrap; }

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:.92rem; color:var(--text); position:relative; padding:4px 0;
  transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--teal-bright); transition:width .35s var(--ease-out);
}
.nav-links a:hover{ color:var(--paper); }
.nav-links a:hover::after{ width:100%; }

.btn{
  font-family:var(--sans); font-size:.9rem; font-weight:500;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.78em 1.4em; border-radius:100px; cursor:pointer;
  border:1px solid transparent; transition:all .4s var(--ease); white-space:nowrap;
}
.btn .ar{ transition:transform .4s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.btn-teal{
  background:linear-gradient(135deg, var(--teal-bright), var(--teal)); color:#fff;
  box-shadow:0 8px 30px -6px var(--teal-glow);
}
.btn-teal:hover{ background:linear-gradient(135deg, #7396f5, var(--teal-bright)); box-shadow:0 14px 40px -6px var(--teal-glow); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--paper); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--paper); background:rgba(244,241,234,.04); }
.btn-lg{ padding:.95em 1.7em; font-size:.98rem; }

.nav-cta{ display:flex; align-items:center; gap:18px; }
.burger{ display:none; width:30px; height:18px; position:relative; cursor:pointer; background:none; border:none; }
.burger span{ position:absolute; left:0; height:1.6px; width:100%; background:var(--paper); transition:.4s var(--ease); }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:8px; } .burger span:nth-child(3){ top:16px; }
body.menu-open .burger span:nth-child(1){ top:8px; transform:rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ top:8px; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:110;
  background:rgba(6,9,15,.97); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--pad); opacity:0; pointer-events:none; transform:translateY(-10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
body.menu-open .mobile-menu{ opacity:1; pointer-events:auto; transform:none; }
.mobile-menu a{ font-size:clamp(1.8rem,8vw,2.6rem); font-weight:600; color:var(--paper); letter-spacing:-.02em; padding:8px 0; border-bottom:1px solid var(--line-2); }
.mobile-menu a:last-of-type{ border:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; display:flex; align-items:flex-end; }
.hero-video, .hero-video video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-video{ will-change:transform; pointer-events:none; background:#06090F url('assets/linen-drape.webp') center/cover no-repeat; }
.hero-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 30%, rgba(6,9,15,0) 0%, rgba(6,9,15,.25) 55%, rgba(6,9,15,.78) 100%),
    linear-gradient(180deg, rgba(6,9,15,.62) 0%, rgba(6,9,15,.05) 26%, rgba(6,9,15,.15) 60%, rgba(6,9,15,.96) 100%),
    linear-gradient(90deg, rgba(6,9,15,.72) 0%, rgba(6,9,15,.1) 46%, transparent 70%);
}
.hero-grain{ position:absolute; inset:0; z-index:3; opacity:.5; mix-blend-mode:overlay; pointer-events:none; }
/* NOTE: needs `.hero .hero-inner` specificity — a later `.wrap{z-index:1}` rule
   otherwise wins and drops hero content BELOW the scrim, blacking out the buttons */
/* full-bleed left: don't trap hero content in the centered 1320px .wrap column,
   which indents it ~300px on wide screens — align it to the page gutter/logo */
.hero .hero-inner{ position:relative; z-index:6; width:100%; max-width:none; padding-bottom:clamp(48px,7vh,96px); }
/* hero entrance — pure CSS so it always plays & always ends visible */
/* translate-only entrance — content is ALWAYS full opacity so buttons never
   read as disabled/"unavailable" while loading over the bright fabric */
@keyframes riseIn{ from{ transform:translateY(12px); } to{ transform:none; } }
@keyframes wordUp{ from{ transform:translateY(118%); } to{ transform:translateY(0); } }
.hero [data-anim]{ animation:riseIn .6s var(--ease-out) both; }
.hero-eyebrow{ margin-bottom:26px; animation-delay:.12s; }
.hero h1{
  font-size:clamp(2.6rem,6.6vw,6rem);
  line-height:.96; letter-spacing:-.035em; font-weight:600;
  max-width:15ch;
}
.hero h1 .serif{ font-weight:400; letter-spacing:-.01em; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:inline-block; will-change:transform; }
.hero-sub{ margin-top:30px; max-width:52ch; font-size:clamp(1.05rem,1.45vw,1.32rem); color:rgba(244,241,234,.82); animation-delay:.5s; }
.hero-actions{ margin-top:40px; display:flex; flex-wrap:wrap; gap:16px; animation-delay:.42s; }
/* hero sits on a near-black scrim, so the CTAs need a BRIGHT fill to read */
.hero-actions .btn-teal{ background:linear-gradient(135deg,#6b8ef4,#3a5fd0); color:#fff; box-shadow:0 12px 40px -4px rgba(94,132,238,.6), 0 2px 12px rgba(0,0,0,.5); }
.hero-actions .btn-teal:hover{ background:linear-gradient(135deg,#82a0f7,#4a6ee0); }
.hero-actions .btn-ghost{ border-color:rgba(244,241,234,.6); background:rgba(255,255,255,.07); color:var(--paper); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hero-actions .btn-ghost:hover{ border-color:var(--paper); background:rgba(255,255,255,.12); }
.hero h1 .word{ display:inline-block; margin-right:.26em; animation:wordUp 1.05s var(--ease-out) both; animation-delay:calc(.22s + var(--i,0) * .045s); }
.hero h1 .word:last-child{ margin-right:0; }

.hero-meta{
  position:absolute; z-index:5; right:var(--pad); bottom:clamp(48px,7vh,96px);
  text-align:right;
}
.hero-meta .hm-num{ font-size:2.4rem; font-weight:600; color:var(--paper); letter-spacing:-.03em; line-height:1; }
.hero-meta .hm-lbl{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-top:8px; }
.hero-meta{ animation-delay:.8s; }
.scroll-cue{ animation-delay:.9s; }

.scroll-cue{
  position:absolute; z-index:5; left:var(--pad); bottom:30px;
  display:flex; align-items:center; gap:12px; font-family:var(--mono);
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}
.scroll-cue .bar{ width:42px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.scroll-cue .bar::after{ content:""; position:absolute; inset:0; width:40%; background:var(--teal-bright); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateX(-120%);} 60%,100%{ transform:translateX(280%);} }

/* short-viewport heroes: keep the headline, sub AND buttons in view on laptops */
@media (max-height:820px){
  .hero-eyebrow{ margin-bottom:16px; }
  .hero h1{ font-size:clamp(2.2rem,5.2vw,4.4rem); }
  .hero-sub{ margin-top:18px; }
  .hero-actions{ margin-top:24px; }
  .hero-inner{ padding-bottom:clamp(36px,4vh,64px); }
}
@media (max-height:680px){
  .hero h1{ font-size:clamp(2rem,4.6vw,3.4rem); }
  .hero-sub{ font-size:1rem; margin-top:14px; }
  .hero-actions{ margin-top:18px; }
  .scroll-cue{ display:none; }
}

/* ============================================================
   TRUST / CERT MARQUEE
   ============================================================ */
.trust{ padding:46px 0; border-bottom:1px solid var(--line-2); background:var(--ink-2); }
.trust-cap{ text-align:center; font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:30px; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:64px; width:max-content; animation:scroll-x 34s linear infinite; }
.trust:hover .marquee-track{ animation-play-state:paused; }
.marquee-track .cert{ font-size:1.32rem; font-weight:500; color:var(--faint); letter-spacing:-.01em; white-space:nowrap; transition:color .3s; }
.marquee-track .cert:hover{ color:var(--paper); }
.marquee-track .cert sup{ font-size:.6em; }
@keyframes scroll-x{ to{ transform:translateX(calc(-50% - 32px)); } }

/* ============================================================
   reveal primitives
   ============================================================ */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.08s; } .reveal-d2{ transition-delay:.16s; }
.reveal-d3{ transition-delay:.24s; } .reveal-d4{ transition-delay:.32s; }

/* ============================================================
   PROOF band
   ============================================================ */
.proof{ padding:clamp(90px,12vh,150px) 0; background:var(--ink); position:relative; overflow:hidden; }
.proof::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 18% 30%, rgba(16,58,134,.30), transparent 60%);
  pointer-events:none;
}
.proof .wrap{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,100px); align-items:center; }
.proof h2{ margin:22px 0 0; }
.proof .pbody{ margin-top:28px; }
.proof .brands{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:14px; overflow:hidden; }
.brand{
  background:var(--ink-2); padding:38px 28px; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:600; letter-spacing:.02em; color:var(--faint);
  transition:color .4s var(--ease), background .4s var(--ease); min-height:120px; text-align:center;
}
.brand:hover{ color:var(--paper); background:#0e1626; }
.brand .serif{ letter-spacing:0; }

/* ============================================================
   SOLUTIONS grid
   ============================================================ */
.solutions{ padding:clamp(90px,12vh,150px) 0; background:var(--ink-2); position:relative; }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom:58px; }
.sec-head .sh-l{ max-width:62ch; }
.sec-head h2{ margin-top:20px; }
.sec-head .sub{ margin-top:18px; }

.sol-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.sol-card{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line-2);
  background:var(--ink-3); min-height:330px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px; cursor:pointer; isolation:isolate;
  transition:transform .6s var(--ease), border-color .5s var(--ease);
}
.sol-card:hover{ transform:translateY(-6px); border-color:rgba(94,132,238,.4); }
.sol-weave{
  position:absolute; inset:0; z-index:-2; opacity:.5; transition:transform 1s var(--ease), opacity .6s;
  --c1:rgba(94,132,238,.5); --c2:rgba(244,241,234,.16); --g1:#0a1f3a; --g2:#06121f;
  background:
    repeating-linear-gradient(90deg, var(--c1) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(0deg, var(--c2) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, var(--g1), var(--g2));
  background-size:auto, auto, 100% 100%;
}
.sol-card:hover .sol-weave{ transform:scale(1.06); opacity:.75; }
.sol-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(6,9,15,.15) 0%, rgba(6,9,15,.55) 55%, rgba(6,9,15,.93) 100%);
}
.sol-card .s-eye{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-bright); margin-bottom:10px; }
.sol-card h3{ font-size:1.46rem; font-weight:600; line-height:1.06; }
.sol-card p{ color:var(--muted); font-size:.96rem; margin-top:10px; line-height:1.5; }
.sol-card .s-go{
  margin-top:18px; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper);
  opacity:0; transform:translateY(6px); transition:.5s var(--ease);
}
.sol-card:hover .s-go{ opacity:1; transform:none; }
.sol-card .s-go .ar{ transition:transform .4s var(--ease); }
.sol-card:hover .s-go .ar{ transform:translateX(4px); }

/* ============================================================
   PILLARS
   ============================================================ */
.pillars{ padding:clamp(90px,12vh,150px) 0; background:var(--ink); position:relative; overflow:hidden; }
.pillars::before{
  content:""; position:absolute; right:-10%; top:10%; width:50%; height:80%;
  background:radial-gradient(closest-side, rgba(94,132,238,.16), transparent 70%); pointer-events:none;
}
.pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:18px; overflow:hidden; margin-top:56px; }
.pillar{ background:var(--ink-2); padding:clamp(32px,3vw,46px); transition:background .5s var(--ease); }
.pillar:hover{ background:var(--ink-3); }
.pillar .p-idx{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; color:var(--teal-bright); }
.pillar .p-line{ width:100%; height:1px; background:var(--line); margin:22px 0; position:relative; overflow:hidden; }
.pillar .p-line::after{ content:""; position:absolute; inset:0; width:0; background:var(--teal-bright); transition:width .8s var(--ease); }
.pillar:hover .p-line::after{ width:46%; }
.pillar h3{ font-size:1.5rem; font-weight:600; line-height:1.1; }
.pillar p{ color:var(--muted); font-size:1rem; margin-top:16px; line-height:1.6; }

/* ============================================================
   STATS band
   ============================================================ */
.stats{ padding:clamp(80px,11vh,140px) 0; background:var(--ink-2); border-block:1px solid var(--line-2); position:relative; overflow:hidden; }
.warp-texture{ position:absolute; inset:0; opacity:.5; background-image:repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 46px); -webkit-mask-image:radial-gradient(80% 70% at 50% 50%, #000, transparent); mask-image:radial-gradient(80% 70% at 50% 50%, #000, transparent); pointer-events:none; }
.stats .wrap{ position:relative; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:54px; }
.stat{ padding:30px 26px; border:1px solid var(--line-2); border-radius:14px; background:rgba(12,19,34,.5); transition:border-color .5s, transform .5s var(--ease); }
.stat:hover{ border-color:rgba(94,132,238,.36); transform:translateY(-4px); }
.stat .st-num{ font-size:clamp(2.4rem,3.6vw,3.4rem); font-weight:600; letter-spacing:-.03em; color:var(--paper); line-height:1; display:flex; align-items:baseline; gap:.06em; }
.stat .st-num .u{ font-size:.42em; color:var(--teal-bright); font-weight:500; }
.stat .st-lbl{ margin-top:16px; font-size:.95rem; color:var(--muted); line-height:1.4; }
.stats-foot{ margin-top:40px; text-align:center; font-size:1.04rem; color:var(--faint); }
.stats-foot b{ color:var(--text); font-weight:500; }

/* ============================================================
   SUSTAINABILITY split
   ============================================================ */
.sustain{ position:relative; overflow:hidden; background:var(--ink); }
.sustain .wrap{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; padding-block:clamp(90px,12vh,150px); }
.sustain-media{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line-2); }
.sustain-media img{ position:absolute; inset:0; width:100%; height:115%; object-fit:cover; will-change:transform; }
.sustain-media .sm-tag{ position:absolute; left:20px; bottom:20px; z-index:2; font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper); background:rgba(6,9,15,.5); backdrop-filter:blur(8px); padding:8px 13px; border-radius:8px; border:1px solid var(--line); }
.sustain h2{ margin:22px 0 0; }
.sustain .sub{ margin-top:24px; max-width:48ch; }
.sustain .s-cta{ margin-top:34px; }

/* ============================================================
   CTA band
   ============================================================ */
.cta{ position:relative; overflow:hidden; background:var(--ink-2); padding:clamp(100px,15vh,180px) 0; text-align:center; }
.cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 50% 0%, rgba(16,58,134,.4), transparent 60%); }
.cta::after{ content:""; position:absolute; left:50%; top:-30%; width:60vw; height:60vw; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(94,132,238,.18), transparent 70%); pointer-events:none; }
.cta .wrap{ position:relative; }
.cta h2{ font-size:clamp(2.4rem,6vw,5rem); line-height:1; letter-spacing:-.035em; max-width:18ch; margin:22px auto 0; }
.cta .sub{ margin:26px auto 0; text-align:center; }
.cta-actions{ margin-top:42px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); padding:clamp(70px,9vh,110px) 0 40px; border-top:1px solid var(--line-2); }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:48px; }
.foot-brand .fb-logo{ display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.foot-brand .fb-logo img{ width:40px; height:40px; }
.foot-brand .fb-logo b{ font-size:1.1rem; font-weight:600; letter-spacing:.14em; color:var(--paper); }
.foot-brand .tag{ font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--paper); line-height:1.3; max-width:20ch; }
.foot-brand .ft-line{ color:var(--muted); font-size:.95rem; margin-top:16px; max-width:34ch; }
.foot-col h4{ font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:20px; font-weight:500; }
.foot-col a, .foot-col p{ display:block; color:var(--muted); font-size:.96rem; margin-bottom:12px; transition:color .3s; }
.foot-col a:hover{ color:var(--paper); }
.foot-col address{ font-style:normal; color:var(--muted); font-size:.96rem; line-height:1.7; }
.foot-col address a{ display:inline; margin:0; }
.cert-strip{ margin-top:54px; padding-top:30px; border-top:1px solid var(--line-2); display:flex; flex-wrap:wrap; gap:10px 26px; }
.cert-strip span{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--faint); transition:color .3s; }
.cert-strip span:hover{ color:var(--text); }
.foot-legal{ margin-top:34px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.82rem; color:var(--faint); }
.foot-legal a:hover{ color:var(--text); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .nav-links{ display:none; }
  .burger{ display:block; }
  .nav-cta .btn-teal{ display:none; }
  .proof .wrap{ grid-template-columns:1fr; }
  .sol-grid{ grid-template-columns:repeat(2,1fr); }
  .pillar-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .sustain .wrap{ grid-template-columns:1fr; }
  .sustain-media{ aspect-ratio:16/10; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .foot-brand{ grid-column:1 / -1; }
  .hero-meta{ display:none; }
}
@media (max-width:560px){
  .sol-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .sec-head{ flex-direction:column; align-items:flex-start; }
  .proof .brands{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.12s !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* static-capture override: strips entrance so true layout is renderable */
.no-anim [data-anim],
.no-anim .hero h1 .word,
.no-anim .reveal{ animation:none !important; opacity:1 !important; transform:none !important; }

/* ============================================================
   PREMIUM SYSTEM  —  type rendering, grain, cursor, glows, marks
   ============================================================ */
body{ font-feature-settings:"ss01","cv01","cv11"; letter-spacing:-.005em; }
h1,h2,h3,h4{ font-family:var(--sans); }

/* ---- film grain (global, very subtle) ---- */
body::after{
  content:""; position:fixed; inset:-50%; z-index:9000; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
body.theme-light::after{ opacity:.045; mix-blend-mode:multiply; }

/* ---- gradient-mesh glow blobs (placed inside sections) ---- */
.glow{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; opacity:.7; }
.glow-a{ background:radial-gradient(closest-side, rgba(94,132,238,.42), transparent 72%); }
.glow-b{ background:radial-gradient(closest-side, rgba(16,58,134,.55), transparent 72%); }
.glow-c{ background:radial-gradient(closest-side, rgba(94,132,238,.22), transparent 72%); }
body.theme-light .glow{ opacity:.55; mix-blend-mode:multiply; filter:blur(80px); }
body.theme-light .glow-a{ background:radial-gradient(closest-side, rgba(35,71,168,.28), transparent 72%); }
body.theme-light .glow-b{ background:radial-gradient(closest-side, rgba(94,132,238,.30), transparent 72%); }
.wrap, .sec .wrap, section .wrap{ position:relative; z-index:1; }

/* ---- text effects ---- */
.tx-gradient{ background:linear-gradient(120deg, var(--paper) 0%, var(--paper) 38%, var(--teal-bright) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.theme-light .tx-gradient{ background:linear-gradient(120deg, var(--paper) 0%, var(--paper) 42%, var(--teal-bright) 110%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tx-outline{ color:transparent; -webkit-text-stroke:1px var(--line); }
/* huge faint watermark numeral / word behind a section head */
.watermark{ position:absolute; z-index:0; font-weight:700; line-height:.8; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px var(--line-2); pointer-events:none; user-select:none;
  font-size:clamp(9rem,26vw,24rem); top:-.18em; right:-.02em; opacity:.8; }

/* clip-rise reveal for headings (wipes up from a mask) */
.clip-rise{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.clip-rise > span{ display:inline-block; transform:translateY(110%); transition:transform 1s var(--ease-out); }
.clip-rise.in > span, .reveal.in .clip-rise > span{ transform:none; }

/* ---- geometric marks / symbols ---- */
.mark-weave{ width:34px; height:34px; flex:none; position:relative; opacity:.9;
  background:
    linear-gradient(var(--teal-bright),var(--teal-bright)) 0 4px/100% 2px no-repeat,
    linear-gradient(var(--teal-bright),var(--teal-bright)) 0 12px/100% 2px no-repeat,
    linear-gradient(var(--teal-bright),var(--teal-bright)) 0 20px/100% 2px no-repeat,
    linear-gradient(var(--teal-bright),var(--teal-bright)) 4px 0/2px 100% no-repeat,
    linear-gradient(var(--teal-bright),var(--teal-bright)) 12px 0/2px 100% no-repeat,
    linear-gradient(var(--teal-bright),var(--teal-bright)) 20px 0/2px 100% no-repeat;
  mix-blend-mode:normal;
}
.plus-mark{ width:16px; height:16px; position:relative; flex:none; }
.plus-mark::before,.plus-mark::after{ content:""; position:absolute; background:var(--teal-bright); }
.plus-mark::before{ left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.plus-mark::after{ top:50%; left:0; height:1.5px; width:100%; transform:translateY(-50%); }
/* L-shaped corner brackets on cards */
.bracket{ position:relative; }
.bracket::before,.bracket::after{ content:""; position:absolute; width:16px; height:16px; border:1px solid var(--teal-bright); opacity:.5; transition:opacity .4s, width .4s, height .4s; }
.bracket::before{ top:14px; left:14px; border-right:none; border-bottom:none; }
.bracket::after{ bottom:14px; right:14px; border-left:none; border-top:none; }
.bracket:hover::before,.bracket:hover::after{ opacity:1; width:22px; height:22px; }

/* ---- custom cursor (fine-pointer, wide screens only) ---- */
.cursor-ring,.cursor-dot{ position:fixed; top:0; left:0; z-index:9500; pointer-events:none; border-radius:50%; opacity:0; transition:opacity .4s; mix-blend-mode:difference; }
.cursor-ring{ width:36px; height:36px; border:1px solid #9ab4ff; margin:-18px 0 0 -18px; transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), opacity .4s, background .3s; }
.cursor-dot{ width:5px; height:5px; background:#9ab4ff; margin:-2.5px 0 0 -2.5px; }
.cursor-ring.is-hot{ width:62px; height:62px; margin:-31px 0 0 -31px; background:rgba(154,180,255,.12); }
.cursor-glow{ position:fixed; top:0; left:0; width:460px; height:460px; margin:-230px 0 0 -230px; border-radius:50%; z-index:40; pointer-events:none; opacity:0; transition:opacity .5s;
  background:radial-gradient(closest-side, rgba(94,132,238,.10), transparent 70%); }
body.theme-light .cursor-glow{ background:radial-gradient(closest-side, rgba(35,71,168,.08), transparent 70%); }
@media (hover:hover) and (pointer:fine) and (min-width:1000px){
  body.cursor-on .cursor-ring, body.cursor-on .cursor-dot, body.cursor-on .cursor-glow{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .clip-rise > span{ transform:none !important; }
  .cursor-ring,.cursor-dot,.cursor-glow{ display:none !important; }
}