/* ════════════════════════════════════════════════════════════════════
   EASYWORKS AI — REDESIGN V2 · "Cosmic Electric"
   Layered on top of style.min.css — additive overrides + new components
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── v3 "Serious Futuristic" — navy base · blue/cyan tech · gold = money ──
     Old token names kept (4000+ refs) but remapped to serious values:
       magenta/pink  → refined gold (premium / revenue / scale signal)
       loud purple   → restrained indigo (rare structural accent)
       pure laser    → softer ice-blue                                    */
  --electric-cyan:    #22d3ee;
  --electric-magenta: #e8b25a;   /* now GOLD, not pink */
  --electric-purple:  #4f86f7;   /* true azure-blue (no violet) */
  --neon-pink:        #e8b25a;   /* now gold */
  --deep-space:       #070b16;   /* deep navy-black, serious */
  --space:            #0c1222;
  --space-2:          #131c30;
  --hot-pink:         #e8b25a;   /* now gold */
  --laser:            #38bdf8;   /* ice-blue, not neon */

  /* New named tokens */
  --accent-blue:  #3b82f6;
  --accent-ice:   #7dd3fc;
  --gold:         #e8b25a;
  --gold-soft:    #f0c87e;
  --steel:        #1c2740;

  /* Gradients — disciplined, NO rainbow sweep */
  --grad-electric: linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
  --grad-gold:     linear-gradient(135deg, #e8b25a 0%, #f0c87e 100%);
  --grad-cosmic:   radial-gradient(ellipse at top, rgba(59,130,246,0.16), transparent 55%), radial-gradient(ellipse at bottom, rgba(34,211,238,0.10), transparent 55%);
  --glow-cyan:     0 0 16px rgba(34,211,238,0.38), 0 0 40px rgba(34,211,238,0.16);
  --glow-magenta:  0 0 16px rgba(232,178,90,0.40), 0 0 40px rgba(232,178,90,0.16);  /* gold glow */
  --glow-mixed:    0 0 20px rgba(59,130,246,0.34), 0 0 46px rgba(34,211,238,0.18);
}

/* ═══ BODY / FUTURISTIC BACKGROUND ═══ */
body.cosmic {
  background:
    radial-gradient(ellipse 110% 55% at 50% 0%, rgba(59,130,246,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 22%, rgba(34,211,238,0.055), transparent 60%),
    radial-gradient(ellipse 80% 55% at 15% 78%, rgba(79,134,247,0.05), transparent 65%),
    var(--deep-space);
  position: relative;
  min-height: 100vh;
}

/* Fixed canvas for animated starfield */
#cosmic-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
}

/* CSS Grid horizon overlay */
.cosmic-grid {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%) perspective(800px) rotateX(60deg);
  transform-origin: center bottom;
  width: 200vw; height: 60vh;
  background-image:
    linear-gradient(rgba(34,211,238,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,0.18) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent 80%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent 80%);
  z-index: 0;
  pointer-events: none;
  animation: grid-pan 12s linear infinite;
}
@keyframes grid-pan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 64px, 64px 0; }
}

/* Drifting cosmic blobs — blur reduced (80px → 50px) for perf */
.cosmic-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.38;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform;
}
.cosmic-blob-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
  top: 10%; left: -10%;
  animation: blob-drift-1 22s ease-in-out infinite;
}
.cosmic-blob-2 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, #22d3ee 0%, transparent 70%);
  top: 38%; right: -8%;
  opacity: 0.28;
  animation: blob-drift-2 28s ease-in-out infinite;
}
.cosmic-blob-3 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #38bdf8 0%, transparent 70%);
  bottom: -10%; left: 30%;
  animation: blob-drift-3 32s ease-in-out infinite;
}
@keyframes blob-drift-1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(120px,80px) scale(1.15); }
}
@keyframes blob-drift-2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-90px,140px) scale(0.9); }
}
@keyframes blob-drift-3 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(60px,-100px) scale(1.1); }
}

/* All content above cosmic layers */
section, footer, .trust-strip, .container { position: relative; z-index: 2; }

/* ═══ NAV refinements ═══ */
/* Nav MUST sit above sections so the mobile dropdown's bg isn't hidden behind
   the hero (sections have z-index:2 too — document order would otherwise win). */
.nav {
  position: relative;
  z-index: 50;
  background: rgba(7,11,22,0.65);
  border-bottom: 1px solid rgba(34,211,238,0.12);
}
.nav.scrolled {
  background: rgba(7,11,22,0.95);
  box-shadow: 0 1px 32px rgba(79,134,247,0.18);
}
/* Hard-opaque dropdown on mobile so menu links stay readable */
@media (max-width: 768px) {
  .nav-links.active {
    background: rgba(7,11,22,0.98) !important;
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    z-index: 60;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  }
}
.nav-cta {
  background: var(--grad-electric);
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--glow-mixed);
  transition: transform 0.2s, box-shadow 0.2s;
}
.nav-cta:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 0 40px rgba(79,134,247,0.7), 0 0 80px rgba(56,189,248,0.4); }

/* ═══ HERO V2 ═══ */
.hero-v2 {
  min-height: 92vh;
  padding: 120px 0 80px;
  overflow: visible;
  background: transparent;
}
.hero-v2 .hero-stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(34,211,238,0.8), transparent),
    radial-gradient(1.5px 1.5px at 35% 80%, rgba(232,178,90,0.6), transparent),
    radial-gradient(1px 1px at 90% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 15% 60%, rgba(79,134,247,0.7), transparent);
  background-size: 600px 600px;
  animation: stars-drift 60s linear infinite;
  opacity: 0.6;
  pointer-events: none;
}
@keyframes stars-drift {
  from { background-position: 0 0; }
  to   { background-position: 600px 600px; }
}
.hero-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  min-height: 70vh;
}
.hero-copy { position: relative; z-index: 3; }
/* Tight, deliberate spacing — brand → h1 → kicker → sub → CTA */
.hero-v2 .hero-brand { margin-bottom: 28px; }
.hero-v2 h1 {
  margin: 0;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero-v2 .hero-kicker {
  margin: 16px 0 8px;
  font-size: 1.15rem;
  font-weight: 600;
}
.hero-v2 .hero-kicker .hk-accent {
  background: var(--grad-electric);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(79,134,247,0.4));
}
/* hero-engines deprecated — keeping rules in case it's reintroduced later */
.hero-engines { display: none; }
.h1-glow {
  background: var(--grad-electric);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 0 40px rgba(79,134,247,0.4);
  filter: drop-shadow(0 0 24px rgba(232,178,90,0.4));
}
.hero-sub {
  font-size: 1.05rem;
  color: #aab8d6;
  max-width: 480px;
  margin: 4px 0 28px;
  line-height: 1.5;
}
.hero-sub strong { color: var(--electric-cyan); text-shadow: 0 0 12px rgba(34,211,238,0.4); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero mascot */
.hero-mascot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
}
.mascot-img {
  width: 100%;
  max-width: 540px;
  height: auto;
  position: relative;
  z-index: 2;
  /* Mascot PNGs now ship with a real alpha cutout (no baked-in cosmic bg).
     Just light contrast + glow drop-shadows — no blend modes, no masks. */
  filter:
    drop-shadow(0 0 60px rgba(59,130,246,0.45))
    drop-shadow(0 0 140px rgba(34,211,238,0.22));
}
.mascot-float { animation: mascot-float 6s ease-in-out infinite; }
@keyframes mascot-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(0.8deg); }
}
/* Soft atmospheric haze — single gradient, very large blur, blends into page */
.mascot-glow {
  position: absolute;
  inset: -55%;
  background:
    radial-gradient(ellipse 40% 50% at center, rgba(79,134,247,0.35) 0%, transparent 75%),
    radial-gradient(ellipse 70% 75% at center, rgba(232,178,90,0.18) 0%, transparent 80%);
  filter: blur(90px);
  z-index: 1;
  animation: pulse-glow 6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
.mascot-glow-cyan {
  background:
    radial-gradient(ellipse 50% 55% at center, rgba(56,189,248,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 60% 70% at center, rgba(79,134,247,0.45) 0%, transparent 70%),
    radial-gradient(ellipse 80% 90% at center, rgba(232,178,90,0.18) 0%, transparent 75%);
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
.mascot-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(34,211,238,0.08);
  pointer-events: none;
  z-index: 0;
}
.orbit-1 {
  width: 100%; aspect-ratio: 1; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: orbit-spin 40s linear infinite;
  border-style: dashed;
  opacity: 0.35;
}
.orbit-2 {
  width: 120%; aspect-ratio: 1; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: orbit-spin-r 60s linear infinite;
  border-color: rgba(232,178,90,0.07);
  opacity: 0.35;
}
@keyframes orbit-spin   { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes orbit-spin-r { to { transform: translate(-50%, -50%) rotate(-360deg); } }

/* ═══ BUTTONS w/ glow ═══ */
.btn-glow {
  position: relative;
  overflow: visible;
  box-shadow: var(--glow-mixed);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.btn-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--grad-electric);
  z-index: -1;
  filter: blur(12px);
  opacity: 0.7;
  transition: opacity 0.3s, filter 0.3s;
}
.btn-glow:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.1);
}
.btn-glow:hover::before { opacity: 1; filter: blur(20px); }

.btn-accent {
  background: var(--grad-electric);
  color: #fff !important;
  border: none;
}

/* ═══ TRUST STRIP v2 ═══ */
.trust-strip-v2 {
  background: rgba(7,11,22,0.7);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(34,211,238,0.18);
  border-bottom: 1px solid rgba(34,211,238,0.18);
  box-shadow: 0 0 32px rgba(79,134,247,0.15) inset;
}
.trust-strip-v2 .ts-item strong { color: var(--electric-cyan); }

