/* ===================================================================

   RoiMeasureX — 2026 Premium Agency Design System

   Research: Olivine, Disruptive, NoGood, Typeform, OSMO, MadeByMany

   =================================================================== */



/* ---------- Core tokens (dark theme — default) ---------- */

:root {
  --bg: #070B14;
  --bg-2: #0B1120;
  --bg-3: #0F172A;
  --bg-elevated: #0E1626;
  --card: #0D1527;
  --card-hover: #121D36;
  --card-2: #16223D;
  --border: rgba(34, 211, 238, 0.15);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-ghost: rgba(255, 255, 255, 0.05);

  --text: #F0F4FA;

  --text-bright: #ffffff;

  --text-secondary: #94A3B8;

  --muted: #64748b;

  --muted-light: #A0AEC0;

  --accent: #2563EB;

  --accent-bright: #22D3EE;

  --accent-dim: #1D4ED8;

  --accent-subtle: rgba(37,99,235,0.16);

  --accent-glow: rgba(34,211,238,0.3);



  --gradient-accent: linear-gradient(135deg, #2563EB 0%, #06B6D4 60%, #22D3EE 100%);

  --gradient-accent-glow: linear-gradient(135deg, rgba(37,99,235,0.35) 0%, rgba(6,182,212,0.3) 100%);

  --gradient-header: linear-gradient(180deg, rgba(37,99,235,0.22) 0%, rgba(6,182,212,0.12) 50%, transparent 100%);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-display: 'Georgia', 'Times New Roman', 'Noto Serif', serif;

  --radius: 12px;

  --radius-lg: 16px;

  --radius-full: 9999px;

  --shadow-lg: 0 10px 40px rgba(0,0,0,0.4);

  --dur: 0.3s;

  --dur-fast: 0.15s;

  --dur-slow: 0.6s;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --ease-soft-spring: cubic-bezier(0.34, 1.2, 0.64, 1);

  --theme-transition: background 0.5s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;

  --glass-bg: rgba(11, 18, 34, 0.75);
  --glass-border: rgba(34, 211, 238, 0.16);
  --glass-blur: blur(20px) saturate(140%);
}



/* ---------- Body & Theme ---------- */

body {

  background: var(--bg);

  color: var(--text);

  line-height: 1.6;

  letter-spacing: 0.01em;

}



.hero-copy h1,

.hero-copy h2,

.section-header h2,

.section-header h3,

.case-study-col h4 {


  color: var(--text-bright);

}





.hero-copy p,

.section-header p,

.case-study-col p {


  color: var(--text-secondary);

}







/* Shared tokens — same in both themes (overrides default above) */

:root {

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-display: 'Georgia', 'Times New Roman', 'Noto Serif', serif;

  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

  --radius-sm: 4px;

  --radius: 8px;

  --radius-lg: 14px;

  --radius-xl: 20px;

  --radius-2xl: 28px;

  --radius-full: 9999px;



  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --ease-soft-spring: cubic-bezier(0.45, 1.05, 0.55, 1);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  --dur-fast: 120ms;

  --dur: 220ms;

  --dur-slow: 380ms;

  --dur-slower: 550ms;

}



/* Light theme overrides — follows Windows system theme */

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

  :root {

    --bg: #F8FAFC;

    --bg-2: #F1F5F9;

    --bg-3: #E2E8F0;

    --bg-elevated: #ffffff;

    --card: #ffffff;

    --card-hover: #f3f5fa;

    --card-2: #eceff6;

    --border: #d0d7e5;

    --border-subtle: #e0e5ef;

    --border-ghost: rgba(11,18,32,0.05);

    --text: #0B1220;

    --text-bright: #0B1220;

    --text-secondary: #475569;

    --muted: #64748B;

    --muted-light: #94A3B8;

    --accent: #2563EB;

    --accent-bright: #22D3EE;

    --accent-subtle: rgba(37,99,235,0.1);

    --accent-glow: rgba(34,211,238,0.18);

    --accent-2: #22D3EE;

    --cyan: #22D3EE;

    --cyan-subtle: rgba(34,211,238,0.08);

    --green: #2e3192;

    --green-subtle: rgba(22,163,74,0.08);

    --amber: #d97706;

    --amber-subtle: rgba(217,119,6,0.08);

    --purple: #7c3aed;

    --purple-subtle: rgba(124,58,237,0.08);

    --red: #dc2626;

    --red-subtle: rgba(220,38,38,0.08);

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.07);

    --shadow: 0 4px 12px rgba(11,18,32,0.06);

    --shadow-lg: 0 12px 32px rgba(0,0,0,0.08);

    --shadow-glow: 0 0 0 1px rgba(37,99,235,0.12), 0 4px 16px rgba(14,116,144,0.08);

    /* Glassmorphism — light */

    --glass-bg: rgba(248,250,252,0.75);

    --glass-border: rgba(11,18,32,0.06);

    --glass-blur: blur(16px);

  }

  body::before {

    background:

      radial-gradient(ellipse 80% 60% at 20% -10%, rgba(46,49,146,0.06) 0%, transparent 50%),

      radial-gradient(ellipse 60% 50% at 90% 0%, rgba(6,182,212,0.05) 0%, transparent 45%),

      radial-gradient(ellipse 50% 40% at 70% 100%, rgba(6,182,212,0.04) 0%, transparent 50%),

      radial-gradient(ellipse 40% 30% at 10% 90%, rgba(46,49,146,0.03) 0%, transparent 45%),

      radial-gradient(ellipse 30% 25% at 50% 50%, rgba(46,49,146,0.02) 0%, transparent 60%);

  }

}



/* Light theme via JS-set data-theme attribute (higher specificity than @media) */

:root[data-theme="light"] body::before {

  background: var(--gradient-mesh);

}



:root[data-theme="light"] .site-header {

  background: var(--bg);

}



:root[data-theme="light"] {

  --bg: #ffffff;

  --bg-2: #F1F5F9;

  --bg-3: #F1F5F9;

  --bg-elevated: #ffffff;

  --card: #ffffff;

  --card-hover: #E2E8F0;

  --card-2: #E2E8F0;

  --border: #d0d7e5;

  --border-subtle: #e0e5ef;

  --border-ghost: rgba(11,18,32,0.05);

  --text: #0B1220;

  --text-bright: #0B1220;

  --text-secondary: #475569;

  --muted: #64748B;

  --muted-light: #94A3B8;

  --accent: #2563EB;

  --accent-bright: #22D3EE;
  --accent-dim: #1D4ED8;

  --accent-subtle: rgba(37,99,235,0.1);

  --accent-glow: rgba(34,211,238,0.18);

  --accent-2: #22D3EE;

  --cyan: #22D3EE;

  --cyan-subtle: rgba(34,211,238,0.08);

  --green: #2e3192;

  --green-subtle: rgba(22,163,74,0.08);


  --amber-subtle: rgba(217,119,6,0.08);

  --purple: #7c3aed;

  --purple-subtle: rgba(124,58,237,0.08);

  --red: #dc2626;

  --red-subtle: rgba(220,38,38,0.08);

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07);

  --shadow: 0 4px 12px rgba(11,18,32,0.06);

  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08);

  --shadow-glow: 0 0 0 1px rgba(46,49,146,0.12), 0 4px 16px rgba(46,49,146,0.06);

  /* Gradient system */

  --gradient-accent: linear-gradient(135deg, #2563EB 0%, #06B6D4 60%, #22D3EE 100%);

  --gradient-accent-glow: linear-gradient(135deg, rgba(37,99,235,0.35) 0%, rgba(6,182,212,0.3) 100%);

  --gradient-header: linear-gradient(180deg, rgba(37,99,235,0.2) 0%, rgba(6,182,212,0.12) 55%, transparent 100%);

  --gradient-mesh: radial-gradient(ellipse 80% 60% at 20% -10%, rgba(37,99,235,0.06) 0%, transparent 50%),

    radial-gradient(ellipse 60% 50% at 90% 0%, rgba(6,182,212,0.05) 0%, transparent 45%),

    radial-gradient(ellipse 50% 40% at 70% 100%, rgba(6,182,212,0.04) 0%, transparent 50%),

    radial-gradient(ellipse 40% 30% at 10% 90%, rgba(37,99,235,0.03) 0%, transparent 45%),

    radial-gradient(ellipse 30% 25% at 50% 50%, rgba(37,99,235,0.02) 0%, transparent 60%);

  /* Glassmorphism — light */

  --glass-bg: rgba(248,250,252,0.75);

  --glass-border: rgba(11,18,32,0.06);

  --glass-blur: blur(16px);

}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .agency-copy strong {
  color: var(--text);
}

:root[data-theme="light"] body::before {

  background: var(--gradient-mesh);

}



/* Explicit dark theme override: do not let the OS light preference win over the toggle. */

:root[data-theme="dark"] {

  --bg: #050505;

  --bg-2: #0A0D0B;

  --bg-3: #101411;

  --bg-elevated: #0D0F0C;

  --card: #0C0F0D;

  --card-hover: #111513;

  --card-2: #243352;

  --border: #2D3F5C;

  --border-subtle: #1F2D4A;

  --border-ghost: rgba(255,255,255,.08);

  --text: #F0F4FA;

  --text-bright: #ffffff;

  --text-secondary: #94A3B8;

  --muted: #64748B;

  --muted-light: #A0AEC0;

  --accent: #2563EB;

  --accent-bright: #22D3EE;

  --accent-dim: #1D4ED8;

  --accent-subtle: rgba(37,99,235,.16);

  --accent-glow: rgba(34,211,238,.24);

  --accent-2: #22D3EE;

  --cyan: #22D3EE;

  --green: #2e3192;

  --purple: #7C3AED;

  --gradient-accent: linear-gradient(135deg, #2563EB 0%, #06B6D4 60%, #22D3EE 100%);

  --gradient-accent-glow: linear-gradient(135deg, rgba(37,99,235,0.35) 0%, rgba(6,182,212,0.3) 100%);

  --gradient-header: linear-gradient(180deg, rgba(37,99,235,0.22) 0%, rgba(6,182,212,0.14) 50%, transparent 100%);

  --glass-bg: rgba(9,20,33,.78);

  --glass-border: rgba(167,243,208,.18);

  --glass-blur: blur(18px) saturate(135%);

  --shadow-lg: 0 16px 48px rgba(0,0,0,.42);

}



:root[data-theme="dark"] body::before {

  background: var(--gradient-mesh);

}



/* Light mode keeps a warm, tinted rhythm instead of flat white panels. */

:root[data-theme="light"] {

  --bg: #F8FAFC;

  --bg-2: #f1f6f8;

  --bg-3: #E2E8F0;

  --card: #ffffff;

  --card-hover: #f4fbfb;

  --card-2: #edf7f5;

  --border: #CBD5E1;

  --border-subtle: #E2E8F0;

  --border-ghost: rgba(16,72,86,.10);

  --text-secondary: #475569;

  --muted: #64748B;

  --accent-subtle: rgba(27,255,255,.14);

  --green: #059669;

  --green-subtle: rgba(7,132,91,.10);

  --shadow-lg: 0 16px 40px rgba(20,70,84,.12);

}



:root[data-theme="light"] #problem,

:root[data-theme="light"] #process,

:root[data-theme="light"] #team,

:root[data-theme="light"] .services-section {
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
}





/* Theme transition effect: a brief, controlled aurora bloom */

html.theme-switching body::before {

  animation: theme-bloom .65s var(--ease-out) both;

}

html.theme-switching .theme-btn {

  animation: theme-button-pulse .65s var(--ease-out) both;

}

@keyframes theme-bloom {

  0% { opacity: .72; filter: saturate(1); }

  45% { opacity: 1; filter: saturate(1.35) brightness(1.08); }

  100% { opacity: 1; filter: saturate(1); }

}

@keyframes theme-button-pulse {

  45% { transform: scale(1.12); box-shadow: 0 0 32px var(--accent-glow); }

}



/* 2026 layout rhythm: consistent reading width and section cadence */

.section > .container,

.section > .section-inner {

  width: 100%;

}

.section-header { text-wrap: pretty; }
.section-header h2, .hero-copy h1 { text-wrap: balance; }

.card, .solution, .who-card, .faq-item, .approach-step, .team-card {
  contain: layout;
}


/* ---------- Reset ---------- */

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

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

body, .card, .site-header, .hero, .section, .pricing-card, .solution, .who-card, .faq-item, .stat-item, .metric-item, .logo-wall-item, .approach-step, .tech-badge, .credential-card, .six-pillar, .who-card, .footer-col, .footer-brand, .header-cta-btn, .theme-btn, .btn, .tab, .marquee-item, .feed-item, .health-item, .kpi, .badge, input, select, textarea {

  transition: var(--theme-transition);

}



/* Theme transition — instant switch, no overlay */



/* ---- SKIP LINK (accessibility best practice 2026) ---- */

.skip-link {

  position: absolute;

  top: -100%;

  left: 50%;

  transform: translateX(-50%);

  background: var(--accent);

  color: #fff;

  padding: 14px 28px;

  border-radius: var(--radius);

  font-weight: 700;

  font-size: 14px;

  z-index: 9999;

  transition: top 0.2s var(--ease-out);

  text-decoration: none;

  letter-spacing: 0.02em;

}

.skip-link:focus {

  top: 16px;

  outline: 2px solid var(--text-bright);

  outline-offset: 2px;

}



/* ---- FOCUS VISIBLE (accessibility: keyboard navigation) ---- */

:focus {

  outline: none;

}

:focus-visible {

  outline: 2px solid var(--accent);

  outline-offset: 2px;

  border-radius: var(--radius-sm);

}



body {

  margin: 0; padding: 0;

  font-family: var(--font-sans);

  background: var(--bg);

  color: var(--text);

  line-height: 1.6;

  font-size: 15px;

  min-height: 100vh;

  overflow-x: hidden;

  transition: var(--theme-transition);

}



/* ---- TAP TARGETS (mobile-first best practice: min 44px) ---- */

button, .btn, a.btn, .theme-btn, .footer-social-link {
  min-height: 44px;
  min-width: 44px;
}


/* ---------- DYNAMIC BACKGROUND SYSTEM (2026 premium) ---------- */

body {
  background: var(--bg);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--gradient-mesh);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

body .grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.container, .site-header, .top-bar, .top-bar-marquee, .site-footer,
.section, .hero, .approach-card, .credentials-section, .tech-stack-section,
.geo-section, .logo-wall-section, .solutions-grid, .pricing-grid,
.who-grid, .agency-section, .faq-list, .team-card, .footer-cta-section,
.audit-form-section, .problem-card, .proof-card, .case-studies-slider,
.process-grid, .stat-bar {
  position: relative;
  z-index: 2;
}


/* ---- Scroll reveal animations (IntersectionObserver) ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-scale {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal-scale.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale { opacity: 1; transform: none; transition: none; }
}

/* ---- Grain texture (subtle tactile layer) ---- */

body::after {

  content: '';

  position: fixed;

  inset: 0;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");

  opacity: .12;

  mix-blend-mode: overlay;

  pointer-events: none;

  z-index: 1;

}



/* ---------- Typography (2026 professional: confident, clear hierarchy) ---------- */

h1, h2, h3, h4 {

  color: var(--text-bright);

  font-weight: 700;

  letter-spacing: -0.02em;

  line-height: 1.15;

  margin: 0;
  transform: translateZ(20px);}



h1 {

  font-size: clamp(32px, 5vw, 60px);

  font-weight: 700;

  line-height: 1.1;

  letter-spacing: -0.02em;

}



h2 {

  font-size: clamp(24px, 3vw, 36px);

  line-height: 1.2;

  letter-spacing: -0.02em;

}



h3 { font-size: clamp(16px, 2vw, 20px); letter-spacing: -0.01em;
  transform: translateZ(20px);}

h4 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--muted); }



p { margin: 0; color: var(--text-secondary); line-height: 1.7; font-size: clamp(15px, 2vw, 17px);
  transform: translateZ(10px);}

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

strong { font-weight: 600; color: var(--text); }

small { font-size: 13px; color: var(--muted-light); }

/* Modern Sleek Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #070B14;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2563EB 0%, #06B6D4 100%);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #1D4ED8 0%, #0891B2 100%);
}

/* Modern Selection Highlight */
::selection {
  background: rgba(34, 211, 238, 0.3);
  color: #FFFFFF;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #22D3EE;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.28);
  padding: 4px 13px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  width: fit-content;
}

html.theme-light .eyebrow {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
  color: #2563EB;
}

/* ---- VISUAL HIERARCHY: professional section spacing ---- */

.section {
  padding: clamp(50px, 9vw, 95px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.section::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.35), transparent);
  pointer-events: none;
}

.section:first-of-type { border-top: none; padding-top: clamp(24px, 5vw, 60px); }
.section:first-of-type::before { display: none; }

.section-header { margin-bottom: clamp(28px, 5vw, 52px); max-width: 660px; }

.section-header .eyebrow { margin-bottom: 16px; }

.section-header h2 {
  margin-bottom: 16px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-bright);
}

.section-header p {
  font-size: 16.5px;
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.7;
}



/* ---- CONTAINER: professional breathing room ---- */

.container {

  max-width: 1140px;

  margin: 0 auto;

  padding: 0 clamp(16px, 3vw, 24px);

  position: relative;

  z-index: 2;

}

.site-header .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
}



@media (min-width: 768px) {

  .container { padding: 0 clamp(24px, 4vw, 40px); }

}



@media (min-width: 1920px) {

  .container { max-width: 1240px; }

}



/* ---------- Top bar (2026 Modern 3D Tactile Signal Strip) ---------- */

.top-bar {
  position: relative;
  z-index: 9;
  overflow: hidden;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, #090D18 0%, #050811 100%);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.top-bar::after {
  content: "";
  position: absolute;
  left: -25%;
  bottom: -0.5px;
  width: 35%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, #06B6D4 20%, #2563EB 50%, #4F46E5 80%, transparent 100%);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
  animation: top-bar-scan 6s ease-in-out infinite;
  pointer-events: none;
}

.top-bar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 12px;
}

.top-bar-inner::-webkit-scrollbar {
  display: none;
}

.top-bar-label,
.top-bar-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 10px;
  color: #CBD5E1;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 450;
  font-family: var(--font-mono);
  flex-shrink: 0;
  opacity: 0.9;
  transition: color var(--dur) var(--ease-out);
}

.top-bar-label::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
  animation: top-bar-pulse 2.2s ease-in-out infinite;
}

.top-bar-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.top-bar-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 1.5px 7px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #94A3B8;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 450;
  letter-spacing: .02em;
  line-height: 1.3;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  user-select: none;
  cursor: pointer;
}

.top-bar-logo:first-child {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: #60A5FA;
  font-weight: 600;
}

.top-bar-logo:hover {
  color: #38BDF8;
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(30, 41, 59, 0.8);
  transform: translateY(-1px);
}

.top-bar-logo:first-child:hover {
  color: #FFFFFF;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  transform: translateY(-1px);
}

.top-bar-logo:active {
  transform: translateY(0);
}

