/*!
 * hrPLANR Theme Stylesheet
 * All site CSS — base + all page-specific rules — deduplicated.
 *
 * Edit this file to change styles. Cache-busting is handled by functions.php
 * via filemtime(), so changes are picked up immediately after save.
 */

/* === BASE CSS (CSS vars, typography, components) === */
/* ============================================================
   hrplanr-base.css
   ============================================================
   Shared base styles used across every hrPLANR page.
   
   Includes: CSS variables (light + dark themes), typography,
   buttons, header, footer, breadcrumb, theme toggle.
   
   Excludes: page-specific styles (heroes, mockups, segment cards,
   forms). Those stay inline in each page via the WXR import.
   
   Generated: from 34 HTML pages, deduplicated.
   Entity: Infomaze Sphere LLP
   
   HOW TO USE
   ============================================================
   Option A (Customizer):
     Appearance → Customize → Additional CSS → paste this whole file.
   
   Option B (Child theme):
     Add to your child theme's style.css.
   
   Option C (Plugin):
     Install "Simple Custom CSS" → paste this file.
   
   After paste, every page renders correctly even if its inline
   <style> block is stripped by the theme.
   ============================================================ */

/* Web fonts — import at top */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

/* ===== Base rules ===== */

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-dark: #14305a;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);
  --ai-section-bg: var(--ai-surface);

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --hero-bloom-purple: rgba(124, 93, 199, 0.03);
  --dot-grid: rgba(20, 48, 90, 0.05);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06), 0 2px 4px rgba(20, 48, 90, 0.04);
  --mosaic-shadow: 0 24px 48px rgba(20, 48, 90, 0.08), 0 8px 16px rgba(20, 48, 90, 0.06);
  --dashboard-shadow: 0 40px 80px rgba(20, 48, 90, 0.12), 0 16px 32px rgba(20, 48, 90, 0.08);

  --dashboard-sidebar: #1a3a6b;
  --dashboard-main: var(--surface-elevated);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: none;

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-dark: #6680a8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);
  --ai-section-bg: var(--bg-deep);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --hero-bloom-purple: rgba(167, 139, 250, 0.08);
  --dot-grid: rgba(255, 255, 255, 0.025);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(69, 150, 255, 0.1) inset;
  --mosaic-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  --dashboard-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 16px 32px rgba(0, 0, 0, 0.3);

  --dashboard-sidebar: #050811;
  --dashboard-main: var(--surface);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 16px;
  transition: background 0.3s ease, color 0.3s ease;
}

a { color: var(--energy); text-decoration: none; }

a:hover { color: var(--energy-dark); }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

img, svg { display: block; max-width: 100%; }

code, .mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; }

.section { padding: 96px 0; }

[data-theme="dark"] .eyebrow--ai { color: var(--ai-text); }

h1, h2, h3, h4 { color: var(--text); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }

h2 { font-size: 40px; margin-bottom: 16px; line-height: 1.1; letter-spacing: -0.02em; color: var(--navy); }

[data-theme="dark"] h2 { color: var(--text); }

h3 { font-size: 22px; margin-bottom: 8px; font-weight: 500; letter-spacing: -0.005em; }

h4 { font-size: 17px; margin-bottom: 6px; font-weight: 500; }

.section-intro {
  font-size: 18px;
  color: var(--text-sub);
  max-width: 640px;
  margin-bottom: 56px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 500; padding: 12px 22px;
  border-radius: var(--radius-md); transition: all 0.2s ease; white-space: nowrap;
  letter-spacing: -0.005em;
}

.btn-primary { background: var(--energy); color: #fff; box-shadow: 0 1px 2px var(--energy-glow); }

.btn-primary:hover { background: var(--energy-dark); color: #fff; box-shadow: 0 4px 12px var(--energy-glow-strong); transform: translateY(-1px); }

[data-theme="dark"] .btn-primary { box-shadow: 0 0 0 1px var(--energy), 0 8px 24px var(--energy-glow); }

[data-theme="dark"] .btn-primary:hover { box-shadow: 0 0 0 1px var(--energy-dark), 0 12px 32px var(--energy-glow-strong); }

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

.btn-secondary:hover { background: var(--surface-hover); border-color: var(--navy-soft); }

.btn-white { background: #fff; color: var(--navy); }

.btn-white:hover { background: #f0f2f7; color: var(--navy); transform: translateY(-1px); }

[data-theme="dark"] .btn-white { color: var(--bg); }

[data-theme="dark"] .btn-white:hover { color: var(--bg); }

.btn-text { color: var(--energy); font-weight: 500; font-size: 15px; }

.btn-text:hover { color: var(--energy-dark); }

.btn-text-white { color: #fff; opacity: 0.85; }

.btn-text-white:hover { opacity: 1; color: #fff; }

.btn-lg { font-size: 16px; padding: 14px 26px; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease;
}

[data-theme="dark"] .site-header { background: rgba(10, 13, 26, 0.78); }

.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }

.nav-logo { display: flex; align-items: center; }

.nav-logo svg { height: 30px; width: auto; }

.logo-light { display: block; }

.logo-dark { display: none; }

[data-theme="dark"] .logo-light { display: none; }

[data-theme="dark"] .logo-dark { display: block; }

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

.nav-menu a { color: var(--text); font-size: 14px; font-weight: 500; padding: 8px 0; position: relative; transition: color 0.15s; }

[data-theme="dark"] .nav-menu a { color: var(--text-sub); }

.nav-menu a:hover { color: var(--energy); }

[data-theme="dark"] .nav-menu a:hover { color: var(--text); }

.nav-cta { display: flex; align-items: center; gap: 12px; }

.nav-cta a.btn-text { font-size: 14px; color: var(--text-sub); }

.nav-cta a.btn-text:hover { color: var(--text); }

.theme-toggle {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); border: 1px solid transparent; transition: all 0.2s ease;
}

.theme-toggle:hover { background: var(--surface-hover); border-color: var(--border); color: var(--text); }

.theme-toggle svg { width: 16px; height: 16px; }

.theme-toggle .icon-sun { display: none; }

.theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--text); }

.nav-toggle svg { width: 22px; height: 22px; }

[data-theme="dark"] .hero { padding: 96px 0 112px; }

[data-theme="dark"] .hero h1 { color: var(--text); }

[data-theme="dark"] .hero h1 em {
  background: var(--h1-accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .dash-stat-value { color: var(--text); }

[data-theme="dark"] .dash-ai-icon { color: #1a1408; }

[data-theme="dark"] .stat-num { color: var(--text); }

[data-theme="dark"] .module-icon { color: var(--energy); }

[data-theme="dark"] .ai-cap::before { box-shadow: 0 0 6px var(--ai-text); }

[data-theme="dark"] .ai-section { border-color: var(--border); }

[data-theme="dark"] .ai-section::before { opacity: 1; }

[data-theme="dark"] .ai-head .eyebrow { color: var(--ai-text); }

[data-theme="dark"] .ai-head p { color: var(--text-sub); }

[data-theme="dark"] .ai-card { background: var(--surface); backdrop-filter: none; }

[data-theme="dark"] .ai-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, var(--ai-glow) 0%, transparent 60%); pointer-events: none; }

[data-theme="dark"] .ai-card-icon { color: #1a1408; }

[data-theme="dark"] .ai-card h3 { color: var(--text); }

[data-theme="dark"] .ai-card p { color: var(--text-sub); }

[data-theme="dark"] .plan-price { color: var(--text); }

[data-theme="dark"] .plan-features li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

.site-footer { background: var(--footer-bg); border-top: 1px solid var(--border); padding: 72px 0 32px; }

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

.footer-brand .nav-logo svg { height: 28px; }

.footer-brand p { font-size: 13px; color: var(--text-sub); line-height: 1.55; margin-top: 16px; max-width: 260px; }

.footer-col h5 { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }

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

.footer-col a { font-size: 13px; color: var(--text-sub); }

.footer-col a:hover { color: var(--energy); }

.footer-bottom { border-top: 1px solid var(--border); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

.footer-bottom-meta { font-size: 12px; color: var(--text-muted); }

.footer-india-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sub); }

.footer-socials { display: flex; gap: 12px; }

.footer-socials a { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-sub); }

.footer-socials a:hover { color: var(--energy); border-color: var(--navy-soft); background: var(--surface-hover); }

.footer-socials svg { width: 14px; height: 14px; }

.breadcrumb { background: var(--surface-elevated); border-bottom: 1px solid var(--border); padding: 14px 0; }

.breadcrumb-list { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }

.breadcrumb-list a { color: var(--text-sub); }

.breadcrumb-list a:hover { color: var(--energy); }

.breadcrumb-sep { color: var(--border-strong); }

/* ===== Responsive: media queries ===== */

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero h1 { font-size: 48px; }
  .dash { transform: none; }
  .modules-grid, .ai-grid, .india-grid, .resources-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-bar-logos { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
  .customer-card { grid-template-columns: 1fr; padding: 40px 32px; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .hero { padding: 56px 0 64px; }
  .hero h1 { font-size: 38px; }
  .hero-sub { font-size: 17px; }
  h2 { font-size: 28px; }
  .modules-grid, .ai-grid, .india-grid, .resources-grid, .pricing-grid { grid-template-columns: 1fr; }
  .stat-card { padding: 28px 24px; }
  .stat-num { font-size: 44px; }
  .customer-card { padding: 32px 24px; }
  .customer-quote { font-size: 19px; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 30px; }
  .ai-status { font-size: 11px; padding: 5px 10px 5px 8px; }
}


/* === PAGE-SPECIFIC CSS (all unique rules across all pages) === */
/* ============================================================
   hrplanr-complete.css
   ============================================================
   COMPLETE site stylesheet — every CSS rule from every hrPLANR
   page, deduplicated.
   
   Use this if you want to also strip the inline <style> blocks
   from the WXR import for a leaner WordPress database.
   
   Generated: from 34 HTML pages.
   Entity: Infomaze Sphere LLP
   
   HOW TO USE
   ============================================================
   1. Paste this whole file into Appearance → Customize →
      Additional CSS (or into a child theme's style.css).
   2. Optional: regenerate WXR without inline <style> blocks
      (Brijesh can ask Claude for this).
   3. All pages render correctly without any inline CSS.
   ============================================================ */

/* Web fonts — import at top */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-dark: #14305a;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);
  --ai-section-bg: var(--ai-surface);

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --hero-bloom-purple: rgba(124, 93, 199, 0.03);
  --dot-grid: rgba(20, 48, 90, 0.05);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06), 0 2px 4px rgba(20, 48, 90, 0.04);
  --mosaic-shadow: 0 24px 48px rgba(20, 48, 90, 0.08), 0 8px 16px rgba(20, 48, 90, 0.06);
  --dashboard-shadow: 0 40px 80px rgba(20, 48, 90, 0.12), 0 16px 32px rgba(20, 48, 90, 0.08);

  --dashboard-sidebar: #1a3a6b;
  --dashboard-main: var(--surface-elevated);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: none;

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-dark: #6680a8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);
  --ai-section-bg: var(--bg-deep);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --hero-bloom-purple: rgba(167, 139, 250, 0.08);
  --dot-grid: rgba(255, 255, 255, 0.025);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(69, 150, 255, 0.1) inset;
  --mosaic-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  --dashboard-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 16px 32px rgba(0, 0, 0, 0.3);

  --dashboard-sidebar: #050811;
  --dashboard-main: var(--surface);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 16px;
  transition: background 0.3s ease, color 0.3s ease;
}

a { color: var(--energy); text-decoration: none; }

a:hover { color: var(--energy-dark); }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

img, svg { display: block; max-width: 100%; }

code, .mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; }

.section { padding: 96px 0; }

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--energy);
  margin-bottom: 16px;
  display: inline-block;
}

.eyebrow--muted { color: var(--text-muted); }

.eyebrow--ai { color: var(--ai-text-sub); }

[data-theme="dark"] .eyebrow--ai { color: var(--ai-text); }

.eyebrow--white { color: rgba(255,255,255,0.7); }

h1, h2, h3, h4 { color: var(--text); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }

h2 { font-size: 40px; margin-bottom: 16px; line-height: 1.1; letter-spacing: -0.02em; color: var(--navy); }

[data-theme="dark"] h2 { color: var(--text); }

h3 { font-size: 22px; margin-bottom: 8px; font-weight: 500; letter-spacing: -0.005em; }

h4 { font-size: 17px; margin-bottom: 6px; font-weight: 500; }

.section-intro {
  font-size: 18px;
  color: var(--text-sub);
  max-width: 640px;
  margin-bottom: 56px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 500; padding: 12px 22px;
  border-radius: var(--radius-md); transition: all 0.2s ease; white-space: nowrap;
  letter-spacing: -0.005em;
}

.btn-primary { background: var(--energy); color: #fff; box-shadow: 0 1px 2px var(--energy-glow); }

.btn-primary:hover { background: var(--energy-dark); color: #fff; box-shadow: 0 4px 12px var(--energy-glow-strong); transform: translateY(-1px); }

[data-theme="dark"] .btn-primary { box-shadow: 0 0 0 1px var(--energy), 0 8px 24px var(--energy-glow); }

[data-theme="dark"] .btn-primary:hover { box-shadow: 0 0 0 1px var(--energy-dark), 0 12px 32px var(--energy-glow-strong); }

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

.btn-secondary:hover { background: var(--surface-hover); border-color: var(--navy-soft); }

.btn-white { background: #fff; color: var(--navy); }

.btn-white:hover { background: #f0f2f7; color: var(--navy); transform: translateY(-1px); }

[data-theme="dark"] .btn-white { color: var(--bg); }

[data-theme="dark"] .btn-white:hover { color: var(--bg); }

.btn-text { color: var(--energy); font-weight: 500; font-size: 15px; }

.btn-text:hover { color: var(--energy-dark); }

.btn-text-white { color: #fff; opacity: 0.85; }

.btn-text-white:hover { opacity: 1; color: #fff; }

.btn-lg { font-size: 16px; padding: 14px 26px; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease;
}

[data-theme="dark"] .site-header { background: rgba(10, 13, 26, 0.78); }

.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }

.nav-logo { display: flex; align-items: center; }

.nav-logo svg { height: 30px; width: auto; }

.logo-light { display: block; }

.logo-dark { display: none; }

[data-theme="dark"] .logo-light { display: none; }

[data-theme="dark"] .logo-dark { display: block; }

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

.nav-menu a { color: var(--text); font-size: 14px; font-weight: 500; padding: 8px 0; position: relative; transition: color 0.15s; }

[data-theme="dark"] .nav-menu a { color: var(--text-sub); }

.nav-menu a:hover { color: var(--energy); }

[data-theme="dark"] .nav-menu a:hover { color: var(--text); }

.nav-cta { display: flex; align-items: center; gap: 12px; }

.nav-cta a.btn-text { font-size: 14px; color: var(--text-sub); }

.nav-cta a.btn-text:hover { color: var(--text); }

.theme-toggle {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); border: 1px solid transparent; transition: all 0.2s ease;
}

.theme-toggle:hover { background: var(--surface-hover); border-color: var(--border); color: var(--text); }

.theme-toggle svg { width: 16px; height: 16px; }

.theme-toggle .icon-sun { display: none; }

.theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--text); }

.nav-toggle svg { width: 22px; height: 22px; }

.hero {
  background: var(--hero-bg);
  padding: 80px 0 96px;
  overflow: hidden;
  position: relative;
}

[data-theme="dark"] .hero { padding: 96px 0 112px; }

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, var(--hero-bloom-gold) 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, var(--hero-bloom-purple) 0%, transparent 50%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.hero .container { position: relative; z-index: 2; }

.hero-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }

.hero-content { max-width: 540px; }

.ai-status {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ai-surface); border: 1px solid var(--ai-border);
  padding: 6px 12px 6px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; color: var(--ai-text);
  letter-spacing: 0.04em; margin-bottom: 24px;
  box-shadow: 0 0 24px var(--ai-glow);
}

.ai-status .dot { width: 7px; height: 7px; background: var(--ai-text); border-radius: 50%; position: relative; animation: pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--ai-glow-strong); } 50% { box-shadow: 0 0 0 6px transparent; } }

.ai-status .mono { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ai-text-sub); letter-spacing: 0.04em; }

.hero h1 {
  font-size: 60px; line-height: 1.0; letter-spacing: -0.03em;
  margin-bottom: 24px; font-weight: 600; color: var(--navy);
}

[data-theme="dark"] .hero h1 { color: var(--text); }

.hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .hero h1 em {
  background: var(--h1-accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub { font-size: 19px; line-height: 1.55; color: var(--text-sub); margin-bottom: 36px; }

.hero-ctas { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }

.hero-trust { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }

.hero-trust .dot-sep { color: var(--border-strong); }

.hero-visual { position: relative; width: 100%; }

.dash {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--dashboard-shadow);
  transform: perspective(1600px) rotateY(-3deg) rotateX(2deg);
  transform-origin: center;
}

.dash-chrome { background: var(--surface-elevated); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; gap: 10px; }

.dash-dots { display: flex; gap: 6px; }

.dash-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }

.dash-url {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-muted); text-align: center; max-width: 200px; margin: 0 auto;
}

.dash-body { display: grid; grid-template-columns: 56px 1fr; min-height: 380px; }

.dash-side { background: var(--dashboard-sidebar); padding: 16px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.dash-side-mark {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.14);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 16px; margin-bottom: 12px;
}

.dash-side a {
  width: 36px; height: 36px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.65);
}

.dash-side a:hover { background: rgba(255,255,255,0.08); color: #fff; }

.dash-side a.active { background: rgba(255,255,255,0.14); color: #fff; }

.dash-side a svg { width: 18px; height: 18px; }

.dash-main { padding: 22px 24px; background: var(--dashboard-main); }

.dash-greeting { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }

.dash-greeting h5 { font-size: 15px; font-weight: 500; color: var(--text); }

.dash-greeting span { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }

.dash-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }

.dash-stat-label { font-size: 10px; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }

.dash-stat-value { font-size: 22px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }

[data-theme="dark"] .dash-stat-value { color: var(--text); }

.dash-stat-meta { font-size: 11px; color: var(--text-sub); margin-top: 2px; }

.dash-stat-meta.positive { color: var(--success); }

.dash-ai { background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: var(--radius-md); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }

.dash-ai-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--ai-gradient); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; box-shadow: 0 2px 8px var(--ai-glow); }

[data-theme="dark"] .dash-ai-icon { color: #1a1408; }

.dash-ai-icon svg { width: 16px; height: 16px; }

.dash-ai-body { flex: 1; }

.dash-ai-title { font-size: 12px; font-weight: 500; color: var(--ai-text); margin-bottom: 2px; }

.dash-ai-text { font-size: 12px; color: var(--ai-text-sub); line-height: 1.45; }

.dash-ai-text strong { font-weight: 500; color: var(--ai-text); }

.dash-list-title { font-size: 11px; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; font-weight: 500; }

.dash-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }

.dash-list-item { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text); }

.dash-list-item:last-child { border-bottom: none; }

.dash-list-bullet { width: 6px; height: 6px; border-radius: 50%; }

.dash-list-bullet.blue { background: var(--energy); }

.dash-list-bullet.gold { background: #d4a052; }

.dash-list-bullet.green { background: var(--success); }

.dash-list-meta { margin-left: auto; font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.trust-bar { background: var(--surface-elevated); padding: 56px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.trust-bar-label { text-align: center; font-size: 13px; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 28px; }

.trust-bar-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; align-items: center; }

.trust-logo { height: 28px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; opacity: 0.55; transition: opacity 0.2s; font-family: 'Inter', sans-serif; }

.trust-logo:hover { opacity: 0.85; }

.problem-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }

.problem-head h2 { font-size: 36px; }

.problem-head p { color: var(--text-sub); font-size: 17px; margin-top: 16px; }

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

.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 32px; text-align: left; box-shadow: var(--card-shadow); }

.stat-num { font-size: 56px; font-weight: 600; color: var(--navy); letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px; }

[data-theme="dark"] .stat-num { color: var(--text); }

.stat-num .unit { font-size: 24px; color: var(--navy-soft); font-weight: 500; margin-left: 4px; }

.stat-label { font-size: 15px; color: var(--text-sub); line-height: 1.5; }

.stat-label strong { color: var(--text); font-weight: 500; }

.modules-head { max-width: 720px; margin-bottom: 56px; }

.modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.module-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
  text-decoration: none; color: var(--text);
  display: flex; flex-direction: column;
  transition: all 0.2s; position: relative; overflow: hidden;
}

.module-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--card-hover-shadow); }

[data-theme="dark"] .module-card:hover { background: var(--surface-hover); }

[data-theme="dark"] .module-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(69, 150, 255, 0.08) 0%, transparent 50%);
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}

[data-theme="dark"] .module-card:hover::before { opacity: 1; }

.module-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; position: relative; }

.module-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--surface-elevated); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--navy);
}

[data-theme="dark"] .module-icon { color: var(--energy); }

.module-icon svg { width: 20px; height: 20px; }

.ai-cap {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-family: 'JetBrains Mono', monospace;
  color: var(--ai-text); background: var(--ai-surface); border: 1px solid var(--ai-border);
  padding: 4px 8px; border-radius: 999px; letter-spacing: 0.02em;
}

.ai-cap::before { content: ''; width: 5px; height: 5px; background: var(--ai-text); border-radius: 50%; }

[data-theme="dark"] .ai-cap::before { box-shadow: 0 0 6px var(--ai-text); }

.module-card h3 { font-size: 17px; font-weight: 500; margin-bottom: 6px; color: var(--text); position: relative; line-height: 1.3; }

.module-card p { font-size: 14px; color: var(--text-sub); line-height: 1.5; flex: 1; position: relative; }

.module-card .learn { font-size: 13px; color: var(--energy); font-weight: 500; margin-top: 18px; display: inline-flex; align-items: center; gap: 4px; position: relative; }

.module-card:hover .learn { color: var(--energy-dark); }

.ai-section { background: var(--ai-section-bg); border-top: 1px solid var(--ai-border); border-bottom: 1px solid var(--ai-border); position: relative; overflow: hidden; }

[data-theme="dark"] .ai-section { border-color: var(--border); }

.ai-section::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 10% 50%, var(--ai-glow-strong) 0%, transparent 45%),
    radial-gradient(circle at 90% 50%, var(--hero-bloom-purple) 0%, transparent 45%);
  opacity: 0.4; pointer-events: none;
}

[data-theme="dark"] .ai-section::before { opacity: 1; }

.ai-section .container { position: relative; z-index: 2; }

.ai-head { max-width: 720px; margin-bottom: 56px; }

.ai-head .eyebrow { color: var(--ai-text-sub); }

[data-theme="dark"] .ai-head .eyebrow { color: var(--ai-text); }

.ai-head h2 { color: var(--ai-text); }

.ai-head p { color: var(--ai-text-sub); font-size: 18px; }

[data-theme="dark"] .ai-head p { color: var(--text-sub); }

.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.ai-card { background: rgba(255, 255, 255, 0.6); border: 1px solid var(--ai-border); border-radius: var(--radius-lg); padding: 28px; backdrop-filter: blur(8px); position: relative; overflow: hidden; }

[data-theme="dark"] .ai-card { background: var(--surface); backdrop-filter: none; }

[data-theme="dark"] .ai-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, var(--ai-glow) 0%, transparent 60%); pointer-events: none; }

.ai-card-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--ai-gradient); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 20px; box-shadow: 0 2px 8px var(--ai-glow-strong); position: relative; }

[data-theme="dark"] .ai-card-icon { color: #1a1408; }

.ai-card-icon svg { width: 20px; height: 20px; }

.ai-card h3 { color: var(--ai-text); font-size: 17px; font-weight: 500; margin-bottom: 8px; position: relative; }

[data-theme="dark"] .ai-card h3 { color: var(--text); }

.ai-card p { font-size: 14px; color: var(--ai-text-sub); line-height: 1.55; position: relative; }

[data-theme="dark"] .ai-card p { color: var(--text-sub); }

.ai-card .badge { display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(212, 160, 82, 0.18); color: var(--ai-text); padding: 3px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }

.india-head { max-width: 720px; margin-bottom: 56px; }

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

.india-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--card-shadow); }

.india-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--success-bg); color: var(--success);
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  margin-bottom: 20px;
}

.india-card h3 { font-size: 18px; font-weight: 500; margin-bottom: 8px; color: var(--text); }

.india-card p { font-size: 14px; color: var(--text-sub); line-height: 1.55; }

.india-card ul { list-style: none; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }

.india-card li { font-size: 11px; color: var(--text); background: var(--surface-elevated); border: 1px solid var(--border); padding: 3px 8px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; }

.pricing-teaser { background: var(--surface-elevated); }

.pricing-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }

.pricing-head p { color: var(--text-sub); font-size: 17px; margin-top: 14px; }

.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }

.plan-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; position: relative; }

.plan-card.featured { border-color: var(--energy); box-shadow: 0 0 0 1px var(--energy), 0 8px 24px var(--energy-glow); }

.plan-popular { position: absolute; top: -10px; left: 24px; background: var(--energy); color: #fff; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }

.plan-name { font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }

.plan-price { font-size: 32px; font-weight: 600; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 4px; }

[data-theme="dark"] .plan-price { color: var(--text); }

.plan-price .per { font-size: 13px; font-weight: 400; color: var(--text-muted); margin-left: 2px; }

.plan-cap { font-size: 12px; color: var(--text-sub); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }

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

.plan-features li {
  font-size: 13px; color: var(--text-sub); padding: 6px 0;
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.45;
}

.plan-features li::before {
  content: ''; width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327500A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center;
  background-size: 14px; flex-shrink: 0; margin-top: 2px;
}

[data-theme="dark"] .plan-features li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

.plan-cta { display: block; text-align: center; font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: var(--radius-md); text-decoration: none; transition: all 0.15s; }

.plan-cta.primary { background: var(--energy); color: #fff; }

.plan-cta.primary:hover { background: var(--energy-dark); color: #fff; }

.plan-cta.outline { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }

.plan-cta.outline:hover { border-color: var(--navy-soft); background: var(--surface-hover); color: var(--text); }

.pricing-foot { text-align: center; }

.customer { background: var(--bg); }

.customer-card { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 64px; display: grid; grid-template-columns: 80px 1fr; gap: 32px; align-items: start; }

.customer-mark { width: 60px; height: 60px; background: var(--navy); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }

.customer-quote { font-size: 24px; line-height: 1.4; color: var(--text); font-weight: 500; letter-spacing: -0.015em; margin-bottom: 28px; }

.customer-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.customer-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--border-strong), var(--navy-soft)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 500; font-size: 16px; }

.customer-who { font-size: 14px; color: var(--text); font-weight: 500; }

.customer-who span { color: var(--text-sub); font-weight: 400; }

.resources-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 24px; flex-wrap: wrap; }

.resources-head h2 { margin-bottom: 0; }

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

.resource-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; text-decoration: none; color: var(--text); transition: all 0.2s; display: flex; flex-direction: column; }

.resource-card:hover { border-color: var(--border-strong); box-shadow: var(--card-hover-shadow); transform: translateY(-2px); }

.resource-cat { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--energy); margin-bottom: 12px; }

.resource-card h3 { font-size: 18px; line-height: 1.35; margin-bottom: 12px; color: var(--text); font-weight: 500; flex: 1; }

.resource-meta { font-size: 12px; color: var(--text-muted); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

.final-cta { background: var(--final-cta-bg); color: #fff; text-align: center; padding: 96px 0; position: relative; overflow: hidden; }

[data-theme="dark"] .final-cta { border-top: 1px solid var(--border); }

.final-cta::before { content: ''; position: absolute; top: -50%; left: -10%; width: 60%; height: 200%; background: radial-gradient(circle, var(--energy-glow) 0%, transparent 60%); pointer-events: none; }

.final-cta::after { content: ''; position: absolute; bottom: -50%; right: -10%; width: 60%; height: 200%; background: radial-gradient(circle, var(--ai-glow) 0%, transparent 60%); pointer-events: none; }

.final-cta .container { position: relative; z-index: 1; }

.final-cta h2 { color: #fff; font-size: 44px; letter-spacing: -0.025em; margin-bottom: 12px; }

.final-cta p { color: rgba(255, 255, 255, 0.7); font-size: 18px; margin-bottom: 40px; }

[data-theme="dark"] .final-cta p { color: var(--text-sub); }

.final-cta-buttons { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }

.site-footer { background: var(--footer-bg); border-top: 1px solid var(--border); padding: 72px 0 32px; }

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

.footer-brand .nav-logo svg { height: 28px; }

.footer-brand p { font-size: 13px; color: var(--text-sub); line-height: 1.55; margin-top: 16px; max-width: 260px; }

.footer-col h5 { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }

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

.footer-col a { font-size: 13px; color: var(--text-sub); }

.footer-col a:hover { color: var(--energy); }

.footer-bottom { border-top: 1px solid var(--border); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

.footer-bottom-meta { font-size: 12px; color: var(--text-muted); }

.footer-india-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sub); }

.footer-socials { display: flex; gap: 12px; }

.footer-socials a { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-sub); }

.footer-socials a:hover { color: var(--energy); border-color: var(--navy-soft); background: var(--surface-hover); }

.footer-socials svg { width: 14px; height: 14px; }

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero h1 { font-size: 48px; }
  .dash { transform: none; }
  .modules-grid, .ai-grid, .india-grid, .resources-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-bar-logos { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
  .customer-card { grid-template-columns: 1fr; padding: 40px 32px; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .hero { padding: 56px 0 64px; }
  .hero h1 { font-size: 38px; }
  .hero-sub { font-size: 17px; }
  h2 { font-size: 28px; }
  .modules-grid, .ai-grid, .india-grid, .resources-grid, .pricing-grid { grid-template-columns: 1fr; }
  .stat-card { padding: 28px 24px; }
  .stat-num { font-size: 44px; }
  .customer-card { padding: 32px 24px; }
  .customer-quote { font-size: 19px; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 30px; }
  .ai-status { font-size: 11px; padding: 5px 10px 5px 8px; }
}

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --hero-bloom-purple: rgba(124, 93, 199, 0.03);
  --dot-grid: rgba(20, 48, 90, 0.05);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;
  --purple: #3B1E76;
  --teal: #14554F;

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06), 0 2px 4px rgba(20, 48, 90, 0.04);
  --mosaic-shadow: 0 24px 48px rgba(20, 48, 90, 0.08), 0 8px 16px rgba(20, 48, 90, 0.06);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: none;

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --hero-bloom-purple: rgba(167, 139, 250, 0.08);
  --dot-grid: rgba(255, 255, 255, 0.025);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --purple: #a78bfa;
  --teal: #5eead4;

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(69, 150, 255, 0.1) inset;
  --mosaic-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--energy);
  margin-bottom: 18px;
  display: inline-block;
}

h2 { font-size: 40px; margin-bottom: 16px; line-height: 1.05; letter-spacing: -0.025em; color: var(--navy); }

.section-intro {
  font-size: 18px;
  color: var(--text-sub);
  max-width: 640px;
  margin-bottom: 56px;
  line-height: 1.6;
}

.btn-ai {
  background: var(--ai-gradient);
  color: #fff;
  box-shadow: 0 4px 16px var(--ai-glow-strong);
  font-weight: 500;
}

[data-theme="dark"] .btn-ai { color: #1a1408; }

.btn-ai:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 24px var(--ai-glow-strong);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-ai:hover { color: #1a1408; }

.nav-menu a.active { color: var(--energy); }

.nav-menu a.active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--energy);
  border-radius: 1px;
}

[data-theme="dark"] .nav-menu a.active::after { box-shadow: 0 0 8px var(--energy-glow-strong); }

.product-hero {
  position: relative;
  padding: 80px 0 96px;
  overflow: hidden;
  background: var(--hero-bg);
}

[data-theme="dark"] .product-hero { padding: 96px 0 112px; }

.product-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, var(--hero-bloom-gold) 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, var(--hero-bloom-purple) 0%, transparent 50%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.product-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.product-hero .container { position: relative; z-index: 2; }

.product-hero-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 64px;
  align-items: center;
}

.product-hero-content { max-width: 540px; }

.product-hero h1 {
  font-size: 60px;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  font-weight: 600;
  color: var(--navy);
}

[data-theme="dark"] .product-hero h1 { color: var(--text); }

[data-theme="dark"] .product-hero { padding-bottom: 112px; }

.product-hero h1 em {
  font-style: normal;
  color: var(--h1-accent-color);
}

[data-theme="dark"] .product-hero h1 em {
  background: var(--h1-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.product-hero-sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-sub);
  margin-bottom: 36px;
}

.product-hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  perspective: 1600px;
}

.mosaic-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--mosaic-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.mosaic-tile:nth-child(1) { transform: rotateY(-3deg) rotateX(2deg); transform-origin: right center; }

.mosaic-tile:nth-child(2) { transform: rotateY(3deg) rotateX(2deg); transform-origin: left center; }

.mosaic-tile:nth-child(3) { transform: rotateY(-3deg) rotateX(-2deg); transform-origin: right center; }

.mosaic-tile:nth-child(4) { transform: rotateY(3deg) rotateX(-2deg); transform-origin: left center; }

.mosaic-head {
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mosaic-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

[data-theme="dark"] .mosaic-dot { box-shadow: 0 0 8px currentColor; }

.mosaic-dot.blue { background: var(--energy); color: var(--energy); }

.mosaic-dot.gold { background: #d4a052; color: #d4a052; }

.mosaic-dot.purple { background: #7c5dc7; color: #7c5dc7; }

.mosaic-dot.teal { background: #20a59b; color: #20a59b; }

[data-theme="dark"] .mosaic-dot.purple { background: var(--purple); color: var(--purple); }

[data-theme="dark"] .mosaic-dot.teal { background: var(--teal); color: var(--teal); }

[data-theme="dark"] .mosaic-dot.gold { background: #f0b964; color: #f0b964; }

.mosaic-head h6 { font-size: 11px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }

.mosaic-body { padding: 14px; min-height: 130px; }

.mosaic-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.mosaic-stats > div {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.mosaic-num { font-size: 18px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; line-height: 1; }

[data-theme="dark"] .mosaic-num { color: var(--text); }

.mosaic-lbl { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }

.mosaic-ai {
  font-size: 10px;
  background: var(--ai-surface);
  color: var(--ai-text);
  border: 1px solid var(--ai-border);
  padding: 5px 8px;
  border-radius: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mosaic-ai .spark { font-size: 11px; }

.mosaic-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
}

.mosaic-row:last-of-type { border-bottom: none; }

.mosaic-row > span:first-child { color: var(--text); font-weight: 500; }

.mosaic-row > span:nth-child(2) { color: var(--text-sub); font-family: 'JetBrains Mono', monospace; font-size: 9px; }

.pill { font-size: 8px; padding: 2px 5px; border-radius: 999px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.pill.green { background: var(--success-bg); color: var(--success); }

.pill.amber { background: var(--warning-bg); color: var(--warning); }

.mosaic-total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--navy);
  font-weight: 500;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}

[data-theme="dark"] .mosaic-total { color: var(--text); }

.mosaic-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-bottom: 10px;
}

.mosaic-pipeline > div {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
}

.mosaic-pipeline strong { display: block; font-size: 16px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }

[data-theme="dark"] .mosaic-pipeline strong { color: var(--text); }

.mosaic-pipeline span { font-size: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; display: block; }

.mosaic-checklist { display: flex; flex-direction: column; gap: 6px; }

.check { font-size: 11px; color: var(--text-sub); display: flex; align-items: center; gap: 8px; }

.check::before {
  content: '';
  width: 14px; height: 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  flex-shrink: 0;
}

.check.done { color: var(--text); }

.check.done::before {
  background: var(--success);
  border-color: var(--success);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 9px;
  background-position: center;
  background-repeat: no-repeat;
}

[data-theme="dark"] .check.done::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0d1a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

.solutions { background: var(--bg); position: relative; }

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.solution-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.solution-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  transform: translateY(-2px);
  box-shadow: var(--card-hover-shadow);
}

[data-theme="dark"] .solution-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(69, 150, 255, 0.08) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

[data-theme="dark"] .solution-card:hover::before { opacity: 1; }

.solution-card:hover .learn { color: var(--energy); }

.solution-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  position: relative;
}

.solution-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
}

[data-theme="dark"] .solution-icon { color: var(--energy); }

.solution-icon svg { width: 22px; height: 22px; }

.solution-card h3 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text);
  line-height: 1.3;
  position: relative;
}

