:root { --bg:#0e1116; --panel:#161c24; --panel-2:#1d2630; --line:#2a3643; --text:#f0e5dc; --muted:#9aa0a8; --accent:#f2ab4d; --green:#69d5b4; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:radial-gradient(circle at 75% 12%, #2c2016 0, transparent 25rem), var(--bg); color:var(--text); font:16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } button,a { font:inherit; } button { cursor:pointer; } .content { width:min(1120px, calc(100% - 40px)); margin-inline:auto; }
.nav { height:84px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.06); } .brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-size:14px; font-weight:800; letter-spacing:.08em; } .brand img { width:32px; height:32px; } .nav-links { display:flex; align-items:center; gap:26px; } .nav-links a { color:var(--muted); text-decoration:none; font-size:14px; } .nav-links a:hover { color:var(--text); }.nav-profile { display:flex; align-items:center; gap:8px; min-width:0; }.nav-profile[hidden] { display:none; }.nav-profile img { width:32px; height:32px; border-radius:50%; border:1px solid #547061; object-fit:cover; }.nav-profile span { display:grid; line-height:1.15; }.nav-profile small { color:var(--muted); font-size:10px; }.nav-profile b { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--green); font-size:12px; }
.steam-button { border:1px solid #ffbe6e; background:var(--accent); color:#34210e; font-weight:800; border-radius:10px; padding:14px 18px; box-shadow:0 10px 30px rgba(242,171,77,.12); } .steam-button:hover { filter:brightness(1.07); transform:translateY(-1px); } .steam-button--small { padding:9px 13px; font-size:13px; } .steam-glyph { font-size:13px; margin-right:7px; color:#15120c; }.language-switch { border:1px solid #35414d; border-radius:8px; padding:7px 8px; background:transparent; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.08em; }.language-switch:hover { color:var(--text); border-color:#647384; }
.hero { min-height:650px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:50px; padding-block:80px; } .eyebrow { margin:0 0 13px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { max-width:650px; font-size:clamp(46px,6vw,78px); letter-spacing:-.065em; line-height:.96; margin-bottom:25px; } h1 em { color:var(--accent); font-style:normal; } .lead { max-width:540px; color:var(--muted); font-size:18px; } .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:32px; } .text-action { color:var(--text); text-decoration:none; font-size:14px; } .text-action span { color:var(--accent); margin-left:5px; } .fine-print { margin-top:18px; margin-bottom:6px; color:#707781; font-size:12px; }.setup-note { max-width:485px; margin-bottom:0; color:var(--green); font-size:13px; }.store-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }.store-button { display:flex; align-items:center; gap:8px; min-width:135px; padding:8px 12px; border:1px solid #35414d; border-radius:9px; background:#12171d; color:var(--text); text-align:left; cursor:default; }.store-button span:last-child { display:grid; line-height:1.1; }.store-button small { color:var(--muted); font-size:9px; }.store-button b { font-size:14px; }.store-mark { display:inline-grid; place-items:center; width:19px; height:22px; color:var(--accent); font-size:17px; }.store-mark--apple { font-size:20px; }
.hero-visual { position:relative; padding:46px 0 0 18px; } .signal { position:absolute; top:14px; right:12px; z-index:2; background:#173d35; color:var(--green); border:1px solid #286051; padding:7px 10px; border-radius:50px; font-size:12px; font-weight:800; } .signal i,.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); margin-right:6px; }.app-card { background:linear-gradient(140deg,#202a34,#151a21); border:1px solid #2b3743; border-radius:26px; padding:26px; box-shadow:22px 24px 60px rgba(0,0,0,.28); transform:rotate(2deg); } .app-card__header { display:flex; justify-content:space-between; align-items:center; } .app-card small { display:block; color:var(--muted); font-size:12px; } .app-card strong { font-size:18px; } .app-card__header img { width:54px; height:54px; } .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-block:28px; }.stats b { display:block; font-size:29px; }.stats span { color:var(--muted); font-size:12px; }.today { display:flex; align-items:center; gap:10px; background:#151b22; padding:13px; border-radius:14px; margin-bottom:12px; }.today div { flex:1; }.today b { color:var(--accent); }.mini-row { display:flex; justify-content:space-between; color:var(--muted); padding:10px 3px; border-bottom:1px solid #29323c; }.mini-row strong { color:var(--text); }.mini-row .warm { color:var(--accent); }
.features { padding-block:80px 120px; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.feature-grid article { min-height:280px; padding:26px; background:var(--panel); border:1px solid #26323e; border-radius:18px; }.feature-grid span { color:var(--accent); font:700 13px ui-monospace,monospace; }.feature-grid h2 { margin:48px 0 12px; font-size:26px; letter-spacing:-.04em; line-height:1.04; }.feature-grid p { color:var(--muted); font-size:14px; }
.access { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:70px 0 120px; border-top:1px solid rgba(255,255,255,.08); }.access h2 { font-size:clamp(30px,4vw,48px); letter-spacing:-.055em; line-height:1.03; }.access-copy > p:last-child { max-width:450px; color:var(--muted); }.auth-gate,.plans { background:var(--panel); border:1px solid #2a3541; border-radius:20px; padding:30px; }.auth-gate__lock { color:var(--accent); font-size:30px; }.auth-gate h3 { margin:19px 0 8px; }.auth-gate p { color:var(--muted); font-size:14px; }.plans[hidden] { display:none; }.profile { display:flex; align-items:center; gap:10px; padding-bottom:18px; color:var(--green); font-size:13px; }.profile img { width:26px; height:26px; }.profile button { margin-left:auto; padding:0; border:0; background:transparent; color:var(--muted); font-size:12px; }.plan { width:100%; margin-top:10px; padding:17px; display:flex; align-items:center; gap:15px; text-align:left; color:var(--text); background:#1b232c; border:1px solid #2c3945; border-radius:12px; }.plan:hover { border-color:var(--accent); }.plan span { flex:1; }.plan b,.plan small { display:block; }.plan small { color:var(--muted); font-size:12px; font-weight:400; }.plan strong { text-align:right; }.plan i { color:var(--accent); font-style:normal; font-size:22px; }.trial { color:var(--muted); font-size:12px; margin:18px 0 0; }
.auth-notice { grid-column:2; margin:0; color:var(--green); font-size:13px; }
footer { display:flex; justify-content:space-between; gap:16px; padding-block:24px 36px; border-top:1px solid rgba(255,255,255,.07); color:#727983; font-size:12px; }
dialog { width:min(440px,calc(100% - 32px)); border:1px solid #3b4855; border-radius:22px; padding:32px; color:var(--text); background:#171e26; box-shadow:0 30px 90px #000; } dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(5px); } dialog img { width:72px; height:72px; margin-bottom:22px; } dialog h2 { font-size:31px; letter-spacing:-.05em; } dialog p:not(.eyebrow) { color:var(--muted); }.dialog-close { position:absolute; right:16px; top:12px; border:0; background:transparent; color:var(--muted); font-size:30px; }.payment-placeholder { margin:20px 0; padding:14px; border-radius:10px; background:#202a33; color:var(--muted); font-size:13px; }
@media (max-width:760px) { .nav { height:70px; }.nav-links { gap:10px; }.nav-links>a { display:none; }.nav-profile b { max-width:105px; }.hero,.access { grid-template-columns:1fr; }.hero { padding-block:56px; }.hero-visual { max-width:460px; width:100%; margin-inline:auto; }.feature-grid { grid-template-columns:1fr; }.feature-grid article { min-height:200px; }.feature-grid h2 { margin-top:30px; }.access { padding-block:60px; } footer { flex-direction:column; }.brand span { font-size:12px; } }