:root { --ink:#f7f7fb; --muted:#aaa9ba; --night:#07070e; --panel:#111120; --violet:#9e5cff; --blue:#477bff; --coral:#ff725e; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--night); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:inherit; text-decoration:none; }
main { overflow:hidden; }
.site-header { height:92px; display:flex; align-items:center; justify-content:space-between; padding:0 max(5vw, 32px); position:absolute; width:100%; z-index:20; border-bottom:1px solid rgba(255,255,255,.08); }
.brand { display:flex; align-items:center; gap:14px; font-size:14px; font-weight:800; letter-spacing:.2em; line-height:1.15; }
.brand small { display:block; margin-top:5px; color:#8e8d9e; font-size:8px; letter-spacing:.28em; }
.brand-mark { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(145deg,#c180ff,#7041f4); box-shadow:0 8px 32px rgba(138,76,255,.25); }
.brand-mark i { width:18px; height:18px; border-radius:6px 6px 9px 6px; background:white; transform:rotate(12deg); display:block; }
nav { display:flex; align-items:center; gap:32px; color:#bdbccc; font-size:13px; }
nav a { transition:.2s ease; } nav a:hover { color:white; }
.privacy-link { border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:11px 17px; color:white; }
.privacy-link span { margin-left:6px; color:#bd8aff; }
.hero { min-height:860px; padding:170px max(5vw,32px) 95px; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(430px,.98fr); align-items:center; gap:5vw; position:relative; background:radial-gradient(circle at 84% 28%,rgba(51,65,180,.25),transparent 32%),radial-gradient(circle at 25% 42%,rgba(114,42,117,.2),transparent 38%),linear-gradient(145deg,#120812 0%,#0b0a1b 52%,#050811 100%); }
.hero:after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,black,transparent 85%); }
.hero-copy,.hero-visual { position:relative; z-index:2; }
.eyebrow { margin:0 0 23px; color:#b7b6c7; text-transform:uppercase; letter-spacing:.24em; font-size:11px; font-weight:700; display:flex; align-items:center; gap:11px; }
.eyebrow span { width:27px; height:1px; background:linear-gradient(90deg,var(--violet),var(--coral)); }
h1 { font-size:clamp(58px,6.2vw,100px); line-height:.93; letter-spacing:-.065em; margin:0 0 31px; max-width:850px; }
h1 em { font-style:normal; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.6); }
.hero-lead { max-width:620px; font-size:18px; line-height:1.75; color:#aaa9ba; }
.hero-actions { display:flex; align-items:center; gap:30px; margin:38px 0 52px; }
.primary-button { padding:16px 22px; border-radius:10px; background:linear-gradient(100deg,#8148ff,#556eff); font-size:14px; font-weight:700; box-shadow:0 13px 38px rgba(95,74,255,.28); transition:transform .2s ease,box-shadow .2s ease; }
.primary-button:hover { transform:translateY(-2px); box-shadow:0 17px 44px rgba(95,74,255,.38); }
.primary-button span { margin-left:18px; }
.text-button { font-size:13px; color:#d5d4df; border-bottom:1px solid #686779; padding-bottom:5px; }
.hero-stats { display:flex; gap:42px; }
.hero-stats div { padding-left:15px; border-left:1px solid #343344; }
.hero-stats strong,.hero-stats span { display:block; }
.hero-stats strong { font-size:13px; margin-bottom:5px; }.hero-stats span { color:#777687; font-size:11px; }
.hero-visual { height:570px; perspective:1200px; }
.glow { position:absolute; filter:blur(80px); border-radius:50%; opacity:.24; }.glow-one { width:420px;height:420px;background:#6b25ae;right:10%;top:18%; }.glow-two { width:260px;height:260px;background:#1e55c6;right:0;bottom:15%; }
.game-card { position:absolute; left:13%; top:9%; width:min(430px,75%); height:490px; border-radius:34px; padding:29px; background:linear-gradient(155deg,rgba(67,55,137,.93),rgba(21,24,62,.97)); border:1px solid rgba(174,163,255,.24); box-shadow:0 45px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.12); transform:rotateY(-8deg) rotateZ(3deg); }
.card-top,.card-bottom { display:flex; align-items:center; justify-content:space-between; font-size:10px; letter-spacing:.2em; color:#b8b5d3; }.card-top b { color:#ffd37a; }
.game-icon { width:174px;height:174px;margin:38px auto 25px;border-radius:48px;display:grid;place-items:center;background:radial-gradient(circle at 40% 30%,#e7a5ff,#8851ed 55%,#3e39b6);box-shadow:0 25px 55px rgba(103,54,255,.44),inset 0 1px 3px rgba(255,255,255,.55); }.game-icon span { font-size:82px;text-shadow:0 6px 18px rgba(44,20,102,.4); }
.game-card h2 { font-size:27px;margin:0 0 7px; }.game-card p { margin:0 0 24px;color:#aaa8c4;font-size:13px; }.progress { height:5px;background:rgba(255,255,255,.1);border-radius:4px;margin-bottom:25px; }.progress i { display:block;width:72%;height:100%;border-radius:4px;background:linear-gradient(90deg,#b960ff,#ff769f); }.card-bottom strong { color:white; }
.float-card { position:absolute;border:1px solid rgba(255,255,255,.15);box-shadow:0 25px 55px rgba(0,0,0,.36);backdrop-filter:blur(14px); }.card-score { right:0;top:18%;width:180px;padding:19px;border-radius:20px;background:rgba(21,25,64,.85);transform:rotate(7deg); }.float-card small,.float-card strong { display:block; }.float-card small { color:#9998b6;font-size:8px;letter-spacing:.18em;margin-bottom:6px; }.card-score strong { font-size:23px; }.card-score div { color:#ffd06b;font-size:8px;letter-spacing:4px;margin-top:12px; }.card-reward { left:0;bottom:7%;padding:15px 20px;border-radius:18px;background:rgba(69,35,95,.87);display:flex;gap:13px;align-items:center;transform:rotate(-7deg); }.card-reward>span { width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#ffcc6a,#ff725f); }.card-reward strong { font-size:13px; }
.mini-token { position:absolute;z-index:3;display:grid;place-items:center;box-shadow:0 14px 30px rgba(0,0,0,.3); }.token-star { width:55px;height:55px;right:7%;bottom:18%;border-radius:17px;background:#ff765c;transform:rotate(15deg); }.token-gem { width:42px;height:42px;left:7%;top:2%;border-radius:12px;background:#497aff;color:#b8d7ff;transform:rotate(-12deg); }.orbit { position:absolute;border:1px solid rgba(121,103,255,.15);border-radius:50%;transform:rotate(-25deg); }.orbit-one { width:620px;height:360px;left:-30px;top:100px; }.orbit-two { width:520px;height:260px;left:40px;top:150px; }
.experience { background:#f3f0ed;color:#16151c;padding:120px max(5vw,32px) 130px; }.section-heading { display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:60px;align-items:end;margin-bottom:70px; }.section-heading .eyebrow { align-self:start;color:#6e6b76; }.section-heading h2,.about h2,.contact h2 { font-size:clamp(40px,4.5vw,66px);line-height:1.02;letter-spacing:-.055em;margin:0; }.section-heading>p:last-child { color:#67646d;line-height:1.7;max-width:380px;margin:0; }
.value-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }.value-card { min-height:390px;border-radius:26px;padding:32px;display:flex;flex-direction:column;position:relative;overflow:hidden;color:white;box-shadow:0 24px 65px rgba(34,20,50,.12); }.value-card:after { content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(255,255,255,.16);border-radius:50%;right:-80px;bottom:-120px; }.value-card.violet { background:linear-gradient(150deg,#70468b,#27203d); }.value-card.blue { background:linear-gradient(150deg,#335d9a,#18294c); }.value-card.coral { background:linear-gradient(150deg,#e8a06c,#a14571); }
.value-meta { display:flex;justify-content:space-between;color:rgba(255,255,255,.65);font-size:11px;letter-spacing:.16em; }.value-meta i { width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-style:normal;font-size:18px; }.value-card h3 { font-size:29px;letter-spacing:-.03em;margin:auto 0 14px; }.value-card p { color:rgba(255,255,255,.72);line-height:1.65;max-width:300px;margin:0 0 40px; }.value-line { width:62px;height:3px;background:rgba(255,255,255,.5);border-radius:2px; }
.about { padding:135px max(5vw,32px);display:grid;grid-template-columns:1.15fr .85fr;gap:10vw;align-items:center;background:#0a0911; }.about-copy>p:not(.eyebrow) { color:#9694a5;max-width:620px;line-height:1.8;font-size:16px;margin:30px 0 35px; }.principles { display:flex;flex-wrap:wrap;gap:10px; }.principles span { border:1px solid #302e3b;border-radius:999px;padding:10px 14px;color:#aaa8b7;font-size:11px;letter-spacing:.08em; }
.profile-card { border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:34px;background:linear-gradient(145deg,rgba(38,26,61,.75),rgba(18,19,35,.85));box-shadow:0 35px 85px rgba(0,0,0,.3); }.profile-mark { width:72px;height:72px;border-radius:23px;background:linear-gradient(145deg,#c180ff,#564bf2);display:grid;place-items:center;margin-bottom:28px; }.profile-mark i { width:30px;height:30px;background:white;border-radius:10px 10px 15px 10px;transform:rotate(12deg); }.profile-card small { font-size:9px;letter-spacing:.2em;color:#89869c; }.profile-card h3 { font-size:30px;margin:5px 0; }.profile-card p { color:#8d8b9b;margin:0 0 30px; }.profile-card dl { margin:0; }.profile-card dl div { padding:15px 0;border-top:1px solid rgba(255,255,255,.09);display:grid;grid-template-columns:85px 1fr;gap:15px; }.profile-card dt { color:#777485;font-size:11px; }.profile-card dd { margin:0;font-size:12px;word-break:break-word; }.profile-card address { color:#aaa8b7;font-style:normal;line-height:1.7; }.profile-card .address-row { padding-bottom:0; }.profile-card a:hover { color:#bd8aff; }
.contact { padding:100px max(5vw,32px);background:linear-gradient(100deg,#7045c7,#435fe0 55%,#2f55d0);display:grid;grid-template-columns:1.2fr .8fr;gap:10vw;align-items:end;position:relative; }.contact:after { content:"✦";position:absolute;right:5%;top:15%;font-size:120px;color:rgba(255,255,255,.07); }.eyebrow.light { color:rgba(255,255,255,.67); }.eyebrow.light span { background:white;opacity:.6; }.contact-action p { color:rgba(255,255,255,.72);line-height:1.7;max-width:450px; }.contact-action a { display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.48);padding:18px 0;font-weight:700; }
footer { padding:36px max(5vw,32px);display:flex;align-items:center;justify-content:space-between;background:#05050a;border-top:1px solid #181721;color:#777583;font-size:11px; }.footer-brand { color:white;transform:scale(.85);transform-origin:left center; }.footer-brand small { color:#6e6c78; } footer>a:last-child { color:#b2b0bd; }
@media (max-width:980px) { nav a:not(.privacy-link){display:none}.hero{grid-template-columns:1fr;padding-top:145px}.hero-visual{height:540px;max-width:620px;width:100%;margin:auto}.section-heading{grid-template-columns:1fr}.value-grid{grid-template-columns:1fr}.value-card{min-height:300px}.about{grid-template-columns:1fr}.profile-card{max-width:620px}.contact{grid-template-columns:1fr}.section-heading{gap:20px} }
@media (max-width:600px) { .site-header{height:76px;padding:0 20px}.brand{font-size:11px;gap:10px}.brand-mark{width:36px;height:36px}.brand small{font-size:6px}.privacy-link{padding:9px 12px}nav{gap:0}.hero{padding:130px 20px 70px;min-height:auto}h1{font-size:52px}.hero-lead{font-size:15px}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.hero-stats{gap:12px;justify-content:space-between}.hero-stats div{padding-left:9px}.hero-stats span{font-size:9px}.hero-visual{height:465px;margin-top:25px}.game-card{left:5%;width:86%;height:420px;padding:23px}.game-icon{width:140px;height:140px;margin:28px auto 20px}.card-score{right:-15px;top:8%;width:150px}.card-reward{left:-8px;bottom:1%}.experience,.about{padding:85px 20px}.section-heading{margin-bottom:40px}.value-card{min-height:320px;padding:27px}.contact{padding:75px 20px}.contact h2{font-size:46px}footer{padding:32px 20px;align-items:flex-start;gap:25px;flex-direction:column}.footer-brand{transform:none} }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.primary-button{transition:none}}