:root{
  --bg:#050811; --ink:#f5f6f8; --muted:#a3a9b5; --nav:#b4b9c3; --strip:#7f8796;
  --navy:#0d1d3a; --navy-2:#1a2f52; --silver:#c9ced8;
  --line:rgba(201,206,216,.14);
  --ease:cubic-bezier(.22,1,.36,1);
  --gx:clamp(20px,5vw,75px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* ---------- hero: tall track with a sticky layered scene ---------- */
.hero{position:relative;height:200vh}
.scene{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.layer{position:absolute;inset:0;will-change:transform;pointer-events:none}
#fogFront,#fluff{position:absolute;inset:0;width:100%;height:100%}

.plate{background:var(--bg)}
.plate-video{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:62% 40%;filter:saturate(.85) contrast(1.04)}

.fade{background:
  linear-gradient(to right,rgba(5,8,17,.82) 0%,rgba(5,8,17,.45) 30%,rgba(5,8,17,0) 55%),
  linear-gradient(to bottom,rgba(5,8,17,0) 72%,rgba(5,8,17,.7) 86%,var(--bg) 100%)}

/* ---------- chrome ---------- */
.topbar{position:absolute;inset:0 0 auto 0;display:flex;align-items:center;justify-content:space-between;padding:clamp(18px,2.6vh,28px) var(--gx);z-index:5}
.brand{display:flex;align-items:center;gap:.8rem;font-weight:600;letter-spacing:.02em;font-size:1rem;color:var(--silver)}
.brand svg{width:30px;height:46px}
.links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:1.6rem;font-size:clamp(.9rem,1.25vw,1.15rem);color:var(--nav)}
.links a:hover{color:var(--ink)}
.pill{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#050505;border-radius:999px;font-weight:500;
  padding:0 1.5rem;height:clamp(42px,4.6vh,50px);font-size:clamp(.92rem,1.2vw,1.1rem);transition:transform .3s var(--ease)}
.pill:hover{transform:translateY(-2px)}
.ghost{font-weight:500;letter-spacing:.01em;font-size:clamp(.92rem,1.2vw,1.1rem);display:inline-flex;align-items:center;gap:.5rem}
.ghost::after{content:"→";transition:transform .3s var(--ease)}.ghost:hover::after{transform:translateX(4px)}
a:focus-visible{outline:2px solid var(--silver);outline-offset:4px;border-radius:4px}

.copy{position:absolute;left:var(--gx);top:clamp(140px,21.8vh,260px);z-index:4;will-change:transform,opacity}
h1{font-weight:400;font-size:clamp(2.6rem,6.8vh,4.6rem);line-height:1.12;letter-spacing:.004em}
h1 span{display:block;white-space:nowrap}
h1 em{font-style:normal;color:var(--silver);font-weight:300}
.sub{margin-top:1.6rem;color:var(--muted);font-size:clamp(1rem,1.96vh,1.3rem);line-height:1.15;word-spacing:.08em}
.sub span{display:block;white-space:nowrap;line-height:1.45}
.actions{display:flex;align-items:center;gap:2rem;margin-top:2.4rem}

/* the ceiba message is scroll-driven: without JS it would sit on top of the copy, so it only exists with JS,
   and while invisible it must never catch the clicks meant for the buttons under it */
.second{display:none;position:absolute;left:var(--gx);bottom:24vh;max-width:30rem;z-index:4;will-change:transform,opacity}
.js .second{display:block;opacity:0;pointer-events:none}
.second p{font-size:clamp(1.5rem,3.6vh,2.4rem);line-height:1.25;font-weight:300}
.second p b{font-weight:500;color:#fff}

.strip{position:absolute;left:50%;bottom:clamp(22px,5.5vh,60px);transform:translateX(-50%);display:flex;gap:clamp(1.6rem,4vw,4.2rem);color:var(--strip);z-index:4;white-space:nowrap}
.strip span{font-weight:700;font-size:clamp(.9rem,1.2vw,1.15rem);letter-spacing:.01em;display:flex;align-items:center;gap:.55rem}
.strip i{width:.42rem;height:.42rem;border:1.5px solid currentColor;transform:rotate(45deg)}

/* ---------- sections below the hero ---------- */
.section{position:relative;padding:18vh var(--gx) 14vh;background:var(--bg)}
.eyebrow{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--strip);margin-bottom:1.2rem}
.section h2{font-weight:300;font-size:clamp(1.8rem,4vw,3rem);line-height:1.15;max-width:22ch}
.section h2 b{font-weight:500}
.tag{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--strip);margin-bottom:.8rem}
.lede{color:var(--muted);line-height:1.6;margin:.6rem 0 1.8rem;max-width:44ch}

/* pillars drawn like the ceiba: two branches on top, the root below, joined by a thin trunk */
.ceiba{margin-top:9vh}
.ramas{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.branch{padding:3rem clamp(1.5rem,3vw,3rem) 3rem 0}
.branch + .branch{border-left:1px solid var(--line);padding-left:clamp(1.5rem,3vw,3rem)}
.branch h3,.root h3{font-weight:500;font-size:clamp(1.3rem,2vw,1.6rem)}
.trunk{width:1px;height:9vh;margin:0 auto;background:var(--line)}
.root{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:3rem 0}

.product{padding:1.4rem 0;border-top:1px solid var(--line)}
.product--wide{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head cta" "text cta";column-gap:3rem}
.product--wide .product-head{grid-area:head}
.product--wide p{grid-area:text;max-width:60ch}
.product--wide .product-cta{grid-area:cta;align-self:center}
.product-head{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:.5rem}
.product h4{font-weight:600;font-size:1.15rem}
.product p{color:var(--muted);line-height:1.6}
.status{font-size:.72rem;letter-spacing:.08em;padding:.2rem .6rem;border:1px solid currentColor;border-radius:999px;color:var(--nav)}
.status--live{color:#cfe3ff}
.status--soon,.status--dev{color:var(--strip)}
.product-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-weight:500;color:var(--ink)}
.product-cta::after{content:"→";transition:transform .3s var(--ease)}
.product-cta:hover::after{transform:translateX(4px)}
.product--wide .product-cta{margin-top:0}

/* capabilities: term + plain-language meaning, in a ruled two-column list */
.skill-list{margin-top:7vh;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,5rem);border-top:1px solid var(--line)}
.skill-list > div{padding:1.6rem 0;border-bottom:1px solid var(--line)}
.skill-list dt{font-weight:600;font-size:1.1rem;margin-bottom:.4rem}
.skill-list dd{color:var(--muted);line-height:1.6}

.why-list{list-style:none;margin-top:7vh;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem);border-top:1px solid var(--line);padding-top:2.4rem}
.why-list h3{font-weight:500;font-size:1.2rem;margin-bottom:.6rem}
.why-list p{color:var(--muted);line-height:1.6}

.contact{text-align:center;padding-bottom:16vh}
.contact h2{margin:0 auto;font-size:clamp(2.2rem,5vw,3.6rem)}
.contact .lede{margin:1.2rem auto 2.2rem}
.contact .actions{justify-content:center;flex-wrap:wrap}

.footer{display:grid;grid-template-columns:1fr auto;gap:1.6rem 3rem;padding:3rem var(--gx) 2.4rem;border-top:1px solid var(--line);color:var(--strip);font-size:.9rem}
.footer-brand{font-weight:600;color:var(--silver);display:flex;flex-direction:column;gap:.3rem}
.footer-brand span{font-weight:400;color:var(--strip)}
.footer-links{display:flex;gap:1.8rem;flex-wrap:wrap;align-items:flex-start}
.footer-links a:hover,.footer-legal a:hover{color:var(--ink)}
.footer-legal{grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem}

/* ---------- privacy page ---------- */
.legal-bar{display:flex;align-items:center;justify-content:space-between;padding:clamp(18px,2.6vh,28px) var(--gx);border-bottom:1px solid var(--line)}
.legal{max-width:46rem;margin:0 auto;padding:10vh var(--gx) 12vh;color:var(--muted);line-height:1.7}
.legal h1{color:var(--ink);font-weight:400;font-size:clamp(2rem,4vw,2.8rem);margin-bottom:.6rem}
.legal h2{color:var(--ink);font-weight:500;font-size:1.2rem;margin:2.4rem 0 .6rem}
.legal p,.legal ul{margin-bottom:.9rem}
.legal ul{padding-left:1.2rem}
.legal strong{color:var(--nav);font-weight:600}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- reveal (only when JS is running) ---------- */
.rv{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

/* ---------- entrance ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(14px)}}
  @keyframes fade{from{opacity:0}}
  .brand,.pill-nav{animation:rise .8s var(--ease) both}
  .links{animation:fade .9s var(--ease) both}
  h1{animation:rise .9s var(--ease) .06s both}
  .sub{animation:rise .9s var(--ease) .14s both}
  .actions{animation:rise .9s var(--ease) .22s both}
  .strip{animation:fade 1.1s ease .34s both}
  .plate{animation:fade 2.2s ease both}
}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
}

/* ---------- portrait ---------- */
@media (max-aspect-ratio:11/10){
  .links{display:none}
  .pill-nav{height:38px;padding:0 1.1rem;font-size:.88rem}
  /* the same take cropped around the tree, crown to roots above the copy; edges blend into the sky */
  .plate{background:linear-gradient(to bottom,#0e1822 0%,#0f1923 45%,var(--bg) 70%)}
  .plate-video{inset:auto;left:0;top:0;height:62vh;height:62dvh;width:100%;object-fit:cover;object-position:68% 50%;
    -webkit-mask-image:radial-gradient(ellipse 80% 72% at 50% 42%,#000 64%,transparent 100%);mask-image:radial-gradient(ellipse 80% 72% at 50% 42%,#000 64%,transparent 100%)}
  .fade{background:linear-gradient(to bottom,rgba(5,8,17,.45) 0%,rgba(5,8,17,0) 12%,rgba(5,8,17,0) 50%,rgba(5,8,17,.7) 60%,var(--bg) 72%)}
  .copy{top:auto;bottom:calc(9vh + env(safe-area-inset-bottom));right:var(--gx)}
  .sub{margin-top:1.1rem}.actions{margin-top:1.6rem}
  h1{font-size:clamp(2.2rem,10vw,3.2rem)}
  h1 span,.sub span{white-space:normal;display:inline}
  .sub{font-size:1rem;line-height:1.5}
  .actions{gap:1.4rem;flex-wrap:wrap}
  .strip{gap:1.1rem;bottom:calc(18px + env(safe-area-inset-bottom))}
  .strip span{font-size:.78rem}
  .second{bottom:auto;top:16vh;right:var(--gx)}
}
@media (max-width:760px){
  .section{padding:12vh var(--gx) 10vh}
  .ramas{grid-template-columns:1fr}
  .branch{padding:2.4rem 0}
  .branch + .branch{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .trunk{height:6vh}
  .product--wide{display:block}
  .product--wide .product-cta{margin-top:1rem}
  .skill-list,.why-list{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr}
}
/* phones in landscape: short screen, so a compact hero without the centred nav or the product strip */
@media (max-height:500px) and (min-aspect-ratio:11/10){
  .links, .strip{display:none}
  .copy{top:clamp(64px,18vh,96px);max-width:min(34rem,58vw)}
  h1{font-size:clamp(1.7rem,9vh,2.4rem)}
  h1 span, .sub span{white-space:normal;display:inline}
  .sub{margin-top:.6rem;font-size:.9rem;line-height:1.45}
  .actions{margin-top:1rem;gap:1.2rem}
  .pill{height:40px}
  .second{bottom:10vh}
  .second p{font-size:clamp(1.1rem,5.5vh,1.5rem)}
}
@media (max-width:360px){
  .strip{gap:.7rem}
  .strip span{font-size:.7rem;gap:.35rem}
}

/* ---------- underworld: the ceiba's roots keep going down behind the content ---------- */
.underworld{position:relative;background:linear-gradient(to bottom,#050811 0%,#070a10 18%,#05070c 55%,#020306 100%)}
.underworld > :not(#roots){position:relative;z-index:1}
.underworld .section,.underworld .footer{background:transparent}
/* roots canvas: a soft mask (moved by app.js through --reveal) uncovers it as you scroll down */
#roots{--reveal:0px;position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--reveal) - 260px),transparent var(--reveal));mask-image:linear-gradient(to bottom,#000 calc(var(--reveal) - 260px),transparent var(--reveal))}
/* the roots come out of the soil instead of starting at a hard edge */
.underworld::before{content:"";position:absolute;inset:0 0 auto 0;height:90px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,var(--bg) 0%,rgba(5,8,17,.85) 35%,rgba(5,8,17,0) 100%)}