/* ═══ ENGINE FLOW DIAGRAM ═══ */
.engine-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 48px;
  font-family: var(--mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.ef-node {
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(79,134,247,0.12);
  border: 1px solid rgba(79,134,247,0.35);
  color: #cdd8ee;
  transition: all 0.3s;
}
.ef-node:hover { background: rgba(79,134,247,0.25); transform: translateY(-2px); }
.ef-core    { background: rgba(34,211,238,0.18); border-color: rgba(34,211,238,0.5); color: #cffafe; box-shadow: 0 0 20px rgba(34,211,238,0.3); }
.ef-scale   { background: rgba(232,178,90,0.18); border-color: rgba(232,178,90,0.5); color: #fdeccb; box-shadow: 0 0 20px rgba(232,178,90,0.3); }
.ef-result  { background: var(--grad-electric); border-color: transparent; color: #fff; font-weight: 700; box-shadow: var(--glow-mixed); }
.ef-arrow   { color: var(--electric-cyan); font-size: 1.2rem; opacity: 0.7; }

/* ═══ 5-ENGINE PRODUCT GRID ═══ */
.products-grid-5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 48px 0;
}
.engine-card {
  position: relative;
  background: linear-gradient(180deg, rgba(15,24,44,0.85), rgba(7,11,22,0.95));
  border: 1px solid rgba(79,134,247,0.22);
  border-radius: 22px;
  padding: 28px 24px 28px;
  overflow: hidden;
  transition: all 0.4s var(--ease);
  display: flex;
  flex-direction: column;
}
.engine-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(79,134,247,0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.engine-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, rgba(79,134,247,0.5) 50%, transparent 70%);
  -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;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.engine-card:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(79,134,247,0.55);
  box-shadow: 0 24px 60px rgba(79,134,247,0.3), 0 0 0 1px rgba(34,211,238,0.2);
}
.engine-card:hover::before, .engine-card:hover::after { opacity: 1; }

/* Engine-specific accent colors */
.engine-ai      { border-color: rgba(34,211,238,0.3); }
.engine-ai:hover { border-color: rgba(34,211,238,0.6); box-shadow: 0 24px 60px rgba(34,211,238,0.3); }
.engine-content { border-color: rgba(79,134,247,0.3); }
.engine-content:hover { border-color: rgba(79,134,247,0.6); box-shadow: 0 24px 60px rgba(79,134,247,0.3); }
.engine-seo     { border-color: rgba(240,171,252,0.3); }
.engine-seo:hover { border-color: rgba(240,171,252,0.6); box-shadow: 0 24px 60px rgba(240,171,252,0.3); }
.engine-scale   {
  border-color: rgba(232,178,90,0.4);
  background: linear-gradient(180deg, rgba(13,25,52,0.85), rgba(7,11,22,0.95));
}
.engine-scale:hover { border-color: rgba(232,178,90,0.7); box-shadow: 0 24px 60px rgba(232,178,90,0.4); }
.engine-scale::before {
  background: radial-gradient(circle at 50% 0%, rgba(232,178,90,0.22), transparent 60%);
  opacity: 0.4;
}
.engine-voice   { border-color: rgba(125,211,252,0.3); }
.engine-voice:hover { border-color: rgba(125,211,252,0.6); box-shadow: 0 24px 60px rgba(125,211,252,0.3); }

.ec-mascot {
  margin: -12px -12px 12px;
  height: 200px;
  overflow: hidden;
  border-radius: 16px;
  position: relative;
  background: radial-gradient(circle at center, rgba(79,134,247,0.18), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ec-mascot img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Real alpha cutout — no blend / no mask */
  filter: drop-shadow(0 8px 24px rgba(59,130,246,0.5)) drop-shadow(0 0 36px rgba(34,211,238,0.3));
  transition: transform 0.5s var(--ease);
}
.engine-card:hover .ec-mascot img { transform: scale(1.08) translateY(-4px); }

.ec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.ec-badge {
  font-size: 0.7rem;
  font-family: var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(79,134,247,0.18);
  color: #cdd8ee;
  border: 1px solid rgba(79,134,247,0.3);
}
.ec-badge-foundation { background: rgba(34,211,238,0.18); color: #cffafe; border-color: rgba(34,211,238,0.35); }
.ec-badge-demand     { background: rgba(79,134,247,0.18); color: #cdd8ee; border-color: rgba(79,134,247,0.35); }
.ec-badge-scale      { background: rgba(232,178,90,0.2); color: #fdeccb; border-color: rgba(232,178,90,0.5); box-shadow: 0 0 12px rgba(232,178,90,0.3); }
.ec-badge-specialty  { background: rgba(240,171,252,0.18); color: #fae8ff; border-color: rgba(240,171,252,0.35); }

.ec-price {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--electric-cyan);
  text-align: right;
  line-height: 1.25;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.ec-price .pr-mo { font-size: 1.15rem; font-weight: 700; color: var(--electric-cyan); }
.ec-price .pr-mo em { font-size: 0.7rem; font-style: normal; color: #94a3b8; font-weight: 500; }
.ec-price .pr-setup { font-size: 0.72rem; color: #94a3b8; font-weight: 500; letter-spacing: 0; }
.ec-price .pp-mo { color: #94a3b8; font-size: 0.75rem; }

.engine-card h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 8px 0 8px;
  color: #fff;
}
.engine-scale h3 {
  background: linear-gradient(90deg, #fff 0%, var(--electric-magenta) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ec-pitch { color: #aab8d6; margin-bottom: 16px; line-height: 1.55; font-size: 0.95rem; }
.ec-list { list-style: none; padding: 0; margin: 0 0 18px; }
.ec-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  color: #d4d4d8;
  font-size: 0.92rem;
  line-height: 1.5;
}
.ec-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 12px;
  background: var(--grad-electric);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/contain no-repeat;
}

.ec-footnote {
  font-size: 0.8rem;
  color: var(--electric-magenta);
  font-style: italic;
  margin-bottom: 14px;
  text-shadow: 0 0 8px rgba(232,178,90,0.3);
}

.engine-card .btn { margin-top: auto; }

/* ═══ STACK BUILDER V2 ═══ */
.stack-builder-v2 {
  position: relative;
  background: linear-gradient(180deg, rgba(7,11,22,0.92), rgba(12,20,36,0.92));
  border: 1px solid rgba(34,211,238,0.25);
  border-radius: 28px;
  padding: 40px 32px;
  margin-top: 64px;
  box-shadow: 0 0 60px rgba(79,134,247,0.2), 0 0 0 1px rgba(34,211,238,0.1);
}
.stack-builder-v2::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(34,211,238,0.4), transparent 30%, transparent 70%, rgba(232,178,90,0.4));
  z-index: -1;
  filter: blur(2px);
  opacity: 0.6;
}
.sb-head { text-align: center; margin-bottom: 32px; }
.sb-label {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(34,211,238,0.18);
  color: var(--electric-cyan);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  border: 1px solid rgba(34,211,238,0.35);
  text-shadow: 0 0 8px rgba(34,211,238,0.4);
}

/* Bundle quick-picks */
.sb-bundles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
  padding-top: 20px;   /* room for bundle tags + Full Stack ribbon */
  overflow: visible;
}
.sb-bundle {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px;
  background: rgba(79,134,247,0.08);
  border: 1px solid rgba(79,134,247,0.25);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  color: #eef2fb;
  font-family: var(--font-body);
}
.sb-bundle:hover {
  transform: translateY(-2px);
  background: rgba(79,134,247,0.18);
  border-color: rgba(79,134,247,0.55);
  box-shadow: 0 12px 32px rgba(79,134,247,0.25);
}
.sb-bundle.active {
  background: rgba(34,211,238,0.18);
  border-color: var(--electric-cyan);
  box-shadow: 0 0 24px rgba(34,211,238,0.4);
}
.sb-bundle-best {
  background: linear-gradient(135deg, rgba(232,178,90,0.18), rgba(79,134,247,0.18));
  border-color: rgba(232,178,90,0.4);
}
.sb-bundle-best:hover { border-color: rgba(232,178,90,0.7); }
.bdl-tag {
  position: absolute; top: -10px; right: 12px;
  font-size: 0.65rem; padding: 3px 10px;
  background: var(--grad-electric);
  color: #fff; border-radius: 999px;
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(232,178,90,0.5);
}
.bdl-name { font-weight: 700; font-size: 1rem; color: #fff; }
.bdl-list { font-size: 0.78rem; color: #aab8d6; }
.bdl-price { font-family: var(--mono); font-size: 0.85rem; color: var(--electric-cyan); margin-top: 4px; }

.sb-engines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.sb-engine {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(12,20,36,0.6);
  border: 1px solid rgba(79,134,247,0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  flex-wrap: wrap;
}
.sb-engine:hover { border-color: rgba(79,134,247,0.5); background: rgba(79,134,247,0.08); }
.sb-engine:has(input:checked) {
  background: rgba(34,211,238,0.1);
  border-color: rgba(34,211,238,0.5);
  box-shadow: 0 0 16px rgba(34,211,238,0.18);
}
.sb-engine input { display: none; }
.sb-check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(79,134,247,0.5);
  background: transparent;
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}
.sb-engine:has(input:checked) .sb-check {
  background: var(--grad-electric);
  border-color: transparent;
}
.sb-engine:has(input:checked) .sb-check::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sb-name { font-weight: 600; flex: 1; display: flex; align-items: center; gap: 8px; }
.sb-tag {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34,211,238,0.18);
  color: var(--electric-cyan);
  border: 1px solid rgba(34,211,238,0.3);
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sb-tag-scale { background: rgba(232,178,90,0.2); color: var(--electric-magenta); border-color: rgba(232,178,90,0.4); }
.sb-cost { font-family: var(--mono); font-size: 0.85rem; color: #94a3b8; }

.sb-tier-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.sb-tier-step {
  padding: 6px 12px;
  background: rgba(79,134,247,0.08);
  border: 1px solid rgba(79,134,247,0.22);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #aab8d6;
  transition: all 0.25s;
}
.sb-tier-step.active {
  background: var(--grad-electric);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 16px rgba(79,134,247,0.5);
  font-weight: 600;
}
.sb-tier-step.passed {
  background: rgba(34,211,238,0.15);
  border-color: rgba(34,211,238,0.4);
  color: var(--electric-cyan);
}

.sb-totals { margin: 20px 0; }
.sb-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-family: var(--mono);
}
.sb-row-strike { color: #8a99b8; text-decoration: line-through; opacity: 0.6; font-size: 0.9rem; }
.sb-row-discount { color: var(--electric-magenta); font-weight: 600; }
.sb-row-total {
  border-top: 1px solid rgba(79,134,247,0.25);
  padding-top: 16px; margin-top: 8px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}
.sb-total-num {
  background: var(--grad-electric);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.3rem;
}

.sb-cta { width: 100%; margin-top: 16px; }

/* ═══ ONSITE V2 ═══ */
.section-onsite { background: transparent !important; }
.onsite-band-v2 {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
  padding: 48px 0;
}
.onsite-mascot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}
.onsite-mascot img {
  width: 100%;
  max-width: 460px;
  position: relative;
  z-index: 2;
  /* Real alpha cutout now — just glow drop-shadows, no blend / no mask */
  filter:
    drop-shadow(0 0 40px rgba(56,189,248,0.5))
    drop-shadow(0 0 90px rgba(59,130,246,0.4))
    drop-shadow(0 0 180px rgba(34,211,238,0.22));
  animation: mascot-float 7s ease-in-out infinite;
}

/* ═══ PROCESS TIMELINE V2 ═══ */
.timeline-v2 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 48px 0;
}
.timeline-v2 .tl-line {
  position: absolute;
  top: 22px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg, var(--electric-cyan), var(--electric-purple), var(--electric-magenta));
  box-shadow: 0 0 12px rgba(79,134,247,0.5);
  z-index: 0;
}
.tl-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.tl-node {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-electric);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 0.85rem;
  color: #fff;
  margin: 0 auto 16px;
  position: relative;
  box-shadow: 0 0 24px rgba(79,134,247,0.6), 0 0 0 4px rgba(7,11,22,1);
}
.tl-card {
  background: rgba(12,20,36,0.7);
  border: 1px solid rgba(79,134,247,0.22);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition: all 0.3s var(--ease);
}
.tl-card p { flex: 1; }
.tl-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34,211,238,0.5);
  box-shadow: 0 16px 40px rgba(79,134,247,0.25);
}
.tl-card h3 { font-size: 1.1rem; margin-bottom: 6px; color: #fff; }
.tl-card p { color: #aab8d6; font-size: 0.9rem; line-height: 1.5; }

/* ═══ SECTION HEADERS ═══ */
.section { padding: 80px 0; position: relative; }
.section-products { padding-top: 40px; }
.section-alt { background: transparent !important; }
.overline {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--electric-cyan);
  text-shadow: 0 0 12px rgba(34,211,238,0.4);
  margin-bottom: 12px;
}
.section h2, h2 {
  font-family: var(--font);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 12px;
}
.h2-dim {
  background: linear-gradient(135deg, #3b82f6, #22d3ee);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(79,134,247,0.4));
}
.section-sub { color: #aab8d6; font-size: 1.05rem; max-width: 600px; margin: 0 auto; }
.center { text-align: center; }

/* ═══ FAQ ═══ */
.faq-item {
  background: rgba(12,20,36,0.6);
  border: 1px solid rgba(79,134,247,0.18);
  border-radius: 14px;
  margin-bottom: 8px;
  transition: all 0.25s;
}
.faq-item:hover { border-color: rgba(79,134,247,0.4); }
.faq-q {
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  background: transparent;
  border: none;
  color: #eef2fb;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
}

/* ═══ CTA / FORM ═══ */
.section-cta {
  padding-bottom: 100px;
}
.form input, .form select, .form textarea {
  background: rgba(12,20,36,0.6);
  border: 1px solid rgba(79,134,247,0.25);
  color: #eef2fb;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--font-body);
  width: 100%;
  transition: all 0.2s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--electric-cyan);
  box-shadow: 0 0 0 3px rgba(34,211,238,0.18);
}
.form input::placeholder, .form textarea::placeholder { color: #8a99b8; }
.form-section-label {
  margin: 22px 0 10px;
  font-size: 0.72rem;
  font-family: var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #cdd8ee;
}
.form-section-hint {
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.78rem;
  color: #8a99b8;
  margin-left: 8px;
}
/* Date input — match the rest of the form */
.form input[type="date"] {
  color-scheme: dark;
  appearance: none;
  font-family: var(--font-body);
  color: #eef2fb;
}
.form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(0.2) saturate(2) hue-rotate(170deg);
  cursor: pointer;
}

/* ═══ SCROLL REVEAL ═══ */
[data-r] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-r].vis {
  opacity: 1;
  transform: translateY(0);
}
[data-r][data-d="1"] { transition-delay: 0.1s; }
[data-r][data-d="2"] { transition-delay: 0.2s; }
[data-r][data-d="3"] { transition-delay: 0.3s; }
[data-r][data-d="4"] { transition-delay: 0.4s; }

/* ═══ SCROLL PROGRESS ═══ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad-electric);
  box-shadow: 0 0 16px rgba(79,134,247,0.6);
  z-index: 1000;
  transition: width 0.1s linear;
}

/* ═══ FOOTER ═══ */
.footer {
  background: rgba(7,11,22,0.85);
  border-top: 1px solid rgba(79,134,247,0.18);
  padding: 64px 0 32px;
  position: relative;
  z-index: 2;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  .hero-layout { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .hero-engines { justify-content: center; }
  .hero-cta { justify-content: center; }
  .hero-mascot { min-height: 380px; }
  .onsite-band-v2 { grid-template-columns: 1fr; text-align: center; }
  .timeline-v2 { grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
  .timeline-v2 .tl-line { display: none; }
  .timeline-v2 .tl-step { height: 100%; }
  .timeline-v2 .tl-card { min-height: 220px; }
  .engine-flow { font-size: 0.75rem; gap: 8px; }
  .ef-arrow { font-size: 1rem; }
}
@media (max-width: 600px) {
  .timeline-v2 { grid-template-columns: 1fr; }
  .mascot-img { max-width: 320px; }
  .hero-v2 { padding: 100px 0 60px; min-height: auto; }
  h1 { font-size: clamp(2.4rem, 9vw, 3.8rem); }
  .cosmic-blob { filter: blur(60px); }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mascot-float, .cosmic-blob, .cosmic-grid, .hero-stars, .mascot-orbit { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   AI REVENUE SCALE — page-specific styles
   ════════════════════════════════════════════════════════════════════ */

.psub-hero-v2 {
  padding-top: 140px;
  padding-bottom: 60px;
}
.psub-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--electric-cyan);
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 32px;
  opacity: 0.8;
  transition: all 0.2s;
}
.psub-back:hover { opacity: 1; transform: translateX(-4px); text-shadow: 0 0 12px rgba(34,211,238,0.5); }

.psub-tagline {
  font-size: 1.4rem;
  color: #eef2fb;
  margin: 16px 0 12px;
  font-weight: 600;
}
.psub-tagline strong {
  background: var(--grad-electric);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Warning callout */
.rs-warning {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(232,178,90,0.12);
  border: 1px solid rgba(232,178,90,0.4);
  border-radius: 12px;
  margin: 20px 0;
  box-shadow: 0 0 24px rgba(232,178,90,0.18);
  animation: rs-pulse 3s ease-in-out infinite;
}
@keyframes rs-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(232,178,90,0.18); }
  50%      { box-shadow: 0 0 40px rgba(232,178,90,0.45); }
}
.rs-warning-icon { font-size: 1.5rem; filter: drop-shadow(0 0 8px rgba(232,178,90,0.6)); }
.rs-warning-text { color: #fdeccb; font-size: 0.95rem; }
.rs-warning-text strong { color: var(--electric-magenta); text-shadow: 0 0 8px rgba(232,178,90,0.4); }

/* Impact band */
.section-impact {
  background: linear-gradient(180deg, transparent, rgba(34,211,238,0.04), transparent);
  padding: 80px 0;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.impact-stat {
  text-align: center;
  padding: 32px 24px;
  background: rgba(12,20,36,0.6);
  border: 1px solid rgba(34,211,238,0.25);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease);
}
.impact-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(34,211,238,0.2), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
}
.impact-stat:hover {
  border-color: rgba(34,211,238,0.5);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34,211,238,0.25);
}
.impact-stat:hover::before { opacity: 1; }
.impact-num {
  font-family: var(--font);
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 800;
  background: var(--grad-electric);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 24px rgba(79,134,247,0.4));
}
.impact-label {
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.05rem;
  color: #eef2fb;
  margin-bottom: 6px;
}
.impact-detail {
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.5;
}

/* Feature blocks */
.rs-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.rs-feat {
  position: relative;
  padding: 28px 24px;
  background: rgba(12,20,36,0.7);
  border: 1px solid rgba(79,134,247,0.22);
  border-radius: 18px;
  transition: all 0.3s var(--ease);
}
.rs-feat:hover {
  transform: translateY(-4px);
  border-color: rgba(79,134,247,0.5);
  box-shadow: 0 16px 40px rgba(79,134,247,0.25);
}
.rs-feat-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--electric-cyan);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: rgba(34,211,238,0.12);
  border-radius: 999px;
  border: 1px solid rgba(34,211,238,0.3);
}
.rs-feat h3 { font-size: 1.25rem; margin-bottom: 8px; color: #fff; }
.rs-feat p { color: #aab8d6; font-size: 0.95rem; line-height: 1.55; }

/* Calculator */
.section-calc { padding: 80px 0; }
.calc-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 36px;
  background: linear-gradient(180deg, rgba(7,11,22,0.92), rgba(12,20,36,0.92));
  border: 1px solid rgba(34,211,238,0.3);
  border-radius: 24px;
  box-shadow: 0 0 60px rgba(79,134,247,0.18);
  position: relative;
  overflow: hidden;
}
.calc-panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(34,211,238,0.4), transparent 30%, transparent 70%, rgba(232,178,90,0.4));
  z-index: -1;
  opacity: 0.5;
}
.calc-slider-wrap { display: flex; flex-direction: column; justify-content: center; }
.calc-label {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--electric-cyan);
  margin-bottom: 12px;
}
.calc-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 24px;
}
.calc-currency { font-size: 1.6rem; color: var(--electric-cyan); font-weight: 600; }
.calc-value {
  font-family: var(--font);
  font-size: clamp(2.6rem, 7vw, 4rem);
  font-weight: 800;
  background: var(--grad-electric);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.calc-mo { color: #94a3b8; font-size: 1.1rem; font-family: var(--mono); }

.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee 0%, #4f86f7 30%, #e8b25a 60%, rgba(79,134,247,0.18) 60%);
  outline: none;
  cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--electric-cyan);
  box-shadow: 0 0 24px rgba(34,211,238,0.6), 0 0 0 6px rgba(34,211,238,0.18);
  cursor: pointer;
  transition: all 0.15s;
}
.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 0 32px rgba(34,211,238,0.8), 0 0 0 8px rgba(34,211,238,0.25); }
.calc-slider::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--electric-cyan);
  box-shadow: 0 0 24px rgba(34,211,238,0.6);
  cursor: pointer;
}
.calc-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: #8a99b8;
  letter-spacing: 0.08em;
}

.calc-output { }
.calc-tier {
  text-align: center;
  padding: 16px;
  border-radius: 14px;
  margin-bottom: 16px;
  background: rgba(34,211,238,0.12);
  border: 1px solid rgba(34,211,238,0.35);
  transition: all 0.3s;
}
.calc-tier.tier-growth { background: rgba(79,134,247,0.12); border-color: rgba(79,134,247,0.4); }
.calc-tier.tier-scale  { background: rgba(232,178,90,0.12); border-color: rgba(232,178,90,0.4); }
.calc-tier.tier-ent    { background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(232,178,90,0.18)); border-color: rgba(255,255,255,0.3); }
.ct-label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #aab8d6; }
.ct-name {
  font-family: var(--font);
  font-size: 1.6rem;
  font-weight: 800;
  background: var(--grad-electric);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 4px 0;
}
.ct-fee { color: #eef2fb; font-size: 0.95rem; }
.ct-fee strong { color: var(--electric-cyan); font-family: var(--mono); }

.calc-projection { font-family: var(--mono); }
.cp-row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  font-size: 0.9rem;
  color: #aab8d6;
}
.cp-num { color: #fff; }
.cp-row-divider { border-top: 1px solid rgba(79,134,247,0.25); margin-top: 6px; padding-top: 12px; font-weight: 600; }
.cp-row-lift { color: var(--electric-cyan); }
.cp-row-lift .cp-num { color: var(--electric-cyan); }
.cp-row-profit {
  font-weight: 700;
  padding-top: 12px;
  border-top: 1px solid rgba(34,211,238,0.3);
  margin-top: 6px;
  font-size: 1rem;
}
.cp-row-profit .cp-num { font-size: 1.1rem; }

.calc-disclaimer {
  font-size: 0.75rem;
  color: #8a99b8;
  text-align: center;
  margin-top: 16px;
  line-height: 1.5;
}

@media (max-width: 800px) {
  .calc-panel { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}

/* Tier cards */
.rs-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 48px 0;
  padding-top: 22px;   /* room for the "Most common" badge at top:-12px */
  overflow: visible;
}
.rs-tier {
  position: relative;
  padding: 32px 28px;
  background: rgba(12,20,36,0.7);
  border: 1px solid rgba(79,134,247,0.25);
  border-radius: 20px;
  transition: all 0.3s var(--ease);
}
.rs-tier:hover { transform: translateY(-6px); border-color: rgba(79,134,247,0.5); box-shadow: 0 16px 48px rgba(79,134,247,0.3); }
.rs-tier-featured {
  background: linear-gradient(180deg, rgba(13,25,52,0.85), rgba(12,20,36,0.92));
  border-color: rgba(232,178,90,0.45);
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(232,178,90,0.25);
}
.rs-tier-featured:hover { transform: translateY(-12px); box-shadow: 0 32px 80px rgba(232,178,90,0.4); }
.rs-tier-best {
  position: absolute; top: -12px; right: 20px;
  padding: 4px 12px;
  background: var(--grad-electric);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(232,178,90,0.5);
}
.rs-tier-head { margin-bottom: 16px; }
.rs-tier-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34,211,238,0.12);
  color: var(--electric-cyan);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.rs-tier-head h3 { font-size: 1.6rem; color: #fff; }
.rs-tier-spend {
  color: #aab8d6;
  font-size: 0.95rem;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px dashed rgba(79,134,247,0.25);
}
.rs-tier-spend strong { color: #eef2fb; }
.rs-tier-fee { margin-bottom: 20px; }
.rs-tier-fee strong {
  font-family: var(--font);
  font-size: 2.4rem;
  font-weight: 800;
  background: var(--grad-electric);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rs-tier-fee span { color: #94a3b8; font-size: 0.9rem; margin-left: 6px; }
.rs-tier-list {
  list-style: none; padding: 0;
}
.rs-tier-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  color: #d4d4d8;
  font-size: 0.92rem;
  line-height: 1.5;
}
.rs-tier-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 12px;
  background: var(--grad-electric);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/contain no-repeat;
}
.rs-tier-note { text-align: center; color: #94a3b8; margin-top: 20px; font-size: 0.9rem; }
.rs-tier-note a { color: var(--electric-cyan); text-decoration: underline; }

/* Stack callout */
.section-stack { padding: 80px 0; }
.stack-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 36px;
  background: linear-gradient(135deg, rgba(34,211,238,0.1), rgba(232,178,90,0.1));
  border: 1px solid rgba(232,178,90,0.3);
  border-radius: 24px;
  box-shadow: 0 0 60px rgba(79,134,247,0.2);
}
.sc-icon {
  width: 80px; height: 80px;
  border-radius: 18px;
  background: rgba(12,20,36,0.8);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 24px rgba(79,134,247,0.4));
}
.sc-text h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: #fff;
}
.sc-text p { color: #aab8d6; margin-bottom: 8px; line-height: 1.55; }
.sc-text p strong { color: var(--electric-cyan); }
.sc-line {
  font-size: 1.05rem;
  color: #eef2fb !important;
  margin: 12px 0 16px !important;
}
.sc-line strong { color: var(--electric-magenta) !important; text-shadow: 0 0 12px rgba(232,178,90,0.3); }

@media (max-width: 700px) {
  .stack-callout { grid-template-columns: 1fr; text-align: center; }
  .sc-icon { margin: 0 auto; }
}

/* Related products cards */
.rp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.rp-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(12,20,36,0.7);
  border: 1px solid rgba(79,134,247,0.22);
  border-radius: 16px;
  transition: all 0.3s var(--ease);
}
.rp-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79,134,247,0.5);
  box-shadow: 0 16px 40px rgba(79,134,247,0.25);
}
.rp-icon { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.rp-body h4 { font-size: 1.05rem; color: #fff; margin-bottom: 4px; }
.rp-body p { font-size: 0.85rem; color: #94a3b8; line-height: 1.4; }
.rp-arrow { color: var(--electric-cyan); margin-left: auto; font-size: 1.3rem; }

/* Section header alignment on sub-pages */
.section-header { margin-bottom: 24px; }
.section-header:not(.center) { text-align: left; }


/* ════════════════════════════════════════════════════════════════════
   PER-ENGINE ACCESSORY ICONS — distinctive corner accents per product
   ════════════════════════════════════════════════════════════════════ */

.engine-card .ec-mascot::after {
  content: '';
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(7,11,22,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 24px rgba(79,134,247,0.4);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 32px 32px;
  transition: all 0.3s var(--ease);
}
.engine-card:hover .ec-mascot::after {
  transform: scale(1.1) rotate(-4deg);
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 32px rgba(79,134,247,0.6);
}

/* AI Suite — phone + headset */
.engine-ai .ec-mascot::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><path d='M16 4a8 8 0 00-8 8v4H6v6a2 2 0 002 2h2v-10a6 6 0 1112 0v10h2a2 2 0 002-2v-6h-2v-4a8 8 0 00-8-8z' fill='%2322d3ee'/><path d='M9 23v3a3 3 0 003 3h1v-2h-1a1 1 0 01-1-1v-3H9z' fill='%2322d3ee'/></svg>");
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 24px rgba(34,211,238,0.6);
}

/* Content Engine — grid of posts */
.engine-content .ec-mascot::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><rect x='4' y='4' width='10' height='10' rx='2' fill='%23a855f7'/><rect x='18' y='4' width='10' height='10' rx='2' fill='%23f0abfc'/><rect x='4' y='18' width='10' height='10' rx='2' fill='%23f0abfc'/><rect x='18' y='18' width='10' height='10' rx='2' fill='%23a855f7'/></svg>");
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 24px rgba(79,134,247,0.6);
}

/* SEO Engine — chart up + magnifying glass */
.engine-seo .ec-mascot::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><circle cx='13' cy='13' r='8' stroke='%23f0abfc' stroke-width='2.5'/><path d='M19 19l8 8' stroke='%23f0abfc' stroke-width='2.5' stroke-linecap='round'/><path d='M9 14l3-3 3 3 4-5' stroke='%2322d3ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 24px rgba(240,171,252,0.6);
}

/* AI Revenue Scale — lightning + bar chart climbing */
.engine-scale .ec-mascot::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><path d='M16 2L7 18h6l-3 12 12-16h-6l3-12z' fill='%23ff2bd1'/></svg>");
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 32px rgba(232,178,90,0.8);
  animation: scale-zap 3s ease-in-out infinite;
}
@keyframes scale-zap {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 32px rgba(232,178,90,0.8); }
  50%      { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 48px rgba(232,178,90,1), 0 0 80px rgba(232,178,90,0.4); }
}

