/* =========================================================================
   ai-experience.css
   Standalone dark/glass design system for /ai-experience.
   Independent from style.css — no inheritance from the global site shell.
   ========================================================================= */

/* ---------- Tokens ------------------------------------------------------- */
:root {
   --bg-0:        #05060B;
   --bg-1:        #0A0E1F;
   --bg-2:        #0F1430;
   --glass:       rgba(10, 14, 30, 0.55);
   --glass-2:     rgba(15, 20, 48, 0.65);
   --border-1:    rgba(255, 255, 255, 0.08);
   --border-2:    rgba(255, 255, 255, 0.16);

   --cyan:        #22D3EE;
   --cyan-soft:   rgba(34, 211, 238, 0.12);
   --indigo:      #6366F1;
   --violet:      #8B5CF6;
   --purple:      #A855F7;
   --magenta:     #EC4899;
   --emerald:     #10B981;

   --text:        #E5E7F0;
   --text-muted:  #9CA3B5;
   --text-dim:    rgba(229, 231, 240, 0.55);

   --grad-primary: linear-gradient(135deg, #22D3EE 0%, #6366F1 50%, #A855F7 100%);
   --grad-warm:    linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
   --grad-cool:    linear-gradient(135deg, #22D3EE 0%, #6366F1 100%);
   --grad-soft:    linear-gradient(135deg, rgba(34,211,238,0.18) 0%, rgba(168,85,247,0.18) 100%);

   --glow-cyan:    0 0 32px rgba(34, 211, 238, 0.35);
   --glow-purple:  0 0 32px rgba(168, 85, 247, 0.35);
   --shadow-card:  0 24px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border-1) inset;

   --r-sm: 10px;
   --r-md: 16px;
   --r-lg: 24px;
   --r-xl: 32px;
   --r-pill: 999px;

   --sect-py-d: 80px;
   --sect-py-m: 56px;

   --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset (scoped to the page) ----------------------------------- */
.ai-x, .ai-x *, .ai-x *::before, .ai-x *::after {
   box-sizing: border-box;
}
.ai-x { margin: 0; }

html {
   scroll-behavior: smooth;
   /* Account for the fixed top nav so anchor jumps don't hide section headers */
   scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
}
@media (max-width: 768px) {
   html { scroll-padding-top: 64px; }
}

/* Safe-area-inset support for notched devices (iPhone, etc.) */
@supports (padding: max(0px)) {
   .ai-nav__inner { padding-left: max(32px, env(safe-area-inset-left));
                    padding-right: max(32px, env(safe-area-inset-right)); }
   .ai-mobile-menu { padding-left: max(24px, env(safe-area-inset-left));
                     padding-right: max(24px, env(safe-area-inset-right));
                     padding-top: max(24px, env(safe-area-inset-top)); }
}

body.ai-x {
   margin: 0;
   background: var(--bg-0);
   color: var(--text);
   font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 16px;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   overflow-x: hidden;
   min-height: 100vh;
}

/* Backdrop ambient gradient — provides cosmic glow behind everything */
body.ai-x::before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
   background:
      radial-gradient(60% 40% at 20% 10%, rgba(99, 102, 241, 0.18) 0%, transparent 60%),
      radial-gradient(50% 35% at 85% 25%, rgba(34, 211, 238, 0.12) 0%, transparent 60%),
      radial-gradient(70% 50% at 50% 100%, rgba(168, 85, 247, 0.18) 0%, transparent 65%),
      var(--bg-0);
   z-index: -2;
}

/* Subtle fixed grid overlay */
body.ai-x::after {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
   background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
   background-size: 64px 64px;
   mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 90%);
   z-index: -1;
}

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

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

button { font: inherit; color: inherit; background: transparent; border: none; cursor: pointer; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
p { margin: 0; }

::selection { background: rgba(34, 211, 238, 0.3); color: #fff; }

/* ---------- Skip link & screen-reader helpers ---------------------------- */
.sr-only-focusable {
   position: absolute; left: -9999px; top: 0;
}
.sr-only-focusable:focus {
   left: 16px; top: 16px;
   z-index: 9999;
   padding: 12px 18px;
   background: var(--cyan); color: #000;
   border-radius: var(--r-md); font-weight: 700;
}
.sr-only {
   position: absolute !important;
   width: 1px; height: 1px;
   padding: 0; margin: -1px; overflow: hidden;
   clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Focus rings -------------------------------------------------- */
.ai-x a:focus-visible,
.ai-x button:focus-visible,
.ai-x input:focus-visible,
.ai-x textarea:focus-visible {
   outline: 2px solid var(--cyan);
   outline-offset: 3px;
   border-radius: var(--r-sm);
}

/* ---------- Layout helpers ----------------------------------------------- */
.ai-container {
   width: 100%;
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 32px;
}
@media (max-width: 768px) {
   .ai-container { padding: 0 20px; }
}

.ai-section {
   position: relative;
   padding: var(--sect-py-d) 0;
}
@media (max-width: 768px) {
   .ai-section { padding: var(--sect-py-m) 0; }
}

/* Lazy paint for off-screen sections */
.ai-section[data-lazypaint] { content-visibility: auto; contain-intrinsic-size: 1px 800px; }

/* Glass surface utility */
.ai-glass {
   background: var(--glass);
   backdrop-filter: blur(24px) saturate(140%);
   -webkit-backdrop-filter: blur(24px) saturate(140%);
   border: 1px solid var(--border-1);
   border-radius: var(--r-lg);
}

.ai-eyebrow {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 6px 14px;
   font-size: 12px; font-weight: 600;
   letter-spacing: 0.16em; text-transform: uppercase;
   color: var(--cyan);
   background: var(--cyan-soft);
   border: 1px solid rgba(34, 211, 238, 0.25);
   border-radius: var(--r-pill);
}
.ai-eyebrow::before {
   content: "";
   width: 6px; height: 6px; border-radius: 50%;
   background: var(--cyan);
   box-shadow: 0 0 10px var(--cyan);
   animation: aiPulse 2.4s ease-in-out infinite;
}
@keyframes aiPulse {
   0%, 100% { opacity: 1; transform: scale(1); }
   50%      { opacity: 0.5; transform: scale(1.4); }
}

/* Gradient text */
.ai-grad-text {
   background: var(--grad-primary);
   -webkit-background-clip: text; background-clip: text;
   -webkit-text-fill-color: transparent; color: transparent;
}

/* Buttons */
.ai-btn {
   display: inline-flex; align-items: center; gap: 10px;
   padding: 14px 26px;
   font-size: 15px; font-weight: 600;
   border-radius: var(--r-pill);
   transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
   white-space: nowrap;
}
.ai-btn--primary {
   color: #fff;
   background: var(--grad-primary);
   background-size: 200% 200%;
   background-position: 0% 50%;
   box-shadow: 0 10px 30px -8px rgba(99, 102, 241, 0.5), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.ai-btn--primary:hover {
   background-position: 100% 50%;
   transform: translateY(-2px);
   box-shadow: 0 16px 40px -8px rgba(168, 85, 247, 0.55), 0 0 0 1px rgba(255,255,255,0.12) inset;
}
.ai-btn--ghost {
   color: var(--text);
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-2);
   backdrop-filter: blur(10px);
}
.ai-btn--ghost:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: var(--cyan);
   color: var(--cyan);
}
.ai-btn .ai-arrow {
   width: 14px; height: 14px;
   transition: transform 200ms var(--ease);
}
.ai-btn:hover .ai-arrow { transform: translateX(4px); }

/* ============================================================
   1. TOP NAV
   ============================================================ */
.ai-nav {
   position: fixed; top: 0; left: 0; right: 0;
   z-index: 100;
   transition: background 300ms var(--ease), border-color 300ms var(--ease), backdrop-filter 300ms var(--ease);
   border-bottom: 1px solid transparent;
}
.ai-nav__inner {
   display: flex; align-items: center; justify-content: space-between;
   padding: 16px 32px;
   max-width: 1440px; margin: 0 auto;
}
.ai-nav.is-scrolled {
   background: rgba(5, 6, 11, 0.7);
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
   border-bottom-color: var(--border-1);
}
.ai-nav__logo {
   display: inline-flex; align-items: center; gap: 10px;
   font-weight: 700; font-size: 17px; letter-spacing: 0.02em;
   color: var(--text);
}
.ai-nav__logo img {
   height: 55px; width: auto;
   filter: none;
   opacity: 1;
}

/* Theme-aware logo swap.
   - .ai-logo--dark = white-text version, used in DARK mode
   - .ai-logo--light = dark-text version, used in LIGHT mode
   Both <img> tags exist in each logo placement; CSS hides one based on
   the .theme-light class on <html>. */
.ai-logo--light { display: none !important; }
html.theme-light .ai-logo--dark { display: none !important; }
html.theme-light .ai-logo--light { display: inline-block !important; }

/* ─── Animated AI nav icon (sits between logo and "AI" wordmark) ─── */
.ai-nav__icon {
   width: 22px; height: 22px;
   display: inline-flex; align-items: center; justify-content: center;
   color: var(--cyan);
   margin: 0 2px;
}
.ai-nav__icon svg { width: 100%; height: 100%; overflow: visible; }
.ai-nav__icon-core {
   fill: var(--magenta);
   filter: drop-shadow(0 0 4px rgba(236, 72, 153, 0.6));
   transform-origin: 12px 12px;
   animation: aiNavCore 2.8s ease-in-out infinite;
}
.ai-nav__icon-ring {
   fill: none;
   stroke: currentColor;
   stroke-width: 1;
   opacity: 0.55;
   transform-origin: 12px 12px;
}
.ai-nav__icon-ring--1 { animation: aiNavRingSpin 6s linear infinite; }
.ai-nav__icon-ring--2 {
   stroke-dasharray: 4 5;
   opacity: 0.4;
   animation: aiNavRingSpin 9s linear infinite reverse;
}
.ai-nav__icon-orbit {
   transform-origin: 12px 12px;
}
.ai-nav__icon-orbit--a { fill: var(--cyan);    animation: aiNavRingSpin 5s   linear infinite; }
.ai-nav__icon-orbit--b { fill: var(--magenta); animation: aiNavRingSpin 6.5s linear infinite -2s; }
.ai-nav__icon-orbit--c { fill: var(--violet);  animation: aiNavRingSpin 8s   linear infinite -4s; }
.ai-nav__label {
   display: inline-block;
   font-weight: 700;
   font-size: 15px;
   letter-spacing: 0.04em;
   color: inherit;
}
.ai-nav__logo:hover .ai-nav__icon-core { animation-duration: 1.4s; }
@keyframes aiNavCore {
   0%, 100% { transform: scale(1);    opacity: 1; }
   50%      { transform: scale(1.18); opacity: 0.85; }
}
@keyframes aiNavRingSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
   .ai-nav__icon-core, .ai-nav__icon-ring, .ai-nav__icon-orbit { animation: none !important; }
}
/* In light mode, ring color sits on a light bg — slightly stronger contrast */
html.theme-light .ai-nav__icon { color: var(--violet); }
.ai-nav__logo .ai-nav__dot {
   width: 8px; height: 8px; border-radius: 50%;
   background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
}
.ai-nav__links {
   display: flex; align-items: center; gap: 4px;
   list-style: none; margin: 0; padding: 0;
}
/* Definitive bullet/marker reset for the nav lists.
   Stronger than `list-style: none` because some browsers still paint markers
   when the ul has `display: contents` — we forcibly override that, kill the
   marker pseudo-element, and switch li to inline-flex so it's no longer a
   list-item. */
.ai-nav__links ul {
   display: flex !important;
   align-items: center;
   gap: 4px;
   list-style: none !important;
   list-style-type: none !important;
   margin: 0 !important;
   padding: 0 !important;
}
.ai-nav__links li,
.ai-mobile-menu ul li {
   list-style: none !important;
   list-style-type: none !important;
   list-style-image: none !important;
}
.ai-nav__links li {
   display: inline-flex;
}
.ai-nav__links li::marker,
.ai-mobile-menu ul li::marker {
   content: "" !important;
   font-size: 0 !important;
   color: transparent !important;
}
.ai-mobile-menu ul {
   list-style: none !important;
   padding: 0;
   margin: 0 0 32px;
}
.ai-nav__links a {
   display: inline-block;
   padding: 8px 14px;
   color: var(--text-muted);
   font-size: 14px; font-weight: 500;
   border-radius: var(--r-pill);
   transition: color 180ms var(--ease), background 180ms var(--ease);
}
.ai-nav__links a:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.ai-nav__links a.is-active {
   color: #fff;
   background: rgba(34, 211, 238, 0.12);
   box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.32) inset, 0 0 18px rgba(34, 211, 238, 0.18);
}
.ai-mobile-menu a.is-active {
   color: var(--cyan);
   background: rgba(34, 211, 238, 0.1);
}
.ai-nav__cta { display: flex; align-items: center; gap: 12px; }
.ai-nav__hamburger {
   display: none;
   width: 40px; height: 40px;
   border-radius: 10px;
   background: rgba(255,255,255,0.05);
   border: 1px solid var(--border-1);
}
.ai-nav__hamburger span {
   display: block; width: 18px; height: 2px;
   background: var(--text); margin: 4px auto;
   border-radius: 2px;
   transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
@media (max-width: 991px) {
   .ai-nav__links, .ai-nav__cta .ai-btn { display: none; }
   .ai-nav__hamburger { display: block; }
}

/* Mobile off-canvas */
.ai-mobile-menu {
   position: fixed; inset: 0; z-index: 200;
   background: rgba(5, 6, 11, 0.92);
   backdrop-filter: blur(24px);
   display: flex; flex-direction: column;
   padding: 24px;
   transform: translateX(100%);
   transition: transform 320ms var(--ease);
   pointer-events: none;
}
.ai-mobile-menu.is-open {
   transform: translateX(0);
   pointer-events: auto;
}
.ai-mobile-menu__head {
   display: flex; align-items: center; justify-content: space-between;
   margin-bottom: 36px;
}
.ai-mobile-menu__close {
   width: 40px; height: 40px;
   border-radius: 10px;
   background: rgba(255,255,255,0.06);
   border: 1px solid var(--border-1);
   color: var(--text); font-size: 22px;
}
.ai-mobile-menu ul {
   list-style: none; padding: 0; margin: 0 0 32px;
   display: flex; flex-direction: column; gap: 4px;
}
.ai-mobile-menu a {
   display: block;
   padding: 16px 20px;
   font-size: 18px; font-weight: 600;
   color: var(--text);
   border-radius: var(--r-md);
}
.ai-mobile-menu a:hover { background: rgba(255,255,255,0.06); }

/* ============================================================
   2. HERO
   ============================================================ */
.ai-hero {
   position: relative;
   min-height: 100vh;
   display: flex; align-items: center; justify-content: center;
   text-align: center;
   padding: 120px 24px 80px;
   overflow: hidden;
}
.ai-hero__canvas, .ai-hero__three {
   position: absolute; inset: 0; pointer-events: none;
   z-index: 0;
}
.ai-hero__three { mix-blend-mode: screen; opacity: 0.85; }
.ai-hero__inner { position: relative; z-index: 2; max-width: 980px; }

.ai-hero h1 {
   font-size: clamp(40px, 7vw, 96px);
   /* Bumped from 1.02 → 1.12 so descenders ("g", "p", "y") aren't clipped
      by background-clip:text on the gradient line. */
   line-height: 1.12;
   letter-spacing: -0.03em;
   font-weight: 800;
   margin-bottom: 28px;
}
.ai-hero h1 .ai-hero__line {
   display: block;
   /* extra breathing room below baseline so background-clip:text on the
      gradient line doesn't trim the bottom of letters with descenders */
   padding-bottom: 0.06em;
}
.ai-hero h1 .ai-hero__line--grad {
   background: var(--grad-primary);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.ai-hero__sub {
   font-size: clamp(16px, 1.4vw, 20px);
   color: var(--text-muted);
   max-width: 720px;
   margin: 0 auto 40px;
}
.ai-hero__ctas {
   display: flex; gap: 16px;
   justify-content: center; flex-wrap: wrap;
   margin-bottom: 56px;
}
.ai-hero__chips {
   display: flex; gap: 12px;
   justify-content: center; flex-wrap: wrap;
   font-size: 13px;
   color: var(--text-muted);
}
.ai-hero__chip {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 8px 14px;
   border-radius: var(--r-pill);
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-1);
}
.ai-hero__chip::before {
   content: ""; width: 6px; height: 6px; border-radius: 50%;
   background: var(--emerald); box-shadow: 0 0 8px var(--emerald);
}

.ai-hero__scroll {
   position: absolute; left: 50%; bottom: 32px;
   transform: translateX(-50%);
   color: var(--text-dim);
   font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
   z-index: 2;
   display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ai-hero__scroll-text { display: block; }
.ai-hero__scroll-bar {
   width: 1px; height: 38px;
   background: linear-gradient(to bottom, transparent, var(--cyan), transparent);
   background-size: 100% 200%;
   animation: scrollHint 2.4s ease-in-out infinite;
}
.ai-hero__scroll-arrow {
   width: 14px; height: 9px;
   color: var(--cyan);
   filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5));
   animation: aiArrowBob 2.4s ease-in-out infinite;
}
@keyframes scrollHint {
   0%   { background-position: 0% 0%; }
   100% { background-position: 0% 200%; }
}
@keyframes aiArrowBob {
   0%, 100% { transform: translateY(0);  opacity: 0.55; }
   50%      { transform: translateY(4px); opacity: 1; }
}