.solution-card p {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.55;
  flex: 1;
  position: relative;
}

.plan-availability {
  display: flex;
  gap: 4px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  position: relative;
}

.plan-pill {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-sub);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
}

.plan-pill.partial { color: var(--warning); background: var(--warning-bg); border-color: var(--ai-border); }

.solution-card .learn {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.25s;
  position: relative;
}

.ai-bridge {
  background: var(--surface-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .ai-bridge { background: var(--bg-deep); }

.ai-bridge::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 50%, var(--ai-glow-strong) 0%, transparent 45%),
    radial-gradient(circle at 90% 50%, var(--hero-bloom-purple) 0%, transparent 45%);
  opacity: 0.5;
  pointer-events: none;
}

[data-theme="dark"] .ai-bridge::before { opacity: 1; }

.ai-bridge .container { position: relative; z-index: 2; }

.ai-bridge-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 64px;
  align-items: center;
}

.ai-bridge-content h2 {
  color: var(--ai-text);
  margin-bottom: 20px;
}

.ai-bridge-content h2 em {
  font-style: normal;
  color: var(--ai-text);
  opacity: 0.85;
}

.ai-bridge-content p {
  font-size: 17px;
  color: var(--ai-text-sub);
  line-height: 1.65;
  margin-bottom: 32px;
}

[data-theme="dark"] .ai-bridge-content p { color: var(--text-sub); }

.ai-bridge-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ai-feature-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .ai-feature-card { background: var(--surface); }

.ai-feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, var(--ai-glow) 0%, transparent 60%);
  pointer-events: none;
}

.ai-feature-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--ai-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px var(--ai-glow-strong);
  position: relative;
}

[data-theme="dark"] .ai-feature-icon { color: #1a1408; }

.ai-feature-icon svg { width: 18px; height: 18px; }

.ai-feature-card h4 {
  font-size: 14px;
  font-weight: 500;
  color: var(--ai-text);
  margin-bottom: 6px;
  position: relative;
}

[data-theme="dark"] .ai-feature-card h4 { color: var(--text); }

.ai-feature-card p {
  font-size: 12px;
  color: var(--ai-text-sub);
  line-height: 1.5;
  position: relative;
  margin-bottom: 0;
}

[data-theme="dark"] .ai-feature-card p { color: var(--text-sub); }

.integrations { background: var(--bg); }

.integrations-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.integrations-head > div { max-width: 640px; }

.integrations-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
  border: 1px solid var(--ai-border);
}

.integrations-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warning);
}

[data-theme="dark"] .integrations-status::before { box-shadow: 0 0 6px var(--warning); }

.integrations-head p { color: var(--text-sub); font-size: 17px; margin-top: 12px; line-height: 1.6; }

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.integration-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  text-align: center;
  transition: all 0.2s;
}

.integration-card:hover { border-color: var(--border-strong); background: var(--surface-hover); }

.integration-glyph {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
}

.integration-name { font-size: 14px; font-weight: 500; color: var(--text); margin-top: 10px; }

.integration-cat { font-size: 10px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.04em; text-transform: uppercase; }

.faq { background: var(--bg); }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 880px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.faq-item:hover { border-color: var(--border-strong); }

.faq-item[open] { background: var(--surface-elevated); border-color: var(--border-strong); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::marker { content: ''; }

.faq-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
  transition: color 0.2s ease;
}

.faq-item:hover .faq-icon { color: var(--text); }

.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.faq-icon::before { width: 12px; height: 2px; }

.faq-icon::after { width: 2px; height: 12px; }

.faq-item[open] .faq-icon::after { opacity: 0; transform: rotate(90deg); }

.faq-body {
  padding: 0 28px 26px;
  color: var(--text-sub);
  font-size: 15px;
  line-height: 1.65;
}

.faq-body p { margin-bottom: 12px; }

.faq-body p:last-child { margin-bottom: 0; }

.faq-body strong { color: var(--text); font-weight: 500; }

.faq-foot {
  margin-top: 40px;
  color: var(--text-sub);
  font-size: 15px;
  max-width: 880px;
}

.faq-foot a { color: var(--energy); font-weight: 500; }

.faq-foot a:hover { color: var(--energy-dark); }

.final-cta h2 { color: #fff; font-size: 44px; letter-spacing: -0.03em; margin-bottom: 12px; }

.footer-brand p { font-size: 13px; color: var(--text-sub); line-height: 1.6; margin-top: 16px; max-width: 280px; }

.section-head { max-width: 720px; margin-bottom: 56px; }

@media (max-width: 1024px) {
  .product-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .product-hero h1 { font-size: 48px; }
  .mosaic-tile { transform: none !important; }
  .solutions-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-bridge-grid { grid-template-columns: 1fr; gap: 40px; }
  .integrations-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .product-hero { padding: 56px 0 72px; }
  .product-hero h1 { font-size: 38px; }
  .product-hero-sub { font-size: 17px; }
  h2 { font-size: 28px; }
  .solutions-grid { grid-template-columns: 1fr; }
  .integrations-grid { grid-template-columns: repeat(2, 1fr); }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 30px; }
  .ai-bridge-visual { grid-template-columns: 1fr; }
  .ai-status { font-size: 11px; padding: 5px 10px 5px 8px; }
  .faq-item summary { padding: 18px 20px; font-size: 15px; }
  .faq-body { padding: 0 20px 20px; font-size: 14px; }
}

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --hero-bloom-purple: rgba(124, 93, 199, 0.03);
  --dot-grid: rgba(20, 48, 90, 0.05);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;
  --purple: #3B1E76;
  --purple-bg: #EDE6FB;
  --teal: #14554F;
  --teal-bg: #D5F2EC;

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06);
  --mosaic-shadow: 0 24px 48px rgba(20, 48, 90, 0.08), 0 8px 16px rgba(20, 48, 90, 0.06);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: none;

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --hero-bloom-purple: rgba(167, 139, 250, 0.08);
  --dot-grid: rgba(255, 255, 255, 0.025);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --purple: #a78bfa;
  --purple-bg: rgba(167, 139, 250, 0.12);
  --teal: #5eead4;
  --teal-bg: rgba(94, 234, 212, 0.12);

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --mosaic-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

h2 { font-size: 38px; margin-bottom: 16px; color: var(--navy); line-height: 1.1; }

h3 { font-size: 22px; margin-bottom: 8px; font-weight: 500; }

.breadcrumb { background: var(--surface-elevated); border-bottom: 1px solid var(--border); padding: 14px 0; }

.breadcrumb-list { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }

.breadcrumb-list a { color: var(--text-sub); }

.breadcrumb-list a:hover { color: var(--energy); }

.breadcrumb-sep { color: var(--border-strong); }

.hr-hero { background: var(--hero-bg); padding: 80px 0 80px; overflow: hidden; position: relative; }

[data-theme="dark"] .hr-hero { padding: 96px 0 96px; }

.hr-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, var(--hero-bloom-purple) 0%, transparent 40%);
  pointer-events: none;
}

.hr-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.hr-hero .container { position: relative; z-index: 2; }

.hr-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }

.module-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--energy);
  background: var(--surface); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 20px;
  box-shadow: var(--card-shadow);
}

.module-eyebrow svg { width: 14px; height: 14px; }

.hr-hero h1 {
  font-size: 56px; line-height: 1.0; letter-spacing: -0.03em;
  margin-bottom: 20px; font-weight: 600; color: var(--navy);
}

[data-theme="dark"] .hr-hero h1 { color: var(--text); }

.hr-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .hr-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.hr-hero-sub { font-size: 19px; color: var(--text-sub); line-height: 1.55; margin-bottom: 28px; }

.plan-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; font-size: 13px; color: var(--text-sub); }

.plan-strip .label { color: var(--text-muted); letter-spacing: 0.04em; }

.plan-strip-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.plan-strip-pill { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-weight: 500; color: var(--text); letter-spacing: 0.02em; }

.plan-strip-pill.all { background: var(--success-bg); color: var(--success); border-color: var(--success); }

.hr-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.profile-mockup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--mosaic-shadow);
  transform: perspective(1800px) rotateY(-4deg) rotateX(2deg);
}

.profile-chrome { background: var(--surface-elevated); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; gap: 10px; }

.profile-chrome .dots { display: flex; gap: 6px; }

.profile-chrome .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }

.profile-chrome .url { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); text-align: center; }

.profile-body { padding: 0; min-height: 480px; }

.profile-head {
  padding: 26px 28px 22px;
  display: grid; grid-template-columns: 80px 1fr auto; gap: 20px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(29, 114, 242, 0.025) 0%, transparent 100%);
}

[data-theme="dark"] .profile-head { background: linear-gradient(180deg, rgba(69, 150, 255, 0.04) 0%, transparent 100%); }

.profile-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--energy) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26px; font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 4px 16px rgba(29, 114, 242, 0.18);
}

[data-theme="dark"] .profile-avatar { box-shadow: 0 4px 16px rgba(69, 150, 255, 0.28); }

.profile-identity h6 { font-size: 18px; font-weight: 500; color: var(--text); margin-bottom: 3px; letter-spacing: -0.005em; }

.profile-identity p { font-size: 13px; color: var(--text-sub); margin-bottom: 8px; }

.profile-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.profile-tag {
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  font-weight: 500; letter-spacing: 0.02em;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-sub);
}

.profile-tag.worker { background: var(--success-bg); color: var(--success); border-color: var(--success); font-family: 'JetBrains Mono', monospace; }

.profile-tag.dept { background: var(--purple-bg); color: var(--purple); border-color: var(--purple); }

.profile-tag.loc { background: var(--teal-bg); color: var(--teal); border-color: var(--teal); }

.profile-status {
  font-size: 11px; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}

.profile-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

.profile-meta {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}

.profile-meta-item { font-size: 12px; }

.profile-meta-label { color: var(--text-muted); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 4px; }

.profile-meta-value { color: var(--text); font-weight: 500; font-family: 'JetBrains Mono', monospace; font-size: 11px; }

.profile-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  background: var(--surface);
}

.profile-tab {
  padding: 14px 0; margin-right: 24px;
  font-size: 12px; color: var(--text-sub); font-weight: 500;
  border-bottom: 2px solid transparent;
  position: relative;
}

.profile-tab.active { color: var(--energy); border-bottom-color: var(--energy); }

[data-theme="dark"] .profile-tab.active { color: var(--energy); }

.profile-tab .count { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); margin-left: 4px; padding: 2px 6px; background: var(--surface-elevated); border-radius: 8px; }

.profile-tab.active .count { background: var(--energy-glow); color: var(--energy); }

.profile-tab-content { padding: 18px 28px; }

.profile-section + .profile-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

.profile-section-title { font-size: 10px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 10px; }

.profile-doc-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 12px;
  padding: 7px 0;
  font-size: 11px;
}

.profile-doc-row + .profile-doc-row { border-top: 1px solid var(--border); }

.profile-doc-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--surface-elevated); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--text);
  font-weight: 500;
}

.profile-doc-name { color: var(--text); font-weight: 500; }

.profile-doc-name span { display: block; color: var(--text-muted); font-weight: 400; font-size: 10px; margin-top: 1px; }

.profile-doc-status { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; background: var(--success-bg); color: var(--success); }

.profile-doc-status.pending { background: var(--warning-bg); color: var(--warning); }

.proof-bar { background: var(--surface-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 32px 0; }

.proof-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }

.proof-item { display: flex; align-items: center; gap: 12px; }

.proof-item-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--energy); flex-shrink: 0;
}

.proof-item-icon svg { width: 16px; height: 16px; }

.proof-item-text { font-size: 13px; color: var(--text); font-weight: 500; line-height: 1.3; }

.proof-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.feature-block { background: var(--bg); position: relative; }

.feature-block + .feature-block { border-top: 1px solid var(--border); }

.feature-block.alt { background: var(--surface-elevated); }

.feature-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
}

.feature-block.reverse .feature-grid { grid-template-columns: 7fr 5fr; }

.feature-block.reverse .feature-content { order: 2; }

.feature-block.reverse .feature-visual { order: 1; }

.feature-step {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 12px;
}

.feature-content h2 { font-size: 32px; margin-bottom: 18px; line-height: 1.15; }

.feature-content > p { font-size: 17px; color: var(--text-sub); line-height: 1.6; margin-bottom: 24px; }

.feature-content > p strong { color: var(--text); font-weight: 500; }

.feature-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }

.feature-list li {
  font-size: 14px; color: var(--text-sub); line-height: 1.5;
  display: flex; align-items: flex-start; gap: 10px;
}

.feature-list li strong { color: var(--text); font-weight: 500; }

.feature-list li::before {
  content: ''; width: 18px; height: 18px;
  background: var(--success-bg);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327500A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 11px; background-repeat: no-repeat; background-position: center;
  flex-shrink: 0; margin-top: 1px;
}

[data-theme="dark"] .feature-list li::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); }

.feature-mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--card-hover-shadow);
}

.mock-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }

.mock-head-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--energy); }

.mock-head-icon svg { width: 14px; height: 14px; }

.mock-head h6 { font-size: 13px; font-weight: 500; color: var(--text); flex: 1; }

.mock-head .meta { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.worker-types-section { background: var(--bg); padding: 96px 0; }

.worker-types-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }

.worker-types-head p { color: var(--text-sub); font-size: 17px; margin-top: 14px; line-height: 1.6; }

.worker-types-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}

.worker-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
  display: flex; flex-direction: column;
  transition: all 0.2s ease;
  position: relative; overflow: hidden;
}

.worker-card:hover { transform: translateY(-2px); box-shadow: var(--card-hover-shadow); border-color: var(--border-strong); }

.worker-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}

.worker-card-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--surface-elevated); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
}

[data-theme="dark"] .worker-card-icon { color: var(--energy); }

.worker-card-icon svg { width: 20px; height: 20px; }

.worker-card-plan {
  font-size: 10px; font-weight: 500; padding: 3px 8px;
  border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase;
}

.worker-card-plan.all { background: var(--success-bg); color: var(--success); }

.worker-card-plan.starter { background: var(--surface-elevated); color: var(--text-sub); border: 1px solid var(--border); }

.worker-card-plan.enterprise { background: var(--ai-surface); color: var(--ai-text); border: 1px solid var(--ai-border); }

.worker-card h3 {
  font-size: 18px; font-weight: 500; color: var(--text);
  margin-bottom: 8px; letter-spacing: -0.01em;
}

.worker-card p {
  font-size: 13px; color: var(--text-sub); line-height: 1.55;
  flex: 1; margin-bottom: 14px;
}

.worker-card-meta {
  font-size: 11px; color: var(--text-muted);
  padding-top: 12px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}

.worker-card-meta svg { width: 12px; height: 12px; flex-shrink: 0; }

.worker-card-meta strong { color: var(--text-sub); font-weight: 500; }

.worker-types-foot {
  text-align: center; margin-top: 40px;
  font-size: 14px; color: var(--text-sub);
  max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.6;
}

.worker-types-foot strong { color: var(--text); font-weight: 500; }

.org-mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  position: relative;
}

.org-node {
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
  display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center;
  font-size: 11px;
}

.org-node.root { background: linear-gradient(135deg, var(--navy) 0%, var(--energy) 100%); color: #fff; border: none; }

.org-node.root .org-node-name { color: #fff; }

.org-node.root .org-node-role { color: rgba(255,255,255,0.7); }

.org-node-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--border-strong); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.org-node.root .org-node-avatar { background: rgba(255,255,255,0.2); }

.org-node-name { color: var(--text); font-weight: 500; }

.org-node-role { color: var(--text-muted); font-size: 10px; }

.org-tree { display: grid; gap: 8px; }

.org-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding-left: 24px; position: relative; }

.org-row::before {
  content: ''; position: absolute;
  top: -8px; left: 18px;
  width: 1px; height: calc(100% + 4px);
  background: var(--border);
}

.org-row > .org-node { position: relative; }

.org-row > .org-node::before {
  content: ''; position: absolute;
  top: 50%; left: -10px;
  width: 8px; height: 1px;
  background: var(--border);
}

.doc-vault {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.doc-folder {
  display: grid; grid-template-columns: 32px 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.doc-folder:last-child { border-bottom: none; }

.doc-folder-icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--surface-elevated);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-soft);
}

[data-theme="dark"] .doc-folder-icon { color: var(--energy); }

.doc-folder-icon svg { width: 14px; height: 14px; }

.doc-folder-name { color: var(--text); font-weight: 500; }

.doc-folder-meta { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.doc-folder-count {
  font-size: 10px; color: var(--text); font-weight: 500;
  background: var(--surface-elevated); padding: 3px 8px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
}

.events-mock { padding: 4px 0; }

.event-row {
  display: grid; grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 0;
  position: relative;
}

.event-row + .event-row { border-top: 1px solid var(--border); }

.event-row::after {
  content: ''; position: absolute;
  left: 15px; bottom: -8px; width: 2px; height: 12px;
  background: var(--border);
}

.event-row:last-child::after { display: none; }

.event-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  position: relative; z-index: 1;
}

.event-icon.join { background: var(--success); }

.event-icon.promotion { background: var(--energy); }

.event-icon.transfer { background: var(--purple); }

[data-theme="dark"] .event-icon.purple { color: var(--bg); }

.event-icon.exit { background: var(--text-muted); }

.event-icon svg { width: 12px; height: 12px; }

.event-text { font-size: 12px; color: var(--text); }

.event-text strong { font-weight: 500; }

.event-text span { display: block; color: var(--text-muted); font-size: 10px; margin-top: 1px; }

.event-date { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-sub); text-align: right; }

.audit-log-mock { padding: 4px 0; }

.audit-log-row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.audit-log-row:last-child { border-bottom: none; }

.audit-log-actor {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--border-strong), var(--navy-soft));
  color: #fff; font-size: 10px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}

.audit-log-text { color: var(--text); }

.audit-log-text strong { font-weight: 500; }

.audit-log-text em { color: var(--energy); font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 11px; }

.audit-log-ip { font-family: 'JetBrains Mono', monospace; color: var(--text-muted); font-size: 10px; }

.audit-log-time { font-family: 'JetBrains Mono', monospace; color: var(--text-muted); font-size: 10px; text-align: right; }

.ai-bridge { background: var(--ai-surface); border-top: 1px solid var(--ai-border); border-bottom: 1px solid var(--ai-border); position: relative; overflow: hidden; padding: 80px 0; }

[data-theme="dark"] .ai-bridge { background: var(--bg-deep); border-color: var(--border); }

.ai-bridge::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 50%, var(--ai-glow-strong) 0%, transparent 50%);
  opacity: 0.5; pointer-events: none;
}

.ai-bridge-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }

.ai-bridge-content .eyebrow { color: var(--ai-text-sub); }

[data-theme="dark"] .ai-bridge-content .eyebrow { color: var(--ai-text); }

[data-theme="dark"] .ai-bridge-content h2 { color: var(--text); }

.ai-bridge-content p { font-size: 17px; line-height: 1.65; color: var(--ai-text-sub); margin-bottom: 24px; }

.ai-bridge-content p strong { color: var(--ai-text); font-weight: 500; }

[data-theme="dark"] .ai-bridge-content p strong { color: var(--text); }

.ai-bridge-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ai-gradient); color: #fff;
  font-size: 15px; font-weight: 500;
  padding: 12px 22px; border-radius: var(--radius-md);
  box-shadow: 0 4px 16px var(--ai-glow-strong);
  transition: all 0.2s ease;
}

[data-theme="dark"] .ai-bridge-btn { color: #1a1408; }

.ai-bridge-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--ai-glow-strong); filter: brightness(1.05); color: #fff; }

[data-theme="dark"] .ai-bridge-btn:hover { color: #1a1408; }

.ai-bridge-visual {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .ai-bridge-visual { background: var(--surface); backdrop-filter: none; }

.smart-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.smart-row:last-child { border-bottom: none; }

.smart-row-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--ai-gradient); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 2px 8px var(--ai-glow); }

[data-theme="dark"] .smart-row-icon { color: #1a1408; }

.smart-row-icon svg { width: 12px; height: 12px; }

.smart-row-info strong { color: var(--text); font-weight: 500; display: block; }

.smart-row-info span { color: var(--text-muted); font-size: 10px; margin-top: 1px; display: block; }

.smart-row-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ai-text); text-align: right; }

.integration-note { background: var(--bg); border-top: 1px solid var(--border); padding: 56px 0; }

.integration-note-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: center; }

.integration-note h3 { font-size: 22px; font-weight: 500; color: var(--text); margin-bottom: 8px; }

.integration-note p { font-size: 14px; color: var(--text-sub); line-height: 1.55; }

.integration-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.integration-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; color: var(--text); font-weight: 500;
  text-decoration: none; transition: all 0.15s;
}

.integration-pill:hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text); }

.integration-pill svg { width: 14px; height: 14px; }

.final-cta h2 { color: #fff; font-size: 40px; letter-spacing: -0.025em; margin-bottom: 12px; }

@media (max-width: 1024px) {
  .hr-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .profile-mockup { transform: none; }
  .hr-hero h1 { font-size: 44px; }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-block.reverse .feature-content { order: 1; }
  .feature-block.reverse .feature-visual { order: 2; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .worker-types-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-bridge-grid { grid-template-columns: 1fr; gap: 40px; }
  .integration-note-grid { grid-template-columns: 1fr; gap: 24px; }
  .profile-meta { grid-template-columns: repeat(2, 1fr); }
  .org-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .hr-hero { padding: 48px 0 56px; }
  .hr-hero h1 { font-size: 34px; }
  .hr-hero-sub { font-size: 17px; }
  .profile-head { grid-template-columns: 60px 1fr; }
  .profile-status { grid-column: 1 / -1; }
  h2 { font-size: 28px; }
  .feature-content h2 { font-size: 26px; }
  .proof-grid { grid-template-columns: 1fr; }
  .worker-types-grid { grid-template-columns: 1fr; }
  .worker-types-section { padding: 64px 0; }
  .ai-bridge { padding: 56px 0; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
}

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --hero-bloom-purple: rgba(124, 93, 199, 0.03);
  --dot-grid: rgba(20, 48, 90, 0.05);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06);
  --mosaic-shadow: 0 24px 48px rgba(20, 48, 90, 0.08), 0 8px 16px rgba(20, 48, 90, 0.06);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: none;

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --hero-bloom-purple: rgba(167, 139, 250, 0.08);
  --dot-grid: rgba(255, 255, 255, 0.025);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --mosaic-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

.payroll-hero { background: var(--hero-bg); padding: 80px 0 80px; overflow: hidden; position: relative; }

[data-theme="dark"] .payroll-hero { padding: 96px 0 96px; }

.payroll-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, var(--hero-bloom-gold) 0%, transparent 40%);
  pointer-events: none;
}

.payroll-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.payroll-hero .container { position: relative; z-index: 2; }

.payroll-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }

.payroll-hero h1 {
  font-size: 56px; line-height: 1.0; letter-spacing: -0.03em;
  margin-bottom: 20px; font-weight: 600; color: var(--navy);
}

[data-theme="dark"] .payroll-hero h1 { color: var(--text); }

.payroll-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .payroll-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.payroll-hero-sub { font-size: 19px; color: var(--text-sub); line-height: 1.55; margin-bottom: 28px; }

.plan-strip-pill.partial { background: var(--warning-bg); color: var(--warning); border-color: var(--ai-border); }

.payroll-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.payroll-mockup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--mosaic-shadow);
  transform: perspective(1800px) rotateY(-4deg) rotateX(2deg);
}

.payroll-mockup-chrome { background: var(--surface-elevated); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; gap: 10px; }

.payroll-mockup-chrome .dots { display: flex; gap: 6px; }

.payroll-mockup-chrome .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }

.payroll-mockup-chrome .breadcrumb-mini { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); text-align: center; }

.payroll-mockup-body { padding: 22px 24px; min-height: 460px; }

.cycle-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }

.cycle-head h5 { font-size: 16px; font-weight: 500; color: var(--text); }

.cycle-head .badge { font-size: 10px; padding: 3px 9px; border-radius: 999px; background: var(--ai-surface); color: var(--ai-text); border: 1px solid var(--ai-border); font-weight: 500; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }

.cycle-progress {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  margin-bottom: 22px;
}

.cycle-step {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  position: relative;
  text-align: center;
}

.cycle-step.done { border-color: var(--success); }

.cycle-step.active { border-color: var(--energy); background: rgba(29, 114, 242, 0.06); }

[data-theme="dark"] .cycle-step.active { background: rgba(69, 150, 255, 0.08); }

.cycle-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--border-strong);
  color: #fff;
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 6px;
}

.cycle-step.done .cycle-step-num { background: var(--success); }

.cycle-step.active .cycle-step-num { background: var(--energy); box-shadow: 0 0 0 4px var(--energy-glow); }

[data-theme="dark"] .cycle-step.done .cycle-step-num { color: var(--bg); }

.cycle-step-num svg { width: 12px; height: 12px; stroke: currentColor; }

.cycle-step-lbl { font-size: 10px; color: var(--text); font-weight: 500; line-height: 1.3; }

.cycle-step-meta { font-size: 9px; color: var(--text-muted); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }

.mock-ai-card {
  background: var(--ai-surface);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.mock-ai-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, var(--ai-glow) 0%, transparent 60%);
  pointer-events: none;
}

.mock-ai-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; position: relative; }

.mock-ai-card-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--ai-gradient);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 8px var(--ai-glow);
}

[data-theme="dark"] .mock-ai-card-icon { color: #1a1408; }

.mock-ai-card-icon svg { width: 14px; height: 14px; }

.mock-ai-card-title { font-size: 12px; font-weight: 500; color: var(--ai-text); flex: 1; }

.mock-ai-severity { font-size: 9px; padding: 2px 6px; border-radius: 4px; background: rgba(212, 160, 82, 0.2); color: var(--ai-text); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.mock-ai-card-body { font-size: 12px; color: var(--ai-text-sub); line-height: 1.55; margin-bottom: 12px; position: relative; }

[data-theme="dark"] .mock-ai-card-body { color: var(--text-sub); }

.mock-ai-card-body strong { color: var(--ai-text); font-weight: 600; }

[data-theme="dark"] .mock-ai-card-body strong { color: var(--text); }

.mock-ai-card-actions { display: flex; gap: 8px; position: relative; }

.mock-ai-btn { font-size: 11px; padding: 5px 10px; border-radius: 6px; font-weight: 500; }

.mock-ai-btn.primary { background: var(--ai-text); color: var(--ai-surface); }

[data-theme="dark"] .mock-ai-btn.primary { background: var(--ai-text); color: #1a1408; }

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

.payroll-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.payroll-table-head {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
  padding: 8px 14px;
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500;
}

.payroll-table-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--text);
  align-items: center;
}

.payroll-table-row:last-child { border-bottom: none; background: var(--surface-elevated); font-weight: 500; }

.payroll-table-row .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; }

.payroll-table-row .num.amount { color: var(--text); }

.payroll-table-row .status { display: flex; align-items: center; justify-content: flex-end; }

.payroll-table-row .pill-status { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.pill-status.ready { background: var(--success-bg); color: var(--success); }

.pill-status.review { background: var(--warning-bg); color: var(--warning); }

.import-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.import-row:last-child { border-bottom: none; }

.import-icon {
  width: 32px; height: 32px; border-radius: 7px;
  background: var(--surface-elevated); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
}

.import-row-name { color: var(--text); font-weight: 500; }

.import-row-name span { color: var(--text-muted); font-weight: 400; font-size: 11px; display: block; margin-top: 2px; }

.import-row-status { font-size: 10px; padding: 3px 8px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.statutory-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.statutory-card {
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px;
}

.statutory-card-label { font-size: 10px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 6px; }

.statutory-card-value { font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; font-family: 'JetBrains Mono', monospace; }

.statutory-card-meta { font-size: 10px; color: var(--success); margin-top: 4px; font-weight: 500; }

.bank-file {
  background: var(--surface-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: 8px; padding: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-sub);
}

.bank-file-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

.bank-file-head .ext { background: var(--surface); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; font-size: 10px; color: var(--text); }

.bank-file-line { padding: 3px 0; color: var(--text-muted); border-bottom: 1px dotted var(--border); }

.bank-file-line:last-child { border-bottom: none; }

.bank-file-line span { color: var(--text); }

.bank-file-foot { font-size: 11px; color: var(--text-sub); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-family: 'Inter', sans-serif; display: flex; align-items: center; justify-content: space-between; }

.bank-file-foot .download { color: var(--energy); font-weight: 500; }

.audit-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12px;
}

.audit-row:last-child { border-bottom: none; }

.audit-row-icon {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--success-bg); display: flex; align-items: center; justify-content: center;
  color: var(--success); flex-shrink: 0;
}

.audit-row-icon svg { width: 12px; height: 12px; }

.audit-row-text { color: var(--text); }

.audit-row-text span { color: var(--text-muted); font-size: 11px; display: block; margin-top: 2px; }

.audit-row-time { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 10px; }

.outcomes { background: var(--surface-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 72px 0; }

.outcomes-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }

.outcomes-head p { color: var(--text-sub); font-size: 17px; margin-top: 12px; }

.outcomes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.outcome-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; text-align: left; box-shadow: var(--card-shadow); }

.outcome-num { font-size: 48px; font-weight: 600; color: var(--navy); letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px; }

[data-theme="dark"] .outcome-num { color: var(--text); }

.outcome-num .unit { font-size: 22px; color: var(--navy-soft); font-weight: 500; margin-left: 4px; }

.outcome-label { font-size: 14px; color: var(--text); font-weight: 500; margin-bottom: 6px; }

.outcome-meta { font-size: 13px; color: var(--text-sub); line-height: 1.5; }

.ai-bridge-visual {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.ai-anomaly-card { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }

.ai-anomaly-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--ai-gradient);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 16px var(--ai-glow-strong);
}

[data-theme="dark"] .ai-anomaly-icon { color: #1a1408; }

.ai-anomaly-icon svg { width: 18px; height: 18px; }

.ai-anomaly-body h4 { font-size: 16px; font-weight: 500; color: var(--ai-text); margin-bottom: 4px; }

[data-theme="dark"] .ai-anomaly-body h4 { color: var(--text); }

.ai-anomaly-body p { font-size: 14px; color: var(--ai-text-sub); line-height: 1.5; margin: 0; }

[data-theme="dark"] .ai-anomaly-body p { color: var(--text-sub); }

.ai-variance-chart {
  background: var(--surface); border: 1px solid var(--ai-border);
  border-radius: var(--radius-md); padding: 18px;
}

[data-theme="dark"] .ai-variance-chart { background: var(--surface-elevated); border-color: var(--border); }

.ai-variance-row {
  display: grid; grid-template-columns: 100px 1fr auto;
  align-items: center; gap: 12px;
  padding: 8px 0; font-size: 12px;
}

.ai-variance-row + .ai-variance-row { border-top: 1px solid var(--border); }

.ai-variance-row-label { color: var(--text); font-weight: 500; }

.ai-variance-bar { height: 8px; background: var(--surface-elevated); border-radius: 4px; overflow: hidden; position: relative; }

[data-theme="dark"] .ai-variance-bar { background: var(--bg); }

.ai-variance-bar-fill { height: 100%; border-radius: 4px; }

.ai-variance-bar-fill.normal { background: var(--success); }

.ai-variance-bar-fill.warn { background: var(--ai-gradient); }

.ai-variance-row-pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text); font-weight: 500; min-width: 40px; text-align: right; }

.ai-variance-row-pct.warn { color: var(--ai-text); }

[data-theme="dark"] .ai-variance-row-pct.warn { color: var(--ai-text); }

.integration-note {
  background: var(--surface-elevated);
  border-top: 1px solid var(--border);
  padding: 56px 0;
}

@media (max-width: 1024px) {
  .payroll-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .payroll-mockup { transform: none; }
  .payroll-hero h1 { font-size: 44px; }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-block.reverse .feature-content { order: 1; }
  .feature-block.reverse .feature-visual { order: 2; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .outcomes-grid { grid-template-columns: 1fr; }
  .ai-bridge-grid { grid-template-columns: 1fr; gap: 40px; }
  .integration-note-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .payroll-hero { padding: 48px 0 56px; }
  .payroll-hero h1 { font-size: 34px; }
  .payroll-hero-sub { font-size: 17px; }
  .cycle-progress { grid-template-columns: repeat(3, 1fr); }
  .cycle-step:nth-child(4), .cycle-step:nth-child(5) { display: none; }
  h2 { font-size: 28px; }
  .feature-content h2 { font-size: 26px; }
  .proof-grid { grid-template-columns: 1fr; }
  .ai-bridge { padding: 56px 0; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
}

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --hero-bloom-green: rgba(39, 80, 10, 0.04);
  --dot-grid: rgba(20, 48, 90, 0.05);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06);
  --mosaic-shadow: 0 24px 48px rgba(20, 48, 90, 0.08), 0 8px 16px rgba(20, 48, 90, 0.06);

  --h1-accent-color: var(--success);
  --h1-accent-gradient: none;

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --hero-bloom-green: rgba(52, 211, 153, 0.08);
  --dot-grid: rgba(255, 255, 255, 0.025);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --mosaic-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

.comp-hero { background: var(--hero-bg); padding: 80px 0 80px; overflow: hidden; position: relative; }

[data-theme="dark"] .comp-hero { padding: 96px 0 96px; }

.comp-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, var(--hero-bloom-green) 0%, transparent 40%);
  pointer-events: none;
}

.comp-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.comp-hero .container { position: relative; z-index: 2; }

.comp-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }

.comp-hero h1 {
  font-size: 56px; line-height: 1.0; letter-spacing: -0.03em;
  margin-bottom: 20px; font-weight: 600; color: var(--navy);
}

[data-theme="dark"] .comp-hero h1 { color: var(--text); }

.comp-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .comp-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.comp-hero-sub { font-size: 19px; color: var(--text-sub); line-height: 1.55; margin-bottom: 28px; }

.comp-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.calendar-mockup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--mosaic-shadow);
  transform: perspective(1800px) rotateY(-4deg) rotateX(2deg);
}

.calendar-chrome { background: var(--surface-elevated); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; gap: 10px; }

.calendar-chrome .dots { display: flex; gap: 6px; }

.calendar-chrome .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }

.calendar-chrome .url { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); text-align: center; }

.calendar-body { padding: 22px 24px; min-height: 480px; }

.calendar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }

.calendar-head h5 { font-size: 16px; font-weight: 500; color: var(--text); }

.calendar-head .meta { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.calendar-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }

.calendar-stat { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }

.calendar-stat-label { font-size: 10px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }

.calendar-stat-value { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; font-family: 'JetBrains Mono', monospace; }

.calendar-stat-meta { font-size: 11px; color: var(--text-sub); margin-top: 2px; }

.calendar-stat-meta.positive { color: var(--success); font-weight: 500; }

.calendar-stat-meta.warn { color: var(--warning); font-weight: 500; }

.calendar-section-title { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 10px; }

.calendar-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }

.calendar-row {
  display: grid; grid-template-columns: 36px 1fr auto auto;
  align-items: center; gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.calendar-row:last-child { border-bottom: none; }

.calendar-row-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.calendar-row-icon.done { background: var(--success-bg); color: var(--success); }

.calendar-row-icon.due { background: var(--warning-bg); color: var(--warning); }

.calendar-row-icon.upcoming { background: var(--surface-elevated); color: var(--text-muted); border: 1px solid var(--border); }

.calendar-row-icon svg { width: 14px; height: 14px; }

.calendar-row-info { font-size: 12px; }

.calendar-row-name { color: var(--text); font-weight: 500; }

.calendar-row-meta { color: var(--text-muted); font-size: 11px; margin-top: 1px; }

.calendar-row-amount { color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; }

.calendar-row-status { font-size: 10px; padding: 3px 8px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }

.calendar-row-status.done { background: var(--success-bg); color: var(--success); }

.calendar-row-status.due { background: var(--warning-bg); color: var(--warning); }

.calendar-row-status.upcoming { background: var(--surface-elevated); color: var(--text-sub); border: 1px solid var(--border); }

.honest-block {
  background: var(--bg);
  padding: 72px 0;
}

.honest-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 960px; margin: 0 auto;
  position: relative;
}

.honest-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
}

.honest-card.you { border-top: 3px solid var(--text-muted); }

.honest-card.us { border-top: 3px solid var(--success); }

.honest-card-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }

.honest-card.you .honest-card-eyebrow { color: var(--text-muted); }

.honest-card.us .honest-card-eyebrow { color: var(--success); }

.honest-card h3 { font-size: 20px; font-weight: 500; color: var(--text); margin-bottom: 12px; }

.honest-card p { font-size: 14px; color: var(--text-sub); line-height: 1.6; margin-bottom: 0; }

.honest-foot { text-align: center; margin-top: 32px; }

.honest-foot p { font-size: 14px; color: var(--text-sub); max-width: 640px; margin: 0 auto; line-height: 1.6; }

.honest-foot p strong { color: var(--text); font-weight: 500; }

.filing-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }

.filing-card {
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px;
}

.filing-card-label { font-size: 9px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 4px; }

.filing-card-value { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; font-family: 'JetBrains Mono', monospace; }

.filing-card-status { font-size: 9px; color: var(--success); margin-top: 4px; font-weight: 500; display: flex; align-items: center; gap: 3px; }

.filing-card-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--success); }

.due-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.due-row:last-child { border-bottom: none; }

.due-row-label { color: var(--text); font-weight: 500; }

.due-row-label span { display: block; color: var(--text-muted); font-weight: 400; font-size: 10px; margin-top: 1px; }

.due-row-date { font-family: 'JetBrains Mono', monospace; color: var(--text-sub); font-size: 10px; text-align: right; }

.due-row-date strong { color: var(--text); display: block; font-weight: 500; font-size: 11px; }

.tds-mock { display: flex; flex-direction: column; gap: 10px; }

.tds-quarter {
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
}

.tds-quarter.active { border-color: var(--energy); background: rgba(29, 114, 242, 0.04); }

[data-theme="dark"] .tds-quarter.active { background: rgba(69, 150, 255, 0.08); }

.tds-quarter-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; color: var(--text);
}

.tds-quarter.done .tds-quarter-num { background: var(--success); border-color: var(--success); color: #fff; }

[data-theme="dark"] .tds-quarter.done .tds-quarter-num { color: var(--bg); }

.tds-quarter.active .tds-quarter-num { background: var(--energy); border-color: var(--energy); color: #fff; }

.tds-quarter-info { font-size: 12px; }

.tds-quarter-info strong { color: var(--text); font-weight: 500; }

.tds-quarter-info span { color: var(--text-muted); font-size: 10px; display: block; margin-top: 1px; }

.tds-quarter-amount { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; color: var(--text); text-align: right; }

.tds-quarter-amount span { color: var(--text-muted); font-weight: 400; font-size: 10px; display: block; }

.posh-mock { padding: 8px 0; }

.posh-section + .posh-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

.posh-section-title { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 10px; }

.posh-member { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 12px; }

.posh-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--border-strong), var(--navy-soft)); color: #fff; font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; }

.posh-name { font-weight: 500; color: var(--text); }

.posh-name span { display: block; color: var(--text-muted); font-weight: 400; font-size: 10px; margin-top: 1px; }

.posh-role { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-elevated); color: var(--text-sub); border: 1px solid var(--border); }

.posh-role.chair { background: var(--success-bg); color: var(--success); border-color: var(--success); }

.dpdp-card-row {
  display: grid; grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.dpdp-card-row:last-child { border-bottom: none; }

.dpdp-card-icon {
  width: 32px; height: 32px; border-radius: 7px;
  background: var(--success-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--success);
}

.dpdp-card-icon svg { width: 14px; height: 14px; }

.dpdp-card-info { font-size: 12px; }

.dpdp-card-info strong { color: var(--text); font-weight: 500; }

.dpdp-card-info span { display: block; color: var(--text-muted); font-size: 10px; margin-top: 1px; }

.dpdp-card-status { font-size: 9px; padding: 3px 7px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; background: var(--success-bg); color: var(--success); }

.verify-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.verify-row:last-child { border-bottom: none; }

.verify-row-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--success-bg); color: var(--success); display: flex; align-items: center; justify-content: center; }

.verify-row-icon svg { width: 12px; height: 12px; }

.verify-row-info strong { color: var(--text); font-weight: 500; display: block; }

.verify-row-info span { color: var(--text-muted); font-size: 10px; margin-top: 1px; display: block; }

.verify-row-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-sub); text-align: right; }

.security-strip { background: var(--surface-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 72px 0; }

.security-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }

.security-head p { color: var(--text-sub); font-size: 17px; margin-top: 12px; line-height: 1.6; }

.security-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.security-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
}

.security-card-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--surface-elevated); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--energy); margin-bottom: 16px;
}

.security-card-icon svg { width: 18px; height: 18px; }

.security-card h4 { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 6px; }

.security-card p { font-size: 13px; color: var(--text-sub); line-height: 1.55; margin-bottom: 0; }

.security-card .mono { font-family: 'JetBrains Mono', monospace; color: var(--text); font-weight: 500; }

@media (max-width: 1024px) {
  .comp-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .calendar-mockup { transform: none; }
  .comp-hero h1 { font-size: 44px; }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-block.reverse .feature-content { order: 1; }
  .feature-block.reverse .feature-visual { order: 2; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .honest-grid { grid-template-columns: 1fr; }
  .security-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-bridge-grid { grid-template-columns: 1fr; gap: 40px; }
  .integration-note-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .comp-hero { padding: 48px 0 56px; }
  .comp-hero h1 { font-size: 34px; }
  .comp-hero-sub { font-size: 17px; }
  .calendar-stats { grid-template-columns: 1fr; }
  h2 { font-size: 28px; }
  .feature-content h2 { font-size: 26px; }
  .proof-grid { grid-template-columns: 1fr; }
  .security-grid { grid-template-columns: 1fr; }
  .ai-bridge { padding: 56px 0; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
  .honest-card { padding: 24px; }
}

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --hero-bloom-purple: rgba(124, 93, 199, 0.05);
  --dot-grid: rgba(20, 48, 90, 0.05);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;
  --purple: #3B1E76;
  --purple-bg: #EDE6FB;

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06);
  --mosaic-shadow: 0 24px 48px rgba(20, 48, 90, 0.08), 0 8px 16px rgba(20, 48, 90, 0.06);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: none;

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --hero-bloom-purple: rgba(167, 139, 250, 0.12);
  --dot-grid: rgba(255, 255, 255, 0.025);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --purple: #a78bfa;
  --purple-bg: rgba(167, 139, 250, 0.12);

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --mosaic-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

.rec-hero { background: var(--hero-bg); padding: 80px 0 80px; overflow: hidden; position: relative; }

[data-theme="dark"] .rec-hero { padding: 96px 0 96px; }

.rec-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, var(--hero-bloom-purple) 0%, transparent 40%);
  pointer-events: none;
}

.rec-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.rec-hero .container { position: relative; z-index: 2; }

.rec-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }

.rec-hero h1 {
  font-size: 56px; line-height: 1.0; letter-spacing: -0.03em;
  margin-bottom: 20px; font-weight: 600; color: var(--navy);
}

[data-theme="dark"] .rec-hero h1 { color: var(--text); }

.rec-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .rec-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.rec-hero-sub { font-size: 19px; color: var(--text-sub); line-height: 1.55; margin-bottom: 28px; }

.plan-strip-pill.ai-pack { background: var(--ai-surface); color: var(--ai-text); border-color: var(--ai-border); font-family: 'JetBrains Mono', monospace; font-size: 10px; }

.rec-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.pipeline-mockup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--mosaic-shadow);
  transform: perspective(1800px) rotateY(-4deg) rotateX(2deg);
}

.pipeline-chrome { background: var(--surface-elevated); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; gap: 10px; }

.pipeline-chrome .dots { display: flex; gap: 6px; }

.pipeline-chrome .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }

.pipeline-chrome .url { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); text-align: center; }

.pipeline-body { padding: 18px 16px 22px; min-height: 480px; }

.pipeline-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; padding: 0 8px; }

.pipeline-head h5 { font-size: 14px; font-weight: 500; color: var(--text); }

.pipeline-head .meta { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.pipeline-columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.pipeline-col {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 8px;
  min-height: 360px;
}

.pipeline-col-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding: 0 4px;
}

.pipeline-col-name { font-size: 10px; color: var(--text-sub); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.pipeline-col-count {
  font-size: 11px; color: var(--text); font-weight: 600;
  background: var(--surface); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
}

.pipeline-col-head.offer .pipeline-col-name { color: var(--energy); }

.pipeline-col-head.offer .pipeline-col-count { color: var(--energy); border-color: var(--energy); background: var(--energy-glow); }

.candidate-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 6px;
  position: relative;
}

.candidate-card.high-fit { border-color: var(--ai-border); background: var(--ai-surface); }

[data-theme="dark"] .candidate-card.high-fit { background: rgba(240, 185, 100, 0.04); border-color: var(--ai-border); }

.candidate-head {
  display: grid; grid-template-columns: 22px 1fr; gap: 8px;
  align-items: center; margin-bottom: 6px;
}

.candidate-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--border-strong), var(--navy-soft));
  color: #fff; font-size: 9px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}

.candidate-name { font-size: 11px; font-weight: 500; color: var(--text); line-height: 1.2; }

.candidate-meta {
  display: flex; gap: 6px; align-items: center;
  font-size: 9px; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.candidate-source { color: var(--text-sub); }

.ai-score {
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  background: var(--ai-gradient); color: #fff;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 2px 4px var(--ai-glow);
}

[data-theme="dark"] .ai-score { color: #1a1408; }

.ai-score.low { background: var(--surface-elevated); color: var(--text-muted); box-shadow: none; border: 1px solid var(--border); }

[data-theme="dark"] .ai-score.low { color: var(--text-muted); }

.ai-score.high { background: var(--success); color: #fff; box-shadow: 0 2px 4px rgba(39, 80, 10, 0.2); }

[data-theme="dark"] .ai-score.high { color: var(--bg); }

.feature-list li.coming::before { background: var(--warning-bg); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23633806' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); background-size: 11px; }

[data-theme="dark"] .feature-list li.coming::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); }

.feature-list li .coming-pill {
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  background: var(--warning-bg); color: var(--warning);
  font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  margin-left: 6px;
  display: inline-block; vertical-align: 2px;
}

.job-post-mock { padding: 4px 0; }

.job-row {
  display: grid; grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.job-row:last-child { border-bottom: none; }

.job-channel {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--surface-elevated); border: 1px solid var(--border);
  font-size: 10px; font-weight: 600; color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  display: flex; align-items: center; justify-content: center;
}

.job-channel.linkedin { background: #0a66c2; color: #fff; border-color: #0a66c2; }

.job-channel.naukri { background: #4a3c8c; color: #fff; border-color: #4a3c8c; }

.job-channel.indeed { background: #003a9b; color: #fff; border-color: #003a9b; }

.job-channel.careers { background: var(--energy); color: #fff; border-color: var(--energy); }

.job-info strong { color: var(--text); font-weight: 500; display: block; }

.job-info span { color: var(--text-muted); font-size: 10px; margin-top: 1px; display: block; }

.job-status { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; background: var(--success-bg); color: var(--success); }

.job-status.pending { background: var(--warning-bg); color: var(--warning); }

.parser-mock {
  background: var(--surface-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-sub);
  position: relative;
}

.parser-mock-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-family: 'Inter', sans-serif; font-size: 12px;
  color: var(--text); font-weight: 500;
}

.parser-mock-head .ext { background: var(--surface); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; font-size: 10px; color: var(--text); font-family: 'JetBrains Mono', monospace; }

.parser-mock-line { padding: 3px 0; color: var(--text-muted); }

.parser-mock-line span { color: var(--text); }

.parsed-row {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 12px; padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.parsed-row:last-child { border-bottom: none; }

.parsed-label { color: var(--text-muted); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }

.parsed-value { color: var(--text); font-weight: 500; }

.parsed-value .confidence { font-size: 9px; padding: 1px 5px; border-radius: 3px; background: var(--success-bg); color: var(--success); margin-left: 6px; font-family: 'JetBrains Mono', monospace; }

.interview-mock { padding: 4px 0; }

.interview-row {
  display: grid; grid-template-columns: 40px 1fr auto;
  align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.interview-row:last-child { border-bottom: none; }

.interview-date {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--surface-elevated); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text);
}

.interview-date .day { font-size: 13px; font-weight: 600; line-height: 1; font-family: 'JetBrains Mono', monospace; }

.interview-date .mon { font-size: 8px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 1px; }

.interview-info strong { color: var(--text); font-weight: 500; display: block; }

.interview-info span { color: var(--text-muted); font-size: 10px; margin-top: 1px; display: block; }

.interview-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-sub); text-align: right; }

.interview-time strong { color: var(--text); display: block; font-weight: 500; font-size: 11px; }

.offer-mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  position: relative;
}

.offer-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }

.offer-head-left strong { font-size: 13px; color: var(--text); font-weight: 500; display: block; }

.offer-head-left span { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-top: 1px; display: block; }

.offer-status { font-size: 9px; padding: 3px 7px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; background: var(--success-bg); color: var(--success); }

.offer-field { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 6px 0; font-size: 11px; }

.offer-field-label { color: var(--text-muted); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }

.offer-field-value { color: var(--text); font-weight: 500; font-family: 'JetBrains Mono', monospace; }

.offer-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--border);
}

.offer-action {
  font-size: 11px; padding: 6px 10px; border-radius: 6px;
  text-align: center; font-weight: 500;
}

.offer-action.primary { background: var(--energy); color: #fff; }

.offer-action.outline { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }

.ai-bridge-content > p { font-size: 17px; line-height: 1.65; color: var(--ai-text-sub); margin-bottom: 20px; }

[data-theme="dark"] .ai-bridge-content > p { color: var(--text-sub); }

.ai-bridge-content > p strong { color: var(--ai-text); font-weight: 500; }

[data-theme="dark"] .ai-bridge-content > p strong { color: var(--text); }

.ai-honest-note {
  background: var(--surface); border: 1px solid var(--ai-border);
  border-radius: var(--radius-md); padding: 14px 16px;
  font-size: 13px; color: var(--ai-text-sub); line-height: 1.55;
  margin-bottom: 24px;
}

[data-theme="dark"] .ai-honest-note { background: var(--surface); color: var(--text-sub); }

.ai-honest-note strong { color: var(--ai-text); font-weight: 500; }

[data-theme="dark"] .ai-honest-note strong { color: var(--text); }

.match-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}

.match-head h6 { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 4px; }

.match-head p { font-size: 12px; color: var(--text-sub); margin: 0; }

.match-head-meta { text-align: right; font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.match-row {
  display: grid; grid-template-columns: 28px 1fr 80px auto;
  align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.match-row:last-child { border-bottom: none; }

.match-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--border-strong), var(--navy-soft));
  color: #fff; font-size: 10px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}

.match-info strong { color: var(--text); font-weight: 500; display: block; }

.match-info span { color: var(--text-muted); font-size: 10px; margin-top: 1px; display: block; }

.match-bar { height: 6px; background: var(--surface-elevated); border-radius: 3px; overflow: hidden; }

[data-theme="dark"] .match-bar { background: var(--bg); }

.match-bar-fill { height: 100%; border-radius: 3px; }

.match-bar-fill.high { background: var(--ai-gradient); }

.match-bar-fill.mid { background: var(--success); }

.match-bar-fill.low { background: var(--text-muted); }

.match-score-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  min-width: 32px; text-align: right;
}

.match-score-pct.high { color: var(--ai-text); }

[data-theme="dark"] .match-score-pct.high { color: var(--ai-text); }

.match-score-pct.mid { color: var(--success); }

.match-score-pct.low { color: var(--text-muted); }

@media (max-width: 1024px) {
  .rec-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .pipeline-mockup { transform: none; }
  .rec-hero h1 { font-size: 44px; }
  .pipeline-columns { grid-template-columns: repeat(3, 1fr); }
  .pipeline-col:nth-child(4), .pipeline-col:nth-child(5) { display: none; }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-block.reverse .feature-content { order: 1; }
  .feature-block.reverse .feature-visual { order: 2; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .ai-bridge-grid { grid-template-columns: 1fr; gap: 40px; }
  .integration-note-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .rec-hero { padding: 48px 0 56px; }
  .rec-hero h1 { font-size: 34px; }
  .rec-hero-sub { font-size: 17px; }
  .pipeline-columns { grid-template-columns: repeat(2, 1fr); }
  .pipeline-col:nth-child(3) { display: none; }
  h2 { font-size: 28px; }
  .feature-content h2 { font-size: 26px; }
  .proof-grid { grid-template-columns: 1fr; }
  .ai-bridge { padding: 56px 0; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
}

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --hero-bloom-teal: rgba(20, 85, 79, 0.04);
  --dot-grid: rgba(20, 48, 90, 0.05);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;
  --purple: #3B1E76;
  --purple-bg: #EDE6FB;
  --teal: #14554F;
  --teal-bg: #D5F2EC;

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06);
  --mosaic-shadow: 0 24px 48px rgba(20, 48, 90, 0.08), 0 8px 16px rgba(20, 48, 90, 0.06);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: none;

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --hero-bloom-teal: rgba(94, 234, 212, 0.10);
  --dot-grid: rgba(255, 255, 255, 0.025);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --purple: #a78bfa;
  --purple-bg: rgba(167, 139, 250, 0.15);
  --teal: #5eead4;
  --teal-bg: rgba(94, 234, 212, 0.12);

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --mosaic-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

.onb-hero { background: var(--hero-bg); padding: 80px 0 80px; overflow: hidden; position: relative; }

[data-theme="dark"] .onb-hero { padding: 96px 0 96px; }

.onb-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, var(--hero-bloom-teal) 0%, transparent 40%);
  pointer-events: none;
}

.onb-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.onb-hero .container { position: relative; z-index: 2; }

.onb-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }

.onb-hero h1 {
  font-size: 56px; line-height: 1.0; letter-spacing: -0.03em;
  margin-bottom: 20px; font-weight: 600; color: var(--navy);
}

[data-theme="dark"] .onb-hero h1 { color: var(--text); }

.onb-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .onb-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.onb-hero-sub { font-size: 19px; color: var(--text-sub); line-height: 1.55; margin-bottom: 28px; }

.plan-strip-pill.starter { background: var(--energy-glow); color: var(--energy); border-color: var(--energy); }

.onb-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.day1-mockup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--mosaic-shadow);
  transform: perspective(1800px) rotateY(-4deg) rotateX(2deg);
}

.day1-chrome { background: var(--surface-elevated); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; gap: 10px; }

.day1-chrome .dots { display: flex; gap: 6px; }

.day1-chrome .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }

.day1-chrome .url { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); text-align: center; }

.day1-body { padding: 24px 24px 20px; min-height: 480px; }

.day1-greeting {
  display: grid; grid-template-columns: 60px 1fr; gap: 16px;
  align-items: center; margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.day1-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--energy) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 4px 12px rgba(29, 114, 242, 0.18);
}

[data-theme="dark"] .day1-avatar { box-shadow: 0 4px 12px rgba(69, 150, 255, 0.25); }

.day1-greeting-text h6 { font-size: 18px; font-weight: 500; color: var(--text); margin-bottom: 2px; letter-spacing: -0.005em; }

.day1-greeting-text p { font-size: 12px; color: var(--text-sub); margin: 0; }

.day1-greeting-text p strong { color: var(--text); font-weight: 500; }

.day1-progress {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}

.day1-progress-label { font-size: 10px; color: var(--text-muted); letter-spacing: 0.04em; font-weight: 500; font-family: 'JetBrains Mono', monospace; }

.day1-progress-bar { flex: 1; height: 6px; background: var(--surface-elevated); border-radius: 3px; overflow: hidden; }

[data-theme="dark"] .day1-progress-bar { background: var(--bg); }

.day1-progress-bar-fill { height: 100%; background: var(--success); border-radius: 3px; width: 33%; }

.day1-progress-pct { font-size: 11px; color: var(--success); font-weight: 600; font-family: 'JetBrains Mono', monospace; }

.day1-section { margin-bottom: 16px; }

.day1-section:last-child { margin-bottom: 0; }

.day1-section-title { font-size: 10px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; }

.day1-task-row {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 12px;
  padding: 8px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}

.day1-task-row:last-child { border-bottom: none; }

.day1-task-check {
  width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}

.day1-task-check.done { background: var(--success); border-color: var(--success); }

[data-theme="dark"] .day1-task-check.done { color: var(--bg); }

.day1-task-check.done svg { width: 10px; height: 10px; }

.day1-task-check.active { border-color: var(--energy); position: relative; }

.day1-task-check.active::after { content: ''; position: absolute; inset: 2px; background: var(--energy); border-radius: 1px; opacity: 0.2; }

.day1-task-text { color: var(--text); font-size: 12px; font-weight: 500; }

.day1-task-text span { display: block; color: var(--text-muted); font-size: 10px; font-weight: 400; margin-top: 1px; }

.day1-task-text.done { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }

.day1-task-owner {
  font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--surface-elevated); color: var(--text-sub);
  font-family: 'JetBrains Mono', monospace;
}

.day1-task-owner.you { background: var(--energy-glow); color: var(--energy); }

.day1-task-owner.hr { background: var(--purple-bg); color: var(--purple); }

.day1-task-owner.it { background: var(--teal-bg); color: var(--teal); }

.day1-task-owner.mgr { background: var(--ai-surface); color: var(--ai-text); border: 1px solid var(--ai-border); }

.day1-buddy {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--ai-surface);
  border: 1px solid var(--ai-border);
  border-radius: 8px;
  display: grid; grid-template-columns: 32px 1fr;
  gap: 10px; align-items: center;
}

[data-theme="dark"] .day1-buddy { background: rgba(240, 185, 100, 0.06); }

.day1-buddy-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ai-gradient); color: #fff;
  font-size: 12px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}

[data-theme="dark"] .day1-buddy-avatar { color: #1a1408; }

.day1-buddy-text strong { font-size: 12px; color: var(--ai-text); font-weight: 500; display: block; }

[data-theme="dark"] .day1-buddy-text strong { color: var(--text); }

.day1-buddy-text span { font-size: 10px; color: var(--ai-text-sub); margin-top: 1px; display: block; }

[data-theme="dark"] .day1-buddy-text span { color: var(--text-sub); }

.timeline-strip { background: var(--bg); border-bottom: 1px solid var(--border); padding: 56px 0 32px; }

.timeline-strip-head { text-align: center; max-width: 720px; margin: 0 auto 32px; }

.timeline-strip-head p { color: var(--text-sub); font-size: 17px; margin-top: 12px; line-height: 1.55; }

.timeline {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  max-width: 960px; margin: 0 auto;
  padding: 0 20px;
}

.timeline::before {
  content: ''; position: absolute;
  top: 23px; left: 8%; right: 8%;
  height: 2px; background: var(--border);
  z-index: 0;
}

.timeline-node {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; position: relative; z-index: 1;
}

.timeline-node-dot {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); font-weight: 600;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  margin-bottom: 12px;
}

.timeline-node.active .timeline-node-dot { background: var(--energy); border-color: var(--energy); color: #fff; box-shadow: 0 0 0 4px var(--energy-glow); }

.timeline-node-label { font-size: 11px; font-weight: 500; color: var(--text); }

.timeline-node-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.02em; }

.feature-list li.coming::before { background: var(--warning-bg); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23633806' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); }

.docchecklist { padding: 4px 0; }

.docchecklist-row {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.docchecklist-row:last-child { border-bottom: none; }

.docchecklist-icon {
  width: 22px; height: 22px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  font-weight: 600; color: var(--text-sub);
  background: var(--surface-elevated); border: 1px solid var(--border);
}

.docchecklist-icon.done { background: var(--success); color: #fff; border-color: var(--success); }

[data-theme="dark"] .docchecklist-icon.done { color: var(--bg); }

.docchecklist-icon.done svg { width: 11px; height: 11px; }

.docchecklist-name strong { color: var(--text); font-weight: 500; font-size: 12px; display: block; }

.docchecklist-name span { color: var(--text-muted); font-size: 10px; font-weight: 400; margin-top: 1px; display: block; font-family: 'JetBrains Mono', monospace; }

.docchecklist-status { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.docchecklist-status.done { background: var(--success-bg); color: var(--success); }

.docchecklist-status.pending { background: var(--warning-bg); color: var(--warning); }

.docchecklist-status.reminded { background: var(--purple-bg); color: var(--purple); }

.journey-mock { padding: 4px 0; display: flex; flex-direction: column; gap: 8px; }

.journey-week {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.journey-week-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}

.journey-week-label { font-size: 11px; font-weight: 500; color: var(--text); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }

.journey-week-meta { font-size: 10px; color: var(--text-muted); }

.journey-tasks { display: flex; flex-direction: column; gap: 4px; }

.journey-task {
  display: grid; grid-template-columns: 16px 1fr auto;
  align-items: center; gap: 10px;
  padding: 3px 0;
  font-size: 11px;
}

.journey-task-marker {
  width: 12px; height: 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.journey-task-marker.done { background: var(--success); }

.journey-task-marker.done svg { width: 8px; height: 8px; color: #fff; }

[data-theme="dark"] .journey-task-marker.done svg { color: var(--bg); }

.journey-task-marker.active { background: var(--energy); box-shadow: 0 0 0 3px var(--energy-glow); }

.journey-task-marker.todo { background: var(--surface); border: 1px solid var(--border-strong); }

.journey-task-text { color: var(--text); font-weight: 500; }

.journey-task-text.done { color: var(--text-muted); }

.journey-task-owner { font-size: 9px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.personalization-callout {
  background: var(--ai-surface);
  border: 1px solid var(--ai-border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 14px;
  display: grid; grid-template-columns: 28px 1fr;
  gap: 12px; align-items: center;
}

[data-theme="dark"] .personalization-callout { background: rgba(240, 185, 100, 0.06); }

.personalization-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--ai-gradient); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 2px 8px var(--ai-glow); }

[data-theme="dark"] .personalization-icon { color: #1a1408; }

.personalization-icon svg { width: 12px; height: 12px; }

.personalization-text { font-size: 11px; color: var(--ai-text-sub); line-height: 1.5; }

[data-theme="dark"] .personalization-text { color: var(--text-sub); }

.personalization-text strong { color: var(--ai-text); font-weight: 500; }

[data-theme="dark"] .personalization-text strong { color: var(--text); }

.checkin-mock { padding: 4px 0; }

.checkin-section {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.checkin-section:last-child { border-bottom: none; padding-bottom: 0; }

.checkin-section-title { font-size: 11px; color: var(--text); font-weight: 500; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; }

.checkin-section-title span { color: var(--text-muted); font-size: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 400; }

.checkin-q-row {
  display: grid; grid-template-columns: 1fr 80px;
  gap: 12px; align-items: center;
  padding: 5px 0;
  font-size: 11px;
}

.checkin-q-text { color: var(--text-sub); line-height: 1.4; }

.checkin-rating { display: flex; gap: 2px; justify-content: flex-end; }

.checkin-rating-dot { width: 8px; height: 8px; border-radius: 50%; }

.checkin-rating-dot.filled { background: var(--energy); }

.checkin-rating-dot.empty { background: var(--surface-elevated); border: 1px solid var(--border); }

.risk-mock { padding: 4px 0; }

.risk-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
}

.risk-card-info strong { font-size: 12px; color: var(--text); font-weight: 500; display: block; }

.risk-card-info span { font-size: 10px; color: var(--text-muted); margin-top: 1px; display: block; }

.risk-score {
  font-family: 'JetBrains Mono', monospace; font-size: 14px;
  font-weight: 600; padding: 6px 12px; border-radius: 6px;
  min-width: 56px; text-align: center;
}

.risk-score.low { background: var(--success-bg); color: var(--success); }

.risk-score.high { background: var(--warning-bg); color: var(--warning); }

.risk-score-label { font-size: 9px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }

.risk-summary {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--success-bg);
  border-left: 3px solid var(--success);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text); line-height: 1.55;
}

.risk-summary strong { color: var(--success); font-weight: 500; }

[data-theme="dark"] .risk-summary { background: rgba(52, 211, 153, 0.08); }

[data-theme="dark"] .risk-summary strong { color: var(--success); }

@media (max-width: 1024px) {
  .onb-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .day1-mockup { transform: none; }
  .onb-hero h1 { font-size: 44px; }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-block.reverse .feature-content { order: 1; }
  .feature-block.reverse .feature-visual { order: 2; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .timeline { grid-template-columns: repeat(3, 1fr); gap: 20px 0; }
  .timeline::before { display: none; }
  .integration-note-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .onb-hero { padding: 48px 0 56px; }
  .onb-hero h1 { font-size: 34px; }
  .onb-hero-sub { font-size: 17px; }
  h2 { font-size: 28px; }
  .feature-content h2 { font-size: 26px; }
  .proof-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 16px; }
  .timeline-strip { padding: 40px 0 24px; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
}

:root {
  --bg: #ffffff; --bg-deep: #f0f2f7; --surface: #ffffff; --surface-elevated: #f8f9fc; --surface-hover: #f0f2f7; --border: #dde1ec; --border-strong: #c8cedd;
  --text: #1a1a2e; --text-sub: #555555; --text-muted: #999999;
  --navy: #1a3a6b; --navy-soft: #7a8aa3;
  --energy: #1d72f2; --energy-dark: #1560d6; --energy-glow: rgba(29, 114, 242, 0.18); --energy-glow-strong: rgba(29, 114, 242, 0.3);
  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%); --ai-glow: rgba(212, 160, 82, 0.15); --ai-glow-strong: rgba(212, 160, 82, 0.3); --ai-border: #f0d896; --ai-text: #6b4922; --ai-text-sub: #946422; --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);
  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%); --hero-bloom-blue: rgba(29, 114, 242, 0.06); --hero-bloom-gold: rgba(212, 160, 82, 0.05); --hero-bloom-purple: rgba(124, 93, 199, 0.04); --dot-grid: rgba(20, 48, 90, 0.05);
  --success: #27500A; --success-bg: #EAF3DE; --warning: #633806; --warning-bg: #FAEEDA; --purple: #3B1E76; --purple-bg: #EDE6FB; --teal: #14554F; --teal-bg: #D5F2EC; --coral: #B83232; --coral-bg: #FDEAEA;
  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06); --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06); --mosaic-shadow: 0 24px 48px rgba(20, 48, 90, 0.08), 0 8px 16px rgba(20, 48, 90, 0.06);
  --h1-accent-color: var(--energy); --h1-accent-gradient: none;
  --footer-bg: var(--surface-elevated); --final-cta-bg: var(--navy);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a; --bg-deep: #050811; --surface: #11151f; --surface-elevated: #161b29; --surface-hover: #1c2236; --border: #1f2638; --border-strong: #2b3349;
  --text: #e8eaf0; --text-sub: #9aa1b8; --text-muted: #5e667d;
  --navy: #4d7ec8; --navy-soft: #6680a8;
  --energy: #4596ff; --energy-dark: #2c7fe8; --energy-glow: rgba(69, 150, 255, 0.3); --energy-glow-strong: rgba(69, 150, 255, 0.5);
  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%); --ai-glow: rgba(240, 185, 100, 0.18); --ai-glow-strong: rgba(240, 185, 100, 0.35); --ai-border: #4a3a1f; --ai-text: #f0b964; --ai-text-sub: #c8a878; --ai-surface: rgba(240, 185, 100, 0.06);
  --hero-bg: var(--bg); --hero-bloom-blue: rgba(69, 150, 255, 0.18); --hero-bloom-gold: rgba(240, 185, 100, 0.12); --hero-bloom-purple: rgba(167, 139, 250, 0.10); --dot-grid: rgba(255, 255, 255, 0.025);
  --success: #34d399; --success-bg: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.12); --purple: #a78bfa; --purple-bg: rgba(167, 139, 250, 0.15); --teal: #5eead4; --teal-bg: rgba(94, 234, 212, 0.12); --coral: #f47474; --coral-bg: rgba(244, 116, 116, 0.12);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); --mosaic-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  --h1-accent-color: var(--energy); --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);
  --footer-bg: var(--bg); --final-cta-bg: var(--bg-deep);
}

.off-hero { background: var(--hero-bg); padding: 80px 0 80px; overflow: hidden; position: relative; }

[data-theme="dark"] .off-hero { padding: 96px 0 96px; }

.off-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%), radial-gradient(circle at 85% 75%, var(--hero-bloom-purple) 0%, transparent 40%); pointer-events: none; }

.off-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); }

.off-hero .container { position: relative; z-index: 2; }

.off-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }

.off-hero h1 { font-size: 56px; line-height: 1.0; letter-spacing: -0.03em; margin-bottom: 20px; font-weight: 600; color: var(--navy); }

[data-theme="dark"] .off-hero h1 { color: var(--text); }

.off-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .off-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.off-hero-sub { font-size: 19px; color: var(--text-sub); line-height: 1.55; margin-bottom: 28px; }

.plan-strip-pill.coming { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }

.off-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.exit-mockup { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--mosaic-shadow); transform: perspective(1800px) rotateY(-4deg) rotateX(2deg); }

.exit-chrome { background: var(--surface-elevated); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; gap: 10px; }

.exit-chrome .dots { display: flex; gap: 6px; }

.exit-chrome .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }

.exit-chrome .url { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); text-align: center; }

.exit-body { padding: 22px 24px 20px; min-height: 480px; }

.exit-header-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }

.exit-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--purple) 0%, #6443a8 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 500; }

.exit-name strong { font-size: 16px; color: var(--text); font-weight: 500; display: block; letter-spacing: -0.005em; }

.exit-name span { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-top: 2px; display: block; }

.exit-status { font-size: 10px; padding: 4px 10px; border-radius: 999px; background: var(--purple-bg); color: var(--purple); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.exit-timeline { padding: 12px 0; margin-bottom: 16px; }

.exit-timeline-label { font-size: 9px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; display: flex; justify-content: space-between; }

.exit-timeline-label span { color: var(--purple); font-weight: 600; }

.exit-timeline-bar { height: 6px; background: var(--surface-elevated); border-radius: 3px; overflow: hidden; position: relative; }

[data-theme="dark"] .exit-timeline-bar { background: var(--bg); }

.exit-timeline-fill { height: 100%; background: linear-gradient(90deg, var(--purple) 0%, var(--coral) 100%); border-radius: 3px; width: 67%; }

.exit-timeline-meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 6px; font-family: 'JetBrains Mono', monospace; }

.exit-timeline-meta strong { color: var(--text); font-weight: 500; }

.exit-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }

.exit-stat { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }

.exit-stat-label { font-size: 9px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 4px; font-family: 'JetBrains Mono', monospace; }

.exit-stat-value { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }

.exit-stat.ff .exit-stat-value { color: var(--success); }

.exit-stat-meta { font-size: 9px; color: var(--text-sub); margin-top: 2px; }

.exit-section { padding: 12px 0; border-top: 1px solid var(--border); }

.exit-section-title { font-size: 9px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; }

.exit-task { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 11px; }

