/*
 * Refoxy shop — shared design system (tokens, background grid+spotlight,
 * header/brand, card surfaces, legal-doc typography, footer, toast layout).
 *
 * Linked from every page under nginx/shop/, and also from the
 * Python-rendered /account page (sub.refoxy.click) - nginx serves both
 * domains from the same catch-all server blocks, so plain relative paths
 * work everywhere. Keep this file's rules generic/reusable; page-unique
 * content (hero HUD panel, pricing grid, contact form fields, etc.) stays
 * in each page's own local <style> block, layered after the <link> to
 * this file.
 *
 * Every page that includes the grid (body::before/::after) MUST give its
 * content root position:relative;z-index:1 (see .wrap / .toast-card below)
 * or the fixed-position grid paints over the content.
 *
 * Never place two inline copies of the fox <svg> (id="foxBrandGrad") on
 * the same document - the duplicate gradient id will break one of them.
 * One inline logo per page; a second logo instance should reference
 * /favicon.svg as an <img> instead.
 */

:root{
  color-scheme: dark;
  --bg:#0f0b17; --bg-2:#171126; --card:#19142a;
  --line:#4a3f66; --line-soft:#3b3354;
  --txt:#f2ecff; --muted:#b2a8ca;
  --accent:#b56cff; --accent-2:#8b3dff;
  --spot-x:50vw; --spot-y:26vh; --spot-opacity:0;
  --grid-size:42px; --grid-line:rgba(206,183,236,.24);
  --grid-shift-x:84px; --grid-shift-y:42px;
}
*{box-sizing:border-box}
/* iOS Safari's rubber-band overscroll briefly shows page area beyond the
   normal viewport, where the grid/spotlight (both position:fixed, pinned to
   the layout viewport) don't reach - without this, that gap flashes as a
   flat black band above/below the real content. overscroll-behavior stops
   the bounce outright rather than fighting WebKit's fixed-position/visual-
   viewport mismatch; background-color on both html and body is a fallback
   for engines that still show a sliver of it regardless. */
html{
  width:100%;min-height:100%;
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(108,60,177,.44), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(88,42,156,.36), transparent 60%),
    linear-gradient(175deg,#0c0913 0%,#100c1b 45%,#0a0811 100%);
  background-color:#0c0913;
  overscroll-behavior-y:none;
}
body{
  margin:0;color:var(--txt);background-color:#0c0913;overscroll-behavior-y:none;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,sans-serif;
}
* { scrollbar-width: thin; scrollbar-color: rgba(181,108,255,.45) transparent; }
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:rgba(181,108,255,.42);background-clip:content-box}

/* Background grid + mouse-follow spotlight ("наша сетка") - present on every page */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  opacity:.5;animation:grid-drift 10s linear infinite;
}
@keyframes grid-drift{
  from{background-position:0px 0px,0px 0px}
  to{background-position:var(--grid-shift-x) var(--grid-shift-y),var(--grid-shift-x) var(--grid-shift-y)}
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background: radial-gradient(420px circle at var(--spot-x) var(--spot-y),
    rgba(201,140,255,.22) 0%, rgba(188,112,255,.14) 24%, rgba(156,90,238,.08) 43%,
    rgba(123,68,194,.03) 60%, transparent 74%);
  mix-blend-mode:screen;opacity:var(--spot-opacity);transition:opacity .18s linear;
}

/* Content root - lifts page content above the fixed grid/spotlight (see file header note) */
.wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:28px 18px 60px}

