/* ============================================================
   PAWN LEADS - Agency Site v1
   Brand: blues #1b8df6/#0044ff, navy #0e182c/#152741, Inter Tight
   Theme: dark (locked, whole page)
   ============================================================ */

:root {
  --ink: #0b1424;
  --ink-2: #0e182c;
  --ink-3: #152741;
  --line: rgba(173, 229, 255, 0.14);
  --text: #eef4fb;
  --text-dim: #aebed3;
  --accent: #1b8df6;
  --accent-deep: #0a6fd4;
  --paper: #fafafa;
  --radius: 16px;
  --font: "Inter Tight", system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* no text inputs on this site: hide the insertion caret so browser
   caret-browsing (F7) never paints a blinking bar in our copy.
   Form fields (booking iframe is its own document) keep theirs. */
html { caret-color: transparent; }
input, textarea, select, [contenteditable] { caret-color: auto; }
body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---------- global atmosphere ---------- */
/* film grain over everything: fixed, non-scrolling, GPU-cheap */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.045; mix-blend-mode: overlay;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
section { padding: 7rem 0; position: relative; }

h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.06; font-weight: 800; }
h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); margin-bottom: 1.2rem; }
h3 { font-size: 1.35rem; letter-spacing: -0.01em; }
p  { color: var(--text-dim); max-width: 62ch; }
.lead { font-size: 1.18rem; }

.eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent); margin-bottom: 1rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 1.02rem; font-family: var(--font);
  padding: 0.95rem 1.8rem; border-radius: 999px; border: 0;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), background 0.18s, box-shadow 0.18s;
  box-shadow: 0 8px 30px rgba(27, 141, 246, 0.28);
}
.btn:hover { background: var(--accent-deep); transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn.ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line); box-shadow: none;
}
.btn.ghost:hover { background: rgba(255,255,255,0.06); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 72px; display: flex; align-items: center;
  background: rgba(11, 20, 36, 0.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { font-weight: 900; font-size: 1.2rem; letter-spacing: -0.01em; text-transform: uppercase; display: flex; align-items: center; gap: .5rem; }
.brand .dot { color: var(--accent); }
.brand-ico { height: 1.4em; width: auto; display: block; flex: none; }
.foot-brand .brand-ico { height: 1.5em; }
.nav-links { display: flex; gap: 1.8rem; align-items: center; font-weight: 600; font-size: 0.95rem; }
.nav-links a { color: var(--text-dim); transition: color 0.15s; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav .btn { padding: 0.6rem 1.25rem; font-size: 0.92rem; }

/* ---------- Shmello software login pill ---------- */
.nav-links a.login-shmello {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .42rem .85rem .42rem .55rem; border-radius: 999px;
  color: var(--text); font-weight: 700;
  background: linear-gradient(180deg, rgba(230,200,120,.16), rgba(27,141,246,.12));
  border: 1px solid rgba(230,200,120,.45);
  box-shadow: 0 0 0 0 rgba(230,200,120,.45);
  transition: box-shadow .25s ease, border-color .25s ease, transform .15s ease;
}
.nav-links a.login-shmello:hover {
  border-color: rgba(230,200,120,.85);
  box-shadow: 0 0 18px rgba(230,200,120,.35);
  transform: translateY(-1px);
}
.login-mallow {
  width: 22px; height: 22px; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
  animation: mallowBob 2.8s ease-in-out infinite;
}
@keyframes mallowBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-2.5px) rotate(3deg); }
}
.nav-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 1.6rem; cursor: pointer; }