.exit-task-check { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: #fff; }

.exit-task-check.done { background: var(--success); border-color: var(--success); }

[data-theme="dark"] .exit-task-check.done { color: var(--bg); }

.exit-task-check.done svg { width: 10px; height: 10px; }

.exit-task-check.active { border-color: var(--coral); position: relative; }

.exit-task-check.active::after { content: ''; position: absolute; inset: 2px; background: var(--coral); border-radius: 1px; opacity: 0.3; }

.exit-task-text { color: var(--text); font-weight: 500; font-size: 11px; }

.exit-task-text.done { color: var(--text-muted); }

.exit-task-owner { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-elevated); color: var(--text-sub); font-family: 'JetBrains Mono', monospace; }

.exit-task-owner.hr { background: var(--purple-bg); color: var(--purple); }

.exit-task-owner.mgr { background: var(--ai-surface); color: var(--ai-text); border: 1px solid var(--ai-border); }

.exit-task-owner.it { background: var(--teal-bg); color: var(--teal); }

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; max-width: 800px; margin: 0 auto; padding: 0 20px; }

.timeline::before { content: ''; position: absolute; top: 23px; left: 10%; right: 10%; height: 2px; background: var(--border); z-index: 0; }

.timeline-node-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--text-sub); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 12px; margin-bottom: 12px; }

.timeline-node.active .timeline-node-dot { background: var(--purple); border-color: var(--purple); color: #fff; box-shadow: 0 0 0 4px var(--purple-bg); }

.notice-mock { padding: 4px 0; }

.notice-card { padding: 14px 16px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; }

.notice-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }

.notice-card-title { font-size: 12px; font-weight: 500; color: var(--text); }

.notice-card-date { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); }

.notice-card-progress-bar { height: 4px; background: var(--surface); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }

.notice-card-progress-fill { height: 100%; background: var(--purple); border-radius: 2px; }

.notice-card-meta { font-size: 10px; color: var(--text-sub); font-family: 'JetBrains Mono', monospace; display: flex; justify-content: space-between; }

.handover-task { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 11px; }

.handover-task:last-child { border-bottom: none; }

.handover-task-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: #fff; }

.handover-task-check.done { background: var(--success); border-color: var(--success); }

[data-theme="dark"] .handover-task-check.done { color: var(--bg); }

.handover-task-check.done svg { width: 9px; height: 9px; }

.handover-task-name strong { font-size: 11px; color: var(--text); font-weight: 500; display: block; }

.handover-task-name span { font-size: 9px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-top: 1px; display: block; }

.handover-task-pct { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-sub); font-weight: 500; }

.handover-task-pct.complete { color: var(--success); }

.exit-form { padding: 4px 0; }

.exit-form-q { padding: 14px 0; border-bottom: 1px solid var(--border); }

.exit-form-q:last-of-type { border-bottom: none; padding-bottom: 4px; }

.exit-form-q-num { font-size: 9px; color: var(--text-muted); letter-spacing: 0.06em; font-weight: 500; margin-bottom: 6px; font-family: 'JetBrains Mono', monospace; }

.exit-form-q-text { font-size: 12px; color: var(--text); font-weight: 500; margin-bottom: 10px; line-height: 1.4; }

.exit-form-q-options { display: flex; gap: 6px; flex-wrap: wrap; }

.exit-form-q-opt { font-size: 10px; padding: 5px 10px; border-radius: 999px; background: var(--surface-elevated); border: 1px solid var(--border); color: var(--text-sub); font-weight: 500; }

.exit-form-q-opt.selected { background: var(--purple); color: #fff; border-color: var(--purple); }

.exit-form-q-text-input { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: 11px; color: var(--text-sub); line-height: 1.5; font-style: italic; }

.exit-form-anon { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; padding: 10px 12px; background: var(--purple-bg); border: 1px solid var(--purple); border-radius: var(--radius-md); margin-top: 12px; font-size: 11px; }

[data-theme="dark"] .exit-form-anon { background: rgba(167, 139, 250, 0.08); }

.exit-form-anon-toggle { width: 22px; height: 12px; background: var(--purple); border-radius: 999px; position: relative; }

.exit-form-anon-toggle::after { content: ''; position: absolute; width: 10px; height: 10px; background: #fff; border-radius: 50%; top: 1px; right: 1px; }

.exit-form-anon-text { color: var(--purple); font-weight: 500; line-height: 1.3; }

[data-theme="dark"] .exit-form-anon-text { color: var(--text); }

.exit-form-anon-text strong { display: block; }

.exit-form-anon-text span { font-size: 10px; color: var(--text-sub); display: block; margin-top: 1px; font-weight: 400; }

[data-theme="dark"] .exit-form-anon-text span { color: var(--text-muted); }

.ff-mock { padding: 4px 0; }

.ff-section { padding: 12px 0; border-bottom: 1px solid var(--border); }

.ff-section:last-of-type { border-bottom: none; }

.ff-section-title { font-size: 9px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; }

.ff-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 5px 0; font-size: 11px; }

.ff-row-label { color: var(--text-sub); }

.ff-row-label span { display: block; color: var(--text-muted); font-size: 9px; font-family: 'JetBrains Mono', monospace; margin-top: 1px; }

.ff-row-value { font-family: 'JetBrains Mono', monospace; color: var(--text); font-weight: 500; }

.ff-row-value.add { color: var(--success); }

.ff-row-value.deduct { color: var(--coral); }

.ff-net { margin-top: 12px; padding-top: 14px; border-top: 2px solid var(--border); display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; }

.ff-net-label { font-size: 13px; color: var(--text); font-weight: 500; }

.ff-net-amount { font-size: 22px; font-weight: 600; color: var(--success); font-family: 'JetBrains Mono', monospace; }

.asset-mock { padding: 4px 0; }

.asset-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 11px; }

.asset-row:last-child { border-bottom: none; }

.asset-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-sub); }

.asset-icon svg { width: 13px; height: 13px; }

.asset-name strong { font-size: 11px; color: var(--text); font-weight: 500; display: block; }

.asset-name span { font-size: 9px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-top: 1px; display: block; }

.asset-status { font-size: 9px; padding: 3px 8px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.asset-status.returned { background: var(--success-bg); color: var(--success); }

.asset-status.pending { background: var(--warning-bg); color: var(--warning); }

.asset-status.scheduled { background: var(--energy-glow); color: var(--energy); }

.alumni-mock { padding: 4px 0; }

.relieving-card { padding: 16px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 12px; display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; }

.relieving-icon { width: 34px; height: 34px; border-radius: 7px; background: var(--purple); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; }

.relieving-info strong { font-size: 12px; color: var(--text); font-weight: 500; display: block; }

.relieving-info span { font-size: 10px; color: var(--text-muted); margin-top: 1px; display: block; font-family: 'JetBrains Mono', monospace; }

.relieving-action { font-size: 10px; padding: 5px 12px; border-radius: 6px; background: var(--energy); color: #fff; font-weight: 500; letter-spacing: 0.02em; }

.alumni-card { padding: 14px 16px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: var(--radius-md); font-size: 12px; line-height: 1.5; color: var(--ai-text-sub); }

[data-theme="dark"] .alumni-card { background: rgba(240, 185, 100, 0.06); color: var(--text-sub); }

.alumni-card strong { color: var(--ai-text); font-weight: 500; }

[data-theme="dark"] .alumni-card strong { color: var(--text); }

.alumni-card-pill { font-size: 9px; padding: 2px 6px; border-radius: 4px; background: var(--warning-bg); color: var(--warning); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; margin-left: 6px; display: inline-block; vertical-align: 2px; }

.ai-bridge-content > p { font-size: 17px; line-height: 1.65; color: var(--ai-text-sub); margin-bottom: 24px; }

.ai-bridge-visual { background: rgba(255, 255, 255, 0.7); border: 1px solid var(--ai-border); border-radius: var(--radius-lg); padding: 24px; backdrop-filter: blur(8px); }

.signal-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 12px; }

.signal-row:last-child { border-bottom: none; }

.signal-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--ai-gradient); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 2px 8px var(--ai-glow); }

[data-theme="dark"] .signal-icon { color: #1a1408; }

.signal-icon svg { width: 12px; height: 12px; }

.signal-info strong { color: var(--text); font-weight: 500; display: block; }

.signal-info span { color: var(--text-muted); font-size: 10px; margin-top: 1px; display: block; }

.signal-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ai-text); text-align: right; font-weight: 500; }

.signal-meta.warn { color: var(--coral); }

@media (max-width: 1024px) {
  .off-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .exit-mockup { transform: none; }
  .off-hero h1 { font-size: 44px; }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-block.reverse .feature-content { order: 1; }
  .feature-block.reverse .feature-visual { order: 2; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .timeline::before { display: none; }
  .ai-bridge-grid { grid-template-columns: 1fr; gap: 40px; }
  .integration-note-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .off-hero { padding: 48px 0 56px; }
  .off-hero h1 { font-size: 34px; }
  .off-hero-sub { font-size: 17px; }
  h2 { font-size: 28px; }
  .feature-content h2 { font-size: 26px; }
  .proof-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 16px; }
  .ai-bridge { padding: 56px 0; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
}

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --hero-bloom-purple: rgba(124, 93, 199, 0.04);
  --dot-grid: rgba(20, 48, 90, 0.05);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;
  --purple: #3B1E76;
  --purple-bg: #EDE6FB;
  --teal: #14554F;
  --teal-bg: #D5F2EC;
  --map-water: #e8eef7;
  --map-land: #f6f8fc;

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06);
  --mosaic-shadow: 0 24px 48px rgba(20, 48, 90, 0.08), 0 8px 16px rgba(20, 48, 90, 0.06);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: none;

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --hero-bloom-purple: rgba(167, 139, 250, 0.10);
  --dot-grid: rgba(255, 255, 255, 0.025);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --purple: #a78bfa;
  --purple-bg: rgba(167, 139, 250, 0.12);
  --teal: #5eead4;
  --teal-bg: rgba(94, 234, 212, 0.12);
  --map-water: #0d1320;
  --map-land: #161b29;

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --mosaic-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

.att-hero { background: var(--hero-bg); padding: 80px 0 80px; overflow: hidden; position: relative; }

[data-theme="dark"] .att-hero { padding: 96px 0 96px; }

.att-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, var(--hero-bloom-purple) 0%, transparent 40%);
  pointer-events: none;
}

.att-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.att-hero .container { position: relative; z-index: 2; }

.att-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }

.att-hero h1 {
  font-size: 56px; line-height: 1.0; letter-spacing: -0.03em;
  margin-bottom: 20px; font-weight: 600; color: var(--navy);
}

[data-theme="dark"] .att-hero h1 { color: var(--text); }

.att-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .att-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.att-hero-sub { font-size: 19px; color: var(--text-sub); line-height: 1.55; margin-bottom: 28px; }

.att-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.map-mockup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--mosaic-shadow);
  transform: perspective(1800px) rotateY(-4deg) rotateX(2deg);
}

.map-chrome { background: var(--surface-elevated); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; gap: 10px; }

.map-chrome .dots { display: flex; gap: 6px; }

.map-chrome .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }

.map-chrome .url { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); text-align: center; }

.map-body { padding: 0; min-height: 480px; display: grid; grid-template-columns: 1fr 240px; }

.map-canvas {
  background: var(--map-water);
  position: relative; overflow: hidden;
  min-height: 480px;
}

.map-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: 2;
}

.map-pin-dot {
  width: 14px; height: 14px;
  background: var(--energy);
  border-radius: 50%;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 2px var(--energy), 0 4px 12px var(--energy-glow-strong);
  position: relative;
}

.map-pin-dot::before {
  content: ''; position: absolute;
  inset: -8px; border-radius: 50%;
  border: 2px solid var(--energy-glow);
  animation: pulseRing 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseRing {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.map-pin-dot.geofence-flag {
  background: var(--warning);
  box-shadow: 0 0 0 2px var(--warning), 0 4px 12px rgba(99, 56, 6, 0.3);
}

.map-pin-dot.geofence-flag::before { border-color: var(--warning-bg); }

[data-theme="dark"] .map-pin-dot.geofence-flag { box-shadow: 0 0 0 2px var(--warning), 0 4px 12px rgba(251, 191, 36, 0.3); }

.map-pin-dot.remote {
  background: var(--purple);
  box-shadow: 0 0 0 2px var(--purple), 0 4px 8px rgba(59, 30, 118, 0.2);
  width: 10px; height: 10px;
}

.map-pin-dot.remote::before { display: none; }

[data-theme="dark"] .map-pin-dot.remote { box-shadow: 0 0 0 2px var(--purple), 0 4px 8px rgba(167, 139, 250, 0.3); }

.map-pin-label {
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 500;
  color: var(--text); white-space: nowrap;
  box-shadow: 0 2px 6px rgba(20, 48, 90, 0.08);
  font-family: 'JetBrains Mono', monospace;
}

.map-sidebar {
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 20px 18px;
  display: flex; flex-direction: column;
}

.map-sidebar-head { padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }

.map-sidebar-head h6 { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 2px; }

.map-sidebar-head .meta { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.map-stat {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.map-stat:last-child { border-bottom: none; }

.map-stat-label { color: var(--text-sub); }

.map-stat-value { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); font-weight: 500; }

.map-stat-value.positive { color: var(--success); }

.map-stat-value.warn { color: var(--warning); }

.map-legend { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border); }

.map-legend-title { font-size: 9px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 8px; }

.map-legend-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; color: var(--text-sub); }

.map-legend-row .swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.map-legend-row .swatch.energy { background: var(--energy); }

.map-legend-row .swatch.warning { background: var(--warning); }

.map-legend-row .swatch.purple { background: var(--purple); }

.checkin-surfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }

.checkin-surface {
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px;
  text-align: center;
  position: relative;
}

.checkin-surface.coming { border-style: dashed; opacity: 0.85; }

.checkin-surface-icon {
  width: 32px; height: 32px; margin: 0 auto 8px;
  border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--energy);
}

.checkin-surface.coming .checkin-surface-icon { color: var(--text-muted); }

.checkin-surface-icon svg { width: 16px; height: 16px; }

.checkin-surface-label { font-size: 11px; font-weight: 500; color: var(--text); margin-bottom: 2px; }

.checkin-surface-meta { font-size: 9px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.checkin-surface-meta.coming-text { color: var(--warning); }

.checkin-log {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.checkin-log-row {
  display: grid; grid-template-columns: 24px 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.checkin-log-row:last-child { border-bottom: none; }

.checkin-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}

.checkin-icon.web { background: var(--energy); }

.checkin-icon.mobile { background: var(--success); }

.checkin-icon svg { width: 11px; height: 11px; }

.checkin-name { color: var(--text); font-weight: 500; font-size: 11px; }

.checkin-name span { display: block; color: var(--text-muted); font-size: 10px; font-weight: 400; margin-top: 1px; }

.checkin-loc { font-family: 'JetBrains Mono', monospace; color: var(--text-sub); font-size: 10px; }

.checkin-time { font-family: 'JetBrains Mono', monospace; color: var(--text); font-size: 11px; font-weight: 500; }

.geofence-visual {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 14px;
  position: relative;
  min-height: 200px;
}

.geofence-svg {
  display: block; width: 100%; height: 180px;
}

.geofence-row {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.geofence-row:last-child { border-bottom: none; }

.geofence-row-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }

.geofence-row-icon.ok { background: var(--success); }

.geofence-row-icon.flag { background: var(--warning); }

.geofence-row-icon svg { width: 11px; height: 11px; }

.geofence-row-info strong { color: var(--text); font-weight: 500; display: block; font-size: 11px; }

.geofence-row-info span { color: var(--text-muted); font-size: 10px; margin-top: 1px; display: block; font-family: 'JetBrains Mono', monospace; }

.geofence-row-status { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.geofence-row-status.ok { background: var(--success-bg); color: var(--success); }

.geofence-row-status.flag { background: var(--warning-bg); color: var(--warning); }

.shift-mock { padding: 4px 0; }

.shift-row {
  display: grid; grid-template-columns: 80px repeat(7, 1fr);
  gap: 4px;
  padding: 6px 0;
  font-size: 10px;
  align-items: center;
}

.shift-row.head { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 4px; }

.shift-row.head .shift-day { color: var(--text-muted); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; font-family: 'JetBrains Mono', monospace; text-align: center; }

.shift-emp { color: var(--text); font-weight: 500; font-size: 11px; padding-right: 8px; }

.shift-cell {
  background: var(--surface-elevated);
  border-radius: 4px;
  padding: 6px 0;
  text-align: center;
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

.shift-cell.morning { background: rgba(29, 114, 242, 0.12); color: var(--energy); }

[data-theme="dark"] .shift-cell.morning { background: rgba(69, 150, 255, 0.15); color: var(--energy); }

.shift-cell.evening { background: rgba(124, 93, 199, 0.12); color: var(--purple); }

[data-theme="dark"] .shift-cell.evening { background: rgba(167, 139, 250, 0.15); color: var(--purple); }

.shift-cell.night { background: var(--surface-elevated); color: var(--text-sub); }

.shift-cell.off { color: var(--text-muted); }

.balance-mock { padding: 4px 0; }

.balance-card { padding: 12px 0; border-bottom: 1px solid var(--border); }

.balance-card:last-child { border-bottom: none; }

.balance-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }

.balance-card-name { font-size: 12px; font-weight: 500; color: var(--text); }

.balance-card-numbers { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text); }

.balance-card-numbers .used { color: var(--text-muted); }

.balance-card-bar { height: 6px; background: var(--surface-elevated); border-radius: 3px; overflow: hidden; }

[data-theme="dark"] .balance-card-bar { background: var(--bg); }

.balance-card-bar-fill { height: 100%; border-radius: 3px; }

.balance-card-bar-fill.pl { background: var(--energy); }

.balance-card-bar-fill.cl { background: var(--success); }

.balance-card-bar-fill.sl { background: var(--purple); }

.balance-card-bar-fill.compoff { background: var(--ai-gradient); }

.pattern-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.pattern-row:last-child { border-bottom: none; }

.pattern-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--ai-gradient); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 2px 8px var(--ai-glow); }

[data-theme="dark"] .pattern-icon { color: #1a1408; }

.pattern-icon svg { width: 12px; height: 12px; }

.pattern-info strong { color: var(--text); font-weight: 500; display: block; }

.pattern-info span { color: var(--text-muted); font-size: 10px; margin-top: 1px; display: block; }

.pattern-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ai-text); text-align: right; }

@media (max-width: 1024px) {
  .att-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .map-mockup { transform: none; }
  .att-hero h1 { font-size: 44px; }
  .map-body { grid-template-columns: 1fr; }
  .map-sidebar { border-left: none; border-top: 1px solid var(--border); }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-block.reverse .feature-content { order: 1; }
  .feature-block.reverse .feature-visual { order: 2; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .ai-bridge-grid { grid-template-columns: 1fr; gap: 40px; }
  .integration-note-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .att-hero { padding: 48px 0 56px; }
  .att-hero h1 { font-size: 34px; }
  .att-hero-sub { font-size: 17px; }
  h2 { font-size: 28px; }
  .feature-content h2 { font-size: 26px; }
  .proof-grid { grid-template-columns: 1fr; }
  .checkin-surfaces { grid-template-columns: 1fr; }
  .shift-row { grid-template-columns: 60px repeat(7, 1fr); font-size: 8px; gap: 2px; }
  .shift-cell { padding: 4px 0; }
  .ai-bridge { padding: 56px 0; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
}

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --hero-bloom-coral: rgba(220, 78, 78, 0.04);
  --dot-grid: rgba(20, 48, 90, 0.05);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;
  --purple: #3B1E76;
  --purple-bg: #EDE6FB;
  --teal: #14554F;
  --teal-bg: #D5F2EC;
  --coral: #B83232;
  --coral-bg: #FDEAEA;
  --leave-pl: var(--energy);
  --leave-pl-bg: #DBE9FB;
  --leave-cl: var(--success);
  --leave-cl-bg: var(--success-bg);
  --leave-sl: var(--purple);
  --leave-sl-bg: var(--purple-bg);
  --leave-holiday: var(--ai-text);
  --leave-holiday-bg: #fef6e3;
  --leave-wfh: var(--teal);
  --leave-wfh-bg: var(--teal-bg);

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06);
  --mosaic-shadow: 0 24px 48px rgba(20, 48, 90, 0.08), 0 8px 16px rgba(20, 48, 90, 0.06);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: none;

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --hero-bloom-coral: rgba(244, 116, 116, 0.10);
  --dot-grid: rgba(255, 255, 255, 0.025);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --purple: #a78bfa;
  --purple-bg: rgba(167, 139, 250, 0.15);
  --teal: #5eead4;
  --teal-bg: rgba(94, 234, 212, 0.12);
  --coral: #f47474;
  --coral-bg: rgba(244, 116, 116, 0.12);
  --leave-pl: var(--energy);
  --leave-pl-bg: rgba(69, 150, 255, 0.18);
  --leave-cl: var(--success);
  --leave-cl-bg: rgba(52, 211, 153, 0.15);
  --leave-sl: var(--purple);
  --leave-sl-bg: rgba(167, 139, 250, 0.18);
  --leave-holiday: var(--ai-text);
  --leave-holiday-bg: rgba(240, 185, 100, 0.15);
  --leave-wfh: var(--teal);
  --leave-wfh-bg: rgba(94, 234, 212, 0.12);

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --mosaic-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

.leave-hero { background: var(--hero-bg); padding: 80px 0 80px; overflow: hidden; position: relative; }

[data-theme="dark"] .leave-hero { padding: 96px 0 96px; }

.leave-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, var(--hero-bloom-coral) 0%, transparent 40%);
  pointer-events: none;
}

.leave-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.leave-hero .container { position: relative; z-index: 2; }

.leave-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }

.leave-hero h1 {
  font-size: 56px; line-height: 1.0; letter-spacing: -0.03em;
  margin-bottom: 20px; font-weight: 600; color: var(--navy);
}

[data-theme="dark"] .leave-hero h1 { color: var(--text); }

.leave-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .leave-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.leave-hero-sub { font-size: 19px; color: var(--text-sub); line-height: 1.55; margin-bottom: 28px; }

.leave-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.calendar-body { padding: 20px 18px; min-height: 480px; }

.calendar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }

.calendar-head h5 { font-size: 14px; font-weight: 500; color: var(--text); }

.calendar-head .meta { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.calendar-legend { display: flex; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--border); font-size: 10px; }

.calendar-legend-item { display: flex; align-items: center; gap: 6px; color: var(--text-sub); }

.calendar-legend-swatch { width: 10px; height: 10px; border-radius: 3px; }

.calendar-legend-swatch.pl { background: var(--leave-pl); }

.calendar-legend-swatch.cl { background: var(--leave-cl); }

.calendar-legend-swatch.sl { background: var(--leave-sl); }

.calendar-legend-swatch.holiday { background: var(--leave-holiday); }

.calendar-legend-swatch.wfh { background: var(--leave-wfh); }

.calendar-grid {
  display: grid; grid-template-columns: 78px repeat(15, 1fr);
  gap: 2px; font-size: 10px;
}

.calendar-cell {
  background: var(--surface-elevated);
  border-radius: 3px;
  padding: 4px 0;
  text-align: center;
  min-height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  position: relative;
}

.calendar-cell.head { background: transparent; color: var(--text-muted); font-weight: 500; letter-spacing: 0.04em; min-height: 16px; padding: 2px 0; }

.calendar-cell.head.week-sep { font-size: 8px; }

.calendar-cell.weekend { background: transparent; color: var(--text-muted); opacity: 0.5; }

.calendar-cell.holiday { background: var(--leave-holiday-bg); color: var(--leave-holiday); font-weight: 600; }

.calendar-cell.pl { background: var(--leave-pl-bg); color: var(--leave-pl); font-weight: 600; }

.calendar-cell.cl { background: var(--leave-cl-bg); color: var(--leave-cl); font-weight: 600; }

.calendar-cell.sl { background: var(--leave-sl-bg); color: var(--leave-sl); font-weight: 600; }

.calendar-cell.wfh { background: var(--leave-wfh-bg); color: var(--leave-wfh); font-weight: 600; }

.calendar-emp { color: var(--text); font-weight: 500; font-size: 11px; padding-left: 4px; padding-right: 8px; align-self: center; font-family: 'Inter', sans-serif; text-align: left; justify-content: flex-start; background: transparent; }

.calendar-emp span { display: block; color: var(--text-muted); font-size: 9px; font-weight: 400; margin-top: 1px; }

.calendar-demand-alert {
  margin-top: 14px; padding: 12px 14px;
  background: var(--coral-bg);
  border: 1px solid var(--coral);
  border-radius: var(--radius-md);
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px;
  align-items: center;
  font-size: 12px;
}

.calendar-demand-alert-icon {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--coral); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

[data-theme="dark"] .calendar-demand-alert-icon { color: var(--bg); }

.calendar-demand-alert-icon svg { width: 12px; height: 12px; }

.calendar-demand-alert-text { color: var(--coral); font-weight: 500; }

.calendar-demand-alert-text strong { color: var(--coral); }

[data-theme="dark"] .calendar-demand-alert-text { color: var(--text); }

[data-theme="dark"] .calendar-demand-alert-text strong { color: var(--coral); }

.calendar-demand-alert-text span { display: block; color: var(--text-muted); font-size: 10px; margin-top: 1px; font-weight: 400; }

.calendar-demand-alert-meta { font-size: 9px; padding: 3px 8px; border-radius: 4px; background: var(--coral); color: #fff; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

[data-theme="dark"] .calendar-demand-alert-meta { color: var(--bg); }

.policy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.policy-card-mock {
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px;
}

.policy-card-mock-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.policy-card-mock-name { color: var(--text); font-weight: 500; }

.policy-card-mock-tag { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.policy-card-mock-tag.perm { background: var(--success-bg); color: var(--success); }

.policy-card-mock-tag.intern { background: var(--purple-bg); color: var(--purple); }

.policy-card-mock-tag.contract { background: var(--energy-glow); color: var(--energy); }

.policy-card-mock-tag.partime { background: var(--teal-bg); color: var(--teal); }

.policy-card-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  padding: 4px 0;
  font-size: 10px; color: var(--text-sub);
  font-family: 'JetBrains Mono', monospace;
}

.policy-card-row span { color: var(--text); font-weight: 500; }

.holiday-map-mock { padding: 4px 0; }

.holiday-map-svg-wrap {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
}

.holiday-map-svg { display: block; width: 100%; height: 200px; }

.holiday-states { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.holiday-state {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 10px;
  align-items: center; padding: 8px 10px;
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: 8px; font-size: 11px;
}

.holiday-state-flag {
  width: 22px; height: 22px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  color: #fff;
}

.holiday-state-flag.ka { background: #B83232; }

.holiday-state-flag.mh { background: #F39E2A; }

.holiday-state-flag.tn { background: #14554F; }

.holiday-state-flag.kl { background: #27500A; }

.holiday-state-flag.wb { background: #3B1E76; }

.holiday-state-flag.gj { background: #C08545; }

.holiday-state-name { color: var(--text); font-weight: 500; font-size: 11px; }

.holiday-state-name span { display: block; color: var(--text-muted); font-size: 9px; font-weight: 400; margin-top: 1px; font-family: 'JetBrains Mono', monospace; }

.holiday-state-date { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-sub); white-space: nowrap; }

.sandwich-mock { padding: 6px 0; }

.sandwich-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 14px 0;
}

.sandwich-day {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 4px;
  text-align: center;
}

.sandwich-day-name { font-size: 9px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 4px; font-family: 'JetBrains Mono', monospace; }

.sandwich-day-num { font-size: 14px; font-weight: 600; color: var(--text); font-family: 'JetBrains Mono', monospace; }

.sandwich-day.leave { background: var(--leave-pl-bg); border-color: var(--leave-pl); }

.sandwich-day.leave .sandwich-day-num { color: var(--leave-pl); }

.sandwich-day.sandwich { background: var(--coral-bg); border-color: var(--coral); border-style: dashed; }

.sandwich-day.sandwich .sandwich-day-num { color: var(--coral); }

.sandwich-day.sandwich .sandwich-day-name { color: var(--coral); }

.sandwich-day-status { font-size: 8px; margin-top: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.sandwich-day.leave .sandwich-day-status { color: var(--leave-pl); }

.sandwich-day.sandwich .sandwich-day-status { color: var(--coral); }

.sandwich-note {
  background: var(--coral-bg);
  border-left: 3px solid var(--coral);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.55;
}

[data-theme="dark"] .sandwich-note { background: rgba(244, 116, 116, 0.08); }

.sandwich-note strong { color: var(--coral); font-weight: 500; }

[data-theme="dark"] .sandwich-note strong { color: var(--coral); }

.request-mock { padding: 4px 0; }

.request-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 10px;
}

.request-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}

.request-card-head-left strong { font-size: 13px; color: var(--text); font-weight: 500; display: block; }

.request-card-head-left span { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: block; font-family: 'JetBrains Mono', monospace; }

.request-status { font-size: 9px; padding: 3px 7px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.request-status.pending { background: var(--warning-bg); color: var(--warning); }

.request-status.approved { background: var(--success-bg); color: var(--success); }

.request-row { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 4px 0; font-size: 11px; }

.request-row-label { color: var(--text-muted); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }

.request-row-value { color: var(--text); font-weight: 500; font-family: 'JetBrains Mono', monospace; }

.request-row-value strong { font-weight: 500; color: var(--leave-pl); font-family: 'Inter', sans-serif; }

.request-context {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 10px; color: var(--text-sub);
  display: flex; align-items: center; gap: 8px;
}

.request-context svg { width: 12px; height: 12px; color: var(--text-muted); }

.request-context strong { color: var(--text); font-weight: 500; }

.forecast-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.forecast-row:last-child { border-bottom: none; }

.forecast-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--ai-gradient); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 2px 8px var(--ai-glow); }

[data-theme="dark"] .forecast-icon { color: #1a1408; }

.forecast-icon svg { width: 12px; height: 12px; }

.forecast-info strong { color: var(--text); font-weight: 500; display: block; }

.forecast-info span { color: var(--text-muted); font-size: 10px; margin-top: 1px; display: block; }

.forecast-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ai-text); text-align: right; }

.forecast-meta.warn { color: var(--coral); }

.encashment-mock { padding: 4px 0; }

.encash-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  align-items: center;
}

.encash-row:last-child { border-bottom: none; padding-bottom: 0; }

.encash-row.total { padding-top: 12px; margin-top: 4px; border-top: 2px solid var(--border); border-bottom: none; }

.encash-label { color: var(--text); font-weight: 500; }

.encash-label span { display: block; color: var(--text-muted); font-size: 10px; font-weight: 400; margin-top: 1px; }

.encash-days { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-sub); }

.encash-amount { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); font-weight: 500; min-width: 70px; text-align: right; }

.encash-row.total .encash-amount { color: var(--success); font-size: 14px; font-weight: 600; }

@media (max-width: 1024px) {
  .leave-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .calendar-mockup { transform: none; }
  .leave-hero h1 { font-size: 44px; }
  .calendar-grid { font-size: 8px; }
  .calendar-emp { font-size: 10px; }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-block.reverse .feature-content { order: 1; }
  .feature-block.reverse .feature-visual { order: 2; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .policy-grid { grid-template-columns: 1fr; }
  .holiday-states { grid-template-columns: 1fr; }
  .ai-bridge-grid { grid-template-columns: 1fr; gap: 40px; }
  .integration-note-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .leave-hero { padding: 48px 0 56px; }
  .leave-hero h1 { font-size: 34px; }
  .leave-hero-sub { font-size: 17px; }
  .calendar-grid { grid-template-columns: 60px repeat(10, 1fr); font-size: 7px; }
  .calendar-cell:nth-child(11n+1) ~ .calendar-cell { display: none; }
  .calendar-emp { font-size: 9px; }
  h2 { font-size: 28px; }
  .feature-content h2 { font-size: 26px; }
  .proof-grid { grid-template-columns: 1fr; }
  .sandwich-week { grid-template-columns: repeat(7, 1fr); }
  .sandwich-day { padding: 6px 2px; }
  .sandwich-day-num { font-size: 12px; }
  .ai-bridge { padding: 56px 0; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
}

:root {
  --bg: #ffffff; --bg-deep: #f0f2f7; --surface: #ffffff; --surface-elevated: #f8f9fc; --surface-hover: #f0f2f7; --border: #dde1ec; --border-strong: #c8cedd;
  --text: #1a1a2e; --text-sub: #555555; --text-muted: #999999;
  --navy: #1a3a6b; --navy-soft: #7a8aa3;
  --energy: #1d72f2; --energy-dark: #1560d6; --energy-glow: rgba(29, 114, 242, 0.18); --energy-glow-strong: rgba(29, 114, 242, 0.3);
  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%); --ai-glow: rgba(212, 160, 82, 0.15); --ai-glow-strong: rgba(212, 160, 82, 0.3); --ai-border: #f0d896; --ai-text: #6b4922; --ai-text-sub: #946422; --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);
  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%); --hero-bloom-blue: rgba(29, 114, 242, 0.06); --hero-bloom-gold: rgba(212, 160, 82, 0.05); --dot-grid: rgba(20, 48, 90, 0.05);
  --success: #27500A; --success-bg: #EAF3DE; --warning: #633806; --warning-bg: #FAEEDA; --purple: #3B1E76; --purple-bg: #EDE6FB; --teal: #14554F; --teal-bg: #D5F2EC;
  --phone-bg: #fafbfd; --phone-shadow: 0 32px 64px rgba(20, 48, 90, 0.12), 0 16px 32px rgba(20, 48, 90, 0.08);
  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06); --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06);
  --h1-accent-color: var(--energy); --h1-accent-gradient: none;
  --footer-bg: var(--surface-elevated); --final-cta-bg: var(--navy);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a; --bg-deep: #050811; --surface: #11151f; --surface-elevated: #161b29; --surface-hover: #1c2236; --border: #1f2638; --border-strong: #2b3349;
  --text: #e8eaf0; --text-sub: #9aa1b8; --text-muted: #5e667d;
  --navy: #4d7ec8; --navy-soft: #6680a8;
  --energy: #4596ff; --energy-dark: #2c7fe8; --energy-glow: rgba(69, 150, 255, 0.3); --energy-glow-strong: rgba(69, 150, 255, 0.5);
  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%); --ai-glow: rgba(240, 185, 100, 0.18); --ai-glow-strong: rgba(240, 185, 100, 0.35); --ai-border: #4a3a1f; --ai-text: #f0b964; --ai-text-sub: #c8a878; --ai-surface: rgba(240, 185, 100, 0.06);
  --hero-bg: var(--bg); --hero-bloom-blue: rgba(69, 150, 255, 0.18); --hero-bloom-gold: rgba(240, 185, 100, 0.12); --dot-grid: rgba(255, 255, 255, 0.025);
  --success: #34d399; --success-bg: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.12); --purple: #a78bfa; --purple-bg: rgba(167, 139, 250, 0.15); --teal: #5eead4; --teal-bg: rgba(94, 234, 212, 0.12);
  --phone-bg: #161b29; --phone-shadow: 0 32px 64px rgba(0, 0, 0, 0.5), 0 16px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --h1-accent-color: var(--energy); --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);
  --footer-bg: var(--bg); --final-cta-bg: var(--bg-deep);
}

.ess-hero { background: var(--hero-bg); padding: 80px 0 80px; overflow: hidden; position: relative; }

[data-theme="dark"] .ess-hero { padding: 96px 0 96px; }

.ess-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%), radial-gradient(circle at 85% 75%, var(--hero-bloom-gold) 0%, transparent 40%); pointer-events: none; }

.ess-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); }

.ess-hero .container { position: relative; z-index: 2; }

.ess-hero-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 80px; align-items: center; }

.ess-hero h1 { font-size: 56px; line-height: 1.0; letter-spacing: -0.03em; margin-bottom: 20px; font-weight: 600; color: var(--navy); }

[data-theme="dark"] .ess-hero h1 { color: var(--text); }

.ess-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .ess-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.ess-hero-sub { font-size: 19px; color: var(--text-sub); line-height: 1.55; margin-bottom: 28px; }

.ess-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.phone-wrap { display: flex; justify-content: center; position: relative; }

