/* ── Social & theme toggle UI ── */
.social-icons { display: flex; align-items: center; gap: 8px; }

.social-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border2); background: var(--surface);
  text-decoration: none; transition: all 0.2s; flex-shrink: 0;
}
.social-icon svg { width: 16px; height: 16px; fill: currentColor; }
.social-icon:hover { transform: translateY(-1px); }

.social-icon.linkedin {
  color: #0a66c2;
  border-color: rgba(10, 102, 194, 0.4);
  background: rgba(10, 102, 194, 0.12);
}
.social-icon.linkedin:hover {
  color: #0a66c2;
  border-color: #0a66c2;
  background: rgba(10, 102, 194, 0.2);
  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.25);
}

.social-icon.facebook {
  color: #1877f2;
  border-color: rgba(24, 119, 242, 0.4);
  background: rgba(24, 119, 242, 0.12);
}
.social-icon.facebook:hover {
  color: #1877f2;
  border-color: #1877f2;
  background: rgba(24, 119, 242, 0.2);
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.25);
}

.social-icon.x {
  color: #f5f5f5;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}
.social-icon.x:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .social-icon.x {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.15);
  background: rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .social-icon.x:hover {
  color: #000000;
  border-color: rgba(15, 23, 42, 0.3);
  background: rgba(15, 23, 42, 0.1);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.theme-toggle {
  width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid var(--border2); background: var(--surface);
  color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; flex-shrink: 0; padding: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.theme-toggle svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; fill: none; }
.theme-toggle .icon-moon { fill: currentColor; stroke: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.nav-utils { display: flex; align-items: center; gap: 12px; }
.nav-cta { display: flex; align-items: center; gap: 1rem; }
.footer-social { margin-top: 1.25rem; }
.footer-legal { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.footer-legal a { color: var(--text3); text-decoration: none; font-size: 0.75rem; transition: color 0.2s; }
.footer-legal a:hover { color: var(--text2); }
.mobile-social { display: none; padding: 0.5rem 0 1rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; justify-content: center; }

/* ── Dark theme tokens (default) ── */
html[data-theme="dark"],
html:not([data-theme]) {
  --bg: #050810;
  --bg2: #090d1a;
  --bg3: #0d1220;
  --surface: #111827;
  --surface2: #1a2335;
  --border: rgba(99, 179, 237, 0.12);
  --border2: rgba(99, 179, 237, 0.22);
  --accent: #4fc3f7;
  --accent2: #00e5ff;
  --accent3: #7c3aed;
  --accent4: #06b6d4;
  --accent-soft: rgba(79, 195, 247, 0.08);
  --green: #10b981;
  --red: #ef4444;
  --amber: #f59e0b;
  --text: #f0f4ff;
  --text2: #8899bb;
  --text3: #4a5878;
  --glow: rgba(79, 195, 247, 0.08);
  --glow2: rgba(79, 195, 247, 0.04);
  --nav-bg: rgba(5, 8, 16, 0.85);
  --nav-bg-scroll: rgba(5, 8, 16, 0.97);
  --nav-shadow: none;
  --mobile-menu-bg: rgba(5, 8, 16, 0.98);
  --hero-svg-bg: #0d1220;
  --svg-text-muted: #8899bb;
  --bar-track: rgba(255, 255, 255, 0.06);
  --btn-on-accent: #050810;
  --logo-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  --logo-border: transparent;
  --dashboard-shadow: 0 0 0 1px rgba(79, 195, 247, 0.05), 0 40px 80px rgba(0, 0, 0, 0.5);
  --card-shadow: none;
  --grid-line: rgba(79, 195, 247, 0.025);
  --noise-opacity: 0.4;
  --orb1: radial-gradient(circle at center, rgba(79, 195, 247, 0.04) 0%, rgba(124, 58, 237, 0.02) 40%, transparent 70%);
  --orb2: radial-gradient(circle at center, rgba(6, 182, 212, 0.03) 0%, transparent 70%);
  --cta-glow: radial-gradient(circle at center, rgba(79, 195, 247, 0.06) 0%, transparent 70%);
  --pricing-featured-bg: linear-gradient(135deg, rgba(79, 195, 247, 0.07), rgba(124, 58, 237, 0.05));
  --cloud-card-hover: rgba(79, 195, 247, 0.05);
  --cloud-item-bg: rgba(255, 255, 255, 0.02);
  --h1-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent4) 50%, var(--accent3) 100%);
  /* Hero accent — fixed brand gradient (same bar look in dark & light) */
  --h1-gradient-brand: linear-gradient(90deg, #4fc3f7 0%, #06b6d4 45%, #7c3aed 100%);
}

/* ── Light theme tokens ── */
html[data-theme="light"] {
  --bg: #ffffff;
  --bg2: #f8fafc;
  --bg3: #f1f5f9;
  --surface: #ffffff;
  --surface2: #f8fafc;
  --border: rgba(15, 23, 42, 0.08);
  --border2: rgba(15, 23, 42, 0.14);
  --accent: #0284c7;
  --accent2: #0891b2;
  --accent3: #7c3aed;
  --accent4: #06b6d4;
  --accent-soft: rgba(2, 132, 199, 0.08);
  --green: #059669;
  --red: #dc2626;
  --amber: #d97706;
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --glow: rgba(2, 132, 199, 0.06);
  --glow2: rgba(2, 132, 199, 0.03);
  --nav-bg: rgba(255, 255, 255, 0.92);
  --nav-bg-scroll: rgba(255, 255, 255, 0.98);
  --nav-shadow: 0 1px 12px rgba(15, 23, 42, 0.08);
  --mobile-menu-bg: #ffffff;
  --hero-svg-bg: #f8fafc;
  --svg-text-muted: #64748b;
  --bar-track: #e2e8f0;
  --btn-on-accent: #ffffff;
  --logo-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  --logo-border: var(--border);
  --dashboard-shadow: 0 8px 32px rgba(15, 23, 42, 0.1);
  --card-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  --grid-line: rgba(2, 132, 199, 0.04);
  --noise-opacity: 0.12;
  --orb1: radial-gradient(circle at center, rgba(2, 132, 199, 0.04) 0%, rgba(124, 58, 237, 0.02) 40%, transparent 70%);
  --orb2: radial-gradient(circle at center, rgba(6, 182, 212, 0.025) 0%, transparent 70%);
  --cta-glow: radial-gradient(circle at center, rgba(2, 132, 199, 0.06) 0%, transparent 70%);
  --pricing-featured-bg: linear-gradient(135deg, rgba(2, 132, 199, 0.06), rgba(124, 58, 237, 0.04));
  --cloud-card-hover: rgba(2, 132, 199, 0.05);
  --cloud-item-bg: rgba(15, 23, 42, 0.02);
  --h1-gradient: linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #7c3aed 100%);
  --h1-gradient-brand: linear-gradient(90deg, #4fc3f7 0%, #06b6d4 45%, #7c3aed 100%);
}

/* ── Global themed surfaces ── */
body { background: var(--bg) !important; color: var(--text) !important; transition: background 0.25s, color 0.25s; }

body::before {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) !important;
}

body::after { opacity: var(--noise-opacity) !important; }

nav {
  background: var(--nav-bg) !important;
  border-bottom-color: var(--border) !important;
  transition: background 0.25s, box-shadow 0.25s;
}
nav.scrolled {
  background: var(--nav-bg-scroll) !important;
  box-shadow: var(--nav-shadow) !important;
}

.logo-mark {
  box-shadow: var(--logo-shadow) !important;
  border: 1px solid var(--logo-border) !important;
}

.mobile-menu { background: var(--mobile-menu-bg) !important; border-bottom-color: var(--border) !important; }
.hamburger span { background: var(--text2) !important; }

section { background: var(--bg); transition: background 0.25s; }
.hero { background: var(--bg); }
.hero-orb { background: var(--orb1) !important; }
.hero-orb2 { background: var(--orb2) !important; }
/* Gradient accent text (not a background block) — identical in dark & light */
.h1-accent {
  display: inline;
  background: var(--h1-gradient-brand) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .h1-accent {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--accent) !important;
  }
}

.compliance-section,
.arch-section,
.controls-section,
.frameworks-section,
.testimonials-section,
.deploy-section { background: var(--bg2) !important; }

.capabilities-section { background: var(--bg) !important; }

.cta-section { background: var(--bg) !important; }
.cta-glow { background: var(--cta-glow) !important; }

.cloud-section,
.pricing-section { background: var(--bg) !important; }

footer { background: var(--bg3) !important; border-top-color: var(--border) !important; }

/* Cards & panels */
.feature-card,
.testimonial-card,
.pricing-card,
.framework-badge,
.posture-card,
.control-row,
.arch-diagram,
.dashboard-frame,
.mini-card,
.data-flow,
.hero-illustration,
.frame-bar,
.arch-layer,
.cloud-card,
.social-icon,
.theme-toggle,
.cert-badge {
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.feature-card { background: var(--bg2) !important; }
.feature-card:hover { background: var(--bg3) !important; }
.testimonial-card,
.pricing-card,
.framework-badge,
.posture-card,
.arch-diagram,
.dashboard-frame,
.deploy-card,
.deploy-onprem-panel { background: var(--surface) !important; border-color: var(--border) !important; }

.deploy-card.highlight { background: var(--pricing-featured-bg) !important; border-color: var(--accent) !important; }

[data-theme="light"] .feature-card,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .framework-badge,
[data-theme="light"] .posture-card,
[data-theme="light"] .control-row,
[data-theme="light"] .arch-diagram,
[data-theme="light"] .dashboard-frame,
[data-theme="light"] .mini-card,
[data-theme="light"] .data-flow,
[data-theme="light"] .hero-illustration,
[data-theme="light"] .frame-bar,
[data-theme="light"] .arch-layer,
[data-theme="light"] .social-icon,
[data-theme="light"] .theme-toggle {
  box-shadow: var(--card-shadow);
}

.features-grid { background: var(--border) !important; }
.controls-grid { background: var(--border) !important; border-color: var(--border) !important; }
.control-row { background: var(--surface) !important; }

.frame-bar,
.mini-card,
.data-flow,
.arch-layer { background: var(--bg3) !important; border-color: var(--border) !important; }

.hero-illustration {
  background: transparent !important;
  border-color: var(--border) !important;
}

.dashboard-frame { box-shadow: var(--dashboard-shadow) !important; border-color: var(--border2) !important; }

.flow-bar-bg,
.posture-bar-bg,
.bar-track { background: var(--bar-track) !important; }

html { color-scheme: dark; transition: color-scheme 0.25s; }
html[data-theme="light"] { color-scheme: light; }

/* Badges, steps, pills */
.hero-badge { background: var(--accent-soft) !important; border-color: var(--border2) !important; color: var(--accent) !important; }
.hero-badge.badge-amber {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  color: var(--amber) !important;
}
.hero-badge.badge-amber .badge-dot { background: var(--amber) !important; box-shadow: 0 0 8px rgba(245, 158, 11, 0.4) !important; }
.step-num { background: var(--accent-soft) !important; border-color: var(--border2) !important; color: var(--accent) !important; }
.badge-dot { background: var(--accent) !important; box-shadow: 0 0 8px var(--accent) !important; }

.hero-illustration svg rect.hero-svg-bg { fill: var(--hero-svg-bg) !important; }

/* Buttons */
.btn-primary,
.btn-hero,
.plan-btn.featured-btn { color: var(--btn-on-accent) !important; }

a.plan-btn { display: block; text-decoration: none; }

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-hero:hover,
[data-theme="light"] .plan-btn.featured-btn:hover { background: #0369a1 !important; }

.btn-ghost:hover,
.btn-hero-outline:hover,
.plan-btn:hover { background: var(--accent-soft) !important; }

/* Pricing featured */
.pricing-card.featured { background: var(--pricing-featured-bg) !important; }

/* Cloud cards */
.cloud-item { background: var(--cloud-item-bg) !important; }
.cloud-card:hover { background: var(--cloud-card-hover) !important; }

/* Marquee */
.marquee-section { background: var(--bg3) !important; border-color: var(--border) !important; }

/* Inline themed panels */
.themed-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

/* Hero section — avoid extra tinted panels; dashboard frame provides surface */
.hero-visual,
.frame-body,
.chart-area { background: transparent !important; }

.hero-illustration svg { border-radius: inherit; }

/* SVG text in hero & dashboard — accent colors stay, labels follow theme */
.dashboard-frame svg text,
.hero-illustration svg text { transition: fill 0.25s; }
.dashboard-frame svg text.svg-muted,
.hero-illustration svg text.svg-muted { fill: var(--svg-text-muted) !important; }
.dashboard-frame svg text.svg-title,
.hero-illustration svg text.svg-title { fill: var(--text) !important; }

/* SVG connector lines — subtle in both themes */
[data-theme="light"] .hero-illustration svg line[stroke*="79,195,247"],
[data-theme="light"] .hero-illustration svg line[stroke*="255,255,255"],
[data-theme="dark"] .hero-illustration svg line[stroke*="255,255,255"] {
  stroke: rgba(2, 132, 199, 0.15) !important;
}
[data-theme="dark"] .hero-illustration svg line[stroke*="79,195,247"] {
  stroke: rgba(79, 195, 247, 0.15) !important;
}

/* Section intros — full content width (compliance pages, homepage, etc.) */
.section-sub {
  max-width: none !important;
  width: 100% !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
}

/* Legal page hero */
.legal-hero { background: var(--bg) !important; border-bottom-color: var(--border) !important; }

/* Hero stat labels */
.hero-stat-label { color: var(--text3) !important; }
.hero-stat-value { color: var(--text) !important; }

/* Hover states that used hardcoded rgba */
.btn-ghost:hover,
.btn-hero-outline:hover { background: var(--accent-soft) !important; }

.framework-badge.current { background: var(--accent-soft) !important; }

/* HIPAA colored icon cards — keep icon tints in both themes */
.icon-health { background: rgba(245, 158, 11, 0.14); }
.icon-map { background: rgba(2, 132, 199, 0.12); }
.icon-lock { background: rgba(5, 150, 105, 0.12); }
.icon-users { background: rgba(124, 58, 237, 0.12); }
.icon-audit { background: rgba(8, 145, 178, 0.12); }
.icon-alert { background: rgba(220, 38, 38, 0.1); }

[data-theme="light"] .features-grid { gap: 1.25rem; background: transparent !important; border: none !important; }
[data-theme="light"] .feature-card.card-bordered {
  border: 1px solid var(--border) !important;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}

@media (max-width: 1024px) {
  .nav-social { display: none; }
  .mobile-social { display: flex; }
}

@media (max-width: 640px) {
  .nav-utils { gap: 8px; }
  .social-icon { width: 32px; height: 32px; }
  .theme-toggle { width: 34px; height: 34px; }
}