* { margin: 0; padding: 0; box-sizing: border-box; }
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      background: #b76eff;
      color: #0a0718;
      padding: 0.75rem 1.5rem;
      z-index: 9999;
      font-weight: 700;
      border-radius: 0 0 0.5rem 0;
      text-decoration: none;
    }
    .skip-link:focus {
      left: 0;
    }
    :root {
      --bg-deep: #0a0718;
      --bg-surface: #110e22;
      --card-bg: rgba(18, 14, 35, 0.85);
      --accent-primary: #b76eff;
      --accent-glow: rgba(183, 110, 255, 0.4);
      --accent-secondary: #ff61d0;
      --text-light: #f0eaff;
      --text-dim: #b9b0d9;
      --border-dim: #2a234a;
      --shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.8);
    }
    body {
      background: radial-gradient(ellipse at 30% 40%, #120c2c, var(--bg-deep));
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      line-height: 1.5;
      color: var(--text-light);
      padding: 1.5rem;
      padding-bottom: 80px;
      position: relative;
    }
    body::before {
      content: '';
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background-image: radial-gradient(2px 2px at 20px 30px, #fff, rgba(0,0,0,0)),
                        radial-gradient(1px 1px at 60px 80px, #ffe3b0, rgba(0,0,0,0));
      background-size: 200px 200px, 150px 150px;
      background-repeat: repeat;
      opacity: 0.35;
      pointer-events: none;
      z-index: 0;
    }
    .container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
    .lang-bar { display: flex; justify-content: flex-end; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
    .lang-btn { background: rgba(20,15,45,0.7); backdrop-filter: blur(4px); border: 1px solid var(--border-dim); padding: 0.3rem 1rem; border-radius: 2rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; color: var(--text-dim); transition: 0.2s; }
    .lang-btn:hover, .lang-btn.active { background: var(--accent-primary); border-color: var(--accent-primary); color: #0a0718; box-shadow: 0 0 10px var(--accent-glow); }
    .static-hero { margin-bottom: 2rem; }
    .static-hero h1 { font-size: 2.4rem; font-weight: 800; background: linear-gradient(135deg, #fff, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.8rem; border-left: 5px solid var(--accent-primary); padding-left: 1.2rem; }
    .static-hero .subhead { font-size: 1.2rem; color: var(--text-dim); margin-bottom: 1rem; }
    .static-hero p { color: #d4cef0; max-width: 800px; margin-bottom: 1.5rem; }
    .card { background: var(--card-bg); backdrop-filter: blur(10px); border-radius: 1.8rem; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid rgba(183,110,255,0.3); box-shadow: var(--shadow); transition: 0.2s; }
    .card:hover { border-color: var(--accent-primary); box-shadow: 0 0 20px var(--accent-glow); }
    .btn-primary { background: transparent; color: var(--accent-primary); border: 2px solid var(--accent-primary); padding: 0.7rem 1.8rem; border-radius: 3rem; font-weight: 700; cursor: pointer; transition: 0.2s; display: inline-block; text-align: center; text-decoration: none; margin-top: 1rem; }
    .btn-primary:hover { background: var(--accent-primary); color: #0a0718; box-shadow: 0 0 16px var(--accent-glow); }
    .btn-secondary { background: rgba(255,255,255,0.05); border: 1px solid var(--border-dim); color: var(--text-dim); padding: 0.5rem 1.2rem; border-radius: 2rem; cursor: pointer; }
    .btn-secondary:hover { background: var(--accent-primary); border-color: var(--accent-primary); color: #0a0718; }
    .progress-bar { width: 100%; height: 6px; background: var(--border-dim); border-radius: 3px; margin: 1rem 0; }
    .progress-fill { width: 0%; height: 100%; background: var(--accent-primary); border-radius: 3px; transition: width 0.3s; }
    .question-text { font-size: 1.2rem; font-weight: 600; margin-bottom: 1.2rem; }
    .options { display: flex; flex-direction: column; gap: 0.7rem; }
    .option-btn { background: rgba(10,7,24,0.7); border: 1.5px solid var(--border-dim); border-radius: 3rem; padding: 0.8rem 1.2rem; cursor: pointer; transition: 0.15s; color: var(--text-dim); font-size: 0.95rem; text-align: left; }
    .option-btn:hover, .option-btn.selected { background: var(--accent-primary); border-color: var(--accent-primary); color: #0a0718; font-weight: 600; }
    .result-card { background: rgba(0,0,0,0.5); border-radius: 1.2rem; padding: 1.2rem; border-left: 6px solid var(--accent-secondary); margin-top: 1.2rem; }
    .compat-score { font-size: 2.5rem; font-weight: 800; color: var(--accent-secondary); text-align: center; margin: 0.5rem 0; }
    .context-tabs { display: flex; gap: 0.8rem; margin: 1rem 0; flex-wrap: wrap; }
    .context-tab { background: transparent; border: 1px solid var(--border-dim); padding: 0.4rem 1rem; border-radius: 2rem; cursor: pointer; }
    .context-tab.active { background: var(--accent-primary); border-color: var(--accent-primary); color: #0a0718; }
    .tracker-slider { width: 100%; margin: 1rem 0; }
    .chart-bars { display: flex; gap: 0.4rem; align-items: flex-end; margin: 1rem 0; flex-wrap: wrap; }
    .chart-bar { flex: 1; min-width: 35px; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
    .bar-fill { width: 100%; background: var(--accent-primary); border-radius: 6px 6px 3px 3px; transition: height 0.2s; }
    .telegram-link { display: inline-flex; align-items: center; gap: 0.5rem; background: #1f2a48; padding: 0.6rem 1.2rem; border-radius: 3rem; color: white; text-decoration: none; margin-top: 1rem; transition: 0.2s; }
    .telegram-link:hover { background: #2a3a60; transform: scale(1.02); }
    footer { text-align: center; font-size: 0.7rem; color: var(--text-dim); margin-top: 2rem; border-top: 1px solid var(--border-dim); padding-top: 1rem; }
    .cta-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #0a0718; display: flex; z-index: 100; border-top: 1px solid var(--accent-primary); display: none; }
    .cta-bar.visible { display: flex; }
    .cta-bar a { flex: 1; text-align: center; padding: 14px; text-decoration: none; font-weight: bold; text-transform: uppercase; color: var(--text-light); }
    .cta-bar .telegram-cta { background: var(--accent-primary); color: #0a0718; }
    .lazy-section { min-height: 300px; contain: layout; }
    *:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
    @media (max-width: 700px) { body { padding: 1rem; } .static-hero h1 { font-size: 1.8rem; } .card { padding: 1rem; }.static-hero { min-height: 500px; } }
    .hidden { display: none; }
    .trust-badge { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
    .trust-item { display: flex; align-items: center; gap: 0.5rem; }
    #appRoot { min-height: 600px; }
    .lazy-section { min-height: 300px; }
    @keyframes gentle-pulse {
      0% { box-shadow: 0 0 0 0 rgba(183, 110, 255, 0.5); }
      70% { box-shadow: 0 0 0 12px rgba(183, 110, 255, 0); }
      100% { box-shadow: 0 0 0 0 rgba(183, 110, 255, 0); }
    }
    .telegram-cta { animation: gentle-pulse 2.5s infinite; }
    .fade-up {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }
  
.service-card-link { text-decoration: none; border: 1px solid var(--border-dim); border-radius: 1rem; padding: 1rem; display: block; color: inherit; transition: border-color 0.2s; }
.service-card-link:hover { border-color: var(--accent-primary); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .telegram-cta { animation: none !important; }
  .fade-up { opacity: 1 !important; transform: none !important; }
}

@media print {
  body { background: white !important; color: black !important; padding: 0 !important; }
  .cta-bar, .lang-bar, .telegram-link, .telegram-cta, .skip-link { display: none !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
  .static-hero h1 { color: black !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; }
  a { color: #000 !important; text-decoration: underline !important; }
}

.toast-container {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 1000; pointer-events: none;
}
.toast {
  background: var(--card-bg); color: var(--text-light); padding: 0.75rem 1.5rem;
  border-radius: 1.5rem; border: 1px solid var(--accent-primary); margin-top: 0.5rem;
  opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto; max-width: 90vw; text-align: center;
}
.toast.visible { opacity: 1; transform: translateY(0); }