@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ===========================
   DESIGN SYSTEM — ENSUREDIT INSURTECH
   Global Insurance Technology Platform
   =========================== */

:root {
  --primary: #0A0E27;
  --primary-light: #101538;
  --accent: #4F6EF7;
  --accent2: #6C5CE7;
  --green: #00D68F;
  --orange: #FF9F43;
  --red: #FF6B6B;
  --cyan: #0ABDE3;
  --surface: #12163A;
  --surface2: #1A1F4A;
  --text: #E8ECF4;
  --muted: #8892B0;
  --white: #FFFFFF;
  --grad1: linear-gradient(135deg, #4F6EF7, #6C5CE7);
  --grad2: linear-gradient(135deg, #00D68F, #0ABDE3);
  --grad3: linear-gradient(135deg, #FF9F43, #FF6B6B);
  --border: rgba(79,110,247,0.12);
  --border-hover: rgba(79,110,247,0.35);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --transition: 0.3s ease;
  /* SVG dashboard colors (dark mode) */
  --svg-bg: #12163A;
  --svg-surface: #1A1F4A;
  --svg-stroke: rgba(79,110,247,0.15);
  --svg-text: #8892B0;
  --svg-text-bright: #E8ECF4;
  --nav-bg: rgba(10,14,39,0.92);
  --shadow-color: rgba(0,0,0,0.4);
}

/* ===========================
   LIGHT THEME — "Frost Steel"
   Cool blue-silver. NOT white. NOT cream.
   Think: Bloomberg light · Linear · Stripe Dashboard
   Premium tech with depth & dimension.
   =========================== */
[data-theme="light"] {
  /* Backgrounds — cool blue-gray, NOT white */
  --primary: #E8EDF5;
  --primary-light: #D8DFF0;
  --surface: #EFF2F9;
  --surface2: #D0D8EB;
  --text: #1A1D2E;
  --muted: #5A6380;
  --white: #0F1225;
  --accent: #3D5AF1;
  --accent2: #7C3AED;
  --green: #059669;
  --orange: #D97706;
  --red: #DC2626;
  --cyan: #0284C7;
  --border: rgba(58,72,120,0.12);
  --border-hover: rgba(61,90,241,0.45);
  --grad1: linear-gradient(135deg, #3D5AF1, #7C3AED);
  --grad2: linear-gradient(135deg, #059669, #0284C7);
  --grad3: linear-gradient(135deg, #D97706, #DC2626);
  --svg-bg: #EFF2F9;
  --svg-surface: #DDE3F0;
  --svg-stroke: rgba(58,72,120,0.12);
  --svg-text: #5A6380;
  --svg-text-bright: #1A1D2E;
  --nav-bg: rgba(232,237,245,0.85);
  --shadow-color: rgba(30,40,80,0.08);
}

/* --- Glass-morphism base layer --- */
[data-theme="light"] body {
  background: linear-gradient(180deg, #E8EDF5 0%, #D8DFF0 50%, #CDD5EA 100%);
  background-attachment: fixed;
}

/* --- Nav — frosted glass --- */
[data-theme="light"] .nav {
  border-bottom: 1px solid rgba(58,72,120,0.1);
  box-shadow: 0 1px 24px rgba(30,40,80,0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
[data-theme="light"] .nav.scrolled {
  background: rgba(232,237,245,0.92);
}
/* nav-logo-img handled via filter in base styles */
[data-theme="light"] .nav-link {
  color: #5A6380;
}
[data-theme="light"] .nav-link:hover {
  color: #0F1225;
  background: rgba(61,90,241,0.06);
}
[data-theme="light"] .dropdown-menu {
  background: rgba(239,242,249,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(58,72,120,0.12);
  box-shadow: 0 16px 64px rgba(30,40,80,0.18), 0 0 0 1px rgba(58,72,120,0.08);
}
[data-theme="light"] .dropdown-menu a {
  color: #5A6380;
}
[data-theme="light"] .dropdown-menu a strong {
  color: #0F1225;
}
[data-theme="light"] .dropdown-menu a:hover {
  background: rgba(61,90,241,0.06);
  color: #0F1225;
}
[data-theme="light"] .dd-icon {
  background: rgba(61,90,241,0.06);
}
[data-theme="light"] .mobile-toggle span {
  background: #0F1225;
}
[data-theme="light"] .mobile-menu {
  background: linear-gradient(180deg, #E8EDF5, #D8DFF0);
}
[data-theme="light"] .mobile-menu-inner a {
  color: #1A1D2E;
}
[data-theme="light"] .mobile-menu-inner a:hover {
  background: rgba(61,90,241,0.06);
}

/* --- Buttons — vivid on frost --- */
[data-theme="light"] .btn-primary {
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(61,90,241,0.35), 0 1px 3px rgba(61,90,241,0.2);
}
[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 8px 32px rgba(61,90,241,0.45), 0 2px 6px rgba(61,90,241,0.3);
  transform: translateY(-2px);
}
[data-theme="light"] .nav-cta {
  color: #FFFFFF !important;
}
[data-theme="light"] .btn-ghost {
  color: #1A1D2E;
  border-color: rgba(58,72,120,0.2);
  background: rgba(239,242,249,0.5);
  backdrop-filter: blur(8px);
}
[data-theme="light"] .btn-ghost:hover {
  border-color: rgba(61,90,241,0.3);
  background: rgba(61,90,241,0.06);
  color: #3D5AF1;
}

/* --- Hero --- */
[data-theme="light"] .hero-badge {
  background: rgba(61,90,241,0.08);
  border-color: rgba(61,90,241,0.2);
}
[data-theme="light"] .hero h1,
[data-theme="light"] .section h2,
[data-theme="light"] .product-hero h1 {
  color: #0F1225;
}

/* --- Product Hero --- */
[data-theme="light"] .product-hero-badge {
  color: #FFFFFF;
}
[data-theme="light"] .ph-stat strong,
[data-theme="light"] .ps strong,
[data-theme="light"] .stat-val {
  color: #0F1225;
}

/* --- Cards — frosted glass with blue glow --- */
[data-theme="light"] .feature-card,
[data-theme="light"] .product-card,
[data-theme="light"] .region-card,
[data-theme="light"] .engage-card,
[data-theme="light"] .team-card,
[data-theme="light"] .usecase-card,
[data-theme="light"] .contact-form,
[data-theme="light"] .contact-person,
[data-theme="light"] .office-card,
[data-theme="light"] .formula-block {
  background: rgba(239,242,249,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 2px 8px rgba(30,40,80,0.06), 0 0 0 1px rgba(58,72,120,0.05), inset 0 1px 0 rgba(255,255,255,0.7);
}
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .product-card:hover,
[data-theme="light"] .region-card:hover,
[data-theme="light"] .engage-card:hover,
[data-theme="light"] .team-card:hover,
[data-theme="light"] .usecase-card:hover,
[data-theme="light"] .formula-block:hover {
  border-color: rgba(61,90,241,0.3);
  box-shadow: 0 8px 32px rgba(61,90,241,0.1), 0 0 0 1px rgba(61,90,241,0.15), inset 0 1px 0 rgba(255,255,255,0.8);
  transform: translateY(-2px);
}

/* --- Card headings --- */
[data-theme="light"] .feature-card h4,
[data-theme="light"] .product-card h3,
[data-theme="light"] .region-card h3,
[data-theme="light"] .engage-card h3,
[data-theme="light"] .team-card .name,
[data-theme="light"] .usecase-card h4,
[data-theme="light"] .office-card h4,
[data-theme="light"] .contact-person .cp-name,
[data-theme="light"] .timeline-item h4,
[data-theme="light"] .formula-label {
  color: #0F1225;
}

/* --- Card internal borders --- */
[data-theme="light"] .product-stats {
  border-top-color: rgba(58,72,120,0.08);
}
[data-theme="light"] .engage-pricing {
  border-top-color: rgba(58,72,120,0.08);
}

/* --- Icons — frosty blue tint --- */
[data-theme="light"] .feature-card-icon,
[data-theme="light"] .product-icon,
[data-theme="light"] .usecase-icon {
  border: 1px solid rgba(61,90,241,0.1);
  background: rgba(61,90,241,0.04);
}

/* --- Product checkboxes on contact page --- */
[data-theme="light"] .product-check {
  background: rgba(239,242,249,0.6) !important;
  border-color: rgba(58,72,120,0.12) !important;
  backdrop-filter: blur(8px) !important;
}
[data-theme="light"] .product-check:hover {
  border-color: rgba(61,90,241,0.35) !important;
  background: rgba(61,90,241,0.06) !important;
}
[data-theme="light"] .product-check span {
  color: #1A1D2E !important;
}

/* --- Footer — deeper steel --- */
[data-theme="light"] .footer {
  background: #C9D1E5;
  border-top-color: rgba(58,72,120,0.1);
}
/* footer-logo-img handled via filter in base styles */
[data-theme="light"] .footer-col h5 {
  color: #0F1225;
}
[data-theme="light"] .footer-bottom {
  border-top-color: rgba(58,72,120,0.1);
}

/* --- Forms --- */
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
  background: rgba(255,255,255,0.5);
  color: #1A1D2E;
  border-color: rgba(58,72,120,0.12);
  backdrop-filter: blur(8px);
}
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group select:focus,
[data-theme="light"] .form-group textarea:focus {
  border-color: #3D5AF1;
  box-shadow: 0 0 0 3px rgba(61,90,241,0.15), 0 0 20px rgba(61,90,241,0.08);
  background: rgba(255,255,255,0.7);
}
[data-theme="light"] .form-group label {
  color: #5A6380;
}

/* --- Section-dark contrast — cool steel --- */
[data-theme="light"] .section-dark {
  background: #D0D8EB;
}

/* --- Grid background --- */
[data-theme="light"] .grid-bg {
  opacity: 0.04;
  background-image:
    linear-gradient(rgba(58,72,120,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,72,120,0.12) 1px, transparent 1px);
}

/* --- Timeline --- */
[data-theme="light"] .timeline::before {
  background: rgba(61,90,241,0.15);
}
[data-theme="light"] .timeline-item::before {
  border-color: #E8EDF5;
  background: #3D5AF1;
}

/* --- Compliance badges --- */
[data-theme="light"] .compliance-badge {
  background: rgba(5,150,105,0.08);
  border-color: rgba(5,150,105,0.2);
  color: #059669;
}

/* --- Industry tags --- */
[data-theme="light"] .industry-tags span {
  background: rgba(61,90,241,0.06);
  border-color: rgba(61,90,241,0.18);
}

/* --- Team avatar — keep white text on gradient --- */
[data-theme="light"] .team-avatar {
  color: #FFFFFF !important;
}

/* --- Logo bar --- */
[data-theme="light"] .logo-bar {
  opacity: 0.5;
  filter: saturate(0.8);
}

/* --- Product hero visual SVG — complete overhaul for light mode --- */
[data-theme="light"] .product-hero-visual svg {
  filter: drop-shadow(0 12px 40px rgba(30,40,80,0.15));
  border-radius: 16px;
}

/* --- Gradient text — deeper for frost contrast --- */
[data-theme="light"] .gradient-text {
  background: linear-gradient(135deg, #2B44CC, #6D28D9);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- CTA section --- */
[data-theme="light"] .cta-section {
  background: linear-gradient(135deg, #C9D1E5, #D0D8EB);
}

/* --- Section alt background for hero/stat regions --- */
[data-theme="light"] .product-hero {
  background: linear-gradient(180deg, #DDE3F0 0%, #E8EDF5 100%);
}

/* ============================================
   SVG DASHBOARD OVERRIDES — COMPREHENSIVE
   Covers ALL inline SVG colors across all 6
   product pages for clean light mode rendering
   ============================================ */

/* --- 1. FRAME BACKGROUNDS --- */
/* Main dashboard frame — cool steel card */
[data-theme="light"] .product-hero-visual svg rect[fill="#12163A"],
[data-theme="light"] .product-hero-visual svg rect[fill="#0D1033"],
[data-theme="light"] .product-hero-visual svg rect[fill="#0A0E27"] {
  fill: #E2E8F4;
  stroke: rgba(58,72,120,0.15);
  stroke-width: 1;
}
/* Card/panel backgrounds — frost glass panels */
[data-theme="light"] .product-hero-visual svg rect[fill="#1A1F4A"],
[data-theme="light"] .product-hero-visual svg rect[fill="#181D45"],
[data-theme="light"] .product-hero-visual svg rect[fill="#161B42"],
[data-theme="light"] .product-hero-visual svg rect[fill="#1E2350"] {
  fill: #F0F3FA;
  stroke: rgba(58,72,120,0.1);
  stroke-width: 0.5;
}

/* --- 2. TEXT COLORS --- */
/* White text → dark charcoal */
[data-theme="light"] .product-hero-visual svg text[fill="#FFFFFF"],
[data-theme="light"] .product-hero-visual svg text[fill="#ffffff"],
[data-theme="light"] .product-hero-visual svg text[fill="white"] {
  fill: #1A1D2E;
}
/* Light blue/purple text → medium blue */
[data-theme="light"] .product-hero-visual svg text[fill="#CCD6F6"] {
  fill: #3D5070;
}
/* Muted gray → darker muted for contrast */
[data-theme="light"] .product-hero-visual svg text[fill="#8892B0"] {
  fill: #4A5270;
}
/* Light gray text → dark */
[data-theme="light"] .product-hero-visual svg text[fill="#E8ECF4"] {
  fill: #1A1D2E;
}
/* Dark text on colored buttons — keep dark */
[data-theme="light"] .product-hero-visual svg text[fill="#12163A"] {
  fill: #0F1225;
}
/* Colored accent text — boost saturation */
[data-theme="light"] .product-hero-visual svg text[fill="#4F6EF7"] {
  fill: #2B4FE0;
}
[data-theme="light"] .product-hero-visual svg text[fill="#00D68F"] {
  fill: #059669;
}
[data-theme="light"] .product-hero-visual svg text[fill="#FF9F43"] {
  fill: #C97B0A;
}
[data-theme="light"] .product-hero-visual svg text[fill="#0ABDE3"] {
  fill: #0284C7;
}
[data-theme="light"] .product-hero-visual svg text[fill="#6C5CE7"] {
  fill: #5B21B6;
}
[data-theme="light"] .product-hero-visual svg text[fill="#FF6B6B"] {
  fill: #DC2626;
}

/* --- 3. LOW-OPACITY BACKGROUND OVERLAYS --- */
/* These are nearly invisible on light bg — boost significantly */
/* Blue overlays */
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(79,110,247,0.06)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(79,110,247,0.08)"] {
  fill: rgba(61,90,241,0.08);
}
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(79,110,247,0.1)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(79,110,247,0.12)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(79,110,247,0.15)"] {
  fill: rgba(61,90,241,0.12);
}
/* Green overlays */
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(0,214,143,0.06)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(0,214,143,0.08)"] {
  fill: rgba(5,150,105,0.08);
}
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(0,214,143,0.1)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(0,214,143,0.12)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(0,214,143,0.15)"] {
  fill: rgba(5,150,105,0.12);
}
/* Orange overlays */
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(255,159,67,0.08)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(255,159,67,0.1)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(255,159,67,0.12)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(255,159,67,0.15)"] {
  fill: rgba(217,119,6,0.1);
}
/* Cyan overlays */
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(10,189,227,0.08)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(10,189,227,0.1)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(10,189,227,0.12)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(10,189,227,0.15)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(10,189,227,0.25)"] {
  fill: rgba(2,132,199,0.1);
}
/* Purple overlays */
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(108,92,231,0.06)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(108,92,231,0.1)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(108,92,231,0.12)"] {
  fill: rgba(124,58,237,0.1);
}
/* Red overlays */
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(255,107,107,0.06)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(255,107,107,0.1)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(255,107,107,0.12)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(255,107,107,0.15)"] {
  fill: rgba(220,38,38,0.08);
}
/* Dark overlay for code blocks — use light steel instead */
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(0,0,0,0.25)"] {
  fill: rgba(30,40,80,0.06);
}

/* --- 4. CIRCLE COLORS --- */
/* Status circles & green indicators — keep but darken */
[data-theme="light"] .product-hero-visual svg circle[fill="#00D68F"] {
  fill: #059669;
}
[data-theme="light"] .product-hero-visual svg circle[fill="#FF6B6B"] {
  fill: #EF4444;
}
[data-theme="light"] .product-hero-visual svg circle[fill="#FF9F43"] {
  fill: #F59E0B;
}
[data-theme="light"] .product-hero-visual svg circle[fill="#0ABDE3"] {
  fill: #0284C7;
}
[data-theme="light"] .product-hero-visual svg circle[fill="#4F6EF7"] {
  fill: #3D5AF1;
}
[data-theme="light"] .product-hero-visual svg circle[fill="#6C5CE7"] {
  fill: #7C3AED;
}
/* Low-opacity green circle backgrounds */
[data-theme="light"] .product-hero-visual svg circle[fill="rgba(0,214,143,0.12)"],
[data-theme="light"] .product-hero-visual svg circle[fill="rgba(0,214,143,0.15)"] {
  fill: rgba(5,150,105,0.12);
}
/* Low-opacity blue circle backgrounds */
[data-theme="light"] .product-hero-visual svg circle[fill="rgba(79,110,247,0.12)"],
[data-theme="light"] .product-hero-visual svg circle[fill="rgba(79,110,247,0.15)"] {
  fill: rgba(61,90,241,0.12);
}

/* --- 5. LINE/DIVIDER STROKES --- */
/* Gray dividers — more visible on light */
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(136,146,176,0.15)"],
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(136,146,176,0.08)"],
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(136,146,176,0.2)"] {
  stroke: rgba(58,72,120,0.15);
}
/* Blue accent dividers */
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(79,110,247,0.15)"],
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(79,110,247,0.1)"],
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(79,110,247,0.08)"],
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(79,110,247,0.3)"] {
  stroke: rgba(61,90,241,0.18);
}
/* Green accent dividers */
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(0,214,143,0.3)"],
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(0,214,143,0.15)"] {
  stroke: rgba(5,150,105,0.2);
}
/* Orange accent dividers */
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(255,159,67,0.3)"],
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(255,159,67,0.15)"] {
  stroke: rgba(217,119,6,0.2);
}
/* Cyan accent dividers */
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(10,189,227,0.3)"],
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(10,189,227,0.15)"] {
  stroke: rgba(2,132,199,0.2);
}
/* Purple accent dividers */
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(108,92,231,0.3)"],
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(108,92,231,0.15)"] {
  stroke: rgba(124,58,237,0.2);
}
/* Red accent dividers */
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(255,107,107,0.3)"],
[data-theme="light"] .product-hero-visual svg line[stroke="rgba(255,107,107,0.1)"] {
  stroke: rgba(220,38,38,0.2);
}

