/* ============================================
   Snet.OW — Dark Theme, Modern Tech Aesthetic
   ============================================ */

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

:root {
  --color-bg-primary: #06090f;
  --color-bg-secondary: #0b0e18;
  --color-surface: #111627;
  --color-surface-hover: #1a1f38;
  --color-border: #1c2340;
  --color-border-light: rgba(255,255,255,0.04);
  --color-text-primary: #eceff6;
  --color-text-secondary: #a8adc5;
  --color-text-muted: #747a99;
  --color-accent: #4f8de6;
  --color-accent-hover: #6ba3f5;
  --color-accent-light: #8ab8fe;
  --color-accent-glow: rgba(79,141,230,0.12);
  --color-accent-glow-strong: rgba(79,141,230,0.22);
  --color-gradient-start: #4f8de6;
  --color-gradient-mid: #5c9af0;
  --color-gradient-end: #3b7ed8;
  --color-code-bg: #111627;
  --color-code-border: #1c2340;
  --shadow-glow: 0 0 50px rgba(79,141,230,0.12);
  --shadow-glow-strong: 0 0 80px rgba(79,141,230,0.20);
  /* Premium motion curves */
  --ease-spring: cubic-bezier(0.32,0.72,0,1);
  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --ease-out-back: cubic-bezier(0.34,1.56,0.64,1);
}

/* ============================================
   Living Glow — Continuous flow, never repeats.
   Each orb has its own @property and animation (prime durations).
   6 orbs (Layer A) + 3 orbs (Layer B):
   18 independent animations × prime periods → unique forever.
   ============================================ */