/* Voice → Report — microphone + waveform */
.engine-voice .ec-mascot::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><rect x='13' y='4' width='6' height='14' rx='3' fill='%23c084fc'/><path d='M8 14a8 8 0 0016 0' stroke='%23c084fc' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M16 22v6M12 28h8' stroke='%23c084fc' stroke-width='2' stroke-linecap='round'/></svg>");
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 24px rgba(125,211,252,0.6);
}

/* Add subtle floating animation per-card to mascot images */
.engine-card .ec-mascot img {
  animation: card-mascot-float 8s ease-in-out infinite;
}
.engine-card:nth-child(2) .ec-mascot img { animation-delay: -2s; }
.engine-card:nth-child(3) .ec-mascot img { animation-delay: -4s; }
.engine-card:nth-child(4) .ec-mascot img { animation-delay: -6s; }
.engine-card:nth-child(5) .ec-mascot img { animation-delay: -1s; }

@keyframes card-mascot-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}


/* ════════════════════════════════════════════════════════════════════
   3D DEPTH — Three.js scene + CSS perspective + translateZ layers
   ════════════════════════════════════════════════════════════════════ */

/* Three.js floating geometry scene — atmospheric background, not focal */
.three-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(0.5px);
}
.three-scene canvas { display: block; width: 100% !important; height: 100% !important; }

.hero-v2 .hero-copy { z-index: 4; }
.hero-v2 .hero-mascot { z-index: 3; }

/* ═══ 3D depth on product cards ═══ */
.products-grid-5 {
  perspective: 1400px;
  transform-style: preserve-3d;
}
.engine-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.engine-card .ec-mascot {
  transform: translateZ(20px);
  transition: transform 0.5s var(--ease);
}
.engine-card .ec-head {
  transform: translateZ(40px);
  transition: transform 0.5s var(--ease);
}
.engine-card h3 {
  transform: translateZ(60px);
  transition: transform 0.5s var(--ease);
}
.engine-card .ec-pitch {
  transform: translateZ(30px);
  transition: transform 0.5s var(--ease);
}
.engine-card .ec-list,
.engine-card .btn {
  transform: translateZ(20px);
  transition: transform 0.5s var(--ease);
}
.engine-card:hover h3      { transform: translateZ(80px); }
.engine-card:hover .ec-mascot   { transform: translateZ(50px); }
.engine-card:hover .ec-head     { transform: translateZ(60px); }
.engine-card:hover .ec-pitch    { transform: translateZ(40px); }
.engine-card:hover .ec-list,
.engine-card:hover .btn         { transform: translateZ(30px); }

/* Deeper shadow on hover for floating effect */
.engine-card {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.engine-card:hover {
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)) drop-shadow(0 0 32px rgba(79,134,247,0.35));
}

/* ═══ 3D floating geometric shapes scattered across page ═══ */
.geo-shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  transform-style: preserve-3d;
}
.geo-shape svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 24px currentColor);
}
.geo-cube {
  width: 80px; height: 80px;
  color: #22d3ee;
  animation: geo-spin-1 18s linear infinite, geo-bob 7s ease-in-out infinite;
}
.geo-pyramid {
  width: 100px; height: 100px;
  color: #e8b25a;
  animation: geo-spin-2 22s linear infinite, geo-bob 9s ease-in-out infinite;
}
.geo-crystal {
  width: 90px; height: 90px;
  color: #4f86f7;
  animation: geo-spin-3 28s linear infinite, geo-bob 11s ease-in-out infinite;
}
@keyframes geo-spin-1 { to { transform: rotateX(360deg) rotateY(720deg); } }
@keyframes geo-spin-2 { to { transform: rotateY(-720deg) rotateZ(360deg); } }
@keyframes geo-spin-3 { to { transform: rotateX(720deg) rotateZ(-360deg); } }
@keyframes geo-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -24px; }
}

/* ═══ Stack builder 3D bundle medallions ═══ */
.sb-bundles {
  perspective: 1000px;
  transform-style: preserve-3d;
}
.sb-bundle {
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease), background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.sb-bundle:hover {
  transform: translateY(-4px) rotateX(6deg) translateZ(20px);
}
.sb-bundle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 50%);
  pointer-events: none;
  transition: opacity 0.3s;
}

/* ═══ Engine flow nodes — 3D bobbing ═══ */
.engine-flow { perspective: 600px; }
.ef-node {
  transform-style: preserve-3d;
  animation: ef-bob 4s ease-in-out infinite;
}
.ef-node:nth-child(1) { animation-delay: -0s; }
.ef-node:nth-child(3) { animation-delay: -1s; }
.ef-node:nth-child(5) { animation-delay: -2s; }
.ef-node:nth-child(7) { animation-delay: -3s; }
.ef-node:nth-child(9) { animation-delay: -1.5s; }
@keyframes ef-bob {
  0%, 100% { transform: translateZ(0) rotateY(0deg); }
  50%      { transform: translateZ(12px) rotateY(8deg); }
}

/* ═══ Hero mascot floats in 3D space ═══ */
.hero-mascot {
  perspective: 1200px;
  transform-style: preserve-3d;
}
.mascot-img {
  transform: translateZ(50px);
}

/* ═══ Buttons get 3D extrude on hover ═══ */
.btn-glow {
  transform-style: preserve-3d;
}
.btn-glow:hover {
  transform: translateY(-2px) translateZ(10px) scale(1.02);
}

/* ═══ Impact stats — 3D rise ═══ */
.impact-stat {
  transform-style: preserve-3d;
}
.impact-stat:hover .impact-num { transform: translateZ(20px) scale(1.05); transition: transform 0.4s var(--ease); }
.impact-stat:hover .impact-label { transform: translateZ(10px); }

/* ═══ Tier cards 3D ═══ */
.rs-tier {
  transform-style: preserve-3d;
  perspective: 800px;
}
.rs-tier h3 { transition: transform 0.4s var(--ease); }
.rs-tier:hover h3 { transform: translateZ(20px); }
.rs-tier-fee strong { transition: transform 0.4s var(--ease); display: inline-block; }
.rs-tier:hover .rs-tier-fee strong { transform: translateZ(30px); }

/* ═══ Reduced motion still respects ═══ */
@media (prefers-reduced-motion: reduce) {
  .geo-cube, .geo-pyramid, .geo-crystal, .ef-node { animation: none !important; }
  .three-scene { display: none; }
}

/* ═══ Mobile: kill heavy 3D, keep flat polish ═══ */
@media (max-width: 700px) {
  .three-scene { opacity: 0.6; }
  .products-grid-5 { perspective: none; }
  .engine-card:hover { transform: translateY(-4px) scale(1.01); filter: drop-shadow(0 20px 30px rgba(0,0,0,0.4)); }
  .engine-card:hover h3, .engine-card:hover .ec-mascot, .engine-card:hover .ec-head, .engine-card:hover .ec-pitch, .engine-card:hover .ec-list, .engine-card:hover .btn {
    transform: none;
  }
  .geo-shape { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   3D LOGO + 3D RIBBON
   ════════════════════════════════════════════════════════════════════ */

/* 3D Nav logo wordmark */
.logo {
  perspective: 600px;
  transform-style: preserve-3d;
}
.logo-icon-img {
  transform-style: preserve-3d;
  animation: logo-icon-spin 8s ease-in-out infinite;
}
@keyframes logo-icon-spin {
  0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
  25%      { transform: rotateY(20deg) rotateX(-8deg); }
  50%      { transform: rotateY(0deg)  rotateX(0deg); }
  75%      { transform: rotateY(-20deg) rotateX(8deg); }
}
.logo-wordmark {
  transform-style: preserve-3d;
  display: inline-block;
  animation: logo-word-tilt 10s ease-in-out infinite;
  transform-origin: center center;
}
@keyframes logo-word-tilt {
  0%, 100% { transform: rotateY(0deg) rotateZ(0deg); }
  50%      { transform: rotateY(8deg) rotateZ(0deg); }
}
.logo:hover .logo-wordmark { animation-duration: 2s; }
.logo-ai {
  display: inline-block;
  color: #22d3ee;
  animation: logo-ai-pulse 2.6s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(34,211,238,0.55);
}
@keyframes logo-ai-pulse {
  0%, 100% { text-shadow: 0 0 12px rgba(34,211,238,0.55), 0 0 24px rgba(34,211,238,0.3); transform: translateZ(0); }
  50%      { text-shadow: 0 0 22px rgba(34,211,238,0.9),  0 0 44px rgba(59,130,246,0.45); transform: translateZ(6px); }
}

/* Hero brand wordmark — also gets the 3D treatment but more dramatic */
.hero-brand {
  perspective: 800px;
  transform-style: preserve-3d;
}
.hero-brand .brand-tracked {
  transform-style: preserve-3d;
  animation: hero-brand-tilt 7s ease-in-out infinite;
  display: inline-block;
  filter: drop-shadow(0 0 18px rgba(79,134,247,0.4));
}
@keyframes hero-brand-tilt {
  0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
  50%      { transform: rotateY(12deg) rotateX(-3deg); }
}
.brand-ai {
  background: linear-gradient(90deg, #3b82f6, #22d3ee);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(34,211,238,0.55));
  animation: brand-ai-glow 3s ease-in-out infinite;
}
@keyframes brand-ai-glow {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(34,211,238,0.55)); }
  50%      { filter: drop-shadow(0 0 32px rgba(56,189,248,0.8)); }
}

/* 3D Rotating Ribbon for Full Stack bundle */
.sb-bundle-best {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.sb-ribbon {
  position: absolute;
  top: -16px;
  right: -28px;
  width: 160px;
  height: 32px;
  transform-style: preserve-3d;
  perspective: 400px;
  pointer-events: none;
  z-index: 5;
}
.sb-ribbon-track {
  position: absolute;
  inset: 0;
  background: var(--grad-electric);
  border-radius: 6px;
  box-shadow:
    0 4px 16px rgba(232,178,90,0.5),
    0 0 24px rgba(79,134,247,0.6);
  transform: rotate(38deg);
  transform-style: preserve-3d;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.25);
}
.sb-ribbon-track::before,
.sb-ribbon-track::after {
  content: '';
  position: absolute;
  width: 16px; height: 100%;
  top: 0;
  background: inherit;
  filter: brightness(0.7);
}
.sb-ribbon-track::before { left: -10px;  clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.sb-ribbon-track::after  { right: -10px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sb-ribbon-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #fff;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  animation: ribbon-scroll 8s linear infinite;
}
.sb-ribbon-text span { padding: 0 18px; flex-shrink: 0; }
@keyframes ribbon-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Highlight the Full Stack bundle even more in 3D */
.sb-bundle-best {
  transform-style: preserve-3d;
  animation: bundle-best-pulse 4s ease-in-out infinite;
}
@keyframes bundle-best-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(232,178,90,0.4), 0 0 24px rgba(232,178,90,0.25); }
  50%      { box-shadow: 0 0 0 1px rgba(232,178,90,0.7), 0 0 48px rgba(232,178,90,0.5), 0 0 80px rgba(79,134,247,0.3); }
}
.sb-bundle-best:hover {
  animation-play-state: paused;
  transform: translateY(-6px) rotateX(8deg) translateZ(30px);
  box-shadow: 0 24px 60px rgba(232,178,90,0.5), 0 0 80px rgba(79,134,247,0.4);
}
/* Hide the old bdl-tag since we have a real ribbon now */
.sb-bundle-best .bdl-tag { display: none; }


/* ════════════════════════════════════════════════════════════════════
   NARRATIVE ENGINE STACK — wide hero rows + section dividers
   ════════════════════════════════════════════════════════════════════ */

.engines-stack {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin: 48px 0;
}

/* Section dividers between tiers */
.engines-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 8px 0 -8px;
  padding: 0 16px;
}
.ed-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,134,247,0.4) 50%, transparent);
}
.ed-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--electric-cyan);
  text-shadow: 0 0 12px rgba(34,211,238,0.4);
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(34,211,238,0.08);
  border: 1px solid rgba(34,211,238,0.25);
}
.engines-divider-scale .ed-line {
  background: linear-gradient(90deg, transparent, rgba(232,178,90,0.45) 50%, transparent);
}
.ed-label-scale {
  color: var(--electric-magenta);
  text-shadow: 0 0 12px rgba(232,178,90,0.5);
  background: rgba(232,178,90,0.1);
  border-color: rgba(232,178,90,0.4);
}

/* WIDE HERO CARDS — Foundation + Scale tiers */
.engine-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: center;
  padding: 36px;
  background: linear-gradient(135deg, rgba(15,24,44,0.9), rgba(7,11,22,0.95));
  border: 1px solid rgba(79,134,247,0.25);
  border-radius: 28px;
  overflow: hidden;
  transition: all 0.4s var(--ease);
  transform-style: preserve-3d;
}
.engine-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(79,134,247,0.18), transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(34,211,238,0.12), transparent 70%);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}
.engine-hero::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 28px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(79,134,247,0.5), transparent 35%, transparent 65%, rgba(34,211,238,0.5));
  -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;
  opacity: 0.6;
  pointer-events: none;
}
.engine-hero > * { position: relative; z-index: 1; }
.engine-hero:hover {
  transform: translateY(-4px);
  border-color: rgba(79,134,247,0.5);
  box-shadow: 0 32px 80px rgba(79,134,247,0.3);
}

/* Foundation tier — cyan dominant */
.engine-hero-foundation {
  background: linear-gradient(135deg, rgba(8,32,40,0.9), rgba(7,11,22,0.95));
  border-color: rgba(34,211,238,0.35);
}
.engine-hero-foundation::after {
  background: linear-gradient(135deg, rgba(34,211,238,0.6), transparent 35%, transparent 65%, rgba(79,134,247,0.4));
}
.engine-hero-foundation:hover {
  border-color: rgba(34,211,238,0.6);
  box-shadow: 0 32px 80px rgba(34,211,238,0.3);
}

