/* ==========================================================================
  Destok VPN identity: open canvas, signal green, and cobalt details
   ========================================================================== */

:root {
  /* Color Palette */
  --bg-primary: #060810;
  --bg-secondary: #0b101c;
  --bg-card: rgba(15, 23, 42, 0.65);
  --bg-card-hover: rgba(22, 33, 58, 0.8);
  --bg-glass-input: rgba(15, 23, 42, 0.85);

  --accent-cyan: #00f0ff;
  --accent-cyan-glow: rgba(0, 240, 255, 0.35);
  --accent-purple: #8a2be2;
  --accent-purple-glow: rgba(138, 43, 226, 0.35);
  --accent-emerald: #00ffa3;
  --accent-emerald-glow: rgba(0, 255, 163, 0.3);
  --accent-amber: #ffb800;
  --accent-rose: #ff3366;

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-sub: #64748b;

  --border-light: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(0, 240, 255, 0.5);
  --border-gradient: linear-gradient(135deg, rgba(0, 240, 255, 0.4), rgba(138, 43, 226, 0.4));

  /* Radius & Shadows */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 30px rgba(0, 240, 255, 0.2);
  --shadow-purple-glow: 0 0 30px rgba(138, 43, 226, 0.25);

  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  overflow-x: clip;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-primary);
  color: var(--text-main);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  background-image:
    radial-gradient(circle at 15% 15%, rgba(0, 240, 255, 0.07) 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(138, 43, 226, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(0, 255, 163, 0.05) 0%, transparent 40%),
    linear-gradient(180deg, rgba(6, 8, 16, 0.95) 0%, #060810 100%);
  background-attachment: fixed;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Typography Helpers */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.gradient-text {
  background: linear-gradient(135deg, #ffffff 10%, var(--accent-cyan) 60%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-alt {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-emerald) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(6, 8, 16, 0.75);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-light);
  transition: var(--transition-fast);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.brand-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  box-shadow: 0 0 20px var(--accent-cyan-glow);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: var(--transition-fast);
  position: relative;
}

.nav-link:hover, .nav-link.active {
  color: var(--accent-cyan);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, #00b4d8 100%);
  color: #060810;
  box-shadow: 0 4px 20px var(--accent-cyan-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 240, 255, 0.5);
  background: linear-gradient(135deg, #33f3ff 0%, #00c8f0 100%);
}

.btn-glow {
  background: linear-gradient(135deg, #7000ff 0%, #a855f7 100%);
  color: #fff;
  box-shadow: 0 4px 20px var(--accent-purple-glow);
}

.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(138, 43, 226, 0.5);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  border: 1px solid var(--border-light);
  backdrop-filter: blur(10px);
}

.btn-outline:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(0, 240, 255, 0.05);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
}

.btn-block {
  width: 100%;
}

/* Hero Section */
.hero {
  padding: 160px 0 100px;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-cyan);
  margin-bottom: 24px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-emerald);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent-emerald);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 18px var(--accent-emerald); }
  100% { transform: scale(0.95); opacity: 0.7; }
}

.hero-title {
  font-size: 3.6rem;
  line-height: 1.12;
  margin-bottom: 24px;
  letter-spacing: -1.2px;
}

.hero-desc {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 36px;
  max-width: 560px;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

.hero-features-bar {
  display: flex;
  gap: 32px;
  border-top: 1px solid var(--border-light);
  padding-top: 28px;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-mono);
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Hero Cyber Visual Shield Card */
.hero-visual {
  position: relative;
}

.cyber-card {
  background: var(--bg-card);
  backdrop-filter: blur(24px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), var(--shadow-glow);
  position: relative;
  overflow: hidden;
}

.cyber-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-purple), transparent);
}

.card-header-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.status-badge-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-emerald);
  background: rgba(0, 255, 163, 0.1);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 255, 163, 0.25);
}

.protocol-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-cyan);
  background: rgba(0, 240, 255, 0.1);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 240, 255, 0.2);
}

.shield-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  position: relative;
}

.shield-icon-wrapper {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, transparent 70%);
  border: 2px solid rgba(0, 240, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 0 30px var(--accent-cyan-glow);
  position: relative;
}

.radar-ring {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 240, 255, 0.25);
  animation: rotate 15s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.shield-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.shield-ip {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  gap: 6px;
}

.telemetry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

.telemetry-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px;
}

.telemetry-label {
  font-size: 0.75rem;
  color: var(--text-sub);
  margin-bottom: 4px;
}

.telemetry-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
}

/* Sections Common */
.section {
  padding: 100px 0;
  position: relative;
}

.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
}

.section-tag {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 12px;
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 16px;
  letter-spacing: -0.8px;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
}

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 240, 255, 0.3);
  background: var(--bg-card-hover);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.1);
}

.feature-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.feature-card:nth-child(2) .feature-icon {
  background: rgba(138, 43, 226, 0.08);
  border-color: rgba(138, 43, 226, 0.25);
  color: #b366ff;
}

.feature-card:nth-child(3) .feature-icon {
  background: rgba(0, 255, 163, 0.08);
  border-color: rgba(0, 255, 163, 0.25);
  color: var(--accent-emerald);
}

.feature-title {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.feature-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Protocols Comparison Table */
.protocols-section {
  background: rgba(11, 16, 28, 0.5);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.protocol-box {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.protocol-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.protocol-table th, .protocol-table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-light);
}

.protocol-table th {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.protocol-table tr:last-child td {
  border-bottom: none;
}

.protocol-badge-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 255, 163, 0.1);
  color: var(--accent-emerald);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
}

.protocol-badge-blocked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 51, 102, 0.1);
  color: var(--accent-rose);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Servers Latency Interactive Section */
.servers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.server-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition-smooth);
}

.server-card:hover {
  border-color: rgba(0, 240, 255, 0.4);
  transform: translateY(-2px);
  background: rgba(20, 30, 50, 0.8);
}

.server-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.country-flag {
  font-size: 1.6rem;
  line-height: 1;
}

.server-name {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.server-protocols {
  font-size: 0.75rem;
  color: var(--text-sub);
}

.server-metric {
  text-align: right;
}

.ping-tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent-emerald);
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.ping-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-emerald);
}

.server-load {
  font-size: 0.75rem;
  color: var(--text-sub);
}

/* Pricing Grid */
.billing-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 50px;
}

.switch-pill {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 5px;
  display: flex;
  gap: 6px;
}

.switch-btn {
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}

.switch-btn.active {
  background: var(--accent-cyan);
  color: #060810;
  box-shadow: 0 2px 12px var(--accent-cyan-glow);
}

.discount-tag {
  background: linear-gradient(135deg, #ff3366, #ff6b3d);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: 4px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
}

.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition-smooth);
}

.price-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.price-card.featured {
  background: linear-gradient(180deg, rgba(20, 30, 60, 0.85) 0%, rgba(12, 18, 34, 0.95) 100%);
  border: 2px solid var(--accent-cyan);
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.25);
  transform: scale(1.03);
}

.price-card.featured:hover {
  transform: scale(1.03) translateY(-6px);
}

.featured-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color: #000;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.plan-name {
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.plan-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 24px;
  min-height: 40px;
}

.price-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}

.price-amount {
  font-size: 2.8rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: #fff;
  line-height: 1;
}

.price-period {
  font-size: 0.9rem;
  color: var(--text-sub);
}

.price-savings {
  font-size: 0.8rem;
  color: var(--accent-emerald);
  font-weight: 600;
  margin-bottom: 24px;
  min-height: 20px;
}

.plan-features {
  list-style: none;
  margin-bottom: 32px;
  flex-grow: 1;
}

.plan-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.plan-feature-item svg {
  color: var(--accent-cyan);
  flex-shrink: 0;
}

/* Interactive Demo / Key Generator Section */
.demo-section {
  background: radial-gradient(circle at 50% 50%, rgba(112, 0, 255, 0.1) 0%, transparent 60%);
}

.demo-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.demo-qr-box {
  background: #fff;
  padding: 16px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.demo-key-input {
  width: 100%;
  background: var(--bg-glass-input);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-cyan);
  margin-bottom: 16px;
  outline: none;
  word-break: break-all;
}

.demo-key-input:focus {
  border-color: var(--accent-cyan);
}

/* Setup Guides Tabs */
.tabs-header {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.tab-btn:hover {
  border-color: rgba(0, 240, 255, 0.4);
  color: #fff;
}

.tab-btn.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 20px var(--accent-cyan-glow);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.setup-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 30px;
  position: relative;
}

.step-num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color: #060810;
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.step-title {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.step-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* FAQ Accordion */
.faq-grid {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-fast);
}

.faq-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.faq-question {
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.faq-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
  color: var(--accent-cyan);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
  padding: 0 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.faq-item.open .faq-answer {
  max-height: 500px;
  padding-bottom: 20px;
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(4, 6, 12, 0.85);
  backdrop-filter: blur(16px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-smooth);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #0d1220;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: var(--radius-lg);
  padding: 36px;
  max-width: 520px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), var(--shadow-glow);
  transform: translateY(20px);
  transition: var(--transition-smooth);
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--text-sub);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  transition: var(--transition-fast);
}

.modal-close:hover {
  color: #fff;
}

.payment-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}