/* Header bar: fox logo + wordmark + back-nav */
.head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:16px;padding:12px 14px;border-radius:18px;border:1px solid #584184;
  background:
    radial-gradient(900px 380px at 8% -40%, rgba(165,102,255,.08), transparent 58%),
    linear-gradient(150deg, rgba(46,32,70,.5), rgba(28,20,44,.58));
}
.head-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand-icon{width:28px;height:28px;display:block;flex-shrink:0}
.brand-text{color:#f7edff;font-size:18px;font-weight:900;letter-spacing:.03em;text-transform:uppercase}
.head .back, .head .back-secondary{color:var(--muted);text-decoration:none;font-size:13px}
.head .back:hover, .head .back-secondary:hover{color:var(--txt)}
.head .back-secondary{opacity:.75;font-size:12px}
.head-nav{display:flex;align-items:center;gap:14px}

.badge-live{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;
  color:#d7f3ff;border:1px solid rgba(111,214,255,.32);background:rgba(35,83,126,.18);
  border-radius:999px;padding:6px 12px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
}
.badge-live .dot{width:6px;height:6px;border-radius:50%;background:#6fd6ff;box-shadow:0 0 8px #6fd6ff;animation:pulse-dot 1.8s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}

/* Card surface base - shared by the homepage hero, legal-doc body and toast modals */
.modal, .doc, .toast-card{
  position:relative;border:1px solid var(--line);border-radius:24px;
  background:linear-gradient(180deg, rgba(23,17,37,.7), rgba(18,13,29,.86));
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.modal{padding:26px 22px;overflow:hidden;margin-bottom:16px}
.doc{padding:32px 28px}
@media (max-width:560px){.doc{padding:24px 18px}}
.toast-card{
  position:relative;z-index:1;padding:38px 30px;max-width:400px;width:calc(100% - 40px);
  text-align:center;margin:0 auto;
}

.kicker{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;
  color:#e6d9ff;background:linear-gradient(135deg, rgba(139,61,255,.28), rgba(181,108,255,.2));
  border:1px solid rgba(180,132,255,.35);border-radius:999px;padding:6px 13px;margin-bottom:16px;
  letter-spacing:.03em;text-transform:uppercase;
}
h1{font-size:30px;line-height:1.22;margin:0 0 12px;letter-spacing:-.01em;max-width:20ch}
.lead{color:var(--muted);margin:0;font-size:15.5px;max-width:50ch;line-height:1.6}

h2.section-title{
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8f7bb3;margin:0 0 14px;font-family:"JetBrains Mono",ui-monospace,monospace;
}
section{margin-top:20px}

/* Legal-doc title row */
.doc-title{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.doc-icon{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow:0 10px 26px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.doc-icon svg{width:22px;height:22px;stroke:#fff}
.doc-title h1{font-size:21px;margin:0 0 4px;letter-spacing:-.01em;max-width:none}
.doc-title .updated{color:#8f7bb3;font-size:12px;margin:0}

/* Legal-doc typography */
.doc .toc{color:#8f7bb3;font-size:12.5px;margin:0 0 26px;line-height:1.7}
.doc .toc a{color:#8f7bb3}
.doc .toc a:hover{color:var(--accent)}
.doc h2{
  display:flex;align-items:baseline;gap:10px;font-size:15px;margin:28px 0 12px;
  color:#f0e8fb;scroll-margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.06);
}
.doc h2:first-of-type{padding-top:0;border-top:none;margin-top:0}
.doc h2 .num{
  flex:0 0 auto;width:22px;height:22px;border-radius:7px;display:inline-flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:800;
  background:color-mix(in srgb, var(--accent) 18%, transparent);
  color:var(--accent);font-family:"JetBrains Mono",ui-monospace,monospace;
}
.doc h3{font-size:13.5px;margin:16px 0 8px;color:#e6d9ff}
.doc p, .doc li{color:#cfbfdc;font-size:14.5px;line-height:1.7;margin:0 0 10px}
.doc ul, .doc ol{margin:0 0 10px;padding-left:20px}
.doc a{color:var(--accent)}
.doc strong{color:#f0e8fb}
.doc table{width:100%;border-collapse:collapse;margin:10px 0 14px;font-size:13.5px}
.doc th, .doc td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08);color:#cfbfdc;vertical-align:top}
.doc th{color:#8f7bb3;font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.05em}
.fine-print{color:#8f7bb3;font-size:12.5px;margin:16px 0 0}
.fine-print a{color:var(--accent)}

/* Toast pages (success/fail/contact-sent/404): small centered brand mark above the status icon */
.toast-brand{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px;opacity:.8}
.toast-brand .brand-icon{width:22px;height:22px}
.toast-brand .brand-text{font-size:12.5px}
.toast-card .icon{
  width:54px;height:54px;border-radius:50%;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
}
.toast-card .icon svg{width:26px;height:26px}
.toast-card h1{font-size:19px;margin:0 0 10px;color:#f7edff;max-width:none}
.toast-card p{color:var(--muted);margin:0 0 20px;font-size:14.5px;line-height:1.6}
.toast-card .code{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;font-weight:800;
  letter-spacing:.1em;color:#8f7bb3;margin:0 0 10px;text-transform:uppercase;
}
a.home{
  display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:12px;
  color:#fff;font-weight:800;font-size:13.5px;text-decoration:none;
}

/* Yandex SmartCaptcha renders its own iframe inside this div - its corner
   radius isn't reachable from our CSS, so the container clips it instead
   of leaving square corners next to our rounded fields/buttons. */
.smart-captcha{border-radius:10px;overflow:hidden}

footer{
  margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
  color:#8f7bb3;font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
footer a{color:#8f7bb3;text-decoration:none}
footer a:hover{color:var(--txt)}
footer .legal-links{display:flex;gap:14px;flex-wrap:wrap}