/* Scale tier — magenta featured with stronger glow */
.engine-hero-scale {
  background: linear-gradient(135deg, rgba(13,25,52,0.9), rgba(7,11,22,0.95));
  border-color: rgba(232,178,90,0.5);
  box-shadow: 0 0 60px rgba(232,178,90,0.2), inset 0 0 60px rgba(232,178,90,0.06);
  animation: hero-scale-pulse 5s ease-in-out infinite;
}
@keyframes hero-scale-pulse {
  0%, 100% { box-shadow: 0 0 60px rgba(232,178,90,0.2), inset 0 0 60px rgba(232,178,90,0.06); }
  50%      { box-shadow: 0 0 100px rgba(232,178,90,0.45), inset 0 0 80px rgba(232,178,90,0.12); }
}
.engine-hero-scale::after {
  background: linear-gradient(135deg, rgba(232,178,90,0.7), transparent 30%, transparent 70%, rgba(34,211,238,0.5));
  opacity: 0.8;
}
.engine-hero-scale:hover {
  border-color: rgba(232,178,90,0.8);
  box-shadow: 0 32px 100px rgba(232,178,90,0.5);
}

/* Hero card mascot (left side) */
.eh-mascot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 360px;
  perspective: 1000px;
}
.eh-mascot img {
  width: 100%;
  max-width: 380px;
  height: auto;
  position: relative;
  z-index: 2;
  /* Real alpha cutout — no blend / no mask */
  filter:
    drop-shadow(0 0 36px rgba(59,130,246,0.5))
    drop-shadow(0 0 80px rgba(34,211,238,0.32))
    drop-shadow(0 0 160px rgba(56,189,248,0.22));
  animation: mascot-float 7s ease-in-out infinite;
}
.engine-hero-foundation .eh-mascot img {
  filter:
    drop-shadow(0 0 36px rgba(34,211,238,0.55))
    drop-shadow(0 0 80px rgba(79,134,247,0.4))
    drop-shadow(0 0 160px rgba(232,178,90,0.2));
  animation-duration: 8s;
}
.engine-hero-scale .eh-mascot img {
  filter:
    drop-shadow(0 0 36px rgba(232,178,90,0.6))
    drop-shadow(0 0 80px rgba(79,134,247,0.45))
    drop-shadow(0 0 160px rgba(56,189,248,0.3));
  animation-duration: 6s;
}

/* Hero card content (right side) */
.eh-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.eh-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.eh-head .ec-price {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--electric-cyan);
  text-align: right;
  white-space: nowrap;
}
.engine-hero-scale .eh-head .ec-price { color: var(--electric-magenta); }
.engine-hero h3 {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 800;
  margin: 4px 0;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #fff, #cdd8ee);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.engine-hero-scale h3 {
  background: linear-gradient(90deg, #fff, var(--electric-magenta));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(232,178,90,0.35));
}
.eh-pitch {
  color: #aab8d6;
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 4px;
}
.eh-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 20px;
  margin-bottom: 8px;
}
.eh-footnote {
  font-size: 0.85rem;
  color: var(--electric-magenta);
  font-style: italic;
  margin-bottom: 4px;
  text-shadow: 0 0 8px rgba(232,178,90,0.3);
}
.eh-content .btn { align-self: flex-start; padding-left: 24px; padding-right: 24px; }

/* Paired demand engines row */
.engines-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Centered single specialty card */
.engines-row-1 {
  display: flex;
  justify-content: center;
}
.engines-row-1 .engine-card {
  max-width: 540px;
  width: 100%;
}

/* Mobile — collapse hero card to single column */
@media (max-width: 900px) {
  .engine-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 24px;
    text-align: center;
  }
  .eh-mascot { min-height: 280px; }
  .eh-mascot img { max-width: 280px; }
  .eh-head { justify-content: center; }
  .eh-head .ec-price { text-align: center; }
  .eh-content .btn { align-self: center; }
  .eh-list { text-align: left; }
  .engines-row-2 { grid-template-columns: 1fr; }
  .engines-divider { padding: 0; }
  .ed-label { font-size: 0.68rem; padding: 4px 10px; }
}

@media (max-width: 600px) {
  .engine-hero { padding: 24px 20px; border-radius: 22px; }
  .engine-hero h3 { font-size: 1.6rem; }
  .eh-pitch { font-size: 0.95rem; }
  .ed-line { display: none; }
  .engines-divider { justify-content: center; }
}


/* ════════════════════════════════════════════════════════════════════
   COMPARISON BAND — DIY vs Big Agency vs Easyworks
   ════════════════════════════════════════════════════════════════════ */

.section-compare { padding: 100px 0; }

.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  padding-top: 24px;   /* room for "The right door" badge at top:-14px */
  perspective: 1400px;
  overflow: visible;
}

.compare-col {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: linear-gradient(180deg, rgba(12,20,36,0.7), rgba(7,11,22,0.92));
  border: 1px solid rgba(79,134,247,0.18);
  border-radius: 22px;
  transition: all 0.4s var(--ease);
  transform-style: preserve-3d;
}

/* The losing doors — desaturated, leaning away */
.compare-diy, .compare-agency {
  opacity: 0.82;
  filter: saturate(0.55) brightness(0.85);
  transform: scale(0.97);
}
.compare-diy:hover, .compare-agency:hover {
  opacity: 0.95;
  filter: saturate(0.8) brightness(0.95);
}

/* The winning door — full saturation, lifted, glowing */
.compare-us {
  background: linear-gradient(180deg, rgba(13,25,52,0.85), rgba(7,11,22,0.95));
  border-color: rgba(232,178,90,0.45);
  box-shadow: 0 0 60px rgba(232,178,90,0.22), inset 0 0 40px rgba(232,178,90,0.04);
  transform: scale(1.03) translateZ(20px);
  z-index: 2;
  animation: cmp-us-pulse 5s ease-in-out infinite;
}
@keyframes cmp-us-pulse {
  0%, 100% { box-shadow: 0 0 60px rgba(232,178,90,0.22), inset 0 0 40px rgba(232,178,90,0.04); }
  50%      { box-shadow: 0 0 100px rgba(232,178,90,0.45), inset 0 0 60px rgba(232,178,90,0.08); }
}
.compare-us:hover {
  transform: scale(1.05) translateY(-4px) translateZ(40px);
}
.compare-us::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(232,178,90,0.7), transparent 35%, transparent 65%, rgba(34,211,238,0.5));
  -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;
  opacity: 0.8;
  pointer-events: none;
}

.cmp-best {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  background: var(--grad-electric);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(232,178,90,0.5), 0 0 0 1px rgba(255,255,255,0.1);
  white-space: nowrap;
}

.cmp-head { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px dashed rgba(79,134,247,0.2); }
.cmp-tag {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(79,134,247,0.1);
  border: 1px solid rgba(79,134,247,0.25);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #aab8d6;
}
.cmp-tag-us {
  background: rgba(232,178,90,0.18);
  border-color: rgba(232,178,90,0.45);
  color: var(--electric-magenta);
}
.compare-col h3 {
  font-family: var(--font);
  font-size: 1.7rem;
  font-weight: 800;
  color: #eef2fb;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.compare-us h3 {
  background: linear-gradient(90deg, #fff, var(--electric-magenta));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cmp-sub {
  color: #94a3b8;
  font-style: italic;
  font-size: 0.92rem;
}

.cmp-list {
  list-style: none;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.cmp-list li {
  position: relative;
  padding-left: 28px;
  color: #d4d4d8;
  font-size: 0.92rem;
  line-height: 1.45;
}
.cmp-bad {
  color: #94a3b8 !important;
}
.cmp-bad::before {
  content: '';
  position: absolute;
  left: 4px; top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(220,38,127,0.18);
  border: 1px solid rgba(220,38,127,0.45);
}
.cmp-bad::after {
  content: '';
  position: absolute;
  left: 8px; top: 11px;
  width: 6px; height: 2px;
  background: rgba(220,38,127,0.8);
  border-radius: 1px;
}

.cmp-good::before {
  content: '';
  position: absolute;
  left: 0; top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--grad-electric);
  box-shadow: 0 0 12px rgba(34,211,238,0.5);
}
.cmp-good::after {
  content: '';
  position: absolute;
  left: 4px; top: 8px;
  width: 10px; height: 10px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/contain no-repeat;
  background: #fff;
}

.cmp-cost {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 0 4px;
  margin-top: auto;
  border-top: 1px solid rgba(79,134,247,0.2);
}
.cmp-cost span {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #94a3b8;
}
.cmp-cost strong {
  font-family: var(--font);
  font-size: 1.6rem;
  font-weight: 800;
  color: #eef2fb;
}
.compare-us .cmp-cost strong {
  background: var(--grad-electric);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(232,178,90,0.4));
}

.cmp-cta {
  margin-top: 16px;
  width: 100%;
  text-align: center;
}

@media (max-width: 900px) {
  .compare-grid { grid-template-columns: 1fr; gap: 16px; }
  .compare-diy, .compare-agency { transform: none; opacity: 0.9; }
  .compare-us { transform: none; }
  .compare-us:hover { transform: translateY(-4px); }
}

/* ════════════════════════════════════════════════════════════════════
   COSMIC PAGE TRANSITION LOADER
   ════════════════════════════════════════════════════════════════════ */

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--deep-space);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
#page-loader.active {
  opacity: 1;
  pointer-events: all;
}

.pl-stage {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pl-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--electric-cyan);
  border-right-color: var(--electric-magenta);
  animation: pl-ring-spin 1.2s linear infinite;
  box-shadow: 0 0 30px rgba(34,211,238,0.4);
}
.pl-ring-2 {
  inset: 18px;
  border-top-color: var(--electric-magenta);
  border-right-color: transparent;
  border-bottom-color: var(--electric-purple);
  animation-duration: 1.8s;
  animation-direction: reverse;
  box-shadow: 0 0 24px rgba(232,178,90,0.4);
}
.pl-ring-3 {
  inset: 36px;
  border-top-color: transparent;
  border-left-color: var(--electric-cyan);
  border-right-color: rgba(79,134,247,0.6);
  animation-duration: 0.9s;
}
@keyframes pl-ring-spin {
  to { transform: rotate(360deg); }
}

.pl-orb {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--grad-electric);
  box-shadow:
    0 0 40px rgba(79,134,247,0.7),
    0 0 80px rgba(232,178,90,0.5),
    0 0 120px rgba(56,189,248,0.3);
  animation: pl-orb-pulse 1.6s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
@keyframes pl-orb-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.15); filter: brightness(1.2); }
}

.pl-label {
  position: absolute;
  bottom: -42px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--electric-cyan);
  text-shadow: 0 0 12px rgba(34,211,238,0.5);
  white-space: nowrap;
  animation: pl-label-blink 1.4s ease-in-out infinite;
}
@keyframes pl-label-blink {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* Subtle cosmic field inside loader */
#page-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(34,211,238,0.8), transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(232,178,90,0.7), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(79,134,247,0.7), transparent),
    radial-gradient(2px 2px at 90% 50%, #fff, transparent);
  background-size: 500px 500px;
  opacity: 0.5;
  animation: stars-drift 30s linear infinite;
}


/* ════════════════════════════════════════════════════════════════════
   INDUSTRIES SPOTLIGHT — physio · dental · spa (3 primary niches)
   ════════════════════════════════════════════════════════════════════ */

.section-industries { padding: 100px 0; }

.industries-spotlight {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  padding-top: 24px;   /* room for "MOST-SERVED NICHE" badge at top:-14px */
  perspective: 1400px;
  overflow: visible;
}

.ind-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: linear-gradient(180deg, rgba(12,20,36,0.75), rgba(7,11,22,0.92));
  border: 1px solid rgba(79,134,247,0.22);
  border-radius: 22px;
  transition: all 0.4s var(--ease);
  transform-style: preserve-3d;
  /* Clip horizontally for inner gradient ::before, but allow vertical so the
     "MOST-SERVED NICHE" badge at top: -14px can stick up past the card edge */
  overflow-x: clip;
  overflow-y: visible;
}
.ind-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(79,134,247,0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.ind-card:hover {
  transform: translateY(-6px);
  border-color: rgba(79,134,247,0.5);
  box-shadow: 0 24px 60px rgba(79,134,247,0.25);
}
.ind-card:hover::before { opacity: 1; }

/* Physio — cyan accent */
.ind-physio { border-color: rgba(34,211,238,0.3); }
.ind-physio:hover { border-color: rgba(34,211,238,0.6); box-shadow: 0 24px 60px rgba(34,211,238,0.3); }
.ind-physio .ind-icon-wrap { color: var(--electric-cyan); }
.ind-physio .ind-stat strong { color: var(--electric-cyan); }

/* Dental — magenta featured */
.ind-dental {
  background: linear-gradient(180deg, rgba(13,25,52,0.85), rgba(7,11,22,0.95));
  border-color: rgba(232,178,90,0.45);
  transform: translateY(-12px) scale(1.02);
  z-index: 2;
  box-shadow: 0 0 50px rgba(232,178,90,0.22);
  animation: ind-dental-pulse 5s ease-in-out infinite;
}
@keyframes ind-dental-pulse {
  0%, 100% { box-shadow: 0 0 50px rgba(232,178,90,0.22); }
  50%      { box-shadow: 0 0 80px rgba(232,178,90,0.4); }
}
.ind-dental::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(232,178,90,0.7), transparent 35%, transparent 65%, rgba(34,211,238,0.5));
  -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;
  opacity: 0.8;
  pointer-events: none;
}
.ind-dental:hover {
  transform: translateY(-18px) scale(1.04);
  box-shadow: 0 32px 100px rgba(232,178,90,0.5);
}
.ind-dental .ind-icon-wrap { color: var(--electric-magenta); }
.ind-dental .ind-stat strong {
  background: var(--grad-electric);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Spa — purple accent */
.ind-spa { border-color: rgba(125,211,252,0.3); }
.ind-spa:hover { border-color: rgba(125,211,252,0.6); box-shadow: 0 24px 60px rgba(125,211,252,0.3); }
.ind-spa .ind-icon-wrap { color: #7dd3fc; }
.ind-spa .ind-stat strong { color: #7dd3fc; }

.ind-badge {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  background: var(--grad-electric);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(232,178,90,0.5), 0 0 0 1px rgba(255,255,255,0.1);
  white-space: nowrap;
  z-index: 3;
  animation: badge-float 3.4s ease-in-out infinite;
}
/* Featured card gets extra top padding so badge has room inside */
.ind-card.ind-featured { padding-top: 56px; }

.ind-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(79,134,247,0.08);
  border: 1px solid rgba(79,134,247,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.4s var(--ease);
  filter: drop-shadow(0 0 16px currentColor);
}
.ind-card:hover .ind-icon-wrap {
  transform: rotate(-6deg) scale(1.08) translateZ(20px);
  background: rgba(79,134,247,0.15);
}
.ind-icon { width: 40px; height: 40px; }

.ind-card h3 {
  font-family: var(--font);
  font-size: 1.4rem;
  font-weight: 700;
  color: #eef2fb;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  transition: transform 0.4s var(--ease);
}
.ind-card:hover h3 { transform: translateZ(15px); }
.ind-dental h3 {
  background: linear-gradient(90deg, #fff, var(--electric-magenta));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ind-pitch {
  color: #aab8d6;
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 16px;
}
.ind-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  flex: 1;
}
.ind-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  color: #d4d4d8;
  font-size: 0.9rem;
  line-height: 1.5;
}
.ind-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 14px; height: 14px;
  background: var(--grad-electric);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/contain no-repeat;
}

.ind-stat {
  display: block;
  padding: 14px 0 0;
  margin-top: auto;
  border-top: 1px dashed rgba(79,134,247,0.25);
  font-family: var(--mono);
  font-size: 0.85rem;
  color: #aab8d6;
}
.ind-stat strong {
  font-family: var(--font);
  font-size: 1.4rem;
  font-weight: 800;
  margin-right: 6px;
  display: inline-block;
  filter: drop-shadow(0 0 8px currentColor);
}

/* Other industries chip row */
.industries-others {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  padding: 24px;
  border-top: 1px dashed rgba(79,134,247,0.18);
}
.io-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-right: 8px;
}
.io-chip {
  padding: 6px 14px;
  background: rgba(79,134,247,0.08);
  border: 1px solid rgba(79,134,247,0.22);
  border-radius: 999px;
  font-size: 0.82rem;
  color: #aab8d6;
  transition: all 0.2s;
}
.io-chip:hover {
  background: rgba(79,134,247,0.18);
  border-color: rgba(79,134,247,0.5);
  color: #fff;
  transform: translateY(-1px);
}
.io-chip-more {
  background: var(--grad-electric);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

@media (max-width: 900px) {
  .industries-spotlight { grid-template-columns: 1fr; gap: 16px; }
  .ind-dental { transform: none; }
  .ind-dental:hover { transform: translateY(-8px); }
  .industries-others { padding: 16px 0; }
}


/* ════════════════════════════════════════════════════════════════════
   3D INDUSTRIES CONVEYOR — 3 lanes, opposite directions, depth-tilted
   ════════════════════════════════════════════════════════════════════ */

.section-conveyor {
  padding: 80px 0 100px;
  position: relative;
  /* Clip only horizontally; allow vertical so hover glow can extend up/down freely */
  overflow-x: clip;
  overflow-y: visible;
}

.conveyor-stage {
  position: relative;
  margin: 48px 0 16px;
  padding: 80px 0;
  perspective: 1400px;
  perspective-origin: center center;
  transform-style: preserve-3d;
  overflow: visible;
}

/* Lane wrapper — each is its own track. overflow-x clips horizontally for the
   marquee scroll; overflow-y is visible so hover glow can extend above/below. */
.conv-lane {
  position: relative;
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  margin: 26px 0;
  padding: 8px 0;
  /* Tilt the lane back in 3D for depth */
  transform-style: preserve-3d;
  /* Horizontal-only mask — fades left + right edges only, doesn't affect vertical glow */
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* Lanes have alternating Y-rotation for depth — middle straight, outer slightly tilted */
.conv-lane-1 { transform: rotateX(8deg) rotateY(-4deg) translateZ(0); }
.conv-lane-2 { transform: rotateX(0deg) rotateY(0deg) translateZ(40px); }
.conv-lane-3 { transform: rotateX(-8deg) rotateY(4deg) translateZ(0); }

/* The actual scrolling track inside each lane */
.conv-track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
  animation: conv-scroll-l 50s linear infinite;
  padding: 4px 0;
}
.conv-lane-1 .conv-track { animation-duration: 56s; }
.conv-lane-2 .conv-track { animation-duration: 68s; animation-name: conv-scroll-r; }
.conv-lane-3 .conv-track { animation-duration: 44s; }

@keyframes conv-scroll-l {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes conv-scroll-r {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Pause animations on hover anywhere in the stage */
.conveyor-stage:hover .conv-track {
  animation-play-state: paused;
}

/* Subtle fade gradients on left and right edges (decorative on top) */
.conveyor-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 18%;
  z-index: 5;
  pointer-events: none;
}
.conveyor-fade-l {
  left: 0;
  background: linear-gradient(90deg, var(--deep-space) 0%, transparent 100%);
}
.conveyor-fade-r {
  right: 0;
  background: linear-gradient(270deg, var(--deep-space) 0%, transparent 100%);
}

/* Card styling — glass pill with icon + label, 3D-aware */
.conv-card {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 18px;
  background: linear-gradient(135deg, rgba(15,24,44,0.85), rgba(12,20,36,0.92));
  border: 1px solid rgba(79,134,247,0.28);
  border-radius: 999px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: #d4d4d8;
  transition: all 0.35s var(--ease);
  transform-style: preserve-3d;
  cursor: default;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  position: relative;
  isolation: isolate;
}
.conv-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(79,134,247,0.4), transparent 40%, transparent 60%, rgba(34,211,238,0.3));
  -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;
  padding: 1px;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.3s;
}