/* --- 6. RECT BORDER STROKES --- */
/* Blue rect borders */
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(79,110,247,0.1)"],
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(79,110,247,0.15)"],
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(79,110,247,0.2)"] {
  stroke: rgba(61,90,241,0.2);
}
/* Green rect borders */
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(0,214,143,0.1)"],
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(0,214,143,0.12)"],
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(0,214,143,0.15)"],
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(0,214,143,0.2)"],
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(0,214,143,0.25)"] {
  stroke: rgba(5,150,105,0.25);
}
/* Red rect borders */
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(255,107,107,0.1)"],
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(255,107,107,0.15)"],
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(255,107,107,0.2)"] {
  stroke: rgba(220,38,38,0.2);
}
/* Purple rect borders */
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(108,92,231,0.1)"],
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(108,92,231,0.15)"],
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(108,92,231,0.25)"] {
  stroke: rgba(124,58,237,0.2);
}
/* Orange rect borders */
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(255,159,67,0.1)"],
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(255,159,67,0.15)"] {
  stroke: rgba(217,119,6,0.2);
}
/* Cyan rect borders */
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(10,189,227,0.1)"],
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(10,189,227,0.15)"],
[data-theme="light"] .product-hero-visual svg rect[stroke="rgba(10,189,227,0.2)"] {
  stroke: rgba(2,132,199,0.25);
}

