/* Landing page (index.en.html, index.ru.html). */
@font-face { font-family:"Exo 2"; font-weight:400; font-display:swap; src:url(/assets/exo2-regular.woff2) format("woff2"); }
@font-face { font-family:"Exo 2"; font-weight:600; font-display:swap; src:url(/assets/exo2-semibold.woff2) format("woff2"); }
:root {
  color-scheme: dark;
  --bg:#090d11; --card:#0e151b; --line:#1c2a34; --text:#dce6ec; --muted:#8b9ca8;
  --accent:#63d2e6; --critical:#f0735a; --warning:#f2b632; --ok:#3cc9a0;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text); overflow-x:hidden;
  font:17px/1.6 "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
img { display:block; max-width:100%; height:auto; }
.wrap { max-width:1120px; margin:0 auto; padding:0 16px; }
@media (min-width:640px) { .wrap { padding:0 24px; } }

.sky { position:relative; isolation:isolate; }
.sky::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(99,210,230,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 62%, rgba(99,210,230,.25), transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 12%, rgba(220,230,236,.3), transparent 60%),
    radial-gradient(2px 2px at 66% 78%, rgba(99,210,230,.2), transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 84%, rgba(220,230,236,.2), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 55%, rgba(99,210,230,.3), transparent 60%),
    repeating-radial-gradient(circle at 88% 0%, transparent 0 159px, rgba(99,210,230,.06) 160px 161px),
    radial-gradient(900px 640px at 88% 0%, rgba(14,56,66,.9), transparent 70%);
}

