/* Magick Proxy — Public Design System (Material 3)
 * Дизайн перенесён с макета NetRoute: Google Sans, синий акцент, органичный
 * анимированный фон (blob), пружинные анимации, светлая/тёмная тема с переключателем.
 * Используется только на публичных страницах (home, subscription, pay_result).
 * Контент (тексты, кнопки, блоки) — проекта Magick Proxy, перенесён только дизайн.
 */

/* ============================================================= FONTS */
@font-face {
  font-family: "Google Sans Code";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/static/fonts/GoogleSansCode-1.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/GoogleSansFlex-3.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/GoogleSansFlex-1.woff2) format("woff2");
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-209F,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* ============================================================= TOKENS */
:root {
  color-scheme: light dark;

  /* Material 3 — светлая палитра (по умолчанию) */
  --md-primary: #0b57d0;
  --md-on-primary: #ffffff;
  --md-primary-container: #d3e3fd;
  --md-on-primary-container: #041e49;
  --md-secondary-container: #c2e7ff;
  --md-on-secondary-container: #001d35;
  --md-background: #f8fafd;
  --md-surface: #ffffff;
  --md-surface-container-low: #f8f9fa;
  --md-surface-container: #f0f4f9;
  --md-surface-container-high: #e9eef6;
  --md-surface-container-highest: #dde3ea;
  --md-on-surface: #1f1f1f;
  --md-on-surface-variant: #444746;
  --md-outline: #747775;
  --md-outline-variant: #c4c7c5;
  --md-success: #146c2e;
  --md-success-container: #c4eed0;
  --md-on-success-container: #072711;
  --md-error: #b3261e;
  --md-warning: #8f4a00;
  --md-orange: #e8710a;
  --md-orange-container: #ffdcc2;
  --md-on-orange-container: #6e3900;
  --md-shape-blob-1: #d3e3fd;
  --md-shape-blob-2: #c4eed0;
  --md-shape-blob-3: #c2e7ff;
  --md-state-hover: rgba(31,31,31,.08);
  --md-state-press: rgba(31,31,31,.12);
  --md-elev-1: 0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);

  --md-shape-xs: 6px;
  --md-shape-sm: 12px;
  --md-shape-md: 16px;
  --md-shape-lg: 24px;
  --md-shape-xl: 32px;
  --md-shape-full: 999px;

  --shape-cookie9: polygon(100.00% 50.00%,99.34% 53.23%,97.57% 56.26%,95.21% 58.99%,92.90% 61.50%,91.21% 63.99%,90.38% 66.73%,90.28% 69.86%,90.47% 73.36%,90.36% 76.97%,89.47% 80.29%,87.54% 82.93%,84.68% 84.68%,81.23% 85.61%,77.68% 86.08%,74.45% 86.59%,71.73% 87.64%,69.46% 89.47%,67.40% 92.02%,65.23% 94.85%,62.69% 97.37%,59.74% 98.98%,56.49% 99.33%,53.18% 98.44%,50.00% 96.73%,47.06% 94.82%,44.30% 93.33%,41.51% 92.68%,38.50% 92.90%,35.18% 93.64%,31.64% 94.33%,28.13% 94.35%,25.00% 93.30%,22.53% 91.12%,20.79% 88.07%,19.61% 84.65%,18.59% 81.41%,17.28% 78.70%,15.32% 76.61%,12.66% 74.95%,9.53% 73.36%,6.46% 71.47%,4.04% 69.04%,2.71% 66.05%,2.63% 62.69%,3.54% 59.24%,4.91% 55.94%,6.09% 52.88%,6.54% 50.00%,6.09% 47.12%,4.91% 44.06%,3.54% 40.76%,2.63% 37.31%,2.71% 33.95%,4.04% 30.96%,6.46% 28.53%,9.53% 26.64%,12.66% 25.05%,15.32% 23.39%,17.28% 21.30%,18.59% 18.59%,19.61% 15.35%,20.79% 11.93%,22.53% 8.88%,25.00% 6.70%,28.13% 5.65%,31.64% 5.67%,35.18% 6.36%,38.50% 7.10%,41.51% 7.32%,44.30% 6.67%,47.06% 5.18%,50.00% 3.27%,53.18% 1.56%,56.49% 0.67%,59.74% 1.02%,62.69% 2.63%,65.23% 5.15%,67.40% 7.98%,69.46% 10.53%,71.73% 12.36%,74.45% 13.41%,77.68% 13.92%,81.23% 14.39%,84.68% 15.32%,87.54% 17.07%,89.47% 19.71%,90.36% 23.03%,90.47% 26.64%,90.28% 30.14%,90.38% 33.27%,91.21% 36.01%,92.90% 38.50%,95.21% 41.01%,97.57% 43.74%,99.34% 46.77%);
  --shape-sunny: polygon(100.00% 50.00%,99.26% 53.23%,97.44% 56.25%,95.43% 59.04%,94.14% 61.83%,93.87% 64.89%,94.20% 68.31%,94.28% 71.84%,93.30% 75.00%,91.05% 77.43%,87.96% 79.13%,84.83% 80.54%,82.31% 82.31%,80.54% 84.83%,79.13% 87.96%,77.43% 91.05%,75.00% 93.30%,71.84% 94.28%,68.31% 94.20%,64.89% 93.87%,61.83% 94.14%,59.04% 95.43%,56.25% 97.44%,53.23% 99.26%,50.00% 100.00%,46.77% 99.26%,43.75% 97.44%,40.96% 95.43%,38.17% 94.14%,35.11% 93.87%,31.69% 94.20%,28.16% 94.28%,25.00% 93.30%,22.57% 91.05%,20.87% 87.96%,19.46% 84.83%,17.69% 82.31%,15.17% 80.54%,12.04% 79.13%,8.95% 77.43%,6.70% 75.00%,5.72% 71.84%,5.80% 68.31%,6.13% 64.89%,5.86% 61.83%,4.57% 59.04%,2.56% 56.25%,0.74% 53.23%,0.00% 50.00%,0.74% 46.77%,2.56% 43.75%,4.57% 40.96%,5.86% 38.17%,6.13% 35.11%,5.80% 31.69%,5.72% 28.16%,6.70% 25.00%,8.95% 22.57%,12.04% 20.87%,15.17% 19.46%,17.69% 17.69%,19.46% 15.17%,20.87% 12.04%,22.57% 8.95%,25.00% 6.70%,28.16% 5.72%,31.69% 5.80%,35.11% 6.13%,38.17% 5.86%,40.96% 4.57%,43.75% 2.56%,46.77% 0.74%,50.00% 0.00%,53.23% 0.74%,56.25% 2.56%,59.04% 4.57%,61.83% 5.86%,64.89% 6.13%,68.31% 5.80%,71.84% 5.72%,75.00% 6.70%,77.43% 8.95%,79.13% 12.04%,80.54% 15.17%,82.31% 17.69%,84.83% 19.46%,87.96% 20.87%,91.05% 22.57%,93.30% 25.00%,94.28% 28.16%,94.20% 31.69%,93.87% 35.11%,94.14% 38.17%,95.43% 40.96%,97.44% 43.75%,99.26% 46.77%);
  --shape-clover4: polygon(86.21% 50.00%,86.36% 52.38%,86.81% 54.85%,87.49% 57.46%,88.30% 60.26%,89.13% 63.28%,89.82% 66.49%,90.26% 69.85%,90.31% 73.28%,89.89% 76.66%,88.93% 79.88%,87.42% 82.81%,85.36% 85.36%,82.81% 87.42%,79.88% 88.93%,76.66% 89.89%,73.28% 90.31%,69.85% 90.26%,66.49% 89.82%,63.28% 89.13%,60.26% 88.30%,57.46% 87.49%,54.85% 86.81%,52.38% 86.36%,50.00% 86.21%,47.62% 86.36%,45.15% 86.81%,42.54% 87.49%,39.74% 88.30%,36.72% 89.13%,33.51% 89.82%,30.15% 90.26%,26.72% 90.31%,23.34% 89.89%,20.12% 88.93%,17.19% 87.42%,14.64% 85.36%,12.58% 82.81%,11.07% 79.88%,10.11% 76.66%,9.69% 73.28%,9.74% 69.85%,10.18% 66.49%,10.87% 63.28%,11.70% 60.26%,12.51% 57.46%,13.19% 54.85%,13.64% 52.38%,13.79% 50.00%,13.64% 47.62%,13.19% 45.15%,12.51% 42.54%,11.70% 39.74%,10.87% 36.72%,10.18% 33.51%,9.74% 30.15%,9.69% 26.72%,10.11% 23.34%,11.07% 20.12%,12.58% 17.19%,14.64% 14.64%,17.19% 12.58%,20.12% 11.07%,23.34% 10.11%,26.72% 9.69%,30.15% 9.74%,33.51% 10.18%,36.72% 10.87%,39.74% 11.70%,42.54% 12.51%,45.15% 13.19%,47.62% 13.64%,50.00% 13.79%,52.38% 13.64%,54.85% 13.19%,57.46% 12.51%,60.26% 11.70%,63.28% 10.87%,66.49% 10.18%,69.85% 9.74%,73.28% 9.69%,76.66% 10.11%,79.88% 11.07%,82.81% 12.58%,85.36% 14.64%,87.42% 17.19%,88.93% 20.12%,89.89% 23.34%,90.31% 26.72%,90.26% 30.15%,89.82% 33.51%,89.13% 36.72%,88.30% 39.74%,87.49% 42.54%,86.81% 45.15%,86.36% 47.62%);

  --md-spring: cubic-bezier(.34,1.36,.64,1);
  --md-spring-soft: cubic-bezier(.3,1.2,.5,1);
  --md-standard: cubic-bezier(.2,0,0,1);
  --md-dur-short: .2s;
  --md-dur-medium: .38s;
  --md-dur-long: .6s;

  --md-font: "Google Sans Flex","Google Sans","Segoe UI",Roboto,system-ui,sans-serif;
  --md-mono: "Google Sans Code","Roboto Mono",Consolas,"SF Mono",monospace;

  --max-w: 1200px;
  --section-py: 112px;
  --gutter: 32px;

  /* ---- Алиасы под имена токенов существующих шаблонов (обратная совместимость) ---- */
  --bg-base: var(--md-background);
  --bg-elevated: var(--md-surface-container-high);
  --bg-card: var(--md-surface);
  --bg-hover: var(--md-surface-container);
  --border-color: var(--md-outline-variant);
  --border-strong: var(--md-outline);

  --text: var(--md-on-surface);
  --text-primary: var(--md-on-surface);
  --text-secondary: var(--md-on-surface-variant);
  --text-muted: var(--md-outline);

  --accent: var(--md-primary);
  --accent-hover: color-mix(in srgb, var(--md-primary) 86%, #000);
  --accent-dark: var(--md-primary);
  --accent-glow: color-mix(in srgb, var(--md-primary) 40%, transparent);
  --accent-soft: var(--md-primary-container);

  --success: var(--md-success);
  --warning: var(--md-warning);
  --error: var(--md-error);

  --r-sm: var(--md-shape-sm);
  --r-md: var(--md-shape-md);
  --r-lg: var(--md-shape-lg);
  --r-xl: var(--md-shape-xl);
  --r-full: var(--md-shape-full);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --shadow-sm: var(--md-elev-1);
  --shadow-md: var(--md-elev-2);

  --font-display: var(--md-font);
  --font-body: var(--md-font);
  --font-mono: var(--md-mono);
}

