/* ============================================================
   Neuron Future — neuronfuture.ai
   Vanilla CSS. No frameworks, no external requests.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --c-black:  #020105;
  --c-ink-2:  #0B0912;
  --c-white:  #FFFFFF;
  --c-purple: #550DD1;
  --c-lilac:  #A978FF;
  --c-lime:   #CDFC55;
  --c-lime-2: #E7FFAD;
  --c-silver: #CCCCCC;
  --c-grey:   #EBEAEA;
  --c-line:   rgba(255,255,255,.08);
  --c-muted:  rgba(204,204,204,.7);

  --font: "MiSans", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1200px;
  --gutter: 24px;
  --nav-h: 72px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --t-hover: 200ms;
  --t-reveal: 600ms;

  --grain: 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  overflow-x:clip;                 /* safety net; does not break position:sticky */
  background:var(--c-black);
  color:var(--c-silver);
  font-family:var(--font);
  font-size:1.05rem;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-lilac); text-decoration:none; }
p{ margin:0 0 1em; }
h1,h2,h3{ color:var(--c-white); font-weight:600; margin:0 0 .5em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
dl,dd,dt{ margin:0; }

:focus-visible{
  outline:2px solid var(--c-lilac);
  outline-offset:3px;
  border-radius:6px;
}

/* Chinese needs more air on black */
:lang(zh) body,
body:lang(zh){ font-weight:300; line-height:1.85; }
:lang(zh){ letter-spacing:0; }

/* ---------- 3. Utilities ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:var(--gutter); top:-100px; z-index:100;
  background:var(--c-lime); color:#0A0A0A; font-weight:500;
  padding:10px 18px; border-radius:999px;
  transition:top var(--t-hover) var(--ease);
}
.skip:focus{ top:12px; }

.eyebrow{
  font-size:.78rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--c-lime); margin:0 0 1rem;
}
:lang(zh) .eyebrow{ text-transform:none; letter-spacing:.08em; }

.section{ padding:clamp(80px,12vw,160px) 0; position:relative; scroll-margin-top:90px; }
.section__title{
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.15; font-weight:600;
  letter-spacing:-.015em; max-width:20ch;
}
:lang(zh) .section__title{ letter-spacing:0; line-height:1.3; }
/* "源于建筑，为人而生。" breaks after the comma — hold the line at five CJK glyphs,
   so the sixth (为) is what wraps. English keeps the default 20ch. */
:lang(zh) .about .section__title{ max-width:5.5em; }
.section__intro{ max-width:60ch; color:var(--c-silver); }

.arrow{ display:inline-block; margin-left:.4em; transition:transform var(--t-hover) var(--ease); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:48px; padding:.75em 1.6em; border-radius:999px;
  font-size:1rem; font-weight:500; line-height:1.2; text-align:center;
  transition:background-color var(--t-hover) var(--ease),
             color var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease),
             transform var(--t-hover) var(--ease);
}
.btn--primary{ background:var(--c-lime); color:#0A0A0A; }
.btn--primary:hover{ background:var(--c-lime-2); transform:translateY(-2px); }
.btn--ghost{ border:1px solid rgba(255,255,255,.22); color:var(--c-white); }
.btn--ghost:hover{ border-color:var(--c-lilac); background:rgba(85,13,209,.22); transform:translateY(-2px); }

.textlink{ color:var(--c-lilac); font-weight:300; }
.textlink:hover{ color:var(--c-white); }
.textlink:hover .arrow{ transform:translate(2px,-2px); }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.no-js .reveal{ opacity:1; transform:none; }

/* ---------- 4. Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--nav-h);
  transition:background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(2,1,5,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--c-line);
}
.nav__inner{ display:flex; align-items:center; gap:24px; height:100%; }
.nav__logo{ display:block; flex:0 0 auto; }
/* logo.svg paints with currentColor, which an <img> cannot inherit — force white */
.logo-white,.nav__logo img,.footer__logo img,.card__mark,.about__mark{
  filter:brightness(0) invert(1);
}
.nav__logo img{ height:26px; width:auto; }
.nav__links{ margin-left:auto; display:flex; gap:32px; align-items:center; }
.nav__links a{
  color:var(--c-silver); font-size:.95rem; font-weight:300;
  padding:8px 2px; transition:color var(--t-hover) var(--ease);
}
.nav__links a:hover{ color:var(--c-white); }
.nav__tools{ display:flex; align-items:center; gap:12px; margin-left:24px; }

.lang{
  min-height:36px; padding:6px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  color:var(--c-white); font-size:.85rem; font-weight:500; line-height:1;
  transition:border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
.lang:hover{ border-color:var(--c-lilac); background:rgba(85,13,209,.28); }
.no-js .lang{ display:none; }

.menu-btn{
  display:none;
  min-height:36px; padding:6px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  color:var(--c-white); font-size:.85rem; font-weight:500; line-height:1;
}
.menu-btn:hover{ border-color:var(--c-lilac); }

/* ---------- 5. Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 32px) 0 64px;
  overflow:clip;
}
.hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 30% 58%, rgba(85,13,209,.35), transparent 70%),
    radial-gradient(70% 60% at 78% 8%, rgba(85,13,209,.14), transparent 72%);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background-image:var(--grain); opacity:.04; pointer-events:none;
}
.hero__inner{
  position:relative; z-index:1;
  display:grid; gap:clamp(28px,4vw,56px);
  align-items:center;
  width:100%; max-width:var(--wrap);
}
.hero__text{ max-width:640px; }
.hero__title{
  font-size:clamp(2.4rem,5.2vw,4.2rem);
  font-weight:600; line-height:1.08; letter-spacing:-.02em;
  margin:0 0 .5em;
  /* deliberately NOT text-wrap:balance - balancing this headline orphans
     "endless" onto its own line at most widths; greedy wrapping reads better. */
}
:lang(zh) .hero__title{
  font-weight:600; line-height:1.25; letter-spacing:0;
  /* the only break opportunity is the U+200B after the full-width comma */
  word-break:keep-all; overflow-wrap:normal;
}
.hero__title .hl{ color:var(--c-lime); font-style:normal; }
.lead{ max-width:52ch; color:var(--c-silver); font-size:1.05rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin:2rem 0 0; }

/* ---------- 6. The door scene ---------- */
/* Everything is sized in `em` so the whole scene scales with .scene's font-size. */
.hero__visual{ display:flex; justify-content:center; }

.scene{
  position:relative;
  font-size:clamp(5.6px,1.85vw,7.4px);
  width:42em; height:52em;
  --px:0; --py:0;
}

/* wide ambient bloom around the whole scene */
.scene::before{
  content:""; position:absolute; z-index:0;
  left:-30%; right:-30%; top:-16%; bottom:-20%;
  background:radial-gradient(46% 40% at 42% 48%, rgba(112,44,224,.42), rgba(85,13,209,.16) 48%, transparent 74%);
}

/* tight halo directly behind the door */
.scene__halo{
  position:absolute; z-index:1;
  left:19%; top:5%; width:30%; height:66%;
  border-radius:0;
  background:linear-gradient(180deg, rgba(206,178,255,.9) 0%, rgba(150,84,255,.66) 38%, rgba(104,30,226,.4) 70%, rgba(85,13,209,.2) 100%);
  box-shadow:0 0 5em rgba(120,52,240,.55);
  filter:blur(1.6em);
  transform:translate3d(calc(var(--px) * 1.4em), calc(var(--py) * 1em), 0);
  animation:breathe 7s ease-in-out infinite alternate;
  will-change:opacity, scale;
}
@keyframes breathe{ from{ opacity:.82; scale:1; } to{ opacity:1; scale:1.05; } }

/* the ground plane */
.scene__floor{
  position:absolute; z-index:2;
  /* the near edge is magnified hard by the perspective, so keep the element small */
  left:8%; width:74%; top:70.5%; height:54%;
  transform-origin:50% 0%;
  transform:perspective(46em) rotateX(74deg);
  background:
    repeating-linear-gradient(90deg, rgba(196,164,255,.14) 0 1px, transparent 1px 4%),
    repeating-linear-gradient(0deg,  rgba(196,164,255,.14) 0 1px, transparent 1px 6%),
    radial-gradient(ellipse 58% 88% at 42% 0%, rgba(226,210,255,.92), rgba(158,96,250,.5) 24%, rgba(84,22,190,.24) 48%, transparent 78%);
  /* one soft ellipse fades the plane out left, right and away — no hard rectangle */
  -webkit-mask-image:radial-gradient(ellipse 56% 104% at 42% 0%, #000 0%, #000 18%, rgba(0,0,0,.34) 48%, transparent 80%);
  mask-image:radial-gradient(ellipse 56% 104% at 42% 0%, #000 0%, #000 18%, rgba(0,0,0,.34) 48%, transparent 80%);
}
.scene__floor::after{           /* the ground's texture */
  content:""; position:absolute; inset:0;
  background-image:var(--grain); opacity:.34;
}

/* bright pool of light where the door meets the ground */
.scene__pool{
  position:absolute; z-index:3;
  left:14%; top:66%; width:36%; height:13%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(250,246,255,.95), rgba(206,172,255,.5) 38%, transparent 76%);
  filter:blur(.9em);
  transform:translate3d(calc(var(--px) * 1em), 0, 0);
}

/* soft cone of light spilling from the door's foot toward the lower right */
.scene__rays{
  position:absolute; z-index:3; pointer-events:none;
  left:16%; top:64%; width:84%; height:34%;
  /* hot spot sits at the door's foot, falling away to the lower right */
  background:radial-gradient(ellipse 80% 94% at 13% 22%, rgba(220,200,255,.46), rgba(152,94,255,.2) 36%, transparent 74%);
  transform:rotate(9deg);
  mix-blend-mode:screen;
  filter:blur(1.7em);
}

/* the 3-D stage that holds the door itself */
.scene__stage{
  position:absolute; inset:0; z-index:4;
  perspective:96em;
  perspective-origin:40% 44%;
}
.door{
  position:absolute;
  left:26%; top:8.5%; width:11em; height:32.5em;
  transform-style:preserve-3d;
  transform:rotateY(calc(37deg + var(--px) * 4deg));
}

/* receding outline frames — open at the bottom, square-cornered like the logo mark */
.door__frame{
  position:absolute;
  border-style:solid; border-bottom:0;
  transform:translate3d(calc(var(--px) * .6em), calc(var(--py) * .4em), 0);
}
.door__frame--1{
  inset:-1.5em -1.5em 0;
  border-width:.2em; border-color:rgba(214,190,255,.7);
  border-radius:0;
  box-shadow:0 0 1.4em rgba(160,110,255,.6);
}
.door__frame--2{
  inset:-3.4em -3.4em 0;
  border-width:.22em; border-color:rgba(186,150,255,.4);
  border-radius:0;
  filter:blur(.08em);
  box-shadow:0 0 2em rgba(130,74,244,.45);
}
.door__frame--3{
  inset:-5.8em -5.8em 0;
  border-width:.26em; border-color:rgba(168,128,255,.2);
  border-radius:0;
  filter:blur(.16em);
  box-shadow:0 0 3em rgba(112,52,232,.3);
}

/* near-side thickness of the frame — the logo mark's thick left bar */
.door__jamb{
  /* starts a little below the core's top edge so it never spikes above it */
  position:absolute; left:0; top:2.4em; bottom:0; width:1.5em;
  transform-origin:left center;
  transform:rotateY(-90deg);
  background:linear-gradient(180deg, rgba(246,241,255,0) 0%, #F6F1FF 10%, #D8C4FF 42%, #A978FF 100%);
  box-shadow:0 0 2.4em rgba(169,120,255,.85);
}

/* the glowing panel */
.door__core{
  position:absolute; inset:0;
  border-radius:0;
  background:linear-gradient(178deg, #FFFFFF 0%, #FBF8FF 22%, #EFE6FF 46%, #D3C0FF 78%, #C9B3FF 100%);
  box-shadow:
    0 0 3em #D9C8FF,
    0 0 9em #8F5CFF,
    0 0 22em rgba(85,13,209,.9);
  animation:corePulse 7s ease-in-out infinite alternate;
}
@keyframes corePulse{ from{ opacity:.93; } to{ opacity:1; } }

/* film grain over the whole scene, feathered so the box never shows */
.scene__grain{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background-image:var(--grain); opacity:.06;
  -webkit-mask-image:radial-gradient(ellipse 58% 58% at 42% 50%, #000 0%, #000 42%, transparent 88%);
  mask-image:radial-gradient(ellipse 58% 58% at 42% 50%, #000 0%, #000 42%, transparent 88%);
}

/* ---------- 7. Products ---------- */
.cards{
  display:grid; gap:20px; margin-top:clamp(40px,5vw,64px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.card{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  padding:28px; border-radius:20px;
  border:1px solid var(--c-line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:var(--c-silver);
  transition:border-color var(--t-hover) var(--ease),
             transform var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, var(--c-lime), transparent);
  opacity:0; transition:opacity var(--t-hover) var(--ease);
}
.card:hover,.card:focus-visible{
  border-color:rgba(169,120,255,.6);
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(85,13,209,.25);
}
.card:hover::before,.card:focus-visible::before{ opacity:1; }
.card:hover .arrow{ transform:translate(2px,-2px); }
.card__mark{
  position:absolute; right:-10px; bottom:-18px; z-index:-1;
  height:104px; width:auto; opacity:.05; pointer-events:none;
}
.lockup{ display:flex; align-items:center; margin-bottom:20px; }
.lockup__suffix{ color:var(--c-lilac); font-weight:300; font-size:1rem; line-height:1; }
.card__kicker{
  display:block; font-size:.7rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c-lime); margin-bottom:.9rem;
}
:lang(zh) .card__kicker{ text-transform:none; letter-spacing:.06em; }
.card__title{ font-size:1.35rem; font-weight:500; line-height:1.3; margin:0 0 .6rem; }
:lang(zh) .card__title{ line-height:1.45; }
.card__desc{ display:block; font-size:.98rem; color:var(--c-silver); }
.card__audience{
  display:block; margin-top:1rem; font-size:.9rem; color:var(--c-muted);
}
.card__audience::before{ content:"• "; color:var(--c-lilac); }
.card__cta{
  display:block; margin-top:auto; padding-top:1.4rem;
  color:var(--c-lilac); font-weight:300; font-size:.95rem;
}

/* ---------- 8. About ---------- */
.about{ overflow:clip; }
.about__mark{
  position:absolute; right:24px; top:50%; transform:translateY(-50%);
  height:640px; width:auto; opacity:.028; pointer-events:none; z-index:0;
}
.about .wrap{ position:relative; z-index:1; }
.about__grid{ display:grid; gap:clamp(24px,4vw,64px); grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
.about__head{ position:sticky; top:110px; align-self:start; }
.about__body p{ max-width:62ch; }

.lineage__title{
  margin:clamp(56px,7vw,88px) 0 24px;
  font-size:.9rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--c-white);
}
:lang(zh) .lineage__title{ text-transform:none; letter-spacing:.08em; font-size:1rem; }
.lineage{ display:grid; gap:20px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.tile{
  display:flex; flex-direction:column;
  padding:24px; border-radius:20px;
  border:1px solid var(--c-line);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  color:var(--c-silver);
  transition:border-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.tile:hover,.tile:focus-visible{
  border-color:rgba(169,120,255,.6);
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(85,13,209,.22);
}
.tile:hover .arrow{ transform:translate(2px,-2px); }
.chip{
  align-self:flex-start; margin-bottom:14px;
  padding:4px 10px; border-radius:8px;
  background:rgba(205,252,85,.12); color:var(--c-lime);
  font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1.4;
}
:lang(zh) .chip{ text-transform:none; letter-spacing:.06em; }
/* partner logo row: every mark is white on the dark tile, heights tuned so they read as one size */
.tile__logo{ display:flex; align-items:center; height:34px; margin-bottom:18px; }
.tile__logo img{ display:block; width:auto; height:24px; max-width:170px; opacity:.92; }
.tile__logo--arup img{ height:21px; }
.tile__logo--venturous img{ height:34px; }
.tile__logo--neuron img{ height:22px; }
.tile__name{ display:block; color:var(--c-white); font-weight:500; font-size:1.15rem; margin-bottom:.5rem; }
.tile__desc{ display:block; font-size:.95rem; }
.tile__cta{ margin-top:auto; padding-top:1.2rem; color:var(--c-lilac); font-weight:300; font-size:.92rem; }

/* ---------- 9. Contact ---------- */
.contact__panel{
  position:relative; overflow:hidden;
  text-align:center; padding:clamp(48px,7vw,88px) clamp(24px,5vw,64px);
  border:1px solid var(--c-line); border-radius:28px;
  background:var(--c-ink-2);
}
.contact__panel::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:180%;
  background:radial-gradient(50% 46% at 50% 34%, rgba(85,13,209,.5), transparent 70%);
  pointer-events:none;
}
.contact__panel > *{ position:relative; }
.contact__panel .section__title{ margin-inline:auto; max-width:16ch; }
.contact__panel .section__intro{ margin-inline:auto; }
.contact__actions{ margin:2rem 0 1rem; }
.contact__parent{ margin:0; }

/* ---------- 10. Footer ---------- */
.footer{ border-top:1px solid var(--c-line); padding:64px 0 40px; background:var(--c-black); }
.footer__top{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:48px; }
.footer__logo img{ height:28px; width:auto; }
.footer__tagline{ margin:0; font-size:.95rem; color:var(--c-silver); max-width:46ch; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding-bottom:40px; }
.footer__h{
  font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-muted); margin:0 0 14px;
}
:lang(zh) .footer__h{ text-transform:none; letter-spacing:.08em; font-size:.85rem; }
.footer__col li{ margin-bottom:10px; }
.footer__col a{ color:var(--c-silver); font-size:.95rem; transition:color var(--t-hover) var(--ease); }
.footer__col a:hover{ color:var(--c-lilac); }
.footer__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--c-line); padding-top:24px;
}
.footer__bottom p{ margin:0; font-size:.85rem; color:var(--c-muted); }

/* ---------- 11. Responsive ---------- */
@media (min-width:900px){
  /* the lockup is 2.89:1 — 26px reads too small once the nav has room */
  .nav__logo img{ height:32px; }
}
@media (min-width:960px){
  .hero__inner{ grid-template-columns:46% 54%; }
  .scene{ font-size:clamp(7px,.85vw,11px); }
}
@media (max-width:959.98px){
  .hero{ min-height:0; padding-top:calc(var(--nav-h) + 40px); }
  .hero__inner{ grid-template-columns:minmax(0,1fr); }
  .hero__visual{ justify-content:center; }
  .scroll-hint{ display:none; }
  .lang,.menu-btn{ min-height:44px; padding:10px 16px; }

  .nav__links{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    margin:0; padding:8px var(--gutter) 20px;
    background:rgba(2,1,5,.96);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--c-line);
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:14px 0; font-size:1.05rem; border-bottom:1px solid var(--c-line); }
  .nav__links a:last-child{ border-bottom:0; }
  .nav__tools{ margin-left:auto; }
  .menu-btn{ display:inline-flex; align-items:center; }
  /* without JS the panel cannot open, so show the links inline instead */
  .no-js .nav__links{ display:flex; position:static; flex-direction:row; gap:20px;
    background:none; border:0; padding:0; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .no-js .nav__links a{ padding:8px 0; font-size:.9rem; border:0; }
  .no-js .menu-btn{ display:none; }

  .about__grid{ grid-template-columns:minmax(0,1fr); }
  .about__head{ position:static; }
  .about__mark{ right:-60px; height:420px; }
}
@media (min-width:700px) and (max-width:959.98px){
  .scene{ font-size:8.6px; }
}
@media (max-width:1099.98px){
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:699.98px){
  :root{ --nav-h:64px; }
  /* one notch below the spec's 2.4rem floor so "exploring endless" holds one line */
  .hero__title{ font-size:clamp(2.05rem,8.6vw,2.4rem); }
  .cards,.lineage{ grid-template-columns:minmax(0,1fr); }
  .footer__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  .footer__bottom{ flex-direction:column; gap:8px; }
}
@media (min-width:1600px){
  /* give the headline the width it needs to break after "future" and
     "intelligence," instead of orphaning "endless" onto its own line */
  .hero__inner{ max-width:1320px; grid-template-columns:40% 60%; }
  .hero__text{ max-width:none; }
}
@media (max-width:479.98px){
  :root{ --gutter:16px; }
  /* the no-JS inline nav has to fit three anchors next to the logo at 320 px */
  .no-js .nav__links{ gap:14px; }
  .no-js .nav__links a{ font-size:.84rem; }
  .btn{ width:100%; }
  .hero__actions{ gap:12px; }
  .footer__cols{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- 12. Print ---------- */
@media print{ .reveal{ opacity:1; transform:none; } }

/* ---------- 13. Reduced motion ---------- */
@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{ opacity:1; transform:none; }
  .scene__halo{ opacity:1; scale:1; }
  .door__core{ opacity:1; }
}