/* ── Matches the index.html redesign: AI-visual palette, dark-zone sections, glass-free clean cards ── */
    :root {
      --grad-blue: #4f8cff;
      --grad-cyan: #7dd3fc;
      --grad-purple: #8b5cf6;
      --grad-purple2: #a78bfa;
      --dark-grad:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0/26px 26px,
        radial-gradient(1000px 600px at 88% -8%, rgba(139,92,246,.32), transparent 60%),
        radial-gradient(800px 500px at -5% 105%, rgba(56,189,248,.20), transparent 55%),
        linear-gradient(180deg, #0b0f2e 0%, #0a0d24 55%, #05060f 100%);
      --card-grad: linear-gradient(160deg, rgba(79,140,255,.16), rgba(139,92,246,.14) 55%, rgba(6,8,20,.78));
      --card-grad-hover: linear-gradient(160deg, rgba(79,140,255,.28), rgba(139,92,246,.22) 60%, rgba(6,8,20,.82));
      --card-border: rgba(148,197,255,.28);
      --card-border-hover: rgba(139,197,253,.65);
    }

    /* Nav + footer logo image (replaces old text logo) */
    .nav-logo { display: inline-flex; align-items: center; text-decoration: none; }
    .nav-logo img.logo-img { height: 72px; width: auto; display: block; transition: transform .25s ease; }
    .nav-logo:hover img.logo-img { transform: scale(1.04); }
    .footer-brand .logo-img { height: 48px; }
    @media (max-width: 768px) { .nav-logo img.logo-img { height: 52px; } }

    /* DARK-ZONE: same re-theming class used across index.html */
    .dark-zone {
      --bg: rgba(255,255,255,.05);
      --white: rgba(255,255,255,.06);
      --ink: #f4f6ff;
      --ink-light: #a9b2d8;
      --accent2: var(--grad-cyan);
      --accent-dark: var(--grad-purple);
      --line: rgba(255,255,255,.14);
      background: var(--dark-grad);
      color: var(--ink);
      position: relative;
    }
    .dark-zone .btn-primary { background: linear-gradient(90deg, var(--grad-blue), var(--grad-purple)); color: #fff; }
    .dark-zone .btn-primary:hover { filter: brightness(1.12); }
    .dark-zone .btn-ghost { border-color: rgba(255,255,255,.3); color: var(--ink); }
    .dark-zone .btn-ghost:hover { border-color: #fff; }
    .dark-zone .btn-calendly { border-color: rgba(125,211,252,.55); color: var(--grad-cyan); }
    .dark-zone .btn-calendly:hover { background: var(--grad-cyan); color: #06081a; }
    .dark-zone .breadcrumb, .dark-zone .breadcrumb a { color: var(--ink-light); }
    .dark-zone .page-hero-tag { color: var(--grad-cyan); }
    .dark-zone h1, .dark-zone h1 .accent { color: var(--ink); }
    .dark-zone h1 .accent { background: linear-gradient(90deg, var(--grad-cyan), var(--grad-purple2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .dark-zone .lead { color: var(--ink-light); }

    /* Feature cards ("What We Build") — clean light card, matches stat-card/trust-tile treatment */
    .ai-feature-card {
      background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px;
      transition: transform .25s, box-shadow .25s, border-color .25s;
    }
    .ai-feature-card:hover { transform: translateY(-4px); border-color: var(--accent2); box-shadow: 0 12px 32px rgba(26,75,219,.12); }
    .ai-feature-icon { font-size: 1.8rem; margin-bottom: 12px; }
    .ai-feature-card h3 { color: var(--ink); margin-bottom: 8px; }
    .ai-feature-card p { color: var(--ink-light); }
    .ai-feature-card ul { color: var(--ink-light); margin-top: 10px; padding-left: 18px; }

    /* Process steps — individual glass cards on the dark-zone section, matching index's #process */
    .ai-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
    .ai-process-step {
      background: var(--card-grad); border: 1px solid var(--card-border); border-radius: 14px; padding: 26px 20px;
      transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
    }
    .ai-process-step:hover { transform: translateY(-4px); border-color: var(--card-border-hover); background: var(--card-grad-hover); box-shadow: 0 14px 36px rgba(139,92,246,.28); }
    .ai-process-step .step-num { font-family: var(--serif); font-size: 2.2rem; font-weight: 800; color: rgba(148,197,255,.4); line-height: 1; margin-bottom: 10px; }
    .ai-process-step h4 { font-size: .9rem; font-weight: 600; margin-bottom: 7px; color: var(--ink); }
    .ai-process-step p { font-size: .8rem; color: var(--ink-light); line-height: 1.65; }
    @media (max-width: 768px) { .ai-process-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .ai-process-grid { grid-template-columns: 1fr; } }