/* --- 7. POLYLINE CHART STROKES --- */
[data-theme="light"] .product-hero-visual svg polyline[stroke="#0ABDE3"] {
  stroke: #0284C7;
}
[data-theme="light"] .product-hero-visual svg polyline[stroke="#4F6EF7"] {
  stroke: #3D5AF1;
}

/* --- 8. PROGRESS BAR FILLS --- */
/* Higher-opacity accent fills (0.3-0.9) — keep but darken base */
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(79,110,247,0.3)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(79,110,247,0.5)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(79,110,247,0.8)"] {
  filter: saturate(1.3) brightness(0.85);
}
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(0,214,143,0.3)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(0,214,143,0.5)"],
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(0,214,143,0.9)"] {
  filter: saturate(1.3) brightness(0.85);
}

/* --- 9. SOLID ACCENT RECT FILLS — keep as-is, they're already vivid --- */
/* #00D68F, #4F6EF7, #FF9F43 etc. buttons stay solid on frost */

/* --- 10. GREEN ACCENT SOLID fills get slightly darker --- */
[data-theme="light"] .product-hero-visual svg rect[fill="#00D68F"] {
  fill: #059669;
}
[data-theme="light"] .product-hero-visual svg rect[fill="rgba(0,214,143,0.6)"] {
  fill: rgba(5,150,105,0.7);
}