.phone { width: 320px; background: #1a1a2e; border-radius: 44px; padding: 14px; box-shadow: var(--phone-shadow); position: relative; }

[data-theme="dark"] .phone { background: #050811; }

.phone-screen { background: var(--phone-bg); border-radius: 32px; overflow: hidden; height: 600px; display: flex; flex-direction: column; position: relative; }

.phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 90px; height: 22px; background: #1a1a2e; border-radius: 14px; z-index: 10; }

[data-theme="dark"] .phone-notch { background: #050811; }

.phone-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px 6px; font-size: 11px; font-weight: 600; color: var(--text); font-family: 'JetBrains Mono', monospace; }

.phone-status-icons { display: flex; gap: 4px; align-items: center; }

.phone-status-icons svg { width: 12px; height: 10px; color: var(--text); }

.phone-content { flex: 1; padding: 18px 16px 12px; overflow: hidden; }

.ess-greeting { margin-bottom: 16px; }

.ess-greeting-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; }

.ess-greeting-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--navy) 0%, var(--energy) 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 500; font-family: 'JetBrains Mono', monospace; }

.ess-greeting-text { font-size: 11px; color: var(--text-muted); }

.ess-greeting-text strong { display: block; font-size: 15px; color: var(--text); font-weight: 600; }

.ess-greeting-bell { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; position: relative; }

.ess-greeting-bell svg { width: 13px; height: 13px; color: var(--text-sub); }

.ess-greeting-bell::after { content: ''; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; background: var(--energy); border-radius: 50%; border: 1.5px solid var(--phone-bg); }

.ess-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }

.ess-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px; }

.ess-stat-card.primary { background: linear-gradient(135deg, var(--navy) 0%, var(--energy) 100%); border: none; color: #fff; }

.ess-stat-label { font-size: 9px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-family: 'JetBrains Mono', monospace; }

.ess-stat-card.primary .ess-stat-label { color: rgba(255, 255, 255, 0.75); }

.ess-stat-value { font-size: 18px; font-weight: 600; color: var(--text); font-family: 'JetBrains Mono', monospace; letter-spacing: -0.01em; }

.ess-stat-card.primary .ess-stat-value { color: #fff; }

.ess-stat-meta { font-size: 9px; color: var(--text-sub); margin-top: 2px; }

.ess-stat-card.primary .ess-stat-meta { color: rgba(255, 255, 255, 0.7); }

.ess-checkin { background: var(--success-bg); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--success); }

[data-theme="dark"] .ess-checkin { background: rgba(52, 211, 153, 0.08); }

.ess-checkin-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; }

[data-theme="dark"] .ess-checkin-icon { color: var(--bg); }

.ess-checkin-icon svg { width: 11px; height: 11px; }

.ess-checkin-text { font-size: 11px; color: var(--success); font-weight: 500; line-height: 1.2; }

.ess-checkin-text strong { font-size: 12px; font-weight: 600; display: block; color: var(--success); }

.ess-checkin-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--success); font-weight: 500; }

.ess-section-title { font-size: 9px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; }

.ess-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }

.ess-action { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }

.ess-action-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--surface-elevated); display: flex; align-items: center; justify-content: center; color: var(--energy); }

.ess-action-icon svg { width: 13px; height: 13px; }

.ess-action-label { font-size: 9px; color: var(--text); font-weight: 500; line-height: 1.2; }

.ess-task { background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; margin-bottom: 8px; }

[data-theme="dark"] .ess-task { background: rgba(240, 185, 100, 0.06); }

.ess-task-icon { width: 22px; height: 22px; border-radius: 7px; background: var(--ai-gradient); color: #fff; display: flex; align-items: center; justify-content: center; }

[data-theme="dark"] .ess-task-icon { color: #1a1408; }

.ess-task-icon svg { width: 11px; height: 11px; }

.ess-task-text strong { font-size: 11px; color: var(--ai-text); font-weight: 600; display: block; }

[data-theme="dark"] .ess-task-text strong { color: var(--text); }

.ess-task-text span { font-size: 9px; color: var(--ai-text-sub); margin-top: 1px; display: block; }

[data-theme="dark"] .ess-task-text span { color: var(--text-sub); }

.ess-task-arrow svg { width: 12px; height: 12px; color: var(--ai-text); }

.ess-bottom-nav { background: var(--surface); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 8px 18px; gap: 4px; }

.ess-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; }

.ess-nav-item svg { width: 18px; height: 18px; color: var(--text-muted); }

.ess-nav-item.active svg { color: var(--energy); }

.ess-nav-item-label { font-size: 9px; color: var(--text-muted); font-weight: 500; }

.ess-nav-item.active .ess-nav-item-label { color: var(--energy); }

.payslip-mock { padding: 4px 0; }

.payslip-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }

.payslip-head h6 { font-size: 13px; font-weight: 500; color: var(--text); }

.payslip-head .month { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); }

.payslip-section + .payslip-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

.payslip-section-label { font-size: 9px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; }

.payslip-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 4px 0; font-size: 11px; }

.payslip-row-label { color: var(--text-sub); }

.payslip-row-value { color: var(--text); font-weight: 500; font-family: 'JetBrains Mono', monospace; }

.payslip-row.deduction .payslip-row-value { color: var(--warning); }

.payslip-net { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--border); display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; }

.payslip-net-label { font-size: 12px; color: var(--text); font-weight: 500; }

.payslip-net-amount { font-size: 18px; font-weight: 600; color: var(--success); font-family: 'JetBrains Mono', monospace; }

.chat-mock { padding: 4px 0; }

.chat-channel { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text); }

.chat-channel-icon { width: 22px; height: 22px; border-radius: 5px; background: #4A154B; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 11px; }

[data-theme="dark"] .chat-channel-icon { background: #ECB22E; color: #1a1a2e; }

.chat-channel strong { font-weight: 500; }

.chat-channel span { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 10px; margin-left: 4px; }

.chat-message { display: grid; grid-template-columns: 28px 1fr; gap: 10px; margin-bottom: 12px; font-size: 12px; }

.chat-avatar { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 600; font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }

.chat-avatar.user { background: var(--navy); }

.chat-avatar.ai { background: var(--ai-gradient); color: #fff; box-shadow: 0 2px 6px var(--ai-glow); }

[data-theme="dark"] .chat-avatar.ai { color: #1a1408; }

.chat-msg-content { padding-top: 1px; }

.chat-msg-author { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }

.chat-msg-name { font-weight: 600; color: var(--text); font-size: 12px; }

.chat-msg-time { color: var(--text-muted); font-size: 10px; font-family: 'JetBrains Mono', monospace; }

.chat-msg-badge { font-size: 9px; padding: 1px 6px; border-radius: 4px; background: var(--ai-surface); color: var(--ai-text); border: 1px solid var(--ai-border); letter-spacing: 0.04em; font-weight: 500; font-family: 'JetBrains Mono', monospace; }

[data-theme="dark"] .chat-msg-badge { background: rgba(240, 185, 100, 0.1); }

.chat-msg-body { font-size: 12px; color: var(--text); line-height: 1.5; }

.chat-msg-body em { color: var(--text); font-style: italic; }

.chat-msg-body code { font-family: 'JetBrains Mono', monospace; font-size: 11px; background: var(--surface-elevated); padding: 1px 5px; border-radius: 3px; color: var(--text); }

.chat-msg-body ul { list-style: none; margin-top: 6px; padding-left: 0; }

.chat-msg-body ul li { padding: 3px 0; display: flex; gap: 6px; align-items: baseline; font-size: 11px; color: var(--text-sub); }

.chat-msg-body ul li::before { content: '·'; color: var(--ai-text); font-weight: 600; }

.chat-source { margin-top: 6px; font-size: 10px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

.chat-source svg { width: 11px; height: 11px; }

.chat-source a { color: var(--text-sub); font-family: 'JetBrains Mono', monospace; }

.chat-source a:hover { color: var(--energy); }

.ai-honest-note { background: var(--ai-surface); border: 1px solid var(--ai-border); border-left-width: 3px; border-radius: var(--radius-md); padding: 14px 16px; font-size: 13px; color: var(--ai-text-sub); line-height: 1.55; margin-bottom: 24px; }

[data-theme="dark"] .ai-honest-note { background: rgba(240, 185, 100, 0.06); color: var(--text-sub); }

.form-12bb { padding: 4px 0; }

.form-12bb-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12px; align-items: center; }

.form-12bb-row:last-of-type { border-bottom: none; }

.form-12bb-row-info strong { color: var(--text); font-weight: 500; display: block; }

.form-12bb-row-info span { color: var(--text-muted); font-size: 10px; margin-top: 1px; display: block; font-family: 'JetBrains Mono', monospace; }

.form-12bb-row-amount { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); font-weight: 500; }

.form-12bb-row-amount.pending { color: var(--warning); }

.form-12bb-progress { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--border); display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }

.form-12bb-progress-label { font-size: 11px; color: var(--text-sub); }

.form-12bb-progress-label strong { color: var(--text); font-weight: 500; }

.form-12bb-progress-pct { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--success); padding: 4px 10px; background: var(--success-bg); border-radius: 6px; }

.docvault-mock { padding: 4px 0; }

.docvault-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12px; }

.docvault-row:last-child { border-bottom: none; }

.docvault-icon { width: 30px; height: 30px; border-radius: 7px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-sub); font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; }

.docvault-name strong { color: var(--text); font-weight: 500; display: block; }

.docvault-name span { color: var(--text-muted); font-size: 10px; margin-top: 1px; display: block; font-family: 'JetBrains Mono', monospace; }

.docvault-action { font-size: 10px; padding: 4px 10px; border-radius: 6px; background: var(--energy-glow); color: var(--energy); font-weight: 500; letter-spacing: 0.02em; }

.mgr-mock { padding: 4px 0; }

.mgr-row { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 11px; }

.mgr-row:last-child { border-bottom: none; }

.mgr-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--border-strong), var(--navy-soft)); color: #fff; font-size: 10px; font-weight: 500; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; }

.mgr-info strong { color: var(--text); font-weight: 500; display: block; font-size: 12px; }

.mgr-info span { color: var(--text-muted); font-size: 10px; margin-top: 1px; display: block; }

.mgr-action { font-size: 9px; padding: 3px 7px; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.mgr-action.approve { background: var(--energy); color: #fff; }

.mgr-action.reject { background: var(--surface); color: var(--text-sub); border: 1px solid var(--border-strong); }

.final-cta h2 em { font-style: normal; color: var(--energy); }

[data-theme="dark"] .final-cta h2 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

@media (max-width: 1024px) {
  .ess-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .ess-hero h1 { font-size: 44px; }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-block.reverse .feature-content { order: 1; }
  .feature-block.reverse .feature-visual { order: 2; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .integration-note-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .ess-hero { padding: 48px 0 56px; }
  .ess-hero h1 { font-size: 34px; }
  .ess-hero-sub { font-size: 17px; }
  .phone { width: 280px; }
  .phone-screen { height: 530px; }
  h2 { font-size: 28px; }
  .feature-content h2 { font-size: 26px; }
  .proof-grid { grid-template-columns: 1fr; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
}

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);
  --ai-surface-deep: #fef6e3;

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, #fefaf2 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.10);
  --hero-bloom-purple: rgba(124, 93, 199, 0.05);
  --dot-grid: rgba(212, 160, 82, 0.08);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;
  --purple: #3B1E76;
  --purple-bg: #EDE6FB;
  --teal: #14554F;

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06);
  --ai-card-shadow: 0 8px 24px rgba(212, 160, 82, 0.10), 0 2px 8px rgba(212, 160, 82, 0.06);

  --h1-accent-color: var(--ai-text);
  --h1-accent-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);
  --ai-surface-deep: rgba(240, 185, 100, 0.04);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.20);
  --hero-bloom-purple: rgba(167, 139, 250, 0.12);
  --dot-grid: rgba(240, 185, 100, 0.05);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --purple: #a78bfa;
  --purple-bg: rgba(167, 139, 250, 0.12);
  --teal: #5eead4;

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --ai-card-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(240, 185, 100, 0.08) inset;

  --h1-accent-color: var(--ai-text);
  --h1-accent-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ai-text-sub); margin-bottom: 16px; display: inline-block; }

[data-theme="dark"] .eyebrow { color: var(--ai-text); }

.eyebrow--blue { color: var(--energy); }

[data-theme="dark"] .eyebrow--blue { color: var(--energy); }

h2 { font-size: 38px; margin-bottom: 16px; color: var(--ai-text); line-height: 1.1; }

h2.h2-blue { color: var(--navy); }

[data-theme="dark"] h2.h2-blue { color: var(--text); }

.section-intro { font-size: 18px; color: var(--ai-text-sub); max-width: 720px; margin-bottom: 56px; line-height: 1.6; }

[data-theme="dark"] .section-intro { color: var(--text-sub); }

.btn-ai:hover { filter: brightness(1.05); box-shadow: 0 8px 24px var(--ai-glow-strong); transform: translateY(-1px); color: #fff; }

.ai-hero { background: var(--hero-bg); padding: 96px 0 80px; overflow: hidden; position: relative; text-align: center; }

[data-theme="dark"] .ai-hero { padding: 112px 0 96px; }

.ai-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 25%, var(--hero-bloom-gold) 0%, transparent 40%),
    radial-gradient(circle at 75% 75%, var(--hero-bloom-blue) 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, var(--hero-bloom-purple) 0%, transparent 50%);
  pointer-events: none;
}

.ai-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.ai-hero .container { position: relative; z-index: 2; }

.ai-status {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ai-surface); border: 1px solid var(--ai-border);
  padding: 6px 14px 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500; color: var(--ai-text);
  letter-spacing: 0.04em; margin-bottom: 28px;
  box-shadow: 0 0 32px var(--ai-glow);
}

.ai-status .dot { width: 8px; height: 8px; background: var(--ai-text); border-radius: 50%; position: relative; animation: pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--ai-glow-strong); } 50% { box-shadow: 0 0 0 8px transparent; } }

.ai-hero h1 {
  font-size: 64px; line-height: 0.98; letter-spacing: -0.035em;
  margin: 0 auto 28px; font-weight: 600; color: var(--navy);
  max-width: 920px;
}

[data-theme="dark"] .ai-hero h1 { color: var(--text); }

.ai-hero h1 em {
  font-style: normal;
  background: var(--h1-accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-hero-sub { font-size: 20px; color: var(--text-sub); line-height: 1.55; max-width: 700px; margin: 0 auto 40px; }

.ai-hero-sub strong { color: var(--text); font-weight: 500; }

.ai-hero-ctas { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

.capability-matrix { background: var(--bg); padding: 96px 0; }

.capability-matrix-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }

.capability-matrix-head p { color: var(--text-sub); font-size: 17px; margin-top: 14px; line-height: 1.6; }

.cap-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}

.cap-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: all 0.2s ease;
}

.cap-card.live { border-color: var(--ai-border); background: var(--ai-surface); box-shadow: var(--ai-card-shadow); }

[data-theme="dark"] .cap-card.live { background: var(--surface); border-color: var(--ai-border); }

.cap-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, var(--ai-glow) 0%, transparent 60%);
  pointer-events: none; opacity: 0;
  transition: opacity 0.2s ease;
}

.cap-card.live::before { opacity: 1; }

.cap-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; position: relative;
}

.cap-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--ai-gradient);
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 4px 16px var(--ai-glow-strong);
}

[data-theme="dark"] .cap-icon { color: #1a1408; }

.cap-icon svg { width: 22px; height: 22px; }

.cap-card.upcoming .cap-icon {
  background: var(--surface-elevated); color: var(--text-muted);
  border: 1px solid var(--border-strong); box-shadow: none;
}

[data-theme="dark"] .cap-card.upcoming .cap-icon { color: var(--text-muted); }

.cap-status {
  font-size: 10px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}

.cap-status.native { background: var(--success-bg); color: var(--success); }

.cap-status.pack { background: var(--ai-surface-deep); color: var(--ai-text); border: 1px solid var(--ai-border); }

[data-theme="dark"] .cap-status.pack { background: rgba(240, 185, 100, 0.1); }

.cap-status.upcoming { background: var(--surface-elevated); color: var(--text-muted); border: 1px solid var(--border); }

.cap-card h3 {
  font-size: 22px; font-weight: 500; color: var(--text);
  margin-bottom: 10px; letter-spacing: -0.01em; position: relative;
}

.cap-card > p {
  font-size: 14px; color: var(--text-sub); line-height: 1.6;
  margin-bottom: 24px; flex: 1; position: relative;
}

.cap-card.live > p { color: var(--ai-text-sub); }

[data-theme="dark"] .cap-card.live > p { color: var(--text-sub); }

.cap-card > p strong { color: var(--text); font-weight: 500; }

.cap-card.live > p strong { color: var(--ai-text); }

[data-theme="dark"] .cap-card.live > p strong { color: var(--text); }

.cap-card-foot {
  padding-top: 18px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  position: relative;
}

.cap-card.live .cap-card-foot { border-color: var(--ai-border); }

.cap-module-link {
  font-size: 12px; color: var(--text-muted);
  letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 6px;
}

.cap-module-link a {
  color: var(--energy); font-weight: 500; text-decoration: none;
}

.cap-module-link a:hover { color: var(--energy-dark); }

.cap-module-link svg { width: 11px; height: 11px; }

.cap-plans { display: flex; gap: 4px; flex-wrap: wrap; }

.cap-plan {
  font-size: 9px; padding: 3px 7px; border-radius: 999px;
  font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}

.cap-plan.growth { background: var(--energy-glow); color: var(--energy); }

.cap-plan.enterprise { background: var(--purple-bg); color: var(--purple); }

.cap-plan.pack { background: var(--ai-surface-deep); color: var(--ai-text); border: 1px solid var(--ai-border); }

[data-theme="dark"] .cap-plan.pack { background: rgba(240, 185, 100, 0.1); }

.cap-plan.upcoming { background: var(--surface-elevated); color: var(--text-muted); border: 1px solid var(--border); }

.principle { background: var(--ai-surface); border-top: 1px solid var(--ai-border); border-bottom: 1px solid var(--ai-border); padding: 96px 0; position: relative; overflow: hidden; }

[data-theme="dark"] .principle { background: var(--bg-deep); border-color: var(--border); }

.principle::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--ai-glow-strong) 0%, transparent 60%);
  opacity: 0.4; pointer-events: none;
}

[data-theme="dark"] .principle::before { opacity: 1; }

.principle .container { position: relative; z-index: 2; }

.principle-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }

.principle-head .pull {
  font-size: 38px; font-weight: 500; color: var(--ai-text);
  letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 20px;
}

[data-theme="dark"] .principle-head .pull { color: var(--text); }

.principle-head .pull em { font-style: normal; color: var(--ai-text); opacity: 0.85; }

[data-theme="dark"] .principle-head .pull em { color: var(--ai-text); }

.principle-head p { font-size: 17px; color: var(--ai-text-sub); line-height: 1.65; }

[data-theme="dark"] .principle-head p { color: var(--text-sub); }

.principle-examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.principle-card {
  background: rgba(255, 255, 255, 0.7); border: 1px solid var(--ai-border);
  border-radius: var(--radius-lg); padding: 28px;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .principle-card { background: var(--surface); backdrop-filter: none; }

.principle-card-eyebrow {
  font-size: 10px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ai-text-sub);
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
}

[data-theme="dark"] .principle-card-eyebrow { color: var(--ai-text); }

.principle-card-step {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0;
  font-size: 13px; line-height: 1.5;
}

.principle-card-step + .principle-card-step { border-top: 1px solid var(--ai-border); }

.principle-card-marker {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.principle-card-marker.ai { background: var(--ai-gradient); color: #fff; box-shadow: 0 2px 6px var(--ai-glow); }

[data-theme="dark"] .principle-card-marker.ai { color: #1a1408; }

.principle-card-marker.human { background: var(--energy); color: #fff; box-shadow: 0 2px 6px var(--energy-glow); }

.principle-card-step-text { color: var(--ai-text-sub); }

[data-theme="dark"] .principle-card-step-text { color: var(--text-sub); }

.principle-card-step-text strong { color: var(--ai-text); font-weight: 500; }

[data-theme="dark"] .principle-card-step-text strong { color: var(--text); }

.principle-card-step-text em { color: var(--ai-text); font-style: normal; font-weight: 500; font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--ai-surface-deep); padding: 1px 6px; border-radius: 4px; }

[data-theme="dark"] .principle-card-step-text em { background: rgba(240, 185, 100, 0.12); }

.trust-section { background: var(--bg); padding: 96px 0; }

.trust-head { max-width: 720px; margin-bottom: 56px; }

.trust-head h2 { color: var(--navy); }

[data-theme="dark"] .trust-head h2 { color: var(--text); }

.trust-head p { font-size: 17px; color: var(--text-sub); margin-top: 14px; line-height: 1.6; }

.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.trust-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px;
  position: relative;
}

.trust-card-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.trust-card h3 {
  font-size: 22px; font-weight: 500; color: var(--navy);
  margin-bottom: 12px; line-height: 1.25; letter-spacing: -0.01em;
}

[data-theme="dark"] .trust-card h3 { color: var(--text); }

.trust-card h3 em { font-style: normal; color: var(--energy); }

.trust-card p { font-size: 14px; color: var(--text-sub); line-height: 1.6; margin-bottom: 14px; }

.trust-card p strong { color: var(--text); font-weight: 500; }

.trust-card p .mono { font-family: 'JetBrains Mono', monospace; color: var(--text); font-weight: 500; }

.trust-card-spec {
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--text-sub); line-height: 1.5;
  margin-top: 12px;
}

.trust-card-spec strong { color: var(--text); font-weight: 500; }

.roadmap-section {
  background: var(--surface-elevated);
  border-top: 1px solid var(--border);
  padding: 80px 0;
}

.roadmap-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }

.roadmap-head .eyebrow { color: var(--text-muted); }

[data-theme="dark"] .roadmap-head .eyebrow { color: var(--text-muted); }

.roadmap-head h2 { color: var(--text); }

.roadmap-head p { font-size: 16px; color: var(--text-sub); margin-top: 12px; line-height: 1.6; }

.roadmap-list {
  max-width: 760px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}

.roadmap-row {
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: 20px; align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.roadmap-row:last-child { border-bottom: none; }

.roadmap-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  color: var(--text-muted); letter-spacing: 0.04em;
}

.roadmap-feature strong { color: var(--text); font-weight: 500; display: block; }

.roadmap-feature span { color: var(--text-sub); font-size: 12px; margin-top: 2px; display: block; line-height: 1.45; }

.roadmap-status {
  font-size: 9px; font-weight: 500;
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}

.roadmap-status.exploring { background: var(--surface-elevated); color: var(--text-muted); border: 1px solid var(--border); }

.roadmap-status.committed { background: var(--ai-surface-deep); color: var(--ai-text); border: 1px solid var(--ai-border); }

[data-theme="dark"] .roadmap-status.committed { background: rgba(240, 185, 100, 0.1); }

.roadmap-foot {
  text-align: center; margin-top: 24px;
  font-size: 13px; color: var(--text-muted); max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6;
}

@media (max-width: 1024px) {
  .cap-grid { grid-template-columns: 1fr; }
  .principle-examples { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .ai-hero { padding: 56px 0 48px; }
  .ai-hero h1 { font-size: 36px; }
  .ai-hero-sub { font-size: 16px; }
  h2 { font-size: 28px; }
  .capability-matrix { padding: 64px 0; }
  .cap-card { padding: 24px; }
  .principle { padding: 64px 0; }
  .principle-head .pull { font-size: 24px; }
  .trust-section { padding: 64px 0; }
  .trust-card { padding: 24px; }
  .roadmap-section { padding: 56px 0; }
  .roadmap-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 20px; }
  .roadmap-row .roadmap-status { justify-self: flex-start; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
}

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --hero-bloom-purple: rgba(124, 93, 199, 0.03);
  --dot-grid: rgba(20, 48, 90, 0.05);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06), 0 2px 4px rgba(20, 48, 90, 0.04);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: none;

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --hero-bloom-purple: rgba(167, 139, 250, 0.08);
  --dot-grid: rgba(255, 255, 255, 0.025);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(69, 150, 255, 0.1) inset;

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

h2 { font-size: 36px; margin-bottom: 16px; color: var(--navy); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 500; padding: 12px 22px; border-radius: var(--radius-md); transition: all 0.2s ease; white-space: nowrap; }

.pricing-hero { background: var(--hero-bg); padding: 80px 0 56px; overflow: hidden; position: relative; text-align: center; }

[data-theme="dark"] .pricing-hero { padding: 96px 0 64px; }

.pricing-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, var(--hero-bloom-gold) 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, var(--hero-bloom-purple) 0%, transparent 50%);
  pointer-events: none;
}

.pricing-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.pricing-hero .container { position: relative; z-index: 2; }

.pricing-hero h1 {
  font-size: 56px; line-height: 1.0; letter-spacing: -0.03em;
  margin-bottom: 20px; font-weight: 600; color: var(--navy);
  max-width: 760px; margin-left: auto; margin-right: auto;
}

[data-theme="dark"] .pricing-hero h1 { color: var(--text); }

.pricing-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .pricing-hero h1 em {
  background: var(--h1-accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pricing-hero-sub { font-size: 18px; color: var(--text-sub); max-width: 600px; margin: 0 auto 36px; line-height: 1.6; }

.billing-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px; box-shadow: var(--card-shadow);
}

.billing-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--text-sub);
  transition: all 0.2s ease;
}

.billing-btn:hover { color: var(--text); }

[data-billing="monthly"] .billing-btn[data-billing="monthly"],
[data-billing="annual"] .billing-btn[data-billing="annual"] {
  background: var(--surface); color: var(--text); box-shadow: var(--card-shadow);
}

[data-theme="dark"][data-billing="monthly"] .billing-btn[data-billing="monthly"],
[data-theme="dark"][data-billing="annual"] .billing-btn[data-billing="annual"] {
  background: var(--surface-hover);
}

.save-pill {
  background: var(--success-bg); color: var(--success);
  font-size: 10px; font-weight: 500; padding: 2px 7px;
  border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase;
}

.plans-section { padding: 56px 0 32px; }

.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }

.plan {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px 24px;
  display: flex; flex-direction: column; position: relative;
}

.plan.featured {
  border-color: var(--energy);
  box-shadow: 0 0 0 1px var(--energy), 0 8px 24px var(--energy-glow);
}

[data-theme="dark"] .plan.featured {
  box-shadow: 0 0 0 1px var(--energy), 0 12px 32px var(--energy-glow);
}

.plan-badge {
  position: absolute; top: -10px; left: 24px;
  background: var(--energy); color: #fff;
  font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}

.plan-name { font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }

.plan-tagline { font-size: 14px; color: var(--text-sub); line-height: 1.4; margin-bottom: 22px; min-height: 40px; }

.plan-price-block { padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }

.plan-price { font-size: 36px; font-weight: 600; color: var(--navy); letter-spacing: -0.02em; line-height: 1; }

.plan-price .currency { font-size: 22px; font-weight: 500; vertical-align: 6px; margin-right: 1px; }

.plan-price .per { font-size: 13px; font-weight: 400; color: var(--text-muted); margin-left: 6px; }

.plan-price-meta { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

.plan-price-meta .strike { text-decoration: line-through; opacity: 0.6; margin-right: 6px; }

.price-monthly { display: none; }

.price-annual { display: block; }

[data-billing="monthly"] .price-monthly { display: block; }

[data-billing="monthly"] .price-annual { display: none; }

.plan-cap { font-size: 13px; color: var(--text); font-weight: 500; margin-bottom: 22px; display: flex; align-items: center; gap: 6px; }

.plan-cap::before {
  content: ''; width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d72f2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>") no-repeat center;
  background-size: 14px;
}

[data-theme="dark"] .plan-cap::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234596ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }

.plan-cta-btn {
  display: block; text-align: center; font-size: 14px; font-weight: 500;
  padding: 11px 16px; border-radius: var(--radius-md); text-decoration: none;
  transition: all 0.15s; margin-bottom: 24px;
}

.plan-cta-btn.primary { background: var(--energy); color: #fff; }

.plan-cta-btn.primary:hover { background: var(--energy-dark); color: #fff; }

.plan-cta-btn.outline { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }

.plan-cta-btn.outline:hover { border-color: var(--navy-soft); background: var(--surface-hover); color: var(--text); }

.plan-features-title {
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 14px;
}

.plan-features { list-style: none; flex: 1; }

.plan-features li {
  font-size: 13px; color: var(--text-sub); padding: 6px 0;
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.5;
}

.plan-features li strong { color: var(--text); font-weight: 500; }

.plan-features li::before {
  content: ''; width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327500A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center;
  background-size: 14px; flex-shrink: 0; margin-top: 3px;
}

.premium-ai {
  margin-top: 40px; padding: 32px 36px;
  background: var(--ai-surface); border: 1px solid var(--ai-border);
  border-radius: var(--radius-lg); position: relative; overflow: hidden;
}

.premium-ai::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 50%, var(--ai-glow) 0%, transparent 50%);
  pointer-events: none;
}

.premium-ai-grid { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }

.premium-ai-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ai-text);
  margin-bottom: 12px;
}

.premium-ai-eyebrow::before {
  content: ''; width: 6px; height: 6px;
  background: var(--ai-text); border-radius: 50%;
  animation: pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.premium-ai h3 {
  font-size: 22px; font-weight: 500; color: var(--ai-text);
  margin-bottom: 10px; letter-spacing: -0.01em;
}

[data-theme="dark"] .premium-ai h3 { color: var(--text); }

.premium-ai p {
  font-size: 14px; color: var(--ai-text-sub); line-height: 1.55;
  margin-bottom: 14px; max-width: 540px;
}

[data-theme="dark"] .premium-ai p { color: var(--text-sub); }

.premium-ai-features {
  display: flex; gap: 18px; flex-wrap: wrap; list-style: none;
  font-size: 12px; color: var(--ai-text); font-weight: 500;
}

[data-theme="dark"] .premium-ai-features { color: var(--ai-text); }

.premium-ai-features li { display: flex; align-items: center; gap: 6px; }

.premium-ai-features li::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ai-text);
}

.premium-ai-price {
  text-align: right;
}

.premium-ai-price .amount { font-size: 28px; font-weight: 600; color: var(--ai-text); letter-spacing: -0.01em; line-height: 1; }

[data-theme="dark"] .premium-ai-price .amount { color: var(--text); }

.premium-ai-price .per { font-size: 13px; color: var(--ai-text-sub); margin-top: 6px; }

[data-theme="dark"] .premium-ai-price .per { color: var(--text-sub); }

.premium-ai-price .enterprise { font-size: 12px; color: var(--ai-text-sub); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ai-border); }

.comparison { background: var(--bg); padding: 96px 0; }

.comparison-head { max-width: 720px; margin-bottom: 40px; }

.compare-controls {
  display: flex; gap: 12px; margin-bottom: 24px;
}

.compare-control-btn {
  font-size: 13px; color: var(--text-sub); padding: 6px 12px;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); transition: all 0.15s;
}

.compare-control-btn:hover { color: var(--text); border-color: var(--border-strong); }

.compare-table {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--card-shadow);
}

.compare-header {
  display: grid; grid-template-columns: 2fr repeat(4, 1fr);
  background: var(--surface-elevated); border-bottom: 1px solid var(--border);
  position: sticky; top: 64px; z-index: 10; backdrop-filter: blur(8px);
}

.compare-header > div {
  padding: 18px 20px; font-size: 13px; font-weight: 500; color: var(--text);
}

.compare-header > div:first-child { color: var(--text-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

.compare-header > div:not(:first-child) { text-align: center; border-left: 1px solid var(--border); }

.compare-header > div.featured-col { color: var(--energy); position: relative; }

.compare-header > div.featured-col::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--energy);
}

.compare-section { border-bottom: 1px solid var(--border); }

.compare-section:last-child { border-bottom: none; }

.compare-section summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 2fr repeat(4, 1fr);
  background: var(--surface);
  padding: 0; transition: background 0.15s;
}

.compare-section summary::-webkit-details-marker { display: none; }

.compare-section summary::marker { content: ''; }

.compare-section summary:hover { background: var(--surface-hover); }

.compare-section-title {
  padding: 16px 20px;
  font-size: 14px; font-weight: 500; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}

.compare-section-icon {
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}

.compare-section-icon::before {
  content: ''; width: 8px; height: 8px;
  border-right: 1.5px solid var(--text-sub);
  border-bottom: 1.5px solid var(--text-sub);
  transform: rotate(-45deg); margin-top: -2px;
  transition: transform 0.2s ease;
}

.compare-section[open] .compare-section-icon::before { transform: rotate(45deg); margin-top: -3px; }

.compare-section summary > .compare-spacer { padding: 16px 20px; border-left: 1px solid var(--border); }

.compare-rows { background: var(--surface); }

.compare-row {
  display: grid; grid-template-columns: 2fr repeat(4, 1fr);
  border-top: 1px solid var(--border);
}

.compare-row:nth-child(even) { background: var(--surface-elevated); }

.compare-cell {
  padding: 14px 20px; font-size: 13px; color: var(--text-sub); line-height: 1.45;
}

.compare-cell:not(:first-child) { text-align: center; border-left: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }

.compare-cell:first-child { color: var(--text); }

.compare-cell.featured-col { background: rgba(29, 114, 242, 0.03); }

[data-theme="dark"] .compare-cell.featured-col { background: rgba(69, 150, 255, 0.04); }

.check-yes { color: var(--success); }

.check-yes svg { width: 18px; height: 18px; }

.check-no { color: var(--text-muted); font-size: 18px; line-height: 1; }

.check-text { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: 'JetBrains Mono', monospace; }

.check-text.partial { background: var(--warning-bg); border-color: var(--ai-border); color: var(--warning); }

.check-text.coming { background: var(--ai-surface); border-color: var(--ai-border); color: var(--ai-text); }

[data-theme="dark"] .check-text { background: var(--surface-elevated); }

.trust-strip { background: var(--surface-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 0; }

.trust-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center; }

.trust-item { display: flex; align-items: flex-start; gap: 12px; }

.trust-item-icon {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--energy); flex-shrink: 0;
}

.trust-item-icon svg { width: 18px; height: 18px; }

.trust-item h5 { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 2px; }

.trust-item p { font-size: 12px; color: var(--text-sub); line-height: 1.45; }

@media (max-width: 1024px) {
  .plans-grid { grid-template-columns: repeat(2, 1fr); }
  .compare-table { overflow-x: auto; }
  .compare-header, .compare-section summary, .compare-row { min-width: 700px; }
  .trust-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .premium-ai-grid { grid-template-columns: 1fr; }
  .premium-ai-price { text-align: left; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .pricing-hero { padding: 56px 0 40px; }
  .pricing-hero h1 { font-size: 36px; }
  .pricing-hero-sub { font-size: 16px; }
  h2 { font-size: 28px; }
  .plans-grid { grid-template-columns: 1fr; }
  .premium-ai { padding: 24px; }
  .premium-ai h3 { font-size: 18px; }
  .trust-strip-grid { grid-template-columns: 1fr; }
  .comparison { padding: 64px 0; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
  .billing-toggle { padding: 3px; }
  .billing-btn { padding: 7px 14px; font-size: 13px; }
  .faq-item summary { padding: 18px 20px; font-size: 15px; }
  .faq-body { padding: 0 20px 20px; font-size: 14px; }
}

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --hero-bloom-purple: rgba(124, 93, 199, 0.03);
  --dot-grid: rgba(20, 48, 90, 0.05);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: none;

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --hero-bloom-purple: rgba(167, 139, 250, 0.08);
  --dot-grid: rgba(255, 255, 255, 0.025);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

.serif { font-family: 'Lora', Georgia, serif; }

.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; position: relative; }

h2 { font-size: 36px; margin-bottom: 16px; color: var(--navy); line-height: 1.1; }

.about-hero { background: var(--hero-bg); padding: 96px 0 64px; overflow: hidden; position: relative; text-align: center; }

[data-theme="dark"] .about-hero { padding: 112px 0 80px; }

.about-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 30%, var(--hero-bloom-blue) 0%, transparent 35%),
    radial-gradient(circle at 75% 60%, var(--hero-bloom-gold) 0%, transparent 40%);
  pointer-events: none;
}

