:root {
      --green: #00e676;
      --green-dim: rgba(0, 230, 118, 0.15);
      --green-glow: rgba(0, 230, 118, 0.35);
      --red: #ff4569;
      --red-dim: rgba(255, 69, 105, 0.12);
      --bg: #060b08;
      --surface: rgba(255,255,255,0.03);
      --border: rgba(0, 230, 118, 0.18);
      --text: #e8f5e9;
      --muted: rgba(232, 245, 233, 0.45);
      --mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
      --sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
    }

    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

    html {
      scroll-behavior: smooth;
      /* clip вместо hidden — не ломает position: sticky у шапки */
      overflow-x: hidden;
      overflow-x: clip;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    body {
      font-family: var(--sans);
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      min-height: 100dvh;
      overflow-x: hidden;
      overflow-x: clip;
      position: relative;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ── NOISE TEXTURE ── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none !important;
      z-index: 0;
      opacity: 0.5;
      user-select: none;
      -webkit-user-select: none;
    }

    /* ── BACKGROUND GRID ── */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(0,230,118,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,230,118,0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none !important;
      z-index: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    /* ── RADIAL GLOW ── */
    .glow-anchor {
      position: fixed;
      top: -200px;
      right: -200px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(0,230,118,0.045) 0%, transparent 70%);
      pointer-events: none !important;
      z-index: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    .glow-anchor-2 {
      position: fixed;
      bottom: -300px;
      left: -200px;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(255,69,105,0.06) 0%, transparent 70%);
      pointer-events: none !important;
      z-index: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    /* На мобильных фоновые свечения привязываем к странице, а не к экрану.
       С position: fixed пятно «преследует» экран и при прокрутке к щиту
       светит на него сбоку — ореол выглядит неровным. */
    @media (max-width: 820px) {
      .glow-anchor, .glow-anchor-2 { position: absolute; }
    }

    /* ── LAYOUT ── */
    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 max(24px, var(--safe-left)) 0 max(24px, var(--safe-right));
      padding-bottom: var(--safe-bottom);
      position: relative;
      z-index: 10;
    }

    /* Отступ для якорных переходов под липкой шапкой */
    section[id] { scroll-margin-top: 96px; }

    /* ═══ INTERACTIVE ELEMENTS ═══ */
    a, button, summary {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
    }

    /* ── STICKY HEADER ── */
    header {
      position: sticky;
      top: calc(10px + var(--safe-top));
      margin-top: calc(16px + var(--safe-top));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      background: rgba(6, 11, 8, 0.82);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 14px;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      z-index: 500;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--sans);
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
      text-decoration: none;
      min-height: 44px;
      min-width: 0;
    }

    /* Обрезку держим на тексте, а не на .logo: overflow на контейнере
       срезал бы box-shadow знака прямоугольником */
    .logo-text {
      white-space: nowrap;
      overflow: hidden;
      min-width: 0;
    }

    .logo-mark {
      width: 34px;
      height: 34px;
      background: var(--green);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 20px var(--green-glow);
      flex-shrink: 0;
    }

    .logo-mark svg { width: 19px; height: 19px; color: #000; }

    .header-nav {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
    }

    .header-nav .anchor-link {
      font-family: var(--mono);
      font-size: 0.72rem;
      color: var(--muted);
      text-decoration: none;
      letter-spacing: 0.05em;
      padding: 12px 12px;
      border-radius: 8px;
      transition: color 0.2s, background 0.2s;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
    }

    .header-nav .anchor-link:hover,
    .header-nav .anchor-link:active {
      color: var(--green);
      background: rgba(0,230,118,0.06);
    }

    @media (max-width: 700px) {
      .header-nav .anchor-link { display: none; }
    }

    .nav-link {
      font-family: var(--mono);
      font-size: 0.75rem;
      font-weight: 700;
      color: #000;
      background: var(--green);
      text-decoration: none;
      letter-spacing: 0.05em;
      padding: 12px 18px;
      border-radius: 8px;
      transition: all 0.2s;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 14px var(--green-glow);
      flex-shrink: 0;
    }

    .nav-link:hover,
    .nav-link:active { background: #69ff9e; transform: translateY(-1px); }

    @media (max-width: 480px) {
      header { padding: 8px 10px; }
      .logo { font-size: 0.98rem; gap: 8px; }
      .logo-mark { width: 30px; height: 30px; }
      .logo-mark svg { width: 17px; height: 17px; }
      .nav-link { font-size: 0.68rem; padding: 11px 12px; }
    }

    /* Узкие экраны (iPhone SE, Galaxy Fold): ужимаем шапку,
       чтобы логотип и кнопка помещались в плашку целиком */
    @media (max-width: 380px) {
      .container {
        padding-left: max(14px, var(--safe-left));
        padding-right: max(14px, var(--safe-right));
      }
      header { padding: 8px; gap: 8px; }
      .logo { font-size: 0.85rem; gap: 6px; }
      .logo-mark { width: 26px; height: 26px; border-radius: 7px; }
      .logo-mark svg { width: 15px; height: 15px; }
      .nav-link { font-size: 0.62rem; padding: 10px; gap: 4px; }
    }

    /* Экстремально узкие (Galaxy Fold ~280px): оставляем только знак,
       иначе название подрезалось бы на середине слова */
    @media (max-width: 300px) {
      .logo-text { display: none; }
    }

    /* ── HERO ── */
    .hero {
      padding: 72px 0 60px;
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 60px;
      align-items: center;
    }

    @media (max-width: 820px) {
      .hero {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 44px 0 40px;
      }
    }

    .hero-eyebrow {
      font-family: var(--mono);
      font-size: 0.7rem;
      color: var(--green);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .hero-eyebrow::before {
      content: '';
      width: 32px;
      height: 1px;
      background: var(--green);
      display: block;
    }

    .hero h1 {
      font-family: var(--sans);
      font-size: clamp(2rem, 5vw, 3.8rem);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.03em;
      margin-bottom: 20px;
      color: var(--text);
    }

    .hero h1 .accent {
      color: var(--green);
      display: block;
    }

    .hero-desc {
      font-family: var(--sans);
      font-size: 1rem;
      color: var(--muted);
      line-height: 1.7;
      max-width: 480px;
      margin-bottom: 36px;
    }

    .hero-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      position: relative;
      z-index: 100;
    }

    .hero-check-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
      font-family: var(--mono);
      font-size: 0.75rem;
      color: var(--muted);
      text-decoration: none;
      letter-spacing: 0.05em;
      min-height: 44px;
      transition: color 0.2s;
    }

    .hero-check-link:hover,
    .hero-check-link:active { color: var(--green); }

    .hero-check-link .arr { transition: transform 0.25s; }
    .hero-check-link:hover .arr { transform: translateY(3px); }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 14px 24px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.25s ease;
      -webkit-tap-highlight-color: rgba(0,230,118,0.15);
      min-height: 48px;
      min-width: 48px;
      user-select: none;
      -webkit-user-select: none;
    }

    .btn-primary {
      background: var(--green);
      color: #000;
      box-shadow: 0 4px 24px var(--green-glow);
    }

    .btn-primary:hover,
    .btn-primary:active {
      background: #69ff9e;
      transform: translateY(-2px);
      box-shadow: 0 8px 32px var(--green-glow);
    }

    @media (hover: none) {
      .btn-primary:active {
        transform: scale(0.97);
        box-shadow: 0 2px 16px var(--green-glow);
      }
    }

    .btn-ghost {
      background: transparent;
      color: var(--text);
      border: 1px solid rgba(255,255,255,0.12);
    }

    .btn-ghost:hover,
    .btn-ghost:active {
      border-color: var(--border);
      color: var(--green);
    }

    .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

    @media (max-width: 480px) {
      .hero-btns { flex-direction: column; }
      .btn { width: 100%; justify-content: center; padding: 16px 20px; }
    }

    /* ── SHIELD VISUAL ── */
    .shield-visual {
      position: relative;
      width: 280px;
      height: 280px;
      margin: 0 auto;
      pointer-events: none;
    }

    /* Ореол вокруг щита — часть самого щита, поэтому всегда
       центрирован по нему на любом разрешении */
    .shield-visual::before {
      content: '';
      position: absolute;
      inset: -60%;
      background: radial-gradient(circle, rgba(0,230,118,0.16) 0%, transparent 65%);
      pointer-events: none;
    }

    @media (max-width: 820px) {
      .shield-visual { width: 180px; height: 180px; }
    }

    .shield-rings {
      position: absolute;
      inset: -40px;
      pointer-events: none;
    }

    .ring {
      position: absolute;
      border: 1px solid var(--border);
      border-radius: 50%;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      animation: ringPulse 4s ease-out infinite;
      will-change: transform, opacity;
    }

    .ring:nth-child(1) { width: 200%; height: 200%; animation-delay: 0s; }
    .ring:nth-child(2) { width: 160%; height: 160%; animation-delay: 1.3s; }
    .ring:nth-child(3) { width: 120%; height: 120%; animation-delay: 2.6s; }

    @keyframes ringPulse {
      0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.85); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
    }

    .shield-core {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--green-dim);
      border: 1px solid var(--border);
      border-radius: 50%;
      box-shadow: inset 0 0 60px rgba(0,230,118,0.05), 0 0 40px rgba(0,230,118,0.1);
    }

    .shield-core svg {
      width: 100px;
      height: 100px;
      color: var(--green);
      filter: drop-shadow(0 0 16px var(--green-glow));
    }

    @media (max-width: 820px) {
      .shield-core svg { width: 60px; height: 60px; }
    }

    /* ── IP CHECK SECTION ── */
    .check-section {
      padding: 60px 0;
    }

    @media (max-width: 640px) {
      .check-section { padding: 40px 0; }
    }

    .section-label {
      font-family: var(--mono);
      font-size: 0.65rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 12px;
    }

    .section-title {
      font-size: clamp(1.4rem, 3vw, 2.2rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
    }

    .section-sub {
      color: var(--muted);
      font-size: 0.9rem;
      margin-bottom: 36px;
    }

    /* ── CHECK CARD ── */
    .check-card {
      background: var(--surface);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      z-index: 15;
    }

    /* ── CHECK BUTTON BAR ── */
    .check-bar {
      padding: 20px 28px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .check-bar-label {
      font-family: var(--mono);
      font-size: 0.75rem;
      color: var(--muted);
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .check-bar-label span {
      color: var(--green);
    }

    #checkBtn {
      font-family: var(--mono);
      font-size: 0.75rem;
      padding: 12px 22px;
      background: var(--green);
      color: #000;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 700;
      letter-spacing: 0.04em;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s;
      box-shadow: 0 2px 12px var(--green-glow);
      white-space: nowrap;
      min-height: 48px;
      min-width: 48px;
      -webkit-tap-highlight-color: rgba(0,230,118,0.15);
    }

    #checkBtn:hover:not(:disabled),
    #checkBtn:active:not(:disabled) {
      background: #69ff9e;
      transform: translateY(-1px);
    }

    #checkBtn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    #checkBtn.btn-cooldown {
      opacity: 0.6;
      cursor: not-allowed;
      pointer-events: none;
      background: rgba(0,230,118,0.15);
      color: var(--green);
      border: 1px solid var(--border);
    }

    .cd-timer {
      font-family: var(--mono);
      font-size: 0.7rem;
      color: var(--muted);
      text-align: right;
      padding: 4px 0 0;
      letter-spacing: 0.05em;
      min-height: 18px;
    }

    #checkBtn svg { width: 14px; height: 14px; flex-shrink: 0; }

    /* ── TERMINAL ── */
    .terminal-body {
      padding: 24px 28px;
      font-family: var(--mono);
      font-size: 13px;
      line-height: 1.7;
      color: #8b9a8c;
      min-height: 200px;
      max-height: 420px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    @media (max-width: 640px) {
      .terminal-body {
        font-size: 10.5px;
        padding: 14px 16px;
        min-height: 180px;
        max-height: 350px;
        line-height: 1.8;
      }
      .check-bar { padding: 14px 16px; }
    }

    /* Scrollbar styling */
    .terminal-body::-webkit-scrollbar { width: 4px; }
    .terminal-body::-webkit-scrollbar-track { background: transparent; }
    .terminal-body::-webkit-scrollbar-thumb { background: rgba(0,230,118,0.2); border-radius: 2px; }

    .t-line {
      display: block;
      opacity: 0;
      animation: lineIn 0.2s ease forwards;
      will-change: opacity, transform;
    }

    @keyframes lineIn {
      from { opacity: 0; transform: translateX(-6px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .t-prompt { color: var(--green); }
    .t-cmd    { color: #c9d1d9; }
    .t-info   { color: #58a6ff; }
    .t-scan   { color: #79c0ff; }
    .t-ok     { color: var(--green); }
    .t-err    { color: var(--red); }
    .t-warn   { color: #e3b341; }
    .t-ip     { color: #fff; font-weight: 700; }
    .t-dim    { color: #5a6a5b; }
    .t-indent { padding-left: 18px; display: block; }

    @media (max-width: 480px) {
      .t-indent { padding-left: 10px; }
    }

    .t-cursor {
      display: inline-block;
      width: 7px;
      height: 13px;
      background: var(--green);
      vertical-align: text-bottom;
      animation: blink 1s step-end infinite;
      margin-left: 2px;
    }

    @keyframes blink { 50% { opacity: 0; } }

    /* ── RESULT BLOCK ── */
    .result-block {
      margin: 16px 20px 4px;
      border-radius: 8px;
      padding: 16px 18px;
      display: none;
    }

    @media (max-width: 640px) {
      .result-block { margin: 12px 14px 4px; padding: 14px; }
    }

    .result-block.neutral {
      background: var(--red-dim);
      border: 1px solid rgba(255,69,105,0.25);
    }

    .result-block.safe {
      background: var(--green-dim);
      border: 1px solid var(--border);
    }

    .result-block .rb-title {
      font-weight: 700;
      font-size: 0.85rem;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    @media (max-width: 480px) {
      .result-block .rb-title { font-size: 0.78rem; }
    }

    .result-block.neutral .rb-title { color: var(--red); }
    .result-block.safe .rb-title   { color: var(--green); }

    .result-block .rb-body {
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.6;
    }

    .result-block .rb-body strong {
      color: var(--text);
    }

    /* ── CTA AFTER RESULT ── */
    .check-footer {
      padding: 0 28px 28px;
      display: none;
      position: relative;
      z-index: 100;
    }

    @media (max-width: 640px) {
      .check-footer { padding: 0 16px 20px; }
    }

    .check-footer.visible { display: block; }

    .protect-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--mono);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 18px 28px;
      background: var(--red);
      color: #fff;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.25s;
      box-shadow: 0 4px 24px rgba(255,69,105,0.3);
      width: 100%;
      justify-content: center;
      animation: cta-pulse 2s ease-in-out infinite;
      min-height: 52px;
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(255,69,105,0.2);
    }

    @keyframes cta-pulse {
      0%, 100% { box-shadow: 0 4px 24px rgba(255,69,105,0.3); }
      50% { box-shadow: 0 4px 36px rgba(255,69,105,0.55); }
    }

    .protect-btn:hover,
    .protect-btn:active {
      background: #ff6b85;
      transform: translateY(-2px);
    }

    @media (hover: none) {
      .protect-btn:active {
        transform: scale(0.98);
      }
    }

    .protect-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

    /* ── STATUS INDICATORS ── */
    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
    }

    .dot-scanning { background: #e3b341; animation: dotBlink 0.8s ease infinite; }
    .dot-safe  { background: var(--green); box-shadow: 0 0 8px var(--green-glow); }
    .dot-neutral { background: var(--muted); }

    @keyframes dotBlink { 50% { opacity: 0.3; } }

    /* ── FEATURES ── */
    .features {
      padding: 60px 0;
      border-top: 1px solid rgba(255,255,255,0.04);
    }

    @media (max-width: 640px) {
      .features { padding: 40px 0; }
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 40px;
    }

    @media (max-width: 820px) { .features-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .features-grid { grid-template-columns: 1fr; gap: 12px; } }

    /* Карточки-ссылки: вся карточка кликабельна */
    .feat-card {
      display: block;
      background: var(--surface);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 12px;
      padding: 24px;
      transition: border-color 0.25s, transform 0.25s;
      color: inherit;
      text-decoration: none;
      position: relative;
    }

    .feat-card::after {
      content: '→';
      position: absolute;
      top: 20px;
      right: 20px;
      font-family: var(--mono);
      font-size: 0.9rem;
      color: var(--green);
      opacity: 0;
      transform: translateX(-6px);
      transition: opacity 0.25s, transform 0.25s;
    }

    @media (hover: hover) {
      .feat-card:hover {
        border-color: var(--border);
        transform: translateY(-2px);
      }
      .feat-card:hover::after {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .feat-card:active { transform: scale(0.985); }

    .feat-icon {
      width: 40px;
      height: 40px;
      background: var(--green-dim);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--green);
      margin-bottom: 14px;
    }

    .feat-icon svg { width: 20px; height: 20px; }

    .feat-card h3 {
      font-size: 0.95rem;
      font-weight: 700;
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }

    .feat-card p {
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.65;
    }

    /* ── STATS ── */
    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      padding: 0 0 60px;
    }

    @media (max-width: 640px) {
      .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; padding-bottom: 40px; }
    }

    .stat {
      background: var(--surface);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
    }

    .stat-n {
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 800;
      color: var(--green);
      line-height: 1;
      margin-bottom: 6px;
    }

    .stat-l {
      font-family: var(--mono);
      font-size: 0.65rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    /* ── FAQ ── */
    .faq {
      padding: 60px 0;
      border-top: 1px solid rgba(255,255,255,0.04);
    }

    @media (max-width: 640px) {
      .faq { padding: 40px 0; }
    }

    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 8px;
    }

    .faq-item {
      background: var(--surface);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color 0.25s;
    }

    .faq-item[open] { border-color: var(--border); }

    .faq-item summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 20px;
      font-weight: 700;
      font-size: 0.92rem;
      letter-spacing: -0.01em;
      min-height: 56px;
      user-select: none;
      -webkit-user-select: none;
      transition: color 0.2s;
    }

    .faq-item summary::-webkit-details-marker { display: none; }

    .faq-item summary:hover { color: var(--green); }

    .faq-chevron {
      flex-shrink: 0;
      width: 26px;
      height: 26px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 0.9rem;
      font-weight: 400;
      color: var(--green);
      transition: transform 0.25s, background 0.25s;
    }

    .faq-item[open] .faq-chevron {
      transform: rotate(45deg);
      background: var(--green-dim);
      border-color: var(--border);
    }

    .faq-answer {
      padding: 0 20px 18px;
      font-size: 0.85rem;
      color: var(--muted);
      line-height: 1.7;
      max-width: 720px;
    }

    .faq-answer a {
      color: var(--green);
      text-decoration: none;
      border-bottom: 1px dashed var(--border);
    }

    .faq-answer a:hover { border-bottom-style: solid; }

    /* ── FINAL CTA ── */
    .cta-final {
      padding: 20px 0 70px;
    }

    .cta-box {
      background: linear-gradient(135deg, rgba(0,230,118,0.1) 0%, rgba(0,230,118,0.03) 100%);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 48px 32px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    @media (max-width: 640px) {
      .cta-box { padding: 36px 20px; }
    }

    .cta-box h2 {
      font-size: clamp(1.5rem, 3.6vw, 2.4rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 12px;
    }

    .cta-box h2 .accent { color: var(--green); }

    .cta-box p {
      color: var(--muted);
      font-size: 0.92rem;
      margin-bottom: 28px;
    }

    .cta-box .hero-btns {
      justify-content: center;
    }

    /* ── FOOTER ── */
    footer {
      border-top: 1px solid rgba(255,255,255,0.04);
      padding: 28px 0;
      padding-bottom: calc(28px + var(--safe-bottom));
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      position: relative;
      z-index: 20;
    }

    .footer-copy {
      font-family: var(--mono);
      font-size: 0.7rem;
      color: var(--muted);
    }

    .footer-links {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }

    @media (max-width: 480px) {
      .footer-links { gap: 12px; }
    }

    .footer-links a {
      font-family: var(--mono);
      font-size: 0.7rem;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      padding: 8px 4px;
    }

    .footer-links a:hover,
    .footer-links a:active { color: var(--green); }

    /* ── ANIMATIONS ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
      html { scroll-behavior: auto; }
    }

    /* Fade in sections */
    .fade-in {
      opacity: 0;
      transform: translateY(24px);
      animation: fadeUp 0.6s ease forwards;
    }

    @keyframes fadeUp {
      to { opacity: 1; transform: translateY(0); }
    }

    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.35s; }
    .delay-4 { animation-delay: 0.5s; }

    /* ── LOADING SPINNER FOR BUTTON ── */
    .btn-loading {
      position: relative;
      pointer-events: none;
    }
    .btn-loading::after {
      content: '';
      width: 14px;
      height: 14px;
      border: 2px solid rgba(0,0,0,0.2);
      border-top-color: #000;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
      margin-left: 6px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── ERROR TOAST ── */
    .error-toast {
      position: fixed;
      bottom: calc(24px + var(--safe-bottom));
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: rgba(255,69,105,0.95);
      color: #fff;
      font-family: var(--mono);
      font-size: 0.75rem;
      padding: 12px 20px;
      border-radius: 8px;
      z-index: 9999;
      opacity: 0;
      transition: all 0.3s ease;
      pointer-events: none;
      max-width: calc(100vw - 48px);
      text-align: center;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .error-toast.visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    /* ── VISUAL REFINEMENT: original dark / green identity ── */
    :root { --muted: #9eafa4; }
    body::after { opacity: .55; }
    .glow-anchor-2 { background: radial-gradient(circle, rgba(0,230,118,.035), transparent 70%); }
    header { border-color: rgba(180,230,198,.1); box-shadow: 0 8px 32px #0003; }
    .logo-mark, .nav-link { box-shadow: 0 3px 16px rgba(0,230,118,.15); }
    .hero { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 48px; padding: 84px 0 72px; }
    .hero h1 { font-size: clamp(2.5rem,4.8vw,3.8rem); line-height: 1.12; letter-spacing: -.045em; }
    .hero-desc { font-size: 1.05rem; line-height: 1.8; margin-bottom: 24px; max-width: 470px; }
    .hero-offer { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
    .hero-price { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; }
    .hero-price > span { color: var(--muted); font-size: .9rem; font-weight: 400; letter-spacing: 0; }
    .trial-tag, .section-badge { border: 1px solid var(--border); background: rgba(0,230,118,.055); color: var(--green); padding: 8px 12px; border-radius: 99px; font-size: .75rem; white-space: nowrap; }
    .btn { border-radius: 11px; font-size: .77rem; padding: 15px 20px; letter-spacing: 0; }
    .btn-primary { box-shadow: 0 4px 20px rgba(0,230,118,.16); }
    .btn-ghost { background: rgba(255,255,255,.025); }
    .hero-note { font-size: .78rem; color: var(--muted); line-height: 1.6; margin-top: 15px; }
    .hero-check-link { margin-top: 10px; font-size: .72rem; letter-spacing: 0; }
    .network-visual { min-width: 0; height: 390px; border: 1px solid rgba(0,230,118,.17); border-radius: 26px; background: radial-gradient(ellipse at 50% 40%,rgba(0,230,118,.065),transparent 72%),linear-gradient(145deg,#0d1a1280,#07110bd9); position: relative; overflow: hidden; }
    .network-top, .network-bottom { position: absolute; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; color: var(--muted); }
    .network-top { top: 24px; }
    .network-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 12px #00e67670; }
    .network-bottom { bottom: 24px; border-top: 1px solid var(--border); padding-top: 18px; letter-spacing: 0; }
    .network-bottom strong { color: var(--green); font-size: 1.35rem; margin-right: 4px; }
    .network-visual .shield-visual { position: absolute; width: 176px; height: 176px; top: 82px; left: calc(50% - 88px); }
    .network-visual .shield-core { background: radial-gradient(circle at 35% 25%,#00e67625,#00e67608); }
    .network-visual .shield-core svg { width: 74px; height: 74px; }
    .network-visual .ring { animation: none; opacity: .5; }
    .network-visual .ring:nth-child(1) { width: 140%; height: 140%; }
    .network-visual .ring:nth-child(2) { width: 100%; height: 100%; border-style: dashed; opacity: .45; }
    .network-visual .ring:nth-child(3) { width: 75%; height: 75%; }
    .orbit-label { position: absolute; padding: 8px 12px; background: #0d1d14; border: 1px solid #244632; border-radius: 8px; color: #c5dbcd; font-family: var(--mono); font-size: .62rem; box-shadow: 0 8px 24px #0003; }
    .orbit-label::before { content: ''; display: inline-block; width: 4px; height: 4px; background: var(--green); border-radius: 50%; margin: 0 7px 2px 0; }
    .orbit-label-a { top: 93px; left: 20px; }
    .orbit-label-b { top: 184px; right: 19px; }
    .orbit-label-c { bottom: 90px; left: 32px; }
    section[id] { scroll-margin-top: calc(100px + var(--safe-top)); }
    .locations { padding: 38px 0 56px; border-top: 1px solid rgba(180,230,198,.1); }
    .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
    .section-title { line-height: 1.25; }
    .section-sub { line-height: 1.7; margin-top: 10px; margin-bottom: 26px; }
    .countries { list-style: none; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
    .country { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 17px 14px; background: linear-gradient(120deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); border: 1px solid rgba(180,230,198,.1); border-radius: 12px; font-size: .8rem; }
    .country-flag { width: 26px; height: 17px; border-radius: 3px; flex-shrink: 0; overflow: hidden; object-fit: cover; display: block; } .country-flag-fallback { display: grid; place-items: center; background: #193a2b; font: 700 10px/1 system-ui; color: #bce7ce; }
    .country-code { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: .6rem; opacity: .65; }
    .locations-note { color: var(--muted); font-size: .75rem; line-height: 1.6; margin-top: 20px; }
    .locations-note span { margin: 0 8px; color: var(--green); }
    .features-grid { margin-top: 28px; gap: 14px; }
    .feat-card { padding: 28px; border-radius: 16px; background: linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); border-color: rgba(180,230,198,.1); }
    .feat-card h3 { font-size: 1rem; }
    .feat-card p { font-size: .86rem; line-height: 1.75; }
    .feat-icon { border: 1px solid var(--border); border-radius: 12px; background: rgba(0,230,118,.065); margin-bottom: 24px; }
    .check-section { border-top: 1px solid rgba(180,230,198,.08); }
    .result-block.neutral { border-color: rgba(180,230,198,.16); background: rgba(180,230,198,.04); }
    .result-block.neutral .rb-title { color: var(--text); }
    .faq-item { border-radius: 14px; }
    .faq-item summary { cursor: pointer; padding: 22px; }
    .faq-answer { padding-left: 22px; padding-right: 22px; font-size: .9rem; }
    .cta-box { padding: 54px 32px; background: radial-gradient(ellipse at 50% 0,rgba(0,230,118,.12),transparent 75%),#0b160f; border-radius: 24px; }
    .cta-box .section-label { color: var(--green); font-size: .65rem; }
    a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
    @media (max-width: 1000px) {
      .hero { gap: 28px; }
      .countries { grid-template-columns: repeat(3,minmax(0,1fr)); }
    }
    @media (max-width: 820px) {
      .hero { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
      .hero-desc { max-width: 570px; }
      .network-visual { height: 310px; width: 100%; max-width: 500px; margin: 0 auto; }
      .network-visual .shield-visual { top: 48px; width: 150px; height: 150px; left: calc(50% - 75px); }
      .orbit-label-a { top: 74px; left: 30px; }
      .orbit-label-b { top: 148px; right: 28px; }
      .orbit-label-c { bottom: 76px; left: 42px; }
      .network-bottom { bottom: 18px; padding-top: 12px; }
    }
    @media (max-width: 540px) {
      .hero h1 { font-size: clamp(2.1rem,8.8vw,3rem); }
      .hero-desc { font-size: .97rem; }
      .countries { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
      .country { padding: 14px 10px; gap: 8px; font-size: .77rem; }
      .country-code { display: none; }
      .section-heading { align-items: flex-start; gap: 12px; }
      .section-badge { font-size: .65rem; padding: 7px 9px; }
      .locations { padding: 32px 0 40px; }
      .feat-card { padding: 24px; }
      .hero-offer { gap: 14px; }
      .cta-box { padding: 36px 20px; }
    }
    @media (max-width: 360px) {
      .section-heading { flex-direction: column; }
      .country { font-size: .7rem; }
      .country-flag { width: 22px; }
      .network-top, .network-bottom { left: 16px; right: 16px; font-size: .55rem; }
    }
  


/* Shared visual layer: Tatar VPN */
:root { --muted: #a0b5a9; --green: #43ee98; --green-dim: #43ee9812; --green-glow: #43ee9829; }
body { background-color:#070e0b; }
body::before { opacity:.24; }
body::after { opacity:.35; }
::selection { color:#07120c; background:#6fffb1; }
a:focus-visible, button:focus-visible, summary:focus-visible, canvas:focus-visible { outline:2px solid var(--green); outline-offset:5px; }
.skip-link { position:fixed; z-index:10000; top:8px; left:16px; transform:translateY(-180%); background:var(--green); color:#07120c; border-radius:8px; padding:12px 18px; }
.skip-link:focus { transform:none; }
.container { max-width:1180px; }
header,.site-header { background:#09130de8; border:1px solid #b7edcc16; border-radius:18px; box-shadow:0 12px 40px #0002; }
.logo-mark { box-shadow:none; background:var(--green); border-radius:10px; }
.nav-link,.btn-primary,.contact-btn { box-shadow:0 4px 18px #00e67619; }
.btn { border-radius:12px; }
.hero { grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:32px; padding:65px 0 52px; }
.hero h1 { font-size:clamp(2.5rem,4.2vw,3.6rem); line-height:1.12; letter-spacing:-.04em; }
.hero-desc { max-width:435px; font-size:1rem; }
.hero-eyebrow { font-size:.64rem; letter-spacing:.16em; }
.hero-check-link { color:#b2c7b9; }
.device-line { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:19px; color:#9cb2a3; font-family:var(--mono); font-size:.62rem; }
.device-line span { white-space:nowrap; }
.globe-panel { min-width:0; position:relative; border:1px solid #a0e9ba20; border-radius:28px; background:radial-gradient(ellipse at 50% 45%,#15312466,transparent 70%),linear-gradient(140deg,#10201866,#09110d33); overflow:hidden; isolation:isolate; }
.globe-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:24px 24px 0; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; color:#a1b8aa; }
.globe-heading strong { font-weight:400; color:#c0dfca; }
.globe-pill { padding:5px 9px; border:1px solid #43ee9833; border-radius:99px; color:var(--green); letter-spacing:0; }
.globe-stage { width:100%; aspect-ratio:1.15; position:relative; margin:-6px 0 0; overflow:hidden; }
#networkGlobe { position:absolute; top:0; left:0; display:block; width:100%; height:auto; aspect-ratio:1; cursor:grab; touch-action:pan-y; border-radius:24px; }
#globePanel { scroll-margin-top:105px; }
#networkGlobe.dragging { cursor:grabbing; }
#networkGlobe:focus-visible { outline-offset:-5px; }
.globe-fallback { position:absolute; inset:18%; border:1px solid #43ee9855; border-radius:50%; display:grid; place-items:center; text-align:center; padding:24px; color:var(--muted); background:radial-gradient(circle,#143e2c,#081910); }
.globe-ready .globe-fallback { display:none; }
.globe-hint { text-align:center; color:#9bb1a3; font-size:.68rem; margin:0 18px 20px; pointer-events:none; }
.globe-hint span { color:var(--green); margin-right:5px; }
.globe-bottom { margin:0 22px; border-top:1px solid #a8e5bd19; padding:16px 0; display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:space-between; }
#globeStatus { font-size:.72rem; color:#d0e5d7; line-height:1.5; }
.globe-controls { display:flex; gap:6px; }
.globe-controls button { background:#b6edc707; border:1px solid #c0edca25; border-radius:8px; min-height:36px; padding:7px 10px; font-family:inherit; font-size:.65rem; color:#b5cbbb; cursor:pointer; }
.globe-controls button:hover { color:var(--green); border-color:#43ee9866; }
.globe-caption { padding:0 22px 16px; font-size:.62rem; color:#8da597; line-height:1.65; }
.locations { padding:36px 0 44px; }
.locations .section-title { font-size:clamp(1.5rem,2.8vw,2.05rem); }
.countries { grid-template-columns:repeat(5,minmax(0,1fr)); }
.countries > li { min-width:0; list-style:none; }
button.country { width:100%; text-align:left; font-family:inherit; color:var(--text); cursor:pointer; min-height:59px; transition:border-color .2s,background .2s,transform .2s; }
button.country:hover { border-color:#43ee9866; background:#43ee980d; transform:translateY(-2px); }
button.country[aria-pressed="true"] { background:#43ee9816; border-color:#43ee98a0; }
.country-code { opacity:.9; }
.locations-note { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.location-action { color:var(--green); text-decoration:none; }
.setup-section { padding:44px 0 52px; border-top:1px solid #c6ffda10; }
.setup-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:30px; counter-reset:setup; }
.setup-step { position:relative; border-left:1px solid #43ee983b; padding-left:21px; }
.setup-step::before { counter-increment:setup; content:'0' counter(setup); display:block; color:var(--green); font-family:var(--mono); font-size:.72rem; margin-bottom:17px; }
.setup-step h3 { font-size:1rem; margin-bottom:9px; }
.setup-step p { font-size:.87rem; color:var(--muted); line-height:1.75; }
.features { padding-top:46px; }
.feat-card { background:linear-gradient(140deg,#d0ffd807,#d0ffd802); }
.faq-item { background:#d0ffd805; }
.cta-box { background:radial-gradient(ellipse at 20% 0,#43ee981f,transparent 65%),#0c1911; }
.cta-details { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 22px; color:#bcd5c5; font-size:.79rem; list-style:none; margin:0 0 30px; }
.cta-details li::before { content:'✓'; color:var(--green); margin-right:8px; }
.footer-links { gap:16px; }
.footer-links a { color:#a8bdae; }
/* Document pages */
.document-page .container { max-width:1100px; }
.document-page .page-hero { margin-bottom:28px; padding-bottom:30px; }
.document-page .page-title { max-width:850px; line-height:1.2; font-size:clamp(1.7rem,3.8vw,2.7rem); overflow-wrap:anywhere; }
.document-page .page-meta { line-height:1.7; }
.document-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 32px; }
.document-tabs a { color:var(--muted); text-decoration:none; font-size:.78rem; border:1px solid #c3ead41c; border-radius:99px; padding:10px 15px; line-height:1.5; }
.document-tabs a[aria-current="page"] { background:#43ee9810; color:var(--green); border-color:#43ee9844; }
.document-tabs a:hover { color:var(--green); }
.document-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:44px; align-items:start; }
.document-page .toc { position:sticky; top:105px; max-height:calc(100dvh - 125px); overflow:auto; padding:22px 18px; border-radius:16px; background:#c6ffda05; }
.document-page .toc-list { gap:3px; }
.document-page .toc-link { font-family:var(--sans); font-size:.77rem; letter-spacing:0; padding:9px 4px; line-height:1.55; }
.document-page .toc-link[aria-current="location"] { color:var(--green); }
.document-page .doc-p,.document-page .doc-list li { font-size:.94rem; line-height:1.85; color:#b2c6b9; }
.document-page .section-heading { align-items:flex-start; line-height:1.45; font-size:1.18rem; }
.document-page .section-num { margin-top:4px; border-radius:6px; }
.document-page .doc-section { margin-bottom:32px; scroll-margin-top:110px; }
.document-page .contact-box { padding:28px; border-radius:18px; }
.document-page .glow-anchor-2 { background:radial-gradient(circle,#43ee9809,transparent 70%); }
.document-page footer { margin-top:44px; }
.back-top { display:inline-flex; align-items:center; min-height:44px; color:var(--green); text-decoration:none; font-size:.8rem; margin:24px 0 0; }
/* A calm, useful 404 */
.not-found-page .error-code { color:var(--green); -webkit-text-stroke:1px #43ee9840; text-shadow:0 0 75px #43ee9820; }
.not-found-page .error-code { filter:drop-shadow(0 0 40px #43ee981a); }
.not-found-page header { padding:10px 14px; margin-top:16px; }
.not-found-page .t-dim { color:#91a99a; }
.not-found-page .error-label { color:var(--green); }
.not-found-page .error-label::before,.not-found-page .error-label::after { background:var(--green); }
.error-title { font-size:clamp(1.6rem,4vw,2.4rem); margin-bottom:16px; letter-spacing:-.03em; }
.error-description { font-size:.95rem; line-height:1.8; color:var(--muted); margin:0 auto 28px; max-width:440px; }
.not-found-page .terminal-card { margin:0 auto 28px; max-width:460px; border-radius:18px; }
.not-found-page .terminal-body { overflow-wrap:anywhere; }
.not-found-page .error-actions { flex-wrap:wrap; }
.not-found-page .glow-anchor-2 { background:radial-gradient(circle,#43ee980a,transparent 70%); }
@media(min-width:1100px) { .globe-panel { margin-right:-8px; } }
@media(max-width:1000px) { .countries { grid-template-columns:repeat(3,minmax(0,1fr)); } .document-layout { grid-template-columns:230px minmax(0,1fr);gap:28px; } .hero { gap:24px; } }
@media(max-width:820px) { .hero { grid-template-columns:1fr; padding-top:46px;gap:36px; } .hero-desc { max-width:550px; } .globe-panel { width:100%;max-width:560px;margin:auto; } .setup-grid { gap:18px; } .document-layout { grid-template-columns:1fr; gap:8px; } .document-page .toc { position:static;max-height:none; } .document-page .toc-list { display:grid;grid-template-columns:1fr 1fr;gap:4px 20px; } }
@media(max-width:540px) {
  .hero h1 { font-size:clamp(2.15rem,8.9vw,3rem); }
  .hero { padding:38px 0; }
  .globe-heading { padding:20px 18px 0;font-size:.55rem; }
  .globe-panel { border-radius:22px; }
  .globe-stage { margin-top:6px;margin-bottom:0; }
  .globe-hint { font-size:.62rem;margin-bottom:16px; }
  .globe-bottom { margin:0 16px;gap:10px;padding:13px 0; }
  #globeStatus { font-size:.68rem; }
  .globe-controls button { min-height:40px; }
  .globe-caption { padding:0 16px 16px; }
  .countries { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .setup-grid { grid-template-columns:1fr;gap:26px; }
  .setup-step { padding-left:50px;border:none; }
  .setup-step::before { position:absolute;left:0;top:2px;border:1px solid #43ee9833;padding:7px;border-radius:8px; }
  .document-tabs a { padding:8px 12px;font-size:.73rem; }
  .document-page .page-title { font-size:clamp(1.1rem,7vw,1.7rem); }
  .document-page .toc-list { grid-template-columns:1fr; }
  .document-page .contact-box { padding:22px; }
  .document-page .section-heading { font-size:1.08rem; }
  .document-page .site-header { margin-bottom:36px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } .fade-in,.error-label,.terminal-card,.error-code,.error-actions,.t-line { opacity:1;transform:none; } }
@media print {
  .document-page { background:white;color:black; }
  .document-page header,.document-page footer,.document-tabs,.document-page .toc,.contact-box,.back-top,.skip-link,.glow-anchor,.glow-anchor-2 { display:none; }
  .document-layout { display:block; }
  .document-page .doc-p,.document-page .doc-list li,.document-page .page-meta { color:#222; }
  .document-page .section-heading,.document-page .doc-p strong { color:black; }
  .document-page .content { animation:none; }
}

  .brand-logo{width:112px;height:40px;object-fit:cover;background:#fff;border-radius:9px;padding:3px 7px;flex-shrink:0;box-shadow:0 3px 16px rgba(0,230,118,.10)}
@media(max-width:600px){.brand-logo{width:96px;height:34px;padding:2px 6px}.logo{gap:8px}.logo-text{display:none}}