.top-bar-right {
  color: #64748B;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

@keyframes top-bar-scan {
  0%, 100% { transform: translateX(0); opacity: .35; }
  50% { transform: translateX(350%); opacity: 1; }
}

@keyframes top-bar-pulse {
  0%, 100% { opacity: .65; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .top-bar::after, .top-bar-label::before { animation: none; }
}



/* ---------- Marquee (Top of page - 3D Modern Scrolling Ticker) ---------- */

.top-bar-marquee {
  overflow: hidden;
  background: linear-gradient(180deg, #0B1120 0%, #070B14 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 7px 0;
  position: relative;
  z-index: 10;
  box-shadow: 
    0 4px 18px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.5);
  mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.marquee-track {
  display: flex;
  gap: 28px;
  width: max-content;
  align-items: center;
  flex-wrap: nowrap;
  animation-name: marquee-scroll;
  animation-duration: 32s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
  will-change: transform;
  pointer-events: auto;
}

/* Ensure scroll pauses whenever mouse hovers anywhere on marquee strip, track, or pills */
.top-bar-marquee:hover .marquee-track,
.top-bar-marquee:focus-within .marquee-track,
.top-bar-marquee .marquee-track:hover,
.marquee-track:hover,
.marquee-track:has(.marquee-item:hover),
.top-bar-marquee:hover .marquee-item {
  animation-play-state: paused !important;
}

/* 3D Tactile Capsule Pills - Dark Mode Default (Harmonized with top-bar) */
.marquee-item {
  font-size: 11px;
  color: #E2E8F0;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.015em;
  background: linear-gradient(180deg, #162238 0%, #0F172A 60%, #0B1120 100%);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 2.5px solid #030712;
  border-radius: 9999px;
  padding: 5px 15px;
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background 0.25s ease;
  cursor: pointer;
  pointer-events: auto;
}

.marquee-item:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(180deg, #1E293B 0%, #172554 60%, #0F172A 100%);
  border-color: rgba(56, 189, 248, 0.55);
  border-top-color: rgba(147, 197, 253, 0.4);
  border-bottom: 3.5px solid #2563EB;
  box-shadow: 
    0 8px 20px rgba(14, 165, 233, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #38BDF8;
}

.marquee-item .mi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #34D399 0%, #10B981 60%, #059669 100%);
  flex-shrink: 0;
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 0 0 2px rgba(16, 185, 129, 0.25),
    0 0 8px rgba(16, 185, 129, 0.7);
  animation: pulse-dot 2.2s ease-in-out infinite;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(0.9); opacity: 0.75; }
  50% { transform: scale(1.25); opacity: 1; filter: drop-shadow(0 0 6px #10B981); }
}



/* ---------- Light Mode Overrides for Top Bar & Marquee ---------- */

:root[data-theme="light"] .top-bar,
.theme-light .top-bar {
  border-bottom: 1.5px solid #CBD5E1;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 50%, #E2E8F0 100%);
  box-shadow: 
    0 4px 18px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .top-bar-label,
.theme-light .top-bar-label {
  color: #0F172A;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95);
}

:root[data-theme="light"] .top-bar-right,
.theme-light .top-bar-right {
  color: #334155;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-theme="light"] .top-bar-logo,
.theme-light .top-bar-logo {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 50%, #E2E8F0 100%);
  border: 1px solid #CBD5E1;
  border-top: 1px solid #FFFFFF;
  border-bottom: 2.5px solid #94A3B8;
  box-shadow: 
    0 2px 4px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  color: #1E293B;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95);
}

:root[data-theme="light"] .top-bar-logo:first-child,
.theme-light .top-bar-logo:first-child {
  background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 50%, #1E40AF 100%);
  border: 1px solid #1E40AF;
  border-top: 1px solid #60A5FA;
  border-bottom: 2.5px solid #172554;
  color: #FFFFFF;
  box-shadow: 
    0 2px 6px rgba(37, 99, 235, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.5);
}

:root[data-theme="light"] .top-bar-logo:hover,
.theme-light .top-bar-logo:hover {
  color: #0F172A;
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 50%, #DBEAFE 100%);
  border-color: #93C5FD;
  border-top-color: #FFFFFF;
  border-bottom: 3.5px solid #2563EB;
  box-shadow: 
    0 4px 12px rgba(37, 99, 235, 0.18),
    inset 0 1px 0 #FFFFFF;
}

:root[data-theme="light"] .top-bar-logo:first-child:hover,
.theme-light .top-bar-logo:first-child:hover {
  color: #FFFFFF;
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 50%, #1D4ED8 100%);
  border-top-color: #93C5FD;
  border-bottom: 3.5px solid #0F172A;
  box-shadow: 
    0 5px 15px rgba(37, 99, 235, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

:root[data-theme="light"] .top-bar-logo:active,
.theme-light .top-bar-logo:active {
  transform: translateY(1.5px);
  border-bottom-width: 1px;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.15);
}

:root[data-theme="light"] .top-bar-marquee,
.theme-light .top-bar-marquee {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 55%, #F1F5F9 100%);
  border-top: 1px solid rgba(255, 255, 255, 1);
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 
    0 4px 20px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

:root[data-theme="light"] .marquee-item,
.theme-light .marquee-item {
  color: #0F172A;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 55%, #EDF2F7 100%);
  border: 1px solid #CBD5E1;
  border-top: 1px solid #FFFFFF;
  border-bottom: 2.5px solid #94A3B8;
  box-shadow: 
    0 2px 5px rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 #FFFFFF;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

:root[data-theme="light"] .marquee-item:hover,
.theme-light .marquee-item:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 60%, #DBEAFE 100%);
  border-color: #93C5FD;
  border-top-color: #FFFFFF;
  border-bottom: 3.5px solid #2563EB;
  box-shadow: 
    0 8px 18px rgba(37, 99, 235, 0.18),
    0 2px 4px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 #FFFFFF;
  color: #1D4ED8;
}

/* ---------- Dark Mode Matching Enforcements for Top Bar & Marquee ---------- */

:root[data-theme="dark"] .top-bar,
.theme-dark .top-bar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #0B1120 0%, #070B14 100%);
  box-shadow: 
    0 4px 18px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .top-bar-marquee,
.theme-dark .top-bar-marquee {
  background: linear-gradient(180deg, #0B1120 0%, #070B14 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 4px 18px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .marquee-item,
.theme-dark .marquee-item {
  color: #E2E8F0;
  background: linear-gradient(180deg, #162238 0%, #0F172A 60%, #0B1120 100%);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 2.5px solid #030712;
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"] .marquee-item:hover,
.theme-dark .marquee-item:hover {
  background: linear-gradient(180deg, #1E293B 0%, #172554 60%, #0F172A 100%);
  border-color: rgba(56, 189, 248, 0.55);
  border-top-color: rgba(147, 197, 253, 0.4);
  border-bottom: 3.5px solid #2563EB;
  box-shadow: 
    0 8px 20px rgba(14, 165, 233, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #38BDF8;
}

:root[data-theme="dark"] .top-bar-label,
.theme-dark .top-bar-label,
:root[data-theme="dark"] .top-bar-right,
.theme-dark .top-bar-right {
  color: #E2E8F0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

:root[data-theme="dark"] .top-bar-logo,
.theme-dark .top-bar-logo {
  background: linear-gradient(180deg, #162238 0%, #0F172A 60%, #0B1120 100%);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 2.5px solid #030712;
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #E2E8F0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

}



/* ---- Global comfort: smooth scrolling ---- */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

}



/* ---- Selection styling ---- */

::selection {

  background: color-mix(in srgb, var(--accent) 30%, transparent);

  color: var(--text-bright);

}

.footer-social-icons {

  display: flex; align-items: center; justify-content: flex-start;

  gap: 10px;

}

.footer-social-link {

  display: inline-flex; align-items: center; justify-content: center;

  width: 44px; height: 44px; border-radius: 10px;

  background: var(--bg-elevated); border: 1px solid var(--border);

  text-decoration: none; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;

}

.footer-social-link:hover {

  transform: translateY(-2px);

  border-color: var(--accent);

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);

}

.footer-social-link svg { width: 20px; height: 20px; pointer-events: none; }

.footer-social-link:hover svg { transform: scale(1.1); }



/* Facebook */

.footer-social-link.fb { color: #1877F2; }

.footer-social-link.fb svg path { fill: #1877F2; }

.footer-social-link.fb:hover { background: #1877F2; border-color: #1877F2; }

.footer-social-link.fb:hover svg path { fill: white; }



/* LinkedIn */

.footer-social-link.li { color: #0A66C2; }

.footer-social-link.li svg path { fill: #0A66C2; }

.footer-social-link.li:hover { background: #0A66C2; border-color: #0A66C2; }

.footer-social-link.li:hover svg path { fill: white; }



/* ---------- Left-side social bar ---------- */

/* .social-left-bar styles - Used in terms/privacy pages */
/* Display is controlled via media queries */

.social-btn {

  width: 44px;

  height: 44px;

  display: grid;
  place-items: center;
  text-decoration: none;

  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);

  position: relative;

  overflow: visible;

}

.social-btn:hover {

  transform: translateX(4px) scale(1.05);

}

.social-btn.fb { background: #1877F2; }

.social-btn.fb:hover { background: #0d65d9; box-shadow: 4px 0 20px rgba(24,119,242,0.5), 0 0 40px rgba(24,119,242,0.25); }

.social-btn.li { background: #0A66C2; }

.social-btn.li:hover { background: #084e96; box-shadow: 4px 0 20px rgba(10,102,255,0.5), 0 0 40px rgba(10,102,255,0.25); }

.social-btn.wa { background: #25D366; }

.social-btn.wa:hover { background: #1da851; box-shadow: 4px 0 20px rgba(37,211,102,0.5), 0 0 40px rgba(37,211,102,0.25); }

.social-btn svg { pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }

/* Glow pulse animation */

.social-btn::before {

  content: '';

  position: absolute;

  inset: -3px;

  border-radius: inherit;

  opacity: 0;

  transition: opacity var(--dur);

}

.social-btn.fb::before { box-shadow: 0 0 0 0 rgba(24,119,242,0.5); animation: social-glow-fb 2.5s ease-in-out infinite; }

.social-btn.li::before { box-shadow: 0 0 0 0 rgba(10,102,255,0.5); animation: social-glow-li 2.5s ease-in-out infinite; }

.social-btn.wa::before { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); animation: social-glow-wa 2.5s ease-in-out infinite; }

.social-btn:hover::before { opacity: 0; animation: none; }

@keyframes social-glow-fb { 0%, 100% { box-shadow: 0 0 0 0 rgba(24,119,242,0.4); } 50% { box-shadow: 0 0 0 6px rgba(24,119,242,0); } }

@keyframes social-glow-li { 0%, 100% { box-shadow: 0 0 0 0 rgba(10,102,255,0.4); } 50% { box-shadow: 0 0 0 6px rgba(10,102,255,0); } }

@keyframes social-glow-wa { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.4); } 50% { box-shadow: 0 0 0 6px rgba(37,211,102,0); } }



/* ---------- Floating WhatsApp ---------- */





.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 58px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(37,211,102,0.14), 0 10px 30px rgba(0,0,0,0.28);
  isolation: isolate;
}

.wa-float:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 0 0 8px rgba(37,211,102,0.16), 0 14px 34px rgba(0,0,0,0.32), 0 0 22px rgba(37,211,102,0.48);
}

.wa-float svg {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
}

.wa-pulse {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(37,211,102,0.7);
  border-radius: 50%;
  pointer-events: none;
  animation: wa-ring 2s ease-out infinite;
}

@media (max-width: 600px) {
  .wa-float { right: 16px; bottom: 16px; width: 52px; }
}

@keyframes wa-float-in {

  from { transform: scale(0); opacity: 0; }

  to { transform: scale(1); opacity: 1; }

}

@keyframes wa-ring {

  0% { transform: scale(1); opacity: 1; }

  100% { transform: scale(1.6); opacity: 0; }

}



/* ---------- Floating Home Button ---------- */

.home-float {
  position: fixed;
  right: 24px;
  bottom: 94px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #f8fafc;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 15px rgba(56, 189, 248, 0.15);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease,
              color 0.2s ease;
  isolation: isolate;
}

.home-float.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.home-float:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(56, 189, 248, 0.55);
  color: #38bdf8;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45), 0 0 25px rgba(56, 189, 248, 0.35);
}

.home-float:active {
  transform: translateY(-1px) scale(0.98);
}

.home-float svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s ease, stroke 0.2s ease;
}

.home-float:hover svg {
  transform: translateY(-1px);
}

.theme-light .home-float {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(2, 132, 199, 0.3);
  color: #0f172a;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 15px rgba(2, 132, 199, 0.15);
}

.theme-light .home-float:hover {
  background: #ffffff;
  border-color: rgba(2, 132, 199, 0.65);
  color: #0284c7;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18), 0 0 25px rgba(2, 132, 199, 0.3);
}

@media (max-width: 600px) {
  .home-float {
    right: 16px;
    bottom: 76px;
    padding: 9px 14px 9px 12px;
    font-size: 13px;
  }
}





/* ---------- Buttons (2026: bold, confident) ---------- */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  padding: 12px 22px;

  border-radius: var(--radius-sm);

  font-size: 13px;

  font-weight: 600;

  text-decoration: none;

  cursor: pointer;

  border: none;

  font-family: inherit;

  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);

  white-space: nowrap;

  line-height: 1;

  letter-spacing: -0.01em;

}



.btn-primary {
  background: var(--gradient-accent);
  color: #fff;
  border: 1px solid rgba(34, 211, 238, 0.35);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35), 0 0 16px rgba(6, 182, 212, 0.22);
  position: relative;
  overflow: hidden;
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.28) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #0891B2 55%, #06B6D4 100%);
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.48), 0 0 28px rgba(34, 211, 238, 0.42);
  border-color: rgba(34, 211, 238, 0.65);
  transform: translateY(-2px) scale(1.02);
}

.btn-primary:hover::after { opacity: 1; }

.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  transition: transform 80ms var(--ease-out), box-shadow 80ms var(--ease-out);
}

.btn-primary.btn-glow {
  animation: btn-glow-pulse 2.5s ease-in-out infinite;
}

.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }



/* Theme indicator - removed */




/* Theme control buttons & header CTA */

.theme-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 85%, transparent);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  box-shadow: none;
  backdrop-filter: blur(12px);
  margin: 0;
}

.theme-btn:hover {
  border-color: var(--accent);
  color: var(--text-bright);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 25%, transparent);
}

.theme-btn:active {
  transform: translateY(0) scale(0.96);
}

.theme-btn.active {
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-2));
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent-light);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent);
}

.theme-btn svg {
  transition: transform var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}

html[data-theme="light"] .theme-btn svg { transform: rotate(180deg); }
html[data-theme="light"] .theme-btn.active svg { transform: rotate(0deg); }

.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.header-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
  position: relative;
  border: 1px solid rgba(34, 211, 238, 0.4);
  background: var(--gradient-accent);
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  flex-shrink: 0;
  text-decoration: none;
}

.header-cta-btn:hover {
  border-color: rgba(34, 211, 238, 0.7);
  box-shadow: 0 3px 14px rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}

.header-cta-btn:active {
  transform: translateY(0) scale(0.98);
}

/* FAQ Conversion CTA Bar */
.faq-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 2.5rem;
  padding: 1.25rem 1.75rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-2)) 0%, color-mix(in srgb, var(--card) 92%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.faq-cta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faq-cta-text strong {
  font-size: 15.5px;
  color: var(--text-bright);
}

.faq-cta-text span {
  font-size: 13.5px;
  color: var(--text-secondary);
}

.faq-cta-btn {
  white-space: nowrap;
  padding: 10px 20px;
  font-size: 13.5px;
  border-radius: 8px;
}



@keyframes glow-border {

  0% { box-shadow: 0 0 8px var(--accent), inset 0 0 8px var(--accent); }

  50% { box-shadow: 0 0 18px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 50%, transparent), inset 0 0 12px var(--accent); }

  100% { box-shadow: 0 0 8px var(--accent), inset 0 0 8px var(--accent); }

}









/* Tech stack badges with logos + glow */

/* Tech stack badges with logos + glow */

.tech-stack-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  perspective: 1200px;
  transform-style: preserve-3d;
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) and (min-width: 641px) {
  .tech-stack-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 14px;
  }
}

@media (max-width: 640px) {
  .tech-stack-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
  }
}

.tech-badge-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 116px;
  padding: 20px 14px;
  background: rgba(13, 21, 39, 0.75);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  cursor: default;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  perspective: 800px;
  backface-visibility: hidden;
  will-change: transform, box-shadow, border-color;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease,
              background 0.3s ease;
}

/* Crisp brand glow on card hover */
.tech-badge-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--glow-color, var(--accent)) 25%, transparent), transparent 75%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.tech-badge-logo:hover::before {
  opacity: 1;
}

.tech-badge-logo:hover {
  transform: translateY(-6px) rotateX(4deg) scale(1.03);
  border-color: var(--glow-color, var(--accent)) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.55),
              0 0 28px color-mix(in srgb, var(--glow-color, var(--accent)) 35%, transparent),
              0 0 0 1px color-mix(in srgb, var(--glow-color, var(--accent)) 30%, transparent);
}

.tech-badge-logo img,
.tech-badge-logo svg {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  image-rendering: -webkit-optimize-contrast;
  transition: filter 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
  margin: 0 auto;
}

.tech-badge-logo:hover img,
.tech-badge-logo:hover svg {
  filter: drop-shadow(0 0 14px var(--glow-color, var(--accent)));
  transform: scale(1.12);
}

.tech-label {
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  color: #F8FAFC;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  transition: color 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tech-badge-logo:hover .tech-label {
  color: #FFFFFF;
  transform: translateZ(16px);
}

html.theme-light .tech-badge-logo {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

html.theme-light .tech-label {
  color: #0F172A;
}

html.theme-light .tech-badge-logo:hover .tech-label {
  color: #000000;
}

/* TikTok's official mark is black — invert it on the dark badge so it stays visible */
html.theme-dark .tech-badge-logo[data-brand="tiktok"] img {
  filter: invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
html.theme-dark .tech-badge-logo[data-brand="tiktok"]:hover img {
  filter: invert(1) drop-shadow(0 0 14px var(--glow-color, var(--accent)));
}

@media (prefers-reduced-motion: reduce) {

  .tech-badge-logo,

  .tech-badge-logo img,

  .tech-badge-logo svg { animation: none; transition: none; }

  .tech-badge-logo:hover { transform: none; }

}



/* Brand-specific glow colors */

.tech-badge-logo[data-brand="ga4"] { --glow-color: #F9AB00; }
.tech-badge-logo[data-brand="gtm"] { --glow-color: #246FDB; }
.tech-badge-logo[data-brand="meta"] { --glow-color: #0082FB; }
.tech-badge-logo[data-brand="capi"] { --glow-color: #00C6FF; }
.tech-badge-logo[data-brand="server"] { --glow-color: #10B981; }
.tech-badge-logo[data-brand="google-ads"] { --glow-color: #4285F4; }
.tech-badge-logo[data-brand="tiktok"] { --glow-color: #25F4EE; }
.tech-badge-logo[data-brand="linkedin"] { --glow-color: #0A66C2; }
.tech-badge-logo[data-brand="pinterest"] { --glow-color: #E60023; }
.tech-badge-logo[data-brand="bigquery"] { --glow-color: #38BDF8; }
.tech-badge-logo[data-brand="looker"] { --glow-color: #4285F4; }
.tech-badge-logo[data-brand="shopify"] { --glow-color: #95BF47; }
.tech-badge-logo[data-brand="woocommerce"] { --glow-color: #7F54B3; }
.tech-badge-logo[data-brand="vue"] { --glow-color: #41B883; }
.tech-badge-logo[data-brand="react"] { --glow-color: #61DAFB; }



/* Google Tag Manager container placeholder */



@keyframes btn-glow-pulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35), 0 0 16px rgba(6, 182, 212, 0.25);
  }
  50% {
    box-shadow: 0 6px 24px rgba(37, 99, 235, 0.55), 0 0 32px rgba(34, 211, 238, 0.5), 0 0 0 3px rgba(34, 211, 238, 0.2);
  }
}



@keyframes popup-fade-in {

  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }

  to   { opacity: 1; transform: translateX(-50%) translateY(0); }

}



.btn-ghost {

  background: rgba(255,255,255,0.02);

  color: var(--text);

  border: 1px solid var(--border);

  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);

}



.btn-ghost:hover {

  background: rgba(255,255,255,0.06);

  border-color: var(--accent);

  color: var(--text-bright);

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}

.btn-lg { padding: 13px 24px; font-size: 14px; border-radius: var(--radius); }


.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-ghost));

  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, var(--bg-2)), var(--bg-2) 45%, color-mix(in srgb, var(--green) 6%, var(--bg-2)));

  transition: var(--theme-transition);
}

.site-header::after {

  content: "";

  position: absolute;

  left: -20%;

  bottom: -1px;

  width: 40%;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--accent), var(--green), transparent);

  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);

  animation: top-bar-scan 8s ease-in-out infinite;
}



.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }

.brand-mark {

  width: 36px; height: 36px;

  background: var(--gradient-accent);

  border-radius: var(--radius);

  display: grid; place-items: center;

  color: var(--text-bright); font-weight: 800; font-size: 17px; letter-spacing: -0.5px;

  flex-shrink: 0;

  box-shadow: 0 2px 8px rgba(27,255,255,0.3);

  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);

}

.brand:hover .brand-mark {

  transform: scale(1.08) rotate(-3deg);

  box-shadow: 0 4px 16px rgba(27,255,255,0.4);

}

.brand-text strong {

  display: block;

  font-size: 14px;

  color: var(--text-bright);

  letter-spacing: -0.02em;

  line-height: 1.2;

}

.brand-text small { font-size: 10px; color: var(--muted-light); display: block; letter-spacing: 0.04em; text-transform: uppercase; }



.top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  flex-shrink: 1;
}

.top-nav a {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 9999px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.top-nav a:hover {
  color: #FFFFFF;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 25%, transparent);
  transform: translateY(-1px);
}

:root[data-theme="light"] .top-nav a:hover,
html[data-theme="light"] .top-nav a:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 20%, transparent);
}

.top-nav a:active {
  transform: translateY(0) scale(0.97);
}






/* ---------- HERO (2026: clean, professional) ---------- */

.hero {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(32px, 6vw, 80px);

  align-items: center;

  padding: clamp(16px, 4vw, 40px) 0 clamp(40px, 8vw, 80px);

}



/* ===== MOBILE FIXES ===== */