/* Material 3 — тёмная палитра (системная или [data-theme="dark"]) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-primary: #a8c7fa;
    --md-on-primary: #062e6f;
    --md-primary-container: #0842a0;
    --md-on-primary-container: #d3e3fd;
    --md-secondary-container: #004a77;
    --md-on-secondary-container: #c2e7ff;
    --md-background: #131314;
    --md-surface: #1e1f20;
    --md-surface-container-low: #1b1b1b;
    --md-surface-container: #28292a;
    --md-surface-container-high: #333537;
    --md-surface-container-highest: #3c4043;
    --md-on-surface: #e3e3e3;
    --md-on-surface-variant: #c4c7c5;
    --md-outline: #8e918f;
    --md-outline-variant: #444746;
    --md-success: #6dd58c;
    --md-success-container: #0f5223;
    --md-on-success-container: #c4eed0;
    --md-error: #f2b8b5;
    --md-warning: #fdd663;
    --md-orange: #ffb77c;
    --md-orange-container: #7a3d00;
    --md-on-orange-container: #ffdcc2;
    --md-shape-blob-1: #0842a0;
    --md-shape-blob-2: #0f5223;
    --md-shape-blob-3: #004a77;
    --md-state-hover: rgba(227,227,227,.08);
    --md-state-press: rgba(227,227,227,.12);
    --md-elev-1: 0 1px 2px rgba(0,0,0,.5),0 1px 3px 1px rgba(0,0,0,.3);
    --md-elev-2: 0 1px 2px rgba(0,0,0,.5),0 2px 6px 2px rgba(0,0,0,.3);
    --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.5);
    --accent-hover: color-mix(in srgb, var(--md-primary) 86%, #fff);
  }
}
/* Явный выбор пользователя через переключатель */
:root[data-theme="dark"] {
  --md-primary: #a8c7fa;
  --md-on-primary: #062e6f;
  --md-primary-container: #0842a0;
  --md-on-primary-container: #d3e3fd;
  --md-secondary-container: #004a77;
  --md-on-secondary-container: #c2e7ff;
  --md-background: #131314;
  --md-surface: #1e1f20;
  --md-surface-container-low: #1b1b1b;
  --md-surface-container: #28292a;
  --md-surface-container-high: #333537;
  --md-surface-container-highest: #3c4043;
  --md-on-surface: #e3e3e3;
  --md-on-surface-variant: #c4c7c5;
  --md-outline: #8e918f;
  --md-outline-variant: #444746;
  --md-success: #6dd58c;
  --md-success-container: #0f5223;
  --md-on-success-container: #c4eed0;
  --md-error: #f2b8b5;
  --md-warning: #fdd663;
  --md-orange: #ffb77c;
  --md-orange-container: #7a3d00;
  --md-on-orange-container: #ffdcc2;
  --md-shape-blob-1: #0842a0;
  --md-shape-blob-2: #0f5223;
  --md-shape-blob-3: #004a77;
  --md-state-hover: rgba(227,227,227,.08);
  --md-state-press: rgba(227,227,227,.12);
  --md-elev-1: 0 1px 2px rgba(0,0,0,.5),0 1px 3px 1px rgba(0,0,0,.3);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.5),0 2px 6px 2px rgba(0,0,0,.3);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.5);
  --accent-hover: color-mix(in srgb, var(--md-primary) 86%, #fff);
}