@property --ga1x { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --ga1y { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --ga1o { syntax: '<number>'; inherits: false; initial-value: 0.16; }
@property --ga2x { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --ga2y { syntax: '<percentage>'; inherits: false; initial-value: 60%; }
@property --ga2o { syntax: '<number>'; inherits: false; initial-value: 0.12; }
@property --ga3x { syntax: '<percentage>'; inherits: false; initial-value: 75%; }
@property --ga3y { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --ga3o { syntax: '<number>'; inherits: false; initial-value: 0.10; }
@property --ga4x { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --ga4y { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --ga4o { syntax: '<number>'; inherits: false; initial-value: 0.09; }
@property --ga5x { syntax: '<percentage>'; inherits: false; initial-value: 85%; }
@property --ga5y { syntax: '<percentage>'; inherits: false; initial-value: 70%; }
@property --ga5o { syntax: '<number>'; inherits: false; initial-value: 0.08; }
@property --ga6x { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
@property --ga6y { syntax: '<percentage>'; inherits: false; initial-value: 15%; }
@property --ga6o { syntax: '<number>'; inherits: false; initial-value: 0.07; }
@property --gb1x { syntax: '<percentage>'; inherits: false; initial-value: 25%; }
@property --gb1y { syntax: '<percentage>'; inherits: false; initial-value: 35%; }
@property --gb1o { syntax: '<number>'; inherits: false; initial-value: 0.10; }
@property --gb2x { syntax: '<percentage>'; inherits: false; initial-value: 70%; }
@property --gb2y { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
@property --gb2o { syntax: '<number>'; inherits: false; initial-value: 0.09; }
@property --gb3x { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --gb3y { syntax: '<percentage>'; inherits: false; initial-value: 60%; }
@property --gb3o { syntax: '<number>'; inherits: false; initial-value: 0.08; }

body {
  transition: background-color 0.6s ease, color 0.6s ease;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  max-width: 100vw;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: #06090f;
  transition: background 0.6s ease;
}

/* Layer A — 6 orbs, 18 independent prime-period animations */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at var(--ga1x) var(--ga1y), rgba(79,141,230,var(--ga1o)) 0%, transparent 55%),
    radial-gradient(ellipse 55% 50% at var(--ga2x) var(--ga2y), rgba(100,160,240,var(--ga2o)) 0%, transparent 45%),
    radial-gradient(ellipse 50% 50% at var(--ga3x) var(--ga3y), rgba(59,130,216,var(--ga3o)) 0%, transparent 50%),
    radial-gradient(ellipse 50% 45% at var(--ga4x) var(--ga4y), rgba(79,141,230,var(--ga4o)) 0%, transparent 45%),
    radial-gradient(ellipse 45% 50% at var(--ga5x) var(--ga5y), rgba(87,155,240,var(--ga5o)) 0%, transparent 48%),
    radial-gradient(ellipse 45% 45% at var(--ga6x) var(--ga6y), rgba(67,125,210,var(--ga6o)) 0%, transparent 48%);
  animation:
    orbX1 21s ease-in-out infinite, orbY1 23s ease-in-out infinite, orbO1 19s ease-in-out infinite,
    orbX2 25s ease-in-out infinite, orbY2 20s ease-in-out infinite, orbO2 17s ease-in-out infinite,
    orbX3 29s ease-in-out infinite, orbY3 22s ease-in-out infinite, orbO3 17s ease-in-out infinite,
    orbX4 23s ease-in-out infinite, orbY4 28s ease-in-out infinite, orbO4 21s ease-in-out infinite,
    orbX5 27s ease-in-out infinite, orbY5 19s ease-in-out infinite, orbO5 24s ease-in-out infinite,
    orbX6 26s ease-in-out infinite, orbY6 20s ease-in-out infinite, orbO6 18s ease-in-out infinite;
  transition: background 0.6s ease;
}

/* Layer B — 3 counter-flow orbs on .global-particles */
.global-particles::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 50% at var(--gb1x) var(--gb1y), rgba(100,160,240,var(--gb1o)) 0%, transparent 50%),
    radial-gradient(ellipse 45% 50% at var(--gb2x) var(--gb2y), rgba(67,125,210,var(--gb2o)) 0%, transparent 48%),
    radial-gradient(ellipse 50% 45% at var(--gb3x) var(--gb3y), rgba(87,155,240,var(--gb3o)) 0%, transparent 48%);
  animation:
    orbBx1 28s ease-in-out infinite, orbBy1 24s ease-in-out infinite, orbBo1 22s ease-in-out infinite,
    orbBx2 26s ease-in-out infinite, orbBy2 22s ease-in-out infinite, orbBo2 20s ease-in-out infinite,
    orbBx3 19s ease-in-out infinite, orbBy3 25s ease-in-out infinite, orbBo3 21s ease-in-out infinite;
}

/* ---- Layer A keyframes (6 orbs x 3 props = 18 animations) ---- */
@keyframes orbX1 { 0%,100%{--ga1x:50%}20%{--ga1x:75%}40%{--ga1x:85%}60%{--ga1x:25%}80%{--ga1x:12%} }
@keyframes orbY1 { 0%,100%{--ga1y:18%}25%{--ga1y:45%}50%{--ga1y:82%}75%{--ga1y:22%} }
@keyframes orbO1 { 0%,100%{--ga1o:0.16}33%{--ga1o:0.21}66%{--ga1o:0.07} }
@keyframes orbX2 { 0%,100%{--ga2x:20%}30%{--ga2x:68%}60%{--ga2x:82%}85%{--ga2x:10%} }
@keyframes orbY2 { 0%,100%{--ga2y:60%}35%{--ga2y:22%}70%{--ga2y:82%} }
@keyframes orbO2 { 0%,100%{--ga2o:0.12}50%{--ga2o:0.18} }
@keyframes orbX3 { 0%,100%{--ga3x:75%}25%{--ga3x:48%}50%{--ga3x:14%}75%{--ga3x:88%} }
@keyframes orbY3 { 0%,100%{--ga3y:30%}33%{--ga3y:72%}66%{--ga3y:14%} }
@keyframes orbO3 { 0%,100%{--ga3o:0.10}50%{--ga3o:0.16} }
@keyframes orbX4 { 0%,100%{--ga4x:50%}40%{--ga4x:88%}80%{--ga4x:18%} }
@keyframes orbY4 { 0%,100%{--ga4y:80%}50%{--ga4y:14%} }
@keyframes orbO4 { 0%,100%{--ga4o:0.09}33%{--ga4o:0.15}66%{--ga4o:0.04} }
@keyframes orbX5 { 0%,100%{--ga5x:85%}50%{--ga5x:14%} }
@keyframes orbY5 { 0%,100%{--ga5y:70%}25%{--ga5y:8%}50%{--ga5y:88%}75%{--ga5y:38%} }
@keyframes orbO5 { 0%,100%{--ga5o:0.08}50%{--ga5o:0.15} }
@keyframes orbX6 { 0%,100%{--ga6x:10%}33%{--ga6x:62%}66%{--ga6x:92%} }
@keyframes orbY6 { 0%,100%{--ga6y:15%}50%{--ga6y:74%} }
@keyframes orbO6 { 0%,100%{--ga6o:0.07}50%{--ga6o:0.14} }

/* ---- Layer B keyframes (3 orbs x 3 props = 9 animations) ---- */
@keyframes orbBx1 { 0%,100%{--gb1x:25%}50%{--gb1x:78%} }
@keyframes orbBy1 { 0%,100%{--gb1y:35%}33%{--gb1y:78%}66%{--gb1y:10%} }
@keyframes orbBo1 { 0%,100%{--gb1o:0.10}50%{--gb1o:0.17} }
@keyframes orbBx2 { 0%,100%{--gb2x:70%}33%{--gb2x:18%}66%{--gb2x:88%} }
@keyframes orbBy2 { 0%,100%{--gb2y:55%}50%{--gb2y:22%} }
@keyframes orbBo2 { 0%,100%{--gb2o:0.09}50%{--gb2o:0.15} }
@keyframes orbBx3 { 0%,100%{--gb3x:50%}50%{--gb3x:10%} }
@keyframes orbBy3 { 0%,100%{--gb3y:60%}25%{--gb3y:18%}50%{--gb3y:86%}75%{--gb3y:34%} }
@keyframes orbBo3 { 0%,100%{--gb3o:0.08}50%{--gb3o:0.14} }

/* Light mode: background — same property-driven system, paler hues */
[data-theme="light"] body::before {
  background: #fafbff;
  transition: background 0.6s ease;
}

[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 60% 55% at var(--ga1x) var(--ga1y), rgba(147,197,253,var(--ga1o)) 0%, transparent 55%),
    radial-gradient(ellipse 55% 50% at var(--ga2x) var(--ga2y), rgba(191,219,254,var(--ga2o)) 0%, transparent 45%),
    radial-gradient(ellipse 50% 50% at var(--ga3x) var(--ga3y), rgba(147,197,253,var(--ga3o)) 0%, transparent 50%),
    radial-gradient(ellipse 50% 45% at var(--ga4x) var(--ga4y), rgba(191,219,254,var(--ga4o)) 0%, transparent 45%),
    radial-gradient(ellipse 45% 50% at var(--ga5x) var(--ga5y), rgba(147,197,253,var(--ga5o)) 0%, transparent 48%),
    radial-gradient(ellipse 45% 45% at var(--ga6x) var(--ga6y), rgba(191,219,254,var(--ga6o)) 0%, transparent 48%);
  transition: background 0.6s ease;
}

[data-theme="light"] .global-particles::before {
  background:
    radial-gradient(ellipse 55% 50% at var(--gb1x) var(--gb1y), rgba(147,197,253,var(--gb1o)) 0%, transparent 50%),
    radial-gradient(ellipse 45% 50% at var(--gb2x) var(--gb2y), rgba(191,219,254,var(--gb2o)) 0%, transparent 48%),
    radial-gradient(ellipse 50% 45% at var(--gb3x) var(--gb3y), rgba(147,197,253,var(--gb3o)) 0%, transparent 48%);
}

/* ============================================
   Light Mode — CSS Variable Overrides
   ============================================ */
[data-theme="light"] {
  --color-bg-primary: #fafbff;
  --color-bg-secondary: #ffffff;
  --color-surface: #ffffff;
  --color-surface-hover: #f3f5fc;
  --color-border: #e2e6f0;
  --color-border-light: rgba(0,0,0,0.06);
  --color-text-primary: #14183a;
  --color-text-secondary: #474b66;
  --color-text-muted: #6e7291;
  --color-accent: #2563eb;
  --color-accent-hover: #3b82f6;
  --color-accent-light: #1d4ed8;
  --color-accent-glow: rgba(37,99,235,0.07);
  --color-accent-glow-strong: rgba(37,99,235,0.14);
  --color-gradient-start: #2563eb;
  --color-gradient-mid: #3b82f6;
  --color-gradient-end: #1d4ed8;
  --color-code-bg: #f4f5fc;
  --color-code-border: #e2e6f0;
  --shadow-glow: 0 0 35px rgba(37,99,235,0.08);
  --shadow-glow-strong: 0 0 55px rgba(37,99,235,0.16);
}

/* Light mode — header & footer */
[data-theme="light"] .site-header {
  background: rgba(255,255,255,0.92);
  border-bottom-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .site-footer {
  background: rgba(255,255,255,0.50);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-top-color: rgba(0,0,0,0.06);
}

/* Light mode — nav */
[data-theme="light"] .nav-links {
  background: #ffffff;
}

[data-theme="light"] .nav-dropdown-menu {
  background: #ffffff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

/* Light mode — premium cards */
[data-theme="light"] .premium-card {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-color: rgba(0,0,0,0.04);
}
[data-theme="light"] .premium-card:hover {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(0,0,0,0.06);
}

/* Light mode — cards */
/* Light mode — glass cards */
[data-theme="light"] .feature-card {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-color: rgba(0,0,0,0.04);
}
[data-theme="light"] .feature-card:hover {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
[data-theme="light"] .protocol-card {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-color: rgba(0,0,0,0.04);
}
[data-theme="light"] .protocol-card:hover {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
[data-theme="light"] .feature-card,
[data-theme="light"] .protocol-card,
[data-theme="light"] .middleware-card {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-color: rgba(0,0,0,0.04);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .middleware-card:hover {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .feature-card:hover,
[data-theme="light"] .protocol-card:hover {
  box-shadow: 0 4px 20px rgba(37,99,235,0.10);
}

/* Light mode — particles more visible */
[data-theme="light"] .global-particle {
  background: var(--color-accent);
  opacity: 0;
}

/* Light mode — header gradient line */
[data-theme="light"] .page-header::after {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent);
}

/* Light mode — CTA clean (no glow ring) */

/* Light mode — button tweaks */
[data-theme="light"] .btn-outline {
  border-color: var(--color-border);
}

[data-theme="light"] .btn-outline:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Light mode — modal/search overlay */
[data-theme="light"] .nav-dropdown-overlay {
  background: transparent;
}

/* Light mode — mobile nav */
@media (max-width: 768px) {
  [data-theme="light"] .nav-links {
    background: rgba(255,255,255,0.98);
  }
}

/* --- Hero Section --- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--header-height) + var(--space-8)) var(--space-6) var(--space-16);
  background: transparent;
}

.global-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.global-particles::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: inherit;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

.global-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat linear infinite;
}

.global-particle:nth-child(1) { left: 10%; top: 90%; animation-duration: 14s; animation-delay: 0s; }
.global-particle:nth-child(2) { left: 25%; top: 70%; animation-duration: 12s; animation-delay: 2s; }
.global-particle:nth-child(3) { left: 45%; top: 50%; animation-duration: 16s; animation-delay: 4s; }
.global-particle:nth-child(4) { left: 65%; top: 30%; animation-duration: 11s; animation-delay: 1s; }
.global-particle:nth-child(5) { left: 80%; top: 65%; animation-duration: 15s; animation-delay: 3s; }
.global-particle:nth-child(6) { left: 30%; top: 20%; animation-duration: 13s; animation-delay: 5s; }
.global-particle:nth-child(7) { left: 55%; top: 80%; animation-duration: 10s; animation-delay: 2.5s; }
.global-particle:nth-child(8) { left: 85%; top: 15%; animation-duration: 12s; animation-delay: 1.5s; }

@keyframes particleFloat {
  0%   { opacity: 0; transform: translateY(100vh) scale(0.3); }
  15%  { opacity: 0.5; }
  85%  { opacity: 0.2; }
  100% { opacity: 0; transform: translateY(-50px) scale(1); }
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: min(900px, 100%);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background: rgba(79,141,230,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(79,141,230,0.3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent-light);
  margin-bottom: var(--space-8);
  max-width: 100%;
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  background: var(--color-success);
  border-radius: 50%;
  animation: glow 2s ease-in-out infinite;
}

.hero-title {
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: var(--space-6);
  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent-light) 50%, var(--color-gradient-end) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 680px;
  text-wrap: pretty;
  margin: 0 auto var(--space-10);
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  font-size: var(--text-base);
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.5s var(--ease-spring);
  text-decoration: none;
  border: none;
  white-space: nowrap;
  position: relative;
  user-select: none;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-accent), var(--color-gradient-mid));
  color: #fff;
  box-shadow: 0 4px 20px var(--color-accent-glow-strong);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 35px var(--color-accent-glow-strong);
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.btn-outline:hover {
  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-accent-light);
  transform: translateY(-3px);
  box-shadow: 0 4px 20px var(--color-accent-glow);
}

.btn-lg {
  padding: var(--space-4) var(--space-10);
  font-size: var(--text-lg);
  border-radius: var(--radius-full);
}

/* Button icon kinetics — micro-shift on hover */
.btn svg {
  transition: transform 0.4s var(--ease-out-back);
}
.btn:hover svg {
  transform: translateX(3px);
}

/* --- Stats Bar --- */
.stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  flex-wrap: wrap;
}

.stat-item { text-align: center; }

.stat-number {
  display: block;
  font-size: var(--text-3xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-gradient-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--color-border);
}

/* --- Section Common --- */
.section {
  padding: var(--space-32) var(--space-6);
}

@media (min-width: 1025px) {
  .section {
    padding: var(--space-40) var(--space-6);
  }
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-20);
}

.section-label {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* --- Feature Grid --- */
.feature-highlights {
  background: transparent;
  position: relative;
  padding-top: var(--space-40);
  padding-bottom: var(--space-40);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.feature-card {
  background: rgba(17,22,39,0.10);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-width: 1px 1px 1px 3px;
  border-style: solid;
  border-color: rgba(255,255,255,0.04) rgba(255,255,255,0.04) rgba(255,255,255,0.04) var(--color-accent);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-10);
  transition: all 0.6s var(--ease-spring);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.04);
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 100% 0%, var(--color-accent-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-spring);
}

.feature-card:hover {
  transform: translateY(-6px) translateX(2px);
  background: rgba(26,31,56,0.30);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-left-color: var(--color-accent-light);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.06),
    0 12px 48px var(--color-accent-glow);
}

.feature-card:hover::before { opacity: 1; }
.feature-card > * { position: relative; z-index: 1; }

.feature-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-glow);
  border-radius: var(--radius-lg);
  color: var(--color-accent-light);
  margin-bottom: var(--space-5);
  transition: all 0.5s var(--ease-spring);
}

.feature-card:hover .feature-card-icon {
  background: var(--color-accent-glow-strong);
  box-shadow: 0 0 24px var(--color-accent-glow);
  transform: scale(1.05);
}

.feature-card h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.feature-card p {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: 1.65;
}

/* --- Protocol Cards --- */
.protocol-category { margin-bottom: var(--space-12); }

.protocol-category-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-accent-light);
}

.protocol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.protocol-card {
  background: rgba(17,22,39,0.10);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-width: 1px 1px 1px 3px;
  border-style: solid;
  border-color: rgba(255,255,255,0.04) rgba(255,255,255,0.04) rgba(255,255,255,0.04) transparent;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  transition: all 0.6s var(--ease-spring);
  cursor: default;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.03);
}

.protocol-card:hover {
  border-left-color: var(--color-accent);
  background: rgba(26,31,56,0.30);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transform: translateY(-4px) translateX(2px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.05),
    0 8px 32px var(--color-accent-glow);
}

/* --- Additional Utilities --- */
.page-section {
  padding: var(--space-24) var(--space-6);
}

.protocol-card-name {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.protocol-card-package {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  margin-bottom: var(--space-2);
  word-break: break-all;
}

.protocol-card-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.protocol-card-types {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-accent-glow);
  border: 1px solid rgba(79,141,230,0.2);
  color: var(--color-accent-light);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-top: var(--space-3);
}

/* Hero code glass block */
.hero-code-glass {
  background: rgba(17,22,39,0.10) !important;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: none !important;
  overflow-x: auto;
  max-width: 100%;
}

.hero-code-glass code {
  background: transparent !important;
  white-space: pre-wrap;
  word-break: break-word;
}

[data-theme="light"] .hero-code-glass {
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: var(--radius-xl) !important;
}

/* Section transition — gradient divider */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
  max-width: var(--content-max-width);
  margin: 0 auto;
  opacity: 0.5;
}