/* ---------- nav dropdown (Shmello use cases) ---------- */
.nav-dd { position: relative; }
.nav-dd > .dd-toggle {
  display: inline-flex; align-items: center; gap: .32rem;
  color: var(--text-dim); cursor: pointer; transition: color 0.15s;
  background: none; border: 0; font: inherit; font-weight: 600; padding: 0;
}
.nav-dd > .dd-toggle:hover, .nav-dd > .dd-toggle.active { color: var(--text); }
.nav-dd > .dd-toggle .caret { font-size: .7rem; transition: transform .25s ease; opacity: .8; }
.nav-dd.open > .dd-toggle .caret { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 264px; padding: .5rem; z-index: 120;
  background: rgba(13, 25, 44, 0.97);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
/* hover bridge so the menu doesn't vanish crossing the gap */
.dd-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-dd:hover .dd-menu, .nav-dd.open .dd-menu, .nav-dd:focus-within .dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dd-item {
  display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .8rem;
  border-radius: 11px; text-decoration: none; transition: background .18s ease;
}
.dd-item:hover { background: rgba(27,141,246,.1); }
.dd-item i { font-size: 1.15rem; color: var(--accent); margin-top: .12rem; flex: 0 0 auto; }
.dd-item .dd-tx b { display: block; color: var(--text); font-size: .92rem; font-weight: 700; }
.dd-item .dd-tx span { display: block; color: var(--text-dim); font-size: .76rem; line-height: 1.35; margin-top: .1rem; }
.dd-sep { height: 1px; background: var(--line); margin: .4rem .6rem; }

/* ---------- hero ---------- */
.hero {
  min-height: 100dvh; display: flex; align-items: center;
  padding: 7.5rem 0 4rem; position: relative;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(27,141,246,0.16), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(0,68,255,0.12), transparent 60%),
    var(--ink);
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 4rem; align-items: center; width: 100%;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.3rem);
  margin-bottom: 1.4rem;
}
.hero h1 em { font-style: italic; color: var(--accent); line-height: 1.1; padding-bottom: 0.1em; }
.hero .lead { margin-bottom: 2.2rem; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.hero-note { font-size: 0.9rem; color: var(--text-dim); margin-top: 1rem; }

/* ---------- 3D cube ---------- */
.cube-stage { perspective: 1100px; display: flex; justify-content: center; }
.cube {
  --size: clamp(220px, 24vw, 320px);
  width: var(--size); height: var(--size);
  position: relative; transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(28deg);
}
.cube .face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
  align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(27,141,246,0.16), rgba(14,24,44,0.94));
  border: 1px solid rgba(27,141,246,0.4);
  border-radius: 18px;
  font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  backface-visibility: hidden;
}
.cube .face small { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); letter-spacing: 0.04em; }
.cube .f1 { transform: translateZ(calc(var(--size) / 2)); }
.cube .f2 { transform: rotateY(90deg) translateZ(calc(var(--size) / 2)); }
.cube .f3 { transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
.cube .f4 { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
.cube .f5 { transform: rotateX(90deg) translateZ(calc(var(--size) / 2)); }
.cube .f6 { transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); }

/* ---------- stat marquee ---------- */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.4rem 0; overflow: hidden; background: var(--ink-2);
}
.marquee-track { display: flex; gap: 4rem; width: max-content; animation: marquee 36s linear infinite; }
.marquee-item { display: flex; gap: 0.7rem; align-items: baseline; white-space: nowrap; }
.marquee-item b { font-size: 1.25rem; color: var(--text); }
.marquee-item span { color: var(--text-dim); font-size: 0.95rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ---------- stigma (cinematic dark) ---------- */
.stigma { background: #070d18; overflow: clip; position: relative; }
/* spotlight cone: the "90% in the dark" metaphor */
.stigma::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(56% 48% at 26% 30%, rgba(27,141,246,0.10), transparent 72%),
    radial-gradient(40% 36% at 82% 76%, rgba(27,141,246,0.05), transparent 70%);
}
/* faint city-skyline dot field */
.stigma::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(174,190,211,0.13) 1px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 95%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 95%);
  opacity: 0.5;
}
.stigma .wrap { position: relative; z-index: 1; }
.stigma .big {
  font-size: clamp(2.4rem, 5.6vw, 4rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.04; max-width: 18ch;
}
.stigma .big .pct { color: var(--accent); }
.villains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 3.5rem 0; }
.villain { background: #0a1322; padding: 1.8rem 1.5rem; transition: background .25s; }
.villain:hover { background: #0d1a2e; }
.villain .src { font-size: 0.8rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.villain p { font-size: 0.95rem; margin-top: 0.5rem; }
.stigma .turn { max-width: 56ch; font-size: 1.25rem; color: var(--text); font-weight: 600; }

/* ---------- diagnosis / chooser ---------- */
.diagnose { background: var(--ink-2); position: relative; overflow: clip; }
/* blueprint grid: the "we draw the plan" room */
.diagnose::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(27,141,246,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,141,246,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 90% at 50% 20%, #000, transparent 85%);
  -webkit-mask-image: radial-gradient(80% 90% at 50% 20%, #000, transparent 85%);
}
/* corner glow pulse */
.diagnose::after {
  content: ""; position: absolute; width: 560px; height: 560px; right: -200px; top: -220px;
  z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(27,141,246,0.14), transparent 65%);
}
.diagnose .wrap { position: relative; z-index: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 2.4rem 0; max-width: 880px; }
.chip {
  font-family: var(--font); font-size: 1rem; font-weight: 600;
  color: var(--text); background: rgba(255,255,255,0.04);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.8rem 1.4rem; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.chip:hover { border-color: var(--accent); transform: translateY(-2px); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rx-card {
  border: 1px solid rgba(27,141,246,0.45); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(27,141,246,0.10), rgba(14,24,44,0.6));
  padding: 2.4rem; max-width: 880px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none; height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; border-width: 0;
}
.rx-card.show {
  opacity: 1; transform: translateY(0); pointer-events: auto;
  height: auto; padding: 2.4rem; border-width: 1px;
}
.rx-card .rx-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.rx-card h3 { font-size: 1.7rem; margin: 0.6rem 0 0.8rem; }
.rx-card .proof { font-size: 0.95rem; color: var(--text); background: rgba(255,255,255,0.05); border-left: 3px solid var(--accent); padding: 0.8rem 1.1rem; border-radius: 0 10px 10px 0; margin: 1.2rem 0 1.6rem; max-width: 60ch; }

/* ---------- proof: horizontal pan ---------- */
.proof-pan { background: var(--ink); padding: 0; }
.proof-head { padding: 7rem 0 0; }
.pan-track { display: flex; align-items: center; gap: 2rem; padding: 0 6vw; }
.proof-card {
  flex: 0 0 auto; width: min(440px, 78vw);
  background: linear-gradient(165deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.6rem 2.2rem; min-height: 360px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
}
.proof-card .num { font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.proof-card h3 { font-size: 1.25rem; }
.proof-card p { font-size: 0.98rem; }

/* ---------- services v3: stat-anchored bento ---------- */
.services { background: var(--ink-2); position: relative; overflow: clip; }
/* armory wall: diagonal hatch texture */
.services::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(27,141,246,0.035) 0 1px,
    transparent 1px 18px
  );
  mask-image: radial-gradient(90% 80% at 50% 50%, #000, transparent 95%);
  -webkit-mask-image: radial-gradient(90% 80% at 50% 50%, #000, transparent 95%);
}
.services .wrap { position: relative; z-index: 1; }
.svc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; margin-top: 3rem; }
.svc {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem; background: var(--ink);
  display: flex; flex-direction: column; gap: 1.1rem;
  min-height: 250px; position: relative; overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), border-color 0.25s;
}
.svc{cursor:default;}
.svc-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;padding:.15rem 0;}
.svc-link i{font-size:.85em;color:var(--accent);transition:transform .18s ease;}
.svc-link:hover{color:#7fc1ff;}
.svc-link:hover i{transform:translateX(3px);}
.svc:hover { transform: translateY(-4px); border-color: rgba(27,141,246,0.55); }
.svc h3 { color: var(--text); }
.svc p { font-size: 0.95rem; }
.svc-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.svc-meta { margin-top: auto; position: relative; z-index: 2; }
.svc-meta h3 { margin-bottom: 0.3rem; }
.icon-chip {
  width: 46px; height: 46px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(27,141,246,0.13); border: 1px solid rgba(27,141,246,0.4);
  color: #6fc1ff; font-size: 1.35rem;
}
.svc .go { color: var(--accent); font-weight: 700; font-size: 1.25rem; transition: transform .25s; }
.svc:hover .go { transform: translate(4px, -4px); }

/* the big stat anchor */
.svc-stat {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 900;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--text);
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  position: relative; z-index: 2;
}
.svc-stat .stat-arrow { color: var(--accent); font-size: 0.7em; align-self: center; }
.stat-unit { font-size: 0.85rem; font-weight: 600; color: var(--text-dim); letter-spacing: 0; }

/* ambient glow per card */
.svc-glow {
  position: absolute; width: 320px; height: 320px; border-radius: 50%;
  filter: blur(70px); opacity: 0.35; pointer-events: none; z-index: 1;
  transition: opacity .3s;
}
.svc:hover .svc-glow { opacity: 0.55; }
.g-a { background: #1b8df6; top: -160px; right: -120px; }
.g-b { background: #0044ff; bottom: -180px; left: -120px; }
.g-c { background: #1b8df6; bottom: -180px; right: -140px; opacity: 0.25; }
.g-d { background: #f6ad55; top: -180px; right: -140px; opacity: 0.18; }
.g-e { background: #6fc1ff; bottom: -180px; right: -140px; opacity: 0.25; }
.g-f { background: #1b8df6; top: -200px; left: 30%; opacity: 0.2; }

/* websites: client pills */
.svc-sites { display: flex; flex-wrap: wrap; gap: 0.5rem; position: relative; z-index: 2; }
.site-pill {
  font-size: 0.85rem; font-weight: 600; color: var(--text);
  background: rgba(255,255,255,0.06); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.4rem 0.9rem;
}
.site-pill.more { color: var(--accent); border-color: rgba(27,141,246,0.45); background: rgba(27,141,246,0.08); }

/* reviews: star strip */
.svc-stars { display: flex; gap: 0.3rem; color: #f6ad55; font-size: 1.15rem; position: relative; z-index: 2; }
.svc-stars i { animation: starPop 2.8s ease-in-out infinite; }
.svc-stars i:nth-child(2) { animation-delay: 0.15s; }
.svc-stars i:nth-child(3) { animation-delay: 0.3s; }
.svc-stars i:nth-child(4) { animation-delay: 0.45s; }
.svc-stars i:nth-child(5) { animation-delay: 0.6s; }
@keyframes starPop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.25); } }

/* shmo card: NFC tap visual */
.tap-card {
  position: relative; z-index: 2; width: 150px; height: 92px;
  border-radius: 12px;
  background: linear-gradient(135deg, #152741 0%, #0e182c 100%);
  border: 1px solid rgba(27,141,246,0.5);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
.tap-card.real {
  width: 180px; height: auto; background: transparent; border: none;
  box-shadow: none; overflow: visible;
}
.tap-card.real img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 30px rgba(0,0,0,0.45)); }
.tap-chip {
  position: absolute; left: 14px; top: 14px; width: 26px; height: 19px;
  border-radius: 4px; background: linear-gradient(135deg, #6fc1ff, #1b8df6);
  opacity: 0.85;
}
.tap-wave {
  position: absolute; right: 12px; bottom: 10px; border-radius: 50%;
  border: 2px solid rgba(111,193,255,0.85); border-left-color: transparent; border-bottom-color: transparent;
  transform: rotate(-45deg);
  animation: tapWave 2.4s ease-out infinite;
  opacity: 0;
}
.tap-wave.w1 { width: 14px; height: 14px; }
.tap-wave.w2 { width: 26px; height: 26px; animation-delay: 0.25s; }
.tap-wave.w3 { width: 38px; height: 38px; animation-delay: 0.5s; }
@keyframes tapWave { 0% { opacity: 0; } 25% { opacity: 1; } 70%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .svc-stars i, .tap-wave { animation: none; }
  .tap-wave { opacity: 0.5; }
}

/* layout spans */
.svc.s-a { grid-column: span 7; }
.svc.s-b { grid-column: span 5; }
.svc.s-c { grid-column: span 4; }
.svc.s-d { grid-column: span 4; }
.svc.s-e { grid-column: span 4; }
.svc.s-f { grid-column: span 12; flex-direction: row; align-items: center; justify-content: space-between; min-height: 0; }
.svc-f-left { display: flex; align-items: center; gap: 1.2rem; position: relative; z-index: 2; }
.svc.s-f h3 { margin-bottom: .25rem; }

/* ---------- mission filter ---------- */
.mission { background: #070d18; text-align: center; position: relative; overflow: clip; }
/* museum gallery: warm spotlight from above onto the frame */
.mission::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 900px; height: 720px;
  transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 12%, rgba(120,190,255,0.12), transparent 70%);
}
/* gallery floor line */
.mission::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 18%;
  height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(120,190,255,0.20), transparent);
}
.mission .wrap { position: relative; z-index: 1; }
.mission-line { max-width: 900px; }
.mission-line strong {
  color: var(--accent); font-weight: 900;
}
.mission-line u {
  text-decoration: underline; text-decoration-color: var(--accent);
  text-underline-offset: 6px; text-decoration-thickness: 3px;
}
/* hero subtitle carries the same tagline as the mission line, so it gets the
   same accent emphasis: bold "incredible", accent-underlined "change the face" */
.hero .lead strong { color: var(--accent); font-weight: 800; }
.hero .lead u {
  text-decoration-color: var(--accent);
  text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.mission .frame {
  width: 200px; height: 240px; margin: 3rem auto;
  border: 14px solid #c9a44a;
  border-image: linear-gradient(140deg, #e6c878, #9a7626, #e6c878) 1;
  background: #101a2c;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transform: rotate(-1.5deg);
}
.mission .frame .gem { font-size: 4rem; filter: drop-shadow(0 6px 18px rgba(27,141,246,0.45)); }
.mission .frame .plaque { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: #d8c089; border: 1px solid #9a7626; padding: 0.25rem 0.6rem; }
.mission h2, .mission .lead, .mission p { margin-left: auto; margin-right: auto; }
.mission .soft { font-size: 0.95rem; margin-top: 2rem; }

/* ---------- strategy call ---------- */
.call { background: var(--ink-2); position: relative; overflow: clip; }
/* focused desk-lamp pool over the booking area */
.call::before {
  content: ""; position: absolute; right: 0; top: 0; width: 60%; height: 100%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 65% 45%, rgba(27,141,246,0.10), transparent 70%);
}
/* vertical guide line down the steps */
.call::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(27,141,246,0.35), transparent);
}
.call .wrap { position: relative; z-index: 1; }
.call-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.steps { display: flex; flex-direction: column; gap: 0; counter-reset: step; margin-top: 2rem; }
.step { display: flex; gap: 1.4rem; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step .n {
  flex: 0 0 44px; height: 44px; border-radius: 50%;
  background: rgba(27,141,246,0.14); border: 1px solid rgba(27,141,246,0.45);
  color: var(--accent); font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.step h3 { margin-bottom: 0.3rem; font-size: 1.1rem; }
.step p { font-size: 0.95rem; }
/* ---------- booking launcher card (replaces inline embed) ---------- */
.booking-embed {
  position: relative;
  border-radius: var(--radius);
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(135deg, #e6c878, #1b8df6, #0044ff, #e6c878);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(230,200,120,.18), 0 24px 70px rgba(2,10,26,.55), 0 0 60px rgba(27,141,246,.16);
  overflow: hidden;
}
.booking-embed::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: 0;
  background: linear-gradient(135deg, #e6c878, #1b8df6, #0044ff, #e6c878);
  background-size: 300% 300%;
  filter: blur(14px); opacity: .3;
  animation: bookingGlow 9s ease-in-out infinite;
}
@keyframes bookingGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.book-launch {
  position: relative; z-index: 1;
  text-align: center; padding: 3rem 1.8rem;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
}
.book-launch-ic { font-size: 2.8rem; color: var(--accent); margin-bottom: .3rem; }
.book-launch h3 { font-size: 1.5rem; font-weight: 900; }
.book-launch p { color: var(--text-dim); max-width: 360px; margin: 0; }
.book-launch .btn { margin-top: 1rem; font-size: 1.05rem; padding: .9rem 2rem; }

/* ---------- booking popup modal ---------- */
.book-modal {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 2vh 16px;
  background: rgba(4, 10, 22, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s;
}
.book-modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.book-panel {
  position: relative; width: 100%; max-width: 720px; height: 92vh; max-height: 880px;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  transform: translateY(14px) scale(.98); transition: transform .28s ease;
}
.book-modal.open .book-panel { transform: none; }
.book-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(21, 39, 65, .92); color: #fff; font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.book-x:hover { background: #1b8df6; transform: rotate(90deg); }
.book-frame { width: 100%; height: 100%; }
.book-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
@media (max-width: 600px) {
  .book-panel { height: 94vh; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-embed::before { animation: none; }
  .book-panel { transition: none; }
}

/* ---------- testimonials ---------- */
.quotes { background: var(--ink); position: relative; overflow: clip; }

/* ---------- WALL OF PROOF (real FB screenshots) ---------- */
.wallproof { background: linear-gradient(180deg, var(--ink-2), var(--ink)); position: relative; overflow: clip; }
.wallproof .eyebrow { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
.wallproof h2 { margin: .5rem 0 .8rem; }
.wallproof > .prose, .wallproof .prose { text-align: center; margin-inline: auto; }
.wall {
  column-count: 3; column-gap: 1.1rem; margin-top: 2.4rem;
  /* iOS Safari blank-paint guard: never let a transform/opacity reveal sit on
     a multicolumn box (it renders black until a repaint). Force it visible and
     give it its own stable compositor layer via translateZ. */
  opacity: 1 !important;
  -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important;
}
.wall-card {
  break-inside: avoid; margin: 0 0 1.1rem; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 10px 30px rgba(2,10,26,.35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wall-card img { width: 100%; height: auto; display: block; }
.wall-card:hover, .wall-card:focus-visible {
  transform: translateY(-4px) rotate(-.5deg);
  box-shadow: 0 18px 50px rgba(27,141,246,.28);
  border-color: rgba(27,141,246,.5); outline: none;
}
.wall-foot { text-align: center; max-width: 680px; margin: 2rem auto 0; color: var(--text-dim); font-size: .95rem; }
.wall-foot b { color: var(--text); }
@media (max-width: 900px) { .wall { column-count: 2; } }
@media (max-width: 560px) { .wall { column-count: 1; } }

/* lightbox for wall screenshots */
.wall-lb {
  position: fixed; inset: 0; z-index: 3500; display: flex; align-items: center; justify-content: center;
  padding: 4vh 16px; background: rgba(4,10,22,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility .22s;
}
.wall-lb.open { opacity: 1; visibility: visible; pointer-events: auto; }
.wall-lb img { max-width: min(92vw, 720px); max-height: 92vh; border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.wall-lb .lb-x {
  position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s;
}
.wall-lb .lb-x:hover { background: var(--accent); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .wall-card:hover { transform: none; } }
/* oversized ghost quotation mark */
.quotes::before {
  content: "\201C"; position: absolute; left: -1%; top: -18%; z-index: 0;
  font-size: clamp(16rem, 30vw, 30rem); font-weight: 900; line-height: 1;
  color: rgba(27,141,246,0.06); pointer-events: none; user-select: none;
}
.quotes .wrap { position: relative; z-index: 1; }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; }
.quote {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; background: var(--ink-2);
  display: flex; flex-direction: column; gap: 1.2rem;
}
.quote .q { font-size: 1.02rem; color: var(--text); font-weight: 500; }
.quote .who { font-size: 0.88rem; color: var(--text-dim); }

/* ---------- team ---------- */
.team { background: var(--ink-2); }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 3rem; }
.member { text-align: left; }
.member .ph {
  aspect-ratio: 1; border-radius: var(--radius); margin-bottom: 1rem;
  background: linear-gradient(150deg, var(--ink-3), #0a1322);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; font-weight: 800; color: rgba(27,141,246,0.65);
}
.member h3 { font-size: 1.05rem; }
.member span { font-size: 0.88rem; color: var(--text-dim); }
.member.mascot .ph {
  background: linear-gradient(150deg, #1b8df6, #0a6fd4);
  border-color: rgba(191,225,255,0.4);
  font-size: 3rem; color: #fff;
  overflow: hidden; padding: 0;
}
.member.has-photo .ph {
  overflow: hidden; padding: 0;
}
.member .ph img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}
.member.mascot span { color: var(--accent); font-weight: 600; }
.member.more .ph {
  background: rgba(27,141,246,0.06);
  border: 1px dashed rgba(27,141,246,0.45);
  font-size: 2.2rem; font-weight: 800; color: var(--accent);
}
.member.more h3 { color: var(--text); }
.member.more span { color: var(--text-dim); }

/* ---------- final CTA ---------- */
.final { text-align: center; background: linear-gradient(180deg, var(--ink-2), #07101f); position: relative; overflow: clip; }
/* horizon glow: the dawn behind the last pitch */
.final::before {
  content: ""; position: absolute; left: 50%; bottom: -340px; width: 1200px; height: 560px;
  transform: translateX(-50%); z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(27,141,246,0.22), transparent 70%);
  filter: blur(30px);
}
/* thin horizon line */
.final::after {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 1px;
  z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(111,193,255,0.5), transparent);
}
.final .wrap { position: relative; z-index: 1; }
.final h2 { max-width: 22ch; margin: 0 auto 1.2rem; }
.final p { margin: 0 auto 2.2rem; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 4.5rem 0 2.5rem; background: #070d18; position: relative; overflow: clip; }
/* faint footer glow */
footer::before {
  content: ""; position: absolute; left: 50%; top: -260px; width: 900px; height: 420px;
  transform: translateX(-50%); pointer-events: none; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(27,141,246,0.08), transparent 70%);
}
footer .wrap { position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 2.5rem; }
.foot-brand .brand { font-size: 1.35rem; margin-bottom: 0.9rem; display: inline-flex; }
.foot-brand p { font-size: 0.92rem; max-width: 30ch; margin-bottom: 1.4rem; }
.foot-brand .btn { padding: 0.7rem 1.4rem; font-size: 0.92rem; }
.foot-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 1rem; }
.foot-col a { display: block; color: var(--text-dim); font-size: 0.95rem; padding: 0.25rem 0; transition: color .15s; }
.foot-col a:hover { color: var(--text); }
.foot-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.88rem; color: var(--text-dim); }
.foot-bottom .td { color: var(--text); font-weight: 600; }
.foot-legal { display: flex; gap: 1.4rem; }
.foot-legal a { color: var(--text-dim); }
.foot-legal a:hover { color: var(--text); }
@media (max-width: 1024px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .foot-grid { grid-template-columns: 1fr; }
}

/* ---------- reveal helper ---------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .cube { transform: rotateX(-12deg) rotateY(28deg) !important; }
}

/* ---------- FB ads page ---------- */
.page-hero { padding: 11rem 0 5rem; background:
  radial-gradient(900px 420px at 85% -10%, rgba(27,141,246,0.18), transparent 60%), var(--ink); }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 1.3rem; max-width: 17ch; }
.prose { max-width: 68ch; }
.prose p { margin-bottom: 1.4rem; font-size: 1.08rem; }
.prose h2 { margin-top: 3.5rem; }
.prose .callout {
  border-left: 3px solid var(--accent); background: rgba(27,141,246,0.07);
  padding: 1.2rem 1.5rem; border-radius: 0 12px 12px 0; margin: 2rem 0; color: var(--text);
}
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 3rem 0; }
.tiers.two-col { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-left: auto; margin-right: auto; }
.tier {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ink-2); padding: 2.4rem 2rem;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.tier.feature { border-color: rgba(27,141,246,0.55); background: linear-gradient(165deg, rgba(27,141,246,0.12), var(--ink-2)); }
.tier .tname { font-weight: 800; font-size: 1.2rem; }
.tier .price { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; }
.tier .price small { font-size: 0.95rem; font-weight: 600; color: var(--text-dim); }
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.tier li { font-size: 0.95rem; color: var(--text-dim); padding-left: 1.4rem; position: relative; }
.tier li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.tier .btn { justify-content: center; }

/* ---------- hero v2: kinetic type + signal beacon ---------- */
.hero2 { display: flex; align-items: center; position: relative; overflow: hidden; }
/* aurora depth field behind the hero */
.hero2::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 34% at 78% 28%, rgba(27,141,246,0.20), transparent 70%),
    radial-gradient(36% 30% at 12% 78%, rgba(0,68,255,0.16), transparent 70%),
    radial-gradient(28% 24% at 50% 8%, rgba(111,193,255,0.10), transparent 70%);
  filter: blur(40px);
  animation: auroraDrift 18s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(3%, -4%, 0) scale(1.08); }
}
/* bottom fade into the marquee strip */
.hero2::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--ink-2));
}
.hero2-inner { position: relative; z-index: 3; }
.hero2 h1 {
  font-size: clamp(2.7rem, 6.2vw, 5.2rem);
  font-weight: 900; line-height: 1.02; margin-bottom: 2rem; max-width: 16ch;
}
.hero2 h1 span { display: block; }
.hero2 h1 .grad {
  background: linear-gradient(92deg, #1b8df6, #6fc1ff 55%, #0044ff);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradSlide 5s ease-in-out infinite alternate;
  padding-bottom: 0.08em;
}
@keyframes gradSlide { to { background-position: 100% 0; } }

.kinetic { opacity: 0; transform: translateY(34px); filter: blur(6px); }
.kinetic.go {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s cubic-bezier(.16,1,.3,1);
}

/* grid lines backdrop */
.grid-lines {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(27,141,246,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,141,246,0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(900px 600px at 70% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(900px 600px at 70% 40%, #000 0%, transparent 75%);
}

/* signal beacon: your shop's signal reaching the 90% */
.beacon {
  position: absolute; z-index: 2; right: clamp(-120px, 4vw, 140px); top: 50%;
  width: 620px; height: 620px; transform: translateY(-50%);
  pointer-events: none;
}
.beacon .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(27,141,246,0.5);
  animation: beaconPulse 4.5s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
  opacity: 0;
}
.beacon .r2 { animation-delay: 1.1s; }
.beacon .r3 { animation-delay: 2.2s; }
.beacon .r4 { animation-delay: 3.3s; }
.beacon .core {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: #6fc1ff;
  box-shadow: 0 0 24px 6px rgba(27,141,246,0.55), 0 0 80px 30px rgba(27,141,246,0.18);
  animation: coreBreathe 2.2s ease-in-out infinite;
}
@keyframes beaconPulse {
  0% { transform: scale(0.04); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes coreBreathe {
  0%, 100% { transform: translate(-50%,-50%) scale(1); }
  50% { transform: translate(-50%,-50%) scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .beacon .ring { animation: none; opacity: 0.25; transform: scale(0.6); }
  .beacon .ring.r2 { transform: scale(0.8); }
  .beacon .ring.r3 { transform: scale(1); }
  .beacon .core { animation: none; }
  .kinetic { opacity: 1; transform: none; filter: none; }
  .hero2 h1 .grad { animation: none; }
  .hero2::before { animation: none; }
}

/* ---------- stigma v2: people wall ---------- */
.stigma-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: center; }
.stigma .lead { margin-top: 1rem; }
.people-wall {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem;
  padding: 2.5rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: #0a1322;
}
.person {
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1; text-align: center;
  color: rgba(174, 190, 211, 0.16);
  transition: color 0.5s, text-shadow 0.5s;
}
.people-wall.in .person { color: rgba(174, 190, 211, 0.28); }
.people-wall.in .person.lit {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(27,141,246,0.65);
}
.wall-caption { grid-column: 1 / -1; text-align: center; font-size: 0.92rem; margin-top: 1rem; }

/* ---------- proof v2: counting stats ---------- */
.proof2 { background: var(--ink); position: relative; overflow: clip; }
/* giant ghost numeral watermark */
.proof2::before {
  content: "$1M+"; position: absolute; right: -2%; top: -6%; z-index: 0;
  font-size: clamp(12rem, 28vw, 26rem); font-weight: 900; letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(27,141,246,0.10);
  pointer-events: none; line-height: 1; user-select: none;
}
/* rising light from below: the growth feel */
.proof2::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  z-index: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(27,141,246,0.07), transparent 80%);
}
.proof2 .wrap { position: relative; z-index: 1; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin: 3rem 0; }
.stat {
  border-top: 2px solid var(--accent); padding: 1.6rem 0 0;
}
.stat-num {
  font-size: clamp(2.6rem, 4.5vw, 4rem); font-weight: 900;
  letter-spacing: -0.03em; line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums; margin-bottom: 0.7rem;
}
.stat p { font-size: 0.95rem; }
.fire-story {
  margin-top: 4rem; padding: 3rem; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(27,141,246,0.10), var(--ink-2));
  border: 1px solid rgba(27,141,246,0.35);
  text-align: center;
}
.fire-story .fire-q {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; color: var(--text);
  letter-spacing: -0.02em; margin-bottom: 0.8rem;
}
.fire-story p { margin-left: auto; margin-right: auto; }
.fire-story .fire-a { margin-top: 0.8rem; color: var(--accent); font-weight: 700; font-size: 1.15rem; }

/* ---------- hero 3D mount ---------- */
#hero3d { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#hero3d canvas { display: block; width: 100%; height: 100%; }
/* when WebGL is live, mute the CSS beacon so they don't compete */
#hero3d.webgl-on ~ .beacon { opacity: 0.25; }

/* ---------- proof v3: accordion ---------- */
.acc { margin-top: 3rem; border-top: 1px solid var(--line); }
.acc-row { border-bottom: 1px solid var(--line); }
.acc-head {
  width: 100%; display: grid; grid-template-columns: 220px 1fr auto;
  align-items: baseline; gap: 1.5rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 1.7rem 0.2rem; font-family: var(--font); color: var(--text-dim);
  transition: color 0.3s;
}
.acc-num {
  font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; letter-spacing: -0.03em;
  color: rgba(238,244,251,0.35); transition: color 0.35s; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.acc-num small { font-size: 0.45em; font-weight: 700; }
.acc-label { font-size: 1.05rem; font-weight: 600; color: rgba(174,190,211,0.5); transition: color 0.35s; }
.acc-arrow { color: rgba(27,141,246,0.4); font-size: 1.3rem; transition: color 0.3s, transform 0.3s; }
.acc-row.open .acc-num { color: var(--accent); }
.acc-row.open .acc-label { color: var(--text); }
.acc-row.open .acc-arrow { color: var(--accent); transform: rotate(45deg); }
.acc-row:hover .acc-label { color: var(--text); }
.acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.16,1,0.3,1), padding 0.4s;
  padding: 0 0.2rem;
}
.acc-row.open .acc-body { max-height: 220px; padding-bottom: 2rem; }
.acc-body p { max-width: 64ch; font-size: 1.02rem; }

/* ---------- staircase stagger for service cards ---------- */
.svc-grid.stair .svc { opacity: 0; transform: translateY(46px); }
.svc-grid.stair.in .svc {
  opacity: 1; transform: none;
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.svc-grid.stair.in .svc:nth-child(1) { transition-delay: 0s; }
.svc-grid.stair.in .svc:nth-child(2) { transition-delay: 0.12s; }
.svc-grid.stair.in .svc:nth-child(3) { transition-delay: 0.24s; }
.svc-grid.stair.in .svc:nth-child(4) { transition-delay: 0.36s; }
.svc-grid.stair.in .svc:nth-child(5) { transition-delay: 0.48s; }
.svc-grid.stair.in .svc:nth-child(6) { transition-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) {
  .svc-grid.stair .svc { opacity: 1; transform: none; }
}

/* ============================================================
   SIGNATURE DESIGN COMPONENTS (per-page centerpieces)
   ============================================================ */

/* ---------- 1. THE FLYWHEEL ---------- */
.flywheel-stage { display: flex; justify-content: center; padding: 2rem 0; }
.flywheel {
  --fw: clamp(300px, 44vw, 460px);
  position: relative; width: var(--fw); height: var(--fw);
}
.fw-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px dashed rgba(27,141,246,0.35);
  animation: fwSpin 36s linear infinite;
}
.fw-ring::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(27,141,246,0.6));
}
.fw-orbit { position: absolute; inset: 0; animation: fwSpin 36s linear infinite; }
.fw-node {
  position: absolute; left: 50%; top: 50%;
  width: 92px; margin: -46px 0 0 -46px; height: 92px;
  transform: rotate(var(--a)) translateY(calc(var(--fw) / -2)) rotate(calc(var(--a) * -1));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  background: linear-gradient(160deg, #14233c, #0c1626);
  border: 1px solid rgba(27,141,246,0.5); border-radius: 50%;
  text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.fw-node i { color: #6fc1ff; font-size: 1.3rem; }
.fw-node span { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); line-height: 1.15; }
@keyframes fwSpin { to { transform: rotate(360deg); } }
/* the orbit container spins; each node face spins the opposite way so
   labels always read upright */
.fw-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; animation: fwFace 36s linear infinite; }
@keyframes fwFace { to { transform: rotate(-360deg); } }
.fw-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 38%; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  background: radial-gradient(circle at 35% 30%, #1d3055, #11203a 60%, #0c1626);
  border: 1px solid rgba(27,141,246,0.6);
  box-shadow: 0 0 60px rgba(27,141,246,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
  text-align: center; z-index: 2;
}
.fw-hub b { font-size: clamp(0.95rem, 1.6vw, 1.2rem); font-weight: 800; letter-spacing: -0.01em; }
.fw-hub span { font-size: 0.68rem; color: var(--text-dim); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .fw-ring, .fw-orbit, .fw-node, .fw-face { animation: none; }
}

/* ---------- 2. THE FUNNEL ---------- */
.funnel { max-width: 560px; margin: 3rem auto; display: flex; flex-direction: column; gap: 0.5rem; }
.fn-stage {
  position: relative; margin: 0 auto; border-radius: 10px;
  background: linear-gradient(160deg, rgba(27,141,246,0.16), rgba(14,24,44,0.9));
  border: 1px solid rgba(27,141,246,0.4);
  padding: 1rem 1.4rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  overflow: hidden;
}
.fn-stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(111,193,255,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: fnFlow 3.2s ease-in-out infinite;
}
.fn-stage:nth-child(2)::after { animation-delay: 0.4s; }
.fn-stage:nth-child(3)::after { animation-delay: 0.8s; }
.fn-stage:nth-child(4)::after { animation-delay: 1.2s; }
.fn-stage:nth-child(5)::after { animation-delay: 1.6s; }
@keyframes fnFlow { 40%, 100% { transform: translateX(100%); } }
.fn-stage b { font-weight: 800; font-size: 1.02rem; }
.fn-stage span { font-size: 0.85rem; color: var(--text-dim); white-space: nowrap; }
.fn-1 { width: 100%; }
.fn-2 { width: 88%; }
.fn-3 { width: 76%; }
.fn-4 { width: 64%; }
.fn-5 { width: 52%; border-color: var(--accent); box-shadow: 0 0 30px rgba(27,141,246,0.25); }
@media (prefers-reduced-motion: reduce) { .fn-stage::after { animation: none; } }

/* ---------- 3. PHONE CHAT DEMO ---------- */
.phone {
  width: min(300px, 80vw); margin: 2.5rem auto; border-radius: 34px;
  background: #0a1322; border: 1px solid rgba(27,141,246,0.4);
  box-shadow: 0 24px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 1rem 0.9rem 1.3rem; position: relative;
}
.phone::before {
  content: ""; display: block; width: 90px; height: 18px; margin: 0 auto 0.9rem;
  background: #060d18; border-radius: 999px;
}
.chat { display: flex; flex-direction: column; gap: 0.55rem; min-height: 240px; }
.bubble {
  max-width: 85%; padding: 0.65rem 0.9rem; border-radius: 16px;
  font-size: 0.82rem; line-height: 1.4; opacity: 0;
  animation: bubbleIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}
.bubble.out { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.bubble.in  { align-self: flex-start; background: #16263f; color: var(--text); border-bottom-left-radius: 4px; }
.bubble:nth-child(1) { animation-delay: 0.4s; }
.bubble:nth-child(2) { animation-delay: 1.4s; }
.bubble:nth-child(3) { animation-delay: 2.4s; }
.bubble:nth-child(4) { animation-delay: 3.4s; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; opacity: 1; } }

/* ---------- 4. IVR ROUTE TREE ---------- */
.route { max-width: 620px; margin: 3rem auto; text-align: center; }
.route-root {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: linear-gradient(160deg, #14233c, #0c1626);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 0.8rem 1.6rem; font-weight: 800;
  box-shadow: 0 0 34px rgba(27,141,246,0.3);
}
.route-root i { color: #6fc1ff; animation: ringPulse 2.2s ease-in-out infinite; }
@keyframes ringPulse { 0%,100% { transform: rotate(0); } 8% { transform: rotate(-14deg); } 16% { transform: rotate(10deg); } 24% { transform: rotate(0); } }
.route-trunk { width: 1.5px; height: 34px; margin: 0 auto; background: linear-gradient(180deg, var(--accent), rgba(27,141,246,0.2)); }
.route-branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
@media (max-width: 560px) { .route-branches { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; } }
.route-leaf {
  min-width: 0;
  border: 1px solid var(--line); border-radius: 12px; padding: 1rem 0.8rem;
  background: #0c1626; font-size: 0.85rem; color: var(--text-dim);
  display: flex; flex-direction: column; gap: 0.3rem; align-items: center;
}
.route-leaf b { color: var(--text); font-size: 0.95rem; }
.route-leaf .key {
  width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: rgba(27,141,246,0.15); border: 1px solid rgba(27,141,246,0.5); color: #6fc1ff; font-weight: 800;
}
@media (prefers-reduced-motion: reduce) { .route-root i { animation: none; } }

/* ---------- 5. COUNTDOWN BAR ---------- */
.countdown { max-width: 640px; margin: 3rem auto; }
.cd-track {
  position: relative; height: 14px; border-radius: 999px;
  background: #0c1626; border: 1px solid var(--line); overflow: hidden;
}
.cd-fill {
  position: absolute; inset: 0; width: 0%;
  background: linear-gradient(90deg, #0a6fd4, #1b8df6, #6fc1ff);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(27,141,246,0.55);
  transition: width 2.4s cubic-bezier(0.16,1,0.3,1);
}
.countdown.in .cd-fill { width: 100%; }
.cd-marks { display: flex; justify-content: space-between; margin-top: 0.7rem; font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.cd-marks b { color: var(--accent); }

/* ---------- 6. BROWSER MOCKUP ---------- */
.browser {
  max-width: 560px; margin: 3rem auto; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(27,141,246,0.4); background: #0c1626;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}
.browser-bar {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1rem;
  background: #0a1322; border-bottom: 1px solid var(--line);
}
.browser-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #1d3055; }
.browser-bar .url {
  flex: 1; margin-left: 0.6rem; font-size: 0.75rem; color: var(--text-dim);
  background: #0c1626; border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.9rem;
}
.browser-body { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.8rem; }
.sk { border-radius: 8px; background: linear-gradient(90deg, #11203a 25%, #16263f 50%, #11203a 75%); background-size: 200% 100%; animation: skShimmer 2.2s linear infinite; }
.sk-hero { height: 90px; }
.sk-line { height: 14px; width: 70%; }
.sk-line.short { width: 45%; }
.sk-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem; }
.sk-card { height: 64px; }
.sk-cta { height: 36px; width: 160px; background: linear-gradient(90deg, #0a6fd4, #1b8df6); animation: none; border-radius: 999px; }
@keyframes skShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ---------- 7. JOURNEY STRIP (mini flywheel-as-line) ---------- */
.journey { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin: 2.5rem 0; }
.j-step {
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: #0c1626; padding: 0.55rem 1.1rem;
  font-size: 0.85rem; font-weight: 600; color: var(--text);
}
.j-step i { color: #6fc1ff; }
.j-arrow { color: var(--accent); font-weight: 800; opacity: 0.7; }

/* ---------- responsive ---------- */
/* ---------- print / PDF export ---------- */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body { background: var(--ink) !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .rx-card {
    opacity: 1 !important; transform: none !important; pointer-events: auto;
    height: auto !important; overflow: visible;
    padding: 2.4rem !important; border-width: 1px !important;
    margin-bottom: 1.2rem; page-break-inside: avoid;
  }
  .nav { position: static; }
  .nav-toggle { display: none; }
  .hero { min-height: 0; padding-top: 3rem; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .cube { transform: rotateX(-12deg) rotateY(28deg) !important; animation: none !important; }
  .proof-card, .svc, .quote, .tier, .step { page-break-inside: avoid; }
  .booking-embed { min-height: 120px; }
  .booking-embed iframe { display: none; }
  .booking-embed::after { content: "GHL booking calendar embeds here"; color: var(--text-dim); }
}

@media (max-width: 1024px) {
  .villains { grid-template-columns: repeat(2, 1fr); }
  .stigma-grid { grid-template-columns: 1fr; gap: 3rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.2rem; }
  .beacon { right: -260px; opacity: 0.6; }
  .svc.s-a, .svc.s-b { grid-column: span 12; }
  .svc.s-c, .svc.s-d, .svc.s-e { grid-column: span 6; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: 1fr; }
  .call-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  section { padding: 4.5rem 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero2 h1 { font-size: clamp(2.3rem, 9.5vw, 3rem); }
  .beacon { width: 420px; height: 420px; right: -210px; top: 30%; opacity: 0.45; }
  .people-wall { gap: 1rem; padding: 1.8rem; }
  .fire-story { padding: 2rem 1.4rem; }
  .cube-stage { order: -1; }
  /* ---------- GLOBAL MOBILE MENU: full-screen panel ----------
     NOTE: .nav has backdrop-filter, which makes it the containing
     block for position:fixed children (iOS especially). So the panel
     must be absolute, anchored under the nav, with its own height. */
  .nav-links {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
    height: calc(100dvh - 72px);
    background: linear-gradient(180deg, #0d1930 0%, #0b1424 100%);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem 22px calc(2rem + env(safe-area-inset-bottom));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav-links.open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  /* closed drawer must be fully inert: child rules below re-enable
     visibility/pointer-events for the open state, and WebKit hit-tests
     them through the hidden panel (iOS ghost-tap bug) */
  .nav-links:not(.open), .nav-links:not(.open) * {
    visibility: hidden !important; pointer-events: none !important;
  }
  /* plain links (Websites / About) become full-width rows */
  .nav-links > a {
    display: flex; align-items: center; width: 100%;
    padding: 1.05rem 2px; font-size: 1.08rem; font-weight: 700; color: var(--text);
    border-bottom: 1px solid rgba(127,166,204,.12);
  }
  /* dropdown groups become labeled sections */
  .nav-dd { width: 100%; border-bottom: 1px solid rgba(127,166,204,.12); padding: .9rem 0 .6rem; }
  .nav-dd > .dd-toggle {
    display: flex; width: 100%; justify-content: flex-start;
    background: none; border: 0; padding: 0 0 .45rem; cursor: default;
    font: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--accent);
  }
  .nav-dd > .dd-toggle .caret { display: none; }
  .dd-menu {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; width: 100%; padding: 0; margin: 0;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; box-shadow: none; border-radius: 0;
    display: flex; flex-direction: column; gap: 2px;
  }
  /* The desktop reveal rules (.nav-dd:hover/.open/:focus-within .dd-menu) carry
     transform: translateX(-50%) at higher specificity (0,3,0) than the static
     .dd-menu above (0,1,0), so in the mobile drawer they leak in and slide the
     whole group's icons+labels half its width off the LEFT edge on hover, or on
     :focus-within right after a tap. Re-assert transform:none here at matching
     specificity so the mobile group never moves. (Do not remove.) */
  .nav-dd:hover .dd-menu,
  .nav-dd.open .dd-menu,
  .nav-dd:focus-within .dd-menu { transform: none; }
  .dd-menu::before { display: none; }
  /* Mobile drawer item affordance: one accent language for "you tapped this"
     and "you're on this page" — a left bar drawn as an out-of-flow ::before
     (zero box-model width, so it can NEVER shove the icon/label sideways the
     way border-left did) growing in vertically over a firm background fill.
     No horizontal motion anywhere; that was the bug. */
  .dd-item {
    position: relative;          /* anchor for the ::before bar */
    overflow: hidden;            /* clip the bar's rounded end to the pill radius */
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .75rem; border: 0; border-radius: 12px;
    font-size: 1.02rem; font-weight: 600; color: var(--text);
    background: rgba(21,39,65,.45);
    margin-bottom: .35rem;
    transition: background .16s ease;
  }
  .dd-item::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--accent);
    transform: scaleY(0); transform-origin: center;
    transition: transform .16s ease;
  }
  .dd-item i { flex: 0 0 auto; font-size: 1.15rem; color: var(--accent); }
  /* narrow-window pointer: quiet bar-free tint (overrides the leaked desktop hover) */
  .dd-item:hover { background: rgba(27,141,246,.10); }
  /* TAP — the primary signal: firm fill + bar snaps in, and it stays put */
  .dd-item:active { background: rgba(27,141,246,.20); }
  .dd-item:active::before { transform: scaleY(1); }
  /* CURRENT PAGE — same language, softer fill = "where you are" */
  .dd-item.active { background: rgba(27,141,246,.16); }
  .dd-item.active::before { transform: scaleY(1); }
  /* KEYBOARD FOCUS — bar + tint + an inset accent ring (adds zero width) */
  .dd-item:focus-visible {
    outline: none; background: rgba(27,141,246,.14);
    box-shadow: inset 0 0 0 2px var(--accent);
  }
  .dd-item:focus-visible::before { transform: scaleY(1); }
  .dd-item .dd-tx b { font-weight: 700; }
  .dd-item .dd-tx span { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .dd-item, .dd-item::before { transition: none; }
  }
  .dd-sep { display: none; }
  /* login pill + CTA pinned as big buttons at the end */
  .nav-links a.login-shmello {
    margin-top: 1.2rem; width: 100%; justify-content: center;
    padding: .9rem 1rem; font-size: 1rem; border-bottom: 0;
  }
  .nav-links > .btn {
    width: 100%; justify-content: center; text-align: center;
    margin-top: .7rem; padding: 1rem 1.2rem; font-size: 1.05rem;
  }
  .nav-toggle { display: block; }
  /* hamburger becomes X when open */
  body.menu-open .nav-toggle { color: var(--accent); }
  .villains { grid-template-columns: 1fr; }
  .svc.s-c, .svc.s-d, .svc.s-e { grid-column: span 12; }
  .svc.s-f { flex-direction: column; align-items: flex-start; }
  .tiers, .tiers.two-col { grid-template-columns: 1fr; max-width: 460px; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .pan-track { flex-direction: column; padding: 0 24px; }
  .proof-card { width: 100%; min-height: 0; }
}

/* ===== homepage element upgrades (20260701j) ===== */
/* diagnostic chips: icon + card feel */
.chip { display: inline-flex; align-items: center; gap: .55rem; }
.chip i { color: var(--accent); font-size: 1.15rem; transition: transform .2s ease; }
.chip:hover i { transform: scale(1.2) rotate(-6deg); }
.chip.on i { color: #fff; }
.chip.chip-all {
  border-color: rgba(27,141,246,.55);
  background: linear-gradient(120deg, rgba(27,141,246,.14), rgba(0,68,255,.08));
}
.chip.chip-all i { color: #ff9a4d; }
.chip.chip-all.on i { color: #fff; }

/* testimonial chat cards */
.quote.qt-chat { background: none; border: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.qt-bubble {
  position: relative;
  background: linear-gradient(160deg, rgba(21,39,65,.85), rgba(13,25,44,.9));
  border: 1px solid rgba(127,166,204,.22);
  border-radius: 20px 20px 20px 6px;
  padding: 1.5rem 1.5rem 1.4rem;
  box-shadow: 0 14px 40px rgba(0,0,0,.3);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.quote.qt-chat:hover .qt-bubble {
  transform: translateY(-4px);
  border-color: rgba(27,141,246,.5);
  box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 24px rgba(27,141,246,.12);
}
.qt-stat {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; height: 34px; padding: 0 .7rem; margin-bottom: .8rem;
  border-radius: 999px; font-weight: 900; font-size: 1rem; letter-spacing: -.01em;
  color: #6fc1ff; background: rgba(27,141,246,.13); border: 1px solid rgba(27,141,246,.35);
}
.qt-stat i { font-size: 1.2rem; }
.qt-bubble .q { margin: 0; font-size: 1.06rem; font-weight: 600; line-height: 1.5; }
.qt-meta { display: flex; align-items: center; gap: .7rem; padding-left: .35rem; }
.qt-av {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(27,141,246,.25), rgba(0,68,255,.15));
  border: 1px solid rgba(27,141,246,.4); color: var(--accent); font-size: 1.15rem;
}
.qt-meta .who { font-size: .9rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.qt-meta .who small { font-weight: 600; color: var(--text-dim); font-size: .8rem; }
@media (max-width: 768px) {
  .qt-bubble { padding: 1.25rem 1.25rem 1.15rem; }
}

/* ---------- multi-store band (homepage) + shared per-location note ---------- */
.multi-band-zone{padding:0 0 5.5rem;}
.multi-band{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:2.5rem;align-items:center;
  border:1px solid rgba(127,166,204,.2);border-radius:22px;padding:2.6rem 2.8rem;
  background:
    radial-gradient(60% 90% at 90% 10%, rgba(27,141,246,.12), transparent 60%),
    linear-gradient(135deg, rgba(21,39,65,.7), rgba(13,27,48,.6));}
.multi-band>*{min-width:0;}
.multi-band h2{margin:0 0 .8rem;font-size:clamp(1.4rem,2.6vw,1.9rem);}
.multi-band p{margin:0 0 1.3rem;color:#9db8d6;font-size:.98rem;line-height:1.6;}
.mb-figs{display:flex;flex-direction:column;gap:1.4rem;}
.mb-fig b{display:block;font-size:clamp(2rem,4vw,2.8rem);font-weight:900;color:#7fc1ff;line-height:1;font-variant-numeric:tabular-nums;}
.mb-fig span{display:block;font-size:.8rem;color:#7fa6cc;margin-top:.25rem;}
@media(max-width:820px){
  .multi-band{grid-template-columns:1fr;padding:2rem 1.6rem;}
  .mb-figs{flex-direction:row;gap:2rem;}
}
.pkg-note{text-align:center;font-size:.85rem;color:#7fa6cc;margin:1.4rem auto 0;max-width:520px;}

/* ============================================================
   HOMEPAGE FUNNEL: three ways + wiring list (2026-07-04)
   ============================================================ */
.threeways{position:relative;padding:5.5rem 0;background:var(--ink-2);overflow:clip;}
.threeways h2{text-align:center;margin-bottom:2.6rem;}
.tw-list{max-width:820px;margin:0 auto;}
.tw-row{
  display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:1.4rem;align-items:center;
  padding:1.7rem 0;border-top:1px solid rgba(127,166,204,.16);
}
.tw-row:last-child{border-bottom:1px solid rgba(127,166,204,.16);}
.tw-n{
  font-size:3.4rem;font-weight:900;line-height:1;text-align:center;
  color:transparent;-webkit-text-stroke:2px rgba(127,193,255,.75);
}
.tw-not .tw-n{-webkit-text-stroke:2px rgba(127,166,204,.3);}
.tw-tx h3{margin:0;font-size:clamp(1.25rem,2.6vw,1.7rem);letter-spacing:-.01em;}
.tw-tx p{margin:.3rem 0 0;color:var(--text-dim);font-size:.98rem;}
.tw-not .tw-tx h3{color:#7fa6cc;}
.tw-us{
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  font-weight:800;font-size:.95rem;color:#35d07f;letter-spacing:.02em;
}
.tw-us i{font-size:1.1rem;}
.tw-us.not{color:#5a6b82;font-weight:700;}
.tw-punch{
  max-width:640px;margin:2.4rem auto 0;text-align:center;
  font-size:1.08rem;color:var(--text);font-weight:600;line-height:1.6;
}
/* wiring list */
.wire{padding:5.5rem 0;}
.wire h2{text-align:center;margin-bottom:1rem;}
.wire-job{
  display:flex;align-items:baseline;gap:.8rem;margin:3.2rem 0 .4rem;
  font-size:clamp(1.15rem,2.4vw,1.45rem);
}
.wire-job span{
  font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
.wr-row{
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:2rem;align-items:start;
  padding:1.5rem 0;border-top:1px solid rgba(127,166,204,.14);
}
.wr-name{
  font-size:1.15rem;font-weight:800;color:var(--text);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;
}
.wr-name i{color:var(--accent);font-size:.95em;transition:transform .18s ease;}
.wr-name:hover{color:#7fc1ff;}
.wr-name:hover i{transform:translateX(4px);}
.wr-body p{margin:0;font-size:1rem;color:var(--text-dim);line-height:1.6;}
.wr-body .wr-feeds{margin-top:.45rem;font-size:.92rem;color:#ffd98c;}
.wr-body .wr-feeds b{color:#ffd98c;font-weight:800;letter-spacing:.02em;}
.wire-close{
  max-width:640px;margin:3.2rem auto 0;text-align:center;
  font-size:1.15rem;color:var(--text);font-weight:600;line-height:1.7;
  border-top:1px solid rgba(127,166,204,.16);padding-top:2.2rem;
}
.wire-close b{color:#7fc1ff;}
@media(max-width:760px){
  .tw-row{grid-template-columns:56px minmax(0,1fr);gap:1rem;}
  .tw-n{font-size:2.3rem;}
  .tw-us{grid-column:2;justify-self:start;margin-top:.2rem;}
  .wr-row{grid-template-columns:1fr;gap:.6rem;padding:1.3rem 0;}
}