/* ============================================================= RESET / BASE */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--md-background);
  color: var(--md-on-surface);
  font-family: var(--md-font);
  font-size: 16px;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }

h1, h2, h3, h4 { font-family: var(--md-font); color: var(--md-on-surface); line-height: 1.15; font-weight: 700; }
p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--md-primary); text-decoration: none; transition: color var(--md-dur-short) var(--md-standard); }
a:hover { color: var(--md-primary); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 3px; border-radius: 4px; }

code {
  font-family: var(--md-mono);
  font-size: .88em;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  padding: .12em .45em;
  border-radius: var(--md-shape-xs);
}

/* ============================================================= BLOB BACKGROUND */
/* По просьбе пользователя возвращён прежний фон — анимированные точки с линиями
   (canvas #particles-bg из particles.js). MD3-blob скрыт, но разметка .grid-bg
   оставлена в base.html, чтобы откат был простым (достаточно снять display:none). */
.grid-bg { display: none; }
.grid-bg--md3 {
  position: absolute;
  inset: 0 0 auto 0;
  height: 960px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.grid-node {
  position: absolute;
  opacity: .55;
  will-change: transform;
  animation: shape-drift 18s var(--md-standard) infinite alternate;
}
.node-1 { width: 300px; height: 300px; right: -80px; top: 90px; background: var(--md-shape-blob-1); clip-path: var(--shape-sunny); animation-duration: 22s; }
.node-2 { width: 140px; height: 140px; right: 300px; top: 600px; background: var(--md-shape-blob-2); clip-path: var(--shape-cookie9); animation-delay: -4s; }
.node-3 { width: 220px; height: 92px; left: -60px; top: 660px; background: var(--md-shape-blob-3); border-radius: var(--md-shape-full); animation-delay: -9s; }
.node-4 { width: 96px; height: 96px; left: 46%; top: 110px; background: var(--md-shape-blob-2); clip-path: var(--shape-clover4); opacity: .45; animation-delay: -2s; }
.node-5 { width: 54px; height: 54px; right: 240px; top: 64px; background: var(--md-primary); border-radius: 50%; opacity: .14; animation-delay: -6s; }
.node-6 { width: 180px; height: 180px; left: 40%; top: 800px; background: var(--md-shape-blob-1); clip-path: var(--shape-cookie9); opacity: .35; animation-delay: -11s; }
.node-7 { width: 70px; height: 70px; right: 60px; top: 540px; background: var(--md-orange-container); clip-path: var(--shape-clover4); opacity: .6; animation-delay: -3s; }
.node-8 { width: 40px; height: 40px; left: 6%; top: 120px; background: var(--md-success); border-radius: 12px; opacity: .16; animation-delay: -7s; }
@keyframes shape-drift {
  0% { transform: translate(0,0) rotate(0deg) scale(1); }
  50% { transform: translate(-14px,18px) rotate(22deg) scale(1.04); }
  100% { transform: translate(10px,-12px) rotate(-14deg) scale(.97); }
}

/* glow-bg существует в разметке старых шаблонов — в MD3 фон даёт blob, поэтому гасим */
.glow-bg { display: none; }

/* ============================================================= LAYOUT */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; z-index: 1; }
.section { padding: var(--section-py) 0; position: relative; z-index: 1; overflow-x: clip; }
.section:first-of-type { padding-top: calc(var(--section-py) * .5); }