.conv-card:hover {
  transform: translateY(-6px) translateZ(40px) scale(1.06);
  border-color: rgba(232,178,90,0.6);
  color: #fff;
  box-shadow:
    0 16px 48px rgba(79,134,247,0.45),
    0 0 32px rgba(232,178,90,0.4);
  z-index: 10;
}
.conv-card:hover::before { opacity: 1; }

/* Lane-specific color tints */
.cv-c { border-color: rgba(34,211,238,0.32); }
.cv-c:hover { border-color: var(--electric-cyan); box-shadow: 0 16px 48px rgba(34,211,238,0.45), 0 0 32px rgba(34,211,238,0.5); }
.cv-c::before { background: linear-gradient(135deg, rgba(34,211,238,0.5), transparent 40%, transparent 60%, rgba(79,134,247,0.3)); }

.cv-m { border-color: rgba(79,134,247,0.32); }
.cv-m:hover { border-color: var(--electric-purple); box-shadow: 0 16px 48px rgba(79,134,247,0.45), 0 0 32px rgba(79,134,247,0.5); }

.cv-p { border-color: rgba(232,178,90,0.28); }
.cv-p:hover { border-color: var(--electric-magenta); box-shadow: 0 16px 48px rgba(232,178,90,0.45), 0 0 32px rgba(232,178,90,0.5); }
.cv-p::before { background: linear-gradient(135deg, rgba(232,178,90,0.5), transparent 40%, transparent 60%, rgba(34,211,238,0.3)); }

.cv-emoji {
  font-size: 1.4rem;
  filter: drop-shadow(0 0 8px rgba(79,134,247,0.4));
  display: inline-block;
  line-height: 1;
}
.cv-label {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Footer line */
.conveyor-footer {
  text-align: center;
  margin-top: 24px;
}
.conv-footer-text {
  color: #94a3b8;
  font-size: 0.92rem;
}
.conv-footer-text a {
  color: var(--electric-cyan);
  text-decoration: underline;
  text-decoration-color: rgba(34,211,238,0.4);
  text-underline-offset: 3px;
  transition: all 0.2s;
}
.conv-footer-text a:hover { color: #fff; text-decoration-color: var(--electric-cyan); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .conv-track { animation: none !important; }
  .conv-lane-1, .conv-lane-2, .conv-lane-3 { transform: none; }
}

/* Mobile — flatten 3D, slower */
@media (max-width: 700px) {
  .conv-lane-1, .conv-lane-2, .conv-lane-3 { transform: none; }
  .conveyor-stage { perspective: none; padding: 40px 0; }
  .conv-card { padding: 12px 18px 12px 14px; font-size: 0.86rem; }
  .cv-emoji { font-size: 1.2rem; }
  .conv-lane-1 .conv-track { animation-duration: 40s; }
  .conv-lane-2 .conv-track { animation-duration: 48s; }
  .conv-lane-3 .conv-track { animation-duration: 32s; }
}


/* ════════════════════════════════════════════════════════════════════
   TIGHTENING PASS — consistent vertical rhythm, less padding, more confidence
   ════════════════════════════════════════════════════════════════════ */

/* Section padding: was 80-100px, now 64-80px — less air, more punch */
.section { padding: 72px 0; }
.section-products { padding: 32px 0 64px; }
.section-onsite { padding: 56px 0; }
.section-impact { padding: 64px 0; }
.section-calc { padding: 64px 0; }
.section-conveyor { padding: 56px 0 72px; }
.section-compare { padding: 72px 0; }
.section-industries { padding: 72px 0; }
.section-process { padding: 56px 0 72px; }
.section-cta { padding: 56px 0 80px; }

/* Section headers — confident, tight rhythm */
.section-header { margin-bottom: 36px; }
.section-header h2 { line-height: 1.04; letter-spacing: -0.03em; }
.section-header .overline { margin-bottom: 14px; }
.section-sub { margin-top: 14px; }

/* Onsite — simpler band layout now that pillars are gone */
.onsite-band-v2 { padding: 32px 0; gap: 56px; }
.onsite-mascot { min-height: 320px; }
.onsite-body {
  color: #aab8d6;
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 18px 0 28px;
  max-width: 520px;
}
.onsite-body strong { color: var(--electric-cyan); text-shadow: 0 0 12px rgba(34,211,238,0.4); }

/* Engines stack tighter (no dividers) */
.engines-stack { gap: 28px; margin: 36px 0; }

/* FAQ tighter — confident, scannable */
.faq-list { margin-top: 32px; }
.faq-item { margin-bottom: 6px; border-radius: 12px; }
.faq-q {
  padding: 16px 20px;
  font-size: 1rem;
}


/* ════════════════════════════════════════════════════════════════════
   HERO PHONE TRUST LINE — under CTAs, real-human signal
   ════════════════════════════════════════════════════════════════════ */

.hero-phone {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: #94a3b8;
  letter-spacing: 0.03em;
}
.hp-label {
  opacity: 0.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.hp-num {
  color: var(--electric-cyan);
  font-weight: 600;
  text-shadow: 0 0 12px rgba(34,211,238,0.4);
  letter-spacing: 0.01em;
  position: relative;
}
.hp-num::before {
  content: '';
  position: absolute;
  inset: -4px -8px;
  border-radius: 8px;
  background: rgba(34,211,238,0.06);
  border: 1px solid rgba(34,211,238,0.2);
  z-index: -1;
  transition: all 0.2s;
}
.hp-num:hover { color: #fff; }
.hp-num:hover::before { background: rgba(34,211,238,0.16); border-color: rgba(34,211,238,0.5); }
.hp-dot { color: rgba(79,134,247,0.5); }
.hp-detail {
  color: #aab8d6;
  font-family: var(--font-body);
  font-size: 0.82rem;
}

@media (max-width: 600px) {
  .hero-phone { font-size: 0.78rem; }
  .hp-detail { font-size: 0.78rem; }
}

/* ════════════════════════════════════════════════════════════════════
   TESTIMONIAL / PROOF BAND
   ════════════════════════════════════════════════════════════════════ */

.section-proof { padding: 72px 0; position: relative; }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
  padding-top: 24px;     /* room for floating badges that sit at top:-14px */
  perspective: 1400px;
  overflow: visible;
}

.proof-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  background: linear-gradient(180deg, rgba(12,20,36,0.7), rgba(7,11,22,0.92));
  border: 1px solid rgba(79,134,247,0.22);
  border-radius: 20px;
  transition: all 0.4s var(--ease);
  transform-style: preserve-3d;
  overflow-x: clip;
  overflow-y: visible;
}
.proof-card:hover {
  transform: translateY(-6px) translateZ(20px);
  border-color: rgba(79,134,247,0.5);
  box-shadow: 0 24px 60px rgba(79,134,247,0.25);
}

.proof-card-featured {
  background: linear-gradient(180deg, rgba(13,25,52,0.85), rgba(7,11,22,0.95));
  border-color: rgba(232,178,90,0.4);
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(232,178,90,0.2);
  animation: proof-feat-pulse 5s ease-in-out infinite;
  /* Room for the HIGHEST ROI badge sitting at top:16px inside the card */
  padding-top: 54px;
}
@keyframes proof-feat-pulse {
  0%, 100% { box-shadow: 0 24px 60px rgba(232,178,90,0.2); }
  50%      { box-shadow: 0 32px 80px rgba(232,178,90,0.4); }
}
.proof-card-featured:hover {
  transform: translateY(-12px) translateZ(30px);
  box-shadow: 0 32px 100px rgba(232,178,90,0.5);
}
.pc-badge {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 13px 4px;
  background: var(--grad-electric);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(34,211,238,0.5), 0 0 0 1px rgba(255,255,255,0.12);
  white-space: nowrap;
  z-index: 3;
}

.pc-quote {
  font-family: var(--font);
  font-size: 1.08rem;
  line-height: 1.45;
  color: #eef2fb;
  margin-bottom: 22px;
  position: relative;
  padding-top: 8px;
}
.pc-quote::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: -8px;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 0.8;
  background: var(--grad-electric);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.4;
  pointer-events: none;
}