/* --- Scrollbar --- */
[data-theme="light"] ::-webkit-scrollbar-track { background: #E8EDF5; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #B8C3DC; border-radius: 3px; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #3D5AF1; }

/* --- Feature card icon gradients keep color --- */
[data-theme="light"] .feature-card-icon svg {
  filter: saturate(1.1) brightness(0.9);
}

/* --- Hero subtitle / descriptions --- */
[data-theme="light"] .hero p,
[data-theme="light"] .product-hero p {
  color: #4A5270;
}

/* --- Stats bar on product pages --- */
[data-theme="light"] .product-hero-stats {
  background: rgba(239,242,249,0.5);
  backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,0.4);
}

/* --- Formula flow --- */
[data-theme="light"] .formula-op {
  color: #3D5AF1;
}

/* --- Engage pricing text --- */
[data-theme="light"] .engage-price {
  color: #0F1225;
}

/* --- Region card flag --- */
[data-theme="light"] .region-flag {
  filter: drop-shadow(0 2px 4px rgba(30,40,80,0.1));
}

/* ===========================
   THEME TOGGLE
   =========================== */
.theme-toggle {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(79,110,247,0.08);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  margin-left: 8px;
  position: relative;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(79,110,247,0.15);
  transform: translateY(-1px);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: all 0.4s ease;
}
.theme-toggle .icon-moon { display: block; color: var(--muted); }
.theme-toggle .icon-sun { display: none; color: #FF9F43; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle {
  background: rgba(61,90,241,0.08);
  border: 1px solid rgba(61,90,241,0.12);
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(61,90,241,0.15);
  border-color: rgba(61,90,241,0.25);
}

