.ecosystem-page .scrolly,.ecosystem-page .rail,.ecosystem-page .progress{
  --bg:#090B0C; --bg-2:#0E1112; --ink:#ECEFE9; --ink-2:#C9CEC6; --muted:#8C948D; --sage:#A9B59A;
  --lime:#A6DD5C; --lime-dim:rgba(166,221,92,.14); --line:rgba(236,239,233,.09); --line-2:rgba(236,239,233,.16);
  --font-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gutter:clamp(20px,5vw,72px); --header-h:88px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
/* ---------- progress (mobile) ---------- */
.progress{position:fixed;left:0;top:var(--header-h);height:2px;width:100%;z-index:49;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- scrolly ---------- */
.scrolly{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;width:100%;z-index:1;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 55% at 66% 50%,rgba(166,221,92,.045),transparent 70%),
    radial-gradient(rgba(236,239,233,.055) 1px,transparent 1.3px) 0 0/32px 32px;
}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,var(--bg) 0%,rgba(9,11,12,.0) 38%),linear-gradient(to bottom,var(--bg),transparent 14%,transparent 86%,var(--bg))}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;z-index:2;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);pointer-events:none;line-height:1.9}
.hud b{font-weight:500;color:var(--ink-2)}
.hud-tr{top:calc(var(--header-h) + 22px);right:var(--gutter);text-align:right}
.hud-br{bottom:28px;right:var(--gutter);text-align:right}
.hud .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:8px;vertical-align:1px;box-shadow:0 0 10px var(--lime);animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.35}}
.hud-bar{display:block;width:180px;height:1px;background:var(--line-2);margin:10px 0 0 auto;position:relative}
.hud-bar i{position:absolute;inset:0;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}

.steps{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh}
.step{min-height:150vh;min-height:150svh;padding:0 var(--gutter);display:block}
.step-inner{position:sticky;top:calc(var(--header-h) + 9vh);max-width:min(560px,40vw);padding:24px 0}
.step--hero{min-height:125svh}
.step--hero .step-inner{top:calc(var(--header-h) + 10vh)}
.step--hero .h1 .soft{font-size:.56em;letter-spacing:-.035em;margin-top:.28em}
.step--cta{min-height:130svh}
.step--wide .step-inner{max-width:min(600px,44vw)}

/* reveal */
.ygg-reveal{opacity:1;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.step.is-in .ygg-reveal{opacity:1;transform:none}
.step.is-in .ygg-reveal:nth-child(2){transition-delay:.06s}.step.is-in .ygg-reveal:nth-child(3){transition-delay:.12s}
.step.is-in .ygg-reveal:nth-child(4){transition-delay:.18s}.step.is-in .ygg-reveal:nth-child(5){transition-delay:.24s}
.step.is-in .ygg-reveal:nth-child(6){transition-delay:.30s}.step.is-in .ygg-reveal:nth-child(7){transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.ygg-reveal{opacity:1;transform:none;transition:none}}

/* type */
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);display:flex;gap:12px;align-items:center;margin:0 0 22px}
.eyebrow::after{content:"";width:36px;height:1px;background:var(--lime);opacity:.7}
.eyebrow .num{color:var(--lime)} .eyebrow .sep{color:var(--muted)}
.h1,.h2{font-weight:500;letter-spacing:-.045em;line-height:1.02;margin:0 0 22px}
.h1{font-size:clamp(44px,6.4vw,92px)}
.h2{font-size:clamp(34px,4.2vw,60px)}
.h1 .soft,.h2 .soft{display:block;color:var(--sage);font-weight:400}
.lede{font-size:clamp(16px,1.25vw,18px);color:var(--ink-2);max-width:48ch;margin:0 0 26px;line-height:1.7}
.unit{display:flex;align-items:baseline;gap:14px;margin:0 0 10px}
.unit strong{font-size:15px;font-weight:600;letter-spacing:-.01em}
.unit span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.specs{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--line)}
.specs li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink)}
.specs li span{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.note{font-family:var(--font-mono);font-size:11.5px;line-height:1.75;letter-spacing:.04em;color:var(--muted);border-left:1px solid var(--lime);padding:2px 0 2px 14px;margin:0 0 28px;max-width:52ch}
.note em{color:var(--ink-2);font-style:normal}
.link{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);
  padding:12px 0;border-bottom:1px solid var(--line-2);transition:gap .3s var(--ease),border-color .3s}