.pc-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(79,134,247,0.22);
  margin-bottom: 14px;
}
.pc-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(79,134,247,0.4);
}
.pc-avatar-1 { background: linear-gradient(135deg, #22d3ee, #4f86f7); }
.pc-avatar-2 { background: linear-gradient(135deg, #e8b25a, #4f86f7); }
.pc-avatar-3 { background: linear-gradient(135deg, #7dd3fc, #22d3ee); }

.pc-id strong {
  display: block;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.95rem;
  color: #eef2fb;
  line-height: 1.2;
}
.pc-id span {
  font-size: 0.8rem;
  color: #94a3b8;
}

.pc-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: #aab8d6;
}
.pc-stat strong {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.5rem;
  background: var(--grad-electric);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.proof-foot {
  text-align: center;
  margin-top: 24px;
  font-size: 0.82rem;
  color: #8a99b8;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   CLIENT CONSTELLATION — clients orbit the Easyworks core on a 3D globe,
   linked by glowing lines, with a synced "now viewing" detail card.
   Default markup = a calm vertical pill stack (mobile / no-JS / reduced
   motion). work-sphere.js adds .is-sphere on capable desktops.
   ════════════════════════════════════════════════════════════════════ */
.cs { margin-top: 30px; }

/* default = calm pill cloud */
.cs-stage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
}
.cs-glow, .cs-ring, .cs-core, .cs-links { display: none; }
.ws-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 9px;
  border: 1px solid rgba(79,134,247,0.25);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(12,20,36,0.7), rgba(7,11,22,0.92));
  text-decoration: none;
  color: #eef2fb;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ws-item:hover,
.ws-item:focus-visible {
  border-color: rgba(34,211,238,0.6);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(34,211,238,0.18);
  outline: none;
}
.ws-orb {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font);
  font-weight: 800;
  font-size: 0.82rem;
  color: #fff;
  background: linear-gradient(135deg, #22d3ee, #4f86f7);
  box-shadow: 0 0 16px rgba(79,134,247,0.45);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.ws-item:nth-of-type(2) .ws-orb { background: linear-gradient(135deg, #4f86f7, #7dd3fc); }
.ws-item:nth-of-type(3) .ws-orb { background: linear-gradient(135deg, #3b82f6, #22d3ee); }
.ws-item:nth-of-type(4) .ws-orb { background: linear-gradient(135deg, #7dd3fc, #3b82f6); }
.ws-item:nth-of-type(5) .ws-orb { background: linear-gradient(135deg, #22d3ee, #3b82f6); }
.ws-label {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  color: #eef2fb;
}
.cs-detail { display: none; }
.foot-mobile { display: none; }
.foot-desktop { display: inline; }

/* ── Active constellation (added by JS) ── */
.cs-stage.is-sphere {
  display: block;
  position: relative;
  width: 100%; max-width: 600px;
  height: 480px;
  margin: 0 auto;
  perspective: 1000px;
  cursor: grab;
  touch-action: pan-y;   /* let the page scroll vertically over the sphere on touch */
}
.cs-stage.is-sphere:active { cursor: grabbing; }
.is-sphere .cs-glow, .is-sphere .cs-core, .is-sphere .cs-links { display: block; }
.is-sphere .cs-ring { display: block; }

.is-sphere .cs-glow {
  position: absolute; left: 50%; top: 50%;
  width: 340px; height: 340px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(34,211,238,0.20), rgba(59,130,246,0.08) 42%, transparent 68%);
  filter: blur(4px); pointer-events: none;
}
.is-sphere .cs-ring {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid rgba(79,134,247,0.16);
  transform: translate(-50%, -50%) rotateX(74deg); pointer-events: none;
}
.is-sphere .cs-ring.r1 { width: 300px; height: 300px; }
.is-sphere .cs-ring.r2 { width: 440px; height: 440px; border-color: rgba(79,134,247,0.10); }
.is-sphere .cs-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #eaf8ff, #22d3ee 55%, rgba(59,130,246,0.4) 85%);
  box-shadow: 0 0 14px rgba(125,211,252,0.95), 0 0 40px rgba(34,211,238,0.7);
  z-index: 300;
}
.is-sphere .cs-core::after {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid rgba(34,211,238,0.4);
  animation: csCorePulse 3.4s var(--ease) infinite;
}
@keyframes csCorePulse { 0%{transform:scale(.7);opacity:.8} 70%{transform:scale(2.6);opacity:0} 100%{opacity:0} }
.is-sphere .cs-links {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.cs-links line { stroke: url(#csGrad); stroke-width: 1; stroke-linecap: round; }

.is-sphere .ws-item {
  position: absolute; left: 50%; top: 50%;
  flex-direction: column; align-items: center; gap: 8px;
  padding: 0; border: none; background: none; box-shadow: none;
  transform: translate(-50%, -50%);   /* JS overrides each frame */
  will-change: transform, opacity;
  transition: none;
}
.is-sphere .ws-item:hover,
.is-sphere .ws-item:focus-visible { box-shadow: none; }
.is-sphere .ws-orb {
  width: 58px; height: 58px;
  font-size: 1.04rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 0 22px rgba(79,134,247,0.5);
}
.is-sphere .ws-label {
  font-size: 0.76rem;
  color: #aab8d6;
  text-shadow: 0 2px 12px #070b16, 0 0 5px #070b16;
}
.is-sphere .ws-item.is-active .ws-orb {
  box-shadow: 0 0 0 2px #22d3ee, 0 0 34px rgba(34,211,238,0.8);
  transform: scale(1.12);
}
.is-sphere .ws-item.is-active .ws-label { color: #eef2fb; }

/* detail card (shown only in active mode) */
.cs-stage.is-sphere + .cs-detail {
  display: flex; align-items: center; gap: 18px;
  max-width: 560px; margin: 18px auto 0; padding: 18px 22px;
  border-radius: 18px; text-align: left;
  background: linear-gradient(180deg, rgba(13,22,42,0.78), rgba(7,11,22,0.92));
  border: 1px solid rgba(79,134,247,0.24);
  box-shadow: 0 24px 60px rgba(2,6,16,0.5);
  min-height: 118px;
}
.cs-detail .d-mono {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-weight: 800; color: #fff; font-size: 1rem;
  background: linear-gradient(135deg, #22d3ee, #4f86f7);
  box-shadow: 0 0 20px rgba(79,134,247,0.45);
}
.d-body { flex: 1; min-width: 0; }
.d-cat {
  display: block; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #22d3ee; margin-bottom: 5px;
}
.d-name {
  font-family: var(--font); font-size: 1.18rem; font-weight: 700;
  line-height: 1.18; color: #eef2fb; margin-bottom: 6px;
}
.d-desc { font-size: 0.88rem; line-height: 1.45; color: #aab8d6; }
.d-cta {
  flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: #06121f; font-weight: 600;
  padding: 11px 18px; border-radius: 999px;
  background: linear-gradient(135deg, #22d3ee, #7dd3fc);
  box-shadow: 0 0 22px rgba(34,211,238,0.45);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.d-cta:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(34,211,238,0.7); }
.d-cta .arr { display: inline-block; transition: transform 0.3s var(--ease); }
.d-cta:hover .arr { transform: translate(3px, -3px); }

@media (max-width: 780px) {
  .foot-desktop { display: none; }
  .foot-mobile { display: inline; }
}
@media (max-width: 760px) {
  .cs-stage.is-sphere + .cs-detail { flex-direction: column; text-align: center; gap: 12px; }
  .cs-stage.is-sphere + .cs-detail .d-body { text-align: center; }
}
/* mobile constellation: same orbiting network, sized for a phone, labels off
   (the detail card names the active client). work-sphere.js auto-orbits and
   makes each orb tappable; the page still scrolls via touch-action: pan-y. */
@media (max-width: 600px) {
  .cs-stage.is-sphere {
    height: 360px;
    max-width: 100%;
    overflow: hidden;          /* clip any orb that swings to the very edge */
  }
  .is-sphere .ws-orb { width: 44px; height: 44px; font-size: 0.82rem; }
  .is-sphere .ws-label { display: none; }
  .is-sphere .cs-glow { width: 220px; height: 220px; }
  .is-sphere .cs-ring.r1 { width: 200px; height: 200px; }
  .is-sphere .cs-ring.r2 { width: 280px; height: 280px; }
  .cs-stage.is-sphere + .cs-detail { margin-top: 10px; padding: 16px 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   STICKY SCROLL CTA
   ════════════════════════════════════════════════════════════════════ */

.sticky-cta {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  background: var(--grad-electric);
  color: #fff;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow:
    0 8px 32px rgba(79,134,247,0.45),
    0 0 24px rgba(232,178,90,0.35),
    0 0 0 1px rgba(255,255,255,0.08) inset;
  opacity: 0;
  transform: translateY(20px) scale(0.92);
  pointer-events: none;
  transition: all 0.4s var(--ease);
  text-decoration: none;
}
.sticky-cta.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.sticky-cta:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 48px rgba(79,134,247,0.6), 0 0 40px rgba(232,178,90,0.5);
}
.sc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 0 4px rgba(255,255,255,0.25);
  animation: sc-pulse 1.4s ease-in-out infinite;
}
@keyframes sc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.7); opacity: 0.6; }
}
.sticky-cta .sc-text { white-space: nowrap; }

@media (max-width: 600px) {
  .sticky-cta { bottom: 14px; right: auto; left: 14px; padding: 10px 14px 10px 12px; font-size: 0.85rem; }
}


/* ════════════════════════════════════════════════════════════════════
   SUB-PAGE REDESIGN — restyle existing .psub-*, .pf-*, .ph-*, .ind-* etc
   to match cosmic theme without rewriting HTML
   ════════════════════════════════════════════════════════════════════ */

/* Sub-page hero — replace stock bg with cosmic */
.psub-hero {
  position: relative;
  padding: 130px 0 80px;
  background: transparent !important;
  z-index: 2;
}
.psub-hero-mesh { display: none; }

.psub-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.psub-hero-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 320px;
}
.psub-hero-icon::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 50% 60% at center, rgba(79,134,247,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 70% 70% at center, rgba(56,189,248,0.18) 0%, transparent 75%);
  filter: blur(70px);
  z-index: -1;
  animation: pulse-glow 5s ease-in-out infinite;
}
.psub-hero-icon img {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(79,134,247,0.4), 0 0 0 1px rgba(255,255,255,0.06);
  filter: drop-shadow(0 0 24px rgba(232,178,90,0.3));
}

.psub-hero h1 {
  font-family: var(--font);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  background: linear-gradient(135deg, #fff 0%, #cdd8ee 60%, var(--electric-magenta) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(79,134,247,0.3));
  margin-bottom: 16px;
}
.psub-tagline {
  font-size: 1.2rem;
  color: var(--electric-cyan);
  font-weight: 600;
  margin-bottom: 12px;
  text-shadow: 0 0 12px rgba(34,211,238,0.4);
}
.psub-pitch {
  color: #aab8d6;
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 560px;
}

.psub-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 24px;
  background: rgba(12,20,36,0.7);
  border: 1px solid rgba(34,211,238,0.25);
  border-radius: 16px;
  margin-bottom: 28px;
  width: max-content;
  max-width: 100%;
}
.psub-price { display: flex; flex-direction: column; gap: 2px; }
.psub-price-num {
  font-family: var(--font);
  font-size: 1.8rem;
  font-weight: 800;
  background: var(--grad-electric);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.psub-price span:not(.psub-price-num) {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #94a3b8;
  letter-spacing: 0.05em;
}
.psub-divider {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent, rgba(79,134,247,0.4), transparent);
}

.psub-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.psub-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--electric-cyan);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
  opacity: 0.8;
  transition: all 0.2s;
}
.psub-back:hover { opacity: 1; transform: translateX(-4px); text-shadow: 0 0 12px rgba(34,211,238,0.5); }

/* Demo video block */
.psub-video {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(79,134,247,0.25);
  box-shadow: 0 24px 80px rgba(79,134,247,0.2);
  background: rgba(12,20,36,0.8);
  margin-top: 36px;
}
.psub-video-el { display: block; width: 100%; height: auto; }
.psub-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(ellipse at center, rgba(79,134,247,0.18) 0%, rgba(7,11,22,0.6) 70%);
  transition: opacity 0.3s;
}
.psub-video.playing .psub-video-overlay { opacity: 0; pointer-events: none; }
.psub-video-play {
  background: var(--grad-electric);
  border: none;
  border-radius: 50%;
  width: 72px; height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 40px rgba(79,134,247,0.6);
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.psub-video-play:hover { transform: scale(1.08); box-shadow: 0 0 60px rgba(232,178,90,0.7); }
.psub-video-play svg { width: 28px; height: 28px; }
.psub-video-play svg path { fill: #fff; }
.psub-video-play svg circle { display: none; }
.psub-video-coming {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: #aab8d6;
  letter-spacing: 0.05em;
  max-width: 360px;
  text-align: center;
}
.psub-video-coming a { color: var(--electric-cyan); text-decoration: underline; }

/* Features stack — cosmic-style alternating cards */
.pf-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
}
.pf-block {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 36px;
  align-items: center;
  padding: 28px;
  background: linear-gradient(180deg, rgba(12,20,36,0.7), rgba(7,11,22,0.92));
  border: 1px solid rgba(79,134,247,0.22);
  border-radius: 22px;
  transition: all 0.4s var(--ease);
}
.pf-block:nth-child(even) { direction: rtl; }
.pf-block:nth-child(even) > * { direction: ltr; }
.pf-block:hover {
  transform: translateY(-4px);
  border-color: rgba(79,134,247,0.5);
  box-shadow: 0 24px 60px rgba(79,134,247,0.22);
}
.pf-img-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.pf-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.1) brightness(0.95);
}
.pf-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(7,11,22,0.4) 100%);
  pointer-events: none;
}
.pf-text h3 {
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 700;
  color: #eef2fb;
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.pf-text p {
  color: #aab8d6;
  font-size: 1rem;
  line-height: 1.6;
}

/* Process grid (4-step) */
.ph-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.ph-step {
  position: relative;
  padding: 24px 20px;
  background: rgba(12,20,36,0.7);
  border: 1px solid rgba(79,134,247,0.22);
  border-radius: 16px;
  transition: all 0.3s var(--ease);
}
.ph-step:hover {
  transform: translateY(-4px);
  border-color: rgba(34,211,238,0.5);
  box-shadow: 0 16px 40px rgba(34,211,238,0.22);
}
.ph-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grad-electric);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
  margin-bottom: 14px;
  box-shadow: 0 0 18px rgba(79,134,247,0.5);
}
.ph-step h4 {
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 700;
  color: #eef2fb;
  margin-bottom: 6px;
}
.ph-step p {
  font-size: 0.9rem;
  color: #aab8d6;
  line-height: 1.5;
}

/* Industries chip grid */
.ind-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 32px;
}
.ind-chip {
  padding: 8px 18px;
  background: rgba(79,134,247,0.08);
  border: 1px solid rgba(79,134,247,0.25);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: #aab8d6;
  transition: all 0.2s;
}
.ind-chip:hover {
  background: rgba(79,134,247,0.18);
  border-color: rgba(79,134,247,0.5);
  color: #fff;
  transform: translateY(-2px);
}

/* Onsite band on sub-pages */
.psub-hero ~ .section .onsite-band,
section .onsite-band {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  padding: 36px 0;
}
/* Onsite section now shows the easy-onsite mascot (toolbox + blueprints).
   Treat it as a floating mascot, not a cropped photo. */
.onsite-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.onsite-photo::before {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 45% 55% at center, rgba(56,189,248,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 65% 70% at center, rgba(79,134,247,0.32) 0%, transparent 75%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  animation: pulse-glow 6s ease-in-out infinite;
  mix-blend-mode: screen;
}
.onsite-photo img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  height: auto;
  object-fit: contain;
  /* Real alpha cutout — no blend / no mask */
  filter:
    drop-shadow(0 0 36px rgba(56,189,248,0.45))
    drop-shadow(0 0 80px rgba(59,130,246,0.35));
  animation: mascot-float 7s ease-in-out infinite;
}
.onsite-photo-overlay { display: none; }

/* Sub-page CTA section */
.section-cta .cta-header {
  text-align: center;
  margin-bottom: 16px;
}
.cta-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* Mobile collapse for sub-page layout */
@media (max-width: 900px) {
  .psub-hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .psub-hero-icon { min-height: 200px; }
  .psub-hero-icon img { max-width: 220px; }
  .psub-meta, .psub-cta-row { margin-left: auto; margin-right: auto; }
  .psub-meta { justify-content: center; }
  .psub-cta-row { justify-content: center; }
  .pf-block { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .pf-block:nth-child(even) { direction: ltr; }
  .ph-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  section .onsite-band { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 600px) {
  .ph-grid { grid-template-columns: 1fr; }
  .psub-hero { padding: 100px 0 60px; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE QA fixes — make sure all v2 sections hold up at 375px
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Hero — collapsed already */
  .hero-v2 { padding: 90px 0 50px; min-height: auto; }
  .hero-mascot { min-height: 320px; }
  .hero-phone { justify-content: center; }

  /* Engine hero cards stack vertically with mascot first */
  .engine-hero { padding: 22px 18px; gap: 18px; border-radius: 18px; }
  .eh-mascot { min-height: 220px; }
  .eh-mascot img { max-width: 220px; }
  .engine-hero h3 { font-size: 1.4rem; }
  .eh-pitch { font-size: 0.95rem; }
  .eh-list { grid-template-columns: 1fr; gap: 4px; }

  /* Conveyor — already mobile-tuned */
  .conv-card { padding: 10px 16px 10px 12px; font-size: 0.82rem; }
  .conv-lane { margin: 18px 0; padding: 6px 0; }

  /* Comparison band stacks single column already */
  /* Proof cards stack single column already */

  /* Industries — featured card no longer scale up */
  .ind-card { padding: 24px 20px; }
  .ind-icon-wrap { width: 56px; height: 56px; margin-bottom: 14px; }
  .ind-icon { width: 32px; height: 32px; }

  /* Stack builder mobile */
  .stack-builder-v2 { padding: 24px 18px; border-radius: 20px; margin-top: 36px; }
  .sb-bundles { grid-template-columns: 1fr; }
  .sb-engines { grid-template-columns: 1fr; }
  .sb-ribbon { right: -14px; width: 130px; }
}


/* ════════════════════════════════════════════════════════════════════
   PROCESS TIMELINE V3 — icons + time-estimate badges
   ════════════════════════════════════════════════════════════════════ */

.tl-card { position: relative; padding: 24px 20px; }
.tl-icon {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 16px rgba(79,134,247,0.4));
  display: inline-block;
  transition: transform 0.4s var(--ease);
}
.tl-card:hover .tl-icon { transform: scale(1.15) rotate(-5deg); }
.tl-time {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  background: rgba(34,211,238,0.1);
  border: 1px solid rgba(34,211,238,0.25);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--electric-cyan);
}


/* ════════════════════════════════════════════════════════════════════
   REVENUE SCALE — extra mascot dopamine placements
   ════════════════════════════════════════════════════════════════════ */

/* Crowd mascot: atmospheric accent at bottom-right, BEHIND content,
   small + low opacity so it never overlaps text or stat cards. */
.section-impact { position: relative; overflow: visible; }
.impact-mascot {
  position: absolute;
  bottom: -12%;
  right: -5%;
  width: 200px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  animation: mascot-float 9s ease-in-out infinite;
}
.impact-mascot img {
  width: 100%;
  height: auto;
  /* Real alpha cutout */
  filter: drop-shadow(0 0 24px rgba(59,130,246,0.35));
}

/* Hide on tablet + mobile to prevent any overlap with cards stacked vertically */
@media (max-width: 1100px) {
  .impact-mascot { display: none !important; }
}

/* Speed mascot bursting in behind the calculator */
.section-calc { position: relative; overflow: visible; }
.calc-mascot-bg {
  position: absolute;
  top: 8%;
  left: -10%;
  width: 280px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  transform: rotate(-8deg);
  animation: speed-rush 7s ease-in-out infinite;
}
.calc-mascot-bg img {
  width: 100%;
  height: auto;
  /* Real alpha cutout */
  filter:
    drop-shadow(0 0 40px rgba(56,189,248,0.45))
    drop-shadow(0 0 80px rgba(59,130,246,0.32));
}
@keyframes speed-rush {
  0%, 100% { transform: rotate(-8deg) translateX(0); }
  50%      { transform: rotate(-10deg) translateX(20px); }
}

/* Mobile — hide secondary mascots so the layout doesn't break */
@media (max-width: 900px) {
  .impact-mascot { display: none; }
  .calc-mascot-bg { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   ENGINE FLOW V2 — icons + animated energy pulses traveling between nodes
   ════════════════════════════════════════════════════════════════════ */

.engine-flow-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 32px 0 56px;
  perspective: 800px;
}

.engine-flow-v2 .ef-node {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 18px;
  min-width: 110px;
  background: linear-gradient(180deg, rgba(15,24,44,0.85), rgba(7,11,22,0.92));
  border: 1px solid rgba(79,134,247,0.32);
  border-radius: 16px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.85rem;
  color: #eef2fb;
  text-transform: none;
  letter-spacing: -0.005em;
  transition: all 0.35s var(--ease);
  transform-style: preserve-3d;
  position: relative;
  isolation: isolate;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.engine-flow-v2 .ef-node::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(79,134,247,0.45), transparent 40%, transparent 60%, rgba(34,211,238,0.35));
  -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;
  padding: 1px;
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.3s;
}
.engine-flow-v2 .ef-node:hover {
  transform: translateY(-4px) translateZ(20px) scale(1.04);
  border-color: rgba(79,134,247,0.7);
  box-shadow: 0 16px 36px rgba(79,134,247,0.4);
  z-index: 5;
}
.engine-flow-v2 .ef-node:hover::before { opacity: 1; }

.ef-icon {
  font-size: 1.4rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(79,134,247,0.5));
}
.ef-label {
  white-space: nowrap;
  font-size: 0.85rem;
  letter-spacing: -0.005em;
}

/* Tier-specific tints */
.engine-flow-v2 .ef-node[data-tier="demand"] { border-color: rgba(79,134,247,0.4); }
.engine-flow-v2 .ef-node[data-tier="foundation"] {
  border-color: rgba(34,211,238,0.55);
  background: linear-gradient(180deg, rgba(8,32,40,0.9), rgba(7,11,22,0.95));
  box-shadow: 0 8px 28px rgba(34,211,238,0.3);
}
.engine-flow-v2 .ef-node[data-tier="foundation"]::before {
  background: linear-gradient(135deg, rgba(34,211,238,0.6), transparent 40%, transparent 60%, rgba(79,134,247,0.4));
}
.engine-flow-v2 .ef-node[data-tier="scale"] {
  border-color: rgba(232,178,90,0.55);
  background: linear-gradient(180deg, rgba(13,25,52,0.85), rgba(7,11,22,0.95));
  box-shadow: 0 8px 28px rgba(232,178,90,0.3);
  animation: ef-scale-pulse 3s ease-in-out infinite;
}
@keyframes ef-scale-pulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(232,178,90,0.3); }
  50%      { box-shadow: 0 12px 40px rgba(232,178,90,0.6); }
}
.engine-flow-v2 .ef-node[data-tier="scale"]::before {
  background: linear-gradient(135deg, rgba(232,178,90,0.7), transparent 35%, transparent 65%, rgba(34,211,238,0.4));
  opacity: 0.85;
}

/* RESULT node — the "More $$$" — celebratory gradient + pop */
.engine-flow-v2 .ef-node[data-tier="result"] {
  background: var(--grad-electric);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 12px 40px rgba(79,134,247,0.55),
    0 0 32px rgba(232,178,90,0.5);
  animation: ef-result-pop 2.4s ease-in-out infinite;
}
@keyframes ef-result-pop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.engine-flow-v2 .ef-node[data-tier="result"]::before { display: none; }
.engine-flow-v2 .ef-node[data-tier="result"] .ef-icon {
  filter: drop-shadow(0 0 16px rgba(255,255,255,0.6));
}
.engine-flow-v2 .ef-node[data-tier="result"] .ef-label {
  font-weight: 800;
  font-family: var(--font);
  font-size: 0.92rem;
}

/* CONNECTORS with traveling pulse */
.ef-connector {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(79,134,247,0.15) 0%,
    rgba(79,134,247,0.5) 50%,
    rgba(79,134,247,0.15) 100%);
  margin: 0 -2px;
  border-radius: 999px;
  flex-shrink: 0;
}
.ef-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--electric-cyan) 0%, rgba(34,211,238,0.6) 40%, transparent 70%);
  transform: translate(0, -50%);
  filter: drop-shadow(0 0 8px rgba(34,211,238,0.8));
  animation: ef-pulse-travel 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ef-pulse-travel {
  0%       { left: -4px;  opacity: 0; }
  20%      { opacity: 1; }
  80%      { opacity: 1; }
  100%     { left: calc(100% - 8px); opacity: 0; }
}
/* Stagger pulses so they don't all fire at once */
.engine-flow-v2 .ef-connector:nth-of-type(2) .ef-pulse { animation-delay: 0.5s; }
.engine-flow-v2 .ef-connector:nth-of-type(4) .ef-pulse { animation-delay: 1s; }
.engine-flow-v2 .ef-connector:nth-of-type(6) .ef-pulse { animation-delay: 1.5s; }
.engine-flow-v2 .ef-connector:nth-of-type(8) .ef-pulse {
  animation-delay: 2s;
  background: radial-gradient(circle, var(--electric-magenta) 0%, rgba(232,178,90,0.6) 40%, transparent 70%);
  filter: drop-shadow(0 0 10px rgba(232,178,90,0.9));
}

/* Mobile — wrap to two rows, kill some 3D */
@media (max-width: 800px) {
  .engine-flow-v2 { gap: 6px; perspective: none; }
  .engine-flow-v2 .ef-node { min-width: 90px; padding: 10px 12px; font-size: 0.78rem; }
  .ef-icon { font-size: 1.1rem; }
  .ef-label { font-size: 0.74rem; }
  .ef-connector { width: 18px; }
}


/* ─────── Stack restore hint ─────── */
.sb-restore-hint {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: rgba(34,211,238,0.16);
  border: 1px solid rgba(34,211,238,0.45);
  border-radius: 999px;
  color: var(--electric-cyan);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 5;
  text-shadow: 0 0 12px rgba(34,211,238,0.6);
  animation: sb-hint-in 0.5s var(--ease);
  transition: opacity 0.8s, transform 0.8s;
}
.sb-restore-hint.fade { opacity: 0; transform: translateX(-50%) translateY(-8px); }
@keyframes sb-hint-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════
   LIVE AVAILABILITY PULSE + FORM TRUST BADGES
   ════════════════════════════════════════════════════════════════════ */

/* "Live now" pill next to phone */
.hp-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.4);
  border-radius: 999px;
  color: #4ade80;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(74,222,128,0.5);
  white-space: nowrap;
}
.hp-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6), 0 0 8px #22c55e;
  animation: hp-live-pulse 1.6s ease-out infinite;
}
@keyframes hp-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.7), 0 0 8px #22c55e; }
  70%  { box-shadow: 0 0 0 10px rgba(34,197,94,0), 0 0 8px #22c55e; }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0), 0 0 8px #22c55e; }
}