/* Mobile theme toggle */
.mobile-theme-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: all var(--transition);
}
.mobile-theme-toggle:hover {
  background: var(--surface);
}
.mobile-theme-toggle svg {
  width: 18px;
  height: 18px;
}
.mobile-theme-toggle .icon-moon { display: inline; color: var(--muted); }
.mobile-theme-toggle .icon-sun { display: none; color: #FF9F43; }
.mobile-theme-toggle .label-dark { display: none; }
.mobile-theme-toggle .label-light { display: inline; }
[data-theme="light"] .mobile-theme-toggle .icon-moon { display: none; }
[data-theme="light"] .mobile-theme-toggle .icon-sun { display: inline; }
[data-theme="light"] .mobile-theme-toggle .label-dark { display: inline; }
[data-theme="light"] .mobile-theme-toggle .label-light { display: none; }

/* Body transition for theme switch */
body, .nav, .feature-card, .product-card, .region-card,
.engage-card, .team-card, .usecase-card, .contact-form,
.contact-person, .office-card, .formula-block, .dropdown-menu,
.footer, .mobile-menu, .section-dark {
  transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--primary);
  color: var(--text);
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* ===========================
   NAVIGATION
   =========================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(79,110,247,0.1);
  padding: 0 40px;
  height: 64px;
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.nav-logo {
  display: flex;
  align-items: center;
  height: 100%;
}
.nav-logo-img {
  height: 32px;
  width: auto;
  display: block;
  transition: filter 0.3s ease;
}
/* Light mode: convert white logo → brand navy #0f2972 */
[data-theme="light"] .nav-logo-img,
[data-theme="light"] .footer-logo-img {
  filter: invert(62%) sepia(60%) saturate(7900%) hue-rotate(222deg) brightness(45%);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-link {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all var(--transition);
}
.nav-link:hover { color: var(--white); background: rgba(79,110,247,0.06); }

/* Nav Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown .has-dropdown {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-dropdown .has-dropdown svg {
  transition: transform var(--transition);
}
.nav-dropdown:hover .has-dropdown svg {
  transform: rotate(180deg);
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 20px 60px var(--shadow-color);
}
.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  color: var(--muted);
}
.dropdown-menu a:hover {
  background: rgba(79,110,247,0.08);
  color: var(--white);
}
.dd-icon {
  font-size: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79,110,247,0.06);
  border-radius: 8px;
  flex-shrink: 0;
}
.dropdown-menu a div {
  display: flex;
  flex-direction: column;
}
.dropdown-menu a strong {
  font-size: 14px;
  color: var(--white);
  font-weight: 600;
}
.dropdown-menu a span {
  font-size: 12px;
  color: var(--muted);
}

/* Nav CTA */
.nav-cta {
  background: var(--grad1);
  color: var(--white);
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--transition);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(79,110,247,0.4);
}

/* Mobile Toggle */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.mobile-toggle span {
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--transition);
}

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary);
  z-index: 999;
  overflow-y: auto;
}
.mobile-menu.active { display: block; }
.mobile-menu-inner {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu-inner a {
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.mobile-menu-inner a:hover { background: var(--surface); }
.mobile-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  padding: 20px 16px 8px;
}

/* ===========================
   SECTIONS
   =========================== */
.section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.section-dark {
  background: var(--primary-light);
}
.section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: 16px;
}
.section h2 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.section-sub {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 650px;
  margin-bottom: 48px;
}

