/* ============================================================================
   Defend24 v3 · САЙТ ПЛАТФОРМИ · standalone (один файл, без CDN, без збирачів).
   Мова v3: скло, аврора, маршрут-радар, дедлайн-чипи, вертикальні скіни.
   Mobile-first. Довіра — ЄРАУ + механіка, без маркетингових лічильників
   (рішення власника продукту, див. DESIGN-RATIONALE §8.4).
   ========================================================================== */
:root, [data-theme="dark"]{
  --d24-primary:#C8505E; --d24-primary-press:#B23F4D; --d24-on-primary:#FFF3F1;
  --d24-accent:#D8B872; --d24-sos:#E2483C; --d24-navy:#15233F;
  --d24-bg:#0E0810; --d24-surface:#22171C;
  --d24-glass-1:rgba(38,26,32,.55); --d24-glass-2:rgba(34,23,28,.42);
  --d24-glass-brass:rgba(196,154,74,.16);
  --d24-border:rgba(255,255,255,.10); --d24-border-strong:rgba(255,255,255,.14);
  --d24-spec:inset 0 1px 0 rgba(255,255,255,.16);
  --d24-spec-strong:inset 0 1px 0 rgba(255,255,255,.20);
  --d24-ring:0 0 0 3px rgba(216,184,114,.32);
  --d24-text:#F6EFE9; --d24-text-2:#CBBAB0; --d24-muted:#A08E84; --d24-faint:#8B7A72;
  --d24-elev-1:0 4px 18px rgba(0,0,0,.30); --d24-elev-2:0 10px 36px rgba(0,0,0,.42);
  --d24-elev-3:0 24px 70px rgba(0,0,0,.55);
  --d24-glow-brass:0 0 24px rgba(216,184,114,.30);
  --d24-row-hover:rgba(255,255,255,.06);
  --d24-aurora:radial-gradient(120% 70% at 8% 0%, rgba(140,47,58,.42), transparent 56%),
               radial-gradient(120% 90% at 96% 30%, rgba(21,35,63,.72), transparent 55%),
               radial-gradient(80% 70% at 60% 108%, rgba(196,154,74,.14), transparent 60%);
  --d24-dl-calm-ink:#57B584; --d24-dl-calm-bg:rgba(87,181,132,.12); --d24-dl-calm-border:rgba(87,181,132,.34);
  --d24-dl-warning-ink:#E0A93A; --d24-dl-warning-bg:rgba(224,169,58,.13);
  --d24-dl-warning-border:rgba(224,169,58,.38); --d24-dl-warning-glow:0 0 18px rgba(224,169,58,.25);
  --d24-dl-critical-ink:#EA6A5F; --d24-dl-critical-core:#E2483C;
  --d24-dl-critical-bg:rgba(226,72,60,.15); --d24-dl-critical-border:rgba(226,72,60,.45);
  --d24-dl-critical-glow:0 0 26px rgba(226,72,60,.40);
  --d24-node-done:#D8B872; --d24-node-active:#EA6A5F;
  --d24-node-rail:rgba(255,255,255,.14); --d24-node-rail-done:#C49A4A;
  --d24-node-ghost:rgba(255,255,255,.22);
  --d24-drill:#3FB6C9;
}
[data-theme="light"]{
  --d24-primary:#8C2F3A; --d24-primary-press:#74232D; --d24-on-primary:#FFF7F2;
  --d24-accent:#A8772A; --d24-sos:#D5392B;
  --d24-bg:#F4EEE6; --d24-surface:#FFFFFF;
  --d24-glass-1:rgba(255,255,255,.62); --d24-glass-2:rgba(255,255,255,.55);
  --d24-glass-brass:rgba(168,119,42,.12);
  --d24-border:rgba(28,21,18,.10); --d24-border-strong:rgba(28,21,18,.16);
  --d24-spec:inset 0 1px 0 rgba(255,255,255,.80);
  --d24-spec-strong:inset 0 1px 0 rgba(255,255,255,.90);
  --d24-ring:0 0 0 3px rgba(168,119,42,.28);
  --d24-text:#1C1512; --d24-text-2:#5C5044; --d24-muted:#8B7E6E; --d24-faint:#A2937F;
  --d24-elev-1:0 4px 14px rgba(80,40,30,.08); --d24-elev-2:0 10px 30px rgba(80,40,30,.10);
  --d24-elev-3:0 24px 60px rgba(80,40,30,.16);
  --d24-glow-brass:0 0 20px rgba(168,119,42,.18);
  --d24-row-hover:rgba(140,47,58,.05);
  --d24-aurora:radial-gradient(120% 70% at 8% 0%, rgba(140,47,58,.10), transparent 56%),
               radial-gradient(120% 90% at 96% 30%, rgba(21,35,63,.10), transparent 55%),
               radial-gradient(80% 70% at 60% 108%, rgba(196,154,74,.12), transparent 60%);
  --d24-dl-calm-ink:#1F7A46; --d24-dl-calm-bg:rgba(31,122,70,.10); --d24-dl-calm-border:rgba(31,122,70,.30);
  --d24-dl-warning-ink:#9A650F; --d24-dl-warning-bg:rgba(154,101,15,.10);
  --d24-dl-warning-border:rgba(154,101,15,.32); --d24-dl-warning-glow:0 0 14px rgba(180,120,26,.18);
  --d24-dl-critical-ink:#BE3225; --d24-dl-critical-core:#D5392B;
  --d24-dl-critical-bg:rgba(213,57,43,.10); --d24-dl-critical-border:rgba(213,57,43,.36);
  --d24-dl-critical-glow:0 0 18px rgba(213,57,43,.22);
  --d24-node-done:#A8772A; --d24-node-active:#BE3225;
  --d24-node-rail:rgba(28,21,18,.14); --d24-node-rail-done:#A8772A;
  --d24-node-ghost:rgba(28,21,18,.22);
  --d24-drill:#1E8FA1;
}
:root, [data-vertical="criminal"]{ --d24-v-accent:#C8505E; --d24-v-glass:rgba(200,80,94,.14); --d24-v-border:rgba(200,80,94,.35); }
[data-vertical="family"]{ --d24-v-accent:#4E93A3; --d24-v-glass:rgba(78,147,163,.14); --d24-v-border:rgba(78,147,163,.36); }
[data-vertical="military"]{ --d24-v-accent:#ADA271; --d24-v-glass:rgba(173,162,113,.13); --d24-v-border:rgba(173,162,113,.34); }
[data-vertical="business"]{ --d24-v-accent:#D8B872; --d24-v-glass:rgba(216,184,114,.14); --d24-v-border:rgba(216,184,114,.38); }
[data-theme="light"] [data-vertical="criminal"]{ --d24-v-accent:#8C2F3A; --d24-v-glass:rgba(140,47,58,.10); --d24-v-border:rgba(140,47,58,.30); }
[data-theme="light"] [data-vertical="family"]{ --d24-v-accent:#2E6672; --d24-v-glass:rgba(46,102,114,.10); --d24-v-border:rgba(46,102,114,.30); }
[data-theme="light"] [data-vertical="military"]{ --d24-v-accent:#756B3D; --d24-v-glass:rgba(117,107,61,.10); --d24-v-border:rgba(117,107,61,.30); }
[data-theme="light"] [data-vertical="business"]{ --d24-v-accent:#A8772A; --d24-v-glass:rgba(168,119,42,.10); --d24-v-border:rgba(168,119,42,.32); }
:root{
  --d24-font-display:'Sofia Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --d24-font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --d24-font-mono:'IBM Plex Mono',ui-monospace,'SF Mono','Cascadia Mono',Consolas,'Roboto Mono',monospace;
  --d24-type-d2:800 26px/32px var(--d24-font-display); --d24-track-d2:-.01em;
  --d24-type-title:700 21px/27px var(--d24-font-display); --d24-track-title:-.006em;
  --d24-type-subtitle:700 17px/23px var(--d24-font-display);
  --d24-type-body:400 15px/22px var(--d24-font-body);
  --d24-type-body-strong:600 15px/22px var(--d24-font-body);
  --d24-type-caption:400 13px/18px var(--d24-font-body);
  --d24-type-footnote:400 12px/16px var(--d24-font-body);
  --d24-type-eyebrow:500 11px/16px var(--d24-font-mono); --d24-track-eyebrow:.18em;
  --d24-type-timer-s:600 13px/16px var(--d24-font-mono);
  --d24-r-sm:12px; --d24-r-md:16px; --d24-r-lg:20px; --d24-r-xl:28px; --d24-r-pill:999px;
  --d24-hit:44px;
  --d24-t-quick:160ms; --d24-t-sweep:6s;
  --d24-pulse-warning:2.4s; --d24-pulse-critical:1.1s;
  --d24-e-out:cubic-bezier(.2,.8,.2,1); --d24-e-inout:cubic-bezier(.45,0,.2,1);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font:var(--d24-type-body); color:var(--d24-text);
  background:var(--d24-aurora), var(--d24-bg); background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.d24-eyebrow{ font:var(--d24-type-eyebrow); letter-spacing:var(--d24-track-eyebrow);
  text-transform:uppercase; color:var(--d24-accent); }
.wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
section{ padding:64px 0; }
h2{ font:var(--d24-type-d2); letter-spacing:var(--d24-track-d2); margin:0 0 10px; }
.s-head{ max-width:640px; margin-bottom:34px; }
.s-head .d24-eyebrow{ display:block; margin-bottom:10px; }
.s-head p{ color:var(--d24-text-2); margin:0; font:var(--d24-type-body); }
.note{ font:var(--d24-type-footnote); color:var(--d24-muted); }

/* дедлайн-чип S */
.d24-dl{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--d24-r-pill);
  border:1px solid; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap;
  padding:4px 10px; font-size:12px; }
.d24-dl b{ font:var(--d24-type-timer-s); }
.d24-dl__dial{ flex:none; width:12px; height:12px; }
.d24-dl__track{ fill:none; stroke:currentColor; opacity:.18; stroke-width:2.5; }
.d24-dl__left{ fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:50.27; stroke-dashoffset:calc(50.27 * (1 - var(--dl-left,.5))); }
.d24-dl--warning{ color:var(--d24-dl-warning-ink); background:var(--d24-dl-warning-bg);
  border-color:var(--d24-dl-warning-border); box-shadow:var(--d24-dl-warning-glow);
  animation:dlb var(--d24-pulse-warning) var(--d24-e-inout) infinite; }
@keyframes dlb{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.12);} }

/* вузли (легенда під hero) */
.d24-node{ position:relative; width:24px; height:24px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; }
.d24-node b{ width:8px; height:8px; border-radius:50%; background:var(--d24-node-rail); }
.d24-node__ring,.d24-node__ring2{ position:absolute; inset:0; border-radius:50%; border:1.5px solid transparent; }
.d24-node__ring{ inset:4px; }
.d24-node--done b{ background:var(--d24-node-done); }
.d24-node--done .d24-node__ring{ border-color:var(--d24-node-done); opacity:.55; }
.d24-node--threat b{ background:var(--d24-dl-critical-core); }
.d24-node--threat .d24-node__ring{ border-color:var(--d24-dl-critical-core); }
.d24-node--threat .d24-node__ring2{ border-color:var(--d24-dl-critical-core); opacity:.5;
  animation:blip 1.1s var(--d24-e-out) infinite; }
.d24-node--ghost b{ background:transparent; border:1.5px dashed var(--d24-node-ghost); }
@keyframes blip{ 0%{ transform:scale(.45); opacity:.7;} 80%,100%{ transform:scale(1.15); opacity:0;} }

/* ЄРАУ */
.d24-erau{ display:inline-flex; align-items:center; gap:5px;
  font-family:var(--d24-font-mono); font-weight:600; letter-spacing:.08em;
  color:var(--d24-accent); background:var(--d24-glass-brass);
  border:1px solid color-mix(in srgb,var(--d24-accent) 42%,transparent);
  border-radius:var(--d24-r-pill); box-shadow:var(--d24-spec); }
.d24-erau svg{ flex:none; }
.d24-erau--m{ padding:4px 10px; font-size:11px; } .d24-erau--m svg{ width:12px; height:14px; }
.d24-erau--l{ padding:7px 14px; font-size:13px; } .d24-erau--l svg{ width:16px; height:19px; }

/* header */
.site-head{ position:sticky; top:0; z-index:40; border-bottom:1px solid var(--d24-border);
  background:var(--d24-glass-1); box-shadow:var(--d24-spec); }
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-head{ -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); } }
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-head{ background:var(--d24-surface); } }
.site-head .wrap{ display:flex; align-items:center; gap:18px; height:64px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand svg{ color:var(--d24-accent); }
.brand b{ font:800 20px/1 var(--d24-font-display); color:var(--d24-text); }
.brand b i{ font-style:normal; color:var(--d24-accent); }
.site-nav{ display:none; gap:4px; margin-left:auto; }
.site-nav a{ font:600 13px/1 var(--d24-font-body); color:var(--d24-text-2); text-decoration:none;
  padding:10px 12px; border-radius:10px; }
.site-nav a:hover{ background:var(--d24-row-hover); color:var(--d24-text); }
.head-cta{ margin-left:auto; }
@media (min-width:920px){ .site-nav{ display:flex; } .head-cta{ margin-left:12px; } }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font:700 14px/1 var(--d24-font-body); border:none; border-radius:var(--d24-r-md);
  padding:14px 22px; min-height:var(--d24-hit); text-decoration:none; white-space:nowrap; }
.btn--primary{ color:var(--d24-on-primary);
  background:linear-gradient(180deg,color-mix(in srgb,var(--d24-primary) 86%,#fff),var(--d24-primary));
  box-shadow:0 8px 22px color-mix(in srgb,var(--d24-primary) 45%,transparent), var(--d24-spec-strong); }
.btn--primary:hover{ transform:translateY(-2px); }
.btn--ghost{ color:var(--d24-text); background:var(--d24-glass-1);
  border:1px solid var(--d24-border-strong); box-shadow:var(--d24-spec); }
.btn--sm{ padding:11px 16px; font-size:13px; }
.btn:focus-visible{ outline:none; box-shadow:var(--d24-ring); }

/* hero */
.hero{ padding:72px 0 60px; }
.hero .wrap{ display:grid; gap:44px; align-items:center; }
@media (min-width:960px){ .hero .wrap{ grid-template-columns:1.05fr 1fr; } }
.hero h1{ font:900 clamp(34px,5.2vw,54px)/1.06 var(--d24-font-display); letter-spacing:-.018em; margin:14px 0 16px; }
.hero h1 em{ font-style:normal; color:var(--d24-accent); }
.hero .lead{ font:400 17px/26px var(--d24-font-body); color:var(--d24-text-2); max-width:520px; margin:0 0 26px; }
.hero-badge{ display:inline-flex; align-items:center; gap:8px; font:500 11px/1 var(--d24-font-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--d24-accent);
  padding:8px 14px; border-radius:var(--d24-r-pill); background:var(--d24-glass-brass);
  border:1px solid color-mix(in srgb,var(--d24-accent) 42%,transparent); }
.hero-badge i{ width:7px; height:7px; border-radius:50%; background:var(--d24-dl-calm-ink);
  box-shadow:0 0 8px var(--d24-dl-calm-ink); }
.hero-trust{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; align-items:center;
  font:var(--d24-type-footnote); color:var(--d24-muted); }
.hero-demo{ position:relative; border-radius:var(--d24-r-xl); overflow:hidden;
  background:var(--d24-glass-2); border:1px solid var(--d24-border-strong);
  box-shadow:var(--d24-elev-3), var(--d24-spec); padding:20px 18px 14px; }
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hero-demo{ background:var(--d24-surface); } }
.hero-demo__cap{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.hero-demo__cap .d24-eyebrow{ font-size:10px; }
.hero-demo svg.route{ display:block; width:100%; height:auto; }
.route .ring{ fill:none; stroke:var(--d24-node-rail); stroke-width:1; }
.route .ring--dash{ stroke-dasharray:2 6; opacity:.7; }
.route .p-done{ fill:none; stroke:var(--d24-node-rail-done); stroke-width:2.5; stroke-linecap:round; }
.route .p-todo{ fill:none; stroke:var(--d24-node-rail); stroke-width:2; stroke-dasharray:1 7; stroke-linecap:round; }
.route .lbl{ font:600 10px/1 var(--d24-font-mono); letter-spacing:.06em; fill:var(--d24-muted); }
.route .lbl--on{ fill:var(--d24-text); }
.route .lbl--accent{ fill:var(--d24-accent); }
.route .beam{ transform-origin:196px 252px; animation:beam var(--d24-t-sweep) var(--d24-e-inout) infinite; }
@keyframes beam{ 0%,100%{ transform:rotate(-7deg); opacity:.5; } 50%{ transform:rotate(7deg); opacity:1; } }
.hero-demo__foot{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }

/* як працює */
.steps{ display:grid; gap:14px; }
@media (min-width:880px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ padding:20px; border-radius:var(--d24-r-lg); background:var(--d24-glass-2);
  border:1px solid var(--d24-border); box-shadow:var(--d24-spec); }
.step__n{ font:500 11px/1 var(--d24-font-mono); letter-spacing:.18em; color:var(--d24-accent); }
.step b{ display:block; font:var(--d24-type-subtitle); margin:10px 0 6px; }
.step p{ margin:0; font:var(--d24-type-caption); color:var(--d24-text-2); }

/* каталог */
.verticals{ display:grid; gap:16px; }
@media (min-width:880px){ .verticals{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1120px){ .verticals{ grid-template-columns:repeat(4,1fr); } }
.vert{ border-radius:var(--d24-r-lg); padding:20px; display:flex; flex-direction:column; gap:12px;
  background:var(--d24-glass-2); border:1px solid var(--d24-border);
  border-top:3px solid var(--d24-v-accent); box-shadow:var(--d24-spec); }
.vert__head{ display:flex; align-items:center; gap:10px; }
.vert__ic{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:var(--d24-v-accent); background:var(--d24-v-glass); border:1px solid var(--d24-v-border); }
.vert h3{ margin:0; font:var(--d24-type-title); letter-spacing:var(--d24-track-title); }
.vert__tone{ font:var(--d24-type-footnote); color:var(--d24-muted); margin:-6px 0 2px; }
.vert ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.vert li{ display:flex; justify-content:space-between; gap:10px; font:var(--d24-type-caption);
  color:var(--d24-text-2); padding:9px 0; border-bottom:1px solid color-mix(in srgb,var(--d24-border) 60%,transparent); }
.vert li b{ font:600 12px/16px var(--d24-font-mono); color:var(--d24-v-accent); white-space:nowrap; }
.vert .btn{ margin-top:auto; }
/* drill */
.drill-sec{ border-radius:var(--d24-r-xl); border:1px solid rgba(63,182,201,.35);
  background:linear-gradient(140deg, rgba(63,182,201,.10), transparent 55%), var(--d24-glass-2);
  box-shadow:var(--d24-spec); padding:34px 26px; display:grid; gap:30px; }
@media (min-width:960px){ .drill-sec{ grid-template-columns:1.1fr 1fr; padding:44px 40px; } }
.drill-sec h2{ margin-top:10px; }
.drill-sec ul{ list-style:none; margin:18px 0 24px; padding:0; display:grid; gap:12px; }
.drill-sec li{ display:flex; gap:11px; font:var(--d24-type-body); color:var(--d24-text-2); }
.drill-sec li b{ color:var(--d24-text); font-weight:600; }
.drill-sec li svg{ flex:none; margin-top:2px; color:var(--d24-drill); }
.mini-cert{ border-radius:16px; aspect-ratio:1200/630; position:relative; overflow:hidden;
  border:1px solid color-mix(in srgb,var(--d24-accent) 45%,transparent);
  background:radial-gradient(120% 90% at 10% 0%, rgba(140,47,58,.5), transparent 55%),
             radial-gradient(120% 100% at 100% 30%, rgba(21,35,63,.8), transparent 60%), #120A10;
  box-shadow:var(--d24-elev-2), var(--d24-glow-brass); padding:6%;
  display:flex; flex-direction:column; justify-content:center; color:#F6EFE9; }
.mini-cert .eyebrow{ font:500 10px/1 var(--d24-font-mono); letter-spacing:.2em; text-transform:uppercase; color:#D8B872; }
.mini-cert .t{ font:900 clamp(20px,3vw,30px)/1.1 var(--d24-font-display); margin:8px 0 6px; }
.mini-cert .co{ font:600 13px/18px var(--d24-font-body); color:#CBBAB0; }
/* адвокати */
.lawyer-sec{ display:grid; gap:30px; }
@media (min-width:960px){ .lawyer-sec{ grid-template-columns:1fr 1fr; align-items:center; } }
.lawyer-points{ display:grid; gap:12px; }
.lp{ display:flex; gap:12px; padding:16px 18px; border-radius:var(--d24-r-lg);
  background:var(--d24-glass-2); border:1px solid var(--d24-border); box-shadow:var(--d24-spec); }
.lp svg{ flex:none; color:var(--d24-accent); margin-top:2px; }
.lp b{ display:block; font:600 14px/19px var(--d24-font-body); color:var(--d24-text); }
.lp span{ font:var(--d24-type-caption); color:var(--d24-text-2); }
.lp-stats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.lp-stats span{ font:600 11px/1 var(--d24-font-mono); color:var(--d24-accent);
  background:var(--d24-glass-brass); border:1px solid color-mix(in srgb,var(--d24-accent) 40%,transparent);
  padding:6px 10px; border-radius:var(--d24-r-pill); }
/* довіра */
.trust-grid{ display:grid; gap:14px; }
@media (min-width:880px){ .trust-grid{ grid-template-columns:repeat(3,1fr); } }
.trust{ padding:22px; border-radius:var(--d24-r-lg); background:var(--d24-glass-2);
  border:1px solid var(--d24-border); box-shadow:var(--d24-spec); }
.trust b{ display:block; font:var(--d24-type-subtitle); margin:12px 0 6px; color:var(--d24-text); }
.trust p{ margin:0; font:var(--d24-type-caption); color:var(--d24-text-2); }
.trust svg{ color:var(--d24-accent); }
/* калькулятор */
.calc{ border-radius:var(--d24-r-xl); background:var(--d24-glass-2);
  border:1px solid var(--d24-border-strong); box-shadow:var(--d24-elev-2), var(--d24-spec);
  padding:28px 22px; max-width:860px; }
@media (min-width:880px){ .calc{ padding:36px 40px; } }
.calc-q{ margin-bottom:22px; }
.calc-q p{ margin:0 0 10px; font:var(--d24-type-body-strong); color:var(--d24-text); }
.calc-q p span{ color:var(--d24-accent); font-family:var(--d24-font-mono); margin-right:8px; }
.calc-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.calc-opt{ font:500 13px/1.2 var(--d24-font-body); color:var(--d24-text-2); cursor:pointer;
  padding:11px 16px; border-radius:var(--d24-r-pill); background:var(--d24-glass-1);
  border:1px solid var(--d24-border-strong); min-height:var(--d24-hit); }
.calc-opt:hover{ background:var(--d24-row-hover); }
.calc-opt.on{ color:var(--d24-text); font-weight:700; background:var(--d24-glass-brass);
  border-color:color-mix(in srgb,var(--d24-accent) 50%,transparent); box-shadow:var(--d24-glow-brass); }
.calc-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:6px; }
.calc-warn{ font:var(--d24-type-footnote); color:var(--d24-dl-warning-ink); display:none; }
.calc-res{ display:none; grid-template-columns:1fr; gap:28px; align-items:center; }
@media (min-width:760px){ .calc-res{ grid-template-columns:220px 1fr; } }
.gauge{ position:relative; width:200px; margin:0 auto; }
.gauge svg{ display:block; width:100%; height:auto; }
.gauge__c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge__c b{ font:900 44px/1 var(--d24-font-display); color:var(--d24-text); }
.gauge__c span{ font:var(--d24-type-eyebrow); letter-spacing:var(--d24-track-eyebrow); text-transform:uppercase; color:var(--d24-muted); margin-top:4px; }
.calc-level{ font:var(--d24-type-title); margin-bottom:6px; }
.calc-plan{ display:inline-flex; align-items:center; gap:8px; font:700 13px/1 var(--d24-font-body);
  color:var(--d24-accent); background:var(--d24-glass-brass); padding:9px 14px;
  border-radius:var(--d24-r-pill); border:1px solid color-mix(in srgb,var(--d24-accent) 45%,transparent); margin-bottom:12px; }
#calcReason{ font:var(--d24-type-body); color:var(--d24-text-2); margin:0 0 16px; }
/* тарифи */
.plans{ display:grid; gap:16px; }
@media (min-width:880px){ .plans{ grid-template-columns:repeat(3,1fr); } }
.plan{ border-radius:var(--d24-r-lg); padding:24px; display:flex; flex-direction:column; gap:6px;
  background:var(--d24-glass-2); border:1px solid var(--d24-border); box-shadow:var(--d24-spec); }
.plan--hot{ border-color:color-mix(in srgb,var(--d24-accent) 50%,transparent); box-shadow:var(--d24-glow-brass), var(--d24-spec); }
.plan__name{ font:var(--d24-type-title); }
.plan__price{ font:900 34px/1.1 var(--d24-font-display); color:var(--d24-text); margin:4px 0; }
.plan__price small{ font:500 12px/1 var(--d24-font-mono); color:var(--d24-muted); }
.plan ul{ list-style:none; margin:10px 0 18px; padding:0; display:grid; gap:9px; }
.plan li{ display:flex; gap:9px; font:var(--d24-type-caption); color:var(--d24-text-2); }
.plan li svg{ flex:none; color:var(--d24-dl-calm-ink); margin-top:2px; }
.plan .btn{ margin-top:auto; }
.plan__tag{ align-self:flex-start; font:600 10px/1 var(--d24-font-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--d24-accent); background:var(--d24-glass-brass);
  padding:5px 10px; border-radius:var(--d24-r-pill); margin-bottom:8px; }
.packs{ margin-top:18px; display:grid; gap:12px; }
@media (min-width:880px){ .packs{ grid-template-columns:repeat(2,1fr); } }
.packrow{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--d24-r-lg);
  background:var(--d24-glass-brass); border:1px solid color-mix(in srgb,var(--d24-accent) 40%,transparent); }
.packrow b{ font:600 14px/19px var(--d24-font-body); color:var(--d24-text); display:block; }
.packrow span{ font:var(--d24-type-footnote); color:var(--d24-text-2); }
.packrow .price{ margin-left:auto; font:600 13px/1 var(--d24-font-mono); color:var(--d24-accent); white-space:nowrap; }
/* застосунок */
.app-sec{ border-radius:var(--d24-r-xl); background:var(--d24-glass-2);
  border:1px solid var(--d24-border-strong); box-shadow:var(--d24-elev-2), var(--d24-spec);
  padding:34px 26px; display:grid; gap:26px; align-items:center; }
@media (min-width:880px){ .app-sec{ grid-template-columns:1fr auto; padding:40px 44px; } }
.store-badges{ display:flex; flex-wrap:wrap; gap:12px; }
.store-badge{ display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  padding:12px 18px; min-height:52px; border-radius:14px; color:var(--d24-text);
  background:var(--d24-glass-1); border:1px solid var(--d24-border-strong); box-shadow:var(--d24-spec); }
.store-badge:hover{ background:var(--d24-row-hover); }
.store-badge svg{ flex:none; color:var(--d24-accent); }
.store-badge small{ display:block; font:400 9px/12px var(--d24-font-mono); color:var(--d24-faint); letter-spacing:.08em; text-transform:uppercase; }
.store-badge b{ font:700 14px/18px var(--d24-font-body); }
/* faq */
.faq{ max-width:760px; display:grid; gap:10px; }
.faq-i{ border-radius:var(--d24-r-md); background:var(--d24-glass-2); border:1px solid var(--d24-border); overflow:hidden; }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:14px;
  text-align:left; cursor:pointer; background:none; border:none; padding:16px 18px;
  font:600 14px/20px var(--d24-font-body); color:var(--d24-text); }
.faq-q i{ font-style:normal; color:var(--d24-accent); transition:transform var(--d24-t-quick) var(--d24-e-out); }
.faq-a{ display:none; padding:0 18px 16px; font:var(--d24-type-caption); color:var(--d24-text-2); }
.faq-i.open .faq-a{ display:block; }
.faq-i.open .faq-q i{ transform:rotate(45deg); }
/* footer */
footer{ border-top:1px solid var(--d24-border); padding:36px 0 48px; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center; }
footer p{ margin:0; font:var(--d24-type-footnote); color:var(--d24-muted); }
footer a{ color:var(--d24-text-2); text-decoration:none; font:var(--d24-type-footnote); }
footer a:hover{ color:var(--d24-accent); }
.tool-btn{ font:600 12px/1 var(--d24-font-body); color:var(--d24-text); cursor:pointer;
  padding:9px 13px; border-radius:var(--d24-r-sm); background:var(--d24-glass-1);
  border:1px solid var(--d24-border-strong); }
@media (prefers-reduced-motion:reduce){
  .d24-dl--warning{ animation:none; }
  .d24-node--threat .d24-node__ring2{ animation:none; opacity:.35; }
  .route .beam{ animation:none; opacity:.6; }
  html{ scroll-behavior:auto; }
}

/* ============================================================================
   Прод-дополнения сайта (поверх спеки, только на токенах v3)
   ========================================================================== */
/* skip-link (a11y) */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; padding:12px 18px;
  background:var(--d24-surface); color:var(--d24-text); border-radius:0 0 var(--d24-r-sm) 0;
  font:600 13px/1 var(--d24-font-body); }
.skip-link:focus{ left:0; }

/* статьи (obshuk / privacy / baza-znan) */
.page-hero{ padding:48px 0 8px; }
.breadcrumb{ font:var(--d24-type-footnote); color:var(--d24-muted); margin-bottom:8px; }
.breadcrumb a{ color:var(--d24-text-2); text-decoration:none; }
.breadcrumb a:hover{ color:var(--d24-accent); }
.article{ max-width:760px; }
.article h1{ font:900 clamp(28px,4.2vw,42px)/1.12 var(--d24-font-display); letter-spacing:-.014em; margin:10px 0 14px; }
.article h2{ font:var(--d24-type-title); letter-spacing:var(--d24-track-title); margin:30px 0 10px; }
.article p{ font:var(--d24-type-body); color:var(--d24-text-2); margin:0 0 12px; }
.article .muted{ color:var(--d24-muted); }
.article ul.bullets{ margin:0 0 14px; padding-left:20px; display:grid; gap:8px; }
.article ul.bullets li{ font:var(--d24-type-body); color:var(--d24-text-2); }
.callout{ border-radius:var(--d24-r-md); padding:16px 18px; margin:18px 0;
  background:var(--d24-glass-brass); border:1px solid color-mix(in srgb,var(--d24-accent) 40%,transparent);
  box-shadow:var(--d24-spec); font:var(--d24-type-body); color:var(--d24-text); }
.callout a{ color:var(--d24-accent); }

/* сетка базы знань */
.kb-grid{ display:grid; gap:16px; }
@media (min-width:880px){ .kb-grid{ grid-template-columns:repeat(3,1fr); } }
.kb-card{ display:flex; flex-direction:column; gap:10px; padding:22px; text-decoration:none;
  border-radius:var(--d24-r-lg); background:var(--d24-glass-2); color:var(--d24-text);
  border:1px solid var(--d24-border); box-shadow:var(--d24-spec); }
a.kb-card:hover{ border-color:color-mix(in srgb,var(--d24-accent) 45%,transparent); box-shadow:var(--d24-glow-brass), var(--d24-spec); }
.kb-card--soon{ opacity:.68; }
.kb-card .tag{ align-self:flex-start; font:600 10px/1 var(--d24-font-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--d24-accent); background:var(--d24-glass-brass);
  padding:5px 10px; border-radius:var(--d24-r-pill); }
.kb-card h3{ margin:0; font:var(--d24-type-title); letter-spacing:var(--d24-track-title); }
.kb-card p{ margin:0; font:var(--d24-type-caption); color:var(--d24-text-2); }
.kb-card .read{ margin-top:auto; font:600 13px/1 var(--d24-font-body); color:var(--d24-accent); }

/* соцмережі (вимкнено, доки D24_SOCIAL.enabled=false) */
.socials{ display:flex; gap:8px; align-items:center; }
.socials a{ display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px; color:var(--d24-text-2);
  background:var(--d24-glass-1); border:1px solid var(--d24-border); box-shadow:var(--d24-spec); }
.socials a:hover{ color:var(--d24-accent); border-color:color-mix(in srgb,var(--d24-accent) 45%,transparent); }
.socials[hidden]{ display:none; }

/* 404 */
.err-wrap{ min-height:72vh; display:flex; align-items:center; }
.err-code{ font:900 clamp(72px,16vw,140px)/1 var(--d24-font-display); color:var(--d24-accent);
  letter-spacing:-.03em; }

/* ── прод-дополнение WEBSITE-PROD-READY: лід-форма «Немає Telegram» + живі ціни ──
   Токени — лише існуючі v3 (жодних нових значень дизайну). */
.notg-form{ display:grid; gap:10px; margin-top:6px; text-align:left; }
.notg-form label{ display:grid; gap:4px; font:var(--d24-type-footnote); color:var(--d24-text-2); }
.notg-form input{ font:var(--d24-type-body); color:var(--d24-text);
  background:var(--d24-glass-1); border:1px solid var(--d24-border-strong);
  border-radius:var(--d24-r-md); padding:10px 12px; width:100%; }
.notg-form input:focus-visible{ outline:none; box-shadow:var(--d24-ring); }
.notg-form .btn{ justify-self:start; }
/* honeypot: візуально прибраний, для скрін-рідерів aria-hidden у розмітці */
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
/* нота цін (рендерить js/pricing.js): порожня — не займає місця */
[data-price-note]:empty{ display:none; }