/* Form trust badges row */
.form-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed rgba(79,134,247,0.2);
}
.ft-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(12,20,36,0.65);
  border: 1px solid rgba(79,134,247,0.25);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: #aab8d6;
  white-space: nowrap;
  transition: all 0.2s;
}
.ft-badge:hover {
  background: rgba(79,134,247,0.14);
  border-color: rgba(79,134,247,0.45);
  color: #fff;
  transform: translateY(-1px);
}
.ft-badge svg {
  border-radius: 2px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .form-trust { gap: 6px; }
  .ft-badge { font-size: 0.66rem; padding: 5px 10px; }
}


/* ════════════════════════════════════════════════════════════════════
   SERVICE TIERS — on-site BC / global remote / partnerships
   ════════════════════════════════════════════════════════════════════ */

.service-tiers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 24px 0 28px;
}
.st-tier {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(12,20,36,0.6);
  border: 1px solid rgba(79,134,247,0.25);
  border-radius: 14px;
  transition: all 0.25s var(--ease);
}
.st-tier:hover {
  background: rgba(79,134,247,0.1);
  border-color: rgba(79,134,247,0.5);
  transform: translateY(-2px);
}
.st-icon {
  font-size: 1.4rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(79,134,247,0.5));
  flex-shrink: 0;
}
.st-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.st-text strong {
  color: #eef2fb;
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 600;
}
.st-text span {
  color: #94a3b8;
  font-size: 0.78rem;
  line-height: 1.4;
}
.st-text a {
  color: var(--electric-cyan);
  text-decoration: underline;
  text-decoration-color: rgba(34,211,238,0.4);
}
.st-text a:hover { color: #fff; }

/* Footer global line accent */
.footer-global {
  color: var(--electric-cyan) !important;
  text-shadow: 0 0 8px rgba(34,211,238,0.3);
}


/* ════════════════════════════════════════════════════════════════════
   SOUND TOGGLE — nav cycle button (Ambient → Full → Muted → Ambient)
   ════════════════════════════════════════════════════════════════════ */

.sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 10px;
  padding: 0;
  background: #120826;
  border: 1.5px solid rgba(79,134,247,0.5);
  border-radius: 50%;
  cursor: pointer;
  color: #aab8d6;
  transition: transform 0.2s var(--ease), border-color 0.25s, background 0.25s, box-shadow 0.25s, color 0.25s;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.sound-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}
.sound-toggle:hover {
  transform: scale(1.08);
  border-color: var(--electric-cyan);
  background: rgba(34,211,238,0.12);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(34,211,238,0.18), 0 4px 16px rgba(34,211,238,0.35);
}
.sound-toggle:hover svg { transform: scale(1.06); }
.sound-toggle:active { transform: scale(0.96); }
.sound-toggle:focus-visible { outline: 2px solid var(--electric-cyan); outline-offset: 3px; }

/* AMBIENT — soft cyan glow, gentle breath */
.sound-toggle[data-mode="ambient"] {
  color: var(--electric-cyan);
  border-color: var(--electric-cyan);
  background: rgba(34,211,238,0.08);
  box-shadow: 0 0 0 3px rgba(34,211,238,0.14), 0 0 18px rgba(34,211,238,0.45);
  animation: snd-ambient 3s ease-in-out infinite;
}
@keyframes snd-ambient {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,211,238,0.12), 0 0 14px rgba(34,211,238,0.35); }
  50%      { box-shadow: 0 0 0 5px rgba(34,211,238,0.18), 0 0 28px rgba(34,211,238,0.6); }
}

/* FULL — vibrant gradient, magenta glow */
.sound-toggle[data-mode="full"] {
  color: #fff;
  border-color: var(--electric-magenta);
  background: linear-gradient(135deg, #22d3ee 0%, #4f86f7 50%, #e8b25a 100%);
  box-shadow: 0 0 0 3px rgba(232,178,90,0.22), 0 0 24px rgba(232,178,90,0.6), 0 0 48px rgba(79,134,247,0.4);
}

/* MUTED — dim, no glow */
.sound-toggle[data-mode="muted"] {
  color: #8a99b8;
  border-color: rgba(79,134,247,0.18);
  background: rgba(12,20,36,0.7);
  box-shadow: none;
  animation: none;
}
.sound-toggle[data-mode="muted"]:hover {
  color: #aab8d6;
  border-color: rgba(79,134,247,0.45);
}

@media (max-width: 600px) {
  .sound-toggle { width: 40px; height: 40px; margin-left: 6px; }
  .sound-toggle svg { width: 18px; height: 18px; }
}


/* ════════════════════════════════════════════════════════════════════
   PERF PASS — skip offscreen section rendering + reduce blur expense
   ════════════════════════════════════════════════════════════════════ */

/* content-visibility: auto skips layout/paint for offscreen elements.
   IMPORTANT: implies 'contain: paint' which clips children that extend
   outside the element's box. Only safe on containers WITHOUT floating
   badges/ribbons that overhang their parent. */
.faq-list,
.timeline-v2,
.section-conveyor {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

/* Hero + main sections stay rendered always */
.hero-v2, .section-onsite, .section-cta { content-visibility: visible; }

/* Force-restore visibility on every grid that contains a floating badge
   so their badges/ribbons (proof "Highest ROI", industry "Most-served
   niche", compare "The right door", revenue tier "Most common", Full
   Stack ribbon, etc.) are not clipped */
.proof-grid,
.compare-grid,
.industries-spotlight,
.products-grid-5,
.engines-stack,
.rs-tiers,
.sb-bundles,
.section-proof,
.section-compare,
.section-industries,
.section-products {
  content-visibility: visible !important;
  contain: none !important;
}

/* Cosmic blobs animation paused when reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cosmic-blob, .cosmic-grid, .hero-stars { animation: none !important; }
}

/* Reduce nav backdrop-filter blur cost (24px → 8px is 9× cheaper) */
.nav {
  backdrop-filter: blur(8px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.4) !important;
}
.nav.scrolled {
  backdrop-filter: blur(10px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
}

/* Mascot glow blurs reduced */
.mascot-glow { filter: blur(40px) !important; }
.impact-mascot img,
.calc-mascot-bg img { filter: contrast(1.18) brightness(1.05) saturate(1.1) drop-shadow(0 0 24px rgba(79,134,247,0.4)) !important; }

/* Drop shadow stack on mascot images reduced */
.mascot-img {
  filter:
    contrast(1.22) brightness(1.05) saturate(1.18)
    drop-shadow(0 0 30px rgba(79,134,247,0.42))
    drop-shadow(0 0 60px rgba(232,178,90,0.22)) !important;
}


/* ════════════════════════════════════════════════════════════════════
   OPTIMIZATION ROUND 2 — defensive overflow + tighter mobile + desktop polish
   ════════════════════════════════════════════════════════════════════ */

/* Universal box-sizing safety net (most already inherited from style.min.css) */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, svg { max-width: 100%; height: auto; }

/* Section + container — make sure they never overflow horizontally */
section { max-width: 100vw; }
.container, .container-mid { width: 100%; }

/* ─── Tablet (≤900px) — tighten container padding so content gets more room ─── */
@media (max-width: 900px) {
  .container, .container-mid { padding: 0 20px; }

  /* Hero — slightly more compact */
  .hero-v2 { padding: 100px 0 56px; }
  .hero-v2 h1 { font-size: clamp(2.2rem, 8vw, 3.4rem); }
  .hero-phone { font-size: 0.78rem; gap: 6px; }

  /* Service tiers (BC corridor / global / partnerships) — single column on tablet */
  .service-tiers { grid-template-columns: 1fr; gap: 8px; }

  /* Engine flow — wrap nicer */
  .engine-flow-v2 { gap: 8px; }
  .ef-connector { width: 22px; }

  /* Trust strip wraps cleanly */
  .ts-row { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .ts-item { font-size: 0.82rem; }

  /* Conveyor edge fade narrower so cards stay visible */
  .conveyor-fade { width: 12%; }

  /* Sub-page hero meta — keep horizontal on tablet */
  .psub-meta { gap: 16px; padding: 14px 18px; }
  .psub-price-num { font-size: 1.5rem; }
}

/* ─── Phone (≤600px) — aggressive simplification ─── */
@media (max-width: 600px) {
  /* Container padding even tighter */
  .container, .container-mid { padding: 0 16px; }

  /* Mascot-led hero — lead with the character, copy beneath */
  .hero-v2 { padding: 82px 0 40px; min-height: auto; }
  .hero-layout { display: flex; flex-direction: column; gap: 6px; min-height: 0; text-align: center; }
  .hero-mascot { order: -1; min-height: 0; width: 100%; margin: 0 auto; }
  .mascot-img { max-width: min(82vw, 348px); }
  .hero-v2 .hero-brand { display: none; }     /* nav already carries the EASYWORKS·AI wordmark */
  .hero-v2 h1 { font-size: clamp(2.6rem, 12.5vw, 3.4rem); line-height: 0.98; letter-spacing: -0.04em; }
  .hero-kicker { font-size: 1.02rem; margin-top: 12px; }
  .hero-sub { font-size: 0.95rem; margin: 8px auto 22px; max-width: 30rem; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  /* Hero phone — wrap on mobile properly */
  .hero-phone {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
  }
  .hp-live { font-size: 0.62rem; padding: 2px 8px; }
  .hp-detail { font-size: 0.74rem; }
  .hp-dot { display: none; }

  /* Trust strip stacks ts-items 2-per-row */
  .ts-row { gap: 10px 14px; }
  .ts-item { font-size: 0.76rem; }
  .ts-item svg { width: 16px; height: 14px; }

  /* Section headers tighter */
  .section-header h2 { font-size: clamp(1.7rem, 7.5vw, 2.4rem); }
  .section-header { margin-bottom: 24px; }

  /* Engine hero cards collapse + cleaner — already done but tighten gap */
  .engine-hero { padding: 20px 18px; gap: 16px; }
  .eh-mascot { min-height: 200px; }
  .eh-mascot img { max-width: 200px; }
  .engine-hero h3 { font-size: 1.3rem; }
  .eh-pitch { font-size: 0.9rem; line-height: 1.5; }
  .eh-list { gap: 2px 0; font-size: 0.85rem; }
  .eh-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .eh-head .ec-price { text-align: left; font-size: 0.9rem; }

  /* Standard engine cards */
  .engine-card { padding: 22px 18px; border-radius: 18px; }
  .engine-card h3 { font-size: 1.4rem; }
  .ec-pitch { font-size: 0.9rem; }
  .ec-list { font-size: 0.86rem; }
  .ec-mascot { height: 160px; margin: -8px -8px 10px; }
  .ec-mascot::after { width: 44px; height: 44px; background-size: 26px 26px; bottom: 8px; right: 8px; }

  /* Stack builder tighter, ribbon smaller + adjusted */
  .stack-builder-v2 { padding: 22px 16px; border-radius: 18px; margin-top: 32px; }
  .sb-head h3 { font-size: 1.4rem; }
  .sb-bundle { padding: 14px 12px; }
  .sb-bundle .bdl-name { font-size: 0.92rem; }
  .sb-bundle .bdl-list { font-size: 0.72rem; }
  .sb-bundle .bdl-price { font-size: 0.78rem; }
  .sb-engine { padding: 12px 14px; flex-wrap: wrap; }
  .sb-name { font-size: 0.92rem; }
  .sb-cost { font-size: 0.78rem; flex-basis: 100%; }
  .sb-ribbon { right: -10px; top: -12px; width: 110px; height: 24px; }
  .sb-ribbon-text { font-size: 0.6rem; }
  .sb-row { font-size: 0.85rem; }
  .sb-row-total { font-size: 1rem; }
  .sb-total-num { font-size: 1.1rem; }

  /* Industries spotlight tighter */
  .ind-card { padding: 22px 18px; }
  /* Keep the badge INSIDE the featured card on mobile so it can't get clipped
     by the card directly above in the vertical stack. */
  .ind-card.ind-featured { padding-top: 44px; }
  .ind-badge { font-size: 0.6rem; padding: 4px 10px; top: 12px; }
  .ind-stat strong { font-size: 1.2rem; }

  /* Conveyor — slightly smaller cards */
  .conv-card { padding: 9px 14px 9px 11px; font-size: 0.78rem; }
  .cv-emoji { font-size: 1.05rem; }

  /* Comparison band */
  .compare-col { padding: 22px 18px; }
  .compare-col h3 { font-size: 1.4rem; }
  .compare-us { transform: none !important; }
  .compare-us:hover { transform: translateY(-4px); }
  .cmp-best { font-size: 0.6rem; padding: 4px 10px; }

  /* Proof / testimonials */
  .proof-card { padding: 22px 18px; }
  .pc-quote { font-size: 0.95rem; }
  .pc-quote::before { font-size: 2.4rem; top: -4px; left: -4px; }
  .proof-card-featured { transform: none; }
  .proof-card-featured:hover { transform: translateY(-4px); }
  .pc-badge { font-size: 0.62rem; padding: 5px 11px 4px; top: 14px; line-height: 1.1; }
  .proof-card-featured { padding-top: 46px; }
  .proof-grid { padding-top: 8px; }

  /* Onsite section tighter */
  .onsite-band-v2 { gap: 24px; padding: 16px 0; }
  .onsite-mascot { min-height: 240px; }
  .onsite-mascot img { max-width: 260px; }
  .onsite-body { font-size: 0.95rem; line-height: 1.5; margin: 14px 0 20px; }

  /* Form trust badges wrap cleanly */
  .form-trust { gap: 6px; padding-top: 18px; margin-top: 18px; }
  .ft-badge { font-size: 0.64rem; padding: 4px 9px; }
  .ft-badge svg { width: 14px; height: 11px; }

  /* Sticky CTA — ensure it doesn't cover form */
  .sticky-cta { padding: 9px 14px 9px 11px; font-size: 0.82rem; }
  .sticky-cta .sc-text { font-size: 0.82rem; }

  /* Sound toggle tightened */
  .sound-toggle { width: 38px; height: 38px; margin-left: 4px; }
  .sound-toggle svg { width: 17px; height: 17px; }

  /* Sub-page hero */
  .psub-hero { padding: 96px 0 48px; }
  .psub-hero-grid { gap: 24px; }
  .psub-hero-icon { min-height: 220px; }
  .psub-hero-icon img { max-width: 200px; border-radius: 22px; }
  .psub-hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .psub-tagline { font-size: 1.05rem; }
  .psub-pitch { font-size: 0.95rem; }
  .psub-meta { padding: 12px 16px; gap: 12px; }
  .psub-price-num { font-size: 1.4rem; }
  .psub-cta-row .btn { flex: 1; min-width: 0; }

  /* Sub-page rs-features tighter */
  .rs-features { gap: 14px; margin-top: 28px; }
  .rs-feat { padding: 22px 18px; }
  .rs-feat h3 { font-size: 1.15rem; }
  .rs-feat p { font-size: 0.9rem; }

  /* Process timeline */
  .tl-card { padding: 20px 16px; }
  .tl-card h3 { font-size: 1rem; }
  .tl-card p { font-size: 0.85rem; }
  .tl-icon { font-size: 1.8rem; }
  .tl-time { font-size: 0.62rem; padding: 3px 8px; }

  /* FAQ */
  .faq-q { padding: 14px 16px; font-size: 0.92rem; }

  /* CTA / form */
  .section-cta { padding: 44px 0 70px; }
  .cta-header h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .form-grid { grid-template-columns: 1fr; }
  .form input, .form select, .form textarea { padding: 12px 14px; font-size: 0.95rem; }

  /* Footer single column tighter */
  .footer { padding: 48px 0 24px; }
  .footer-grid { gap: 28px; }
  .footer-bar { flex-direction: column; gap: 12px; text-align: center; font-size: 0.78rem; }

  /* Revenue Scale page calculator stacks */
  .calc-panel { padding: 22px 18px; }
  .calc-value { font-size: clamp(2.2rem, 9vw, 3.2rem); }

  /* Page loader stage smaller on phone */
  .pl-stage { width: 200px; height: 200px; }
  .pl-orb { width: 64px; height: 64px; }

  /* Engine flow: vertical stack on mobile so nothing gets clipped */
  .engine-flow-v2 {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 8px 0;
    margin: 24px auto 40px;
    max-width: 280px;
  }
  .engine-flow-v2 .ef-node {
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
    padding: 14px 18px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
  }
  .engine-flow-v2 .ef-icon { font-size: 1.5rem; }
  .engine-flow-v2 .ef-label { white-space: normal; font-size: 0.95rem; }
  .engine-flow-v2 .ef-connector {
    width: 2px;
    height: 18px;
    margin: 4px 0;
    background: linear-gradient(180deg,
      rgba(79,134,247,0.15) 0%,
      rgba(79,134,247,0.5) 50%,
      rgba(79,134,247,0.15) 100%);
  }
  .engine-flow-v2 .ef-pulse { display: none; }
}

/* ─── Wide desktop polish (≥1200px) ─── */
@media (min-width: 1200px) {
  .container { max-width: 1180px; }
}

/* ─── Ultra-wide (≥1600px) — don't let content stretch awkwardly ─── */
@media (min-width: 1600px) {
  .hero-v2 .hero-layout { max-width: 1280px; margin: 0 auto; }
  .section-header h2 { max-width: 900px; margin-left: auto; margin-right: auto; }
}


/* ════════════════════════════════════════════════════════════════════
   FLOATING / BOB ANIMATIONS — primary CTAs + all featured badges
   ════════════════════════════════════════════════════════════════════ */

@keyframes badge-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}
@keyframes badge-float-right {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-1deg); }
}
@keyframes btn-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* All centered floating badges get the gentle bob */
.pc-badge,
.cmp-best,
.rs-tier-best,
.sb-bundle .bdl-tag {
  animation: badge-float 3.4s ease-in-out infinite;
}

/* Stagger animation delays so they don't sync */
.pc-badge        { animation-delay: -0.5s; }
.cmp-best        { animation-delay: -1.2s; }
.rs-tier-best    { animation-delay: -1.8s; }
.sb-bundle .bdl-tag { animation-delay: -2.4s; }

/* Primary CTAs float gently when at rest. Pauses on hover. */
.btn-accent.btn-glow,
.btn-accent.btn-lg {
  animation: btn-bob 4.2s ease-in-out infinite;
  animation-delay: -1s;
}
.btn-accent.btn-glow:hover,
.btn-accent.btn-lg:hover {
  animation-play-state: paused;
}
.hero-cta .btn-accent { animation-delay: 0s; }
.sb-cta { animation-delay: -2s; }
.btn-submit { animation-delay: -3s; }

/* Sticky CTA doesn't need extra bob — it already has the pulse dot */
.sticky-cta { animation: none !important; }

/* Sound toggle glow halos already have their own animation — don't double up */

/* Reduced motion respects */
@media (prefers-reduced-motion: reduce) {
  .pc-badge, .cmp-best, .rs-tier-best, .sb-bundle .bdl-tag,
  .btn-accent.btn-glow, .btn-accent.btn-lg, .ind-badge {
    animation: none !important;
  }
}

/* Phone — reduce floating amplitude */
@media (max-width: 600px) {
  @keyframes badge-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-2px); }
  }
  @keyframes btn-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
  }
}


