/* ================================================================
   BRANDSCAPE — Refined Color System
   Rule: Each color family owns its zone. No cross-family gradients.
   Cyan/Blue → UI, buttons, interactions, heroes
   Red/Crimson → accent section backgrounds (solid, one family)
   Magenta → badge/label only, never in gradients with other families
   Gold → brand mark, stars (existing identity, kept)
   ================================================================ */

/* ── Color tokens ──────────────────────────────────────────── */
:root {
  /* Cyan / Ocean Blue family */
  --c-sky:        #00B4D8;   /* mid cyan — buttons, accents */
  --c-sky-bright: #48CAE4;   /* lighter cyan — hover states */
  --c-sky-deep:   #0096C7;   /* darker cyan — button base */
  --c-ocean:      #0077B6;   /* brand blue — links, light theme primary */
  --c-deep:       #023E8A;   /* deep blue — featured cards, dark sections */
  --c-navy:       #03045E;   /* darkest navy — footers, CTA backgrounds */

  /* Red / Crimson family */
  --c-red:        #C1121F;   /* brand red */
  --c-red-dark:   #7B0D1E;   /* deep red — section backgrounds */
  --c-red-shadow: #4A0010;   /* shadow red — darkest stop */

  /* Magenta — badge/label use only */
  --c-pink:       #D4007A;   /* muted magenta — less electric, more dignified */
  --c-pink-text:  #E8409A;   /* text-safe pink */

  /* Pattern overlays */
  --pattern-leaves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cellipse cx='65' cy='95' rx='22' ry='46' fill='none' stroke='rgba(255,255,255,.055)' stroke-width='1.4' transform='rotate(-38 65 95)'/%3E%3Cellipse cx='210' cy='55' rx='17' ry='36' fill='none' stroke='rgba(255,255,255,.04)' stroke-width='1.4' transform='rotate(22 210 55)'/%3E%3Cellipse cx='155' cy='210' rx='30' ry='19' fill='none' stroke='rgba(255,255,255,.045)' stroke-width='1.4' transform='rotate(-12 155 210)'/%3E%3Cpath d='M18 185 Q82 125 146 185 Q210 245 274 185' fill='none' stroke='rgba(255,255,255,.06)' stroke-width='1.6'/%3E%3Ccircle cx='255' cy='185' r='32' fill='none' stroke='rgba(255,255,255,.035)' stroke-width='1.4'/%3E%3Cpath d='M48 28 Q68 62 48 96 Q28 130 48 164' fill='none' stroke='rgba(255,255,255,.05)' stroke-width='1.4'/%3E%3Cellipse cx='280' cy='275' rx='36' ry='21' fill='none' stroke='rgba(255,255,255,.04)' stroke-width='1.2' transform='rotate(18 280 275)'/%3E%3Ccircle cx='105' cy='260' r='19' fill='none' stroke='rgba(255,255,255,.035)' stroke-width='1.4'/%3E%3C/svg%3E");

  --pattern-arcs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cpath d='M20 20 Q65 65 110 20 Q155 -25 200 20' fill='none' stroke='rgba(255,255,255,.06)' stroke-width='1.6'/%3E%3Ccircle cx='215' cy='52' r='24' fill='none' stroke='rgba(255,255,255,.045)' stroke-width='1.4'/%3E%3Cpath d='M10 130 Q52 88 94 130 Q136 172 178 130 Q220 88 248 130' fill='none' stroke='rgba(255,255,255,.055)' stroke-width='1.6'/%3E%3Ccircle cx='52' cy='210' r='32' fill='none' stroke='rgba(255,255,255,.04)' stroke-width='1.4'/%3E%3Cpath d='M148 158 Q192 188 236 158' fill='none' stroke='rgba(255,255,255,.06)' stroke-width='1.6'/%3E%3C/svg%3E");
}


/* ================================================================
   DARK THEME UPGRADES
   ================================================================ */