.link:hover{gap:18px;border-color:var(--lime)}
.link .arr{color:var(--lime)}
.scroll-cue{display:inline-flex;gap:14px;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:18px}
.scroll-cue i{width:1px;height:42px;background:linear-gradient(var(--lime),transparent);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:-1px;width:3px;height:10px;background:var(--lime);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{from{top:-10px}to{top:42px}}

/* fruits */
.fruits{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 26px}
.fruit{background:var(--bg);padding:14px 14px 16px;text-decoration:none;display:flex;flex-direction:column;gap:6px;min-height:96px;position:relative;
  transition:background .3s}
.fruit .n{font-family:var(--font-mono);font-size:10.5px;color:var(--lime);letter-spacing:.12em}
.fruit b{font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.fruit small{font-size:12px;color:var(--muted);line-height:1.4}
.fruit:hover,.fruit.is-focus{background:#11160F}
.fruit:hover b,.fruit.is-focus b{color:var(--lime)}
.fruit .go{position:absolute;right:12px;top:12px;color:var(--muted);font-size:13px;transition:transform .3s var(--ease),color .3s}
.fruit:hover .go{transform:translate(2px,-2px);color:var(--lime)}

/* guardians */
.guards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 26px}
.guard{background:var(--bg);padding:18px 18px 20px;display:grid;grid-template-columns:120px 1fr;gap:16px}
.guard h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.guard h3 small{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--lime);text-transform:uppercase;font-weight:500;margin-top:4px}
.guard p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6}
.guard p span{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* cta */
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 22px;border-radius:4px;font-weight:600;font-size:14px;text-decoration:none;transition:transform .3s var(--ease),background .3s,box-shadow .3s}
.btn-primary{background:var(--lime);color:#0B0D0E}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px rgba(166,221,92,.55)}
.btn-line{border:1px solid var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--ink-2)}

/* rail */
.rail{position:fixed;right:calc(var(--gutter) - 8px);top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:4px;
  opacity:0;transition:opacity .5s}
.rail.on{opacity:1}
.rail button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:6px 8px;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:transparent;transition:color .3s}
.rail button i{width:14px;height:1px;background:var(--line-2);transition:width .4s var(--ease),background .3s}
.rail:hover button{color:var(--muted)}
.rail button.on{color:var(--ink-2)} .rail button.on i{width:34px;background:var(--lime)}
.rail button:focus-visible{outline:2px solid var(--lime)}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .hud-tr{display:none}
  .hud-br{display:none}
  .rail{display:none}
  .stage{background:
    radial-gradient(ellipse 80% 36% at 50% 26%,rgba(166,221,92,.05),transparent 70%),
    radial-gradient(rgba(236,239,233,.05) 1px,transparent 1.3px) 0 0/28px 28px}
  .stage::after{background:linear-gradient(to bottom,var(--bg),transparent 10%,transparent 44%,rgba(9,11,12,.7) 56%,var(--bg) 66%)}
  .step,.step--hero,.step--cta,.step--flow-m{min-height:auto;padding:46svh 0 16svh}
  .step-inner,.step--hero .step-inner,.step--flow-m .step-inner,.step--wide .step-inner{position:relative;top:auto;max-width:none;
    padding:44px var(--gutter) 12px;
    background:linear-gradient(to bottom,rgba(9,11,12,0),rgba(9,11,12,.9) 44px,rgba(9,11,12,.94))}
  .step--hero{padding-top:40svh}
  .step--hero .h1 .soft{font-size:.62em}
  .h1{font-size:clamp(40px,11vw,56px)} .h2{font-size:clamp(30px,8.6vw,42px)}
  .lede{font-size:15.5px;margin-bottom:18px}
  .specs li{padding:9px 0;font-size:14px}
  .note{margin-bottom:18px}
  .fruits{grid-template-columns:repeat(2,1fr)}
  .guard{grid-template-columns:1fr;gap:6px}
}
@media (min-width:901px){.progress{display:none}}

