:root {
  --ink: #07070a;
  --surface: #111116;
  --raised: #19191f;
  --outline: #2d2d35;
  --violet: #9b6cff;
  --cyan: #39d7ff;
  --lime: #c7ff4a;
  --rose: #ff6b9c;
  --text: #f8f7fb;
  --muted: #aaa8b2;
  --max: 1260px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; overflow-x: hidden; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img, video { display: block; max-width: 100%; }
::selection { color: var(--ink); background: var(--lime); }

.skip-link { position: fixed; left: 18px; top: -80px; z-index: 999; padding: 12px 18px; background: var(--text); color: var(--ink); border-radius: 999px; font-weight: 800; transition: top .2s; }
.skip-link:focus { top: 18px; }
.ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.ambient i { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .16; }
.ambient i:nth-child(1) { width: 52vw; height: 52vw; right: -24vw; top: 2vh; background: var(--violet); }
.ambient i:nth-child(2) { width: 38vw; height: 38vw; left: -24vw; top: 45vh; background: var(--rose); }
.ambient i:nth-child(3) { width: 25vw; height: 25vw; right: 10vw; top: 110vh; background: var(--cyan); opacity: .09; }
.page-shell { position: relative; z-index: 1; }

.site-header { position: sticky; top: 0; z-index: 100; width: min(calc(100% - 36px), var(--max)); height: 82px; margin: 16px auto 0; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.09); background: rgba(7,7,10,.78); backdrop-filter: blur(22px); border-radius: 22px; }
.brand { display: inline-flex; gap: 12px; align-items: center; font-weight: 950; letter-spacing: -.04em; }
.brand img { width: 42px; height: 42px; border-radius: 13px; box-shadow: 0 0 26px rgba(155,108,255,.28); }
.brand span { font-size: 19px; }
.desktop-nav { display: flex; gap: 28px; color: var(--muted); font-size: 14px; font-weight: 700; }
.desktop-nav a, .site-footer a { transition: color .2s; }
.desktop-nav a:hover, .desktop-nav a:focus-visible, .site-footer a:hover, .site-footer a:focus-visible { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.language-switch { display: flex; padding: 4px; background: var(--raised); border: 1px solid var(--outline); border-radius: 999px; }
.language-switch button { border: 0; background: transparent; color: var(--muted); min-width: 38px; padding: 7px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; cursor: pointer; }
.language-switch button[aria-pressed="true"] { background: var(--text); color: var(--ink); }
.menu-button { display: none; border: 0; background: transparent; width: 38px; height: 38px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.menu-button span { width: 20px; height: 2px; background: var(--text); transition: transform .2s; }
.mobile-nav { position: absolute; top: 76px; left: 0; right: 0; padding: 18px; border: 1px solid var(--outline); border-radius: 18px; background: var(--surface); }
.mobile-nav a { display: block; padding: 12px; font-weight: 800; }

.section-grid, .section, .site-footer, .legal-page, .support-page, .auth-page, .not-found { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.hero { min-height: 790px; display: grid; grid-template-columns: .91fr 1.09fr; align-items: center; gap: 30px; padding: 72px 0 84px; }
.eyebrow, .kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.pulse-dot { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 6px rgba(199,255,74,.1), 0 0 16px var(--lime); }
.hero h1, .section-heading h2, .manifesto h2, .final-cta h2, .legal-hero h1, .support-hero h1, .auth-card h1, .not-found h1 { margin: 24px 0; font-weight: 950; line-height: .86; letter-spacing: -.075em; text-transform: uppercase; }
.hero h1 { font-size: clamp(66px, 7.7vw, 116px); }
.gradient-text { background: linear-gradient(95deg, var(--rose), var(--violet) 48%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { max-width: 600px; margin: 0; color: #ccc9d3; font-size: clamp(18px, 2vw, 22px); letter-spacing: -.02em; }
.store-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.store-button { min-width: 176px; height: 62px; padding: 0 20px; display: flex; gap: 13px; align-items: center; text-align: left; border: 1px solid var(--outline); border-radius: 16px; background: rgba(25,25,31,.75); opacity: 1; }
.store-button small, .store-button strong { display: block; }
.store-button small { color: var(--muted); font-size: 10px; line-height: 1.3; }
.store-button strong { color: var(--text); font-size: 16px; line-height: 1.2; }
.store-icon { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text); font-size: 19px; }
.store-icon.play { font-size: 15px; }
.trust-line { display: flex; flex-wrap: wrap; gap: 0; margin-top: 25px; color: #777580; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.trust-line span { display: flex; align-items: center; }
.trust-line span:not(:last-child)::after { content: ""; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: var(--outline); }

.hero-stage { position: relative; min-height: 660px; display: grid; place-items: center; }
.orbit-line { position: absolute; border: 1px solid rgba(155,108,255,.2); border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: 620px; height: 430px; }
.orbit-two { width: 480px; height: 660px; border-color: rgba(57,215,255,.12); }
.battle-phone { position: relative; z-index: 2; width: min(100%, 570px); padding: 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 42px; background: #0a0a0d; box-shadow: 0 60px 120px rgba(0,0,0,.55), inset 0 0 0 5px #18181d; transform: rotate(2.2deg); }
.phone-bar, .phone-foot { height: 46px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; color: #76737f; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.live-pill { display: flex; align-items: center; gap: 8px; color: var(--text); }
.live-pill i { width: 6px; height: 6px; background: var(--rose); border-radius: 50%; box-shadow: 0 0 12px var(--rose); }
.battle-title { position: absolute; top: 77px; left: 0; right: 0; z-index: 5; text-align: center; text-shadow: 0 2px 20px #000; }
.battle-title span { display: block; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.battle-title strong { display: block; font-size: 34px; line-height: 1; letter-spacing: -.05em; }
.battle-split { position: relative; height: 518px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; overflow: hidden; border-radius: 26px; background: var(--raised); }
.battle-side { position: relative; min-width: 0; overflow: hidden; }
.battle-side video { width: 100%; height: 100%; object-fit: cover; }
.video-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), transparent 45%, rgba(0,0,0,.82)); }
.creator { position: absolute; z-index: 2; left: 16px; bottom: 74px; }
.creator span, .creator strong { display: block; }
.creator span { font-size: 11px; font-weight: 800; }
.creator strong { font-size: 22px; letter-spacing: -.04em; }
.vote-chip { position: absolute; z-index: 2; left: 15px; right: 15px; bottom: 17px; padding: 13px 8px; border: 1px solid rgba(255,255,255,.48); border-radius: 999px; background: rgba(7,7,10,.38); backdrop-filter: blur(12px); font-size: 10px; font-weight: 950; letter-spacing: .13em; }
.battle-side:first-child .vote-chip { border-color: rgba(255,107,156,.85); box-shadow: inset 0 0 24px rgba(255,107,156,.12); }
.battle-side:last-child .vote-chip { border-color: rgba(57,215,255,.85); box-shadow: inset 0 0 24px rgba(57,215,255,.12); }
.versus { position: absolute; z-index: 4; top: 47%; left: 50%; width: 48px; height: 48px; display: grid; place-items: center; transform: translate(-50%,-50%) rotate(-2.2deg); border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: var(--ink); font-size: 12px; font-weight: 950; box-shadow: 0 0 35px rgba(155,108,255,.65); }
.phone-foot { height: 53px; padding: 0 12px; letter-spacing: 0; }
.countdown { color: var(--lime); font-variant-numeric: tabular-nums; }
.floating-result { position: absolute; z-index: 4; right: -12px; bottom: 22px; width: 188px; padding: 18px; border: 1px solid rgba(199,255,74,.5); border-radius: 18px; background: rgba(17,17,22,.92); backdrop-filter: blur(18px); box-shadow: 0 28px 60px rgba(0,0,0,.45); transform: rotate(-4deg); }
.floating-result span { display: block; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.floating-result strong { display: block; margin-top: 5px; color: var(--lime); font-size: 31px; line-height: 1; letter-spacing: -.05em; }
.floating-result i { color: var(--text); font-size: 11px; font-style: normal; letter-spacing: .12em; }

.ticker { overflow: hidden; border-block: 1px solid var(--outline); background: var(--text); color: var(--ink); transform: rotate(-1.4deg) scale(1.02); }
.ticker div { width: max-content; padding: 13px 0; display: flex; align-items: center; gap: 28px; animation: ticker 24s linear infinite; font-size: 13px; font-weight: 950; letter-spacing: .14em; }
.ticker i { color: var(--violet); }
@keyframes ticker { to { transform: translateX(-50%); } }

.section { padding: 140px 0; }
.section-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 50px; align-items: end; margin-bottom: 58px; }
.section-heading h2, .manifesto h2, .final-cta h2 { font-size: clamp(52px, 6.3vw, 88px); }
.section-heading p { max-width: 470px; margin: 0 0 8px auto; color: var(--muted); font-size: 18px; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--outline); border-radius: 28px; overflow: hidden; }
.step-card { position: relative; min-height: 360px; padding: 26px; border-right: 1px solid var(--outline); background: rgba(17,17,22,.82); }
.step-card:last-child { border: 0; }
.step-number { color: #5f5c68; font-size: 10px; font-weight: 900; }
.step-icon { width: 70px; height: 70px; margin: 54px 0 42px; display: grid; place-items: center; border: 1px solid var(--outline); border-radius: 22px; background: var(--raised); color: var(--violet); font-weight: 950; font-size: 18px; box-shadow: inset 0 0 35px rgba(155,108,255,.12); }
.spark { color: var(--rose); font-size: 28px; }
.upload-icon { color: var(--cyan); font-size: 29px; }
.chart-icon { color: var(--lime); font-size: 27px; }
.step-card h3 { margin: 0 0 12px; font-size: 21px; letter-spacing: -.04em; }
.step-card p { margin: 0; color: var(--muted); font-size: 14px; }

.showcase { padding-top: 70px; }
.bento-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 16px; }
.bento { border: 1px solid var(--outline); border-radius: 28px; background: rgba(17,17,22,.84); overflow: hidden; }
.rating-panel { min-height: 340px; padding: 32px; }
.panel-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.verified { display: flex; gap: 6px; color: var(--lime); }
.verified i { font-style: normal; }
.rating-main { margin-top: 72px; display: flex; justify-content: space-between; align-items: end; }
.rating-main small { display: block; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.rating-main strong { display: block; margin-top: 4px; font-size: 72px; line-height: 1; letter-spacing: -.08em; }
.gain { padding: 10px 16px; border-radius: 999px; background: rgba(199,255,74,.1); color: var(--lime); font-weight: 900; }
.rating-track { height: 7px; margin-top: 38px; overflow: hidden; border-radius: 999px; background: var(--raised); }
.rating-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--violet),var(--rose),var(--lime)); box-shadow: 0 0 20px var(--violet); }
.rating-labels { margin-top: 12px; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 800; }
.rating-labels small { color: #5f5c68; }
.profile-panel { grid-row: span 2; padding: 28px; background: radial-gradient(circle at 80% 10%, rgba(155,108,255,.18), transparent 35%), rgba(17,17,22,.84); }
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-head img { width: 54px; height: 54px; border-radius: 17px; }
.profile-head div { flex: 1; }
.profile-head span, .profile-head strong, .profile-head small { display: block; }
.profile-head span { color: var(--muted); font-size: 11px; }
.profile-head strong { font-size: 19px; }
.profile-head small { color: #6d6b74; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.profile-head button { padding: 9px 14px; border: 1px solid var(--outline); border-radius: 999px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 900; }
.profile-score { margin: 80px 0 48px; }
.profile-score strong { display: block; font-size: clamp(80px, 11vw, 148px); line-height: .75; letter-spacing: -.1em; }
.profile-score span { display: inline-block; margin-top: 17px; color: var(--lime); font-size: 11px; font-weight: 950; letter-spacing: .25em; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--outline); }
.profile-stats div { padding: 21px 0; border-right: 1px solid var(--outline); }
.profile-stats div:last-child { border: 0; }
.profile-stats strong, .profile-stats span { display: block; text-align: center; }
.profile-stats strong { font-size: 25px; }
.profile-stats span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.traits { margin-top: 27px; display: flex; flex-wrap: wrap; gap: 8px; }
.traits span { padding: 9px 11px; border: 1px solid var(--outline); border-radius: 999px; color: var(--muted); font-size: 10px; }
.traits b { color: var(--text); font-size: 8px; letter-spacing: .1em; }
.rank-panel { padding: 30px; }
.rank-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.rank-head h3 { margin: 7px 0 0; font-size: 34px; letter-spacing: -.055em; }
.rank-tabs { display: flex; gap: 4px; }
.rank-tabs button { border: 0; border-radius: 999px; background: var(--raised); color: var(--muted); padding: 8px 11px; font-size: 8px; font-weight: 900; }
.rank-tabs .active { background: var(--text); color: var(--ink); }
.rank-list { margin: 25px 0 0; padding: 0; list-style: none; }
.rank-list li { min-height: 60px; display: grid; grid-template-columns: 28px 38px 1fr auto; gap: 12px; align-items: center; border-top: 1px solid var(--outline); }
.rank-list li > i { color: #74717d; font-size: 9px; font-style: normal; font-weight: 900; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; font-size: 11px; font-weight: 950; }
.avatar-a { background: linear-gradient(135deg,var(--rose),var(--violet)); }.avatar-b { background: linear-gradient(135deg,var(--violet),var(--cyan)); }.avatar-c { background: linear-gradient(135deg,#45414f,var(--rose)); }.avatar-you { background: var(--lime); color: var(--ink); }
.rank-list li div strong, .rank-list li div small { display: block; }
.rank-list li div strong { font-size: 11px; }.rank-list li div small { color: var(--muted); font-size: 8px; }.rank-list li > b { font-size: 13px; }
.rank-list .you { margin-top: 7px; padding: 0 10px; border: 1px solid rgba(199,255,74,.28); border-radius: 13px; background: rgba(199,255,74,.04); }

.manifesto { position: relative; border-block: 1px solid var(--outline); }
.manifesto h2 em { color: var(--rose); font-style: normal; }
.manifesto-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.manifesto-row p { margin: 0; color: var(--muted); font-size: 18px; }
.principles { display: grid; }
.principles span { padding: 16px 0; border-top: 1px solid var(--outline); color: var(--text); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.principles span::before { content: "✓"; margin-right: 12px; color: var(--lime); }
.final-cta { position: relative; min-height: 650px; display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; text-align: center; }
.final-cta h2 { position: relative; margin-bottom: 17px; }
.final-cta p { position: relative; margin: 0; color: var(--muted); font-size: 18px; }
.store-row-center { position: relative; justify-content: center; }
.cta-glow { position: absolute; width: min(850px, 80vw); height: min(500px, 60vw); border-radius: 50%; background: radial-gradient(circle, rgba(155,108,255,.35), rgba(255,107,156,.11) 40%, transparent 68%); filter: blur(28px); }

.site-footer { min-height: 230px; padding: 46px 0; display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: start; gap: 40px; border-top: 1px solid var(--outline); }
.brand-small img { width: 34px; height: 34px; border-radius: 11px; }.brand-small span { font-size: 15px; }
.site-footer p { max-width: 320px; margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.site-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; font-size: 12px; font-weight: 700; }
.copyright { color: #68656f; font-size: 11px; }

.legal-page, .support-page { padding: 100px 0 140px; }
.legal-hero, .support-hero { max-width: 920px; padding: 65px 0 80px; }
.legal-hero h1, .support-hero h1, .auth-card h1, .not-found h1 { font-size: clamp(62px, 8vw, 112px); }
.legal-hero p, .support-hero p { max-width: 720px; color: var(--muted); font-size: 20px; }
.legal-date { color: #74717d; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.draft-notice { padding: 24px 28px; display: grid; grid-template-columns: 230px 1fr; gap: 25px; border: 1px solid rgba(255,226,168,.34); border-radius: 20px; background: rgba(255,226,168,.06); }
.draft-notice strong { color: #ffe2a8; font-size: 10px; letter-spacing: .15em; }
.draft-notice p { margin: 0; color: #c9c1b1; font-size: 13px; }
.legal-layout { margin-top: 80px; display: grid; grid-template-columns: 220px 1fr; gap: 90px; align-items: start; }
.legal-toc { position: sticky; top: 120px; display: grid; gap: 13px; }
.legal-toc > span { margin-bottom: 8px; color: #68656f; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.legal-toc a { color: var(--muted); font-size: 12px; font-weight: 700; }
.legal-toc a:hover { color: var(--text); }
.legal-copy { max-width: 780px; }
.legal-copy section { padding: 0 0 52px; margin: 0 0 52px; border-bottom: 1px solid var(--outline); scroll-margin-top: 130px; }
.legal-copy h2 { margin: 0 0 20px; font-size: 28px; letter-spacing: -.045em; }
.legal-copy h3 { margin: 30px 0 8px; font-size: 16px; }
.legal-copy p, .legal-copy li { color: #b7b4bf; font-size: 15px; }
.legal-copy li { margin-bottom: 10px; }
.legal-copy mark { padding: 3px 6px; background: rgba(255,226,168,.12); color: #ffe2a8; }

.support-grid { margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.support-card { min-height: 320px; padding: 30px; border: 1px solid var(--outline); border-radius: 24px; background: rgba(17,17,22,.82); }
.support-card > span { color: var(--violet); font-size: 10px; font-weight: 950; }
.support-card h2 { margin: 55px 0 15px; font-size: 26px; letter-spacing: -.04em; }
.support-card p { color: var(--muted); font-size: 14px; }
.text-link { display: inline-block; margin-top: 10px; color: var(--cyan); font-size: 12px; font-weight: 850; }
.contact-card { background: linear-gradient(145deg, rgba(155,108,255,.18), rgba(255,107,156,.08)); }
.contact-card strong { display: block; margin-top: 25px; color: #ffe2a8; font-size: 10px; letter-spacing: .1em; }

.auth-page { min-height: 820px; display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 80px; padding: 90px 0 130px; }
.auth-card { max-width: 680px; }
.auth-mark { position: relative; width: max-content; margin-bottom: 34px; }
.auth-mark img { border-radius: 22px; }
.success-ring { position: absolute; right: -10px; bottom: -8px; width: 31px; height: 31px; display: grid; place-items: center; border: 4px solid var(--ink); border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 950; }
.auth-card p { max-width: 610px; color: var(--muted); font-size: 18px; }
.primary-action { width: min(100%, 470px); margin-top: 30px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border-radius: 16px; background: var(--text); color: var(--ink); font-weight: 900; transition: transform .2s, box-shadow .2s; }
.primary-action:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(155,108,255,.22); }
.primary-action b { font-size: 20px; }
.privacy-note { max-width: 580px; margin-top: 22px; padding: 16px; display: flex; gap: 12px; border: 1px solid var(--outline); border-radius: 15px; background: var(--surface); }
.privacy-note > span { color: var(--lime); }
.privacy-note p { margin: 0; font-size: 11px; }
.auth-help { max-width: 580px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--outline); }
.auth-help strong { font-size: 13px; }.auth-help ol { padding-left: 18px; color: var(--muted); font-size: 12px; }.auth-help a { color: var(--cyan); }
.auth-art { position: relative; min-height: 600px; display: grid; place-items: center; }
.auth-art span { position: relative; z-index: 2; font-size: 260px; font-weight: 950; letter-spacing: -.14em; background: linear-gradient(140deg,var(--rose),var(--violet),var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 35px rgba(155,108,255,.35)); }
.auth-art i { position: absolute; border: 1px solid rgba(155,108,255,.27); border-radius: 50%; animation: orbit 11s linear infinite; }
.auth-art i:nth-of-type(1) { width: 280px; height: 450px; }.auth-art i:nth-of-type(2) { width: 480px; height: 300px; animation-direction: reverse; }.auth-art i:nth-of-type(3) { width: 390px; height: 390px; animation-duration: 17s; }
@keyframes orbit { to { transform: rotate(360deg); } }

.not-found { min-height: 760px; padding: 120px 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.error-code { position: absolute; right: 5vw; color: rgba(255,255,255,.025); font-size: 34vw; line-height: 1; font-weight: 950; letter-spacing: -.1em; }
.not-found p { color: var(--muted); font-size: 18px; }
.not-found .primary-action { max-width: 310px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.revealed { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

@media (max-width: 980px) {
  .desktop-nav { display: none; }.menu-button { display: flex; }
  .hero { grid-template-columns: 1fr; padding-top: 80px; }.hero-copy { max-width: 760px; }.hero-stage { margin-top: 20px; }
  .steps-grid { grid-template-columns: 1fr 1fr; }.step-card:nth-child(2) { border-right: 0; }.step-card:nth-child(-n+2) { border-bottom: 1px solid var(--outline); }
  .section-heading { grid-template-columns: 1fr; }.section-heading p { margin-left: 0; }
  .bento-grid { grid-template-columns: 1fr; }.profile-panel { grid-row: auto; }.rank-panel { order: 3; }
  .manifesto-row { grid-template-columns: 1fr; gap: 45px; }
  .site-footer { grid-template-columns: 1fr 1fr; }.copyright { grid-column: 1/-1; }
  .legal-layout { grid-template-columns: 1fr; gap: 50px; }.legal-toc { position: static; grid-template-columns: repeat(3, 1fr); }
  .auth-page { grid-template-columns: 1fr; }.auth-art { display: none; }
}

@media (max-width: 640px) {
  .site-header { width: calc(100% - 24px); height: 68px; margin-top: 8px; padding: 0 14px; border-radius: 17px; }.brand img { width: 36px; height: 36px; }.brand span { font-size: 15px; }.language-switch button { min-width: 34px; padding: 6px 8px; }
  .section-grid, .section, .site-footer, .legal-page, .support-page, .auth-page, .not-found { width: min(calc(100% - 28px), var(--max)); }
  .hero { min-height: auto; padding: 68px 0 92px; }.hero h1 { font-size: clamp(52px, 17vw, 74px); }.hero-lede { font-size: 17px; }
  .store-row { display: grid; grid-template-columns: 1fr 1fr; }.store-button { min-width: 0; height: 58px; padding: 0 13px; }.store-icon { display: none; }.store-button strong { font-size: 14px; }
  .hero-stage { min-height: 560px; width: calc(100% + 12px); margin-left: -6px; }.battle-phone { padding: 12px; border-radius: 32px; transform: none; }.battle-split { height: 440px; border-radius: 22px; }.battle-title { top: 69px; }.battle-title strong { font-size: 27px; }.floating-result { right: -4px; bottom: -35px; }.creator { left: 10px; }.creator span { font-size: 9px; }.creator strong { font-size: 18px; }.vote-chip { left: 8px; right: 8px; }
  .orbit-one { width: 110%; height: 330px; }.orbit-two { width: 82%; height: 570px; }
  .section { padding: 100px 0; }.section-heading h2, .manifesto h2, .final-cta h2 { font-size: clamp(46px, 14vw, 64px); }
  .steps-grid { grid-template-columns: 1fr; }.step-card { min-height: 290px; border-right: 0; border-bottom: 1px solid var(--outline); }.step-card:nth-child(3) { border-bottom: 1px solid var(--outline); }.step-icon { margin: 38px 0 28px; }
  .bento-grid { gap: 12px; }.rating-panel, .profile-panel, .rank-panel { padding: 22px; }.rating-main { margin-top: 55px; }.rating-main strong { font-size: 60px; }.profile-score { margin: 65px 0 38px; }.profile-score strong { font-size: 25vw; }
  .rank-head { display: block; }.rank-tabs { margin-top: 15px; }.rank-list li { grid-template-columns: 24px 34px 1fr auto; gap: 8px; }
  .final-cta { min-height: 570px; }.site-footer { grid-template-columns: 1fr; }.copyright { grid-column: auto; }
  .legal-page, .support-page { padding-top: 60px; }.legal-hero, .support-hero { padding: 55px 0; }.legal-hero h1, .support-hero h1, .auth-card h1, .not-found h1 { font-size: clamp(50px, 15vw, 75px); }.legal-hero p, .support-hero p { font-size: 17px; }
  .draft-notice { grid-template-columns: 1fr; }.legal-layout { margin-top: 55px; }.legal-toc { display: none; }
  .support-grid { grid-template-columns: 1fr; }.support-card { min-height: 270px; }.support-card h2 { margin-top: 38px; }
  .auth-page { min-height: auto; padding: 80px 0 110px; }.auth-card p { font-size: 16px; }.not-found { min-height: 680px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}