/* ============================================================
   SECTION-END ARROW — same visual language as the hero's scroll
   indicator (animated gradient bar + bobbing cyan chevron),
   used as a transition cue between content sections. Injected
   via JS so the PHP markup stays clean.
   ============================================================ */
.ai-section-arrow {
   display: flex; flex-direction: column;
   align-items: center; gap: 6px;
   margin: 4px auto 0;
   pointer-events: none;
}
.ai-section-arrow__bar {
   width: 1px; height: 24px;
   background: linear-gradient(to bottom, transparent, var(--cyan), transparent);
   background-size: 100% 200%;
   animation: scrollHint 2.4s ease-in-out infinite;
}
.ai-section-arrow__icon {
   width: 14px; height: 9px;
   color: var(--cyan);
   filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5));
   animation: aiArrowBob 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
   .ai-section-arrow__bar,
   .ai-section-arrow__icon { animation: none; }
}

/* ============================================================
   HERO PULSE BAND — 7 cyan dots with a gradient line, sequenced
   pulse animation that suggests the seven products coming up.
   Decorative only, not a navigation duplicate.
   ============================================================ */
.ai-hero__pulse {
   margin-top: 56px;
   max-width: 460px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}
.ai-hero__pulse-label {
   display: inline-block;
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.24em;
   text-transform: uppercase;
   color: var(--text-dim);
   margin-bottom: 16px;
}
.ai-hero__pulse-track {
   position: relative;
   height: 8px;
   width: 100%;
}
.ai-hero__pulse-line {
   position: absolute;
   left: 0; right: 0; top: 50%;
   transform: translateY(-50%);
   height: 1px;
   background: linear-gradient(90deg,
      transparent 0%,
      rgba(34, 211, 238, 0.35) 25%,
      rgba(168, 85, 247, 0.35) 75%,
      transparent 100%);
}
.ai-hero__pulse-dots {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 8px;
}
.ai-hero__pulse-dots span {
   display: inline-block;
   width: 6px; height: 6px;
   border-radius: 50%;
   background: var(--cyan);
   box-shadow: 0 0 10px var(--cyan);
   animation: aiDotPulse 2.6s ease-in-out infinite;
   transform-origin: center;
}
.ai-hero__pulse-dots span:nth-child(1) { animation-delay: 0s;     }
.ai-hero__pulse-dots span:nth-child(2) { animation-delay: 0.18s;  }
.ai-hero__pulse-dots span:nth-child(3) { animation-delay: 0.36s;  }
.ai-hero__pulse-dots span:nth-child(4) { animation-delay: 0.54s; background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.ai-hero__pulse-dots span:nth-child(5) { animation-delay: 0.72s; background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.ai-hero__pulse-dots span:nth-child(6) { animation-delay: 0.90s; background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }
.ai-hero__pulse-dots span:nth-child(7) { animation-delay: 1.08s; background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }
@keyframes aiDotPulse {
   0%, 100% { transform: scale(0.85); opacity: 0.35; }
   30%      { transform: scale(1.4);  opacity: 1; }
   60%      { transform: scale(0.85); opacity: 0.35; }
}
@media (max-width: 480px) {
   .ai-hero__pulse { max-width: 340px; }
   .ai-hero__pulse-dots span { width: 5px; height: 5px; }
}

/* ============================================================
   3. PRODUCT INDEX — non-sticky preview band between hero and
   products. Was previously sticky which created a double-bar
   stack with the main nav (taking ~120px of vertical space and
   duplicating the nav's product links).
   ============================================================ */
.ai-rail {
   position: relative;
   z-index: 1;
   padding: 28px 0 12px;
   background: transparent;
   border: 0;
}
.ai-rail__inner {
   display: flex; align-items: center; gap: 8px;
   justify-content: center;
   flex-wrap: wrap;
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding: 0 24px;
}
@media (max-width: 768px) {
   .ai-rail__inner { flex-wrap: nowrap; justify-content: flex-start; }
}
.ai-rail__inner::-webkit-scrollbar { display: none; }
.ai-rail__chip {
   flex: none;
   display: inline-flex; align-items: center; gap: 8px;
   padding: 8px 16px;
   font-size: 13px; font-weight: 500;
   color: var(--text-muted);
   background: rgba(255,255,255,0.03);
   border: 1px solid transparent;
   border-radius: var(--r-pill);
   transition: color 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease);
   cursor: pointer;
}
.ai-rail__chip .ai-rail__num {
   font-size: 11px; opacity: 0.7;
   font-variant-numeric: tabular-nums;
}
.ai-rail__chip:hover { color: var(--text); border-color: var(--border-1); }
.ai-rail__chip.is-active {
   color: #fff;
   background: var(--cyan-soft);
   border-color: rgba(34, 211, 238, 0.5);
   box-shadow: var(--glow-cyan);
}

/* ============================================================
   4. PRODUCT SECTION COMMON
   ============================================================ */
.ai-prod {
   position: relative;
   padding: 56px 0;
}
.ai-prod__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center;
}
.ai-prod--reverse .ai-prod__row > .ai-prod__copy { order: 2; }
.ai-prod--reverse .ai-prod__row > .ai-prod__visual { order: 1; }
@media (max-width: 991px) {
   .ai-prod { padding: 40px 0; }
   .ai-prod__row { grid-template-columns: 1fr; gap: 40px; }
   .ai-prod--reverse .ai-prod__row > .ai-prod__copy,
   .ai-prod--reverse .ai-prod__row > .ai-prod__visual { order: initial; }
}
.ai-prod__num {
   font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 13px;
   color: var(--cyan);
   letter-spacing: 0.18em;
   margin-bottom: 12px;
   display: inline-block;
}
.ai-prod__title {
   font-size: clamp(30px, 3.4vw, 48px);
   font-weight: 800;
   line-height: 1.05;
   letter-spacing: -0.025em;
   margin-bottom: 16px;
}
.ai-prod__lede {
   font-size: 17px;
   color: var(--text-muted);
   margin-bottom: 24px;
   max-width: 520px;
}
.ai-prod__list {
   list-style: none; padding: 0; margin: 0 0 28px;
   display: flex; flex-direction: column; gap: 10px;
}
.ai-prod__list li {
   position: relative;
   padding-left: 26px;
   color: var(--text);
   font-size: 15px;
   line-height: 1.6;
}
.ai-prod__list li::before {
   content: ""; position: absolute; left: 0; top: 7px;
   width: 14px; height: 14px;
   border-radius: 50%;
   background: var(--grad-cool);
   box-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
}
.ai-prod__list li::after {
   content: ""; position: absolute; left: 4px; top: 11px;
   width: 6px; height: 3px;
   border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
   transform: rotate(-45deg);
}
.ai-prod__cta {
   display: inline-flex; align-items: center; gap: 8px;
   font-size: 14px; font-weight: 600;
   color: var(--cyan);
   border-bottom: 1px solid rgba(34, 211, 238, 0.4);
   padding-bottom: 4px;
   transition: color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.ai-prod__cta:hover { color: var(--purple); border-color: var(--purple); transform: translateX(4px); }

/* Visual stage shared */
.ai-stage {
   position: relative;
   aspect-ratio: 1 / 1;
   max-width: 560px;
   margin: 0 auto;
   border-radius: var(--r-xl);
   background: var(--glass);
   border: 1px solid var(--border-1);
   overflow: hidden;
   isolation: isolate;
}
.ai-stage::before {
   content: ""; position: absolute; inset: 0;
   background:
      radial-gradient(50% 50% at 30% 20%, rgba(34, 211, 238, 0.18) 0%, transparent 60%),
      radial-gradient(50% 50% at 80% 80%, rgba(168, 85, 247, 0.18) 0%, transparent 60%);
   z-index: 0;
}
.ai-stage > * { position: relative; z-index: 1; }
@media (max-width: 991px) {
   .ai-stage { aspect-ratio: 4 / 3; max-width: 480px; }
}

/* Animated conic border helper */
.ai-conic-border {
   position: relative;
}
.ai-conic-border::before {
   content: ""; position: absolute; inset: -1px;
   border-radius: inherit;
   background: conic-gradient(from 180deg at 50% 50%, var(--cyan), var(--violet), var(--magenta), var(--cyan));
   z-index: -1;
   animation: aiSpin 8s linear infinite;
   filter: blur(0.5px);
}
@keyframes aiSpin {
   to { transform: rotate(360deg); }
}

/* ============================================================
   PRODUCT 1 — AI Call Agent
   ============================================================ */
.ai-call {
   position: absolute; inset: 0;
   display: flex; flex-direction: column;
   padding: 32px;
   gap: 16px;
}
.ai-call__phone {
   align-self: center;
   width: 78%;
   padding: 18px 22px;
   border-radius: var(--r-lg);
   background: rgba(20, 24, 56, 0.7);
   border: 1px solid var(--border-2);
   box-shadow: var(--shadow-card);
}
.ai-call__phone-head {
   display: flex; align-items: center; gap: 10px;
   margin-bottom: 12px;
}
.ai-call__avatar {
   width: 36px; height: 36px;
   border-radius: 50%;
   background: var(--grad-cool);
   display: flex; align-items: center; justify-content: center;
   font-size: 15px; font-weight: 700; color: #fff;
}
.ai-call__caller-name { font-size: 14px; font-weight: 600; }
.ai-call__caller-meta { font-size: 11px; color: var(--text-dim); }
.ai-call__live {
   margin-left: auto;
   display: inline-flex; align-items: center; gap: 6px;
   font-size: 11px; color: var(--emerald);
}
.ai-call__live::before {
   content: ""; width: 7px; height: 7px; border-radius: 50%;
   background: var(--emerald);
   box-shadow: 0 0 8px var(--emerald);
   animation: aiPulse 1.4s ease-in-out infinite;
}
.ai-call__waveform {
   display: flex; align-items: center; justify-content: center; gap: 3px;
   height: 60px;
}
.ai-call__waveform span {
   display: inline-block;
   width: 3px;
   border-radius: 2px;
   background: var(--grad-cool);
   transform-origin: center;
   animation: aiBar 1.1s ease-in-out infinite;
}
@keyframes aiBar {
   0%, 100% { height: 8px; }
   50%      { height: 50px; }
}
.ai-call__log {
   flex: 1;
   display: flex; flex-direction: column; gap: 8px;
   overflow: hidden;
}
.ai-call__log-item {
   display: flex; align-items: center; gap: 10px;
   padding: 10px 14px;
   font-size: 12px;
   background: rgba(255,255,255,0.03);
   border: 1px solid var(--border-1);
   border-radius: var(--r-md);
   opacity: 0; transform: translateY(8px);
   animation: aiLogIn 600ms var(--ease) forwards;
}
.ai-call__log-item--booked { color: var(--emerald); }
.ai-call__log-item--missed { color: #FCA5A5; }
@keyframes aiLogIn {
   to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PRODUCT 2 — AI Website Builder
   ============================================================ */
.ai-builder {
   position: absolute; inset: 0;
   display: grid; grid-template-columns: 1fr 1.3fr;
   gap: 14px; padding: 22px;
}
.ai-builder__prompt, .ai-builder__preview {
   background: rgba(15, 20, 48, 0.7);
   border: 1px solid var(--border-2);
   border-radius: var(--r-md);
   padding: 14px;
   font-size: 12px;
}
.ai-builder__prompt {
   font-family: 'JetBrains Mono', ui-monospace, monospace;
   color: var(--text-muted);
}
.ai-builder__prompt::before {
   content: "› AI Builder";
   display: block; color: var(--cyan); font-size: 10px;
   letter-spacing: 0.12em; text-transform: uppercase;
   margin-bottom: 10px;
}
.ai-builder__type {
   display: inline-block; min-height: 1em;
}
.ai-builder__type::after {
   content: "▎"; color: var(--cyan);
   margin-left: 1px;
   animation: aiBlink 1s steps(2) infinite;
}
@keyframes aiBlink { 50% { opacity: 0; } }

.ai-builder__preview {
   display: flex; flex-direction: column;
   padding: 12px;
   background: rgba(8, 12, 28, 0.85);
}
.ai-builder__chrome {
   display: flex; align-items: center; gap: 4px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--border-1);
   margin-bottom: 10px;
}
.ai-builder__chrome span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.ai-builder__page {
   display: flex; flex-direction: column; gap: 6px;
   flex: 1;
}
.ai-builder__block {
   position: relative;
   border-radius: 6px;
   background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(168, 85, 247, 0.18));
   border: 1px solid var(--border-1);
   opacity: 0;
   transform: translateY(6px);
   transition: opacity 500ms var(--ease), transform 500ms var(--ease);
   overflow: hidden;
}
.ai-builder__block.is-visible { opacity: 1; transform: translateY(0); }
.ai-builder__block--hero  { height: 22%; }
.ai-builder__block--nav   { height: 8%;  }
.ai-builder__block--cards { height: 28%;
   background-image: linear-gradient(90deg, rgba(34, 211, 238, 0.2) 0 32%, transparent 32% 36%, rgba(168, 85, 247, 0.2) 36% 68%, transparent 68% 72%, rgba(236, 72, 153, 0.2) 72% 100%);
}
.ai-builder__block--text  { height: 18%; }
/* Shimmer skeleton-loader overlay while a block is being "generated" */
.ai-builder__block.is-generating::after {
   content: "";
   position: absolute; inset: 0;
   background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.06) 30%,
      rgba(255, 255, 255, 0.18) 50%,
      rgba(255, 255, 255, 0.06) 70%,
      transparent 100%);
   transform: translateX(-100%);
   animation: aiShimmer 1.2s linear infinite;
}
@keyframes aiShimmer { to { transform: translateX(100%); } }