/* Hero: stack columns on mobile, reduce gap */

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 20px 0 36px;
    text-align: center;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .hero-copy h1 {
    font-size: clamp(26px, 6.5vw, 38px) !important;
    line-height: 1.25 !important;
    margin-bottom: 16px;
    max-width: 100%;
    word-break: break-word;
  }

  .hero-copy h1 br {
    display: none;
  }

  .hero-sub {
    font-size: 15px !important;
    max-width: 100%;
    margin-bottom: 24px;
    line-height: 1.6;
    text-align: center;
  }

  .hero-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 24px;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }

  .hero-trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 16px;
  }

  .trust-badge {
    width: 100%;
    max-width: 340px;
    justify-content: center;
    font-size: 12px;
    padding: 6px 12px;
    box-sizing: border-box;
  }

  .hero-meta-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    justify-content: center;
    width: 100%;
    padding: 0;
  }

  .hero-visual-stage {
    width: 100%;
    max-width: min(460px, 100%);
    margin: 20px auto 0;
    box-sizing: border-box;
    padding: 0 4px;
  }

  .hero-zen-card {
    width: 100%;
    max-width: 100%;
    border-radius: 18px;
    box-sizing: border-box;
  }

  .hero-zen-badge-top {
    font-size: 10px;
    padding: 10px 12px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 6px;
  }

  .zen-badge-text {
    white-space: normal;
    text-align: center;
  }

  .hero-zen-image-wrap {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
  }

  .hero-zen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hero-zen-telemetry-bar {
    padding: 10px 8px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .telemetry-pill {
    font-size: 10px;
    padding: 4px 8px;
  }
}

@media (max-width: 480px) {
  .hero-copy h1 {
    font-size: 26px !important;
  }

  .hero-visual-stage {
    max-width: 100%;
    padding: 0;
  }

  .hero-cta {
    max-width: 100%;
  }

  .trust-badge {
    max-width: 100%;
  }
}



/* ===== TOP BAR MOBILE ===== */



/* Top bar logos: allow horizontal scroll on very small screens */

@media (max-width: 480px) {

  .top-bar-inner {

    flex-wrap: nowrap;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    -ms-overflow-style: none;

    padding-bottom: 4px;

  }

  .top-bar-inner::-webkit-scrollbar { display: none; }

  .top-bar-logos { gap: 6px; flex-shrink: 0; flex-wrap: nowrap; }

  .top-bar-logo {

    font-size: 8px;

    padding: 3px 7px;

    flex-shrink: 0;

  }

  .top-bar-label,

  .top-bar-right {

    font-size: 8px;

    white-space: nowrap;

  }

  .brand-text small { display: none; }

  .header-cta-btn { display: none; }

}



/* Top bar: tighter on very small screens */

@media (max-width: 380px) {

  .top-bar-label { display: none; }

  .top-bar-right { display: none; }

  .top-bar-logos { gap: 4px; }

  .top-bar-logo { font-size: 7px; padding: 2px 5px; }

}







/* ===== HEADER MOBILE ===== */



@media (max-width: 1024px) {
  .site-header .container {
    flex-wrap: wrap;
    padding: 8px 16px;
  }
  .brand-text strong { font-size: 13px; }
  .top-nav {
    gap: 4px;
    order: 3;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 6px 0 2px;
    border-top: 1px solid var(--border-ghost);
    margin-top: 4px;
  }
  .top-nav::-webkit-scrollbar {
    display: none;
  }
  .top-nav a {
    font-size: 12px;
    padding: 6px 12px;
    flex: 0 0 auto;
    flex-shrink: 0;
  }
}



/* ===== HERO TEXT MOBILE ===== */



@media (max-width: 768px) {

  .hero-copy h1 {

    font-size: clamp(28px, 7vw, 44px) !important;

    margin-bottom: 16px;

    max-width: 100%;

  }

  .hero-sub {
    font-size: 15px !important;
    max-width: 100%;
  }
  .hero-badge { margin-bottom: 16px; }
}

/* ===== SECTION HEADINGS MOBILE ===== */
@media (max-width: 480px) {
  .section-header h2 {
    font-size: clamp(22px, 5vw, 26px) !important;
  }
  .section-header {
    margin-bottom: 24px;
    max-width: 100%;
  }
  .section-header p {
    font-size: 14px !important;
    max-width: 100%;
  }
}



/* ===== COMPARISON TABLE MOBILE ===== */



@media (max-width: 480px) {

  .comparison-table {

    font-size: 12px;

  }

  .comparison-table th,

  .comparison-table td {

    padding: 8px 6px;

  }

  .comparison-table-wrap {

    margin: 0 -4px;

    border-radius: 0;

  }

}



/* ===== PROCESS GRID MOBILE ===== */



@media (max-width: 1024px) and (min-width: 641px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .process-step {
    padding: 22px 18px !important;
  }
  .process-num {
    font-size: 26px !important;
  }
}



/* ===== SOLUTION CARDS MOBILE ===== */



@media (max-width: 480px) {

  .solution {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 300px;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);}
.solution::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.solution:hover::before { opacity: 1; }
.solution:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35), 0 0 25px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 0 1px rgba(37,99,235,0.1);
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

  .solution h3 {

    font-size: 16px;
  transform: translateZ(20px);}

}



/* ===== WHO CARDS MOBILE ===== */



@media (max-width: 480px) {

  .who-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease, border-color 0.35s ease;
  transform-style: preserve-3d;
  perspective: 300px;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);}
.who-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.30), 0 0 20px color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}

  .who-card h3 {

    font-size: 16px;
  transform: translateZ(20px);}

}



/* ===== PRICING CARDS MOBILE ===== */



@media (max-width: 480px) {
}



/* ===== LOGO WALL MOBILE ===== */



@media (max-width: 480px) {

  .logo-wall {

    gap: 8px 12px;

    flex-wrap: wrap;

    justify-content: flex-start;

  }

  .logo-wall-item {

    font-size: 10px;

    padding: 4px 8px;

  }

}



/* ===== FOOTER MOBILE ===== */



@media (max-width: 480px) {

  .site-footer {

    padding: 30px 0 20px;

  }

  .footer-grid {

    gap: 24px;
  perspective: 600px;
  transform-style: preserve-3d;

  }

  .footer-col h4 {

    font-size: 13px;

    margin-bottom: 10px;

  }

  .footer-col ul {

    gap: 6px;

  }

  .footer-col li a {

    font-size: 12px;

    padding: 5px 8px;

  }

}



/* ===== STATS BAR MOBILE ===== */



@media (max-width: 480px) {

  .stat-bar {

    gap: 1px;

    margin: 24px 0;

  }

  .stat-item {

    padding: 16px 12px;
  transform-style: preserve-3d;
  perspective: 300px;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);}

  .stat-number {

    font-size: 24px;
  transform: translateZ(35px);}

  .stat-label {

    font-size: 10px;
  transform: translateZ(15px);}

}



/* ===== CREDENTIALS MOBILE ===== */



@media (max-width: 480px) {

  .credentials-grid {

    gap: 8px;

  }

  .credential-card {

    padding: 12px !important;
  transform-style: preserve-3d;
  perspective: 300px;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);}

  .credential-number {

    font-size: 24px !important;

  }

  .credential-label {

    font-size: 10px !important;

    line-height: 1.3 !important;

  }

}



/* ===== TECH STACK MOBILE ===== */



@media (max-width: 480px) {

  .tech-stack-grid {

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

  }

  .tech-badge-logo {

    min-height: 80px;

    padding: 10px 6px;

  }

  .tech-badge-logo img,

  .tech-badge-logo svg {

    width: 26px;

    height: 26px;

  }

  .tech-label {

    font-size: 9px;

  }

}



/* ===== CASE STUDIES MOBILE ===== */



@media (max-width: 380px) {

  .cs-card-inner {

    padding: 16px;

    gap: 16px;

  }

  .cs-headline {

    font-size: 17px;

  }

  .cs-problem {

    font-size: 13px;

  }

  .cs-solution-text {

    font-size: 12px;

  }

  .cs-number {

    font-size: 40px;

  }

  .cs-results-box {

    padding: 16px;

  }

  .cs-metric-val {

    font-size: 20px;

  }

}



/* ===== APPROACH SECTION MOBILE ===== */



@media (max-width: 480px) {

  .approach-card {

    padding: 24px 16px;

  }

  .approach-header {

    margin-bottom: 24px;

  }

  .approach-header h2 {

    font-size: clamp(20px, 4.5vw, 26px) !important;

  }

}



/* ===== PROBLEM SECTION MOBILE ===== */



@media (max-width: 480px) {


    grid-template-columns: 1fr;

    gap: 24px;

  }

  .problem-card {

    padding: 20px;
  transform-style: preserve-3d;
  perspective: 300px;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);}

  .problem-copy h2 {

    font-size: clamp(22px, 5vw, 28px) !important;

  }

  .problem-copy p {

    font-size: 14px !important;

  }





/* ===== SIX PILLARS MOBILE ===== */



@media (max-width: 480px) {


    gap: 12px;

  }


    padding: 16px;



  .six-pillar h3 {

    font-size: 15px;

  }

  .six-pillar p {

    font-size: 12px;

  }





/* ===== FOOTER CTA MOBILE ===== */



@media (max-width: 480px) {

  .footer-cta-section {

    padding: 40px 0;

  }

  .footer-cta-copy h2 {

    font-size: clamp(22px, 5vw, 28px) !important;

  }

  .footer-cta-copy p,
  .footer-cta-lead {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  .footer-cta-card-top span:first-child {

    font-size: 11px;

  }

}



/* ===== GENERAL MOBILE ===== */



@media (max-width: 480px) {

  .section {

    padding: 36px 0;

  }

  .section:first-of-type {

    padding-top: 30px;

  }

  .eyebrow {

    font-size: 9px;

    margin-bottom: 10px;

  }

  h3 {

    font-size: 16px !important;

  }

  .btn-lg {

    padding: 11px 18px;

    font-size: 13px;

  }

  .btn {

    padding: 9px 16px;

    font-size: 12px;

  }



  .faq-item {

    padding: 12px 0;
  transform-style: preserve-3d;
  perspective: 300px;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);}

  .faq-question {

    font-size: 14px;

  }

  .faq-answer {

    font-size: 13px;

  }

}



/* Hero copy */

.hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 6px 14px 6px 7px;

  background: var(--accent-subtle);

  border: 1px solid rgba(27,255,255,0.2);

  border-radius: var(--radius-full);

  font-size: 11px;

  color: var(--accent);

  font-weight: 600;

  margin-bottom: 24px;

  box-shadow: 0 0 0 1px rgba(46,49,146,0.05);

}

.hero-badge .badge-dot {

  width: 8px; height: 8px;

  border-radius: 50%;

  background: var(--accent);

  box-shadow: 0 0 12px var(--accent), 0 0 28px color-mix(in srgb, var(--accent) 50%, transparent);

  animation: pulse-dot 2s ease-in-out infinite;

}

@keyframes pulse-dot {

  0%, 100% { box-shadow: 0 0 6px rgba(27,255,255,0.4); transform: scale(1); }

  50% { box-shadow: 0 0 16px rgba(27,255,255,0.7); transform: scale(1.1); }

}



.hero-copy h1 {

  margin-bottom: 24px;

  max-width: 560px;

  text-wrap: balance;

}

.hero-sub {

  font-size: 18px;

  color: var(--text-secondary);

  max-width: 480px;

  line-height: 1.6;

  margin-bottom: 32px;

  font-weight: 400;

}

.hero-cta {

  display: flex;

  gap: 14px;

  flex-wrap: wrap;

  margin-bottom: 36px;

}

.hero-trust {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 24px;

}

.trust-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 12px;

  font-weight: 600;

  color: var(--text-secondary);

  padding: 6px 12px;

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: var(--radius-full);

  white-space: nowrap;

}

.trust-check {

  color: var(--green);

  font-weight: 700;

}



.hero-meta-list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-wrap: wrap;

  gap: 6px 20px;

}

.hero-meta-list li {

  display: flex;

  align-items: center;

  gap: 7px;

  font-size: 12.5px;

  color: var(--muted-light);

  font-family: var(--font-mono);

}

.hero-meta-list li::before {

  content: '▪';

  color: var(--accent);

  font-size: 8px;

}



/* Team Section */

.team-card {

  display: grid;

  grid-template-columns: 280px 1fr;

  gap: 32px;

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 32px;

  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
  transform-style: preserve-3d;
  perspective: 300px;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);}

.team-card:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow);

}



/* ===== TEAM CARD RESPONSIVE ===== */



@media (max-width: 768px) {

  .team-card {

    grid-template-columns: 1fr;

    padding: 20px;

    gap: 16px;

  }

  .team-photo-img {

    width: 100%;

    max-width: 200px;

    height: auto;

    margin: 0 auto;

  }

  .team-info h3 { font-size: 18px; }

  .team-role {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  transform: translateZ(10px);}

  .team-bio { font-size: 14px; }

  .team-credentials .credential { font-size: 11px; padding: 4px 10px; }

}



@media (max-width: 480px) {

  .team-card {

    padding: 16px;

    gap: 12px;

  }

  .team-photo-img { max-width: 140px; }

  .team-info h3 { font-size: 16px; }

  .team-role { font-size: 12px; }

  .team-bio { font-size: 13px; }

}



.team-photo-img {

  width: 280px;

  height: 280px;

  border-radius: var(--radius-lg);

  object-fit: cover;

  display: block;

}

.team-info h3 {

  font-size: 24px;

  font-weight: 700;

  color: var(--text-bright);

  margin-bottom: 4px;

}

.team-role {

  font-size: 14px;

  font-weight: 600;

  color: var(--accent);

  margin-bottom: 16px;

}

.team-bio {

  font-size: 14px;

  color: var(--text-secondary);

  line-height: 1.7;

  margin-bottom: 20px;

}

.team-credentials {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}

.team-credentials .credential {

  font-size: 11px;

  font-weight: 600;

  color: var(--text-secondary);

  padding: 4px 10px;

  background: var(--bg-elevated);

  border: 1px solid var(--border);

  border-radius: var(--radius-full);

}



/* Case Studies Slider */

.case-studies-slider {

  position: relative;

  width: 100%;

  padding: 20px 0 40px;

}

.case-studies-viewport {

  overflow: hidden;

  width: 100%;

  border-radius: var(--radius-lg);

}

.case-studies-track {

  display: flex;

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  will-change: transform;

}

.case-study-card {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 0;

  overflow: hidden;

  transition: border-color 0.3s ease, box-shadow 0.3s ease;

  min-width: 100%;

  max-width: 100%;

  flex: 0 0 100%;

}





/* Premium Case Study Card Interior */

.cs-card-inner {

  padding: 36px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 36px;

  min-height: 360px;

}

.cs-card-left,

.cs-card-right {

  display: flex;

  flex-direction: column;

  gap: 18px;

}

.cs-top-bar {

  display: flex;

  align-items: center;

  gap: 14px;

  padding-bottom: 20px;

  border-bottom: 1px solid var(--border-ghost);

}

.cs-industry-badge {

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--accent);

  padding: 6px 14px;

  background: var(--accent-subtle);

  border-radius: var(--radius-full);

}

.cs-platforms {

  font-size: 12px;

  color: var(--muted);

  font-weight: 500;

}

.cs-number {
  font-size: 72px;
  font-weight: 800;
  color: rgba(34, 211, 238, 0.32);
  text-shadow: 0 0 24px rgba(6, 182, 212, 0.22);
  line-height: 0.85;
  letter-spacing: -3px;
  user-select: none;
}

.cs-headline {
  font-size: 24px;
  font-weight: 700;
  color: #F8FAFC !important;
  line-height: 1.25;
  letter-spacing: -0.4px;
}

.cs-problem {
  font-size: 15px;
  color: #CBD5E1 !important;
  line-height: 1.65;
}

.cs-fixed-solution-label {
  display: none !important;
}

.cs-solution-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #22D3EE !important;
  margin-bottom: 6px;
  display: inline-block;
}

.cs-solution-text {
  font-size: 14.5px;
  color: #CBD5E1 !important;
  line-height: 1.65;
  margin-bottom: 18px;
}

.cs-tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.cs-tech-pill {
  font-size: 11.5px;
  font-weight: 600;
  color: #E2E8F0 !important;
  padding: 5px 12px;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--radius-full);
}

.cs-results-box {
  background: rgba(10, 16, 30, 0.88);
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cs-results-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94A3B8 !important;
  margin-bottom: 18px;
}

.cs-metric-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}

.cs-metric-row:last-child {
  margin-bottom: 0;
}

.cs-metric {
  flex: 1;
  text-align: center;
  padding: 14px 10px;
  background: rgba(15, 23, 42, 0.85);
  border-radius: var(--radius);
  border: 1px solid rgba(34, 211, 238, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cs-metric-val {
  font-size: 26px;
  font-weight: 800;
  color: #34D399 !important;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.35);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.cs-metric-desc {
  font-size: 11px;
  color: #E2E8F0 !important;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.cs-impact-text {
  font-size: 14.5px;
  color: #E2E8F0 !important;
  line-height: 1.65;
  font-style: italic;
  padding-top: 4px;
}



/* Slider Navigation */

.case-studies-nav {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 24px;

  margin-top: 28px;

}

.case-study-arrow {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  border: 1px solid var(--border);

  background: var(--card);

  color: var(--text);

  font-size: 20px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.2s ease, background 0.2s ease;

}

.case-study-arrow:hover {

  background: var(--accent);

  color: #fff;

  border-color: var(--accent);

}

.case-study-arrow:disabled {

  opacity: 0.3;

  cursor: not-allowed;

}

.case-study-dots {

  display: flex;

  gap: 8px;

}

.case-study-dots .dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--border);

  cursor: pointer;

  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;

  border: none;

  padding: 0;

}

.case-study-dots .dot.active {

  background: var(--accent);

  width: 28px;

  border-radius: 4px;

}

.case-study-counter {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
  min-width: 48px;
  text-align: center;
}



/* Responsive */

@media (max-width: 768px) {

  .cs-card-inner {

    grid-template-columns: 1fr;

    padding: 24px;

    gap: 24px;

  }

  .cs-number {

    font-size: 56px;

  }

  .cs-headline {

    font-size: 20px;

  }

  .case-studies-nav {

    gap: 16px;

  }

  .case-study-arrow {

    width: 36px;

    height: 36px;

    font-size: 16px;

  }

}



/* 2026 Case Studies polish: evidence-first depth, restrained glow, clear hierarchy */

#case-study {
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 34%),
    radial-gradient(circle at 88% 72%, color-mix(in srgb, var(--green) 9%, transparent), transparent 30%),
    var(--bg);
}

#case-study::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, color-mix(in srgb, var(--accent) 4%, transparent) 48%, transparent 100%);
}

#case-study .section-header {
  position: relative;
  z-index: 5;
  margin-bottom: 32px;
  max-width: 800px;
  transform: none !important;
}

#case-study .section-header .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  font-family: var(--font-mono) !important;
  color: #22D3EE !important;
  background: rgba(34, 211, 238, 0.12) !important;
  border: 1px solid rgba(34, 211, 238, 0.45) !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  margin-bottom: 14px !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#case-study .section-header h2 {
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.035em !important;
  color: #FFFFFF !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7), 0 0 35px rgba(6, 182, 212, 0.18) !important;
  margin-bottom: 16px !important;
  max-width: 780px !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.case-studies-slider {

  filter: drop-shadow(0 20px 50px color-mix(in srgb, var(--accent) 10%, transparent));

}

.case-study-card {

  position: relative;

  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, white), var(--card));

  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 7%, transparent), 0 18px 60px rgba(0,0,0,.18);

}

.case-study-card::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 32%, transparent 70%, color-mix(in srgb, var(--green) 8%, transparent));

  opacity: .55;

}


.cs-card-inner { position: relative; z-index: 1; }

.cs-industry-badge, .cs-tech-pill {

  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;

}

.cs-industry-badge { box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent); }

.cs-tech-pill:hover {

  color: var(--text-bright);

  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));

  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));

  transform: translateY(-1px);

}

.cs-results-box {

  background: linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 94%, var(--accent)), var(--bg-elevated));

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 34px rgba(0,0,0,.12);

}

.cs-metric {

  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;

}

.cs-metric:hover {

  transform: translateY(-2px);

  border-color: color-mix(in srgb, var(--green) 48%, var(--border));

  box-shadow: 0 0 26px color-mix(in srgb, var(--green) 12%, transparent);

}

.cs-metric-val { text-shadow: 0 0 20px color-mix(in srgb, var(--green) 24%, transparent); }

.case-study-arrow { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent), 0 8px 24px rgba(0,0,0,.14); }

.case-study-arrow:hover { box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 32%, transparent); }

.case-study-dots .dot.active { box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); }

@media (max-width: 768px) {

  .cs-fixed-solution-label { left: 24px; top: 190px; }

}