.about-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.about-hero .container { position: relative; z-index: 2; }

.about-hero h1 {
  font-size: 60px; line-height: 1.0; letter-spacing: -0.03em;
  margin: 0 auto 24px; font-weight: 600; color: var(--navy);
  max-width: 880px;
}

[data-theme="dark"] .about-hero h1 { color: var(--text); }

.about-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .about-hero h1 em {
  background: var(--h1-accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-hero-sub { font-size: 20px; color: var(--text-sub); line-height: 1.55; max-width: 640px; margin: 0 auto 24px; }

.about-hero-meta {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted);
}

.about-hero-meta .sep { color: var(--border-strong); }

.story { background: var(--bg); padding: 96px 0; }

.story-pull {
  font-family: 'Lora', Georgia, serif;
  font-size: 32px; line-height: 1.35;
  color: var(--text); letter-spacing: -0.01em;
  font-weight: 400; font-style: italic;
  margin: 0 auto 64px; max-width: 760px;
  text-align: center;
  position: relative;
  padding: 0 32px;
}

.story-pull::before, .story-pull::after {
  content: '"'; font-family: 'Lora', Georgia, serif;
  color: var(--energy); opacity: 0.4;
  font-size: 64px; line-height: 1; font-weight: 500; font-style: normal;
  position: absolute;
}

.story-pull::before { left: 0; top: -8px; }

.story-pull::after { right: 0; bottom: -32px; }

.story-body { font-size: 17px; color: var(--text-sub); line-height: 1.75; max-width: 660px; margin: 0 auto; }

.story-body p { margin-bottom: 22px; }

.story-body p:last-child { margin-bottom: 0; }

.story-body strong { color: var(--text); font-weight: 500; }

.story-divider {
  width: 56px; height: 2px;
  background: var(--energy); opacity: 0.4;
  margin: 36px auto;
  border-radius: 1px;
}

.mission {
  background: var(--surface-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 80px 0;
  text-align: center;
}

.mission-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 20px; display: inline-block; }

.mission h2 {
  font-size: 38px; max-width: 800px; margin: 0 auto 16px;
  line-height: 1.2; color: var(--text); letter-spacing: -0.02em;
}

[data-theme="dark"] .mission h2 { color: var(--text); }

.mission h2 em { font-style: normal; color: var(--energy); }

.values { background: var(--bg); }

.values-head { max-width: 720px; margin-bottom: 56px; }

.values-head p { font-size: 17px; color: var(--text-sub); margin-top: 14px; line-height: 1.6; }

.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.value-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px 32px;
  position: relative; overflow: hidden;
}

.value-card-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500; color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.value-card h3 {
  font-size: 22px; font-weight: 500; color: var(--text);
  margin-bottom: 12px; line-height: 1.3; letter-spacing: -0.01em;
}

.value-card h3 em { font-style: normal; color: var(--energy); }

[data-theme="dark"] .value-card h3 em { color: var(--energy); }

.value-card p {
  font-size: 14px; color: var(--text-sub); line-height: 1.6;
  margin-bottom: 16px;
}

.value-card p strong { color: var(--text); font-weight: 500; }

.value-card-proof {
  font-size: 12px; color: var(--text-muted); padding-top: 16px;
  border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px;
}

.value-card-proof svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--energy); }

.value-card-proof a { color: var(--text-sub); }

.value-card-proof a:hover { color: var(--energy); }

.team {
  background: var(--surface-elevated);
  border-top: 1px solid var(--border);
}

.team-head { max-width: 720px; margin-bottom: 48px; }

.team-head p { font-size: 17px; color: var(--text-sub); margin-top: 14px; line-height: 1.6; }

.team-placeholder-note {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--warning-bg); color: var(--warning);
  font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--ai-border);
  margin-bottom: 20px;
}

.team-placeholder-note svg { width: 12px; height: 12px; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.team-member {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; transition: all 0.2s ease;
}

.team-member:hover { border-color: var(--border-strong); box-shadow: var(--card-hover-shadow); transform: translateY(-1px); }

.team-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--energy) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26px; font-weight: 500;
  font-family: 'JetBrains Mono', monospace; letter-spacing: -0.01em;
  margin-bottom: 16px;
  position: relative;
  box-shadow: 0 4px 16px rgba(29, 114, 242, 0.15);
}

[data-theme="dark"] .team-avatar { box-shadow: 0 4px 16px rgba(69, 150, 255, 0.25); }

.team-avatar.founder { background: linear-gradient(135deg, #1a3a6b 0%, #d4a052 100%); }

[data-theme="dark"] .team-avatar.founder { background: linear-gradient(135deg, #4596ff 0%, #f0b964 100%); }

.team-member h4 {
  font-size: 15px; font-weight: 500; color: var(--text);
  margin-bottom: 4px; letter-spacing: -0.005em;
}

.team-role { font-size: 12px; color: var(--energy); margin-bottom: 12px; font-weight: 500; }

.team-meta { font-size: 11px; color: var(--text-muted); line-height: 1.5; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; }

.team-meta .sep { color: var(--border-strong); margin: 0 4px; }

.status {
  background: var(--bg);
  padding: 96px 0;
}

.status-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }

.status-head p { font-size: 17px; color: var(--text-sub); margin-top: 14px; line-height: 1.6; }

.status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto; }

.status-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px;
  text-align: center;
}

.status-num {
  font-size: 36px; font-weight: 600; color: var(--navy);
  letter-spacing: -0.025em; line-height: 1; margin-bottom: 10px;
}

[data-theme="dark"] .status-num { color: var(--text); }

.status-num .unit { font-size: 18px; color: var(--navy-soft); font-weight: 500; margin-left: 2px; }

.status-label { font-size: 13px; color: var(--text); font-weight: 500; margin-bottom: 4px; }

.status-meta { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; font-family: 'JetBrains Mono', monospace; }

.backers {
  background: var(--surface-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 64px 0;
  text-align: center;
}

.backers-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; display: inline-block; }

.backers h3 { font-size: 28px; margin-bottom: 16px; color: var(--text); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; }

.backers h3 em { font-style: normal; color: var(--energy); }

.backers p {
  font-size: 16px; color: var(--text-sub); line-height: 1.65;
  max-width: 580px; margin: 0 auto;
}

.press { background: var(--bg); }

.press-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 24px; flex-wrap: wrap; }

.press-head h2 { margin-bottom: 0; }

.press-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.press-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
  text-decoration: none; color: var(--text);
  transition: all 0.2s; display: flex; flex-direction: column;
}

.press-card:hover { border-color: var(--border-strong); box-shadow: var(--card-hover-shadow); transform: translateY(-2px); }

.press-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.press-source {
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--energy);
}

.press-sep { color: var(--border-strong); font-size: 12px; }

.press-date { font-size: 12px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.press-card h3 { font-size: 18px; line-height: 1.4; margin-bottom: 12px; color: var(--text); font-weight: 500; flex: 1; }

.press-card-cta { font-size: 13px; color: var(--energy); font-weight: 500; }

.press-placeholder {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
  color: var(--text-muted);
}

.press-placeholder h3 { font-size: 16px; color: var(--text-sub); margin-bottom: 8px; font-weight: 500; }

.press-placeholder p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

@media (max-width: 1024px) {
  .values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .status-grid { grid-template-columns: repeat(2, 1fr); }
  .press-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container, .container-narrow { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .about-hero { padding: 56px 0 48px; }
  .about-hero h1 { font-size: 40px; }
  .about-hero-sub { font-size: 17px; }
  .story { padding: 64px 0; }
  .story-pull { font-size: 22px; padding: 0 16px; }
  .story-pull::before, .story-pull::after { font-size: 40px; }
  .story-body { font-size: 16px; }
  .mission { padding: 56px 0; }
  .mission h2 { font-size: 28px; }
  h2 { font-size: 28px; }
  .status { padding: 64px 0; }
  .status-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .backers { padding: 48px 0; }
  .backers h3 { font-size: 22px; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
}

:root {
  --bg: #ffffff; --bg-deep: #f0f2f7; --surface: #ffffff; --surface-elevated: #f8f9fc; --surface-hover: #f0f2f7; --border: #dde1ec; --border-strong: #c8cedd;
  --text: #1a1a2e; --text-sub: #555555; --text-muted: #999999;
  --navy: #1a3a6b; --navy-soft: #7a8aa3;
  --energy: #1d72f2; --energy-dark: #1560d6; --energy-glow: rgba(29, 114, 242, 0.18); --energy-glow-strong: rgba(29, 114, 242, 0.3);
  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%); --ai-glow: rgba(212, 160, 82, 0.15); --ai-glow-strong: rgba(212, 160, 82, 0.3); --ai-border: #f0d896; --ai-text: #6b4922; --ai-text-sub: #946422; --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);
  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%); --hero-bloom-blue: rgba(29, 114, 242, 0.06); --hero-bloom-green: rgba(39, 80, 10, 0.04); --dot-grid: rgba(20, 48, 90, 0.05);
  --success: #27500A; --success-bg: #EAF3DE; --warning: #633806; --warning-bg: #FAEEDA; --purple: #3B1E76; --purple-bg: #EDE6FB; --teal: #14554F; --teal-bg: #D5F2EC;
  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06);
  --h1-accent-color: var(--success); --h1-accent-gradient: none;
  --footer-bg: var(--surface-elevated); --final-cta-bg: var(--navy);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a; --bg-deep: #050811; --surface: #11151f; --surface-elevated: #161b29; --surface-hover: #1c2236; --border: #1f2638; --border-strong: #2b3349;
  --text: #e8eaf0; --text-sub: #9aa1b8; --text-muted: #5e667d;
  --navy: #4d7ec8; --navy-soft: #6680a8;
  --energy: #4596ff; --energy-dark: #2c7fe8; --energy-glow: rgba(69, 150, 255, 0.3); --energy-glow-strong: rgba(69, 150, 255, 0.5);
  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%); --ai-glow: rgba(240, 185, 100, 0.18); --ai-glow-strong: rgba(240, 185, 100, 0.35); --ai-border: #4a3a1f; --ai-text: #f0b964; --ai-text-sub: #c8a878; --ai-surface: rgba(240, 185, 100, 0.06);
  --hero-bg: var(--bg); --hero-bloom-blue: rgba(69, 150, 255, 0.18); --hero-bloom-green: rgba(52, 211, 153, 0.12); --dot-grid: rgba(255, 255, 255, 0.025);
  --success: #34d399; --success-bg: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.12); --purple: #a78bfa; --purple-bg: rgba(167, 139, 250, 0.15); --teal: #5eead4; --teal-bg: rgba(94, 234, 212, 0.12);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --h1-accent-color: var(--success); --h1-accent-gradient: linear-gradient(135deg, #34d399 0%, #5eead4 100%);
  --footer-bg: var(--bg); --final-cta-bg: var(--bg-deep);
}

.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--success); margin-bottom: 16px; display: inline-block; }

.sec-hero { background: var(--hero-bg); padding: 80px 0; overflow: hidden; position: relative; text-align: center; }

[data-theme="dark"] .sec-hero { padding: 96px 0; }

.sec-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 25% 35%, var(--hero-bloom-blue) 0%, transparent 40%), radial-gradient(circle at 75% 65%, var(--hero-bloom-green) 0%, transparent 40%); pointer-events: none; }

.sec-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); }

.sec-hero .container { position: relative; z-index: 2; }

.sec-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--success-bg); color: var(--success); border: 1px solid var(--success); padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 24px; font-family: 'JetBrains Mono', monospace; }

.sec-hero-badge svg { width: 13px; height: 13px; }

.sec-hero h1 { font-size: 60px; line-height: 1.0; letter-spacing: -0.03em; margin: 0 auto 20px; font-weight: 600; color: var(--navy); max-width: 880px; }

[data-theme="dark"] .sec-hero h1 { color: var(--text); }

.sec-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .sec-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.sec-hero-sub { font-size: 19px; color: var(--text-sub); line-height: 1.55; max-width: 680px; margin: 0 auto 32px; }

.sec-hero-sub strong { color: var(--text); font-weight: 500; }

.sec-trust-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }

.sec-trust-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--text); box-shadow: var(--card-shadow); }

.sec-trust-pill svg { width: 13px; height: 13px; color: var(--success); }

.sec-trust-pill .mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-sub); }

.sec-hero-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

.statusboard { background: var(--bg); padding: 80px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.statusboard-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }

.statusboard-head p { color: var(--text-sub); font-size: 17px; margin-top: 14px; line-height: 1.6; }

.statusboard-head h2 { color: var(--navy); }

[data-theme="dark"] .statusboard-head h2 { color: var(--text); }

.statusboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.status-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; position: relative; }

.status-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.status-card-icon { width: 38px; height: 38px; border-radius: 9px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--navy); }

[data-theme="dark"] .status-card-icon { color: var(--energy); }

.status-card-icon svg { width: 18px; height: 18px; }

.status-card-pill { font-size: 9px; padding: 3px 8px; border-radius: 4px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.status-card-pill.done { background: var(--success-bg); color: var(--success); border: 1px solid var(--success); }

.status-card-pill.progress { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning); }

.status-card-pill.target { background: var(--surface-elevated); color: var(--text-sub); border: 1px solid var(--border-strong); }

.status-card h3 { font-size: 18px; font-weight: 500; color: var(--text); margin-bottom: 8px; letter-spacing: -0.005em; }

.status-card > p { font-size: 13px; color: var(--text-sub); line-height: 1.5; margin-bottom: 14px; }

.status-card-spec { padding: 10px 12px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-sub); line-height: 1.5; }

.status-card-spec strong { color: var(--text); font-weight: 500; }

.statusboard-foot { text-align: center; margin-top: 32px; font-size: 13px; color: var(--text-muted); max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; }

.statusboard-foot a { color: var(--energy); }

.statusboard-foot a:hover { color: var(--energy-dark); }

.detail-section { background: var(--bg); border-top: 1px solid var(--border); padding: 80px 0; }

.detail-section.alt { background: var(--surface-elevated); }

.detail-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: flex-start; }

.detail-grid.reverse { grid-template-columns: 7fr 5fr; }

.detail-grid.reverse .detail-content { order: 2; }

.detail-grid.reverse .detail-visual { order: 1; }

.detail-step { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-bottom: 12px; }

.detail-content h2 { font-size: 30px; margin-bottom: 18px; line-height: 1.15; }

.detail-content > p { font-size: 16px; color: var(--text-sub); line-height: 1.6; margin-bottom: 22px; }

.detail-content > p strong { color: var(--text); font-weight: 500; }

.spec-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }

.spec-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--border); align-items: baseline; font-size: 14px; }

.spec-row:last-child { border-bottom: none; }

.spec-row-label { color: var(--text-sub); font-size: 13px; }

.spec-row-value { color: var(--text); font-weight: 500; font-family: 'JetBrains Mono', monospace; font-size: 13px; }

.spec-row-value.success { color: var(--success); }

.spec-row-value.warn { color: var(--warning); }

.spec-row-value strong { font-weight: 600; }

.region-mock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }

.region-mock-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }

.region-mock-head h6 { font-size: 13px; font-weight: 500; color: var(--text); flex: 1; }

.region-mock-head .meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); }

.region-card { padding: 14px 16px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; }

.region-card:last-child { margin-bottom: 0; }

.region-card.primary { border-color: var(--success); background: var(--success-bg); }

[data-theme="dark"] .region-card.primary { background: rgba(52, 211, 153, 0.06); }

.region-card-icon { width: 32px; height: 32px; border-radius: 7px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; }

[data-theme="dark"] .region-card-icon { color: var(--energy); }

.region-card.primary .region-card-icon { background: var(--success); color: #fff; border-color: var(--success); }

[data-theme="dark"] .region-card.primary .region-card-icon { color: var(--bg); }

.region-card-info strong { font-size: 13px; color: var(--text); font-weight: 500; display: block; }

.region-card-info span { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-top: 2px; display: block; }

.region-card-tag { font-size: 9px; padding: 3px 8px; border-radius: 4px; background: var(--surface); color: var(--text-sub); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; border: 1px solid var(--border); }

.region-card-tag.primary { background: var(--success); color: #fff; border-color: var(--success); }

[data-theme="dark"] .region-card.primary .region-card-tag.primary { color: var(--bg); }

.flow-mock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }

.flow-stage { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 12px 0; position: relative; }

.flow-stage:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: -6px; width: 2px; background: var(--border); }

.flow-stage-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-elevated); border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--text-sub); position: relative; z-index: 1; }

.flow-stage-icon svg { width: 14px; height: 14px; }

.flow-stage-icon.done { background: var(--success); border-color: var(--success); color: #fff; }

[data-theme="dark"] .flow-stage-icon.done { color: var(--bg); }

.flow-stage-info strong { font-size: 13px; color: var(--text); font-weight: 500; display: block; margin-bottom: 4px; }

.flow-stage-info span { font-size: 12px; color: var(--text-sub); line-height: 1.5; display: block; }

.flow-stage-info code { font-family: 'JetBrains Mono', monospace; font-size: 11px; background: var(--surface-elevated); padding: 1px 5px; border-radius: 3px; color: var(--text); }

.bug-bounty-strip { background: var(--surface-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 48px 0; }

.bug-bounty-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 48px; align-items: center; }

.bug-bounty-grid h3 { font-size: 22px; font-weight: 500; color: var(--text); margin-bottom: 8px; }

.bug-bounty-grid p { font-size: 14px; color: var(--text-sub); line-height: 1.55; margin-bottom: 16px; }

.bug-bounty-grid p strong { color: var(--text); font-weight: 500; }

.bug-bounty-grid a { color: var(--energy); font-weight: 500; font-size: 14px; }

.bug-bounty-pgp { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-sub); line-height: 1.6; }

.bug-bounty-pgp strong { color: var(--text); font-weight: 500; display: block; margin-bottom: 6px; }

.bug-bounty-pgp .key { color: var(--text-muted); font-size: 11px; word-break: break-all; }

.it-cta { background: var(--bg); padding: 80px 0; }

.it-cta-card { max-width: 760px; margin: 0 auto; background: linear-gradient(135deg, var(--navy) 0%, #2d4f8a 100%); color: #fff; border-radius: var(--radius-lg); padding: 48px 56px; text-align: center; box-shadow: 0 24px 48px rgba(20, 48, 90, 0.15); position: relative; overflow: hidden; }

[data-theme="dark"] .it-cta-card { background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%); border: 1px solid var(--border); }

.it-cta-card::before { content: ''; position: absolute; top: -40%; right: -10%; width: 50%; height: 180%; background: radial-gradient(circle, var(--energy-glow) 0%, transparent 60%); pointer-events: none; }

.it-cta-card > * { position: relative; z-index: 1; }

.it-cta-card .eyebrow { color: rgba(255, 255, 255, 0.7); }

[data-theme="dark"] .it-cta-card .eyebrow { color: var(--text-muted); }

.it-cta-card h2 { color: #fff; font-size: 30px; margin-bottom: 12px; letter-spacing: -0.02em; }

.it-cta-card p { color: rgba(255, 255, 255, 0.8); font-size: 16px; line-height: 1.55; margin-bottom: 28px; max-width: 540px; margin-left: auto; margin-right: auto; }

[data-theme="dark"] .it-cta-card p { color: var(--text-sub); }

.it-cta-card-buttons { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

.final-cta { background: var(--final-cta-bg); color: #fff; text-align: center; padding: 80px 0; position: relative; overflow: hidden; }

.final-cta h2 { color: #fff; font-size: 36px; letter-spacing: -0.025em; margin-bottom: 12px; }

.final-cta p { color: rgba(255, 255, 255, 0.7); font-size: 17px; margin-bottom: 32px; }

@media (max-width: 1024px) {
  .sec-hero h1 { font-size: 44px; }
  .statusboard-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .detail-grid.reverse .detail-content { order: 1; }
  .detail-grid.reverse .detail-visual { order: 2; }
  .bug-bounty-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .sec-hero { padding: 56px 0; }
  .sec-hero h1 { font-size: 32px; }
  .sec-hero-sub { font-size: 16px; }
  h2 { font-size: 26px; }
  .detail-content h2 { font-size: 24px; }
  .statusboard-grid { grid-template-columns: 1fr; }
  .statusboard { padding: 56px 0; }
  .detail-section { padding: 56px 0; }
  .it-cta-card { padding: 32px 24px; }
  .it-cta-card h2 { font-size: 24px; }
  .final-cta { padding: 56px 0; }
  .final-cta h2 { font-size: 26px; }
  .spec-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
}

:root {
  --bg: #ffffff;
  --bg-deep: #f0f2f7;
  --surface: #ffffff;
  --surface-elevated: #f8f9fc;
  --surface-hover: #f0f2f7;
  --border: #dde1ec;
  --border-strong: #c8cedd;

  --text: #1a1a2e;
  --text-sub: #555555;
  --text-muted: #999999;

  --navy: #1a3a6b;
  --navy-soft: #7a8aa3;

  --energy: #1d72f2;
  --energy-dark: #1560d6;
  --energy-glow: rgba(29, 114, 242, 0.18);
  --energy-glow-strong: rgba(29, 114, 242, 0.3);

  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%);
  --ai-glow: rgba(212, 160, 82, 0.15);
  --ai-glow-strong: rgba(212, 160, 82, 0.3);
  --ai-border: #f0d896;
  --ai-text: #6b4922;
  --ai-text-sub: #946422;
  --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);

  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --dot-grid: rgba(20, 48, 90, 0.05);

  --success: #27500A;
  --success-bg: #EAF3DE;
  --warning: #633806;
  --warning-bg: #FAEEDA;

  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.06);
  --form-shadow: 0 8px 24px rgba(20, 48, 90, 0.06), 0 2px 8px rgba(20, 48, 90, 0.04);

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: none;

  --footer-bg: var(--surface-elevated);
  --final-cta-bg: var(--navy);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

[data-theme="dark"] {
  --bg: #0a0d1a;
  --bg-deep: #050811;
  --surface: #11151f;
  --surface-elevated: #161b29;
  --surface-hover: #1c2236;
  --border: #1f2638;
  --border-strong: #2b3349;

  --text: #e8eaf0;
  --text-sub: #9aa1b8;
  --text-muted: #5e667d;

  --navy: #4d7ec8;
  --navy-soft: #6680a8;

  --energy: #4596ff;
  --energy-dark: #2c7fe8;
  --energy-glow: rgba(69, 150, 255, 0.3);
  --energy-glow-strong: rgba(69, 150, 255, 0.5);

  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%);
  --ai-glow: rgba(240, 185, 100, 0.18);
  --ai-glow-strong: rgba(240, 185, 100, 0.35);
  --ai-border: #4a3a1f;
  --ai-text: #f0b964;
  --ai-text-sub: #c8a878;
  --ai-surface: rgba(240, 185, 100, 0.06);

  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --dot-grid: rgba(255, 255, 255, 0.025);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --form-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;

  --h1-accent-color: var(--energy);
  --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);

  --footer-bg: var(--bg);
  --final-cta-bg: var(--bg-deep);
}

h2 { font-size: 32px; margin-bottom: 16px; color: var(--text); line-height: 1.15; }

h3 { font-size: 18px; margin-bottom: 8px; font-weight: 500; letter-spacing: -0.005em; }

.demo-page { background: var(--hero-bg); padding: 72px 0 96px; position: relative; overflow: hidden; min-height: calc(100vh - 64px); }

[data-theme="dark"] .demo-page { padding: 88px 0 96px; }

.demo-page::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, var(--hero-bloom-gold) 0%, transparent 40%);
  pointer-events: none;
}

.demo-page::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.demo-page .container { position: relative; z-index: 2; }

.demo-grid {
  display: grid;
  grid-template-columns: 4fr 5fr;
  gap: 64px;
  align-items: start;
}

.demo-content { padding-top: 8px; }

.demo-content h1 {
  font-size: 44px; line-height: 1.0; letter-spacing: -0.03em;
  margin-bottom: 20px; font-weight: 600; color: var(--navy);
}

[data-theme="dark"] .demo-content h1 { color: var(--text); }

.demo-content h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .demo-content h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.demo-sub { font-size: 17px; color: var(--text-sub); line-height: 1.6; margin-bottom: 36px; }

.expect-block { margin-bottom: 40px; }

.expect-title {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px;
}

.expect-step {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px;
  padding: 14px 0; position: relative;
}

.expect-step:not(:last-child)::after {
  content: ''; position: absolute;
  left: 17px; top: 50px; bottom: -14px; width: 2px;
  background: var(--border); border-radius: 1px;
}

.expect-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  position: relative; z-index: 1;
}

.expect-step.primary .expect-num {
  background: var(--energy); color: #fff; border-color: var(--energy);
  box-shadow: 0 0 0 4px var(--energy-glow);
}

.expect-step h4 { font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 4px; }

.expect-step p { font-size: 13px; color: var(--text-sub); line-height: 1.5; margin-bottom: 0; }

.expect-step p strong { color: var(--text); font-weight: 500; }

.cover-block { margin-bottom: 40px; }

.cover-title {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px;
}

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

.cover-list li {
  font-size: 14px; color: var(--text-sub); line-height: 1.5;
  display: flex; align-items: flex-start; gap: 10px;
}

.cover-list li strong { color: var(--text); font-weight: 500; }

.cover-list li::before {
  content: ''; width: 16px; height: 16px;
  background: var(--success-bg);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327500A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 10px; background-repeat: no-repeat; background-position: center;
  flex-shrink: 0; margin-top: 1px;
}

[data-theme="dark"] .cover-list li::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); }

.who-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 32px;
}

.who-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--energy) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 19px; font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.who-info h5 { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 2px; }

.who-info p { font-size: 12px; color: var(--text-sub); margin: 0; }

.who-info p span { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; margin-left: 6px; }

.no-pressure {
  background: var(--ai-surface); border: 1px solid var(--ai-border);
  border-radius: var(--radius-md); padding: 18px 20px;
  font-size: 14px; color: var(--ai-text-sub); line-height: 1.55;
  position: relative; overflow: hidden;
}

[data-theme="dark"] .no-pressure { color: var(--text-sub); background: rgba(240, 185, 100, 0.04); }

.no-pressure::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, var(--ai-glow) 0%, transparent 60%);
  pointer-events: none;
}

.no-pressure-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 11px; font-weight: 500; color: var(--ai-text);
  letter-spacing: 0.06em; text-transform: uppercase;
  position: relative;
}

[data-theme="dark"] .no-pressure-head { color: var(--ai-text); }

.no-pressure-head svg { width: 14px; height: 14px; }

.no-pressure p { position: relative; margin: 0; }

.no-pressure p strong { color: var(--ai-text); font-weight: 500; }

[data-theme="dark"] .no-pressure p strong { color: var(--text); }

.demo-form-wrap { position: relative; }

.demo-form {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 36px;
  box-shadow: var(--form-shadow);
  position: relative; overflow: hidden;
}

.demo-form::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--energy) 0%, #d4a052 100%);
}

.form-head { margin-bottom: 28px; }

.form-head h2 { font-size: 22px; font-weight: 500; color: var(--text); margin-bottom: 6px; letter-spacing: -0.01em; }

.form-head p { font-size: 14px; color: var(--text-sub); margin: 0; line-height: 1.5; }

.form-fields { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field-label {
  font-size: 12px; font-weight: 500; color: var(--text);
  letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 6px;
}

.field-label .req { color: var(--energy); font-weight: 500; }

.field-label .opt { color: var(--text-muted); font-size: 11px; font-weight: 400; margin-left: auto; }

.field-input,
.field-select,
.field-textarea {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  width: 100%;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--energy);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--energy-glow);
}

.field-input::placeholder { color: var(--text-muted); }

.field-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 38px;
}

.field-textarea { min-height: 90px; resize: vertical; line-height: 1.5; }

.field-hint { font-size: 11px; color: var(--text-muted); }

.form-submit {
  width: 100%;
  background: var(--energy); color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 500;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px var(--energy-glow);
  letter-spacing: -0.005em;
}

.form-submit:hover {
  background: var(--energy-dark);
  box-shadow: 0 4px 12px var(--energy-glow-strong);
  transform: translateY(-1px);
}

[data-theme="dark"] .form-submit { box-shadow: 0 0 0 1px var(--energy), 0 8px 24px var(--energy-glow); }

[data-theme="dark"] .form-submit:hover { box-shadow: 0 0 0 1px var(--energy-dark), 0 12px 32px var(--energy-glow-strong); }

.form-fine {
  font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 16px;
  line-height: 1.5;
}

.form-fine a { color: var(--text-sub); text-decoration: underline; text-decoration-color: var(--border-strong); }

.form-fine a:hover { color: var(--energy); text-decoration-color: var(--energy); }

.demo-success { display: none; }

.demo-form.submitted { display: none; }

.demo-success.show { display: block; }

.success-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 40px;
  box-shadow: var(--form-shadow);
  text-align: center;
  position: relative; overflow: hidden;
}

.success-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--success);
}

.success-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--success-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--success);
  margin: 0 auto 20px;
  position: relative;
}

.success-icon svg { width: 28px; height: 28px; }

.success-icon::before {
  content: ''; position: absolute; inset: -8px;
  border-radius: 50%; border: 2px solid var(--success-bg);
  opacity: 0.6;
}

.success-card h2 { font-size: 24px; font-weight: 500; color: var(--text); margin-bottom: 10px; letter-spacing: -0.01em; }

.success-card > p { font-size: 14px; color: var(--text-sub); line-height: 1.6; margin: 0 auto 28px; max-width: 380px; }

.cal-placeholder {
  background: var(--surface-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  margin-bottom: 24px;
  text-align: center;
}

.cal-placeholder-head { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }

.cal-placeholder h4 { font-size: 16px; font-weight: 500; color: var(--text); margin-bottom: 6px; }

.cal-placeholder p { font-size: 13px; color: var(--text-sub); margin: 0; line-height: 1.5; }

.success-meta {
  font-size: 13px; color: var(--text-sub);
  padding-top: 24px; border-top: 1px solid var(--border);
  line-height: 1.6;
}

.success-meta strong { color: var(--text); font-weight: 500; }

.site-footer { background: var(--footer-bg); border-top: 1px solid var(--border); padding: 56px 0 32px; }

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

.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

@media (max-width: 1024px) {
  .demo-grid { grid-template-columns: 1fr; gap: 40px; }
  .demo-content h1 { font-size: 38px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .demo-page { padding: 40px 0 64px; }
  .demo-content h1 { font-size: 30px; }
  .demo-sub { font-size: 16px; }
  .demo-form { padding: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .success-card { padding: 28px 20px; }
}

:root {
  --bg: #ffffff; --bg-deep: #f0f2f7; --surface: #ffffff; --surface-elevated: #f8f9fc; --surface-hover: #f0f2f7; --border: #dde1ec; --border-strong: #c8cedd;
  --text: #1a1a2e; --text-sub: #555555; --text-muted: #999999;
  --navy: #1a3a6b; --navy-soft: #7a8aa3;
  --energy: #1d72f2; --energy-dark: #1560d6; --energy-glow: rgba(29, 114, 242, 0.18); --energy-glow-strong: rgba(29, 114, 242, 0.3);
  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%); --ai-glow: rgba(212, 160, 82, 0.15); --ai-border: #f0d896; --ai-text: #6b4922; --ai-text-sub: #946422; --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);
  --success: #27500A; --success-bg: #EAF3DE; --warning: #633806; --warning-bg: #FAEEDA;
  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06); --hero-bloom-green: rgba(39, 80, 10, 0.04);
  --dot-grid: rgba(20, 48, 90, 0.05);
  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.08);
  --mosaic-shadow: 0 24px 48px rgba(20, 48, 90, 0.10), 0 8px 16px rgba(20, 48, 90, 0.06);
  --h1-accent-color: var(--energy); --h1-accent-gradient: none;
  --footer-bg: var(--surface-elevated);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
}

[data-theme="dark"] {
  --bg: #0a0d1a; --bg-deep: #050811; --surface: #11151f; --surface-elevated: #161b29; --surface-hover: #1c2236; --border: #1f2638; --border-strong: #2b3349;
  --text: #e8eaf0; --text-sub: #9aa1b8; --text-muted: #5e667d;
  --navy: #4d7ec8; --navy-soft: #6680a8;
  --energy: #4596ff; --energy-dark: #2c7fe8; --energy-glow: rgba(69, 150, 255, 0.3); --energy-glow-strong: rgba(69, 150, 255, 0.5);
  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%); --ai-glow: rgba(240, 185, 100, 0.18); --ai-border: #4a3a1f; --ai-text: #f0b964; --ai-text-sub: #c8a878; --ai-surface: rgba(240, 185, 100, 0.06);
  --success: #34d399; --success-bg: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.12);
  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18); --hero-bloom-green: rgba(52, 211, 153, 0.12);
  --dot-grid: rgba(255, 255, 255, 0.025);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --mosaic-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  --h1-accent-color: var(--energy); --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);
  --footer-bg: var(--bg);
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

.btn-primary:hover { background: var(--energy-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px var(--energy-glow-strong); }

.nav-menu a { color: var(--text); font-size: 14px; font-weight: 500; padding: 8px 0; transition: color 0.15s; }

.signup-page { background: var(--hero-bg); padding: 56px 0 80px; min-height: calc(100vh - 64px); position: relative; overflow: hidden; }

.signup-page::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%), radial-gradient(circle at 85% 75%, var(--hero-bloom-green) 0%, transparent 40%); pointer-events: none; }

.signup-page::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; mask-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 70%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 70%); }

.signup-page .container { position: relative; z-index: 2; }

.signup-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 56px; align-items: flex-start; max-width: 1080px; margin: 0 auto; }

.signup-form-wrap {}

.signup-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--energy); background: var(--surface); border: 1px solid var(--border); padding: 5px 12px; border-radius: 999px; margin-bottom: 20px; box-shadow: var(--card-shadow); }

.signup-eyebrow svg { width: 13px; height: 13px; }

.signup-headline { font-size: 40px; line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 14px; font-weight: 600; color: var(--navy); }

[data-theme="dark"] .signup-headline { color: var(--text); }

.signup-headline em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .signup-headline em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.signup-subhead { font-size: 17px; color: var(--text-sub); line-height: 1.55; margin-bottom: 32px; max-width: 480px; }

.signup-subhead strong { color: var(--text); font-weight: 500; }

.signup-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--card-hover-shadow); }

.signup-sso { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; color: var(--text); font-weight: 500; cursor: pointer; transition: all 0.15s; }

.signup-sso:hover { background: var(--surface-hover); border-color: var(--navy-soft); }

.signup-sso-icon { width: 18px; height: 18px; }

.signup-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0 18px; }

.signup-divider::before, .signup-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.signup-divider span { font-size: 11px; color: var(--text-muted); letter-spacing: 0.1em; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; }

.form-row { margin-bottom: 16px; }

.form-row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-label { display: block; font-size: 12px; color: var(--text-sub); font-weight: 500; margin-bottom: 6px; letter-spacing: 0.02em; }

.form-label .req { color: var(--energy); }

.form-input { width: 100%; padding: 11px 14px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; color: var(--text); transition: all 0.15s; }

.form-input::placeholder { color: var(--text-muted); }

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

.form-help { font-size: 11px; color: var(--text-muted); margin-top: 5px; line-height: 1.4; }

.form-checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; margin-bottom: 18px; }

.form-checkbox { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--energy); flex-shrink: 0; }

.form-checkbox-label { font-size: 12px; color: var(--text-sub); line-height: 1.5; }

.form-checkbox-label a { color: var(--energy); }

.form-submit-row { margin-top: 8px; }

.form-submit-row .btn { width: 100%; padding: 13px 22px; font-size: 15px; }

.form-foot-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 18px; line-height: 1.5; padding-top: 16px; border-top: 1px solid var(--border); }

