:root{
  color-scheme:light dark;
  --bg:#f5f5f7; --text:#111114; --muted:#6e6e73;
  --panel:rgba(255,255,255,.72); --line:rgba(0,0,0,.07);
  --shadow:0 30px 80px rgba(0,0,0,.10); --blue:#168cff;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#000; --text:#f5f5f7; --muted:#98989d;
    --panel:rgba(29,29,31,.72); --line:rgba(255,255,255,.10);
    --shadow:0 34px 90px rgba(0,0,0,.42); --blue:#2997ff;
  }
}
*{box-sizing:border-box}
html{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;background:var(--bg);color:var(--text)}
body{margin:0;min-height:100vh;background:
 radial-gradient(circle at 76% 16%,rgba(20,145,255,.09),transparent 27rem),
 radial-gradient(circle at 62% 26%,rgba(165,80,255,.06),transparent 25rem),
 var(--bg)}
a{text-decoration:none;color:inherit}
.shell{width:min(1180px,calc(100% - 44px));margin:auto}
nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:750;font-size:21px;letter-spacing:-.03em}
.navlinks{display:flex;align-items:center;gap:22px;font-size:14px;color:var(--muted)}
.navlinks a:hover{color:var(--text)}
.hero{min-height:760px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:36px;padding:38px 0 90px}
.copy h1{font-size:clamp(70px,9vw,126px);line-height:.84;letter-spacing:-.075em;margin:0 0 30px}
.copy .tag{font-size:clamp(23px,2.5vw,34px);font-weight:600;letter-spacing:-.035em;margin:0 0 14px}
.copy p{font-size:20px;line-height:1.55;color:var(--muted);max-width:520px;margin:0}
.platforms{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.chip{padding:10px 15px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(24px);border-radius:999px;font-size:14px}
.visual{position:relative;min-height:590px;display:grid;place-items:center}
.orb{position:absolute;width:500px;height:500px;border-radius:42%;background:linear-gradient(145deg,rgba(16,146,255,.16),rgba(167,80,255,.09),rgba(255,106,28,.10));filter:blur(1px);transform:rotate(-8deg)}
.logo{position:relative;width:min(92%,530px);filter:drop-shadow(0 35px 40px rgba(0,0,0,.15));transform:rotate(-2deg)}
.statement{padding:80px 0 120px;text-align:center}
.statement h2{font-size:clamp(40px,6vw,78px);line-height:1.02;letter-spacing:-.055em;max-width:920px;margin:0 auto}
.statement p{font-size:20px;color:var(--muted);margin:24px auto 0;max-width:650px;line-height:1.5}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:120px}
.card{min-height:300px;padding:34px;border-radius:34px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(28px)}
.card .icon{font-size:32px;margin-bottom:70px}
.card h3{font-size:27px;letter-spacing:-.035em;margin:0 0 10px}
.card p{font-size:16px;line-height:1.55;color:var(--muted);margin:0}
.page{max-width:760px;padding:70px 0 110px}
.page h1{font-size:56px;letter-spacing:-.05em;margin:0 0 12px}
.page h2{font-size:24px;margin:40px 0 10px}
.page p,.page li{font-size:17px;line-height:1.65;color:var(--muted)}
.notice{padding:20px 22px;border:1px solid var(--line);border-radius:22px;background:var(--panel);backdrop-filter:blur(20px)}
footer{border-top:1px solid var(--line);padding:30px 0 44px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:20px}
footer .footlinks{display:flex;gap:18px}
@media(max-width:760px){
 .shell{width:min(100% - 32px,1180px)}
 nav{height:68px}.navlinks{gap:14px}
 .hero{grid-template-columns:1fr;min-height:auto;text-align:center;padding:42px 0 80px}
 .visual{grid-row:1;min-height:360px}.orb{width:320px;height:320px}.logo{width:min(88vw,370px)}
 .copy h1{font-size:72px}.copy p{margin:auto}.platforms{justify-content:center}
 .statement{padding:50px 0 90px}
 .cards{grid-template-columns:1fr;padding-bottom:80px}.card{min-height:230px}.card .icon{margin-bottom:45px}
 .page{padding-top:45px}.page h1{font-size:44px}
 footer{flex-direction:column}
}