/* ============================================================= TOPBAR / NAV */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--md-background) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-variant) 60%, transparent);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  height: 68px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--md-on-surface); text-decoration: none; font-weight: 650; }
.nav-brand:hover { color: var(--md-on-surface); text-decoration: none; }
.nav-brand img { border-radius: 8px; }
.nav-brand span { font-size: 19px; font-weight: 650; letter-spacing: -.01em; }

.nav-actions { display: flex; align-items: center; gap: 2px; }
.nav-actions .btn-nav + .btn-nav { margin-left: 8px; }
.nav-cta { margin-left: 14px; }
.nav-link {
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--md-shape-full);
  color: var(--md-on-surface-variant);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--md-dur-short) var(--md-standard), color var(--md-dur-short) var(--md-standard);
}
.nav-link:hover { background: var(--md-state-hover); color: var(--md-on-surface); text-decoration: none; }

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ============================================================= BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--md-shape-full);
  font-family: var(--md-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: border-radius var(--md-dur-medium) var(--md-spring),
              box-shadow var(--md-dur-short) var(--md-standard),
              background var(--md-dur-short) var(--md-standard),
              transform var(--md-dur-medium) var(--md-spring);
}
.btn:hover { text-decoration: none; }
.btn:active { border-radius: var(--md-shape-md); transform: scale(.98); }
.btn svg { flex: none; }

.btn-primary { background: var(--md-primary); color: var(--md-on-primary); }
.btn-primary:hover { color: var(--md-on-primary); box-shadow: var(--md-elev-2); }

.btn-secondary {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}
.btn-secondary:hover { color: var(--md-on-surface); box-shadow: var(--md-elev-1); background: var(--md-surface-container-highest); }

.btn-login {
  background: color-mix(in srgb, var(--md-success) 20%, var(--md-surface-container-high));
  color: var(--md-success);
}
.btn-login:hover {
  color: var(--md-success);
  background: color-mix(in srgb, var(--md-success) 30%, var(--md-surface-container-high));
  box-shadow: var(--md-elev-1);
}

.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; gap: 8px; }
.btn-block { width: 100%; }
.btn-nav { height: 40px; padding: 0 22px; font-size: 14.5px; }

/* Magick VPN — кнопка с рамкой, свечением и анимацией (цвета из токена --md-primary) */
.btn-vpn {
  --vpn-glow-soft: color-mix(in srgb, var(--md-primary) 32%, transparent);
  --vpn-glow-bright: color-mix(in srgb, var(--md-primary) 52%, transparent);
  --vpn-sheen: color-mix(in srgb, var(--md-primary) 22%, transparent);
  background: transparent;
  border: 2px solid var(--md-primary);
  color: var(--md-primary);
  font-weight: 600;
  position: relative;
  overflow: hidden;
  animation: vpn-glow 3s ease-in-out infinite;
  box-shadow: 0 0 16px var(--vpn-glow-soft);
}

.btn-vpn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--vpn-sheen), transparent);
  animation: vpn-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

.btn-vpn:hover {
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
  color: var(--md-primary);
  border-color: var(--md-primary);
  box-shadow: 0 0 24px var(--vpn-glow-bright),
              inset 0 0 12px color-mix(in srgb, var(--md-primary) 14%, transparent);
  animation: none;
}

.btn-vpn:active {
  transform: scale(.98);
}

@keyframes vpn-glow {
  0%, 100% { box-shadow: 0 0 16px var(--vpn-glow-soft); }
  50% {
    box-shadow: 0 0 28px var(--vpn-glow-bright),
                inset 0 0 8px color-mix(in srgb, var(--md-primary) 16%, transparent);
  }
}