.form-foot-note a { color: var(--energy); font-weight: 500; }

.signup-side {}

.signup-side-card { background: linear-gradient(135deg, var(--navy) 0%, #2d4f8a 100%); color: #fff; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--mosaic-shadow); position: relative; overflow: hidden; }

[data-theme="dark"] .signup-side-card { background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%); border: 1px solid var(--border); }

.signup-side-card::before { content: ''; position: absolute; top: -50%; right: -10%; width: 50%; height: 200%; background: radial-gradient(circle, var(--energy-glow) 0%, transparent 60%); pointer-events: none; }

.signup-side-card > * { position: relative; z-index: 1; }

.signup-side-tag { display: inline-block; font-size: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; margin-bottom: 14px; }

[data-theme="dark"] .signup-side-tag { background: var(--success-bg); color: var(--success); }

.signup-side-card h3 { color: #fff; font-size: 22px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }

.signup-side-price { font-family: 'JetBrains Mono', monospace; font-size: 32px; font-weight: 600; color: #fff; margin-bottom: 4px; letter-spacing: -0.01em; }

.signup-side-price-unit { font-size: 13px; color: rgba(255, 255, 255, 0.7); font-weight: 400; }

[data-theme="dark"] .signup-side-price-unit { color: var(--text-muted); }

.signup-side-ceiling { font-size: 13px; color: rgba(255, 255, 255, 0.8); margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }

[data-theme="dark"] .signup-side-ceiling { color: var(--text-sub); border-bottom-color: var(--border); }

.signup-side-features { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }

.signup-side-features li { font-size: 13px; color: rgba(255, 255, 255, 0.9); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }

[data-theme="dark"] .signup-side-features li { color: var(--text-sub); }

.signup-side-features li::before { content: ''; width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); background-size: 14px; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-top: 1px; }

[data-theme="dark"] .signup-side-features li::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); }

.signup-side-upgrade { padding: 14px 16px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-md); font-size: 12px; color: rgba(255, 255, 255, 0.85); line-height: 1.5; }

[data-theme="dark"] .signup-side-upgrade { background: var(--ai-surface); border-color: var(--ai-border); color: var(--text-sub); }

.signup-side-upgrade strong { color: #fff; font-weight: 500; display: block; margin-bottom: 4px; font-size: 13px; }

[data-theme="dark"] .signup-side-upgrade strong { color: var(--ai-text); }

.signup-trust { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.signup-trust-pill { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 12px; color: var(--text); font-weight: 500; }

.signup-trust-pill-icon { width: 22px; height: 22px; border-radius: 6px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--success); flex-shrink: 0; }

.signup-trust-pill-icon svg { width: 11px; height: 11px; }

.signup-trust-pill-text { line-height: 1.3; }

.signup-trust-pill-text span { display: block; font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-top: 1px; }

.signup-next { background: var(--bg); border-top: 1px solid var(--border); padding: 72px 0; }

.signup-next-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }

.signup-next-head .eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-bottom: 10px; }

.signup-next-head h2 { font-size: 28px; color: var(--text); margin-bottom: 10px; letter-spacing: -0.02em; }

.signup-next-head p { font-size: 15px; color: var(--text-sub); line-height: 1.55; }

.next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; position: relative; }

.next-grid::before { content: ''; position: absolute; top: 30px; left: 16%; right: 16%; height: 2px; background: var(--border); z-index: 0; }

.next-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 22px; text-align: center; position: relative; z-index: 1; box-shadow: var(--card-shadow); }

.next-step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--bg); border: 2px solid var(--energy); color: var(--energy); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; }

.next-step-num.done { background: var(--success); border-color: var(--success); color: #fff; }

[data-theme="dark"] .next-step-num.done { color: var(--bg); }

.next-step h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; letter-spacing: -0.005em; }

.next-step p { font-size: 13px; color: var(--text-sub); line-height: 1.55; }

.next-step p strong { color: var(--text); font-weight: 500; }

.next-step-meta { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-top: 8px; }

.signup-reassurance { background: var(--surface-elevated); border-top: 1px solid var(--border); padding: 56px 0; }

.reassurance-head { text-align: center; margin-bottom: 32px; }

.reassurance-head h2 { font-size: 22px; font-weight: 500; color: var(--text); }

.reassurance-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

.reassurance-row { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); align-items: flex-start; }

.reassurance-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--energy); flex-shrink: 0; }

.reassurance-icon svg { width: 14px; height: 14px; }

.reassurance-text { font-size: 14px; color: var(--text); line-height: 1.55; }

.reassurance-text strong { font-weight: 600; }

.reassurance-text span { display: block; font-size: 12px; color: var(--text-sub); margin-top: 3px; }

.signup-alt { background: var(--bg); border-top: 1px solid var(--border); padding: 56px 0 80px; }

.alt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto; }

.alt-card { padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: all 0.2s ease; box-shadow: var(--card-shadow); text-decoration: none; }

.alt-card:hover { border-color: var(--navy-soft); box-shadow: var(--card-hover-shadow); transform: translateY(-2px); text-decoration: none; }

.alt-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.alt-card-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--energy); }

.alt-card-icon svg { width: 14px; height: 14px; }

.alt-card-tag { font-size: 10px; padding: 3px 8px; border-radius: 4px; background: var(--energy-glow); color: var(--energy); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.alt-card h3 { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 6px; letter-spacing: -0.005em; }

.alt-card p { font-size: 14px; color: var(--text-sub); line-height: 1.55; margin-bottom: 12px; }

.alt-card-link { font-size: 14px; color: var(--energy); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }

.alt-card-link svg { width: 13px; height: 13px; }

@media (max-width: 900px) {
  .signup-page { padding: 32px 0 56px; }
  .signup-grid { grid-template-columns: 1fr; gap: 32px; }
  .signup-headline { font-size: 30px; }
  .signup-form { padding: 24px 22px; }
  .signup-side-card { padding: 24px 22px; }
  .next-grid { grid-template-columns: 1fr; gap: 14px; }
  .next-grid::before { display: none; }
  .alt-grid { grid-template-columns: 1fr; gap: 14px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .signup-headline { font-size: 26px; }
  .signup-subhead { font-size: 15px; }
  .form-row.split { grid-template-columns: 1fr; gap: 16px; }
  .signup-trust { grid-template-columns: 1fr; }
  .signup-next, .signup-reassurance, .signup-alt { padding: 48px 0; }
}

:root {
  --bg: #ffffff; --bg-deep: #f0f2f7; --surface: #ffffff; --surface-elevated: #f8f9fc; --surface-hover: #f0f2f7; --border: #dde1ec; --border-strong: #c8cedd;
  --text: #1a1a2e; --text-sub: #555555; --text-muted: #999999;
  --navy: #1a3a6b; --navy-soft: #7a8aa3;
  --energy: #1d72f2; --energy-dark: #1560d6; --energy-glow: rgba(29, 114, 242, 0.18); --energy-glow-strong: rgba(29, 114, 242, 0.3);
  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%); --ai-glow: rgba(212, 160, 82, 0.15); --ai-border: #f0d896; --ai-text: #6b4922; --ai-text-sub: #946422; --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);
  --success: #27500A; --success-bg: #EAF3DE; --warning: #633806; --warning-bg: #FAEEDA; --purple: #3B1E76; --purple-bg: #EDE6FB; --teal: #14554F; --teal-bg: #D5F2EC; --coral: #B83232; --coral-bg: #FDEAEA;
  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06); --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --dot-grid: rgba(20, 48, 90, 0.05);
  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 8px 20px rgba(20, 48, 90, 0.10);
  --h1-accent-color: var(--energy); --h1-accent-gradient: none;
  --footer-bg: var(--surface-elevated); --final-cta-bg: var(--navy);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
}

[data-theme="dark"] {
  --bg: #0a0d1a; --bg-deep: #050811; --surface: #11151f; --surface-elevated: #161b29; --surface-hover: #1c2236; --border: #1f2638; --border-strong: #2b3349;
  --text: #e8eaf0; --text-sub: #9aa1b8; --text-muted: #5e667d;
  --navy: #4d7ec8; --navy-soft: #6680a8;
  --energy: #4596ff; --energy-dark: #2c7fe8; --energy-glow: rgba(69, 150, 255, 0.3); --energy-glow-strong: rgba(69, 150, 255, 0.5);
  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%); --ai-glow: rgba(240, 185, 100, 0.18); --ai-border: #4a3a1f; --ai-text: #f0b964; --ai-text-sub: #c8a878; --ai-surface: rgba(240, 185, 100, 0.06);
  --success: #34d399; --success-bg: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.12); --purple: #a78bfa; --purple-bg: rgba(167, 139, 250, 0.15); --teal: #5eead4; --teal-bg: rgba(94, 234, 212, 0.12); --coral: #f47474; --coral-bg: rgba(244, 116, 116, 0.12);
  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18); --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --dot-grid: rgba(255, 255, 255, 0.025);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --h1-accent-color: var(--energy); --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);
  --footer-bg: var(--bg); --final-cta-bg: var(--bg-deep);
}

.nav-menu a.active { color: var(--energy); position: relative; }

.sol-hero { background: var(--hero-bg); padding: 80px 0 56px; overflow: hidden; position: relative; text-align: center; }

.sol-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 25% 30%, var(--hero-bloom-blue) 0%, transparent 40%), radial-gradient(circle at 75% 70%, var(--hero-bloom-gold) 0%, transparent 40%); pointer-events: none; }

.sol-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); }

.sol-hero .container { position: relative; z-index: 2; max-width: 900px; }

.sol-hero .eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--energy); background: var(--surface); border: 1px solid var(--border); padding: 5px 12px; border-radius: 999px; margin-bottom: 20px; box-shadow: var(--card-shadow); }

.sol-hero h1 { font-size: 54px; line-height: 1.05; letter-spacing: -0.03em; margin: 0 auto 18px; font-weight: 600; color: var(--navy); max-width: 800px; }

[data-theme="dark"] .sol-hero h1 { color: var(--text); }

.sol-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .sol-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.sol-hero-sub { font-size: 18px; color: var(--text-sub); max-width: 640px; margin: 0 auto; line-height: 1.55; }

.sol-hero-sub strong { color: var(--text); font-weight: 500; }

.axis-section { padding: 72px 0; }

.axis-section.alt { background: var(--surface-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.axis-head { text-align: center; margin-bottom: 40px; max-width: 720px; margin-left: auto; margin-right: auto; }

.axis-head .eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--energy); margin-bottom: 14px; font-family: 'JetBrains Mono', monospace; }

.axis-head h2 { font-size: 32px; color: var(--navy); margin-bottom: 12px; letter-spacing: -0.02em; }

[data-theme="dark"] .axis-head h2 { color: var(--text); }

.axis-head h2 em { font-style: normal; color: var(--text-muted); font-weight: 500; }

.axis-head p { font-size: 15px; color: var(--text-sub); line-height: 1.55; }

.axis-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.axis-card { display: flex; flex-direction: column; padding: 28px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: all 0.2s ease; box-shadow: var(--card-shadow); text-decoration: none; position: relative; overflow: hidden; }

.axis-card:hover { border-color: var(--navy-soft); box-shadow: var(--card-hover-shadow); transform: translateY(-3px); text-decoration: none; }

.axis-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--energy); opacity: 0; transition: opacity 0.2s; }

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

.axis-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

.axis-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--energy); flex-shrink: 0; }

.axis-card-icon svg { width: 18px; height: 18px; }

.axis-card-tag { font-size: 10px; padding: 3px 8px; border-radius: 4px; background: var(--surface-elevated); color: var(--text-muted); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }

.axis-card h3 { font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 8px; letter-spacing: -0.01em; }

.axis-card .hook { font-size: 14px; color: var(--text-sub); line-height: 1.5; margin-bottom: 16px; flex: 1; }

.axis-card .hook strong { color: var(--text); font-weight: 500; }

.axis-card-meta { font-size: 12px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; padding-top: 14px; margin-top: auto; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }

.axis-card-meta .arrow { color: var(--energy); display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: 13px; font-family: 'Inter', sans-serif; }

.axis-card-meta .arrow svg { width: 12px; height: 12px; transition: transform 0.15s; }

.axis-card:hover .axis-card-meta .arrow svg { transform: translateX(2px); }

.unsure-section { background: var(--bg); padding: 64px 0; border-top: 1px solid var(--border); }

.unsure-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; max-width: 1080px; margin: 0 auto; }

.unsure-copy h2 { font-size: 28px; margin-bottom: 14px; line-height: 1.15; }

.unsure-copy h2 em { font-style: normal; color: var(--energy); }

[data-theme="dark"] .unsure-copy h2 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.unsure-copy p { font-size: 15px; color: var(--text-sub); line-height: 1.6; margin-bottom: 16px; }

.unsure-copy p strong { color: var(--text); font-weight: 500; }

.unsure-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.unsure-routes { display: flex; flex-direction: column; gap: 12px; }

.unsure-route { display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: center; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; transition: all 0.15s; }

.unsure-route:hover { border-color: var(--navy-soft); background: var(--surface-hover); text-decoration: none; }

.unsure-route-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--energy); }

.unsure-route-icon svg { width: 16px; height: 16px; }

.unsure-route-body { min-width: 0; }

.unsure-route-body .name { font-size: 14px; color: var(--text); font-weight: 500; }

.unsure-route-body .sub { font-size: 12px; color: var(--text-sub); margin-top: 2px; line-height: 1.4; }

.unsure-route-arrow { color: var(--energy); display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; gap: 4px; }

.unsure-route-arrow svg { width: 12px; height: 12px; transition: transform 0.15s; }

.unsure-route:hover .unsure-route-arrow svg { transform: translateX(2px); }

.final-cta p { color: rgba(255, 255, 255, 0.75); font-size: 18px; margin-bottom: 40px; }

@media (max-width: 1024px) {
  .axis-grid { grid-template-columns: repeat(2, 1fr); }
  .unsure-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .sol-hero { padding: 48px 0 40px; }
  .sol-hero h1 { font-size: 32px; }
  .sol-hero-sub { font-size: 16px; }
  .axis-section { padding: 56px 0; }
  .axis-head h2 { font-size: 24px; }
  .axis-grid { grid-template-columns: 1fr; gap: 14px; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
}

:root {
  --bg: #ffffff; --bg-deep: #f0f2f7; --surface: #ffffff; --surface-elevated: #f8f9fc; --surface-hover: #f0f2f7; --border: #dde1ec; --border-strong: #c8cedd;
  --text: #1a1a2e; --text-sub: #555555; --text-muted: #999999;
  --navy: #1a3a6b; --navy-soft: #7a8aa3;
  --energy: #1d72f2; --energy-dark: #1560d6; --energy-glow: rgba(29, 114, 242, 0.18); --energy-glow-strong: rgba(29, 114, 242, 0.3);
  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%); --ai-glow: rgba(212, 160, 82, 0.15); --ai-border: #f0d896; --ai-text: #6b4922; --ai-text-sub: #946422; --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);
  --success: #27500A; --success-bg: #EAF3DE; --warning: #633806; --warning-bg: #FAEEDA; --purple: #3B1E76; --purple-bg: #EDE6FB; --teal: #14554F; --teal-bg: #D5F2EC; --coral: #B83232; --coral-bg: #FDEAEA;
  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06); --hero-bloom-gold: rgba(212, 160, 82, 0.05); --hero-bloom-purple: rgba(124, 93, 199, 0.04);
  --dot-grid: rgba(20, 48, 90, 0.05);
  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.08);
  --mosaic-shadow: 0 24px 48px rgba(20, 48, 90, 0.08), 0 8px 16px rgba(20, 48, 90, 0.06);
  --h1-accent-color: var(--energy); --h1-accent-gradient: none;
  --footer-bg: var(--surface-elevated); --final-cta-bg: var(--navy);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
}

[data-theme="dark"] {
  --bg: #0a0d1a; --bg-deep: #050811; --surface: #11151f; --surface-elevated: #161b29; --surface-hover: #1c2236; --border: #1f2638; --border-strong: #2b3349;
  --text: #e8eaf0; --text-sub: #9aa1b8; --text-muted: #5e667d;
  --navy: #4d7ec8; --navy-soft: #6680a8;
  --energy: #4596ff; --energy-dark: #2c7fe8; --energy-glow: rgba(69, 150, 255, 0.3); --energy-glow-strong: rgba(69, 150, 255, 0.5);
  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%); --ai-glow: rgba(240, 185, 100, 0.18); --ai-border: #4a3a1f; --ai-text: #f0b964; --ai-text-sub: #c8a878; --ai-surface: rgba(240, 185, 100, 0.06);
  --success: #34d399; --success-bg: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.12); --purple: #a78bfa; --purple-bg: rgba(167, 139, 250, 0.15); --teal: #5eead4; --teal-bg: rgba(94, 234, 212, 0.12); --coral: #f47474; --coral-bg: rgba(244, 116, 116, 0.12);
  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18); --hero-bloom-gold: rgba(240, 185, 100, 0.12); --hero-bloom-purple: rgba(167, 139, 250, 0.10);
  --dot-grid: rgba(255, 255, 255, 0.025);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --mosaic-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  --h1-accent-color: var(--energy); --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);
  --footer-bg: var(--bg); --final-cta-bg: var(--bg-deep);
}

.seg-hero { background: var(--hero-bg); padding: 80px 0; overflow: hidden; position: relative; }

.seg-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%), radial-gradient(circle at 85% 75%, var(--hero-bloom-gold) 0%, transparent 40%); pointer-events: none; }

.seg-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); }

.seg-hero .container { position: relative; z-index: 2; }

.seg-hero-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; }

.seg-hero h1 { font-size: 56px; line-height: 1.0; letter-spacing: -0.03em; margin-bottom: 20px; font-weight: 600; color: var(--navy); }

[data-theme="dark"] .seg-hero h1 { color: var(--text); }

.seg-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .seg-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.seg-hero-sub { font-size: 19px; color: var(--text-sub); line-height: 1.55; margin-bottom: 28px; }

.seg-hero-sub strong { color: var(--text); font-weight: 500; }

.seg-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.seg-hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--mosaic-shadow); }

.seg-card-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }

.seg-card-head-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--energy); }

.seg-card-head-icon svg { width: 16px; height: 16px; }

.seg-card-head h6 { font-size: 14px; font-weight: 500; color: var(--text); flex: 1; }

.seg-card-head .meta { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.pain-bar { background: var(--surface-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 0; }

.pain-bar-title { text-align: center; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-bottom: 24px; }

.pain-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

.pain-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }

.pain-item-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--coral); font-weight: 500; flex-shrink: 0; padding-top: 1px; }

.pain-item-text { font-size: 13px; color: var(--text); line-height: 1.5; }

.plan-rec { padding: 64px 0; }

.plan-rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 960px; margin: 0 auto; }

.plan-rec-copy h2 { font-size: 30px; margin-bottom: 14px; }

.plan-rec-copy p { font-size: 16px; color: var(--text-sub); line-height: 1.6; margin-bottom: 20px; }

.plan-rec-copy p strong { color: var(--text); font-weight: 500; }

.plan-rec-link { color: var(--energy); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }

.plan-rec-link svg { width: 14px; height: 14px; }

.plan-rec-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--card-hover-shadow); position: relative; }

.plan-rec-card.gradient { background: linear-gradient(135deg, var(--navy) 0%, #2d4f8a 100%); color: #fff; border: none; }

[data-theme="dark"] .plan-rec-card.gradient { background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%); border: 1px solid var(--border); }

.plan-rec-card.gradient h3 { color: #fff; }

.plan-rec-tag { display: inline-block; font-size: 10px; padding: 4px 10px; border-radius: 999px; background: var(--success-bg); color: var(--success); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; margin-bottom: 12px; }

.plan-rec-card.gradient .plan-rec-tag { background: rgba(255, 255, 255, 0.16); color: #fff; }

[data-theme="dark"] .plan-rec-card.gradient .plan-rec-tag { background: var(--energy-glow); color: var(--energy); }

.plan-rec-card h3 { font-size: 24px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }

.plan-rec-price { font-family: 'JetBrains Mono', monospace; font-size: 32px; font-weight: 600; color: var(--text); margin-bottom: 4px; letter-spacing: -0.01em; }

.plan-rec-card.gradient .plan-rec-price { color: #fff; }

.plan-rec-price-unit { font-size: 14px; color: var(--text-muted); font-weight: 400; }

.plan-rec-card.gradient .plan-rec-price-unit { color: rgba(255, 255, 255, 0.7); }

[data-theme="dark"] .plan-rec-card.gradient .plan-rec-price-unit { color: var(--text-muted); }

.plan-rec-ceiling { font-size: 13px; color: var(--text-sub); margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }

.plan-rec-card.gradient .plan-rec-ceiling { color: rgba(255, 255, 255, 0.8); border-bottom-color: rgba(255, 255, 255, 0.15); }

[data-theme="dark"] .plan-rec-card.gradient .plan-rec-ceiling { color: var(--text-sub); border-bottom-color: var(--border); }

.plan-rec-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }

.plan-rec-features li { font-size: 13px; color: var(--text-sub); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }

.plan-rec-card.gradient .plan-rec-features li { color: rgba(255, 255, 255, 0.85); }

[data-theme="dark"] .plan-rec-card.gradient .plan-rec-features li { color: var(--text-sub); }

.plan-rec-features li::before { content: ''; width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327500A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); background-size: 14px; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-top: 1px; }

[data-theme="dark"] .plan-rec-features li::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); }

.plan-rec-card.gradient .plan-rec-features li::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); }

[data-theme="dark"] .plan-rec-card.gradient .plan-rec-features li::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); }

.plan-rec-cta { display: block; width: 100%; }

.why-section { padding: 96px 0; }

.why-section.alt { background: var(--surface-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.why-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }

.why-head .eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--energy); margin-bottom: 16px; }

.why-head h2 { margin-bottom: 16px; }

.why-head p { font-size: 17px; color: var(--text-sub); line-height: 1.6; }

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

.why-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; transition: all 0.2s ease; box-shadow: var(--card-shadow); }

.why-card:hover { border-color: var(--navy-soft); box-shadow: var(--card-hover-shadow); transform: translateY(-2px); }

.why-card-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--energy); margin-bottom: 16px; }

.why-card-icon svg { width: 20px; height: 20px; }

.why-card h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; color: var(--text); }

.why-card p { font-size: 14px; color: var(--text-sub); line-height: 1.6; }

.why-card p strong { color: var(--text); font-weight: 500; }

.why-card-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--energy); font-weight: 500; margin-top: 12px; }

.why-card-link svg { width: 13px; height: 13px; }

.unused-block { padding: 64px 0; border-top: 1px solid var(--border); }

.unused-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; max-width: 1080px; margin: 0 auto; }

.unused-copy h2 { font-size: 28px; margin-bottom: 12px; }

.unused-copy p { font-size: 16px; color: var(--text-sub); line-height: 1.6; margin-bottom: 16px; }

.unused-copy p strong { color: var(--text); font-weight: 500; }

.unused-copy-link { color: var(--energy); font-size: 14px; font-weight: 500; }

.unused-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.unused-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--text-sub); font-weight: 500; }

.unused-pill svg { width: 12px; height: 12px; color: var(--text-muted); }

.unused-pill.dim { opacity: 0.5; }

.pattern-strip { background: var(--surface-elevated); border-top: 1px solid var(--border); padding: 64px 0; }

.pattern-head { text-align: center; margin-bottom: 32px; }

.pattern-head .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.pattern-head h2 { font-size: 24px; font-weight: 500; color: var(--text); margin-top: 6px; }

.pattern-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

.pattern-row { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }

.pattern-row-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-sub); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; }

.pattern-row-text { font-size: 14px; color: var(--text-sub); line-height: 1.55; }

.pattern-row-text strong { color: var(--text); font-weight: 500; }

.other-solutions { background: var(--bg); padding: 56px 0; border-top: 1px solid var(--border); }

.other-solutions-head { text-align: center; margin-bottom: 24px; font-size: 13px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.other-solutions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 960px; margin: 0 auto; }

.other-sol-card { padding: 18px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); text-align: center; transition: all 0.15s; text-decoration: none; }

.other-sol-card:hover { border-color: var(--navy-soft); background: var(--surface-hover); }

.other-sol-card.current { background: var(--success-bg); border-color: var(--success); pointer-events: none; }

[data-theme="dark"] .other-sol-card.current { background: rgba(52, 211, 153, 0.08); }

.other-sol-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; margin-bottom: 4px; }

.other-sol-card.current .other-sol-label { color: var(--success); }

.other-sol-title { font-size: 14px; font-weight: 500; color: var(--text); }

.other-sol-card.current .other-sol-title { color: var(--success); }

[data-theme="dark"] .other-sol-card.current .other-sol-title { color: var(--success); }

@media (max-width: 1024px) {
  .seg-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .seg-hero h1 { font-size: 42px; }
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-rec-grid { grid-template-columns: 1fr; gap: 32px; }
  .why-grid { grid-template-columns: 1fr; gap: 16px; }
  .unused-grid { grid-template-columns: 1fr; gap: 32px; }
  .other-solutions-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .seg-hero { padding: 48px 0 56px; }
  .seg-hero h1 { font-size: 32px; }
  .seg-hero-sub { font-size: 16px; }
  h2 { font-size: 26px; }
  .pain-grid { grid-template-columns: 1fr; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
}

.ind-hero { background: var(--hero-bg); padding: 80px 0; overflow: hidden; position: relative; }

.ind-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%), radial-gradient(circle at 85% 75%, var(--hero-bloom-gold) 0%, transparent 40%); pointer-events: none; }

.ind-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); }

.ind-hero .container { position: relative; z-index: 2; }

.ind-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }

.ind-hero h1 { font-size: 52px; line-height: 1.0; letter-spacing: -0.03em; margin-bottom: 20px; font-weight: 600; color: var(--navy); }

[data-theme="dark"] .ind-hero h1 { color: var(--text); }

.ind-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .ind-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.ind-hero-sub { font-size: 18px; color: var(--text-sub); line-height: 1.55; margin-bottom: 28px; }

.ind-hero-sub strong { color: var(--text); font-weight: 500; }

.ind-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.ind-hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--mosaic-shadow); }

.ind-card-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }

.ind-card-head-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--energy); }

.ind-card-head-icon svg { width: 16px; height: 16px; }

.ind-card-head h6 { font-size: 14px; font-weight: 500; color: var(--text); flex: 1; }

.ind-card-head .meta { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.modules-grid-section { padding: 96px 0; }

.modules-grid-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }

.modules-grid-head .eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--energy); margin-bottom: 16px; }

.modules-grid-head h2 { margin-bottom: 16px; }

.modules-grid-head p { font-size: 17px; color: var(--text-sub); line-height: 1.6; }

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

.module-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: all 0.2s ease; box-shadow: var(--card-shadow); display: flex; flex-direction: column; }

.module-card:hover { border-color: var(--navy-soft); box-shadow: var(--card-hover-shadow); transform: translateY(-2px); }

.module-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

.module-card-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--energy); }

.module-card-icon svg { width: 18px; height: 18px; }

.module-card-label { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.module-card h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; color: var(--text); }

.module-card > p { font-size: 14px; color: var(--text-sub); line-height: 1.6; margin-bottom: 16px; flex: 1; }

.module-card > p strong { color: var(--text); font-weight: 500; }

.module-card-bullets { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 6px; }

.module-card-bullets li { font-size: 12px; color: var(--text-sub); padding-left: 14px; position: relative; line-height: 1.5; }

.module-card-bullets li::before { content: '·'; position: absolute; left: 0; color: var(--energy); font-weight: 700; }

.module-card-bullets li strong { color: var(--text); font-weight: 500; }

.module-card-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--energy); font-weight: 500; margin-top: auto; }

.module-card-link svg { width: 13px; height: 13px; }

.scenario-section { background: var(--surface-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 96px 0; }

.scenario-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }

.scenario-grid.reverse { grid-template-columns: 7fr 5fr; }

.scenario-grid.reverse .scenario-copy { order: 2; }

.scenario-grid.reverse .scenario-visual { order: 1; }

.scenario-copy .eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--energy); margin-bottom: 16px; }

.scenario-copy h2 { font-size: 32px; margin-bottom: 18px; line-height: 1.15; }

.scenario-copy h2 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .scenario-copy h2 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.scenario-copy > p { font-size: 16px; color: var(--text-sub); line-height: 1.65; margin-bottom: 18px; }

.scenario-copy > p strong { color: var(--text); font-weight: 500; }

.scenario-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 12px; }

.scenario-list li { font-size: 14px; color: var(--text-sub); line-height: 1.55; display: flex; align-items: flex-start; gap: 10px; }

.scenario-list li strong { color: var(--text); font-weight: 500; }

.scenario-list li::before { content: ''; width: 18px; height: 18px; background: var(--success-bg); border-radius: 50%; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327500A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); background-size: 11px; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-top: 1px; }

[data-theme="dark"] .scenario-list li::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); }

.scenario-visual { }

.scenario-mock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--card-hover-shadow); }

.statutory-strip { padding: 64px 0; }

.statutory-strip-head { text-align: center; max-width: 720px; margin: 0 auto 32px; }

.statutory-strip-head .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--energy); }

.statutory-strip-head h2 { font-size: 26px; margin-top: 8px; margin-bottom: 10px; color: var(--text); }

.statutory-strip-head p { font-size: 15px; color: var(--text-sub); line-height: 1.55; }

.statutory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1080px; margin: 0 auto; }

.statutory-card { padding: 18px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); text-align: center; }

.statutory-card-label { font-size: 10px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; margin-bottom: 6px; }

.statutory-card-value { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }

.statutory-card-meta { font-size: 11px; color: var(--text-sub); margin-top: 4px; line-height: 1.4; }

.size-link-strip { background: var(--bg); padding: 56px 0; border-top: 1px solid var(--border); }

.size-link-head { text-align: center; margin-bottom: 24px; font-size: 13px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.size-link-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 960px; margin: 0 auto; }

.size-link-card { padding: 18px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); text-align: center; transition: all 0.15s; text-decoration: none; }

.size-link-card:hover { border-color: var(--navy-soft); background: var(--surface-hover); }

.size-link-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; margin-bottom: 4px; }

.size-link-title { font-size: 14px; font-weight: 500; color: var(--text); }

.other-industries { background: var(--surface-elevated); padding: 56px 0; border-top: 1px solid var(--border); }

.other-ind-head { text-align: center; margin-bottom: 24px; font-size: 13px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.other-ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 960px; margin: 0 auto; }

.other-ind-card { padding: 18px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); text-align: center; transition: all 0.15s; text-decoration: none; }

.other-ind-card:hover { border-color: var(--navy-soft); background: var(--surface-hover); }

.other-ind-card.current { background: var(--success-bg); border-color: var(--success); pointer-events: none; }

[data-theme="dark"] .other-ind-card.current { background: rgba(52, 211, 153, 0.08); }

.other-ind-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; margin-bottom: 4px; }

.other-ind-card.current .other-ind-label { color: var(--success); }

.other-ind-title { font-size: 14px; font-weight: 500; color: var(--text); }

.other-ind-card.current .other-ind-title { color: var(--success); }

[data-theme="dark"] .other-ind-card.current .other-ind-title { color: var(--success); }

@media (max-width: 1024px) {
  .ind-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .ind-hero h1 { font-size: 40px; }
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .modules-grid { grid-template-columns: 1fr; gap: 16px; }
  .scenario-grid { grid-template-columns: 1fr; gap: 32px; }
  .scenario-grid.reverse .scenario-copy { order: 1; }
  .scenario-grid.reverse .scenario-visual { order: 2; }
  .statutory-grid { grid-template-columns: repeat(2, 1fr); }
  .size-link-grid { grid-template-columns: repeat(2, 1fr); }
  .other-ind-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .ind-hero { padding: 48px 0 56px; }
  .ind-hero h1 { font-size: 30px; }
  .ind-hero-sub { font-size: 16px; }
  h2 { font-size: 24px; }
  .pain-grid { grid-template-columns: 1fr; }
  .statutory-grid { grid-template-columns: 1fr; }
  .modules-grid-section, .scenario-section, .statutory-strip, .pattern-strip { padding: 56px 0; }
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 28px; }
}

:root {
  --bg: #ffffff; --bg-deep: #f0f2f7; --surface: #ffffff; --surface-elevated: #f8f9fc; --surface-hover: #f0f2f7; --border: #dde1ec; --border-strong: #c8cedd;
  --text: #1a1a2e; --text-sub: #555555; --text-muted: #999999;
  --navy: #1a3a6b; --navy-soft: #7a8aa3;
  --energy: #1d72f2; --energy-dark: #1560d6; --energy-glow: rgba(29, 114, 242, 0.18); --energy-glow-strong: rgba(29, 114, 242, 0.3);
  --ai-gradient: linear-gradient(135deg, #d4a052 0%, #c08545 100%); --ai-glow: rgba(212, 160, 82, 0.15); --ai-border: #f0d896; --ai-text: #6b4922; --ai-text-sub: #946422; --ai-surface: linear-gradient(135deg, #fef6e3 0%, #fefaf2 100%);
  --success: #27500A; --success-bg: #EAF3DE; --warning: #633806; --warning-bg: #FAEEDA; --purple: #3B1E76; --purple-bg: #EDE6FB; --teal: #14554F; --teal-bg: #D5F2EC; --coral: #B83232; --coral-bg: #FDEAEA;
  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06); --hero-bloom-gold: rgba(212, 160, 82, 0.05);
  --dot-grid: rgba(20, 48, 90, 0.05);
  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.08);
  --h1-accent-color: var(--energy); --h1-accent-gradient: none;
  --footer-bg: var(--surface-elevated);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
}

[data-theme="dark"] {
  --bg: #0a0d1a; --bg-deep: #050811; --surface: #11151f; --surface-elevated: #161b29; --surface-hover: #1c2236; --border: #1f2638; --border-strong: #2b3349;
  --text: #e8eaf0; --text-sub: #9aa1b8; --text-muted: #5e667d;
  --navy: #4d7ec8; --navy-soft: #6680a8;
  --energy: #4596ff; --energy-dark: #2c7fe8; --energy-glow: rgba(69, 150, 255, 0.3); --energy-glow-strong: rgba(69, 150, 255, 0.5);
  --ai-gradient: linear-gradient(135deg, #f0b964 0%, #d4955a 100%); --ai-glow: rgba(240, 185, 100, 0.18); --ai-border: #4a3a1f; --ai-text: #f0b964; --ai-text-sub: #c8a878; --ai-surface: rgba(240, 185, 100, 0.06);
  --success: #34d399; --success-bg: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.12); --purple: #a78bfa; --purple-bg: rgba(167, 139, 250, 0.15); --teal: #5eead4; --teal-bg: rgba(94, 234, 212, 0.12); --coral: #f47474; --coral-bg: rgba(244, 116, 116, 0.12);
  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18); --hero-bloom-gold: rgba(240, 185, 100, 0.12);
  --dot-grid: rgba(255, 255, 255, 0.025);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --h1-accent-color: var(--energy); --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);
  --footer-bg: var(--bg);
}

.res-hero { background: var(--hero-bg); padding: 64px 0 40px; overflow: hidden; position: relative; }

.res-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 25%, var(--hero-bloom-blue) 0%, transparent 35%), radial-gradient(circle at 85% 75%, var(--hero-bloom-gold) 0%, transparent 40%); pointer-events: none; }

.res-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); }

.res-hero .container { position: relative; z-index: 2; max-width: 900px; }

.res-hero .eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--energy); background: var(--surface); border: 1px solid var(--border); padding: 5px 12px; border-radius: 999px; margin-bottom: 20px; box-shadow: var(--card-shadow); }

.res-hero h1 { font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 16px; font-weight: 600; color: var(--navy); }

[data-theme="dark"] .res-hero h1 { color: var(--text); }

.res-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .res-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.res-hero p { font-size: 17px; color: var(--text-sub); max-width: 620px; line-height: 1.55; }