/* Cyan scan line that sweeps down the preview during generation */
.ai-builder__preview { position: relative; overflow: hidden; }
.ai-builder__scan {
   position: absolute; left: 0; right: 0; top: -80px;
   height: 80px;
   pointer-events: none;
   background: linear-gradient(180deg,
      transparent 0%,
      rgba(34, 211, 238, 0.18) 50%,
      transparent 100%);
   z-index: 5;
   opacity: 0;
}
.ai-builder__scan.is-active { animation: aiScan 1.8s ease-in-out infinite; }
@keyframes aiScan {
   0%   { top: -80px;  opacity: 0; }
   10%  { opacity: 1; }
   90%  { opacity: 1; }
   100% { top: 110%;  opacity: 0; }
}

/* "Generated in Xs" badge that pops in once the build completes */
.ai-builder__badge {
   position: absolute;
   right: 10px; top: 10px;
   padding: 4px 10px;
   font-size: 10px;
   font-weight: 600;
   color: #fff;
   background: var(--grad-cool);
   border-radius: var(--r-pill);
   z-index: 6;
   opacity: 0;
   transform: translateY(-6px) scale(0.92);
   transition: opacity 280ms var(--ease), transform 280ms var(--ease);
   box-shadow: 0 0 16px rgba(34, 211, 238, 0.4);
   white-space: nowrap;
   font-family: 'JetBrains Mono', ui-monospace, monospace;
   letter-spacing: 0.04em;
}
.ai-builder__badge::before { content: "✓ "; color: #fff; }
.ai-builder__badge.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* Tiny progress dots in the prompt panel header */
.ai-builder__prompt::before { display: inline-flex; align-items: center; gap: 6px; }
.ai-builder__status {
   display: inline-block;
   margin-left: 8px;
   font-size: 9px;
   color: var(--cyan);
   letter-spacing: 0.18em;
   text-transform: uppercase;
   opacity: 0;
   transition: opacity 240ms var(--ease);
}
.ai-builder__status.is-active { opacity: 1; }
.ai-builder__status::before {
   content: "";
   display: inline-block;
   width: 6px; height: 6px;
   margin-right: 6px;
   border-radius: 50%;
   background: var(--cyan);
   box-shadow: 0 0 8px var(--cyan);
   animation: aiPulse 1s ease-in-out infinite;
   vertical-align: middle;
}

/* ============================================================
   PRODUCT 3 — AI Visibility (SERP + donut)
   ============================================================ */
.ai-vis {
   position: absolute; inset: 0;
   display: flex; flex-direction: column;
   gap: 14px; padding: 28px;
}
.ai-vis__head {
   display: flex; align-items: center; justify-content: space-between;
   font-size: 11px; color: var(--text-dim); letter-spacing: 0.16em; text-transform: uppercase;
}
.ai-vis__serp {
   flex: 1;
   display: flex; flex-direction: column; gap: 8px;
}
.ai-vis__row {
   display: flex; align-items: center; gap: 12px;
   padding: 10px 14px;
   border-radius: var(--r-md);
   background: rgba(15, 20, 48, 0.55);
   border: 1px solid var(--border-1);
   font-size: 12px;
   transition: transform 600ms var(--ease), background 400ms var(--ease), border-color 400ms var(--ease);
}
.ai-vis__rank {
   width: 26px; height: 26px;
   border-radius: 50%;
   background: rgba(255,255,255,0.06);
   display: flex; align-items: center; justify-content: center;
   font-weight: 700; font-size: 12px;
   color: var(--text-muted);
}
.ai-vis__row.is-you {
   background: rgba(34, 211, 238, 0.12);
   border-color: rgba(34, 211, 238, 0.4);
}
.ai-vis__row.is-you .ai-vis__rank {
   background: var(--grad-cool); color: #fff;
   box-shadow: 0 0 16px rgba(34, 211, 238, 0.5);
}
.ai-vis__row .ai-vis__title { flex: 1; color: var(--text); font-weight: 500; }
.ai-vis__row .ai-vis__url { color: var(--text-dim); font-size: 11px; }
.ai-vis__donut {
   position: absolute; right: 28px; bottom: 28px;
   width: 96px; height: 96px;
   display: flex; align-items: center; justify-content: center;
   font-size: 22px; font-weight: 800; color: #fff;
   background:
      conic-gradient(var(--cyan) 0% 92%, rgba(255,255,255,0.08) 92% 100%);
   border-radius: 50%;
}
.ai-vis__donut::before {
   content: ""; position: absolute; inset: 8px;
   border-radius: 50%; background: var(--bg-1);
}
.ai-vis__donut span { position: relative; z-index: 1; }
.ai-vis__donut small { display: block; font-size: 9px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 2px; }

/* ============================================================
   PRODUCT 4 — AI Lead Generator (funnel)
   ============================================================ */
.ai-funnel {
   position: absolute; inset: 0;
   display: flex; flex-direction: column;
   align-items: center; justify-content: center;
   padding: 24px; gap: 14px;
}
.ai-funnel__svg { width: 78%; height: auto; }
.ai-funnel__stage {
   width: 78%;
   display: flex; align-items: center; justify-content: space-between;
   padding: 10px 16px;
   font-size: 12px;
   border-radius: var(--r-md);
   background: rgba(15, 20, 48, 0.65);
   border: 1px solid var(--border-1);
}
.ai-funnel__stage strong { color: #fff; font-size: 14px; }
.ai-funnel__stage--booked { border-color: rgba(16, 185, 129, 0.35); }
.ai-funnel__stage--booked strong { color: var(--emerald); }
.ai-funnel__counter {
   position: absolute; top: 24px; right: 24px;
   padding: 6px 12px;
   font-size: 11px; font-weight: 600; color: var(--emerald);
   border-radius: var(--r-pill);
   background: rgba(16, 185, 129, 0.12);
   border: 1px solid rgba(16, 185, 129, 0.3);
   font-variant-numeric: tabular-nums;
}

/* ============================================================
   PRODUCT 5 — AI Chat Agent
   ============================================================ */
.ai-chat {
   position: absolute; inset: 0;
   display: flex; flex-direction: column;
   padding: 22px;
}
.ai-chat__head {
   display: flex; align-items: center; gap: 10px;
   padding-bottom: 14px;
   border-bottom: 1px solid var(--border-1);
   margin-bottom: 14px;
}
.ai-chat__avatar {
   width: 32px; height: 32px;
   border-radius: 50%;
   background: var(--grad-warm);
   display: flex; align-items: center; justify-content: center;
   font-size: 14px;
}
.ai-chat__feed {
   flex: 1;
   display: flex; flex-direction: column; gap: 12px;
   overflow: hidden;
}
.ai-msg {
   max-width: 78%;
   padding: 10px 14px;
   font-size: 13px; line-height: 1.45;
   border-radius: var(--r-md);
   opacity: 0;
   animation: aiMsgIn 500ms var(--ease) forwards;
}
.ai-msg--user {
   align-self: flex-end;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid var(--border-1);
   border-bottom-right-radius: 4px;
}
.ai-msg--bot {
   align-self: flex-start;
   color: #fff;
   background: var(--grad-cool);
   border-bottom-left-radius: 4px;
   box-shadow: 0 0 16px rgba(99, 102, 241, 0.3);
}
@keyframes aiMsgIn { to { opacity: 1; } }
.ai-typing {
   display: inline-flex; gap: 4px;
   padding: 12px 14px;
   border-radius: var(--r-md);
   background: rgba(255,255,255,0.06);
   align-self: flex-start;
   border-bottom-left-radius: 4px;
}
.ai-typing span {
   width: 6px; height: 6px; border-radius: 50%;
   background: var(--text-muted);
   animation: aiTypingDot 1.2s ease-in-out infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aiTypingDot {
   0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
   40%           { transform: scale(1.0); opacity: 1; }
}

/* ============================================================
   PRODUCT 6 — AI Email Writer
   ============================================================ */
.ai-mail {
   position: absolute; inset: 0;
   display: flex; flex-direction: column;
   padding: 26px;
   font-size: 13px;
}
.ai-mail__field {
   display: flex; gap: 10px; align-items: baseline;
   padding-bottom: 8px;
   border-bottom: 1px solid var(--border-1);
   margin-bottom: 8px;
   color: var(--text-muted);
}
.ai-mail__field strong { color: var(--text-dim); width: 60px; font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
.ai-mail__field span { color: var(--text); font-weight: 500; }
.ai-mail__subject .ai-mail__type::after { content: "▎"; color: var(--cyan); animation: aiBlink 1s steps(2) infinite; margin-left: 1px; }
.ai-mail__body {
   margin-top: 14px;
   color: var(--text);
   line-height: 1.6;
}
.ai-mail__body span {
   display: inline-block;
   opacity: 0;
   animation: aiWordIn 400ms var(--ease) forwards;
}
@keyframes aiWordIn { to { opacity: 1; } }
.ai-mail__pill {
   align-self: flex-start;
   margin-top: auto;
   padding: 6px 12px;
   font-size: 11px; font-weight: 600;
   color: var(--cyan);
   background: var(--cyan-soft);
   border: 1px solid rgba(34,211,238,0.3);
   border-radius: var(--r-pill);
   transition: color 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease);
   cursor: default;
}
.ai-mail__pill:hover {
   color: var(--purple);
   background: rgba(168, 85, 247, 0.12);
   border-color: rgba(168, 85, 247, 0.4);
}

/* ============================================================
   PRODUCT 7 — AI Services Marketplace (orbit)
   ============================================================ */
.ai-market {
   text-align: center;
}
.ai-market__title {
   font-size: clamp(34px, 4vw, 56px);
   font-weight: 800;
   line-height: 1.05;
   letter-spacing: -0.025em;
   margin-bottom: 14px;
}
.ai-market__lede {
   font-size: 17px;
   color: var(--text-muted);
   max-width: 640px;
   margin: 0 auto 56px;
}
.ai-orbit {
   position: relative;
   width: min(720px, 90vw);
   aspect-ratio: 1;
   margin: 0 auto;
}
.ai-orbit__ring {
   position: absolute; inset: 0;
   border-radius: 50%;
   border: 1px dashed rgba(255, 255, 255, 0.12);
}
.ai-orbit__ring--inner {
   inset: 16%;
   border-style: solid;
   border-color: rgba(34, 211, 238, 0.14);
}
.ai-orbit__rotor {
   position: absolute; inset: 0;
   animation: aiOrbit 32s linear infinite;
}
@keyframes aiOrbit { to { transform: rotate(360deg); } }
.ai-orbit__center {
   position: absolute; left: 50%; top: 50%;
   transform: translate(-50%, -50%);
   width: 30%; aspect-ratio: 1;
   border-radius: 50%;
   background: var(--glass-2);
   border: 1px solid var(--border-2);
   display: flex; align-items: center; justify-content: center;
   box-shadow: 0 0 80px rgba(99, 102, 241, 0.25), var(--shadow-card);
   z-index: 2;
}
.ai-orbit__center::before {
   content: ""; position: absolute; inset: -2px;
   border-radius: inherit;
   background: conic-gradient(from 90deg, var(--cyan), var(--violet), var(--magenta), var(--cyan));
   z-index: -1;
   animation: aiSpin 14s linear infinite;
   filter: blur(0.5px);
}
.ai-orbit__center-label {
   font-weight: 700; font-size: clamp(14px, 1.4vw, 18px);
   line-height: 1.1; text-align: center;
   padding: 0 8px;
}
.ai-orbit__center-label small {
   display: block; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 4px; font-weight: 600;
}

.ai-orbit__tile {
   position: absolute;
   width: 22%; aspect-ratio: 1;
   left: 50%; top: 0;
   transform: translate(-50%, 0);
   border-radius: var(--r-lg);
   background: var(--glass);
   border: 1px solid var(--border-1);
   display: flex; flex-direction: column;
   align-items: center; justify-content: center;
   gap: 6px;
   padding: 10px;
   text-align: center;
   transform-origin: center center;
   transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease);
}
.ai-orbit__tile-inner {
   /* Counter-rotates the rotor so tiles stay upright */
   animation: aiOrbitInner 32s linear infinite;
   display: flex; flex-direction: column; align-items: center; gap: 6px;
}
@keyframes aiOrbitInner { to { transform: rotate(-360deg); } }
.ai-orbit__tile img { width: 32px; height: 32px; object-fit: contain; }
.ai-orbit__tile-name { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--text); }
.ai-orbit__tile:hover {
   border-color: rgba(34, 211, 238, 0.5);
   box-shadow: 0 0 24px rgba(34, 211, 238, 0.25);
}

/* Position each of 6 tiles around the rotor */
.ai-orbit__tile:nth-child(1) { transform: rotate(0deg)   translateY(-50%) translate(-50%, 0); top: 0;  left: 50%; }
.ai-orbit__tile:nth-child(2) { top: auto; left: auto; right: 6%;  top: 22%; }
.ai-orbit__tile:nth-child(3) { top: auto; left: auto; right: 6%;  bottom: 22%; }
.ai-orbit__tile:nth-child(4) { top: auto; left: 50%; bottom: 0;   transform: translate(-50%, 50%); }
.ai-orbit__tile:nth-child(5) { top: auto; left: 6%;  bottom: 22%; }
.ai-orbit__tile:nth-child(6) { top: 22%;  left: 6%; }

/* Mobile fallback: static grid */
@media (max-width: 768px) {
   .ai-orbit { aspect-ratio: auto; width: 100%; padding: 0; }
   .ai-orbit__ring, .ai-orbit__center { display: none; }
   .ai-orbit__rotor { position: static; animation: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
   .ai-orbit__tile { position: static; width: 100%; aspect-ratio: 1.4; transform: none !important; }
   .ai-orbit__tile-inner { animation: none; }
}

/* ============================================================
   STATS BAND
   ============================================================ */
.ai-stats {
   padding: 48px 0;
}
.ai-stats__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
}
@media (max-width: 768px) {
   .ai-stats__grid { grid-template-columns: 1fr 1fr; }
}
.ai-stat {
   padding: 28px 24px;
   border-radius: var(--r-lg);
   background: var(--glass);
   border: 1px solid var(--border-1);
   text-align: center;
   transition: transform 240ms var(--ease), border-color 240ms var(--ease);
}
.ai-stat:hover { transform: translateY(-4px); border-color: rgba(34, 211, 238, 0.4); }
.ai-stat__num {
   font-size: clamp(34px, 4vw, 56px);
   font-weight: 800;
   line-height: 1;
   background: var(--grad-primary);
   -webkit-background-clip: text; background-clip: text;
   -webkit-text-fill-color: transparent;
   font-variant-numeric: tabular-nums;
   margin-bottom: 8px;
}
.ai-stat__label {
   font-size: 13px; color: var(--text-muted);
   letter-spacing: 0.04em;
}

/* ============================================================
   FORM OVERRIDES (re-skin existing form includes — no PHP edits)
   ============================================================ */
.ai-form-block {
   padding: 64px 0;
}
.ai-form-block__row {
   display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
@media (max-width: 991px) {
   .ai-form-block__row { grid-template-columns: 1fr; gap: 40px; }
}
.ai-form-block__lede h2 {
   font-size: clamp(30px, 3.4vw, 48px);
   font-weight: 800; letter-spacing: -0.025em;
   margin-bottom: 16px;
}
.ai-form-block__lede p {
   color: var(--text-muted);
   font-size: 17px;
   margin-bottom: 24px;
}
.ai-form-block__bullets {
   list-style: none; padding: 0; margin: 0;
   display: flex; flex-direction: column; gap: 12px;
   color: var(--text);
}
.ai-form-block__bullets li { display: flex; gap: 10px; align-items: flex-start; }
.ai-form-block__bullets li::before {
   content: "✓";
   flex: none;
   width: 22px; height: 22px;
   border-radius: 50%;
   background: var(--cyan-soft);
   color: var(--cyan);
   display: inline-flex; align-items: center; justify-content: center;
   font-size: 12px; font-weight: 700;
   margin-top: 1px;
}

/* ============================================================
   TRUST STRIP — small badge row beneath the lede bullets that
   fills the empty column space and adds credibility cues.
   Three glass pills in a row on desktop, stacked on mobile.
   ============================================================ */
.ai-trust-strip {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin-top: 32px;
   padding-top: 24px;
   border-top: 1px solid var(--border-1);
}
@media (max-width: 575px) {
   .ai-trust-strip { grid-template-columns: 1fr; gap: 10px; }
}
.ai-trust {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   padding: 14px 14px;
   background: rgba(255, 255, 255, 0.025);
   border: 1px solid var(--border-1);
   border-radius: var(--r-md);
   transition: border-color 220ms var(--ease), background 220ms var(--ease), transform 220ms var(--ease);
}
.ai-trust:hover {
   border-color: rgba(34, 211, 238, 0.35);
   background: rgba(34, 211, 238, 0.05);
   transform: translateY(-2px);
}
.ai-trust svg {
   flex: none;
   width: 18px; height: 18px;
   color: var(--cyan);
   margin-top: 2px;
   filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.4));
}
.ai-trust span {
   display: flex;
   flex-direction: column;
   gap: 2px;
   line-height: 1.25;
}
.ai-trust strong {
   color: var(--text);
   font-size: 13px;
   font-weight: 600;
   letter-spacing: -0.005em;
}
.ai-trust small {
   color: var(--text-dim);
   font-size: 11px;
   font-weight: 500;
}