@media (prefers-reduced-motion: reduce) {

  .case-study-card, .cs-metric, .cs-tech-pill { transition: none; }

  .case-study-card:hover, .cs-metric:hover, .cs-tech-pill:hover { transform: none; }

}



/* Comparison Table */

.comparison-table-wrap {

  overflow-x: auto;

  border-radius: var(--radius-lg);

  border: 1px solid var(--border);

  background: var(--card);

}

.comparison-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 14px;

}

.comparison-table th,

.comparison-table td {

  padding: 14px 18px;

  text-align: left;

  border-bottom: 1px solid var(--border);

}

.comparison-table th {

  background: var(--bg-elevated);

  color: var(--text-bright);

  font-weight: 600;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 0.03em;

}

.comparison-table td.highlight {

  color: var(--green);

  font-weight: 600;

}

.comparison-table tr:last-child td {

  border-bottom: none;

}

.comparison-table tr:hover td {

  background: var(--card-hover);

}



/* Process Section */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  perspective: 1200px;
  transform-style: preserve-3d;
  position: relative;
}

.process-step {
  position: relative;
  background: rgba(13, 21, 39, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
  will-change: transform, box-shadow, border-color;
  contain: layout style;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease,
              background 0.3s ease;
}

/* Ensure no overlay blocks text content */
.process-step > * {
  position: relative;
  z-index: 2;
}

/* Glowing top accent border */
.process-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563EB, #06B6D4);
  opacity: 0.75;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: opacity 0.35s ease, box-shadow 0.35s ease;
  z-index: 2;
  pointer-events: none;
}

/* Soft ambient cyan depth glow inside card on hover */
.process-step::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.12), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.process-step:hover {
  transform: translateY(-8px) rotateX(4deg) scale(1.02);
  border-color: rgba(34, 211, 238, 0.5) !important;
  box-shadow: 0 24px 48px -10px rgba(0, 0, 0, 0.52),
              0 0 32px rgba(6, 182, 212, 0.28),
              0 0 0 1px rgba(34, 211, 238, 0.35);
}

.process-step:hover::before {
  opacity: 1;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.65);
}

.process-step:hover::after {
  opacity: 1;
}

.process-num {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, #38BDF8 0%, #06B6D4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(24px);
}

.process-step:hover .process-num {
  transform: translateZ(36px);
}

.process-day {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(18px);
}

.process-step:hover .process-day {
  transform: translateZ(28px);
}

.process-step h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 10px;
  line-height: 1.35;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(20px);
}

.process-step:hover h3 {
  transform: translateZ(30px);
}

.process-step p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(12px);
}

.process-step:hover p {
  transform: translateZ(18px);
}



/* Hero visual — uses hero-left.webp image with glowing border */

.hero-visual {

  position: relative;

  border-radius: var(--radius-2xl);

  background: var(--bg-2) url('/images/hero-left.webp') center/cover no-repeat;

  border: 2px solid transparent;

  overflow: hidden;

  aspect-ratio: 4/3;

  min-height: 340px;

  box-shadow: var(--shadow-lg), 0 0 20px var(--accent-glow);

  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);

}

.hero-visual:hover {

  border-color: var(--accent);

  box-shadow: var(--shadow-lg), 0 0 30px var(--accent-glow), 0 0 60px rgba(46,49,146,0.15);

}



/* Subtle overlay gradient on hero visual */

.hero-visual::before {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, rgba(46,49,146,0.12) 0%, rgba(0,0,0,0.3) 100%);

  animation: mesh-shift 10s ease-in-out infinite alternate;

}



@keyframes mesh-shift {

  0% { transform: scale(1) translate(0, 0); }

  50% { transform: scale(1.04) translate(-3%, 2%); }

  100% { transform: scale(1.02) translate(2%, -2%); }

}



/* Grid lines overlay */

.hero-visual::after {

  content: '';

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);

  background-size: 40px 40px;

  pointer-events: none;

}



/* Lightweight measurement visualization — communicates the business flow */

.hero-signal-panel {

  position: absolute;

  inset: 12%;

  z-index: 2;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: clamp(18px, 3vw, 28px);

  border: 1px solid rgba(255,255,255,.18);

  border-radius: var(--radius-lg);

  background: linear-gradient(145deg, rgba(8,20,34,.82), rgba(8,20,34,.5));

  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 48px rgba(0,0,0,.28), 0 0 42px color-mix(in srgb, var(--accent) 18%, transparent);

  backdrop-filter: blur(14px) saturate(125%);

}

.hero-signal-top, .hero-signal-footer { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.72); font: 600 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

.hero-signal-code { margin-left: auto; color: var(--accent); font-size: 9px; }

.hero-signal-live { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(52,211,153,.12), 0 0 14px var(--green); animation: pulse-dot 2s ease-in-out infinite; }

.hero-signal-flow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 22px 0; }

.hero-signal-node { display: grid; justify-items: center; gap: 8px; min-width: 74px; color: rgba(255,255,255,.84); font: 600 10px/1.2 var(--font-mono); text-align: center; }

.hero-signal-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; color: var(--accent); background: rgba(27,255,255,.1); box-shadow: 0 0 22px rgba(27,255,255,.14); font-size: 18px; }

.hero-signal-node-accent .hero-signal-icon { color: var(--green); background: rgba(52,211,153,.1); box-shadow: 0 0 22px rgba(52,211,153,.18); }

.hero-signal-arrow { color: var(--accent); font-size: 18px; opacity: .75; animation: signal-arrow-pulse 2.4s ease-in-out infinite; }

.hero-signal-arrow:nth-of-type(2) { animation-delay: .7s; }

.hero-signal-footer { text-transform: none; letter-spacing: .02em; color: rgba(255,255,255,.56); }

.hero-signal-footer strong { color: var(--green); font-weight: 700; white-space: nowrap; }

.hero-signal-line { height: 1px; flex: 1; background: linear-gradient(90deg, var(--accent), var(--green)); opacity: .7; }

@keyframes signal-arrow-pulse { 0%, 100% { opacity: .45; transform: translateX(0); } 50% { opacity: 1; transform: translateX(3px); } }

@media (max-width: 600px) {

  .hero-signal-panel { inset: 8%; }

  .hero-signal-flow { gap: 3px; }

  .hero-signal-node { min-width: 58px; font-size: 9px; }

  .hero-signal-icon { width: 38px; height: 38px; border-radius: 11px; }

  .hero-signal-arrow { font-size: 14px; }

}

@media (prefers-reduced-motion: reduce) {

  .hero-signal-live, .hero-signal-arrow { animation: none; }

}

/* ---------- 2026 HERO VISUAL STAGE (Zen Meditating Tracking Infrastructure) ---------- */
.hero-visual-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  perspective: 1200px;
}

.hero-stage-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 90%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.24) 0%, rgba(16, 185, 129, 0.08) 45%, transparent 70%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
  animation: halo-breathe 6s ease-in-out infinite alternate;
}

@keyframes halo-breathe {
  0% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.95; }
}

.hero-zen-card {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 24px;
  background: #0B1120;
  box-shadow: 
    0 24px 60px -12px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 50px rgba(52, 211, 153, 0.2);
  overflow: hidden;
  backdrop-filter: blur(16px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

/* Kinetic Running Border Beam */
.hero-zen-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    transparent 0deg,
    transparent 260deg,
    rgba(16, 185, 129, 0.2) 290deg,
    rgba(52, 211, 153, 0.95) 345deg,
    #FFFFFF 358deg,
    transparent 360deg
  );
  animation: border-beam-spin 5s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.hero-zen-card::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 22.5px;
  background: linear-gradient(165deg, rgba(17, 24, 39, 0.96) 0%, rgba(10, 15, 29, 0.98) 100%);
  pointer-events: none;
  z-index: 0;
}

@keyframes border-beam-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-zen-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 32px 70px -12px rgba(0, 0, 0, 0.75),
    0 0 65px rgba(52, 211, 153, 0.35);
}

.hero-zen-badge-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #E2E8F0;
}

.zen-live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 10px #34D399;
  animation: pulse-dot 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

.zen-badge-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zen-badge-tag {
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #34D399;
  font-weight: 800;
}

/* Image Wrap + HUD & Laser Scanner */
.hero-zen-image-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
}

.hero-zen-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-zen-card:hover .hero-zen-img {
  transform: scale(1.02);
}

/* HUD Reticle Corners */
.hud-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 3;
  border: 2px solid rgba(52, 211, 153, 0.75);
}

.hud-top-left {
  top: 14px;
  left: 14px;
  border-right: none;
  border-bottom: none;
}

.hud-top-right {
  top: 14px;
  right: 14px;
  border-left: none;
  border-bottom: none;
}

.hud-bottom-left {
  bottom: 14px;
  left: 14px;
  border-right: none;
  border-top: none;
}

.hud-bottom-right {
  bottom: 14px;
  right: 14px;
  border-left: none;
  border-top: none;
}

.hud-status-chip {
  position: absolute;
  top: 14px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(10, 15, 29, 0.82);
  border: 1px solid rgba(52, 211, 153, 0.35);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #34D399;
  backdrop-filter: blur(8px);
  z-index: 3;
  pointer-events: none;
}

.hud-pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 6px #34D399;
  animation: pulse-dot 1.2s infinite;
}

/* Running Laser Scanline Sweep */
.hero-laser-scan {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.hero-laser-scan .laser-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(52, 211, 153, 0.3) 15%, rgba(110, 231, 183, 1) 50%, rgba(52, 211, 153, 0.3) 85%, transparent 100%);
  box-shadow: 0 0 10px #34D399, 0 0 20px rgba(52, 211, 153, 0.6);
  animation: laser-sweep 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.hero-laser-scan .laser-glow {
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.16) 0%, transparent 100%);
  animation: laser-glow-sweep 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes laser-sweep {
  0% { top: -4px; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes laser-glow-sweep {
  0% { top: -40px; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: calc(100% - 38px); opacity: 0; }
}

/* Live Telemetry Running Marquee Ticker */
.hero-live-ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: rgba(6, 10, 20, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 0;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  animation: ticker-slide 28s linear infinite;
  will-change: transform;
}

.hero-live-ticker:hover .ticker-track,
.hero-live-ticker:focus-within .ticker-track,
.ticker-track:hover {
  animation-play-state: paused !important;
}

@keyframes ticker-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
}

.t-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 6px #34D399;
  display: inline-block;
  flex-shrink: 0;
}

.ticker-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 10px;
}

/* Bottom Telemetry Bar */
.hero-zen-telemetry-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(10, 15, 29, 0.96);
  flex-wrap: wrap;
}

.telemetry-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #CBD5E1;
}

.telemetry-dot.dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 6px #34D399;
}

.telemetry-pill.accent-pill {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.3);
  color: #34D399;
  font-weight: 700;
}

/* Floating Trust Accent Chips */
.hero-float-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 24px rgba(52, 211, 153, 0.15);
  backdrop-filter: blur(14px);
  pointer-events: none;
  animation: float-chip 5s ease-in-out infinite alternate;
}

.hero-float-chip.chip-left {
  left: -24px;
  top: 16%;
  animation-delay: 0s;
}

.hero-float-chip.chip-right {
  right: -24px;
  bottom: 10%;
  animation-delay: -2.5s;
}

@keyframes float-chip {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

/* Dynamic Equalizer Bars */
.chip-eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  padding: 2px 2px;
}

.chip-eq-bars .bar {
  width: 3.5px;
  border-radius: 2px;
  background: #34D399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
  animation: eq-bounce 1.3s ease-in-out infinite alternate;
}

.chip-eq-bars .bar-1 { height: 35%; animation-delay: 0.1s; }
.chip-eq-bars .bar-2 { height: 85%; animation-delay: 0.4s; }
.chip-eq-bars .bar-3 { height: 55%; animation-delay: 0.2s; }
.chip-eq-bars .bar-4 { height: 95%; animation-delay: 0.5s; }

@keyframes eq-bounce {
  0% { height: 25%; }
  50% { height: 90%; }
  100% { height: 40%; }
}

/* Radar Shield Ping */
.chip-shield-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.radar-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid rgba(52, 211, 153, 0.7);
  pointer-events: none;
  animation: radar-expand 2.6s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.radar-ring.ring-2 {
  animation-delay: 1.3s;
}

@keyframes radar-expand {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.chip-icon {
  font-size: 20px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.hero-float-chip div {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.hero-float-chip strong {
  font-size: 13px;
  font-weight: 700;
  color: #F8FAFC;
}

.hero-float-chip span {
  font-size: 11px;
  color: #94A3B8;
  font-family: var(--font-mono);
}

@media (max-width: 1024px) {
  .hero-float-chip.chip-left { left: -8px; }
  .hero-float-chip.chip-right { right: -8px; }
}

@media (max-width: 768px) {
  .hero-visual-stage {
    max-width: 440px;
    margin: 24px auto 0;
  }
  .hero-float-chip {
    display: none;
  }
  .hero-zen-telemetry-bar {
    justify-content: center;
    gap: 6px;
  }
  .telemetry-pill {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* ---------- 2026 PROBLEM SYMPTOM GRID ---------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.problem-card {
  position: relative;
  background: linear-gradient(150deg, rgba(17, 24, 39, 0.88) 0%, rgba(10, 15, 29, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.problem-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(239, 68, 68, 0.14);
}

.problem-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.problem-icon {
  font-size: 28px;
  line-height: 1;
}

.problem-stat-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #F87171;
}

.problem-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: #F8FAFC;
  margin-bottom: 10px;
}

.problem-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: #94A3B8;
  margin-bottom: 20px;
  flex: 1;
}

.problem-impact-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid #F59E0B;
  border-radius: 10px;
  padding: 12px 14px;
}

.problem-impact-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FBBF24;
  margin-bottom: 4px;
}

.problem-impact {
  font-size: 13.5px;
  line-height: 1.45;
  color: #E2E8F0;
  margin: 0;
}

@media (max-width: 768px) {
  .problem-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}



/* Metrics panel — glass, floating */

/* Metrics panel - removed */




/* Data display - removed */

.data-display,

.data-row,

.data-bar,




/* ---------- STATS BAR (glowing border) ---------- */

.stat-bar {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1px;

  background: var(--border-ghost);

  border: 2px solid transparent;

  border-radius: var(--radius-lg);

  overflow: hidden;

  margin: 48px 0;

  position: relative;

  box-shadow: 0 0 15px var(--accent-glow);

  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);

}

.stat-bar:hover {

  border-color: var(--accent);

  box-shadow: 0 0 25px var(--accent-glow), 0 0 50px rgba(46,49,146,0.12);

}

.stat-item {

  background: var(--bg-2);

  padding: 26px 20px;

  text-align: center;

  transition: background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-soft-spring);

  position: relative;

}

.stat-item::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 2px;

  background: linear-gradient(90deg, var(--accent), var(--accent-2));

  opacity: 0;

  transition: opacity var(--dur);

}

.stat-item:hover {

  background: var(--bg-3);

  transform: translateY(-2px);

}

.stat-item:hover::before { opacity: 1; }

.stat-number {

  font-size: 32px;

  font-weight: 700;

  color: var(--text-bright);

  font-family: var(--font-mono);

  letter-spacing: -0.03em;

  margin-bottom: 6px;

  line-height: 1;

}

.stat-number .accent { color: var(--accent); }

.stat-label {

  font-size: 12px;

  color: var(--muted-light);

  line-height: 1.4;

  font-family: var(--font-mono);

}



/* ---------- PROBLEM SECTION (2026: editorial, bold) ---------- */


  padding: 90px 0;

  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);

  border-top: 1px solid var(--border-ghost);

  position: relative;

  overflow: hidden;




  content: '';

  position: absolute;

  top: -100px; right: -200px;

  width: 500px; height: 500px;

  background: radial-gradient(circle, rgba(79,131,247,0.04) 0%, transparent 65%);

  pointer-events: none;






  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: start;



.problem-copy h2 {

  font-size: clamp(28px, 3vw, 40px);

  margin-bottom: 20px;

  line-height: 1.1;

}

.problem-copy p {

  font-size: 15.5px;

  color: var(--text-secondary);

  line-height: 1.7;

  margin-bottom: 16px;

}

.problem-copy .highlight {

  color: var(--text-bright);

  font-weight: 500;

}



.problem-card {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: var(--radius-xl);

  padding: 32px;

  position: relative;

  overflow: hidden;

}

.problem-card::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--cyan));

}

.problem-card .eyebrow { margin-bottom: 16px; }

.problem-card p {

  color: var(--text-secondary);

  font-size: 14px;

  line-height: 1.65;

  margin-bottom: 20px;
  transform: translateZ(10px);}

.problem-card .cta-row {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 8px;

}



/* ---------- APPROACH (2026: bold numbered, visual) ---------- */

.approach-section {

  padding: 90px 0;

  position: relative;

}

.approach-card {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: var(--radius-xl);

  padding: 52px 44px;

  position: relative;

  overflow: hidden;

}

.approach-card::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--cyan), var(--purple));

}

.approach-header {

  margin-bottom: 48px;

  max-width: 720px;

}

.approach-header .eyebrow { margin-bottom: 14px; display: block; }

.approach-header h2 { margin-bottom: 16px; font-size: clamp(24px, 3vw, 34px); }

.approach-header p { color: var(--text-secondary); font-size: 15px; max-width: 560px; }



.approach-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  perspective: 1200px;
  transform-style: preserve-3d;
  position: relative;
}

@media (max-width: 1024px) and (min-width: 641px) {
  .approach-steps {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .approach-steps {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .approach-step {
    padding: 22px 18px !important;
  }
}

.approach-step {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgba(13, 21, 39, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
  will-change: transform, box-shadow, border-color;
  contain: layout style;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease,
              background 0.3s ease;
}

/* Ensure no overlay blocks text content */
.approach-step > * {
  position: relative;
  z-index: 2;
}

/* Modern top accent glow strip */
.approach-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563EB, #06B6D4);
  opacity: 0.75;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: opacity 0.35s ease, box-shadow 0.35s ease;
  z-index: 2;
  pointer-events: none;
}

/* Soft ambient cyan depth glow inside card on hover */
.approach-step::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.12), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.approach-step:hover {
  transform: translateY(-8px) rotateX(4deg) scale(1.02);
  border-color: rgba(34, 211, 238, 0.5) !important;
  box-shadow: 0 24px 48px -10px rgba(0, 0, 0, 0.52),
              0 0 32px rgba(6, 182, 212, 0.28),
              0 0 0 1px rgba(34, 211, 238, 0.35);
}

.approach-step:hover::before {
  opacity: 1;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.65);
}

.approach-step:hover::after {
  opacity: 1;
}

.approach-step-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(24px);
}

.approach-step:hover .approach-step-num {
  transform: translateZ(36px);
}

.approach-step-num::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #06B6D4;
  box-shadow: 0 0 8px #06B6D4;
}

.approach-step h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 12px;
  line-height: 1.35;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(20px);
}

.approach-step:hover h3 {
  transform: translateZ(30px);
}

.approach-step p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(12px);
}

.approach-step p:last-child {
  margin-bottom: 0;
}

.approach-step p:first-of-type {
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
}

.approach-step:hover p {
  transform: translateZ(18px);
}



/* ---------- SOLUTIONS (2026: visual cards, not just lists) ---------- */

#solutions {
  padding: 90px 0;

  background: var(--bg-2);

  border-top: 1px solid var(--border-ghost);

  position: relative;
}


#solutions::after {
  content: '';

  position: absolute;

  bottom: 0; left: 10%; right: 10%;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--border), transparent);
}





.solutions-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 16px;

}

.solution {

  background: var(--card);

  border: 1px solid var(--border-ghost);

  border-radius: var(--radius-xl);

  padding: 32px;

  position: relative;

  overflow: hidden;

  transition: border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-soft-spring), box-shadow var(--dur) var(--ease-out);

}

.solution::before {

  content: '';

  position: absolute;

  top: 0; left: 0;

  width: 100%; height: 3px;

  background: linear-gradient(90deg, var(--accent), var(--accent-2));

  opacity: 0;

  transition: opacity var(--dur);

}

.solution:hover {

  border-color: var(--accent);

  transform: translateY(-3px) scale(1.01);

  box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(27,255,255,0.08);

}

.solution:hover::before { opacity: 1; }




  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 16px;



.solution-header h3 {

  font-size: 17px;

  font-weight: 600;

  color: var(--text-bright);

  letter-spacing: -0.01em;

}


  font-size: 10px;

  font-weight: 700;

  color: var(--accent);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  padding: 4px 10px;

  background: var(--accent-subtle);

  border: 1px solid rgba(46,49,146,0.15);

  border-radius: var(--radius-full);

  font-family: var(--font-mono);

  transition: all var(--dur-fast) var(--ease-spring);




  background: rgba(46,49,146,0.12);

  box-shadow: 0 0 8px rgba(27,255,255,0.2);

  transform: scale(1.05);