/* ===========================
   HERO
   =========================== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 120px 24px 80px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
  background: rgba(79,110,247,0.08);
  border: 1px solid rgba(79,110,247,0.2);
  color: var(--accent);
}
.hero h1 {
  font-size: 72px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -2px;
  max-width: 900px;
  margin-bottom: 24px;
}
.hero-sub {
  font-size: 20px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 40px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===========================
   PRODUCT HERO
   =========================== */
.product-hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 140px 24px 100px;
}
.product-hero .container { position: relative; z-index: 2; }
.product-hero-badge {
  display: inline-flex;
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
.product-hero h1 {
  font-size: 56px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
  max-width: 700px;
}
.product-hero-sub {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 32px;
}
.product-hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.ph-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ph-stat strong {
  font-size: 28px;
  font-weight: 900;
  color: var(--white);
}
.ph-stat span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* Split Hero Layout */
.product-hero-split {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 48px;
  align-items: center;
}
.product-hero-content {
  position: relative;
  z-index: 2;
}
.product-hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: heroFloat 6s ease-in-out infinite;
}
.product-hero-visual svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(79,110,247,0.15));
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ===========================
   BUTTONS
   =========================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  transition: all var(--transition);
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--grad1);
  color: var(--white);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(79,110,247,0.35);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.15);
}
.btn-ghost:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.03);
}
.btn-large {
  padding: 16px 36px;
  font-size: 16px;
}