/* --- Reset + override Form 1 (work-to-together6 / animation form) --- */
.ai-form-block .custom-form-container-main {
   --borderWidth: 1px;
   border-radius: var(--r-lg) !important;
   overflow: visible !important;
   isolation: isolate;
}
.ai-form-block .custom-form-container-main::after {
   /* kill the rainbow strip; replaced by ::before below */
   display: none !important;
}
/* Form 1: animation removed — was distracting users while filling.
   The ::before rotating square is killed entirely; the gradient border
   now lives in the container's own background via padding-box/border-box,
   which mathematically can't bleed and never moves. */
.ai-form-block .custom-form-container-main::before {
   display: none !important;
   content: none !important;
}
/* Form 1 card — transparent fill so the canvas trails read clearly through.
   The dual-background padding-box/border-box trick was leaking the bright
   gradient into the interior because translucent overlays can't mask it.
   Solution: simple solid translucent fill + thin solid border. */
.ai-form-block .custom-form-container {
   margin: 0 !important;
   padding: 32px !important;
   background: rgba(10, 14, 30, 0.32) !important;
   backdrop-filter: blur(10px) saturate(140%);
   -webkit-backdrop-filter: blur(10px) saturate(140%);
   border: 1px solid rgba(34, 211, 238, 0.22) !important;
   border-radius: var(--r-lg) !important;
   box-shadow:
      0 24px 60px -20px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.ai-form-block .custom-form-container-title {
   margin-bottom: 18px;
}
.ai-form-block .custom-form-container-title h4 {
   color: #fff !important; font-size: 22px !important; font-family: inherit !important;
   font-weight: 700;
}
.ai-form-block .custom-form-container-title .caption-text {
   color: var(--cyan) !important;
   font-size: 12px !important;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   font-weight: 600;
}

.ai-form-block .custom-form-element .form-group input,
.ai-form-block .custom-form-container textarea#project_details {
   width: 100% !important;
   padding: 12px 16px !important;
   background: rgba(255, 255, 255, 0.04) !important;
   color: var(--text) !important;
   border: 1px solid var(--border-1) !important;
   border-radius: var(--r-sm) !important;
   font-family: inherit !important;
   font-size: 15px !important;
   transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.ai-form-block .custom-form-element .form-group input::placeholder,
.ai-form-block .custom-form-container textarea#project_details::placeholder {
   color: rgba(229, 231, 240, 0.4) !important;
}
.ai-form-block .custom-form-element .form-group input:focus,
.ai-form-block .custom-form-container textarea#project_details:focus {
   border-color: var(--cyan) !important;
   background: rgba(255, 255, 255, 0.06) !important;
   outline: none !important;
   box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}
.ai-form-block .custom-form-container textarea#project_details {
   height: 110px !important;
}
.ai-form-block .custom-cta {
   margin-top: 16px;
   width: 100%;
   padding: 14px 24px !important;
   font-size: 15px !important; font-weight: 600 !important;
   color: #fff !important;
   background: var(--grad-primary) !important;
   background-size: 200% 200% !important;
   border: none !important; border-radius: var(--r-pill) !important;
   cursor: pointer;
   animation: aiBtnBreathe 6s ease-in-out infinite;
   transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background-position 300ms var(--ease);
}
.ai-form-block .custom-cta:hover {
   animation-play-state: paused;
   background-position: 100% 50% !important;
   transform: translateY(-2px);
   box-shadow: 0 16px 40px -8px rgba(168, 85, 247, 0.55);
}
.ai-form--experts .cst-btn.pink-bg {
   animation: aiBtnBreathe 6s ease-in-out infinite;
}
.ai-form--experts .cst-btn.pink-bg:hover {
   animation-play-state: paused;
}
@keyframes aiBtnBreathe {
   0%, 100% { background-position: 0% 50%; box-shadow: 0 8px 24px -10px rgba(99, 102, 241, 0.4); }
   50%      { background-position: 100% 50%; box-shadow: 0 12px 32px -10px rgba(168, 85, 247, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
   .ai-form-block .custom-cta,
   .ai-form--experts .cst-btn.pink-bg { animation: none; }
}

.ai-form-block #work-to-together6 .form-group .error-msg,
.ai-form-block #work-to-together6 .form-group label.error,
.ai-form-block .error-msg {
   color: #FCA5A5 !important;
   font-size: 13px !important;
   margin: 6px 4px 0 4px !important;
}

.ai-form-block .loader_ajax img {
   filter: invert(1) brightness(1.2) hue-rotate(180deg);
}
.ai-form-block .thank-you-contact {
   color: var(--cyan);
   font-size: 14px;
   margin-top: 12px;
}

/* --- Reset + override Form 2 (d_mark_analyze_for8 / experts form) --- */
.ai-form--experts .contact-form { padding: 0; background: transparent; }
/* Form 2 card — same treatment, slight violet accent on the border. */
.ai-form--experts .contact-form form#d_mark_analyze_for8 {
   padding: 32px;
   background: rgba(10, 14, 30, 0.32);
   backdrop-filter: blur(10px) saturate(140%);
   -webkit-backdrop-filter: blur(10px) saturate(140%);
   border: 1px solid rgba(168, 85, 247, 0.22);
   border-radius: var(--r-lg);
   box-shadow:
      0 24px 60px -20px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.04) inset;
   position: relative;
}
/* Form 2: animation removed — was distracting users while filling.
   Same static-gradient-border treatment as form 1. */