/* ── Text highlight — bright cyan → white, guaranteed visible on dark bg ── */
.text-gradient {
  background: linear-gradient(135deg, var(--c-sky-bright) 0%, #ffffff 60%, var(--c-sky-bright) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero highlight — clean cyan, no magenta ── */
.hero-highlight {
  color: var(--c-sky-bright) !important;
  -webkit-text-fill-color: var(--c-sky-bright) !important;
  text-shadow: 0 0 40px rgba(72,202,228,.35) !important;
}

/* ── Primary button — cyan family gradient ── */
.btn-primary {
  background: linear-gradient(160deg, var(--c-sky-deep) 0%, var(--c-sky) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(0,150,199,.4) !important;
}
.btn-primary:hover {
  background: linear-gradient(160deg, var(--c-sky) 0%, var(--c-sky-bright) 100%) !important;
  box-shadow: 0 8px 28px rgba(0,180,216,.45) !important;
  transform: translateY(-2px);
}

/* ── Outline button — cyan accent ── */
.btn-outline {
  border-color: rgba(0,150,199,.45) !important;
  color: var(--c-sky-bright) !important;
}
.btn-outline:hover {
  background: rgba(0,150,199,.1) !important;
  border-color: var(--c-sky) !important;
  color: #fff !important;
}

/* ── Custom cursor — stays cyan, no color switching ── */
.cursor {
  background: var(--c-sky) !important;
}
.cursor-trail {
  border-color: rgba(0,180,216,.35) !important;
}

/* ── Ticker bar — ocean blue (calm, reads clean) ── */
.ticker-bar {
  background: linear-gradient(90deg, var(--c-navy), var(--c-deep) 50%, var(--c-navy)) !important;
}

/* ── Section label pill ── */
.section-label {
  color: var(--c-sky-bright) !important;
  background: rgba(0,180,216,.08);
  border: 1px solid rgba(0,180,216,.22);
  padding: 4px 14px 4px 28px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
}
/* Glowing accent dot — gives every eyebrow label a focal point */
.section-label::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-sky-bright);
  box-shadow: 0 0 9px 2px rgba(72,202,228,.65);
}
html[data-theme="light"] .section-label::before {
  background: var(--c-ocean);
  box-shadow: 0 0 9px 2px rgba(0,119,182,.4);
}

/* ── Section titles — crisper rhythm + a touch of glow depth on dark ── */
.section-header h2,
.wt-title,
.hp-plans-title,
.pt-title,
.bp-title {
  letter-spacing: -.025em;
}
html:not([data-theme="light"]) .section-header h2,
html:not([data-theme="light"]) .wt-title,
html:not([data-theme="light"]) .hp-plans-title,
html:not([data-theme="light"]) .pt-title {
  text-shadow: 0 2px 28px rgba(0,180,216,.14);
}

/* ── Subtitles — softer weight, better measure & breathing room ── */
.section-header p {
  font-weight: 400;
  line-height: 1.75;
  opacity: .9;
}

/* ── Numbers strip — navy → deep blue, cyan numbers ── */
.numbers-strip {
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-deep) 100%) !important;
  position: relative;
  overflow: hidden;
}
.numbers-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pattern-leaves);
  background-size: 320px 320px;
  opacity: 1;
  pointer-events: none;
}
.num-val  { color: var(--c-sky-bright) !important; }
.num-label { color: rgba(255,255,255,.72) !important; }

/* ── Hero orbs — both cyan toned, different opacity ── */
.orb-1 {
  background: radial-gradient(circle, rgba(0,180,216,.18) 0%, transparent 70%) !important;
}
.orb-2 {
  background: radial-gradient(circle, rgba(2,62,138,.22) 0%, transparent 70%) !important;
}

/* ── Hero chip ── */
.hero-chip {
  background: rgba(0,180,216,.08) !important;
  border-color: rgba(0,180,216,.28) !important;
  color: var(--c-sky-bright) !important;
}
.chip-dot { background: var(--c-sky) !important; }