/* --- Middleware Cards --- */
.middleware-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.middleware-card {
  background: rgba(17,22,39,0.10);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.04);
  border-top: 3px solid transparent;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: all 0.6s var(--ease-spring);
  text-align: center;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.03);
}

.middleware-card:hover {
  border-top-color: var(--color-accent);
  background: rgba(26,31,56,0.30);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.05),
    0 8px 40px var(--color-accent-glow);
}

.middleware-card-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-glow);
  border-radius: var(--radius-lg);
  margin: 0 auto var(--space-5);
  font-size: var(--text-2xl);
}

.middleware-card h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.middleware-card .package {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.middleware-card p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* --- Contact Form (kept — used by Contact.razor) --- */
.form-group { margin-bottom: var(--space-5); }

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

/* --- CTA Section --- */
.cta-section {
  background: transparent;
  position: relative;
  overflow: hidden;
  padding-top: var(--space-40);
  padding-bottom: var(--space-40);
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, 60%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0.2;
}

.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-20) var(--space-10);
  background: radial-gradient(ellipse at 50% 0%, var(--color-accent-glow-strong), var(--color-accent-glow) 40%, transparent 70%);
  border-radius: var(--radius-xl);
}

.cta-inner h2 {
  font-size: var(--text-3xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.cta-inner p {
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: 1.7;
  margin-bottom: var(--space-8);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.cta-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Page Layout --- */
.page-header {
  padding-top: calc(var(--header-height) + var(--space-12));
  padding-bottom: var(--space-12);
  text-align: center;
  background: transparent;
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

.page-header h1 {
  font-size: var(--text-4xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.page-header p {
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  max-width: 600px;
  margin: 0 auto;
}

.features-page,
.protocols-page,
.middleware-page,
.contact-page {
  background: transparent;
}

.features-page .section,
.protocols-page .section,
.middleware-page .section,
.contact-page .section {
  padding-top: 0;
}

/* Premium Card Bento Grid (high-end features) */
.premium-features-section {
  padding: var(--space-24) var(--space-6);
  padding-top: var(--space-32);
}

.features-section-top {
  padding-top: var(--space-16);
}

.premium-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.premium-card {
  background: rgba(17,22,39,0.10);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  transition: all 0.6s var(--ease-spring);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
}

.premium-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 100% 0%, var(--color-accent-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-spring);
}

.premium-card:hover {
  transform: translateY(-6px);
  background: rgba(26,31,56,0.30);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.05),
    0 8px 40px var(--color-accent-glow);
}

.premium-card:hover::before {
  opacity: 1;
}

.premium-card-accent {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-glow);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  color: var(--color-accent-light);
  flex-shrink: 0;
  transition: all 0.5s var(--ease-spring);
}

.premium-card:hover .premium-card-accent {
  background: var(--color-accent-glow-strong);
  box-shadow: 0 0 20px var(--color-accent-glow);
}

.premium-card-body h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.premium-card-body p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.premium-card-badge {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent-glow);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent-light);
}

/* Hero card spans 2 cols */

[data-theme="light"] .premium-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

[data-theme="light"] .premium-card:hover {
  box-shadow: 0 6px 30px rgba(37,99,235,0.10);
}

/* Responsive */
@media (max-width: 1024px) {
  .premium-features-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .premium-features-grid { grid-template-columns: 1fr; }
  .premium-card { padding: var(--space-6); }
}


.package-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-light);
  background: var(--color-accent-glow);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: var(--space-3);
}