@keyframes vpn-shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-vpn {
    animation: none;
    box-shadow: 0 0 12px var(--vpn-glow-soft);
  }
  .btn-vpn::before { animation: none; }
}

/* Подключить сейчас — то же оформление, что у .btn-vpn, но оранжевый акцент (--md-orange) */
.btn-cta-glow {
  --cta-glow-soft: color-mix(in srgb, var(--md-orange) 34%, transparent);
  --cta-glow-bright: color-mix(in srgb, var(--md-orange) 55%, transparent);
  --cta-sheen: color-mix(in srgb, var(--md-orange) 24%, transparent);
  background: transparent;
  border: 2px solid var(--md-orange);
  color: var(--md-orange);
  font-weight: 600;
  position: relative;
  overflow: hidden;
  animation: cta-glow 3s ease-in-out infinite;
  box-shadow: 0 0 16px var(--cta-glow-soft);
}

.btn-cta-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--cta-sheen), transparent);
  animation: cta-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

.btn-cta-glow:hover {
  background: color-mix(in srgb, var(--md-orange) 12%, transparent);
  color: var(--md-orange);
  border-color: var(--md-orange);
  box-shadow: 0 0 24px var(--cta-glow-bright),
              inset 0 0 12px color-mix(in srgb, var(--md-orange) 14%, transparent);
  animation: none;
}

.btn-cta-glow:active { transform: scale(.98); }

@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 16px var(--cta-glow-soft); }
  50% {
    box-shadow: 0 0 28px var(--cta-glow-bright),
                inset 0 0 8px color-mix(in srgb, var(--md-orange) 16%, transparent);
  }
}

@keyframes cta-shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-cta-glow {
    animation: none;
    box-shadow: 0 0 12px var(--cta-glow-soft);
  }
  .btn-cta-glow::before { animation: none; }
}

/* ============================================================= BADGES */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--md-shape-full);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-dot.pulse { animation: badge-pulse 2.4s var(--md-standard) infinite; }
@keyframes badge-pulse {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
.badge-accent { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.badge-success { background: var(--md-success-container); color: var(--md-on-success-container); }
.badge-warning { background: var(--md-orange-container); color: var(--md-on-orange-container); }
.badge-error { background: color-mix(in srgb, var(--md-error) 18%, var(--md-surface)); color: var(--md-error); }
.badge-neutral { background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); }

/* ============================================================= CARDS */
.card {
  position: relative;
  background: var(--md-surface);
  border-radius: var(--md-shape-lg);
  padding: var(--space-5);
  transition: border-radius var(--md-dur-medium) var(--md-spring),
              box-shadow var(--md-dur-short) var(--md-standard),
              transform var(--md-dur-medium) var(--md-spring),
              background var(--md-dur-short);
}
.card-highlight:hover {
  border-radius: var(--md-shape-xl);
  box-shadow: var(--md-elev-2);
  transform: translateY(-3px);
}

/* ============================================================= HERO */
.hero { position: relative; z-index: 1; padding: 96px 0 40px; }
.hero .container { position: relative; }
.hero-content { max-width: 760px; margin: 0 auto; text-align: center; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-sm);
  background: var(--md-surface);
  color: var(--md-on-surface-variant);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 28px;
}
.hero-badge .badge-dot { background: var(--md-success); color: var(--md-success); }
.hero h1 {
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 720;
  line-height: .98;
  letter-spacing: -.045em;
  margin-bottom: 28px;
  font-variation-settings: "ROND" 40;
}
.hero-subtitle {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--md-on-surface-variant);
  max-width: 620px;
  margin: 0 auto 36px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ============================================================= SECTION HEADER */
.text-center { text-align: center; }
.text-muted { color: var(--md-on-surface-variant); }
.text-small { font-size: 13.5px; }
.mono { font-family: var(--md-mono); }

.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.section .text-center { max-width: 720px; margin-left: auto; margin-right: auto; }
.section h2 {
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.04;
  margin-bottom: 16px;
  font-variation-settings: "ROND" 30;
}
.section .text-center p { font-size: 18px; line-height: 1.65; color: var(--md-on-surface-variant); }

/* ============================================================= GRID */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.col { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; align-items: center; }