/* ===========================
   GRADIENT TEXT
   =========================== */
.gradient-text {
  background: var(--grad1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-orange { color: var(--orange); }
.text-cyan { color: var(--cyan); }

/* ===========================
   CARDS & GRIDS
   =========================== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: all var(--transition);
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: 0 12px 40px rgba(79,110,247,0.1);
}
.feature-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.feature-card h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--white);
}
.feature-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* Products Grid — Landing */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-hover);
  box-shadow: 0 16px 48px rgba(79,110,247,0.12);
}
.product-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.product-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.product-badge {
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.product-card h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--white);
}
.product-tagline {
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.product-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
}
.product-stats {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(79,110,247,0.08);
  flex-wrap: wrap;
}
.ps {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ps strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
}
.ps span {
  font-size: 11px;
  color: var(--muted);
}
.product-cta {
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition);
}
.product-card:hover .product-cta { gap: 10px; }
.product-card-wide {
  grid-column: span 2;
}

/* ===========================
   FORMULA FLOW
   =========================== */
.formula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.formula-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  min-width: 120px;
  transition: all var(--transition);
}
.formula-block:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
}
.formula-icon { font-size: 28px; margin-bottom: 8px; }
.formula-label { font-size: 14px; font-weight: 700; color: var(--white); }
.formula-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.formula-op {
  font-size: 24px;
  font-weight: 300;
  color: var(--accent);
}
.formula-result {
  background: rgba(79,110,247,0.06) !important;
}

/* ===========================
   USECASE GRID
   =========================== */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.usecase-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.usecase-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}
.usecase-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.usecase-card h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--white);
}
.usecase-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* ===========================
   LOGO BAR
   =========================== */
.logo-bar {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 48px 0;
  opacity: 0.5;
}
.logo-bar span {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.5px;
}

/* ===========================
   STATS ROW
   =========================== */
.stats-row {
  display: flex;
  gap: 48px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 48px;
}
.stat-item {
  text-align: center;
}
.stat-val {
  font-size: 48px;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.stat-label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}
.stat-sub {
  font-size: 11px;
  color: var(--accent);
  margin-top: 2px;
  font-weight: 600;
}

/* ===========================
   REGION/MARKET GRID
   =========================== */
.region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.region-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: all var(--transition);
}
.region-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
}
.region-card h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--white);
}
.region-card .region-flag {
  font-size: 32px;
  margin-bottom: 12px;
}

/* ===========================
   INDUSTRY TAGS
   =========================== */
.industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.industry-tags span {
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(79,110,247,0.15);
  background: rgba(79,110,247,0.05);
  color: var(--accent);
}

