/* Froozy v2: brand landing + investor page
   One ground colour at a time: each blade sets body[data-bg] and the page melts from fruit to fruit. */

:root {
  --acai: #24102a;
  --creme: #fff6ea;
  --manga: #ffb31a;
  --pitaya: #ff3d8b;
  --morango: #ff4f6d;
  --lima: #b6eb4a;
  --frost: #7fd8f5;
  --laranja: #ff7a1f;
  --uva: #c9a7ff;

  --bg: var(--manga);
  --ink: var(--acai);
  --acc: var(--pitaya);

  --pad: clamp(16px, 4vw, 64px);
  --top: 76px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
}

body[data-bg="manga"]   { --bg: var(--manga);   --ink: var(--acai);  --acc: var(--pitaya); }
body[data-bg="creme"]   { --bg: var(--creme);   --ink: var(--acai);  --acc: var(--pitaya); }
body[data-bg="frost"]   { --bg: var(--frost);   --ink: var(--acai);  --acc: var(--pitaya); }
body[data-bg="lima"]    { --bg: var(--lima);    --ink: var(--acai);  --acc: #6d36a3; }
body[data-bg="pitaya"]  { --bg: var(--pitaya);  --ink: var(--acai);  --acc: var(--creme); }
body[data-bg="morango"] { --bg: var(--morango); --ink: var(--acai);  --acc: var(--manga); }
body[data-bg="laranja"] { --bg: var(--laranja); --ink: var(--acai);  --acc: var(--creme); }
body[data-bg="uva"]     { --bg: var(--uva);     --ink: var(--acai);  --acc: var(--pitaya); }
body[data-bg="acai"]    { --bg: var(--acai);    --ink: var(--creme); --acc: var(--manga); }

*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--manga); transition: background-color .8s var(--ease); }
html[data-bg="manga"] { background-color: var(--manga); }
html[data-bg="creme"] { background-color: var(--creme); }
html[data-bg="frost"] { background-color: var(--frost); }
html[data-bg="lima"] { background-color: var(--lima); }
html[data-bg="pitaya"] { background-color: var(--pitaya); }
html[data-bg="morango"] { background-color: var(--morango); }
html[data-bg="laranja"] { background-color: var(--laranja); }
html[data-bg="uva"] { background-color: var(--uva); }
html[data-bg="acai"] { background-color: var(--acai); }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--top); overflow-x: clip; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: clip;
  transition: background-color .8s var(--ease), color .8s var(--ease);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--bg); }

:root[data-lang="pt"] body [lang="en"],
:root[data-lang="en"] body [lang="pt"] { display: none !important; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 99px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------------ type */
.label {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); transition: background-color .8s; }
.mega { font-weight: 800; font-stretch: 78%; letter-spacing: -.045em; line-height: .84; font-size: clamp(60px, 13vw, 230px); margin: 0; }
.big { font-weight: 800; font-stretch: 82%; letter-spacing: -.035em; line-height: .9; font-size: clamp(44px, 7.4vw, 128px); margin: 0; }
.mid { font-weight: 700; font-stretch: 88%; letter-spacing: -.025em; line-height: 1; font-size: clamp(30px, 3.8vw, 60px); margin: 0; }
.lead { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.42; max-width: 34ch; margin: 0; font-weight: 450; }
.ol { color: transparent; -webkit-text-stroke: clamp(1.4px, .16vw, 2.6px) var(--ink); }
.acc { color: var(--acc); transition: color .8s; }
.ic { display: inline-block; width: .82em; height: .82em; vertical-align: -.06em; margin: 0 .04em; }
.small { font-size: 13px; opacity: .75; }

/* ------------------------------------------------------------------ buttons */
.btn {
  --b: var(--ink); --t: var(--bg);
  display: inline-flex; align-items: center; gap: .7em;
  padding: 18px 26px; border-radius: 999px; border: 0;
  background: var(--b); color: var(--t);
  font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer;
  transition: background-color .8s, color .8s, scale .35s var(--spring);
}
.btn:hover { scale: 1.05; }
.btn .arw { width: 24px; height: 24px; border-radius: 50%; background: var(--acc); color: var(--ink); display: grid; place-items: center; transition: rotate .4s var(--spring), background-color .8s; }
.btn:hover .arw { rotate: -45deg; }
.btn .arw svg { width: 12px; height: 12px; }
.btn.ghost { --b: transparent; --t: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }

/* ------------------------------------------------------------------ chrome */
.progress { position: fixed; left: 0; top: 0; height: 4px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--prog, 0)); background: var(--ink); z-index: 60; transition: background-color .8s; }
.top { position: fixed; inset: 12px var(--pad) auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none; }
.top > * { pointer-events: auto; }
.top-logo { width: 150px; padding: 9px 16px; border-radius: 999px; transition: scale .4s var(--spring), background-color .8s; }
.top-logo:hover { scale: 1.06; }
.top .top-logo.glass { background: rgba(255, 246, 234, .9); box-shadow: 0 6px 18px rgba(36, 16, 42, .12), inset 0 0 0 1.5px rgba(36, 16, 42, .1); --wm: #24102a; --gl: #ff3d8b; --st: #24102a; color: #24102a; }
.top-logo svg { width: 100%; height: auto; }
.glass {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 16%, transparent);
  transition: background-color .8s;
}
.top-nav { display: flex; gap: 4px; padding: 6px; border-radius: 999px; }
.top-nav a { padding: 9px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; transition: background-color .25s, color .25s; }
.top-nav a:hover, .top-nav a.is-active { background: var(--ink); color: var(--bg); }
.top-end { display: flex; align-items: center; gap: 10px; }
.lang { display: flex; padding: 4px; border-radius: 999px; }
.lang button { border: 0; background: none; padding: 7px 11px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.top .btn { padding: 11px 18px; font-size: 15px; }

.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); opacity: 0; transition: width .3s var(--spring), height .3s var(--spring), margin .3s var(--spring), background-color .8s, opacity .3s; }
.cursor.on { opacity: 1; }
.cursor.big { width: 66px; height: 66px; margin: -33px 0 0 -33px; background: var(--acc); mix-blend-mode: multiply; }
body[data-bg="acai"] .cursor.big { mix-blend-mode: normal; opacity: .85; }