/* ── Hero stat numbers ── */
.hs-num { color: var(--c-sky-bright) !important; }

/* ── Intro pull-quote ── */
.intro-pull-quote {
  border-left-color: var(--c-sky-deep) !important;
  color: rgba(255,255,255,.75) !important;
}

/* ── Service cards — cyan hover ── */
.hs-card {
  position: relative;
  overflow: hidden;
}
.hs-card:hover {
  border-color: rgba(0,180,216,.38) !important;
  box-shadow: 0 12px 36px rgba(0,150,199,.14), 0 0 0 1px rgba(0,180,216,.18) !important;
}

/* ── Featured service card — deep blue solid ── */
.hs-card-featured {
  background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-deep) 100%) !important;
  border-color: rgba(0,150,199,.35) !important;
  box-shadow: 0 12px 40px rgba(0,150,199,.2) !important;
}
.hs-card-featured h3    { color: #fff !important; }
.hs-card-featured p     { color: rgba(255,255,255,.78) !important; }
.hs-card-featured .hs-link { color: var(--c-sky-bright) !important; }
.hs-card-featured:hover {
  box-shadow: 0 20px 56px rgba(0,150,199,.38) !important;
  border-color: rgba(0,180,216,.5) !important;
}

/* ── Why-us section — cyan card accent, gold step numbers ── */
.why-v2-card:hover {
  border-color: rgba(0,150,199,.32) !important;
  box-shadow: 0 12px 32px rgba(0,150,199,.1) !important;
}
.why-num { color: var(--c-sky-bright) !important; opacity: 1 !important; }
.why-pill {
  border-color: rgba(0,150,199,.22) !important;
  color: var(--c-sky-bright) !important;
  background: rgba(0,150,199,.06) !important;
}

/* ── Why-teaser subtle overlay ── */
.why-teaser {
  position: relative;
  overflow: hidden;
}
.why-teaser::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(0,150,199,.07) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Testimonial cards ── */
.testi-card:hover {
  border-color: rgba(0,150,199,.28) !important;
  box-shadow: 0 10px 28px rgba(0,150,199,.1) !important;
}
/* Stars stay gold — it's a warm, trustworthy tone */
.testi-stars { color: #C9A84C !important; }
/* Avatar — blue family, no magenta cross */
.testi-av {
  background: linear-gradient(135deg, var(--c-deep), var(--c-ocean)) !important;
}

/* ── Pricing badge — solid deep blue, no cross-family gradient ── */
.pt-plan-badge {
  background: var(--c-deep) !important;
  border: 1px solid rgba(0,150,199,.35) !important;
  color: var(--c-sky-bright) !important;
}
.pt-btn-primary {
  background: linear-gradient(160deg, var(--c-sky-deep), var(--c-sky)) !important;
  box-shadow: 0 4px 18px rgba(0,150,199,.38) !important;
  color: #fff !important;
}

/* ── Curved ribbon / BSR section — charcoal black with pattern overlay ── */
.bsr-section {
  background: linear-gradient(135deg, #1a1a1d 0%, #0d0d0f 100%) !important;
  position: relative;
  overflow: hidden;
}
.bsr-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pattern-leaves);
  background-size: 320px 320px;
  opacity: 1;
  pointer-events: none;
}

/* ── Final CTA — charcoal black, clean ── */
.final-cta {
  background: linear-gradient(135deg, #1a1a1d 0%, #0d0d0f 100%) !important;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pattern-arcs);
  background-size: 260px 260px;
  opacity: 1;
  pointer-events: none;
}
/* CTA text highlight — single cyan tone */
.final-cta .text-gradient {
  color: var(--c-sky-bright) !important;
  background: none !important;
  -webkit-text-fill-color: var(--c-sky-bright) !important;
}

/* ── Showreel section — charcoal black ── */
.showreel-section {
  background: linear-gradient(135deg, #1a1a1d 0%, #0d0d0f 100%) !important;
  position: relative;
  overflow: hidden;
}
.showreel-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pattern-arcs);
  background-size: 260px 260px;
  opacity: 1;
  pointer-events: none;
}

/* ── Page heroes (portfolio, about, contact etc.) ── */
.ph-hero {
  /* Use per-page colour variables injected inline by page-hero.php */
  background:
    linear-gradient(160deg,
      rgba(var(--ph-r,3), var(--ph-g,4), var(--ph-b,94), .55) 0%,
      rgba(var(--ph-r,3), var(--ph-g,4), var(--ph-b,94), .28) 45%,
      #08080c 100%) !important;
  position: relative;
  overflow: hidden;
}
.ph-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pattern-arcs);
  background-size: 260px 260px;
  opacity: 1;
  pointer-events: none;
}
.ph-title { color: #fff !important; }

/* ── Nav active / hover ── */
.nav-link.active::after { background: var(--c-sky) !important; }
.nav-link:hover { color: var(--c-sky-bright) !important; }

/* ── Footer — very dark navy, subtle leaf pattern ── */
.site-footer {
  background: linear-gradient(180deg, #020d22 0%, #01060f 100%) !important;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pattern-leaves);
  background-size: 320px 320px;
  opacity: .6;
  pointer-events: none;
}

/* ── Hot / New badges — magenta as a solid chip (not gradient) ── */
.badge-hot, .badge-new {
  background: var(--c-red) !important;
  color: #fff !important;
  border-radius: 4px;
}

/* ── Portfolio tabs ── */
.work-tab.active {
  border-bottom-color: var(--c-sky) !important;
  color: var(--c-sky-bright) !important;
}
.work-tab:hover { color: var(--c-sky-bright) !important; }
.wsh-count { color: var(--c-sky) !important; }

/* ── Portfolio cards hover ── */
a.wc-card:hover {
  border-color: rgba(0,180,216,.42) !important;
  box-shadow: 0 16px 36px rgba(0,150,199,.14) !important;
  transform: translateY(-4px);
}
.wc-view { color: var(--c-sky-bright) !important; }

/* ── Client logo hover — subtle tint ── */
.cl-logo-item:hover img,
.cl-item:hover img {
  filter: brightness(0) invert(1) sepia(.4) saturate(1.5) hue-rotate(178deg) !important;
}

/* ── Scrollbar — single-hue cyan ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0f1a; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-sky-deep), var(--c-deep));
  border-radius: 3px;
}

/* ── Text selection ── */
::selection { background: rgba(0,180,216,.28); color: #fff; }


/* ================================================================
   LIGHT THEME — Blue ocean palette, no cross-family gradients
   ================================================================ */

html[data-theme="light"] {
  --primary:       var(--c-ocean);
  --primary-light: var(--c-sky);
  --primary-dark:  var(--c-deep);
}

/* Text gradient — deep ocean → sky (same family) */
html[data-theme="light"] .text-gradient {
  background: linear-gradient(135deg, var(--c-deep) 0%, var(--c-ocean) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero highlight — ocean blue, no pink */
html[data-theme="light"] .hero-highlight {
  color: var(--c-deep) !important;
  -webkit-text-fill-color: var(--c-deep) !important;
  text-shadow: none !important;
}

/* Primary button */
html[data-theme="light"] .btn-primary {
  background: linear-gradient(160deg, var(--c-deep) 0%, var(--c-ocean) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,119,182,.32) !important;
}
html[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(160deg, var(--c-ocean) 0%, var(--c-sky) 100%) !important;
  box-shadow: 0 8px 26px rgba(0,119,182,.42) !important;
}

/* Outline button */
html[data-theme="light"] .btn-outline {
  border-color: rgba(0,119,182,.4) !important;
  color: var(--c-deep) !important;
}
html[data-theme="light"] .btn-outline:hover {
  background: rgba(0,119,182,.07) !important;
  border-color: var(--c-ocean) !important;
  color: var(--c-deep) !important;
}

/* Ticker */
html[data-theme="light"] .ticker-bar {
  background: linear-gradient(90deg, var(--c-navy), var(--c-deep) 50%, var(--c-navy)) !important;
}

/* Section label */
html[data-theme="light"] .section-label {
  color: var(--c-ocean) !important;
  background: rgba(0,119,182,.07);
  border-color: rgba(0,119,182,.2);
}

/* Numbers strip — same as dark (navy base, white text) */
html[data-theme="light"] .numbers-strip {
  background: linear-gradient(135deg, var(--c-navy), var(--c-deep)) !important;
}
html[data-theme="light"] .num-val   { color: var(--c-sky-bright) !important; }
html[data-theme="light"] .num-label { color: rgba(255,255,255,.72) !important; }

/* Featured service card */
html[data-theme="light"] .hs-card-featured {
  background: linear-gradient(160deg, var(--c-deep), var(--c-ocean)) !important;
}

/* Hero stat numbers */
html[data-theme="light"] .hs-num { color: var(--c-deep) !important; }

/* Why pills */
html[data-theme="light"] .why-pill {
  background: rgba(0,119,182,.07) !important;
  border-color: rgba(0,119,182,.2) !important;
  color: var(--c-ocean) !important;
}
html[data-theme="light"] .why-num { color: var(--c-ocean) !important; }

/* Testimonial stars stay gold */
html[data-theme="light"] .testi-stars { color: #C9A84C !important; }
html[data-theme="light"] .testi-av {
  background: linear-gradient(135deg, var(--c-deep), var(--c-ocean)) !important;
}

/* Pricing badge */
html[data-theme="light"] .pt-plan-badge {
  background: var(--c-deep) !important;
  color: var(--c-sky-bright) !important;
  border: 1px solid rgba(0,150,199,.3) !important;
}
html[data-theme="light"] .pt-btn-primary {
  background: linear-gradient(160deg, var(--c-deep), var(--c-ocean)) !important;
}

/* Page heroes */
html[data-theme="light"] .ph-hero {
  background: linear-gradient(160deg, var(--c-navy), var(--c-deep)) !important;
}

/* Portfolio */
html[data-theme="light"] .work-tab.active {
  color: var(--c-ocean) !important;
  border-bottom-color: var(--c-ocean) !important;
}
html[data-theme="light"] .wc-view { color: var(--c-ocean) !important; }
html[data-theme="light"] .wsh-count { color: var(--c-ocean) !important; }

/* Nav */
html[data-theme="light"] .nav-link.active::after { background: var(--c-ocean) !important; }
html[data-theme="light"] .nav-link:hover { color: var(--c-deep) !important; }

/* Pull quote */
html[data-theme="light"] .intro-pull-quote {
  border-left-color: var(--c-ocean) !important;
  color: var(--c-deep) !important;
}

/* BSR / curved ribbon — charcoal black same as dark */
html[data-theme="light"] .bsr-section {
  background: linear-gradient(135deg, #1a1a1d, #0d0d0f) !important;
}

/* Footer */
html[data-theme="light"] .site-footer {
  background: linear-gradient(180deg, #020d22, #01060f) !important;
}

/* Final CTA */
html[data-theme="light"] .final-cta { background: linear-gradient(135deg, #1a1a1d 0%, #0d0d0f 100%) !important; }
html[data-theme="light"] .final-cta .text-gradient {
  color: var(--c-sky-bright) !important;
  background: none !important;
  -webkit-text-fill-color: var(--c-sky-bright) !important;
}

/* Selection */
html[data-theme="light"] ::selection {
  background: rgba(0,119,182,.22);
  color: var(--c-navy);
}

/* Scrollbar */
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-ocean), var(--c-deep));
}


/* ================================================================
   UTILITY CLASSES
   ================================================================ */

/* Section background helpers */
.bg-ocean   { background: linear-gradient(135deg, var(--c-navy), var(--c-deep)); }
.bg-red-section { background: linear-gradient(135deg, #1a1a1d, #0d0d0f); }
.bg-pattern { background-image: var(--pattern-leaves); background-size: 320px 320px; }

/* Text */
.text-sky   { color: var(--c-sky-bright); }
.text-ocean { color: var(--c-ocean); }
.text-red   { color: var(--c-red); }

/* Accent badge — magenta as standalone solid chip */
.badge-pink {
  background: var(--c-pink) !important;
  color: #fff !important;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Glow helpers */
.glow-sky {
  box-shadow: 0 0 22px rgba(0,180,216,.28), 0 0 56px rgba(0,180,216,.1);
}

/* Border accents */
.border-sky { border-color: rgba(0,180,216,.38); }


/* ================================================================
   ADMIN — Client Manager Live Preview Containment
   ================================================================ */

.cm-preview-strip {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.cm-strip-outer {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.cm-strip-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: cmScroll 32s linear infinite;
}

.cm-strip-logo {
  flex-shrink: 0;
  width: 140px;
  min-width: 0;
}

@media (max-width: 1100px) { .cm-strip-logo { width: 120px; } }
@media (max-width: 800px)  { .cm-strip-logo { width: 100px; } }

.cm-layout { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════
   HOMEPAGE POLISH PASS — glassmorphism, hover energy, breathing room
   Additive only: enhances existing card/button/section rules without
   overriding their core layout or theme colors.
   ================================================================ */

/* ── Cards: soft glass + lift-and-glow on hover ── */
.hs-card,
.testi-card,
.iql-card,
.pt-plan,
.mv-card {
  transition: transform .45s cubic-bezier(.2,.8,.2,1),
              box-shadow .45s cubic-bezier(.2,.8,.2,1),
              border-color .45s ease;
}
.hs-card:hover,
.testi-card:hover,
.iql-card:hover,
.pt-plan:hover,
.mv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(0,180,216,.12);
}
html[data-theme="light"] .hs-card:hover,
html[data-theme="light"] .testi-card:hover,
html[data-theme="light"] .iql-card:hover,
html[data-theme="light"] .pt-plan:hover,
html[data-theme="light"] .mv-card:hover {
  box-shadow: 0 20px 50px rgba(2,62,138,.14), 0 0 0 1px rgba(0,119,182,.16);
}

/* Portfolio tiles — gentle zoom + glow frame on hover (image stays crisp, no blur) */
.wt-tile {
  transition: box-shadow .5s ease;
}
.wt-tile:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(0,180,216,.18);
}
.wt-tile:hover .wt-tile-img {
  transform: scale(1.06);
}
.wt-tile-img {
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

/* ── Buttons: soft glow pulse on hover for a premium "alive" feel ── */
.btn-primary {
  position: relative;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease;
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 12px 36px rgba(0,180,216,.5), 0 0 0 1px rgba(255,255,255,.08);
}
.btn-ghost, .btn-outline {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, color .35s ease, background .35s ease;
}
.btn-ghost:hover, .btn-outline:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

/* ── Section breathing room — slightly more vertical rhythm site-wide ── */
.hs-grid, .testi-grid, .why-v2-grid, .iql-grid, .pt-plans, .wt-tiles {
  margin-top: 8px;
}
section + section,
.numbers-strip + section,
section + .numbers-strip {
  margin-top: 0;
}

/* ── Smooth gradient seams between adjacent dark sections (no hard edges) ── */
.numbers-strip::after,
.showreel-section::after,
.bsr-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 64px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.18));
  pointer-events: none;
}
.numbers-strip, .showreel-section, .bsr-section { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .hs-card, .testi-card, .iql-card, .pt-plan, .mv-card,
  .wt-tile, .wt-tile-img, .btn-primary, .btn-ghost, .btn-outline,
  .scroll-in {
    transition: none !important;
    transform: none !important;
  }
  .scroll-in { opacity: 1; }
}