.solution p {

  font-size: 14px;

  color: var(--text-secondary);

  line-height: 1.6;

  margin-bottom: 20px;

  padding-bottom: 20px;

  border-bottom: 1px solid var(--border-ghost);
  transform: translateZ(10px);}

.solution-features {

  list-style: none;

  padding: 0;

  margin: 0 0 24px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 6px 16px;

}

.solution-feature {

  font-size: 12.5px;

  color: var(--text-secondary);

  display: flex;

  align-items: center;

  gap: 7px;

  font-family: var(--font-mono);

}

.solution-feature .check {

  width: 10px; height: 10px;

  border-radius: 50%;

  background: var(--accent);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  font-size: 7px;

  color: var(--text-bright);

  font-weight: 700;

  box-shadow: 0 0 8px rgba(27,255,255,0.4);

  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);

}

.solution-feature .check:hover {

  transform: scale(1.2);

  box-shadow: 0 0 12px rgba(27,255,255,0.6);

}



/* ---------- PRICING (2026: bold, clear hierarchy) ---------- */

#pricing {
  padding: 90px 0;

  position: relative;
}


.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 18px;
  perspective: 1200px;
  transform-style: preserve-3d;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  background: linear-gradient(165deg, rgba(13, 21, 39, 0.9) 0%, rgba(9, 14, 26, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform, box-shadow, border-color;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s ease,
              border-color 0.35s ease;
}

.pricing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.35), transparent 45%, rgba(37, 99, 235, 0.25));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.4s ease;
}

.pricing-card:hover {
  transform: translateY(-10px) rotateX(5deg) scale(1.02);
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 26px 52px -10px rgba(0, 0, 0, 0.6),
              0 0 35px rgba(6, 182, 212, 0.3),
              0 0 0 1px rgba(34, 211, 238, 0.4);
}

.pricing-card:hover::before {
  opacity: 1;
}

.pricing-card.featured {
  position: relative;
  background: linear-gradient(165deg, rgba(14, 26, 52, 0.95) 0%, rgba(9, 16, 32, 0.98) 100%);
  border: 1.5px solid rgba(34, 211, 238, 0.55);
  box-shadow: 0 16px 42px -6px rgba(0, 0, 0, 0.55),
              0 0 32px rgba(6, 182, 212, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-5px) scale(1.025);
  z-index: 2;
}

.pricing-card.featured::before {
  background: linear-gradient(135deg, #22D3EE, #2563EB 50%, #06B6D4);
  opacity: 0.9;
}

.pricing-card.featured:hover {
  transform: translateY(-14px) rotateX(6deg) scale(1.045) !important;
  border-color: rgba(34, 211, 238, 0.8) !important;
  box-shadow: 0 34px 68px -10px rgba(0, 0, 0, 0.68),
              0 0 45px rgba(6, 182, 212, 0.45),
              0 0 0 1.5px rgba(34, 211, 238, 0.65) !important;
}

.pricing-popular {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #22D3EE;
  background: rgba(34, 211, 238, 0.14);
  border: 1px solid rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.35);
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  margin-bottom: 14px;
  align-self: flex-start;
  transform: translateZ(35px);
  transition: transform 0.4s ease;
}

.pricing-name {
  font-size: 14px;
  color: #22D3EE;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  transform: translateZ(24px);
  transition: transform 0.4s ease;
}

.pricing-price {
  font-size: 38px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  font-family: var(--font-mono);
  margin-bottom: 10px;
  line-height: 1.1;
  transform: translateZ(36px);
  transition: transform 0.4s ease;
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

.pricing-price .sub {
  font-size: 14px;
  color: #94A3B8;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 6px;
}

.pricing-desc {
  font-size: 13.5px;
  color: #CBD5E1;
  margin-bottom: 20px;
  line-height: 1.6;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateZ(18px);
  transition: transform 0.4s ease;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}

.pricing-features li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
  color: #CBD5E1;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transform: translateZ(16px);
  transition: transform 0.3s ease, color 0.25s ease;
}

.pricing-features li:hover {
  color: #FFFFFF;
}

.pricing-features li:last-child { border-bottom: none; }

.pricing-features li::before {
  content: '✓';
  color: #22D3EE;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 1px;
  flex-shrink: 0;
}

.pricing-card .btn {
  margin-top: auto;
  transform: translateZ(30px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.pricing-card:hover .btn {
  transform: translateZ(38px);
}




/* ---------- LOGO WALL (2026: client logos as social proof) ---------- */

.logo-wall-section {

  padding: 60px 0;

  border-top: 1px solid var(--border-ghost);

  border-bottom: 1px solid var(--border-ghost);

  background: var(--bg-2);

  position: relative;

}

.logo-wall-section .eyebrow {

  text-align: center;

  display: inline-block;

  margin-bottom: 36px;

}

.logo-wall {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 28px 48px;

  max-width: 900px;

  margin: 0 auto;

}

.logo-wall-item {

  font-size: 13px;

  color: var(--muted);

  font-family: var(--font-mono);

  letter-spacing: -0.02em;

  transition: color var(--dur-fast) var(--ease-out);

  font-style: italic;

  padding: 4px 0;

}

.logo-wall-item:hover { color: var(--text-secondary); }



/* ---------- WHO WE SERVE ---------- */

.who-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

}

.who-card {

  background: var(--card);

  border: 1px solid var(--border-ghost);

  border-radius: var(--radius-lg);

  padding: 24px;

  transition: border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-soft-spring), box-shadow var(--dur) var(--ease-out);

}

.who-card:hover {

  border-color: var(--accent);

  transform: translateY(-3px) scale(1.01);

  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(27,255,255,0.08);

}

.who-icon {

  font-size: 28px;

  margin-bottom: 12px;

  display: block;
  transform: translateZ(30px);}

.who-card h3 {

  font-size: 15px;

  font-weight: 600;

  color: var(--text-bright);

  margin-bottom: 8px;

}

.who-card p {

  font-size: 13px;

  color: var(--text-secondary);

  line-height: 1.55;
  transform: translateZ(10px);}



/* ---------- AGENCY PARTNERSHIP ---------- */

.agency-section {

  padding: 90px clamp(28px, 4vw, 52px);

  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);

  border-top: 1px solid var(--border-ghost);

  border-radius: var(--radius-xl);

  position: relative;

}

.agency-section::before {

  content: '';

  position: absolute;

  left: 0; top: 0; bottom: 0;

  width: 300px;

  background: radial-gradient(ellipse at top, rgba(79,131,247,0.04) 0%, transparent 60%);

  pointer-events: none;

}

.agency-layout {

  display: grid;

  grid-template-columns: 1.2fr 1fr;

  gap: 60px;

  align-items: start;

  position: relative;

}

.agency-copy h2 {

  font-size: clamp(28px, 3vw, 38px);

  margin-bottom: 16px;

}

.agency-copy p {

  font-size: 15px;

  color: var(--text-secondary);

  line-height: 1.65;

  margin-bottom: 16px;

}

.agency-copy strong { color: var(--text-bright); }

.agency-list {

  list-style: none;

  padding: 0;

  margin: 20px 0 28px;

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.agency-list li {

  font-size: 13.5px;

  color: var(--text-secondary);

  padding: 8px 0 8px 20px;

  position: relative;

  font-family: var(--font-mono);

}

.agency-list li::before {

  content: '';

  position: absolute;

  left: 0; top: 14px;

  width: 6px; height: 6px;

  border-radius: 50%;

  background: var(--accent);

  box-shadow: 0 0 8px rgba(27,255,255,0.4);

  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);

}

.agency-list li:hover::before {

  transform: scale(1.4);

  box-shadow: 0 0 12px rgba(27,255,255,0.6);

}



.agency-cta-card {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: var(--radius-xl);

  padding: 32px;

  position: sticky;

  top: 100px;
  transform-style: preserve-3d;
  perspective: 300px;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);}

.agency-cta-card .eyebrow { margin-bottom: 14px; }

.agency-cta-card p {

  color: var(--text-secondary);

  font-size: 13.5px;

  line-height: 1.6;

  margin-bottom: 20px;
  transform: translateZ(10px);}

.agency-cta-card .btn { width: 100%; justify-content: center; }



/* ---------- FAQ (2026: glowing borders, interactive) ---------- */


  padding: 90px 0;

  position: relative;




  background: var(--card);

  border: 1px solid var(--border-ghost);

  border-radius: var(--radius-xl);

  padding: 40px 44px;

  max-width: 780px;

  margin: 0 auto;

  position: relative;

  overflow: hidden;

  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);




  content: '';

  position: absolute;

  inset: -1px;

  border-radius: var(--radius-xl);

  padding: 1px;

  background: var(--gradient-accent);

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  opacity: 0;

  transition: opacity var(--dur) var(--ease-out);

  pointer-events: none;




  opacity: 1;




  border-color: transparent;

  box-shadow: 0 0 30px var(--accent-glow), 0 8px 32px rgba(0,0,0,0.2);



.faq-list { max-width: 100%; }

.faq-item {

  border-bottom: 1px solid var(--border-ghost);

  padding: 22px 0;

  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);

}

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

.faq-item:hover {

  padding-left: 8px;

  border-bottom-color: var(--accent-subtle);

}

.faq-question {

  font-size: 15px;

  color: var(--text-bright);

  font-weight: 500;

  margin-bottom: 8px;

  cursor: pointer;

  line-height: 1.4;

  transition: color var(--dur-fast);

}

.faq-item:hover .faq-question {

  color: var(--accent);

}

.faq-answer {

  font-size: 13.5px;

  color: var(--text-secondary);

  line-height: 1.6;

}



/* ---------- FOOTER CTA: 2026 signal panel ---------- */

.footer-cta-section {

  position: relative;

  isolation: isolate;

  overflow: hidden;

  padding: clamp(72px, 9vw, 124px) 24px;

  background: linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--bg-2) 88%, var(--accent)) 52%, var(--bg-2) 100%);

  border-top: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-ghost));

}

.footer-cta-section::before {

  content: '';

  position: absolute;

  top: 0; left: 10%; right: 10%; height: 1px;

  background: linear-gradient(90deg, transparent, var(--accent), var(--green), transparent);

  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent);

}

.footer-cta-inner {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);

  align-items: center;

  gap: clamp(40px, 8vw, 110px);

  max-width: 1140px;

  margin: 0 auto;

  padding: clamp(32px, 4.5vw, 56px);

  border-radius: var(--radius-xl);

}

.footer-cta-copy .eyebrow { color: var(--accent); white-space: nowrap; }
@media (max-width: 640px) { .footer-cta-copy .eyebrow { white-space: normal; } }

.footer-cta-copy h2 {

  max-width: 700px;

  margin: 14px 0 20px;

  font-size: clamp(28px, 4vw, 48px);

  line-height: 1.1;

  letter-spacing: -.03em;

  text-wrap: balance;

}

.footer-cta-copy > p,
.footer-cta-lead {
  max-width: 620px;
  margin: 16px 0 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.01em;
}

html.theme-light .footer-cta-copy > p,
html.theme-light .footer-cta-lead {
  color: #0F172A !important;
  text-shadow: none;
  font-weight: 500;
}

html.theme-light .footer-cta-copy h2 {
  color: #0F172A !important;
}

.footer-cta-points {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-cta-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #F1F5F9;
  line-height: 1.5;
}

html.theme-light .footer-cta-points li {
  color: #334155 !important;
}

.footer-cta-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.4);
  color: var(--accent-bright);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.25);
  flex-shrink: 0;
}

.footer-cta-action-card {
  position: relative;
  padding: 28px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--card) 85%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(135%);
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.footer-cta-card-top {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.footer-cta-card-code { margin-left: auto; color: var(--muted); font-size: 9px; }

.footer-cta-card-rule {
  height: 1px;
  margin: 20px 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, var(--border)), transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

.footer-cta-btns { display: grid; gap: 10px; }

.footer-cta-btns .btn { width: 100%; justify-content: space-between; }

.footer-cta-btns .btn span { margin-left: 8px; font-size: 1.05em; transition: transform .25s ease; }

.footer-cta-btns .btn:hover span { transform: translate(2px, -2px); display: inline-block; }

.footer-cta-trust { margin: 18px 0 0; color: var(--muted); font-family: var(--font-mono); font-size: 10px; line-height: 1.5; }

.footer-cta-status { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent), 0 0 16px var(--green); }

.footer-cta-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(80px); opacity: .16; pointer-events: none; z-index: -1;
  transform: translateZ(20px);}
.footer-cta-glow-one { top: 5%; left: 2%; background: var(--accent); animation: footer-cta-float 9s ease-in-out infinite; box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 40%, transparent); }
.footer-cta-glow-two { right: 2%; bottom: -12%; background: var(--cyan); animation: footer-cta-float 11s ease-in-out infinite reverse; box-shadow: 0 0 40px color-mix(in srgb, var(--cyan) 35%, transparent); }

.footer-cta-glow-one { top: 8%; left: 4%; background: var(--accent); animation: footer-cta-float 10s ease-in-out infinite; }

.footer-cta-glow-two { right: 4%; bottom: -10%; background: var(--green); animation: footer-cta-float 12s ease-in-out infinite reverse; }

.footer-cta-gridline { position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--accent) 20%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 72%); }

@keyframes footer-cta-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(18px, -16px, 0); } }

@media (max-width: 760px) {

  .footer-cta-inner { grid-template-columns: 1fr; gap: 32px; }

  .footer-cta-copy h2 { font-size: clamp(34px, 10vw, 48px); }

}

@media (prefers-reduced-motion: reduce) {

  .footer-cta-glow-one, .footer-cta-glow-two { animation: none; }

  .footer-cta-btns .btn span { transition: none; }

}



/* ---------- Footer ---------- */

.site-footer {

  border-top: 1px solid var(--border-ghost);

  padding: 48px 0 32px;

  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);

  position: relative;

  overflow: hidden;

}

.site-footer::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 3px;

  background: var(--gradient-accent);

  opacity: 0.5;

}

.site-footer::after {

  content: '';

  position: absolute;

  bottom: 0; left: 0; right: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--accent-subtle), transparent);

}

.footer-grid {

  display: grid;

  grid-template-columns: 1.4fr 1fr 1fr 1fr;

  gap: 40px;

  margin-bottom: 40px;

}

.footer-brand strong {

  font-size: 15px;

  color: var(--text-bright);

  display: block;

  margin-bottom: 6px;

  letter-spacing: -0.02em;

}

.footer-brand p {

  font-size: 13px;

  color: var(--muted-light);

  max-width: 260px;

  line-height: 1.6;

}

.footer-col h4 {

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--muted);

  margin-bottom: 14px;

  font-weight: 600;

  font-family: var(--font-mono);

}

.footer-col ul { list-style: none; padding: 0; margin: 0; }

.footer-col li { padding: 5px 0; font-size: 13px; }

.footer-col a {

  color: var(--text-secondary);

  text-decoration: none;

  transition: color var(--dur-fast);

  font-size: 13px;

}

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

.footer-cta-text {

  font-size: 14px;

  font-weight: 600;

  color: var(--text-bright);

  margin-top: 12px;
  transform: translateZ(15px);}



.footer-bottom {

  border-top: 1px solid var(--border-ghost);

  padding-top: 18px;

  font-size: 11px;

  color: var(--muted);

  text-align: center;

  font-family: var(--font-mono);

}



/* ============================================

   LIGHT THEME OVERRIDES FOR CONTROLS

   ============================================ */

html.theme-light .theme-btn { background: var(--bg); border-color: var(--border); color: var(--text); }

html.theme-light .theme-btn:hover { border-color: var(--accent); color: var(--accent); }

html.theme-light .theme-btn.active { background: var(--gradient-accent); color: #fff; border-color: transparent; }








/* ---- NATIVE COLOR PICKER ---- */



/* ---- 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;

  }

  /* Keep marquee scrolling for users who rely on motion cues */

  .marquee-track {
    animation-name: marquee-scroll !important;
    animation-duration: 30s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }

  .top-bar-marquee:hover .marquee-track,
  .top-bar-marquee:focus-within .marquee-track,
  .top-bar-marquee .marquee-track:hover,
  .marquee-track:hover,
  .marquee-track:has(.marquee-item:hover),
  .top-bar-marquee:hover * {
    animation-play-state: paused !important;
  }

  .marquee-item .mi-dot {

    animation: pulse-dot 2s ease-in-out infinite !important;

    animation-duration: 2s !important;

    animation-iteration-count: infinite !important;

  }

}



/* ---- LIGHT THEME BUTTONS ---- */

html.theme-light .btn-primary {
  background: var(--gradient-accent);
  color: #fff;
  border-color: rgba(34, 211, 238, 0.4);
}

html.theme-light .btn-primary:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #0891B2 55%, #06B6D4 100%);
  border-color: rgba(34, 211, 238, 0.7);
  color: #fff;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.35), 0 0 16px rgba(34, 211, 238, 0.3);
}

html.theme-light .btn-primary.btn-glow {
  background: var(--gradient-accent);
  color: #fff;
  border-color: rgba(34, 211, 238, 0.4);
}

html.theme-light .btn-primary.btn-glow:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #0891B2 55%, #06B6D4 100%);
  border-color: rgba(34, 211, 238, 0.7);
  color: #fff;
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.42), 0 0 20px rgba(34, 211, 238, 0.35);
}



html.theme-light .btn-ghost {

  background: transparent;

  color: var(--text);

  border-color: var(--border);

}

html.theme-light .btn-ghost:hover {

  background: var(--bg-2);

  border-color: var(--accent);

  color: var(--text-bright);

  box-shadow: 0 2px 8px rgba(0,0,0,0.04);

}



html.theme-light .btn-accent {

  background: transparent;

  color: var(--accent);

  border-color: var(--accent);

}

html.theme-light .btn-accent:hover {

  background: var(--accent-subtle);

  color: var(--accent);

}



/* ---- LIGHT THEME CARDS ---- */

html.theme-light .card {

  background: var(--bg-elevated);

  border-color: var(--border-subtle);

}

html.theme-light .card:hover {

  border-color: var(--accent);

  box-shadow: 0 8px 24px rgba(11,18,32,0.06);

}



html.theme-light .stat-item { background: var(--bg-elevated); }

html.theme-light .stat-item:hover { background: var(--bg-2); }



html.theme-light .solution {

  background: var(--bg-elevated);

  border-color: var(--border-subtle);

}

html.theme-light .solution:hover {

  border-color: var(--accent);

  box-shadow: 0 8px 24px rgba(11,18,32,0.06);

}



html.theme-light .pricing-card {

  background: var(--bg-elevated);

  border-color: var(--border-subtle);

}

html.theme-light .pricing-card:hover {

  border-color: var(--accent);

  box-shadow: 0 12px 32px rgba(0,0,0,0.08);

}



html.theme-light .who-card {

  background: var(--bg-elevated);

  border-color: var(--border-subtle);

}

html.theme-light .who-card:hover {

  border-color: var(--accent);

  box-shadow: 0 8px 24px rgba(11,18,32,0.06);

}



html.theme-light .approach-step {

  background: var(--bg-elevated);

  border-color: var(--border-subtle);

}





/* ===== RESPONSIVE: Mobile breakpoints ===== */

@media (max-width: 768px) {

  .top-bar-inner { padding: 0 16px; gap: 6px; overflow-x: auto; }

  .top-bar-label { display: none; }

  .top-bar-logos { gap: 12px; flex-wrap: nowrap; }

  .top-bar-logo { font-size: 9px; }

  .top-bar-right { display: none; }



  

  .brand-text strong { font-size: 12px; }

  .brand-text small { display: none; }

  .brand-mark { width: 28px; height: 28px; font-size: 13px; }



  .top-nav { display: none; }



  .theme-controls { gap: 4px; }

  .theme-btn { width: 30px; height: 30px; font-size: 12px; }



  .header-cta .btn { padding: 8px 14px; font-size: 11px; }



  .container { padding: 0 16px; }



  .hero { grid-template-columns: 1fr; gap: 30px; padding: 36px 0 48px; }

  .hero-visual { min-height: 280px; aspect-ratio: 4/3; max-width: 100%; order: -1; }

  .hero-visual::after { display: none; }

  .hero-visual { object-fit: cover; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg), 0 0 20px var(--accent-glow); }

  .hero-signal-panel { inset: 12%; padding: clamp(14px, 2.5vw, 20px); }



  .stat-bar { grid-template-columns: 1fr 1fr; margin: 30px 0; }

  .stat-item { padding: 18px 12px; }

  .stat-number { font-size: 26px; }



  .section { padding: 36px 0; }



  .process-grid { grid-template-columns: 1fr !important; }

  .process-step { padding: 20px; }

  .credentials-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }

  .comparison-table-wrap { margin: 0; }

  .footer-cta-glow { width: 140px; height: 140px; }

  .case-studies-slider { overflow: hidden; }

  .footer-cta-section { overflow-x: hidden; }



  .approach-steps { grid-template-columns: 1fr; gap: 12px; }

  .approach-card { padding: 28px 20px; }



  .solutions-grid { grid-template-columns: 1fr; gap: 14px; }

  .solution { padding: 22px; }



  .pricing-grid { grid-template-columns: 1fr; }

  .pricing-card { padding: 24px 20px; }

  .pricing-price { font-size: 32px; }



  .who-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .who-card { padding: 16px; }

  .who-icon { font-size: 22px; }

  .who-card h3 { font-size: 13px; }

  .who-card p { font-size: 11px; }



  .agency-layout { grid-template-columns: 1fr; gap: 24px; }

  .agency-cta-card { position: static; }



  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

  .footer-brand p { font-size: 11px; }



  .credentials-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  .credential-number { font-size: 28px; }






  .logo-wall { gap: 14px 20px; }

  .logo-wall-item { font-size: 11px; }




  .faq-question { font-size: 13px; }

  .faq-answer { font-size: 11px; }



  .footer-cta-section { padding: 50px 0; }

  .footer-cta-section h2 { font-size: clamp(22px, 5vw, 28px); }

  .footer-cta-btns { flex-direction: column; align-items: center; }

  .footer-cta-btns .btn { width: 100%; max-width: 280px; justify-content: center; }



  .site-footer { padding: 30px 0 20px; }



  .marquee-item { font-size: 9px; }

  .marquee-track { gap: 24px; }




  .social-left-bar { display: none; }

}