/* ============================================================= FEATURE CARDS */
.feature-card {
  display: block;
  padding: 28px 24px 26px;
  background: var(--md-surface);
  border-radius: var(--md-shape-lg);
  color: inherit;
}
.feature-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  margin-bottom: 20px;
  border-radius: var(--md-shape-md);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  transition: border-radius var(--md-dur-medium) var(--md-spring), transform var(--md-dur-medium) var(--md-spring);
}
.feature-icon svg { stroke: currentColor; stroke-width: 1.8; fill: none; width: 26px; height: 26px; }
.grid > .feature-card:nth-child(4n+2) .feature-icon { background: var(--md-success-container); color: var(--md-on-success-container); }
.grid > .feature-card:nth-child(4n+3) .feature-icon { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.grid > .feature-card:nth-child(4n) .feature-icon { background: var(--md-surface-container-highest); color: var(--md-on-surface); }
.feature-card:hover .feature-icon { border-radius: 50%; transform: rotate(-8deg) scale(1.05); }
.feature-title { font-size: 19px; font-weight: 650; letter-spacing: -.01em; margin-bottom: 8px; color: var(--md-on-surface); }
.feature-desc { font-size: 15px; line-height: 1.6; color: var(--md-on-surface-variant); }

/* ============================================================= STEP CARDS */
.step-card {
  position: relative;
  padding: var(--space-6);
  background: var(--md-surface);
  border-radius: var(--md-shape-xl);
  text-align: center;
}
.step-num {
  width: 72px; height: 72px;
  margin: 0 auto var(--space-4);
  display: grid; place-items: center;
  font-size: 26px; font-weight: 750; letter-spacing: -.03em;
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  clip-path: var(--shape-cookie9);
  font-variation-settings: "ROND" 100;
  transition: transform var(--md-dur-long) var(--md-spring);
}
.step-card:hover .step-num { transform: rotate(40deg); }
.grid > .step-card:nth-child(2) .step-num { background: var(--md-success-container); color: var(--md-on-success-container); }
.grid > .step-card:nth-child(3) .step-num { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.step-title { font-size: 20px; font-weight: 650; letter-spacing: -.015em; margin-bottom: var(--space-3); color: var(--md-on-surface); }

/* ============================================================= SERVER STATUS (home) */
.server-status-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.server-status-card {
  flex: 0 1 300px;
}
.server-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  background: var(--md-surface);
  border-radius: var(--md-shape-lg);
  transition: border-radius var(--md-dur-medium) var(--md-spring), box-shadow var(--md-dur-short), transform var(--md-dur-medium) var(--md-spring);
}
.server-status-card:hover { border-radius: var(--md-shape-xl); box-shadow: var(--md-elev-2); transform: translateY(-2px); }
.server-info { display: flex; align-items: center; gap: var(--space-3); }
.server-flag { font-size: 28px; line-height: 1; }
.server-details { display: flex; flex-direction: column; gap: 4px; }
.server-country { font-size: 15px; font-weight: 500; color: var(--md-on-surface); line-height: 1.4; }
.server-ping { font-size: 13px; font-family: var(--md-mono); color: var(--md-on-surface-variant); }
.server-status-badge {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 14px;
  border-radius: var(--md-shape-full);
  background: var(--md-success-container);
  color: var(--md-on-success-container);
  font-size: 13px; font-weight: 600;
}
.status-dot-small {
  position: relative; width: 7px; height: 7px;
  background: var(--md-success); border-radius: 50%;
  animation: statusPulse 2.4s var(--md-standard) infinite;
}
.status-dot-small::before {
  content: ''; position: absolute; inset: 0;
  background: var(--md-success); border-radius: 50%;
  animation: statusPing 2.4s var(--md-standard) infinite; opacity: .6;
}
@keyframes statusPing { 70%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

.skeleton { position: relative; overflow: hidden; background: var(--md-surface); }
.skeleton::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--md-state-hover), transparent);
  animation: skeleton-loading 1.5s infinite;
}
.skeleton-line { height: 20px; background: var(--md-surface-container-high); border-radius: var(--md-shape-sm); }
@keyframes skeleton-loading { to { left: 100%; } }

/* ============================================================= PRICING */
.pricing-wrap { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: var(--space-5);
}
.pricing-grid-sub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
.pricing-card {
  cursor: pointer;
  text-align: center;
  padding: var(--space-5);
  background: var(--md-surface);
  border-radius: var(--md-shape-lg);
  border: 2px solid transparent;
  transition: border-radius var(--md-dur-medium) var(--md-spring),
              box-shadow var(--md-dur-short),
              transform var(--md-dur-medium) var(--md-spring),
              border-color var(--md-dur-short);
}
.pricing-card:hover { border-radius: var(--md-shape-xl); box-shadow: var(--md-elev-2); transform: translateY(-3px); }
.pricing-card:active { transform: scale(.98); }
.pricing-card.selected { border-color: var(--md-primary); background: var(--md-primary-container); }
.pricing-card.selected .pricing-amount,
.pricing-card.selected .pricing-period,
.pricing-card.selected .pricing-currency { color: var(--md-on-primary-container); }
.pricing-card.is-best { border-color: var(--md-primary); }
/* Тестовый тариф — оранжевый акцент, выделяется среди синих карточек. */
.pricing-card.is-trial {
  position: relative;
  border-color: var(--md-orange);
  background: color-mix(in srgb, var(--md-orange) 8%, var(--md-surface));
}
.pricing-card.is-trial .pricing-amount { color: var(--md-orange); }
.pricing-card.is-trial.selected {
  border-color: var(--md-orange);
  background: var(--md-orange-container);
}
.pricing-card.is-trial.selected .pricing-amount,
.pricing-card.is-trial.selected .pricing-period,
.pricing-card.is-trial.selected .pricing-currency,
.pricing-card.is-trial.selected .pricing-note { color: var(--md-on-orange-container); }
.pricing-badge {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--md-shape-full);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--md-elev-1);
}
.pricing-badge-trial { background: var(--md-orange); color: var(--md-on-orange-container); }
.pricing-note {
  margin-top: var(--space-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--md-orange);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pricing-period { font-size: 13px; color: var(--md-on-surface-variant); margin-bottom: var(--space-2); }
.pricing-amount { font-family: var(--md-font); font-size: 32px; font-weight: 750; letter-spacing: -.03em; margin-bottom: var(--space-1); color: var(--md-on-surface); font-variation-settings: "ROND" 100; }
.pricing-currency { font-size: 13px; color: var(--md-on-surface-variant); }

.checkout-card { padding: var(--space-6); }
.form-group { margin-bottom: var(--space-4); text-align: left; }
.form-label { display: block; font-size: 14px; font-weight: 600; color: var(--md-on-surface); margin-bottom: var(--space-2); }
.form-input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  font-family: var(--md-font);
  font-size: 16px;
  color: var(--md-on-surface);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-sm);
  transition: border-color var(--md-dur-short), background var(--md-dur-short);
}
.form-input::placeholder { color: var(--md-outline); }
.form-input:focus { outline: none; border-color: var(--md-primary); background: var(--md-surface); }