/* ------------------------------------------------------------------ entrance gestures */
.js .g { transition: opacity .9s var(--ease), translate 1.1s var(--ease), scale 1.1s var(--spring), rotate 1.1s var(--spring), clip-path 1.2s var(--ease), filter .9s var(--ease); transition-delay: var(--d, 0s); }
.js .g-up:not(.in) { opacity: 0; translate: 0 60px; }
.js .g-left:not(.in) { opacity: 0; translate: -80px 0; }
.js .g-right:not(.in) { opacity: 0; translate: 80px 0; }
.js .g-pop:not(.in) { opacity: 0; scale: .5; rotate: -14deg; }
.js .g-clip:not(.in) { clip-path: inset(0 0 100% 0); }
.js .g-blur:not(.in) { opacity: 0; filter: blur(12px); translate: 0 24px; }

/* ------------------------------------------------------------------ helpers */
section { position: relative; }
main > section, .ribbons { overflow-x: clip; }
main { position: relative; z-index: 1; }
.fruit { position: absolute; pointer-events: none; will-change: transform; }
.fruit > svg { width: 100%; height: 100%; filter: drop-shadow(0 14px 16px rgba(36, 16, 42, .18)); overflow: visible; }
.fruit.spin > svg { animation: wob 6s ease-in-out infinite alternate; }
.fruit.spin:nth-of-type(2n) > svg { animation-duration: 7.5s; animation-direction: alternate-reverse; }
@keyframes wob { from { rotate: -10deg; } to { rotate: 12deg; } }

