/* Pragmatismo — Core Design System */
*,*::before,*::after {box-sizing:border-box;margin:0;padding:0}
html {scroll-behavior:smooth}
:root {
  /* ── Semantic tokens (source of truth) ── */
  --bg: #fbfbfd;
  --bg-soft: #f4f5f9;
  --bg-elev: #ffffff;
  --fg: #0a0a14;
  --fg-muted: #4a4a5e;
  --fg-subtle: #79798c;
  --border: rgba(10, 10, 20, 0.08);
  --border-strong: rgba(10, 10, 20, 0.16);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.9);
  --shadow-sm: 0 1px 2px rgba(10,10,20,0.04), 0 1px 3px rgba(10,10,20,0.06);
  --shadow-md: 0 4px 12px rgba(10,10,20,0.06), 0 12px 28px rgba(10,10,20,0.08);
  --shadow-lg: 0 24px 48px -12px rgba(10,10,20,0.18), 0 60px 120px -30px rgba(99,102,241,0.18);
  --grid-line: rgba(10, 10, 20, 0.04);
  --ring: rgba(99, 102, 241, 0.36);
  --brand-1: #6366f1;
  --brand-2: #8b5cf6;
  --brand-3: #d946ef;
  --brand-cyan: #06b6d4;
  --brand-emerald: #10b981;
  --brand-amber: #f59e0b;
  --brand-rose: #f43f5e;
  --brand-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 42%, #d946ef 100%);
  --brand-gradient-cool: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
  /* Darker gradient for light backgrounds (≥4.5:1 contrast) */
  --grad-text: linear-gradient(120deg, #4f46e5 0%, #7c3aed 42%, #c026d3 100%);
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-pill: 999px;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --max-w: 1200px;
  --success: #2e7d32;
  --danger: #c62828;

  /* ── p2026 aliases (keep until all selectors migrated) ── */
  --p2026-font-display: var(--font-body);
  --p2026-font-mono: var(--font-mono);
  --p2026-indigo: var(--brand-1);
  --p2026-violet: var(--brand-2);
  --p2026-fuchsia: var(--brand-3);
  --p2026-cyan: var(--brand-cyan);
  --p2026-emerald: var(--brand-emerald);
  --p2026-amber: var(--brand-amber);
  --p2026-rose: var(--brand-rose);
  --p2026-grad-brand: var(--brand-gradient);
  --p2026-grad-cool: var(--brand-gradient-cool);
  --p2026-grad-text: var(--grad-text);
  --p2026-bg: var(--bg);
  --p2026-bg-soft: var(--bg-soft);
  --p2026-bg-elev: var(--bg-elev);
  --p2026-fg: var(--fg);
  --p2026-fg-muted: var(--fg-muted);
  --p2026-fg-subtle: var(--fg-subtle);
  --p2026-border: var(--border);
  --p2026-border-strong: var(--border-strong);
  --p2026-glass: var(--glass);
  --p2026-glass-border: var(--glass-border);
  --p2026-shadow-sm: var(--shadow-sm);
  --p2026-shadow-md: var(--shadow-md);
  --p2026-shadow-lg: var(--shadow-lg);
  --p2026-grid-line: var(--grid-line);
  --p2026-mesh-1: rgba(99, 102, 241, 0.18);
  --p2026-mesh-2: rgba(217, 70, 239, 0.12);
  --p2026-mesh-3: rgba(6, 182, 212, 0.14);
  --p2026-ring: var(--ring);
  --p2026-reveal-delay: 0ms;

  /* ── Bevel aliases (temporary, for footer/calculator) ── */
  --bg-secondary: var(--bg-soft);
  --bg-card: var(--bg-elev);
  --bevel-hi: rgba(255,255,255,0.9);
  --bevel-hi2: rgba(255,255,255,0.7);
  --bevel-lo: rgba(10,10,20,0.08);
  --bevel-lo2: rgba(10,10,20,0.12);
  --bevel-edge: var(--border);
  --primary: var(--fg);
  --primary-hover: var(--fg);
  --primary-text: var(--bg);
  --accent: var(--fg);
  --accent-foreground: var(--fg);
  --radius: var(--radius-s);
  --radius-sm: var(--radius-s);
  --background: var(--bg);
  --foreground: var(--fg);
  --card: var(--bg-elev);
  --card-foreground: var(--fg);
  --secondary: var(--bg-soft);
  --secondary-foreground: var(--fg);
  --muted: var(--bg-soft);
  --muted-foreground: var(--fg-muted);
  --color-primary: var(--fg);
  --color-accent: var(--fg);
  --pink: #ff0080;
}
[data-theme="dark"] {
  --bg: #07070c;
  --bg-soft: #0c0c14;
  --bg-elev: #11111b;
  --fg: #f4f4fb;
  --fg-muted: #b4b4c6;
  --fg-subtle: #82828f;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);
  --glass: rgba(20, 20, 32, 0.66);
  --glass-border: rgba(255, 255, 255, 0.10);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 64px -8px rgba(0,0,0,0.7), 0 60px 140px -40px rgba(139,92,246,0.32);
  --grid-line: rgba(255, 255, 255, 0.045);
  --ring: rgba(139, 92, 246, 0.50);
  --grad-text: linear-gradient(120deg, #818cf8 0%, #c4b5fd 40%, #f0abfc 100%);
  --success: #4caf50;
  --danger: #ef5350;

  /* p2026 aliases */
  --p2026-bg: var(--bg);
  --p2026-bg-soft: var(--bg-soft);
  --p2026-bg-elev: var(--bg-elev);
  --p2026-fg: var(--fg);
  --p2026-fg-muted: var(--fg-muted);
  --p2026-fg-subtle: var(--fg-subtle);
  --p2026-border: var(--border);
  --p2026-border-strong: var(--border-strong);
  --p2026-glass: var(--glass);
  --p2026-glass-border: var(--glass-border);
  --p2026-shadow-sm: var(--shadow-sm);
  --p2026-shadow-md: var(--shadow-md);
  --p2026-shadow-lg: var(--shadow-lg);
  --p2026-grid-line: var(--grid-line);
  --p2026-mesh-1: rgba(99, 102, 241, 0.30);
  --p2026-mesh-2: rgba(217, 70, 239, 0.20);
  --p2026-mesh-3: rgba(6, 182, 212, 0.22);
  --p2026-ring: var(--ring);
  --p2026-grad-text: var(--grad-text);

  /* Bevel aliases */
  --bg-secondary: var(--bg-soft);
  --bg-card: var(--bg-elev);
  --bevel-hi: #5a5a5a;
  --bevel-hi2: #6e6e6e;
  --bevel-lo: #0a0a0a;
  --bevel-lo2: #141414;
  --bevel-edge: #1a1a1a;
  --primary: #c0c0c0;
  --primary-hover: #e0e0e0;
  --primary-text: #1a1a1a;
  --accent: #c0c0c0;
  --fg: var(--fg);
  --fg-muted: var(--fg-muted);
  --fg-subtle: var(--fg-subtle);
}
html.i18n-loading [data-i18n] {
  visibility:hidden}
*,*::before,*::after {
  box-sizing:border-box;
  margin:0;
  padding:0}
html {
  scroll-behavior:smooth}
body {
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased}
::selection {
  background:var(--fg);
  color:var(--bg)}
.theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  cursor:pointer;
  color:var(--fg);
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  font-family:inherit;
  margin-right:0.75rem}
.theme-toggle:hover {
  background:var(--bg-card)}
.theme-toggle:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}
.theme-toggle svg {
  display:block}
.theme-icon-dark {
  display:block}
.footer-gb-logo {
  filter:brightness(0)}
[data-theme="dark"] .footer-gb-logo {
  filter:brightness(0) invert(1)}
.theme-icon-light {
  display:none}
[data-theme="dark"] .theme-icon-dark {
  display:none}
[data-theme="dark"] .theme-icon-light {
  display:block}
.container {
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 1.5rem}
.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--bevel-edge);
  overflow:visible}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:64px;
  height:auto;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0.5rem 1.5rem 0.5rem 10rem;
  overflow:visible;
  gap:0.75rem}
.logo-profile {
  position:absolute;
  left:calc(1.5rem - 4px);
  top:20px;
  z-index:2;
  text-decoration:none;
  transform:none}
.logo-profile img {
  width:96px;
  height:96px;
  border-radius:0;
  object-fit:contain;
  border:none;
  display:block;
  position:relative;
  top:0;
  margin:0;
  filter:drop-shadow(0 0 12px rgba(99,102,241,0.3));
  transition:width .3s ease,height .3s ease}
.logo-profile.scrolled img {
  width:54px;
  height:54px}
.nav-desktop {
  display:flex;
  align-items:center;
  gap:0;
  flex-wrap:wrap;
  flex:1;
  justify-content:flex-start}
.nav-desktop a {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.35rem .55rem;
  font-size:.75rem;
  font-weight:500;
  color:var(--fg-muted);
  text-decoration:none;
  border-radius:0;
  transition:none;
  white-space:nowrap}
.nav-desktop a:hover {
  color:var(--fg);
  background:var(--bg-secondary)}
.nav-desktop a.active {
  color:var(--fg);
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}
.nav-desktop a svg {
  opacity:0.7;
  flex-shrink:0;
  width:14px;
  height:14px}
.nav-desktop a:hover svg {
  opacity:1}
.header-actions {
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex-shrink:0}
.btn-header-cta {
  padding:.4rem .8rem;
  font-size:.8125rem;
  font-weight:600;
  color:var(--primary-text);
  background:var(--primary);
  text-decoration:none;
  white-space:nowrap;
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  transition:none}
.btn-header-cta:hover {
  background:var(--primary-hover)}
.btn-header-cta:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}
.mobile-toggle {
  display:none;
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  cursor:pointer;
  padding:.5rem;
  color:var(--fg);
  position:relative;
  z-index:102;
  }
.mobile-toggle:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}
.mobile-overlay {
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--bg);
  padding:6rem 1.5rem 1.5rem;
  z-index:101;
  overflow-y:auto}
.mobile-overlay.open {
  display:block}
.mobile-overlay a {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.875rem 1rem;
  font-size:1.0625rem;
  font-weight:500;
  color:var(--fg);
  text-decoration:none;
  margin-bottom:.25rem}
.mobile-overlay a:hover,.mobile-overlay a.active {
  background:var(--bg-secondary)}
.mobile-overlay a.nav-cta {
  margin-top:1rem;
  background:var(--fg);
  color:var(--bg);
  justify-content:center;
  font-weight:600;
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo)}
.mobile-overlay a.nav-cta:hover {
  background:var(--fg-muted)}
.hero {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8rem 1.5rem 4rem;
  position:relative;
  overflow:hidden}
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.375rem 1rem;
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  font-size:.8125rem;
  font-weight:500;
  color:var(--fg-muted);
  margin-bottom:2rem}
.hero-badge svg {
  width:1rem;
  height:1rem;
  color:var(--fg)}
.hero h1 {
  font-size:clamp(2.5rem,8vw,5rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
  max-width:800px;
  margin-bottom:1.5rem}
.gradient-text {
  color:var(--fg)}
.hero-sub {
  font-size:clamp(1.125rem,2.5vw,1.375rem);
  color:var(--fg-muted);
  max-width:560px;
  line-height:1.7;
  margin-bottom:2.5rem}
.hero-actions {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  justify-content:center}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  font-size:.9375rem;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  border:none;
  transition:none;
  font-family:inherit}
.btn-primary {
  background:var(--primary);
  color:var(--primary-text);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo)}
.btn-primary:hover {
  background:var(--primary-hover)}
.btn-primary:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}
.btn-ghost {
  background:var(--bg-secondary);
  color:var(--fg);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo)}
.btn-ghost:hover {
  background:var(--bg-card)}
.btn-ghost:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}
.btn-lg {
  padding:1rem 2rem;
  font-size:1rem}
.hero-stats {
  display:flex;
  gap:2.5rem;
  margin-top:4rem;
  flex-wrap:wrap;
  justify-content:center}
.hero-stat {
  text-align:center}
.stat-number {
  display:block;
  font-size:1.5rem;
  font-weight:700;
  color:var(--fg)}
.stat-label {
  font-size:.8125rem;
  color:var(--fg-subtle)}
.solutions {
  padding:6rem 0;
  border-top:1px solid var(--border)}
.solutions-header {
  text-align:center;
  margin-bottom:3rem}
.solutions-header h2 {
  font-size:1.875rem;
  font-weight:600;
  margin-bottom:.5rem}
.solutions-header p {
  color:var(--fg-muted)}
.solutions-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem}
.solution-card {
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  padding:1.5rem;
  text-decoration:none;
  color:var(--fg);
  transition:none}
.solution-card:hover {
  background:var(--bg-secondary)}
.solution-card:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}
.solution-card .card-icon {
  width:40px;
  height:40px;
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem}
.solution-card .card-icon svg {
  width:20px;
  height:20px;
  color:var(--fg)}
.solution-card h3 {
  font-size:1.0625rem;
  font-weight:600;
  margin-bottom:.375rem}
.solution-card p {
  font-size:.875rem;
  color:var(--fg-muted);
  line-height:1.5}
.features {
  padding:6rem 0;
  background:var(--bg-secondary)}
.features-header {
  text-align:center;
  max-width:600px;
  margin:0 auto 3rem}
.features-header h2 {
  font-size:1.875rem;
  font-weight:600;
  margin-bottom:.75rem}
.features-header p {
  color:var(--fg-muted)}
.features-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem}
.feature-card {
  background:var(--bg);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  padding:2rem}
.feature-card h3 {
  font-size:1.0625rem;
  font-weight:600;
  margin-bottom:.5rem}
.feature-card p {
  font-size:.9375rem;
  color:var(--fg-muted);
  line-height:1.6}
.channels {
  padding:6rem 0;
  border-top:1px solid var(--bevel-edge)}
.channels-header {
  text-align:center;
  margin-bottom:2.5rem}
.channels-header h2 {
  font-size:1.875rem;
  font-weight:600;
  margin-bottom:.5rem}
.channels-header p {
  color:var(--fg-muted)}
.channels-grid {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center}
.channel-chip {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1rem;
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  font-size:.8125rem;
  font-weight:500;
  color:var(--fg-muted)}
.channel-chip svg {
  width:16px;
  height:16px}
.cta-section {
  padding:6rem 0;
  background:var(--bg);
  text-align:center}
.cta-section h2 {
  font-size:clamp(1.75rem,4vw,2.5rem);
  font-weight:700;
  margin-bottom:1rem}
.cta-section p {
  color:var(--fg-muted);
  font-size:1.125rem;
  max-width:480px;
  margin:0 auto 2rem}
.site-footer {
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-edge);
  padding:4rem 0 2rem}
.site-footer .container {
  max-width:960px}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem;
  margin-bottom:3rem}
.footer-brand .footer-logo {
  display:flex;
  align-items:center;
  gap:.625rem;
  font-weight:600;
  font-size:1.125rem;
  text-decoration:none;
  color:var(--fg);
  margin-bottom:.75rem}
.footer-brand p {
  font-size:.875rem;
  color:var(--fg-muted);
  line-height:1.6;
  max-width:280px}
.footer-col h5 {
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--fg-subtle);
  margin-bottom:1rem}
.footer-col a {
  display:block;
  font-size:.875rem;
  color:var(--fg-muted);
  text-decoration:none;
  padding:.25rem 0;
  transition:color .2s}
.footer-col a:hover {
  color:var(--fg)}
.footer-bottom {
  padding-top:2rem;
  border-top:1px solid var(--bevel-edge);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.75rem;
  color:var(--fg-subtle)}
.footer-social {
  display:flex;
  gap:.75rem}
.footer-social a {
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  background:var(--bg-card);
  color:var(--fg-muted);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  transition:none}
.footer-social a:hover {
  background:var(--bg-secondary);
  color:var(--fg)}
.footer-social a:active {
  border-top:1px solid var(--bevel-lo);
  border-left:1px solid var(--bevel-lo);
  border-right:1px solid var(--bevel-hi);
  border-bottom:1px solid var(--bevel-hi)}
.footer-social svg {
  width:16px;
  height:16px}
@media(max-width:768px) {
.hero {
  min-height:auto;
  padding:7rem 1.5rem 4rem}
.hero h1 {
  font-size:2.25rem}
.hero-stats {
  gap:1.5rem}
.solutions-grid {
  grid-template-columns:1fr}
.features-grid {
  grid-template-columns:1fr}
.footer-grid {
  grid-template-columns:1fr 1fr}
.footer-bottom {
  flex-direction:column;
  gap:1rem;
  text-align:center}



}
@media(max-width:480px) {
.footer-grid {
  grid-template-columns:1fr}
.hero h1 {
  font-size:1.875rem}



}
@keyframes fadeIn {

  from {
  opacity:0;
  transform:translateY(10px)}

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


}
.animate-in {
  animation:fadeIn .5s ease forwards}
.reveal {
  opacity:0;
  transform:translateY(20px);
  transition:all .6s ease}
.reveal.visible {
  opacity:1;
  transform:translateY(0)}
.page-hero {
  position:relative;
  padding:8rem 0 2.5rem;
  overflow:hidden}
.page-hero .hero-bg {
  position:absolute;
  inset:0;
  overflow:hidden}
.page-hero .hero-bg .blur-circle {
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.3;
  width:24rem;
  height:24rem}
.page-hero .hero-bg .blur-circle.tr {
  top:-10rem;
  right:-10rem}
.page-hero .hero-bg .blur-circle.bl {
  bottom:-10rem;
  left:-10rem}
.page-hero .container {
  position:relative;
  z-index:1;
  max-width:42rem}
.page-hero .badge,.page-hero h1,.page-hero .container>p {
  text-align:center}
.section {
  padding:5rem 0}
.page-hero + .section {
  padding:2rem 0 4rem}
.section-alt {
  background:var(--bg-secondary)}
.section-dark {
  background:var(--primary);
  color:rgba(255,255,255,.9)}