.filter-bar {
  max-width: var(--content-max-width);
  margin: 0 auto var(--space-8);
}

.filter-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: rgba(17,22,39,0.10);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-family: var(--font-sans);
}

.filter-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(26,31,56,0.25);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

[data-theme="light"] .filter-input {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .filter-input:focus {
  background: rgba(255,255,255,0.25);
  border-color: var(--color-accent);
}

/* Contact Glass Card */
.contact-premium {
  padding: var(--space-16) var(--space-6) var(--space-32);
}

.contact-glass-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.03), var(--shadow-glow);
  transition: all 0.6s var(--ease-spring);
}

.contact-glass-card:focus-within {
  border-color: var(--color-accent);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 8px 40px var(--color-accent-glow);
}

[data-theme="light"] .contact-glass-card {
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

/* --- Responsive --- */
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--transition-fast);
}
.skip-link:focus {
  transform: translateY(0);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-glow-strong);
}
@media (max-width: 1200px) {
  .protocol-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card:nth-child(even) { margin-top: 0; }
}

@media (max-width: 768px) {
  .protocol-grid { grid-template-columns: repeat(2, 1fr); }
  .middleware-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hero { min-height: auto; padding: calc(var(--header-height) + var(--space-6)) var(--space-4) var(--space-12); }
  .hero-title { font-size: clamp(2rem, 1.5rem + 5vw, 2.8rem); }
  .hero-subtitle { font-size: var(--text-base); }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-badge { font-size: var(--text-xs); margin-bottom: var(--space-6); }
  .section { padding: var(--space-16) var(--space-6); }
  .section-title { font-size: var(--text-2xl); }
  .section-header { margin-bottom: var(--space-12); }
  .feature-grid { grid-template-columns: 1fr; overflow-x: hidden; }
  .protocol-grid { grid-template-columns: 1fr; overflow-x: hidden; }
  .stats-bar { gap: var(--space-6); overflow-x: hidden; flex-wrap: wrap; }
  .stat-divider { display: none; }
  .stat-number { font-size: var(--text-2xl); }
  .cta-inner { padding: var(--space-10) var(--space-5); overflow-x: hidden; }
  .cta-inner h2 { font-size: var(--text-2xl); }
  .page-header { padding-top: calc(var(--header-height) + var(--space-8)); padding-bottom: var(--space-8); }
  .page-header h1 { font-size: var(--text-3xl); }
  pre { max-width: 100%; overflow-x: auto; }
  pre code { white-space: pre-wrap; word-break: break-word; }
  .section { overflow-x: hidden; }
  .container { max-width: 100%; overflow-x: hidden; }
}