.pay-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.pay-card:hover, .pay-card.active {
  border-color: var(--accent-cyan);
  background: rgba(0, 240, 255, 0.08);
}

.pay-icon {
  font-size: 1.3rem;
}

.pay-title {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Footer */
.footer {
  background: #04060b;
  border-top: 1px solid var(--border-light);
  padding: 80px 0 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

.footer-brand-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 16px;
  max-width: 320px;
}

.footer-col-title {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  color: #fff;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.footer-link:hover {
  color: var(--accent-cyan);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid var(--border-light);
  font-size: 0.85rem;
  color: var(--text-sub);
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #0f172a;
  border: 1px solid var(--accent-cyan);
  color: #fff;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), var(--shadow-glow);
  z-index: 2000;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition-smooth);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Media Queries */
@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .features-grid, .pricing-grid, .setup-steps-grid {
    grid-template-columns: 1fr;
  }
  .price-card.featured {
    transform: none;
  }
  .demo-card {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hero-title {
    font-size: 2.8rem;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .hero-title {
    font-size: 2.2rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* Destok visual system */
:root {
  --bg-primary: #f1f3ec;
  --bg-secondary: #e6e9e0;
  --bg-card: #ffffff;
  --bg-card-hover: #f7f9f3;
  --bg-glass-input: #f7f8f4;
  --accent-cyan: #a9e92f;
  --accent-cyan-glow: rgba(169, 233, 47, 0.24);
  --accent-purple: #3357e8;
  --accent-purple-glow: rgba(51, 87, 232, 0.18);
  --accent-emerald: #74b620;
  --accent-emerald-glow: rgba(116, 182, 32, 0.2);
  --accent-amber: #f2a343;
  --accent-rose: #e45c45;
  --text-main: #191c19;
  --text-muted: #535a51;
  --text-sub: #777e74;
  --border-light: #d9ddd3;
  --border-focus: #3357e8;
  --border-gradient: #c8d0c0;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 7px;
  --shadow-sm: 0 12px 32px rgba(25, 28, 25, 0.08);
  --shadow-glow: 0 0 0 transparent;
  --shadow-purple-glow: 0 0 0 transparent;
  --font-main: 'Space Grotesk', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --transition-fast: 180ms ease;
  --transition-smooth: 320ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

html {
  color-scheme: light;
  scroll-padding-top: 90px;
}

body {
  color: var(--text-main);
  background-color: var(--bg-primary);
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 47px, rgba(25, 28, 25, 0.025) 48px);
  background-attachment: initial;
}

::selection {
  color: #191c19;
  background: #c9f36a;
}

::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: #aeb5a8; }
::-webkit-scrollbar-thumb:hover { background: #3357e8; }

.container { max-width: 1280px; }

h1, h2, h3, h4 { color: #191c19; }

.gradient-text,
.gradient-text-alt {
  color: #3357e8;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.navbar {
  background: rgba(241, 243, 236, 0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #d9ddd3;
}

.navbar .container { height: 72px; }

.nav-brand {
  gap: 10px;
  color: #191c19;
  font-size: 1.25rem;
  .nav-brand { flex: 0 0 auto; white-space: nowrap; font-size: 1rem; }
  .nav-brand > span { white-space: nowrap; }
  letter-spacing: 0;
}

.brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: #191c19;
  background: #baf14c;
  box-shadow: none;
}

.nav-links { gap: 24px; }

.nav-link {
  color: #5d645a;
  font-size: 0.88rem;
}

.nav-link:hover, .nav-link.active { color: #3357e8; }

.nav-actions { gap: 9px; }

.btn {
  min-height: 44px;
  padding: 11px 19px;
  border-radius: 4px;
  font-family: var(--font-main);
  font-weight: 700;
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn-primary {
  color: #191c19;
  background: #baf14c;
  box-shadow: none;
}

.btn-primary:hover {
  color: #191c19;
  background: #a9e92f;
  box-shadow: none;
  transform: translateY(-2px);
}

.btn-glow {
  color: #fff;
  background: #3357e8;
  box-shadow: none;
}

.btn-glow:hover {
  color: #fff;
  background: #2446d0;
  box-shadow: none;
  transform: translateY(-2px);
}

.btn-outline {
  color: #191c19;
  background: transparent;
  border-color: #bfc5b9;
  backdrop-filter: none;
}

.btn-outline:hover {
  color: #3357e8;
  background: #fff;
  border-color: #3357e8;
}

.btn-sm { min-height: 38px; padding: 8px 13px; }

.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 11px;
  color: #d9c9f4;
  background: rgba(140, 100, 255, .07);
  border: 1px solid rgba(160, 120, 255, .2);
  border-radius: 999px;
  cursor: pointer;
  font: 500 .67rem var(--font-mono);
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.motion-toggle svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; }
.motion-toggle-star { fill: currentColor; stroke: none; }
.motion-toggle[aria-pressed="true"] { color: #fff; border-color: rgba(236, 72, 153, .52); background: rgba(168, 85, 247, .18); box-shadow: 0 0 20px rgba(168, 85, 247, .25); }
.motion-toggle[aria-pressed="true"] svg { color: #e78aff; filter: drop-shadow(0 0 6px rgba(236, 72, 153, .8)); }
.motion-toggle:hover { color: #fff; border-color: rgba(200, 160, 255, .56); }
.account-nav-link { gap: 6px; }
.account-nav-link svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero {
  min-height: 700px;
  padding: 150px 0 90px;
  background-color: #e7ebdf;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(8.333% - 1px), rgba(25, 28, 25, 0.045) calc(8.333% - 1px), rgba(25, 28, 25, 0.045) 8.333%);
  border-bottom: 1px solid #d2d8cb;
}

.hero-grid {
  grid-template-columns: 1.12fr 0.88fr;
  gap: 72px;
  align-items: center;
}

.hero-text-col { animation: destok-enter 700ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }

.hero-badge {
  gap: 10px;
  padding: 8px 11px;
  color: #3357e8;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid #cbd2c3;
  border-radius: 3px;
  font: 500 0.72rem var(--font-mono);
  margin-bottom: 25px;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  background: #77b723;
  box-shadow: none;
}

.hero-title {
  max-width: 760px;
  font-size: 4.6rem;
  line-height: 0.98;
  letter-spacing: 0;
  margin-bottom: 25px;
  animation: destok-enter 760ms 80ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.hero-title .gradient-text {
  color: #3357e8;
  white-space: nowrap;
}

.hero-desc {
  max-width: 570px;
  color: #535a51;
  font-size: 1.08rem;
  line-height: 1.7;
  margin-bottom: 29px;
  animation: destok-enter 760ms 140ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.hero-desc strong { color: #191c19; }
.hero-cta { gap: 11px; margin-bottom: 39px; }

.hero-features-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  border-top: 1px solid #bdc5b7;
  padding-top: 18px;
}

.stat-value {
  color: #191c19;
  font: 500 1.18rem var(--font-mono);
}

.stat-label {
  color: #687064;
  font-size: 0.66rem;
  line-height: 1.4;
}

.hero-visual { animation: destok-enter 850ms 160ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }

.cyber-card {
  min-height: 420px;
  padding: 25px;
  color: #f4f6ed;
  background-color: #191d1b;
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 35px, rgba(255, 255, 255, 0.035) 36px);
  border: 1px solid #191d1b;
  border-radius: 5px;
  box-shadow: 14px 14px 0 #baf14c;
}

.cyber-card::before {
  top: auto;
  right: 25px;
  bottom: 0;
  left: 25px;
  width: auto;
  height: 3px;
  background: #baf14c;
}

.card-header-status {
  padding-bottom: 15px;
  border-color: rgba(255, 255, 255, 0.14);
}

.status-badge-secure {
  color: #c7f87b;
  background: rgba(186, 241, 76, 0.08);
  border: 1px solid rgba(186, 241, 76, 0.25);
  border-radius: 3px;
  padding: 6px 9px;
  font-size: 0.75rem;
}

.status-badge-secure .pulse-dot { background: #baf14c; }

.protocol-tag {
  color: #b8c3ff;
  background: rgba(74, 103, 237, 0.12);
  border: 1px solid rgba(126, 147, 255, 0.22);
  border-radius: 3px;
  font-size: 0.67rem;
}

.shield-center { min-height: 235px; padding: 15px 0 5px; }

.shield-icon-wrapper {
  width: 78px;
  height: 78px;
  color: #baf14c;
  background: #272d28;
  border: 1px solid rgba(186, 241, 76, 0.55);
  border-radius: 50%;
  box-shadow: none;
  margin-bottom: 18px;
}

.shield-icon-wrapper svg { stroke: #baf14c !important; }

.radar-ring {
  width: 120px;
  height: 120px;
  border-color: rgba(186, 241, 76, 0.35);
  border-style: solid;
}

.shield-title { color: #f4f6ed; font-size: 1rem; }
.shield-ip { color: #c7f87b; font-size: 0.76rem; }
.shield-ip span { color: #969f92; }

.telemetry-row {
  gap: 10px;
  margin-top: 12px;
  padding-top: 14px;
  border-color: rgba(255, 255, 255, 0.14);
}

.telemetry-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 3px;
  padding: 10px 12px;
}

.telemetry-label { color: #969f92; font: 500 0.63rem var(--font-mono); }
.telemetry-val { color: #f4f6ed; font-size: 0.92rem; }

.section { padding: 88px 0; }

.section-head {
  max-width: 770px;
  margin: 0 0 42px;
  text-align: left;
}

.section-tag {
  color: #3357e8;
  font: 500 0.72rem var(--font-mono);
  letter-spacing: 0;
  margin-bottom: 13px;
}

.section-title {
  max-width: 760px;
  color: #191c19;
  font-size: 2.8rem;
  line-height: 1.05;
  letter-spacing: 0;
  margin-bottom: 15px;
}

.section-desc { color: #62695f; font-size: 1rem; line-height: 1.7; }

.features-grid { gap: 0 24px; }

.feature-card {
  min-height: 220px;
  padding: 25px 18px 25px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid #d2d8cb;
  border-radius: 0;
  overflow: visible;
}

.feature-card:hover {
  transform: none;
  background: transparent;
  border-color: #3357e8;
  box-shadow: none;
}

.feature-icon {
  width: 40px;
  height: 40px;
  color: #3357e8;
  background: #e6ebff;
  border: 0;
  border-radius: 3px;
  margin-bottom: 17px;
}

.feature-card:nth-child(2) .feature-icon,
.feature-card:nth-child(3) .feature-icon {
  color: #191c19;
  background: #d9f5a8;
  border: 0;
}

.feature-title { color: #191c19; font-size: 1.14rem; margin-bottom: 8px; }
.feature-desc { color: #62695f; font-size: 0.89rem; line-height: 1.65; }

.protocols-section {
  background: #e7ebdf;
  border-top: 1px solid #d2d8cb;
  border-bottom: 1px solid #d2d8cb;
}

.protocol-box {
  background: #fff;
  border: 1px solid #d9ddd3;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
}

.protocol-table { color: #333a32; }
.protocol-table th, .protocol-table td { border-color: #e4e7e0; padding: 16px 18px; }
.protocol-table th { color: #6b7268; background: #f5f6f2; font: 500 0.67rem var(--font-mono); }
.protocol-table tr[style*="rgba(0, 240, 255"] { background: #f2f8e9 !important; }
.protocol-badge-active, .protocol-badge-blocked { border-radius: 3px; font-size: 0.72rem; }
.protocol-badge-active { color: #426c12; background: #e7f4d1; }
.protocol-badge-blocked { color: #a64534; background: #f8e5df; }

.servers-grid { gap: 0 16px; }

.server-card {
  min-width: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid #d2d8cb;
  border-radius: 0;
  padding: 17px 0;
}

.server-card:hover { background: transparent; border-color: #3357e8; transform: none; }
.server-name { color: #191c19; }
.server-protocols, .server-load { color: #70776d; }
.ping-tag { color: #4f7b19; font-size: 0.84rem; }
.ping-indicator { width: 7px; height: 7px; }

.billing-switcher { margin-bottom: 38px; }

.switch-pill {
  padding: 4px;
  background: #e5e8df;
  border: 1px solid #d2d8cb;
  border-radius: 4px;
}

.switch-btn { border-radius: 2px; color: #62695f; }
.switch-btn.active { color: #191c19; background: #baf14c; box-shadow: none; }
.discount-tag { color: #fff; background: #3357e8; border-radius: 2px; }

.pricing-grid { gap: 15px; }

.price-card {
  background: #fff;
  border: 1px solid #d9ddd3;
  border-radius: 4px;
  padding: 28px 25px;
  box-shadow: 0 8px 20px rgba(25, 28, 25, 0.035);
}

.price-card:hover { transform: translateY(-3px); border-color: #9fb784; box-shadow: var(--shadow-sm); }

.price-card.featured {
  color: #191c19;
  background: #dff5b9;
  border: 1px solid #9ecf57;
  box-shadow: 0 12px 30px rgba(100, 145, 48, 0.12);
  transform: none;
}

.price-card.featured:hover { transform: translateY(-3px); }
.featured-ribbon { top: 14px; left: auto; right: 15px; transform: none; color: #191c19; background: #baf14c; border-radius: 2px; font-size: 0.63rem; }
.plan-name, .price-amount { color: #191c19; }
.plan-desc, .price-period, .plan-feature-item { color: #62695f; }
.price-savings { color: #4d7818; }
.plan-feature-item svg { color: #668f2a; }

.demo-section { background: #e7ebdf; border-block: 1px solid #d2d8cb; }

.demo-card {
  background: #fff;
  border: 1px solid #d9ddd3;
  border-radius: 4px;
  padding: 30px;
  gap: 30px;
  box-shadow: var(--shadow-sm);
}

.demo-card h3 { color: #191c19; }
.demo-card p, .demo-card label { color: #62695f !important; }
.demo-card select, .demo-key-input { color: #191c19 !important; background: #f5f6f2 !important; border: 1px solid #d2d8cb !important; border-radius: 3px !important; }
.demo-key-input { color: #3357e8 !important; }
.demo-key-input:focus { border-color: #3357e8 !important; }
.demo-qr-box { border-radius: 3px; box-shadow: none; border: 1px solid #d9ddd3; }

.tabs-header { justify-content: flex-start; gap: 7px; margin-bottom: 28px; }

.tab-btn {
  color: #535a51;
  background: transparent;
  border: 1px solid #cbd1c4;
  border-radius: 3px;
  padding: 10px 15px;
  font-size: 0.86rem;
}

.tab-btn:hover { color: #3357e8; border-color: #3357e8; }
.tab-btn.active { color: #191c19; background: #dff5b9; border-color: #9ecf57; box-shadow: none; }
.setup-steps-grid { gap: 14px; }

.step-card {
  background: #fff;
  border: 1px solid #d9ddd3;
  border-radius: 4px;
  padding: 23px;
}

.step-num { color: #191c19; background: #baf14c; border-radius: 3px; font-family: var(--font-mono); }
.step-title { color: #191c19; }
.step-desc { color: #62695f; }
.faq-grid { max-width: 860px; gap: 0; }

.faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d2d8cb;
  border-radius: 0;
}

.faq-item:hover { border-color: #3357e8; }
.faq-question { color: #191c19; padding: 19px 0; font-size: 1rem; }
.faq-icon { color: #3357e8; }
.faq-answer { color: #62695f; padding-inline: 0; }
.faq-item.open .faq-answer { padding-bottom: 18px; }

.footer {
  color: #eff2e9;
  background: #191d1b;
  border-top: 3px solid #baf14c;
  padding: 62px 0 24px;
}

.footer .nav-brand { color: #f4f6ed; }
.footer .gradient-text { color: #baf14c; }
.footer-brand-desc, .footer-link { color: #a6ada2; }
.footer-col-title { color: #f4f6ed; font: 500 0.7rem var(--font-mono); }
.footer-link:hover { color: #baf14c; }
.footer-bottom { color: #949b91; border-color: rgba(255, 255, 255, 0.16); }

.modal-overlay { background: rgba(16, 20, 17, 0.68); backdrop-filter: blur(7px); }

.modal-content {
  color: #191c19;
  background: #f8f9f5;
  border: 1px solid #d2d8cb;
  border-radius: 5px;
  box-shadow: 0 24px 80px rgba(13, 18, 14, 0.25);
}

.modal-content h3 { color: #191c19; }
.modal-content p, .modal-content label { color: #62695f !important; }
.modal-close { color: #777e74; }
.modal-close:hover { color: #191c19; }
.payment-options-grid { gap: 8px; }

.pay-card {
  color: #191c19;
  background: #fff;
  border: 1px solid #d9ddd3;
  border-radius: 3px;
}

.pay-card:hover, .pay-card.active { background: #eff7e5; border-color: #8dbb48; }
.pay-title { color: #191c19; }
.modal-content input { color: #191c19 !important; background: #fff !important; border-color: #d2d8cb !important; border-radius: 3px !important; }
.modal-content > div[style*="rgba(138, 43, 226"] { background: #edf5e2 !important; border-color: #d2e5b5 !important; color: #535a51 !important; }
.modal-content > div[style*="rgba(138, 43, 226"] strong { color: #191c19 !important; }
.modal-content > div[style*="rgba(138, 43, 226"] span { color: #577d20 !important; }

.toast {
  color: #f4f6ed;
  background: #191d1b;
  border: 1px solid #baf14c;
  border-radius: 4px;
  box-shadow: 0 12px 35px rgba(13, 18, 14, 0.25);
}

.toast svg { stroke: #baf14c !important; }

@keyframes destok-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .nav-links { gap: 13px; }
  .nav-link { font-size: 0.8rem; }
  .hero-grid { gap: 42px; }
  .hero-title { font-size: 3.8rem; }
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  .hero { min-height: auto; padding: 130px 0 75px; }
  .hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .hero-visual { max-width: 640px; width: 100%; }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-card.featured { transform: none; }
  .setup-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .container { padding-inline: 20px; }
  .navbar .container { height: 64px; }
  .nav-links { display: none; }
  .nav-actions .btn-outline { display: none; }
  #btnOpenBot { display: none; }
  #accountQuickLink { display: inline-flex; width: 36px; min-height: 36px; padding: 8px; }
  .account-quick-label { display: none; }
  .nav-brand { font-size: 1.1rem; }
  .brand-icon { width: 32px; height: 32px; }
  .hero { padding: 112px 0 58px; background-size: 25% 100%; }
  .hero-grid { gap: 34px; }
  .hero-title { max-width: 600px; font-size: 3.25rem; line-height: 1.02; }
  .hero-desc { font-size: 1rem; }
  .hero-cta { align-items: stretch; flex-direction: column; max-width: 360px; }
  .hero-cta .btn { width: 100%; }
  .hero-features-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 15px; }
  .cyber-card { min-height: 0; padding: 19px; box-shadow: 7px 7px 0 #baf14c; }
  .card-header-status { align-items: flex-start; gap: 8px; flex-direction: column; }
  .shield-center { min-height: 205px; }
  .section { padding: 66px 0; }
  .section-head { margin-bottom: 30px; }
  .section-title { font-size: 2.2rem; }
  .features-grid, .pricing-grid, .setup-steps-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 0; padding: 20px 0; }
  .protocol-table th, .protocol-table td { min-width: 138px; padding: 12px; font-size: 0.8rem; }
  .servers-grid { grid-template-columns: 1fr; }
  .billing-switcher { flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
  .switch-btn { padding: 8px 12px; font-size: 0.8rem; }
  .demo-card { grid-template-columns: 1fr; padding: 20px; gap: 25px; }
  .tabs-header { gap: 6px; }
  .tab-btn { padding: 9px 11px; font-size: 0.8rem; }
  .footer { padding-top: 48px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 12px; }
  .footer-bottom > div:last-child { flex-wrap: wrap; gap: 9px !important; }
  .modal-overlay { padding: 12px; overflow-y: auto; }
  .modal-content { padding: 27px 19px; max-height: calc(100dvh - 24px); overflow-y: auto; }
  .payment-options-grid { grid-template-columns: 1fr; }
  .toast { right: 14px; bottom: 14px; left: 14px; justify-content: center; }
}

@media (max-width: 420px) {
  .hero-title { font-size: 2.8rem; }
  .hero-badge { font-size: 0.62rem; }
  .stat-value { font-size: 1.04rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:first-child { grid-column: auto; }
}

@media (max-width: 380px) {
  .navbar .container { padding-inline: 12px; }
  .nav-brand { gap: 8px; font-size: 1rem; }
  .brand-icon { width: 30px; height: 30px; }
  .nav-actions { gap: 8px; }
  .nav-actions #motionToggle,
  .nav-actions #accountQuickLink { display: none; }
  .nav-actions > .btn-primary { padding-inline: 12px; font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  body:not([data-motion="on"]) *,
  body:not([data-motion="on"]) *::before,
  body:not([data-motion="on"]) *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Ver. 1.2 - quieter content, richer motion */
html { scroll-padding-top: 74px; }
body { background: #f4f5ef; }
.navbar { background: rgba(244, 245, 239, 0.88); border-color: rgba(25, 28, 25, 0.1); }
.nav-links { gap: 31px; }
.hero {
  min-height: min(780px, 82svh);
  padding: 118px 0 75px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #17201c;
  border: 0;
  isolation: isolate;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero::before {
  z-index: -2;
  background-image: url('https://images.unsplash.com/photo-1519501025264-65ba15a82390?auto=format&fit=crop&w=2400&q=88');
  background-size: cover;
  background-position: center 48%;
  animation: city-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}

.hero::after {
  z-index: -1;
  background: linear-gradient(90deg, rgba(12, 18, 15, 0.86) 0%, rgba(12, 18, 15, 0.66) 42%, rgba(12, 18, 15, 0.13) 100%), linear-gradient(0deg, rgba(12, 18, 15, 0.43), transparent 58%);
}

.hero-grid {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.hero-text-col { max-width: 740px; }
.hero-badge { color: #d4f4a0; background: rgba(20, 28, 23, 0.42); border-color: rgba(212, 244, 160, 0.35); }
.hero-badge .pulse-dot { background: #baf14c; box-shadow: 0 0 14px #baf14c; animation: signal-pulse 1.8s ease-in-out infinite; }
.hero-badge-divider { color: #baf14c; }
.hero-title { color: #fff; font-size: 7rem; line-height: 0.84; font-weight: 600; }
.hero-brand-word { color: #fff; }
.hero-title .gradient-text, .hero-title-period { color: #baf14c; }
.hero-title-period { animation: punctuation-flash 2.3s ease-in-out infinite; }
.hero-desc { max-width: 440px; color: rgba(255, 255, 255, 0.78); font-size: 1.15rem; }
.hero-desc-lead { color: #fff; }
.hero-cta { margin-bottom: 31px; }
.hero-cta .btn-primary { min-width: 194px; min-height: 53px; }
.hero-cta .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.hero-cta .btn-outline:hover { color: #191c19; border-color: #fff; background: #fff; }
.hero-features-bar { display: none; }
.stat-value { color: #fff; }
.stat-label { color: rgba(255, 255, 255, 0.65); text-transform: none; }
.hero-visual {
  position: absolute;
  right: max(5vw, calc((100vw - 1280px) / 2));
  bottom: 74px;
  width: 265px;
  animation: route-float 7s ease-in-out infinite;
}

.cyber-card {
  min-height: 0;
  padding: 17px;
  background: rgba(18, 26, 21, 0.66);
  background-image: none;
  border-color: rgba(255, 255, 255, 0.19);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(15px);
}

.cyber-card::before { display: none; }
.card-header-status { margin-bottom: 8px; padding-bottom: 10px; }
.status-badge-secure { border: 0; background: transparent; padding: 0; }
.protocol-tag { font-size: 0.57rem; padding: 3px 6px; }
.shield-center { min-height: 122px; padding: 10px 0; }
.shield-icon-wrapper { width: 53px; height: 53px; margin-bottom: 10px; animation: shield-breathe 4s ease-in-out infinite; }
.shield-icon-wrapper svg { width: 27px; height: 27px; }
.radar-ring { width: 76px; height: 76px; animation-duration: 11s; }
.shield-title { font-size: 0.85rem; }
.shield-ip, .telemetry-row { display: none; }
.telemetry-row { gap: 6px; margin-top: 7px; padding-top: 9px; }
.telemetry-card { padding: 7px; background: transparent; border: 0; }
.telemetry-label { font-size: 0.53rem; }
.telemetry-val { font-size: 0.71rem; }

.how-strip { color: #191c19; background: #baf14c; overflow: hidden; }
.how-strip-inner { min-height: 62px; display: flex; align-items: center; gap: 21px; }
.how-strip-inner > span:not(.how-strip-line) { flex: 0 0 auto; font-size: 0.82rem; font-weight: 600; }
.how-strip-inner b { margin-right: 7px; font: 500 0.7rem var(--font-mono); }
.how-strip-line { height: 1px; flex: 1 1 50px; min-width: 20px; background: rgba(25, 28, 25, 0.25); transform-origin: left; animation: line-grow 1.3s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.how-strip-inner a { color: #191c19; font-size: 0.78rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.how-strip-inner a span { display: inline-block; transition: transform 180ms ease; }
.how-strip-inner a:hover span { transform: translate(3px, -3px); }

#features, #protocols, #instructions, #faq { display: none; }
#servers, #pricing, #demo { scroll-margin-top: 72px; }
#servers { padding-top: 91px; padding-bottom: 86px; }
#servers .section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 27px; }
#servers .section-tag { margin: 0; }
#servers .section-title { margin: 0; font-size: 2.5rem; }
#servers .section-desc { margin-left: auto; font-size: 0.84rem; }
.servers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; }
.server-card { position: relative; overflow: hidden; }
.server-info { gap: 11px; }
.country-flag { font-size: 1.3rem; filter: saturate(0.84); }
.server-name { font-size: 0.89rem; }
.server-protocols { font-size: 0.65rem; }
.server-metric { min-width: 58px; }
.server-load { font-size: 0.65rem; }
.server-refresh-wrap { text-align: left !important; }
.server-refresh-wrap .btn { min-height: 34px; padding: 6px 0; color: #6b7268; border: 0; font-size: 0.73rem; }
.server-refresh-wrap .btn:hover { color: #3357e8; background: transparent; }

#pricing { padding-top: 74px; padding-bottom: 82px; background: #e8ebe2; }
#pricing .section-head { margin-bottom: 30px; }
#pricing .section-title { font-size: 2.5rem; }
.pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.price-card { min-height: 238px; padding: 24px; box-shadow: none; }
.price-card.featured { order: 1; }
#card-3m { order: 2; }
#card-12m { order: 3; }
.plan-name { font-size: 1rem; }
.plan-desc { min-height: 0; margin-bottom: 25px; font-size: 0.77rem; }
.price-amount { font: 500 2.7rem var(--font-main); letter-spacing: 0; }
.price-period { font-size: 0.8rem; }
.price-savings { min-height: 0; margin-bottom: 14px; font-size: 0.72rem; }
.plan-features { display: none; }
.price-card .btn { margin-top: auto; }
.featured-ribbon { position: static; align-self: flex-start; margin-bottom: 17px; padding: 5px 8px; font-size: 0.56rem; }
.price-card:not(.featured) .featured-ribbon { display: none; }
#pricing .container > div[style*="margin-top: 40px"] { margin-top: 15px !important; text-align: left !important; font-size: 0.72rem !important; }

#demo { padding-top: 82px; padding-bottom: 90px; background: #f4f5ef; }
#demo .section-head { max-width: 600px; margin-bottom: 28px; }
#demo .section-title { font-size: 2.7rem; }
.demo-card { grid-template-columns: minmax(0, 1.1fr) minmax(200px, 0.55fr); gap: 25px; padding: 25px; box-shadow: none; }
.demo-card h3 { font-size: 1.1rem !important; }
.demo-card > div:first-child > p { max-width: 440px; font-size: 0.84rem !important; }
.demo-card > div:first-child > label { font: 500 0.67rem var(--font-mono) !important; text-transform: uppercase; }
.demo-card select { margin-bottom: 12px !important; }
.demo-card .demo-key-input { font-size: 0.7rem; }
.demo-card > div:last-child > div:last-child { max-width: 240px; margin-inline: auto; font-size: 0.71rem !important; }
.demo-qr-box { padding: 10px; }

.section-head, .price-card, .server-card, .demo-card { --reveal-delay: 0ms; }
.reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 800ms cubic-bezier(0.2, 0.75, 0.25, 1), transform 800ms cubic-bezier(0.2, 0.75, 0.25, 1); transition-delay: var(--reveal-delay, 0ms); }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.server-card.reveal-on-scroll { transform: translateY(16px); }
.server-card.reveal-on-scroll.is-visible { transform: translateY(0); }
.server-card::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #8cbe43; transform: scaleX(0); transform-origin: left; transition: transform 650ms cubic-bezier(0.2, 0.75, 0.25, 1); }
.server-card:hover::after { transform: scaleX(1); }

@keyframes city-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-1.2%, -0.8%, 0); }
}

@keyframes route-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}

@keyframes shield-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(186, 241, 76, 0); }
  50% { box-shadow: 0 0 0 10px rgba(186, 241, 76, 0.09); }
}

@keyframes signal-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(186, 241, 76, 0.65); }
  50% { opacity: 0.74; box-shadow: 0 0 0 7px rgba(186, 241, 76, 0); }
}

@keyframes punctuation-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes line-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes price-arrive {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .hero { min-height: min(720px, 78svh); }
  .hero-title { font-size: 5.8rem; }
  .hero-visual { right: 28px; bottom: 37px; width: 230px; }
  .hero-features-bar { max-width: 460px; }
  .servers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #servers .section-head { display: block; }
  #servers .section-tag { margin-bottom: 10px; }
  #servers .section-desc { margin-left: 0; }
}

@media (max-width: 640px) {
  .navbar .container { height: 60px; }
  .navbar .container > .nav-actions .btn-primary { min-height: 36px; }
  .hero { min-height: 705px; min-height: 82svh; padding: 105px 0 40px; align-items: flex-start; }
  .hero::before { background-position: 61% center; }
  .hero::after { background: linear-gradient(90deg, rgba(12, 18, 15, 0.76), rgba(12, 18, 15, 0.32)), linear-gradient(0deg, rgba(12, 18, 15, 0.5), transparent 72%); }
  .hero-grid { align-content: center; }
  .hero-text-col { padding-bottom: 175px; }
  .hero-badge { max-width: 100%; font-size: 0.59rem; }
  .hero-title { font-size: 4.1rem; margin-bottom: 18px; }
  .hero-desc { max-width: 330px; font-size: 0.94rem; }
  .hero-cta { max-width: 330px; flex-direction: row; gap: 8px; }
  .hero-cta .btn { width: auto; min-width: 0; flex: 1; padding-inline: 10px; font-size: 0.81rem; }
  .hero-cta .btn-primary { min-height: 47px; }
  .hero-features-bar { max-width: 320px; gap: 12px 16px; }
  .stat-value { font-size: 0.95rem; }
  .stat-label { font-size: 0.59rem; }
  .hero-visual { right: 22px; bottom: 25px; width: 218px; }
  .cyber-card { padding: 13px; }
  .shield-center { min-height: 100px; }
  .how-strip-inner { min-height: 56px; gap: 9px; }
  .how-strip-inner > span:not(.how-strip-line) { font-size: 0.6rem; }
  .how-strip-inner b { margin-right: 3px; font-size: 0.56rem; }
  .how-strip-line { min-width: 5px; }
  .how-strip-inner a { display: none; }
  #servers { padding-top: 62px; padding-bottom: 57px; }
  #servers .section-title, #pricing .section-title { font-size: 2.05rem; }
  #servers .section-desc { font-size: 0.8rem; }
  .servers-grid { grid-template-columns: 1fr; gap: 0; }
  .server-card { padding: 14px 0; }
  .server-info { gap: 10px; }
  .server-name { font-size: 0.88rem; }
  .server-protocols { font-size: 0.62rem; }
  #pricing { padding-top: 58px; padding-bottom: 60px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 8px; }
  .pricing-bot-note { align-items: flex-start; flex-wrap: wrap; line-height: 1.5; }
  .price-card .plan-features { margin-bottom: 16px; }
  .price-card .btn { min-height: 42px; }
  .price-card { min-height: 0; padding: 19px; }
  .price-card .price-wrap { margin-bottom: 3px; }
  .price-card .btn { width: 100%; }
  .featured-ribbon { margin-bottom: 10px; }
  #demo { padding-top: 60px; padding-bottom: 65px; }
  #demo .section-title { font-size: 2.1rem; }
  .demo-card { grid-template-columns: 1fr; padding: 17px; gap: 20px; }
  .demo-card > div:last-child { order: -1; }
  .demo-qr-box canvas { width: 160px; height: 160px; }
  .footer { padding: 35px 0 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; margin-bottom: 28px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:nth-child(n+2) { display: none; }
  .footer-brand-desc { margin-top: 9px; }
  .footer-bottom { padding-top: 16px; font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  body:not([data-motion="on"]) .hero::before,
  body:not([data-motion="on"]) .hero-title-period,
  body:not([data-motion="on"]) .hero-visual,
  body:not([data-motion="on"]) .hero-badge .pulse-dot,
  body:not([data-motion="on"]) .shield-icon-wrapper { animation: none !important; }
  body:not([data-motion="on"]) .reveal-on-scroll { opacity: 1; transform: none; }
}

/* Ver. 1.3 - cosmic reference direction */
:root {
  --bg-primary: #050316;
  --bg-secondary: #0b0821;
  --bg-card: rgba(17, 11, 43, 0.72);
  --bg-card-hover: rgba(31, 17, 64, 0.84);
  --bg-glass-input: rgba(4, 3, 20, 0.84);
  --accent-cyan: #54d7ff;
  --accent-cyan-glow: rgba(84, 215, 255, 0.42);
  --accent-purple: #a855f7;
  --accent-purple-glow: rgba(168, 85, 247, 0.48);
  --accent-emerald: #64e8aa;
  --accent-emerald-glow: rgba(100, 232, 170, 0.36);
  --accent-rose: #f05bb6;
  --text-main: #f6f0ff;
  --text-muted: #a99bc9;
  --text-sub: #82759f;
  --border-light: rgba(185, 149, 255, 0.17);
  --border-focus: rgba(240, 91, 182, 0.75);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 18px 55px rgba(0, 0, 0, 0.36);
  --shadow-glow: 0 0 40px rgba(168, 85, 247, 0.3);
  --font-main: 'Space Grotesk', sans-serif;
  --font-mono: 'DM Mono', monospace;
}

html { color-scheme: dark; background: #050316; }
body {
  color: var(--text-main);
  background: #050316;
  background-image: radial-gradient(ellipse at 50% -10%, rgba(67, 35, 133, 0.24), transparent 55%);
}
h1, h2, h3, h4 { color: var(--text-main); }
.container { max-width: 1240px; }

.cosmos-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #050316;
}

.cosmos-bg::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 42% 34% at 12% 14%, rgba(101, 38, 192, 0.34), transparent 72%),
    radial-gradient(ellipse 38% 38% at 88% 13%, rgba(190, 35, 132, 0.22), transparent 72%),
    radial-gradient(ellipse 55% 35% at 55% 87%, rgba(15, 104, 160, 0.2), transparent 74%),
    radial-gradient(ellipse 38% 43% at 6% 70%, rgba(109, 42, 175, 0.19), transparent 73%);
  filter: blur(32px);
  animation: nebula-drift 34s ease-in-out infinite alternate;
}

.milky-way {
  position: absolute;
  top: 5%;
  left: -30%;
  width: 160%;
  height: 63%;
  transform: rotate(-18deg);
  background: linear-gradient(180deg, transparent, rgba(114, 54, 195, 0.04) 32%, rgba(222, 76, 174, 0.1) 49%, rgba(67, 181, 224, 0.05) 63%, transparent);
  filter: blur(48px);
}

.stars-layer { position: absolute; inset: 0; background-repeat: repeat; }
.stars-1 {
  opacity: 0.66;
  background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 72px 106px, rgba(255,255,255,.7), transparent), radial-gradient(2px 2px at 132px 47px, #fff, transparent), radial-gradient(1px 1px at 186px 151px, rgba(197,176,255,.9), transparent), radial-gradient(1px 1px at 225px 79px, #fff, transparent);
  background-size: 260px 200px;
  animation: stars-twinkle 5s ease-in-out infinite alternate;
}
.stars-2 {
  opacity: 0.52;
  background-image: radial-gradient(1px 1px at 42px 18px, rgba(188,221,255,.9), transparent), radial-gradient(2px 2px at 108px 78px, #fff, transparent), radial-gradient(1px 1px at 171px 131px, rgba(255,205,240,.9), transparent), radial-gradient(1px 1px at 213px 36px, #fff, transparent);
  background-size: 230px 180px;
  animation: stars-twinkle 7s ease-in-out infinite alternate-reverse;
}
.stars-3 {
  opacity: 0.37;
  background-image: radial-gradient(1px 1px at 57px 81px, #fff, transparent), radial-gradient(1px 1px at 146px 39px, rgba(208,190,255,.9), transparent), radial-gradient(2px 2px at 201px 153px, #fff, transparent);
  background-size: 270px 210px;
  animation: stars-twinkle 9s ease-in-out infinite alternate;
}

.cosmic-grid {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.36;
  background-image: linear-gradient(rgba(173, 119, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(173, 119, 255, 0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 80% 72% at 50% 34%, #000 22%, transparent 100%);
}

.planet-decor, .planet-decor-2 {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
}
.planet-decor {
  top: 14%; right: 4%; width: 130px; height: 130px;
  opacity: 0.5;
  background: radial-gradient(circle at 31% 28%, #df82ff, #6429b4 55%, #150b38 100%);
  box-shadow: inset -20px -23px 45px rgba(0,0,0,.68), 0 0 70px rgba(168,85,247,.33);
  animation: cosmic-float 12s ease-in-out infinite;
}
.planet-decor::before, .planet-decor::after { content: ''; position: absolute; inset: -24px; border: 1px solid rgba(231, 91, 195, .35); border-radius: 50%; transform: rotate(-25deg) scaleY(.36); }
.planet-decor::after { inset: -37px; border-color: rgba(78, 207, 255, .24); }
.planet-decor-2 {
  bottom: 12%; left: 2%; width: 52px; height: 52px;
  opacity: .55;
  background: radial-gradient(circle at 30% 25%, #7deaff, #146aa2 64%, #081b39);
  box-shadow: 0 0 40px rgba(58, 193, 255, .38);
  animation: cosmic-float 15s ease-in-out infinite reverse;
}

.comet { position: absolute; top: 12%; left: -12%; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff, 0 0 24px #c874ff; opacity: 0; animation: comet-flight 12s ease-in infinite; }
.comet::before { content: ''; position: absolute; top: 1px; right: 2px; width: 145px; height: 1px; transform: rotate(-9deg); transform-origin: right; background: linear-gradient(90deg, transparent, rgba(207, 165, 255, .75)); }
.comet-2 { top: 52%; animation-delay: 6s; animation-duration: 15s; }

.navbar {
  z-index: 100;
  color: var(--text-main);
  background: rgba(7, 4, 24, 0.72);
  border-bottom-color: rgba(185, 149, 255, 0.15);
  backdrop-filter: blur(22px) saturate(150%);
}
.nav-brand { color: var(--text-main); }
.brand-icon { color: #fff; background: linear-gradient(135deg, #a855f7, #ec4899 58%, #38bdf8); box-shadow: 0 0 26px rgba(168, 85, 247, .42); }
.nav-link { color: #a99bc9; }
.nav-link:hover, .nav-link.active { color: #fff; text-shadow: 0 0 20px rgba(195, 129, 255, .68); }
.btn { border-radius: 999px; }
.btn-primary, .btn-glow { color: #fff; background: linear-gradient(135deg, #a855f7, #ec4899 55%, #38bdf8); box-shadow: 0 10px 35px -10px rgba(191, 74, 226, .7), inset 0 1px 0 rgba(255,255,255,.24); }
.btn-primary:hover, .btn-glow:hover { color: #fff; background: linear-gradient(135deg, #bb71ff, #f263c5 55%, #54d7ff); box-shadow: 0 18px 45px -10px rgba(236, 72, 153, .68), 0 0 28px rgba(168, 85, 247, .45); }
.btn-outline { color: var(--text-main); background: rgba(22, 13, 52, .55); border-color: rgba(190, 157, 255, .37); }
.btn-outline:hover { color: #fff; background: rgba(168, 85, 247, .16); border-color: rgba(221, 180, 255, .8); }

.hero {
  z-index: 2;
  min-height: 680px;
  min-height: min(760px, 89svh);
  padding: 128px 0 64px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--text-main);
  background: transparent;
  border: 0;
  isolation: isolate;
}
.hero::before, .hero::after { display: none; }
.hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr); gap: 20px; align-items: center; }
.hero-text-col { max-width: 660px; }
.hero-badge {
  padding: 8px 16px;
  color: #d8c8ff;
  background: rgba(168, 85, 247, .11);
  border: 1px solid rgba(190, 151, 255, .32);
  border-radius: 999px;
  box-shadow: 0 0 30px rgba(168, 85, 247, .18);
  backdrop-filter: blur(12px);
}
.dot-orbit { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 12px #4ade80; animation: pulse 2s infinite; }
.hero-badge-divider { padding: 0 4px; color: #f05bb6; }
.hero-title { color: #f7f2ff; font-size: clamp(3rem, 4vw, 3.8rem); font-weight: 800; line-height: 1.02; text-shadow: 0 0 54px rgba(168, 85, 247, .26); }
.hero-title .gradient-text { white-space: normal; background: linear-gradient(115deg, #c084fc 0%, #f472b6 52%, #67d8ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 27px rgba(213, 82, 206, .32)); }
.hero-desc { max-width: 510px; color: #c5b8e2; font-size: 1.08rem; }
.hero-cta { gap: 12px; }
.hero-trust { display: flex; align-items: center; gap: 12px; color: #a99bc9; font-size: .84rem; }
.trust-mark { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(190, 151, 255, .35); border-radius: 50%; color: #fff; background: linear-gradient(135deg, rgba(168,85,247,.5), rgba(56,189,248,.25)); font: 700 .95rem 'Orbitron', sans-serif; box-shadow: 0 0 20px rgba(168,85,247,.23); }
.hero-trust i { display: inline-block; width: 3px; height: 3px; margin: 0 7px 3px; border-radius: 50%; background: #55d8ff; }

.hero-visual { position: relative; inset: auto; width: auto; max-width: none; min-height: 0; display: flex; align-items: center; justify-content: center; animation: none; }
.cosmic-scene { position: relative; width: min(100%, 530px); aspect-ratio: 1; transform: translate3d(0,0,0); transition: transform 800ms cubic-bezier(.2,.75,.25,1); }
.orb-glow { position: absolute; z-index: 1; top: 50%; left: 50%; width: 72%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(168,85,247,.48), rgba(236,72,153,.2) 48%, transparent 72%); filter: blur(30px); animation: glow-breathe 5s ease-in-out infinite; }
.orbit { position: absolute; z-index: 2; top: 50%; left: 50%; border: 1px dashed rgba(176, 126, 255, .38); border-radius: 50%; transform: translate(-50%,-50%); animation: orbit-spin 25s linear infinite; }
.orbit-1 { width: 74%; height: 74%; animation-duration: 20s; }
.orbit-2 { width: 92%; height: 92%; border-color: rgba(240,91,182,.33); animation-duration: 31s; animation-direction: reverse; }
.orbit-3 { width: 100%; height: 100%; border-color: rgba(84,215,255,.24); animation-duration: 44s; }
.orbit-dot { position: absolute; top: 0; left: 50%; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%,-50%); background: linear-gradient(135deg,#a855f7,#ec4899); box-shadow: 0 0 22px #da65f4, 0 0 38px rgba(236,72,153,.62); }
.orbit-1 .orbit-dot { width: 10px; height: 10px; background: #48d8ff; box-shadow: 0 0 24px #38bdf8; }
.orbit-2 .orbit-dot { width: 15px; height: 15px; background: #ed68bd; box-shadow: 0 0 24px #ec4899; }
.orbit-3 .orbit-dot { width: 8px; height: 8px; background: #b66bff; }
.planet-shield {
  position: absolute; z-index: 3; top: 50%; left: 50%; width: 43%; aspect-ratio: 1; display: grid; place-items: center;
  transform: translate(-50%,-50%); border: 1px solid rgba(219,188,255,.54); border-radius: 50%;
  background: radial-gradient(circle at 28% 25%, rgba(242,100,191,.4), transparent 45%), radial-gradient(circle at 72% 72%, rgba(56,189,248,.32), transparent 52%), linear-gradient(145deg, rgba(112,52,191,.55), rgba(30,17,70,.85));
  box-shadow: 0 0 75px rgba(168,85,247,.63), inset 0 0 55px rgba(168,85,247,.3), inset 0 1px 0 rgba(255,255,255,.23);
  backdrop-filter: blur(18px); animation: shield-pulse 4s ease-in-out infinite;
}
.planet-shield svg { width: 37%; height: 37%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgba(255,255,255,.8)) drop-shadow(0 0 25px rgba(168,85,247,.85)); }
.floating-chip { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(191,155,255,.35); border-radius: 13px; color: #eee6ff; background: rgba(12,7,34,.8); box-shadow: 0 0 28px rgba(110,51,186,.32), inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter: blur(14px); font: 500 .69rem var(--font-mono); animation: chip-float 5s ease-in-out infinite; }
.chip-1 { top: 7%; right: 3%; }
.chip-2 { bottom: 13%; left: 0; animation-delay: 1.2s; }
.chip-3 { top: 42%; right: -4%; animation-delay: 2.1s; }
.chip-signal { width: 7px; height: 7px; border-radius: 50%; background: #62edaa; box-shadow: 0 0 10px #62edaa; }
.chip-spark { color: #60d9ff; text-shadow: 0 0 12px #38bdf8; }
.star-particle { position: absolute; z-index: 4; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 9px #fff, 0 0 18px #bd70ff; animation: particle-twinkle 3s ease-in-out infinite; }
.sp-1 { top: 16%; left: 22%; }.sp-2 { top: 70%; left: 12%; animation-delay: .6s; }.sp-3 { top: 24%; left: 78%; animation-delay: 1.1s; }.sp-4 { top: 82%; left: 72%; animation-delay: 1.7s; }.sp-5 { top: 51%; left: 7%; animation-delay: .3s; }.sp-6 { top: 9%; left: 61%; animation-delay: 1.4s; }

.marquee-section { position: relative; z-index: 2; overflow: hidden; padding: 18px 0; border-block: 1px solid rgba(185,149,255,.14); background: rgba(10,6,30,.66); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { width: max-content; display: flex; align-items: center; gap: 34px; animation: marquee-drift 28s linear infinite; white-space: nowrap; }
.marquee-track span { color: #a99bc9; font: 600 .8rem 'Orbitron', sans-serif; letter-spacing: .08em; }
.marquee-track b { color: #d75ce0; font-size: .8rem; text-shadow: 0 0 15px rgba(236,72,153,.8); }
.marquee-section:hover .marquee-track { animation-play-state: paused; }

#features, #protocols, #instructions, #faq { display: none; }
.section { z-index: 2; background: transparent; }
.section-head { color: var(--text-main); }
.section-tag { color: #ef77d1; text-shadow: 0 0 20px rgba(236,72,153,.37); }
.section-title, #servers .section-title, #pricing .section-title, #demo .section-title { color: #f6f0ff; text-shadow: 0 0 38px rgba(168,85,247,.2); }
.section-desc { color: #a99bc9; }
#servers .section-desc { color: #9d8fbd; }
.server-card { border-color: rgba(185,149,255,.17); }
.server-card:hover { border-color: rgba(231,94,193,.48); }
.country-flag { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #dcbcff; border: 1px solid rgba(186,147,244,.25); border-radius: 10px; background: rgba(127,77,187,.15); font: 500 .66rem var(--font-mono); }
.server-name { color: #f3edff; }
.server-protocols, .server-load { color: #8b7bb8; }
.ping-tag { color: #7ee9ba; }
.node-role { display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: #b9a7d4; font: 500 .63rem var(--font-mono); white-space: nowrap; }
.node-role .ping-indicator { background: #6ce5aa; box-shadow: 0 0 9px rgba(108,229,170,.6); }
.server-load { text-align: right; }
.server-refresh-wrap .btn { color: #a99bc9; }
.server-refresh-wrap .btn:hover { color: #fff; }

#pricing { background: linear-gradient(180deg, rgba(12,8,32,.82), rgba(6,4,22,.93)); border-block: 1px solid rgba(185,149,255,.13); }
#pricing .section-head { margin-bottom: 32px; }
.pricing-grid { gap: 19px; }
.price-card { color: var(--text-main); background: rgba(14,9,37,.71); border: 1px solid rgba(170,133,240,.23); border-radius: 20px; box-shadow: 0 22px 58px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: blur(18px); transition: transform .4s cubic-bezier(.4,0,.2,1), border-color .4s, box-shadow .4s; }
.price-card:hover { transform: translateY(-7px); border-color: rgba(190,130,255,.6); box-shadow: 0 30px 65px rgba(87,40,147,.3), 0 0 30px rgba(168,85,247,.16); }
.price-card.featured { color: var(--text-main); background: linear-gradient(160deg, rgba(107,47,163,.37), rgba(36,14,67,.84) 58%, rgba(17,10,42,.93)); border: 1px solid rgba(234,97,196,.62); box-shadow: 0 25px 65px rgba(104,35,151,.32), 0 0 45px rgba(168,85,247,.22), inset 0 1px 0 rgba(255,255,255,.16); }
.price-card.featured:hover { transform: translateY(-7px); }
.price-card .plan-features { display: grid; gap: 0; margin: 12px 0 20px; }
.price-card .plan-feature-item { align-items: flex-start; margin: 0; font-size: .78rem; }
.price-card .plan-feature-item svg { width: 16px; height: 16px; margin-top: 2px; }
.price-card .price-amount { font-size: 2.4rem; }
.price-card .price-period { max-width: 112px; font-size: .68rem; line-height: 1.3; }
.price-card .price-savings { min-height: 18px; margin-bottom: 6px; font-size: .68rem; }
.tariff-icon { display: grid; place-items: center; color: #f2ddff; font: 600 1rem 'Orbitron',sans-serif; }
.price-card:nth-child(1) .tariff-icon { color: #80ddff; }
.price-card:nth-child(2) .tariff-icon { color: #e898ee; }
.price-card:nth-child(3) .tariff-icon { color: #8ef0c2; }
.tariff-telegram-link { gap: 7px; margin-top: auto; text-align: center; white-space: normal; }
.tariff-telegram-link span { color: #6cddff; }
.pricing-bot-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 19px; color: #9385ae; font-size: .71rem; text-align: center; }
.pricing-bot-note > span { color: #6bdbff; }
.pricing-bot-note a { color: #d4b1ff; text-decoration: none; }
.pricing-bot-note a:hover { color: #fff; }

.test-offer.price-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 0;
  margin-top: 16px;
  padding: 22px 26px;
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  box-shadow: none;
}
.test-offer-copy .section-tag { margin-bottom: 7px; }
.test-offer-copy .plan-name { margin-bottom: 4px; }
.test-offer-copy .plan-desc { margin: 0; }
.test-offer-action { display: flex; align-items: center; gap: 22px; }
.test-offer-action .price-wrap { margin: 0; }
.test-offer-action .price-amount { font-size: 1.8rem; }

@media (max-width: 600px) {
  .test-offer.price-card { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .test-offer-action { justify-content: space-between; gap: 12px; }
  .test-offer-action .btn { white-space: normal; }
}
.featured-ribbon { position: static; align-self: flex-start; margin-bottom: 15px; color: #fff; background: linear-gradient(120deg,#a855f7,#ec4899,#38bdf8); box-shadow: 0 0 25px rgba(236,72,153,.45); }
.plan-name, .price-amount { color: #fbf7ff; }
.plan-desc, .price-period, .plan-feature-item { color: #a99bc9; }
.price-savings { color: #79e6aa; }
.plan-feature-item svg { color: #62d9ff; }
.switch-pill { background: rgba(15,9,39,.78); border-color: rgba(170,133,240,.26); border-radius: 999px; }
.switch-btn { color: #a99bc9; border-radius: 999px; }
.switch-btn.active { color: #fff; background: linear-gradient(120deg,#a855f7,#ec4899); box-shadow: 0 0 25px rgba(168,85,247,.46); }
.discount-tag { color: #d9ffeb; background: rgba(74,222,128,.18); border-radius: 999px; }
#pricing .container > div[style*="margin-top: 40px"] { color: #8b7bb8 !important; }
#pricing .container > div[style*="margin-top: 40px"] strong { color: #b9add4 !important; }

#demo { background: radial-gradient(ellipse at 50% 50%, rgba(93,35,158,.18), transparent 65%); }
.demo-card { color: var(--text-main); background: rgba(13,8,35,.76); border-color: rgba(180,140,255,.23); border-radius: 21px; box-shadow: 0 25px 70px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.09); backdrop-filter: blur(18px); }
.demo-card h3 { color: #f6f0ff; }
.demo-card p, .demo-card label { color: #a99bc9 !important; }
.demo-card select, .demo-key-input { color: #e8ddff !important; background: rgba(5,3,22,.72) !important; border: 1px solid rgba(176,135,244,.25) !important; border-radius: 10px !important; }
.demo-key-input { color: #79dfff !important; }
.demo-key-input:focus { border-color: rgba(240,91,182,.7) !important; }
.demo-qr-box { border: 1px solid rgba(194,155,255,.32); border-radius: 12px; box-shadow: 0 0 36px rgba(168,85,247,.18); }
.bot-route-visual { position: relative; width: 210px; height: 180px; margin: 0 auto; }
.route-orbit { position: absolute; top: 50%; left: 50%; width: 144px; height: 96px; border: 1px dashed rgba(177,131,255,.4); border-radius: 50%; transform: translate(-50%,-50%) rotate(-26deg); }
.route-orbit-b { width: 184px; height: 124px; border-color: rgba(80,207,255,.27); transform: translate(-50%,-50%) rotate(34deg); }
.route-node { position: absolute; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(213,170,255,.5); border-radius: 50%; color: #f3e7ff; background: #20113d; box-shadow: 0 0 24px rgba(168,85,247,.4); font: 500 .58rem var(--font-mono); }
.route-node-main { top: 22px; left: 31px; }
.route-node-backup { right: 26px; bottom: 20px; color: #a4ecff; border-color: rgba(80,207,255,.45); box-shadow: 0 0 22px rgba(80,207,255,.26); }
.route-core { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; place-items: center; width: 57px; height: 57px; transform: translate(-50%,-50%); border: 1px solid rgba(223,184,255,.65); border-radius: 50%; color: #fff; background: radial-gradient(circle at 30% 25%,rgba(231,106,210,.5),transparent 60%),linear-gradient(145deg,#572788,#16102f); box-shadow: 0 0 42px rgba(168,85,247,.58); font: 600 .95rem 'Orbitron',sans-serif; }
.bot-route-caption { color: #9a8cb4; font: 500 .56rem var(--font-mono); letter-spacing: .035em; }
.bot-route-caption i { display: inline-block; width: 4px; height: 4px; margin: 0 6px 2px; border-radius: 50%; background: #d96ce2; }

.support-section { padding: 94px 0 110px; border-top: 1px solid rgba(185,149,255,.14); background: linear-gradient(135deg, rgba(20,11,49,.78), rgba(8,5,26,.9)); }
.support-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center; }
.support-section .section-title { margin-bottom: 0; font-size: clamp(2.3rem, 4vw, 3.7rem); }
.support-note { position: relative; max-width: 510px; padding: 30px 31px 27px; border: 1px solid rgba(180,140,255,.24); border-radius: 19px; background: rgba(18,10,44,.68); box-shadow: 0 20px 55px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07); }
.support-icon { position: absolute; top: -16px; left: 25px; width: 32px; height: 32px; display: grid; place-items: center; color: #eeb7ff; border: 1px solid rgba(220,142,255,.4); border-radius: 50%; background: #0a061e; font: 600 1rem var(--font-mono); box-shadow: 0 0 20px rgba(236,72,153,.2); }
.support-note p { color: #b9add4; font-size: .98rem; line-height: 1.75; margin-bottom: 22px; }
.support-note a { color: #e4b6ff; text-decoration: none; font-size: .84rem; font-weight: 700; }
.support-note a span { display: inline-block; margin-left: 4px; color: #62d9ff; transition: transform .2s ease; }
.support-note a:hover span { transform: translate(3px,-3px); }

.footer { z-index: 2; color: var(--text-main); background: rgba(4,3,17,.88); border-top: 1px solid rgba(185,149,255,.16); }
.footer .nav-brand { color: #f6f0ff; }
.footer .gradient-text { color: #d488ff; }
.footer-brand-desc, .footer-link { color: #9a8db7; }
.footer-col-title { color: #eee6ff; }
.footer-link:hover { color: #f07dc7; }
.footer-bottom { color: #796d95; border-color: rgba(185,149,255,.15); }

.modal-overlay { background: rgba(3,0,20,.84); backdrop-filter: blur(16px); }
.modal-content { color: var(--text-main); background: linear-gradient(180deg, rgba(20,12,50,.98), rgba(8,5,27,.99)); border: 1px solid rgba(236,72,153,.43); box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 58px rgba(168,85,247,.27); }
.modal-content h3 { color: #f6f0ff; }
.modal-content p, .modal-content label { color: #a99bc9 !important; }
.modal-close { color: #9485b1; }
.modal-close:hover { color: #fff; }
.pay-card { color: #eee6ff; background: rgba(140,100,255,.06); border-color: rgba(160,120,255,.18); }
.pay-card:hover, .pay-card.active { color: #fff; background: rgba(236,72,153,.12); border-color: rgba(236,72,153,.55); }
.pay-title { color: #f1eaff; }
.modal-content input { color: #f2ecff !important; background: rgba(3,0,20,.66) !important; border-color: rgba(160,120,255,.24) !important; }
.modal-content > div[style*="rgba(138, 43, 226"] { background: rgba(168,85,247,.1) !important; border-color: rgba(168,85,247,.27) !important; color: #a99bc9 !important; }
.modal-content > div[style*="rgba(138, 43, 226"] strong { color: #f6f0ff !important; }
.modal-content > div[style*="rgba(138, 43, 226"] span { color: #e884cf !important; }
.checkout-terms-consent { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; color: #a99bc9 !important; font-size: .74rem; line-height: 1.5; }
.checkout-terms-consent input { flex: 0 0 auto; width: 16px; height: 16px; min-height: 16px; margin: 2px 0 0; accent-color: #c878ef; }
.checkout-terms-consent a { color: #e4b6ff; }
.toast { color: #f4edff; background: rgba(13,8,35,.96); border-color: rgba(84,215,255,.65); box-shadow: 0 12px 35px rgba(0,0,0,.55), 0 0 28px rgba(168,85,247,.26); }
.toast svg { stroke: #64e8aa !important; }

@keyframes nebula-drift { to { transform: scale(1.13) translate3d(-2%, 1.5%, 0); } }
@keyframes stars-twinkle { from { opacity: .3; } to { opacity: .85; } }
@keyframes comet-flight { 0%, 9% { opacity: 0; transform: translate3d(0,0,0); } 15%, 55% { opacity: .9; } 76%, 100% { opacity: 0; transform: translate3d(125vw, 42vh, 0); } }
@keyframes cosmic-float { 50% { transform: translateY(-19px); } }
@keyframes orbit-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes glow-breathe { 50% { transform: translate(-50%,-50%) scale(1.14); opacity: .9; } }
@keyframes shield-pulse { 50% { box-shadow: 0 0 110px rgba(236,72,153,.7), inset 0 0 70px rgba(236,72,153,.28), inset 0 1px 0 rgba(255,255,255,.25); } }
@keyframes chip-float { 50% { translate: 0 -12px; } }
@keyframes particle-twinkle { 50% { opacity: .35; scale: .75; } }
@keyframes marquee-drift { to { transform: translateX(-50%); } }

@media (max-width: 992px) {
  .hero { min-height: auto; padding: 116px 0 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .hero-text-col { max-width: 760px; margin-inline: auto; }
  .hero-desc { margin-inline: auto; }
  .hero-cta, .hero-trust { justify-content: center; }
  .hero-visual { width: min(100%, 490px); margin: -5px auto 0; }
  .planet-decor { width: 86px; height: 86px; }
  .planet-decor-2 { display: none; }
  .support-inner { gap: 35px; }
}

@media (max-width: 640px) {
  .cosmic-grid { background-size: 58px 58px; opacity: .26; }
  .navbar .container { height: 64px; }
  .navbar .nav-brand,
  .navbar .nav-brand > span,
  .navbar .nav-brand .gradient-text { flex-wrap: nowrap; white-space: nowrap; }
  .navbar .nav-brand { flex: 0 0 auto; font-size: .95rem; }
  .nav-links { display: none; }
  .nav-actions .btn-outline { display: none; }
  .motion-toggle { width: 36px; min-height: 36px; padding: 7px; }
  .motion-toggle-label { display: none; }
  .hero { padding: 104px 0 30px; }
  .hero-grid { gap: 0; }
  .hero-text-col { padding-bottom: 0; }
  .hero-badge { font-size: .59rem; padding: 7px 11px; }
  .hero-title { font-size: clamp(2.55rem, 11vw, 3.8rem); line-height: 1.03; margin-bottom: 17px; }
  .hero-title .gradient-text { white-space: nowrap; }
  .hero-desc { max-width: 350px; font-size: .94rem; margin-bottom: 23px; }
  .hero-cta { gap: 8px; margin-bottom: 4px; }
  .hero-cta .btn { min-height: 45px; padding: 10px 14px; font-size: .78rem; }
  .hero-trust { font-size: .72rem; }
  .hero-visual { width: min(94%, 355px); margin-top: 0; }
  .cosmic-scene { width: 100%; }
  .floating-chip { padding: 8px 10px; font-size: .56rem; }
  .chip-1 { top: 7%; right: 0; }.chip-2 { bottom: 12%; left: -2%; }.chip-3 { right: -4%; top: 43%; }
  .orbit-1 { width: 71%; height: 71%; }
  .planet-shield { width: 41%; }
  .marquee-section { padding: 14px 0; }
  .marquee-track { gap: 23px; }
  .marquee-track span { font-size: .66rem; }
  #servers { padding-top: 58px; }
  #pricing { padding-top: 58px; }
  .support-section { padding: 66px 0 74px; }
  .support-inner { grid-template-columns: 1fr; gap: 31px; }
  .support-section .section-title { font-size: 2.45rem; }
  .support-note { padding: 27px 22px 23px; }
  .planet-decor { top: 12%; right: -20px; opacity: .32; }
  .comet-2 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body:not([data-motion="on"]) .cosmos-bg::before,
  body:not([data-motion="on"]) .stars-1,
  body:not([data-motion="on"]) .stars-2,
  body:not([data-motion="on"]) .stars-3,
  body:not([data-motion="on"]) .comet,
  body:not([data-motion="on"]) .planet-decor,
  body:not([data-motion="on"]) .planet-decor-2,
  body:not([data-motion="on"]) .dot-orbit,
  body:not([data-motion="on"]) .orbit,
  body:not([data-motion="on"]) .orb-glow,
  body:not([data-motion="on"]) .planet-shield,
  body:not([data-motion="on"]) .floating-chip,
  body:not([data-motion="on"]) .star-particle,
  body:not([data-motion="on"]) .marquee-track { animation: none !important; }
  body:not([data-motion="on"]) .cosmic-scene { transform: none !important; }
}