*{box-sizing:border-box}
html{background:var(--void-1);color:var(--fg-1);-webkit-text-size-adjust:100%}
body{position:relative;isolation:isolate;margin:0;min-height:100vh;min-height:100svh;overflow-x:clip;font-family:var(--font-body);background:var(--void-1)}
.grid{position:absolute;z-index:-1;inset:0 0 auto;height:720px;pointer-events:none;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:26px 26px;background-position:center top;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 75%)}
.light{position:absolute;z-index:-1;left:0;right:0;top:120px;width:min(760px,100%);height:420px;margin:auto;pointer-events:none;background:radial-gradient(closest-side,rgba(47,59,255,.22),transparent)}
.landing{position:relative;max-width:600px;margin:0 auto;padding:20px 16px 56px;display:flex;flex-direction:column;gap:28px}
.brand{display:flex;justify-content:center;padding-top:4px}
.brand img{display:block;height:29px;width:auto;max-width:100%;object-fit:contain}
.hero{display:flex;flex-direction:column;gap:20px;text-align:center}
.intro{display:flex;flex-direction:column;gap:12px;align-items:center}
h1{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(34px,10vw,60px);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word;max-width:100%}
.subtitle{margin:0;max-width:420px;font-size:17px;line-height:1.5;color:var(--fg-2);text-wrap:pretty}
.destinations{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px}
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:60px;padding:12px 20px;border:0;border-radius:var(--radius-m);font-family:var(--font-body);font-size:17px;font-weight:600;line-height:1.4;text-align:center;text-decoration:none;white-space:normal;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.28);transition:background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-press)}
.button svg{width:20px;height:20px;flex:none}
.button-telegram{background:var(--telegram);color:#fff}
.button-site{background:var(--accent);color:#fff}
.button:focus-visible{outline:2px solid var(--blue-300);outline-offset:4px}
.button:not(:disabled):active{transform:translateY(1px) scale(.985)}
.notice{display:flex;align-items:flex-start;justify-content:center;gap:8px;margin:0;font-size:15px;line-height:1.45;color:var(--fg-2);text-align:left}
.notice svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--blue-300)}
.trial{display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:1px solid var(--border-subtle);text-align:center}
.button-soon{width:100%;min-height:52px;background:var(--void-3);color:var(--fg-3);font-size:16px;cursor:not-allowed;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -3px 0 rgba(0,0,0,.35)}
.trial p{margin:0;font-size:14px;line-height:1.45;color:var(--fg-3);text-wrap:pretty}
@media(hover:hover) and (pointer:fine){.button-telegram:hover{background:var(--telegram-hover);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.28),0 10px 26px -10px rgba(42,171,238,.7)}.button-site:hover{background:var(--accent-hover);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.28),var(--glow-blue)}}
@media(prefers-reduced-motion:reduce){.button{transition:none}.button:not(:disabled):active{transform:none}}