@media (max-width: 480px) {

  .top-bar-inner { padding: 0 12px; }

  .top-bar-label { display: none; }

  .top-bar-logos { gap: 8px; flex-wrap: nowrap; }

  .top-bar-logo { font-size: 8px; }



  .container { padding: 0 12px; max-width: 100%; }

  .hero-copy { max-width: 100%; }

  .hero-copy h1 { font-size: clamp(28px, 7vw, 44px) !important; }

  .hero-sub { font-size: 14px !important; max-width: 100%; }

  .hero-visual { min-height: 280px; aspect-ratio: 4/3; max-width: 100%; }

  .hero-cta { flex-direction: column; align-items: center; gap: 8px; }

  .hero-trust { flex-direction: column; align-items: center; gap: 6px; }



  .stat-bar { grid-template-columns: 1fr; }



  .section { padding: 36px 0; }



  .approach-steps { grid-template-columns: 1fr; }



  .solutions-grid { grid-template-columns: 1fr; }



  .pricing-grid { grid-template-columns: 1fr; }



  .who-grid { grid-template-columns: 1fr; }



  .footer-grid { grid-template-columns: 1fr; }



  .credentials-grid { grid-template-columns: 1fr 1fr; }






  .logo-wall { gap: 10px 16px; }



  .footer-cta-btns { flex-direction: column; }



  .brand-mark { width: 24px; height: 24px; font-size: 11px; }




  .theme-btn { width: 28px; height: 28px; font-size: 11px; }

}



/* ---------- SCROLL REVEAL ANIMATIONS (2026: bouncy, alive) ---------- */

@keyframes fade-in-up {

  from { opacity: 0; transform: translateY(16px); }

  to { opacity: 1; transform: translateY(0); }

}



@keyframes fade-in-scale {

  from { opacity: 0; transform: scale(0.95) translateY(10px); }

  to { opacity: 1; transform: scale(1) translateY(0); }

}



@keyframes slide-in-left {

  from { opacity: 0; transform: translateX(-20px); }

  to { opacity: 1; transform: translateX(0); }

}



/* Scroll-triggered fade (applied via IntersectionObserver in HTML) */

.fade-in {

  opacity: 0;

  transform: translateY(16px);

  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);

}

.fade-in.visible {

  opacity: 1;

  transform: translateY(0);

}



/* Bouncy variant */


  opacity: 0;

  transform: translateY(20px) scale(0.97);

  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-spring);



.fade-in-bounce.visible {

  opacity: 1;

  transform: translateY(0) scale(1);

}



/* Scale-in variant for cards */


  opacity: 0;

  transform: scale(0.95) translateY(12px);

  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-soft-spring);



.fade-in-scale.visible {

  opacity: 1;

  transform: scale(1) translateY(0);

}



/* Stagger children */


  opacity: 0;

  transform: translateY(14px);

  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);



.stagger-children.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }

.stagger-children.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 60ms; }

.stagger-children.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 120ms; }

.stagger-children.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 180ms; }

.stagger-children.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }

.stagger-children.visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }

.stagger-children.visible > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 360ms; }

.stagger-children.visible > *:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 420ms; }



/* Logo wall hover - add personality */

.logo-wall-item {

  font-size: 13px;

  color: var(--muted);

  font-family: var(--font-mono);

  letter-spacing: -0.02em;

  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-soft-spring);

  font-style: italic;

  padding: 4px 0;

}

.logo-wall-item:hover {

  color: var(--accent);

  transform: translateY(-2px) scale(1.02);

  text-shadow: 0 0 8px rgba(27,255,255,0.2);

}



/* ================================================

   INSPIRED BY FM MURSHID ALAM — 2026 PORTFOLIO DESIGN

   ================================================ */



/* ---- CREDENTIALS / STATS BAR (big impact numbers with glowing border) ---- */

.credentials-section {

  padding: clamp(40px, 9vw, 60px) 0;

  background: var(--bg-2);

  border-top: 1px solid var(--border-ghost);

  border-bottom: 1px solid var(--border-ghost);

  position: relative;

  overflow: hidden;

}



.credentials-section::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 3px;

  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);

  opacity: 0.5;

  transition: opacity var(--dur) var(--ease-out);

}

.credentials-section:hover::before {

  opacity: 1;

  height: 4px;

}



.credentials-section::after {

  content: '';

  position: absolute;

  bottom: 0; left: 0; right: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--accent), transparent);

  opacity: 0.3;

  transition: opacity var(--dur) var(--ease-out);

}

.credentials-section:hover::after {

  opacity: 0.6;

  height: 3px;

  bottom: -1px;

}



.credentials-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}



.credential-card {

  text-align: center;

  padding: 20px;

  position: relative;

}



.credential-number {

  font-size: clamp(36px, 4vw, 52px);

  font-weight: 800;

  color: var(--text-bright);

  font-family: var(--font-mono);

  letter-spacing: -0.04em;

  line-height: 1;

  margin-bottom: 8px;

}



.credential-number .accent {

  color: var(--accent);

  text-shadow: 0 0 20px rgba(27,255,255,0.2);

}



.credential-label {

  font-size: 12px;

  color: var(--muted-light);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-weight: 500;

  font-family: var(--font-mono);

}



.credential-label .highlight {

  color: var(--text-secondary);

  text-transform: none;

  letter-spacing: 0;

}



/* ---- TECH STACK BADGES (pill-style) ---- */

.tech-stack-section {

  padding: 60px 0;

  border-top: 1px solid var(--border-ghost);

}



.tech-stack-header {

  margin-bottom: 32px;

  text-align: center;

}



.tech-stack-header .eyebrow {

  text-align: center;

  display: inline-block;

  margin-bottom: 12px;

}



.tech-stack-header h2 {

  font-size: clamp(24px, 3vw, 32px);

  margin-bottom: 8px;

}



.tech-stack-header p {

  color: var(--text-secondary);

  font-size: 14px;

  max-width: 480px;

  margin: 0 auto;

}



.tech-stack-section {

  position: relative;

  isolation: isolate;

  overflow: hidden;

  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%);

}

.tech-stack-section::before {

  content: '';

  position: absolute;

  inset: 0;

  z-index: -1;

  opacity: .18;

  pointer-events: none;

  background-image: linear-gradient(color-mix(in srgb, var(--accent) 18%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent) 1px, transparent 1px);

  background-size: 64px 64px;

  mask-image: linear-gradient(to bottom, black, transparent 75%);

}

.tech-stack-grid {

  position: relative;

  z-index: 1;

}



/* ---- SIX PILLARS SECTION (inspired by "Six things I spend my days on") ---- */


  padding: 80px 0;

  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);

  border-top: 1px solid var(--border-ghost);

  position: relative;






  text-align: center;

  margin-bottom: 56px;





.six-pillars-header .eyebrow {

  text-align: center;

  display: inline-block;

  margin-bottom: 14px;

}



.six-pillars-header h2 {

  font-size: clamp(28px, 3.5vw, 40px);

  margin-bottom: 12px;

}



.six-pillars-header p {

  color: var(--text-secondary);

  font-size: 15px;

  max-width: 500px;

  margin: 0 auto;

}




  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  max-width: 1000px;

  margin: 0 auto;






  background: var(--card);

  border: 1px solid var(--border-ghost);

  border-radius: var(--radius-xl);

  padding: 28px;

  position: relative;

  overflow: hidden;

  transition: border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-soft-spring), box-shadow var(--dur-fast) var(--ease-out);






  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 2px;

  background: linear-gradient(90deg, var(--accent), var(--accent-2));

  opacity: 0;

  transition: opacity var(--dur);






  border-color: var(--accent);

  transform: translateY(-3px);

  box-shadow: 0 12px 32px rgba(0,0,0,0.3);









  font-size: 10px;

  font-weight: 700;

  color: var(--accent);

  letter-spacing: 0.1em;

  margin-bottom: 16px;

  font-family: var(--font-mono);

  text-transform: uppercase;






  width: 40px; height: 40px;

  border-radius: var(--radius);

  background: var(--accent-subtle);

  border: 1px solid rgba(46,49,146,0.15);

  display: grid; place-items: center;

  margin-bottom: 16px;

  font-size: 18px;

  color: var(--accent);

  transition: color var(--dur-fast) var(--ease-spring), transform var(--dur-fast) var(--ease-spring);






  background: rgba(46,49,146,0.12);

  transform: scale(1.05);

  box-shadow: 0 0 12px rgba(46,49,146,0.15);





.six-pillar h3 {

  font-size: 16px;

  font-weight: 700;

  color: var(--text-bright);

  margin-bottom: 10px;

  line-height: 1.3;

}



.six-pillar p {

  font-size: 13px;

  color: var(--text-secondary);

  line-height: 1.55;

}



/* ---- CLIENT LOGO WALL (enhanced) ---- */


  padding: 70px 0;

  background: var(--bg-2);

  border-top: 1px solid var(--border-ghost);

  border-bottom: 1px solid var(--border-ghost);

  position: relative;

  overflow: hidden;






  content: '';

  position: absolute;

  top: 50%; left: 50%;

  transform: translate(-50%, -50%);

  width: 600px; height: 600px;

  background: radial-gradient(circle, rgba(46,49,146,0.03) 0%, transparent 60%);

  pointer-events: none;






  text-align: center;

  margin-bottom: 48px;





.client-logo-header .eyebrow {

  text-align: center;

  display: inline-block;

  margin-bottom: 14px;

}



.client-logo-header h2 {

  font-size: clamp(24px, 3vw, 32px);

  margin-bottom: 8px;

}



.client-logo-header p {

  color: var(--text-secondary);

  font-size: 14px;

  max-width: 400px;

  margin: 0 auto;

}




  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 32px 48px;

  max-width: 900px;

  margin: 0 auto;






  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

  padding: 16px 20px;

  border-radius: var(--radius-lg);

  background: var(--card);

  border: 1px solid var(--border-ghost);

  transition: transform var(--dur-fast) var(--ease-soft-spring), background var(--dur-fast) var(--ease-soft-spring);

  cursor: default;






  border-color: var(--accent);

  transform: translateY(-3px) scale(1.02);

  box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(27,255,255,0.08);






  width: 48px; height: 48px;

  border-radius: var(--radius);

  background: var(--accent-subtle);

  border: 1px solid rgba(27,255,255,0.1);

  display: grid; place-items: center;

  font-size: 20px;

  color: var(--accent);

  font-weight: 700;

  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-spring);






  background: rgba(46,49,146,0.12);

  transform: scale(1.05);






  font-size: 12px;

  color: var(--text-secondary);

  font-weight: 500;

  font-family: var(--font-mono);

  letter-spacing: -0.01em;






  font-size: 9px;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-family: var(--font-mono);





/* ---- SERVICE CARDS REDESIGN (visual with icon area) ---- */


  padding: 90px 0;

  background: var(--bg-2);

  border-top: 1px solid var(--border-ghost);

  position: relative;






  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;





.service-card {

  background: var(--card);

  border: 1px solid var(--border-ghost);

  border-radius: var(--radius-xl);

  padding: 0;

  overflow: hidden;

  transition: border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-soft-spring), box-shadow var(--dur-fast) var(--ease-out);

  display: flex;

  flex-direction: column;

}



.service-card:hover {

  border-color: var(--accent);

  transform: translateY(-3px);

  box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(27,255,255,0.08);

}




  height: 100px;

  background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--bg-2) 100%);

  border-bottom: 1px solid var(--border-ghost);

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;






  content: '';

  position: absolute;

  inset: 0;

  background:

    radial-gradient(circle at 30% 40%, rgba(27,255,255,0.08) 0%, transparent 50%),

    radial-gradient(circle at 70% 60%, rgba(255,159,67,0.05) 0%, transparent 50%);

  animation: service-visual-pulse 4s ease-in-out infinite alternate;





@keyframes service-visual-pulse {

  0% { opacity: 0.5; }

  100% { opacity: 1; }

}



.service-card-visual .service-icon-lg {

  font-size: 32px;

  color: var(--accent);

  position: relative;

  z-index: 1;

  filter: drop-shadow(0 0 8px rgba(46,49,146,0.15));

}




  padding: 24px;

  flex: 1;

  display: flex;

  flex-direction: column;






  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin-bottom: 12px;






  font-size: 17px;

  font-weight: 700;

  color: var(--text-bright);

  letter-spacing: -0.01em;

  line-height: 1.3;






  font-size: 9px;

  font-weight: 600;

  color: var(--accent);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  padding: 4px 8px;

  background: var(--accent-subtle);

  border: 1px solid rgba(46,49,146,0.12);

  border-radius: var(--radius-full);

  font-family: var(--font-mono);

  white-space: nowrap;

  flex-shrink: 0;

  margin-top: 2px;






  font-size: 13.5px;

  color: var(--text-secondary);

  line-height: 1.55;

  margin-bottom: 16px;

  flex: 1;






  list-style: none;

  padding: 0;

  margin: 0 0 20px;

  display: flex;

  flex-direction: column;

  gap: 6px;





.service-card-features li {

  font-size: 12px;

  color: var(--text-secondary);

  display: flex;

  align-items: center;

  gap: 7px;

  font-family: var(--font-mono);

}



.service-card-features li .check {

  width: 8px; height: 8px;

  border-radius: 50%;

  background: var(--accent);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  font-size: 6px;

  color: var(--text-bright);

  font-weight: 700;

  box-shadow: 0 0 6px rgba(27,255,255,0.3);

}




  font-size: 12px;

  font-weight: 600;

  color: var(--accent);

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 5px;

  transition: gap var(--dur-fast) var(--ease-spring);






  gap: 8px;





.service-card-cta .arrow {

  transition: transform var(--dur-fast) var(--ease-spring);

}




  transform: translateX(3px);





/* ===== FORM PAGE STYLES ===== */


  max-width: 720px;

  margin: 0 auto;

  padding: 40px 20px 80px;






  text-align: center;

  margin-bottom: 40px;





.form-header h1 {

  font-size: 32px;

  font-weight: 800;

  color: var(--text-bright);

  margin-bottom: 12px;

  letter-spacing: -0.5px;

}



.form-header p {

  font-size: 15px;

  color: var(--text-secondary);

  line-height: 1.6;

  max-width: 560px;

  margin: 0 auto;

}




  margin-top: 8px;

  font-size: 13px !important;

  color: var(--muted) !important;





/* Form Sections */


  background: var(--card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 28px;

  margin-bottom: 24px;






  font-size: 13px;

  font-weight: 700;

  color: var(--accent);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  margin-bottom: 20px;

  padding-bottom: 12px;

  border-bottom: 1px solid var(--border-ghost);





/* Field Rows */


  margin-bottom: 18px;






  margin-bottom: 0;





.field-row label {

  display: block;

  font-size: 13px;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 6px;

}




  color: #ef4444;

  margin-left: 2px;





/* Field Wrapper (for icon positioning) */


  position: relative;






  position: absolute;

  left: 14px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 14px;

  opacity: 0.5;

  pointer-events: none;

  transition: opacity 0.2s ease;





/* Input Fields */


  width: 100%;

  padding: 12px 14px 12px 40px;

  background: var(--bg-elevated);

  border: 1.5px solid var(--border);

  border-radius: var(--radius);

  font-size: 14px;

  color: var(--text);

  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

  outline: none;

  -webkit-appearance: none;

  appearance: none;






  color: var(--muted);

  opacity: 0.6;






  border-color: var(--accent);

  box-shadow: 0 0 0 3px var(--accent-glow, rgba(99, 102, 241, 0.15));

  background: var(--card);







  opacity: 1;





/* Textarea */


  min-height: 80px;

  resize: vertical;

  line-height: 1.5;

  padding-top: 12px;





/* Select */


  cursor: pointer;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 14px center;

  padding-right: 36px;





/* Form Actions */


  display: flex;

  gap: 12px;

  margin-top: 8px;





.form-actions .btn {

  flex: 1;

}



/* Toast */


  position: fixed;

  bottom: 24px;

  left: 50%;

  transform: translateX(-50%) translateY(100px);

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  padding: 14px 24px;

  font-size: 14px;

  color: var(--text);

  box-shadow: var(--shadow-lg);

  opacity: 0;

  transition: transform 0.3s var(--ease-spring), opacity 0.3s ease;

  z-index: 9999;

  pointer-events: none;





.toast.show {

  transform: translateX(-50%) translateY(0);

  opacity: 1;

}



/* Responsive */



/* ================================================================

   SECTION-SPECIFIC VISUAL DIFFERENTIATION

   Each section has unique visual character while maintaining brand

   ================================================================ */



/* HERO - Premium high-impact */

#hero {

  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);

  position: relative;

  overflow: hidden;

}

#hero::before {

  content: '';

  position: absolute;

  inset: 0;

  background: radial-gradient(ellipse 70% 60% at 80% 20%, rgba(27,255,255,0.08) 0%, transparent 50%);

  pointer-events: none;

}



/* PROBLEM - Clean editorial */

#problem {

  background: var(--bg-2);

  border-top: 1px solid var(--border-subtle);

  border-bottom: 1px solid var(--border-subtle);

}



/* SOLUTIONS - Structured visual */

#solutions {

  background: var(--bg);

}



/* PROCESS - Visual journey */

#process {

  background: var(--bg-2);

  border-top: 1px solid var(--border-subtle);

  border-bottom: 1px solid var(--border-subtle);

}



/* CASE STUDIES - Evidence focused */

#case-study {

  background: var(--bg);

}



/* WHO WE SERVE */

#who {

  background: var(--bg-2);

  border-top: 1px solid var(--border-subtle);

  border-bottom: 1px solid var(--border-subtle);

}



/* AGENCY */

#agency {

  background: var(--bg);

}



/* TEAM */

#team {

  background: var(--bg-2);

  border-top: 1px solid var(--border-subtle);

  border-bottom: 1px solid var(--border-subtle);

}



/* FAQ - Clean information */

#faq {

  background: var(--bg);

}



/* FINAL CTA - Strong contrasting closing */

#footer-cta {

  background: var(--gradient-accent);

  color: white;

  border: none;

}

#footer-cta h2,

#footer-cta .section-header p {

  color: white;

}

#footer-cta .eyebrow {

  color: rgba(255,255,255,0.9);

  border-bottom-color: rgba(255,255,255,0.3);

}



/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

}

/* Case Studies Marquee (different component - renamed to avoid conflict) */




@keyframes case-study-scroll {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}

/* ---------- Geo Coverage Section ---------- */

.geo-section {
  padding: 80px 0;
}

.geo-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}

.geo-header .eyebrow {
  display: block;
  margin-bottom: 12px;
}

.geo-header h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
}

.geo-header p {
  font-size: 16px;
  color: var(--muted);
}

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

.geo-card {
  background: var(--card);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-soft-spring);
  transform-style: preserve-3d;
  perspective: 300px;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);}

.geo-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-2px);
}

.geo-flag {
  font-size: 28px;
  margin-bottom: 12px;
  display: block;
}

.geo-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--fg);
  transform: translateZ(20px);}

.geo-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 12px;
  transform: translateZ(10px);}

.geo-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--accent);
  background: var(--bg-2);
  border-left: 2px solid var(--accent-dim);
  padding: 10px 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.geo-note strong {
  color: var(--fg);
  font-weight: 600;
}