.ai-form--experts .contact-form form#d_mark_analyze_for8::before {
   display: none !important;
   content: none !important;
}
.ai-form--experts .contact-form .c-row {
   display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.ai-form--experts .contact-form .col-6 { grid-column: span 1; }
.ai-form--experts .contact-form .col-12 { grid-column: span 2; }
.ai-form--experts .contact-form .col { grid-column: span 2; margin-right: 0 !important; }
@media (max-width: 575px) {
   .ai-form--experts .contact-form .c-row { grid-template-columns: 1fr; }
   .ai-form--experts .contact-form .col-6,
   .ai-form--experts .contact-form .col-12,
   .ai-form--experts .contact-form .col { grid-column: span 1; }
}

.ai-form--experts .form-field { display: flex; flex-direction: column; }
.ai-form--experts .form-label {
   color: var(--cyan) !important;
   font-size: 11px !important; font-weight: 600 !important;
   letter-spacing: 0.14em; text-transform: uppercase;
   margin: 0 0 6px 0 !important;
}
.ai-form--experts .form-input,
.ai-form--experts .contact-form .form-field textarea {
   width: 100%;
   padding: 12px 16px !important;
   background: rgba(255, 255, 255, 0.04) !important;
   color: var(--text) !important;
   border: 1px solid var(--border-1) !important;
   border-radius: var(--r-sm) !important;
   font-family: inherit !important;
   font-size: 15px !important;
   transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.ai-form--experts .form-input:focus,
.ai-form--experts .contact-form .form-field textarea:focus {
   border-color: var(--cyan) !important;
   outline: none !important;
   background: rgba(255, 255, 255, 0.06) !important;
   box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}
.ai-form--experts .contact-form .form-field textarea {
   min-height: 120px !important;
   height: auto !important;
}
.ai-form--experts .cst-btn.pink-bg {
   width: 100% !important;
   display: block !important;
   margin-top: 8px;
   background: var(--grad-primary) !important;
   background-size: 200% 200% !important;
   color: #fff !important;
   border: none !important;
   padding: 14px 24px !important;
   border-radius: var(--r-pill) !important;
   font-size: 15px !important; font-weight: 600 !important;
   line-height: 1.2 !important;
   cursor: pointer;
   transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background-position 300ms var(--ease);
}
.ai-form--experts .button-container {
   margin-right: 0 !important;
   width: 100%;
}
.ai-form--experts .cst-btn.pink-bg:hover {
   background-position: 100% 50% !important;
   transform: translateY(-2px);
   box-shadow: 0 16px 40px -8px rgba(168, 85, 247, 0.55);
}
.ai-form--experts #d-mark-success-msg {
   color: var(--cyan);
   font-size: 14px;
   margin-top: 14px;
}

/* intl-tel-input dark theme override */
.ai-form-block .iti { width: 100%; }
.ai-form-block .iti__flag-container .iti__selected-flag {
   background: rgba(255, 255, 255, 0.04);
   border-right: 1px solid var(--border-1);
   border-radius: var(--r-sm) 0 0 var(--r-sm);
   padding: 0 10px;
}
.ai-form-block .iti__flag-container .iti__selected-flag:hover { background: rgba(255, 255, 255, 0.08); }
.ai-form-block .iti--separate-dial-code .iti__selected-dial-code { color: var(--text); font-size: 14px; }
.ai-form-block .iti__country-list {
   background: var(--bg-1);
   color: var(--text);
   border: 1px solid var(--border-2);
   border-radius: var(--r-md);
   max-height: 240px;
   box-shadow: var(--shadow-card);
}
.ai-form-block .iti__country.iti__highlight,
.ai-form-block .iti__country:hover { background: rgba(34, 211, 238, 0.15); }
.ai-form-block .iti__divider { border-color: var(--border-1); }

/* ============================================================
   FORM-SECTION BACKDROP TRAILS — canvas spans the FULL section
   (across both columns), drawn by JS in initFormBgTrails().
   Particles wander slowly across the entire section width
   leaving fading cyan/purple trails. Pauses when the section
   is scrolled offscreen, dims while a field is focused.
   ============================================================ */
.ai-form-block {
   position: relative;
   overflow: hidden;
}
.ai-form-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   pointer-events: none;
   transition: opacity 380ms var(--ease);
}
.ai-form-block > .ai-container {
   position: relative;
   z-index: 1;
}
/* Dim the trails while the user is filling a field so they don't compete */
.ai-form-block:focus-within .ai-form-bg {
   opacity: 0.18;
}
/* Form column wrapper kept as a layout helper, no longer holds the canvas */
.ai-form-aurora { position: relative; }

/* Phone-input padding-left so digits don't overlap the flag + dial-code.
   Also forces the typed-text color back to the page text token, beating
   the inline `color:#e7238e` from website-design-experts-form-3.php. */
.ai-form-block .iti--separate-dial-code input.form-input,
.ai-form-block .iti--separate-dial-code input[type="tel"],
.ai-form-block .iti--separate-dial-code input[type="phone"],
.ai-form-block .iti input[id="phone_number"],
.ai-form-block .iti input[id="d_mark_phone"] {
   padding-left: 96px !important;
   color: var(--text) !important;
}

/* Placeholder color across BOTH lead-capture forms. Without this, intl-tel-input's
   example number shows in the form-3 default magenta and reads as an error. */
.ai-form-block input::placeholder,
.ai-form-block textarea::placeholder,
.ai-form--experts .form-input::placeholder,
.ai-form--experts textarea::placeholder {
   color: rgba(229, 231, 240, 0.4) !important;
   opacity: 1 !important;
}

/* ============================================================
   FAQ
   ============================================================ */
.ai-faq {
   max-width: 820px;
   margin: 0 auto;
}
.ai-faq__title {
   font-size: clamp(30px, 3.4vw, 44px);
   font-weight: 800; text-align: center;
   margin-bottom: 40px;
   letter-spacing: -0.025em;
}
.ai-faq__item {
   border-bottom: 1px solid var(--border-1);
}
.ai-faq__item input { display: none; }
.ai-faq__item label {
   display: flex; justify-content: space-between; align-items: center;
   padding: 22px 4px;
   font-size: 17px; font-weight: 600;
   color: var(--text);
   cursor: pointer;
   transition: color 200ms var(--ease);
}
.ai-faq__item label::after {
   content: "+";
   font-size: 22px; font-weight: 300;
   color: var(--cyan);
   transition: transform 240ms var(--ease);
}
.ai-faq__item label:hover { color: var(--cyan); }
.ai-faq__answer {
   max-height: 0;
   overflow: hidden;
   color: var(--text-muted);
   font-size: 15px; line-height: 1.7;
   transition: max-height 320ms var(--ease), padding 320ms var(--ease);
   padding: 0 4px;
}
.ai-faq__item input:checked ~ label { color: var(--cyan); }
.ai-faq__item input:checked ~ label::after { transform: rotate(45deg); }
.ai-faq__item input:checked ~ .ai-faq__answer {
   max-height: 320px;
   padding: 0 4px 22px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ai-footer {
   position: relative;
   padding: 72px 0 28px;
   margin-top: 80px;
   background: rgba(5, 6, 11, 0.7);
   backdrop-filter: blur(22px);
   -webkit-backdrop-filter: blur(22px);
}
/* Animated gradient hairline at the very top of the footer */
.ai-footer__grad {
   position: absolute;
   left: 0; right: 0; top: 0;
   height: 1px;
   background: linear-gradient(90deg,
      transparent 0%,
      var(--cyan) 22%,
      var(--violet) 50%,
      var(--magenta) 78%,
      transparent 100%);
   background-size: 200% 100%;
   animation: aiFooterGrad 16s linear infinite;
   opacity: 0.7;
}
@keyframes aiFooterGrad { to { background-position: 200% 0; } }

.ai-footer__grid {
   display: grid;
   grid-template-columns: 1.6fr 1fr 1fr 1fr;
   gap: 56px;
   margin-bottom: 56px;
}

/* Brand column */
.ai-footer__col--brand .ai-footer__brand {
   display: inline-flex; align-items: center;
   margin-bottom: 18px;
}
.ai-footer__col--brand .ai-footer__brand img {
   height: 55px; width: auto;
   filter: none; opacity: 1;
}
.ai-footer__tagline {
   color: var(--text-muted);
   font-size: 14px;
   line-height: 1.55;
   max-width: 320px;
   margin-bottom: 24px;
}
.ai-footer__social {
   display: flex; gap: 10px;
}
.ai-footer__social a {
   display: inline-flex; align-items: center; justify-content: center;
   width: 38px; height: 38px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-1);
   color: var(--text-muted);
   transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease), transform 200ms var(--ease);
}
.ai-footer__social a:hover {
   color: var(--cyan);
   border-color: rgba(34, 211, 238, 0.4);
   background: rgba(34, 211, 238, 0.08);
   transform: translateY(-2px);
}
.ai-footer__social svg { width: 16px; height: 16px; }

/* Title above each link list */
.ai-footer__title {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--cyan);
   margin: 0 0 18px;
}

/* Link lists */
.ai-footer__links {
   list-style: none;
   margin: 0; padding: 0;
   display: flex; flex-direction: column;
   gap: 10px;
}
.ai-footer__links a {
   color: var(--text-muted);
   font-size: 14px;
   line-height: 1.5;
   transition: color 180ms var(--ease), padding 200ms var(--ease);
   display: inline-block;
}
.ai-footer__links a:hover {
   color: var(--cyan);
   padding-left: 4px;
}

/* Meta-style "Get in touch" list (no hover-shift, multi-line items) */
.ai-footer__links--meta {
   color: var(--text-muted);
   font-size: 14px;
   line-height: 1.55;
   gap: 16px;
}
.ai-footer__links--meta li { display: block; }
.ai-footer__links--meta a {
   color: var(--text);
   font-weight: 500;
}
.ai-footer__meta-label {
   display: block;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--text-dim);
   margin-bottom: 4px;
}

/* Bottom bar */
.ai-footer__bottom {
   padding-top: 24px;
   border-top: 1px solid var(--border-1);
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 14px 24px;
}
.ai-footer__copy {
   color: var(--text-dim);
   font-size: 12px;
   margin: 0;
}
.ai-footer__legal {
   list-style: none;
   margin: 0; padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 6px 20px;
   font-size: 12px;
}
.ai-footer__legal a {
   color: var(--text-dim);
   transition: color 180ms var(--ease);
}
.ai-footer__legal a:hover { color: var(--cyan); }

/* Mobile menu logo height kept here so the move doesn't break it */
.ai-mobile-menu .ai-nav__logo img { height: 55px; width: auto; filter: none; opacity: 1; }

/* Responsive footer
   Layout strategy:
   - desktop  (≥992px): 4 columns (1.6fr / 1fr / 1fr / 1fr)
   - tablet   (≤991px): 2x2 grid — brand spans top row, "Get in touch"
                         spans bottom row, AI Suite + Company side-by-side
   - mobile   (≤575px): same 2-col layout but tighter typography so the
                         footer reads as a compact info block, not a long
                         vertical scroll. */
@media (max-width: 991px) {
   .ai-footer { padding: 48px 0 22px; }
   .ai-footer__grid {
      grid-template-columns: 1fr 1fr;
      gap: 28px 28px;
      margin-bottom: 28px;
   }
   .ai-footer__col--brand { grid-column: 1 / -1; }
   .ai-footer__col:last-child { grid-column: 1 / -1; }
   .ai-footer__tagline { max-width: none; margin-bottom: 16px; }
   .ai-footer__title { margin-bottom: 10px; }
   .ai-footer__links { gap: 0; }
   .ai-footer__links a {
      font-size: 13px;
      line-height: 1.7;
      padding: 0;
   }
   .ai-footer__links--meta { gap: 10px; }
}
@media (max-width: 575px) {
   .ai-footer { padding: 36px 0 20px; margin-top: 36px; }
   .ai-footer__grid {
      grid-template-columns: 1fr 1fr;
      gap: 22px 18px;
      margin-bottom: 20px;
   }
   .ai-footer__col--brand .ai-footer__brand { margin-bottom: 12px; }
   .ai-footer__col--brand .ai-footer__brand img { height: 40px; }
   .ai-footer__tagline { font-size: 12.5px; line-height: 1.45; margin-bottom: 12px; }
   .ai-footer__social { gap: 8px; }
   .ai-footer__social a { width: 30px; height: 30px; }
   .ai-footer__social svg { width: 13px; height: 13px; }
   .ai-footer__title {
      font-size: 9.5px;
      margin-bottom: 6px;
      letter-spacing: 0.14em;
   }
   .ai-footer__links { gap: 0; }
   .ai-footer__links a {
      font-size: 12px;
      line-height: 1.7;
      padding: 0;
   }
   .ai-footer__links--meta { gap: 8px; font-size: 12px; line-height: 1.4; }
   .ai-footer__meta-label { font-size: 8.5px; margin-bottom: 2px; }
   .ai-footer__bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding-top: 14px;
   }
   .ai-footer__copy { font-size: 10.5px; }
   .ai-footer__legal { gap: 3px 12px; font-size: 10.5px; }
}

/* ============================================================
   THEME TOGGLE — small icon button in the nav. Sun/moon swap
   based on the .theme-light class on <html>. Bootstrap script
   in <head> sets the theme before paint to prevent flashing.
   ============================================================ */
.ai-theme-toggle {
   width: 38px;
   height: 38px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-1);
   color: var(--text-muted);
   cursor: pointer;
   transition: color 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
   position: relative;
}
.ai-theme-toggle:hover {
   color: var(--cyan);
   border-color: rgba(34, 211, 238, 0.4);
   background: rgba(34, 211, 238, 0.08);
   transform: translateY(-1px);
}
.ai-theme-toggle__icon {
   width: 16px; height: 16px;
   position: absolute;
   transition: opacity 220ms var(--ease), transform 280ms var(--ease);
}
/* Default (dark theme): show moon (you're IN dark, click to go light) */
.ai-theme-toggle__moon { opacity: 1; transform: rotate(0deg) scale(1); }
.ai-theme-toggle__sun  { opacity: 0; transform: rotate(-90deg) scale(0.7); }
/* Light theme: show sun (you're IN light, click to go dark) */
html.theme-light .ai-theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.7); }
html.theme-light .ai-theme-toggle__sun  { opacity: 1; transform: rotate(0deg) scale(1); }