/* ================================================================== HERO */
.hero { min-height: 100svh; padding: calc(var(--top) + 4vh) 0 0; overflow: clip; display: flex; flex-direction: column; }
.hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-inline: var(--pad); position: relative; z-index: 3; }
.hero-head .big { max-width: 15ch; font-size: clamp(40px, 5.4vw, 96px); }
.hero-head .label { margin-top: 12px; }
.hero-word { position: relative; margin-top: auto; padding-inline: calc(var(--pad) * .5); z-index: 2; }
.hero-word svg.wm { display: block; width: min(100%, 112svh); height: auto; margin: 0 auto; overflow: visible; }
.lt { }
.hero-word .lt { translate: calc((var(--i) - 3) * var(--hp, 0) * 7vw) calc(var(--hp, 0) * var(--v, 0) * -18vh); rotate: calc((var(--i) - 3) * var(--hp, 0) * 7deg); }
.hero-word .lt-cup { transform-origin: 50% 85%; scale: calc(1 + var(--hp, 0) * .35); translate: 0 calc(var(--hp, 0) * -6vh); }
.js .hero-word .lt > * { animation: drop-in 1s var(--spring) both; animation-delay: calc(var(--i) * 80ms + 200ms); }
@keyframes drop-in { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 2vh var(--pad) 4vh; position: relative; z-index: 3; }
.hero-foot .lead { max-width: 31ch; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .f1 { width: clamp(90px, 11vw, 190px); aspect-ratio: 1; left: 3%; top: 30%; }
.hero .f2 { width: clamp(70px, 8vw, 140px); aspect-ratio: 1; right: 30%; top: 13%; }
.hero .f3 { width: clamp(110px, 14vw, 240px); aspect-ratio: 1; right: -3%; top: 30%; }
.hero .f4 { width: clamp(56px, 6vw, 110px); aspect-ratio: 1; left: 44%; top: 9%; }
.hero .f5 { width: clamp(80px, 9vw, 150px); aspect-ratio: 1; left: 44%; bottom: 3%; z-index: 4; }
.hero .f6 { width: clamp(50px, 5vw, 90px); aspect-ratio: 1; right: 14%; bottom: 13%; z-index: 4; }
.hero .f7 { width: clamp(24px, 2.4vw, 40px); aspect-ratio: 1; left: 15%; top: 18%; color: var(--creme); }
.hero .f8 { width: clamp(18px, 1.8vw, 30px); aspect-ratio: 1; right: 22%; top: 40%; color: var(--pitaya); }
.sticker { position: absolute; z-index: 5; width: clamp(104px, 10vw, 160px); aspect-ratio: 1; right: 5%; top: 50%; border-radius: 50%; background: var(--pitaya); color: var(--creme); display: grid; place-items: center; rotate: var(--spin, 0deg); box-shadow: 0 16px 30px rgba(36, 16, 42, .2); }
.sticker svg.ring { width: 100%; height: 100%; position: absolute; inset: 0; }
.sticker text { font: 800 11.5px var(--display); letter-spacing: .2em; text-transform: uppercase; fill: currentColor; }
.sticker .core { width: 30%; height: auto; position: relative; --gl: var(--creme); }

/* ================================================================== RIBBONS */
.ribbons { position: relative; height: clamp(150px, 19vw, 260px); margin-top: -3vw; z-index: 6; pointer-events: none; }
.ribbon { position: absolute; left: -10%; width: 120%; overflow: hidden; padding: 14px 0; font-weight: 800; font-stretch: 82%; font-size: clamp(24px, 3.4vw, 52px); letter-spacing: -.02em; white-space: nowrap; }
.ribbon.r1 { top: 16%; rotate: -4deg; background: var(--acai); color: var(--creme); z-index: 2; }
.ribbon.r2 { top: 44%; rotate: 3deg; background: var(--pitaya); color: var(--acai); }
.ribbon-row { display: inline-flex; gap: .5em; align-items: center; will-change: transform; }
.ribbon-row .ic { width: .9em; height: .9em; }

/* ================================================================== STORY */
.story { padding: clamp(64px, 14vw, 220px) 0 clamp(56px, 12vw, 180px); }
.story > .label { margin-left: var(--pad); }
.scrub { font-weight: 800; font-stretch: 84%; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(34px, 5.4vw, 92px); margin: 28px 0 0; padding-inline: var(--pad); max-width: 20ch; }
.scrub .w { opacity: .13; transition: opacity .3s; }
.scrub .w.on { opacity: 1; }
.scrub .hot { color: var(--acc); }
.story-turn { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; margin-top: clamp(70px, 10vw, 160px); padding-left: var(--pad); }
.story-turn .lead { margin-top: 26px; }
.story-turn .big span span { display: block; }
.peek { position: relative; height: clamp(380px, 48vw, 740px); }
.peek .mach { position: absolute; right: -12%; top: 0; height: 100%; aspect-ratio: 320 / 560; rotate: 7deg; translate: calc((1 - var(--p, 0)) * 50%) 0; }
.peek .mach svg { width: 100%; height: 100%; filter: drop-shadow(0 30px 40px rgba(36, 16, 42, .22)); }
.peek .fruit { z-index: 2; }

/* ================================================================== HOW (pinned) */
.how { height: 460vh; }
.how-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: var(--top) var(--pad) 3vh; gap: 4vw; overflow: clip; }
.how-copy { position: relative; z-index: 2; }
.how-num { font-weight: 800; font-stretch: 75%; font-size: clamp(120px, 19vw, 320px); line-height: .8; letter-spacing: -.06em; margin: 16px 0 12px; height: .8em; overflow: hidden; }
.how-num .roll { display: block; transition: translate .7s var(--spring); translate: 0 calc(var(--s, 0) * -.8em); }
.how-num .roll span { display: block; height: .8em; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.how-steps li { grid-area: 1 / 1; transition: opacity .5s var(--ease), translate .6s var(--ease); }
.how-steps li:not(.on) { opacity: 0; translate: 0 24px; pointer-events: none; }
.how-steps h3 { margin: 0 0 12px; }
.how-dots { display: flex; gap: 8px; margin-top: 30px; }
.how-dots i { width: 30px; height: 8px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 20%, transparent); transition: background-color .4s, width .5s var(--spring); }
.how-dots i.on { background: var(--ink); width: 62px; }
.how-stage { position: relative; height: 82svh; display: grid; place-items: center; }
.mbox { position: relative; height: 100%; aspect-ratio: 320 / 560; max-width: 100%; }
.mbox > svg { width: 100%; height: 100%; filter: drop-shadow(0 40px 50px rgba(36, 16, 42, .25)); }
.how-cup { position: absolute; width: 20%; aspect-ratio: 240 / 360; left: 21%; top: 60%; translate: -50% -50%; opacity: 0; scale: .4; transition: left .9s var(--ease), top .9s var(--ease), opacity .5s, scale .9s var(--spring), rotate .9s var(--spring); z-index: 3; }
.how-cup svg { width: 100%; height: 100%; filter: drop-shadow(0 20px 24px rgba(36, 16, 42, .3)); }
.how[data-step="2"] .how-cup { opacity: 1; scale: .82; left: 21%; top: 60%; }
.how[data-step="3"] .how-cup { opacity: 1; scale: .82; left: 49%; top: 63%; }
.how[data-step="4"] .how-cup { opacity: 1; scale: 2.4; left: 50%; top: 50%; rotate: -8deg; }
.how .scr-glow { opacity: 0; transition: opacity .4s; }
.how[data-step="1"] .scr-glow { animation: pulse .9s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .2; } to { opacity: 1; } }
.how .door-light, .how .mix-light { transition: fill .4s; }
.how[data-step="2"] .door-light { fill: var(--lima); }
.how[data-step="3"] .mix-light, .how[data-step="4"] .mix-light { fill: var(--lima); }
.how .scan { opacity: 0; }
.how[data-step="3"] .scan { opacity: 1; animation: scan 1s ease-in-out infinite alternate; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(90px); } }
.how .tile { transition: scale .4s var(--spring); transform-box: fill-box; transform-origin: center; }
.how[data-step="1"] .tile.pick { scale: 1.12; }
.how-burst { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.how-burst .b { position: absolute; width: 17%; aspect-ratio: 1; left: 42%; top: 46%; opacity: 0; scale: .3; transition: translate 1s var(--spring), opacity .4s, scale 1s var(--spring); }
.how-burst .b svg { width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(36, 16, 42, .25)); }
.how[data-step="4"] .how-burst .b { opacity: 1; scale: 1; translate: var(--bx) var(--by); }

/* ================================================================== FLAVOURS (horizontal pinned track) */
.flavors { height: 420vh; }
.track-pin { position: sticky; top: 0; height: 100svh; overflow: clip; }
.track { display: flex; height: 100%; width: max-content; will-change: transform; }
.panel { position: relative; width: 100vw; height: 100%; flex: none; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: var(--top) 4vw 9vh; }
.panel.intro { width: 64vw; grid-template-columns: 1fr; align-content: center; padding-left: var(--pad); }
.panel.intro .lead { margin-top: 24px; }
.panel.intro .hint { margin-top: 34px; display: inline-flex; align-items: center; gap: 12px; font-weight: 700; }
.panel.intro .hint i { width: 60px; height: 3px; background: currentColor; position: relative; animation: nudge 1.2s ease-in-out infinite alternate; }
@keyframes nudge { to { translate: 14px 0; } }
.panel-txt { position: relative; z-index: 3; }
.panel-txt .mega { font-size: clamp(64px, 10vw, 180px); }
.panel-txt .lead { margin-top: 18px; }
.panel-txt .tag { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.panel-txt .tag > span { display: contents; }
.panel-txt .tag span span { padding: 8px 16px; border-radius: 99px; background: color-mix(in srgb, var(--creme) 55%, transparent); box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; font-size: 14px; line-height: 1.1; }
.panel-art { position: relative; height: 74svh; }
.panel-art .pcup { position: absolute; height: 84%; aspect-ratio: 240 / 360; left: 50%; top: 52%; translate: -50% -50%; rotate: -6deg; z-index: 2; }
.panel-art .pcup svg { width: 100%; height: 100%; filter: drop-shadow(0 30px 40px rgba(36, 16, 42, .24)); }
.panel-art .fruit { z-index: 3; }
.panel-art .fa { width: 34%; aspect-ratio: 1; left: -4%; top: 4%; }
.panel-art .fb { width: 25%; aspect-ratio: 1; right: 0; top: 18%; }
.panel-art .fc { width: 29%; aspect-ratio: 1; left: 6%; bottom: 0; }
.panel-art .fd { width: 20%; aspect-ratio: 1; right: 10%; bottom: 6%; z-index: 1; }
.panel .pnum { position: absolute; right: 4vw; top: calc(var(--top) + 6px); font-weight: 800; font-size: 14px; letter-spacing: .14em; }
.track-note { position: absolute; left: var(--pad); bottom: 16px; z-index: 5; }
.track-bar { position: absolute; left: var(--pad); right: var(--pad); bottom: 46px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 16%, transparent); z-index: 5; }
.track-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--ink); border-radius: 4px; }

/* ================================================================== PLACES */
.places { padding: clamp(64px, 14vw, 220px) 0; overflow: clip; }
.places-head { padding-inline: var(--pad); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.rows { margin-top: clamp(50px, 7vw, 110px); display: grid; gap: 1.2vw; }
.row { display: flex; gap: .35em; align-items: center; white-space: nowrap; font-weight: 800; font-stretch: 78%; font-size: clamp(56px, 9vw, 170px); letter-spacing: -.04em; line-height: 1; will-change: transform; width: max-content; }
.row .ic { width: .78em; height: .78em; }
.row .ol { -webkit-text-stroke-width: clamp(1.6px, .2vw, 3px); }

/* ================================================================== HOSTS */
.hosts { padding: clamp(64px, 13vw, 200px) 0; overflow: clip; }
.hosts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; padding-inline: var(--pad); align-items: start; }
.hosts .big .acc { color: var(--creme); }
.hosts-list { list-style: none; margin: 0; padding: 0; counter-reset: h; }
.hosts-list li { counter-increment: h; display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 26px 0; border-top: 2px solid var(--ink); }
.hosts-list li:last-child { border-bottom: 2px solid var(--ink); }
.hosts-list li::before { content: "0" counter(h); font-weight: 800; font-size: 15px; letter-spacing: .12em; padding-top: 8px; }
.hosts-list h3 { margin: 0 0 6px; font-size: clamp(26px, 2.6vw, 40px); font-stretch: 86%; letter-spacing: -.02em; line-height: 1; }
.hosts-list p { margin: 0; max-width: 40ch; }
.hosts .ctas { margin-top: 40px; }
.hosts-art { position: relative; height: clamp(300px, 34vw, 540px); margin-top: 40px; }
.hosts-art .mach { position: absolute; height: 120%; aspect-ratio: 320 / 560; left: -4%; top: 0; rotate: -10deg; }
.hosts-art .mach svg { width: 100%; height: 100%; filter: drop-shadow(0 30px 40px rgba(36, 16, 42, .3)); }
.hosts-art .fruit { z-index: 2; }

/* ================================================================== OPS */
.ops { padding: clamp(64px, 13vw, 200px) 0 clamp(60px, 8vw, 120px); overflow: clip; }
.ops-head { padding-inline: var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: end; }
.road { position: relative; height: clamp(220px, 24vw, 360px); margin-top: clamp(40px, 6vw, 90px); }
.road-line { position: absolute; left: 0; right: 0; bottom: 20%; border-top: 4px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.road .truck { position: absolute; bottom: calc(20% - 4px); left: 0; width: clamp(240px, 28vw, 440px); translate: calc(-100% + var(--p, 0) * 135vw) 0; z-index: 2; }
.road .truck svg { width: 100%; height: auto; overflow: visible; }
.road .truck .whl { transform-box: fill-box; transform-origin: center; rotate: calc(var(--p, 0) * 2600deg); }
.stop { position: absolute; bottom: 20%; width: clamp(36px, 3.6vw, 58px); translate: -50% 0; transition: translate .6s var(--spring); }
.stop svg { width: 100%; height: auto; }
.stop.on { translate: -50% -16px; }
.stop .glow { transition: fill .4s; }
.stop.on .glow { fill: var(--lima); }
.ops-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; padding-inline: var(--pad); margin-top: clamp(40px, 6vw, 80px); }
.ops-facts h3 { margin: 14px 0 8px; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.02; letter-spacing: -.02em; font-stretch: 86%; }
.ops-facts p { margin: 0; max-width: 32ch; }
.ico { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; transition: background-color .8s, color .8s; }
.ico svg { width: 28px; height: 28px; }

/* ================================================================== INVEST teaser */
.invest { padding: clamp(72px, 14vw, 220px) 0 clamp(56px, 10vw, 140px); overflow: clip; }
.invest-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 5vw; padding-inline: var(--pad); align-items: center; }
.invest .lead { margin-top: 28px; max-width: 38ch; }
.invest .ctas { margin-top: 36px; }
.on-dark .btn { --b: var(--manga); --t: var(--acai); }
.on-dark .btn .arw { background: var(--acai); color: var(--creme); }
.on-dark .btn.ghost { --b: transparent; --t: var(--creme); box-shadow: inset 0 0 0 2px var(--creme); }
.field { display: grid; grid-template-columns: repeat(14, 1fr); gap: clamp(6px, .8vw, 12px); }
.field i { aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--creme) 12%, transparent); transition: background-color .5s, scale .5s var(--spring); }
.field i.on { background: var(--c, var(--manga)); scale: 1.1; }
.field-cap { margin-top: 18px; }
.family { margin-top: clamp(70px, 9vw, 130px); padding-inline: var(--pad); display: flex; flex-wrap: wrap; gap: 16px 36px; align-items: center; }
.stair { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 800; font-stretch: 84%; font-size: clamp(20px, 2.2vw, 34px); letter-spacing: -.02em; }
.stair span { padding: 8px 18px; border-radius: 99px; box-shadow: inset 0 0 0 2px currentColor; }
.stair span.me { background: var(--manga); color: var(--acai); box-shadow: none; }
.stair b { font-weight: 400; opacity: .5; }

/* ================================================================== FOOTER */
.foot { padding: clamp(64px, 12vw, 180px) 0 28px; overflow: clip; }
.foot-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6vw; padding-inline: var(--pad); align-items: start; }
.intents { list-style: none; margin: 0; padding: 0; }
.intents a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; border-top: 2px solid var(--ink); text-decoration: none; font-weight: 800; font-stretch: 86%; font-size: clamp(24px, 2.6vw, 40px); letter-spacing: -.02em; line-height: 1.05; transition: padding .4s var(--spring); }
.intents li:last-child a { border-bottom: 2px solid var(--ink); }
.intents a:hover { padding-left: 14px; }
.intents a small { display: block; font-size: 14px; font-weight: 600; letter-spacing: 0; opacity: .72; margin-top: 4px; font-stretch: 100%; }
.intents .arw { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; transition: rotate .4s var(--spring), background-color .8s; }
.intents a:hover .arw { rotate: -45deg; }
.intents .arw svg { width: 16px; height: 16px; }
.wait { margin-top: 30px; display: flex; gap: 8px; flex-wrap: wrap; }
.wait input { flex: 1 1 220px; min-width: 0; padding: 17px 22px; border-radius: 99px; border: 0; background: var(--creme); color: var(--acai); font: inherit; font-size: 17px; box-shadow: inset 0 0 0 2px var(--ink); }
.wait-msg { margin-top: 12px; min-height: 1.5em; font-weight: 600; }
.foot-word { margin-top: clamp(60px, 9vw, 140px); padding-inline: calc(var(--pad) * .5); }
.foot-word svg { width: 100%; height: auto; overflow: visible; }
.foot-word .lt-in { transition: translate .5s var(--spring), rotate .5s var(--spring); }
.foot-word .lt-hit { fill: transparent; pointer-events: all; }
.foot-word .lt:hover .lt-in { translate: 0 -10%; rotate: -7deg; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding: 26px var(--pad) 0; font-size: 14px; }
.foot-base nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-base a { text-decoration: none; font-weight: 600; }
.foot-base a:hover { text-decoration: underline; }
.foot-legal { padding: 14px var(--pad) 0; font-size: 12.5px; opacity: .75; max-width: 120ch; margin: 0; }

/* ================================================================== INVESTOR PAGE */
.ihero { min-height: 100svh; padding: calc(var(--top) + 6vh) var(--pad) 6vh; display: grid; grid-template-columns: 1.15fr .85fr; gap: 4vw; align-items: center; overflow: clip; }
.ihero .label { margin-bottom: 22px; }
.ihero .lead { margin-top: 30px; max-width: 38ch; }
.ihero .ctas { margin-top: 36px; }
.ihero-art { position: relative; height: 76svh; }
.ihero-art .mach { position: absolute; height: 100%; aspect-ratio: 320 / 560; left: 50%; top: 0; translate: -50% 0; }
.ihero-art .mach svg { width: 100%; height: 100%; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .4)); }
.ihero-art .fruit { z-index: 2; }

.thesis { padding: clamp(72px, 14vw, 220px) 0; }
.thesis > .label { margin-left: var(--pad); }

.vs { padding: clamp(64px, 13vw, 200px) var(--pad); }
.vs-head { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.vs-row { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 3vw; align-items: baseline; padding: 22px 0; border-top: 2px solid var(--ink); }
.vs-row:last-child { border-bottom: 2px solid var(--ink); }
.vs-row.head { border-top: 0; padding-bottom: 10px; }
.vs-row .k { font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.vs-row .old { position: relative; font-size: clamp(20px, 2vw, 30px); font-weight: 600; opacity: .6; width: fit-content; }
.vs-row .old span { background: linear-gradient(var(--ink), var(--ink)) 0 58% / 0% 3px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .7s var(--ease) .35s; }
.vs-row.in .old span { background-size: 100% 3px; }
.vs-row.head .old::after { display: none; }
.vs-row .new { font-size: clamp(24px, 2.6vw, 40px); font-weight: 800; font-stretch: 86%; letter-spacing: -.02em; line-height: 1.05; }

.model { padding: clamp(64px, 13vw, 200px) var(--pad); overflow: clip; }
.flow { list-style: none; margin: clamp(50px, 7vw, 100px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.flow li { position: relative; padding: 0 3vw 0 0; }
.flow .n { font-weight: 800; font-stretch: 75%; font-size: clamp(90px, 12vw, 200px); line-height: .8; letter-spacing: -.06em; }
.flow h3 { margin: 18px 0 10px; font-size: clamp(26px, 2.4vw, 38px); font-stretch: 86%; letter-spacing: -.02em; line-height: 1; }
.flow p { margin: 0; max-width: 32ch; }
.note { margin-top: clamp(40px, 6vw, 70px); padding: 18px 22px; border-radius: 18px; box-shadow: inset 0 0 0 2px var(--ink); max-width: 72ch; font-size: 15px; }

.plan { padding: clamp(64px, 13vw, 200px) var(--pad); overflow: clip; }
.plan-head { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: end; }
.phases { margin-top: clamp(50px, 7vw, 100px); display: grid; grid-template-columns: 1fr 1.6fr 2.6fr; gap: 3vw; align-items: end; }
.phase h3 { margin: 0 0 4px; font-size: clamp(24px, 2.2vw, 34px); font-stretch: 86%; letter-spacing: -.02em; }
.phase p { margin: 0 0 16px; font-size: 15px; }
.dots { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-end; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 16%, transparent); transition: background-color .3s; transition-delay: calc(var(--k, 0) * 3ms); }
.dots i.on { background: var(--ink); }

.group { padding: clamp(64px, 13vw, 200px) var(--pad); overflow: clip; }
.tree { margin-top: clamp(40px, 6vw, 80px); display: grid; gap: 14px; }
.tree .lvl { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tree .node { padding: 16px 26px; border-radius: 30px; box-shadow: inset 0 0 0 2.5px var(--ink); font-weight: 800; font-stretch: 84%; font-size: clamp(24px, 3vw, 46px); letter-spacing: -.02em; line-height: 1; }
.tree .node small { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; margin-top: 6px; opacity: .75; font-stretch: 100%; }
.tree .node.me { background: var(--ink); color: var(--bg); }
.tree .node.soon { opacity: .6; }
.tree .lvl:nth-child(2) { padding-left: 6vw; }
.tree .lvl:nth-child(3) { padding-left: 12vw; }

.talk { padding: clamp(64px, 13vw, 200px) var(--pad); overflow: clip; }
.talk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: start; }
.talk .lead { margin-top: 26px; }

.legal { padding: clamp(56px, 10vw, 150px) var(--pad) 40px; }
.legal-box { max-width: 92ch; }
.legal-box h2 { margin: 18px 0; }
.legal-box p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; opacity: .9; }

/* ================================================================== soft background */
.deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transition: opacity .8s; }
.deco .blob { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0)); will-change: transform; }
.deco .b1 { width: 62vmax; height: 62vmax; left: -18vmax; top: -16vmax; }
.deco .b2 { width: 52vmax; height: 52vmax; right: -16vmax; top: 30vh; }
.deco .b3 { width: 44vmax; height: 44vmax; left: 24vw; bottom: -26vmax; }
.deco .rg { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .28); }
.deco .r1 { width: 34vmax; height: 34vmax; right: 8vw; top: -12vmax; }
.deco .r2 { width: 22vmax; height: 22vmax; left: -6vmax; bottom: 8vh; }
.deco .sp { position: absolute; width: var(--s, 18px); height: var(--s, 18px); color: rgba(255, 255, 255, .6); animation: twinkle 4s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.deco .sp svg { width: 100%; height: 100%; }
@keyframes twinkle { 0%, 100% { opacity: .25; scale: .7; } 50% { opacity: 1; scale: 1; } }
body[data-bg="acai"] .deco { opacity: .35; }
body[data-bg="creme"] .deco .blob { background: radial-gradient(closest-side, rgba(255, 179, 26, .16), rgba(255, 179, 26, 0)); }
body[data-bg="creme"] .deco .rg { border-color: rgba(36, 16, 42, .07); }
body[data-bg="creme"] .deco .sp { color: rgba(255, 61, 139, .35); }

.hero .cupbig { aspect-ratio: 240 / 360; width: clamp(110px, 13vw, 220px); right: 1%; top: 22%; }

/* ================================================================== INVESTOR: network, why, flow line, cycle */
.net { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; }
.net-l path { stroke: rgba(255, 246, 234, .28); stroke-width: 2; stroke-dasharray: 6 10; animation: flow 1.8s linear infinite; fill: none; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.net-n circle { fill: var(--manga); transform-box: fill-box; transform-origin: center; animation: blink 2.6s ease-in-out infinite; animation-delay: calc(var(--k) * -.37s); }
.net-n circle:nth-child(3n) { fill: var(--pitaya); }
.net-n circle:nth-child(4n) { fill: var(--lima); }
@keyframes blink { 0%, 100% { opacity: .35; scale: .6; } 50% { opacity: 1; scale: 1.2; } }

.why { height: 360vh; }
.why-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 4vw; padding: var(--top) var(--pad) 4vh; overflow: clip; }
.why-kick { font-weight: 700; font-size: clamp(18px, 1.6vw, 24px); margin: 20px 0 10px; display: flex; align-items: center; gap: 10px; }
.why-count { display: inline-flex; align-items: flex-start; height: 1.2em; overflow: hidden; font-weight: 800; }
.roll { display: block; transition: translate .7s var(--spring); translate: 0 calc(var(--s, 0) * -1 * var(--rh, 1.2em)); }
.why-count .roll span { display: block; height: 1.2em; }
.how-num .roll { --rh: .8em; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; }
.why-list li { grid-area: 1 / 1; transition: opacity .5s var(--ease), translate .7s var(--ease); }
.why-list li:not(.on) { opacity: 0; translate: 0 40px; pointer-events: none; }
.why-list .mega { font-size: clamp(56px, 8.4vw, 150px); }
.why-list .lead { margin-top: 22px; }
.why-stage { position: relative; height: 76svh; }
.why-art { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; scale: .8; rotate: -6deg; transition: opacity .6s var(--ease), scale .9s var(--spring), rotate .9s var(--spring); }
.why[data-step="1"] .why-a, .why[data-step="2"] .why-b, .why[data-step="3"] .why-c { opacity: 1; scale: 1; rotate: 0deg; }
.why-art > svg { height: 90%; width: auto; filter: drop-shadow(0 30px 40px rgba(36, 16, 42, .25)); }
.why-a .wcup { height: 70%; position: relative; z-index: 2; translate: 18% 10%; }
.clock { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--creme); box-shadow: inset 0 0 0 6px var(--acai); left: 6%; top: 8%; }
.clock i { position: absolute; left: 50%; bottom: 50%; width: 6px; margin-left: -3px; border-radius: 6px; background: var(--acai); transform-origin: 50% 100%; }
.clock .h { height: 26%; rotate: calc(var(--p, 0) * 120deg + 60deg); }
.clock .m { height: 38%; background: var(--pitaya); rotate: calc(var(--p, 0) * 1440deg); }
.why-b .fruit { width: 34%; aspect-ratio: 1; }
.why-b .wb1 { left: 8%; top: 6%; width: 42%; } .why-b .wb2 { right: 4%; top: 14%; } .why-b .wb3 { left: 30%; top: 44%; width: 38%; } .why-b .wb4 { left: 0; bottom: 4%; width: 28%; } .why-b .wb5 { right: 6%; bottom: 8%; width: 30%; }

