: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{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:70% 50%}

.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:34px;height:33px}
.brand b{color:var(--strip);font-weight:500}
.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}
.kicker{font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--nav);margin-bottom:1.3rem;display:flex;align-items:center;gap:.8rem}
.kicker::before{content:"";width:1.6rem;height:1px;background:#3FA9D6}
h1{font-weight:400;font-size:clamp(2.1rem,5.4vh,3.6rem);line-height:1.14;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;width:max-content;max-width:calc(100% - 2 * var(--gx));flex-wrap:wrap;justify-content:center;row-gap:.4rem}
.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:13vh var(--gx) 9vh;background:var(--bg)}
.eyebrow{font-size:.82rem;letter-spacing:.22em;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:.8rem;letter-spacing:.2em;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: two branches on top, the root below; the axis of light crosses them (app.js puts a node on each line) */
.mundos{margin-top:7vh}
.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)}
.root{margin-top:5vh;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:.8rem;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:5vh;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:13vh}
.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:1.4fr repeat(3,auto);gap:2.4rem clamp(2rem,6vw,5rem);padding:3.4rem var(--gx) 2.4rem;border-top:1px solid var(--line);color:var(--strip);font-size:.92rem}
.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-col{display:flex;flex-direction:column;gap:.7rem}
.footer-col p{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nav);margin-bottom:.3rem}
.footer-col 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:.84rem;border-top:1px solid var(--line);padding-top:1.6rem}
.legal-bar + .legal ~ .footer{grid-template-columns:1fr}

/* facts and the person behind the company */
.facts{margin-top:6vh;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem);border-top:1px solid var(--line);padding-top:2.2rem}
.facts dt{font-weight:300;font-size:clamp(2.2rem,3.6vw,3rem);line-height:1;color:var(--ink);margin-bottom:.6rem}
.facts dd{color:var(--muted);line-height:1.5;max-width:26ch}
.founder{margin-top:6vh;display:flex;gap:1.8rem;align-items:flex-start;border-top:1px solid var(--line);padding-top:2.4rem;max-width:46rem}
.founder img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid var(--line);flex:none}
.founder h3{font-weight:500;font-size:1.25rem}
.founder .role{color:var(--nav);margin:.2rem 0 .8rem;font-size:.95rem}
.founder p{color:var(--muted);line-height:1.6}
.pill--line{background:transparent;color:var(--ink);border:1px solid rgba(201,206,216,.45)}
.notfound{text-align:left;padding-top:16vh}

.lang{font-size:.82rem;letter-spacing:.14em;font-weight:600;color:var(--nav);border:1px solid rgba(201,206,216,.3);border-radius:999px;padding:.2rem .7rem;align-self:center}
.lang:hover{color:var(--ink);border-color:var(--silver)}
.menu nav .lang{justify-self:start;margin:.5rem .9rem .4rem;padding:.3rem .8rem}
.footer-legal .lang{margin-right:.2rem}