.section-dark h2,.section-dark h3,.section-dark h4 {
  color:#fff}
.section-dark p {
  color:rgba(255,255,255,.7)}
.section-gradient {
  background:linear-gradient(135deg,var(--primary) 0%,hsl(225 50% 20%) 100%);
  color:rgba(255,255,255,.9)}
.section-gradient h2 {
  color:#fff}
.section-gradient p {
  color:rgba(255,255,255,.7)}
.section-label {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.375rem .875rem;
  font-size:.75rem;
  font-weight:500;
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  margin-bottom:1.5rem}
.badge {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.25rem .625rem;
  font-size:.625rem;
  font-weight:700;
  border-radius:.25rem;
  text-transform:uppercase;
  letter-spacing:.05em}
.badge-blue {
  background:rgba(37,99,235,.1);
  color:#2563eb;
  border:1px solid rgba(37,99,235,.2)}
.badge-emerald {
  background:rgba(5,150,105,.1);
  color:#059669;
  border:1px solid rgba(5,150,105,.2)}
.badge-purple {
  background:rgba(124,58,237,.1);
  color:#7c3aed;
  border:1px solid rgba(124,58,237,.2)}
.badge-cyan {
  background:rgba(8,145,178,.1);
  color:#0891b2;
  border:1px solid rgba(8,145,178,.2)}
.badge-amber {
  background:rgba(217,119,6,.1);
  color:#d97706;
  border:1px solid rgba(217,119,6,.2)}
.badge-red {
  background:rgba(220,38,38,.1);
  color:#dc2626;
  border:1px solid rgba(220,38,38,.2)}
.badge-indigo {
  background:rgba(79,70,229,.1);
  color:#4f46e5;
  border:1px solid rgba(79,70,229,.2)}
.badge-orange {
  background:rgba(234,88,12,.1);
  color:#ea580c;
  border:1px solid rgba(234,88,12,.2)}
.badge-pink {
  background:rgba(219,39,119,.1);
  color:#db2777;
  border:1px solid rgba(219,39,119,.2)}
.badge-rose {
  background:rgba(225,29,72,.1);
  color:#e11d48;
  border:1px solid rgba(225,29,72,.2)}
.badge-slate {
  background:rgba(51,65,85,.1);
  color:#475569;
  border:1px solid rgba(51,65,85,.2)}
.grid-2 {
  display:grid;
  grid-template-columns:1fr;
  gap:2rem}
.grid-3 {
  display:grid;
  grid-template-columns:1fr;
  gap:2rem}
.grid-4 {
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem}
@media(min-width:768px) {
.grid-2 {
  grid-template-columns:1fr 1fr}
.grid-3 {
  grid-template-columns:1fr 1fr 1fr}
.grid-4 {
  grid-template-columns:1fr 1fr 1fr 1fr}



}
@media(min-width:640px) and (max-width:767px) {
.grid-3 {
  grid-template-columns:1fr 1fr}
.grid-4 {
  grid-template-columns:1fr 1fr}



}
.feature-card {
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  padding:2rem}
.feature-card .icon-box {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3.5rem;
  height:3.5rem;
  background:var(--bg-secondary);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  margin-bottom:1.5rem}
.pricing-card {
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  padding:2rem}
.pricing-card.featured {
  border-top-width:2px;
  border-left-width:2px;
  border-right-width:2px;
  border-bottom-width:2px;
  background:var(--bg-secondary)}
.pricing-card .price {
  font-size:2.5rem;
  font-weight:700;
  line-height:1}
.pricing-card .price-period {
  font-size:.875rem;
  color:var(--fg-muted);
  font-weight:400}
.check-row {
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.75rem 1.25rem;
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  margin-bottom:.75rem}
.check-row .check-icon {
  width:1.25rem;
  height:1.25rem;
  flex-shrink:0;
  margin-top:.125rem;
  color:var(--success)}
.feature-list {
  list-style:none;
  padding:0}
.feature-list li {
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.375rem 0}
.feature-list li .check-icon {
  width:1.25rem;
  height:1.25rem;
  flex-shrink:0;
  margin-top:.125rem;
  color:var(--success)}
.terminal {
  background:hsl(220 20% 4%);
  border:1px solid hsl(220 20% 15%);
  border-radius:var(--radius);
  overflow:hidden}
.terminal-header {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1rem;
  border-bottom:1px solid hsl(220 20% 15%);
  background:hsl(220 20% 8%)}
.terminal-dot {
  width:.625rem;
  height:.625rem;
  border-radius:50%}
.terminal-dot.red {

background:#ef4444}
.terminal-dot.yellow {
  background:#eab308}
.terminal-dot.green {
  background:#22c55e}
.terminal-body {
  padding:1.5rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.875rem;
  line-height:1.8;
  color:hsl(210 20% 80%)}
.terminal-body .prompt {
  color:#22c55e}
.terminal-body .cmd {
  color:hsl(210 20% 90%)}
.terminal-body .success {
  color:#06b6d4}
.terminal-body .muted {
  color:hsl(220 15% 45%)}
.terminal-body .link {
  color:#7c3aed}
.cta-section {
  text-align:center;
  padding:5rem 0}
.cta-section h2 {
  margin-bottom:1.5rem}
.cta-section p {
  max-width:42rem;
  margin:0 auto 2.5rem;
  font-size:1.125rem}
.stats-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  max-width:48rem;
  margin:0 auto}
@media(min-width:768px) {
.stats-grid {
  grid-template-columns:1fr 1fr 1fr 1fr}



}
.stat-card {
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  padding:1.5rem;
  text-align:center}
.step-card {
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1.25rem;
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo)}
.step-card .step-num {
  font-size:1.875rem;
  font-weight:700;
  opacity:.2;
  flex-shrink:0;
  line-height:1}
.blog-card {
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  overflow:hidden}
.blog-card .card-content {
  padding:1.5rem}
details.faq-item {
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  margin-bottom:.5rem}
details.faq-item summary {
  padding:1.25rem 2rem;
  font-weight:600;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between}
details.faq-item summary::-webkit-details-marker {
  display:none}
details.faq-item summary::after {
  content:'+';
  font-size:1.25rem;
  color:var(--fg-muted)}
details.faq-item[open] summary::after {
  content:'−'}
details.faq-item .faq-answer {
  padding:0 2rem 1.25rem;
  color:var(--fg-muted);
  line-height:1.7;
  font-size:.9375rem}
table {
  width:100%;
  border-collapse:collapse}
th,td {
  padding:.75rem 1rem;
  text-align:left;
  border-bottom:1px solid var(--bevel-edge)}
th {
  font-weight:600;
  font-size:.75rem;
  color:var(--fg-subtle);
  text-transform:uppercase;
  letter-spacing:.05em}
td {
  font-size:.875rem}
body:not(.newsletter) tr:hover td {
  background:var(--bg-secondary)}
.gradient-text-purple {
  background:linear-gradient(90deg,#7c3aed,#2563eb,#0891b2);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-emerald {
  background:linear-gradient(90deg,#059669,#2563eb,#4f46e5);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-blue {
  background:linear-gradient(90deg,#2563eb,#4f46e5,#7c3aed);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-cyan {
  background:linear-gradient(90deg,#0891b2,#2563eb,#4f46e5);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-amber {
  background:linear-gradient(90deg,#d97706,#ea580c,#dc2626);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-red {
  background:linear-gradient(90deg,#dc2626,#e11d48,#475569);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-orange {
  background:linear-gradient(90deg,#ea580c,#d97706,#ca8a04);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-indigo {
  background:linear-gradient(90deg,#4f46e5,#7c3aed,#2563eb);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-pink {
  background:linear-gradient(90deg,#db2777,#e11d48,#be185d);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.text-center {
  text-align:center}
.text-muted {
  color:var(--fg-muted)}
.text-sm {
  font-size:.875rem}
.text-xs {
  font-size:.75rem}
.text-lg {
  font-size:1.125rem}
.text-xl {
  font-size:1.25rem}
.text-2xl {
  font-size:1.5rem}
.text-3xl {
  font-size:1.875rem}
.text-4xl {
  font-size:2.25rem}
.text-5xl {
  font-size:3rem}
.text-6xl {
  font-size:3.75rem}
.font-bold {
  font-weight:700}
.font-medium {
  font-weight:500}
.font-semibold {
  font-weight:600}
.tracking-tight {
  letter-spacing:-.025em}
.tracking-tighter {
  letter-spacing:-.05em}
.max-w-2xl {
  max-width:42rem}
.max-w-3xl {
  max-width:48rem}
.max-w-4xl {
  max-width:56rem}
.max-w-5xl {
  max-width:64rem}
.max-w-6xl {
  max-width:72rem}
.mx-auto {
  margin-left:auto;
  margin-right:auto}
.mb-2 {
  margin-bottom:.5rem}
.mb-4 {
  margin-bottom:1rem}
.mb-6 {
  margin-bottom:1.5rem}
.mb-8 {
  margin-bottom:2rem}
.mb-12 {
  margin-bottom:3rem}
.mb-16 {
  margin-bottom:4rem}
.mt-4 {
  margin-top:1rem}
.mt-6 {
  margin-top:1.5rem}
.mt-8 {
  margin-top:2rem}
.gap-2 {
  gap:.5rem}
.gap-3 {
  gap:.75rem}
.gap-4 {
  gap:1rem}
.gap-6 {
  gap:1.5rem}
.gap-8 {
  gap:2rem}
.gap-10 {
  gap:2.5rem}
.gap-12 {
  gap:3rem}
.gap-16 {
  gap:4rem}
.flex {
  display:flex}
.flex-col {
  flex-direction:column}
.items-center {
  align-items:center}
.items-start {
  align-items:flex-start}
.justify-center {
  justify-content:center}
.justify-between {
  justify-content:space-between}
.flex-wrap {
  flex-wrap:wrap}
.inline-flex {
  display:inline-flex}
.w-full {
  width:100%}
.relative {
  position:relative}
.overflow-hidden {
  overflow:hidden}
.rounded-xl {
  border-radius:.75rem}
.rounded-2xl {
  border-radius:1rem}
.rounded-lg {
  border-radius:.5rem}
.border-t {
  border-top:1px solid var(--border)}
.border {
  border:1px solid var(--border)}
.shadow-sm {
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.shadow-lg {
  box-shadow:0 4px 16px rgba(0,0,0,.08)}
.leading-relaxed {
  line-height:1.625}
.space-y-2>*+* {
  margin-top:.5rem}
.space-y-3>*+* {
  margin-top:.75rem}
.space-y-4>*+* {
  margin-top:1rem}
.space-y-6>*+* {
  margin-top:1.5rem}
.back-link {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.875rem;
  color:var(--fg-muted);
  margin-bottom:1.5rem;
  transition:color .2s}
.back-link:hover {
  color:var(--fg)}
.avatar-circle {
  width:4rem;
  height:4rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem}
.avatar-blue {
  background:rgba(37,99,235,.1);
  color:#2563eb}
.avatar-purple {
  background:rgba(124,58,237,.1);
  color:#7c3aed}
.avatar-orange {
  background:rgba(217,119,6,.1);
  color:#d97706}
.avatar-teal {
  background:rgba(20,184,166,.1);
  color:#14b8a6}
.callout {
  padding:1rem;
  border-radius:.5rem;
  margin:.75rem 0}
.callout h2 {
  text-align:center}
.card {
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  padding:1.25rem}
.step-number {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  background:var(--fg);
  color:var(--bg);
  font-weight:700;
  font-size:.875rem;
  margin-bottom:.75rem}
.callout-blue {
  background:rgba(37,99,235,.05);
  border-left:3px solid #2563eb}
.callout-purple {
  background:rgba(124,58,237,.05);
  border-left:3px solid #7c3aed}
.callout-note {
  font-size:.875rem;
  color:var(--fg-muted);
  margin-top:.5rem}
.callout-note-green {
  color:#059669}
.callout-quote {
  font-style:italic;
  color:var(--fg-muted);
  margin:.75rem 0;
  padding:.5rem;
  border-left:3px solid var(--fg-subtle)}
.callout-warning {
  background:rgba(220,38,38,.05);
  border-left:3px solid #dc2626;
  padding:.75rem;
  border-radius:.25rem;
  font-size:.875rem;
  color:#dc2626}
.badge-row {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:.75rem}
.badge-gray {
  background:var(--bg-secondary);
  color:var(--fg-muted);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo)}
.feature-item {
  padding:1rem 0;
  border-bottom:1px solid var(--bevel-edge)}
.feature-item:last-child {
  border-bottom:none}
.feature-item h4 {
  font-weight:600;
  margin-bottom:.25rem}
.table-responsive {
  overflow-x:auto}
.prose table:not(.comparison-table) {
  overflow-x:auto;
  display:block}
body.newsletter #newsletter-body {
  color:#0B0B0F}
[data-theme="dark"] [style*="background:#fff"],[data-theme="dark"] [style*="background:#fff"] {
  color:#1a1a1a}
.prose pre,.prose code {
  overflow-x:auto;
  word-break:break-word;
  white-space:pre-wrap;
  word-wrap:break-word}
.page-hero h1 {
  overflow-wrap:break-word}
.comparison-table {
  min-width:600px}
.comparison-table th {
  text-align:left;
  padding:1rem}
.comparison-table td {
  padding:.875rem 1rem}
.text-blue {
  color:#2563eb}
.text-purple {
  color:#7c3aed}
.text-orange {
  color:#d97706}
.text-teal {
  color:#14b8a6}
.text-red {
  color:#dc2626}
.text-green {
  color:#059669}
.text-yellow {
  color:#ca8a04}
.text-center {
  text-align:center}
.card-grid {
  display:grid;
  gap:2rem}
.card-grid-2 {
  grid-template-columns:1fr}
@media(min-width:768px) {
.card-grid-2 {
  grid-template-columns:1fr 1fr}



}
.card-grid-3 {
  grid-template-columns:1fr}
@media(min-width:640px) {
.card-grid-3 {
  grid-template-columns:1fr 1fr}



}
@media(min-width:1024px) {
.card-grid-3 {
  grid-template-columns:1fr 1fr 1fr}



}
.card {
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  overflow:hidden}
.card-header-center {
  text-align:center;
  padding:2rem 1.5rem 0}
.card-body {
  padding:1.5rem}
.people-section {
  padding:5rem 0;
  background:var(--bg-secondary)}
.people-section .section-header {
  text-align:center;
  margin-bottom:3rem}
.people-section .section-title {
  font-size:1.875rem;
  font-weight:600;
  margin-bottom:.5rem}
.people-section .section-subtitle {
  color:var(--fg-muted)}
.people-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem}
@media(min-width:640px) {
.people-grid {
  grid-template-columns:1fr 1fr}



}
@media(min-width:1024px) {
.people-grid {
  grid-template-columns:1fr 1fr 1fr 1fr}



}
.people-card {
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  overflow:hidden}
.people-img-wrap {
  aspect-ratio:16/9;
  overflow:hidden}
.people-img-wrap img {
  width:100%;
  height:100%;
  object-fit:cover}
.people-card-content {
  padding:1rem;
  background:var(--bg)}
.people-card-content h3 {
  font-weight:600;
  margin-bottom:.25rem}
.people-card-content p {
  font-size:.875rem;
  color:var(--fg-muted)}
.cta-section.section-dark p,.cta-section.section-gradient p {
  color:rgba(255,255,255,.7)}
.legal-page {
  padding:8rem 0 5rem;
  min-height:100vh}
.legal-container {
  max-width:800px}
.legal-header {
  text-align:center;
  margin-bottom:4rem}
.legal-header h1 {
  font-size:2.5rem;
  font-weight:700;
  margin-bottom:1rem}
.legal-header p {
  color:var(--fg-muted);
  max-width:560px;
  margin:0 auto}
.legal-body {
  background:var(--bg-card);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  padding:2rem}
.legal-body section {
  margin-bottom:2rem;
  padding-bottom:2rem;
  border-bottom:1px solid var(--bevel-edge)}
.legal-body section:last-child {
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:none}
.legal-body h2 {
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:.75rem}
.legal-body p {
  color:var(--fg-muted);
  line-height:1.7}
.legal-body ul {
  list-style:disc;
  padding-left:1.5rem;
  color:var(--fg-muted)}
.legal-body li {
  margin-bottom:.5rem;
  line-height:1.6}
.terms-summary-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem}
@media(min-width:640px) {
.terms-summary-grid {
  grid-template-columns:1fr 1fr}



}
.terms-col {
  display:flex;
  flex-direction:column;
  gap:1rem}
.check-item {
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:1rem;
  background:var(--bg);
  border-top:1px solid var(--bevel-hi);
  border-left:1px solid var(--bevel-hi);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo)}
.check-item .check-icon {
  flex-shrink:0;
  width:1.5rem;
  height:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--success);
  font-size:.875rem;
  font-weight:700}
.check-title {
  font-weight:600;
  margin-bottom:.25rem}
.check-desc {
  font-size:.875rem;
  color:var(--fg-muted);
  line-height:1.5}
.max-width {
  max-width:56rem;
  margin-left:auto;
  margin-right:auto}
.prose {
  max-width:56rem;
  margin-left:auto;
  margin-right:auto;
  font-size:1.0625rem;
  line-height:1.75;
  color:var(--fg)}
.prose p,.prose ul,.prose ol,.prose blockquote {
  margin-bottom:1.25rem}
.prose p:last-child {
  margin-bottom:0}
.prose h2 {
  font-size:1.5rem;
  font-weight:700;
  margin-top:2.5rem;
  margin-bottom:1rem;
  line-height:1.3}
.prose h3 {
  font-size:1.25rem;
  font-weight:600;
  margin-top:2rem;
  margin-bottom:.75rem;
  line-height:1.35}
.prose h4 {
  font-size:1.0625rem;
  font-weight:600;
  margin-top:1.5rem;
  margin-bottom:.5rem}
.prose ul,.prose ol {
  padding-left:1.5rem}
.prose li {
  margin-bottom:.375rem;
  line-height:1.65}
.prose blockquote {
  border-top:1px solid var(--bevel-hi);
  border-left:3px solid var(--fg);
  border-right:1px solid var(--bevel-lo);
  border-bottom:1px solid var(--bevel-lo);
  padding:.75rem 1.25rem;
  margin:1.5rem 0;
  font-style:italic;
  color:var(--fg-muted);
  background:var(--bg-secondary)}
.prose strong {
  font-weight:600}
.prose code {
  font-size:.875em;
  background:var(--bg-secondary);
  padding:.125rem .375rem;
  border-radius:.25rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.prose img {
  max-width:100%;
  height:auto;
  border-radius:var(--radius-sm)}
.prose a {
  color:var(--primary);
  text-decoration:underline;
  text-underline-offset:2px}
.prose a:hover {
  color:var(--primary-hover)}
.prose .lead {
  font-size:1.125rem;
  line-height:1.7;
  color:var(--fg-muted)}
@media (max-width:768px) {
.prose {
  font-size:1rem}
.prose h2 {
  font-size:1.3125rem}
.prose h3 {
  font-size:1.125rem}



}
.blog-card {
  text-decoration:none;
  color:var(--fg);
  display:block}
.blog-card .badge {
  margin-bottom:.75rem}
.blog-card h3 {
  font-size:1.125rem;
  line-height:1.35;
  margin-bottom:.5rem}
.blog-card p {
  line-height:1.55}
.blog-card .text-xs {
  display:block;
  margin-top:.75rem}
@media (max-width:768px) {
table,.newsletter table {
  display:block;
  max-width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch}
td[style*="padding:0 36px"] {
  padding:0 16px !important}
td[style*="padding:28px 36px"],td[style*="padding:32px 36px"],td[style*="padding:30px 36px"],td[style*="padding:34px 36px"],td[style*="padding:38px 36px"] {
  padding-left:16px !important;
  padding-right:16px !important}



}
.related-posts {
  padding:3rem 0;
  background:var(--bg-secondary,transparent)}
.related-posts .container {
  max-width:42rem;
  margin:0 auto}
.related-posts .section-title {
  font-size:1.75rem;
  font-weight:700;
  margin-bottom:.5rem;
  text-align:center}
.related-posts .section-desc {
  color:var(--fg-muted);
  margin-bottom:2rem;
  text-align:center}
.related-posts-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem}
.related-post-card {
  display:block;
  background:var(--bg-card);
  border:1px solid var(--bevel-edge);
  border-radius:.75rem;
  padding:1.5rem;
  text-decoration:none;
  color:inherit;
  transition:transform .2s,box-shadow .2s;
  border-left:3px solid #ff0080}
.related-post-card:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 32px var(--shadow,rgba(0,0,0,.08))}
.related-post-card .post-date {
  font-size:.8rem;
  color:var(--fg-muted)}
.related-post-card h3 {
  font-size:1.1rem;
  font-weight:600;
  margin:.5rem 0;
  color:var(--fg)}
.related-post-card p {
  font-size:.9rem;
  color:var(--fg-muted);
  line-height:1.5;
  margin-bottom:.75rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden}
.related-post-card .read-more {
  font-size:.85rem;
  font-weight:500;
  color:#ff0080}
@media(max-width:768px) {
.related-posts-grid {
  grid-template-columns:1fr}



}
[data-theme="dark"] body,[data-theme="dark"] .calc-wrapper-section,[data-theme="dark"] .products-grid-section {
  background:var(--bg) !important}
body {
  background:#f8f9fc;
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
/* scoped to dark mode */
[data-theme="dark"] .site-header {
  background:rgba(9,9,15,0.75) !important;
  -webkit-border-bottom:1px solid rgba(255,255,255,0.08) !important;
  box-shadow:0 1px 0 0 rgba(99,102,241,0.15);
  transition:background 0.3s ease}
.header-inner {
  padding:0.5rem 1.5rem 0.5rem 10rem}
/* scoped to dark mode */
[data-theme="dark"] .nav-desktop a {
  color:rgba(241,245,249,0.65) !important;
  font-size:0.8125rem !important;
  border-radius:6px !important;
  border:none !important;
  padding:0.375rem 0.625rem !important;
  transition:color 0.2s ease,background 0.2s ease !important}
/* scoped to dark mode */
[data-theme="dark"] .nav-desktop a:hover {
  color:#f1f5f9 !important;
  background:rgba(255,255,255,0.08) !important}
/* scoped to dark mode */
[data-theme="dark"] .nav-desktop a.active {
  color:#f1f5f9 !important;
  background:rgba(99,102,241,0.18) !important;
  border:none !important}
.nav-desktop a svg {
  opacity:0.6}
.nav-desktop a:hover svg {
  opacity:1}
/* scoped to dark mode */
[data-theme="dark"] .btn-header-cta {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:6px !important;
  padding:0.45rem 1rem !important;
  font-size:0.8125rem !important;
  box-shadow:0 0 20px rgba(99,102,241,0.4),inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition:opacity 0.2s ease,box-shadow 0.2s ease !important}
/* scoped to dark mode */
[data-theme="dark"] .btn-header-cta:hover {
  opacity:0.9 !important;
  box-shadow:0 0 30px rgba(99,102,241,0.6),inset 0 1px 0 rgba(255,255,255,0.2) !important}
/* scoped to dark mode */
[data-theme="dark"] .logo-profile {
  top:20px !important;
  left:calc(1.5rem - 4px) !important;
  transform:none !important}
/* scoped to dark mode */
[data-theme="dark"] .logo-profile img {
  width:96px;
  height:96px;
  border:none !important;
  filter:drop-shadow(0 0 12px rgba(99,102,241,0.3))}
.logo-profile.scrolled img {
  width:54px;
  height:54px;
  filter:drop-shadow(0 0 8px rgba(99,102,241,0.25))}
/* scoped to dark mode */
[data-theme="dark"] .theme-toggle {
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  border-radius:6px !important;
  color:rgba(241,245,249,0.7) !important;
  width:38px !important;
  height:38px !important;
  padding:0 !important}
/* scoped to dark mode */
[data-theme="dark"] .theme-toggle:hover {
  background:rgba(255,255,255,0.12) !important}
.hero-orb-mid {
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(34,211,238,0.12) 0%,transparent 70%);
  filter:blur(60px);
  animation:orbFloat 9s ease-in-out infinite alternate-reverse;
  pointer-events:none}
@keyframes orbFloat {

  from {
  transform:translate(0,0) scale(1)}

to {
  transform:translate(30px,20px) scale(1.08)}


}
.hero-grid-overlay {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);
  pointer-events:none}
.hero-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  position:relative;
  z-index:2}
.hero-text-col {
  text-align:left;
  padding-right:1rem}
.hero-text-col .hero-eyebrow {
  margin-left:0}
.hero-visual-col {
  display:flex;
  flex-direction:column;
  gap:0.875rem}
.hero-visual-col .hero-chat-glass {
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:1rem;
  box-shadow:0 8px 40px rgba(0,0,0,0.2)}
.hero-visual-col .hero-chat-chips {
  justify-content:flex-start}
.hero-visual-col .chat-chip {
  font-size:0.75rem}
.hero-stats-bar {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  margin-top:4rem;
  flex-wrap:wrap;
  animation:fadeUp 0.7s ease 0.4s both}
.hero-stat-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.25rem 2.5rem;
  border-right:1px solid rgba(255,255,255,0.08)}
.hero-stat-item:last-child {
  border-right:none}
.hero-stat-num {
  font-size:1.75rem;
  font-weight:800;
  color:#f1f5f9;
  letter-spacing:-0.03em;
  line-height:1}
.hero-stat-label {
  font-size:0.75rem;
  color:var(--hero-muted);
  margin-top:0.25rem;
  white-space:nowrap}
@keyframes fadeUp {

  from {
  opacity:0;
  transform:translateY(20px)}

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


}
.calc-wrapper-section {
  background:#f8f9fc;
  padding:4rem 0 2rem}
.calc-shell {
  border:1.5px dashed #cbd5e1 !important;
  background:#f8fafc !important;
  border-radius:16px !important;
  padding:2.25rem !important;
  box-shadow:0 4px 24px rgba(0,0,0,0.02),0 1px 4px rgba(0,0,0,0.01) !important}
.calc-shell-title {
  font-weight:800 !important;
  letter-spacing:-0.03em !important;
  color:#0f172a !important}
.calc-shell-sub {
  color:#64748b !important}
.calc-period {
  background:#f1f5f9 !important;
  border:1px solid #e2e8f0 !important;
  border-radius:1019px !important}
.calc-period-btn {
  border:none !important;
  border-radius:1019px !important;
  color:#64748b !important;
  transition:background 0.15s ease,color 0.15s ease !important}
.calc-period-btn.active {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(99,102,241,0.4) !important}
.calc-period-save {
  background:rgba(16,185,129,0.12) !important;
  color:#10b981 !important;
  border-radius:4px !important}
.calc-vps-btn {
  border:1.5px dashed #cbd5e1 !important;
  border-radius:10px !important;
  background:#fff !important;
  transition:border-color 0.15s ease,box-shadow 0.15s ease,transform 0.15s var(--ease-spring) !important;
  color:#0f172a !important}
.calc-vps-btn:hover {
  border-color:var(--p-indigo) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,0.12) !important;
  transform:translateY(-1px) !important;
  background:#fff !important}
.calc-vps-btn.active {
  border-color:var(--p-indigo) !important;
  border-left-color:var(--p-indigo) !important;
  border-right-color:var(--p-indigo) !important;
  border-top-color:var(--p-indigo) !important;
  border-bottom-color:var(--p-indigo) !important;
  background:rgba(99,102,241,0.06) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,0.15) !important}
.calc-vps-btn.active strong {
  color:var(--p-indigo) !important}
.calc-vps-btn em {
  color:var(--p-indigo) !important}
.calc-price-row {
  border-top:1px solid #f1f5f9 !important}
.calc-price-amount {
  background:linear-gradient(135deg,#0f172a,#334155);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:900 !important;
  letter-spacing:-0.05em !important}
.calc-price-saving {
  color:var(--p-emerald) !important}
.calc-price-currency {
  color:#0f172a !important}
.calc-cta {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
  font-size:1rem !important;
  font-weight:700 !important;
  box-shadow:0 4px 20px rgba(99,102,241,0.4),inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition:transform 0.2s var(--ease-spring),box-shadow 0.2s ease !important}
.calc-cta:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 8px 30px rgba(99,102,241,0.55),inset 0 1px 0 rgba(255,255,255,0.2) !important;
  background:linear-gradient(135deg,#5558ea,#7c3aed) !important}
.calc-slider::-webkit-slider-thumb {
  background:var(--p-indigo) !important}
.calc-slider::-moz-range-thumb {
  background:var(--p-indigo) !important}
.products-grid-section {
  background:#f8f9fc;
  padding:1rem 0 4rem}
.solution-card {
  background:#fff !important;
  border:1.5px solid #e8ecf4 !important;
  border-top:none !important;
  border-left:none !important;
  border-right:none !important;
  border-bottom:none !important;
  border-radius:14px !important;
  padding:1.5rem 1.25rem !important;
  transition:transform 0.22s var(--ease-spring),box-shadow 0.22s ease,border-color 0.2s ease !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.05),0 1px 8px rgba(0,0,0,0.04) !important;
  position:relative;
  overflow:hidden}
.solution-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(99,102,241,0.05),rgba(139,92,246,0.03));
  opacity:0;
  transition:opacity 0.2s ease;
  pointer-events:none;
  border-radius:inherit}
.solution-card:hover {
  transform:translateY(-4px) !important;
  box-shadow:0 12px 32px rgba(99,102,241,0.15),0 2px 8px rgba(0,0,0,0.06) !important;
  border-color:rgba(99,102,241,0.3) !important;
  background:#fff !important}
.solution-card:hover::before {
  opacity:1}
.solution-card .card-icon {
  background:linear-gradient(135deg,rgba(99,102,241,0.12),rgba(139,92,246,0.08)) !important;
  border:1.5px solid rgba(99,102,241,0.2) !important;
  border-top:none !important;
  border-left:none !important;
  border-right:none !important;
  border-bottom:none !important;
  border-radius:10px !important;
  transition:background 0.2s ease,transform 0.2s var(--ease-spring) !important}
.solution-card:hover .card-icon {
  background:linear-gradient(135deg,rgba(99,102,241,0.2),rgba(139,92,246,0.15)) !important;
  transform:scale(1.05)}
.solution-card .card-icon svg {
  color:var(--p-indigo) !important}
.solution-card h3 {
  font-weight:700 !important;
  color:#0f172a !important;
  font-size:0.9375rem !important}
.solution-card p {
  color:#64748b !important}
.trust-strip {
  background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%);
  padding:3.5rem 0;
  position:relative;
  overflow:hidden}
.trust-strip::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:50px 50px;
  pointer-events:none}
.stat-number {
  font-size:1.875rem !important;
  font-weight:800 !important;
  background:linear-gradient(135deg,#f1f5f9,#a5b4fc);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-0.03em;
  line-height:1 !important}
.stat-label {
  color:rgba(148,163,184,0.85) !important;
  font-size:0.8125rem !important;
  margin-top:0.25rem;
  display:block}
.channel-chip {
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  border-top:none !important;
  border-left:none !important;
  border-right:none !important;
  border-bottom:none !important;
  border-radius:1019px !important;
  color:rgba(241,245,249,0.75) !important;
  font-size:0.8125rem !important;
  padding:0.45rem 0.9rem !important;
  gap:0.45rem !important;
  transition:background 0.15s ease,color 0.15s ease,transform 0.15s var(--ease-spring) !important}
.channel-chip:hover {
  background:rgba(99,102,241,0.2) !important;
  color:#f1f5f9 !important;
  transform:translateY(-1px)}
.channel-chip svg {
  width:14px !important;
  height:14px !important;
  color:#a5b4fc !important}
.cta-section {
  background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 40%,#0f172a 100%) !important;
  position:relative;
  overflow:hidden}
.cta-section::before {
  content:'';
  position:absolute;
  width:600px;
  height:600px;
  border-radius:50%;
  top:-200px;
  right:-100px;
  background:radial-gradient(circle,rgba(99,102,241,0.35) 0%,transparent 70%);
  filter:blur(60px);
  pointer-events:none}
.cta-section::after {
  content:'';
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  bottom:-150px;
  left:-80px;
  background:radial-gradient(circle,rgba(34,211,238,0.2) 0%,transparent 70%);
  filter:blur(50px);
  pointer-events:none}
.cta-section h2 {
  color:#f1f5f9 !important;
  font-weight:800 !important;
  letter-spacing:-0.03em !important;
  font-size:clamp(1.75rem,4vw,2.5rem) !important;
  position:relative;
  z-index:1}
.cta-section p {
  color:rgba(148,163,184,0.9) !important;
  position:relative;
  z-index:1}
.cta-section .btn-primary {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  padding:1rem 2.25rem !important;
  box-shadow:0 0 30px rgba(99,102,241,0.5),inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition:transform 0.2s var(--ease-spring),box-shadow 0.2s ease !important;
  position:relative;
  z-index:1}
.cta-section .btn-primary:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 8px 40px rgba(99,102,241,0.65),inset 0 1px 0 rgba(255,255,255,0.2) !important}
.cta-section .btn-ghost {
  background:rgba(255,255,255,0.07) !important;
  color:#f1f5f9 !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  border-radius:8px !important;
  padding:1rem 2.25rem !important;
  transition:background 0.2s ease,transform 0.2s var(--ease-spring) !important;
  position:relative;
  z-index:1}
.cta-section .btn-ghost:hover {
  background:rgba(255,255,255,0.12) !important;
  transform:translateY(-2px) !important}
/* scoped to dark mode */
[data-theme="dark"] .site-footer {
  background:#09090f !important;
  border-top:1px solid rgba(255,255,255,0.07) !important}
.site-footer,.site-footer * {
  color:var(--fg-muted)}
[data-theme="dark"] .footer-brand .footer-logo {
  color:#f1f5f9 !important}
[data-theme="dark"] .footer-brand p {
  color:rgba(148,163,184,0.85) !important}
[data-theme="dark"] .footer-col h5 {
  color:rgba(241,245,249,0.6) !important;
  letter-spacing:0.06em}
[data-theme="dark"] .footer-col a {
  color:rgba(148,163,184,0.85) !important;
  transition:color 0.15s ease !important}
[data-theme="dark"] .footer-col a:hover {
  color:#f1f5f9 !important}
[data-theme="dark"] .footer-bottom {
  border-top:1px solid rgba(255,255,255,0.06) !important;
  color:rgba(148,163,184,0.65) !important}
.footer-social a {
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:8px !important;
  color:rgba(148,163,184,0.7) !important;
  transition:background 0.15s ease,color 0.15s ease !important}
.footer-social a:hover {
  background:rgba(99,102,241,0.2) !important;
  color:#f1f5f9 !important}
.btn-primary:not(.hero-canvas .btn-primary):not(.cta-section .btn-primary) {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  box-shadow:0 2px 12px rgba(99,102,241,0.35) !important;
  transition:transform 0.15s var(--ease-spring),box-shadow 0.15s ease !important}
.btn-primary:not(.hero-canvas .btn-primary):not(.cta-section .btn-primary):hover {
  transform:translateY(-1px) !important;
  box-shadow:0 6px 20px rgba(99,102,241,0.5) !important}
.section-wave {
  line-height:0;
  overflow:hidden}
.section-wave svg {
  display:block;
  width:100%}
@media (max-width:768px) {
.hero-stat-item {
  padding:1rem 1.5rem}
.hero-stat-num {
  font-size:1.375rem}
.trust-strip {
  padding:2.5rem 0}



}
@media (max-width:480px) {
.hero-stat-item {
  padding:0.75rem 1rem}



}
/* scoped to dark mode */
[data-theme="dark"] .mobile-overlay {
  background:rgba(9,9,15,0.97) !important;
  backdrop-filter:blur(20px) !important}
/* scoped to dark mode */
[data-theme="dark"] .mobile-overlay a {
  color:rgba(241,245,249,0.8) !important}
/* scoped to dark mode */
[data-theme="dark"] .mobile-overlay a:hover, [data-theme="dark"] .mobile-overlay a.active {
  background:rgba(255,255,255,0.07) !important;
  color:#f1f5f9 !important}
/* scoped to dark mode */
[data-theme="dark"] .mobile-overlay a.nav-cta {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  box-shadow:0 4px 20px rgba(99,102,241,0.4) !important}
/* scoped to dark mode */
[data-theme="dark"] .mobile-overlay a.nav-cta:hover {
  opacity:0.9 !important}
[data-theme="dark"] body,[data-theme="dark"] .calc-wrapper-section,[data-theme="dark"] .products-grid-section {
  background:#1e1e1e !important}
[data-theme="dark"] .solution-card {
  background:#2d2d30 !important;
  border-color:rgba(255,255,255,0.08) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.3),0 1px 8px rgba(0,0,0,0.2) !important}
[data-theme="dark"] .solution-card h3,[data-theme="dark"] .solution-card p {
  color:#e0e0e0 !important}
.section .max-w-6xl > div[style*="background:var(--bg-card)"] {
  background:#fff !important;
  border:1.5px solid #e8ecf4 !important;
  border-top:none !important;
  border-left:none !important;
  border-right:none !important;
  border-bottom:none !important;
  border-radius:14px !important;
  padding:1.75rem 1.5rem !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.05),0 1px 8px rgba(0,0,0,0.04) !important;
  transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.22s ease,border-color 0.2s ease !important;
  position:relative;
  overflow:hidden}
.section .max-w-6xl > div[style*="background:var(--bg-card)"]::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(99,102,241,0.04),rgba(139,92,246,0.02));
  opacity:0;
  transition:opacity 0.2s ease;
  pointer-events:none;
  border-radius:inherit}
.section .max-w-6xl > div[style*="background:var(--bg-card)"]:hover {
  transform:translateY(-4px) !important;
  box-shadow:0 12px 32px rgba(99,102,241,0.12),0 2px 8px rgba(0,0,0,0.06) !important;
  border-color:rgba(99,102,241,0.25) !important}
.section .max-w-6xl > div[style*="background:var(--bg-card)"]:hover::before {
  opacity:1}
.section .max-w-6xl > div[style*="background:var(--bg-card)"] > div > div[style*="background:rgba"] {
  border-radius:10px !important;
  transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important}
.section .max-w-6xl > div[style*="background:var(--bg-card)"]:hover > div > div[style*="background:rgba"] {
  transform:scale(1.08) !important}
.section .max-w-6xl > div[style*="background:var(--bg-card)"] h3 {
  font-weight:700 !important;
  color:#0f172a !important;
  font-size:1rem !important;
  letter-spacing:-0.01em}
.section .max-w-6xl > div[style*="background:var(--bg-card)"] p {
  color:#64748b !important;
  font-size:0.875rem !important;
  line-height:1.65 !important}
.section-label {
  border:none !important;
  border-radius:1019px !important;
  font-weight:600 !important;
  letter-spacing:0.04em !important;
  padding:0.35rem 0.9rem !important}
.section h2.text-3xl {
  font-weight:800 !important;
  letter-spacing:-0.03em !important;
  color:#0f172a !important;
  font-size:clamp(1.75rem,4vw,2.5rem) !important;
  line-height:1.15 !important}
.section p.text-lg.text-muted {
  color:#64748b !important;
  font-size:1.0625rem !important;
  line-height:1.65 !important}
.text-center {
  text-align:center !important}
.text-center * {
  text-align:center !important}
#calc {
  background:#f8f9fc !important;
  border-top:1px solid #e8ecf4 !important}
#calc h2 {
  font-weight:800 !important;
  letter-spacing:-0.03em !important;
  color:#0f172a !important}
#calc p {
  color:#64748b !important}
.section {
  padding:8.5rem 0 !important}
.section-alt {
  background:#f8f9fc !important;
  padding:8.5rem 0 !important}
.section-alt table {
  border-radius:16px !important;
  overflow:hidden;
  border:1px solid #e2e8f0 !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.02),0 1px 3px rgba(0,0,0,0.01) !important;
  border-spacing:0 !important;
  border-collapse:separate !important}
.section-alt thead tr {
  background:#f8fafc !important;
  border-bottom:2px solid #e2e8f0 !important}
.section-alt th {
  color:#475569 !important;
  font-weight:700 !important;
  font-size:0.9rem !important;
  text-transform:uppercase !important;
  letter-spacing:0.06em !important;
  padding:24px 28px !important;
  border-bottom:2px solid #e2e8f0 !important}
.section-alt td {
  border-bottom:1px solid #e2e8f0 !important;
  padding:24px 28px !important;
  transition:background 0.15s ease;
  vertical-align:middle}
.section-alt tbody tr:hover td {
  background:rgba(99,102,241,0.02) !important}
.section-alt tbody tr:last-child td {
  border-bottom:none !important}
.section-alt td:nth-child(2),.section-alt th:nth-child(2) {
  background:rgba(99,102,241,0.04) !important;
  border-left:1px solid rgba(99,102,241,0.08) !important;
  border-right:1px solid rgba(99,102,241,0.08) !important}
.section-alt tbody tr:hover td:nth-child(2) {
  background:rgba(99,102,241,0.06) !important}
section[style*="background:rgba"] {
  background:linear-gradient(135deg,#f8f9fc,#f1f5f9) !important;
  border-top:1px solid #e8ecf4 !important;
  border-bottom:1px solid #e8ecf4 !important}
section[style*="background:rgba"] h4 {
  color:#475569 !important;
  letter-spacing:0.08em !important}
section[style*="background:rgba"] p {
  color:#64748b !important}
section[style*="background:rgba"] .btn-ghost {
  background:#fff !important;
  color:#334155 !important;
  border:1.5px solid #e2e8f0 !important;
  border-radius:10px !important;
  font-weight:600 !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.04) !important;
  transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.2s ease,border-color 0.2s ease,color 0.2s ease !important}
section[style*="background:rgba"] .btn-ghost:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 6px 16px rgba(99,102,241,0.12) !important;
  border-color:rgba(99,102,241,0.3) !important;
  color:#4f46e5 !important}
.cta-section {
  background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 40%,#0f172a 100%) !important;
  position:relative;
  overflow:hidden}
.cta-section::before {
  content:'';
  position:absolute;
  width:600px;
  height:600px;
  border-radius:50%;
  top:-200px;
  right:-100px;
  background:radial-gradient(circle,rgba(99,102,241,0.35) 0%,transparent 70%);
  filter:blur(60px);
  pointer-events:none}
.cta-section::after {
  content:'';
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  bottom:-150px;
  left:-80px;
  background:radial-gradient(circle,rgba(34,211,238,0.2) 0%,transparent 70%);
  filter:blur(50px);
  pointer-events:none}
.cta-section h2 {
  color:#f1f5f9 !important;
  font-weight:800 !important;
  letter-spacing:-0.03em !important;
  position:relative;
  z-index:1}
.cta-section p {
  color:rgba(148,163,184,0.9) !important;
  position:relative;
  z-index:1}
.cta-section .btn-primary {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
  box-shadow:0 0 30px rgba(99,102,241,0.5),inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.2s ease !important;
  position:relative;
  z-index:1}
.cta-section .btn-primary:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 8px 40px rgba(99,102,241,0.65),inset 0 1px 0 rgba(255,255,255,0.2) !important}
.cta-section .btn-ghost {
  background:rgba(255,255,255,0.07) !important;
  color:#f1f5f9 !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  border-radius:10px !important;
  transition:background 0.2s ease,transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
  position:relative;
  z-index:1}
.cta-section .btn-ghost:hover {
  background:rgba(255,255,255,0.12) !important;
  transform:translateY(-2px) !important}
.hero-orb-mid {
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  filter:blur(60px);
  animation:orbFloat 9s ease-in-out infinite alternate-reverse;
  pointer-events:none}
.hero-grid-overlay {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);
  pointer-events:none}
[data-theme="dark"] .hero-canvas::before {
  background:radial-gradient(circle,rgba(99,102,241,0.4) 0%,transparent 70%)}
[data-theme="dark"] .hero-canvas::after {
  background:radial-gradient(circle,rgba(139,92,246,0.35) 0%,rgba(34,211,238,0.2) 60%,transparent 80%)}
[data-theme="dark"] .hero-grid-overlay {
  background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px)}
@keyframes orbFloat {

  from {
  transform:translate(0,0) scale(1)}

to {
  transform:translate(30px,20px) scale(1.08)}


}
.section code {
  background:#f1f5f9 !important;
  color:#4f46e5 !important;
  border:1px solid #e2e8f0 !important;
  border-radius:5px !important;
  padding:0.125rem 0.4rem !important;
  font-size:0.8125rem !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
html:not([data-theme="dark"]) .mega-menu-inner {
  background:rgba(255,255,255,0.98) !important;
  backdrop-filter:blur(20px) !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.1) !important}
html:not([data-theme="dark"]) .mega-col h5 {
  border-bottom-color:rgba(0,0,0,0.08) !important}
html:not([data-theme="dark"]) .mega-col a {
  color:rgba(0,0,0,0.6) !important}
html:not([data-theme="dark"]) .mega-col a:hover {
  color:#000 !important}
html:not([data-theme="dark"]) .mobile-overlay {
  background:rgba(255,255,255,0.98) !important;
  backdrop-filter:blur(20px) !important}
html:not([data-theme="dark"]) .mobile-overlay a {
  color:rgba(0,0,0,0.7) !important}
html:not([data-theme="dark"]) .mobile-overlay a:hover {
  background:rgba(0,0,0,0.04) !important;
  color:#000 !important}
html:not([data-theme="dark"]) .mobile-menu-divider {
  background:rgba(0,0,0,0.1) !important}
html:not([data-theme="dark"]) .mobile-grid-apps a {
  background:rgba(0,0,0,0.02) !important;
  border-color:rgba(0,0,0,0.06) !important;
  color:rgba(0,0,0,0.7) !important}
html:not([data-theme="dark"]) .mobile-grid-apps a:hover {
  background:rgba(0,0,0,0.04) !important;
  color:#000 !important}
html:not([data-theme="dark"]) .mobile-menu-section-title {
  color:#6366f1 !important}
html:not([data-theme="dark"]) .mobile-overlay a.nav-cta {
  background:linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  color:#fff !important}
.header-inner {
  padding:0.5rem 1.5rem 0.5rem 10rem}
/* scoped to dark mode */
[data-theme="dark"] .logo-profile {
  position:absolute !important;
  left:calc(1.5rem - 4px) !important;
  top:20px !important;
  transform:none !important}
/* scoped to dark mode */
[data-theme="dark"] .logo-profile img {
  width:96px;
  height:96px;
  border:none !important;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(99,102,241,0.3));
  border-radius:0 !important}
.logo-profile.scrolled img {
  width:54px;
  height:54px}
.calc-vps-btn {
  border:1.5px solid #cbd5e1 !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.04) !important}
.calc-vps-btn:hover {
  border-color:#6366f1 !important;
  box-shadow:0 4px 12px rgba(99,102,241,0.12) !important}
[data-theme="dark"] .calc-vps-btn {
  border:1.5px solid #3a3a3c !important}
.calc-slider-row .calc-slider {
  margin-left:0.25rem !important;
  width:calc(100% - 0.5rem) !important}
.az-main {
  padding-left:20px !important}
html:not([data-theme="dark"]) .hero-canvas .btn-ghost {
  background:rgba(0,0,0,0.04) !important;
  color:#334155 !important;
  border:1px solid rgba(0,0,0,0.1) !important}
html:not([data-theme="dark"]) .hero-canvas .btn-ghost:hover {
  background:rgba(0,0,0,0.08) !important}
.section table:not(.az-table) {
  width:100%;
  border-collapse:collapse}
.section table:not(.az-table) th,.section table:not(.az-table) td {
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:0.875rem}
.section table:not(.az-table) th {
  background:var(--bg-secondary,#f1f5f9);
  font-weight:700;
  color:var(--fg)}
.section table:not(.az-table) tbody tr:hover {
  background:rgba(99,102,241,0.03)}
[data-theme="dark"] .section table:not(.az-table) th {
  background:#2a2a2c}
[data-theme="dark"] body,[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"],[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"] {
  background:#2d2d30 !important}
[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"] {
  background:#2d2d30 !important;
  border:1.5px solid #3a3a3c !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.2),0 1px 8px rgba(0,0,0,0.15) !important}
[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"]:hover {
  box-shadow:0 12px 32px rgba(99,102,241,0.2),0 2px 8px rgba(0,0,0,0.2) !important;
  border-color:rgba(99,102,241,0.35) !important}
[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"] h3 {
  color:#ededed !important}
[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"] p {
  color:#a8a8a8 !important}
[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"]::before {
  background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.04)) !important}
[data-theme="dark"] .section h2.text-3xl {
  color:#f1f5f9 !important}
[data-theme="dark"] .section p.text-lg.text-muted {
  color:#94a3b8 !important}
[data-theme="dark"] #calc {
  background:#1e1e1e !important;
  border-top:1px solid #3a3a3c !important}
[data-theme="dark"] #calc h2 {
  color:#f1f5f9 !important}
[data-theme="dark"] #calc p {
  color:#94a3b8 !important}
[data-theme="dark"] .calc-shell {
  background:#1a1a1e !important;
  border:1.5px dashed #3a3a3c !important;
  box-shadow:0 4px 24px rgba(0,0,0,0.3) !important}
[data-theme="dark"] .calc-shell-title {
  color:#f1f5f9 !important}
[data-theme="dark"] .calc-shell-sub {
  color:#94a3b8 !important}
[data-theme="dark"] .calc-period {
  background:#1e1e1e !important;
  border-color:#3a3a3c !important}
[data-theme="dark"] .calc-period-btn {
  background:#2d2d30 !important;
  color:#a8a8a8 !important;
  border-color:#3a3a3c !important}
[data-theme="dark"] .calc-period-btn:hover {
  color:#f1f5f9 !important;
  background:#3a3a3c !important}
[data-theme="dark"] .calc-period-btn.active {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;

color:#fff !important;
  box-shadow:0 2px 8px rgba(99,102,241,0.4) !important}
[data-theme="dark"] .calc-vps-btn {
  background:#2d2d30 !important;
  border-color:#3a3a3c !important;
  color:#ededed !important}
[data-theme="dark"] .calc-vps-btn:hover {
  border-color:var(--p-indigo) !important;
  background:#3a3a3c !important}
[data-theme="dark"] .calc-vps-btn.active {
  background:rgba(99,102,241,0.15) !important;
  border-color:var(--p-indigo) !important}
[data-theme="dark"] .calc-slider-row {
  background:rgba(255,255,255,0.03) !important;
  border-color:#3a3a3c !important}
[data-theme="dark"] .calc-slider-label {
  color:#ededed !important}
[data-theme="dark"] .calc-slider-val {
  color:#a5b4fc !important}
[data-theme="dark"] .calc-slider {
  accent-color:var(--p-indigo) !important}
[data-theme="dark"] .calc-price-amount {
  background:linear-gradient(135deg,#f1f5f9,#a5b4fc) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important}
[data-theme="dark"] .calc-cta {
  box-shadow:0 4px 20px rgba(99,102,241,0.5),inset 0 1px 0 rgba(255,255,255,0.15) !important}
[data-theme="dark"] #calc [style*="background:#fff"],[data-theme="dark"] #calc [style*="background:#fff"],[data-theme="dark"] #calc [style*="background:#f8fafc"] {
  background:#2d2d30 !important}
[data-theme="dark"] #calc [style*="background:rgba(0"] {
  background:rgba(255,255,255,0.03) !important}
[data-theme="dark"] #calc [style*="border:1px solid var(--border)"],[data-theme="dark"] #calc [style*="border:1px dashed var(--border)"],[data-theme="dark"] #calc [style*="border:1.5px dashed var(--border)"],[data-theme="dark"] #calc [style*="border-top:1px dashed var(--border)"] {
  border-color:#3a3a3c !important}
[data-theme="dark"] #calc [style*="color:var(--foreground)"],[data-theme="dark"] #calc [style*="color:var(--foreground)"] {
  color:#f1f5f9 !important}
[data-theme="dark"] #calc [style*="color:var(--muted-foreground)"],[data-theme="dark"] #calc [style*="color:var(--muted-foreground)"] {
  color:#94a3b8 !important}
[data-theme="dark"] #calc [style*="color:var(--primary)"],[data-theme="dark"] #calc [style*="color:var(--primary)"] {
  color:#a5b4fc !important}
[data-theme="dark"] #calc [style*="background:var(--muted)"],[data-theme="dark"] #calc [style*="background:var(--muted)"] {
  background:#1e1e1e !important}
[data-theme="dark"] #calc .calc-period-save {
  background:rgba(16,185,129,0.2) !important;
  color:#34d399 !important}
[data-theme="dark"] .section-alt {
  background:#1e1e1e !important}
[data-theme="dark"] .section-alt table {
  border-color:#2e2e32 !important;
  box-shadow:0 10px 40px rgba(0,0,0,0.3) !important}
[data-theme="dark"] .section-alt thead tr {
  background:#26262b !important;
  border-bottom-color:#3e3e42 !important}
[data-theme="dark"] .section-alt th {
  color:#94a3b8 !important;
  border-bottom-color:#3e3e42 !important}
[data-theme="dark"] .section-alt td {
  border-bottom-color:#2d2d30 !important;
  color:#d4d4d8 !important}
[data-theme="dark"] .section-alt tbody tr:hover td {
  background:rgba(165,180,252,0.03) !important}
[data-theme="dark"] .section-alt td:nth-child(2),[data-theme="dark"] .section-alt th:nth-child(2) {
  background:rgba(165,180,252,0.06) !important;
  border-left:1px solid rgba(165,180,252,0.12) !important;
  border-right:1px solid rgba(165,180,252,0.12) !important}
[data-theme="dark"] .section-alt tbody tr:hover td:nth-child(2) {
  background:rgba(165,180,252,0.09) !important}
[data-theme="dark"] .section-alt td[style*="color:var(--accent-color)"],[data-theme="dark"] .section-alt td[style*="color:var(--accent-color)"] {
  color:#a5b4fc !important}
[data-theme="dark"] section[style*="background:rgba"] {
  background:linear-gradient(135deg,#1a1a2e,#16213e) !important;
  border-top-color:#2a2a3c !important;
  border-bottom-color:#2a2a3c !important}
[data-theme="dark"] section[style*="background:rgba"] h4 {
  color:#94a3b8 !important}
[data-theme="dark"] section[style*="background:rgba"] p {
  color:#64748b !important}
[data-theme="dark"] section[style*="background:rgba"] .btn-ghost {
  background:rgba(255,255,255,0.06) !important;
  color:#e2e8f0 !important;
  border-color:rgba(255,255,255,0.1) !important}
[data-theme="dark"] section[style*="background:rgba"] .btn-ghost:hover {
  background:rgba(99,102,241,0.15) !important;
  border-color:rgba(99,102,241,0.3) !important;
  color:#a5b4fc !important}
[data-theme="dark"] .section code {
  background:#2a2a2c !important;
  color:#a5b4fc !important;
  border-color:#3a3a3c !important}
@media (max-width:768px) {
.section .max-w-6xl > div[style*="background:var(--bg-card)"] {
  padding:1.25rem 1rem !important}
.section-alt table {
  font-size:0.8125rem !important}
.section-alt th,.section-alt td {
  padding:10px 12px !important}



}
.tech-spec-tab-btn,.showcase-tab-btn {
  border-bottom:2px solid transparent !important;
  color:var(--muted-foreground) !important;
  transition:all 0.22s ease !important}
.tech-spec-tab-btn:hover,.showcase-tab-btn:hover {
  color:var(--foreground) !important;
  border-bottom-color:rgba(99,102,241,0.4) !important}
.tech-spec-tab-btn.active,.showcase-tab-btn.active {
  color:var(--primary) !important;
  border-bottom-color:var(--primary) !important;
  font-weight:700 !important}
[data-theme="dark"] .tech-spec-tab-btn.active,[data-theme="dark"] .showcase-tab-btn.active {
  color:#a5b4fc !important;
  border-bottom-color:#a5b4fc !important}
.tech-table tr {
  transition:background 0.15s ease}
.tech-table tr:hover {
  background:rgba(99,102,241,0.03) !important}
[data-theme="dark"] .tech-table tr:hover {
  background:rgba(99,102,241,0.08) !important}
[data-theme="dark"] .tech-table th {
  background:#2a2a2c !important;
  color:#ededed !important}
[data-theme="dark"] .tech-table td {
  border-bottom-color:#2a2a2c !important}
[data-theme="dark"] .tech-table {
  border-color:#3a3a3c !important}
#general-bots-calculator {
  --muted-foreground:#475569 !important;
  --border:#cbd5e1 !important}
[data-theme="dark"] #general-bots-calculator {
  --muted-foreground:#94a3b8 !important;
  --border:#3a3a3c !important}
#general-bots-calculator [style*="background:rgba(0"],#general-bots-calculator [style*="background:rgba(0"] {
  background:#f1f5f9 !important}
[data-theme="dark"] #general-bots-calculator [style*="background:rgba(0"],[data-theme="dark"] #general-bots-calculator [style*="background:rgba(0"] {
  background:rgba(255,255,255,0.03) !important}
.az-ai {
  background:#f8fafc !important;
  border:1.5px solid #cbd5e1 !important;
  border-radius:8px !important;
  padding:12px 10px !important;
  cursor:pointer;
  font-family:inherit;
  color:#334155 !important;
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:center;
  transition:all 0.2s ease !important}
.az-ai:hover {
  border-color:#6366f1 !important;
  background:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(99,102,241,0.08) !important}
.az-ai.az-ai-active {
  background:rgba(99,102,241,0.06) !important;
  border-color:#6366f1 !important;
  color:#4f46e5 !important;
  box-shadow:0 0 0 3px rgba(99,102,241,0.15) !important}
.az-ai strong {
  font-size:13px;
  font-weight:700;
  color:#0f172a !important}
.az-ai.az-ai-active strong {
  color:#4f46e5 !important}
.az-ai span {
  font-size:9.5px;
  color:#475569 !important;
  line-height:1.3}
.az-ai.az-ai-active span {
  color:#4f46e5 !important;
  opacity:0.8}
.az-ai em {
  font-style:normal;
  font-size:11.5px;
  color:#6366f1 !important;
  font-weight:700}
.az-ai.az-ai-active em {
  color:#4f46e5 !important}
[data-theme="dark"] .az-ai {
  background:#2d2d30 !important;
  border-color:#3a3a3c !important;
  color:#d4d4d8 !important}
[data-theme="dark"] .az-ai:hover {
  background:#3a3a3c !important;
  border-color:#a5b4fc !important;
  box-shadow:0 4px 12px rgba(165,180,252,0.15) !important}
[data-theme="dark"] .az-ai.az-ai-active {
  background:rgba(165,180,252,0.15) !important;
  border-color:#a5b4fc !important;
  color:#a5b4fc !important;
  box-shadow:0 0 0 3px rgba(165,180,252,0.25) !important}
[data-theme="dark"] .az-ai strong {
  color:#f1f5f9 !important}
[data-theme="dark"] .az-ai.az-ai-active strong {
  color:#a5b4fc !important}
[data-theme="dark"] .az-ai span {
  color:#94a3b8 !important}
[data-theme="dark"] .az-ai.az-ai-active span {
  color:#a5b4fc !important}
[data-theme="dark"] .az-ai em {
  color:#a5b4fc !important}
[data-theme="dark"] .az-ai.az-ai-active em {
  color:#a5b4fc !important}
h1 {
  letter-spacing:-0.03em}
h2 {
  letter-spacing:-0.02em}
h3 {
  letter-spacing:-0.01em}
.header,.site-header {
  -webkit-background:rgba(9,9,15,0.75) !important;
  border-bottom:1px solid rgba(255,255,255,0.06)}
.btn {
  border-radius:var(--radius) !important;
  transition:all var(--transition-smooth);
  font-weight:600;
  letter-spacing:-0.01em}
.btn:active {
  transform:scale(0.97)}
.btn-primary {
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 2px 8px rgba(99,102,241,0.25)}
.btn-primary:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(99,102,241,0.4);
  background:linear-gradient(135deg,#818cf8 0%,#a78bfa 100%) !important}
.btn-primary:active {
  transform:translateY(0) scale(0.97);
  box-shadow:0 2px 8px rgba(99,102,241,0.25)}
.btn-ghost {
  background:var(--glass-bg) !important;
  border:1px solid var(--glass-border) !important;
  color:var(--fg) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover {
  background:var(--glass-hover-bg) !important;
  border-color:var(--glass-hover-border) !important;
  transform:translateY(-1px)}
.btn-lg {
  padding:0.875rem 2rem;
  font-size:1rem;
  border-radius:var(--radius-lg) !important}
/* scoped to dark mode */
[data-theme="dark"] .btn-header-cta {
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%) !important;
  color:#fff !important;
  border:none !important;
  border-radius:1019px !important;
  padding:0.4rem 1rem !important;
  font-size:0.8rem !important;
  font-weight:600 !important;
  transition:all var(--transition-smooth);
  box-shadow:0 2px 8px rgba(99,102,241,0.2)}
.btn-header-cta:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(99,102,241,0.35)}
.badge {
  border-radius:4px !important;
  font-weight:600;
  letter-spacing:0.03em}
.card,.feature-card {
  background:var(--glass-bg) !important;
  border:1px solid var(--glass-border) !important;
  border-radius:var(--radius-lg) !important;
  transition:all var(--transition-smooth);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)}
.card:hover,.feature-card:hover {
  background:var(--glass-hover-bg) !important;
  border-color:var(--glass-hover-border) !important;
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg)}
.feature-card {
  padding:1.75rem}
.solution-card {
  background:var(--glass-bg) !important;
  border:1px solid var(--glass-border) !important;
  border-radius:var(--radius-lg) !important;
  transition:all var(--transition-smooth) !important;
  text-decoration:none !important;
  cursor:pointer}
.solution-card:hover {
  transform:translateY(-3px) !important;
  border-color:var(--hover-glow,rgba(99,102,241,0.35)) !important;
  box-shadow:0 8px 25px rgba(0,0,0,0.3),0 0 15px rgba(99,102,241,0.15) !important}
.blog-card {
  background:var(--glass-bg) !important;
  border:1px solid var(--glass-border) !important;
  border-radius:var(--radius-lg) !important;
  transition:all var(--transition-smooth);
  overflow:hidden}
.blog-card:hover {
  border-color:var(--glass-hover-border) !important;
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg)}
.related-post-card {
  background:var(--glass-bg) !important;
  border:1px solid var(--glass-border) !important;
  border-radius:var(--radius-lg) !important;
  transition:all var(--transition-smooth);
  padding:1.5rem;
  text-decoration:none}
.related-post-card:hover {
  border-color:var(--glass-hover-border) !important;
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg)}
.callout {
  border-radius:var(--radius-lg) !important;
  padding:1.5rem !important}
.callout-blue-tint {
  background:rgba(37,99,235,0.04) !important;
  border-left-color:#6366f1 !important}
.callout-green-tint {
  background:rgba(16,185,129,0.04) !important;
  border-left-color:#10b981 !important}
.stat-number {
  font-size:clamp(2rem,4vw,2.75rem);
  font-weight:800;
  letter-spacing:-0.03em}
.stat-label {
  font-size:0.875rem;
  color:var(--fg-muted);
  font-weight:500}
.channel-chip {
  background:var(--glass-bg) !important;
  border:1px solid var(--glass-border) !important;
  border-radius:1019px !important;
  padding:0.4rem 0.9rem !important;
  font-size:0.8rem !important;
  transition:all var(--transition-fast)}
.channel-chip:hover {
  background:var(--glass-hover-bg) !important;
  border-color:var(--glass-hover-border) !important}
.hero-orb-mid,.hero-grid-overlay,.hero-canvas::before,.hero-canvas::after {
  opacity:0.35 !important}
.hero-eyebrow {
  border-radius:1019px;
  font-weight:600}
.hero-stat-item {
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)}
.hero-actions {
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap}
.section {
  padding:6rem 0}
.section-alt {
  background:rgba(255,255,255,0.015) !important}
.section-dark {
  background:linear-gradient(135deg,#0a0a15 0%,#0f1123 100%) !important}
.section + .section {
  border-top:1px solid rgba(255,255,255,0.03)}
.cta-section {
  background:radial-gradient(ellipse 60% 80% at 50% 30%,rgba(99,102,241,0.08) 0%,transparent 100%) !important;
  padding:6rem 0}
.infra-card {
  background:var(--glass-bg) !important;
  border:1px solid var(--glass-border) !important;
  border-radius:var(--radius-lg) !important;
  transition:all var(--transition-smooth)}
.infra-card:hover {
  border-color:rgba(99,102,241,0.3) !important;
  box-shadow:0 0 25px rgba(99,102,241,0.12);
  transform:translateY(-2px)}
.comparison-table,table {
  border-radius:var(--radius-lg);
  overflow:hidden}
.comparison-table th,th {
  background:rgba(255,255,255,0.03) !important;
  font-weight:600}
.fade-up {
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1),transform 0.6s cubic-bezier(0.4,0,0.2,1)}
.fade-up.visible {
  opacity:1;
  transform:translateY(0)}
.fade-in {
  opacity:0;
  transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1)}
.fade-in.visible {
  opacity:1}
.stagger-children > * {
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1),transform 0.5s cubic-bezier(0.4,0,0.2,1)}
.stagger-children.visible > *:nth-child(1) {
  transition-delay:0s}
.stagger-children.visible > *:nth-child(2) {
  transition-delay:0.08s}
.stagger-children.visible > *:nth-child(3) {
  transition-delay:0.16s}
.stagger-children.visible > *:nth-child(4) {
  transition-delay:0.24s}
.stagger-children.visible > *:nth-child(5) {
  transition-delay:0.32s}
.stagger-children.visible > *:nth-child(6) {
  transition-delay:0.40s}
.stagger-children.visible > * {
  opacity:1;
  transform:translateY(0)}
::-webkit-scrollbar {
  width:6px}
::-webkit-scrollbar-track {
  background:transparent}
::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,0.12);
  border-radius:3px}
::-webkit-scrollbar-thumb:hover {
  background:rgba(255,255,255,0.2)}
@media (max-width:768px) {
.section {
  padding:4rem 0}
.cta-section {
  padding:4rem 0}
.btn-lg {
  padding:0.75rem 1.5rem}



}
* {
  margin:0;
  padding:0;
  box-sizing:border-box}
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  transition:background 0.3s,color 0.3s}
.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem}
.nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px)}
.nav-container {
  max-width:1400px;
  margin:0 auto;
  padding:0 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px}
.logo {
  display:flex;
  align-items:center;
  gap:0.75rem;
  font-weight:700;
  font-size:1.25rem;
  text-decoration:none;
  color:var(--fg)}
.nav-menu {
  display:flex;
  align-items:center;
  gap:0.5rem;
  flex:1;
  margin:0 3rem}
.nav-item {
  position:relative}
.nav-btn {
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 1rem;
  background:none;
  border:none;
  color:var(--fg);
  font-weight:500;
  font-size:0.9375rem;
  cursor:pointer;
  border-radius:0.375rem;
  transition:all 0.2s;
  font-family:inherit}
.nav-btn:hover {
  background:var(--bg-secondary)}
.nav-btn svg {
  width:1rem;
  height:1rem;
  transition:transform 0.2s}
.nav-item.active .nav-btn svg {
  transform:rotate(180deg)}
.nav-link {
  padding:0.5rem 1rem;
  color:var(--fg);
  text-decoration:none;
  font-weight:500;
  font-size:0.9375rem;
  border-radius:0.375rem;
  transition:all 0.2s}
.nav-link:hover {
  background:var(--bg-secondary)}
.mega-menu {
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  margin-top:0.5rem;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:0.75rem;
  box-shadow:0 20px 50px var(--shadow-lg);
  opacity:0;
  visibility:hidden;
  transition:all 0.3s;
  min-width:600px}
.nav-item.active .mega-menu {
  opacity:1;
  visibility:visible}
.mega-content {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  padding:2rem}
.mega-col h3 {
  font-size:0.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--muted);
  margin-bottom:1rem}
.mega-col a {
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:0.875rem;
  border-radius:0.5rem;
  text-decoration:none;
  color:var(--fg);
  transition:all 0.2s;
  margin-bottom:0.5rem}
.mega-col a:hover {
  background:var(--bg-secondary)}
.mega-col a svg {
  width:1.5rem;
  height:1.5rem;
  color:var(--primary);
  flex-shrink:0;
  margin-top:0.125rem}
.mega-col a div {
  flex:1}
.mega-col a strong {
  display:block;
  font-weight:600;
  margin-bottom:0.25rem}
.mega-col a span {
  display:block;
  font-size:0.875rem;
  color:var(--muted)}
.mobile-toggle {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:0.5rem;
  position:relative;
  z-index:102;
  }
.mobile-toggle svg {
  width:1.5rem;
  height:1.5rem;
  color:var(--fg)}
.theme-toggle {
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:0.5rem;
  width:2.5rem;
  height:2.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.2s}
.theme-toggle:hover {
  background:var(--border)}
.theme-toggle svg {
  width:1.25rem;
  height:1.25rem;
  color:var(--fg)}
[data-theme="light"] .moon-icon {
  display:none}
[data-theme="dark"] .sun-icon {
  display:none}
.hero {
  padding:10rem 2rem 6rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
  max-width:1200px;
  margin:0 auto}
.hero-content h1 {
  font-size:3.5rem;
  font-weight:700;
  line-height:1.1;
  margin-bottom:1.5rem;
  background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.hero-content p {
  font-size:1.25rem;
  color:var(--muted);
  margin-bottom:2rem}
.badge {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 1rem;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:2rem;
  font-size:0.875rem;
  font-weight:500;
  margin-bottom:2rem}
.badge svg {
  width:1rem;
  height:1rem;
  color:var(--primary)}
.hero-actions {
  display:flex;
  gap:1rem;
  margin-bottom:3rem}
.btn {
  padding:0.875rem 2rem;
  border-radius:0.75rem;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  transition:all 0.2s;
  border:none;
  cursor:pointer;
  font-size:1rem}
.btn-primary {
  background:var(--primary);
  color:white}
.btn-primary:hover {
  background:var(--primary-hover);
  transform:translateY(-2px);
  box-shadow:0 10px 25px var(--shadow-lg)}
.btn-secondary {
  background:var(--bg-secondary);
  color:var(--fg);
  border:1px solid var(--border)}
.btn-secondary:hover {
  background:var(--border)}
.btn-lg {
  padding:1.25rem 2.5rem;
  font-size:1.125rem}
.hero-stats {
  display:flex;
  gap:2rem;
  flex-wrap:wrap}
.stat {
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:var(--muted);
  font-size:0.875rem}
.stat svg {
  width:1.25rem;
  height:1.25rem;
  color:var(--primary)}
.hero-visual {
  position:relative;
  height:500px}
.floating-card {
  position:absolute;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.5rem;
  display:flex;
  align-items:center;
  gap:1rem;
  box-shadow:0 10px 30px var(--shadow);
  animation:float 6s ease-in-out infinite}
.floating-card svg {
  width:2.5rem;
  height:2.5rem;
  color:var(--primary)}
.card-title {
  font-size:0.875rem;
  color:var(--muted);
  margin-bottom:0.25rem}
.card-value {
  font-weight:600;
  font-size:1.125rem}
.card-1 {
  top:10%;
  left:10%;
  animation-delay:0s}
.card-2 {
  top:45%;
  right:5%;
  animation-delay:2s}
.card-3 {
  bottom:10%;
  left:20%;
  animation-delay:4s}
@keyframes float {

  0%,100% {
  transform:translateY(0)}

50% {
  transform:translateY(-20px)}


}
.services {
  padding:6rem 0;
  background:var(--bg-secondary)}
.services h2 {
  text-align:center;
  font-size:2.5rem;
  margin-bottom:1rem}
.section-subtitle {
  text-align:center;
  color:var(--muted);
  font-size:1.125rem;
  margin-bottom:4rem}
.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem}
.service-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:1.5rem;
  padding:2.5rem;
  transition:all 0.3s}
.service-card:hover {
  transform:translateY(-5px);
  box-shadow:0 20px 40px var(--shadow-lg)}
.service-icon {
  width:4rem;
  height:4rem;
  border-radius:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.5rem}
.service-icon svg {
  width:2rem;
  height:2rem;
  color:white}
.service-card h3 {
  font-size:1.5rem;
  margin-bottom:1rem}
.service-card p {
  color:var(--muted);
  margin-bottom:1.5rem}
.service-card ul {
  list-style:none}
.service-card li {
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-bottom:0.75rem;
  color:var(--muted)}
.service-card li svg {
  width:1.25rem;
  height:1.25rem;
  color:#10b981;
  flex-shrink:0}
.platforms {
  padding:6rem 0}
.platforms h2 {
  text-align:center;
  font-size:2.5rem;
  margin-bottom:3rem}
.platform-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2rem}
.platform-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  padding:2rem;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:1rem;
  transition:all 0.3s}
.platform-item:hover {
  transform:translateY(-5px);
  border-color:var(--primary)}
.platform-item svg {
  width:3rem;
  height:3rem;
  color:var(--primary)}
.platform-item span {
  font-weight:500;
  color:var(--muted)}
.cta {
  padding:6rem 2rem;
  background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 100%);
  text-align:center}
.cta h2 {
  font-size:2.5rem;
  color:white;
  margin-bottom:1rem}
.cta p {
  font-size:1.25rem;
  color:rgba(255,255,255,0.9);
  margin-bottom:2rem}
.cta .btn-primary {
  background:white;
  color:var(--primary)}
.cta .btn-primary:hover {
  background:rgba(255,255,255,0.9)}
.footer {
  background:var(--bg-secondary);
  padding:4rem 0 2rem;
  border-top:1px solid var(--border)}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem;
  margin-bottom:3rem}
.footer-logo {
  display:flex;
  align-items:center;
  gap:0.75rem;
  font-weight:700;
  font-size:1.25rem;
  margin-bottom:1rem}
.footer-col p {
  color:var(--muted);
  margin-top:1rem}
.footer-col h4 {
  font-size:0.875rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:1rem}
.footer-col a {
  display:block;
  color:var(--muted);
  text-decoration:none;
  margin-bottom:0.75rem;
  transition:color 0.2s}
.footer-col a:hover {
  color:var(--primary)}
.footer-bottom {
  padding-top:2rem;
  border-top:1px solid var(--border);
  text-align:center;
  color:var(--muted);
  font-size:0.875rem}
@media (max-width:968px) {
.nav-menu {
  display:none}
.mobile-toggle {
  display:block;
  position:relative;
  z-index:102;
  }
.hero {
  grid-template-columns:1fr;
  padding:8rem 2rem 4rem}
.hero-visual {
  display:none}
.hero-content h1 {
  font-size:2.5rem}
.footer-grid {
  grid-template-columns:1fr}
.services-grid {
  grid-template-columns:1fr}
.platform-grid {
  grid-template-columns:repeat(2,1fr)}



}
* {
  margin:0;
  padding:0;
  box-sizing:border-box}
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  transition:background .3s,color .3s}
.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem}
.header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:var(--bg);
  border-bottom:6px solid;
  border-image:linear-gradient(90deg,#ff0080,#ff8c00,#40e0d0,#4169e1,#9370db) 1;
  .header-container {
  max-width:1600px;
  margin:0 auto;
  padding:0 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
   height:110px}
}
.logo {
  display:flex;
  align-items:center;
  gap:1rem;
  font-weight:700;
  font-size:1.75rem;
  text-decoration:none;
  background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  flex-shrink:0}
.nav {
  display:flex;
  align-items:center;
  flex:1;
  margin:0 2rem}
.nav-row {
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap}
.nav-solutions {
  gap:.35rem}
.nav-link {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1rem;
  color:var(--fg);
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  border-radius:.85rem;
  border:2px solid transparent;
  transition:all .3s}
.nav-link:hover {
  border-color:#ff0080;
  background:linear-gradient(135deg,rgba(255,0,128,.1),rgba(64,224,208,.1));
  transform:translateY(-2px) scale(1.05)}
.nav-link svg {
  width:1.75rem;
  height:1.75rem;
  opacity:.9}
.nav-svg {
  filter:drop-shadow(0 0 2px currentColor);
  transition:all .3s}
.nav-link:hover .nav-svg {
  transform:scale(1.2) rotate(-5deg);
  filter:drop-shadow(0 0 6px currentColor)}
.theme-btn {
  background:linear-gradient(135deg,#ff0080,#ff8c00);
  border:none;
  border-radius:1rem;
  width:3rem;
  height:3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .3s}
.theme-btn:hover {
  transform:rotate(180deg) scale(1.1)}
.theme-btn svg {
  width:1.5rem;
  height:1.5rem;
  color:#fff}
[data-theme="light"] .moon {
  display:none}
[data-theme="dark"] .sun {
  display:none}
.hero {
  padding:13rem 2rem 8rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
  max-width:1400px;
  margin:0 auto}
.hero h1 {
  font-size:4.5rem;
  font-weight:700;
  line-height:1.1;
  margin-bottom:2rem;
  background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0,#4169e1);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.hero p {
  font-size:1.5rem;
  color:var(--muted);
  margin-bottom:2.5rem;
  line-height:1.8}
.badge {
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem 1.5rem;
  background:linear-gradient(135deg,rgba(255,0,128,.1),rgba(64,224,208,.1));
  border:3px solid;
  border-image:linear-gradient(90deg,#ff0080,#40e0d0) 1;
  border-radius:2rem;
  font-size:1rem;
  font-weight:600;
  margin-bottom:2.5rem}
.badge svg {
  width:1.25rem;
  height:1.25rem;
  color:#ff0080}
.hero-btns {
  display:flex;
  gap:1.5rem;
  margin-bottom:3rem}
.btn {
  padding:1.25rem 3rem;
  border-radius:1.5rem;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  transition:all .3s;
  border:none;
  cursor:pointer;
  font-size:1.25rem}
.btn-primary {
  background:linear-gradient(135deg,#ff0080,#ff8c00);
  color:#fff;
  border:4px solid transparent}
.btn-primary:hover {
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 20px 40px rgba(255,0,128,.4)}
.btn-secondary {
  background:var(--bg);
  color:var(--fg);
  border:4px solid;
  border-image:linear-gradient(90deg,#ff0080,#40e0d0) 1}
.btn-secondary:hover {
  background:linear-gradient(135deg,rgba(255,0,128,.1),rgba(64,224,208,.1));
  transform:translateY(-4px)}
.btn-lg {
  padding:1.5rem 3.5rem;
  font-size:1.5rem}
.hero-stats {
  display:flex;
  gap:3rem;
  flex-wrap:wrap}
.hero-stats div {
  display:flex;
  align-items:center;
  gap:.75rem;
  color:var(--muted);
  font-size:1.125rem;
  font-weight:600}
.hero-stats svg {
  width:1.75rem;
  height:1.75rem;
  color:#ff0080}
.hero-visual {
  position:relative;
  height:600px}
.card {
  position:absolute;
  background:var(--card);
  border:4px solid;
  border-image:linear-gradient(135deg,#ff0080,#40e0d0) 1;
  border-radius:1.5rem;
  padding:2rem;
  display:flex;
  align-items:center;
  gap:1.5rem;
  box-shadow:0 20px 50px var(--shadow-lg);
  animation:float 6s ease-in-out infinite}
.card svg {
  width:3rem;
  height:3rem;
  color:#ff0080}
.card small {
  font-size:1rem;
  color:var(--muted);
  display:block;
  font-weight:600}
.card strong {
  font-weight:700;
  font-size:1.5rem;
  background:linear-gradient(135deg,#ff0080,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.c1 {
  top:10%;
  left:10%;
  animation-delay:0s}
.c2 {
  top:45%;
  right:5%;
  animation-delay:2s}
.c3 {
  bottom:10%;
  left:20%;
  animation-delay:4s}
@keyframes float {

  0%,100% {
  transform:translateY(0)}

50% {
  transform:translateY(-30px)}


}
.services {
  padding:8rem 0;
  background:linear-gradient(180deg,rgba(255,0,128,.05),rgba(64,224,208,.05))}
.services h2 {
  text-align:center;
  font-size:3.5rem;
  margin-bottom:1.5rem;
  background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.subtitle {
  text-align:center;
  color:var(--muted);
  font-size:1.5rem;
  margin-bottom:5rem;
  font-weight:600}
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:3rem}
.service {
  background:var(--card);
  border:5px solid;
  border-image:linear-gradient(135deg,#ff0080,#40e0d0) 1;
  border-radius:2rem;
  padding:3rem;
  transition:all .3s}
.service:hover {
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 30px 60px var(--shadow-lg)}
.icon {
  width:5rem;
  height:5rem;
  border-radius:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:2rem}
.icon svg {
  width:2.5rem;
  height:2.5rem;
  color:#fff}
.service h3 {
  font-size:2rem;
  margin-bottom:1.5rem;
  background:linear-gradient(135deg,#ff0080,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.service p {
  color:var(--muted);
  margin-bottom:2rem;
  font-size:1.125rem;
  line-height:1.8}
.service ul {
  list-style:none}
.service li {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
  color:var(--muted);
  font-size:1.125rem;
  font-weight:500}
.service li svg {
  width:1.5rem;
  height:1.5rem;
  color:#10b981;
  flex-shrink:0}
.platforms {
  padding:8rem 0}
.platforms h2 {
  text-align:center;
  font-size:3.5rem;
  margin-bottom:4rem;
  background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.platform-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:2.5rem}
.platform {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
  padding:2.5rem;
  background:var(--bg2);
  border:4px solid;
  border-image:linear-gradient(135deg,#ff0080,#40e0d0) 1;
  border-radius:1.5rem;
  transition:all .3s}
.platform:hover {
  transform:translateY(-8px) rotate(2deg);
  border-image:linear-gradient(135deg,#40e0d0,#4169e1) 1}
.platform svg {
  width:4rem;
  height:4rem;
  color:#ff0080}
.platform span {
  font-weight:600;
  color:var(--muted);
  font-size:1.125rem}
.cta {
  padding:8rem 2rem;
  background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0,#4169e1);
  text-align:center}
.cta h2 {
  font-size:3.5rem;
  color:#fff;
  margin-bottom:1.5rem;
  font-weight:700}
.cta p {
  font-size:1.5rem;
  color:rgba(255,255,255,.95);
  margin-bottom:3rem;
  font-weight:500}
.cta .btn-primary {
  background:#fff;
  color:#ff0080;
  border:4px solid #fff}
.cta .btn-primary:hover {
  background:rgba(255,255,255,.9);
  transform:translateY(-6px) scale(1.1)}
.footer {
  background:var(--bg2);
  padding:5rem 0 2.5rem;
  border-top:6px solid;
  border-image:linear-gradient(90deg,#ff0080,#ff8c00,#40e0d0,#4169e1,#9370db) 1}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:4rem;
  margin-bottom:4rem}
.footer-logo {
  display:flex;
  align-items:center;
  gap:1rem;
  font-weight:700;
  font-size:1.5rem;
  margin-bottom:1.5rem;
  background:linear-gradient(135deg,#ff0080,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.footer-grid p {
  color:var(--muted);
  margin-top:1.5rem;
  font-size:1.125rem}
.footer-grid h4 {
  font-size:1.125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:1.5rem;
  background:linear-gradient(135deg,#ff0080,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.footer-grid a {
  display:block;
  color:var(--muted);
  text-decoration:none;
  margin-bottom:1rem;
  transition:color .2s;
  font-size:1.125rem;
  font-weight:500}
.footer-grid a:hover {
  color:#ff0080}
.footer-bottom {
  padding-top:2.5rem;
  border-top:3px solid var(--border);
  text-align:center;
  color:var(--muted);
  font-size:1.125rem;
  font-weight:500}
.people-section {
  padding:6rem 0;
  background:var(--bg2)}
.section-header {
  text-align:center;
  margin-bottom:4rem}
.section-title {
  font-size:2.5rem;
  font-weight:700;
  margin-bottom:1rem;
  background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.section-subtitle {
  font-size:1.25rem;
  color:var(--muted);
  font-weight:500}
.people-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem}
.people-card {
  background:var(--card);
  border-radius:1.5rem;
  overflow:hidden;
  border:3px solid;
  border-image:linear-gradient(135deg,#ff0080,#40e0d0) 1;
  transition:all .3s}
.people-card:hover {
  transform:translateY(-8px);
  box-shadow:0 20px 40px var(--shadow-lg)}
.people-img-wrap {
  width:100%;
  height:280px;
  overflow:hidden}
.people-img-wrap img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s}
.people-card:hover .people-img-wrap img {
  transform:scale(1.1)}
.people-card-content {
  padding:1.5rem}
.people-card-content h3 {
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:.5rem;
  background:linear-gradient(135deg,#ff0080,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.people-card-content p {
  font-size:.95rem;
  color:var(--muted);
  line-height:1.5}
@media(max-width:968px) {
.nav {
  display:none}
.hero {
  grid-template-columns:1fr;
  padding:10rem 2rem 5rem}
.hero-visual {
  display:none}
.hero h1 {
  font-size:3rem}
.footer-grid {
  grid-template-columns:1fr}
.grid {
  grid-template-columns:1fr}
.platform-grid {
  grid-template-columns:repeat(2,1fr)}
.people-grid {
  grid-template-columns:repeat(2,1fr)}
.people-img-wrap {
  height:200px}



}
*,*::before,*::after {
  box-sizing:border-box}
body {
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased}
h1,h2,h3 {
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-0.02em;
  margin-bottom:1rem}
a {
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s}
a:hover {
  border-color:var(--fg)}
.container {
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:0 2rem}
.site-header {
  padding:2rem 0;
  border-bottom:1px solid var(--border)}
.header-inner {
  display:flex;
  justify-content:space-between;
  align-items:center}
.logo-link {
  font-family:var(--font-display);
  font-size:1.5rem}
.hero {
  padding:8rem 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center}
.hero h1 {
  font-size:4.5rem;
  line-height:1.1;
  margin-bottom:2rem}
.hero-sub {
  font-size:1.25rem;
  color:#666;
  margin-bottom:3rem}
.btn {
  display:inline-block;
  padding:1rem 2rem;
  border:1px solid var(--fg);
  text-transform:uppercase;
  font-size:0.75rem;
  letter-spacing:0.1em}
.btn-primary {
  background:var(--fg);
  color:var(--bg)}
.section {
  padding:6rem 0}
.section-label {
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.2em;
  color:#888;
  display:block;
  margin-bottom:1rem}
.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3rem}
.service-card {
  border-top:1px solid var(--fg);
  padding-top:1.5rem}
.service-card h3 {
  font-size:1.5rem}
.platforms-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem}
.platform-card {
  padding:1.5rem;
  border:1px solid var(--border)}
.platform-card svg {
  width:2rem;
  height:2rem;
  margin-bottom:1rem}
.terminal {
  background:#f5f5f5;
  padding:2rem;
  border:1px solid var(--border);
  font-family:monospace;
  font-size:0.9rem}
.site-footer {
  padding:4rem 0;
  border-top:1px solid var(--border);
  font-size:0.8rem}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:4rem}
@media (max-width:768px) {
.hero {
  grid-template-columns:1fr}
.hero h1 {
  font-size:3rem}
.services-grid,.platforms-grid {
  grid-template-columns:1fr}
.footer-grid {
  grid-template-columns:1fr}



}
*,*::before,*::after {
  box-sizing:border-box;
  margin:0;
  padding:0}
html {
  scroll-behavior:smooth}
body {
  font-family:var(--font-body);
  background:var(--background);
  color:var(--foreground);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6}
h1,h2,h3,h4 {
  font-family:var(--font-display),sans-serif}
a {
  color:inherit;
  text-decoration:none;
  font-weight:500}
img {
  max-width:100%;
  height:auto}
.container {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 1.5rem}
.page-hero {
  position:relative;
  padding:8rem 0 5rem;
  overflow:hidden}
.page-hero .hero-bg {
  position:absolute;
  inset:0;
  overflow:hidden}
.page-hero .hero-bg .blur-circle {
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.3;
  width:24rem;
  height:24rem}
.page-hero .hero-bg .blur-circle.tr {
  top:-10rem;
  right:-10rem}
.page-hero .hero-bg .blur-circle.bl {
  bottom:-10rem;
  left:-10rem}
.page-hero .container {
  position:relative;
  z-index:1}
.section {
  padding:5rem 0}
.section-lg {
  padding:6rem 0}
.section-alt {
  background:var(--muted)}
.section-dark {
  background:var(--primary);
  color:rgba(255,255,255,.9)}
.section-dark h2,.section-dark h3,.section-dark h4 {
  color:#fff}
.section-dark p {
  color:rgba(255,255,255,.7)}
.section-dark a {
  color:rgba(255,255,255,.9)}
.section-dark a:hover {
  color:#fff}
.section-gradient {
  background:linear-gradient(135deg,var(--primary) 0%,hsl(225 50% 20%) 100%);
  color:rgba(255,255,255,.9)}
.section-gradient h2 {
  color:#fff}
.section-gradient p {
  color:rgba(255,255,255,.7)}
.section-label {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.375rem .875rem;
  font-size:.75rem;
  font-weight:500;
  border:1px solid var(--border);
  border-radius:.5rem;
  background:rgba(255,255,255,.8);
  margin-bottom:1.5rem}
.badge {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.25rem .625rem;
  font-size:.625rem;
  font-weight:700;
  border-radius:.25rem;
  text-transform:uppercase;
  letter-spacing:.05em}
.badge-blue {
  background:rgba(37,99,235,.1);
  color:#2563eb;
  border:1px solid rgba(37,99,235,.2)}
.badge-emerald {
  background:rgba(5,150,105,.1);
  color:#059669;
  border:1px solid rgba(5,150,105,.2)}
.badge-purple {
  background:rgba(124,58,237,.1);
  color:#7c3aed;
  border:1px solid rgba(124,58,237,.2)}
.badge-cyan {
  background:rgba(8,145,178,.1);
  color:#0891b2;
  border:1px solid rgba(8,145,178,.2)}
.badge-amber {
  background:rgba(217,119,6,.1);
  color:#d97706;
  border:1px solid rgba(217,119,6,.2)}
.badge-red {
  background:rgba(220,38,38,.1);
  color:#dc2626;
  border:1px solid rgba(220,38,38,.2)}
.badge-indigo {
  background:rgba(79,70,229,.1);
  color:#4f46e5;
  border:1px solid rgba(79,70,229,.2)}
.badge-orange {
  background:rgba(234,88,12,.1);
  color:#ea580c;
  border:1px solid rgba(234,88,12,.2)}
.badge-pink {
  background:rgba(219,39,119,.1);
  color:#db2777;
  border:1px solid rgba(219,39,119,.2)}
.badge-rose {
  background:rgba(225,29,72,.1);
  color:#e11d48;
  border:1px solid rgba(225,29,72,.2)}
.badge-slate {
  background:rgba(51,65,85,.1);
  color:#475569;
  border:1px solid rgba(51,65,85,.2)}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.625rem 1.25rem;
  font-size:.875rem;
  font-weight:500;
  border-radius:.5rem;
  cursor:pointer;
  transition:all .2s ease;
  border:none;
  line-height:1.25;
  font-family:var(--font-body)}
.btn-primary {
  background:var(--primary);
  color:var(--primary-foreground);
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.btn-primary:hover {
  background:hsl(220 10% 18%)}
.btn-outline {
  background:transparent;
  color:var(--foreground);
  border:1px solid var(--border)}
.btn-outline:hover {

border-color:var(--primary);
  color:var(--primary)}
.btn-lg {
  padding:.875rem 1.75rem;
  font-size:1rem}
.btn-white {
  background:#fff;
  color:var(--primary);
  font-weight:600}
.btn-white:hover {
  background:var(--secondary)}
.btn-purple {
  background:#7c3aed;
  color:#fff}
.btn-purple:hover {
  background:#6d28d9}
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  overflow:hidden}
.card-hover {
  transition:transform .3s ease,box-shadow .3s ease}
.card-hover:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.08)}
.feature-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:2rem;
  transition:box-shadow .3s ease}
.feature-card:hover {
  box-shadow:0 8px 24px rgba(0,0,0,.06)}
.feature-card .icon-box {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3.5rem;
  height:3.5rem;
  border-radius:.75rem;
  margin-bottom:1.5rem}
.pricing-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:2rem;
  transition:box-shadow .3s ease}
.pricing-card:hover {
  box-shadow:0 8px 24px rgba(0,0,0,.06)}
.pricing-card.featured {
  border-color:rgba(5,150,105,.3);
  background:linear-gradient(135deg,rgba(5,150,105,.03),rgba(16,185,129,.03));
  box-shadow:0 4px 16px rgba(0,0,0,.06)}
.pricing-card .price {
  font-size:2.5rem;
  font-weight:700;
  line-height:1}
.pricing-card .price-period {
  font-size:.875rem;
  color:var(--muted-foreground);
  font-weight:400}
.feature-list {
  list-style:none;
  padding:0}
.feature-list li {
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.375rem 0}
.feature-list li .check-icon {
  width:1.25rem;
  height:1.25rem;
  flex-shrink:0;
  margin-top:.125rem;
  color:#ff0080}
.check-row {
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.75rem 1.25rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:.75rem;
  margin-bottom:.75rem}
.check-row .check-icon {
  width:1.25rem;
  height:1.25rem;
  flex-shrink:0;
  margin-top:.125rem;
  color:#ff0080}
.grid-2 {
  display:grid;
  grid-template-columns:1fr;
  gap:2rem}
.grid-3 {
  display:grid;
  grid-template-columns:1fr;
  gap:2rem}
.grid-4 {
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem}
@media(min-width:768px) {
.grid-2 {
  grid-template-columns:1fr 1fr}
.grid-3 {
  grid-template-columns:1fr 1fr 1fr}
.grid-4 {
  grid-template-columns:1fr 1fr 1fr 1fr}



}
@media(min-width:640px) and (max-width:767px) {
.grid-3 {
  grid-template-columns:1fr 1fr}
.grid-4 {
  grid-template-columns:1fr 1fr}



}
.text-center {
  text-align:center}
.text-muted {
  color:var(--muted-foreground)}
.text-sm {
  font-size:.875rem}
.text-xs {
  font-size:.75rem}
.text-lg {
  font-size:1.125rem}
.text-xl {
  font-size:1.25rem}
.text-2xl {
  font-size:1.5rem}
.text-3xl {
  font-size:1.875rem}
.text-4xl {
  font-size:2.25rem}
.text-5xl {
  font-size:3rem}
.text-6xl {
  font-size:3.75rem}
.font-bold {
  font-weight:700}
.font-medium {
  font-weight:500}
.font-semibold {
  font-weight:600}
.tracking-tight {
  letter-spacing:-.025em}
.tracking-tighter {
  letter-spacing:-.05em}
.max-w-2xl {
  max-width:42rem}
.max-w-3xl {
  max-width:48rem}
.max-w-4xl {
  max-width:56rem}
.max-w-5xl {
  max-width:64rem}
.max-w-6xl {
  max-width:72rem}
.mx-auto {
  margin-left:auto;
  margin-right:auto}
.mb-2 {
  margin-bottom:.5rem}
.mb-4 {
  margin-bottom:1rem}
.mb-6 {
  margin-bottom:1.5rem}
.mb-8 {
  margin-bottom:2rem}
.mb-12 {
  margin-bottom:3rem}
.mb-16 {
  margin-bottom:4rem}
.mt-4 {
  margin-top:1rem}
.mt-6 {
  margin-top:1.5rem}
.mt-8 {
  margin-top:2rem}
.gap-2 {
  gap:.5rem}
.gap-3 {
  gap:.75rem}
.gap-4 {
  gap:1rem}
.gap-6 {
  gap:1.5rem}
.gap-8 {
  gap:2rem}
.gap-10 {
  gap:2.5rem}
.gap-12 {
  gap:3rem}
.gap-16 {
  gap:4rem}
.flex {
  display:flex}
.flex-col {
  flex-direction:column}
.items-center {
  align-items:center}
.items-start {
  align-items:flex-start}
.justify-center {
  justify-content:center}
.justify-between {
  justify-content:space-between}
.flex-wrap {
  flex-wrap:wrap}
.inline-flex {
  display:inline-flex}
.w-full {
  width:100%}
.relative {
  position:relative}
.overflow-hidden {
  overflow:hidden}
.rounded-xl {
  border-radius:.75rem}
.rounded-2xl {
  border-radius:1rem}
.rounded-lg {
  border-radius:.5rem}
.border-t {
  border-top:1px solid var(--border)}
.border {
  border:1px solid var(--border)}
.shadow-sm {
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.shadow-lg {
  box-shadow:0 4px 16px rgba(0,0,0,.08)}
.leading-relaxed {
  line-height:1.625}
.space-y-2>*+* {
  margin-top:.5rem}
.space-y-3>*+* {
  margin-top:.75rem}
.space-y-4>*+* {
  margin-top:1rem}
.space-y-6>*+* {
  margin-top:1.5rem}
.gradient-text-purple {
  background:linear-gradient(90deg,#7c3aed,#2563eb,#0891b2);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-emerald {
  background:linear-gradient(90deg,#059669,#2563eb,#4f46e5);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-blue {
  background:linear-gradient(90deg,#2563eb,#4f46e5,#7c3aed);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-cyan {
  background:linear-gradient(90deg,#0891b2,#2563eb,#4f46e5);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-amber {
  background:linear-gradient(90deg,#d97706,#ea580c,#dc2626);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-red {
  background:linear-gradient(90deg,#dc2626,#e11d48,#475569);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-orange {
  background:linear-gradient(90deg,#ea580c,#d97706,#ca8a04);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-indigo {
  background:linear-gradient(90deg,#4f46e5,#7c3aed,#2563eb);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.gradient-text-pink {
  background:linear-gradient(90deg,#db2777,#e11d48,#be185d);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}
.stats-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  max-width:48rem;
  margin:0 auto}
@media(min-width:768px) {
.stats-grid {
  grid-template-columns:1fr 1fr 1fr 1fr}



}
.stat-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:.75rem;
  padding:1.5rem;
  text-align:center}
.terminal {
  background:hsl(220 20% 4%);
  border:1px solid hsl(220 20% 15%);
  border-radius:1rem;
  overflow:hidden}
.terminal-header {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1rem;
  border-bottom:1px solid hsl(220 20% 15%);
  background:hsl(220 20% 8%)}
.terminal-dot {
  width:.625rem;
  height:.625rem;
  border-radius:50%}
.terminal-dot.red {
  background:#ef4444}
.terminal-dot.yellow {
  background:#eab308}
.terminal-dot.green {
  background:#22c55e}
.terminal-body {
  padding:1.5rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.875rem;
  line-height:1.8;
  color:hsl(210 20% 80%)}
.terminal-body .prompt {
  color:#22c55e}
.terminal-body .cmd {
  color:hsl(210 20% 90%)}
.terminal-body .success {
  color:#06b6d4}
.terminal-body .muted {
  color:hsl(220 15% 45%)}
.terminal-body .link {
  color:#7c3aed}
details.faq-item {
  border:1px solid var(--border);
  border-left:3px solid rgba(37,99,235,.3);
  margin-bottom:.5rem;
  transition:border-color .2s}
details.faq-item:hover {
  border-left-color:rgba(37,99,235,.6)}
details.faq-item summary {
  padding:1.25rem 2rem;
  font-weight:600;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between}
details.faq-item summary::-webkit-details-marker {
  display:none}
details.faq-item summary::after {
  content:'+';
  font-size:1.25rem;
  color:var(--muted-foreground);
  transition:transform .2s}
details.faq-item[open] summary::after {
  transform:rotate(45deg)}
details.faq-item .faq-answer {
  padding:0 2rem 1.25rem;
  color:var(--muted-foreground);
  line-height:1.7;
  font-size:.9375rem}
table {
  width:100%;
  border-collapse:collapse}
th,td {
  padding:.75rem 1rem;
  text-align:left;
  border-bottom:1px solid var(--border)}
th {
  font-weight:600;
  font-size:.75rem;
  color:var(--muted-foreground);
  text-transform:uppercase;
  letter-spacing:.05em}
td {
  font-size:.875rem}
tr:hover td {
  background:var(--muted)}
.blog-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease}
.blog-card:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.08)}
.blog-card .card-content {
  padding:1.5rem}
.step-card {
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1.25rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:.75rem}
.step-card .step-num {
  font-size:1.875rem;
  font-weight:700;
  opacity:.2;
  flex-shrink:0;
  line-height:1}
@media(max-width:767px) {
/* scoped to dark mode */
[data-theme="dark"] .nav-desktop {
  display:none!important}
.nav-mobile-toggle {
  display:flex}



}
@media(min-width:768px) {
.nav-desktop {
  display:flex}
.nav-mobile-toggle {
  display:none}



}
.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(0,0,0,.06)}
.site-header .header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:4rem;
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem}
.site-header .logo-link {
  display:flex;
  align-items:center;
  gap:.5rem}
.site-header .logo-link img {
  height:33px;
  width:auto}
.site-header .phone-link {
  font-size:.75rem;
  color:var(--muted-foreground);
  font-weight:500;
  white-space:nowrap}
@media(min-width:1025px) {
.nav-desktop {
  display:flex;
  align-items:center;
  gap:.125rem}


}
.nav-desktop a,.nav-dropbtn {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.5rem .75rem;
  font-size:.875rem;
  font-weight:500;
  color:var(--muted-foreground);
  border-radius:.375rem;
  cursor:pointer;
  transition:all .2s ease;
  border:none;
  background:transparent;
  font-family:inherit;
  white-space:nowrap}
.nav-desktop a:hover,.nav-dropbtn:hover {
  background:var(--secondary);
  color:var(--foreground)}
.nav-desktop a svg {
  width:1rem;
  height:1rem;
  opacity:.7}
.nav-dropdown {
  position:relative;
  display:inline-block}
.nav-dropdown-content {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:var(--background);
  min-width:200px;
  box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
  border:1px solid var(--border);
  border-radius:var(--radius);
  z-index:100;
  padding:.5rem}
.nav-dropdown-content a {
  display:flex;
  padding:.5rem 1rem;
  color:var(--muted-foreground);
  text-decoration:none;
  border-radius:.375rem}
.nav-dropdown:hover .nav-dropdown-content {
  display:block}
.nav-dropdown-content a:hover {
  background:var(--secondary);
  color:var(--foreground)}
.nav-mobile-toggle {
  display:none;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border:none;
  background:transparent;
  cursor:pointer;
  border-radius:.5rem;
  color:var(--foreground)}
.nav-mobile-toggle:hover {
  background:var(--secondary)}
.nav-mobile-toggle svg {
  width:1.25rem;
  height:1.25rem}
#mobile-menu {
  position:fixed;
  top:4rem;
  left:0;
  right:0;
  bottom:0;
  z-index:45;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  overflow-y:auto;
  padding:1rem}
.mobile-nav-link {
  display:block;
  padding:.75rem 1rem;
  font-size:1rem;
  font-weight:500;
  color:var(--foreground);
  border-radius:.5rem}
.mobile-nav-section {
  padding:1.5rem 1rem .5rem;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted-foreground)}
.mobile-nav-link:hover {
  background:var(--secondary)}
.mobile-phone {
  display:block;
  padding:.75rem 1rem;
  font-size:.875rem;
  color:var(--muted-foreground)}
.site-footer {
  background:var(--primary);
  padding:4rem 0 2rem}
.footer-top {
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:768px) {
.footer-top {
  grid-template-columns:2fr 1fr 1fr 1fr}



}
.footer-brand p {
  margin-top:1rem;
  font-size:.875rem;
  line-height:1.6;
  max-width:320px}
.footer-brand .footer-logo {
  height:33px;
  width:auto;
  margin-bottom:.25rem;
  filter:brightness(0) invert(1)}
.footer-col h5 {
  color:#fff;
  font-size:.8125rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:1rem}
.footer-col a {
  display:block;
  font-size:.8125rem;
  color:rgba(255,255,255,.6);
  padding:.25rem 0;
  transition:color .15s ease}
.footer-col a:hover {
  color:#fff}
.footer-bottom {
  padding-top:1.5rem;
  font-size:.75rem;
  color:rgba(255,255,255,.4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5rem}
.footer-social {
  display:flex;
  gap:.75rem}
.footer-social a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  border-radius:.375rem;
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.6);
  transition:background .15s ease,color .15s ease}
.footer-social a:hover {
  background:rgba(255,255,255,.2);
  color:#fff}
.cta-section {
  text-align:center;
  padding:5rem 0}
.cta-section h2 {
  margin-bottom:1.5rem}
.cta-section p {
  max-width:42rem;
  margin:0 auto 2.5rem;
  font-size:1.125rem;
  color:rgba(255,255,255,.7)}
@keyframes fadeInUp {

  from {
  opacity:0;
  transform:translateY(20px)}

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


}
.animate-fade-in-up {
  animation:fadeInUp .6s ease forwards}
.hidden {
  display:none}
.hero-content-centered {
  width:100%;
  max-width:800px;
  margin:0 auto;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center}
.hero-title {
  font-size:clamp(2.5rem,5vw,4rem) !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  letter-spacing:-0.03em !important;
  color:#fff !important;
  margin:0 auto 1.5rem !important;
  max-width:780px}
.hero-sub {
  color:var(--hero-muted) !important;
  font-size:clamp(0.95rem,2vw,1.1rem) !important;
  max-width:600px;
  line-height:1.6 !important;
  margin:0 auto 2.5rem !important}
.hero-chat-container {
  width:100%;
  max-width:680px;
  margin:0 auto 2rem;
  animation:fadeUp 0.6s ease 0.3s both}
.hero-chat-form {
  width:100%}
.hero-chat-input-inner {
  display:flex;
  align-items:center;
  gap:0.75rem;
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:101px;
  padding:0.6rem 0.6rem 0.6rem 1.25rem;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  box-shadow:0 4px 30px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.05)}
.hero-chat-input-inner::before {
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:101px;
  background:linear-gradient(135deg,rgba(99,102,241,0.4),rgba(34,211,238,0.4));
  z-index:-1;
  opacity:0;
  transition:opacity 0.3s ease}
.hero-chat-input-inner:focus-within {
  border-color:rgba(99,102,241,0.6);
  box-shadow:0 0 35px rgba(99,102,241,0.25);
  background:rgba(255,255,255,0.06)}
.hero-chat-input-inner:focus-within::before {
  opacity:1}
.hero-chat-icon {
  color:var(--hero-muted);
  opacity:0.75;
  flex-shrink:0}
.hero-chat-input {
  flex:1;
  border:none;
  background:transparent;
  outline:none;
  font-size:1.05rem;
  color:#fff;
  font-family:inherit;
  min-width:0;
  padding:0.25rem 0}
.hero-chat-input::placeholder {
  color:var(--hero-muted);
  opacity:0.7}
.hero-chat-send {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,#6366f1,#22d3ee);
  color:#fff;
  cursor:pointer;
  flex-shrink:0;
  transition:transform 0.2s,box-shadow 0.2s;
  box-shadow:0 4px 15px rgba(99,102,241,0.3)}
.hero-chat-send:hover {
  transform:scale(1.06) translateY(-1px);
  box-shadow:0 6px 20px rgba(99,102,241,0.45)}
.hero-chat-send:active {
  transform:scale(0.96)}
.hero-chat-chips {
  display:flex;
  justify-content:center;
  gap:0.5rem;
  margin-top:1rem;
  flex-wrap:wrap}
.chat-chip {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:101px;
  padding:0.45rem 1rem;
  color:var(--hero-muted);
  font-size:0.8rem;
  cursor:pointer;
  transition:all 0.2s ease;
  white-space:nowrap}
.chat-chip svg {
  width:14px;
  height:14px;
  flex-shrink:0}
.chat-chip:hover {
  background:rgba(99,102,241,0.1);
  border-color:rgba(99,102,241,0.3);
  color:#fff;
  transform:translateY(-1px)}
.hero-chat-messages {
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  margin-bottom:0.875rem;
  padding-bottom:0.875rem;
  border-bottom:1px solid rgba(255,255,255,0.06)}
.hero-chat-message {
  display:flex;
  align-items:flex-start;
  gap:0.65rem}
.hero-chat-avatar {
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:6px;
  background:linear-gradient(135deg,rgba(99,102,241,0.25),rgba(139,92,246,0.2));
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.8);
  margin-top:2px}
.hero-chat-bubble {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:6px 12px 12px 12px;
  padding:0.55rem 0.85rem;
  max-width:100%}
.hero-chat-bubble p {
  font-size:0.82rem;
  line-height:1.55;
  color:rgba(241,245,249,0.92);
  margin:0}
.hero-chat-time {
  display:block;
  font-size:0.6rem;
  color:rgba(148,163,184,0.5);
  margin-top:0.3rem}
.hero-subactions {
  margin-top:1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.75rem;
  animation:fadeUp 0.6s ease 0.4s both}
.hero-trial-text {
  font-size:0.75rem;
  color:var(--hero-muted);
  opacity:0.8;
  margin:0}
.hero-link-buttons {
  display:flex;
  align-items:center;
  gap:0.75rem}
.hero-link-buttons .btn-primary {
  padding:0.5rem 1.25rem !important;
  font-size:0.8rem !important}
.hero-link-buttons .btn-ghost {
  padding:0.5rem 1.25rem !important;
  font-size:0.8rem !important;
  background:rgba(255,255,255,0.05) !important}
@media (max-width:992px) {
.hero-split {
  grid-template-columns:1fr;
  gap:2.5rem;
  padding-top:2rem}
.hero-text-col {
  align-items:center;
  text-align:center;
  padding-right:0}
.hero-text-col .hero-eyebrow {
  margin-left:auto}
.hero-text-col h1 {
  margin-left:auto !important;
  margin-right:auto !important}
.hero-text-col .hero-sub {
  margin-left:auto !important;
  margin-right:auto !important}
.hero-text-col .hero-subactions {
  align-items:center}
.hero-text-col .hero-link-buttons {
  justify-content:center}
.hero-visual-col .hero-chat-chips {
  justify-content:center}
.hero-visual-col .hero-chat-glass {
  max-width:500px;
  margin:0 auto}



}
@media (max-width:768px) {
.hero-chat-input-inner {
  padding:0.5rem 0.5rem 0.5rem 1rem}
.hero-chat-input {
  font-size:0.95rem}
.hero-chat-send {
  width:36px;
  height:36px}
.hero-chat-chips {
  gap:0.35rem}
.chat-chip {
  padding:0.35rem 0.75rem;
  font-size:0.75rem}
.hero-chat-messages {
  gap:0.5rem;
  margin-bottom:0.625rem;
  padding-bottom:0.625rem}
.hero-chat-avatar {
  width:26px;
  height:26px}
.hero-chat-bubble p {
  font-size:0.78rem}
.hero-link-buttons {
  flex-direction:column;
  width:100%;
  max-width:280px}
.hero-link-buttons .btn {
  width:100%}



}
@media(max-width:1200px) {
/* scoped to dark mode */
[data-theme="dark"] .nav-desktop {
  display:none!important}
.btn-header-cta,.btn-header-secondary,.lang-select,.theme-toggle {
  display:none!important}
.mobile-toggle {
  display:block;
  position:relative;
  z-index:102;
  margin-left:auto!important;
  margin-right:0!important;
  }
.header-inner {
  justify-content:space-between;
  padding-left:1.5rem!important}
.logo-profile {
  position:relative;
  left:auto;
  top:auto;
  transform:none}
/* scoped to dark mode */
[data-theme="dark"] .logo-profile img {
  width:60px!important;
  height:60px!important;
  top:auto;
  position:relative;
  margin:0}
/* scoped to dark mode */
[data-theme="dark"] .logo-profile.scrolled img {
  width:44px!important;
  height:44px!important;
  top:auto}



}
/* ============================================================
   Pragmatismo 2026 — Editorial Design System
   Loaded last (after part1-6). Layered, additive, theme-aware.
   Goals: bold type, generous whitespace, glassmorphism, motion,
   unified light/dark, premium "beat-big-tech" feel.
   ============================================================ */



/* ---------- 2026 Design Tokens ---------- */


/* ---------- Global typographic refresh ---------- */
body {
  font-family: var(--p2026-font-display);
  background: var(--p2026-bg);
  color: var(--p2026-fg);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, .hero-title, .section-title {
  font-family: var(--p2026-font-display);
  letter-spacing: -0.028em;
}
::selection {
  background: var(--p2026-violet);
  color: #fff;
}
/* ---------- 2026 container & rhythm ---------- */
.p2026-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.p2026-wrap-wide {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.p2026-section {
  padding: 7rem 0;
  position: relative;
}
.p2026-section-alt { background: var(--p2026-bg-soft); }
@media (max-width: 768px) {
.p2026-section { padding: 4.5rem 0; }


}
/* ---------- Eyebrow / pill / section label ---------- */
.p2026-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--p2026-glass);
  border: 1px solid var(--p2026-border);
  border-radius: 999px;
  color: var(--p2026-fg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.p2026-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p2026-grad-brand);
  box-shadow: 0 0 12px var(--p2026-violet);
}
.p2026-eyebrow.is-new::after {
  content: "New";
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: var(--p2026-grad-brand);
  color: #fff;
  border-radius: 999px;
}
/* ---------- Display headings ---------- */
.p2026-display {
  font-size: clamp(2.5rem, 6vw, 5.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin: 0 0 1.5rem;
  color: var(--p2026-fg);
}
.p2026-display .p2026-grad {
  background: var(--p2026-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% 200%;
  animation: p2026-grad-pan 8s ease-in-out infinite;
}
@keyframes p2026-grad-pan {

  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }

}
.p2026-lead {
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--p2026-fg-muted);
  max-width: 38em;
  letter-spacing: -0.005em;
}
.p2026-section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 1rem;
  text-align: center;
}
.p2026-section-sub {
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  color: var(--p2026-fg-muted);
  max-width: 44em;
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
}
/* ---------- Buttons — premium, scalable ---------- */
.p2026-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.35rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}
.p2026-btn svg { width: 1rem; height: 1rem; }
.p2026-btn-primary {
  background: var(--p2026-grad-brand);
  color: #fff;
  background-size: 200% 200%;
  box-shadow: 0 8px 22px -6px rgba(99,102,241,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}
.p2026-btn-primary:hover {
  transform: translateY(-1px);
  background-position: 100% 50%;
  box-shadow: 0 14px 36px -8px rgba(139,92,246,0.65), inset 0 1px 0 rgba(255,255,255,0.3);
}
.p2026-btn-primary:active { transform: translateY(0); }
.p2026-btn-ghost {
  background: var(--p2026-glass);
  color: var(--p2026-fg);
  border: 1px solid var(--p2026-border-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.p2026-btn-ghost:hover {
  transform: translateY(-1px);
  border-color: var(--p2026-violet);
  box-shadow: 0 8px 22px -10px var(--p2026-ring);
}
.p2026-btn-lg { padding: 1.1rem 1.85rem; font-size: 1.0625rem; }
.p2026-btn-sm { padding: 0.55rem 0.95rem; font-size: 0.8125rem; }
.p2026-btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.p2026-btn-row.is-center { justify-content: center; }
/* Arrow nudge on hover */
.p2026-btn-arrow { transition: transform 0.2s ease; }
.p2026-btn:hover .p2026-btn-arrow { transform: translateX(3px); }
/* ---------- Glass card — the hero of the system ---------- */
.p2026-glass {
  background: var(--p2026-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--p2026-glass-border);
  border-radius: 22px;
  box-shadow: var(--p2026-shadow-md);
  position: relative;
  overflow: hidden;
}
.p2026-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 40%);
  pointer-events: none;
  border-radius: inherit;
}
[data-theme="dark"] .p2026-glass::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 40%);
}
/* ---------- Product / feature card ---------- */
.p2026-card {
  display: block;
  position: relative;
  padding: 1.6rem 1.4rem 1.4rem;
  border-radius: 18px;
  background: var(--p2026-bg-elev);
  border: 1px solid var(--p2026-border);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s, border-color 0.22s;
  isolation: isolate;
}
.p2026-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--p2026-card-glow, var(--p2026-grad-brand));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.p2026-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--p2026-shadow-lg);
  border-color: transparent;
}
.p2026-card:hover::after { opacity: 1; }
.p2026-card-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--p2026-card-glow, var(--p2026-grad-brand));
  margin-bottom: 1rem;
  box-shadow: 0 6px 14px -4px var(--p2026-card-glow, rgba(99,102,241,0.6));
  position: relative;
}
.p2026-card-ico svg, .p2026-card-ico img { width: 22px; height: 22px; }
.p2026-card-ico img { filter: brightness(0) invert(1); }
.p2026-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.p2026-card p {
  font-size: 0.875rem;
  color: var(--p2026-fg-muted);
  line-height: 1.55;
  margin: 0;
}
.p2026-card .p2026-card-arrow {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--p2026-bg-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--p2026-fg-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease, color 0.22s ease, background 0.22s ease;
}
.p2026-card:hover .p2026-card-arrow {
  opacity: 1;
  transform: translateX(0);
  color: #fff;
  background: var(--p2026-grad-brand);
}
/* ---------- Grids ---------- */
.p2026-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.p2026-grid-wide {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.p2026-grid-feat {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* ---------- Stat block ---------- */
.p2026-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  justify-content: center;
  align-items: flex-end;
}
.p2026-stat { text-align: center; }
.p2026-stat-num {
  display: block;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--p2026-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.35rem;
}
.p2026-stat-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--p2026-fg-subtle);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* ---------- Mesh background (used in hero and CTA) ---------- */
.p2026-mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.p2026-mesh::before, .p2026-mesh::after, .p2026-mesh > span {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.9;
  will-change: transform;
}
.p2026-mesh::before {
  width: 40rem; height: 40rem;
  background: radial-gradient(circle, var(--p2026-mesh-1) 0%, transparent 65%);
  top: -10rem; left: -8rem;
  animation: p2026-mesh-float 18s ease-in-out infinite;
}
.p2026-mesh::after {
  width: 36rem; height: 36rem;
  background: radial-gradient(circle, var(--p2026-mesh-2) 0%, transparent 65%);
  bottom: -12rem; right: -6rem;
  animation: p2026-mesh-float 22s ease-in-out infinite reverse;
}
.p2026-mesh > span {
  width: 28rem; height: 28rem;
  background: radial-gradient(circle, var(--p2026-mesh-3) 0%, transparent 65%);
  top: 40%; left: 50%;
  animation: p2026-mesh-float 26s ease-in-out infinite;
}
@keyframes p2026-mesh-float {

  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(2rem, -2rem) scale(1.08); }

}
/* ---------- Subtle grid line texture ---------- */
.p2026-gridlines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--p2026-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--p2026-grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* ---------- Marquee / logo strip ---------- */
.p2026-marquee {
  display: flex;
  gap: 3rem;
  align-items: center;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.p2026-marquee-track {
  display: flex;
  gap: 3rem;
  align-items: center;
  flex-shrink: 0;
  animation: p2026-marquee 30s linear infinite;
}
@keyframes p2026-marquee {

  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }

}
.p2026-marquee:hover .p2026-marquee-track { animation-play-state: paused; }
.p2026-marquee-item {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--p2026-fg-subtle);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}
.p2026-marquee-item svg { width: 18px; height: 18px; }
/* ---------- Reveal-on-scroll ---------- */
.p2026-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
  transition-delay: var(--p2026-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.p2026-reveal.p2026-in { opacity: 1; transform: translateY(0); }
/* ---------- Hero — modernized split layout ---------- */
.p2026-hero {
  position: relative;
  padding: 8rem 0 4rem;
  overflow: hidden;
}
.p2026-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.p2026-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.p2026-hero-text .p2026-display { margin: 0.5rem 0 0; }
.p2026-hero-text .p2026-lead { margin: 0; }
.p2026-hero-cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.p2026-hero-fineprint {
  font-size: 0.8125rem;
  color: var(--p2026-fg-subtle);
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.p2026-hero-fineprint svg { width: 14px; height: 14px; color: var(--p2026-emerald); }
.p2026-hero-visual {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 992px) {
.p2026-hero { padding: 6.5rem 0 3rem; }
.p2026-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.p2026-hero-text { align-items: center; text-align: center; }
.p2026-hero-visual { min-height: 380px; order: 2; }


}
/* ---------- Hero chat panel (kept; restyled) ---------- */
.p2026-chat {
  width: 100%;
  max-width: 440px;
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 22px;
}
.p2026-chat-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--p2026-border);
}
.p2026-chat-head-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--p2026-grad-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -3px rgba(139,92,246,0.55);
}
.p2026-chat-head-title { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }
.p2026-chat-head-sub { font-size: 0.75rem; color: var(--p2026-fg-subtle); display: flex; align-items: center; gap: 0.3rem; }
.p2026-chat-head-sub::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--p2026-emerald);
  box-shadow: 0 0 8px var(--p2026-emerald);
  animation: p2026-pulse 1.8s ease-in-out infinite;
}
@keyframes p2026-pulse {

  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }

}
.p2026-chat-msg {
  display: flex;
  gap: 0.65rem;
  margin-bottom: 1rem;
  align-items: flex-start;
}
.p2026-chat-avatar {
  width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--p2026-grad-cool);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.p2026-chat-avatar svg { width: 16px; height: 16px; }
.p2026-chat-bubble {
  background: var(--p2026-bg-soft);
  border: 1px solid var(--p2026-border);
  border-radius: 14px 14px 14px 4px;
  padding: 0.7rem 0.85rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--p2026-fg);
}
.p2026-chat-bubble p { margin: 0; }
.p2026-chat-time {
  display: block;
  font-size: 0.65rem;
  color: var(--p2026-fg-subtle);
  margin-top: 0.35rem;
}
.p2026-chat-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.4rem 0.4rem 0.9rem;
  background: var(--p2026-bg-soft);
  border: 1px solid var(--p2026-border);
  border-radius: 999px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.p2026-chat-form:focus-within {
  border-color: var(--p2026-violet);
  box-shadow: 0 0 0 4px var(--p2026-ring);
}
.p2026-chat-icon { color: var(--p2026-fg-subtle); width: 18px; height: 18px; flex-shrink: 0; }
.p2026-chat-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--p2026-fg);
  padding: 0.5rem 0;
}
.p2026-chat-input::placeholder { color: var(--p2026-fg-subtle); }
.p2026-chat-send {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background: var(--p2026-grad-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 14px -4px rgba(139,92,246,0.6);
}
.p2026-chat-send:hover { transform: scale(1.06); box-shadow: 0 8px 18px -4px rgba(139,92,246,0.75); }
.p2026-chat-send svg { width: 17px; height: 17px; }
.p2026-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}
.p2026-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--p2026-fg);
  background: var(--p2026-glass);
  border: 1px solid var(--p2026-border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.18s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.p2026-chip:hover {
  border-color: var(--p2026-violet);
  transform: translateY(-1px);
}
.p2026-chip svg { width: 13px; height: 13px; color: var(--p2026-violet); }
/* ---------- Logos / channels row ---------- */
.p2026-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2rem;
}
.p2026-channel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--p2026-fg-muted);
  background: var(--p2026-bg-elev);
  border: 1px solid var(--p2026-border);
  border-radius: 999px;
}
.p2026-channel svg { width: 14px; height: 14px; }
/* ---------- Pricing calculator wrapper (kept, but restyled container) ---------- */
.p2026-calc-frame {
  border-radius: 22px;
  padding: 1px;
  background: var(--p2026-grad-brand);
  box-shadow: var(--p2026-shadow-lg);
}
.p2026-calc-inner {
  border-radius: 21px;
  background: var(--p2026-bg-elev);
  padding: 2rem;
}
/* ---------- Infra "Under the hood" tile ---------- */
.p2026-tile {
  background: var(--p2026-bg-elev);
  border: 1px solid var(--p2026-border);
  border-radius: 18px;
  padding: 1.6rem;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
  position: relative;
  overflow: hidden;
}
.p2026-tile::after {
  content: "";
  position: absolute;
  width: 6rem; height: 6rem;
  top: -2rem; right: -2rem;
  background: radial-gradient(circle, var(--p2026-violet) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.p2026-tile:hover {
  transform: translateY(-3px);
  border-color: var(--p2026-border-strong);
  box-shadow: var(--p2026-shadow-md);
}
.p2026-tile:hover::after { opacity: 0.18; }
.p2026-tile-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--p2026-bg-soft);
  border: 1px solid var(--p2026-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--p2026-violet);
  margin-bottom: 1rem;
}
.p2026-tile-ico svg { width: 22px; height: 22px; }
.p2026-tile h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}
.p2026-tile p {
  font-size: 0.875rem;
  color: var(--p2026-fg-muted);
  line-height: 1.6;
  margin: 0;
}
/* ---------- Big CTA band ---------- */
.p2026-cta {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
  text-align: center;
}
.p2026-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.p2026-cta-title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0;
  max-width: 18ch;
}
.p2026-cta-sub {
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  color: var(--p2026-fg-muted);
  max-width: 38em;
  line-height: 1.6;
  margin: 0;
}
/* ---------- Related posts (blog teaser) ---------- */
.p2026-posts {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.p2026-post {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.5rem;
  border-radius: 18px;
  background: var(--p2026-bg-elev);
  border: 1px solid var(--p2026-border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.p2026-post:hover {
  transform: translateY(-3px);
  box-shadow: var(--p2026-shadow-md);
  border-color: var(--p2026-border-strong);
}
.p2026-post-date {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--p2026-fg-subtle);
}
.p2026-post h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 0;
  line-height: 1.3;
}
.p2026-post p {
  font-size: 0.875rem;
  color: var(--p2026-fg-muted);
  line-height: 1.55;
  margin: 0;
}
.p2026-post-more {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--p2026-violet);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.p2026-post:hover .p2026-post-more { color: var(--p2026-fuchsia); }
/* ---------- Ticker (kept semantics, refreshed look) ---------- */
.p2026-ticker {
  background: var(--p2026-bg-soft);
  border-top: 1px solid var(--p2026-border);
  border-bottom: 1px solid var(--p2026-border);
  padding: 0.65rem 0;
  overflow: hidden;
}
.p2026-ticker-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p2026-violet);
}
.p2026-ticker-label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--p2026-violet);
  box-shadow: 0 0 10px var(--p2026-violet);
  animation: p2026-pulse 1.8s ease-in-out infinite;
}
/* ---------- Footer polish ---------- */
.p2026-footer {
  background: var(--p2026-bg-soft);
  border-top: 1px solid var(--p2026-border);
  padding: 4rem 0 2.5rem;
}
.p2026-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
.p2026-footer-grid { grid-template-columns: 1fr; gap: 2rem; }


}
/* Apply to existing footer markup (sitewide, additive, low-risk) */
.site-footer {
  background: var(--p2026-bg-soft) !important;
  border-top: 1px solid var(--p2026-border) !important;
  padding: 4rem 0 2.5rem !important;
}
/* scoped to dark mode */
[data-theme="dark"] .site-footer .footer-grid { gap: 2.5rem !important; }
/* scoped to dark mode */
[data-theme="dark"] .site-footer .footer-brand .footer-logo {
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.02em !important;
}
/* scoped to dark mode */
[data-theme="dark"] .site-footer .footer-brand p {
  color: var(--p2026-fg-muted) !important;
  line-height: 1.65 !important;
  max-width: 320px !important;
}
/* scoped to dark mode */
[data-theme="dark"] .site-footer .footer-col h5 {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--p2026-fg-subtle) !important;
  margin-bottom: 1.1rem !important;
}
/* scoped to dark mode */
[data-theme="dark"] .site-footer .footer-col a {
  color: var(--p2026-fg-muted) !important;
  font-size: 0.875rem !important;
  transition: color 0.2s, padding-left 0.2s !important;
  padding: 0.3rem 0 !important;
}
/* scoped to dark mode */
[data-theme="dark"] .site-footer .footer-col a:hover {
  color: var(--p2026-fg) !important;
  padding-left: 0.25rem !important;
}
/* scoped to dark mode */
[data-theme="dark"] .site-footer .footer-bottom {
  border-top: 1px solid var(--p2026-border) !important;
  padding-top: 2rem !important;
  font-size: 0.8125rem !important;
  color: var(--p2026-fg-subtle) !important;
}
/* ---------- Badge alignment fixes (badge-alpha etc. exist) ---------- */
.p2026-card h3 .badge-alpha,
.p2026-tile h3 .badge-alpha {
  margin-left: 0;
  font-size: 0.55rem !important;
  vertical-align: middle;
  padding: 0.12rem 0.4rem !important;
  border-radius: 0.25rem !important;
}
/* ---------- Spec line ---------- */
.p2026-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--p2026-border);
  border: 1px solid var(--p2026-border);
  border-radius: 16px;
  overflow: hidden;
}
.p2026-spec-cell {
  background: var(--p2026-bg-elev);
  padding: 1.1rem 1.25rem;
}
.p2026-spec-key {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--p2026-fg-subtle);
  margin-bottom: 0.3rem;
}
.p2026-spec-val {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--p2026-fg);
}
.p2026-spec-val.mono { font-family: var(--p2026-font-mono); font-weight: 500; font-size: 0.95rem; }
/* ---------- Sticky header hairline + scrolled state ---------- */
.site-header { transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease; }
/* scoped to dark mode */
[data-theme="dark"] .site-header.scrolled {
  background: var(--p2026-glass) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--p2026-border) !important;
}
/* ---------- Theme-aware nav links — override hardcoded rgba(241,245,249,0.65) from part2.css/premium.css ---------- */
.nav-desktop a {
  color: var(--p2026-fg-muted) !important;
}
/* scoped to dark mode */
[data-theme="dark"] .nav-desktop a:hover {
  color: var(--p2026-fg) !important;
  background: var(--p2026-border) !important;
}
/* ---------- Accessibility: sr-only + skip-link (site.min.css not loaded on all pages) ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: #000;
  color: #fff;
  font-size: 0.875rem;
  clip: auto;
  margin: 0;
  overflow: visible;
  text-decoration: none;
}
/* ---------- Dark mode: fix hardcoded background:#fff sections (white-on-white text) ---------- */
[data-theme="dark"] section[style*="background:#fff"],
[data-theme="dark"] section[style*="background: #fff"],
[data-theme="dark"] section[style*="background:#ffffff"],
[data-theme="dark"] section[style*="background: #ffffff"] {
  background: var(--p2026-bg-elev) !important;
}
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#ffffff"],
[data-theme="dark"] div[style*="background: #ffffff"] {
  background: var(--p2026-bg-elev) !important;
}
/* ── Newsletter / email-html dark mode overrides ── */
[data-theme="dark"] #newsletter-body table[style*="background-color:#FFFFFF"],
[data-theme="dark"] #newsletter-body table[style*="background-color: #FFFFFF"],
[data-theme="dark"] #newsletter-body td[style*="background-color:#FFFFFF"],
[data-theme="dark"] #newsletter-body td[style*="background-color: #FFFFFF"] {
  background: var(--p2026-bg-elev) !important;
}
[data-theme="dark"] #newsletter-body table[style*="background-color:#EAEAEA"],
[data-theme="dark"] #newsletter-body table[style*="background-color: #EAEAEA"],
[data-theme="dark"] #newsletter-body td[style*="background-color:#EAEAEA"],
[data-theme="dark"] #newsletter-body td[style*="background-color: #EAEAEA"] {
  background: var(--p2026-bg-soft) !important;
}
[data-theme="dark"] #newsletter-body td[style*="background-color:#F8F8FA"],
[data-theme="dark"] #newsletter-body td[style*="background-color: #F8F8FA"],
[data-theme="dark"] #newsletter-body td[style*="background-color:#F0F0F2"],
[data-theme="dark"] #newsletter-body td[style*="background-color: #F0F0F2"] {
  background: var(--p2026-bg) !important;
}
[data-theme="dark"] #newsletter-body td[style*="background-color:#DDDDDD"],
[data-theme="dark"] #newsletter-body td[style*="background-color: #DDDDDD"],
[data-theme="dark"] #newsletter-body td[style*="background-color:#E6E6EA"],
[data-theme="dark"] #newsletter-body td[style*="background-color: #E6E6EA"] {
  background: var(--p2026-bg-soft) !important;
}
[data-theme="dark"] #newsletter-body td[style*="background-color:#FFF5F0"],
[data-theme="dark"] #newsletter-body td[style*="background-color: #FFF5F0"] {
  background: rgba(255, 68, 68, 0.06) !important;
}
[data-theme="dark"] #newsletter-body td[style*="background-color:#F0FFF0"],
[data-theme="dark"] #newsletter-body td[style*="background-color: #F0FFF0"],
[data-theme="dark"] #newsletter-body td[style*="background-color:#F8FFF8"],
[data-theme="dark"] #newsletter-body td[style*="background-color: #F8FFF8"] {
  background: rgba(16, 185, 129, 0.06) !important;
}
[data-theme="dark"] #newsletter-body table[style*="background:#FFFFFF"],
[data-theme="dark"] #newsletter-body table[style*="background: #FFFFFF"] {
  background: var(--p2026-bg-elev) !important;
}
/* Neutralize all link hover effects inside newsletter body */
#newsletter-body a:hover,
#newsletter-body a:focus {
  text-decoration: none !important;
  color: inherit !important;
  background: none !important;
  opacity: 1 !important;
}
/* Neutralize tr:hover td inside newsletter body (global CSS adds background change) */
#newsletter-body tr:hover td {
  background: inherit !important;
}
/* Fix hero link contrast — #C8FF00 invisible on light backgrounds */
.page-hero a[href="source.html"],
.page-hero a[href*="source.html"] {
  color: var(--p2026-fg-muted) !important;
}
/* Remove card hover lift on blog detail pages */
.related-post-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .p2026-reveal { opacity: 1; transform: none; }
}
/* ── Subpage hero (.hero-page) ── */
.hero-page {
  padding: clamp(5rem, 8vw, 8rem) 0 clamp(3rem, 4vw, 5rem);
  text-align: center;
  overflow: hidden;
}
.hero-page .p2026-wrap {
  position: relative;
  z-index: 1;
}
.hero-page .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  margin-bottom: 1rem;
}
.hero-page h1,
.hero-page h1 span {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 0 1rem;
}
.hero-page .hero-gradient-word {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% 200%;
  animation: p2026-grad-pan 8s ease-in-out infinite;
}
.hero-page .hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--fg-muted);
  max-width: 600px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}
.hero-page .hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}
.hero-page .hero-actions .btn-primary {
  background: var(--brand-gradient);
  background-size: 200% 200%;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 8px 22px -6px rgba(99,102,241,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.18s ease, box-shadow 0.22s ease, background-position 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.hero-page .hero-actions .btn-primary:hover {
  transform: translateY(-1px);
  background-position: 100% 50%;
  box-shadow: 0 14px 36px -8px rgba(139,92,246,0.65), inset 0 1px 0 rgba(255,255,255,0.3);
}
.hero-page .hero-actions .btn-ghost {
  background: var(--glass);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  backdrop-filter: blur(12px);
  transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.hero-page .hero-actions .btn-ghost:hover {
  transform: translateY(-1px);
  border-color: var(--brand-2);
  box-shadow: 0 8px 22px -10px var(--ring);
}