/* Hide on very small screens to save header space — preference still
   accessible via OS or by visiting on larger screens */
@media (max-width: 480px) {
   .ai-theme-toggle { display: none; }
}

/* ============================================================
   LIGHT THEME — variable overrides only (bg, text, borders,
   glass tints). Brand-accent colors (cyan/violet/magenta) keep
   their hue so the AI aesthetic carries through.
   ============================================================ */
html.theme-light {
   --bg-0:        #F6F7FB;
   --bg-1:        #ECEEF5;
   --bg-2:        #E0E4EE;
   --glass:       rgba(255, 255, 255, 0.65);
   --glass-2:     rgba(255, 255, 255, 0.78);
   --border-1:    rgba(15, 23, 42, 0.10);
   --border-2:    rgba(15, 23, 42, 0.18);

   --text:        #0F172A;
   --text-muted:  #475569;
   --text-dim:    rgba(15, 23, 42, 0.55);

   --shadow-card: 0 24px 60px -20px rgba(15, 23, 42, 0.18), 0 0 0 1px var(--border-1) inset;
}

/* Light-mode body backdrop — soft tinted gradient instead of dark cosmic */
html.theme-light body.ai-x::before {
   background:
      radial-gradient(60% 40% at 20% 10%, rgba(99, 102, 241, 0.10) 0%, transparent 60%),
      radial-gradient(50% 35% at 85% 25%, rgba(34, 211, 238, 0.08) 0%, transparent 60%),
      radial-gradient(70% 50% at 50% 100%, rgba(168, 85, 247, 0.10) 0%, transparent 65%),
      var(--bg-0);
}
html.theme-light body.ai-x::after {
   background-image:
      linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}

/* Nav scrolled state — light glass */
html.theme-light .ai-nav.is-scrolled {
   background: rgba(246, 247, 251, 0.78);
   border-bottom-color: var(--border-1);
}

/* Hero in light mode — fully light, consistent with body. The previous
   dark-hero approach made the nav text unreadable when over the hero. */
html.theme-light .ai-hero {
   background: transparent;
   color: var(--text);
}
html.theme-light .ai-hero h1 .ai-hero__line {
   color: var(--text);
}
/* Gradient line keeps its colorful gradient — already uses background-clip:text */
html.theme-light .ai-hero__sub {
   color: var(--text-muted);
}
html.theme-light .ai-hero__chip {
   background: rgba(15, 23, 42, 0.04);
   border-color: var(--border-1);
   color: var(--text-muted);
}
html.theme-light .ai-hero__pulse-label,
html.theme-light .ai-hero__scroll,
html.theme-light .ai-hero__scroll-text {
   color: var(--text-dim);
}
/* Orbital rings — softer on light bg */
html.theme-light .ai-hero__ring--1 { border-color: rgba(34, 211, 238, 0.30); }
html.theme-light .ai-hero__ring--2 { border-color: rgba(168, 85, 247, 0.22); }
html.theme-light .ai-hero__ring--3 { border-color: rgba(99, 102, 241, 0.30); }
/* Eyebrow pill (TELAGUS AI · SUITE V1.0) */
html.theme-light .ai-eyebrow {
   color: var(--cyan);
   background: rgba(34, 211, 238, 0.10);
   border-color: rgba(34, 211, 238, 0.32);
}
/* Nav logo wordmark "AI" text */
html.theme-light .ai-nav__logo { color: var(--text); }
/* Nav links */
html.theme-light .ai-nav__links a { color: var(--text-muted); }
html.theme-light .ai-nav__links a:hover { color: var(--text); background: rgba(15, 23, 42, 0.06); }
html.theme-light .ai-nav__links a.is-active {
   color: var(--text);
   background: rgba(34, 211, 238, 0.12);
   box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4) inset;
}

/* Buttons */
html.theme-light .ai-btn--ghost {
   color: var(--text);
   background: rgba(15, 23, 42, 0.04);
   border-color: var(--border-2);
}
html.theme-light .ai-btn--ghost:hover {
   background: rgba(15, 23, 42, 0.08);
   border-color: var(--cyan);
   color: var(--cyan);
}

/* Stages and product visual cards — light glass */
html.theme-light .ai-stage {
   background: var(--glass);
   border-color: var(--border-1);
}
html.theme-light .ai-stage::before {
   background:
      radial-gradient(50% 50% at 30% 20%, rgba(34, 211, 238, 0.12) 0%, transparent 60%),
      radial-gradient(50% 50% at 80% 80%, rgba(168, 85, 247, 0.10) 0%, transparent 60%);
}

/* Glass cards inside stages (call/builder/visibility/etc.) */
html.theme-light .ai-call__phone,
html.theme-light .ai-call__log-item,
html.theme-light .ai-builder__prompt,
html.theme-light .ai-builder__preview,
html.theme-light .ai-vis__row,
html.theme-light .ai-funnel__stage,
html.theme-light .ai-chat__feed,
html.theme-light .ai-chat .ai-msg--user,
html.theme-light .ai-mail,
html.theme-light .ai-stat {
   background: rgba(255, 255, 255, 0.7);
   border-color: var(--border-1);
   color: var(--text);
}

/* Form cards in light mode — solid white-ish glass */
html.theme-light .ai-form-block .custom-form-container,
html.theme-light .ai-form--experts .contact-form form#d_mark_analyze_for8 {
   background: rgba(255, 255, 255, 0.75) !important;
   border-color: var(--border-2) !important;
   color: var(--text);
}
html.theme-light .ai-form-block .custom-form-element .form-group input,
html.theme-light .ai-form-block .custom-form-container textarea#project_details,
html.theme-light .ai-form--experts .contact-form .form-field .form-input,
html.theme-light .ai-form--experts .contact-form .form-field textarea {
   background: #FFFFFF !important;
   border-color: rgba(15, 23, 42, 0.20) !important;
   color: var(--text) !important;
}
/* Solid slate-600 for placeholders — selectors include the FULL parent
   class chain so they out-specificity the base rule
   `.ai-form-block .custom-form-element .form-group input::placeholder`
   which is (0,3,2) and beat-by-class my earlier 2-class override. */
html.theme-light .ai-form-block .custom-form-element .form-group input::placeholder,
html.theme-light .ai-form-block .custom-form-container textarea#project_details::placeholder,
html.theme-light .ai-form-block input::placeholder,
html.theme-light .ai-form-block textarea::placeholder,
html.theme-light .ai-form--experts .contact-form .form-field .form-input::placeholder,
html.theme-light .ai-form--experts .contact-form .form-field textarea::placeholder,
html.theme-light .ai-form--experts .form-input::placeholder,
/* Vendor-prefixed variants for older Safari / Firefox */
html.theme-light .ai-form-block .custom-form-element .form-group input::-webkit-input-placeholder,
html.theme-light .ai-form--experts .contact-form .form-field .form-input::-webkit-input-placeholder,
html.theme-light .ai-form-block .custom-form-element .form-group input::-moz-placeholder,
html.theme-light .ai-form--experts .contact-form .form-field .form-input::-moz-placeholder {
   color: #000000 !important;
   opacity: 1 !important;
   -webkit-text-fill-color: #000000 !important;
}
/* INPUT FIELD BACKGROUND — must use the FULL parent class chain to
   beat the base rule .ai-form-block .custom-form-element .form-group input
   which has specificity (0,3,1). Without this, the input bg stays DARK
   in light mode and the black placeholder text becomes invisible. */
html.theme-light .ai-form-block .custom-form-element .form-group input,
html.theme-light .ai-form-block .custom-form-container textarea#project_details,
html.theme-light .ai-form--experts .contact-form .form-field .form-input,
html.theme-light .ai-form--experts .contact-form .form-field textarea {
   background: #FFFFFF !important;
   border-color: rgba(15, 23, 42, 0.20) !important;
   color: var(--text) !important;
}
html.theme-light .ai-form-block .custom-form-element .form-group input:focus,
html.theme-light .ai-form-block .custom-form-container textarea#project_details:focus,
html.theme-light .ai-form--experts .contact-form .form-field .form-input:focus,
html.theme-light .ai-form--experts .contact-form .form-field textarea:focus {
   background: rgba(34, 211, 238, 0.05) !important;
   border-color: var(--cyan) !important;
   box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15) !important;
}
html.theme-light .ai-form-block .custom-form-container-title h4 {
   color: var(--text) !important;
}

/* intl-tel-input flag panel in light mode */
html.theme-light .ai-form-block .iti__flag-container .iti__selected-flag {
   background: rgba(15, 23, 42, 0.04);
}
html.theme-light .ai-form-block .iti__country-list {
   background: #fff;
   color: var(--text);
}

/* Product section copy in light mode */
html.theme-light .ai-prod__title,
html.theme-light .ai-form-block__lede h2,
html.theme-light .ai-market__title,
html.theme-light .ai-faq__title { color: var(--text); }
html.theme-light .ai-prod__lede,
html.theme-light .ai-form-block__lede p,
html.theme-light .ai-market__lede { color: var(--text-muted); }
html.theme-light .ai-prod__list li { color: var(--text); }
html.theme-light .ai-form-block__bullets { color: var(--text); }
html.theme-light .ai-form-block__bullets li::before {
   background: rgba(34, 211, 238, 0.14);
   color: var(--cyan);
}

/* Stat cards typography */
html.theme-light .ai-stat__label { color: var(--text-muted); }

/* Hero canvas (particle network) tint — lighter look on light bg */
html.theme-light .ai-hero__canvas { opacity: 0.55; }

/* ===== Internal stage-card text — many had hardcoded #fff ===== */

/* AI Visibility donut — number, label, fill arc, inner mask */
html.theme-light .ai-vis__donut {
   color: var(--text);
   background: conic-gradient(
      var(--cyan) 0%,
      var(--cyan) calc(var(--donut-pct) * 1%),
      rgba(15, 23, 42, 0.10) calc(var(--donut-pct) * 1%),
      rgba(15, 23, 42, 0.10) 100%
   );
}
html.theme-light .ai-vis__donut::before { background: #FFFFFF; }
html.theme-light .ai-vis__donut small { color: var(--text-dim); }

/* AI Visibility SERP rows */
html.theme-light .ai-vis__rank {
   background: rgba(15, 23, 42, 0.06);
   color: var(--text-muted);
}
html.theme-light .ai-vis__row .ai-vis__title { color: var(--text); }
html.theme-light .ai-vis__row .ai-vis__url { color: var(--text-dim); }
html.theme-light .ai-vis__row.is-you {
   background: rgba(34, 211, 238, 0.10);
   border-color: rgba(34, 211, 238, 0.45);
}
html.theme-light .ai-vis__head { color: var(--text-dim); }
html.theme-light .ai-vis__delta { color: var(--emerald); }

/* AI Lead Generator funnel stages (the invisible "4,812" / "624" numbers) */
html.theme-light .ai-funnel__stage { color: var(--text); }
html.theme-light .ai-funnel__stage strong { color: var(--text); }
html.theme-light .ai-funnel__stage--booked strong { color: var(--emerald); }
html.theme-light .ai-funnel__stage span { color: var(--text-muted); }
html.theme-light .ai-funnel__rate { color: var(--text-dim); }

/* AI Call Agent card (caller name, log items) */
html.theme-light .ai-call__phone {
   background: rgba(255, 255, 255, 0.7);
   border-color: var(--border-1);
}
html.theme-light .ai-call__caller-name { color: var(--text); }
html.theme-light .ai-call__caller-meta { color: var(--text-dim); }
html.theme-light .ai-call__log-item { color: var(--text); }
html.theme-light .ai-call__log-item--booked { color: var(--emerald); }
html.theme-light .ai-call__log-item--missed { color: #DC2626; }

/* AI Website Builder mock IDE */
html.theme-light .ai-builder__prompt { color: var(--text); }
html.theme-light .ai-builder__preview { color: var(--text); }
html.theme-light .ai-builder__chrome span { background: rgba(15, 23, 42, 0.18); }
html.theme-light .ai-builder__block { border-color: var(--border-1); }

/* AI Chat Agent — chat window + message bubbles */
html.theme-light .ai-chat__head { border-bottom-color: var(--border-1); }
html.theme-light .ai-msg--user {
   background: rgba(15, 23, 42, 0.06);
   border-color: var(--border-1);
   color: var(--text);
}
html.theme-light .ai-typing { background: rgba(15, 23, 42, 0.06); }

/* AI Email Writer composer */
html.theme-light .ai-mail { color: var(--text); }
html.theme-light .ai-mail__field { border-bottom-color: var(--border-1); color: var(--text-muted); }
html.theme-light .ai-mail__field strong { color: var(--text-dim); }
html.theme-light .ai-mail__field span { color: var(--text); }
html.theme-light .ai-mail__body { color: var(--text); }

/* Marketplace orbit center label — readable on bright gradient ball */
html.theme-light .ai-orbit__center-label { color: var(--text); }
html.theme-light .ai-orbit__center {
   background: rgba(255, 255, 255, 0.92);
   color: var(--text);
}
html.theme-light .ai-orbit__tile-name { color: var(--text); }

/* Form 1 title h4 (had !important #fff) */
html.theme-light .ai-form-block .custom-form-container-title h4 {
   color: var(--text) !important;
}

/* ===== Mobile off-canvas menu — light-mode treatment =====
   Default panel uses rgba(5,6,11,0.92) dark glass + white text.
   In light mode, swap to white glass + dark text so links are readable. */
html.theme-light .ai-mobile-menu {
   background: rgba(255, 255, 255, 0.96);
   color: var(--text);
   box-shadow: -24px 0 60px -20px rgba(15, 23, 42, 0.18);
}
html.theme-light .ai-mobile-menu a {
   color: var(--text);
}
html.theme-light .ai-mobile-menu a:hover {
   background: rgba(15, 23, 42, 0.05);
}
html.theme-light .ai-mobile-menu a.is-active {
   color: var(--cyan);
   background: rgba(34, 211, 238, 0.1);
}
html.theme-light .ai-mobile-menu__close {
   background: rgba(15, 23, 42, 0.05);
   border-color: var(--border-2);
   color: var(--text);
}
html.theme-light .ai-mobile-menu__close:hover {
   background: rgba(15, 23, 42, 0.1);
}
/* Hamburger button on light bg */
html.theme-light .ai-nav__hamburger {
   background: rgba(15, 23, 42, 0.04);
   border-color: var(--border-1);
}
html.theme-light .ai-nav__hamburger span {
   background: var(--text);
}

/* Marketplace orbit center + tiles */
html.theme-light .ai-orbit__ring { border-color: rgba(15, 23, 42, 0.14); }
html.theme-light .ai-orbit__ring--inner { border-color: rgba(34, 211, 238, 0.22); }
html.theme-light .ai-orbit__center,
html.theme-light .ai-orbit__tile {
   background: rgba(255, 255, 255, 0.78);
   border-color: var(--border-1);
   color: var(--text);
}

/* FAQ accordion */
html.theme-light .ai-faq__item { border-bottom-color: var(--border-1); }
html.theme-light .ai-faq__item label { color: var(--text); }
html.theme-light .ai-faq__answer { color: var(--text-muted); }

/* Footer */
html.theme-light .ai-footer {
   background: rgba(255, 255, 255, 0.6);
}
html.theme-light .ai-footer__bottom { border-top-color: var(--border-1); }

/* Scroll-to-top in light mode */
html.theme-light .ai-scroll-top {
   background: rgba(255, 255, 255, 0.85);
   border-color: rgba(34, 211, 238, 0.4);
}

/* Theme toggle in light mode */
html.theme-light .ai-theme-toggle {
   background: rgba(15, 23, 42, 0.04);
   border-color: var(--border-1);
   color: var(--text-muted);
}
html.theme-light .ai-theme-toggle:hover {
   color: var(--cyan);
   background: rgba(34, 211, 238, 0.1);
}

/* Trust strip in light mode */
html.theme-light .ai-trust {
   background: rgba(15, 23, 42, 0.025);
   border-color: var(--border-1);
}

/* Cookie banner in light mode */
html.theme-light #cookieNotice {
   background: rgba(255, 255, 255, 0.95) !important;
   color: var(--text) !important;
   border-color: var(--border-2) !important;
}
html.theme-light #cookieNotice h4 { color: var(--cyan) !important; }
html.theme-light #cookieNotice p { color: var(--text-muted) !important; }
html.theme-light #cookieNotice .btn-reject {
   background: rgba(15, 23, 42, 0.05) !important;
   color: var(--text) !important;
   border-color: var(--border-1) !important;
}