header { display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.brand { display:flex; align-items:center; gap:12px; color:var(--text); font-weight:600; font-size:1.15rem; letter-spacing:.04em; }
.brand:hover { text-decoration:none; }
.brand img { width:40px; height:40px; border-radius:10px; }
.langs { display:flex; gap:6px; }
.lang { font-size:.95rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 14px; }
.lang:hover { color:var(--text); border-color:var(--accent); text-decoration:none; }

.hero { display:grid; gap:48px; align-items:center; padding:40px 0 72px; }
@media (min-width:880px) { .hero { grid-template-columns:1.15fr .85fr; padding:64px 0 96px; } }
.eyebrow { display:inline-block; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
h1 { font-weight:600; font-size:clamp(2.2rem, 6vw, 3.6rem); line-height:1.08; margin:0 0 20px; letter-spacing:-.01em; }
h1 em { font-style:normal; color:var(--accent); }
.lead { color:var(--muted); font-size:1.15rem; max-width:34em; margin:0 0 28px; }
.soon { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.pill { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--card); border-radius:12px; padding:10px 16px; font-size:.95rem; }
.pill small { color:var(--muted); font-size:.8rem; }
a.pill { color:inherit; transition:border-color .15s ease, background .15s ease; }
a.pill:hover, a.pill:focus-visible { text-decoration:none; border-color:var(--accent); background:#121d25; }
a.pill small { color:var(--accent); }
.facts { color:var(--muted); font-size:.95rem; margin:0; }
.facts span { white-space:nowrap; }
.facts span + span::before { content:"·"; margin:0 8px; color:var(--line); }

.phone { justify-self:center; width:min(300px, 78vw); border-radius:34px; padding:8px; background:linear-gradient(160deg, #1a2833, #0b1116);
  box-shadow:0 40px 90px rgba(0,0,0,.65), 0 0 140px rgba(99,210,230,.14); }
.phone img { border-radius:27px; width:100%; aspect-ratio:9/16; }

section { padding:72px 0; border-top:1px solid var(--line); }
h2 { font-weight:600; font-size:clamp(1.6rem, 4vw, 2.3rem); line-height:1.15; margin:0 0 12px; }
.sub { color:var(--muted); margin:0 0 40px; max-width:40em; }

.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; }
.card h3 { font-weight:600; font-size:1.1rem; margin:14px 0 6px; }
.card p { margin:0; color:var(--muted); font-size:.98rem; }
.ico { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:rgba(99,210,230,.1); color:var(--accent); }
.ico.c { background:rgba(240,115,90,.12); color:var(--critical); }
.ico.w { background:rgba(242,182,50,.12); color:var(--warning); }
.ico.o { background:rgba(60,201,160,.12); color:var(--ok); }
.ico svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.shots { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 16px 16px; margin:0 -16px; }
.shots figure { flex:0 0 min(62vw, 230px); margin:0; scroll-snap-align:center; }
@media (min-width:1000px) {
  .shots { display:grid; grid-template-columns:repeat(4, 1fr); gap:28px 20px; overflow:visible; padding:0; margin:0; }
}
.shots img { width:100%; aspect-ratio:9/16; border-radius:18px; border:1px solid var(--line); background:var(--card);
  cursor:zoom-in; transition:transform .15s ease, border-color .15s ease; }
.shots img:hover, .shots img:focus-visible { transform:translateY(-3px); border-color:var(--accent); outline:none; }
.shots figcaption { margin-top:12px; font-size:.95rem; line-height:1.35; }
.shots figcaption span { display:block; color:var(--muted); font-size:.85rem; margin-top:2px; }

.steps { counter-reset:step; }
.steps .card::before { counter-increment:step; content:"0" counter(step); display:block; font-weight:600; font-size:1.6rem; color:var(--accent); letter-spacing:.05em; }
.steps .card h3 { margin-top:8px; }
.note { margin:24px 0 0; color:var(--muted); font-size:.92rem; max-width:52em; }

.privacy { display:grid; gap:32px; align-items:start; }
@media (min-width:880px) { .privacy { grid-template-columns:.9fr 1.1fr; } }
.checks { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.checks li { display:flex; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.checks svg { flex:0 0 20px; width:20px; height:20px; margin-top:3px; fill:none; stroke:var(--ok); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

footer { border-top:1px solid var(--line); padding:32px 0 48px; color:var(--muted); font-size:.9rem; }
footer nav { display:flex; flex-wrap:wrap; gap:8px 24px; margin-bottom:16px; }
footer p { margin:6px 0; }

.consent { position:fixed; left:16px; right:16px; bottom:16px; z-index:10; max-width:720px; margin:0 auto; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:0 20px 60px rgba(0,0,0,.6); font-size:.92rem; }
.consent[hidden] { display:none; }
.consent p { margin:0 0 12px; color:var(--text); }
.consent-actions { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.consent button { font:inherit; font-weight:600; border-radius:10px; padding:9px 18px; cursor:pointer; border:1px solid var(--accent);
  background:var(--accent); color:#062a31; }
.consent button.secondary { background:transparent; color:var(--text); border-color:var(--line); }

/* Screenshot viewer */
body.lb-open { overflow:hidden; }
.lightbox { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; gap:12px;
  padding:24px 12px; background:rgba(5,8,11,.92); backdrop-filter:blur(4px); }
.lightbox[hidden] { display:none; }
.lightbox figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; max-height:100%; }
.lightbox img { max-height:82vh; max-width:min(92vw, 420px); width:auto; border-radius:22px; border:1px solid var(--line); }
.lightbox figcaption { color:var(--muted); font-size:.95rem; text-align:center; max-width:36em; }
.lightbox button { background:rgba(14,21,27,.9); color:var(--text); border:1px solid var(--line); border-radius:999px;
  cursor:pointer; font-family:inherit; line-height:1; }
.lightbox button:hover { border-color:var(--accent); color:var(--accent); }
.lb-close { position:absolute; top:16px; right:16px; width:44px; height:44px; font-size:1.6rem; }
.lb-nav { width:48px; height:48px; font-size:2rem; flex:0 0 auto; }
@media (max-width:700px) {
  .lb-nav { position:absolute; bottom:24px; }
  .lb-prev { left:24px; }
  .lb-next { right:24px; }
  .lightbox img { max-height:70vh; }
}

/* ISK donations */
.support { display:grid; gap:32px; align-items:start; }
@media (min-width:880px) { .support { grid-template-columns:.9fr 1.1fr; } }
.support .sub { margin-bottom:0; }
.donate { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; }
.donate-who { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.donate-who img { width:64px; height:64px; border-radius:12px; border:1px solid var(--line); }
.donate-who div { flex:1 1 200px; min-width:0; }
.donate-who strong { display:block; font-weight:600; font-size:1.2rem; }
.donate-who span { color:var(--muted); font-size:.88rem; }
.donate p { margin:16px 0 0; color:var(--muted); font-size:.92rem; }
.copy-name { font:inherit; font-size:.9rem; font-weight:600; border-radius:10px; padding:8px 14px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--text); }
.copy-name:hover, .copy-name:focus-visible { border-color:var(--accent); }
.copy-name[hidden] { display:none; }