/* contact form */
.contact-form{max-width:38rem;margin:0 auto 2.6rem;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.2rem;text-align:left}
.contact-form .wide{grid-column:1/-1}
.contact-form label span{display:block;font-size:.86rem;color:var(--nav);margin-bottom:.4rem}
.contact-form input,.contact-form textarea{width:100%;background:rgba(201,206,216,.05);border:1px solid rgba(201,206,216,.22);border-radius:10px;color:var(--ink);font:inherit;font-size:1rem;padding:.8rem .9rem}
.contact-form textarea{resize:vertical;min-height:7rem}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid #3FA9D6;outline-offset:1px;border-color:transparent}
.contact-form button{border:0;cursor:pointer;font-family:inherit}
.contact-form button[disabled]{opacity:.6;cursor:default}
.form-note{font-size:.84rem;color:var(--strip)}
.form-note a{text-decoration:underline;text-underline-offset:3px}
.form-end{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.form-status{color:var(--muted);font-size:.95rem}
.form-status.ok{color:#9fd8ee}.form-status.err{color:#f0b4a8}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.or{color:var(--strip);font-size:.9rem;margin-bottom:1.2rem}
@media (max-width:760px){.contact-form{grid-template-columns:1fr}}

/* section menu for portrait screens, where the centred links do not fit */
.top-actions{display:flex;align-items:center;gap:.6rem}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;height:38px;padding:0 1rem;display:flex;align-items:center;border:1px solid rgba(201,206,216,.35);border-radius:999px;font-size:.88rem;color:var(--ink)}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:46px;min-width:12rem;display:grid;padding:.5rem;background:#0a0f1c;border:1px solid var(--line);border-radius:14px}
.menu nav a{padding:.75rem .9rem;border-radius:8px}
.menu nav a:hover{background:rgba(201,206,216,.08)}
.strip-label{font-weight:500;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;align-self:center;opacity:.8}
@media (max-width:1100px){.strip-label{display:none}}

/* ---------- 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}
  .menu{display:block}
  .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 */
  /* --sink (app.js): once the copy has gone, the tree sinks down to meet its roots below the hero;
     --sunk (0 to 1) fades the take's top edge in as it comes away from the top of the screen */
  .plate{background:linear-gradient(to bottom,#0e1822 0%,#0f1923 calc(45% + var(--sink,0px)),var(--bg) calc(70% + var(--sink,0px)))}
  .plate-video{inset:auto;left:0;top:0;height:62vh;height:62dvh;width:100%;object-fit:cover;object-position:85% 50%;translate:0 var(--sink,0px);
    -webkit-mask-image:radial-gradient(ellipse 80% 72% at 50% 42%,#000 64%,transparent 100%),linear-gradient(to bottom,rgb(0 0 0 / calc(1 - var(--sunk,0))),#000 16%);-webkit-mask-composite:source-in;
    mask-image:radial-gradient(ellipse 80% 72% at 50% 42%,#000 64%,transparent 100%),linear-gradient(to bottom,rgb(0 0 0 / calc(1 - var(--sunk,0))),#000 16%);mask-composite:intersect}
  .fade{background:linear-gradient(to bottom,rgba(5,8,17,.45) 0%,rgba(5,8,17,0) 12%,rgba(5,8,17,0) calc(50% + var(--sink,0px)),rgba(5,8,17,.7) calc(60% + var(--sink,0px)),var(--bg) calc(72% + var(--sink,0px)))}
  .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)}
}
/* landscape but narrower than the 16:9 take (16:10 laptops, half-screen windows): cover would zoom the planes
   under the copy, so the whole take shows, pinned right, and its top and bottom melt into the page
   (the take is 16:9 and as wide as the screen, so it spans 50% ± 28.1vw of the box) */
@media (min-aspect-ratio:11/10) and (max-aspect-ratio:3/2){
  .plate-video{inset:0;width:100%;height:100%;object-fit:contain;object-position:100% 50%;
    --m:linear-gradient(to bottom,transparent calc(50% - 28.2vw),#000 calc(50% - 15vw),#000 calc(50% + 15vw),transparent calc(50% + 28.2vw));
    -webkit-mask-image:var(--m);mask-image:var(--m)}
  .copy{max-width:min(36rem,50vw)}
  h1{font-size:clamp(2rem,3.7vw,3.4rem)}
  .sub span{white-space:normal;display:inline}
}
@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}
  .root{margin-top:6vh}
  .product--wide{display:block}
  .product--wide .product-cta{margin-top:1rem}
  .skill-list,.why-list,.facts{grid-template-columns:1fr}
  .facts{gap:1.6rem}
  .founder{flex-direction:column;gap:1.2rem}
  .footer{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
/* 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)}
}
/* four products: tighter strip on phones, two rows on the narrowest ones */
@media (max-width:460px){
  .strip{gap:.9rem}
  .strip span{font-size:.72rem;gap:.4rem}
}
/* five products: the strip takes two rows on phones, so the copy moves up to leave it room */
@media (max-width:640px){
  .copy{bottom:calc(13vh + env(safe-area-inset-bottom))}
}
@media (max-width:360px){
  .strip{width:calc(100% - 2 * var(--gx));flex-wrap:wrap;justify-content:center;gap:.35rem 1.1rem}
  .copy{bottom:calc(13vh + env(safe-area-inset-bottom))}
  .strip span{font-size:.7rem;gap:.35rem}
}

/* ---------- underworld: the hero's axis of light keeps going down behind the content ---------- */
.underworld{position:relative;background:linear-gradient(to bottom,#050811 0%,#070a10 18%,#05070c 55%,#020306 100%)}
.underworld > :not(#axis){position:relative;z-index:1}
.underworld .section,.underworld .footer{background:transparent}
/* the axis (--x from app.js): a soft mask (moved by app.js through --reveal) uncovers it as you scroll down */
#axis{--reveal:0px;--x:70%;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -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))}
#axis::before{content:"";position:absolute;top:0;bottom:0;left:var(--x);width:1px;margin-left:-.5px;
  background:linear-gradient(to bottom,rgba(63,169,214,.55) 0%,rgba(63,169,214,.2) 14%,rgba(127,135,150,.13) 70%,rgba(127,135,150,0) 100%);box-shadow:0 0 10px rgba(63,169,214,.18)}
/* pulses of light travelling down the axis */
#axis i{position:absolute;top:0;left:var(--x);width:2px;height:150px;margin-left:-1px;border-radius:2px;opacity:0;
  background:linear-gradient(to bottom,rgba(63,169,214,0),rgba(150,215,240,.5));box-shadow:0 0 8px rgba(63,169,214,.35);animation:pulse 7s linear infinite}
#axis i:nth-child(2){animation-duration:9s;animation-delay:-3s}
#axis i:nth-child(3){animation-duration:6s;animation-delay:-4.5s}
@keyframes pulse{0%{transform:translateY(-150px);opacity:0}6%{opacity:1}80%{opacity:.7}100%{transform:translateY(var(--h,3000px));opacity:0}}
#axis .node{position:absolute;left:var(--x);width:170px;height:51px;margin:-25.5px 0 0 -85px;overflow:visible}
@media (prefers-reduced-motion: reduce){#axis i{display:none}}
/* the axis comes out of the hero 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%)}