/* ============================================================
   SCROLL-TO-TOP — fixed glass button bottom-right, fades in
   once the user has scrolled past the hero. Smooth-scrolls
   back to top on click.
   ============================================================ */
.ai-scroll-top {
   position: fixed;
   right: 22px;
   bottom: 22px;
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: rgba(10, 14, 30, 0.78);
   backdrop-filter: blur(14px) saturate(140%);
   -webkit-backdrop-filter: blur(14px) saturate(140%);
   border: 1px solid rgba(34, 211, 238, 0.32);
   color: var(--cyan);
   cursor: pointer;
   z-index: 90;
   opacity: 0;
   transform: translateY(12px) scale(0.92);
   pointer-events: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow:
      0 12px 32px -10px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(34, 211, 238, 0.1) inset;
   transition:
      opacity 320ms var(--ease),
      transform 320ms var(--ease),
      background 220ms var(--ease),
      border-color 220ms var(--ease),
      box-shadow 240ms var(--ease);
}
.ai-scroll-top.is-visible {
   opacity: 1;
   transform: translateY(0) scale(1);
   pointer-events: auto;
}
.ai-scroll-top:hover {
   background: rgba(34, 211, 238, 0.14);
   border-color: rgba(34, 211, 238, 0.6);
   box-shadow:
      0 16px 40px -10px rgba(0, 0, 0, 0.65),
      0 0 24px rgba(34, 211, 238, 0.4),
      0 0 0 1px rgba(34, 211, 238, 0.25) inset;
}
.ai-scroll-top:hover svg {
   transform: translateY(-2px);
}
.ai-scroll-top:active {
   transform: translateY(0) scale(0.94);
}
.ai-scroll-top svg {
   width: 14px; height: 9px;
   filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.5));
   transition: transform 220ms var(--ease);
}

/* Mobile — slightly smaller and out of the way of cookie banner */
@media (max-width: 768px) {
   .ai-scroll-top {
      right: 16px;
      bottom: 16px;
      width: 42px;
      height: 42px;
   }
}

/* If cookie banner is showing, lift the scroll button above it */
body:has(#cookieNotice[style*="block"]) .ai-scroll-top {
   bottom: calc(22px + 100px);
}
@media (max-width: 768px) {
   body:has(#cookieNotice[style*="block"]) .ai-scroll-top {
      bottom: calc(16px + 110px);
   }
}

/* ============================================================
   COOKIE CONSENT — restyle without modifying cookie_consent.css
   ============================================================ */
.ai-x #cookieNotice {
   background: rgba(10, 14, 30, 0.85) !important;
   color: var(--text) !important;
   border: 1px solid var(--border-2) !important;
   backdrop-filter: blur(24px);
   border-radius: var(--r-lg) !important;
}
.ai-x #cookieNotice h4 { color: var(--cyan) !important; }
.ai-x #cookieNotice .btn-primary {
   background: var(--grad-primary) !important;
   color: #fff !important;
   border: none !important;
   border-radius: var(--r-pill) !important;
}
.ai-x #cookieNotice .btn-reject {
   background: rgba(255, 255, 255, 0.06) !important;
   color: var(--text) !important;
   border: 1px solid var(--border-1) !important;
   border-radius: var(--r-pill) !important;
}

/* ============================================================
   SCROLL-IN STATES (for ai-experience.js to toggle)
   ============================================================ */
.ai-reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.ai-reveal.is-visible { opacity: 1; transform: translateY(0); }
.ai-reveal--delay-1 { transition-delay: 80ms; }
.ai-reveal--delay-2 { transition-delay: 160ms; }
.ai-reveal--delay-3 { transition-delay: 240ms; }
.ai-reveal--delay-4 { transition-delay: 320ms; }

/* ============================================================
   HERO ENHANCEMENTS — orbital rings, floating orbs, glyph reveal
   ============================================================ */