/* Geo - mobile */
@media (max-width: 768px) {
  .geo-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .geo-card {
    padding: 18px;
  }
  .geo-card p {
    font-size: 13px;
  }
  .geo-note {
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* ---------- Interactive AI Signal Audit Form ---------- */

.audit-form-section {
  padding: 80px 0;
  max-width: 960px;
  margin: 0 auto;
  perspective: 600px;
  transform-style: preserve-3d;
}

.audit-form-header {
  text-align: center;
  margin-bottom: 32px;
}

.audit-form-header .eyebrow {
  display: block;
  margin-bottom: 12px;
}

.audit-form-header h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

.audit-form-header p {
  font-size: 15px;
  color: var(--muted);
}

.audit-form {
  background: var(--card);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-soft-spring);
  will-change: transform;
}

.audit-form:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15), 0 0 20px color-mix(in srgb, var(--accent) 10%, transparent);
  transform: translateY(-3px);
}

.audit-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.audit-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.audit-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}

.audit-field select {
  appearance: none;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--fg);
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7B8D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.audit-field select:hover {
  border-color: var(--accent-dim);
}

.audit-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.audit-form-actions {
  margin-top: 24px;
}

.audit-form-note {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 16px;
}

/* Audit form - mobile */
@media (max-width: 640px) {
  .audit-form-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .audit-form {
    padding: 20px;
  }
  .audit-form-header h2 {
    font-size: 22px;
  }
  .audit-field select {
    font-size: 14px;
    padding: 10px 14px;
    padding-right: 32px;
  }
}





/* SIGNAL PERFORMANCE PROOF CARD */
.proof-card { background: var(--card); border: 1px solid var(--border-ghost);
  border-radius: var(--radius-xl); padding: 40px; max-width: 860px; margin: 0 auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 20px 60px -20px rgba(0,0,0,0.5),
              0 1px 3px rgba(0,0,0,0.06);
  position: relative; overflow: hidden;
  transform-style: preserve-3d;
  perspective: 300px;
  backface-visibility: hidden;
  will-change: transform;
}
#proof { perspective: 600px; }
#approach { perspective: 600px; }
.proof-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-dim), var(--accent),
  var(--accent-dim), transparent); opacity: 0.6; }
.proof-header { text-align: center; margin-bottom: 36px; }
.proof-header .eyebrow { display: block; margin-bottom: 10px; }
.proof-header h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.proof-header p { font-size: 15px; color: var(--muted); max-width: 580px; margin: 0 auto; line-height: 1.5; }
.proof-metrics { display: flex; flex-direction: column; gap: 24px; }
.proof-metric { display: flex; flex-direction: column; gap: 8px; }
.proof-metric-label { font-size: 13px; font-weight: 600; color: var(--fg); text-align: center;
  transform: translateZ(15px); }
.proof-metric-bar { height: 28px; display: flex; align-items: center; }
.proof-bar-track { position: relative; width: 100%; height: 10px; background: var(--bg-3);
  border-radius: 5px; overflow: hidden; display: flex; align-items: center;
  transform-style: preserve-3d; }
.proof-bar-before { position: absolute; left: 0; top: 0; height: 100%;
  background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 5px;
  display: flex; align-items: center; justify-content: flex-start; padding-left: 8px;
  font-size: 10px; color: var(--muted); font-weight: 600;
  transition: width 0.6s var(--ease-out);
  transform: translateZ(3px); }
.proof-bar-after { position: absolute; right: 0; top: 0; height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent)); border-radius: 5px;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
  font-size: 10px; color: white; font-weight: 600;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: width 0.6s var(--ease-out) 0.1s;
  transform: translateZ(5px); }
.proof-metric-change { display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: 12px; color: var(--muted);
  transform: translateZ(10px); }
.proof-arrow { color: var(--accent); font-size: 13px; }
.proof-from { color: var(--muted); text-decoration: line-through; }
.proof-to { color: var(--fg); font-weight: 600; }
.proof-after-label { color: var(--accent); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; }
.proof-note { text-align: center; font-size: 11px; color: var(--muted); margin-top: 24px;
  padding-top: 16px; border-top: 1px solid var(--border-ghost); line-height: 1.4; }

/* ---- Dynamic 3D + scroll animation ---- */
.proof-card:hover {
  transform: translateY(-6px) rotateX(6deg) scale(1.02);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.4), 0 0 30px rgba(59, 130, 246, 0.2);
}

@media (max-width: 640px) {
  .proof-card { padding: 24px 20px; border-radius: var(--radius-lg); }
  .proof-header h2 { font-size: 20px; }
  .proof-header p { font-size: 13px; }
  .proof-metric-label { font-size: 12px; }
  .proof-bar-after { font-size: 9px; padding-right: 6px; }
  .proof-metric-change { font-size: 11px; flex-wrap: wrap; }
}

/* HERO SIGNAL PAYLOAD */
.server-payload-card {
  margin-top: 20px;
  position: relative;
  transform-style: preserve-3d;
  perspective: 800px;
  background: rgba(15, 23, 42, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: var(--radius-md);
  overflow: hidden;
  width: 100%;
  max-width: min(420px, 100%);
  padding: 2px 0;
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.35), 0 0 30px rgba(59, 130, 246, 0.25);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
  will-change: transform;
  cursor: default;
}

.server-payload-card:hover {
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(59, 130, 246, 0.5);
  border-color: rgba(255, 255, 255, 0.6);
}
.payload-header { display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--bg-2); border-bottom: 1px solid var(--border-ghost); }
.payload-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 8px #22c55e; animation: payload-pulse 2s ease-in-out infinite; }
@keyframes payload-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.payload-label { font-size: 11px; font-weight: 600; color: var(--fg);
  text-transform: uppercase; letter-spacing: 0.04em; }
.payload-code { margin: 0; padding: 12px 16px; font-family: 'JetBrains Mono','Fira Code',
  ui-monospace, monospace; font-size: 11px; line-height: 1.55; color: var(--fg);
  white-space: pre; tab-size: 2; overflow-x: auto; background: var(--bg-2);
  border-radius: 0 0 var(--radius-md) var(--radius-md); height: auto; }
.payload-key { color: var(--accent); font-weight: 500; }
.payload-string { color: #a5d6a7; }

/* HERO JUMP LINK */
.hero-jump { display: flex; justify-content: center; margin-top: 24px; }
.hero-jump-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent;
  border: 1px solid var(--border); color: var(--fg); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 16px; border-radius: var(--radius-md);
  text-decoration: none; transition: all var(--dur-fast) var(--ease-out); }
.hero-jump-btn:hover { border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  transform: translateY(1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent); }
.hero-jump-arrow { font-size: 14px; transition: transform var(--dur-fast); display: inline-block; }
.hero-jump-btn:hover .hero-jump-arrow { transform: translateY(2px); }

/* AUDIT FORM - BUDGET FIELD */
.audit-form-row-full { grid-template-columns: 1fr !important; margin-top: 4px; }
.audit-field-optional { font-weight: 400; color: var(--muted); font-size: 12px; }


/* ============================================================
   3D GLASSMORPHISM + TILT — Hero Signal Payload Card
   ============================================================ */

.payload-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 22%, transparent),
    color-mix(in srgb, var(--green) 18%, transparent) 50%,
    transparent 80%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(135deg, rgba(0,0,0,0.12) 0%, transparent 60%);
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.12) 0%, transparent 60%);
}

.server-payload-card:hover .payload-glow {
  opacity: 1;
}

.server-payload-card > * {
  position: relative;
  z-index: 1;
  color: #E2E8F0;
}

/* ============================
   3D HOVER LIFT — Approach Step Cards
   ============================ */

/* ============================
   3D HOVER LIFT — Case Study Cards
   ============================ */

.case-study-card {
  position: relative;
  transform-style: preserve-3d;
  perspective: 300px;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.case-study-card .cs-headline {
  transform: translateZ(15px);
}

.case-study-card .cs-metric-val,
.case-study-card .cs-number {
  transform: translateZ(40px);
}

.case-study-card .cs-metric-desc,
.case-study-card .cs-impact-text,
.case-study-card .cs-tech-pill {
  transform: translateZ(20px);
}

.case-study-card:hover {
  transform: translateY(-6px) rotateX(8deg) scale(1.03);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25), 0 0 25px rgba(59, 130, 246, 0.3);
}

/* ============================
   FLOATING 3D ANIMATION — Tech Stack Badges
   ============================ */

.tech-badge-logo {
  transform-style: preserve-3d;
  will-change: transform;
}

@keyframes tech-float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-6px) rotate(0.6deg) scale(1.015);
  }
}

@keyframes tech-float-reverse {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-4px) rotate(-0.4deg) scale(1.01);
  }
}

.tech-badge-logo.is-float-1 { animation: tech-float 4.2s ease-in-out infinite; }
.tech-badge-logo.is-float-2 { animation: tech-float-reverse 3.8s ease-in-out infinite; }
.tech-badge-logo.is-float-3 { animation: tech-float 5.1s ease-in-out infinite; }
.tech-badge-logo.is-float-4 { animation: tech-float-reverse 4.5s ease-in-out infinite; }
.tech-badge-logo.is-float-5 { animation: tech-float 3.5s ease-in-out infinite; }
.tech-badge-logo.is-float-6 { animation: tech-float-reverse 4.8s ease-in-out infinite; }
.tech-badge-logo.is-float-7 { animation: tech-float 5.4s ease-in-out infinite; }
.tech-badge-logo.is-float-8 { animation: tech-float-reverse 4.0s ease-in-out infinite; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .server-payload-card,
  .approach-step,
  .case-study-card,
  .tech-badge-logo {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ============================
   POLISH: fix vertical clipping on payload card
   ============================ */

.server-payload-card {
  padding: 2px 0;
}

.payload-code {
  height: auto;
  padding: 14px 18px;
  line-height: 1.6;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


/* Glass light reflection shimmer on hover */
.case-study-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.25) 50%, transparent 55%);
  transform: rotate(30deg) translateY(-100%);
  transition: transform 0.6s ease-in-out;
  pointer-events: none;
  z-index: 2;
}

.case-study-card:hover::after {
  transform: rotate(30deg) translateY(100%);
}

.form-page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 16px 80px;
}

.form-header {
  text-align: center;
  margin-bottom: 40px;
}

.form-header h1 {
  margin-bottom: 12px;
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
}

.form-header p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

.form-header .form-sub {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.form-section {
  margin-bottom: 24px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.form-section-title {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-ghost);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-theme="light"] .form-section-title,
html[data-theme="light"] .field-row label {
  color: var(--text);
}

@media (max-width: 600px) {
  .form-page { padding: 32px 8px 64px; }
  .form-section { padding: 20px 16px; }
  #problem { padding: 36px 0; }
}

#problem {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  border-top: 1px solid var(--border-ghost);
  background: linear-gradient(180deg, var(--bg), var(--bg-2) 50%, var(--bg));
}

#problem::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -200px;
  width: 500px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.08), transparent 65%);
  pointer-events: none;
}

#problem .two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: start;
}

#faq {
  position: relative;
  padding: 80px 0;
}

.faq-list {
  display: grid;
  gap: 12px;
  max-width: 100%;
}

.faq-item {
  position: relative;
  overflow: hidden;
  padding: 24px 28px;
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-lg);
  background: var(--card);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.faq-item:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 12%, transparent);
}

.faq-question {
  color: var(--text);
  font-weight: 700;
}

.faq-answer {
  margin-top: 10px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.logo-wall-section {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  border-block: 1px solid var(--border-ghost);
  background: var(--bg-2);
}

.logo-wall-section > .container > .eyebrow {
  display: block;
  margin-bottom: 36px;
  text-align: center;
}

.logo-wall-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(600px, 100vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.05), transparent 60%);
  pointer-events: none;
}

.logo-wall {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 32px;
  max-width: 900px;
  margin: 0 auto;
}

.logo-wall-item {
  padding: 12px 18px;
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}

.logo-wall-item:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  color: var(--text);
}

@media (max-width: 700px) {
  #problem .two-col { grid-template-columns: 1fr; }
  .faq-item { padding: 20px; }
  .logo-wall { gap: 12px; }
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

html[data-theme="light"] .brand-text strong,
html[data-theme="light"] .footer-brand strong {
  color: var(--text);
}

html[data-theme="light"] .footer-brand p {
  color: var(--text-secondary);
}

html[data-theme="light"] .stat-number {
  color: var(--text);
}

html[data-theme="light"] .stat-label {
  color: var(--text-secondary);
}

html[data-theme="light"] .credential-number {
  color: var(--text);
}

html[data-theme="light"] .credential-label {
  color: var(--text-secondary);
}

html[data-theme="light"] .hero-jump-btn {
  color: var(--text);
  border-color: var(--border);
}

html.theme-no-transition,
html.theme-no-transition * {
  transition: none !important;
}

html[data-theme="light"] .comparison-table th,
html[data-theme="light"] .pricing-price {
  color: var(--text);
}

html[data-theme="light"] .pricing-price > span,
html[data-theme="light"] .pricing-price .sub {
  color: var(--text-secondary);
}

.field-row {
  margin-bottom: 18px;
}

.field-row label {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.field-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}

.field-input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

.field-input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.field-textarea {
  min-height: 96px;
  resize: vertical;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

@media (max-width: 480px) {
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; }
}


/* ============================================================
   UPDATED 3D EFFECT SYSTEM — ALL SECTIONS
   Unified section stage perspective, spatial depth, and vibrant blue-cyan glow
   ============================================================ */

/* 1. SECTION 3D STAGE & VOLUMETRIC DEPTH */
.section,
.hero,
.credentials-section,
.tech-stack-section,
.logo-wall-section,
.footer-cta-section {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.section > .container,
.hero > .container,
.credentials-grid,
.solutions-grid,
.who-grid,
.pricing-grid,
.process-grid,
.footer-cta-inner {
  transform-style: preserve-3d;
}

/* Section Headers (Stable, crisp, and high-visibility) */
.section-header {
  position: relative;
  z-index: 2;
}

/* 2. ALL SECTION CARDS & MODULES (3D CONTAINERS) */
.solution,
.who-card,
.pricing-card,
.faq-item,
.process-step,
.approach-step,
.stat-item,
.metric-item,
.proof-card,
.case-study-card,
.team-card,
.agency-cta-card,
.audit-form,
.audit-form-section,
.footer-cta-action-card,
.problem-card,
.server-payload-card,
.geo-card,
.credential-card,
.comparison-table-wrap,
.logo-wall-item {
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
  will-change: transform, box-shadow, border-color;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}

/* 3. PRIMARY 3D CARD HOVER: Lift, Spatial Tilt, and Electric Blue-Cyan Glow */
.solution:hover,
.who-card:hover,
.pricing-card:hover,
.process-step:hover,
.approach-step:hover,
.proof-card:hover,
.case-study-card:hover,
.team-card:hover,
.agency-cta-card:hover,
.audit-form:hover,
.footer-cta-action-card:hover,
.problem-card:hover,
.geo-card:hover,
.credential-card:hover,
.comparison-table-wrap:hover {
  transform: translateY(-6px) rotateX(4.5deg) scale(1.015);
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.48),
              0 0 30px rgba(6, 182, 212, 0.28),
              0 0 0 1px rgba(34, 211, 238, 0.35);
  border-color: rgba(34, 211, 238, 0.5) !important;
}

/* Featured / Active Card Priority */
.pricing-card.featured:hover {
  transform: translateY(-8px) rotateX(5deg) scale(1.02) !important;
  box-shadow: 0 28px 56px -10px rgba(0, 0, 0, 0.55),
              0 0 36px rgba(6, 182, 212, 0.38),
              0 0 0 1px rgba(34, 211, 238, 0.5) !important;
}

/* Compact 3D Hover for Stats, Badges, and FAQs */
.stat-item:hover,
.metric-item:hover,
.faq-item:hover,
.logo-wall-item:hover {
  transform: translateY(-4px) rotateX(3deg) scale(1.02);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.35),
              0 0 22px rgba(6, 182, 212, 0.22),
              0 0 0 1px rgba(34, 211, 238, 0.25);
  border-color: rgba(34, 211, 238, 0.45) !important;
}

/* 4. INTERNAL 3D Z-DEPTH LAYERING (Icons, Headlines, Numbers, Badges) */
.solution:hover .solution-icon,
.who-card:hover .who-icon,
.geo-card:hover .geo-flag,
.case-study-card:hover .cs-headline,
.footer-cta-action-card:hover .footer-cta-card-top,
.team-card:hover .team-role {
  transform: translateZ(22px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.solution:hover h3,
.who-card:hover h3,
.geo-card:hover h3,
.pricing-card:hover .pricing-price,
.case-study-card:hover .cs-metric-val,
.credential-card:hover .credential-number,
.footer-cta-action-card:hover .footer-cta-btns {
  transform: translateZ(32px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .section,
  .hero,
  .solution:hover,
  .who-card:hover,
  .pricing-card:hover,
  .process-step:hover,
  .approach-step:hover,
  .proof-card:hover,
  .case-study-card:hover,
  .team-card:hover,
  .agency-cta-card:hover,
  .audit-form:hover,
  .footer-cta-action-card:hover,
  .problem-card:hover,
  .geo-card:hover,
  .credential-card:hover,
  .comparison-table-wrap:hover,
  .stat-item:hover,
  .metric-item:hover,
  .faq-item:hover,
  .logo-wall-item:hover {
    transform: none !important;
  }
}

/* ============================================================
   MODERN CARD POLISH & FROSTED GLASS SURFACES — ALL SECTIONS
   ============================================================ */

.solution,
.who-card,
.pricing-card,
.faq-item,
.process-step,
.approach-step,
.proof-card,
.case-study-card,
.team-card,
.agency-cta-card,
.audit-form,
.problem-card {
  background: rgba(13, 21, 39, 0.72) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

html.theme-light .solution,
html.theme-light .who-card,
html.theme-light .pricing-card,
html.theme-light .faq-item,
html.theme-light .process-step,
html.theme-light .approach-step,
html.theme-light .proof-card,
html.theme-light .case-study-card,
html.theme-light .team-card,
html.theme-light .agency-cta-card,
html.theme-light .audit-form,
html.theme-light .problem-card {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Modern Team Photo Border & Soft Ambient Glow */
.team-photo-img {
  border-radius: var(--radius-lg);
  border: 2px solid rgba(34, 211, 238, 0.35);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 24px rgba(37, 99, 235, 0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.team-card:hover .team-photo-img {
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5), 0 0 32px rgba(34, 211, 238, 0.35);
  transform: translateY(-3px) scale(1.02);
}

/* Modernized Tech Stack Badges */
.tech-badge {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(13, 21, 39, 0.65);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

.tech-badge:hover {
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 18px rgba(34, 211, 238, 0.25);
  transform: translateY(-3px);
}

/* ============================================================
   LIGHT THEME OVERRIDES — CASE STUDIES & PRICING
   ============================================================ */

html.theme-light .cs-headline,
html[data-theme="light"] .cs-headline {
  color: #0F172A !important;
}

html.theme-light .cs-number,
html[data-theme="light"] .cs-number {
  color: rgba(37, 99, 235, 0.25) !important;
  text-shadow: none !important;
}

html.theme-light .cs-problem,
html[data-theme="light"] .cs-problem,
html.theme-light .cs-solution-text,
html[data-theme="light"] .cs-solution-text {
  color: #334155 !important;
}

html.theme-light .cs-solution-label,
html[data-theme="light"] .cs-solution-label {
  color: #2563EB !important;
}

html.theme-light .cs-tech-pill,
html[data-theme="light"] .cs-tech-pill {
  color: #1E293B !important;
  background: rgba(241, 245, 249, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

html.theme-light .cs-results-box,
html[data-theme="light"] .cs-results-box {
  background: rgba(248, 250, 252, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html.theme-light .cs-results-label,
html[data-theme="light"] .cs-results-label {
  color: #64748B !important;
}

html.theme-light .cs-metric,
html[data-theme="light"] .cs-metric {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html.theme-light .cs-metric-val,
html[data-theme="light"] .cs-metric-val {
  color: #059669 !important;
  text-shadow: none !important;
}

html.theme-light .cs-metric-desc,
html[data-theme="light"] .cs-metric-desc {
  color: #475569 !important;
}

html.theme-light .cs-impact-text,
html[data-theme="light"] .cs-impact-text {
  color: #1E293B !important;
}

html.theme-light .pricing-card,
html[data-theme="light"] .pricing-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 0, 0, 0.09) !important;
}

html.theme-light .pricing-card.featured,
html[data-theme="light"] .pricing-card.featured {
  background: linear-gradient(165deg, rgba(239, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%) !important;
  border-color: rgba(37, 99, 235, 0.5) !important;
}

html.theme-light .pricing-price,
html[data-theme="light"] .pricing-price {
  color: #0F172A !important;
  text-shadow: none !important;
}

html.theme-light .pricing-desc,
html[data-theme="light"] .pricing-desc,
html.theme-light .pricing-features li,
html[data-theme="light"] .pricing-features li {
  color: #334155 !important;
}

html.theme-light #case-study .section-header h2,
html[data-theme="light"] #case-study .section-header h2 {
  color: #0F172A !important;
  text-shadow: none !important;
}

html.theme-light #case-study .section-header .eyebrow,
html[data-theme="light"] #case-study .section-header .eyebrow {
  color: #2563EB !important;
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.15) !important;
}

/* ===================================================================
   Eye Comfort & Visual Accessibility Improvements
   =================================================================== */

/* Reduced Motion Support - Respects user's motion preferences */
@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;
  }

  .hero-laser-scan,
  .laser-line,
  .laser-glow,
  .hud-pulse,
  .zen-live-pulse,
  .bar-1,
  .bar-2,
  .bar-3,
  .bar-4,
  .radar-ring {
    animation: none !important;
  }

  .ticker-track {
    animation: none !important;
  }
}

/* Improved Typography for Eye Comfort */
p, li, td, th {
  line-height: 1.7;
  max-width: 75ch;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* Enhanced Dark Mode Contrast */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #F1F5F9;
    --text-secondary: #CBD5E1;
    --muted: #94A3B8;
  }
}

/* Light Mode for Eye Comfort (Alternative to dark mode) */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F8FAFC;
    --bg-2: #F1F5F9;
    --bg-3: #E2E8F0;
    --bg-elevated: #FFFFFF;
    --card: #FFFFFF;
    --card-hover: #F8FAFC;
    --card-2: #F1F5F9;
    --border: rgba(148, 163, 184, 0.2);
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-ghost: rgba(0, 0, 0, 0.03);
    --text: #1E293B;
    --text-bright: #0F172A;
    --text-secondary: #475569;
    --muted: #64748B;
    --muted-light: #94A3B8;
    --accent: #2563EB;
    --accent-bright: #3B82F6;
    --accent-dim: #1D4ED8;
    --accent-subtle: rgba(37, 99, 235, 0.1);
    --accent-glow: rgba(59, 130, 246, 0.2);
    --gradient-accent: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    --gradient-accent-glow: linear-gradient(135deg, rgba(37,99,235,0.2) 0%, rgba(59,130,246,0.15) 100%);
    --gradient-header: linear-gradient(180deg, rgba(37,99,235,0.1) 0%, rgba(59,130,246,0.05) 50%, transparent 100%);
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(148, 163, 184, 0.2);
    --glass-blur: blur(16px) saturate(120%);
  }
}

/* Focus Indicators for Keyboard Navigation */
:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 2px;
}

/* Smooth Scrolling for Better Reading Experience */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Improved Contrast for Secondary Text */
.text-secondary,
.muted {
  color: var(--text-secondary);
  opacity: 0.9;
}

/* Better Card Contrast */
.card {
  background: var(--card);
  border: 1px solid var(--border);
}

/* Enhanced Button Contrast */
.btn {
  transition: all var(--dur-fast) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover {
    transform: none;
  }
}
/* ============================================
   UI AUDIT FIXES (2026-10)
   ============================================ */

/* Elements that sit on accent/dark fills keep white text in every theme */
.brand-mark,
.solution-feature .check,
.service-card-features li .check,
.service-card-visual .service-icon-lg,
.skip-link:focus { color: #ffffff; }
::selection { color: #ffffff; }

/* Centered section intros */
#check .section-header p,
#problem .section-header p,
#team .section-header p { margin-left: auto; margin-right: auto; }
#team .section-header { text-align: center; margin-left: auto; margin-right: auto; }

/* Audit-scope grid: 7th card spans the row instead of leaving a gap */
#check .solutions-grid > .solution:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }

/* Feature lists: single column so items don't wrap one word per line */
.solution-features { grid-template-columns: 1fr !important; }

/* Problem cards: impact box readable in light theme */
:root[data-theme="light"] .problem-impact-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-left: 3px solid #F59E0B;
}
:root[data-theme="light"] .problem-impact-label { color: #B45309; }
:root[data-theme="light"] .problem-impact { color: var(--text-secondary); }

/* Before/after bars: both anchored left, the shorter bar drawn on top */
.proof-bar-after { left: 0; right: auto; z-index: 1; }
.proof-bar-before { z-index: 2; justify-content: flex-end; padding: 0 8px; background: #64748B; color: #ffffff; }
.proof-bar-track--down .proof-bar-before { z-index: 1; }
.proof-bar-track--down .proof-bar-after { z-index: 2; }

/* Case-study pager: small dots with an invisible 44px tap target */
.case-study-dots { gap: 4px; }
.case-study-dots .dot {
  min-width: 0; min-height: 0;
  width: 24px; height: 24px;
  background: transparent !important;
  position: relative;
  box-shadow: none !important;
}
.case-study-dots .dot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--border);
  transition: width 0.25s ease, background 0.25s ease;
}
.case-study-dots .dot.active::before { width: 24px; border-radius: 4px; background: var(--accent); }

/* Hero chips stay inside the visual instead of clipping/overlapping */
.hero-float-chip.chip-left { left: 16px; top: auto; bottom: 22%; }
.hero-float-chip.chip-right { right: 16px; bottom: 6%; }

/* Footer */
.footer-bottom p { margin-left: auto; margin-right: auto; max-width: none; }
.footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Mobile: hero must never exceed the viewport */
@media (max-width: 768px) {
  .hero { grid-template-columns: minmax(0, 1fr) !important; }
  .hero > *, .hero-copy, .hero-visual-stage, .hero-zen-card { min-width: 0; max-width: 100%; }
  .hero-cta .btn, .trust-badge { white-space: normal; }
  .comparison-table { table-layout: fixed; font-size: 12px; }
  .comparison-table th, .comparison-table td { padding: 10px 8px; overflow-wrap: anywhere; }
}

/* ============================================
   READABILITY & EYE COMFORT (2026-10)
   ============================================ */

/* Self-hosted Inter (next/font) for all UI text; mono only for short labels/code */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --font-sans: var(--font-inter), "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: var(--font-jetbrains), "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-optical-sizing: auto;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
}
p, li { line-height: 1.65; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.015em; }
p { text-wrap: pretty; }

/* Running text: sans instead of monospace */
.solution-feature, .marquee-item, .ticker-item, .stat-label, .credential-label,
.logo-wall-item, .pricing-name, .footer-cta-trust, .top-bar-label, .top-bar-right,
.hero-meta-list li, .problem-impact-label, .footer-bottom, .footer-cta-card-code,
.solution-feature .check, .zen-badge-text {
  font-family: var(--font-sans);
  letter-spacing: 0;
}

/* Minimum comfortable sizes */
.solution-feature, .pricing-features li, .faq-answer, .pricing-desc,
.section-header p, .solution p, .problem-copy p, .who-card p, .approach-step p { font-size: 15px; }
.solution-feature { line-height: 1.55; }
.cs-metric-desc, .cs-tech-pill, .cs-platforms, .cs-industry-badge, .cs-results-label,
.proof-note, .proof-after-label, .proof-to, .geo-note, .credential, .logo-wall-item,
.trust-badge, .hero-badge, .stat-label, .credential-label, .tech-label { font-size: 13px; }
.eyebrow, .pricing-popular, .problem-stat-badge, .problem-impact-label { font-size: 12px; }
.problem-impact { font-size: 14.5px; }
.marquee-item, .ticker-item { font-size: 12.5px; }
.top-bar-label, .top-bar-logo, .top-bar-right, .brand-text small { font-size: 11px; }
.footer-col a, .footer-brand p, .footer-email { font-size: 14px; }
.footer-bottom, .footer-cta-trust { font-size: 12.5px; }
.footer-cta-card-code { font-size: 11px; }
.form-sub, .form-section-title, #audit-form label, .audit-form-note { font-size: 14px; }

/* Contrast: dark theme */
:root[data-theme="dark"] { --muted: #94A3B8; --text-secondary: #CBD5E1; }
:root[data-theme="dark"] .comparison-table td.highlight { color: #34D399; }
:root[data-theme="dark"] .cs-industry-badge,
:root[data-theme="dark"] .team-role { color: #60A5FA; }
:root[data-theme="dark"] .geo-note { color: #94A3B8; }

/* Contrast: light theme */
:root[data-theme="light"] .pricing-name,
:root[data-theme="light"] .pricing-popular { color: #0E7490; }
:root[data-theme="light"] .problem-stat-badge { color: #B91C1C; }
:root[data-theme="light"] .brand-text small,
:root[data-theme="light"] .hero-meta-list li { color: #64748B; }
:root[data-theme="light"] .comparison-table td.highlight { color: #047857; }

/* Email links */
.footer-email {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: normal;
}
.footer-email:hover { text-decoration: underline; }
.toast a { color: inherit; text-decoration: underline; }

/* Legal pages (privacy / terms) */
.legal-page { max-width: 760px; margin: 0 auto; padding: 64px 0 80px; }
.legal-page h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 12px; }
.legal-page .legal-updated { color: var(--muted); margin-bottom: 36px; font-size: 14px; }
.legal-page section { margin-bottom: 32px; }
.legal-page h2 { font-size: 22px; margin-bottom: 10px; }
.legal-page p { font-size: 16.5px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 12px; }
.legal-page a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.credential { font-size: 12.5px; }
:root[data-theme="light"] .geo-note,
:root[data-theme="light"] .footer-cta-trust,
:root[data-theme="light"] .footer-cta-card-code { color: #475569; }
:root[data-theme="dark"] .form-section-title,
:root[data-theme="dark"] .proof-after-label,
:root[data-theme="dark"] .legal-page a,
:root[data-theme="dark"] .footer-email { color: #60A5FA; }
.solution header { margin-bottom: 10px; }
.solution > p { margin-bottom: 14px; }

/* ============================================================
   LIQUID GLASS THEME (2026-10)
   Translucent layered surfaces over a soft colour field.
   Hover never moves cards (prevents edge hover flicker).
   ============================================================ */
:root[data-theme="light"], :root:not([data-theme]) {
  --lg-bg: #EEF3FA;
  --lg-blob-1: rgba(59, 130, 246, 0.26);
  --lg-blob-2: rgba(34, 211, 238, 0.22);
  --lg-blob-3: rgba(139, 92, 246, 0.16);
  --lg-surface: rgba(255, 255, 255, 0.58);
  --lg-surface-hover: rgba(255, 255, 255, 0.74);
  --lg-sheen: rgba(255, 255, 255, 0.55);
  --lg-border: rgba(255, 255, 255, 0.8);
  --lg-border-hover: rgba(37, 99, 235, 0.35);
  --lg-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -8px rgba(15, 23, 42, 0.12);
  --lg-shadow-hover: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 44px -10px rgba(37, 99, 235, 0.22);
  --lg-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  --lg-bar: rgba(255, 255, 255, 0.62);
}
:root[data-theme="dark"] {
  --lg-bg: #070B16;
  --lg-blob-1: rgba(37, 99, 235, 0.30);
  --lg-blob-2: rgba(6, 182, 212, 0.18);
  --lg-blob-3: rgba(124, 58, 237, 0.20);
  --lg-surface: rgba(20, 28, 46, 0.52);
  --lg-surface-hover: rgba(28, 38, 60, 0.62);
  --lg-sheen: rgba(255, 255, 255, 0.07);
  --lg-border: rgba(255, 255, 255, 0.12);
  --lg-border-hover: rgba(96, 165, 250, 0.45);
  --lg-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.55);
  --lg-shadow-hover: 0 18px 44px -10px rgba(37, 99, 235, 0.35);
  --lg-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --lg-bar: rgba(10, 15, 28, 0.6);
}

/* Colour field behind everything */
html body { background: var(--lg-bg) !important; }
html body::before {
  content: "";
  position: fixed;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none;
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
  background:
    radial-gradient(42% 38% at 10% 6%, var(--lg-blob-1), transparent 72%),
    radial-gradient(38% 34% at 92% 24%, var(--lg-blob-2), transparent 72%),
    radial-gradient(46% 40% at 28% 78%, var(--lg-blob-3), transparent 72%),
    radial-gradient(40% 34% at 86% 96%, var(--lg-blob-1), transparent 72%) !important;
}
html body::after { display: none !important; }

/* Section bands become transparent so the field shows through */
html body .hero, html body .section, html body section[class*="section"],
html body .credentials-section, html body .logo-wall-section, html body .tech-stack-section,
html body .site-footer, html body #process, html body #problem, html body #team,
html body #who, html body #faq, html body #agency, html body #solutions, html body #case-study,
html body #audit-booking {
  background: transparent !important;
}

/* Glass surfaces */
html body :is(.solution, .who-card, .pricing-card, .faq-item, .process-step, .approach-step,
  .proof-card, .case-study-card, .team-card, .agency-cta-card, .audit-form, .problem-card,
  .comparison-table-wrap, .geo-card, .footer-cta-action-card, .server-payload-card,
  .stat-item, .metric-item, .logo-wall-item, .faq-cta-bar, .footer-cta-inner) {
  background: linear-gradient(180deg, var(--lg-sheen) 0%, transparent 42%), var(--lg-surface) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-shadow), var(--lg-highlight) !important;
  transform: none !important;
  transform-style: flat !important;
  perspective: none !important;
  will-change: auto !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
html body :is(.solution, .who-card, .pricing-card, .faq-item, .process-step, .approach-step,
  .proof-card, .case-study-card, .team-card, .agency-cta-card, .problem-card,
  .geo-card, .footer-cta-action-card, .stat-item, .metric-item, .logo-wall-item):hover,
html body .pricing-card.featured:hover {
  background: linear-gradient(180deg, var(--lg-sheen) 0%, transparent 42%), var(--lg-surface-hover) !important;
  border-color: var(--lg-border-hover) !important;
  box-shadow: var(--lg-shadow-hover), var(--lg-highlight) !important;
  transform: none !important;
}
html body .audit-form:hover, html body .comparison-table-wrap:hover { transform: none !important; }

/* No inner 3D pop on hover */
html body :is(.solution, .who-card, .geo-card, .pricing-card, .case-study-card, .credential-card,
  .footer-cta-action-card, .team-card) :is(h3, .solution-icon, .who-icon, .geo-flag, .pricing-price,
  .cs-headline, .cs-metric-val, .credential-number, .footer-cta-btns, .footer-cta-card-top, .team-role) {
  transform: none !important;
}
html body :is(.section > .container, .hero > .container, .credentials-grid, .solutions-grid, .who-grid,
  .pricing-grid, .process-grid, .footer-cta-inner) {
  transform-style: flat !important;
  perspective: none !important;
}

/* Pricing: featured card emphasised with an accent rim, not movement */
html body .pricing-card.featured {
  border: 1.5px solid rgba(37, 99, 235, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08), var(--lg-shadow-hover), var(--lg-highlight) !important;
}
html body .pricing-card::before { opacity: 0.35 !important; transition: none !important; }
html body .pricing-card.fade-in { transform: none !important; transition: opacity 0.5s ease !important; }

/* Glass header + top bars */
html body .site-header {
  background: var(--lg-bar) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--lg-border) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
html body .top-bar, html body .top-bar-marquee {
  background: var(--lg-bar) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

/* Glass secondary buttons */
html body .btn-ghost {
  background: var(--lg-surface) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-highlight);
}

/* Lighter blur on small screens for smooth scrolling */
@media (max-width: 768px) {
  html body :is(.solution, .who-card, .pricing-card, .faq-item, .process-step, .approach-step,
    .proof-card, .case-study-card, .team-card, .agency-cta-card, .audit-form, .problem-card,
    .comparison-table-wrap, .geo-card, .footer-cta-action-card, .server-payload-card,
    .stat-item, .metric-item, .logo-wall-item, .faq-cta-bar, .footer-cta-inner) {
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="light"] { --lg-surface: rgba(255, 255, 255, 0.92); }
  :root[data-theme="dark"] { --lg-surface: rgba(20, 28, 46, 0.92); }
}

/* ============================================================
   3D DEPTH SYSTEM (2026-10) — driven by /scripts/depth-3d.js
   Pointer tilt + Z-lift + moving glare on every card and pill,
   3D rise-in for cards and section headers on scroll.
   ============================================================ */
:root[data-theme="light"], :root:not([data-theme]) { --d3-glare: rgba(255, 255, 255, 0.75); --d3-shadow: rgba(30, 64, 175, 0.18); }
:root[data-theme="dark"] { --d3-glare: rgba(148, 197, 255, 0.12); --d3-shadow: rgba(0, 0, 0, 0.6); }

html:root body .d3.d3.d3 {
  --d3-rx: 0deg; --d3-ry: 0deg; --d3-tz: 0px;
  transform: perspective(1000px) rotateX(var(--d3-rx)) rotateY(var(--d3-ry)) translateZ(var(--d3-tz)) !important;
  transform-style: flat !important;
  backface-visibility: hidden;
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease, border-color 0.3s ease, background-color 0.3s ease,
    opacity 0.7s ease var(--d3-delay, 0ms), translate 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--d3-delay, 0ms),
    scale 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--d3-delay, 0ms) !important;
}
html:root body .d3.d3.d3.d3-hover {
  z-index: 3;
  transition:
    transform 0.14s ease-out,
    box-shadow 0.35s ease, border-color 0.3s ease, background-color 0.3s ease !important;
}

/* Cards: deep shadow + glare that follows the pointer */
html:root body .d3-card.d3-card.d3-hover,
html:root body .d3-flat.d3-flat.d3-hover {
  background:
    radial-gradient(circle at var(--d3-mx, 50%) var(--d3-my, 50%), var(--d3-glare), transparent 46%),
    linear-gradient(180deg, var(--lg-sheen) 0%, transparent 42%),
    var(--lg-surface-hover) !important;
  border-color: var(--lg-border-hover) !important;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 28px 60px -18px var(--d3-shadow),
    0 0 0 1px var(--lg-border-hover),
    var(--lg-highlight) !important;
}
/* Inner content floats above the card surface */
html:root body .d3-card.d3-hover :is(h3, .pricing-price, .cs-headline, .solution-icon, .who-icon, .geo-flag, .team-photo) {
  transform: translateZ(26px) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
html:root body .d3-card :is(h3, .pricing-price, .cs-headline, .solution-icon, .who-icon, .geo-flag, .team-photo) {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Pills, badges, logo wall: lift + accent rim */
html:root body .d3-pill { cursor: default; }
html:root body .d3-pill.d3-pill.d3-hover {
  border-color: var(--lg-border-hover) !important;
  box-shadow: 0 12px 26px -10px var(--d3-shadow), 0 0 0 1px var(--lg-border-hover) !important;
}
html:root body .logo-wall-item.d3-hover,
html:root body .tech-badge-logo.d3-hover {
  background: linear-gradient(180deg, var(--lg-sheen) 0%, transparent 60%), var(--lg-surface-hover) !important;
  color: var(--accent) !important;
}

/* Glass surfaces for small items that had none */
html body :is(.logo-wall-item, .tech-badge-logo, .credential, .cs-results-box) {
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
}

/* Each element tilts in its own 3D space (no shared context = stable hit-testing) */
html:root body :is(.solutions-grid, .pricing-grid, .process-grid, .who-grid, .geo-grid, .problem-grid,
  .logo-wall, .tech-badges, .hero-trust, .case-studies-track, .section > .container, .container) {
  transform-style: flat !important;
}

/* 3D rise-in on scroll (only for elements that start below the fold) */
html:root body .d3-rise:not(.d3-in) {
  opacity: 0;
  translate: 0 44px;
  scale: 0.94;
  pointer-events: none;
}
html:root body .d3 { transform-origin: 50% 50% !important; }
html body .section-header.d3-rise, html body .proof-header.d3-rise {
  transition: opacity 0.7s ease, translate 0.8s cubic-bezier(0.16, 1, 0.3, 1), scale 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html:root body .d3.d3.d3 { transform: none !important; transition: none !important; }
  html:root body .d3-rise:not(.d3-in) { opacity: 1; translate: none; scale: none; }
}

/* Neutralise legacy section-level 3D stages (they broke pointer hit-testing) */
html:root body :is(.section, .hero, section, .credentials-section, .tech-stack-section, .logo-wall-section,
  .footer-cta-section, .case-study-card, .case-studies-slider, .case-studies-track) {
  perspective: none !important;
  transform-style: flat !important;
}
html:root body :has(.d3) { perspective: none !important; transform-style: flat !important; }
html:root body .d3-inner { transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
html:root body .d3-inner.d3-hover {
  border-color: var(--lg-border-hover) !important;
  box-shadow: 0 6px 16px -8px var(--d3-shadow), 0 0 0 1px var(--lg-border-hover) !important;
  filter: brightness(1.04);
}
html:root body .d3-inner { transform: none !important; translate: none !important; }
html:root body .d3-frame.d3-frame.d3-hover {
  border-color: var(--lg-border-hover) !important;
  box-shadow: var(--lg-shadow-hover), var(--lg-highlight) !important;
}
html body .logo-wall-section .container { text-align: center; }
html body .logo-wall-section .eyebrow { display: inline-flex; margin-left: auto; margin-right: auto; }