/* ============================================================= CALLOUT */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-radius: var(--md-shape-md);
  font-size: 14.5px;
  line-height: 1.6;
}
.callout svg { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: currentColor; }
.callout b, .callout strong { font-weight: 650; }

/* Подсветка email в модалке подтверждения первой покупки */
.email-confirm-box {
  padding: var(--space-4) var(--space-5);
  background: var(--md-surface-container-high);
  border-radius: var(--md-shape-md);
  text-align: center;
  font-size: 16px;
  word-break: break-all;
}
.email-confirm-box .mono { color: var(--md-primary); font-weight: 600; }

/* ============================================================= FAQ */
.faq-wrap { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; background: transparent; padding: 0; }
.faq-item {
  background: var(--md-surface);
  border-radius: var(--md-shape-md);
  overflow: hidden;
  transition: border-radius var(--md-dur-medium) var(--md-spring), background var(--md-dur-short);
}
.faq-item[open] { border-radius: var(--md-shape-xl); background: var(--md-surface-container); }
.faq-question {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 20px 26px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  color: var(--md-on-surface);
  border-radius: var(--md-shape-md);
  transition: background var(--md-dur-short), border-radius var(--md-dur-medium) var(--md-spring);
}
.faq-item[open] .faq-question { border-radius: var(--md-shape-xl) var(--md-shape-xl) var(--md-shape-sm) var(--md-shape-sm); }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '';
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background:
    linear-gradient(var(--md-on-surface-variant), var(--md-on-surface-variant)) center/14px 2px no-repeat,
    linear-gradient(var(--md-on-surface-variant), var(--md-on-surface-variant)) center/2px 14px no-repeat,
    var(--md-surface-container-high);
  transition: transform var(--md-dur-medium) var(--md-spring);
}
.faq-item[open] .faq-question::after {
  transform: rotate(135deg);
  background:
    linear-gradient(var(--md-on-primary), var(--md-on-primary)) center/14px 2px no-repeat,
    linear-gradient(var(--md-on-primary), var(--md-on-primary)) center/2px 14px no-repeat,
    var(--md-primary);
}
.faq-question:hover { background: var(--md-state-hover); }
/* плавное раскрытие ответа (grid-template-rows), совместимо с JS в home.html */
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--md-dur-medium) var(--md-standard);
}
.faq-item:not([open]) .faq-answer-wrap,
.faq-item.is-closing .faq-answer-wrap { grid-template-rows: 0fr; }
.faq-answer { overflow: hidden; }
.faq-answer > * { padding: 0 26px 24px; font-size: 16px; line-height: 1.7; color: var(--md-on-surface-variant); }
/* если .faq-answer содержит текст напрямую (нет внутренней обёртки) */
.faq-item .faq-answer:not(:has(> *)) { padding: 0 26px 24px; font-size: 16px; line-height: 1.7; color: var(--md-on-surface-variant); }

/* ============================================================= CTA */
.cta-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 56px var(--space-5);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-radius: 40px;
}
.cta-card::after {
  content: '';
  position: absolute;
  right: -120px; bottom: -150px;
  width: 300px; height: 300px;
  background: var(--md-primary);
  opacity: .07;
  clip-path: var(--shape-sunny);
  pointer-events: none;
}
.cta-card > * { position: relative; z-index: 2; }
.cta-card h2 { color: var(--md-on-primary-container); }
.cta-card .text-muted { color: color-mix(in srgb, var(--md-on-primary-container) 80%, transparent); }

/* ============================================================= FOOTER */
.footer {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  background: var(--md-surface-container);
  border-radius: 40px 40px 0 0;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 18px; color: var(--md-on-surface); }
.footer-brand img { border-radius: 7px; }
.footer-text { font-size: 14.5px; color: var(--md-on-surface-variant); }
.footer-links { font-size: 15px; }
.footer-links a { color: var(--md-on-surface); }
.footer-links a:hover { color: var(--md-primary); }

/* ============================================================= SUBSCRIPTION PAGE */
.sub-hero { padding: var(--space-6); }
.sub-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.sub-hero-actions { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--md-outline-variant); }
.sub-hero-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--md-outline-variant);
}
.stat-label { font-size: 13px; font-weight: 500; color: var(--md-on-surface-variant); }
.sub-metric-value { font-family: var(--md-font); font-size: 28px; font-weight: 750; letter-spacing: -.02em; margin: 6px 0 2px; font-variation-settings: "ROND" 100; }
.sub-section-head { display: flex; align-items: center; gap: var(--space-3); }

.server-card { padding: var(--space-5); background: var(--md-surface); border-radius: var(--md-shape-lg); transition: border-radius var(--md-dur-medium) var(--md-spring), box-shadow var(--md-dur-short); }
.server-card:hover { border-radius: var(--md-shape-xl); box-shadow: var(--md-elev-1); }
.server-header { display: flex; align-items: flex-start; gap: var(--space-3); }
.server-name { font-size: 17px; font-weight: 650; color: var(--md-on-surface); }
.server-host { font-family: var(--md-mono); font-size: 14px; color: var(--md-on-surface-variant); }
.server-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

.empty-state { text-align: center; padding: var(--space-7) var(--space-5); }
.empty-state .feature-icon { margin: 0 auto var(--space-4); }
.empty-state p { color: var(--md-on-surface-variant); margin-bottom: 0; }