/* Yggdrasil: living light, editorial rhythm, and an accessible local experience. */
.ecosystem-page .site-header{position:fixed;inset:0 0 auto}
.scrolly{color:var(--ink);font-family:var(--font-sans);isolation:isolate}
.stage{background:radial-gradient(ellipse 48% 55% at 68% 48%,#36513820,transparent 80%),#090b0c}
.stage::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 32% 48% at 78% 36%,#9adf7220,transparent 72%),radial-gradient(ellipse 40% 40% at 57% 66%,#578d9b14,transparent 72%);pointer-events:none}
.stage::after{background:linear-gradient(90deg,#090b0c 0%,#090b0ce6 22%,#090b0c00 51%),linear-gradient(0deg,#090b0c,transparent 16%,transparent 86%,#090b0c)}
.step-inner{max-width:min(540px,39vw);padding-block:26px}
.h1{font-size:clamp(58px,6.8vw,104px);font-weight:500;letter-spacing:-.065em;line-height:1.02}
.h1 .soft{background:linear-gradient(110deg,#e5efca,#b3d67e 55%,#759782);color:transparent;background-clip:text;-webkit-background-clip:text}
.h2{letter-spacing:-.05em;line-height:1.08}
.h2 .soft{color:#b3c49e}
.lede{color:#b9c2b8;line-height:1.85;font-size:clamp(16px,1.15vw,18px)}
.eyebrow{margin-bottom:26px;font-size:10px;letter-spacing:.24em}
.hero-actions{display:flex;align-items:center;gap:22px;margin:30px 0 8px}
.hero-skip{font-size:12px;color:#b7c3ae;padding-block:14px;white-space:nowrap}
.hero-signature{font:9px/2 var(--font-mono);letter-spacing:.12em;color:#9ba797;display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.hero-signature span{color:var(--lime)}
.btn{min-height:50px;border-radius:3px}
.btn-primary{background:linear-gradient(115deg,#def7ae,#abd970);box-shadow:0 0 32px #a6dd5c0b}
.specs{border-top-color:#c9d8b522}
.specs li{padding:14px 0;border-bottom-color:#c9d8b51a}
.specs li span{color:#9aa790;font-size:10px}
.note{color:#a3ada0;background:linear-gradient(90deg,#acd76d08,transparent);padding:12px 0 12px 18px}
.fruit{background:linear-gradient(140deg,#171e19,#0b100d);min-height:110px;padding:18px;transition:background .25s,box-shadow .25s}
.fruit:hover,.fruit:focus-visible{background:#1b281c;box-shadow:inset 0 0 32px #a6dd5c0c}
.fruit b{font-size:14px}.fruit small{color:#a4afa0}.fruit .go{color:#acc391}
.fruits{border-color:#b7d7942a;background:#b7d79425;border-radius:6px;overflow:hidden}
.guard{background:linear-gradient(120deg,#141b15,#0b0f0d);padding:22px}
.guards{border-radius:6px;overflow:hidden;border-color:#b7d79425;background:#b7d79425}
.guard p span{letter-spacing:.04em;line-height:1.7;font-size:11px;color:#a6b2a0}
.rail{right:16px;gap:0}.rail button{min-height:38px;font-size:9px;letter-spacing:.12em;padding-inline:12px}.rail button i{width:10px}.rail button.on i{width:23px}
.hud-tr{right:4vw;top:calc(var(--header-h) + 28px);font-size:9px;letter-spacing:.17em;color:#83917f}.hud-tr b{color:#cedfc0;font-size:11px}
.hud-br{bottom:76px;right:4vw;font-size:9px;letter-spacing:.12em}
.ygg-controls{position:fixed;z-index:25;bottom:22px;right:4vw;display:flex;align-items:center;gap:20px;font:10px/1.4 var(--font-mono);color:#c1d0b6;transition:opacity .3s}
.ygg-controls button{font:inherit;min-height:42px;background:#101710db;border:1px solid #bad39736;border-radius:24px;color:#c1d0b6;padding:10px 16px;display:flex;gap:12px;align-items:center;backdrop-filter:blur(12px)}
.ygg-controls button:hover{border-color:#b4dc80}.ygg-chapter{letter-spacing:.07em}
.scrolly.is-finished .ygg-controls,.scrolly.is-finished~.rail{visibility:hidden;opacity:0}
.step{scroll-margin-top:100px}.ygg-reveal{transform:none}.ygg-ready .ygg-reveal{opacity:0;transform:translateY(18px)}.ygg-ready .step.is-in .ygg-reveal{opacity:1;transform:none}
@media(min-width:901px) and (max-height:780px){.step-inner,.step--hero .step-inner{top:102px;padding-block:14px}.h1{font-size:clamp(56px,6vw,84px)}.h2{font-size:44px}.lede{line-height:1.65;margin-bottom:18px}.eyebrow{margin-bottom:16px}.specs li{padding:10px 0}.note{margin-bottom:14px}.hero-signature{margin-top:20px}.step--wide .step-inner{max-width:46vw}}
@media(max-width:1100px) and (min-width:901px){.rail button{font-size:0;padding-right:0}.step-inner{max-width:43vw}.h1{font-size:66px}.hero-actions{align-items:flex-start;flex-direction:column;gap:4px}.hud-tr{font-size:8px}}
@media(max-width:900px){
 .scrolly{--header-h:77px;--gutter:24px}.stage::after{background:linear-gradient(0deg,#090b0c 10%,#090b0cb3 36%,transparent 65%,#090b0c66)}
 .stage{background:radial-gradient(ellipse 80% 42% at 50% 30%,#74964d18,transparent 80%),#090b0c}
 .step-inner,.step--hero .step-inner,.step--wide .step-inner{padding:34px var(--gutter) 24px;max-width:none;background:linear-gradient(180deg,#090b0c00,#090b0cf2 34px,#090b0cf5)}
 .step,.step--hero,.step--cta{padding-top:43svh;padding-bottom:12svh}.step--hero{padding-top:42svh}
 .h1{font-size:clamp(46px,11vw,78px);letter-spacing:-.055em}.h2{font-size:clamp(32px,7.4vw,52px)}.lede{font-size:15px;line-height:1.8}
 .hero-actions{gap:15px;flex-wrap:wrap;margin-top:22px}.hero-actions .btn{font-size:12px;padding:14px 16px}.hero-signature{font-size:8px;gap:7px;margin-top:24px;max-width:300px}.scroll-cue{font-size:9px;letter-spacing:.12em}
 .ygg-controls{right:16px;bottom:12px;gap:8px}.ygg-chapter{display:none}.ygg-controls button{font-size:10px;background:#101710ed;min-height:40px}
 .fruits{gap:1px}.fruit{padding:16px 12px;min-height:106px}.fruit b{font-size:14px}.fruit .go{right:9px;top:12px}.guard{padding:20px}.specs li{font-size:13px;gap:10px}.unit{flex-wrap:wrap;gap:4px 12px}.unit span{font-size:9px}.btns .btn{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.scrolly *, .scrolly *::after{animation:none!important;transition:none!important}.ygg-ready .ygg-reveal{opacity:1;transform:none}.ygg-controls{display:none}}
@media print{.stage,.rail,.ygg-controls,.progress{display:none}.steps{margin:0}.step{min-height:0;padding:24px}.step-inner{position:static;max-width:none}.ygg-reveal{opacity:1!important;transform:none!important}}

/* ---------- refinements: viewport-aware type, compact controls, landscape phones ---------- */
.scrolly a:focus-visible,.ygg-controls button:focus-visible,.fruit:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.fruit.is-focus{background:#1b281c;box-shadow:inset 0 0 0 1px #a6dd5c40,inset 0 0 32px #a6dd5c10}
.fruit.is-soon{cursor:default}.fruit.is-soon .n::after{content:" · em breve";color:var(--muted);letter-spacing:.08em}
.fruit.is-soon small{display:none}
.hero-actions .btn{flex:none}
.ygg-controls{bottom:max(22px,env(safe-area-inset-bottom))}
.ygg-controls button{cursor:pointer;transition:border-color .25s,background .25s}
.ygg-motion-icon{position:relative;width:10px;height:10px;flex:none}
.ygg-motion-icon::before,.ygg-motion-icon::after{content:"";position:absolute;top:0;width:3px;height:10px;background:currentColor;border-radius:1px}
.ygg-motion-icon::before{left:1px}.ygg-motion-icon::after{right:1px}
#ygg-motion[aria-pressed="true"] .ygg-motion-icon::before{left:2px;width:0;height:0;background:none;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;border-radius:0}
#ygg-motion[aria-pressed="true"] .ygg-motion-icon::after{display:none}
@media(min-width:901px){
  .step--hero .step-inner{top:calc(var(--header-h) + 5vh)}
  .step--hero .h1{font-size:clamp(52px,min(6.4vw,10.6vh),100px)}
  .h2{font-size:clamp(34px,min(4.2vw,7.2vh),60px)}
  .lede{max-width:46ch}
}
@media(min-width:901px) and (max-height:700px){
  .step-inner,.step--hero .step-inner{top:calc(var(--header-h) + 10px)}
  .hero-signature,.scroll-cue{display:none}
  .fruit{min-height:84px;padding:12px 14px}.fruit small{font-size:11px}
  .guard{padding:14px 18px}
}
@media(max-width:900px){
  .step-inner{max-width:640px}
  .ygg-controls{top:calc(var(--header-h) + 12px);bottom:auto;right:max(14px,env(safe-area-inset-right))}
  .ygg-controls button{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%;color:#d6e6c6}
  .ygg-motion-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hero-actions{align-items:center}
  .hero-skip{padding-block:12px}
  .btns .btn{flex:1 1 220px;justify-content:center}
  .step--cta{padding-bottom:calc(12svh + env(safe-area-inset-bottom))}
}
@media(max-width:360px){
  .h1{font-size:42px}.h2{font-size:30px}
  .fruits{grid-template-columns:1fr 1fr}.fruit{padding:14px 10px;min-height:96px}.fruit b{font-size:13px}
  .hero-actions .btn{width:100%;justify-content:space-between}
}
/* Phones held sideways: tree on the right, text flows on the left. */
@media(max-width:900px) and (orientation:landscape) and (max-height:560px){
  .scrolly{--header-h:64px}
  .stage::after{background:linear-gradient(90deg,#090b0c 0%,#090b0cf0 34%,#090b0c00 62%),linear-gradient(0deg,#090b0c,transparent 18%)}
  .step,.step--hero,.step--cta,.step--flow-m{min-height:auto;padding:22vh 0 26vh}
  .step--hero{padding-top:calc(var(--header-h) + 18px)}
  .step-inner,.step--hero .step-inner,.step--wide .step-inner,.step--flow-m .step-inner{position:relative;top:auto;max-width:56vw;
    padding:0 0 0 max(var(--gutter),env(safe-area-inset-left));background:none}
  .h1{font-size:44px}.h2{font-size:32px}.lede{font-size:14px;line-height:1.65}
  .hero-signature,.scroll-cue{display:none}
  .fruits{grid-template-columns:repeat(3,1fr)}.fruit{min-height:84px;padding:12px 10px}
  .guard{grid-template-columns:110px 1fr}
  .ygg-controls{top:auto;bottom:max(12px,env(safe-area-inset-bottom))}
  .progress{top:var(--header-h)}
}
/* The home page's .hero-actions stacks in a column; here the CTA and the skip link sit on one line. */
.ecosystem-page .hero-actions{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px 24px}
@media(min-width:901px){.step--hero{min-height:165svh}}