/* ===========================
   ENGAGE / PRICING CARDS
   =========================== */
.engage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.engage-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  transition: all var(--transition);
  text-align: center;
}
.engage-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
}
.engage-card .ei {
  font-size: 36px;
  margin-bottom: 16px;
}
.engage-card h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--white);
}
.engage-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}
.engage-pricing {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  padding-top: 16px;
  border-top: 1px solid rgba(79,110,247,0.08);
}

/* ===========================
   TEAM
   =========================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  transition: all var(--transition);
}
.team-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
}
.team-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grad1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 20px;
  font-weight: 800;
  color: var(--white);
}
.team-card .name {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}
.team-card .role {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.team-card .prev {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* ===========================
   CTA SECTION
   =========================== */
.cta-section {
  padding: 140px 0;
  text-align: center;
  position: relative;
}
.cta-section h2 {
  margin: 0 auto 20px;
}

/* ===========================
   CONTACT
   =========================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 40px;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-person {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.contact-person .cp-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}
.contact-person .cp-role {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  margin-top: 2px;
}
.contact-person .cp-detail {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
.office-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.office-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}
.office-card p {
  font-size: 13px;
  color: var(--muted);
}
.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(79,110,247,0.12);
  background: var(--primary);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-group textarea { resize: vertical; min-height: 100px; }

/* ===========================
   FOOTER
   =========================== */
.footer {
  background: var(--primary-light);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-brand {
  max-width: 300px;
}
.footer-logo {
  margin-bottom: 12px;
}
.footer-logo-img {
  height: 28px;
  width: auto;
  display: block;
  transition: filter 0.3s ease;
}
/* light mode filter handled alongside nav-logo-img above */
.footer-brand p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
.footer-col h5 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer-bottom p {
  font-size: 12px;
  color: var(--muted);
}

/* ===========================
   GRID BG & ANIMATED
   =========================== */
.grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.04;
  background-image:
    linear-gradient(rgba(79,110,247,0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,110,247,0.3) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridmove 25s linear infinite;
}
@keyframes gridmove {
  0% { transform: translate(0,0); }
  100% { transform: translate(60px,60px); }
}

/* ===========================
   FADE-IN ANIMATIONS
   =========================== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.fd1 { transition-delay: 0.1s; }
.fd2 { transition-delay: 0.2s; }
.fd3 { transition-delay: 0.3s; }
.fd4 { transition-delay: 0.4s; }

/* ===========================
   COMPLIANCE BADGES
   =========================== */
.compliance-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.compliance-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(0,214,143,0.06);
  border: 1px solid rgba(0,214,143,0.15);
  color: var(--green);
}

/* ===========================
   TIMELINE
   =========================== */
.timeline {
  position: relative;
  padding-left: 40px;
  margin-top: 48px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline-item {
  position: relative;
  padding-bottom: 36px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -34px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--primary);
}
.timeline-item h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}
.timeline-item .year {
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
}
.timeline-item p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 1024px) {
  .section h2, .hero h1 { font-size: 42px; }
  .product-hero h1 { font-size: 42px; }
  .product-hero-split { grid-template-columns: 1fr; gap: 40px; }
  .product-hero-visual { max-width: 480px; margin: 0 auto; }
  .product-hero-visual svg { max-width: 420px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .product-card-wide { grid-column: span 2; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .region-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .mobile-toggle { display: flex; }

  .section { padding: 80px 0; }
  .section h2, .hero h1 { font-size: 32px; letter-spacing: -1px; }
  .product-hero h1 { font-size: 32px; }
  .hero-sub, .section-sub { font-size: 16px; }
  .hero { min-height: auto; padding: 120px 20px 80px; }
  .product-hero { min-height: auto; padding: 120px 20px 80px; }
  .product-hero-visual { display: none; }
  .product-hero-split { grid-template-columns: 1fr; }

  .feature-grid, .products-grid, .engage-grid, .usecase-grid, .region-grid {
    grid-template-columns: 1fr;
  }
  .product-card-wide { grid-column: span 1; }
  .team-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .formula { flex-direction: column; }

  .stats-row { gap: 24px; }
  .stat-val { font-size: 36px; }
  .product-hero-stats { gap: 20px; }
}

@media (max-width: 480px) {
  .section h2, .hero h1 { font-size: 28px; }
  .product-hero h1 { font-size: 28px; }
}

/* ===========================
   SCROLLBAR
   =========================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--primary); }
::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }