/* =============================================
   ROOT / RESET
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-dark:    #04060F;
  --bg-dark2:   #080D1A;
  --bg-white:   #FFFFFF;
  --bg-light:   #F4F6FF;
  --bg-mid:     #EEF1FF;
  --purple:     #6D28D9;
  --purple-l:   #8B5CF6;
  --ocean:      #0891B2;
  --ocean-l:    #06B6D4;
  --pink:       #EC4899;
  --text-dark:  #0F172A;
  --text-mid:   #475569;
  --text-light: #94A3B8;
  --white:      #FFFFFF;
  --border-light: rgba(0,0,0,0.08);
  --border-dark:  rgba(255,255,255,0.08);
  --font-body:    'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --max-w:  1240px;
  --radius: 16px;
  --rsm:    10px;
}

html { scroll-behavior: smooth; overflow-x: hidden; background: var(--bg-dark); }
body {
  background: var(--bg-dark);
  background-image:
    radial-gradient(ellipse 70% 55% at 15% 5%, rgba(109,40,217,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 85% 15%, rgba(8,145,178,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 50% 95%, rgba(109,40,217,0.08) 0%, transparent 50%);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* =============================================
   COSMIC FLUID CANVAS (site-wide backdrop)
   ============================================= */
#neural-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  /* Continuous deep-space base. This is the ONE background behind the whole
     page: it shows wherever the WebGL scene or a section canvas does not
     paint (e.g. WebGL unavailable, canvas-less sections, masked canvas edges
     at every junction). It is a rich navy/violet/cyan nebula — NEVER pure
     black — so no section or seam can ever read as a black band. Spread
     evenly across the fixed viewport so every scroll position sits on a
     cohesive cosmic wash. */
  /* Large, heavily-overlapping soft radials on a visible deep-indigo floor
     (never near-black) => an EVEN cosmos with no dark gaps. Because this
     fixed layer is the dominant background and the per-section canvases are
     now only a faint sparkle, every junction shows this same even wash =>
     no dark troughs anywhere on the page. */
  background:
    radial-gradient(ellipse 120% 85% at 18% 8%,  rgba(109,40,217,0.17), transparent 66%),
    radial-gradient(ellipse 120% 85% at 82% 22%, rgba(6,182,212,0.11),  transparent 66%),
    radial-gradient(ellipse 130% 90% at 30% 48%, rgba(139,92,246,0.15), transparent 66%),
    radial-gradient(ellipse 120% 85% at 78% 70%, rgba(6,182,212,0.10),  transparent 66%),
    radial-gradient(ellipse 130% 90% at 40% 96%, rgba(109,40,217,0.16), transparent 68%),
    linear-gradient(180deg, #0f0c26 0%, #0c0a20 50%, #0d0a22 100%);
}

/* =============================================
   GRADIENT TEXT
   ============================================= */
@keyframes gradient-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-text {
  background: linear-gradient(270deg, var(--ocean-l), var(--purple-l), var(--pink), var(--purple-l), var(--ocean-l));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-flow 5s ease infinite;
}

/* =============================================
   SECTION SHARED
   ============================================= */
.section-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ocean-l);
  margin-bottom: 0.85rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1.1rem;
}
.section-sub {
  font-size: 1rem;
  color: var(--text-mid);
  max-width: 600px;
  line-height: 1.8;
  margin-bottom: 3rem;
}
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.light-section .section-title { color: var(--text-dark); }
.light-section .section-sub   { color: var(--text-mid); }
.light-section .section-label { color: var(--ocean); }

/* =============================================
   BUTTONS
   ============================================= */
@keyframes btn-glow-pulse {
  0%,100% { box-shadow: 0 0 18px rgba(109,40,217,0.5), 0 4px 20px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 0 36px rgba(109,40,217,0.8), 0 0 60px rgba(6,182,212,0.4), 0 4px 20px rgba(0,0,0,0.4); }
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.85rem;
  background: linear-gradient(135deg, var(--purple), var(--ocean));
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: btn-glow-pulse 3s ease-in-out infinite;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ocean), var(--purple));
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(109,40,217,0.7), 0 0 60px rgba(6,182,212,0.4); animation: none; }
.btn-primary > * { position: relative; z-index: 1; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.85rem;
  background: transparent;
  color: var(--white);
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-ghost:hover { border-color: var(--purple-l); color: var(--ocean-l); background: rgba(109,40,217,0.08); }
.btn-ghost.on-light { color: var(--text-dark); border-color: var(--border-light); }
.btn-ghost.on-light:hover { border-color: var(--purple); color: var(--purple); background: rgba(109,40,217,0.05); }

.btn-nav {
  display: inline-flex;
  padding: 0.55rem 1.2rem;
  background: linear-gradient(135deg, var(--purple), var(--ocean));
  color: var(--white);
  font-weight: 600;
  font-size: 0.83rem;
  border-radius: 50px;
  transition: all 0.3s;
}
.btn-nav:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(109,40,217,0.4); }
.btn-large { padding: 1.1rem 2.35rem; font-size: 1rem; }

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 2rem;
  background: #25D366;
  color: white;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s;
  margin: 0.5rem 0 1.25rem;
  font-size: 0.9rem;
}
.btn-whatsapp:hover { background: #20bd58; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,0.3); }

/* =============================================
   NAVBAR
   ============================================= */
#navbar {
  position: fixed;
  top: 1rem; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2.5rem);
  max-width: 1180px;
  z-index: 100;
  padding: 0.65rem 1.5rem;
  background: rgba(4,6,15,0.78);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(139,92,246,0.22);
  border-radius: 60px;
  box-shadow: 0 0 40px rgba(109,40,217,0.2), 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: all 0.4s ease;
}
#navbar.scrolled {
  background: rgba(4,6,15,0.96);
  border-color: rgba(139,92,246,0.4);
  box-shadow: 0 0 60px rgba(109,40,217,0.3), 0 8px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
}
.nav-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-logo {
  margin-right: auto;
  display: flex;
  align-items: center;
}
@keyframes sig-glow {
  0%,100% { text-shadow: 0 0 16px rgba(6,182,212,0.7), 0 0 32px rgba(6,182,212,0.3), 0 0 60px rgba(139,92,246,0.2); }
  50%      { text-shadow: 0 0 24px rgba(6,182,212,1), 0 0 48px rgba(6,182,212,0.6), 0 0 80px rgba(139,92,246,0.4); }
}
.nav-sig-text {
  font-family: 'Dancing Script', cursive;
  font-size: 1.85rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--ocean-l) 0%, #a78bfa 50%, var(--ocean-l) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sig-glow 3s ease-in-out infinite, gradient-flow 4s ease infinite;
  letter-spacing: 0.01em;
  transition: all 0.3s;
}
.nav-sig-text:hover {
  filter: brightness(1.3);
}
.nav-links { display: flex; gap: 1.6rem; }
.nav-links a {
  font-size: 0.85rem; font-weight: 600;
  color: #c9b6ff;
  transition: all 0.25s;
  position: relative;
  text-shadow: 0 0 10px rgba(139,92,246,0.45);
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  background: linear-gradient(90deg, transparent, #a855f7, #c084fc, #a855f7, transparent);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(168,85,247,0.9), 0 0 20px rgba(139,92,246,0.5);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.3s ease;
}
.nav-links a:hover {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(192,132,252,1), 0 0 26px rgba(139,92,246,0.85), 0 0 46px rgba(109,40,217,0.6);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--white); transition: all 0.3s; }
.nav-mobile {
  display: none; flex-direction: column; gap: 0.85rem;
  padding: 1.25rem 1.5rem 1.5rem;
  background: rgba(4,6,15,0.97);
  border-top: 1px solid rgba(139,92,246,0.15);
  border-radius: 0 0 24px 24px;
  margin-top: 0.5rem;
}
.nav-mobile a { font-size: 1rem; color: rgba(255,255,255,0.7); font-weight: 500; }
.nav-mobile a:hover { color: var(--ocean-l); text-shadow: 0 0 12px rgba(6,182,212,0.7); }
.nav-mobile.open { display: flex; }

/* =============================================
   HERO — FULL BLEED CINEMATIC
   ============================================= */
#hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
@keyframes hero-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
.hero-bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  animation: hero-zoom 2s cubic-bezier(0.25,0.46,0.45,0.94) both;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(4,6,15,0.82) 0%, rgba(4,6,15,0.62) 28%, rgba(4,6,15,0.18) 55%, rgba(4,6,15,0) 75%);
  pointer-events: none;
}

@keyframes orb-pulse {
  0%,100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(1.15); }
}
.hero-orb {
  position: absolute;
  bottom: 15%; right: 8%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(109,40,217,0.3) 0%, rgba(6,182,212,0.1) 45%, transparent 70%);
  border-radius: 50%;
  animation: orb-pulse 6s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes arc-spin     { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes arc-spin-rev { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }
.hero-arc {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
  pointer-events: none;
  z-index: 3;
}
.arc-1 {
  width: 200px; height: 200px;
  bottom: 18%; right: 6%;
  border-color: rgba(6,182,212,0.35) rgba(6,182,212,0.05) rgba(6,182,212,0.05) rgba(6,182,212,0.15);
  animation: arc-spin 14s linear infinite;
}
.arc-2 {
  width: 120px; height: 120px;
  bottom: 18%; right: 6%;
  margin: 40px;
  border-color: rgba(139,92,246,0.5) rgba(139,92,246,0.05) rgba(139,92,246,0.15) rgba(139,92,246,0.05);
  animation: arc-spin-rev 9s linear infinite;
}
@keyframes fi-float-1 {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  35%     { transform: translateY(-16px) rotate(5deg); }
  65%     { transform: translateY(8px) rotate(-3deg); }
}
@keyframes fi-float-2 {
  0%,100% { transform: translateY(0px) scale(1); }
  45%     { transform: translateY(-20px) scale(1.06); }
  75%     { transform: translateY(10px) scale(0.96); }
}
@keyframes fi-float-3 {
  0%,100% { transform: translateY(0px) translateX(0px); }
  33%     { transform: translateY(-14px) translateX(9px); }
  66%     { transform: translateY(7px) translateX(-6px); }
}
.fi {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 5;
  cursor: default;
}
.fi > svg {
  width: 52px; height: 52px;
  background: rgba(4,6,15,0.72);
  border-radius: 16px;
  padding: 13px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  box-sizing: border-box;
}
.fi span {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.fi-meta   { top: 22%; right: 40%; animation: fi-float-1 6.5s ease-in-out infinite; }
.fi-meta > svg { border-color: rgba(24,119,242,0.5); box-shadow: 0 0 24px rgba(24,119,242,0.4), inset 0 0 12px rgba(24,119,242,0.1); fill: #1877F2; }
.fi-meta span  { color: #1877F2; text-shadow: 0 0 10px rgba(24,119,242,0.8); }

.fi-google { top: 10%; right: 26%; animation: fi-float-2 8s ease-in-out 0.5s infinite; }
.fi-google > svg { border-color: rgba(66,133,244,0.4); box-shadow: 0 0 24px rgba(66,133,244,0.3); padding: 12px; }

.fi-n8n    { top: 38%; right: 18%; animation: fi-float-3 7s ease-in-out 1s infinite; }
.fi-n8n > svg { border-color: rgba(234,75,0,0.5); box-shadow: 0 0 24px rgba(234,75,0,0.4), inset 0 0 12px rgba(234,75,0,0.1); }
.fi-n8n span  { color: #FF6D00; text-shadow: 0 0 10px rgba(255,109,0,0.8); }

.fi-claude { top: 58%; right: 36%; animation: fi-float-1 9s ease-in-out 0.8s infinite; }
.fi-claude > svg { border-color: rgba(139,92,246,0.5); box-shadow: 0 0 24px rgba(139,92,246,0.45), inset 0 0 12px rgba(139,92,246,0.1); }
.fi-claude span  { color: #8B5CF6; text-shadow: 0 0 10px rgba(139,92,246,0.8); }

.fi-ai    { top: 72%; right: 20%; animation: fi-float-2 6s ease-in-out 1.5s infinite; }
.fi-ai > svg { border-color: rgba(168,85,247,0.55); box-shadow: 0 0 24px rgba(168,85,247,0.5), inset 0 0 12px rgba(168,85,247,0.12); stroke: #c084fc; fill: none; }
.fi-ai span  { color: #c084fc; text-shadow: 0 0 10px rgba(168,85,247,0.85); }

.hero-content {
  position: relative;
  z-index: 6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 680px;
  padding: 10rem 3rem 6rem 5vw;
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hl-line { display: block; }
.hl-1 { animation: hero-in 0.8s ease 0.2s both; }
.hl-2 { animation: hero-in 0.8s ease 0.45s both; }
.hl-3 { animation: hero-in 0.8s ease 0.65s both; }
.hl-4 { animation: hero-in 0.8s ease 0.85s both; }
.hl-5 { animation: hero-in 0.8s ease 1.05s both; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.1rem;
  background: rgba(6,182,212,0.1);
  border: 1px solid rgba(6,182,212,0.28);
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ocean-l);
  margin-bottom: 1.75rem;
  animation: hero-in 0.7s ease 0.1s both;
}
.pulse-dot {
  width: 7px; height: 7px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse-g 2s infinite;
}
@keyframes pulse-g {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  50%      { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
  color: #ffffff;
  animation: hero-in 0.8s ease 0.2s both;
}
.hero-sub {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  color: rgba(255,255,255,0.65);
  max-width: 520px;
  line-height: 1.85;
  margin-bottom: 2rem;
}
.hero-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.25rem;
}
.stat-pill { display: flex; flex-direction: column; }
.stat-top  { display: flex; align-items: baseline; }
@keyframes stat-glow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(6,182,212,0.4)); }
  50%      { filter: drop-shadow(0 0 14px rgba(6,182,212,0.85)); }
}
.stat-pfx {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--ocean-l), var(--purple-l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-right: 1px;
  align-self: flex-start;
  margin-top: 4px;
}
.stat-num, .stat-sfx {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--ocean-l), var(--purple-l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  animation: stat-glow 3s ease-in-out infinite;
}
.stat-sfx { font-size: 1.1rem; margin-left: 1px; }
.stat-label {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.82);
  font-weight: 600;
  margin-top: 0.18rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat-div { width: 1px; height: 32px; background: rgba(255,255,255,0.1); margin: 0 0.65rem; flex-shrink: 0; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-scroll-hint {
  position: absolute; bottom: 2rem; left: 5vw;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.3;
  animation: hero-in 0.6s ease 1.6s both;
  z-index: 6;
}
.hero-scroll-hint span { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; }
.scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--white), transparent); animation: scroll-a 2s ease-in-out infinite; }
@keyframes scroll-a {
  0%  { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}

/* =============================================
   SKILLS TICKER
   ============================================= */
#skills-ticker {
  position: relative;
  width: 100%;
  z-index: 2;
  margin-top: 7rem;
  background: rgba(4,6,15,0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(6,182,212,0.14);
  border-bottom: 1px solid rgba(6,182,212,0.14);
  padding: 0.6rem 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.ticker-label {
  flex-shrink: 0;
  padding: 0 1.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple-l);
  opacity: 0.7;
  white-space: nowrap;
  z-index: 2;
}
.ticker-outer {
  overflow: hidden;
  flex: 1;
  position: relative;
}
.ticker-outer::before,
.ticker-outer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.ticker-outer::before { left: 0;  background: linear-gradient(to right, #0D0A2E, transparent); }
.ticker-outer::after  { right: 0; background: linear-gradient(to left,  #060B1F, transparent); }

.ticker-track {
  display: flex;
  gap: 0.6rem;
  width: max-content;
  will-change: transform;
}
.skill-track { animation: ticker-move 50s linear infinite; }
.trust-track { animation: ticker-move 70s linear infinite reverse; }

@keyframes ticker-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
#skills-ticker:hover .skill-track,
#trust-ticker:hover .trust-track { animation-play-state: paused; }

.skill-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.95rem;
  background: rgba(6,182,212,0.06);
  border: 1px solid rgba(6,182,212,0.3);
  border-radius: 50px;
  font-size: 0.77rem;
  font-weight: 700;
  color: var(--ocean-l);
  text-shadow: 0 0 12px rgba(6,182,212,0.85), 0 0 24px rgba(6,182,212,0.4);
  white-space: nowrap;
  transition: all 0.25s;
  cursor: default;
  letter-spacing: 0.01em;
}
.skill-pill svg {
  color: var(--ocean-l);
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(6,182,212,0.8));
}
.skill-pill:hover {
  background: rgba(6,182,212,0.14);
  border-color: var(--ocean-l);
  box-shadow: 0 0 16px rgba(6,182,212,0.3);
}
.skill-pill.alt {
  background: rgba(139,92,246,0.07);
  border-color: rgba(139,92,246,0.3);
  color: var(--purple-l);
  text-shadow: 0 0 12px rgba(139,92,246,0.85), 0 0 24px rgba(139,92,246,0.4);
}
.skill-pill.alt svg { color: var(--purple-l); filter: drop-shadow(0 0 4px rgba(139,92,246,0.8)); }
.skill-pill.alt:hover { background: rgba(139,92,246,0.15); border-color: var(--purple-l); box-shadow: 0 0 16px rgba(139,92,246,0.3); }

/* =============================================
   TRUST TICKER
   ============================================= */
#trust-ticker {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #0A0600 0%, #120B02 50%, #0A0600 100%);
  border-top: 1px solid rgba(245,158,11,0.12);
  border-bottom: 1px solid rgba(245,158,11,0.12);
  padding: 0.85rem 0;
  overflow: hidden;
}
#trust-ticker .ticker-outer::before { background: linear-gradient(to right, #0A0600, transparent); }
#trust-ticker .ticker-outer::after  { background: linear-gradient(to left,  #0A0600, transparent); }

/* Result pill — gold/amber style */
.result-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.85rem 0.3rem 0.6rem;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.22);
  border-radius: 50px;
  font-size: 0.73rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  letter-spacing: 0.01em;
  cursor: default;
  flex-shrink: 0;
}
.result-pill svg { color: #F59E0B; flex-shrink: 0; }
.result-pill strong { color: #FCD34D; font-weight: 800; }
.result-pill.alt {
  background: rgba(234,179,8,0.06);
  border-color: rgba(234,179,8,0.18);
}
.result-sep {
  color: rgba(245,158,11,0.3);
  font-size: 0.45rem;
  margin: 0 0.2rem;
  flex-shrink: 0;
}

/* keep old trust-item/trust-star for any legacy use */
.trust-item { display: none; }
.trust-sep  { display: none; }

/* =============================================
   TRUSTED BY — COSMOS MARQUEE
   ============================================= */
#trusted {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(circle 1px at  6% 18%, rgba(255,255,255,0.7) 0%, transparent 1px),
    radial-gradient(circle 1px at 14% 72%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle 1px at 22%  9%, rgba(255,255,255,0.65) 0%, transparent 1px),
    radial-gradient(circle 1px at 31% 55%, rgba(255,255,255,0.45) 0%, transparent 1px),
    radial-gradient(circle 1px at 38% 82%, rgba(255,255,255,0.6) 0%, transparent 1px),
    radial-gradient(circle 1px at 47% 24%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle 1px at 53% 91%, rgba(255,255,255,0.55) 0%, transparent 1px),
    radial-gradient(circle 1px at 61% 40%, rgba(255,255,255,0.45) 0%, transparent 1px),
    radial-gradient(circle 1px at 69% 13%, rgba(255,255,255,0.65) 0%, transparent 1px),
    radial-gradient(circle 1px at 75% 67%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle 1px at 83% 34%, rgba(255,255,255,0.6) 0%, transparent 1px),
    radial-gradient(circle 1px at 90% 80%, rgba(255,255,255,0.45) 0%, transparent 1px),
    radial-gradient(circle 1px at 96% 52%, rgba(255,255,255,0.55) 0%, transparent 1px),
    radial-gradient(circle 2px at 19% 46%, rgba(6,182,212,0.75)   0%, transparent 2px),
    radial-gradient(circle 2px at 67% 28%, rgba(139,92,246,0.75)  0%, transparent 2px),
    radial-gradient(circle 2px at 89% 62%, rgba(6,182,212,0.6)    0%, transparent 2px),
    radial-gradient(ellipse 320px 200px at 15% 50%, rgba(6,182,212,0.055) 0%, transparent 100%),
    radial-gradient(ellipse 400px 280px at 85% 45%, rgba(109,40,217,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 200px 200px at 50% 95%, rgba(6,182,212,0.04)  0%, transparent 100%),
    radial-gradient(ellipse 130% 100% at 50% 50%, #060a18 0%, #04060F 58%, #020308 100%);
  padding: 5.5rem 0 4.5rem;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* — cosmos decoration layer — */
.ts-space {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ts-nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.ts-nb1 { width: 340px; height: 220px; top: -60px; left: -40px;  background: radial-gradient(ellipse, rgba(6,182,212,0.12) 0%, transparent 70%); }
.ts-nb2 { width: 420px; height: 280px; bottom: -80px; right: -60px; background: radial-gradient(ellipse, rgba(109,40,217,0.14) 0%, transparent 70%); }
.ts-nb3 { width: 200px; height: 200px; top: 40%; left: 45%; background: radial-gradient(ellipse, rgba(6,182,212,0.06) 0%, transparent 70%); }

@keyframes ts-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ts-ring-rev  { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.ts-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
}
.ts-rg1 {
  width: 220px; height: 220px; top: 10%; right: 8%;
  border-color: rgba(6,182,212,0.12) rgba(6,182,212,0.04) rgba(6,182,212,0.08) rgba(6,182,212,0.04);
  animation: ts-ring-spin 22s linear infinite;
}
.ts-rg2 {
  width: 130px; height: 130px; bottom: 12%; left: 6%;
  border-color: rgba(139,92,246,0.16) rgba(139,92,246,0.04) rgba(139,92,246,0.04) rgba(139,92,246,0.08);
  animation: ts-ring-rev 14s linear infinite;
}

.ts-graph {
  position: absolute;
  opacity: 0.8;
}
.ts-gp1 { width: 200px; bottom: 18%; left: 8%;  }
.ts-gp2 { width: 180px; top: 15%;    right: 12%; }

@keyframes ts-float {
  0%,100% { transform: translateY(0px); opacity: 0.4; }
  50%     { transform: translateY(-12px); opacity: 0.7; }
}
.ts-plus {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 300;
  color: rgba(255,255,255,0.25);
  animation: ts-float 6s ease-in-out infinite;
}
.ts-pl1 { font-size: 1.4rem; top: 20%;  left:  22%; animation-delay: 0s;   color: rgba(6,182,212,0.3); }
.ts-pl2 { font-size: 1rem;   bottom: 25%; right: 20%; animation-delay: 2s;  color: rgba(139,92,246,0.3); }
.ts-pl3 { font-size: 1.2rem; top: 60%;  left:  70%; animation-delay: 1s;   color: rgba(6,182,212,0.25); }

.ts-dot {
  position: absolute;
  border-radius: 50%;
  animation: ts-float 8s ease-in-out infinite;
}
.ts-d1 { width:4px; height:4px; top:15%;  left:35%;  background:rgba(6,182,212,0.6);  animation-delay:0.5s; }
.ts-d2 { width:3px; height:3px; top:70%;  left:55%;  background:rgba(139,92,246,0.5); animation-delay:1.5s; }
.ts-d3 { width:5px; height:5px; top:35%;  right:30%; background:rgba(6,182,212,0.45); animation-delay:3s; }
.ts-d4 { width:3px; height:3px; bottom:20%; left:42%; background:rgba(139,92,246,0.6); animation-delay:0.8s; }
.ts-d5 { width:4px; height:4px; top:55%;  right:15%; background:rgba(6,182,212,0.5);  animation-delay:2.2s; }

/* — section header — */
.trusted-header {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-bottom: 3.5rem;
  padding: 0 1.5rem;
}
.trusted-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ocean-l);
  margin-bottom: 0.9rem;
}
.trusted-eyebrow::before,
.trusted-eyebrow::after {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ocean-l));
}
.trusted-eyebrow::after { background: linear-gradient(90deg, var(--ocean-l), transparent); }
.trusted-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #ffffff;
}

/* — marquee — */
.marquee-wrap {
  overflow: hidden;
  position: relative;
  z-index: 2;
  padding: 0.7rem 0;
  margin-bottom: 1.1rem;
}
.marquee-wrap::before,
.marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 130px;
  z-index: 3;
  pointer-events: none;
}
.marquee-wrap::before { left: 0;  background: linear-gradient(to right, #060a18, transparent); }
.marquee-wrap::after  { right: 0; background: linear-gradient(to left,  #060a18, transparent); }
.marquee-track {
  display: flex;
  gap: 1.1rem;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}
.marquee-track.reverse { animation-direction: reverse; animation-duration: 46s; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* — logo cards — always glowing — */
@keyframes glow-cyan {
  0%,100% { box-shadow: 0 0 10px rgba(6,182,212,0.22), 0 0 0 1px rgba(6,182,212,0.28) inset; }
  50%     { box-shadow: 0 0 22px rgba(6,182,212,0.38), 0 0 0 1px rgba(6,182,212,0.5) inset; }
}
@keyframes glow-violet {
  0%,100% { box-shadow: 0 0 10px rgba(139,92,246,0.22), 0 0 0 1px rgba(139,92,246,0.28) inset; }
  50%     { box-shadow: 0 0 22px rgba(139,92,246,0.38), 0 0 0 1px rgba(139,92,246,0.5) inset; }
}
.m-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 172px;
  height: 72px;
  padding: 0 1.2rem;
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  gap: 5px;
  cursor: default;
  transition: transform 0.3s ease;
}
.m-logo--cyan {
  background: rgba(6,182,212,0.06);
  border: 1px solid rgba(6,182,212,0.32);
  animation: glow-cyan 3.5s ease-in-out infinite;
}
.m-logo--violet {
  background: rgba(139,92,246,0.06);
  border: 1px solid rgba(139,92,246,0.32);
  animation: glow-violet 3.5s ease-in-out infinite;
}
.m-logo--cyan:hover   { transform: translateY(-5px); animation: none; box-shadow: 0 0 32px rgba(6,182,212,0.5), 0 10px 28px rgba(0,0,0,0.3); border-color: rgba(6,182,212,0.7); background: rgba(6,182,212,0.12); }
.m-logo--violet:hover { transform: translateY(-5px); animation: none; box-shadow: 0 0 32px rgba(139,92,246,0.5), 0 10px 28px rgba(0,0,0,0.3); border-color: rgba(139,92,246,0.7); background: rgba(139,92,246,0.12); }
.m-logo-name {
  font-family: var(--font-display);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.m-logo--cyan:hover   .m-logo-name { color: var(--ocean-l); }
.m-logo--violet:hover .m-logo-name { color: var(--purple-l); }
.m-logo-cat {
  font-size: 0.49rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.m-logo:hover .m-logo-cat { color: rgba(255,255,255,0.55); }

/* =============================================
   TRUSTED — analytics card & neural net decorations
   ============================================= */
@keyframes ts-float-card {
  0%,100% { transform: translateY(0px) rotate(-1deg); }
  50%     { transform: translateY(-14px) rotate(0deg); }
}
@keyframes ts-float-neural {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-10px); }
}
.ts-analytics-card {
  position: absolute;
  top: 8%; right: 4%;
  width: 230px;
  animation: ts-float-card 7s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(6,182,212,0.35));
  z-index: 1;
}
.ts-analytics-card svg { width: 100%; }
.ts-neural-net {
  position: absolute;
  bottom: 10%; left: 3%;
  width: 190px;
  animation: ts-float-neural 9s ease-in-out 1s infinite;
  filter: drop-shadow(0 0 14px rgba(139,92,246,0.3));
  z-index: 1;
}
.ts-neural-net svg { width: 100%; }
.ts-grid3d {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 90px;
  background-image:
    linear-gradient(rgba(6,182,212,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,182,212,0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  transform: perspective(350px) rotateX(62deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
}

/* =============================================
   SERVICES — split accordion + video layout
   ============================================= */
#services {
  position: relative; z-index: 1;
  background: var(--bg-white);
  padding: 7rem 0;
}
#services .section-title { color: var(--text-dark); }
#services .section-sub   { color: var(--text-mid); margin-bottom: 2.5rem; }
#services .section-label { color: var(--ocean); }

/* Two-column split */
.svc-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 5rem;
  align-items: center;
}
.svc-left { display: flex; flex-direction: column; }

/* Accordion */
.svc-accordion { display: flex; flex-direction: column; gap: 0; }

@keyframes svc-title-pulse {
  0%,100% { color: var(--text-dark); }
  50%     { color: var(--ocean); }
}
.svc-item {
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.svc-item:first-child { border-top: 1px solid rgba(0,0,0,0.07); }
.svc-trigger {
  width: 100%; display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 0;
  background: none; border: none; cursor: pointer;
  text-align: left;
}
.svc-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(109,40,217,0.08);
  color: var(--purple);
  transition: background 0.3s, color 0.3s;
}
.svc-item.active .svc-icon {
  background: linear-gradient(135deg, rgba(109,40,217,0.18), rgba(6,182,212,0.12));
  color: var(--ocean);
}
.svc-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  transition: color 0.25s;
  animation: svc-title-pulse 4s ease-in-out infinite;
}
.svc-item.active .svc-title {
  animation: none;
  background: linear-gradient(135deg, var(--purple), var(--ocean));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.svc-chevron {
  flex-shrink: 0;
  color: var(--text-mid);
  transition: transform 0.35s ease, color 0.25s;
}
.svc-item.active .svc-chevron { transform: rotate(180deg); color: var(--ocean); }
.svc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s ease;
}
.svc-item.active .svc-panel { max-height: 200px; }
.svc-panel p {
  font-size: 0.875rem;
  color: var(--text-mid);
  line-height: 1.8;
  padding-bottom: 0.75rem;
}
.service-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.1rem; }
.service-tags li {
  padding: 0.22rem 0.72rem;
  background: var(--bg-mid);
  border: 1px solid rgba(109,40,217,0.12);
  border-radius: 50px;
  font-size: 0.68rem; font-weight: 600; color: var(--purple); letter-spacing: 0.04em;
}

/* Video frame */
.svc-right { display: flex; justify-content: center; }
.svc-frame-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.svc-glow-ambient {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(109,40,217,0.18) 0%, transparent 70%);
  filter: blur(30px);
  z-index: 0;
  border-radius: 50%;
}
@keyframes svc-border-glow {
  0%,100% { box-shadow: 0 0 24px rgba(6,182,212,0.45), 0 0 48px rgba(6,182,212,0.15), inset 0 0 16px rgba(6,182,212,0.06); border-color: rgba(6,182,212,0.65); }
  50%     { box-shadow: 0 0 28px rgba(139,92,246,0.5),  0 0 56px rgba(139,92,246,0.2),  inset 0 0 16px rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.7); }
}
.svc-frame {
  position: relative;
  z-index: 1;
  border: 2px solid rgba(6,182,212,0.6);
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 608 / 1080;
  animation: svc-border-glow 3.5s ease-in-out infinite;
}
.svc-frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
/* Corner brackets */
.svc-corner {
  position: absolute;
  width: 22px; height: 22px;
  z-index: 3; pointer-events: none;
}
.svc-corner::before, .svc-corner::after {
  content: ''; position: absolute;
}
.svc-c-tl { top: -2px; left: -2px; }
.svc-c-tl::before { top:0; left:0; width:100%; height:2px; background:var(--ocean-l); }
.svc-c-tl::after  { top:0; left:0; width:2px; height:100%; background:var(--ocean-l); }
.svc-c-tr { top: -2px; right: -2px; }
.svc-c-tr::before { top:0; right:0; width:100%; height:2px; background:var(--purple-l); }
.svc-c-tr::after  { top:0; right:0; width:2px; height:100%; background:var(--purple-l); }
.svc-c-bl { bottom: -2px; left: -2px; }
.svc-c-bl::before { bottom:0; left:0; width:100%; height:2px; background:var(--purple-l); }
.svc-c-bl::after  { bottom:0; left:0; width:2px; height:100%; background:var(--purple-l); }
.svc-c-br { bottom: -2px; right: -2px; }
.svc-c-br::before { bottom:0; right:0; width:100%; height:2px; background:var(--ocean-l); }
.svc-c-br::after  { bottom:0; right:0; width:2px; height:100%; background:var(--ocean-l); }

/* Scan line inside frame */
/* svc-scan removed */
@keyframes svc-scan {
  0%   { top: -2%; opacity:0; }
  5%   { opacity:0.7; }
  95%  { opacity:0.4; }
  100% { top:102%; opacity:0; }
}
.svc-scan { display: none; }

/* Live badge */
.svc-live-badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.9rem;
  background: rgba(4,6,15,0.08);
  border: 1px solid rgba(109,40,217,0.2);
  border-radius: 50px;
  font-size: 0.7rem; font-weight: 600;
  color: var(--text-mid);
  letter-spacing: 0.05em;
  z-index: 1;
}
.svc-live-dot {
  width: 7px; height: 7px;
  background: #22c55e; border-radius: 50%;
  animation: pulse-g 2s infinite;
}

/* =============================================
   NUMBERS — cosmos background
   ============================================= */
#numbers {
  position: relative; z-index: 1;
  background:
    radial-gradient(circle 1px at  5% 12%, rgba(255,255,255,0.7) 0%, transparent 1px),
    radial-gradient(circle 1px at 13% 55%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle 1px at 22% 82%, rgba(255,255,255,0.6) 0%, transparent 1px),
    radial-gradient(circle 1px at 31%  6%, rgba(255,255,255,0.65) 0%, transparent 1px),
    radial-gradient(circle 1px at 40% 70%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle 1px at 50% 28%, rgba(255,255,255,0.55) 0%, transparent 1px),
    radial-gradient(circle 1px at 58% 90%, rgba(255,255,255,0.45) 0%, transparent 1px),
    radial-gradient(circle 1px at 67% 18%, rgba(255,255,255,0.65) 0%, transparent 1px),
    radial-gradient(circle 1px at 76% 62%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle 1px at 84%  8%, rgba(255,255,255,0.6) 0%, transparent 1px),
    radial-gradient(circle 1px at 91% 44%, rgba(255,255,255,0.55) 0%, transparent 1px),
    radial-gradient(circle 1px at 97% 78%, rgba(255,255,255,0.45) 0%, transparent 1px),
    radial-gradient(circle 2px at  9% 38%, rgba(6,182,212,0.9) 0%, transparent 2px),
    radial-gradient(circle 2px at 35% 48%, rgba(139,92,246,0.8) 0%, transparent 2px),
    radial-gradient(circle 2px at 63% 72%, rgba(6,182,212,0.8) 0%, transparent 2px),
    radial-gradient(circle 2px at 88% 25%, rgba(139,92,246,0.9) 0%, transparent 2px),
    radial-gradient(ellipse 130% 100% at 50% 50%, #040818 0%, #030510 55%, #020308 100%);
  padding: 7rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(6,182,212,0.1);
  border-bottom: 1px solid rgba(139,92,246,0.1);
}

/* Cosmos decoration */
.num-space { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }

/* Big ambient nebula glows */
.num-nb {
  position: absolute; border-radius: 50%; filter: blur(70px);
}
.num-nb1 {
  width: 600px; height: 400px; top: -100px; right: -50px;
  background: radial-gradient(ellipse, rgba(6,182,212,0.14) 0%, transparent 70%);
  animation: ts-float-card 16s ease-in-out infinite;
}
.num-nb2 {
  width: 550px; height: 380px; bottom: -80px; left: -40px;
  background: radial-gradient(ellipse, rgba(109,40,217,0.16) 0%, transparent 70%);
  animation: ts-float-card 20s ease-in-out 4s infinite reverse;
}
.num-nb3 {
  width: 400px; height: 300px; top: 40%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(139,92,246,0.08) 0%, transparent 70%);
  animation: ts-float-card 24s ease-in-out 2s infinite;
}

/* Full 3D perspective grid — full height */
.num-grid3d {
  position: absolute; bottom: 0; left: -10%; right: -10%; height: 55%;
  background-image:
    linear-gradient(rgba(6,182,212,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,182,212,0.12) 1px, transparent 1px);
  background-size: 55px 55px;
  transform: perspective(400px) rotateX(68deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
  animation: num-grid-pulse 6s ease-in-out infinite;
}
@keyframes num-grid-pulse {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Horizontal data stream lines */
.num-stream {
  position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(6,182,212,0.6) 30%, rgba(139,92,246,0.8) 50%, rgba(6,182,212,0.6) 70%, transparent 100%);
  animation: num-stream-move 4s ease-in-out infinite;
  opacity: 0;
}
.num-s1 { top: 20%; animation-delay: 0s;   animation-duration: 4.5s; }
.num-s2 { top: 50%; animation-delay: 1.8s; animation-duration: 5.2s; }
.num-s3 { top: 78%; animation-delay: 3.2s; animation-duration: 3.8s; }
@keyframes num-stream-move {
  0%   { transform: translateX(-100%); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.6; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Corner accent brackets */
.num-corner {
  position: absolute; width: 28px; height: 28px; pointer-events: none;
}
.num-corner::before, .num-corner::after {
  content: ''; position: absolute; background: var(--ocean-l);
}
.num-corner::before { width: 100%; height: 2px; top: 0; left: 0; }
.num-corner::after  { width: 2px; height: 100%; top: 0; left: 0; }
.num-c-tl { top: 18px; left: 18px; }
.num-c-tr { top: 18px; right: 18px; transform: scaleX(-1); }
.num-c-bl { bottom: 18px; left: 18px; transform: scaleY(-1); }
.num-c-br { bottom: 18px; right: 18px; transform: scale(-1); }

/* Floating neon orbs */
@keyframes num-orb-float {
  0%,100% { transform: translateY(0) scale(1); opacity: 0.5; }
  50%      { transform: translateY(-18px) scale(1.15); opacity: 0.9; }
}
.num-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: num-orb-float 5s ease-in-out infinite;
}
.num-orb1 { width: 8px; height: 8px; top: 18%; left: 12%; background: rgba(6,182,212,1); box-shadow: 0 0 16px rgba(6,182,212,0.9); animation-delay: 0s; }
.num-orb2 { width: 6px; height: 6px; top: 72%; right: 18%; background: rgba(139,92,246,1); box-shadow: 0 0 14px rgba(139,92,246,0.9); animation-delay: 1.8s; }
.num-orb3 { width: 5px; height: 5px; top: 42%; left: 82%; background: rgba(6,182,212,0.9); box-shadow: 0 0 12px rgba(6,182,212,0.8); animation-delay: 3.5s; }
.num-orb4 { width: 7px; height: 7px; bottom: 22%; left: 38%; background: rgba(139,92,246,0.9); box-shadow: 0 0 15px rgba(139,92,246,0.85); animation-delay: 0.9s; }
.num-orb5 { width: 4px; height: 4px; top: 28%; right: 42%; background: rgba(6,182,212,1); box-shadow: 0 0 10px rgba(6,182,212,0.9); animation-delay: 2.4s; }

@keyframes num-dot-float { 0%,100% { transform: translateY(0); opacity:0.6; } 50% { transform: translateY(-10px); opacity:1; } }
.num-dot { position: absolute; border-radius: 50%; animation: num-dot-float 7s ease-in-out infinite; }
.num-d1 { width:3px; height:3px; top:20%; left:25%;  background:rgba(6,182,212,0.7);  animation-delay:0s; }
.num-d2 { width:2px; height:2px; top:65%; right:30%; background:rgba(139,92,246,0.6); animation-delay:1.5s; }
.num-d3 { width:4px; height:4px; top:40%; right:15%; background:rgba(6,182,212,0.5);  animation-delay:3s; }
.num-d4 { width:2px; height:2px; bottom:25%; left:40%; background:rgba(139,92,246,0.7); animation-delay:0.8s; }

/* Header */
.num-header { text-align: center; margin-bottom: 3.5rem; position: relative; z-index: 2; }
.num-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; color: #ffffff;
}

/* Grid */
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: linear-gradient(135deg, rgba(6,182,212,0.2), rgba(139,92,246,0.15), rgba(6,182,212,0.2));
  border-radius: 22px;
  overflow: hidden;
  position: relative; z-index: 2;
  box-shadow:
    0 0 0 1px rgba(6,182,212,0.15),
    0 0 60px rgba(6,182,212,0.12),
    0 0 120px rgba(109,40,217,0.1),
    0 0 200px rgba(6,182,212,0.06);
  animation: num-grid-border 6s ease-in-out infinite;
}
@keyframes num-grid-border {
  0%,100% { box-shadow: 0 0 0 1px rgba(6,182,212,0.2), 0 0 60px rgba(6,182,212,0.14), 0 0 130px rgba(109,40,217,0.1); }
  50%      { box-shadow: 0 0 0 1px rgba(139,92,246,0.3), 0 0 70px rgba(139,92,246,0.18), 0 0 150px rgba(6,182,212,0.12); }
}
.number-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 3.5rem 2rem;
  background: rgba(4,6,20,0.85);
  gap: 0.6rem;
  transition: background 0.4s;
  position: relative; overflow: hidden;
}
.number-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(6,182,212,0.7) 50%, transparent 100%);
  animation: num-card-top 6s ease-in-out infinite;
}
.number-card:nth-child(even)::before { animation-delay: 3s; }
@keyframes num-card-top {
  0%,100% { background: linear-gradient(90deg, transparent, rgba(6,182,212,0.7), transparent); }
  50%      { background: linear-gradient(90deg, transparent, rgba(139,92,246,0.9), transparent); }
}
.number-card::after {
  content: ''; position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(6,182,212,0.04) 0%, transparent 100%);
  pointer-events: none;
}
.number-card:hover {
  background: rgba(6,182,212,0.06);
  transform: none;
}
.number-card:hover::after {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(6,182,212,0.1) 0%, transparent 100%);
}
.big-num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--ocean-l), var(--purple-l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1;
}
.big-label {
  font-size: 0.68rem; color: rgba(255,255,255,0.92); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; max-width: 140px; line-height: 1.5;
}

/* =============================================
   MMA COLLABORATIONS
   ============================================= */
.mma-section { margin-top: 4rem; }
.mma-eyebrow { text-align: center; margin-bottom: 2.5rem; }
.mma-sub { font-size: 0.95rem; color: var(--text-mid); max-width: 540px; margin: 0.8rem auto 0; line-height: 1.8; }
@keyframes mma-neon-float {
  0%   { box-shadow: 0 0 14px rgba(6,182,212,0.5), 0 0 0 1.5px rgba(6,182,212,0.45); border-color: rgba(6,182,212,0.5); }
  33%  { box-shadow: 0 0 22px rgba(139,92,246,0.55), 0 0 0 1.5px rgba(139,92,246,0.5); border-color: rgba(139,92,246,0.6); }
  66%  { box-shadow: 0 0 18px rgba(6,182,212,0.45), 0 0 0 1.5px rgba(6,182,212,0.5); border-color: rgba(6,182,212,0.55); }
  100% { box-shadow: 0 0 14px rgba(6,182,212,0.5), 0 0 0 1.5px rgba(6,182,212,0.45); border-color: rgba(6,182,212,0.5); }
}
@keyframes mma-img-neon {
  0%   { box-shadow: 0 0 18px rgba(6,182,212,0.6), inset 0 0 0 2px rgba(6,182,212,0.45); }
  33%  { box-shadow: 0 0 28px rgba(139,92,246,0.65), inset 0 0 0 2px rgba(139,92,246,0.5); }
  66%  { box-shadow: 0 0 22px rgba(6,182,212,0.55), inset 0 0 0 2px rgba(6,182,212,0.5); }
  100% { box-shadow: 0 0 18px rgba(6,182,212,0.6), inset 0 0 0 2px rgba(6,182,212,0.45); }
}
.mma-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
.mma-card {
  background: var(--bg-white);
  border: 1px solid rgba(6,182,212,0.4);
  border-radius: 20px;
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: mma-neon-float 6s ease-in-out infinite;
}
.mma-card:nth-child(2) { animation-delay: 2s; }
.mma-card:nth-child(3) { animation-delay: 4s; }
.mma-photo-wrap {
  position: relative;
  width: 100%; aspect-ratio: 1;
  overflow: hidden;
  animation: mma-img-neon 6s ease-in-out infinite;
  flex-shrink: 0;
}
.mma-card:nth-child(2) .mma-photo-wrap { animation-delay: 2s; }
.mma-card:nth-child(3) .mma-photo-wrap { animation-delay: 4s; }
.mma-info { flex: 1; display: flex; flex-direction: column; padding: 1.4rem 1.5rem 1.5rem; }
.mma-desc { flex: 1; }
.mma-socials {
  display: flex; flex-direction: column; gap: 0.45rem;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.mma-social-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.76rem; font-weight: 600; color: var(--purple);
  text-decoration: none; transition: color 0.2s;
}
.mma-social-link:hover { color: var(--ocean); }
.mma-social-ig { color: #C13584; }
.mma-social-ig:hover { color: #833AB4; }
.mma-photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.mma-photo-glow {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(109,40,217,0.15) 100%);
}
/* mma-info padding set in grid definition above */
.mma-badge-pill {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  background: linear-gradient(135deg, rgba(109,40,217,0.12), rgba(6,182,212,0.1));
  border: 1px solid rgba(109,40,217,0.22);
  border-radius: 50px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.7rem;
}
.mma-stat-pill {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  background: rgba(6,182,212,0.08);
  border: 1px solid rgba(6,182,212,0.22);
  border-radius: 50px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ocean);
  margin-bottom: 0.7rem;
}
.mma-name {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700;
  color: var(--text-dark); margin-bottom: 0.2rem;
}
.mma-role {
  display: block; font-size: 0.72rem; font-weight: 600;
  color: var(--text-mid); letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 0.8rem;
}
.mma-desc { font-size: 0.85rem; color: var(--text-mid); line-height: 1.78; margin-bottom: 1rem; }
.mma-link {
  display: inline-flex; align-items: center;
  font-size: 0.78rem; font-weight: 700;
  color: var(--purple);
  text-decoration: none;
  transition: color 0.2s;
}
.mma-link:hover { color: var(--ocean); }

/* =============================================
   CASE STUDIES CAROUSEL
   ============================================= */
#case-studies {
  position: relative; z-index: 1;
  background: var(--bg-white);
  padding: 7rem 0;
}
#case-studies .section-title { color: var(--text-dark); }
#case-studies .section-label { color: var(--ocean); }
.cs-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 2.5rem; flex-wrap: wrap;
}
.cs-carousel-outer {
  position: relative; display: flex; align-items: center; gap: 1rem;
}
.cs-track {
  display: flex; gap: 1.25rem;
  overflow-x: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; flex: 1;
}
.cs-card {
  flex: 0 0 calc(33.333% - 0.85rem);
  min-width: 0; scroll-snap-align: start;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 1.85rem;
  transition: all 0.35s; position: relative; overflow: hidden;
}
.cs-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, var(--purple), var(--ocean));
}
.cs-card:hover { border-color: rgba(109,40,217,0.2); box-shadow: 0 8px 40px rgba(109,40,217,0.1); transform: translateY(-4px); }
.cs-tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ocean); margin-bottom: 0.5rem; }
.cs-client { font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.75rem; }
.cs-desc { font-size: 0.85rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 1.25rem; }
.cs-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  margin-bottom: 1.1rem; padding: 1rem;
  background: var(--bg-white); border-radius: var(--rsm); border: 1px solid var(--border-light);
}
.cs-metric { text-align: center; }
.cs-val {
  display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 800;
  background: linear-gradient(135deg, var(--purple), var(--ocean));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2;
}
.cs-lab { display: block; font-size: 0.62rem; color: var(--text-light); font-weight: 500; margin-top: 0.15rem; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cs-tags span {
  padding: 0.2rem 0.6rem;
  background: var(--bg-mid); border: 1px solid rgba(109,40,217,0.12);
  border-radius: 50px; font-size: 0.68rem; font-weight: 600; color: var(--purple);
}
.cs-arrow {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border-light); background: var(--bg-white); color: var(--text-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.cs-arrow:hover { background: var(--purple); border-color: var(--purple); color: white; box-shadow: 0 4px 20px rgba(109,40,217,0.35); }
.cs-arrow:disabled { opacity: 0.3; pointer-events: none; }
.cs-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.cs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-light); border: 1px solid rgba(0,0,0,0.1); cursor: pointer; transition: all 0.3s; }
.cs-dot.active { background: var(--purple); border-color: var(--purple); width: 22px; border-radius: 4px; }
.cs-cta { text-align: center; margin-top: 2.5rem; }

/* =============================================
   QUALIFICATIONS
   ============================================= */
#qualifications {
  position: relative; z-index: 1;
  background: radial-gradient(ellipse 120% 80% at 50% 50%, #080E28 0%, #040610 60%, var(--bg-dark) 100%),
    radial-gradient(circle 1px at 12% 18%, rgba(255,255,255,0.55) 0px, transparent 1px),
    radial-gradient(circle 1px at 28% 72%, rgba(255,255,255,0.45) 0px, transparent 1px),
    radial-gradient(circle 1px at 44% 33%, rgba(255,255,255,0.6) 0px, transparent 1px),
    radial-gradient(circle 1px at 62% 8%, rgba(255,255,255,0.5) 0px, transparent 1px),
    radial-gradient(circle 1px at 75% 55%, rgba(255,255,255,0.45) 0px, transparent 1px),
    radial-gradient(circle 1px at 88% 82%, rgba(255,255,255,0.6) 0px, transparent 1px),
    radial-gradient(circle 1px at 5% 91%, rgba(255,255,255,0.4) 0px, transparent 1px),
    radial-gradient(circle 1px at 35% 95%, rgba(255,255,255,0.55) 0px, transparent 1px),
    radial-gradient(circle 1px at 52% 61%, rgba(255,255,255,0.35) 0px, transparent 1px),
    radial-gradient(circle 1px at 70% 24%, rgba(255,255,255,0.5) 0px, transparent 1px),
    radial-gradient(circle 1px at 92% 40%, rgba(255,255,255,0.45) 0px, transparent 1px),
    radial-gradient(circle 1px at 18% 45%, rgba(255,255,255,0.3) 0px, transparent 1px),
    radial-gradient(circle 1px at 83% 15%, rgba(255,255,255,0.6) 0px, transparent 1px);
  padding: 7rem 0;
  overflow: hidden;
  border-top: 1px solid var(--border-dark);
}
/* Qualifications space elements */
.qual-space {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.qual-nb {
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.qual-nb1 { width: 500px; height: 500px; top: -15%; left: -10%; background: radial-gradient(circle, rgba(109,40,217,0.12) 0%, transparent 70%); animation: ts-float-card 14s ease-in-out infinite; }
.qual-nb2 { width: 400px; height: 400px; top: 30%; right: -8%; background: radial-gradient(circle, rgba(6,182,212,0.09) 0%, transparent 70%); animation: ts-float-card 18s ease-in-out 3s infinite reverse; }
.qual-nb3 { width: 350px; height: 350px; bottom: -10%; left: 40%; background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%); animation: ts-float-card 22s ease-in-out 1s infinite; }
.qual-grid3d {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; height: 220px;
  background-image: linear-gradient(rgba(6,182,212,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(6,182,212,0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(300px) rotateX(65deg) translateX(-50%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
  transform-origin: bottom center;
  opacity: 0.6;
}
.qual-dot {
  position: absolute; border-radius: 50%;
  background: rgba(139,92,246,0.5); pointer-events: none;
}
.qual-d1 { width:3px; height:3px; top:14%; left:22%; animation: num-dot-float 5s ease-in-out infinite; }
.qual-d2 { width:2px; height:2px; top:55%; left:8%;  animation: num-dot-float 7s ease-in-out 1s infinite; background:rgba(6,182,212,0.6); }
.qual-d3 { width:4px; height:4px; top:78%; left:65%; animation: num-dot-float 9s ease-in-out 2s infinite; }
.qual-d4 { width:2px; height:2px; top:30%; right:15%; animation: num-dot-float 6s ease-in-out 0.5s infinite; background:rgba(6,182,212,0.5); }
.qual-d5 { width:3px; height:3px; top:65%; right:28%; animation: num-dot-float 8s ease-in-out 1.5s infinite; }
.qual-d6 { width:2px; height:2px; top:90%; right:45%; animation: num-dot-float 6s ease-in-out 3s infinite; background:rgba(6,182,212,0.4); }
.qual-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.qual-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius); padding: 2rem;
  transition: all 0.35s; position: relative; overflow: hidden;
}
.qual-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, var(--purple-l), var(--ocean-l));
  opacity: 0; transition: opacity 0.35s;
}
.qual-card:hover { border-color: rgba(139,92,246,0.25); background: rgba(109,40,217,0.06); transform: translateY(-3px); }
.qual-card:hover::before { opacity: 1; }
.qual-icon {
  width: 54px; height: 54px;
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem; color: var(--purple-l);
  position: relative;
}
.qual-icon--ads { background: linear-gradient(135deg, rgba(24,119,242,0.18), rgba(52,168,83,0.1)); border: 1px solid rgba(24,119,242,0.3); box-shadow: 0 0 20px rgba(24,119,242,0.15); color: #60a5fa; }
.qual-icon--ai  { background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(6,182,212,0.1)); border: 1px solid rgba(139,92,246,0.3); box-shadow: 0 0 20px rgba(139,92,246,0.15); color: var(--purple-l); }
.qual-icon--strat { background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(245,158,11,0.1)); border: 1px solid rgba(6,182,212,0.3); box-shadow: 0 0 20px rgba(6,182,212,0.15); color: var(--ocean-l); }
.qual-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; }
.qual-list { display: flex; flex-direction: column; gap: 0.55rem; }
.qual-list li { font-size: 0.83rem; color: rgba(255,255,255,0.55); display: flex; align-items: baseline; gap: 0.5rem; line-height: 1.4; }
.qual-cert {
  display: inline-block; flex-shrink: 0;
  padding: 0.12rem 0.5rem;
  background: rgba(6,182,212,0.12); border: 1px solid rgba(6,182,212,0.25);
  border-radius: 50px; font-size: 0.6rem; font-weight: 700;
  color: var(--ocean-l); letter-spacing: 0.06em; text-transform: uppercase;
}
.qual-cert--partner {
  background: rgba(139,92,246,0.14); border-color: rgba(139,92,246,0.3); color: var(--purple-l);
}

/* Cert strip */
.cert-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 1.2rem 0.8rem;
  padding: 2.5rem 2rem;
  border: 1px solid rgba(139,92,246,0.15);
  border-radius: var(--radius);
  background: rgba(4,6,20,0.6);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 40px rgba(109,40,217,0.08) inset;
}
.cert-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  cursor: default; transition: transform 0.25s;
}
.cert-item:hover { transform: translateY(-4px); }
.cert-icon {
  width: 54px; height: 54px;
  background: linear-gradient(135deg, var(--purple), var(--ocean));
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(109,40,217,0.35);
  transition: box-shadow 0.3s, transform 0.3s;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.1;
  user-select: none;
}
.cert-item:hover .cert-icon {
  box-shadow: 0 8px 28px rgba(109,40,217,0.55);
  transform: scale(1.06);
}
.cert-icon--meta     { background: linear-gradient(135deg, #1877F2, #0a5dc0); box-shadow: 0 4px 16px rgba(24,119,242,0.4); }
.cert-icon--google   { background: #fff; box-shadow: 0 4px 16px rgba(66,133,244,0.3); }
.cert-icon--voiceflow{ background: linear-gradient(135deg, #0052CC, #00B8D9); box-shadow: 0 4px 16px rgba(0,184,217,0.4); }
.cert-icon--make     { background: linear-gradient(135deg, #EA4B00, #FF9500); box-shadow: 0 4px 16px rgba(234,75,0,0.4); }
.cert-icon--vapi     { background: linear-gradient(135deg, #6D28D9, #8B5CF6); box-shadow: 0 4px 16px rgba(139,92,246,0.4); }
.cert-icon--zapier   { background: linear-gradient(135deg, #FF4A7F, #FF6B9D); box-shadow: 0 4px 16px rgba(255,74,127,0.4); }
.cert-icon--shopify  { background: linear-gradient(135deg, #5E8E3E, #96BF48); box-shadow: 0 4px 16px rgba(150,191,72,0.4); }
.cert-icon--mba      { background: linear-gradient(135deg, #06B6D4, #0891B2); box-shadow: 0 4px 16px rgba(6,182,212,0.4); }
.cert-icon--udemy    { background: linear-gradient(135deg, #EA4B00, #FF9500); box-shadow: 0 4px 16px rgba(234,75,0,0.4); }
.cert-icon--icitp    { background: linear-gradient(135deg, #0052CC, #0066FF); box-shadow: 0 4px 16px rgba(0,82,204,0.4); }
.cert-icon--shaw     { background: linear-gradient(135deg, #7B2FBE, #9D4EDD); box-shadow: 0 4px 16px rgba(123,47,190,0.4); }
.cert-icon--damelin  { background: linear-gradient(135deg, #1B4332, #40916C); box-shadow: 0 4px 16px rgba(64,145,108,0.4); }
.cert-icon--otbc     { background: linear-gradient(135deg, #374151, #6B7280); box-shadow: 0 4px 16px rgba(107,114,128,0.4); }
.cert-item span { font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,0.6); text-align: center; line-height: 1.3; }
.cert-item small { font-size: 0.57rem; color: rgba(255,255,255,0.28); text-align: center; line-height: 1.3; }
.cert-cta { cursor: pointer; }
.cert-cta .cert-icon { background: linear-gradient(135deg, var(--purple), var(--ocean)); box-shadow: 0 4px 20px rgba(109,40,217,0.45); }
.cert-cta span { color: var(--ocean-l); }
.cert-cta small { color: rgba(6,182,212,0.5); }

/* =============================================
   PARTNERS
   ============================================= */
/* ── Partners — Deep Space ── */
@keyframes pt-stream  { from { transform: translateY(-100%); } to { transform: translateY(100vh); } }
@keyframes pt-nb-drift{ 0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(20px,-15px) scale(1.08);} }

#partners {
  position: relative; z-index: 1;
  background:
    radial-gradient(ellipse 60% 55% at 12% 10%, rgba(109,40,217,0.28), transparent 60%),
    radial-gradient(ellipse 55% 50% at 90% 85%, rgba(6,182,212,0.20), transparent 60%),
    rgba(7,5,15,0.58);
  padding: 7rem 0;
  overflow: hidden;
}

/* Deep-space background */
.pt-space { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.pt-nb { position:absolute; border-radius:50%; filter:blur(90px); animation:pt-nb-drift 16s ease-in-out infinite; }
.pt-nb1 { width:500px;height:380px;top:-8%;left:-4%; background:radial-gradient(ellipse,rgba(109,40,217,0.22),transparent 70%); animation-delay:0s; }
.pt-nb2 { width:450px;height:450px;top:30%;right:-6%; background:radial-gradient(ellipse,rgba(6,182,212,0.16),transparent 70%); animation-delay:-5s; }
.pt-nb3 { width:600px;height:300px;bottom:-4%;left:25%; background:radial-gradient(ellipse,rgba(139,92,246,0.12),transparent 70%); animation-delay:-10s; }
.pt-grid3d { position:absolute;inset:0; background-image:linear-gradient(rgba(6,182,212,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(6,182,212,0.05) 1px,transparent 1px); background-size:60px 60px; transform:perspective(600px) rotateX(18deg) scaleY(1.4); transform-origin:center 60%; opacity:0.4; }
.pt-stream { position:absolute;width:1px;height:160px;background:linear-gradient(to bottom,transparent,var(--ocean-l),transparent); animation:pt-stream 6s linear infinite; opacity:0.2; }
.pt-s1{left:15%;animation-duration:5s;}
.pt-s2{left:55%;animation-duration:7.5s;animation-delay:-2s;}
.pt-s3{left:82%;animation-duration:4.5s;animation-delay:-1s;}
.pt-corner{position:absolute;width:36px;height:36px;opacity:0.3;}
.pt-corner::before,.pt-corner::after{content:'';position:absolute;background:var(--ocean-l);}
.pt-corner::before{width:100%;height:2px;top:0;}
.pt-corner::after{width:2px;height:100%;top:0;}
.pt-c-tl{top:1.5rem;left:1.5rem;}.pt-c-tr{top:1.5rem;right:1.5rem;transform:scaleX(-1);}
.pt-c-bl{bottom:1.5rem;left:1.5rem;transform:scaleY(-1);}.pt-c-br{bottom:1.5rem;right:1.5rem;transform:scale(-1);}

/* Partner grid */
.pt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 4rem;
}

/* Base card */
.pt-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 2rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  overflow: hidden;
  transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
  backdrop-filter: blur(12px);
}
.pt-card:hover {
  transform: translateY(-5px);
  border-color: rgba(109,40,217,0.4);
  box-shadow: 0 16px 50px rgba(109,40,217,0.18), 0 0 0 1px rgba(109,40,217,0.2);
}
.pt-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, var(--purple), var(--ocean));
  opacity: 0; transition: opacity 0.35s;
}
.pt-card:hover::before { opacity: 1; }

/* Featured card variant */
.pt-card--featured {
  border-color: rgba(109,40,217,0.25);
  box-shadow: 0 0 40px rgba(109,40,217,0.1), inset 0 1px 0 rgba(255,255,255,0.04);
}
.pt-card--featured::before { opacity: 0.6; }

/* Glow */
.pt-card-glow {
  position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(ellipse, rgba(109,40,217,0.15), transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.pt-card-glow--cyan { background: radial-gradient(ellipse, rgba(6,182,212,0.15), transparent 70%); }

/* Card internals */
.pt-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pt-badge {
  display: inline-flex; align-items: center;
  padding: 0.22rem 0.75rem;
  background: rgba(109,40,217,0.15);
  border: 1px solid rgba(109,40,217,0.3);
  border-radius: 50px; font-size: 0.62rem; font-weight: 700;
  color: var(--purple-l); letter-spacing: 0.1em; text-transform: uppercase;
}
.pt-badge--founder { background: rgba(6,182,212,0.12); border-color: rgba(6,182,212,0.3); color: var(--ocean-l); }
.pt-badge--partner { background: rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.35); color: #c4b5fd; }

.pt-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pt-icon--ai    { background: linear-gradient(135deg,rgba(109,40,217,0.4),rgba(139,92,246,0.3)); border:1px solid rgba(139,92,246,0.3); color:var(--purple-l); }
.pt-icon--edu   { background: linear-gradient(135deg,rgba(6,182,212,0.3),rgba(8,145,178,0.2)); border:1px solid rgba(6,182,212,0.3); color:var(--ocean-l); }
.pt-icon--voice { background: linear-gradient(135deg,rgba(0,52,204,0.35),rgba(0,184,217,0.25)); border:1px solid rgba(0,184,217,0.3); color:#7dd3fc; }
.pt-icon--auto  { background: linear-gradient(135deg,rgba(234,75,0,0.25),rgba(255,149,0,0.2)); border:1px solid rgba(255,149,0,0.3); color:#fdba74; }

.pt-name {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 800;
  color: rgba(255,255,255,0.92); line-height: 1.2;
}
.pt-desc {
  font-size: 0.87rem; color: rgba(255,255,255,0.45); line-height: 1.75; flex: 1;
}
.pt-links { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.25rem; }
.pt-link {
  font-size: 0.78rem; color: var(--ocean-l); font-weight: 600;
  transition: color 0.25s;
}
.pt-link:hover { color: var(--purple-l); }
.pt-link--yt {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: #f87171; font-size: 0.74rem;
  padding: 0.2rem 0.6rem; border-radius: 50px;
  background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.2);
  transition: all 0.25s;
}
.pt-link--yt:hover { background: rgba(248,113,113,0.2); color: #fca5a5; }

/* Stat row inside MMA card */
.pt-stat-row {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 0.5rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pt-stat { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.pt-stat-n {
  font-family: var(--font-display); font-size: 1rem; font-weight: 800;
  background: linear-gradient(135deg,var(--ocean-l),var(--purple-l));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pt-stat-l { font-size: 0.6rem; color: rgba(255,255,255,0.28); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.pt-stat-div { width: 1px; height: 28px; background: rgba(255,255,255,0.07); flex-shrink: 0; }

/* Responsive */
@media (max-width: 720px) { .pt-grid { grid-template-columns: 1fr; } }

/* MMA cards — dark context overrides */
#partners .mma-section { margin-top: 5rem; }
#partners .mma-eyebrow .trusted-eyebrow { color: var(--ocean-l); }
#partners .mma-sub { color: rgba(255,255,255,0.45); }
#partners .mma-card { background: rgba(255,255,255,0.04); border-color: rgba(6,182,212,0.35); }
#partners .mma-name { color: rgba(255,255,255,0.92); }
#partners .mma-role { color: rgba(255,255,255,0.4); }
#partners .mma-desc { color: rgba(255,255,255,0.5); }
#partners .mma-socials { border-top-color: rgba(255,255,255,0.07); }
#partners .mma-social-link { color: var(--ocean-l); }
#partners .mma-badge-pill { color: var(--purple-l); background: rgba(109,40,217,0.18); border-color: rgba(109,40,217,0.3); }
#partners .mma-stat-pill { color: var(--ocean-l); }

/* =============================================
   RESULTS GATE
   ============================================= */
#results {
  position: relative; z-index: 1;
  background: var(--bg-white);
  padding: 7rem 0;
}
#results .section-title { color: var(--text-dark); }
#results .section-sub   { color: var(--text-mid); }
#results .section-label { color: var(--ocean); }
.gate-wrapper { position: relative; border-radius: var(--radius); overflow: hidden; }
.gate-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.case-card {
  background: var(--bg-light); border: 1px solid var(--border-light); border-radius: var(--rsm);
  padding: 1.4rem; display: flex; flex-direction: column; gap: 0.55rem;
  position: relative; transition: all 0.3s;
}
.case-industry { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ocean); font-weight: 700; }
.case-client { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-dark); }
.case-result { font-size: 0.83rem; color: var(--text-mid); line-height: 1.65; flex: 1; transition: filter 0.4s; }
.case-result.blurred { filter: blur(5px); user-select: none; }
.case-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.case-tags span { padding: 0.18rem 0.55rem; background: var(--bg-mid); border-radius: 50px; font-size: 0.65rem; font-weight: 600; color: var(--text-mid); }
.lock-ico {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 28px; height: 28px; background: rgba(0,0,0,0.05); border-radius: 7px;
  display: flex; align-items: center; justify-content: center; color: var(--text-light);
}
.case-card.unlocked .lock-ico { display: none; }
.case-card.unlocked .case-result { filter: blur(0px); }
.gate-overlay {
  position: absolute; inset: -10px;
  background: rgba(255,255,255,0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; z-index: 10; transition: opacity 0.5s;
}
.gate-overlay.hidden { opacity: 0; pointer-events: none; }
.gate-box {
  max-width: 500px; width: 100%; background: var(--bg-white);
  border: 1px solid rgba(109,40,217,0.18); border-radius: 20px; padding: 2.5rem;
  text-align: center; box-shadow: 0 24px 60px rgba(109,40,217,0.12);
}
.gate-lock-icon {
  width: 68px; height: 68px; margin: 0 auto 1.4rem;
  background: linear-gradient(135deg, rgba(109,40,217,0.1), rgba(8,145,178,0.08));
  border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--purple);
}
.gate-box h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.65rem; }
.gate-box p  { font-size: 0.86rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 0.9rem; }
.gate-step { font-size: 0.84rem !important; }
.gate-step strong { color: var(--text-dark); }
.gate-input-row { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.gate-input-row input {
  flex: 1; padding: 0.75rem 1rem; background: var(--bg-light);
  border: 1px solid var(--border-light); border-radius: var(--rsm);
  color: var(--text-dark); font-size: 0.88rem; outline: none; transition: border-color 0.3s;
}
.gate-input-row input:focus { border-color: var(--purple); }
.gate-input-row input::placeholder { color: var(--text-light); }
.gate-input-row button {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--purple), var(--ocean));
  color: white; font-weight: 600; font-size: 0.86rem;
  border: none; border-radius: var(--rsm); cursor: pointer; transition: all 0.3s;
}
.gate-input-row button:hover { opacity: 0.85; }
.gate-error { color: #DC2626; font-size: 0.8rem; min-height: 1.2rem; margin-top: 0.4rem; }

/* =============================================
   ABOUT
   ============================================= */
#about {
  position: relative; z-index: 1;
  background: var(--bg-light);
  padding: 7rem 0;
}
#about .section-title { color: var(--text-dark); }
#about .section-label { color: var(--ocean); }
.about-inner { display: grid; grid-template-columns: 1fr 1.65fr; gap: 5rem; align-items: start; }
.about-visual { position: sticky; top: 6rem; }
.about-photo-wrap {
  width: 100%; max-width: 300px;
  aspect-ratio: 4/5; border-radius: 22px; overflow: hidden; margin-bottom: 1.5rem;
  position: relative;
  border: 3px solid transparent;
  background: linear-gradient(var(--bg-white), var(--bg-white)) padding-box,
              linear-gradient(135deg, var(--purple), var(--ocean)) border-box;
  box-shadow: 0 20px 60px rgba(109,40,217,0.15);
}
.about-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 5%; border-radius: 20px; }
.about-initials {
  display: none; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(109,40,217,0.1), rgba(8,145,178,0.08));
  align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 4rem; font-weight: 800;
  color: rgba(109,40,217,0.3); border-radius: 20px;
}
.about-certs { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cert-badge {
  padding: 0.28rem 0.78rem; background: var(--bg-white);
  border: 1px solid rgba(109,40,217,0.14); border-radius: 50px;
  font-size: 0.7rem; font-weight: 600; color: var(--purple); transition: all 0.3s;
}
.cert-badge:hover { background: var(--purple); color: white; }
.about-content p { color: var(--text-mid); line-height: 1.8; margin-bottom: 0.95rem; font-size: 0.93rem; }
.about-closer { font-style: italic; color: var(--purple) !important; font-weight: 500; }

/* ── About section animated background ── */
@keyframes ab-orb-pulse  { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes ab-node-float { 0%,100% { transform: translateY(0) rotate(0deg); opacity: 0.12; } 50% { transform: translateY(-16px) rotate(6deg); opacity: 0.22; } }
@keyframes ab-chip-in    { 0%,100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(-6px); opacity: 1; } }
@keyframes ab-line-anim  { 0%,100% { opacity: 0.06; } 50% { opacity: 0.18; } }

.about-section { overflow: hidden; }
.about-bg {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.ab-orb {
  position: absolute; border-radius: 50%; filter: blur(70px);
  animation: ab-orb-pulse 8s ease-in-out infinite;
}
.ab-orb1 { width: 450px; height: 300px; top: -10%; left: -5%; background: radial-gradient(ellipse, rgba(109,40,217,0.12), transparent 70%); animation-delay: 0s; }
.ab-orb2 { width: 350px; height: 350px; bottom: -5%; right: -3%; background: radial-gradient(ellipse, rgba(6,182,212,0.1), transparent 70%); animation-delay: -3s; }
.ab-orb3 { width: 280px; height: 200px; top: 40%; right: 15%; background: radial-gradient(ellipse, rgba(139,92,246,0.08), transparent 70%); animation-delay: -6s; }

.ab-node {
  position: absolute; color: rgba(109,40,217,0.13);
  animation: ab-node-float 7s ease-in-out infinite;
}
.ab-n1 { top: 8%; right: 5%; animation-delay: 0s; }
.ab-n2 { top: 55%; right: 2%; animation-delay: -2s; color: rgba(6,182,212,0.12); }
.ab-n3 { bottom: 12%; left: 3%; animation-delay: -4s; }
.ab-n4 { top: 20%; left: 2%; animation-delay: -1s; color: rgba(6,182,212,0.12); }

.ab-line {
  position: absolute; background: linear-gradient(to right, transparent, rgba(109,40,217,0.15), transparent);
  height: 1px; animation: ab-line-anim 5s ease-in-out infinite;
}
.ab-l1 { width: 300px; top: 30%; left: 0; animation-delay: 0s; }
.ab-l2 { width: 200px; bottom: 35%; right: 0; transform: rotate(-30deg); animation-delay: -2.5s; background: linear-gradient(to right, transparent, rgba(6,182,212,0.15), transparent); }

.ab-chip {
  position: absolute;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(109,40,217,0.2);
  color: var(--purple);
  box-shadow: 0 4px 16px rgba(109,40,217,0.12);
  animation: ab-chip-in 5s ease-in-out infinite;
  backdrop-filter: blur(8px);
}
.ab-chip1 { top: 12%; right: 8%; animation-delay: 0s; }
.ab-chip2 { bottom: 20%; right: 6%; animation-delay: -1.8s; color: var(--ocean); border-color: rgba(6,182,212,0.25); }
.ab-chip3 { top: 65%; left: 4%; animation-delay: -3.5s; }

/* =============================================
   CTA
   ============================================= */
#cta {
  position: relative; z-index: 1;
  background: rgba(4,6,15,0.82);
  padding: 5rem 0 7rem;
}
.cta-box {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(109,40,217,0.2);
  border-radius: 24px; padding: 5rem 4rem; text-align: center;
  position: relative; overflow: hidden;
}
.cta-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(109,40,217,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.cta-title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.8vw, 3rem); font-weight: 800; line-height: 1.15; margin-bottom: 1.1rem; }
.cta-sub { font-size: 0.98rem; color: rgba(255,255,255,0.6); max-width: 540px; margin: 0 auto 2.25rem; line-height: 1.8; }
.cta-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cta-number { font-size: 0.78rem; color: rgba(255,255,255,0.35); letter-spacing: 0.05em; }

/* =============================================
   FOOTER
   ============================================= */
footer {
  position: relative; z-index: 1;
  background: var(--bg-dark);
  border-top: 1px solid var(--border-dark);
  padding: 2.75rem 2rem;
}
.footer-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
}
.footer-brand { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-sig {
  height: 44px; width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.3s;
}
.footer-sig:hover { opacity: 0.8; }
.footer-sig-text {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
  background: linear-gradient(135deg, var(--white), rgba(255,255,255,0.5));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.footer-tagline { font-size: 0.72rem; color: rgba(255,255,255,0.25); font-weight: 500; }
.footer-links { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer-links a { font-size: 0.83rem; color: rgba(255,255,255,0.4); transition: color 0.2s; }
.footer-links a:hover { color: var(--white); }
.footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.25); }

/* =============================================
   WHATSAPP LAUNCHER
   ============================================= */
.wa-launcher {
  position: fixed; bottom: 2rem; right: 2rem;
  z-index: 500;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem;
}
.wa-toggle {
  width: 58px; height: 58px;
  background: #25D366;
  border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,0.45);
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  color: white; position: relative;
  z-index: 2;
}
.wa-toggle:hover { transform: scale(1.1); box-shadow: 0 10px 36px rgba(37,211,102,0.55); }
.wa-launcher.open .wa-toggle { background: #1a1a2e; box-shadow: 0 6px 24px rgba(0,0,0,0.4); transform: rotate(0deg); }
.wa-icon-wa, .wa-icon-x { position: absolute; transition: all 0.3s; }
.wa-icon-x { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.wa-launcher.open .wa-icon-wa { opacity: 0; transform: rotate(90deg) scale(0.5); }
.wa-launcher.open .wa-icon-x { opacity: 1; transform: rotate(0deg) scale(1); }

.wa-menu {
  background: rgba(8,10,20,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-dark);
  border-radius: 18px; padding: 1rem;
  min-width: 300px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transform: scale(0.8) translateY(20px); transform-origin: bottom right;
  opacity: 0; pointer-events: none;
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.wa-launcher.open .wa-menu { opacity: 1; pointer-events: all; transform: scale(1) translateY(0); }
.wa-menu-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); padding: 0.25rem 0.75rem 0.5rem;
}
.wa-option {
  display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1rem;
  border-radius: 12px; transition: all 0.2s; color: var(--white); cursor: pointer;
  border: 1px solid transparent;
}
.wa-option:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.wa-opt-icon { font-size: 1.4rem; flex-shrink: 0; }
.wa-option strong { display: block; font-size: 0.88rem; font-weight: 700; margin-bottom: 0.12rem; }
.wa-option span   { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.4); line-height: 1.3; }

/* =============================================
   REVEAL STATES
   ============================================= */
.reveal-up {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal-left {
  opacity: 0; transform: translateX(-60px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal-right {
  opacity: 0; transform: translateX(60px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal-up.visible, .reveal-left.visible, .reveal-right.visible {
  opacity: 1; transform: translate(0, 0);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
  .hero-content { max-width: 600px; padding: 10rem 2rem 5rem 3vw; }
  .fi-claude, .fi-ai { display: none; }
}
@media (max-width: 1024px) {
  .qual-grid { grid-template-columns: 1fr; }
  .collab-grid { grid-template-columns: 1fr; }
  .about-inner { grid-template-columns: 1fr; gap: 3rem; }
  .about-visual { position: static; display: flex; flex-direction: column; align-items: center; }
}
@media (max-width: 768px) {
  .nav-links, .btn-nav { display: none; }
  .nav-hamburger { display: flex; }
  .hero-content { max-width: 100%; padding: 9rem 1.5rem 4rem 1.5rem; }
  .fi-meta, .fi-google, .fi-n8n, .fi-claude, .fi-ai { display: none; }
  .hero-overlay {
    background:
      linear-gradient(to right, rgba(4,6,15,0.93) 0%, rgba(4,6,15,0.8) 60%, rgba(4,6,15,0.4) 100%),
      linear-gradient(to bottom, rgba(4,6,15,0.65) 0%, transparent 20%, transparent 72%, rgba(4,6,15,0.75) 100%);
  }
  .services-grid { grid-template-columns: 1fr; }
  .svc-inner { grid-template-columns: 1fr; gap: 3rem; }
  .svc-right { order: -1; }
  .svc-frame { max-width: 240px; }
  .ts-analytics-card { width: 170px; top: 5%; right: 2%; }
  .mma-grid { grid-template-columns: 1fr; }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .ts-neural-net { display: none; }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .partners-grid { grid-template-columns: 1fr; }
  .gate-cards { grid-template-columns: 1fr; }
  .cta-box { padding: 3rem 1.75rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .cs-header { flex-direction: column; align-items: flex-start; }
  .cs-card { flex: 0 0 calc(85% - 0.6rem); }
  section { padding: 5rem 0; }
  .stat-div { display: none; }
  .hero-stats { gap: 1rem; }
  .wa-menu { min-width: 260px; }
  .cert-strip { gap: 0.5rem; }
  #skills-ticker { flex-direction: column; gap: 0.5rem; padding: 0.85rem 0; }
  .ticker-label { padding: 0 1rem; }
}
@media (max-width: 480px) {
  .numbers-grid { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; }
  .btn-primary, .btn-ghost { width: 100%; justify-content: center; }
  .cta-buttons { flex-direction: column; align-items: center; }
  .gate-input-row { flex-direction: column; }
  .cs-card { flex: 0 0 calc(92% - 0.6rem); }
  .qual-grid { grid-template-columns: 1fr !important; }
  #skills-ticker { margin-top: 5rem; }
}

/* ── Mobile: hide decorative absolute elements that overlap content ── */
@media (max-width: 768px) {
  .ab-chip { display: none; }
  .ab-node { display: none; }
  .ab-line { display: none; }
  .pt-corner { display: none; }
  .pt-stream { display: none; }
  .pt-grid3d { display: none; }
  .ab-orb1 { width: 280px; height: 200px; }
  .ab-orb2 { width: 220px; height: 220px; }
  .ab-orb3 { display: none; }
  .cert-strip { padding: 1.5rem 1rem; gap: 0.75rem 0.5rem; }
  .cert-icon { width: 46px; height: 46px; font-size: 0.65rem; }
  .pt-card { padding: 1.25rem; }
  .pt-desc { font-size: 0.8rem; }
  .pt-links { gap: 0.4rem; flex-wrap: wrap; }
  .rg-term-body { padding: 1.25rem 1rem 1rem; }
  .rg-step-block { gap: 0.75rem 0.85rem; }
}

/* =============================================
   SKILLS SECTION
   ============================================= */
#skills {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}
.sk-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ocean-l);
  margin-bottom: 1.5rem;
  display: block;
}
.sk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.sk-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.sk-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 1.4rem;
  transition: all 0.35s;
  position: relative;
  overflow: hidden;
}
.sk-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, var(--ocean-l), var(--purple-l));
  opacity: 0; transition: opacity 0.35s;
}
.sk-card:hover { border-color: rgba(6,182,212,0.3); background: rgba(6,182,212,0.04); transform: translateY(-3px); }
.sk-card:hover::before { opacity: 1; }
.sk-card--ai:hover { border-color: rgba(139,92,246,0.3); background: rgba(109,40,217,0.06); }
.sk-card--ai::before { background: linear-gradient(to right, var(--purple-l), var(--ocean-l)); }
.sk-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.85rem;
  flex-shrink: 0;
}
.sk-icon--meta     { background: linear-gradient(135deg,rgba(24,119,242,0.2),rgba(10,93,192,0.1)); border: 1px solid rgba(24,119,242,0.3); color: #60A5FA; }
.sk-icon--google   { background: #fff; border: 1px solid rgba(66,133,244,0.2); }
.sk-icon--track    { background: linear-gradient(135deg,rgba(16,185,129,0.2),rgba(5,150,105,0.1)); border: 1px solid rgba(16,185,129,0.3); color: #34D399; }
.sk-icon--shopify  { background: linear-gradient(135deg,rgba(150,191,72,0.2),rgba(94,142,62,0.1)); border: 1px solid rgba(150,191,72,0.3); color: #86EFAC; }
.sk-icon--creative { background: linear-gradient(135deg,rgba(236,72,153,0.2),rgba(219,39,119,0.1)); border: 1px solid rgba(236,72,153,0.3); color: #F472B6; }
.sk-icon--copy     { background: linear-gradient(135deg,rgba(6,182,212,0.2),rgba(8,145,178,0.1)); border: 1px solid rgba(6,182,212,0.3); color: var(--ocean-l); }
.sk-icon--crm      { background: linear-gradient(135deg,rgba(245,158,11,0.2),rgba(217,119,6,0.1)); border: 1px solid rgba(245,158,11,0.3); color: #FCD34D; }
.sk-icon--research { background: linear-gradient(135deg,rgba(249,115,22,0.2),rgba(234,88,12,0.1)); border: 1px solid rgba(249,115,22,0.3); color: #FB923C; }
.sk-icon--lp       { background: linear-gradient(135deg,rgba(99,102,241,0.2),rgba(79,70,229,0.1)); border: 1px solid rgba(99,102,241,0.3); color: #A5B4FC; }
.sk-icon--consulting { background: linear-gradient(135deg,rgba(6,182,212,0.15),rgba(139,92,246,0.1)); border: 1px solid rgba(6,182,212,0.25); color: var(--ocean-l); }
.sk-icon--voiceflow { background: linear-gradient(135deg,rgba(0,52,204,0.2),rgba(0,184,217,0.1)); border: 1px solid rgba(0,184,217,0.3); color: #00B8D9; }
.sk-icon--auto     { background: linear-gradient(135deg,rgba(255,93,0,0.2),rgba(255,149,0,0.1)); border: 1px solid rgba(255,93,0,0.3); color: #FB923C; }
.sk-icon--agent    { background: linear-gradient(135deg,rgba(139,92,246,0.2),rgba(109,40,217,0.1)); border: 1px solid rgba(139,92,246,0.3); color: var(--purple-l); }
.sk-card h3 { font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: var(--white); margin-bottom: 0.45rem; line-height: 1.3; }
.sk-card p  { font-size: 0.78rem; color: rgba(255,255,255,0.48); line-height: 1.6; margin-bottom: 0.7rem; }
.sk-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sk-tags span { font-size: 0.6rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 20px; background: rgba(6,182,212,0.1); color: var(--ocean-l); border: 1px solid rgba(6,182,212,0.18); }
.sk-card--ai .sk-tags span { background: rgba(139,92,246,0.1); color: var(--purple-l); border-color: rgba(139,92,246,0.18); }

/* =============================================
   SPOTLIGHT GLOW CARDS (cursor-tracking)
   Vanilla port of the GlowCard component.
   --gx/--gy = cursor viewport px, --gxp = cursor X ratio (set on :root by app.js)
   ============================================= */
.sk-card > .cg,
.cs-card > .cg,
.how-step > .cg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  --cg-spot: 260px;
  --cg-hue: calc(188 + (var(--gxp, 0.5) * 112)); /* cyan on the left, purple on the right */
}
/* lift real card content above the glow layer */
.sk-card > *:not(.cg),
.cs-card > *:not(.cg),
.how-step > *:not(.cg) { position: relative; z-index: 1; }
/* interior spotlight fill */
.sk-card > .cg::before,
.cs-card > .cg::before,
.how-step > .cg::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    var(--cg-spot) var(--cg-spot) at
    calc(var(--gx, 0) * 1px) calc(var(--gy, 0) * 1px),
    hsl(var(--cg-hue) 90% 62% / 0.16), transparent 65%
  );
  background-attachment: fixed;
}
/* cursor-tracking glowing border ring */
.sk-card > .cg::after,
.cs-card > .cg::after,
.how-step > .cg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    calc(var(--cg-spot) * 0.9) calc(var(--cg-spot) * 0.9) at
    calc(var(--gx, 0) * 1px) calc(var(--gy, 0) * 1px),
    hsl(var(--cg-hue) 95% 66% / 0.9), transparent 70%
  );
  background-attachment: fixed;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
/* desktop pointer only — leaves mobile untouched and cost-free */
@media (hover: hover) and (pointer: fine) {
  .sk-card:hover > .cg,
  .cs-card:hover > .cg,
  .how-step:hover > .cg { opacity: 1; }
}

/* Skills responsive */
@media (max-width: 1100px) { .sk-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .sk-grid, .sk-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .sk-grid, .sk-grid--3 { grid-template-columns: 1fr; } }

/* Qual grid 4 cards */
@media (min-width: 900px) { .qual-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 899px) { .qual-grid { grid-template-columns: repeat(2, 1fr); } }

/* =============================================
   MODERN ANIMATED FOOTER
   ============================================= */
#footer {
  position: relative;
  background: #020409;
  overflow: hidden;
  margin-top: 0;
}

/* Animated gradient top border */
.ft-border-top {
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--purple-l) 20%,
    var(--ocean-l) 50%,
    var(--purple-l) 80%,
    transparent 100%);
  background-size: 200% 100%;
  animation: ft-border-anim 4s linear infinite;
}
@keyframes ft-border-anim {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Background atmosphere */
.ft-space { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ft-nb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.07;
  animation: ft-float 8s ease-in-out infinite;
}
.ft-nb1 { width: 600px; height: 400px; background: var(--purple); top: -100px; left: -150px; animation-delay: 0s; }
.ft-nb2 { width: 500px; height: 350px; background: var(--ocean); top: 50px; right: -100px; animation-delay: -3s; }
.ft-nb3 { width: 400px; height: 300px; background: var(--purple); bottom: 0; left: 40%; animation-delay: -5s; }
@keyframes ft-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.ft-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(139,92,246,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.ft-orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, var(--ocean-l), transparent 70%);
  opacity: 0.06; pointer-events: none;
}
.ft-orb1 { width: 300px; height: 300px; bottom: 80px; left: 10%; }
.ft-orb2 { width: 200px; height: 200px; top: 40px; right: 20%; background: radial-gradient(circle, var(--purple-l), transparent 70%); }

/* Main footer grid */
.ft-main {
  position: relative; z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 4.5rem 2rem 3rem;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
  gap: 3rem;
}

/* Brand column */
.ft-logo { display: inline-block; margin-bottom: 1rem; }
.ft-logo-text {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem; font-weight: 700;
  background: linear-gradient(135deg, var(--white), rgba(255,255,255,0.7));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s;
}
.ft-logo:hover .ft-logo-text {
  background: linear-gradient(135deg, var(--ocean-l), var(--purple-l));
  -webkit-background-clip: text; background-clip: text;
}
.ft-bio {
  font-size: 0.875rem; color: rgba(255,255,255,0.45);
  line-height: 1.75; margin-bottom: 1.5rem; max-width: 280px;
}
.ft-contact-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ft-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem; border-radius: 50px;
  font-size: 0.72rem; font-weight: 600;
  transition: all 0.25s; cursor: pointer;
}
.ft-chip--wa  { background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.25); color: #25D366; }
.ft-chip--wa:hover  { background: rgba(37,211,102,0.2); border-color: rgba(37,211,102,0.5); transform: translateY(-2px); }
.ft-chip--email { background: rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.2); color: var(--ocean-l); }
.ft-chip--email:hover { background: rgba(6,182,212,0.2); border-color: rgba(6,182,212,0.4); transform: translateY(-2px); }
.ft-chip--ig { background: rgba(236,72,153,0.1); border: 1px solid rgba(236,72,153,0.2); color: #EC4899; }
.ft-chip--ig:hover { background: rgba(236,72,153,0.2); border-color: rgba(236,72,153,0.4); transform: translateY(-2px); }

.ft-available {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; color: rgba(52,211,153,0.8);
  font-weight: 500;
}
.ft-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34D399; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(52,211,153,0.4);
  animation: ft-pulse 2s ease-in-out infinite;
}
@keyframes ft-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* Nav columns */
.ft-col-title {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ft-nav-list { display: flex; flex-direction: column; gap: 0.6rem; }
.ft-nav-list li a {
  font-size: 0.875rem; color: rgba(255,255,255,0.5);
  transition: all 0.25s; display: inline-flex; align-items: center; gap: 0.4rem;
}
.ft-nav-list li a::before {
  content: ''; width: 0; height: 1px;
  background: var(--ocean-l); transition: width 0.25s;
}
.ft-nav-list li a:hover { color: var(--white); padding-left: 4px; }
.ft-nav-list li a:hover::before { width: 12px; }

/* Contact column */
.ft-contact-info { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.ft-contact-row {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.82rem; color: rgba(255,255,255,0.45);
  transition: color 0.25s;
}
.ft-contact-row svg { flex-shrink: 0; color: var(--ocean-l); opacity: 0.7; }
.ft-contact-row:hover { color: rgba(255,255,255,0.7); }
.ft-cta-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.4rem; border-radius: 50px;
  background: linear-gradient(135deg, var(--purple), var(--ocean));
  color: var(--white); font-size: 0.82rem; font-weight: 600;
  transition: all 0.3s; box-shadow: 0 4px 20px rgba(109,40,217,0.35);
}
.ft-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(109,40,217,0.55);
}

/* Stats bar */
.ft-stats-bar {
  position: relative; z-index: 2;
  max-width: var(--max-w); margin: 0 auto;
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  gap: 2rem; flex-wrap: wrap;
  background: rgba(255,255,255,0.015);
}
.ft-stat { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.ft-stat-n {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
  background: linear-gradient(135deg, var(--ocean-l), var(--purple-l));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ft-stat-l { font-size: 0.65rem; color: rgba(255,255,255,0.3); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.ft-stat-div { width: 1px; height: 32px; background: rgba(255,255,255,0.08); flex-shrink: 0; }

/* Bottom bar */
.ft-bottom {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.ft-bottom-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.ft-copy { font-size: 0.75rem; color: rgba(255,255,255,0.25); }
.ft-bottom-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.ft-bottom-links a { font-size: 0.75rem; color: rgba(255,255,255,0.3); transition: color 0.25s; }
.ft-bottom-links a:hover { color: var(--ocean-l); }

/* Footer responsive */
@media (max-width: 1024px) { .ft-main { grid-template-columns: 1.5fr 1fr 1fr; } .ft-col-contact { grid-column: 1 / -1; } }
@media (max-width: 700px)  { .ft-main { grid-template-columns: 1fr 1fr; padding: 3rem 1.5rem 2rem; gap: 2rem; } .ft-col-brand { grid-column: 1 / -1; } }
@media (max-width: 480px)  { .ft-main { grid-template-columns: 1fr; } .ft-stats-bar { gap: 1rem; } .ft-stat-div { display: none; } }

/* ═══════════════════════════════════════════════════════════
   RESULTS VAULT — DEEP SPACE 3D GATE
   ═══════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes rg-ring-cw   { from { transform: translate(-50%,-50%) rotate(0deg); }   to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes rg-ring-ccw  { from { transform: translate(-50%,-50%) rotate(0deg); }   to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes rg-radar-sw  { from { transform: translate(-50%,-50%) rotate(0deg); }   to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes rg-scanline  { 0%,100% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 99% { transform: translateY(100%); opacity: 0; } }
@keyframes rg-metric-f  { 0%,100% { transform: translateY(0) scale(1); opacity: 0.18; } 50% { transform: translateY(-14px) scale(1.05); opacity: 0.32; } }
@keyframes rg-stream-d  { from { transform: translateY(-100%); } to { transform: translateY(100vh); } }
@keyframes rg-orbit     { from { transform: rotate(0deg) translateX(var(--orbit-r)) rotate(0deg); }   to { transform: rotate(360deg) translateX(var(--orbit-r)) rotate(-360deg); } }
@keyframes rg-pulse-st  { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes rg-grid-pan  { from { background-position: 0 0; } to { background-position: 0 80px; } }
@keyframes rg-nb-drift  { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-20px) scale(1.1); } }
@keyframes rg-status-blink { 0%,100% { opacity:1; box-shadow: 0 0 6px #22c55e; } 50% { opacity:0.25; box-shadow: none; } }
@keyframes rg-fcard-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rg-conn-pulse { 0%,100% { opacity:1; } 50% { opacity:0.2; } }
@keyframes rg-lock-glow { 0%,100% { filter: drop-shadow(0 0 6px rgba(109,40,217,0.5)); } 50% { filter: drop-shadow(0 0 18px rgba(6,182,212,0.8)); } }

/* ── Section wrapper ── */
#results {
  position: relative;
  padding: 7rem 0 6rem;
  overflow: hidden;
  background: rgba(6,5,15,0.84);
}

/* ── Deep space background ── */
.rg-space {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Nebulas */
.rg-nb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: rg-nb-drift 18s ease-in-out infinite;
}
.rg-nb1 {
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(109,40,217,0.25) 0%, transparent 70%);
  top: -10%; left: -5%;
  animation-delay: 0s;
}
.rg-nb2 {
  width: 500px; height: 500px;
  background: radial-gradient(ellipse, rgba(6,182,212,0.18) 0%, transparent 70%);
  top: 20%; right: -8%;
  animation-delay: -6s;
}
.rg-nb3 {
  width: 700px; height: 350px;
  background: radial-gradient(ellipse, rgba(139,92,246,0.14) 0%, transparent 70%);
  bottom: -5%; left: 30%;
  animation-delay: -12s;
}

/* Perspective grid */
.rg-grid3d {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(6,182,212,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,182,212,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(20deg) scaleY(1.4);
  transform-origin: center 60%;
  animation: rg-grid-pan 8s linear infinite;
  opacity: 0.5;
}

/* Data streams */
.rg-stream {
  position: absolute;
  width: 1px;
  height: 200px;
  background: linear-gradient(to bottom, transparent, var(--ocean-l), transparent);
  animation: rg-stream-d 6s linear infinite;
  opacity: 0.25;
}
.rg-s1 { left: 12%; animation-duration: 5.2s; animation-delay: 0s; }
.rg-s2 { left: 35%; animation-duration: 7.1s; animation-delay: -2s; }
.rg-s3 { left: 67%; animation-duration: 4.8s; animation-delay: -1s; }
.rg-s4 { left: 88%; animation-duration: 6.4s; animation-delay: -3.5s; }

/* Floating metric fragments */
.rg-metric {
  position: absolute;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ocean-l);
  opacity: 0.18;
  animation: rg-metric-f 6s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}
.rg-m1 { top: 15%; left:  8%; animation-delay: 0s; }
.rg-m2 { top: 30%; right: 9%; animation-delay: -1.5s; color: var(--purple-l); }
.rg-m3 { top: 60%; left:  6%; animation-delay: -3s; }
.rg-m4 { top: 70%; right: 7%; animation-delay: -0.8s; color: var(--purple-l); }
.rg-m5 { top: 45%; left: 15%; animation-delay: -2.2s; }
.rg-m6 { top: 20%; right:15%; animation-delay: -4s; color: var(--purple-l); }

/* Corner brackets */
.rg-corner {
  position: absolute;
  width: 40px; height: 40px;
  opacity: 0.35;
}
.rg-corner::before, .rg-corner::after { content: ''; position: absolute; background: var(--ocean-l); }
.rg-corner::before { width: 100%; height: 2px; top: 0; }
.rg-corner::after  { width: 2px; height: 100%; top: 0; }
.rg-c-tl { top: 1.5rem; left: 1.5rem; }
.rg-c-tr { top: 1.5rem; right: 1.5rem; transform: scaleX(-1); }
.rg-c-bl { bottom: 1.5rem; left: 1.5rem; transform: scaleY(-1); }
.rg-c-br { bottom: 1.5rem; right: 1.5rem; transform: scale(-1); }

/* ── Inner content ── */
.rg-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Header ── */
.rg-header {
  text-align: center;
  margin-bottom: 4rem;
}
.rg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ocean-l);
  margin-bottom: 1.2rem;
}
.rg-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ocean-l);
  animation: rg-pulse-st 2s ease-in-out infinite;
}
.rg-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 1.2rem;
}
.rg-sub {
  max-width: 580px;
  margin: 0 auto;
  color: rgba(255,255,255,0.45);
  font-size: 1rem;
  line-height: 1.7;
}

/* ── 3D Arena ── */
.rg-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 4rem;
}

/* Floating card columns */
.rg-cards-left,
.rg-cards-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.rg-cards-right { align-items: flex-start; }
.rg-cards-left  { align-items: flex-end; }

/* Base floating card */
.rg-fcard {
  position: relative;
  width: 200px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  backdrop-filter: blur(10px);
  transition: transform 0.35s, box-shadow 0.35s;
}
.rg-fcard:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 40px rgba(6,182,212,0.15);
}

/* Front card — fully visible */
.rg-fcard--front {
  animation: rg-fcard-float 5s ease-in-out infinite;
  border-color: rgba(109,40,217,0.35);
  box-shadow: 0 0 30px rgba(109,40,217,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
}
.rg-fcard--front::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(109,40,217,0.4), rgba(6,182,212,0.3));
  z-index: -1;
  opacity: 0.5;
}
/* Mid card — slightly faded */
.rg-fcard--mid {
  transform: translateX(-8px) scale(0.95);
  opacity: 0.65;
  animation: rg-fcard-float 7s ease-in-out infinite;
  animation-delay: -2s;
}
.rg-fcard--r.rg-fcard--mid { transform: translateX(8px) scale(0.95); }
/* Back card — most faded */
.rg-fcard--back {
  transform: translateX(-16px) scale(0.9);
  opacity: 0.35;
  animation: rg-fcard-float 9s ease-in-out infinite;
  animation-delay: -4s;
  filter: blur(1px);
}
.rg-fcard--r.rg-fcard--back { transform: translateX(16px) scale(0.9); }

/* Blur overlay for mid/back */
.rg-fcard-blur {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backdrop-filter: blur(2px);
}

/* Card content */
.rg-fcard-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ocean-l);
  opacity: 0.8;
  margin-bottom: 0.35rem;
}
.rg-fcard-client {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-bottom: 0.5rem;
}
.rg-fcard-metric {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--ocean-l), var(--purple-l));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 0.25rem;
}
.rg-fcard-sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.5rem;
}
.rg-fcard-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.rg-fcard-tags span {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: 30px;
  background: rgba(109,40,217,0.2);
  border: 1px solid rgba(109,40,217,0.3);
  color: var(--purple-l);
}
.rg-fcard-mask {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.4);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.25);
}

/* ── Central Vault ── */
.rg-vault {
  position: relative;
  width: 240px;
  height: 240px;
  flex-shrink: 0;
}

/* Rotating rings */
.rg-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1.5px solid transparent;
}
.rg-ring-outer {
  width: 230px; height: 230px;
  border-color: rgba(109,40,217,0.5);
  border-top-color: rgba(109,40,217,0.9);
  border-right-color: rgba(6,182,212,0.4);
  animation: rg-ring-cw 8s linear infinite;
  box-shadow: 0 0 20px rgba(109,40,217,0.15), inset 0 0 20px rgba(109,40,217,0.05);
}
.rg-ring-mid {
  width: 180px; height: 180px;
  border-color: rgba(6,182,212,0.4);
  border-bottom-color: rgba(6,182,212,0.9);
  border-left-color: rgba(139,92,246,0.4);
  animation: rg-ring-ccw 5s linear infinite;
  box-shadow: 0 0 14px rgba(6,182,212,0.15);
}
.rg-ring-inner {
  width: 130px; height: 130px;
  border-color: rgba(139,92,246,0.35);
  border-top-color: rgba(139,92,246,0.85);
  animation: rg-ring-cw 3s linear infinite;
  box-shadow: 0 0 10px rgba(139,92,246,0.2);
}

/* Radar sweep */
.rg-radar {
  position: absolute;
  top: 50%; left: 50%;
  width: 225px; height: 225px;
  border-radius: 50%;
  overflow: hidden;
  animation: rg-radar-sw 4s linear infinite;
}
.rg-radar::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 50%; height: 50%;
  transform-origin: 0 0;
  background: conic-gradient(from -20deg, transparent, rgba(6,182,212,0.15) 30%, rgba(6,182,212,0.02) 60%, transparent 80%);
}

/* Lock core */
.rg-lock-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109,40,217,0.3) 0%, rgba(6,182,212,0.1) 60%, transparent 100%);
  border: 1px solid rgba(109,40,217,0.4);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(109,40,217,0.25), inset 0 0 20px rgba(0,0,0,0.5);
}
.rg-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, rgba(6,182,212,0.8), transparent);
  animation: rg-scanline 3s linear infinite;
}
.rg-lock-icon {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,0.75);
  animation: rg-lock-glow 3s ease-in-out infinite;
}

/* Orbit dots */
.rg-orbit-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin: -3.5px 0 0 -3.5px;
  background: var(--ocean-l);
  box-shadow: 0 0 8px var(--ocean-l);
}
.rg-od1 { --orbit-r: 115px; animation: rg-orbit 8s linear infinite; }
.rg-od2 { --orbit-r: 90px;  animation: rg-orbit 5s linear infinite; animation-delay: -1.5s; background: var(--purple-l); box-shadow: 0 0 8px var(--purple-l); }
.rg-od3 { --orbit-r: 65px;  animation: rg-orbit 3s linear infinite; animation-delay: -0.8s; }

/* Vault status text */
.rg-vault-status {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ocean-l);
  white-space: nowrap;
  animation: rg-pulse-st 2.5s ease-in-out infinite;
}

/* ── Access Terminal ── */
.rg-terminal {
  background: rgba(8,6,20,0.92);
  border: 1px solid rgba(109,40,217,0.35);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow:
    0 0 60px rgba(109,40,217,0.12),
    0 0 120px rgba(6,182,212,0.06),
    inset 0 1px 0 rgba(255,255,255,0.05);
  max-width: 680px;
  margin: 0 auto;
}

/* Terminal bar */
.rg-term-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.2rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rg-term-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.rg-tdot {
  display: block;
  width: 11px; height: 11px;
  border-radius: 50%;
}
.rg-tdot--red    { background: #ff5f57; }
.rg-tdot--yellow { background: #febc2e; }
.rg-tdot--green  { background: #28c840; }
.rg-term-title {
  flex: 1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  text-align: center;
}
.rg-term-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.rg-status-dot {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: rg-status-blink 2s ease-in-out infinite;
}

/* Terminal body */
.rg-term-body {
  padding: 2rem 2rem 1.5rem;
}

/* Step blocks */
.rg-step-block {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem 1.2rem;
  align-items: center;
}
.rg-step-num-badge {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(109,40,217,0.5), rgba(6,182,212,0.3));
  border: 1px solid rgba(109,40,217,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.rg-step-num-badge--2 {
  background: linear-gradient(135deg, rgba(6,182,212,0.4), rgba(139,92,246,0.3));
  border-color: rgba(6,182,212,0.4);
}
.rg-step-content h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin: 0 0 0.3rem;
}
.rg-step-content p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
  margin: 0;
  line-height: 1.55;
}

/* WhatsApp button */
.rg-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #25d366, #128c4a);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(37,211,102,0.3);
  flex-shrink: 0;
}
.rg-wa-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(37,211,102,0.45);
}

/* Step connector */
.rg-step-connector-v {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.75rem 0;
  padding-left: calc(38px + 1rem + 1.2rem);
}
.rg-conn-line {
  width: 1px;
  height: 20px;
  background: linear-gradient(to bottom, rgba(109,40,217,0.6), rgba(6,182,212,0.6));
  animation: rg-conn-pulse 2s ease-in-out infinite;
}
.rg-conn-arrow {
  font-size: 0.75rem;
  color: rgba(6,182,212,0.6);
  line-height: 1;
  animation: rg-conn-pulse 2s ease-in-out infinite;
}

/* Input row */
.rg-input-wrap { grid-column: 1 / -1; }
.rg-input-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.75rem;
}
.rg-input-field-wrap {
  position: relative;
  flex: 1;
}
.rg-input-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.25);
  pointer-events: none;
}
#gate-input {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 2.6rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(109,40,217,0.3);
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  font-family: monospace;
  letter-spacing: 0.15em;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  box-sizing: border-box;
}
#gate-input::placeholder { color: rgba(255,255,255,0.18); letter-spacing: 0.1em; }
#gate-input:focus {
  border-color: rgba(6,182,212,0.6);
  box-shadow: 0 0 0 3px rgba(6,182,212,0.1);
}

/* Unlock button */
.rg-unlock-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.3rem;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--purple), var(--ocean));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(109,40,217,0.35);
}
.rg-unlock-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(109,40,217,0.55);
}

/* Error */
.gate-error {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: #f87171;
  min-height: 1.2em;
  letter-spacing: 0.02em;
}

/* Terminal footer */
.rg-term-footer {
  padding: 0.8rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  flex-wrap: wrap;
}
.rg-tf-div { color: rgba(255,255,255,0.1); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .rg-fcard { width: 170px; }
  .rg-vault { width: 200px; height: 200px; }
  .rg-ring-outer { width: 195px; height: 195px; }
  .rg-ring-mid   { width: 150px; height: 150px; }
  .rg-ring-inner { width: 105px; height: 105px; }
  .rg-radar { width: 190px; height: 190px; }
}
@media (max-width: 860px) {
  .rg-arena {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .rg-cards-left  { flex-direction: row; justify-content: center; align-items: stretch; order: 2; }
  .rg-cards-right { flex-direction: row; justify-content: center; align-items: stretch; order: 3; }
  .rg-vault { order: 1; margin: 0 auto 2rem; }
  .rg-fcard--mid  { transform: scale(0.95); }
  .rg-fcard--back { transform: scale(0.9); filter: none; }
  .rg-fcard--r.rg-fcard--mid  { transform: scale(0.95); }
  .rg-fcard--r.rg-fcard--back { transform: scale(0.9); }
}
@media (max-width: 640px) {
  .rg-cards-left, .rg-cards-right { flex-direction: column; align-items: center; }
  .rg-fcard { width: 100%; max-width: 280px; }
  .rg-fcard--mid, .rg-fcard--back { transform: none; opacity: 1; filter: none; }
  .rg-step-block { grid-template-columns: auto 1fr; }
  .rg-wa-btn { grid-column: 1 / -1; }
  .rg-input-row { flex-direction: column; }
  .rg-unlock-btn { width: 100%; justify-content: center; }
  .rg-term-title { display: none; }
  .rg-term-footer { gap: 0.5rem; }
}

/* =============================================
   v3 OVERHAUL ·NEW SECTIONS
   ============================================= */

/* ── Hero reassure line under CTAs ── */
.hero-reassure {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  letter-spacing: 0.01em;
  flex-wrap: wrap;
}
.hero-reassure .check-mark { color: #34D399; font-weight: 800; margin-right: 0.2rem; }
.hero-reassure .reassure-div { color: rgba(255,255,255,0.2); margin: 0 0.15rem; }
@media (max-width: 640px) {
  .hero-reassure { font-size: 0.72rem; gap: 0.4rem; }
  .hero-reassure .reassure-div { display: none; }
}

/* ── Trust partner strip ── */
#trust-partners {
  position: relative;
  z-index: 1;
  padding: 4.5rem 0 4rem;
  background: linear-gradient(180deg, #06070f 0%, #0a0a1f 100%);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.tp-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }
.tp-eyebrow {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 2.5rem;
}
.tp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.tp-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(18,20,38,0.55);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 8px 30px -12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: all 0.3s;
}
.tp-cell:hover {
  border-color: rgba(6,182,212,0.4);
  background: rgba(20,28,52,0.68);
  transform: translateY(-3px);
}
.tp-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tp-icon--meta { background: rgba(24,119,242,0.12); border: 1px solid rgba(24,119,242,0.3); color: #1877F2; }
.tp-icon--google { background: #fff; border: 1px solid rgba(66,133,244,0.2); }
.tp-icon--voiceflow { background: rgba(0,82,204,0.12); border: 1px solid rgba(0,82,204,0.3); }
.tp-icon--make { background: rgba(234,75,0,0.12); border: 1px solid rgba(234,75,0,0.3); }
.tp-icon--vapi { background: rgba(109,40,217,0.12); border: 1px solid rgba(109,40,217,0.3); }
.tp-icon--shopify { background: rgba(150,191,72,0.12); border: 1px solid rgba(150,191,72,0.3); }

.tp-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}
.tp-tier {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.45);
  text-align: center;
}

@media (max-width: 1024px) { .tp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .tp-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .tp-cell { padding: 1rem 0.5rem; } #trust-partners { padding: 3rem 0; } }

/* ── How We Work — 3 step ── */
#how { padding: 7rem 0; position: relative; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.how-step {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 2.25rem 1.85rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: all 0.35s;
  overflow: hidden;
}
.how-step::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--ocean));
  opacity: 0; transition: opacity 0.35s;
}
.how-step:hover {
  transform: translateY(-6px);
  border-color: rgba(109,40,217,0.2);
  box-shadow: 0 20px 50px rgba(109,40,217,0.12);
}
.how-step:hover::before { opacity: 1; }

.how-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--purple), var(--ocean));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.75rem;
  opacity: 0.35;
}
.how-day {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--ocean);
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.how-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.85rem;
  line-height: 1.2;
}
.how-desc {
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.how-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 1.25rem;
}
.how-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.82rem;
  color: var(--text-mid);
  font-weight: 500;
}
.how-list li::before {
  content: '✓';
  position: absolute; left: 0; top: -1px;
  color: var(--ocean);
  font-weight: 800;
}

.how-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.how-cta-sub {
  font-size: 0.8rem;
  color: var(--text-mid);
  font-weight: 500;
}

@media (max-width: 1024px) { .how-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px)  { #how { padding: 4rem 0; } .how-step { padding: 1.75rem 1.4rem; } }

/* ── ROAS Calculator ── */
#roas-calc {
  position: relative;
  padding: 7rem 0;
  background: rgba(6,7,15,0.84);
  overflow: hidden;
}
.rc-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.rc-orb { position: absolute; border-radius: 50%; filter: blur(110px); }
.rc-orb1 { width: 500px; height: 400px; top: -10%; left: -8%; background: rgba(109,40,217,0.18); }
.rc-orb2 { width: 450px; height: 350px; bottom: -5%; right: -8%; background: rgba(6,182,212,0.15); }
.rc-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(6,182,212,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,182,212,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.6;
}
#roas-calc .section-inner { position: relative; z-index: 2; }
.rc-eyebrow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--ocean-l);
  margin-bottom: 1rem;
}
.rc-card {
  max-width: 920px;
  margin: 0 auto;
  background: rgba(8,6,20,0.92);
  border: 1px solid rgba(109,40,217,0.3);
  border-radius: 22px;
  padding: 3rem 2.5rem;
  backdrop-filter: blur(20px);
  box-shadow:
    0 0 80px rgba(109,40,217,0.15),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.rc-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.rc-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.75rem;
}
.rc-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(109,40,217,0.3);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.rc-input-wrap:focus-within {
  border-color: rgba(6,182,212,0.6);
  box-shadow: 0 0 0 3px rgba(6,182,212,0.1);
}
.rc-pfx, .rc-sfx {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}
.rc-pfx { margin-right: 0.4rem; }
.rc-sfx { margin-left: 0.4rem; }
.rc-input-wrap input {
  flex: 1;
  background: none; border: none; outline: none;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  width: 100%;
  -moz-appearance: textfield;
}
.rc-input-wrap input::-webkit-outer-spin-button,
.rc-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rc-field input[type="range"] {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--purple), var(--ocean));
  border-radius: 4px;
  appearance: none; -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
.rc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(109,40,217,0.5);
  border: 2px solid var(--purple-l);
}
.rc-field input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--purple-l);
}
.rc-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  margin: 0 0 2.5rem;
}
.rc-results {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 2rem;
}
.rc-result {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  position: relative;
}
.rc-result-projected {
  background: linear-gradient(135deg, rgba(109,40,217,0.15), rgba(6,182,212,0.1));
  border: 1px solid rgba(109,40,217,0.4);
  box-shadow: 0 0 40px rgba(109,40,217,0.15);
}
.rc-result-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.6rem;
  text-transform: uppercase;
}
.rc-result-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.65rem;
}
.rc-result-projected .rc-result-num {
  background: linear-gradient(135deg, var(--ocean-l), var(--purple-l));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rc-pfx-sm { font-size: 0.65em; opacity: 0.65; margin-right: 2px; }
.rc-result-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.75rem;
  border-radius: 30px;
}
.rc-tag-now { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); }
.rc-tag-new { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
.rc-arrow { color: var(--ocean-l); display: flex; align-items: center; justify-content: center; }
.rc-uplift {
  background: rgba(6,182,212,0.06);
  border: 1px solid rgba(6,182,212,0.2);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  margin-bottom: 2rem;
}
.rc-uplift-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
}
.rc-uplift-row + .rc-uplift-row {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.rc-uplift-label { color: rgba(255,255,255,0.6); font-weight: 500; }
.rc-uplift-num { font-family: var(--font-display); font-weight: 800; color: #34D399; font-size: 1.15rem; }
.rc-cta { text-align: center; }
.rc-cta .btn-primary { margin-bottom: 1rem; display: inline-flex; }
.rc-disclaimer {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}
@media (max-width: 768px) {
  #roas-calc { padding: 4rem 0; }
  .rc-card { padding: 2rem 1.5rem; }
  .rc-inputs { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1.75rem; }
  .rc-results { grid-template-columns: 1fr; gap: 0.75rem; }
  .rc-arrow { transform: rotate(90deg); margin: 0.25rem 0; }
  .rc-result-num { font-size: 1.85rem; }
  .rc-uplift-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; font-size: 0.85rem; }
  .rc-input-wrap input { font-size: 1.3rem; }
}

/* ── FAQ ── */
#faq {
  position: relative;
  padding: 7rem 0 5rem;
  background:
    radial-gradient(ellipse 65% 55% at 18% 12%, rgba(109,40,217,0.30), transparent 62%),
    radial-gradient(ellipse 55% 50% at 88% 82%, rgba(6,182,212,0.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 55% 50%, rgba(139,92,246,0.14), transparent 65%),
    rgba(4,6,15,0.5);
  overflow: hidden;
}
.faq-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.faq-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.5; will-change: transform, opacity; }
.faq-orb1 { width: 500px; height: 400px; top: 10%; left: -10%; background: rgba(109,40,217,0.14); animation: faqOrbDrift1 20s ease-in-out infinite; }
.faq-orb2 { width: 400px; height: 300px; bottom: 15%; right: -8%; background: rgba(6,182,212,0.12); animation: faqOrbDrift2 26s ease-in-out infinite; }
@keyframes faqOrbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1);       opacity: 0.42; }
  50%      { transform: translate(70px, 46px) scale(1.16); opacity: 0.66; }
}
@keyframes faqOrbDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1);         opacity: 0.38; }
  50%      { transform: translate(-56px, -34px) scale(1.22); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) { .faq-orb1, .faq-orb2 { animation: none !important; } }
#faq .section-inner { position: relative; z-index: 2; }
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.faq-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s, background 0.25s;
}
.faq-item.open {
  border-color: rgba(109,40,217,0.4);
  background: rgba(109,40,217,0.05);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1.15rem 1.6rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-align: left;
  transition: color 0.2s;
  gap: 1.1rem;
}
.faq-q-text { flex: 1; transition: color 0.2s; }
.faq-q:hover { color: var(--ocean-l); }

/* Space icon badges */
.faq-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--ocean-l);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.08), transparent 55%),
    linear-gradient(140deg, rgba(139,92,246,0.16), rgba(6,182,212,0.10));
  border: 1px solid rgba(139,92,246,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 16px rgba(139,92,246,0.12);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s, border-color 0.35s, background 0.35s;
}
.faq-icon svg {
  width: 23px;
  height: 23px;
  filter: drop-shadow(0 0 4px currentColor);
}
/* twinkle star glint */
.faq-icon::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  opacity: 0;
  transition: opacity 0.35s;
}
.faq-item { position: relative; }
.faq-item .faq-icon { position: relative; }
.faq-q:hover .faq-icon,
.faq-item.open .faq-icon {
  border-color: rgba(6,182,212,0.55);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.14), transparent 55%),
    linear-gradient(140deg, rgba(139,92,246,0.34), rgba(6,182,212,0.26));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 20px rgba(139,92,246,0.28), 0 0 22px currentColor;
  transform: scale(1.07) rotate(-4deg);
}
.faq-q:hover .faq-icon::after,
.faq-item.open .faq-icon::after { opacity: 0.9; }

/* per-item neon color — a small constellation */
.faq-item:nth-child(1) .faq-icon { color: #a78bfa; }
.faq-item:nth-child(2) .faq-icon { color: #22d3ee; }
.faq-item:nth-child(3) .faq-icon { color: #f0abfc; }
.faq-item:nth-child(4) .faq-icon { color: #60a5fa; }
.faq-item:nth-child(5) .faq-icon { color: #5eead4; }
.faq-item:nth-child(6) .faq-icon { color: #c4b5fd; }
.faq-item:nth-child(7) .faq-icon { color: #f9a8d4; }
.faq-item:nth-child(8) .faq-icon { color: #818cf8; }
.faq-chev {
  flex-shrink: 0;
  color: rgba(255,255,255,0.4);
  transition: transform 0.3s, color 0.2s;
}
.faq-item.open .faq-chev {
  transform: rotate(180deg);
  color: var(--ocean-l);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-item.open .faq-a { max-height: 400px; }
.faq-a p {
  padding: 0 1.6rem 1.5rem;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  margin: 0;
}
@media (max-width: 768px) {
  #faq { padding: 4rem 0 3rem; }
  .faq-q { font-size: 0.95rem; padding: 1rem 1.2rem; gap: 0.85rem; }
  .faq-icon { width: 38px; height: 38px; border-radius: 11px; }
  .faq-icon svg { width: 20px; height: 20px; }
  .faq-a p { padding: 0 1.2rem 1.25rem; font-size: 0.85rem; }
}

/* =============================================
   ROAS calc — methodology block
   ============================================= */
.rc-method {
  max-width: 760px;
  margin: 0 auto 3rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: rgba(6,182,212,0.05);
  border: 1px solid rgba(6,182,212,0.18);
  border-radius: 12px;
}
.rc-method-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(6,182,212,0.12);
  color: var(--ocean-l);
  display: flex; align-items: center; justify-content: center;
}
.rc-method-text {
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
}
.rc-method-text strong { color: rgba(255,255,255,0.92); font-weight: 700; }
.rc-range-sep {
  margin: 0 0.4rem;
  color: rgba(255,255,255,0.35);
  font-weight: 400;
  font-size: 0.7em;
}
.rc-result-projected .rc-result-num { font-size: 1.85rem; }
@media (max-width: 768px) {
  .rc-method { padding: 1rem 1.25rem; gap: 0.75rem; margin-bottom: 2rem; }
  .rc-method-text { font-size: 0.78rem; }
  .rc-result-projected .rc-result-num { font-size: 1.55rem; }
}

/* =============================================
   AUDIT QUALIFICATION FORM
   ============================================= */
#audit-form {
  position: relative;
  padding: 7rem 0 5rem;
  background: linear-gradient(180deg, #07050f 0%, #0a0a1f 60%, #07050f 100%);
  overflow: hidden;
}
.af-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.af-orb { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.5; }
.af-orb1 { width: 480px; height: 380px; top: 5%; left: -8%; background: rgba(109,40,217,0.18); }
.af-orb2 { width: 420px; height: 320px; bottom: 8%; right: -8%; background: rgba(6,182,212,0.14); }
.af-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(109,92,246,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,92,246,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.5;
}
#audit-form .section-inner { position: relative; z-index: 2; }

.af-eyebrow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--ocean-l);
  margin-bottom: 1rem;
}
.af-subtle {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
  font-style: italic;
  margin-bottom: 3.5rem;
}

.af-panel {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(8,6,20,0.92);
  border: 1px solid rgba(109,40,217,0.3);
  border-radius: 22px;
  padding: 3rem 2.75rem;
  backdrop-filter: blur(24px);
  box-shadow:
    0 0 100px rgba(109,40,217,0.15),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.af-hidden { display: none; }

.af-grid-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.75rem;
  margin-bottom: 1.75rem;
}
.af-field {
  display: flex;
  flex-direction: column;
}
.af-field-full { grid-column: 1 / -1; margin-bottom: 1.75rem; }

.af-field label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.af-req { color: var(--ocean-l); font-size: 0.85em; }
.af-opt {
  font-size: 0.7em;
  color: rgba(255,255,255,0.35);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.af-field input[type="text"],
.af-field input[type="url"],
.af-field input[type="email"],
.af-field select,
.af-field textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #fff;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  width: 100%;
  box-sizing: border-box;
}
.af-field input::placeholder,
.af-field textarea::placeholder { color: rgba(255,255,255,0.3); }
.af-field input:focus,
.af-field select:focus,
.af-field textarea:focus {
  border-color: rgba(6,182,212,0.5);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(6,182,212,0.1);
}
.af-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.af-field select option { background: #0a0a1f; color: #fff; }
.af-field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }

/* Spend slider */
.af-spend-display {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.af-spend-value {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--ocean-l), var(--purple-l));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.af-spend-hint {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.af-field input[type="range"] {
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--purple), var(--ocean));
  border-radius: 5px;
  appearance: none; -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
.af-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--purple-l);
  box-shadow: 0 2px 14px rgba(109,40,217,0.5);
}
.af-field input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--purple-l);
}
.af-spend-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.65rem;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.af-spend-disqualify {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 10px;
  font-size: 0.82rem;
  color: rgba(255,200,200,0.85);
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0; padding-bottom: 0;
  margin-top: 0;
  transition: all 0.35s ease;
}
.af-spend-disqualify.show {
  max-height: 200px;
  opacity: 1;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: 1.25rem;
}
.af-spend-disqualify strong { color: #FCA5A5; }

/* File upload */
.af-file-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.af-file-wrap input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.af-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.25);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: all 0.25s;
}
.af-file-btn:hover {
  border-color: var(--ocean-l);
  background: rgba(6,182,212,0.08);
  color: #fff;
}
.af-file-hint {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}
.af-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.af-file-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  padding: 0.35rem 0.85rem;
  border-radius: 30px;
  background: rgba(6,182,212,0.1);
  border: 1px solid rgba(6,182,212,0.25);
  color: var(--ocean-l);
  font-weight: 600;
}

/* Consent */
.af-consent { margin-bottom: 2rem; }
.af-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
}
.af-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--ocean);
  cursor: pointer;
}

/* Submit */
.af-submit-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.af-submit:disabled {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.35) !important;
  cursor: not-allowed;
  box-shadow: none !important;
  pointer-events: none;
}
.af-submit-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}

/* Success state */
.af-success {
  display: none;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: rgba(8,6,20,0.92);
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 22px;
  padding: 4rem 3rem;
  backdrop-filter: blur(24px);
  box-shadow: 0 0 100px rgba(34,197,94,0.12);
}
.af-success.show { display: block; animation: af-pop 0.5s ease-out; }
@keyframes af-pop {
  0% { transform: scale(0.96); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.af-success-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.4);
  color: #34D399;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.af-success-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.85rem;
}
.af-success-text {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.af-success-sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  font-style: italic;
}

@media (max-width: 768px) {
  #audit-form { padding: 4rem 0 3rem; }
  .af-panel { padding: 2rem 1.5rem; }
  .af-grid-fields { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
  .af-field-full { margin-bottom: 1.25rem; }
  .af-spend-value { font-size: 1.7rem; }
  .af-success { padding: 2.5rem 1.5rem; }
  .af-success-title { font-size: 1.35rem; }
}

/* =============================================
   ✨ NEON SECTION BREAKERS — world-class transitions
   ============================================= */

/* Variant: full neon divider with line + orbs + scan */
.neon-break {
  position: relative;
  height: 150px;
  margin-top: -1px;
  margin-bottom: -1px;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}
/* White content island dissolving DOWN into the cosmos */
.neon-break.nb-light-to-dark {
  background: linear-gradient(180deg,
    #ffffff 0%,
    rgba(255,255,255,0.85) 16%,
    rgba(236,240,255,0.45) 48%,
    rgba(255,255,255,0.12) 78%,
    rgba(255,255,255,0) 100%);
}
/* Cosmos rising UP into a white content island */
.neon-break.nb-dark-to-light {
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.12) 22%,
    rgba(236,240,255,0.45) 52%,
    rgba(255,255,255,0.85) 84%,
    #ffffff 100%);
}
/* Dark to dark: fully transparent — the cosmos flows uninterrupted */
.neon-break.nb-dark-to-dark {
  background: transparent;
}

/* Retire the old muddy line, diamond, blur-orbs and sparks */
.neon-break::before,
.neon-break::after,
.neon-break .nb-orb,
.neon-break .nb-spark { display: none; }

@keyframes nb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes nb-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    box-shadow: 0 0 20px rgba(6,182,212,0.8), 0 0 40px rgba(109,40,217,0.6), 0 0 60px rgba(139,92,246,0.4);
  }
  50% {
    transform: translate(-50%, -50%) rotate(45deg) scale(1.4);
    box-shadow: 0 0 30px rgba(6,182,212,1), 0 0 60px rgba(109,40,217,0.8), 0 0 90px rgba(139,92,246,0.6);
  }
}

/* Floating orbs inside breaker */
.nb-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.6;
  animation: nb-float 6s ease-in-out infinite;
}
.nb-orb-1 { width: 80px; height: 80px; top: 20%; left: 18%; background: rgba(109,40,217,0.5); animation-delay: 0s; }
.nb-orb-2 { width: 60px; height: 60px; top: 50%; right: 22%; background: rgba(6,182,212,0.5); animation-delay: -2s; }
.nb-orb-3 { width: 70px; height: 70px; bottom: 15%; left: 40%; background: rgba(139,92,246,0.4); animation-delay: -4s; }
@keyframes nb-float {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(20px, -10px); }
  66% { transform: translate(-15px, 8px); }
}

/* Floating spark particles */
.nb-spark {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(6,182,212,1), 0 0 20px rgba(6,182,212,0.6);
  animation: nb-spark-drift 8s linear infinite;
}
.nb-spark-1 { top: 30%; left: 25%; animation-delay: 0s; }
.nb-spark-2 { top: 60%; left: 60%; animation-delay: -3s; }
.nb-spark-3 { top: 40%; left: 80%; animation-delay: -5s; background: #FFE598; box-shadow: 0 0 10px rgba(255,229,152,1), 0 0 20px rgba(255,229,152,0.6); }
@keyframes nb-spark-drift {
  0%   { transform: translate(0, 0) scale(0); opacity: 0; }
  10%  { transform: translate(0, 0) scale(1); opacity: 1; }
  90%  { transform: translate(60px, -30px) scale(1); opacity: 1; }
  100% { transform: translate(80px, -40px) scale(0); opacity: 0; }
}

@media (max-width: 768px) {
  .neon-break { height: 80px; }
  .nb-orb-1 { width: 50px; height: 50px; }
  .nb-orb-2 { width: 40px; height: 40px; }
  .nb-orb-3 { width: 50px; height: 50px; }
}

/* Compact section-edge neon glow on top + bottom of dark sections (no extra DOM) */
.section-glow-top {
  position: relative;
}
.section-glow-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(109,40,217,0.6) 30%, rgba(6,182,212,1) 50%, rgba(109,40,217,0.6) 70%, transparent 100%);
  background-size: 200% 100%;
  animation: nb-shimmer 5s linear infinite;
  box-shadow: 0 0 14px rgba(6,182,212,0.4);
  z-index: 5;
}

/* =============================================
   CERT-FEATURED — Shaw Academy + ICITP + Voiceflow
   ============================================= */
.cert-featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
  margin: 3rem auto 4rem;
}
.cert-featured-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.5rem;
  background: rgba(8,6,20,0.7);
  border: 1px solid rgba(109,40,217,0.3);
  border-radius: 16px;
  transition: all 0.4s ease;
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.cert-featured-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--purple), var(--ocean), var(--purple));
  background-size: 200% 200%;
  z-index: -1;
  opacity: 0;
  filter: blur(12px);
  animation: cf-glow 4s linear infinite;
  transition: opacity 0.5s;
}
.cert-featured-card:hover { transform: translateY(-4px); border-color: rgba(6,182,212,0.5); }
.cert-featured-card:hover::before { opacity: 0.45; }
@keyframes cf-glow {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

.cert-featured-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(109,40,217,0.25), rgba(6,182,212,0.18));
  border: 1px solid rgba(109,40,217,0.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  animation: cf-icon-pulse 3s ease-in-out infinite;
}
.cert-featured-card--diploma .cert-featured-icon { color: #FFE598; border-color: rgba(255,229,152,0.4); background: linear-gradient(135deg, rgba(255,229,152,0.15), rgba(109,40,217,0.15)); }
.cert-featured-card--member .cert-featured-icon  { color: #34D399; border-color: rgba(52,211,153,0.4); background: linear-gradient(135deg, rgba(52,211,153,0.15), rgba(6,182,212,0.15)); }
.cert-featured-card--partner .cert-featured-icon { color: var(--ocean-l); border-color: rgba(6,182,212,0.4); }
@keyframes cf-icon-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(109,40,217,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(109,40,217,0); }
}

.cert-featured-text { flex: 1; min-width: 0; }
.cert-featured-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--ocean-l);
  margin-bottom: 0.45rem;
}
.cert-featured-card--diploma .cert-featured-tag { color: #FFE598; }
.cert-featured-card--member  .cert-featured-tag { color: #34D399; }
.cert-featured-text h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.35rem;
  line-height: 1.25;
}
.cert-featured-text p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 1024px) { .cert-featured { grid-template-columns: 1fr; gap: 0.85rem; max-width: 600px; } }

/* =============================================
   CERT-STRIP — gentle float animation
   ============================================= */
.cert-strip .cert-item { animation: cs-float 5s ease-in-out infinite; }
.cert-strip .cert-item:nth-child(2n) { animation-delay: -1s; animation-duration: 6s; }
.cert-strip .cert-item:nth-child(3n) { animation-delay: -2s; animation-duration: 7s; }
.cert-strip .cert-item:nth-child(4n) { animation-delay: -3s; animation-duration: 5.5s; }
@keyframes cs-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.cert-strip .cert-icon {
  position: relative;
  overflow: hidden;
}
.cert-strip .cert-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: cs-shimmer 4s linear infinite;
  pointer-events: none;
}
@keyframes cs-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =====================================================================
   COSMIC COHESION v2  (2026-07-24)
   One dark cosmic design end to end: no white sections, no white
   transition bars, legible body text, and a distinct nebula glow per
   section. Appended last so it wins.
   ===================================================================== */

/* ---- 1. Seamless transitions — the cosmos flows through every break ---- */
.neon-break,
.neon-break.nb-light-to-dark,
.neon-break.nb-dark-to-light,
.neon-break.nb-dark-to-dark {
  background: transparent !important;
  height: 64px;
}
@media (max-width: 768px) { .neon-break { height: 40px !important; } }

/* ---- 2. Per-section nebula backdrops (each unique, all cohesive) ---- */
#services {
  background:
    radial-gradient(ellipse 58% 55% at 85% 10%, rgba(6,182,212,0.20), transparent 62%),
    radial-gradient(ellipse 55% 55% at 8% 90%, rgba(109,40,217,0.24), transparent 62%),
    rgba(6,7,16,0.60) !important;
}
#skills {
  background:
    radial-gradient(ellipse 55% 50% at 12% 8%, rgba(109,40,217,0.18), transparent 60%),
    radial-gradient(ellipse 52% 48% at 90% 88%, rgba(6,182,212,0.16), transparent 60%) !important;
}
#roas-calc {
  background:
    radial-gradient(ellipse 60% 52% at 18% 14%, rgba(6,182,212,0.22), transparent 60%),
    radial-gradient(ellipse 55% 52% at 85% 86%, rgba(109,40,217,0.24), transparent 60%),
    rgba(6,7,15,0.60) !important;
}
#case-studies {
  background:
    radial-gradient(ellipse 58% 55% at 10% 12%, rgba(139,92,246,0.22), transparent 62%),
    radial-gradient(ellipse 55% 52% at 90% 88%, rgba(6,182,212,0.18), transparent 62%),
    rgba(6,7,16,0.60) !important;
}
#results {
  background:
    radial-gradient(ellipse 60% 52% at 85% 12%, rgba(139,92,246,0.22), transparent 60%),
    radial-gradient(ellipse 55% 52% at 10% 88%, rgba(6,182,212,0.18), transparent 60%),
    rgba(6,5,15,0.60) !important;
}
#about, #about.about-section {
  /* transparent so the continuous cosmos flows through, like every other
     dark section — the opaque 0.62 veil was creating a black band at the
     About/FAQ junction. Accent handled by the unified section#about::after. */
  background: transparent !important;
}
#cta {
  background:
    radial-gradient(ellipse 75% 65% at 50% 0%, rgba(109,40,217,0.26), transparent 62%),
    rgba(4,6,15,0.58) !important;
}

/* ---- 3. Light-on-dark text for the converted sections + #how ---- */
#services .section-title,
#case-studies .section-title,
#about .section-title,
#how .section-title { color: #ffffff !important; }

#services .section-label,
#case-studies .section-label,
#about .section-label,
#how .section-label { color: var(--ocean-l) !important; }

/* Services accordion — readable on dark */
.svc-item, .svc-item:first-child { border-color: rgba(255,255,255,0.10) !important; }
.svc-title { color: rgba(255,255,255,0.92) !important; }
.svc-panel p { color: rgba(255,255,255,0.76) !important; }
.svc-chevron { color: rgba(255,255,255,0.5) !important; }
.svc-icon { background: rgba(139,92,246,0.14) !important; color: var(--purple-l) !important; }

/* About copy + cert pills on dark */
#about .about-content p { color: rgba(255,255,255,0.82) !important; }
#about .about-closer { color: #c9b6ff !important; }
.cert-badge {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(139,92,246,0.30) !important;
  color: #c9b6ff !important;
}
.cert-badge:hover { background: var(--purple) !important; color: #fff !important; }

/* ---- 4. BODY-TEXT LEGIBILITY across the whole site (beats inline dim colors) ---- */
.section-sub        { color: rgba(255,255,255,0.80) !important; }
.hero-sub           { color: rgba(255,255,255,0.82) !important; }
.sk-card p          { color: rgba(255,255,255,0.75) !important; }
.sk-group-label     { color: var(--ocean-l) !important; }
#partners .section-sub, #results .section-sub, #faq .section-sub { color: rgba(255,255,255,0.80) !important; }

/* ---- 5. Skills cards a touch bigger + centered content on the 4-col grid ---- */
.sk-card { padding: 1.7rem 1.5rem !important; }
@media (max-width: 900px) { .sk-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .sk-grid { grid-template-columns: 1fr !important; } }

/* ---- 6. Ghost button built for light bg → now readable on the cosmos ---- */
.btn-ghost.on-light { color: #ffffff !important; border-color: rgba(139,92,246,0.45) !important; }
.btn-ghost.on-light:hover { border-color: var(--purple-l) !important; color: #c9b6ff !important; background: rgba(109,40,217,0.12) !important; }

/* ---- 7. FOOTER — animated space (cosmos flows through) ---- */
#footer {
  z-index: 1 !important;
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(109,40,217,0.22), transparent 62%),
    radial-gradient(ellipse 60% 55% at 85% 90%, rgba(6,182,212,0.16), transparent 60%),
    rgba(2,4,9,0.55) !important;
}
footer { background: rgba(2,4,9,0.5) !important; }

/* ---- 8. No more flat-black sections — the cosmos flows EVERYWHERE ---- */
#audit-form {
  background:
    radial-gradient(ellipse 65% 55% at 15% 10%, rgba(6,182,212,0.18), transparent 60%),
    radial-gradient(ellipse 60% 55% at 85% 88%, rgba(109,40,217,0.22), transparent 60%),
    rgba(6,6,16,0.55) !important;
}
#numbers, #qualifications, #trusted, #trust-partners {
  background-color: rgba(5,6,15,0.42) !important;
}

/* ---- 9. FAQ — strong Cape Marine flowing marble (space dust) ---- */
#faq {
  background:
    radial-gradient(ellipse 70% 60% at 15% 8%, rgba(109,40,217,0.26), transparent 60%),
    radial-gradient(ellipse 60% 55% at 90% 85%, rgba(6,182,212,0.20), transparent 60%),
    rgba(4,6,15,0.30) !important;   /* very translucent so the flowing veins read as marble */
}

/* ---- 10. LEGIBILITY — bigger AND brighter body copy everywhere ---- */
.section-sub {
  font-size: 1.06rem !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.88) !important;
}
.hero-sub { font-size: 1.12rem !important; color: rgba(255,255,255,0.9) !important; }
.sk-card p, .svc-panel p, #about .about-content p, .cs-desc, .pt-desc, .mma-desc {
  color: rgba(255,255,255,0.82) !important;
}
.sk-card p, .pt-desc, .mma-desc { font-size: 0.86rem !important; }
/* Small print / disclaimers — lift out of the dark */
.rc-disclaimer, .rc-fine, .af-fine, .cta-fine, .foot-fine, small,
.rc-note, .disclaimer, .fine-print {
  color: rgba(255,255,255,0.62) !important;
  font-size: 0.8rem !important;
  line-height: 1.6 !important;
}
/* FAQ answer + question text crisp */
.faq-q, .faq-question { color: #ffffff !important; }
.faq-a, .faq-answer, .faq-a p { color: rgba(255,255,255,0.82) !important; font-size: 0.95rem !important; }

/* ---- 11. FOOTER — neon golden-dawn space (stars + comets, everything glows) ---- */
#footer { overflow: hidden !important; }
#footer .ft-space { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
#footer .ft-main, #footer .ft-stats-bar, #footer .ft-bottom, #footer .ft-border-top { position: relative; z-index: 2; }

/* Golden dawn rising from the horizon, mixed with blue + purple */
#footer .ft-dawn {
  position: absolute; left: 50%; bottom: -12%; transform: translateX(-50%);
  width: 130%; height: 75%;
  background:
    radial-gradient(ellipse 55% 100% at 50% 100%, rgba(255,196,102,0.30), rgba(255,150,60,0.10) 42%, transparent 72%),
    radial-gradient(ellipse 85% 80% at 18% 100%, rgba(139,92,246,0.24), transparent 66%),
    radial-gradient(ellipse 85% 80% at 82% 100%, rgba(6,182,212,0.22), transparent 66%);
  filter: blur(6px);
  animation: ft-dawn-breathe 9s ease-in-out infinite;
}
@keyframes ft-dawn-breathe { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }

/* Twinkling starfield */
#footer .ft-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 28% 62%, rgba(180,220,255,0.9), transparent),
    radial-gradient(1px 1px at 45% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 62% 72%, rgba(205,185,255,0.9), transparent),
    radial-gradient(1px 1px at 78% 24%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 55%, rgba(180,220,255,0.9), transparent),
    radial-gradient(1px 1px at 35% 86%, #fff, transparent),
    radial-gradient(1px 1px at 70% 46%, rgba(255,224,180,0.9), transparent),
    radial-gradient(1.5px 1.5px at 8% 76%, #fff, transparent),
    radial-gradient(1px 1px at 55% 14%, #fff, transparent),
    radial-gradient(1px 1px at 92% 82%, rgba(180,220,255,0.9), transparent),
    radial-gradient(1px 1px at 20% 45%, #fff, transparent);
  animation: ft-twinkle 3.6s ease-in-out infinite;
}
@keyframes ft-twinkle { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }

/* Comets flying across the footer */
#footer .ft-comet {
  position: absolute; width: 140px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.25), #cfe6ff);
  border-radius: 2px; box-shadow: 0 0 8px rgba(180,220,255,0.9);
  opacity: 0;
}
#footer .ft-comet::after {
  content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px 3px rgba(200,225,255,0.95);
}
#footer .ft-comet1 { top: 20%; animation: ft-comet 8s linear infinite; }
#footer .ft-comet2 { top: 46%; animation: ft-comet 10s linear 3.5s infinite; }
#footer .ft-comet3 { top: 10%; animation: ft-comet 13s linear 7s infinite; }
@keyframes ft-comet {
  0%   { opacity: 0; transform: translate(-160px, -40px) rotate(20deg); }
  8%   { opacity: 1; }
  45%  { opacity: 1; }
  60%  { opacity: 0; transform: translate(115vw, 34vh) rotate(20deg); }
  100% { opacity: 0; }
}

/* Footer NEON text — blue + purple mix, everything shines */
#footer .ft-logo-text {
  font-size: 2.7rem !important; line-height: 1.1 !important;
  background: linear-gradient(120deg, #7dd3fc, #a855f7, #ec4899, #7dd3fc);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 16px rgba(139,92,246,0.75));
  animation: gradient-flow 6s ease infinite;
}
#footer .ft-bio { color: rgba(255,255,255,0.74) !important; }
#footer .ft-col-title { color: #c9b6ff !important; text-shadow: 0 0 12px rgba(168,85,247,0.75); letter-spacing: 0.16em; }
#footer .ft-nav-list a { color: #a9c7ff !important; text-shadow: 0 0 8px rgba(96,165,250,0.5); transition: all 0.25s; }
#footer .ft-nav-list a:hover { color: #ffffff !important; text-shadow: 0 0 12px rgba(168,85,247,1), 0 0 24px rgba(96,165,250,0.85); }
#footer .ft-contact-row span { color: #bcd4ff !important; text-shadow: 0 0 8px rgba(96,165,250,0.45); }
#footer .ft-contact-row svg {
  color: #c084fc !important;
  filter: drop-shadow(0 0 6px rgba(168,85,247,0.85));
  animation: ftIconPulse 2.8s ease-in-out infinite;
  will-change: filter, transform;
  transform-origin: center;
}
/* Staggered wave so the icons pulse in sequence, not all at once */
#footer .ft-contact-row:nth-child(1) svg { animation-delay: 0s; }
#footer .ft-contact-row:nth-child(2) svg { animation-delay: 0.5s; }
#footer .ft-contact-row:nth-child(3) svg { animation-delay: 1s; }
#footer .ft-contact-row:nth-child(4) svg { animation-delay: 1.5s; }
#footer .ft-contact-row:hover svg {
  color: #e9d5ff !important;
  filter: drop-shadow(0 0 14px rgba(192,132,252,1)) drop-shadow(0 0 26px rgba(96,165,250,0.85));
  transform: scale(1.18);
  animation-play-state: paused;
}
@keyframes ftIconPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(168,85,247,0.55)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 12px rgba(192,132,252,1)) drop-shadow(0 0 22px rgba(96,165,250,0.7)); transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  #footer .ft-contact-row svg { animation: none !important; transform: none !important; }
}
#footer .ft-stat-n {
  background: linear-gradient(120deg, #7dd3fc, #a855f7) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 0 10px rgba(139,92,246,0.75));
}
#footer .ft-stat-l { color: rgba(255,255,255,0.62) !important; text-shadow: 0 0 6px rgba(96,165,250,0.3); }
#footer .ft-copy { color: rgba(201,182,255,0.78) !important; text-shadow: 0 0 8px rgba(139,92,246,0.4); }
#footer .ft-bottom-links a { color: #a9c7ff !important; text-shadow: 0 0 8px rgba(96,165,250,0.5); }
#footer .ft-bottom-links a:hover { color: #ffffff !important; text-shadow: 0 0 12px rgba(168,85,247,1); }
#footer .ft-available { color: #4ade80 !important; text-shadow: 0 0 10px rgba(74,222,128,0.7); }

/* =====================================================================
   COSMIC COHESION v3  (2026-07-24)
   Finishes full unification: the last two LIGHT card sets become dark
   frosted glass, animated aurora ribbons flow through every divider, and
   a cybernetic-grid floor lights the Skills section. Appended last.
   ===================================================================== */

/* ---- 1. HOW IT WORKS — dark cosmic glass cards ---- */
#how {
  background:
    radial-gradient(ellipse 60% 55% at 12% 10%, rgba(6,182,212,0.18), transparent 60%),
    radial-gradient(ellipse 55% 55% at 88% 90%, rgba(109,40,217,0.22), transparent 60%),
    rgba(6,7,16,0.55) !important;
}
.how-step {
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 1rem 2.5rem -1.2rem rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.how-step:hover {
  border-color: rgba(139,92,246,0.38) !important;
  box-shadow: 0 22px 55px rgba(109,40,217,0.24) !important;
}
.how-title { color: #ffffff !important; }
.how-desc,
.how-list li { color: rgba(255,255,255,0.80) !important; }
.how-list { border-top-color: rgba(255,255,255,0.12) !important; }
.how-num { opacity: 0.55 !important; }
.how-cta-sub { color: rgba(255,255,255,0.72) !important; }

/* ---- 2. CASE STUDIES — dark cosmic glass cards + dark controls ---- */
.cs-card {
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.cs-card:hover {
  border-color: rgba(139,92,246,0.38) !important;
  box-shadow: 0 10px 44px rgba(109,40,217,0.26) !important;
}
.cs-client { color: #ffffff !important; }
.cs-tag { color: var(--ocean-l) !important; }
.cs-metrics {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.cs-lab { color: rgba(255,255,255,0.60) !important; }
.cs-tags span {
  background: rgba(139,92,246,0.14) !important;
  border-color: rgba(139,92,246,0.28) !important;
  color: #c9b6ff !important;
}
.cs-arrow {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.cs-arrow:hover {
  background: var(--purple) !important;
  border-color: var(--purple) !important;
  color: #fff !important;
}
.cs-dot { background: rgba(255,255,255,0.22) !important; border-color: rgba(255,255,255,0.15) !important; }
.cs-dot.active { background: var(--purple-l) !important; border-color: var(--purple-l) !important; }

/* ---- 3. AURORA RIBBON DIVIDERS — light flows through every section break ---- */
.neon-break { position: relative !important; overflow: hidden; }
.neon-break::before {
  content: '' !important;
  display: block !important;
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 130% at 50% 50%, rgba(139,92,246,0.16), transparent 72%);
  pointer-events: none;
}
.neon-break::after {
  content: '' !important;
  display: block !important;
  position: absolute; top: 50%; left: -20%; right: -20%; height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    transparent, rgba(6,182,212,0.65) 30%, rgba(236,72,153,0.75) 50%,
    rgba(139,92,246,0.65) 70%, transparent);
  background-size: 220% 100%;
  filter: blur(2.5px);
  opacity: 0.75;
  animation: aurora-slide 9s linear infinite;
  pointer-events: none;
}
@keyframes aurora-slide {
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}
@media (prefers-reduced-motion: reduce) { .neon-break::after { animation: none; } }

/* ---- 4. CYBERNETIC GRID FLOOR — signature moment on Skills ---- */
#skills { position: relative; overflow: hidden; }
#skills::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 70%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(6,182,212,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.22) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(520px) rotateX(62deg) scale(2.4);
  transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(to top, #000, transparent 82%);
          mask: linear-gradient(to top, #000, transparent 82%);
  opacity: 0.85;
  animation: cyber-grid-flow 7s linear infinite;
}
@keyframes cyber-grid-flow {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 46px, 0 46px; }
}
@media (prefers-reduced-motion: reduce) { #skills::after { animation: none; } }
@media (max-width: 768px) { #skills::after { background-size: 34px 34px; opacity: 0.45; } }

/* ---- 5. Glow layer sits above the grid floor ---- */
#skills .section-inner { position: relative; z-index: 2; }

/* =====================================================================
   COSMIC COHESION v4  (2026-07-24)  — Sasha's fix list
   1) real WebGL cyber grid on Skills   2) hero content pulled up
   3) animated footer starfield         4) LED dividers hug the seam
   5) light Services section for contrast
   ===================================================================== */

/* ---- 1. CYBERNETIC GRID (WebGL) — clean dark stage so the grid reads ---- */
#skills {
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(8,12,28,0.35), transparent 70%),
    #04060e !important;
}
#cyber-grid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 0;
  pointer-events: auto;   /* receive pointer for the lens warp; content sits above */
}
/* the WebGL grid replaces the CSS floor-grid fallback */
#skills::after { display: none !important; }
/* section-inner must not eat pointer events meant for the canvas gaps,
   but its interactive children still work normally */
#skills .section-inner { pointer-events: none; }
#skills .section-inner a,
#skills .section-inner button,
#skills .sk-card { pointer-events: auto; }

/* ---- 2. HERO — pull content up under the ticker (kill the dead gap) ---- */
.hero-content {
  justify-content: flex-start !important;
  padding-top: 7rem !important;
}
@media (max-width: 900px) { .hero-content { padding-top: 6.5rem !important; } }
@media (max-width: 600px) { .hero-content { padding-top: 6rem !important; padding-bottom: 3rem !important; } }

/* ---- 3. FOOTER — animated starfield + drifting space dust ---- */
.ft-space::before,
.ft-space::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
}
.ft-space::before {
  background-image:
    radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
    radial-gradient(1px 1px at 90px 60px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 130px 20px, rgba(200,190,255,0.9), transparent),
    radial-gradient(1px 1px at 50px 110px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 165px 140px, rgba(180,220,255,0.85), transparent),
    radial-gradient(1px 1px at 30px 160px, rgba(255,255,255,0.65), transparent);
  background-repeat: repeat;
  background-size: 200px 180px;
  animation: ft-twinkle 4s ease-in-out infinite, ft-drift 90s linear infinite;
}
.ft-space::after {
  background-image:
    radial-gradient(2px 2px at 60px 50px, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.6px 1.6px at 180px 120px, rgba(199,182,255,0.8), transparent),
    radial-gradient(1.6px 1.6px at 240px 40px, rgba(160,210,255,0.8), transparent);
  background-repeat: repeat;
  background-size: 300px 260px;
  opacity: 0.85;
  animation: ft-twinkle2 6s ease-in-out infinite, ft-drift2 140s linear infinite;
}
@keyframes ft-twinkle  { 0%,100% { opacity: 0.5; }  50% { opacity: 0.95; } }
@keyframes ft-twinkle2 { 0%,100% { opacity: 0.4; }  50% { opacity: 0.85; } }
@keyframes ft-drift  { from { background-position: 0 0; }     to { background-position: 200px 180px; } }
@keyframes ft-drift2 { from { background-position: 0 0; }     to { background-position: -300px 260px; } }
@media (prefers-reduced-motion: reduce) {
  .ft-space::before, .ft-space::after { animation: none; }
}
/* lift the space dust nebulas so they actually read */
.ft-nb  { opacity: 0.14 !important; }
.ft-orb { opacity: 0.12 !important; }

/* ---- 4. LED DIVIDERS — tighten so the strip hugs the section seam ---- */
.neon-break { height: 30px !important; }
@media (max-width: 768px) { .neon-break { height: 22px !important; } }
.neon-break::after {
  filter: blur(2px) !important;
  opacity: 0.9 !important;
  height: 2px !important;
  box-shadow: 0 0 12px rgba(6,182,212,0.5), 0 0 22px rgba(139,92,246,0.35);
}
/* Footer's own top LED strip hugs the footer edge */
#footer { margin-top: 0 !important; }
.ft-border-top { height: 2px; box-shadow: 0 0 14px rgba(6,182,212,0.45); }

/* ---- 5. LIGHT SERVICES SECTION — a white break in the dark flow ---- */
#services {
  background:
    radial-gradient(ellipse 60% 55% at 12% 8%, rgba(6,182,212,0.06), transparent 60%),
    radial-gradient(ellipse 55% 55% at 90% 92%, rgba(109,40,217,0.06), transparent 60%),
    #f6f8fc !important;
}
#services .section-title { color: var(--text-dark) !important; }
#services .section-sub,
#services .section-sub * { color: var(--text-mid) !important; }
#services .section-label { color: var(--ocean) !important; }
#services .svc-item,
#services .svc-item:first-child { border-color: rgba(0,0,0,0.08) !important; }
#services .svc-title { color: var(--text-dark) !important; }
#services .svc-panel p { color: var(--text-mid) !important; }
#services .svc-chevron { color: rgba(0,0,0,0.4) !important; }
#services .svc-icon { background: rgba(109,40,217,0.08) !important; color: var(--purple) !important; }
#services .service-tags li {
  background: rgba(109,40,217,0.06) !important;
  border-color: rgba(109,40,217,0.15) !important;
  color: var(--purple) !important;
}
/* keep the surrounding dividers reading correctly against the white */
#services + .neon-break::before,
.neon-break:has(+ #services)::before { opacity: 0.5; }

/* =====================================================================
   COSMIC COHESION v5  — Cyber-grid ambiance: stars + floating gold orbs
   Sits ABOVE the WebGL grid (z1) and BELOW the content (z2).
   ===================================================================== */
.cyber-fx {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}
/* twinkling / drifting starfield tuned for the dark cyber stage */
.cyber-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 25px 40px, #ffffff, transparent),
    radial-gradient(1px 1px at 120px 90px, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.4px 1.4px at 180px 30px, rgba(200,220,255,0.9), transparent),
    radial-gradient(1px 1px at 70px 150px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.3px 1.3px at 210px 170px, rgba(255,235,190,0.9), transparent),
    radial-gradient(1px 1px at 40px 110px, rgba(255,255,255,0.65), transparent);
  background-repeat: repeat;
  background-size: 230px 200px;
  animation: cyber-twinkle 4.5s ease-in-out infinite, cyber-stars-drift 120s linear infinite;
}
@keyframes cyber-twinkle { 0%,100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@keyframes cyber-stars-drift { from { background-position: 0 0; } to { background-position: 230px -200px; } }

/* floating golden orbs — warm counterpoint to the cool grid */
.cyber-orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    rgba(255,240,200,0.98), rgba(247,196,92,0.65) 42%, rgba(214,150,40,0.15) 70%, transparent 78%);
  box-shadow: 0 0 22px rgba(255,205,110,0.45), 0 0 46px rgba(240,180,70,0.22);
  will-change: transform;
}
.cyber-orb--1 { width: 14px; height: 14px; top: 22%;  left: 12%; animation: cyber-float1 11s ease-in-out infinite; }
.cyber-orb--2 { width: 9px;  height: 9px;  top: 62%;  left: 24%; animation: cyber-float2 14s ease-in-out infinite; }
.cyber-orb--3 { width: 18px; height: 18px; top: 34%;  left: 74%; animation: cyber-float1 16s ease-in-out infinite reverse; }
.cyber-orb--4 { width: 7px;  height: 7px;  top: 78%;  left: 62%; animation: cyber-float2 12s ease-in-out infinite; }
.cyber-orb--5 { width: 11px; height: 11px; top: 15%;  left: 52%; animation: cyber-float1 18s ease-in-out infinite; }
.cyber-orb--6 { width: 8px;  height: 8px;  top: 70%;  left: 88%; animation: cyber-float2 15s ease-in-out infinite reverse; }
@keyframes cyber-float1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(18px,-26px) scale(1.15); }
}
@keyframes cyber-float2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-16px,-20px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .cyber-stars, .cyber-orb { animation: none !important; }
}
/* keep the fx from bleeding pointer capture; content stays interactive */
.cyber-fx * { pointer-events: none; }

/* =====================================================================
   COSMIC COHESION v6  (2026-07-24) — Sasha footer polish
   1) more (drifting) footer stars   2) white bio text
   3) LED strip full-width, flush at the top of the dark section
   Appended last so it wins.
   ===================================================================== */

/* ---- 1. MORE FLOATING STARS — dense tiled field + two depth layers ---- */
#footer .ft-stars {
  background-image:
    radial-gradient(1.4px 1.4px at 20px 30px, #ffffff, transparent),
    radial-gradient(1px 1px at 70px 80px, rgba(200,225,255,0.9), transparent),
    radial-gradient(1.6px 1.6px at 130px 40px, #ffffff, transparent),
    radial-gradient(1px 1px at 175px 100px, rgba(255,224,180,0.9), transparent),
    radial-gradient(1.2px 1.2px at 40px 140px, rgba(205,185,255,0.9), transparent),
    radial-gradient(1px 1px at 110px 170px, #ffffff, transparent),
    radial-gradient(1.4px 1.4px at 200px 150px, rgba(180,220,255,0.9), transparent),
    radial-gradient(1px 1px at 90px 20px, rgba(255,255,255,0.8), transparent) !important;
  background-repeat: repeat !important;
  background-size: 220px 200px !important;
  animation: ft-twinkle 3.6s ease-in-out infinite, ft-stars-drift 110s linear infinite !important;
}
#footer .ft-stars::before,
#footer .ft-stars::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
}
/* finer, fainter far layer */
#footer .ft-stars::before {
  background-image:
    radial-gradient(1px 1px at 30px 50px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 100px 120px, rgba(190,215,255,0.7), transparent),
    radial-gradient(1px 1px at 150px 30px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 60px 160px, rgba(255,235,200,0.7), transparent);
  background-repeat: repeat; background-size: 160px 150px;
  opacity: 0.7;
  animation: ft-twinkle 5s ease-in-out infinite reverse, ft-stars-drift 150s linear infinite reverse;
}
/* brighter, larger near layer */
#footer .ft-stars::after {
  background-image:
    radial-gradient(2px 2px at 80px 60px, #ffffff, transparent),
    radial-gradient(2.2px 2.2px at 230px 180px, rgba(210,190,255,0.95), transparent),
    radial-gradient(2px 2px at 300px 70px, rgba(180,220,255,0.95), transparent);
  background-repeat: repeat; background-size: 360px 300px;
  animation: ft-twinkle 4.4s ease-in-out infinite, ft-stars-drift 80s linear infinite;
}
@keyframes ft-stars-drift { from { background-position: 0 0; } to { background-position: 220px -200px; } }
@media (prefers-reduced-motion: reduce) {
  #footer .ft-stars, #footer .ft-stars::before, #footer .ft-stars::after { animation: none !important; }
}

/* ---- 2. BIO TEXT — white ---- */
#footer .ft-bio { color: rgba(255,255,255,0.92) !important; }

/* ---- 3. LED STRIP — full width, edge to edge, flush at the dark seam ---- */
#footer { margin-top: 0 !important; }
#footer .ft-border-top {
  position: absolute !important; z-index: 3;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: auto !important;
  height: 2px !important;
  margin: 0 !important;
  background: linear-gradient(90deg,
    #06b6d4 0%, #6d28d9 30%, #ec4899 50%, #6d28d9 70%, #06b6d4 100%) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 0 14px rgba(6,182,212,0.6), 0 0 26px rgba(139,92,246,0.4) !important;
  animation: ft-border-anim 5s linear infinite !important;
}
/* remove the CTA section's dead space so the strip sits right where the dark footer begins */
#cta { padding-bottom: 3rem !important; }

/* =====================================================================
   COSMIC COHESION v3 — certifications banner + mobile pass (2026-07-24)
   ===================================================================== */

/* ---- Certifications → seamless moving banner (one line, L→R) ---- */
.cert-marquee {
  overflow: hidden; width: 100%;
  border: 1px solid rgba(139,92,246,0.18);
  border-radius: var(--radius);
  background: rgba(4,6,20,0.5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 40px rgba(109,40,217,0.10) inset;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.cert-marquee .cert-strip {
  display: flex !important; flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  width: max-content !important;
  gap: 2.2rem !important;
  padding: 1.7rem 1rem !important;
  border: none !important; background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important;
  animation: cert-march 55s linear infinite;
}
.cert-marquee:hover .cert-strip { animation-play-state: paused; }
@keyframes cert-march { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cert-marquee .cert-item { flex: 0 0 auto !important; width: 96px !important; animation: none !important; }
.cert-marquee .cert-icon { width: 62px !important; height: 62px !important; }
/* Bright, clear labels — no more gray */
.cert-item span  { color: #ffffff !important; font-size: 0.74rem !important; font-weight: 700 !important; }
.cert-item small { color: rgba(205,220,255,0.72) !important; font-size: 0.6rem !important; }
.cert-cta span   { color: #7dd3fc !important; }

/* ---- MOBILE — reveal the face, lift the dark, close the gaps ---- */
@media (max-width: 768px) {
  #hero .hero-overlay {
    background: linear-gradient(to bottom,
      rgba(4,6,15,0.34) 0%,
      rgba(4,6,15,0.04) 24%,
      rgba(4,6,15,0.24) 54%,
      rgba(4,6,15,0.82) 100%) !important;
  }
  #hero .hero-bg-img { object-position: 64% 16% !important; opacity: 0.95 !important; }
  #hero { min-height: 84vh !important; }
  .hero-content { padding-top: 6rem !important; padding-bottom: 2.5rem !important; }
  #skills, #roas-calc, #faq, #partners, #about, #services, #case-studies,
  #cta, #qualifications, #numbers, #trusted, #how {
    padding-top: 3.3rem !important; padding-bottom: 3.3rem !important;
  }
  .neon-break { height: 22px !important; }
  #skills-ticker { margin-top: 4.5rem !important; }
  .cert-marquee .cert-item { width: 82px !important; }
  .cert-marquee .cert-icon { width: 52px !important; height: 52px !important; }
}

/* =====================================================================
   COSMIC COHESION v5 — move cyber-grid, stars+comets everywhere,
   certifications dropdown (2026-07-24)
   ===================================================================== */

/* ---- A. Move the cyber grid OFF Skills → restore Skills to the cosmos ---- */
#skills { background: transparent !important; overflow: visible !important; }
#skills::after { display: none !important; }
#skills .section-inner { pointer-events: auto !important; }

/* ---- B. Put the cyber grid ON "How" (From Application to Live Campaigns) ---- */
#how {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(8,12,28,0.35), transparent 70%),
    #04060e !important;
}
#how #cyber-grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: auto; }
#how .section-inner { position: relative; z-index: 2; }

/* ---- C. STARS + COMETS on the plain sections (injected .sky-fx) ---- */
.sky-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sky-fx .sky-stars {
  position: absolute; inset: -12%; opacity: 0.92;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 22% 55%, rgba(185,220,255,0.95), transparent),
    radial-gradient(1px 1px at 33% 28%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 47% 72%, rgba(210,190,255,0.95), transparent),
    radial-gradient(1px 1px at 58% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 69% 60%, rgba(185,220,255,0.9), transparent),
    radial-gradient(1px 1px at 78% 34%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 88% 66%, rgba(255,224,180,0.9), transparent),
    radial-gradient(1px 1px at 15% 82%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 40% 90%, rgba(185,220,255,0.9), transparent),
    radial-gradient(1px 1px at 63% 86%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 92% 14%, rgba(210,190,255,0.9), transparent),
    radial-gradient(1px 1px at 52% 44%, #fff, transparent),
    radial-gradient(1px 1px at 5% 44%, rgba(185,220,255,0.85), transparent),
    /* extra bright stars — brightest, slowest-drifting layer */
    radial-gradient(1.9px 1.9px at 28% 12%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 72% 8%, rgba(210,190,255,0.95), transparent),
    radial-gradient(1.7px 1.7px at 12% 62%, rgba(255,224,180,0.92), transparent),
    radial-gradient(1.5px 1.5px at 84% 48%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 37% 40%, rgba(185,220,255,0.95), transparent),
    radial-gradient(1.6px 1.6px at 96% 78%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 3% 30%, rgba(210,190,255,0.9), transparent),
    radial-gradient(1.7px 1.7px at 66% 92%, rgba(255,224,180,0.9), transparent);
  animation: sky-twinkle 4.2s ease-in-out infinite, sky-drift 130s linear infinite;
}
/* two extra dense star layers for depth + parallax motion */
.sky-fx .sky-stars::before,
.sky-fx .sky-stars::after { content: ''; position: absolute; inset: -14%; }
.sky-fx .sky-stars::before {
  opacity: 0.7;
  background-image:
    radial-gradient(1px 1px at 6% 10%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 17% 44%, rgba(185,220,255,0.85), transparent),
    radial-gradient(1px 1px at 26% 70%, #fff, transparent),
    radial-gradient(1px 1px at 34% 16%, rgba(210,190,255,0.85), transparent),
    radial-gradient(1px 1px at 43% 58%, #fff, transparent),
    radial-gradient(1px 1px at 51% 88%, rgba(185,220,255,0.85), transparent),
    radial-gradient(1px 1px at 61% 32%, #fff, transparent),
    radial-gradient(1px 1px at 70% 76%, rgba(255,224,180,0.8), transparent),
    radial-gradient(1px 1px at 79% 22%, #fff, transparent),
    radial-gradient(1px 1px at 88% 54%, rgba(185,220,255,0.85), transparent),
    radial-gradient(1px 1px at 94% 84%, #fff, transparent),
    radial-gradient(1px 1px at 11% 92%, rgba(210,190,255,0.8), transparent),
    radial-gradient(1px 1px at 48% 6%, #fff, transparent),
    radial-gradient(1px 1px at 57% 50%, rgba(185,220,255,0.8), transparent);
  animation: sky-twinkle2 6.4s ease-in-out infinite, sky-drift2 95s linear infinite;
}
.sky-fx .sky-stars::after {
  opacity: 0.6;
  background-image:
    radial-gradient(1.3px 1.3px at 13% 26%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 24% 8%, rgba(185,220,255,0.85), transparent),
    radial-gradient(1.3px 1.3px at 31% 82%, rgba(255,224,180,0.85), transparent),
    radial-gradient(1.2px 1.2px at 44% 34%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 55% 70%, rgba(210,190,255,0.85), transparent),
    radial-gradient(1.2px 1.2px at 64% 14%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 73% 50%, rgba(185,220,255,0.85), transparent),
    radial-gradient(1.2px 1.2px at 82% 88%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 91% 38%, rgba(210,190,255,0.85), transparent),
    radial-gradient(1.2px 1.2px at 2% 66%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 38% 96%, rgba(185,220,255,0.8), transparent),
    radial-gradient(1.2px 1.2px at 68% 62%, #fff, transparent);
  animation: sky-twinkle 5.6s ease-in-out infinite reverse, sky-drift3 165s linear infinite;
}
@keyframes sky-twinkle { 0%,100% { opacity: 0.5; } 50% { opacity: 0.95; } }
@keyframes sky-twinkle2 { 0%,100% { opacity: 0.32; } 50% { opacity: 0.78; } }
@keyframes sky-drift  { from { transform: translate3d(0,0,0); } to { transform: translate3d(-42px,28px,0); } }
@keyframes sky-drift2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(34px,-24px,0); } }
@keyframes sky-drift3 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-26px,-32px,0); } }
.sky-fx .sky-comet {
  position: absolute; width: 150px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.25), #cfe6ff);
  border-radius: 2px; box-shadow: 0 0 8px rgba(180,220,255,0.9); opacity: 0;
}
.sky-fx .sky-comet::after {
  content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px 3px rgba(200,225,255,0.95);
}
.sky-fx .sky-comet--a { top: 14%; animation: sky-comet-a 9s linear infinite; }
.sky-fx .sky-comet--b { top: 52%; animation: sky-comet-b 13s linear 4s infinite; }
.sky-fx .sky-comet--c { top: 78%; animation: sky-comet-c 17s linear 9s infinite; }
.sky-fx .sky-comet--d { top: 30%; animation: sky-comet-d 11s linear 2.5s infinite; }
.sky-fx .sky-comet--e { top: 64%; animation: sky-comet-e 15s linear 6.5s infinite; }
@keyframes sky-comet-a { 0% { opacity:0; transform: translate(-170px,-46px) rotate(18deg);} 7%{opacity:1;} 42%{opacity:1;} 58%{opacity:0; transform: translate(112vw,32vh) rotate(18deg);} 100%{opacity:0;} }
@keyframes sky-comet-b { 0% { opacity:0; transform: translate(-170px,40px) rotate(-14deg);} 7%{opacity:1;} 42%{opacity:1;} 58%{opacity:0; transform: translate(110vw,-28vh) rotate(-14deg);} 100%{opacity:0;} }
@keyframes sky-comet-c { 0% { opacity:0; transform: translate(-170px,-20px) rotate(24deg);} 7%{opacity:1;} 42%{opacity:1;} 58%{opacity:0; transform: translate(114vw,44vh) rotate(24deg);} 100%{opacity:0;} }
@keyframes sky-comet-d { 0% { opacity:0; transform: translate(-170px,8px) rotate(20deg);} 6%{opacity:1;} 44%{opacity:1;} 60%{opacity:0; transform: translate(116vw,50vh) rotate(20deg);} 100%{opacity:0;} }
@keyframes sky-comet-e { 0% { opacity:0; transform: translate(-170px,-30px) rotate(-10deg);} 6%{opacity:1;} 44%{opacity:1;} 60%{opacity:0; transform: translate(112vw,-22vh) rotate(-10deg);} 100%{opacity:0;} }
/* a slow-drifting glowing object (mini planet) for variety */
.sky-fx .sky-orb {
  position: absolute; top: 30%; left: 8%; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe0a3, rgba(255,170,70,0.15) 70%, transparent);
  box-shadow: 0 0 18px rgba(255,190,100,0.6);
  animation: sky-orb-drift 34s ease-in-out infinite; opacity: 0.55;
}
@keyframes sky-orb-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,-24px); } }
/* second, cooler drifting orb for extra motion */
.sky-fx .sky-orb--2 {
  top: 66%; left: 78%; width: 9px; height: 9px;
  background: radial-gradient(circle at 35% 35%, #bcd4ff, rgba(90,140,255,0.12) 70%, transparent);
  box-shadow: 0 0 16px rgba(120,160,255,0.5);
  animation: sky-orb-drift2 44s ease-in-out infinite; opacity: 0.5;
}
@keyframes sky-orb-drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-34px,20px); } }
/* keep section content above the injected sky */
#roas-calc .section-inner, #numbers .section-inner, #qualifications .section-inner,
#trust-partners .tp-inner, #results .section-inner, #services .section-inner,
#about .about-inner, #case-studies .section-inner, #cta .cta-box, #skills .section-inner {
  position: relative; z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .sky-fx .sky-comet, .sky-fx .sky-orb, .sky-fx .sky-stars,
  .sky-fx .sky-stars::before, .sky-fx .sky-stars::after { animation: none !important; }
}