.ai-hero__rings {
   position: absolute; inset: 0;
   display: flex; align-items: center; justify-content: center;
   pointer-events: none;
   z-index: 1;
   overflow: hidden;
}
.ai-hero__ring {
   position: absolute;
   border-radius: 50%;
   border-style: dashed;
   border-width: 1px;
   opacity: 0.55;
}
.ai-hero__ring--1 {
   width: min(620px, 75vmin); aspect-ratio: 1;
   border-color: rgba(34, 211, 238, 0.22);
   animation: aiSpin 70s linear infinite;
}
.ai-hero__ring--2 {
   width: min(880px, 100vmin); aspect-ratio: 1;
   border-color: rgba(168, 85, 247, 0.16);
   border-style: solid;
   animation: aiSpin 110s linear infinite reverse;
}
.ai-hero__ring--3 {
   width: min(420px, 50vmin); aspect-ratio: 1;
   border-color: rgba(99, 102, 241, 0.22);
   animation: aiSpin 50s linear infinite;
}
/* Floating orbs that drift parallax-style with the cursor */
.ai-hero__orb {
   position: absolute;
   width: 12px; height: 12px;
   border-radius: 50%;
   pointer-events: none;
   filter: blur(0.5px);
   transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ai-hero__orb--1 {
   left: 18%; top: 30%;
   background: var(--cyan); box-shadow: 0 0 24px var(--cyan);
   animation: aiFloat 7s ease-in-out infinite;
}
.ai-hero__orb--2 {
   right: 14%; top: 22%; width: 10px; height: 10px;
   background: var(--purple); box-shadow: 0 0 22px var(--purple);
   animation: aiFloat 9s ease-in-out infinite -2s;
}
.ai-hero__orb--3 {
   right: 22%; bottom: 24%; width: 8px; height: 8px;
   background: var(--magenta); box-shadow: 0 0 20px var(--magenta);
   animation: aiFloat 8s ease-in-out infinite -4s;
}
@keyframes aiFloat {
   0%, 100% { transform: translate(0, 0); }
   50%      { transform: translate(0, -16px); }
}

/* Glyph reveal on the subheadline (set by JS).
   Each word is wrapped in .word so it stays together — the per-letter
   spans are inline-block (for transform) but the word wrapper has
   white-space: nowrap to prevent the browser breaking mid-word. */
.ai-hero__sub .word {
   display: inline-block;
   white-space: nowrap;
}
.ai-hero__sub .gly {
   display: inline-block;
   opacity: 0;
   transform: translateY(8px);
   animation: aiGlyphIn 480ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes aiGlyphIn { to { opacity: 1; transform: translateY(0); } }

/* Chip parallax — set by JS via CSS variables */
.ai-hero__chip { transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ============================================================
   VISIBILITY — sparkline, animated donut, AI-cited popup, delta pulse
   ============================================================ */
@property --donut-pct {
   syntax: '<number>';
   initial-value: 0;
   inherits: false;
}
.ai-vis__donut {
   --donut-pct: 0;
   background: conic-gradient(
      var(--cyan) 0%,
      var(--cyan) calc(var(--donut-pct) * 1%),
      rgba(255, 255, 255, 0.08) calc(var(--donut-pct) * 1%),
      rgba(255, 255, 255, 0.08) 100%
   );
   transition: --donut-pct 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ai-vis__donut.is-filled { --donut-pct: 92; }
.ai-vis__donut .ai-vis__donut-num { font-variant-numeric: tabular-nums; }

.ai-vis__delta {
   color: var(--emerald);
   animation: aiDeltaPulse 2.6s ease-in-out infinite;
}
@keyframes aiDeltaPulse {
   0%, 100% { opacity: 0.6; }
   50%      { opacity: 1; text-shadow: 0 0 12px rgba(16, 185, 129, 0.5); }
}

/* Sparkline — draws on enter */
.ai-vis__spark {
   position: absolute;
   right: 28px; bottom: 130px;
   width: 130px; height: 32px;
   z-index: 1;
   opacity: 0.85;
}
.ai-vis__spark-line {
   stroke-dasharray: 320;
   stroke-dashoffset: 320;
   transition: stroke-dashoffset 2200ms cubic-bezier(0.22, 0.61, 0.36, 1);
   filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.5));
}
.ai-vis__spark.is-drawn .ai-vis__spark-line { stroke-dashoffset: 0; }

/* "AI Mode" cited popup — slides in once the rank settles */
.ai-vis__cited {
   position: absolute;
   left: 28px; bottom: 24px;
   max-width: 280px;
   padding: 10px 12px;
   border-radius: var(--r-md);
   background: rgba(15, 20, 48, 0.85);
   border: 1px solid rgba(34, 211, 238, 0.4);
   box-shadow: 0 12px 32px -16px rgba(34, 211, 238, 0.5);
   font-size: 11px;
   color: var(--text);
   line-height: 1.4;
   opacity: 0;
   transform: translateY(12px) scale(0.96);
   transition: opacity 380ms var(--ease), transform 380ms var(--ease);
   z-index: 4;
}
.ai-vis__cited.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.ai-vis__cited-tag {
   display: inline-block;
   padding: 2px 8px;
   margin-bottom: 4px;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--cyan);
   background: var(--cyan-soft);
   border-radius: var(--r-pill);
}
.ai-vis__cited-text { display: block; color: var(--text-muted); }

/* ============================================================
   LEAD FUNNEL — pulse dots + conversion-rate badges + heatmap pulse
   ============================================================ */
.ai-funnel__pulse {
   display: inline-block;
   width: 7px; height: 7px;
   margin-right: 8px;
   border-radius: 50%;
   background: var(--cyan);
   box-shadow: 0 0 8px var(--cyan);
   vertical-align: middle;
   animation: aiPulse 1.8s ease-in-out infinite;
}
.ai-funnel__pulse--green {
   background: var(--emerald);
   box-shadow: 0 0 10px var(--emerald);
}
.ai-funnel__rate {
   align-self: center;
   font-size: 10px;
   color: var(--text-dim);
   letter-spacing: 0.06em;
   text-transform: uppercase;
   font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ai-funnel__rate-num {
   color: var(--cyan);
   font-weight: 700;
   font-size: 14px;
   font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
   letter-spacing: -0.02em;
   font-variant-numeric: tabular-nums;
}

/* Heatmap pulse over the SVG funnel */
.ai-funnel__svg {
   position: relative;
}
.ai-funnel::before {
   content: "";
   position: absolute;
   left: 50%; top: 30%;
   width: 70%; aspect-ratio: 1;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background: radial-gradient(closest-side, rgba(34, 211, 238, 0.25), transparent 70%);
   filter: blur(20px);
   pointer-events: none;
   animation: aiHeatmap 4s ease-in-out infinite;
}
@keyframes aiHeatmap {
   0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
   50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}

/* ============================================================
   MARKETPLACE — staggered tile pulse + traveling data packets
   ============================================================ */
/* Each tile pulses on its own ~8s cycle, each at a different delay so the
   six tiles never pulse together — feels alive without strict apex sync. */
.ai-orbit__tile {
   animation: aiTilePulse 8s ease-in-out infinite;
   animation-play-state: running;
}
.ai-orbit__tile:hover { animation-play-state: paused; }
.ai-orbit__tile:nth-child(1) { animation-delay:  0s;   }
.ai-orbit__tile:nth-child(2) { animation-delay: -1.3s; }
.ai-orbit__tile:nth-child(3) { animation-delay: -2.7s; }
.ai-orbit__tile:nth-child(4) { animation-delay: -4.1s; }
.ai-orbit__tile:nth-child(5) { animation-delay: -5.4s; }
.ai-orbit__tile:nth-child(6) { animation-delay: -6.8s; }
@keyframes aiTilePulse {
   0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
   45%      { box-shadow: 0 0 28px 0 rgba(34, 211, 238, 0.45); }
   60%      { box-shadow: 0 0 28px 0 rgba(34, 211, 238, 0); }
}

/* Traveling data packets along the orbit — orbit center is left:50%/top:50%,
   each packet rotates around that origin while offset by `translateY` so the
   transform compounds into orbital motion. translateX/Y in pixels (not %) is
   required because % would resolve to the packet's own 8px size. */
.ai-orbit__packet {
   position: absolute;
   left: 50%; top: 50%;
   width: 8px; height: 8px;
   margin: -4px 0 0 -4px;
   border-radius: 50%;
   pointer-events: none;
   transform-origin: center;
   z-index: 3;
}
.ai-orbit__packet--1 {
   background: var(--cyan);
   box-shadow: 0 0 16px var(--cyan), 0 0 28px rgba(34, 211, 238, 0.55);
   animation: aiPacketA 5.5s linear infinite;
}
.ai-orbit__packet--2 {
   background: var(--purple);
   box-shadow: 0 0 14px var(--purple), 0 0 26px rgba(168, 85, 247, 0.55);
   animation: aiPacketB 7s linear infinite;
   width: 7px; height: 7px;
}
.ai-orbit__packet--3 {
   background: var(--magenta);
   box-shadow: 0 0 12px var(--magenta), 0 0 22px rgba(236, 72, 153, 0.55);
   animation: aiPacketC 6.5s linear infinite reverse;
   width: 6px; height: 6px;
}
@keyframes aiPacketA {
   from { transform: rotate(0deg)   translateY(-160px); }
   to   { transform: rotate(360deg) translateY(-160px); }
}
@keyframes aiPacketB {
   from { transform: rotate(80deg)  translateY(-200px); }
   to   { transform: rotate(440deg) translateY(-200px); }
}
@keyframes aiPacketC {
   from { transform: rotate(220deg) translateY(-130px); }
   to   { transform: rotate(580deg) translateY(-130px); }
}
/* Hide packets on mobile where the orbit collapses to a static grid */
@media (max-width: 768px) {
   .ai-orbit__packet { display: none; }
   .ai-orbit__tile { animation: none; }
}

/* ============================================================
   STATS — trend arrows + count-up starburst
   ============================================================ */
.ai-stat {
   position: relative;
}
.ai-stat__trend {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 10px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.04em;
   font-family: 'JetBrains Mono', ui-monospace, monospace;
   opacity: 0;
   transform: translateY(4px);
   transition: opacity 380ms var(--ease) 1100ms, transform 380ms var(--ease) 1100ms;
}
.ai-stat__trend.is-visible { opacity: 1; transform: translateY(0); }
.ai-stat__trend--up { color: var(--emerald); }
.ai-stat__trend--steady { color: var(--text-muted); }
.ai-stat__arrow {
   width: 12px; height: 10px;
}
.ai-stat__arrow path {
   stroke-dasharray: 26;
   stroke-dashoffset: 26;
   transition: stroke-dashoffset 600ms cubic-bezier(0.22, 0.61, 0.36, 1) 1300ms;
}
.ai-stat__trend.is-visible .ai-stat__arrow path { stroke-dashoffset: 0; }

/* Starburst flash when count completes */
.ai-stat__num { position: relative; }
.ai-stat__num::after {
   content: "";
   position: absolute;
   left: 50%; top: 50%;
   width: 80px; height: 80px;
   transform: translate(-50%, -50%) scale(0);
   border-radius: 50%;
   background: radial-gradient(closest-side, rgba(34, 211, 238, 0.6), transparent 70%);
   pointer-events: none;
   opacity: 0;
}
.ai-stat__num.is-burst::after {
   animation: aiBurst 1.2s ease-out forwards;
}
@keyframes aiBurst {
   0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
   100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* ============================================================
   RESPONSIVE REFINEMENTS — comprehensive sweep across breakpoints
   to polish the page on every device size. Wrapped at the end of
   the stylesheet so it cleanly overrides earlier defaults.
   ============================================================ */

/* ----- Large desktop (≥1280px) — everything default. ----- */

/* ----- Mid-desktop / small laptop (≤1200px) — tighten container ----- */
@media (max-width: 1200px) {
   .ai-container { max-width: 100%; padding: 0 28px; }
   .ai-nav__inner { padding: 14px 24px; }
}

/* ----- Tablet landscape (≤1024px) — keep nav links but smaller ----- */
@media (max-width: 1024px) {
   .ai-nav__links a { padding: 8px 10px; font-size: 13px; }
   .ai-nav__cta .ai-btn { padding: 12px 20px; font-size: 14px; }
   .ai-prod__row { gap: 48px; }
   .ai-form-block__row { gap: 40px; }
}

/* ----- Tablet portrait (≤991px) — single-column layouts kick in ----- */
@media (max-width: 991px) {
   /* Container padding scales down */
   .ai-container { padding: 0 24px; }
   /* Hero typography */
   .ai-hero h1 { font-size: clamp(36px, 6.4vw, 64px); line-height: 1.12; }
   .ai-hero__sub { font-size: 16px; max-width: 580px; }
   .ai-hero__pulse { margin-top: 40px; }
   /* Section title sizes */
   .ai-prod__title,
   .ai-form-block__lede h2 { font-size: clamp(28px, 4.4vw, 38px); }
   .ai-market__title { font-size: clamp(28px, 4.6vw, 42px); }
   /* Form column padding shrinks */
   .ai-form-block .custom-form-container,
   .ai-form--experts .contact-form form#d_mark_analyze_for8 { padding: 26px !important; }
   /* Stats stay 2x2 */
   .ai-stats__grid { grid-template-columns: 1fr 1fr; }
   /* Footer wraps */
   /* (footer responsive handled in dedicated footer block above) */
}

/* ----- Mobile landscape / large phone (≤768px) ----- */
@media (max-width: 768px) {
   .ai-container { padding: 0 18px; }
   .ai-nav__inner { padding: 12px 18px; }
   .ai-nav__logo img { height: 44px; }
   /* Hero — compact */
   .ai-hero { padding: 100px 18px 64px; min-height: 90vh; }
   .ai-hero__sub { font-size: 15px; margin-bottom: 28px; }
   .ai-hero__ctas { gap: 12px; margin-bottom: 36px; }
   .ai-hero__ctas .ai-btn { flex: 1 1 auto; min-width: 140px; justify-content: center; padding: 13px 18px; }
   .ai-hero__chips { gap: 8px; }
   .ai-hero__chip { padding: 6px 11px; font-size: 12px; }
   .ai-hero__pulse { max-width: 320px; }
   .ai-hero__pulse-label { font-size: 9px; letter-spacing: 0.18em; }
   /* Sections */
   .ai-prod { padding: 36px 0; }
   .ai-form-block { padding: 48px 0; }
   /* Stages — taller aspect ratio so internal elements don't overlap */
   .ai-stage { aspect-ratio: 4 / 5; max-width: 100%; }

   /* === Per-stage mobile fixes === */

   /* AI Visibility — keep the focal SERP climb; hide accessory bits that
      were overlapping the rows on narrow stages. */
   .ai-vis { padding: 18px; gap: 8px; }
   .ai-vis__donut { display: none; }
   .ai-vis__cited { display: none; }
   .ai-vis__spark { display: none; }
   .ai-vis__row { padding: 8px 12px; font-size: 11px; }
   .ai-vis__rank { width: 22px; height: 22px; font-size: 11px; }
   .ai-vis__head { font-size: 10px; }

   /* AI Lead Generator — drop the funnel SVG, keep the stage cards which are
      the actual data. Counter badge stays absolute, anchored top-right of
      the stage card so it reads as a live-status indicator. */
   .ai-funnel { gap: 8px; padding: 18px; padding-top: 44px; }
   .ai-funnel__svg { display: none; }
   .ai-funnel__counter {
      position: absolute !important;
      top: 12px;
      right: 12px;
      left: auto;
      font-size: 10px;
      padding: 4px 10px;
      z-index: 3;
   }
   .ai-funnel__stage { width: 92%; padding: 9px 14px; }
   .ai-funnel__rate { font-size: 10px; }
   .ai-funnel__rate-num { font-size: 13px; }

   /* Product copy spacing */
   .ai-prod__lede { font-size: 15px; }
   .ai-prod__list li { font-size: 14px; }
   /* Trust strip stacks at 1-col below 600px (uses ≤575 rule) */
   .ai-trust-strip { gap: 10px; padding-top: 18px; margin-top: 22px; }
   /* Form 2 fields stack to 1-column on tablet so labels don't crush */
   .ai-form--experts .contact-form .c-row { grid-template-columns: 1fr; }
   .ai-form--experts .contact-form .col-6 { grid-column: span 1; }
   /* FAQ */
   .ai-faq__title { font-size: clamp(26px, 5vw, 34px); margin-bottom: 28px; }
   .ai-faq__item label { font-size: 16px; padding: 18px 4px; }
   /* Stat cards */
   .ai-stat { padding: 22px 18px; }
   .ai-stat__num { font-size: clamp(30px, 6vw, 42px); }
   /* Footer link list spacing on mobile */
   .ai-footer__links { gap: 8px; }
   .ai-footer__links a { font-size: 13px; }
   .ai-footer__links--meta { gap: 14px; font-size: 13px; }
   .ai-footer__title { margin-bottom: 12px; font-size: 10px; }
   /* Marketplace orbit collapses to grid (already in earlier rule) */
   /* Mobile menu list */
   .ai-mobile-menu a { padding: 14px 16px; font-size: 16px; }
}

/* ----- Small phone (≤480px) ----- */
@media (max-width: 480px) {
   .ai-hero h1 { font-size: clamp(30px, 9vw, 44px); letter-spacing: -0.02em; }
   .ai-hero__sub { font-size: 14px; }
   .ai-hero__ctas { flex-direction: column; align-items: stretch; }
   .ai-hero__ctas .ai-btn { width: 100%; }
   .ai-prod__title,
   .ai-form-block__lede h2 { font-size: clamp(24px, 7vw, 30px); line-height: 1.15; }
   .ai-form-block__lede p { font-size: 15px; }
   .ai-stats__grid { grid-template-columns: 1fr; }
   .ai-stat__num { font-size: clamp(28px, 8vw, 36px); }
   .ai-form-block .custom-form-container,
   .ai-form--experts .contact-form form#d_mark_analyze_for8 { padding: 20px !important; }
   .ai-form-block .custom-form-element .form-group input,
   .ai-form--experts .form-input,
   .ai-form-block .custom-form-container textarea#project_details,
   .ai-form--experts .contact-form .form-field textarea {
      font-size: 16px !important; /* Prevent iOS auto-zoom on focus */
   }
   /* Phone-input padding-left scales down for narrow phones */
   .ai-form-block .iti--separate-dial-code input.form-input,
   .ai-form-block .iti input[id="phone_number"],
   .ai-form-block .iti input[id="d_mark_phone"] {
      padding-left: 88px !important;
   }
   /* Trust badges 1-column */
   .ai-trust-strip { grid-template-columns: 1fr; }
   .ai-trust { padding: 12px; }
   /* Hero pulse smaller */
   .ai-hero__pulse-dots span { width: 5px; height: 5px; }
   .ai-hero__pulse { max-width: 280px; }
   /* Footer copy */
   .ai-footer__copy { font-size: 11px; }
   .ai-footer__brand { font-size: 13px; }
}

/* ----- Touch-target floor (44px on tap targets) ----- */
@media (hover: none) and (pointer: coarse) {
   .ai-btn,
   .ai-nav__links a,
   .ai-prod__cta,
   .ai-faq__item label,
   .ai-footer__links a {
      min-height: 44px;
   }
   /* Disable hover-only animations on touch devices */
   .ai-stat:hover,
   .ai-trust:hover,
   .ai-orbit__tile:hover { transform: none; }
}

/* ----- Landscape phone short height — compress hero ----- */
@media (max-height: 540px) and (orientation: landscape) {
   .ai-hero { min-height: auto; padding: 80px 24px 40px; }
   .ai-hero__pulse { margin-top: 24px; }
   .ai-hero__scroll { display: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
   .ai-reveal { opacity: 1; transform: none; }
   .ai-orbit__rotor, .ai-orbit__tile-inner { animation: none !important; }
   .ai-call__waveform span { animation: none !important; height: 24px !important; }
}