/* ============================================
   LIGHT MODE — triggered by device preference
   Hero stays dark; everything below gets lighter.
   ============================================ */

@media (prefers-color-scheme: light) {

  /* ---------- CSS Variables ---------- */
  :root {
    --bg-primary: #f5f5f7;
    --bg-secondary: #eaeaef;
    --bg-card: #ffffff;
    --text-primary: #1a1a2e;
    --text-secondary: #555568;
    --accent: #0986c0;
    /* #2e8ab8; */
    --accent-purple: #397fe1;
    --accent-glow: rgba(46, 138, 184, 0.10);
    /* rgba(46, 138, 184, 0.10); */
  }

  /* ---------- Body ---------- */
  body {
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  body::before {
    opacity: 0.015;
  }

  /* ===========================================
     SERVICES SECTION
     =========================================== */
  .services {
    background: #f0f0f5;
  }

  .services::before {
    background: repeating-linear-gradient(
      0deg, transparent, transparent 2px,
      rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px
    );
  }

  .circuit-left,
  .circuit-right {
    opacity: 0.25;
  }

  .section-divider-top,
  .section-divider-bottom {
    box-shadow: none;
  }

  .section-label {
    background: rgba(46, 138, 184, 0.08);
    border-color: rgba(46, 138, 184, 0.18);
  }

  .section-title {
    background: linear-gradient(135deg, #1a1a2e 0%, #333350 50%, #555568 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }

  /* --- Bento cards --- */
  .bento-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  }

  .bento-card:hover {
    border-color: rgba(46, 138, 184, 0.35);
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.1),
      0 0 20px rgba(46, 138, 184, 0.08);
  }

  .bento-card .card-glow {
    background: radial-gradient(circle at center, rgba(46, 138, 184, 0.06) 0%, transparent 50%);
  }

  .bento-card::before {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(46, 138, 184, 0.25) 30%,
      rgba(46, 138, 184, 0.4) 50%,
      rgba(46, 138, 184, 0.25) 70%,
      transparent 100%
    );
  }

  /* --- Dashboard mockup --- */
  .mockup-dashboard {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.1);
  }

  .bento-card:hover .mockup-dashboard {
    border-color: rgba(46, 138, 184, 0.2);
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.08),
      0 0 20px rgba(46, 138, 184, 0.06);
  }

  /* Sidebar */
  .mockup-sidebar {
    background: rgba(0, 0, 0, 0.03);
    border-right-color: rgba(0, 0, 0, 0.08);
  }

  .sidebar-item {
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.4);
  }

  .sidebar-item.active {
    background: linear-gradient(135deg, rgba(46, 138, 184, 0.15), rgba(45, 95, 165, 0.15));
    box-shadow: 0 0 12px rgba(46, 138, 184, 0.1);
  }

  .sidebar-tooltip {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .bento-card:hover .sidebar-item:not(.active) {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.5);
  }

  .bento-card:hover .sidebar-item:not(.active):hover {
    background: rgba(46, 138, 184, 0.08);
  }

  .sidebar-divider {
    background: rgba(0, 0, 0, 0.08);
  }

  /* Header */
  .mockup-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
  }

  .header-breadcrumb {
    color: rgba(0, 0, 0, 0.4);
  }

  .search-box {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.4);
  }

  .bento-card:hover .search-box:hover {
    border-color: rgba(46, 138, 184, 0.2);
    background: rgba(46, 138, 184, 0.04);
  }

  .action-btn {
    background: linear-gradient(135deg, rgba(46, 138, 184, 0.1), rgba(45, 95, 165, 0.1));
  }

  .bento-card:hover .action-btn:hover {
    background: linear-gradient(135deg, rgba(46, 138, 184, 0.2), rgba(45, 95, 165, 0.2));
  }

  /* Stats */
  .stat-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
  }

  .bento-card:hover .stat-card {
    border-color: rgba(46, 138, 184, 0.12);
    background: rgba(0, 0, 0, 0.03);
  }

  .stat-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }

  .stat-label {
    color: rgba(0, 0, 0, 0.5);
  }

  /* Chart */
  .mockup-chart {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
  }

  .bento-card:hover .mockup-chart {
    border-color: rgba(46, 138, 184, 0.1);
  }

  .chart-tabs span {
    color: rgba(0, 0, 0, 0.4);
  }

  .chart-tabs span.active {
    background: rgba(46, 138, 184, 0.12);
  }

  .chart-labels {
    color: rgba(0, 0, 0, 0.35);
  }

  /* Activity feed */
  .activity-feed {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
  }

  .bento-card:hover .activity-feed {
    border-color: rgba(46, 138, 184, 0.1);
  }

  .feed-item {
    background: rgba(0, 0, 0, 0.02);
  }

  .bento-card:hover .feed-item:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  .feed-time {
    color: rgba(0, 0, 0, 0.4);
  }

  /* Floating cards */
  .floating-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }

  /* --- Browser mockup --- */
  .mockup-browser {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.1);
  }

  .bento-card:hover .mockup-browser {
    border-color: rgba(46, 138, 184, 0.2);
    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.08),
      0 0 20px rgba(46, 138, 184, 0.06);
  }

  .browser-bar {
    background: #f0f0f5;
    border-bottom-color: rgba(0, 0, 0, 0.06);
  }

  .nav-arrow, .nav-refresh {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.4);
  }

  .bento-card:hover .nav-arrow:hover,
  .bento-card:hover .nav-refresh:hover {
    background: rgba(46, 138, 184, 0.1);
  }

  .browser-url {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.06);
  }

  .bento-card:hover .browser-url {
    border-color: rgba(46, 138, 184, 0.15);
  }

  .url-text {
    color: rgba(0, 0, 0, 0.4);
  }

  .url-path {
    color: rgba(0, 0, 0, 0.4);
  }

  .action-icon {
    color: rgba(0, 0, 0, 0.4);
  }

  /* Web nav inside browser */
  .web-nav {
    border-bottom-color: rgba(0, 0, 0, 0.06);
  }

  .nav-link {
    color: rgba(0, 0, 0, 0.5);
  }

  .bento-card:hover .nav-link:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  /* Sub-line placeholders */
  .sub-line {
    background: rgba(0, 0, 0, 0.08);
  }

  /* Hero buttons inside browser mockup */
  .hero-btn.secondary {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
  }

  .bento-card:hover .hero-btn.secondary:hover {
    border-color: rgba(46, 138, 184, 0.3);
    background: rgba(46, 138, 184, 0.06);
  }

  /* Card stack */
  .stack-card {
    background: #f0f0f5;
    border-color: rgba(0, 0, 0, 0.1);
  }

  .stack-card.card-front {
    background: linear-gradient(135deg, rgba(46, 138, 184, 0.08), rgba(45, 95, 165, 0.08));
    border-color: rgba(46, 138, 184, 0.2);
  }

  .card-lines span {
    background: rgba(0, 0, 0, 0.12);
  }

  /* Web floats */
  .web-float {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
  }

  .web-float.float-3 {
    background: linear-gradient(135deg, rgba(46, 138, 184, 0.1), rgba(45, 95, 165, 0.1));
    border-color: rgba(46, 138, 184, 0.2);
  }

  /* Web stats bar */
  .web-stats-bar {
    border-top-color: rgba(0, 0, 0, 0.06);
  }

  .web-stat {
    background: rgba(0, 0, 0, 0.02);
  }

  .bento-card:hover .web-stat:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  .web-stat-label {
    color: rgba(0, 0, 0, 0.4);
  }

  /* Device icons */
  .device-icon {
    color: rgba(0, 0, 0, 0.3);
  }

  .device-icon.active {
    background: rgba(46, 138, 184, 0.1);
  }

  /* --- API mockup --- */
  .api-node {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
  }

  .bento-card:hover .api-node {
    border-color: rgba(46, 138, 184, 0.15);
    background: #ffffff;
  }

  .bento-card:hover .api-node:hover {
    border-color: rgba(46, 138, 184, 0.4);
    box-shadow: 0 0 20px rgba(46, 138, 184, 0.15);
  }

  .node-label {
    color: rgba(0, 0, 0, 0.5);
  }

  .code-snippet {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
  }

  .endpoint {
    color: rgba(0, 0, 0, 0.5);
  }

  .status-item {
    color: rgba(0, 0, 0, 0.5);
  }

  .metric-label {
    color: rgba(0, 0, 0, 0.45);
  }

  .webhook-notification {
    background: #ffffff;
    border-color: rgba(34, 197, 94, 0.25);
  }

  /* --- Tech logos --- */
  .tech-logo {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
  }

  .bento-card:hover .tech-logo {
    border-color: rgba(46, 138, 184, 0.12);
    background: rgba(0, 0, 0, 0.03);
  }

  /* --- Service card terminals --- */
  .card-terminal,
  .service-terminal {
    background: #f5f5f8;
    border-color: rgba(0, 0, 0, 0.08);
  }

  .terminal-header {
    background: #eeeeef;
    border-bottom-color: rgba(0, 0, 0, 0.06);
  }

  .feature-item {
    background: rgba(0, 0, 0, 0.02);
  }

  .feature-item:hover {
    background: rgba(46, 138, 184, 0.05);
  }

  .stack-layer {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
  }

  .integration-grid-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
  }

  .mini-code {
    background: rgba(0, 0, 0, 0.03);
  }

  .perf-score {
    background: linear-gradient(135deg, #1a8c3a, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
  }

  .floating-badge {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
  }

  /* ===========================================
     PROCESS SECTION
     =========================================== */
  .process {
    background: var(--bg-primary);
  }

  .process::before {
    background: repeating-linear-gradient(
      0deg, transparent, transparent 2px,
      rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px
    );
  }

  .process::after {
    background:
      linear-gradient(180deg, rgba(245, 245, 247, 0.9) 0%, transparent 15%, transparent 85%, rgba(245, 245, 247, 0.9) 100%);
  }

  .process-squares {
    opacity: 0.2;
  }

  .process-code-block {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  }

  .process-code-block .keyword   { color: #7c3aed; }
  .process-code-block .function  { color: #b45309; text-shadow: 0 0 5px rgba(180, 83, 9, 0.25); }
  .process-code-block .variable  { color: #0f5ba3; }
  .process-code-block .parameter { color: #0f5ba3; }
  .process-code-block .comment   { color: #6a9955; }

  .process-code-block::before {
    background:
      radial-gradient(ellipse 60% 40% at 30% 20%, rgba(46, 138, 184, 0.04) 0%, transparent 50%),
      radial-gradient(ellipse 60% 40% at 70% 80%, rgba(45, 95, 165, 0.03) 0%, transparent 50%);
  }

  .process-code-block::after {
    background: linear-gradient(90deg,
      transparent, rgba(46, 138, 184, 0.12), rgba(45, 95, 165, 0.12), rgba(46, 138, 184, 0.12), transparent
    );
  }

  .process-phases-panel {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  }

  .process-phases-panel::before {
    background:
      radial-gradient(ellipse 60% 40% at 70% 20%, rgba(45, 95, 165, 0.03) 0%, transparent 50%),
      radial-gradient(ellipse 60% 40% at 30% 80%, rgba(46, 138, 184, 0.02) 0%, transparent 50%);
  }

  .process-phases-panel::after {
    background: linear-gradient(90deg,
      transparent, rgba(45, 95, 165, 0.10), rgba(46, 138, 184, 0.10), rgba(45, 95, 165, 0.10), transparent
    );
  }

  .phases-panel-header {
    background: #f0f0f5;
    border-bottom-color: rgba(0, 0, 0, 0.06);
  }

  .phases-timeline {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
  }

  .phase-card:hover {
    background: rgba(0, 0, 0, 0.02);
  }

  .phase-weeks {
    background: rgba(0, 0, 0, 0.05);
  }

  .phase-deliverable {
    background: rgba(46, 138, 184, 0.06);
    border-color: rgba(46, 138, 184, 0.14);
  }

  .phase-card:hover .phase-deliverable {
    background: rgba(46, 138, 184, 0.09);
  }

  .process .flowing-line {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(46, 138, 184, 0.1) 25%,
      rgba(45, 95, 165, 0.1) 50%,
      rgba(46, 138, 184, 0.1) 75%,
      transparent 100%
    );
  }

  /* ===========================================
     CTA SECTION
     =========================================== */
  .cta-section {
    background: var(--bg-secondary);
  }

  .cta-section::before {
    background: repeating-linear-gradient(
      0deg, transparent, transparent 2px,
      rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px
    );
  }

  .cta-section::after {
    background:
      linear-gradient(180deg, rgba(234, 234, 239, 0.9) 0%, transparent 15%, transparent 85%, rgba(234, 234, 239, 0.9) 100%);
  }

  .cta-diamonds {
    opacity: 0.12;
  }

  .cta-orb.orb-1 {
    background: radial-gradient(circle, rgba(46, 138, 184, 0.06) 0%, transparent 70%);
  }

  .cta-orb.orb-2 {
    background: radial-gradient(circle, rgba(45, 95, 165, 0.05) 0%, transparent 70%);
  }

  .cta-orb.orb-3 {
    background: radial-gradient(circle, rgba(46, 138, 184, 0.04) 0%, transparent 70%);
  }

  .cta-card-inner {
    background: linear-gradient(180deg, #ffffff 0%, #fafafc 100%);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.07),
      0 0 20px rgba(46, 138, 184, 0.04);
  }

  .cta-card-glow {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(46, 138, 184, 0.06) 0%, transparent 60%);
  }

  .cta-status-bar {
    background: rgba(0, 0, 0, 0.02);
    border-bottom-color: rgba(0, 0, 0, 0.06);
  }

  .cta-title {
    background: linear-gradient(135deg, #1a1a2e 0%, #333350 50%, #555568 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .btn-primary {
    box-shadow:
      0 0 16px rgba(46, 138, 184, 0.15),
      0 0 32px rgba(45, 95, 165, 0.06);
  }

  .btn-primary:hover {
    box-shadow:
      0 6px 30px rgba(46, 138, 184, 0.25),
      0 0 50px rgba(45, 95, 165, 0.1);
  }

  .btn-secondary {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-primary);
  }

  .btn-secondary:hover {
    background: rgba(46, 138, 184, 0.06);
    border-color: rgba(46, 138, 184, 0.3);
  }

  .cta-face-container {
    background: rgba(0, 0, 0, 0.02);
    border-top-color: rgba(0, 0, 0, 0.06);
  }

  .eye::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.5), transparent);
  }

  .cta-face-container.excited .eye::before {
    background: linear-gradient(90deg, transparent, rgba(46, 138, 184, 0.7), transparent);
    box-shadow: 0 0 6px rgba(46, 138, 184, 0.3);
  }

  .cta-accent-line {
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(46, 138, 184, 0.1) 20%,
      rgba(45, 95, 165, 0.15) 50%,
      rgba(46, 138, 184, 0.1) 80%,
      transparent 100%
    );
  }

  .cta-accent-line::before {
    box-shadow: 0 0 12px rgba(46, 138, 184, 0.5);
  }

  .response-time {
    color: var(--text-secondary);
  }

  /* ===========================================
     FOOTER
     =========================================== */
  .footer {
    background: linear-gradient(180deg, var(--bg-primary) 0%, #e0e0e5 100%);
  }

  .footer::before {
    background-image:
      linear-gradient(rgba(46, 138, 184, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(46, 138, 184, 0.04) 1px, transparent 1px);
  }

  .footer::after {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(46, 138, 184, 0.12) 20%,
      rgba(45, 95, 165, 0.25) 50%,
      rgba(46, 138, 184, 0.12) 80%,
      transparent 100%
    );
  }

  .footer-circuit {
    opacity: 0.15;
  }

  .social-link {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
  }

  .social-link:hover {
    background: rgba(46, 138, 184, 0.08);
    border-color: rgba(46, 138, 184, 0.25);
  }

  .footer-nav-list a {
    color: rgba(26, 26, 46, 0.65);
  }

  .footer-nav-list a:hover {
    color: var(--accent);
  }

  .footer-status-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
  }

  .footer-status-card::before {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(71, 186, 90, 0.2) 30%,
      rgba(71, 186, 90, 0.35) 50%,
      rgba(71, 186, 90, 0.2) 70%,
      transparent 100%
    );
  }

  .animated-divider {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(46, 138, 184, 0.12) 15%,
      rgba(46, 138, 184, 0.3) 30%,
      rgba(45, 95, 165, 0.3) 50%,
      rgba(46, 138, 184, 0.3) 70%,
      rgba(46, 138, 184, 0.12) 85%,
      transparent 100%
    );
    background-size: 200% 100%;
  }

  .animated-divider::before {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(46, 138, 184, 0.08) 30%,
      rgba(45, 95, 165, 0.08) 50%,
      rgba(46, 138, 184, 0.08) 70%,
      transparent 100%
    );
    background-size: 200% 100%;
  }

  .particle {
    background: rgba(46, 138, 184, 0.35);
  }

  .particle:nth-child(2),
  .particle:nth-child(4) {
    background: rgba(45, 95, 165, 0.35);
  }

  .particle:nth-child(6) {
    background: rgba(200, 160, 60, 0.35);
  }

  .footer-bottom {
    border-top-color: rgba(0, 0, 0, 0.08);
  }

  .footer-cta-btn {
    background: linear-gradient(135deg, rgba(46, 138, 184, 0.08) 0%, rgba(45, 95, 165, 0.08) 100%);
    border-color: rgba(46, 138, 184, 0.22);
  }

  .footer-cta-btn:hover {
    background: linear-gradient(135deg, rgba(46, 138, 184, 0.15) 0%, rgba(45, 95, 165, 0.15) 100%);
    border-color: rgba(46, 138, 184, 0.35);
    box-shadow: 0 4px 12px rgba(46, 138, 184, 0.08);
  }

  /* ===========================================
     FAQ SECTION
     =========================================== */
  .faq::before {
    background: repeating-linear-gradient(
      0deg, transparent, transparent 2px,
      rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px
    );
  }

  .faq-item {
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }

  .faq-item:first-child {
    border-top-color: rgba(0, 0, 0, 0.08);
  }

  /* ===========================================
     LOGO SWAP
     =========================================== */
  .footer-logo-img,
  .nav-brand img {
    content: url('../images/MOATIZE_main.png');
  }

  /* Keep hero nav logo dark */
  .hero .nav-brand img {
    content: url('../images/MOATIZE_main-dark.png');
  }


}