@font-face{font-family:Onest;src:url('./assets/fonts/Onest-520.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Onest;src:url('./assets/fonts/Onest-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Onest;src:url('./assets/fonts/Onest-840.ttf') format('truetype');font-weight:840;font-style:normal;font-display:swap}

:root{
  --black:#09090a;
  --black-2:#0f0d0e;
  --black-3:#171416;
  --wine:#210b10;
  --wine-2:#3b0b15;
  --red:#ff304f;
  --red-dark:#a90f2c;
  --paper:#efe5ca;
  --paper-2:#daceb0;
  --ink:#171315;
  --white:#f7f3eb;
  --muted:#9a9295;
  --line:rgba(255,255,255,.13);
  --shell:min(1240px,calc(100vw - 48px));
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--black);color:var(--white);font-family:Onest,Arial,sans-serif;font-weight:500;line-height:1.45;overflow-x:hidden}
button,input,textarea,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.shell{width:var(--shell);margin-inline:auto}
.noise{position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.sound-toggle{position:fixed;z-index:1100;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:grid;width:54px;height:54px;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(18,14,16,.9);color:#fff;box-shadow:0 14px 45px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translateZ(0);cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.sound-toggle:hover{transform:translateY(-3px);border-color:var(--red)}.sound-toggle:active{transform:scale(.94)}
.sound-toggle .sound-on{font-size:22px;font-weight:840;line-height:1}.sound-toggle .sound-off{display:none;position:absolute;right:12px;top:8px;color:var(--red);font-size:18px;font-weight:840}
.sound-toggle.is-playing{background:var(--red);border-color:var(--red);animation:soundPulse 1.5s ease-in-out infinite}.sound-toggle.is-playing .sound-off{display:none}
.sound-toggle:not(.is-playing) .sound-off{display:block}
@keyframes soundPulse{50%{box-shadow:0 0 0 7px rgba(255,48,79,0),0 14px 45px rgba(0,0,0,.45)}0%{box-shadow:0 0 0 0 rgba(255,48,79,.42),0 14px 45px rgba(0,0,0,.45)}}
.confetti-layer{position:fixed;inset:0;z-index:1090;pointer-events:none;overflow:hidden}.confetti-bit{position:absolute;width:9px;height:15px;background:var(--confetti);transform:translate(-50%,-50%) rotate(var(--rot));animation:confettiBurst .9s cubic-bezier(.13,.75,.24,1) forwards}
@keyframes confettiBurst{to{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(calc(var(--rot) + 420deg))}}
body.party-mode .pulse,body.party-mode .brand img{animation:partyPulse .45s steps(2,end) infinite}
body.party-mode .marquee{filter:hue-rotate(130deg)}
@keyframes partyPulse{50%{filter:hue-rotate(180deg) brightness(1.4);transform:scale(1.12) rotate(5deg)}}

.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:28px;min-height:78px;padding:12px max(24px,calc((100vw - 1240px)/2));background:rgba(9,9,10,.86);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:24px;font-weight:840;letter-spacing:-.04em;white-space:nowrap}
.brand img{width:43px;height:43px;object-fit:contain}
.navlinks{display:flex;align-items:center;gap:26px;margin-left:auto;color:#aaa3a5;font-size:14px;font-weight:700}
.navlinks a{transition:color .2s ease}
.navlinks a:hover{color:var(--white)}
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.03em}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:30px;padding:0 9px;border-radius:999px;color:#9a9295;transition:color .2s ease,background .2s ease}
.lang-switch a:hover{color:var(--white)}
.lang-switch a[aria-current]{background:var(--white);color:var(--black)}
.topbar>.button{margin-left:14px}

.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;border:0;cursor:pointer;text-transform:uppercase;letter-spacing:.045em;font-weight:840;line-height:1;background:var(--white);color:var(--ink);transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.button:hover{transform:translateY(-2px)}
.button:active{transform:translateY(0) scale(.98)}
.button span{font-size:1.2em}
.button-small{min-height:46px;padding:0 20px;font-size:13px}
.button-big{min-height:64px;padding:0 30px;font-size:15px}
.button-primary{background:var(--red);color:#fff;box-shadow:0 18px 50px rgba(255,48,79,.2)}
.button-primary:hover{background:#ff4965;box-shadow:0 22px 65px rgba(255,48,79,.3)}
.button-dark{min-height:52px;padding:0 22px;background:var(--ink);color:#fff}
.text-link{display:inline-flex;align-items:center;color:#b7afb1;font-size:14px;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:4px}
.light-link{color:#3d3435}

.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);gap:70px;align-items:center;min-height:calc(100svh - 170px);padding-block:56px 40px;overflow:clip}
.hero::before{content:"";position:absolute;z-index:-2;top:-78px;left:48%;width:55vw;height:70%;background:radial-gradient(ellipse,rgba(102,3,22,.46),transparent 70%)}
.hero::after{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:84px 84px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
.hero-copy{position:relative;z-index:2}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:#b6adaf;font-size:12px;font-weight:840;letter-spacing:.17em;text-transform:uppercase}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,48,79,.7);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(255,48,79,0)}100%{box-shadow:0 0 0 0 rgba(255,48,79,0)}}
.hero h1,.section-intro h2,.room-copy h2,.mtonga-title h2,.gram-copy h2,.faq-aside h2,.final-copy h2{margin:0;text-transform:uppercase;font-weight:840;letter-spacing:-.07em;line-height:.95}
.hero h1{font-size:clamp(68px,7.4vw,124px);max-width:780px;line-height:.95}
.hero h1 span,.section-intro h2 span,.room-copy h2 span,.mtonga-title h2 span,.gram-copy h2 span,.faq-aside h2 span,.final-copy h2 span{color:var(--red)}
.hero-lede{max-width:670px;margin:34px 0 0;color:#c4bdbf;font-size:clamp(18px,1.6vw,23px);line-height:1.45}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:36px}
.proof-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:38px}
.proof-row span{padding:8px 11px;background:#171416;border:1px solid var(--line);color:#9d9597;font-size:10px;font-weight:840;letter-spacing:.1em}

.hero-visual{position:relative;min-height:680px;perspective:1200px;isolation:isolate}
.dossier-card,.file-shadow{position:absolute;left:50%;top:50%;width:min(465px,90%);height:590px;border-radius:4px;transform-origin:center;box-shadow:0 36px 90px rgba(0,0,0,.55)}
.file-shadow{background:#4f101c;border:1px solid rgba(255,255,255,.1)}
.file-shadow-one{transform:translate(-54%,-48%) rotate(-7deg)}
.file-shadow-two{background:#2b2020;transform:translate(-45%,-51%) rotate(5deg)}
.dossier-card{z-index:3;padding:34px;background:var(--paper);color:var(--ink);transform:translate(-50%,-50%) rotate(-1.5deg);overflow:hidden;animation:fileFloat 5.2s ease-in-out infinite}
.dossier-card::before{content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(45,30,24,.2) 5px)}
@keyframes fileFloat{50%{transform:translate(-50%,-52%) rotate(.7deg)}}
.dossier-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:22px;border-bottom:4px solid var(--ink)}
.dossier-head small{display:block;font-size:10px;font-weight:840;letter-spacing:.16em}
.dossier-head b{display:block;margin-top:8px;font-size:39px;line-height:.84;letter-spacing:-.06em}
.dossier-head>span{font-size:12px;font-weight:840;letter-spacing:.12em}
.scan-window{position:relative;display:grid;grid-template-columns:105px 1fr;gap:24px;align-items:center;margin-top:28px;padding:28px 22px;background:#1b1718;color:#eee5d5;min-height:210px;overflow:hidden}
.scan-window::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,48,79,.14),transparent);transform:translateX(-100%);animation:screenScan 2.4s linear infinite}
@keyframes screenScan{to{transform:translateX(100%)}}
.scan-line{position:absolute;z-index:2;left:0;right:0;top:20%;height:2px;background:var(--red);box-shadow:0 0 18px var(--red);animation:scanLine 2.4s linear infinite}
@keyframes scanLine{50%{top:80%}}
.avatar-unknown{display:grid;place-items:center;width:105px;height:105px;border-radius:50%;background:#e7ddc3;color:var(--ink);font-size:68px;font-weight:840}
.scan-copy{display:flex;flex-direction:column;gap:13px;font-size:11px;font-weight:840;letter-spacing:.08em}
.scan-copy span{overflow-wrap:anywhere}.scan-copy span::before{content:"✓";color:var(--red);margin-right:8px}
.dossier-stamp{position:absolute;right:30px;bottom:35px;padding:9px 13px;border:4px solid var(--red-dark);color:var(--red-dark);font-size:16px;font-weight:840;letter-spacing:.09em;transform:rotate(-5deg)}
.paper-slip{position:absolute;z-index:5;padding:14px 18px;background:#f6eed9;color:var(--ink);box-shadow:0 13px 35px rgba(0,0,0,.35);font-size:11px;font-weight:840;letter-spacing:.06em}
.paper-slip b{color:var(--red-dark);font-size:19px;margin-left:8px}
.slip-one{right:-8px;top:18%;transform:rotate(7deg);animation:slipOne 5s ease-in-out infinite}
.slip-two{left:-18px;bottom:14%;transform:rotate(-8deg);animation:slipTwo 4.6s ease-in-out infinite}
@keyframes slipOne{50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes slipTwo{50%{transform:translateY(13px) rotate(-4deg)}}

.marquee{overflow:hidden;border-block:1px solid rgba(255,255,255,.1);background:var(--red);color:white;transform:rotate(-1deg);transform-origin:center}
.marquee-track{display:flex;width:max-content;padding:14px 0;animation:marquee 20s linear infinite;font-size:13px;font-weight:840;letter-spacing:.13em;white-space:nowrap;will-change:transform}
.marquee-group{display:flex;flex:0 0 max(100vw,1100px);align-items:center;justify-content:space-around;gap:28px;padding-inline:14px}
.marquee-track i{font-style:normal;color:#210b10}
@keyframes marquee{to{transform:translateX(-50%)}}

.section{padding-block:130px}
.section-intro{max-width:880px;margin-bottom:54px}
.section-intro.compact{max-width:820px}
.section-intro h2,.room-copy h2,.mtonga-title h2,.gram-copy h2,.faq-aside h2{font-size:clamp(54px,6.1vw,92px)}
.section-intro p,.room-copy>p,.mtonga-title>p,.gram-copy>p,.faq-aside>p{max-width:720px;margin:28px 0 0;color:#c3bdbf;font-size:19px;line-height:1.6}

.quiz-section{display:grid;grid-template-columns:minmax(290px,.75fr) minmax(540px,1.25fr);gap:76px;align-items:start}
.quiz-section .section-intro{position:sticky;top:126px;margin:0}
.quiz-section .section-intro h2{font-size:clamp(38px,4.2vw,60px)}
.quiz{position:relative;min-height:650px;background:var(--paper);color:var(--ink);box-shadow:0 40px 100px rgba(0,0,0,.38);overflow:hidden}
.quiz::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(49,32,23,.15) 5px)}
.quiz-topline{position:relative;z-index:1;display:flex;justify-content:space-between;padding:28px 34px 16px;font-size:11px;font-weight:840;letter-spacing:.14em}
.quiz-progress{position:relative;z-index:1;height:7px;background:#cfc3a5}
.quiz-progress i{display:block;width:25%;height:100%;background:var(--red);transition:width .35s ease}
.quiz-body,.quiz-result{position:relative;z-index:2;padding:50px 56px 58px}
.quiz-icon{display:grid;place-items:center;width:74px;height:74px;background:var(--ink);color:var(--paper);font-size:37px;font-weight:840;transform:rotate(-3deg)}
.quiz-kicker{margin:32px 0 10px;color:var(--red-dark);font-size:11px;font-weight:840;letter-spacing:.14em}
.quiz h3{max-width:700px;margin:0;font-size:clamp(26px,3.1vw,42px);line-height:1.02;letter-spacing:-.04em;text-transform:uppercase;hyphens:manual;overflow-wrap:break-word}
.answers{display:grid;gap:10px;margin-top:40px}
.answers button{position:relative;padding:18px 52px 18px 20px;background:transparent;color:var(--ink);border:2px solid rgba(23,19,21,.3);text-align:left;cursor:pointer;font-weight:700;transition:background .18s,color .18s,border .18s,transform .18s}
.answers button::after{content:"↗";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:18px}
.answers button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:translateX(5px)}
.quiz-result{display:flex;min-height:643px;flex-direction:column;justify-content:center}
.quiz-result[hidden]{display:none}
.result-seal{align-self:flex-start;margin-bottom:28px;padding:11px 16px;border:4px solid var(--red-dark);color:var(--red-dark);font-size:14px;font-weight:840;line-height:1.05;letter-spacing:.1em;transform:rotate(-4deg)}
.quiz-result>p:first-of-type{margin:0 0 11px;font-size:11px;font-weight:840;letter-spacing:.14em}
.result-score{display:flex;align-items:baseline;justify-content:space-between;margin:35px 0 0;padding:18px 0;border-block:3px solid var(--ink)}
.result-score span{font-size:13px;font-weight:840;letter-spacing:.1em}
.result-score b{color:var(--red-dark);font-size:60px;letter-spacing:-.06em}
.result-copy{max-width:620px;margin:25px 0 30px;font-size:16px}
.quiz-result small{display:block;max-width:600px;margin-top:18px;color:#655c58;font-size:11px}

.game-section{padding-top:50px}
.mechanics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mechanic{position:relative;min-height:510px;padding:34px;overflow:hidden}
.paper{background:var(--paper);color:var(--ink)}
.paper::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(49,32,23,.18) 5px)}
.dark-paper{background:#201014;color:var(--white)}
.mechanic>*{position:relative;z-index:1}
.mechanic-number{display:block;color:var(--red-dark);font-size:12px;font-weight:840;letter-spacing:.15em}
.dark-paper .mechanic-number{color:var(--red)}
.mechanic img{width:142px;height:142px;margin:55px 0 30px;object-fit:contain;filter:drop-shadow(0 20px 25px rgba(0,0,0,.18));transition:transform .25s ease}
.mechanic:hover img{transform:rotate(-8deg) scale(1.06)}
.mechanic h3{margin:0;text-transform:uppercase;font-size:31px;line-height:1;letter-spacing:-.05em}
.mechanic p{margin:18px 0 0;color:#615a55;font-size:15px}
.dark-paper p{color:#b1a7a8}

.product-stage{padding-block:150px;background:#130b0e;border-block:1px solid rgba(255,255,255,.08);overflow:hidden}
.product-grid{display:grid;grid-template-columns:minmax(330px,.75fr) minmax(500px,1.25fr);gap:78px;align-items:center}
.room-copy>p{max-width:520px}
.room-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.room-choice,.whip-choice{padding:12px 15px;border:1px solid rgba(255,255,255,.15);background:#1c1517;color:#aaa2a4;cursor:pointer;font-size:11px;font-weight:840;letter-spacing:.1em}
.room-choice.is-active,.whip-choice.is-active{background:var(--red);border-color:var(--red);color:#fff}
.whip-controls{margin-top:12px}
.room-stage{position:relative;justify-self:end;aspect-ratio:9/14.1;height:min(860px,calc(100svh - 130px));width:auto;max-width:100%;overflow:hidden;background:#160b10;border:1px solid rgba(255,255,255,.14);box-shadow:0 45px 100px rgba(0,0,0,.6);cursor:pointer;outline:none;isolation:isolate}
.room-stage::after{content:"";position:absolute;inset:0;z-index:6;background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 40%,rgba(0,0,0,.6));pointer-events:none}
.room-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .28s ease,transform .8s ease}
.room-stage:hover .room-bg{transform:scale(1.025)}
.room-character,.room-avatar-frame,.room-whip{position:absolute;left:50%;top:50%;width:94%;aspect-ratio:1;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none}
.room-character{z-index:2;filter:drop-shadow(0 20px 35px rgba(0,0,0,.6))}
.room-avatar{position:absolute;z-index:3;left:50%;top:30.3%;width:18.4%;aspect-ratio:1;border-radius:50%;object-fit:cover;transform:translate(-50%,-50%);background:#fff}
.room-avatar-frame{z-index:4;filter:drop-shadow(0 6px 12px rgba(0,0,0,.55))}
.room-whip{z-index:5;opacity:0}
.room-whip.is-swinging{opacity:1}
.room-stage.is-shaking{animation:roomShake .24s linear}
@keyframes roomShake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-2px)}}
.room-prompt{position:absolute;z-index:9;left:7%;top:23%;padding:12px 15px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--red);font-size:18px;font-weight:840;line-height:.88;letter-spacing:-.04em;text-transform:uppercase;transform:rotate(-3deg);animation:promptBlink 1.1s steps(2,end) infinite;pointer-events:none}
.room-prompt::after{content:"";position:absolute;right:13px;bottom:-14px;border-width:13px 0 0 15px;border-style:solid;border-color:var(--ink) transparent transparent transparent}.room-stage.is-hitting .room-prompt{opacity:0;animation:none}
@keyframes promptBlink{50%{filter:brightness(1.15);transform:rotate(-3deg) scale(1.04)}}
.room-hit{position:absolute;z-index:8;right:15%;top:41%;color:#fff;font-size:42px;font-weight:840;letter-spacing:-.08em;opacity:0;transform:rotate(-8deg) scale(.4);text-shadow:4px 4px 0 var(--red-dark)}
.room-hit.is-hit{animation:hitPop .55s ease-out}
@keyframes hitPop{30%{opacity:1;transform:rotate(-8deg) scale(1.15)}100%{opacity:0;transform:rotate(-8deg) scale(1.5)}}
.room-cry{position:absolute;z-index:9;left:18px;top:28%;max-width:46%;padding:13px 15px;background:#f7f0df;color:#151011;border:3px solid #151011;box-shadow:5px 5px 0 var(--red);opacity:0;transform:translateY(8px) rotate(-2deg) scale(.9);pointer-events:none;text-transform:uppercase}
.room-cry::after{content:"";position:absolute;left:26px;bottom:-15px;border-width:14px 12px 0 0;border-style:solid;border-color:#151011 transparent transparent transparent}
.room-cry span{display:block;font-size:11px;font-weight:840;letter-spacing:.08em}
.room-cry b{display:block;margin-top:2px;color:var(--red);font-size:25px;line-height:.86;letter-spacing:-.05em}
.room-cry.is-crying{animation:cryPop .72s cubic-bezier(.2,.9,.3,1)}
@keyframes cryPop{0%{opacity:0;transform:translateY(8px) rotate(-2deg) scale(.8)}16%,76%{opacity:1;transform:translateY(0) rotate(-2deg) scale(1)}100%{opacity:0;transform:translateY(-4px) rotate(-2deg) scale(1.04)}}
.room-counter{position:absolute;z-index:8;top:18px;right:18px;display:flex;align-items:baseline;gap:10px;padding:10px 12px 10px 22px;background:rgba(10,8,9,.76);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px)}.room-counter::before{content:"";position:absolute;left:9px;top:50%;width:6px;height:6px;border-radius:50%;background:#6d6668;transform:translateY(-50%)}.room-counter[data-live="true"]::before{background:#62e39a;box-shadow:0 0 10px #62e39a}.room-counter span{font-size:8px;font-weight:840;letter-spacing:.11em}.room-counter b{color:var(--red);font-size:22px;line-height:1}.room-counter b.is-counting{animation:countPop .35s ease-out}@keyframes countPop{50%{transform:scale(1.35);color:#fff}}
.room-hud{position:absolute;z-index:8;left:22px;right:22px;bottom:22px;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:rgba(10,8,9,.78);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);font-size:10px;letter-spacing:.09em}
.room-hud b{color:var(--red)}

.mtonga-section{position:relative;background:var(--paper);color:var(--ink);overflow:hidden}
.mtonga-section::before{content:"MTONGA";position:absolute;right:-3vw;bottom:-8vw;color:rgba(109,16,35,.055);font-size:24vw;font-weight:840;letter-spacing:-.1em;line-height:1}
.mtonga-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.84fr);gap:clamp(46px,6vw,84px);align-items:start}
.mtonga-title,.mtonga-file{min-width:0}
.mtonga-title h2{overflow-wrap:anywhere}
.mtonga-title .eyebrow{color:#6c6260}
.mtonga-title>p{color:#534b48}
.mtonga-file{position:relative;padding:48px;background:#f9f3e3;border:1px solid #bfb293;box-shadow:20px 20px 0 #cdbf9e}
.file-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:4px solid var(--ink);font-size:11px;font-weight:840;letter-spacing:.13em}
.mtonga-stat{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid #b8ac91}
.mtonga-stat b{font-size:38px;letter-spacing:-.06em}
.mtonga-stat span{max-width:52%;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-align:right}
.accent-stat{color:var(--red-dark)}
.approved-stamp{position:absolute;right:35px;bottom:74px;padding:10px 14px;border:4px solid var(--red-dark);color:var(--red-dark);font-size:14px;font-weight:840;line-height:1.05;letter-spacing:.08em;transform:rotate(-7deg)}
.mtonga-file>small{display:block;max-width:490px;margin-top:52px;color:#736967;font-size:10px}

.gram-section{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);gap:clamp(48px,7vw,95px);align-items:center}
.gram-copy{min-width:0}.gram-copy h2{font-size:clamp(30px,3.1vw,44px)}.gram-copy>p{margin-top:18px;font-size:16px}
.gram-token{position:relative;display:grid;place-items:center;min-height:480px;background:#151214;border:1px solid var(--line);overflow:hidden}
.gram-token::before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;border:1px dashed rgba(255,255,255,.19);animation:spin 20s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gram-token img{position:relative;z-index:1;width:min(240px,55%);filter:drop-shadow(0 30px 50px rgba(0,0,0,.7));animation:coinFloat 3.4s ease-in-out infinite}
@keyframes coinFloat{50%{transform:translateY(-14px) rotate(4deg)}}
.gram-token span{position:absolute;z-index:2;left:22px;bottom:22px;padding:10px 12px;background:var(--paper);color:var(--ink);font-size:10px;font-weight:840;line-height:1.1;letter-spacing:.1em;transform:rotate(-3deg)}
.term-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:24px;background:var(--line)}
.term-grid div{padding:16px;background:var(--black)}
.term-grid b{display:block;color:var(--red);font-size:16px}
.term-grid span{display:block;margin-top:4px;color:#999194;font-size:12px}

.meme-section{padding-bottom:120px;background:#111011;overflow:hidden}
.meme-viewport{overflow:hidden;padding-block:8px 36px}
.meme-rail{display:flex;width:max-content;animation:memeDrift 56s linear infinite;will-change:transform}
.meme-group{display:flex;gap:16px;padding-right:16px}
@keyframes memeDrift{to{transform:translateX(-50%)}}
.meme-rail figure{position:relative;flex:0 0 300px;width:300px;aspect-ratio:9/16;margin:0;overflow:hidden;background:#1b1819;border:1px solid rgba(255,255,255,.1)}
.meme-rail figure:nth-child(even){transform:translateY(24px)}
.meme-rail img{width:100%;height:100%;object-fit:cover}
.meme-rail figcaption{position:absolute;left:14px;bottom:14px;padding:8px 10px;background:#0d0b0c;color:#fff;font-size:10px;font-weight:840;letter-spacing:.1em}
.arsenal{margin-top:74px;padding:24px;border:1px solid var(--line);background:#0b090a}
.arsenal-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:10px;font-weight:840;letter-spacing:.11em}.arsenal-head span{color:var(--red)}
.arsenal-rail{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:6px 2px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.arsenal-rail figure{flex:0 0 158px;margin:0;padding:14px 12px 12px;background:#151214;border:1px solid var(--line);scroll-snap-align:start}.arsenal-rail img{width:100%;aspect-ratio:1;object-fit:contain;transition:transform .25s ease}.arsenal-rail figure:hover img{transform:rotate(-6deg) scale(1.07)}.arsenal-rail figcaption{margin-top:8px;color:#aaa2a4;font-size:9px;font-weight:840;letter-spacing:.08em;text-align:center}

.faq-section{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px}
.faq-aside{position:sticky;top:125px;align-self:start}
.faq-aside>p{max-width:450px}
.faq-aside .button{margin-top:30px}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:grid;grid-template-columns:40px 1fr 32px;gap:18px;align-items:center;min-height:72px;cursor:pointer;list-style:none;font-size:19px;font-weight:700}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary>span{color:#6e6769;font-size:11px;letter-spacing:.08em}
.faq-list summary i{font-style:normal;color:var(--red);font-size:28px;transition:transform .2s ease}
.faq-list details[open] summary i{transform:rotate(45deg)}
.faq-list p{max-width:720px;margin:0;padding:0 50px 32px 58px;color:#aaa2a4;font-size:16px}

.final-cta{position:relative;display:grid;min-height:940px;place-items:center;overflow:hidden;padding:0}
.final-door{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.final-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,6,7,.95) 0%,rgba(7,6,7,.84) 42%,rgba(7,6,7,.1) 78%),linear-gradient(0deg,#09090a 0%,transparent 24%)}
.final-copy{position:relative;z-index:2}
.final-copy h2{max-width:850px;font-size:clamp(42px,5vw,86px)}
.final-copy p{max-width:620px;margin:32px 0;color:#c2b9bb;font-size:19px}

.footer{padding-block:56px 40px;color:#8a8285;font-size:14px;border-top:1px solid var(--line)}
.footer-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.footer-brand-col .brand{color:var(--white);margin-bottom:16px}
.footer-brand-col p{max-width:340px;margin:0;color:#8a8285;line-height:1.55}
.footer-brand-col .footer-age{margin-top:10px;color:#6f686b}
.footer-col{display:flex;flex-direction:column;gap:12px}
.footer-col b{margin-bottom:4px;color:#c3bdbf;font-size:11px;font-weight:840;letter-spacing:.14em;text-transform:uppercase}
.footer-col a{color:#b5adaf;font-weight:600}.footer-col a:hover{color:var(--white)}
.footer-meta{display:flex;align-items:center;gap:22px;margin-top:42px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.footer-meta>a{color:#9a9295}.footer-meta>a:hover{color:var(--white)}
.footer-lang{margin-left:auto;color:#5c5558}
.footer-lang a{color:#9a9295}.footer-lang a:hover{color:var(--white)}
.footer-lang a[aria-current]{color:var(--white)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;color:#6f686b;font-size:13px}
.footer-copy{white-space:nowrap}
.footer-fine{margin:20px auto 0;color:#57504f;font-size:12px;line-height:1.6}

@media (max-width:1050px){
  :root{--shell:min(100% - 36px,900px)}
  .topbar{padding-inline:18px}.navlinks{display:none}.lang-switch{margin-left:auto}
  .hero{grid-template-columns:1fr;gap:26px;padding-top:64px}.hero-copy{max-width:820px}.hero-visual{min-height:660px}
  .quiz-section,.product-grid,.mtonga-grid,.gram-section,.faq-section{grid-template-columns:1fr;gap:52px}
  .quiz-section .section-intro,.faq-aside{position:static}.quiz{min-height:600px}
  .product-grid{max-width:900px}.room-stage{justify-self:center;height:min(760px,calc(100svh - 120px))}
  .mtonga-file{max-width:760px}.gram-token{min-height:520px}.faq-aside>p{max-width:620px}
  .final-overlay{background:linear-gradient(90deg,rgba(7,6,7,.93) 0%,rgba(7,6,7,.72) 65%,rgba(7,6,7,.22)),linear-gradient(0deg,#09090a 0%,transparent 25%)}
}

@media (max-width:740px){
  :root{--shell:calc(100% - 28px)}
  .topbar{min-height:66px;gap:12px}.brand{font-size:19px}.brand img{width:36px;height:36px}.topbar>.button{min-height:40px;margin-left:10px;padding-inline:14px;font-size:11px}.topbar>.button span{display:none}.lang-switch a{min-width:32px;height:26px;padding:0 7px;font-size:11px}.sound-toggle{width:50px;height:50px;right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}
  .hero{min-height:auto;padding-block:54px 60px}.hero::after{background-size:56px 56px}.hero h1{font-size:clamp(56px,17vw,82px)}.hero-lede{margin-top:24px;font-size:17px}.hero-actions{align-items:stretch;flex-direction:column;gap:18px}.hero-actions .text-link{align-self:flex-start}
  .proof-row{margin-top:28px}.proof-row span{font-size:9px}
  .hero-visual{min-height:560px;overflow:hidden}.dossier-card,.file-shadow{width:min(390px,88%);height:480px}.dossier-card{padding:26px}.dossier-head b{font-size:30px}.scan-window{grid-template-columns:76px 1fr;gap:16px;min-height:172px;padding:20px 17px}.avatar-unknown{width:76px;height:76px;font-size:50px}.scan-copy{font-size:9px}.dossier-stamp{font-size:12px;bottom:25px}.paper-slip{font-size:9px}.slip-one{right:6px}.slip-two{left:6px}
  .section{padding-block:88px}.section-intro{margin-bottom:36px}.section-intro h2,.room-copy h2,.mtonga-title h2,.gram-copy h2,.faq-aside h2{font-size:clamp(46px,14vw,67px)}.section-intro p,.room-copy>p,.mtonga-title>p,.gram-copy>p,.faq-aside>p{font-size:16px}
  .quiz-section{gap:34px}.quiz{min-height:610px}.quiz-topline{padding:20px 22px 13px}.quiz-body,.quiz-result{padding:36px 24px 40px}.quiz-icon{width:58px;height:58px;font-size:29px}.quiz h3{font-size:clamp(22px,6.5vw,30px)}.answers{margin-top:28px}.answers button{padding:15px 44px 15px 15px;font-size:13px}.quiz-result{min-height:603px}.result-score b{font-size:48px}
  .game-section{padding-top:20px}.mechanics{grid-template-columns:1fr}.mechanic{min-height:390px;padding:28px}.mechanic img{width:112px;height:112px;margin:40px 0 22px}.mechanic h3{font-size:28px}
  .product-stage{padding-block:90px}.product-grid{gap:36px}.room-controls{gap:6px}.room-choice,.whip-choice{padding:10px;font-size:9px}.whip-controls{margin-top:8px}.room-stage{height:min(68svh,600px)}.room-hud{left:12px;right:12px;bottom:12px}.room-hud b{font-size:8px}.room-hit{right:13%;font-size:36px}.room-prompt{left:4%;top:22%;font-size:15px}
  .mtonga-file{width:calc(100% - 10px);padding:28px 22px;box-shadow:10px 10px 0 #cdbf9e}.file-top{align-items:flex-start;flex-wrap:wrap;gap:8px}.mtonga-stat{align-items:flex-start;flex-direction:column;gap:5px;padding:21px 0}.mtonga-stat b{font-size:32px}.approved-stamp{right:20px;bottom:105px;font-size:11px}.mtonga-file>small{margin-top:95px}
  .gram-section{gap:38px}.gram-token{min-height:390px}.gram-token::before{width:310px;height:310px}.gram-copy h2{font-size:clamp(31px,9.4vw,46px)}.term-grid{grid-template-columns:1fr}
  .meme-section{padding-bottom:88px}.meme-group{gap:10px;padding-right:10px}.meme-rail figure{flex-basis:230px;width:230px;aspect-ratio:9/16;height:auto}.arsenal{margin-top:48px;padding:14px}.arsenal-head{align-items:flex-start;flex-direction:column}.arsenal-grid{grid-template-columns:repeat(2,1fr)}
  .faq-section{gap:38px}.faq-list summary{grid-template-columns:24px 1fr 22px;gap:10px;min-height:82px;font-size:16px;overflow:hidden}.faq-list summary i{display:grid;width:20px;height:20px;place-items:center;font-size:20px}.faq-list p{padding:0 24px 26px 35px;font-size:14px}
  .final-cta{min-height:760px}.final-door{object-position:56% center}.final-overlay{background:linear-gradient(180deg,rgba(7,6,7,.62),rgba(7,6,7,.83) 55%,#09090a 100%)}.final-copy{align-self:end;padding-bottom:76px}.final-copy h2{font-size:clamp(30px,8vw,50px)}.final-copy p{font-size:16px}.final-copy .button{width:100%;padding-inline:18px;font-size:12px}
  .footer-top{grid-template-columns:1fr 1fr;gap:30px 20px}.footer-brand-col{grid-column:1 / -1}.footer-meta{flex-wrap:wrap;gap:12px 18px;margin-top:32px}.footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .marquee-track,.meme-rail{transform:none}
}

/* ===== Legal pages (terms / privacy) ===== */
.legal{position:relative;padding-block:64px 100px}
.legal::before{content:"";position:absolute;z-index:-1;top:-40px;left:50%;width:min(760px,92vw);height:340px;transform:translateX(-50%);background:radial-gradient(ellipse at top,rgba(102,3,22,.34),transparent 72%);pointer-events:none}
.legal-article{width:min(760px,calc(100% - 40px));margin-inline:auto}
.legal-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:32px;color:#b7afb1;font-size:14px;font-weight:700;transition:color .2s ease}
.legal-back:hover{color:var(--white)}
.legal-head{padding-bottom:30px;margin-bottom:38px;border-bottom:1px solid var(--line)}
.legal-head .eyebrow{margin-bottom:16px}
.legal-head h1{margin:0;font-size:clamp(30px,4.6vw,50px);font-weight:840;letter-spacing:-.045em;line-height:1.03}
.legal-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:22px;color:var(--muted);font-size:13px;font-weight:700}
.legal-meta a{color:var(--red);border-bottom:1px solid transparent;transition:border-color .2s ease}
.legal-meta a:hover{border-color:var(--red)}
.legal-note{margin:0 0 36px;padding:14px 18px;background:var(--black-3);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:4px;color:#c3bdbf;font-size:13.5px;line-height:1.55}

.legal-body{color:#c9c3c5;font-size:16px;line-height:1.72}
.legal-body h2{margin:52px 0 18px;font-size:clamp(21px,2.6vw,27px);font-weight:840;letter-spacing:-.02em;line-height:1.2;color:var(--white)}
.legal-body h2:first-child{margin-top:0}
.legal-num{color:var(--red);margin-right:9px}
.legal-body h3{margin:34px 0 14px;font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--white)}
.legal-body p{margin:0 0 18px}
.legal-body ul{margin:0 0 22px;padding-left:0;list-style:none}
.legal-body li{position:relative;padding-left:26px;margin-bottom:11px}
.legal-body li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.legal-body b{color:var(--white);font-weight:800}
.legal-body a{color:var(--red);border-bottom:1px solid rgba(255,48,79,.42);transition:border-color .2s ease}
.legal-body a:hover{border-color:var(--red)}
.legal-body code{padding:2px 7px;background:var(--black-3);border:1px solid var(--line);border-radius:6px;color:var(--paper);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;overflow-wrap:anywhere}

.legal-next{margin:56px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.legal-next a{display:inline-flex;align-items:center;gap:10px;color:var(--white);font-size:17px;font-weight:800;letter-spacing:-.01em;transition:color .2s ease}
.legal-next a:hover{color:var(--red)}

.legal-footer{padding-block:44px 40px}
.legal-foot-row{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px}
.legal-foot-row .brand{color:var(--white);font-size:21px}
.legal-foot-links{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-left:auto;font-size:13px;font-weight:700}
.legal-foot-links a{color:#b5adaf}
.legal-foot-links a:hover{color:var(--white)}
.legal-foot-lang{color:#5c5558}
.legal-foot-lang a{color:#9a9295}
.legal-foot-lang a:hover,.legal-foot-lang a[aria-current]{color:var(--white)}
.legal-foot-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);color:#6f686b;font-size:13px}

@media (max-width:740px){
  .legal{padding-block:34px 66px}
  .legal-article{width:calc(100% - 32px)}
  .legal-back{margin-bottom:24px}
  .legal-head{margin-bottom:30px;padding-bottom:24px}
  .legal-note{margin-bottom:30px}
  .legal-body{font-size:15.5px}
  .legal-body h2{margin:40px 0 16px}
  .legal-body li::before{top:10px}
  .legal-next a{font-size:16px}
  .legal-foot-links{margin-left:0;width:100%}
  .legal-foot-bottom{flex-direction:column;align-items:flex-start}
}