.flow-wrap { position: relative; }
.flow-line { position: absolute; left: 0; right: 8vw; top: calc(clamp(90px, 12vw, 200px) * .8 + 16px); height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.flow-line i { position: absolute; inset: 0; background: var(--ink); border-radius: 4px; transform-origin: 0 50%; transform: scaleX(clamp(0, calc(var(--p, 0) * 2.4 - .6), 1)); }
.flow-cup { position: absolute; top: 50%; width: 30px; height: 44px; left: calc(clamp(0, calc(var(--p, 0) * 2.4 - .6), 1) * 100%); translate: -50% -78%; }
.flow h3 { margin-top: 40px; }
.js .vs-row:not(.head) { transition: opacity .7s var(--ease), translate .8s var(--ease); }
.js .vs-row:not(.in):not(.head) { opacity: 0; translate: -50px 0; }

.cyc { height: 340vh; }
.cyc-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; padding: var(--top) var(--pad) 3vh; overflow: clip; }
.cyc-txt { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 4px; }
.cyc-txt li { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: baseline; padding: 8px 0; opacity: .35; transition: opacity .4s; border-top: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.cyc-txt li.on { opacity: 1; }
.cyc-txt h3 { margin: 0; font-size: 20px; font-stretch: 86%; }
.cyc-txt p { margin: 0; font-size: 15px; }
.cyc-ring { position: relative; width: min(40vw, 74svh); aspect-ratio: 1; margin: auto; container-type: inline-size; }
.cyc-ring .ring { position: absolute; inset: 8%; border-radius: 50%; border: 3px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.orbit { position: absolute; inset: 8%; rotate: calc(var(--p, 0) * 360deg); }
.orbit svg { position: absolute; left: 50%; top: 0; width: 11%; height: auto; translate: -50% -56%; rotate: calc(var(--p, 0) * -360deg); filter: drop-shadow(0 8px 10px rgba(36, 16, 42, .25)); }
.stns { list-style: none; margin: 0; padding: 0; }
.stn { position: absolute; left: 50%; top: 50%; transform: rotate(calc(var(--i) * 72deg)) translateY(-42cqw) rotate(calc(var(--i) * -72deg)) translate(-50%, -50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 16px 9px 9px; border-radius: 99px; background: var(--creme); box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; font-size: clamp(13px, 1.1vw, 16px); transition: background-color .4s, color .4s, scale .4s var(--spring); }
.stn b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--creme); font-size: 12px; }
.stn.on { background: var(--pitaya); scale: 1.08; }
.stn > span, .stn > span span { color: var(--ink); }
.cyc-core { position: absolute; left: 50%; top: 50%; width: 30%; translate: -50% -50%; }
.cyc-core svg { width: 100%; height: auto; filter: drop-shadow(0 20px 30px rgba(36, 16, 42, .22)); }
.phase h3 { transition: opacity .4s; }
.phase:not(.lit) h3, .phase:not(.lit) p { opacity: .4; }

/* ================================================================== responsive */
@media (max-width: 1100px) {
  .top-nav { display: none; }
  .panel.intro { width: 80vw; }
}
@media (max-width: 900px) {
  :root { --top: 68px; }
  body { font-size: 16px; }
  .top-logo { width: 104px; }
  .top .btn { display: none; }
  .hero-head { flex-direction: column; gap: 14px; }
  .hero-head .label { order: -1; margin: 0; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .hero .f3 { top: 44%; }
  .hero .f2 { right: 8%; top: 20%; }
  .hero .f5 { left: auto; right: 3%; bottom: auto; top: 64%; width: 64px; }
  .hero .f6 { right: 30%; bottom: 3%; }
  .sticker { top: auto; bottom: 34%; right: 4%; }
  .story-turn, .hosts-grid, .ops-head, .invest-grid, .foot-grid, .ihero, .vs-head, .plan-head, .talk-grid { grid-template-columns: 1fr; }
  .story-turn { padding-right: var(--pad); }
  .peek { height: 80vw; }
  .peek .mach { right: -4%; }
  .how { height: 440vh; }
  .how-pin { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 1vh; padding-top: calc(var(--top) + 4px); }
  .how-num { font-size: 22vw; margin: 6px 0 4px; }
  .how-steps .lead { font-size: 15px; }
  .how-steps h3.mid { font-size: 26px; margin-bottom: 6px; }
  .how-dots { margin-top: 12px; }
  .how-stage { height: 100%; }
  .panel { width: 100vw; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: stretch; padding: calc(var(--top) + 8px) 6vw 80px; }
  .panel.intro { grid-template-rows: auto; align-content: center; }
  .panel-art { height: auto; align-self: stretch; }
  .panel-art .pcup { height: 92%; }
  .panel-txt .mega { font-size: 17vw; }
  .panel-txt .lead { font-size: 15px; margin-top: 8px; }
  .panel-txt .tag { margin-top: 10px; }
  .panel-txt .tag span { font-size: 12px; padding: 5px 11px; }
  .panel-txt { min-width: 0; padding-right: 64px; }
  .panel-txt .lead { max-width: 100%; overflow-wrap: anywhere; }
  .track-pin { contain: paint; }
  .track { will-change: auto; }
  .hosts-art { height: 104vw; margin-top: 34px; }
  .hosts-art .mach { height: 100%; left: 2%; }
  .ops-facts { grid-template-columns: 1fr; gap: 34px; }
  .flow { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
  .flow li { display: grid; grid-template-columns: 76px 1fr; column-gap: 16px; align-items: start; padding: 0 0 28px; border-bottom: 2px solid color-mix(in srgb, var(--ink) 14%, transparent); }
  .flow li:last-child { border-bottom: 0; padding-bottom: 0; }
  .flow .n { font-size: 72px; grid-row: span 2; }
  .vs-row { grid-template-columns: 1fr 1fr; }
  .vs-row .k { grid-column: 1 / -1; }
  .vs-row.head .k { grid-column: auto; }
  .vs-row.head .k:first-child { display: none; }
  .phases { grid-template-columns: 1fr; }
  .ihero-art { height: 64svh; }
  .field { grid-template-columns: repeat(10, 1fr); }
  .field i:nth-child(n+71) { display: none; }
  .tree .lvl:nth-child(2) { padding-left: 4vw; }
  .tree .lvl:nth-child(3) { padding-left: 8vw; }
  .cursor { display: none; }
  .why { height: 330vh; }
  .why-pin, .cyc-pin { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 2vh; padding-top: calc(var(--top) + 6px); }
  .why-list .mega { font-size: 14vw; }
  .why-list .lead { font-size: 16px; margin-top: 10px; }
  .why-stage { height: 100%; }
  .flow-line { display: none; }
  .flow h3 { margin: 4px 0 8px; }
  .cyc-copy .big { font-size: 11vw; margin-top: 12px !important; }
  .cyc-copy > .lead { display: none; }
  .cyc-txt { margin-top: 14px; }
  .cyc-txt li { display: none; grid-template-columns: 1fr; border: 0; }
  .cyc-txt li.on { display: grid; }
  .cyc-ring { width: min(88vw, 52svh); }
  .stn { font-size: 12px; padding: 6px 11px 6px 6px; }
  .stn { padding: 5px; }
  .stn > span { display: none; }
  .stn b { width: 30px; height: 30px; font-size: 11px; }
  .top-logo { width: 124px; padding: 8px 14px; }
}
@media (max-width: 560px) {
  .big { font-size: 12.6vw; }
  .scrub { font-size: 8.6vw; }
  .row { font-size: 15vw; }
  .hosts-list li { grid-template-columns: 40px 1fr; }
  .btn { padding: 15px 20px; font-size: 16px; }
  .lang button { padding: 7px 9px; }
  .sticker { width: 84px; top: 31%; bottom: auto; right: auto; left: 38%; }
  .hero .cupbig { width: 88px; top: 28%; right: 3%; }
  .hero .f5 { display: none; }
  .hero .f2, .hero .f4, .hero .f6 { display: none; }
  .ribbon { font-size: 22px; padding: 11px 0; }
  .tree .node { padding: 12px 18px; }
}

/* ================================================================== reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
.rm .how, .rm .flavors { height: auto; }
.rm .how-pin, .rm .track-pin { position: relative; height: auto; overflow: visible; }
.rm .how-pin { min-height: 100svh; }
.rm .how-steps { gap: 28px; }
.rm .how-steps li { grid-area: auto; opacity: 1; translate: none; pointer-events: auto; }
.rm .how-num, .rm .how-dots { display: none; }
.rm .how-stage { height: 80svh; }
.rm .how-cup { opacity: 1; scale: .82; left: 21%; top: 60%; }
.rm .track { transform: none !important; width: auto; flex-direction: column; }
.rm .panel, .rm .panel.intro { width: 100%; min-height: 90svh; }
.rm .track-bar { display: none; }
.rm .track-note { position: relative; left: auto; bottom: auto; padding: 0 var(--pad) 40px; display: block; }
.rm .scrub .w { opacity: 1; }
.rm .road .truck { translate: 30vw 0; }
.rm .hero-word .lt, .rm .hero-word .lt-cup { translate: none; rotate: none; scale: none; }
.rm .peek .mach { translate: none; }
.rm .why, .rm .cyc { height: auto; }
.rm .why-pin, .rm .cyc-pin { position: relative; height: auto; min-height: 100svh; }
.rm .why-list li { grid-area: auto; opacity: 1; translate: none; }
.rm .cyc-txt li { opacity: 1; display: grid; }

/* Mobile stability: iOS kills the tab when many animated layers carry filters (GPU memory). */
@media (max-width: 820px), (pointer: coarse) {
  .fruit > svg, .peek .mach svg, .mbox > svg, .how-cup svg, .how-burst .b svg, .panel-art .pcup svg,
  .hosts-art .mach svg, .ihero-art .mach svg, .why-art > svg, .orbit svg, .cyc-core svg { filter: none !important; }
  .js .g-blur:not(.in) { filter: none !important; }
  .js .g { transition-property: opacity, translate, scale, rotate !important; }
  .fruit, .ribbon-row, .track, .row, .deco .blob { will-change: auto !important; }
  .top * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .cursor { display: none !important; }
}