@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#0d0d0d; --paper:#f4efe6; --acid:#d6ff4b; --blue:#2946eb; --coral:#ff7159; --line:rgba(13,13,13,.16); --muted:#8a8a84; --mono:'DM Mono',monospace; --sans:'Manrope',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.4; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.section-dark { color:var(--paper); background:var(--ink); }
.section-light { color:var(--ink); background:var(--paper); }
.section-acid { color:var(--ink); background:var(--acid); }
.site-header { position:fixed; inset:0 0 auto; z-index:20; display:flex; align-items:center; justify-content:space-between; height:76px; padding:0 4.2vw; background:rgba(13,13,13,.82); color:var(--paper); backdrop-filter:blur(16px); border-bottom:1px solid rgba(244,239,230,.14); }
.brand,.footer-brand { display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid currentColor; border-radius:50%; font:500 14px/1 var(--sans); position:relative; }
.brand-mark:after { content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--acid); top:3px; right:3px; }
.main-nav { display:flex; align-items:center; gap:28px; font:400 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.main-nav a { opacity:.7; transition:opacity .2s ease, color .2s ease; }
.main-nav a:hover { opacity:1; color:var(--acid); }
.main-nav sup { color:var(--acid); font-size:8px; margin-left:3px; }
.main-nav .nav-cta { opacity:1; color:var(--acid); border:1px solid var(--acid); padding:11px 15px; }
.main-nav .nav-cta:hover { color:var(--ink); background:var(--acid); }
.nav-cta span,.button span { font-size:17px; line-height:0; margin-left:13px; }
.menu-toggle { display:none; }
.hero { min-height:100svh; padding:145px 4.2vw 32px; position:relative; display:flex; flex-direction:column; overflow:hidden; isolation:isolate; }
.hero:before { content:''; position:absolute; inset:0; opacity:.28; background-image:linear-gradient(rgba(244,239,230,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(244,239,230,.06) 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(90deg,transparent 0,black 40%,black 100%); z-index:-2; }
.hero:after { content:''; position:absolute; width:55vw; height:55vw; right:-14vw; top:9vh; border-radius:50%; background:radial-gradient(circle,rgba(41,70,235,.42),transparent 62%); filter:blur(15px); z-index:-2; }
.hero-noise { position:absolute; inset:0; opacity:.08; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode:screen; z-index:-1; }
.hero-copy { position:relative; z-index:2; max-width:780px; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 30px; color:var(--acid); font:500 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.eyebrow.dark { color:var(--ink); }
.pulse-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 0 rgba(214,255,75,.7); animation:pulse 2.2s infinite; }
.hero h1,.final-cta h2 { margin:0; font-size:clamp(70px,12.2vw,185px); line-height:.82; font-weight:800; letter-spacing:-.09em; text-transform:uppercase; }
.hero h1 i,.final-cta h2 em,.manifest h2 em,.games h2 em,.daily h2 em,.community h2 em,.profile h2 em { color:var(--acid); font-style:normal; }
.hero-lead { max-width:350px; margin:39px 0 28px 5px; color:rgba(244,239,230,.65); font-size:14px; line-height:1.65; }
.button { display:inline-flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 18px; font:500 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; border:1px solid currentColor; transition:transform .22s ease,background .22s ease,color .22s ease; }
.button:hover { transform:translateY(-3px); }
.button-acid { color:var(--ink); background:var(--acid); border-color:var(--acid); }
.button-acid:hover { background:#efffb0; }
.button-dark { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.button-dark:hover { background:var(--blue); border-color:var(--blue); }
.hero-art { position:absolute; width:min(54vw,750px); aspect-ratio:1; right:3vw; top:15vh; display:grid; place-items:center; transform:rotate(-10deg); }
.art-orbit { position:absolute; border:1px solid rgba(214,255,75,.6); border-radius:50%; transform:rotate(35deg); }
.orbit-one { width:86%; height:35%; border-color:rgba(244,239,230,.35); }
.orbit-two { width:108%; height:49%; border-color:rgba(41,70,235,.9); transform:rotate(-40deg); }
.art-core { width:38%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; color:var(--acid); background:radial-gradient(circle at 35% 30%,#fff 0 2%,#8fdb52 5%,#2946eb 32%,#111 67%); box-shadow:0 0 90px rgba(41,70,235,.7),inset -30px -25px 55px rgba(0,0,0,.65); transform:rotate(10deg); }
.art-core span { font:800 clamp(42px,9vw,130px)/1 var(--sans); letter-spacing:-.1em; opacity:.85; }
.art-label { position:absolute; color:var(--paper); font:10px var(--mono); letter-spacing:.16em; transform:rotate(10deg); }
.label-top { top:17%; right:15%; }
.label-bottom { bottom:18%; left:12%; color:var(--acid); }
.art-cross { position:absolute; color:var(--acid); font:36px/1 var(--mono); }
.cross-one { top:21%; left:12%; }.cross-two { bottom:12%; right:8%; color:var(--coral); }
.hero-footer { display:flex; justify-content:space-between; align-items:center; margin-top:auto; color:rgba(244,239,230,.45); font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.hero-footer b { color:var(--acid); font-size:18px; margin-left:7px; }
.ticker { overflow:hidden; white-space:nowrap; color:var(--ink); background:var(--acid); border-bottom:1px solid var(--ink); }
.ticker-track { display:inline-flex; align-items:center; gap:24px; min-width:max-content; padding:14px 0; font-size:12px; font-weight:800; letter-spacing:.13em; animation:marquee 24s linear infinite; }
.ticker b { font-size:18px; font-weight:400; }
.manifest,.games,.community,.profile { padding:120px 8.4vw; position:relative; }
.section-index { display:flex; align-items:center; gap:17px; color:currentColor; opacity:.55; font:10px var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.section-index:after { content:''; height:1px; flex:1; background:currentColor; opacity:.3; }
.section-index span { opacity:.65; }
.manifest-grid,.daily-layout,.profile-layout { display:grid; grid-template-columns:1fr 1fr; gap:9vw; margin-top:100px; }
.manifest-title h2,.games h2,.daily h2,.community h2,.profile h2 { margin:0; font-size:clamp(55px,8vw,126px); line-height:.87; letter-spacing:-.09em; font-weight:800; text-transform:uppercase; }
.manifest-title h2 em,.games h2 em,.community h2 em,.profile h2 em { color:var(--blue); }
.big-copy { max-width:500px; margin:0 0 76px; font-size:clamp(22px,2.45vw,37px); line-height:1.12; letter-spacing:-.04em; }
.manifest-notes { border-top:1px solid var(--line); }
.note { display:grid; grid-template-columns:40px 1fr 1fr; gap:18px; padding:17px 0; border-bottom:1px solid var(--line); font-size:12px; }
.note span { font:10px var(--mono); opacity:.45; }.note strong { font-weight:700; }.note small { color:#777; }
.section-heading { margin-top:88px; }.split-heading { display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:end; }.split-heading > p { max-width:360px; margin:0 0 6px; color:#777; font-size:14px; line-height:1.65; }
.game-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:68px; }
.game-card { min-height:270px; padding:18px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; transition:transform .3s ease,box-shadow .3s ease; }
.game-card:hover { transform:translateY(-8px) rotate(-1deg); box-shadow:8px 9px 0 var(--ink); z-index:2; }.game-number { position:absolute; top:17px; left:18px; font:10px var(--mono); }.game-symbol { position:absolute; top:42px; right:14px; font:58px/1 var(--sans); opacity:.65; }.game-card h3 { margin:0 0 9px; font-size:29px; line-height:.88; letter-spacing:-.08em; text-transform:uppercase; }.game-card p { margin:0; font:10px var(--mono); opacity:.7; }.game-arrow { position:absolute; right:16px; bottom:17px; font-size:21px; }.card-lime{background:#d8ff61}.card-blue{background:#6b87ff}.card-coral{background:#ff886e}.card-cream{background:#e8d8c1}.card-purple{background:#a98dff}.card-yellow{background:#f1e45a}.card-sky{background:#9dddf3}.card-pink{background:#f0a8cc}.card-mint{background:#91e2bf}.card-orange{background:#f6a151}.center-cta { display:flex; justify-content:center; margin-top:60px; }
.daily { padding:120px 8.4vw 140px; position:relative; overflow:hidden; }.daily:before { content:'03'; position:absolute; right:-4vw; top:8vh; color:rgba(244,239,230,.03); font:800 56vw/.7 var(--sans); letter-spacing:-.14em; pointer-events:none; }.daily-layout { position:relative; z-index:1; }.daily h2 { margin-bottom:34px; }.daily-copy > p:not(.eyebrow) { max-width:430px; margin:0 0 33px; color:rgba(244,239,230,.62); font-size:15px; line-height:1.65; }.mission-board { align-self:center; max-width:520px; padding:22px; background:#171717; border:1px solid rgba(244,239,230,.2); box-shadow:24px 24px 0 rgba(41,70,235,.35); }.board-top { display:flex; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid rgba(244,239,230,.17); color:var(--acid); font:10px var(--mono); }.board-top b { font-weight:400; }.mission { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:16px; min-height:84px; border-bottom:1px solid rgba(244,239,230,.12); }.mission-check { display:grid; place-items:center; width:27px; height:27px; border:1px solid rgba(244,239,230,.45); color:var(--acid); font:10px var(--mono); }.mission.completed .mission-check { background:var(--acid); color:var(--ink); }.mission strong,.mission b { font-size:13px; }.mission small { display:block; margin-top:3px; color:var(--muted); font:10px var(--mono); }.mission b { color:var(--acid); font:12px var(--mono); }.board-progress { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin-top:21px; font:10px var(--mono); color:var(--muted); }.board-progress div { height:5px; background:#343434; }.board-progress i { display:block; height:100%; background:var(--acid); }.board-progress b { color:var(--paper); font-weight:400; }
.community .leaderboard { margin-top:78px; }.podium-row { display:grid; grid-template-columns:repeat(3,1fr); align-items:end; gap:12px; }.podium-card { min-height:252px; padding:22px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; background:#e8e0d4; }.podium-card.first { min-height:300px; background:var(--blue); color:var(--paper); }.podium-card.third { background:#ff856c; }.podium-card .place { position:absolute; top:19px; left:21px; font:11px var(--mono); }.avatar { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; margin-bottom:23px; color:var(--ink); font-size:28px; font-weight:800; }.avatar-blue{background:#8dd2ed}.avatar-lime{background:var(--acid)}.avatar-coral{background:#ffb18f}.podium-card strong { font-size:22px; letter-spacing:-.06em; }.podium-card small { margin-top:4px; font:11px var(--mono); opacity:.7; }.podium-card b { align-self:flex-start; margin-top:16px; padding:5px 8px; background:var(--ink); color:var(--paper); font:9px var(--mono); text-transform:uppercase; }.podium-card.first b { background:var(--acid); color:var(--ink); }.leaderboard-list { margin-top:12px; border-top:1px solid var(--line); }.leader-row { display:grid; grid-template-columns:50px 1fr 1fr 80px; align-items:center; min-height:62px; border-bottom:1px solid var(--line); }.leader-row span,.leader-row small,.leader-row b { font:10px var(--mono); opacity:.6; }.leader-row strong { font-size:13px; }.leader-row b { justify-self:end; opacity:1; }
.profile { overflow:hidden; }.profile-layout { margin-top:94px; align-items:center; }.profile-copy > p:not(.eyebrow) { max-width:340px; margin:33px 0; color:rgba(13,13,13,.67); font-size:15px; line-height:1.65; }.profile-card { padding:25px; background:var(--ink); color:var(--paper); box-shadow:24px 24px 0 var(--blue); transform:rotate(2deg); }.profile-card-top,.profile-card small,.profile-tag,.profile-stats small,.profile-progress,.profile-achievements small { font:10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }.profile-card-top { display:flex; justify-content:space-between; padding-bottom:22px; color:var(--acid); border-bottom:1px solid rgba(244,239,230,.2); }.profile-person { display:flex; align-items:center; gap:17px; padding:28px 0; }.profile-avatar { display:grid; place-items:center; width:74px; height:74px; border-radius:50%; color:var(--ink); background:var(--acid); font-size:38px; font-weight:800; }.profile-person h3 { margin:5px 0 8px; font-size:25px; letter-spacing:-.07em; }.profile-tag { color:var(--acid); }.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:20px 0; border-top:1px solid rgba(244,239,230,.2); border-bottom:1px solid rgba(244,239,230,.2); }.profile-stats div { display:flex; flex-direction:column; gap:6px; }.profile-stats b { font-size:30px; letter-spacing:-.08em; }.profile-stats small,.profile-progress,.profile-achievements small { color:var(--muted); text-transform:none; letter-spacing:0; }.profile-progress { padding:22px 0; }.profile-progress > div { display:flex; justify-content:space-between; margin-bottom:9px; }.profile-progress b { color:var(--acid); font-weight:400; }.profile-progress > i { display:block; height:5px; background:#333; }.profile-progress em { display:block; width:8%; height:100%; background:var(--acid); }.profile-achievements { display:flex; align-items:center; gap:9px; }.profile-achievements span { display:grid; place-items:center; width:29px; height:29px; color:var(--acid); border:1px solid rgba(214,255,75,.45); }.profile-achievements small { margin-left:auto; }
.final-cta { min-height:76vh; padding:130px 8.4vw; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; }.final-cta h2 { position:relative; z-index:1; margin-bottom:42px; font-size:clamp(70px,14vw,210px); }.final-graphic { position:absolute; top:50%; left:50%; translate:-50% -51%; display:grid; place-items:center; width:min(68vw,760px); aspect-ratio:1; border:1px solid rgba(214,255,75,.3); border-radius:50%; color:var(--acid); font:800 clamp(120px,28vw,420px)/1 var(--sans); opacity:.16; transform:rotate(-14deg); }.site-footer { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:20px; padding:27px 4.2vw 31px; border-top:1px solid rgba(244,239,230,.16); }.site-footer p,.footer-meta { margin:0; color:var(--muted); font:10px var(--mono); }.footer-meta { display:flex; gap:22px; }.footer-meta a { color:var(--acid); }
[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1); transition-delay:var(--delay,0ms); }.is-visible { opacity:1; transform:none; }
@keyframes marquee { to { transform:translateX(-50%); } } @keyframes pulse { 70% { box-shadow:0 0 0 9px rgba(214,255,75,0); } 100% { box-shadow:0 0 0 0 rgba(214,255,75,0); } }
@media (max-width:900px) { .main-nav { gap:17px; }.game-grid { grid-template-columns:repeat(3,1fr); }.manifest,.games,.community,.profile,.daily { padding-left:6vw; padding-right:6vw; }.hero-art { width:60vw; right:-7vw; opacity:.85; }.hero-copy { max-width:65%; } }
@media (max-width:680px) { .site-header { height:65px; padding:0 20px; }.brand-name { font-size:11px; }.menu-toggle { display:flex; align-items:center; gap:10px; border:0; color:var(--paper); background:none; font:10px var(--mono); text-transform:uppercase; }.menu-toggle span,.menu-toggle span:before,.menu-toggle span:after { display:block; width:17px; height:1px; background:currentColor; }.menu-toggle span { position:relative; }.menu-toggle span:before,.menu-toggle span:after { content:''; position:absolute; left:0; }.menu-toggle span:before { top:-5px; }.menu-toggle span:after { top:5px; }.main-nav { position:absolute; inset:65px 0 auto; display:none; padding:20px; flex-direction:column; align-items:stretch; gap:0; background:var(--ink); border-bottom:1px solid rgba(244,239,230,.15); }.main-nav.is-open { display:flex; }.main-nav a { padding:15px 0; border-bottom:1px solid rgba(244,239,230,.12); }.main-nav .nav-cta { text-align:center; margin-top:14px; border:1px solid var(--acid); }.hero { min-height:890px; padding:119px 20px 22px; }.hero h1 { font-size:19vw; }.hero-copy { max-width:100%; }.hero-lead { max-width:290px; margin-top:30px; }.hero-art { width:92vw; right:-18vw; top:38vh; opacity:.7; }.hero-footer { font-size:8px; }.hero-footer span:last-child { display:none; }.manifest,.games,.community,.profile,.daily { padding:76px 20px 84px; }.manifest-grid,.daily-layout,.profile-layout { grid-template-columns:1fr; gap:50px; margin-top:62px; }.manifest-title h2,.games h2,.daily h2,.community h2,.profile h2 { font-size:18vw; }.big-copy { margin-bottom:48px; font-size:25px; }.note { grid-template-columns:30px 1fr; gap:12px; }.note small { grid-column:2; }.section-heading { margin-top:62px; }.split-heading { grid-template-columns:1fr; gap:30px; }.game-grid { grid-template-columns:repeat(2,1fr); gap:8px; margin-top:46px; }.game-card { min-height:220px; padding:14px; }.game-card h3 { font-size:24px; }.game-number { top:13px; left:14px; }.game-symbol { top:36px; right:10px; font-size:46px; }.daily:before { top:25vh; font-size:85vw; }.mission-board { padding:15px; box-shadow:12px 12px 0 rgba(41,70,235,.35); }.mission { grid-template-columns:33px 1fr auto; gap:10px; min-height:78px; }.podium-row { gap:6px; }.podium-card { min-height:190px; padding:12px; }.podium-card.first { min-height:225px; }.avatar { width:42px; height:42px; margin-bottom:14px; font-size:19px; }.podium-card strong { font-size:15px; }.podium-card small { font-size:8px; }.podium-card b { font-size:7px; padding:4px 5px; }.leader-row { grid-template-columns:34px 1fr 52px; }.leader-row small { display:none; }.profile-card { box-shadow:12px 12px 0 var(--blue); }.profile-stats b { font-size:25px; }.profile-achievements small { font-size:8px; }.final-cta { min-height:600px; padding:90px 20px; }.final-cta h2 { font-size:22vw; }.site-footer { grid-template-columns:1fr; padding:24px 20px; gap:18px; }.footer-meta { flex-wrap:wrap; gap:8px 16px; }.ticker-track { font-size:10px; padding:12px 0; } }

/* Hero device mockup: the real Orvessa dashboard replaces the abstract orb. */
.hero-art { width:min(57vw,790px); height:min(49vw,560px); right:1vw; top:16vh; transform:rotate(-7deg); }
.hero-art:before { content:''; position:absolute; inset:10% 4% 8% 7%; background:radial-gradient(ellipse,rgba(41,70,235,.45),transparent 65%); filter:blur(20px); }
.macbook { position:absolute; width:78%; left:1%; top:18%; z-index:1; }
.mac-screen { position:relative; padding:10px 10px 9px; border:7px solid #202020; border-bottom-width:12px; border-radius:13px 13px 4px 4px; background:#080808; box-shadow:0 22px 40px rgba(0,0,0,.45); }
.mac-screen:after { content:''; position:absolute; inset:0; border:1px solid rgba(255,255,255,.16); border-radius:5px; pointer-events:none; }
.mac-screen img { display:block; width:100%; aspect-ratio:893/768; object-fit:cover; object-position:top center; border-radius:3px; }
.mac-camera { position:absolute; z-index:2; top:5px; left:50%; width:5px; height:5px; border-radius:50%; background:#454545; transform:translateX(-50%); }
.mac-base { position:relative; width:112%; height:17px; margin-left:-6%; background:linear-gradient(#b4b4b4,#5e5e5e); clip-path:polygon(4% 0,96% 0,100% 100%,0 100%); border-radius:0 0 10px 10px; box-shadow:0 10px 15px rgba(0,0,0,.35); }
.mac-base span { display:block; width:18%; height:3px; margin:auto; background:#555; border-radius:0 0 5px 5px; }
.phone { position:absolute; z-index:3; width:25%; right:6%; bottom:3%; padding:8px 7px 10px; border:5px solid #262626; border-radius:25px; background:#101010; box-shadow:17px 23px 28px rgba(0,0,0,.5); transform:rotate(8deg); }
.phone-screen { overflow:hidden; position:relative; border-radius:16px; background:#111; }
.phone-screen img { display:block; width:100%; height:360px; object-fit:cover; object-position:31% top; }
.phone-speaker { position:absolute; z-index:2; top:4px; left:50%; width:27%; height:5px; border-radius:10px; background:#000; transform:translateX(-50%); }
.phone-home { width:34%; height:3px; margin:6px auto 0; background:#555; border-radius:4px; }
.device-caption { position:absolute; z-index:4; color:var(--acid); font:10px var(--mono); letter-spacing:.15em; }
.caption-top { top:3%; right:9%; }.caption-bottom { left:5%; bottom:4%; color:rgba(244,239,230,.6); }
.device-sticker { position:absolute; z-index:4; display:grid; place-items:center; width:56px; height:56px; color:var(--ink); background:var(--acid); font:800 23px/.78 var(--sans); text-align:center; transform:rotate(13deg); box-shadow:6px 6px 0 var(--blue); }.device-sticker small { font:8px var(--mono); }.sticker-one { right:0; top:21%; }.sticker-two { left:0; bottom:14%; border-radius:50%; color:var(--acid); background:var(--blue); box-shadow:5px 5px 0 var(--acid); font-size:29px; }
@media (max-width:900px) { .hero-art { width:63vw; right:-4vw; opacity:.95; } }
@media (max-width:680px) { .hero-art { width:100vw; height:270px; right:0; top:540px; transform:rotate(-5deg); opacity:.92; }.macbook { width:77%; left:0; top:21%; }.mac-screen { padding:5px; border-width:4px 4px 7px; border-radius:7px 7px 2px 2px; }.mac-base { height:9px; }.phone { width:25%; right:7%; bottom:0; padding:4px 4px 6px; border-width:3px; border-radius:13px; }.phone-screen { border-radius:9px; }.phone-screen img { height:170px; }.phone-speaker { height:2px; top:2px; }.phone-home { height:2px; margin-top:3px; }.device-caption { font-size:7px; }.device-sticker { width:35px; height:35px; font-size:15px; box-shadow:3px 3px 0 var(--blue); }.device-sticker small { font-size:5px; }.sticker-one { right:2%; top:15%; }.sticker-two { left:2%; bottom:8%; box-shadow:3px 3px 0 var(--acid); font-size:17px; } }

/* Motion layer: language changes, soft depth and responsive UI feedback. */
.language-switcher { display:flex; align-items:center; gap:4px; margin-left:5px; padding-left:8px; border-left:1px solid rgba(244,239,230,.2); }
.language-switcher button { border:0; padding:6px 5px; color:rgba(244,239,230,.48); background:transparent; cursor:pointer; font:10px var(--mono); letter-spacing:.08em; transition:color .25s ease,background .25s ease,transform .25s ease; }
.language-switcher button:hover { color:var(--paper); transform:translateY(-2px); }.language-switcher button.is-active { color:var(--ink); background:var(--acid); }
.scroll-progress { position:fixed; z-index:30; top:0; left:0; width:var(--scroll-progress,0%); height:3px; background:var(--acid); box-shadow:0 0 12px rgba(214,255,75,.65); transition:width .12s linear; }
.language-changing main { opacity:.68; filter:blur(.35px); transition:opacity .18s ease,filter .18s ease; }.language-changing .localized-screen { opacity:.3; filter:blur(5px); transform:scale(.97); }
.localized-screen { transition:opacity .38s ease,filter .38s ease,transform .38s cubic-bezier(.2,.8,.2,1); }
.hero-art { transition:transform .35s cubic-bezier(.2,.8,.2,1); }.hero-art.is-visible { transform:rotate(-7deg) translate3d(calc(var(--px,0) * 1px),calc(var(--py,0) * 1px),0); }
.macbook { animation:deviceFloat 6s ease-in-out infinite; }.phone { animation:phoneFloat 5s ease-in-out .3s infinite; }
.game-card { transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease; will-change:transform; }
.game-card:hover { --lift:-8px; }.podium-card,.mission { transform:translateY(0); transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease; }.podium-card:hover,.mission:hover { transform:translateY(-5px); box-shadow:0 12px 24px rgba(13,13,13,.1); }
.button { position:relative; overflow:hidden; }.button:after { content:''; position:absolute; top:0; left:-120%; width:70%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); transition:left .55s ease; }.button:hover:after { left:140%; }
.profile-card { transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease; }.profile-card:hover { transform:rotate(0deg) translateY(-7px); box-shadow:28px 30px 0 var(--blue); }
@keyframes deviceFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } } @keyframes phoneFloat { 0%,100% { transform:rotate(8deg) translateY(0); } 50% { transform:rotate(8deg) translateY(-13px); } }
@media (max-width:680px) { .language-switcher { justify-content:center; margin:12px 0 0; padding:14px 0 0; border-left:0; border-top:1px solid rgba(244,239,230,.14); }.language-switcher button { flex:1; padding:10px; }.profile-card:hover { transform:rotate(2deg); box-shadow:12px 12px 0 var(--blue); } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }

.example-note { margin:22px 0 0; font:11px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:rgba(13,13,13,.55); }
@media (min-width:681px) and (max-width:1150px) { .hero-art { top:44vh; width:62vw; right:-3vw; } .hero h1 { font-size:min(11vw,110px); } .hero-copy { max-width:60%; } }