/* ════════════════════════════════════════════════════════════════════
   HORIZONTAL OVERFLOW GUARD — kill mobile left/right scroll
   ════════════════════════════════════════════════════════════════════ */

/* overflow-x: clip (not hidden) — clips horizontal bleed WITHOUT breaking
   position: sticky on the nav or creating a scroll container */
html {
  overflow-x: clip;
  max-width: 100%;
}
body {
  overflow-x: clip;
  max-width: 100vw;
  position: relative;
}

/* Fixed cosmic decorations must never push the scroll width.
   They're decorative + pointer-events:none so clamping is safe. */
.cosmic-grid {
  width: 100vw !important;
  max-width: 100vw;
  left: 0 !important;
  transform: perspective(800px) rotateX(60deg) !important;
  transform-origin: center bottom;
}
#cosmic-canvas { max-width: 100vw; }
.cosmic-blob {
  max-width: 100vw;
}

/* Mascot orbit rings at 120% width were poking past the hero on narrow
   screens — keep the hero-mascot column from ever causing scroll */
.hero-mascot { max-width: 100%; overflow: visible; }
.mascot-orbit { max-width: 130%; }

/* Any absolutely-positioned decoration clamps to viewport */
.geo-shape, .impact-mascot, .calc-mascot-bg {
  max-width: 90vw;
}

/* Conveyor: the marquee tracks are intentionally wide but MUST stay
   clipped by the lane. Reassert it defensively. */
.conv-lane { max-width: 100vw; overflow-x: clip; }
.conveyor-stage { max-width: 100vw; overflow-x: clip; }

/* Wide grids fall back to single column earlier so cards never clip */
@media (max-width: 600px) {
  .hero-layout,
  .engine-hero,
  .engines-row-2,
  .compare-grid,
  .proof-grid,
  .industries-spotlight,
  .products-grid-5,
  .rs-tiers,
  .rs-features,
  .service-tiers,
  .sb-bundles,
  .sb-engines,
  .impact-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
  /* Anything that was a flex row wraps */
  .ts-row, .form-trust, .industries-others, .hero-cta, .psub-cta-row {
    flex-wrap: wrap;
  }
  /* Section padding tighter so 100vw - padding still fits content */
  .section { padding-left: 0; padding-right: 0; }
  .container, .container-mid { padding: 0 16px; }
  /* Kill the 3D perspective tilt on conveyor (was widening lanes) */
  .conv-lane-1, .conv-lane-2, .conv-lane-3 { transform: none !important; }
  /* Hero wide cards: mascot + content stack, never side-by-side */
  .engine-hero { grid-template-columns: 1fr !important; text-align: center; }
  .eh-mascot { max-width: 100%; }
  .eh-mascot img { max-width: 220px; margin: 0 auto; }
  /* Stat/feature numbers don't overflow */
  .impact-num, .cmp-cost strong, .rs-tier-fee strong { font-size: clamp(2rem, 9vw, 2.6rem); word-break: break-word; }
}

/* SVG safety: only constrain genuinely large decorative SVGs, NOT UI icons.
   (The earlier blanket `svg { max-width:100%; height:auto }` could squish
   fixed-size nav/button icons — scope it out.) */
.nav svg, .btn svg, .sound-toggle svg, .ef-icon svg,
.ts-item svg, .footer svg, .sticky-cta svg, .pc-avatar svg {
  max-width: none;
  height: auto;
  width: auto;
}


/* ════════════════════════════════════════════════════════════════════
   v3 BRANDED ANIMATED GLYPHS — replace over-repeated mascots
   serious line-art, blue/cyan; gold reserved for revenue
   ════════════════════════════════════════════════════════════════════ */
.eng-glyph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px}
.eh-mascot .eng-glyph{min-height:300px}
.eng-glyph svg{width:62%;max-width:300px;height:auto;overflow:visible}
.eh-mascot .eng-glyph svg{width:70%;max-width:380px}
.eng-glyph .gl-stroke{fill:none;stroke:var(--electric-cyan);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.eng-glyph .gl-stroke-2{stroke:var(--accent-blue)}
.eng-glyph .gl-gold{stroke:var(--gold);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.eng-glyph .gl-fill-gold{fill:var(--gold)}
.eng-glyph .gl-dim{stroke:rgba(125,211,252,.35)}
.eng-glyph .gl-glow{filter:drop-shadow(0 0 10px rgba(34,211,238,.45))}
.eng-glyph .gl-glow-gold{filter:drop-shadow(0 0 12px rgba(232,178,90,.5))}
@media (prefers-reduced-motion:no-preference){
  .gl-ring{transform-origin:center;animation:glRing 2.6s ease-out infinite}
  .gl-ring.r2{animation-delay:.6s}.gl-ring.r3{animation-delay:1.2s}
  @keyframes glRing{0%{opacity:.9;transform:scale(.35)}70%{opacity:0}100%{opacity:0;transform:scale(1)}}
  .gl-rise{animation:glRise 3s ease-in-out infinite}
  @keyframes glRise{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}
  .gl-draw{stroke-dasharray:240;stroke-dashoffset:240;animation:glDraw 3.4s ease-in-out infinite}
  @keyframes glDraw{0%{stroke-dashoffset:240}55%{stroke-dashoffset:0}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.15}}
  .gl-bar{transform-origin:bottom;animation:glBar 2.4s ease-in-out infinite}
  .gl-bar.b2{animation-delay:.25s}.gl-bar.b3{animation-delay:.5s}.gl-bar.b4{animation-delay:.75s}
  @keyframes glBar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
  .gl-wave path{stroke-dasharray:6 8;animation:glWave 1.6s linear infinite}
  @keyframes glWave{to{stroke-dashoffset:-28}}
  .gl-coin{animation:glCoin 3s ease-in-out infinite}
  .gl-coin.c2{animation-delay:.5s}.gl-coin.c3{animation-delay:1s}
  @keyframes glCoin{0%{opacity:0;transform:translateY(14px) scale(.7)}40%{opacity:1}100%{opacity:0;transform:translateY(-26px) scale(1)}}
  .gl-pub{animation:glPub 3.2s ease-in-out infinite}
  .gl-pub.p2{animation-delay:.5s}.gl-pub.p3{animation-delay:1s}
  @keyframes glPub{0%{opacity:0;transform:translateY(16px)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
}

/* v3 pricing clarity */
.bdl-price small{display:block;font-size:.72rem;color:#94a3b8;font-weight:500;margin-top:1px}
.sb-row .pr-setup{font-family:var(--mono);font-size:.78rem;color:#94a3b8}
.sb-cost{white-space:nowrap}

/* v3 related-card thumb — on-brand chip (replaces old purple product imgs) */
.rp-icon-dot{width:44px;height:44px;border-radius:12px;flex:none;background:linear-gradient(135deg,rgba(59,130,246,.25),rgba(34,211,238,.25));border:1px solid rgba(34,211,238,.4);position:relative}
.rp-icon-dot::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;background:var(--electric-cyan);box-shadow:0 0 12px rgba(34,211,238,.6)}

/* ═══════════════════════════════════════════════════════════════════
   COST-OF-INACTION BAND (.section-leak)
   ═══════════════════════════════════════════════════════════════════ */
.section-leak { padding: 80px 0; position: relative; }
.leak-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 40px auto 28px;
  max-width: 720px;
}
.leak-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
  background: linear-gradient(90deg, rgba(232,178,90,0.08), rgba(7,11,22,0.6));
  border: 1px solid rgba(232,178,90,0.28);
  border-left: 3px solid #e8b25a;
  border-radius: 12px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.leak-row:hover {
  transform: translateX(4px);
  border-left-color: #ffd380;
}
.leak-amt {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.6rem;
  color: #e8b25a;
  min-width: 110px;
  text-shadow: 0 0 16px rgba(232,178,90,0.3);
  white-space: nowrap;
}
.leak-label {
  font-size: 0.98rem;
  color: #eef2fb;
  line-height: 1.4;
}
.leak-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px;
  margin-top: 6px;
  background: linear-gradient(90deg, rgba(232,178,90,0.18), rgba(232,178,90,0.06));
  border: 1.5px solid rgba(232,178,90,0.55);
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(232,178,90,0.18);
}
.leak-total-label {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e8b25a;
}
.leak-total-amt {
  font-family: var(--font);
  font-weight: 800;
  font-size: 2.2rem;
  background: linear-gradient(90deg, #e8b25a, #ffd380);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(232,178,90,0.4);
}
.leak-punch {
  text-align: center;
  font-size: 1.15rem;
  color: #cdd8ee;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.55;
}
.leak-punch strong { color: #22d3ee; }

@media (max-width: 600px) {
  .section-leak { padding: 56px 0; }
  .leak-row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px; }
  .leak-amt { font-size: 1.4rem; min-width: 0; }
  .leak-label { font-size: 0.92rem; }
  .leak-total { flex-direction: column; gap: 10px; text-align: center; }
  .leak-total-amt { font-size: 1.8rem; }
  .leak-punch { font-size: 1rem; padding: 0 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE PROMISE / RISK-REVERSAL (.section-promise)
   ═══════════════════════════════════════════════════════════════════ */
.section-promise { padding: 80px 0 60px; position: relative; }
.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.promise-card {
  padding: 26px 22px;
  background: linear-gradient(180deg, rgba(12,20,36,0.7), rgba(7,11,22,0.85));
  border: 1px solid rgba(34,211,238,0.22);
  border-radius: 18px;
  transition: all 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}
.promise-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(34,211,238,0.16), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.promise-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34,211,238,0.55);
  box-shadow: 0 20px 50px rgba(34,211,238,0.18);
}
.promise-card:hover::before { opacity: 1; }
.promise-icon {
  font-size: 1.8rem;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 12px rgba(34,211,238,0.35));
}
.promise-card h3 {
  font-size: 1.1rem;
  margin: 0 0 8px;
  color: #ffffff;
  font-weight: 700;
}
.promise-card p {
  font-size: 0.94rem;
  color: #cdd8ee;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  .promise-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .section-promise { padding: 56px 0 40px; }
  .promise-grid { grid-template-columns: 1fr; gap: 14px; }
  .promise-card { padding: 22px 18px; }
}

/* Scarcity bar — June BC clients cap */
.scarcity-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto 32px;
  padding: 14px 22px;
  background: linear-gradient(135deg, rgba(232,178,90,0.10), rgba(232,178,90,0.04));
  border: 1px solid rgba(232,178,90,0.35);
  border-radius: 999px;
  color: #f4e3c0;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 0 32px rgba(232,178,90,0.08);
}
.scarcity-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e8b25a;
  box-shadow: 0 0 12px rgba(232,178,90,0.9);
  animation: scarcityPulse 1.8s ease-in-out infinite;
}
@keyframes scarcityPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}
.scarcity-text strong { color: #e8b25a; }
.scarcity-spots { color: #fff; font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) {
  .scarcity-bar {
    border-radius: 18px;
    padding: 12px 16px;
    font-size: 0.88rem;
    flex-wrap: wrap;
  }
  .scarcity-spots { display: block; width: 100%; margin-top: 4px; }
}

/* Sticky CTA — scarcity variant */
.sticky-cta-scarcity .sc-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  gap: 1px;
}
.sticky-cta-scarcity .sc-scarcity {
  font-size: 0.72rem;
  font-weight: 700;
  color: #e8b25a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sticky-cta-scarcity .sc-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
}
.sticky-cta-scarcity .sc-dot {
  background: #e8b25a;
  box-shadow: 0 0 10px rgba(232,178,90,0.85);
}
@media (max-width: 480px) {
  .sticky-cta-scarcity .sc-scarcity { font-size: 0.65rem; }
  .sticky-cta-scarcity .sc-label { font-size: 0.85rem; }
}

/* Flight plan — "What happens after you book" timeline */
.section-flight { padding: 80px 0 60px; }
.flight-list {
  list-style: none;
  padding: 0;
  margin: 48px auto 0;
  max-width: 760px;
  position: relative;
}
.flight-list::before {
  content: "";
  position: absolute;
  left: 92px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, rgba(59,130,246,0.6), rgba(34,211,238,0.4) 50%, rgba(34,211,238,0.1));
}
.flight-step {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 24px;
  padding: 14px 0 22px;
}
.flight-step::before {
  content: "";
  position: absolute;
  left: 86px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #070b16;
  border: 2px solid #22d3ee;
  box-shadow: 0 0 14px rgba(34,211,238,0.6);
  z-index: 1;
}
.flight-step-final::before {
  background: #22d3ee;
  box-shadow: 0 0 20px rgba(34,211,238,0.9);
}
.flight-day {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #22d3ee;
  padding-top: 20px;
  text-align: right;
  padding-right: 8px;
}
.flight-body { padding-left: 16px; }
.flight-body h3 {
  font-size: 1.15rem;
  margin: 0 0 6px;
  color: #fff;
  font-weight: 600;
}
.flight-body p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 600px) {
  .section-flight { padding: 56px 0 40px; }
  .flight-list::before { left: 64px; }
  .flight-step { grid-template-columns: 64px 1fr; gap: 16px; }
  .flight-step::before { left: 58px; }
  .flight-day { font-size: 0.7rem; padding-top: 18px; padding-right: 4px; }
  .flight-body { padding-left: 8px; }
  .flight-body h3 { font-size: 1rem; }
  .flight-body p { font-size: 0.88rem; }
}

/* Footer status strip — live local time + deploy freshness */
.status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 32px auto 16px;
  max-width: 820px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.02em;
}
.status-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.status-label { color: rgba(255,255,255,0.42); }
.status-sep { color: rgba(255,255,255,0.18); }
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot-ok {
  background: #34d399;
  box-shadow: 0 0 8px rgba(52,211,153,0.7);
  animation: statusPulse 2.4s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (max-width: 600px) {
  .status-strip { gap: 8px 12px; font-size: 0.72rem; padding: 12px 14px; }
  .status-sep { display: none; }
}