kbd {
  display: inline-block;
  padding: 4px 8px;
  font-family: var(--md-mono);
  font-size: 14px;
  line-height: 1;
  color: var(--md-on-surface);
  background: var(--md-surface-container-high);
  border: 1px solid var(--md-outline-variant);
  border-radius: 6px;
  box-shadow: 0 2px 0 var(--md-outline-variant);
}

/* ============================================================= MODAL */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-overlay.active { display: flex; animation: modal-fade var(--md-dur-short) var(--md-standard); }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-content {
  width: 100%;
  max-width: 420px;
  background: var(--md-surface);
  border-radius: var(--md-shape-xl);
  padding: var(--space-6);
  box-shadow: var(--md-elev-3);
  animation: modal-pop var(--md-dur-medium) var(--md-spring-soft);
}
@keyframes modal-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.modal-title { font-size: 20px; font-weight: 700; color: var(--md-on-surface); }
.modal-close {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: background var(--md-dur-short), border-radius var(--md-dur-medium) var(--md-spring);
}
.modal-close:hover { background: var(--md-state-hover); color: var(--md-on-surface); }
.modal-close:active { border-radius: 12px; }

/* ============================================================= TOASTS */
.toast-wrap {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: calc(100vw - 40px);
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 380px;
  padding: 14px 18px;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  border-radius: var(--md-shape-md);
  box-shadow: var(--md-elev-2);
  font-size: 14px;
  border-left: 4px solid var(--md-primary);
  animation: toast-in .3s var(--md-spring-soft);
}
.toast .ti { width: 20px; height: 20px; flex: none; }
.toast-ok { border-left-color: var(--md-success); }
.toast-ok .ti { color: var(--md-success); }
.toast-err { border-left-color: var(--md-error); }
.toast-err .ti { color: var(--md-error); }
.toast-info { border-left-color: var(--md-primary); }
.toast-info .ti { color: var(--md-primary); }
.toast.out { animation: toast-out .2s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }

/* ============================================================= ANIMATIONS (entrance) */
@media (prefers-reduced-motion: no-preference) {
  .animate-fade-in-up { animation: rise var(--md-dur-long) var(--md-spring-soft) both; }
  .animate-delay-1 { animation-delay: .08s; }
  .animate-delay-2 { animation-delay: .16s; }
  .animate-delay-3 { animation-delay: .24s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .feature-card, .step-card, .server-status-card, .pricing-card, .faq-item, .server-card {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 36%;
    }
  }
}

/* ============================================================= RESPONSIVE */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  :root { --section-py: 80px; --gutter: 20px; }
  .nav-link { display: none; }
  .nav-inner { height: 60px; }
}
@media (max-width: 768px) {
  html { scroll-padding-top: 72px; }
  .hero { padding-top: 48px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .btn-lg { height: 50px; padding: 0 22px; font-size: 15px; }
  .sub-hero-metrics { grid-template-columns: 1fr 1fr; }

  /* Срезаем верхний отступ секции тарифов, чтобы при переходе по якорю
     заголовок вставал сразу под навбаром без пустоты сверху. */
  #pricing { padding-top: var(--space-5); }
  #pricing .mb-6 { margin-bottom: var(--space-4); }

  /* Компактные карточки тарифов: период слева, цена справа — все тарифы
     видны при переходе по якорю независимо от высоты экрана. */
  .pricing-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
  .pricing-card.is-best { grid-column: 1 / -1; }
  .pricing-card {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-align: left;
    padding: 14px 18px;
  }
  .pricing-period { margin-bottom: 0; margin-right: auto; font-size: 17px; font-weight: 600; color: var(--md-on-surface); }
  .pricing-amount { margin-bottom: 0; font-size: 24px; }
  .pricing-currency { font-size: 13px; }
  /* Бейдж («Пробный»/«Выгодно») — компактный, по центру верхней границы
     карточки (не наезжает на цену). Карточке с бейджем — отступ сверху. */
  .pricing-badge { top: calc(-1 * var(--space-2)); left: 50%; right: auto; transform: translateX(-50%); height: 22px; padding: 0 12px; font-size: 11px; }
  .pricing-card:has(.pricing-badge) { padding-top: 18px; margin-top: var(--space-2); }
}
@media (max-width: 560px) {
  :root { --gutter: 14px; }
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .server-status-grid { grid-template-columns: 1fr; }
  .pricing-grid-sub { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .faq-question { padding: 18px 18px 18px 20px; font-size: 16px; }
  .footer-inner { padding: 44px var(--gutter) 28px; }

  /* Навбар: бренд и кнопки ужаты, чтобы крайняя кнопка (Magick VPN)
     полностью помещалась на узких экранах. */
  .nav-inner { gap: 8px; }
  .nav-brand span { font-size: 15px; }
  .nav-brand img { width: 28px; height: 28px; }
  .nav-actions { gap: 0; }
  .nav-cta { margin-left: 0; }
  .nav-actions .btn-nav + .btn-nav { margin-left: 6px; }
  .btn-nav { height: 34px; padding: 0 12px; font-size: 12.5px; }
}
@media (max-width: 380px) {
  .nav-brand span { font-size: 14px; }
  .btn-nav { padding: 0 9px; font-size: 12px; }
  .nav-actions .btn-nav + .btn-nav { margin-left: 4px; }
}

/* ============================================================= REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .status-dot-small, .status-dot-small::before, .badge-dot.pulse { animation: none !important; }
}