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

:root{--bg:#0b0d16;--panel:#121522;--panel2:#171a2a;--text:#f4f5fb;--muted:#9ba1b8;--purple:#a78bfa;--line:#272a3d;--green:#65f2a5}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}
.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(5.5%,calc((100% - 1240px)/2));border-bottom:1px solid #ffffff0d;background:#0b0d16eF;position:sticky;top:0;z-index:5;backdrop-filter:blur(16px)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.06em;font-size:17px;white-space:nowrap}
.brand-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#9b5cff,#5a45db);box-shadow:0 4px 22px #8b5cf644;font-size:13px;color:white}
.accent{color:#b49aff}
nav{display:flex;gap:30px;color:#b0b5c8;font-size:13px}nav a:hover{color:white}
.nav-cta{border:1px solid #39334f;border-radius:10px;padding:9px 15px;font-size:13px;font-weight:700}.nav-cta span{color:var(--purple);margin-left:7px}
.hero{max-width:1240px;margin:auto;padding:76px 5.5% 85px;min-height:560px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:32px;overflow:hidden}
.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800;color:#b4a0ff;display:flex;align-items:center;gap:9px}
.live-dot{width:7px;height:7px;border-radius:50%;background:#62f5a2;box-shadow:0 0 12px #62f5a2}
h1{font-size:clamp(42px,6vw,76px);line-height:.99;letter-spacing:-.065em;margin:23px 0;font-weight:900}
.gradient-text{background:linear-gradient(95deg,#c2a8ff,#7e83ff 55%,#58d8ee);color:transparent;background-clip:text;-webkit-background-clip:text}
.hero-copy>p,.challenge-copy>p,.about>p{max-width:510px;color:var(--muted);font-size:14px;line-height:1.9}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:13px 18px;border-radius:10px;border:1px solid transparent;font-size:12px;font-weight:800;transition:transform .2s,filter .2s}
.button:hover{transform:translateY(-2px);filter:brightness(1.1)}
.primary{background:linear-gradient(105deg,#a36bff,#6757e8);color:white;box-shadow:0 8px 28px #8b5cf62c}
.secondary{border-color:#303349;color:#d4d6e4;background:#111320}
.hero-stats{display:flex;gap:34px;margin-top:45px}.hero-stats div{display:flex;flex-direction:column}.hero-stats strong{font-size:21px;letter-spacing:-.04em}.hero-stats span{font-size:9px;letter-spacing:.12em;color:#7e849b;margin-top:2px}
.hero-art{height:390px;position:relative;display:grid;place-items:center}
.orbit{position:absolute;border:1px solid #8e72ff22;border-radius:50%;transform:rotate(-22deg)}.orbit-one{width:360px;height:270px}.orbit-two{width:440px;height:330px;transform:rotate(32deg)}
.controller{width:280px;height:185px;background:linear-gradient(145deg,#34364f,#171927 70%);border:1px solid #77729e66;border-radius:54px 54px 72px 72px;transform:rotate(-12deg);position:relative;box-shadow:0 30px 70px #0008,0 0 65px #7958e52b,inset 0 2px 5px #ffffff25}
.controller:before,.controller:after{content:"";position:absolute;top:-10px;width:78px;height:42px;background:#282a40;border:1px solid #77729e55}.controller:before{left:35px;border-radius:22px 22px 0 0;transform:rotate(-12deg)}.controller:after{right:35px;border-radius:22px 22px 0 0;transform:rotate(12deg)}
.dpad{position:absolute;top:65px;left:44px;width:52px;height:52px}.dpad:before,.dpad:after{content:"";position:absolute;background:#0d0f19;border-radius:4px}.dpad:before{width:18px;height:52px;left:17px}.dpad:after{height:18px;width:52px;top:17px}
.buttons{position:absolute;right:36px;top:58px;width:60px;height:60px}.buttons i{position:absolute;width:21px;height:21px;border-radius:50%;background:#a77cff;box-shadow:0 0 13px #a77cff66;font-size:10px;font-style:normal;text-align:center;line-height:21px;color:#21183a}.buttons i:nth-child(1){top:0;left:20px}.buttons i:nth-child(2){top:20px;right:0;background:#ff729e}.buttons i:nth-child(3){top:20px;left:0;background:#63d9ef}.buttons i:nth-child(4){bottom:0;left:20px;background:#f9c76a}
.stick{position:absolute;width:32px;height:32px;background:#11131f;border-radius:50%;border:5px solid #41435c;box-shadow:inset 0 2px 5px #000}.stick-left{left:98px;bottom:24px}.stick-right{right:89px;bottom:18px}.controller-light{position:absolute;bottom:15px;left:50%;width:22px;height:4px;border-radius:5px;background:#8b6dff;box-shadow:0 0 12px #8b6dff}
.floating-chip{position:absolute;background:#171a2b;border:1px solid #353650;border-radius:10px;padding:11px 14px;font-size:9px;letter-spacing:.1em;font-weight:800;box-shadow:0 12px 30px #0005;z-index:2}.chip-top{top:38px;right:0}.chip-top span{display:block;color:#65f2a5;font-size:8px;margin-top:3px}.chip-bottom{bottom:43px;left:0}.spark{color:#b69bff;font-size:17px;vertical-align:middle;margin-right:5px}.decor-square{position:absolute;width:12px;height:12px;border:2px solid #a78bfa;transform:rotate(45deg);right:12%;bottom:23%}
.section{max-width:1240px;margin:auto;padding:45px 5.5% 85px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.section-heading h2,.challenge h2,.about h2{font-size:clamp(27px,4vw,39px);line-height:1.2;letter-spacing:-.05em;margin:9px 0 0;font-weight:850}.section-count{font-size:10px;letter-spacing:.13em;color:#727991}
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.tool-card{background:linear-gradient(145deg,#151827,#10121e);border:1px solid #272a3d;border-radius:15px;padding:20px;min-height:235px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}.tool-card:hover{transform:translateY(-4px);border-color:#7160b3}.tool-card.featured{background:linear-gradient(145deg,#211a3a,#131522);border-color:#4b3b70}
.card-top{display:flex;justify-content:space-between;align-items:center}.tool-icon{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;font-size:25px}.purple{background:#8b5cf626;color:#bca2ff}.blue{background:#38bdf826;color:#67d8ff}.pink{background:#f472b626;color:#ff9bd0}.orange{background:#fb923c20;color:#ffc17e}.tag{font-size:8px;letter-spacing:.1em;color:#9da3bb}
.tool-card h3{font-size:16px;margin:21px 0 5px}.tool-card p{font-size:11px;line-height:1.8;color:#979db3;margin:0}.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:22px}.card-bottom>span{font-size:8px;color:#767d96;letter-spacing:.07em}.text-button{border:0;background:none;color:#c4afff;font-size:10px;font-weight:800;white-space:nowrap;padding:4px 0}.text-button:hover{color:white}
.challenge{max-width:1110px;margin:0 auto 70px;border:1px solid #37304f;border-radius:20px;padding:38px 42px;background:radial-gradient(ellipse at 85% 15%,#6646a72e,transparent 42%),linear-gradient(115deg,#181625,#111421);display:flex;align-items:center;justify-content:space-between;gap:30px}.challenge-copy{max-width:550px}.challenge-copy>p{font-size:12px;max-width:440px}.challenge-copy .button{margin-top:12px}.record-box{min-width:235px;padding:25px;border-radius:15px;background:#0d0f1a;border:1px solid #343047;display:flex;flex-direction:column;align-items:flex-start}.record-symbol{color:#bba0ff;font-size:28px;margin-bottom:10px}.record-box>span{font-size:9px;letter-spacing:.1em;color:#a5a0bd}.record-box strong{font-size:39px;letter-spacing:-.05em;margin:6px 0}.record-box small{font-size:9px;color:#767d94;line-height:1.7}
.about{text-align:center;padding-top:20px;padding-bottom:90px}.about .eyebrow{justify-content:center}.about h2{font-size:38px}.about>p{margin:15px auto 0;font-size:13px}
footer{border-top:1px solid #ffffff10;padding:25px 5.5%;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#737a91;font-size:10px}footer .brand{color:#e9e9f4;font-size:13px}footer .brand-icon{width:29px;height:29px;border-radius:8px;font-size:10px}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;z-index:20}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:#05060bd9;backdrop-filter:blur(8px)}.modal-panel{position:relative;width:min(100%,530px);max-height:90vh;overflow:auto;background:#141625;border:1px solid #36344e;border-radius:20px;padding:30px;box-shadow:0 30px 100px #0009}.modal-panel h2{font-size:28px;letter-spacing:-.04em;margin:8px 0 20px}.modal-close{position:absolute;right:18px;top:14px;border:0;background:#24263a;color:#e7e7f2;border-radius:9px;width:35px;height:35px;font-size:24px}.modal-copy{color:#a4abc0;font-size:13px}.reaction-pad{width:100%;min-height:190px;border:1px solid #393750;border-radius:14px;background:#25203c;color:#e7ddff;font-size:18px;font-weight:800;margin:12px 0}.reaction-pad.waiting{background:#6e263a;color:white}.reaction-pad.go{background:#1e9e68;color:#fff}.reaction-pad:disabled{cursor:default}.result{text-align:center;font-size:46px;font-weight:900;margin:18px 0}.result small{display:block;font-size:12px;color:#9ba1b8;font-weight:500}.field{width:100%;padding:13px 14px;background:#0d0f19;border:1px solid #363950;border-radius:10px;color:white;outline:none;margin:8px 0}.field:focus{border-color:#a78bfa}.tool-action{width:100%;padding:12px;border:0;border-radius:10px;background:linear-gradient(100deg,#9b6bfa,#6557e8);color:white;font-weight:800;margin-top:10px}.tool-action:disabled{opacity:.45;cursor:not-allowed}.metric-row{display:flex;gap:10px}.metric{flex:1;background:#0d0f19;border:1px solid #282b3e;border-radius:10px;padding:13px}.metric span{display:block;color:#969db4;font-size:10px}.metric strong{font-size:23px}.quiz-option{width:100%;text-align:left;background:#1d2031;color:#f4f5fb;border:1px solid #33364b;border-radius:10px;padding:12px;margin:5px 0}.quiz-option:hover{border-color:#a78bfa}.quiz-option:disabled{opacity:.75}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);background:#26243a;color:#f4f5fb;border:1px solid #494166;border-radius:10px;padding:12px 18px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:40}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.hero{padding-top:55px;grid-template-columns:1fr .8fr}.hero-art{transform:scale(.85);margin:0 -30px}.tool-grid{grid-template-columns:repeat(2,1fr)}.challenge{margin-left:5%;margin-right:5%}.tool-card{min-height:220px}}
@media(max-width:620px){.topbar{height:66px;padding:0 5%;gap:10px}.brand{font-size:14px;gap:7px}.brand-icon{width:31px;height:31px}nav{display:none}.nav-cta{font-size:11px;padding:8px 11px}.hero{padding:52px 6% 45px;display:flex;flex-direction:column;align-items:stretch;gap:5px}.hero-copy{position:relative;z-index:1}h1{font-size:clamp(43px,12vw,65px);margin:20px 0}.hero-copy>p{font-size:13px}.hero-art{height:260px;transform:scale(.78);margin:-5px 0 -10px}.controller{transform:rotate(-12deg) scale(.88)}.orbit-one{width:300px;height:230px}.orbit-two{width:360px;height:270px}.chip-top{right:0;top:5px}.chip-bottom{bottom:4px;left:0}.hero-stats{gap:24px;margin-top:30px}.section{padding:35px 5% 55px}.section-heading{align-items:start;gap:12px}.section-heading h2{font-size:28px}.section-count{padding-top:5px;font-size:8px}.tool-grid{gap:10px}.tool-card{padding:14px;min-height:230px}.tool-card h3{font-size:14px;margin-top:16px}.tool-card p{font-size:10px}.card-bottom{align-items:flex-start;flex-direction:column;gap:7px;padding-top:17px}.card-bottom>span{font-size:7px}.tool-icon{width:37px;height:37px}.tag{font-size:7px}.challenge{margin:0 5% 55px;padding:25px 20px;flex-direction:column;align-items:stretch;gap:25px}.challenge h2{font-size:30px}.record-box{min-width:0}.about{padding:20px 8% 60px}.about h2{font-size:33px}footer{padding:23px 5%;flex-wrap:wrap}footer>span:nth-child(2){display:none}.modal-panel{padding:25px 19px}.modal-panel h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}