.res-filters { background: var(--surface-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; position: sticky; top: 64px; z-index: 50; backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); background: rgba(248, 249, 252, 0.85); }

[data-theme="dark"] .res-filters { background: rgba(22, 27, 41, 0.85); }

.res-filters .container { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.res-filter-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; margin-right: 8px; font-weight: 500; }

.res-filter-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--text-sub); font-weight: 500; background: var(--surface); border: 1px solid var(--border); transition: all 0.15s; cursor: pointer; }

.res-filter-btn:hover { border-color: var(--navy-soft); color: var(--text); }

.res-filter-btn.active { background: var(--energy); color: #fff; border-color: var(--energy); }

.res-filter-btn .count { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); padding: 1px 6px; background: var(--surface-elevated); border-radius: 4px; }

.res-filter-btn:hover .count { background: var(--surface); }

.res-filter-btn.active .count { background: rgba(255, 255, 255, 0.18); color: #fff; }

.res-featured { padding: 56px 0 40px; }

.res-featured-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }

.res-feat-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--card-shadow); transition: all 0.2s ease; text-decoration: none; }

.res-feat-card:hover { border-color: var(--navy-soft); box-shadow: var(--card-hover-shadow); transform: translateY(-2px); text-decoration: none; }

.res-feat-card.lead .feat-thumb { height: 240px; }

.res-feat-card .feat-thumb { height: 120px; background: var(--surface-elevated); position: relative; overflow: hidden; }

.res-feat-card .feat-body { padding: 22px 24px; }

.res-feat-card.lead .feat-body { padding: 28px; }

.res-feat-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.res-type-tag { display: inline-block; font-size: 10px; padding: 3px 9px; border-radius: 4px; background: var(--energy-glow); color: var(--energy); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.res-type-tag.guide { background: var(--purple-bg); color: var(--purple); }

.res-type-tag.template { background: var(--teal-bg); color: var(--teal); }

.res-type-tag.tool { background: var(--ai-surface); color: var(--ai-text); border: 1px solid var(--ai-border); }

[data-theme="dark"] .res-type-tag.tool { background: rgba(240, 185, 100, 0.1); }

.res-meta-info { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.res-feat-card h3 { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.3; }

.res-feat-card.lead h3 { font-size: 24px; line-height: 1.2; }

.res-feat-card p { font-size: 14px; color: var(--text-sub); line-height: 1.55; margin-bottom: 12px; }

.res-feat-stub { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); font-style: italic; font-weight: 400; }

.res-feat-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--energy); font-weight: 500; }

.res-feat-link svg { width: 13px; height: 13px; }

.feat-thumb.bg-navy { background: linear-gradient(135deg, var(--navy) 0%, #2d4f8a 100%); position: relative; }

.feat-thumb.bg-navy::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, var(--energy-glow-strong) 0%, transparent 60%); }

.feat-thumb.bg-gold { background: var(--ai-gradient); position: relative; }

.feat-thumb.bg-teal { background: linear-gradient(135deg, var(--teal) 0%, #287a72 100%); position: relative; }

.feat-thumb.bg-success { background: linear-gradient(135deg, var(--success) 0%, #3a7d12 100%); }

.feat-thumb.bg-purple { background: linear-gradient(135deg, var(--purple) 0%, #5d3aa7 100%); }

.feat-thumb.bg-coral { background: linear-gradient(135deg, var(--coral) 0%, #d04545 100%); }

.feat-thumb.bg-slate { background: linear-gradient(135deg, #2a3548 0%, #404e6a 100%); }

[data-theme="dark"] .feat-thumb.bg-slate { background: linear-gradient(135deg, #1a2236 0%, #2b3349 100%); }

.feat-thumb-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.45); font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.04em; font-weight: 500; text-transform: uppercase; z-index: 1; pointer-events: none; }

.feat-thumb svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.75); width: 56px; height: 56px; z-index: 1; }

.res-feat-card.lead .feat-thumb svg { width: 80px; height: 80px; }

.res-grid-section { padding: 24px 0 72px; }

.res-grid-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }

.res-grid-head h2 { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }

.res-grid-head .meta { font-size: 13px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.res-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.2s ease; box-shadow: var(--card-shadow); }

.res-card:hover { border-color: var(--navy-soft); box-shadow: var(--card-hover-shadow); transform: translateY(-2px); }

.res-card.hidden { display: none; }

.res-card .feat-thumb { height: 140px; }

.res-card .feat-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }

.res-card h3 { font-size: 16px; line-height: 1.35; }

.res-card p { flex: 1; }

.res-empty { display: none; padding: 56px 24px; text-align: center; color: var(--text-muted); background: var(--surface-elevated); border-radius: var(--radius-md); border: 1px solid var(--border); }

.res-empty.show { display: block; }

.calendar-cta { background: var(--surface-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 64px 0; }

.calendar-cta-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; max-width: 1080px; margin: 0 auto; }

.calendar-cta-copy .eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ai-text); background: var(--ai-surface); border: 1px solid var(--ai-border); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }

.calendar-cta-copy h2 { font-size: 28px; margin-bottom: 14px; }

.calendar-cta-copy p { font-size: 15px; color: var(--text-sub); line-height: 1.6; margin-bottom: 16px; }

.calendar-cta-copy p strong { color: var(--text); font-weight: 500; }

.calendar-cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.calendar-mock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--card-hover-shadow); }

.calendar-mock-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }

.calendar-mock-head-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--energy); }

.calendar-mock-head-icon svg { width: 16px; height: 16px; }

.calendar-mock-head h6 { font-size: 14px; font-weight: 500; color: var(--text); flex: 1; }

.calendar-mock-head .meta { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.calendar-row { display: grid; grid-template-columns: 50px 1fr 80px; gap: 14px; align-items: center; padding: 10px 12px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }

.calendar-row-date { text-align: center; padding: 4px 0; background: var(--surface); border-radius: 6px; border: 1px solid var(--border); }

.calendar-row-date .d { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 600; color: var(--text); line-height: 1; }

.calendar-row-date .m { font-size: 8px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; margin-top: 2px; }

.calendar-row-body .name { font-size: 12px; color: var(--text); font-weight: 500; }

.calendar-row-body .sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }

.calendar-row-status { text-align: right; font-size: 10px; padding: 3px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-weight: 500; }

.calendar-row-status.due { background: var(--ai-surface); color: var(--ai-text); border: 1px solid var(--ai-border); }

.calendar-row-status.upcoming { background: var(--surface); color: var(--text-sub); border: 1px solid var(--border); }

.calendar-row-status.filed { background: var(--success-bg); color: var(--success); }

.newsletter-section { padding: 72px 0; background: var(--bg); }

.newsletter-card { max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 36px; text-align: center; box-shadow: var(--card-shadow); }

.newsletter-card h2 { font-size: 24px; color: var(--text); margin-bottom: 10px; letter-spacing: -0.015em; }

.newsletter-card p { font-size: 15px; color: var(--text-sub); line-height: 1.55; margin-bottom: 20px; max-width: 480px; margin-left: auto; margin-right: auto; }

.newsletter-form { display: flex; gap: 8px; max-width: 440px; margin: 0 auto; }

.newsletter-form input { flex: 1; padding: 11px 14px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; color: var(--text); transition: all 0.15s; }

.newsletter-form input::placeholder { color: var(--text-muted); }

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

.newsletter-form button { padding: 11px 20px; }

.newsletter-foot { font-size: 11px; color: var(--text-muted); margin-top: 14px; line-height: 1.5; }

.newsletter-foot a { color: var(--text-sub); }

.topics-strip { background: var(--surface-elevated); border-top: 1px solid var(--border); padding: 56px 0; }

.topics-head { text-align: center; margin-bottom: 32px; }

.topics-head .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.topics-head h2 { font-size: 24px; font-weight: 500; color: var(--text); margin-top: 6px; }

.topics-grid { display: flex; flex-wrap: wrap; gap: 10px; max-width: 900px; margin: 0 auto; justify-content: center; }

.topic-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--text); font-weight: 500; transition: all 0.15s; text-decoration: none; }

.topic-chip:hover { border-color: var(--navy-soft); background: var(--surface-hover); text-decoration: none; }

.topic-chip-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); padding: 1px 7px; background: var(--surface-elevated); border-radius: 4px; }

@media (max-width: 1024px) {
  .res-featured-grid { grid-template-columns: 1fr; gap: 16px; }
  .res-grid { grid-template-columns: repeat(2, 1fr); }
  .calendar-cta-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .res-hero { padding: 40px 0 28px; }
  .res-hero h1 { font-size: 30px; }
  .res-grid { grid-template-columns: 1fr; }
  .res-feat-card.lead .feat-thumb { height: 160px; }
  .newsletter-form { flex-direction: column; gap: 10px; }
  .newsletter-form button { width: 100%; }
  .res-filters { position: relative; top: 0; }
}

.post-page { padding: 56px 0 80px; background: var(--bg); }

.post-wrap { max-width: 880px; margin: 0 auto; }

.post-meta-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }

.post-type-tag { display: inline-block; font-size: 10px; padding: 4px 10px; border-radius: 4px; background: var(--purple-bg); color: var(--purple); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.post-date { font-size: 13px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.post-reading { font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }

.post-reading::before { content: '·'; color: var(--text-muted); margin-right: 4px; }

.post-header { max-width: 760px; margin-bottom: 36px; }

.post-header h1 { font-size: 44px; line-height: 1.1; letter-spacing: -0.025em; color: var(--navy); margin-bottom: 16px; font-weight: 600; }

[data-theme="dark"] .post-header h1 { color: var(--text); }

.post-dek { font-size: 19px; color: var(--text-sub); line-height: 1.5; font-family: 'Source Serif 4', Georgia, serif; font-weight: 400; }

.post-author-row { display: flex; align-items: center; gap: 14px; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 48px; }

.post-author-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--energy)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500; flex-shrink: 0; }

.post-author-info { flex: 1; }

.post-author-info .name { font-size: 14px; font-weight: 500; color: var(--text); }

.post-author-info .title { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.post-author-actions { display: flex; gap: 8px; }

.post-share-btn { width: 36px; height: 36px; border-radius: 8px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-sub); transition: all 0.15s; }

.post-share-btn:hover { background: var(--surface-hover); border-color: var(--navy-soft); color: var(--text); }

.post-share-btn svg { width: 14px; height: 14px; }

.post-hero-illustration { width: 100%; height: 280px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--navy) 0%, #2d4f8a 100%); position: relative; overflow: hidden; margin-bottom: 48px; box-shadow: var(--card-hover-shadow); }

.post-hero-illustration::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, var(--energy-glow-strong) 0%, transparent 60%); }

.post-hero-illustration svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.85); width: 100px; height: 100px; }

.post-body { max-width: 720px; margin: 0 auto; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; line-height: 1.7; color: var(--text); }

.post-body p { margin-bottom: 22px; color: var(--text-sub); }

.post-body p strong { color: var(--text); font-weight: 600; }

.post-body h2 { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 600; color: var(--text); letter-spacing: -0.015em; margin: 48px 0 16px; line-height: 1.2; }

.post-body h3 { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 600; color: var(--text); margin: 32px 0 12px; line-height: 1.3; }

.post-body ul, .post-body ol { margin: 0 0 22px 24px; }

.post-body ul li, .post-body ol li { margin-bottom: 10px; color: var(--text-sub); }

.post-body blockquote { border-left: 3px solid var(--energy); padding: 6px 0 6px 20px; margin: 24px 0; font-style: italic; color: var(--text); }

.post-body code { font-family: 'JetBrains Mono', monospace; font-size: 15px; background: var(--surface-elevated); padding: 1px 6px; border-radius: 4px; color: var(--text); border: 1px solid var(--border); }

.post-body a { color: var(--energy); }

.post-body a:hover { color: var(--energy-dark); }

.post-body hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; }

.post-aside { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 24px; margin: 32px 0; font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.6; color: var(--text-sub); }

.post-aside .aside-label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--energy); font-family: 'JetBrains Mono', monospace; margin-bottom: 8px; }

.post-aside p { font-size: 14px; margin-bottom: 8px; color: var(--text-sub); font-family: 'Inter', sans-serif; }

.post-aside p:last-child { margin-bottom: 0; }

.post-aside strong { color: var(--text); }

.post-cta-inline { background: linear-gradient(135deg, var(--navy) 0%, #2d4f8a 100%); color: #fff; border-radius: var(--radius-lg); padding: 28px; margin: 40px 0; }

[data-theme="dark"] .post-cta-inline { background: var(--surface-elevated); border: 1px solid var(--border); }

.post-cta-inline h4 { color: #fff; font-size: 19px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; font-family: 'Inter', sans-serif; }

.post-cta-inline p { color: rgba(255, 255, 255, 0.85); font-size: 14px; margin-bottom: 16px; line-height: 1.55; font-family: 'Inter', sans-serif; }

[data-theme="dark"] .post-cta-inline p { color: var(--text-sub); }

.post-cta-inline .btn { background: #fff; color: var(--navy); }

.post-cta-inline .btn:hover { background: #f0f2f7; color: var(--navy); }

[data-theme="dark"] .post-cta-inline .btn { background: var(--energy); color: #fff; }

[data-theme="dark"] .post-cta-inline .btn:hover { background: var(--energy-dark); color: #fff; }

.related-posts { background: var(--surface-elevated); border-top: 1px solid var(--border); padding: 64px 0 80px; }

.related-head { max-width: 880px; margin: 0 auto 32px; }

.related-head h2 { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }

.related-grid { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.related-card { display: block; padding: 22px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: all 0.15s; text-decoration: none; }

.related-card:hover { border-color: var(--navy-soft); background: var(--surface-hover); text-decoration: none; }

.related-card-tag { display: inline-block; font-size: 10px; padding: 3px 8px; border-radius: 4px; background: var(--energy-glow); color: var(--energy); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; margin-bottom: 10px; }

.related-card h3 { font-size: 15px; font-weight: 500; color: var(--text); line-height: 1.4; margin-bottom: 6px; }

.related-card-meta { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

@media (max-width: 900px) {
  .related-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .post-page { padding: 32px 0 56px; }
  .post-header h1 { font-size: 28px; }
  .post-dek { font-size: 16px; }
  .post-body { font-size: 16px; }
  .post-body h2 { font-size: 22px; }
  .post-body h3 { font-size: 18px; }
  .post-hero-illustration { height: 180px; }
}

:root {
  --bg: #ffffff; --bg-deep: #f0f2f7; --surface: #ffffff; --surface-elevated: #f8f9fc; --surface-hover: #f0f2f7; --border: #dde1ec; --border-strong: #c8cedd;
  --text: #1a1a2e; --text-sub: #555555; --text-muted: #999999;
  --navy: #1a3a6b; --navy-soft: #7a8aa3;
  --energy: #1d72f2; --energy-dark: #1560d6; --energy-glow: rgba(29, 114, 242, 0.18); --energy-glow-strong: rgba(29, 114, 242, 0.3);
  --success: #27500A; --success-bg: #EAF3DE; --warning: #633806; --warning-bg: #FAEEDA;
  --teal: #14554F; --teal-bg: #D5F2EC;
  --hero-bg: linear-gradient(180deg, var(--bg) 0%, var(--surface-elevated) 100%);
  --hero-bloom-blue: rgba(29, 114, 242, 0.06);
  --dot-grid: rgba(20, 48, 90, 0.05);
  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --card-hover-shadow: 0 4px 12px rgba(20, 48, 90, 0.08);
  --h1-accent-color: var(--energy); --h1-accent-gradient: none;
  --footer-bg: var(--surface-elevated);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
}

[data-theme="dark"] {
  --bg: #0a0d1a; --bg-deep: #050811; --surface: #11151f; --surface-elevated: #161b29; --surface-hover: #1c2236; --border: #1f2638; --border-strong: #2b3349;
  --text: #e8eaf0; --text-sub: #9aa1b8; --text-muted: #5e667d;
  --navy: #4d7ec8; --navy-soft: #6680a8;
  --energy: #4596ff; --energy-dark: #2c7fe8; --energy-glow: rgba(69, 150, 255, 0.3); --energy-glow-strong: rgba(69, 150, 255, 0.5);
  --success: #34d399; --success-bg: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.12);
  --teal: #5eead4; --teal-bg: rgba(94, 234, 212, 0.12);
  --hero-bg: var(--bg);
  --hero-bloom-blue: rgba(69, 150, 255, 0.18);
  --dot-grid: rgba(255, 255, 255, 0.025);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  --h1-accent-color: var(--energy); --h1-accent-gradient: linear-gradient(135deg, #4596ff 0%, #a78bfa 100%);
  --footer-bg: var(--bg);
}

h2 { font-size: 32px; margin-bottom: 16px; color: var(--navy); line-height: 1.1; }

.btn-primary { background: var(--energy); color: #fff; }

.btn-primary:hover { background: var(--energy-dark); color: #fff; transform: translateY(-1px); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  h2 { font-size: 26px; }
}

.contact-hero { background: var(--hero-bg); padding: 64px 0 48px; overflow: hidden; position: relative; text-align: center; }

.contact-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, var(--hero-bloom-blue) 0%, transparent 50%); pointer-events: none; }

.contact-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); }

.contact-hero .container { position: relative; z-index: 2; }

.contact-hero .eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--energy); background: var(--surface); border: 1px solid var(--border); padding: 5px 12px; border-radius: 999px; margin-bottom: 20px; box-shadow: var(--card-shadow); }

.contact-hero h1 { font-size: 52px; line-height: 1.05; letter-spacing: -0.03em; margin: 0 auto 16px; font-weight: 600; color: var(--navy); max-width: 800px; }

[data-theme="dark"] .contact-hero h1 { color: var(--text); }

.contact-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .contact-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.contact-hero p { font-size: 18px; color: var(--text-sub); max-width: 640px; margin: 0 auto; line-height: 1.55; }

.routes { padding: 56px 0 16px; }

.routes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.route-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; transition: all 0.2s ease; position: relative; overflow: hidden; box-shadow: var(--card-shadow); text-decoration: none; }

.route-card:hover { border-color: var(--navy-soft); box-shadow: var(--card-hover-shadow); transform: translateY(-2px); text-decoration: none; }

.route-card.primary { background: linear-gradient(135deg, var(--navy) 0%, #2d4f8a 100%); color: #fff; border-color: var(--navy); }

.route-card.primary::before { content: ''; position: absolute; top: -50%; right: -10%; width: 50%; height: 200%; background: radial-gradient(circle, var(--energy-glow) 0%, transparent 60%); pointer-events: none; }

[data-theme="dark"] .route-card.primary { background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%); border: 1px solid var(--border); }

.route-card.primary > * { position: relative; z-index: 1; }

.route-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

.route-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--energy); }

.route-card.primary .route-card-icon { background: rgba(255, 255, 255, 0.12); border: none; color: #fff; }

.route-card-icon svg { width: 18px; height: 18px; }

.route-card-tag { font-size: 10px; padding: 3px 8px; border-radius: 4px; background: var(--energy-glow); color: var(--energy); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

.route-card.primary .route-card-tag { background: rgba(255, 255, 255, 0.16); color: #fff; }

.route-card h3 { font-size: 20px; margin-bottom: 8px; color: var(--text); font-weight: 600; letter-spacing: -0.01em; }

.route-card.primary h3 { color: #fff; }

.route-card p { font-size: 14px; color: var(--text-sub); line-height: 1.55; margin-bottom: 14px; }

.route-card.primary p { color: rgba(255, 255, 255, 0.8); }

[data-theme="dark"] .route-card.primary p { color: var(--text-sub); }

.route-card-meta { font-size: 12px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.route-card.primary .route-card-meta { color: rgba(255, 255, 255, 0.65); }

[data-theme="dark"] .route-card.primary .route-card-meta { color: var(--text-muted); }

.route-card-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--energy); margin-top: 4px; }

.route-card.primary .route-card-arrow { color: #fff; }

.route-card-arrow svg { width: 14px; height: 14px; transition: transform 0.15s; }

.route-card:hover .route-card-arrow svg { transform: translateX(2px); }

.secondary-routes { padding: 48px 0; border-top: 1px solid var(--border); margin-top: 56px; }

.secondary-routes-head { text-align: center; margin-bottom: 32px; }

.secondary-routes-head h2 { font-size: 22px; font-weight: 500; color: var(--text); margin-bottom: 4px; }

.secondary-routes-head p { font-size: 14px; color: var(--text-sub); }

.secondary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.secondary-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; text-align: center; text-decoration: none; transition: all 0.15s; }

.secondary-card:hover { border-color: var(--navy-soft); background: var(--surface-hover); text-decoration: none; }

.secondary-card-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-sub); margin: 0 auto 12px; }

.secondary-card-icon svg { width: 14px; height: 14px; }

.secondary-card-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; margin-bottom: 4px; }

.secondary-card-email { font-size: 13px; color: var(--text); font-weight: 500; word-break: break-all; }

.secondary-card:hover .secondary-card-email { color: var(--energy); }

.office-block { background: var(--surface-elevated); border-top: 1px solid var(--border); padding: 64px 0; }

.office-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 960px; margin: 0 auto; }

.office-info h2 { font-size: 28px; margin-bottom: 16px; }

.office-info p { font-size: 15px; color: var(--text-sub); line-height: 1.65; margin-bottom: 18px; }

.office-info p strong { color: var(--text); font-weight: 500; }

.office-details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; }

.office-detail-row { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; align-items: baseline; }

.office-detail-row:last-child { border-bottom: none; }

.office-detail-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; font-family: 'JetBrains Mono', monospace; }

.office-detail-value { color: var(--text); line-height: 1.5; }

.office-detail-value a { color: var(--energy); }

.contact-form-section { background: var(--bg); padding: 80px 0; }

.contact-form-wrap { max-width: 640px; margin: 0 auto; }

.contact-form-head { text-align: center; margin-bottom: 32px; }

.contact-form-head .eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; font-family: 'JetBrains Mono', monospace; }

.contact-form-head h2 { font-size: 28px; margin-bottom: 10px; }

.contact-form-head p { font-size: 15px; color: var(--text-sub); }

.contact-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--card-shadow); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.form-row.full { grid-template-columns: 1fr; }

.form-field label { display: block; font-size: 12px; color: var(--text-sub); font-weight: 500; margin-bottom: 6px; letter-spacing: 0.02em; }

.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 11px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; color: var(--text); transition: border-color 0.15s; }

.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--energy); box-shadow: 0 0 0 3px var(--energy-glow); }

.form-field textarea { resize: vertical; min-height: 100px; line-height: 1.5; }

.form-submit { margin-top: 8px; }

.form-submit .btn { width: 100%; padding: 13px 22px; font-size: 15px; }

.form-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 16px; line-height: 1.5; }

.form-note a { color: var(--text-sub); }

.form-note a:hover { color: var(--energy); }

@media (max-width: 900px) {
  .routes-grid { grid-template-columns: 1fr; gap: 16px; }
  .secondary-grid { grid-template-columns: repeat(2, 1fr); }
  .office-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 720px) {
  .contact-hero { padding: 48px 0 32px; }
  .contact-hero h1 { font-size: 32px; }
  .form-row { grid-template-columns: 1fr; gap: 14px; }
  .contact-form { padding: 24px 20px; }
}

.faq-hero { background: var(--hero-bg); padding: 56px 0 40px; overflow: hidden; position: relative; text-align: center; }

.faq-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, var(--hero-bloom-blue) 0%, transparent 50%); pointer-events: none; }

.faq-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%); }

.faq-hero .container { position: relative; z-index: 2; }

.faq-hero .eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--energy); background: var(--surface); border: 1px solid var(--border); padding: 5px 12px; border-radius: 999px; margin-bottom: 20px; box-shadow: var(--card-shadow); }

.faq-hero h1 { font-size: 48px; line-height: 1.05; letter-spacing: -0.03em; margin: 0 auto 14px; font-weight: 600; color: var(--navy); max-width: 760px; }

[data-theme="dark"] .faq-hero h1 { color: var(--text); }

.faq-hero h1 em { font-style: normal; color: var(--h1-accent-color); }

[data-theme="dark"] .faq-hero h1 em { background: var(--h1-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.faq-hero p { font-size: 17px; color: var(--text-sub); max-width: 620px; margin: 0 auto 32px; line-height: 1.55; }

.faq-search-wrap { max-width: 640px; margin: 0 auto; position: relative; }

.faq-search { width: 100%; padding: 16px 18px 16px 48px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-family: inherit; font-size: 15px; color: var(--text); box-shadow: var(--card-shadow); transition: all 0.15s; }

.faq-search::placeholder { color: var(--text-muted); }

.faq-search:focus { outline: none; border-color: var(--energy); box-shadow: 0 0 0 3px var(--energy-glow); }

.faq-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }

.faq-search-icon svg { width: 18px; height: 18px; }

.faq-body { padding: 56px 0 80px; }

.faq-layout { display: grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: flex-start; }

.faq-filters { position: sticky; top: 80px; padding: 16px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); }

.faq-filters-title { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; padding: 0 4px; }

.faq-filter-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-sub); font-weight: 500; background: transparent; transition: all 0.15s; margin-bottom: 2px; text-align: left; }

.faq-filter-btn:hover { background: var(--surface); color: var(--text); }

.faq-filter-btn.active { background: var(--energy); color: #fff; }

[data-theme="dark"] .faq-filter-btn.active { color: #fff; }

.faq-filter-btn-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); padding: 1px 6px; background: var(--surface); border-radius: 4px; }

.faq-filter-btn:hover .faq-filter-btn-count { background: var(--surface-elevated); }

.faq-filter-btn.active .faq-filter-btn-count { background: rgba(255,255,255,0.2); color: #fff; }

.faq-content { min-width: 0; }

.faq-empty { display: none; padding: 48px 24px; text-align: center; color: var(--text-muted); background: var(--surface-elevated); border-radius: var(--radius-md); border: 1px solid var(--border); }

.faq-empty.show { display: block; }

.faq-category { margin-bottom: 48px; }

.faq-category.hidden { display: none; }

.faq-category-title { font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }

.faq-category-title-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--energy); flex-shrink: 0; }

.faq-category-title-icon svg { width: 14px; height: 14px; }

.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 8px; overflow: hidden; transition: all 0.15s; }

.faq-item.hidden { display: none; }

.faq-item.open { border-color: var(--energy-glow); }

.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 20px; font-family: inherit; font-size: 15px; color: var(--text); font-weight: 500; text-align: left; line-height: 1.45; cursor: pointer; transition: background 0.15s; background: transparent; }

.faq-question:hover { background: var(--surface-hover); }

.faq-question-icon { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; transition: transform 0.2s; }

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

.faq-question-icon svg { width: 20px; height: 20px; }

.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease, padding 0.2s ease; }

.faq-item.open .faq-answer { max-height: 600px; padding: 0 20px 18px; }

.faq-answer p { font-size: 14px; color: var(--text-sub); line-height: 1.65; margin-bottom: 10px; }

.faq-answer p:last-child { margin-bottom: 0; }

.faq-answer p strong { color: var(--text); font-weight: 500; }

.faq-answer a { color: var(--energy); }

.faq-answer code { font-family: 'JetBrains Mono', monospace; font-size: 13px; background: var(--surface-elevated); padding: 1px 6px; border-radius: 3px; color: var(--text); border: 1px solid var(--border); }

.faq-cta { background: var(--surface-elevated); border-top: 1px solid var(--border); padding: 56px 0; }

.faq-cta-card { max-width: 720px; margin: 0 auto; text-align: center; }

.faq-cta-card h2 { font-size: 26px; margin-bottom: 10px; color: var(--text); }

.faq-cta-card p { font-size: 16px; color: var(--text-sub); margin-bottom: 24px; line-height: 1.55; }

.faq-cta-buttons { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .faq-filters { position: relative; top: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; }
  .faq-filters-title { display: none; }
  .faq-filter-btn { width: auto; padding: 6px 12px; font-size: 12px; margin-bottom: 0; }
}

@media (max-width: 720px) {
  .faq-hero { padding: 40px 0 32px; }
  .faq-hero h1 { font-size: 30px; }
  .faq-hero p { font-size: 15px; }
  .faq-question { font-size: 14px; padding: 14px 16px; }
  .faq-item.open .faq-answer { padding: 0 16px 16px; }
}

:root {
  --bg: #ffffff; --bg-deep: #f0f2f7; --surface: #ffffff; --surface-elevated: #f8f9fc; --surface-hover: #f0f2f7; --border: #dde1ec; --border-strong: #c8cedd;
  --text: #1a1a2e; --text-sub: #555555; --text-muted: #999999;
  --navy: #1a3a6b; --navy-soft: #7a8aa3;
  --energy: #1d72f2; --energy-dark: #1560d6; --energy-glow: rgba(29, 114, 242, 0.18);
  --success: #27500A; --success-bg: #EAF3DE; --warning: #633806; --warning-bg: #FAEEDA;
  --card-shadow: 0 1px 2px rgba(20, 48, 90, 0.04), 0 1px 3px rgba(20, 48, 90, 0.06);
  --footer-bg: var(--surface-elevated);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
}

[data-theme="dark"] {
  --bg: #0a0d1a; --bg-deep: #050811; --surface: #11151f; --surface-elevated: #161b29; --surface-hover: #1c2236; --border: #1f2638; --border-strong: #2b3349;
  --text: #e8eaf0; --text-sub: #9aa1b8; --text-muted: #5e667d;
  --navy: #4d7ec8; --navy-soft: #6680a8;
  --energy: #4596ff; --energy-dark: #2c7fe8; --energy-glow: rgba(69, 150, 255, 0.3);
  --success: #34d399; --success-bg: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.12);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --footer-bg: var(--bg);
}

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; font-size: 16px; transition: background 0.3s ease, color 0.3s ease; }

a:hover { color: var(--energy-dark); text-decoration: underline; }

.nav-menu a:hover { color: var(--energy); text-decoration: none; }

.nav-cta a.btn-text:hover { color: var(--text); text-decoration: none; }

.btn-primary:hover { background: var(--energy-dark); color: #fff; transform: translateY(-1px); text-decoration: none; }

.btn-secondary:hover { background: var(--surface-hover); border-color: var(--navy-soft); text-decoration: none; }

.legal-page { padding: 56px 0 80px; }

.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: flex-start; }

.legal-toc {
  position: sticky; top: 80px;
  padding: 24px 20px; background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-md); max-height: calc(100vh - 100px); overflow-y: auto;
}

.legal-toc-title { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; font-family: 'JetBrains Mono', monospace; }

.legal-toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; }

.legal-toc ol li { counter-increment: toc; padding: 4px 0; font-size: 13px; line-height: 1.45; }

.legal-toc ol li::before { content: counter(toc, decimal-leading-zero) "."; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; margin-right: 8px; }

.legal-toc ol li a { color: var(--text-sub); text-decoration: none; }

.legal-toc ol li a:hover { color: var(--energy); text-decoration: none; }

.legal-content { max-width: 720px; }

.legal-header { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }

.legal-header h1 { font-size: 40px; font-weight: 600; color: var(--text); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 16px; }

.legal-header .legal-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-muted);
}

.legal-header .legal-meta-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 999px; }

.legal-header .legal-meta-item strong { color: var(--text); font-weight: 500; }

.legal-intro { font-size: 17px; color: var(--text-sub); line-height: 1.65; margin-bottom: 32px; }

.legal-intro strong { color: var(--text); font-weight: 500; }

.legal-content h2 { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin: 48px 0 16px; scroll-margin-top: 80px; padding-top: 4px; }

.legal-content h2::before { content: ""; display: inline-block; width: 24px; font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--text-muted); font-weight: 500; margin-right: 8px; }

.legal-content h2[data-num="1"]::before { content: "01."; }

.legal-content h2[data-num="2"]::before { content: "02."; }

.legal-content h2[data-num="3"]::before { content: "03."; }

.legal-content h2[data-num="4"]::before { content: "04."; }

.legal-content h2[data-num="5"]::before { content: "05."; }

.legal-content h2[data-num="6"]::before { content: "06."; }

.legal-content h2[data-num="7"]::before { content: "07."; }

.legal-content h2[data-num="8"]::before { content: "08."; }

.legal-content h2[data-num="9"]::before { content: "09."; }

.legal-content h2[data-num="10"]::before { content: "10."; }

.legal-content h2[data-num="11"]::before { content: "11."; }

.legal-content h2[data-num="12"]::before { content: "12."; }

.legal-content h2[data-num="13"]::before { content: "13."; }

.legal-content h2[data-num="14"]::before { content: "14."; }

.legal-content h3 { font-size: 16px; font-weight: 600; color: var(--text); margin: 24px 0 10px; }

.legal-content p { font-size: 15px; color: var(--text-sub); line-height: 1.7; margin-bottom: 14px; }

.legal-content p strong { color: var(--text); font-weight: 500; }

.legal-content ul, .legal-content ol { padding-left: 24px; margin: 0 0 18px; }

.legal-content ul li, .legal-content ol li { font-size: 15px; color: var(--text-sub); line-height: 1.7; margin-bottom: 8px; }

.legal-content ul li strong, .legal-content ol li strong { color: var(--text); font-weight: 500; }

.legal-content code { font-family: 'JetBrains Mono', monospace; font-size: 13px; background: var(--surface-elevated); padding: 1px 6px; border-radius: 3px; color: var(--text); border: 1px solid var(--border); }

.legal-content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13px; }

.legal-content table th, .legal-content table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }

.legal-content table th { font-weight: 500; color: var(--text); background: var(--surface-elevated); border-bottom: 2px solid var(--border-strong); }

.legal-content table td { color: var(--text-sub); }

.legal-content table td strong { color: var(--text); font-weight: 500; }

.legal-content table code { font-size: 12px; }

.legal-content blockquote { background: var(--surface-elevated); border-left: 3px solid var(--navy); padding: 14px 18px; margin: 20px 0; font-size: 14px; color: var(--text-sub); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.legal-content blockquote strong { color: var(--text); }

.legal-content .placeholder { background: var(--warning-bg); color: var(--warning); font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 2px 8px; border-radius: 4px; font-weight: 500; border: 1px solid var(--warning); }

.legal-content .legal-aside {
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 18px 22px; margin: 24px 0;
  font-size: 14px; color: var(--text-sub); line-height: 1.6;
}

.legal-content .legal-aside strong { color: var(--text); }

.legal-content .legal-lawyer-note {
  background: var(--warning-bg); border-left: 3px solid var(--warning);
  padding: 14px 18px; margin: 20px 0; font-size: 13px; color: var(--text); line-height: 1.6;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.legal-content .legal-lawyer-note strong { color: var(--warning); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 6px; }

.legal-related { background: var(--surface-elevated); border-top: 1px solid var(--border); padding: 48px 0; }

.legal-related-grid { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 32px; }

.legal-related-card { padding: 18px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); text-align: center; transition: all 0.15s; }

.legal-related-card:hover { border-color: var(--navy-soft); background: var(--surface-hover); text-decoration: none; }

.legal-related-card-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; margin-bottom: 4px; }

.legal-related-card-title { font-size: 14px; font-weight: 500; color: var(--text); }

.legal-related-card.current { background: var(--success-bg); border-color: var(--success); }

[data-theme="dark"] .legal-related-card.current { background: rgba(52, 211, 153, 0.08); }

.legal-related-card.current .legal-related-card-title { color: var(--success); }

[data-theme="dark"] .legal-related-card.current .legal-related-card-title { color: var(--success); }

.legal-related-card.current .legal-related-card-label { color: var(--success); }

[data-theme="dark"] .legal-related-card.current .legal-related-card-label { color: var(--success); }

.footer-col a:hover { color: var(--energy); text-decoration: none; }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 32px; }
  .legal-toc { position: relative; top: 0; max-height: none; }
  .legal-related-grid { grid-template-columns: repeat(2, 1fr); padding: 0 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; }
  .legal-page { padding: 32px 0 56px; }
  .legal-header h1 { font-size: 28px; }
  .legal-intro { font-size: 16px; }
  .legal-content h2 { font-size: 19px; }
}