/* ---- D. CERTIFICATIONS → collapsible dropdown (show a few, expand the rest) ---- */
.qual-list.qual-collapsible li.qual-hidden { display: none; }
.qual-more {
  margin-top: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.35);
  color: #c9b6ff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.4rem 0.9rem; border-radius: 40px; cursor: pointer; transition: all 0.25s;
}
.qual-more:hover { background: rgba(139,92,246,0.22); color: #fff; box-shadow: 0 0 14px rgba(139,92,246,0.5); }
.qual-more .qual-more-ico { transition: transform 0.3s; }
.qual-more.open .qual-more-ico { transform: rotate(180deg); }
/* brighter, cleaner qualification text (no more gray) */
.qual-list li { color: rgba(255,255,255,0.82) !important; font-size: 0.86rem !important; }
.qual-title { color: #ffffff !important; }

/* =============================================
   CINEMATIC SPACE PRELOADER
   Warp-speed starfield + nebula aurora + signature draw-in.
   Fixed overlay above everything. Fades out on window load.
   ============================================= */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% 120%, rgba(109,40,217,0.35), transparent 60%),
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(6,182,212,0.20), transparent 55%),
    radial-gradient(ellipse 55% 45% at 85% 5%, rgba(236,72,153,0.14), transparent 55%),
    #02030A;
  opacity: 1;
  transition: opacity 0.9s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s linear 0.9s;
  will-change: opacity;
}
#preloader.pl-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* lock scroll while the loader is up */
body.pl-active { overflow: hidden; height: 100%; }

#warp-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* drifting nebula aurora behind the signature */
.pl-aurora {
  position: absolute;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 34% at 30% 40%, rgba(139,92,246,0.28), transparent 60%),
    radial-gradient(ellipse 36% 30% at 72% 62%, rgba(6,182,212,0.22), transparent 60%),
    radial-gradient(ellipse 30% 26% at 55% 30%, rgba(236,72,153,0.16), transparent 60%);
  filter: blur(30px);
  animation: pl-aurora-drift 12s ease-in-out infinite alternate;
}
@keyframes pl-aurora-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1);   opacity: 0.85; }
  100% { transform: translate3d(2%, 2%, 0)  scale(1.12); opacity: 1; }
}

.pl-core {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: 0 1.5rem;
  text-align: center;
}

/* glowing planet halo above the signature */
.pl-planet {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a78bfa, #6d28d9 45%, #1e1b4b 100%);
  box-shadow:
    0 0 40px rgba(139,92,246,0.7),
    0 0 90px rgba(6,182,212,0.35),
    inset -8px -10px 22px rgba(0,0,0,0.55),
    inset 6px 6px 16px rgba(196,181,253,0.35);
  position: relative;
  animation: pl-planet-in 1.2s cubic-bezier(0.16,1,0.3,1) both, pl-planet-float 5s ease-in-out infinite 1.2s;
}
/* orbiting ring */
.pl-planet::after {
  content: "";
  position: absolute;
  inset: -13px -30px;
  border-radius: 50%;
  border: 1.5px solid rgba(6,182,212,0.55);
  border-top-color: rgba(236,72,153,0.75);
  transform: rotate3d(1, 0.4, 0, 74deg);
  animation: pl-ring-spin 3.4s linear infinite;
}
@keyframes pl-ring-spin { to { transform: rotate3d(1, 0.4, 0, 74deg) rotate(360deg); } }
@keyframes pl-planet-in {
  0%   { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes pl-planet-float {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -8px; }
}

/* signature */
.pl-sig {
  position: relative;
  display: inline-block;
}
.pl-sig-name {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  line-height: 1;
  color: #fff;
  background: linear-gradient(100deg, #e9d5ff 0%, #ffffff 30%, #a5f3fc 55%, #f9a8d4 80%, #ffffff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(139,92,246,0.55)) drop-shadow(0 0 40px rgba(6,182,212,0.25));
  opacity: 0;
  animation: pl-sig-in 1.4s cubic-bezier(0.16,1,0.3,1) 0.25s forwards, pl-sig-shimmer 4s linear 1.6s infinite;
}
@keyframes pl-sig-in {
  0%   { opacity: 0; transform: translateY(14px) scale(0.96); letter-spacing: 0.08em; filter: drop-shadow(0 0 0 rgba(139,92,246,0)); }
  100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: normal; filter: drop-shadow(0 0 22px rgba(139,92,246,0.55)) drop-shadow(0 0 40px rgba(6,182,212,0.25)); }
}
@keyframes pl-sig-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 220% center; }
}
/* animated underline sweep that "signs" the name */
.pl-sig-underline {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -0.35em;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #8b5cf6, #06b6d4, #ec4899, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 0 12px rgba(139,92,246,0.7);
  animation: pl-underline 1.1s cubic-bezier(0.7,0,0.2,1) 1.1s forwards;
}
@keyframes pl-underline {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* tagline */
.pl-tag {
  overflow: hidden;
}
.pl-tag-text {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 2vw, 0.86rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(233,213,255,0.9);
  padding-left: 0.42em;
  opacity: 0;
  animation: pl-tag-in 0.9s ease 1.5s forwards, pl-tag-pulse 2.6s ease-in-out 2.4s infinite;
}
@keyframes pl-tag-in {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0.9; transform: translateY(0); }
}
@keyframes pl-tag-pulse {
  0%,100% { opacity: 0.55; }
  50%     { opacity: 1; text-shadow: 0 0 14px rgba(6,182,212,0.6); }
}

/* progress bar + counter */
.pl-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.4rem;
  opacity: 0;
  animation: pl-tag-in 0.8s ease 1.7s forwards;
}
.pl-bar-track {
  position: relative;
  width: min(66vw, 300px);
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.pl-bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, #6d28d9, #06b6d4, #ec4899);
  background-size: 200% 100%;
  box-shadow: 0 0 14px rgba(6,182,212,0.7);
  transition: width 0.25s ease-out;
  animation: pl-fill-shimmer 1.6s linear infinite;
}
@keyframes pl-fill-shimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.pl-bar-pct {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
}
.pl-bar-pct span { color: var(--ocean-l); margin-left: 1px; }

/* reduced motion: kill the heavy animation, keep it elegant + instant-feeling */
@media (prefers-reduced-motion: reduce) {
  .pl-aurora, .pl-planet, .pl-planet::after,
  .pl-sig-name, .pl-sig-underline, .pl-tag-text, .pl-bar, .pl-bar-fill {
    animation: none !important;
  }
  .pl-sig-name { opacity: 1; -webkit-text-fill-color: transparent; }
  .pl-sig-underline { transform: scaleX(1); }
  .pl-tag-text, .pl-bar { opacity: 0.9; }
}

/* =====================================================================
   REDESIGN 2026-07-24 — "Galaxy with rhythm"  (authoritative, appended last)
   Fixes: mobile hero restack, ticker clearance, bright proof gallery
   (Case Studies + Testimonials), heading glow. Beats all earlier layers.
   ===================================================================== */

/* ---- 1. SKILLS TICKER — clear air below the floating nav ---- */
#skills-ticker { margin-top: 7rem !important; }

/* ---- 2. HEADING GLOW — the dark cosmos headings now shine ---- */
#services .section-title, #skills .section-title, #how .section-title,
#roas-calc .section-title, #numbers .section-title, #partners .section-title,
#results .section-title, #about .section-title, #faq .section-title,
#qualifications .section-title, #cta .section-title, #audit-form .section-title,
#trusted .section-title {
  text-shadow: 0 0 26px rgba(139,92,246,0.38), 0 0 54px rgba(6,182,212,0.16);
}
.section-label { text-shadow: 0 0 14px rgba(6,182,212,0.5); }
#hero .hero-headline { text-shadow: 0 0 40px rgba(109,40,217,0.35); }
.gradient-text { filter: drop-shadow(0 0 16px rgba(139,92,246,0.4)); }

/* ---- 3. BRIGHT PROOF GALLERY — Case Studies restored to a light island ---- */
#case-studies { background: var(--bg-white) !important; }
#case-studies .section-title { color: var(--text-dark) !important; text-shadow: none !important; }
#case-studies .section-label { color: var(--ocean) !important; text-shadow: none !important; }
#case-studies .section-sub { color: var(--text-mid) !important; }
.cs-card {
  background: var(--bg-light) !important;
  border: 1px solid var(--border-light) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.cs-card:hover {
  border-color: rgba(109,40,217,0.28) !important;
  box-shadow: 0 12px 44px -14px rgba(109,40,217,0.35) !important;
}
.cs-client { color: var(--text-dark) !important; }
.cs-tag { color: var(--ocean) !important; }
.cs-desc { color: var(--text-mid) !important; }
.cs-metrics { background: var(--bg-white) !important; border-color: var(--border-light) !important; }
.cs-lab { color: var(--text-light) !important; }
.cs-tags span {
  background: var(--bg-mid) !important; border-color: rgba(109,40,217,0.14) !important;
  color: var(--purple) !important;
}
.cs-arrow {
  background: var(--bg-white) !important; border-color: var(--border-light) !important;
  color: var(--text-dark) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}
.cs-arrow:hover { background: var(--purple) !important; border-color: var(--purple) !important; color: #fff !important; }
/* ghost + sub buttons/text sitting on the light island must read dark */
#case-studies .btn-ghost.on-light, #testimonials .btn-ghost.on-light {
  color: var(--text-dark) !important; border-color: rgba(109,40,217,0.35) !important;
}
#case-studies .btn-ghost.on-light:hover, #testimonials .btn-ghost.on-light:hover {
  background: rgba(109,40,217,0.08) !important; color: var(--purple) !important;
}

/* ---- 4. TESTIMONIALS — glowing 5-star review wall (continues the light band) ---- */
#testimonials {
  position: relative; z-index: 1;
  background: var(--bg-light);
  border-top: 1px solid rgba(15,23,42,0.06);
  padding: 6.5rem 0 7rem;
}
#testimonials .section-title { color: var(--text-dark) !important; text-shadow: none !important; }
#testimonials .section-label { color: var(--ocean) !important; text-shadow: none !important; }
#testimonials .section-sub { color: var(--text-mid) !important; }
.tm-head { text-align: center; max-width: 660px; margin: 0 auto 3rem; }
.tm-head .section-sub { margin-left: auto; margin-right: auto; }
.tm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.tm-card {
  position: relative; display: flex; flex-direction: column; gap: 0.85rem;
  background: linear-gradient(180deg, #ffffff, #f6f8ff);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem 1.6rem;
  box-shadow: 0 12px 32px -20px rgba(15,23,42,0.4);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  overflow: hidden;
}
.tm-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--ocean));
}
.tm-card:hover {
  transform: translateY(-6px);
  border-color: rgba(109,40,217,0.3);
  box-shadow: 0 26px 54px -22px rgba(109,40,217,0.45);
}
.tm-stars {
  font-size: 1.05rem; letter-spacing: 3px; color: #F5B301;
  text-shadow: 0 0 10px rgba(245,179,1,0.6), 0 0 24px rgba(245,179,1,0.3);
}
.tm-quote { margin: 0; font-size: 0.98rem; line-height: 1.62; font-weight: 500; color: var(--text-dark); }
.tm-by { display: flex; flex-direction: column; margin-top: auto; }
.tm-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-dark); }
.tm-role { font-size: 0.75rem; color: var(--text-light); font-weight: 500; margin-top: 0.1rem; }
.tm-metric {
  align-self: flex-start; margin-top: 0.15rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--purple);
  background: rgba(109,40,217,0.08); border: 1px solid rgba(109,40,217,0.18);
  padding: 0.35rem 0.75rem; border-radius: 50px;
}
.tm-val { font-family: var(--font-display); font-weight: 800; }
.tm-cta { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 3.25rem; }
.tm-cta-line { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text-dark); }
@media (max-width: 900px) { .tm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tm-grid { grid-template-columns: 1fr; } #testimonials { padding: 4rem 0 4.5rem; } }

/* ---- 5. MOBILE HERO — PHOTO ON TOP, TEXT STACKED BELOW (no overlap) ---- */
@media (max-width: 820px) {
  #hero {
    min-height: auto !important;
    display: flex !important; flex-direction: column !important;
    overflow: visible !important;
    padding: 0 !important; /* kill generic section 5rem padding that opened a gap above the photo */
  }
  /* portrait becomes a real panel at the top of the stack */
  #hero .hero-bg {
    position: relative !important; inset: auto !important;
    order: -1 !important;
    width: 100% !important;
    height: 52vh !important; min-height: 340px !important; max-height: 470px !important;
  }
  #hero .hero-bg-img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 20% !important;
    opacity: 1 !important; animation: none !important;
  }
  /* overlay only dims the photo and melts its base into the dark content */
  #hero .hero-overlay {
    top: 0 !important; bottom: auto !important; left: 0 !important; right: 0 !important;
    height: 52vh !important; min-height: 340px !important; max-height: 470px !important;
    background: linear-gradient(to bottom,
      rgba(4,6,15,0.12) 0%,
      rgba(4,6,15,0.00) 38%,
      rgba(4,6,15,0.55) 80%,
      var(--bg-dark) 100%) !important;
  }
  /* content flows underneath on solid dark, left aligned, comfortable padding */
  #hero .hero-content {
    position: relative !important; z-index: 6 !important;
    order: 0 !important;
    min-height: auto !important; max-width: 100% !important;
    margin-top: -2.5rem !important;
    padding: 1.5rem 1.4rem 3rem !important;
    background: var(--bg-dark) !important;
    text-align: left !important;
  }
  #hero .hero-orb, #hero .hero-arc, #hero .hero-scroll-hint { display: none !important; }
  #hero .hero-badge { margin-bottom: 1.1rem !important; }
}
@media (max-width: 480px) {
  #hero .hero-bg { height: 46vh !important; min-height: 300px !important; }
  #hero .hero-overlay { height: 46vh !important; min-height: 300px !important; }
  #skills-ticker { margin-top: 6rem !important; }
}

/* =====================================================================
   MOBILE POLISH PASS — 2026-07-24
   Vertical-scroll only, hero image life, remove duplicate proof wall,
   tidy WhatsApp launcher, cleaner case-study cards. Beats all layers.
   ===================================================================== */

/* ---- 1. Hard lock to vertical scroll (no sideways jiggle, no white edge) ---- */
html, body { max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; }
html { background: var(--bg-dark); }

/* ---- 2. Remove the duplicate "Real Brands. Real Outcomes." wall ----
   (Case Studies already carries the proof. Restore by deleting this rule.) */
#testimonials { display: none !important; }

/* ---- 3. Give the hero portrait a little life on mobile (gentle fade+rise) ---- */
@media (max-width: 820px) {
  #hero .hero-bg-img {
    animation: heroReveal 0.9s ease both !important;
  }
}
@keyframes heroReveal {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- 4. WhatsApp launcher — smaller footprint, safe-area aware, no CTA overlap ---- */
@media (max-width: 600px) {
  .wa-launcher {
    right: 1rem !important;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  .wa-toggle { width: 52px !important; height: 52px !important; }
  .wa-menu { min-width: min(280px, calc(100vw - 2rem)) !important; }
  /* keep the last CTA clear of the floating button */
  #cta .cta-box, #audit-form .section-inner { padding-bottom: 5rem !important; }
}

/* ---- 5. Case-study cards: one clean full-width card per view on phones ---- */
@media (max-width: 560px) {
  .cs-card { flex: 0 0 100% !important; padding: 1.5rem 1.35rem !important; }
  .cs-carousel-outer { gap: 0.5rem !important; }
  .cs-arrow { width: 34px !important; height: 34px !important; flex-shrink: 0; }
  .cs-desc { font-size: 0.9rem !important; }
}

/* =====================================================================
   COSMIC POLISH PASS  (2026-07-24)
   Canvas cosmos layering, headline + number shine, mobile-menu space,
   hero sparkle. Appended last so it wins.
   ===================================================================== */

/* ---- A. Canvas cosmos layer (rich stars, planets, nebula, shooting) ---- */
.sky-fx .sky-stars { z-index: 0; }
.sky-fx .sky-cosmos {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 1; pointer-events: none;
}
/* Stars over the hero earth image — additive so they read as light. */
.hero-bg .hero-cosmos {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 1; pointer-events: none;
  mix-blend-mode: screen; opacity: 0.92;
}
/* Keep FAQ copy above the injected sky + orbs. */
#faq .section-inner { position: relative; z-index: 2; }

/* ---- B. Trust-partners: eyebrow flashes grey→purple, names glow blue ---- */
.tp-eyebrow {
  background: linear-gradient(100deg,
    rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.34) 22%,
    #8b5cf6 40%, #06b6d4 50%, #a855f7 60%,
    rgba(255,255,255,0.34) 78%, rgba(255,255,255,0.34) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 10px rgba(139,92,246,0));
  animation: tpEyebrowSweep 5.5s ease-in-out infinite, tpEyebrowGlow 5.5s ease-in-out infinite;
}
@keyframes tpEyebrowSweep {
  0%, 100% { background-position: 128% 0; }
  50%      { background-position: -28% 0; }
}
@keyframes tpEyebrowGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(139,92,246,0.15)); }
  50%      { filter: drop-shadow(0 0 16px rgba(168,85,247,0.75)) drop-shadow(0 0 28px rgba(6,182,212,0.4)); }
}
.tp-name {
  color: #dbeeff !important;
  text-shadow:
    0 0 6px rgba(96,165,250,0.75),
    0 0 14px rgba(59,130,246,0.55),
    0 0 26px rgba(37,99,235,0.38);
  transition: color 0.3s, text-shadow 0.3s;
}
.tp-cell:hover .tp-name {
  color: #ffffff !important;
  text-shadow:
    0 0 8px rgba(140,190,255,0.95),
    0 0 20px rgba(59,130,246,0.85),
    0 0 36px rgba(37,99,235,0.6);
}

/* ---- C. How It Works: 01/02/03 numbers now shine + shimmer ---- */
.how-num {
  opacity: 1 !important;
  background: linear-gradient(120deg, #a78bfa 0%, #22d3ee 42%, #c084fc 72%, #a78bfa 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 0 10px rgba(139,92,246,0.55)) drop-shadow(0 0 22px rgba(34,211,238,0.32));
  animation: howNumShine 4.6s ease-in-out infinite;
}
@keyframes howNumShine {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
.how-step:hover .how-num {
  filter: drop-shadow(0 0 14px rgba(139,92,246,0.85)) drop-shadow(0 0 32px rgba(34,211,238,0.5));
}

/* ---- D. Mobile menu: animated deep-space + stars ---- */
.nav-mobile {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 85% 60% at 18% -5%, rgba(109,40,217,0.4), transparent 60%),
    radial-gradient(ellipse 75% 55% at 95% 105%, rgba(6,182,212,0.3), transparent 60%),
    linear-gradient(180deg, #05060f 0%, #0a0b1e 100%) !important;
  border-top: 1px solid rgba(139,92,246,0.3) !important;
  box-shadow: 0 20px 50px -18px rgba(0,0,0,0.8), inset 0 0 40px rgba(139,92,246,0.08) !important;
}
.nav-mobile::before {
  content: ''; position: absolute; inset: -20%; z-index: 0; pointer-events: none; opacity: 0.9;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 28% 62%, rgba(190,222,255,0.95), transparent),
    radial-gradient(1px 1px at 44% 30%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 60% 74%, rgba(214,196,255,0.95), transparent),
    radial-gradient(1px 1px at 72% 22%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 86% 58%, rgba(255,224,184,0.9), transparent),
    radial-gradient(1px 1px at 18% 84%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 52% 90%, rgba(190,222,255,0.9), transparent),
    radial-gradient(1px 1px at 68% 48%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 92% 88%, rgba(214,196,255,0.9), transparent),
    radial-gradient(1px 1px at 8% 52%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 36% 10%, rgba(183,246,255,0.9), transparent);
  animation: navMenuTwinkle 4s ease-in-out infinite, navMenuDrift 70s linear infinite;
}
.nav-mobile::after {
  content: ''; position: absolute; inset: -60%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 30% 34%, rgba(139,92,246,0.3), transparent 52%),
    radial-gradient(circle at 78% 66%, rgba(6,182,212,0.22), transparent 52%);
  animation: navMenuNebula 16s ease-in-out infinite;
}
.nav-mobile > * { position: relative; z-index: 1; }
.nav-mobile a { color: rgba(255,255,255,0.86); }
.nav-mobile.open { animation: navMenuIn 0.5s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes navMenuTwinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes navMenuDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-30px,22px,0); } }
@keyframes navMenuNebula {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(24px,-16px,0) scale(1.12); }
}
@keyframes navMenuIn {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tp-eyebrow, .how-num, .nav-mobile::before, .nav-mobile::after, .nav-mobile.open { animation: none !important; }
}

/* =====================================================================
   COSMIC POLISH v2  (2026-07-24)
   Calm premium mobile, floating planets everywhere, nav-nebula on the
   Partners section, dark Services, neon titles, and readable text.
   ===================================================================== */

/* ---- A. Partners section: reveal the fixed nav nebula (dust + stars) ---- */
#trust-partners { background: transparent !important; }
#trust-partners .tp-inner { position: relative; z-index: 2; }

/* ---- B. Readable text (kill the hard-to-read greys) ---- */
.tp-eyebrow {
  background: linear-gradient(100deg,
    rgba(255,255,255,0.66) 0%, rgba(255,255,255,0.66) 20%,
    #a855f7 40%, #22d3ee 50%, #a855f7 60%,
    rgba(255,255,255,0.66) 80%, rgba(255,255,255,0.66) 100%) !important;
  background-size: 260% 100% !important;
  /* re-assert text clipping — the background shorthand above would reset it,
     which collapsed the eyebrow into a solid bar */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ---- G. LED strip divider where the hero ends and Partners begins ---- */
.led-strip {
  height: 4px; width: 100%; border: 0;
  position: relative; z-index: 3;
  background: linear-gradient(90deg,
    transparent 0%, var(--purple-l) 18%, var(--ocean-l) 50%, var(--purple-l) 82%, transparent 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 14px rgba(139,92,246,0.6), 0 0 28px rgba(6,182,212,0.35);
  animation: ledFlow 4s linear infinite;
}
@keyframes ledFlow { 0% { background-position: 200% 0; } 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .led-strip { animation: none !important; } }

/* ---- Cookie consent banner (GA4 / Consent Mode v2) ---- */
.cookie-consent {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9999;
  max-width: 720px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(10,11,30,0.98), rgba(5,6,15,0.98));
  border: 1px solid rgba(139,92,246,0.35);
  border-radius: 16px;
  box-shadow: 0 20px 60px -18px rgba(0,0,0,0.85), 0 0 0 1px rgba(6,182,212,0.08) inset;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transform: translateY(140%); opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.45s;
}
.cookie-consent.cc-show { transform: translateY(0); opacity: 1; }
.cc-inner {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1rem 1.25rem; flex-wrap: wrap;
}
.cc-text { font-size: 0.82rem; line-height: 1.55; color: rgba(255,255,255,0.8); margin: 0; flex: 1 1 320px; }
.cc-text a { color: var(--ocean-l); text-decoration: underline; }
.cc-actions { display: flex; gap: 0.6rem; margin-left: auto; }
.cc-btn {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 0.6rem 1.2rem; border-radius: 40px; cursor: pointer; border: 1px solid transparent;
  transition: all 0.25s;
}
.cc-decline {
  background: transparent; border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.7);
}
.cc-decline:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.cc-accept {
  background: linear-gradient(100deg, var(--purple), var(--ocean)); color: #fff;
  box-shadow: 0 0 18px rgba(139,92,246,0.5);
}
.cc-accept:hover { box-shadow: 0 0 26px rgba(139,92,246,0.8); transform: translateY(-1px); }
@media (max-width: 560px) {
  .cc-inner { padding: 0.9rem 1rem; gap: 0.8rem; }
  .cc-actions { width: 100%; }
  .cc-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .cookie-consent { transition: opacity 0.3s; transform: none; } }

/* =====================================================================
   COSMIC POLISH v3  (2026-07-24)
   Mobile: floating hero icons, richer burger-menu motion, and seamless
   section merging (dark sections share one continuous cosmos).
   ===================================================================== */

/* ---- A. Floating tech icons on the mobile hero (kept clear of the face) ---- */
@media (max-width: 767px) {
  .fi-meta, .fi-google, .fi-ai { display: flex !important; }
  .fi-n8n, .fi-claude { display: none !important; }
  .fi-meta   { top: 11% !important; left: 5% !important; right: auto !important; transform: scale(0.78); }
  .fi-google { top: 8% !important; right: 6% !important; left: auto !important; transform: scale(0.78); }
  .fi-ai    { top: 30% !important; right: 4% !important; left: auto !important; transform: scale(0.72); }
  .fi span { font-size: 0.58rem !important; }
}

/* ---- B. Richer mobile burger-menu open animation (staggered links + glow) ---- */
.nav-mobile.open { animation: navMenuIn 0.55s cubic-bezier(0.22,1,0.36,1) both; }
.nav-mobile.open a {
  opacity: 0;
  animation: navLinkIn 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
}
.nav-mobile.open a:nth-child(1) { animation-delay: 0.10s; }
.nav-mobile.open a:nth-child(2) { animation-delay: 0.17s; }
.nav-mobile.open a:nth-child(3) { animation-delay: 0.24s; }
.nav-mobile.open a:nth-child(4) { animation-delay: 0.31s; }
.nav-mobile.open a:nth-child(5) { animation-delay: 0.38s; }
.nav-mobile.open a:nth-child(6) { animation-delay: 0.45s; }
@keyframes navLinkIn {
  0%   { opacity: 0; transform: translateX(-16px); filter: blur(2px); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-hamburger span { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), opacity 0.25s; }

/* ---- C. Seamless mobile section merging — one continuous cosmos ---- */
@media (max-width: 767px) {
  /* dark sections drop their own backdrop so the fixed cosmos flows behind
     the whole page with no visible seams between sections */
  #trust-partners, #roas-calc, #numbers, #qualifications, #skills,
  #services, #results, #case-studies, #cta, #faq, #how {
    background: transparent !important;
  }
  /* collapse the dark-to-dark gaps so nothing bands; keep the light-island
     dissolves (nb-light-to-dark / nb-dark-to-light) doing their fade */
  .neon-break.nb-dark-to-dark { height: 0 !important; margin: 0 !important; }
  .neon-break.nb-light-to-dark, .neon-break.nb-dark-to-light { height: 90px !important; }
  /* soften section padding seams a touch so content breathes as one flow */
  section { border: 0 !important; }
  /* case-studies goes transparent-over-cosmos on mobile, so its heading text
     must read light instead of the dark it uses on the desktop light island */
  #case-studies .section-title { color: #ffffff !important; text-shadow: 0 0 24px rgba(139,92,246,0.4), 0 0 48px rgba(6,182,212,0.18) !important; }
  #case-studies .section-label { color: var(--ocean-l) !important; text-shadow: 0 0 14px rgba(6,182,212,0.5) !important; }
  #case-studies .section-sub { color: rgba(255,255,255,0.72) !important; }
  #case-studies .btn-ghost.on-light { color: #ffffff !important; border-color: rgba(139,92,246,0.45) !important; }
  #case-studies .btn-ghost.on-light:hover { background: rgba(139,92,246,0.14) !important; color: #ffffff !important; }
}
.tp-tier { color: rgba(255,255,255,0.72) !important; }
.cert-featured-text p { color: rgba(255,255,255,0.72) !important; }
#faq .section-sub, #qualifications .section-sub,
#numbers .section-sub, #roas-calc .section-sub { color: rgba(255,255,255,0.74) !important; }
/* certification pill labels + list text on the dark stage */
.qual-tag, .qual-list li, .qual-list li span { color: rgba(255,255,255,0.82) !important; }

/* ---- C. Neon-shining titles (the look you liked on Services) ---- */
.gradient-text { text-shadow: 0 0 18px rgba(139,92,246,0.5), 0 0 34px rgba(6,182,212,0.28); }
#trust-partners .section-title, #roas-calc .section-title, #numbers .section-title,
#qualifications .section-title, #cta .section-title, #faq .section-title,
#skills .section-title, #services .section-title, #how .section-title {
  text-shadow: 0 0 22px rgba(120,150,255,0.4), 0 0 44px rgba(139,92,246,0.22);
}

/* ---- D. Services: dark to match the rest of the site ---- */
#services {
  background:
    radial-gradient(ellipse 60% 55% at 12% 8%, rgba(6,182,212,0.10), transparent 60%),
    radial-gradient(ellipse 55% 55% at 90% 92%, rgba(109,40,217,0.14), transparent 60%),
    rgba(6,7,16,0.62) !important;
}
#services .section-title { color: #ffffff !important; }
#services .section-sub, #services .section-sub * { color: rgba(255,255,255,0.75) !important; }
#services .section-label { color: var(--ocean-l) !important; }
#services .svc-item, #services .svc-item:first-child { border-color: rgba(255,255,255,0.10) !important; }
#services .svc-title { color: #ffffff !important; }
#services .svc-panel p { color: rgba(255,255,255,0.75) !important; }
#services .svc-chevron { color: rgba(255,255,255,0.5) !important; }
#services .svc-icon { background: rgba(139,92,246,0.16) !important; color: #c9b6ff !important; }
#services .service-tags li {
  background: rgba(139,92,246,0.14) !important;
  border-color: rgba(139,92,246,0.28) !important;
  color: #c9b6ff !important;
}

/* ---- E. Credentials: let 4 featured cards flow evenly ---- */
@media (min-width: 1025px) {
  .cert-featured { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; }
}

/* ---- F. Mobile: calm + fast — no grid, no CSS dot layer, soft backdrop ---- */
@media (max-width: 767px) {
  .sky-fx .sky-stars { display: none !important; }   /* canvas provides the calm stars */
  #how #cyber-grid { display: none !important; }
  .cyber-fx { display: none !important; }            /* remove the floating gold orbs/dots */
  #how {
    background:
      radial-gradient(ellipse 92% 70% at 28% 0%, rgba(109,40,217,0.14), transparent 62%),
      radial-gradient(ellipse 80% 60% at 92% 100%, rgba(6,182,212,0.10), transparent 62%),
      #05060f !important;
  }
  /* trim heavy glows so nothing reads as too bright/pink on a phone */
  #qualifications, #numbers, #cta { background-blend-mode: normal; }
}

/* ============================================================
   SEAMLESS COSMOS — kill the hard aurora seam line for good.
   A bright cyan/pink 2px streak was being redrawn at every
   section break (the "AURORA RIBBON DIVIDERS" block re-enabled
   the ::after element). It sliced the page into ugly slabs.
   Killed here so every section dissolves into one continuous
   starfield. The light-island dissolve gradients live on the
   .neon-break element background, so they are untouched.
   ============================================================ */
.neon-break::after,
.neon-break::before { content: none !important; display: none !important; }
/* dark-to-dark seams collapse to nothing: cosmos flows uninterrupted */
.neon-break.nb-dark-to-dark { background: transparent !important; }

/* ---- No more nebula seams between section canvases ----
   Each dark section injects its own .sky-cosmos canvas. Their hard
   top/bottom edges used to butt together and show a visible band.
   Fade every canvas edge to transparent so adjacent sections
   dissolve into ONE continuous starfield (the fixed #neural-canvas
   flows behind, filling the fade). */
.sky-fx .sky-cosmos {
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0, #000 9%, #000 91%, transparent 100%);
}

/* ============================================================
   G. READABILITY FLOOR — no more unreadable grey body text.
   Every dim white text on the dark cosmos is lifted to a legible
   level. Descriptive/body copy -> 0.86, secondary labels -> 0.72.
   Light-island sections (case studies, testimonials) are NOT
   touched here, so their dark-on-white greys stay intact.
   ============================================================ */
/* Partners — the worst offenders (card descriptions + roles) */
.pt-desc,
#partners .mma-desc,
#partners .mma-sub,
.pt-name,
#partners .mma-name { color: rgba(255,255,255,0.9) !important; }
#partners .mma-role { color: rgba(255,255,255,0.72) !important; }

/* Descriptive body copy across the dark sections */
.cta-sub,
.sk-card p,
.qual-list li, .qual-list li span,
.cert-featured-text p,
.cert-item span,
.rc-method-text, .rc-uplift-label,
.section-sub { color: rgba(255,255,255,0.86) !important; }

/* Secondary labels + small print — readable, not blinding */
.pt-stat-l,
.cta-number,
.cert-item small,
.cert-cta small,
.footer-tagline,
.footer-copy,
.footer-links a,
.ft-copy,
.ft-stat-l,
.ft-contact-row span,
.wa-option span { color: rgba(255,255,255,0.72) !important; }

/* =====================================================================
   SECTION SIGNATURES — each section its own identity, seamless joins
   Shared dark edge (#070812) top+bottom on every section => smooth
   transitions with no banding. Unique tinted core + motif + accent
   in the middle => no section looks copy-pasted. Applies on desktop
   AND mobile (overrides the earlier "everything transparent" cosmos).
   Text colors are untouched, so contrast stays intact.
   ===================================================================== */

/* 1 · TRUST-PARTNERS — cyan · dot matrix */
section#trust-partners {
  background:
    radial-gradient(circle, rgba(6,182,212,0.11) 1px, transparent 1.7px),
    radial-gradient(ellipse 60% 55% at 15% 12%, rgba(6,182,212,0.13), transparent 62%),
    linear-gradient(180deg, #070812 0%, #08131a 50%, #070812 100%) !important;
  background-size: 24px 24px, cover, cover !important;
  border-bottom: 0 !important;
}

/* 2 · TRUSTED (client logos) — steel blue · diagonal streaks */
section#trusted {
  background:
    repeating-linear-gradient(115deg, rgba(59,130,246,0.05) 0 2px, transparent 2px 20px),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(59,130,246,0.13), transparent 60%),
    linear-gradient(180deg, #070812 0%, #080d1a 50%, #070812 100%) !important;
  background-size: cover, cover, cover !important;
}

/* 3 · SERVICES — violet · blueprint grid */
section#services {
  background:
    linear-gradient(rgba(139,92,246,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.06) 1px, transparent 1px),
    radial-gradient(ellipse 60% 55% at 88% 14%, rgba(139,92,246,0.15), transparent 60%),
    radial-gradient(ellipse 55% 50% at 8% 92%, rgba(6,182,212,0.09), transparent 60%),
    linear-gradient(180deg, #070812 0%, #0c0a1c 50%, #070812 100%) !important;
  background-size: 44px 44px, 44px 44px, cover, cover, cover !important;
}

/* 4 · SKILLS — teal · circuit lattice */
section#skills {
  background:
    linear-gradient(90deg, rgba(20,184,166,0.05) 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(20,184,166,0.045) 0 1px, transparent 1px 34px),
    radial-gradient(ellipse 55% 50% at 10% 90%, rgba(20,184,166,0.13), transparent 60%),
    radial-gradient(ellipse 55% 50% at 90% 8%, rgba(6,182,212,0.10), transparent 60%),
    linear-gradient(180deg, #070812 0%, #071615 50%, #070812 100%) !important;
  background-size: 34px 100%, cover, cover, cover, cover !important;
}

/* 5 · HOW IT WORKS — indigo · soft diagonal sweep */
section#how {
  background:
    repeating-linear-gradient(-45deg, rgba(99,102,241,0.045) 0 1px, transparent 1px 30px),
    radial-gradient(ellipse 75% 60% at 50% 110%, rgba(99,102,241,0.16), transparent 62%),
    linear-gradient(180deg, #070812 0%, #0a0b1e 50%, #070812 100%) !important;
  background-size: cover, cover, cover !important;
}

/* 6 · ROAS CALCULATOR — azure · concentric energy rings */
section#roas-calc {
  background:
    repeating-radial-gradient(circle at 50% 42%, rgba(56,189,248,0.05) 0 1px, transparent 1px 26px),
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(6,182,212,0.13), transparent 62%),
    linear-gradient(180deg, #070812 0%, #08111c 50%, #070812 100%) !important;
  background-size: cover, cover, cover !important;
}

/* 7 · NUMBERS — bright blue · fine data grid */
section#numbers {
  background:
    linear-gradient(rgba(96,165,250,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,0.05) 1px, transparent 1px),
    radial-gradient(ellipse 65% 55% at 50% 6%, rgba(96,165,250,0.13), transparent 60%),
    linear-gradient(180deg, #070812 0%, #080f1c 50%, #070812 100%) !important;
  background-size: 32px 32px, 32px 32px, cover, cover !important;
}

/* 8 · QUALIFICATIONS — gold · certified warmth + rings */
section#qualifications {
  background:
    repeating-radial-gradient(circle at 50% 20%, rgba(245,196,81,0.045) 0 1px, transparent 1px 30px),
    radial-gradient(ellipse 60% 50% at 50% 12%, rgba(234,179,8,0.13), transparent 62%),
    linear-gradient(180deg, #070812 0%, #14110a 50%, #070812 100%) !important;
  background-size: cover, cover, cover !important;
}

/* 9 · PARTNERS — magenta · diagonal mesh */
section#partners {
  background:
    repeating-linear-gradient(60deg, rgba(217,70,239,0.045) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-60deg, rgba(217,70,239,0.045) 0 1px, transparent 1px 26px),
    radial-gradient(ellipse 60% 55% at 85% 90%, rgba(217,70,239,0.14), transparent 62%),
    linear-gradient(180deg, #070812 0%, #160a16 50%, #070812 100%) !important;
  background-size: cover, cover, cover, cover !important;
}

/* 10 · FAQ — purple · vertical light beams */
section#faq {
  background:
    repeating-linear-gradient(90deg, rgba(139,92,246,0.045) 0 2px, transparent 2px 64px),
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(139,92,246,0.14), transparent 60%),
    linear-gradient(180deg, #070812 0%, #0f0a1a 50%, #070812 100%) !important;
  background-size: cover, cover, cover !important;
}

/* 11 · AUDIT FORM — cyan · focused spotlight */
section#audit-form {
  background:
    radial-gradient(ellipse 55% 45% at 50% 32%, rgba(6,182,212,0.15), transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 45%, rgba(3,4,10,0.6) 100%),
    linear-gradient(180deg, #070812 0%, #08131a 50%, #070812 100%) !important;
  background-size: cover, cover, cover !important;
}

/* 12 · CTA — purple to magenta · converging rays */
section#cta {
  background:
    radial-gradient(ellipse 80% 60% at 50% 130%, rgba(217,70,239,0.18), transparent 62%),
    radial-gradient(ellipse 70% 55% at 50% -20%, rgba(139,92,246,0.16), transparent 60%),
    linear-gradient(180deg, #070812 0%, #140a1e 50%, #070812 100%) !important;
  background-size: cover, cover, cover !important;
}

/* Dividers between signed sections: collapse the generic orb break so the
   shared dark edges meet directly and read as one continuous flow */
.neon-break.nb-dark-to-dark { height: 26px !important; }
@media (max-width: 767px) { .neon-break.nb-dark-to-dark { height: 0 !important; } }

/* =====================================================================
   MOBILE SEAMLESS JOINS — one continuous design
   On phones the opaque section signatures created hard horizontal seams
   where a section's solid edge met the next section's cosmos. Here each
   signed section becomes a SOFT centre-wash that fades to fully
   transparent well before its top/bottom edges, so every seam is just
   the one continuous cosmos meeting itself = invisible. Each section
   still glows its own accent in the middle => unique yet unified.
   ===================================================================== */
@media (max-width: 767px) {
  section#trust-partners {
    background: radial-gradient(ellipse 135% 46% at 50% 50%, rgba(6,182,212,0.15), transparent 66%) !important;
  }
  section#trusted {
    background: radial-gradient(ellipse 135% 46% at 50% 46%, rgba(59,130,246,0.14), transparent 66%) !important;
  }
  section#services {
    background: radial-gradient(ellipse 135% 46% at 50% 50%, rgba(139,92,246,0.17), transparent 66%) !important;
  }
  section#skills {
    background:
      radial-gradient(ellipse 120% 42% at 18% 42%, rgba(20,184,166,0.14), transparent 62%),
      radial-gradient(ellipse 120% 42% at 82% 58%, rgba(6,182,212,0.12), transparent 62%) !important;
  }
  section#how {
    background: radial-gradient(ellipse 135% 46% at 50% 52%, rgba(99,102,241,0.16), transparent 66%) !important;
  }
  section#roas-calc {
    background: radial-gradient(ellipse 135% 46% at 50% 46%, rgba(56,189,248,0.15), transparent 66%) !important;
  }
  section#numbers {
    background: radial-gradient(ellipse 135% 46% at 50% 46%, rgba(96,165,250,0.15), transparent 66%) !important;
  }
  section#qualifications {
    background: radial-gradient(ellipse 135% 44% at 50% 40%, rgba(234,179,8,0.14), transparent 64%) !important;
  }
  section#partners {
    background: radial-gradient(ellipse 135% 46% at 50% 54%, rgba(217,70,239,0.15), transparent 66%) !important;
  }
  section#faq {
    background: radial-gradient(ellipse 135% 46% at 50% 44%, rgba(139,92,246,0.15), transparent 66%) !important;
  }
  section#audit-form {
    background: radial-gradient(ellipse 130% 42% at 50% 40%, rgba(6,182,212,0.16), transparent 62%) !important;
  }
  section#cta {
    background:
      radial-gradient(ellipse 130% 42% at 50% 62%, rgba(217,70,239,0.17), transparent 64%),
      radial-gradient(ellipse 120% 40% at 50% 20%, rgba(139,92,246,0.13), transparent 62%) !important;
  }
  /* light-island sections also flow over the cosmos on mobile (no opaque
     bands): keep them transparent so nothing interrupts the continuous flow.
     Their cards stay light (bright cards floating in space), but the section
     header text must flip to light so it is not dark-on-dark. */
  section#testimonials { background: transparent !important; }
  #testimonials .section-title { color: #ffffff !important; text-shadow: 0 0 24px rgba(139,92,246,0.4), 0 0 48px rgba(6,182,212,0.18) !important; }
  #testimonials .section-label { color: var(--ocean-l) !important; text-shadow: 0 0 14px rgba(6,182,212,0.5) !important; }
  #testimonials .section-sub { color: rgba(255,255,255,0.72) !important; }
  /* about was a 62%-opaque dark band; let it flow with a soft wash too */
  section#about {
    background: radial-gradient(ellipse 135% 46% at 50% 48%, rgba(56,189,248,0.12), transparent 64%) !important;
  }
  /* dividers around the (now transparent) islands no longer need a fade gap */
  .neon-break.nb-light-to-dark, .neon-break.nb-dark-to-light { height: 0 !important; }
}

/* ============================================================
   *** DEFINITIVE ONE-COSMOS FIX (mobile) ***
   The root cause of every "ugly copy-paste block" seam: each dark
   section painted its OWN background — one near-black (#how at
   #05060f), the next a purple wash, the next teal — so where they
   met you saw a hard horizontal colour band.

   Cure: EVERY dark section is fully transparent. The single fixed
   #neural-canvas starfield behind the whole page becomes the ONE
   and ONLY background. Sections just float their content over it.
   Identical background everywhere => no colour change, no block,
   no seam. This is appended last and uses section#id specificity
   so it wins over all the earlier per-section washes.

   Light-island sections (case studies, testimonials, about) are
   deliberately NOT listed — they keep their bright treatment and
   dissolve in via the .neon-break gradients.
   ============================================================ */
@media (max-width: 767px) {
  section#trust-partners, section#trusted, section#services,
  section#skills, section#how, section#roas-calc, section#numbers,
  section#qualifications, section#partners, section#results,
  section#faq, section#audit-form, section#cta {
    background: transparent !important;
    background-color: transparent !important;
  }
}

/* ============================================================================
   ★★★  UNIFIED COSMIC FLOW  —  THE DEFINITIVE SECTION-TRANSITION SYSTEM  ★★★
   (appended last, at ALL widths, so it supersedes every per-section
   "signature" background and every earlier mobile wash)

   PRINCIPLE
   ---------
   1. There is exactly ONE background for the whole page: the fixed
      #neural-canvas starfield. Every dark section is fully transparent,
      so adjacent sections are visually identical at their edges =>
      the join is invisible. No solid bases, no dark bands, no seams.
   2. Each section keeps a subtle IDENTITY via a single soft glow that
      FADES TO FULLY TRANSPARENT well before the top/bottom edges. Because
      the glow never touches an edge, it can never create a band.
   3. Only two brand hues are used — violet (139,92,246) and cyan
      (6,182,212) — alternating side-to-side down the page so the light
      weaves gently as you scroll: one continuous, intentional composition
      instead of 13 copy-pasted colour blocks.
   ============================================================================ */
section#trust-partners, section#trusted, section#services, section#skills,
section#how, section#roas-calc, section#numbers, section#qualifications,
section#partners, section#results, section#about, section#faq,
section#audit-form, section#cta {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  isolation: isolate;              /* keep the glow layer scoped to the section */
  border: 0 !important;            /* no hard edge lines at any join */
}

/* The soft identity glow. One diffuse ellipse per section, transparent by
   ~58% of its radius, so the section's own edges are always clear cosmos.
   ::after sits behind the content (z-index:-1 within the isolated section). */
section#trust-partners::after, section#trusted::after, section#services::after,
section#skills::after, section#how::after, section#roas-calc::after,
section#numbers::after, section#qualifications::after, section#partners::after,
section#results::after, section#about::after, section#faq::after,
section#audit-form::after, section#cta::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  animation: none !important;      /* neutralise the old skills-grid scroll anim */
}
/* woven violet/cyan accents, alternating sides, drifting down the page */
section#trust-partners::after { background: radial-gradient(ellipse 70% 46% at 20% 30%, rgba(6,182,212,0.12),  transparent 58%); }
section#trusted::after        { background: radial-gradient(ellipse 70% 46% at 80% 32%, rgba(139,92,246,0.11), transparent 58%); }
section#services::after       { background:
    radial-gradient(ellipse 60% 42% at 14% 26%, rgba(139,92,246,0.13), transparent 58%),
    radial-gradient(ellipse 55% 40% at 88% 78%, rgba(6,182,212,0.10),  transparent 58%); }
section#skills::after         { background:
    radial-gradient(ellipse 58% 40% at 86% 22%, rgba(139,92,246,0.12), transparent 58%),
    radial-gradient(ellipse 55% 40% at 12% 80%, rgba(6,182,212,0.11),  transparent 58%); }
section#how::after            { background: radial-gradient(ellipse 72% 46% at 50% 32%, rgba(99,102,241,0.13),  transparent 60%); }
section#roas-calc::after      { background: radial-gradient(ellipse 66% 44% at 50% 48%, rgba(6,182,212,0.12),   transparent 60%); }
section#numbers::after        { background: radial-gradient(ellipse 66% 44% at 50% 26%, rgba(96,165,250,0.12),  transparent 60%); }
section#qualifications::after { background: radial-gradient(ellipse 64% 42% at 50% 26%, rgba(139,92,246,0.12),  transparent 60%); }
section#partners::after       { background: radial-gradient(ellipse 66% 44% at 78% 55%, rgba(6,182,212,0.12),   transparent 58%); }
section#results::after        { background: radial-gradient(ellipse 66% 44% at 22% 42%, rgba(139,92,246,0.13),  transparent 58%); }
section#about::after          { background: radial-gradient(ellipse 66% 46% at 78% 40%, rgba(6,182,212,0.11),   transparent 58%); }
section#faq::after            { background: radial-gradient(ellipse 66% 44% at 28% 30%, rgba(139,92,246,0.13),  transparent 58%); }
section#audit-form::after     { background: radial-gradient(ellipse 64% 42% at 50% 34%, rgba(6,182,212,0.13),   transparent 60%); }
section#cta::after            { background:
    radial-gradient(ellipse 70% 44% at 50% 62%, rgba(139,92,246,0.15), transparent 60%),
    radial-gradient(ellipse 60% 38% at 50% 8%,  rgba(6,182,212,0.10),  transparent 58%); }

/* The dividers are now pure transparent gaps over the continuous cosmos —
   collapse them so sections flow directly into one another. Light-island
   dissolves (to/from the white proof sections) keep their gradient fade. */
.neon-break.nb-dark-to-dark { height: 0 !important; margin: 0 !important; background: transparent !important; }
.neon-break.nb-dark-to-dark::before,
.neon-break.nb-dark-to-dark::after { display: none !important; }

/* ============================================================================
   ★  LEGIBILITY ON THE COSMOS  —  crisp headings, no more grey text  ★
   Dark sections now sit on the deep cosmos, so all their text goes bright.
   Light-island titles keep their dark colour via higher-specificity
   (#case-studies / #testimonials) rules, so this does not touch them.
   ============================================================================ */
/* Section headings — pure white with the existing neon glow */
#trust-partners .section-title, #trusted .section-title, #services .section-title,
#skills .section-title, #how .section-title, #roas-calc .section-title,
#numbers .section-title, #qualifications .section-title, #partners .section-title,
#results .section-title, #faq .section-title, #audit-form .section-title,
#cta .section-title { color: #ffffff !important; }

/* Sub-heads + lead paragraphs — legible, not dim grey */
#trust-partners .section-sub, #trusted .section-sub, #services .section-sub,
#skills .section-sub, #how .section-sub, #roas-calc .section-sub,
#numbers .section-sub, #qualifications .section-sub, #partners .section-sub,
#results .section-sub, #faq .section-sub, #audit-form .section-sub,
#cta .section-sub,
#numbers .section-sub *, .rc-method-text, .rc-uplift-label,
.svc-panel p, #services .svc-panel p, .sk-card p, .how-list li,
.qual-list li, .qual-list li span, .pt-desc, #partners .mma-desc,
.cta-sub, .faq-a, .faq-a p, .faq-answer,
#about .about-content p, .ab-lead, .about-bio p {
  color: rgba(255,255,255,0.9) !important;
}
/* Eyebrow labels stay in brand cyan but readable */
#trust-partners .section-label, #numbers .section-label, #results .section-label,
#partners .section-label, #faq .section-label, #cta .section-label,
#audit-form .section-label, #qualifications .section-label {
  color: var(--ocean-l) !important; opacity: 1 !important;
}

/* ============================================================================
   ★  READABILITY OVER THE COSMOS  —  calm the nebula + solid glass cards  ★
   The seamless cosmos is beautiful but its per-section nebula was so bright
   that text and near-transparent cards washed out. Two-part fix, keeps the
   flowing design intact:
     A) a soft dark scrim over each section's starfield canvas (nebula still
        visible, just calmer, so content reads),
     B) the see-through content cards become proper dark frosted glass.
   ============================================================================ */

/* A · The per-section starfield is now only a SUBTLE sparkle overlay. The
   continuous fixed #neural-canvas base (below) is the real cosmos, so when a
   section canvas fades at its edges the layer behind is nearly the same
   brightness => no dark trough at any junction. Low opacity also calms the
   nebula so text/cards read. */
.sky-fx .sky-cosmos {
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* Lift headings + body off the nebula with a subtle dark halo (layered
   under the existing neon glow so both read). */
#trust-partners .section-title, #trusted .section-title, #services .section-title,
#skills .section-title, #how .section-title, #roas-calc .section-title,
#numbers .section-title, #qualifications .section-title, #partners .section-title,
#results .section-title, #faq .section-title, #audit-form .section-title,
#cta .section-title, .hero-headline,
.gradient-text {
  text-shadow: 0 2px 16px rgba(3,4,10,0.75), 0 0 22px rgba(139,92,246,0.28) !important;
}

/* B · Solid frosted-glass cards ------------------------------------------- */
/* Skills grid cards (were rgba(255,255,255,0.03) => invisible) */
.sk-card {
  background: rgba(11,14,28,0.66) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 10px 34px -16px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Client-brand marquee chips (were rgba(colour,0.06) => invisible) */
.m-logo--cyan, .m-logo--violet {
  background: rgba(11,14,28,0.62) !important;
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
}
.m-logo--cyan:hover   { background: rgba(6,182,212,0.16) !important; }
.m-logo--violet:hover { background: rgba(139,92,246,0.16) !important; }
/* Partner / certification cells — firm up the existing glass */
.tp-cell { background: rgba(14,17,34,0.66) !important; }
/* Track-record + qualification + partner cards read as glass panels too */
.rc-card, .qual-card, .pt-card {
  background: rgba(13,16,32,0.60) !important;
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
}
/* Services accordion sits directly on the cosmos on the left column —
   give the whole panel a soft glass slab so its copy reads. */
#services .svc-accordion, #services .svc-list, .svc-accordion {
  background: rgba(9,11,24,0.50);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 0.4rem 1.4rem;
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
}

/* C · Client roster (marquee) — make the names + niches actually read.
   Brighter, bigger type on every chip; larger chips on desktop. */
.m-logo-name {
  color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6) !important;
}
.m-logo-cat {
  color: rgba(190,215,255,0.82) !important;   /* soft steel-blue, clearly legible */
}
@media (min-width: 768px) {
  .m-logo {
    width: 232px !important;
    height: 96px !important;
    padding: 0 1.5rem !important;
    border-radius: 16px !important;
  }
  .m-logo-name { font-size: 0.9rem !important; letter-spacing: 0.06em !important; }
  .m-logo-cat  { font-size: 0.62rem !important; }
  /* firmer glass so the vivid nebula does not swallow the chips */
  .m-logo--cyan   { background: rgba(10,13,26,0.72) !important; border-color: rgba(6,182,212,0.5) !important; }
  .m-logo--violet { background: rgba(10,13,26,0.72) !important; border-color: rgba(139,92,246,0.5) !important; }
}

/* D · Footer join — kill the bright animated line; let the footer flow out of
   the cosmos (top matches the base indigo, deepens to near-black below). */
.ft-border-top { display: none !important; }
#footer {
  background: linear-gradient(180deg, #120f2e 0%, #0a0920 42%, #040610 100%) !important;
  border-top: 0 !important;
}

/* E · Trusted section on MOBILE — clean client roster.
   On phones the floating 4.2x card + neural-net + 3D grid overlapped the
   headline and the bright nebula buried the client chips. Declutter, give
   the headline room below the nav, and calm the backdrop so the roster reads
   as a clean grid of glass cards. (Desktop keeps all its flourishes.) */
@media (max-width: 767px) {
  #trusted { padding-top: 4.75rem !important; }
  .trusted-header { margin-bottom: 2.25rem !important; }
  .trusted-title { font-size: 1.55rem !important; line-height: 1.32 !important; }
  /* remove the floating decorations that collided with the headline */
  #trusted .ts-analytics-card,
  #trusted .ts-neural-net,
  #trusted .ts-grid3d { display: none !important; }
  /* calm the busy nebula so the client cards stand out */
  #trusted .sky-fx .sky-cosmos { opacity: 0.18 !important; }
  #trusted .ts-nebula { opacity: 0.4 !important; }
  /* client chips: solid, roomy, legible on the calm backdrop */
  .m-logo { width: 190px !important; height: 82px !important; border-radius: 15px !important; }
  .m-logo-name { font-size: 0.82rem !important; }
  .m-logo-cat  { font-size: 0.58rem !important; }
  .m-logo--cyan   { background: rgba(10,13,26,0.78) !important; border-color: rgba(6,182,212,0.5) !important; }
  .m-logo--violet { background: rgba(10,13,26,0.78) !important; border-color: rgba(139,92,246,0.5) !important; }
}