/* ============================================================
   TRANSFORM CO — Concept Funnels (Nick Danev rebrand)
   Re-skin of the Gym Church glass system for the secular,
   performance-led Transform Co brand split.
     Base    : imports /assets/gc.css (structure + components)
     Palette : TRUE-BLACK iOS glass + warm muted GOLD accent.
               Matches the TransformCo poster — white display
               headlines, a single gold accent word, thin gold
               rule lines + gold-outlined boxes. No blue.
     Type    : Anton (display) + Barlow (body) — unchanged
     Reuses  : /assets/gc.js verbatim (brand-agnostic)
   We only override design TOKENS + the few rules where gc.css
   hard-codes the accent, so every component re-tints automatically.
   ============================================================ */
@import url('/assets/gc.css');

:root{
  /* warm muted gold — same scale as the poster.
     Keep the SAME var names so all gc.css rules inherit. */
  --gold:#C7A15A;        /* primary accent  (muted gold)         */
  --gold-lo:#A17C50;     /* deep accent                          */
  --gold-hi:#EBCF93;     /* bright accent (headline pop)         */
  --gold-deep:#6b5a43;   /* muted deep                           */
  --ember:#D9A24A;       /* warm "transformation" pop, stays gold */
  --ember-hi:#EBCF93;

  --bg:#060708; --bg-2:#0b0d10; --bg-3:#12151a;
  --ink:#f3f6fb; --ink-soft:#b3bccb; --ink-mute:#737e8f;
  --line:rgba(255,255,255,.10); --line-gold:rgba(199,161,90,.26);

  --grad-gold:linear-gradient(100deg,var(--gold-hi),var(--gold) 46%,var(--gold-lo));
  --grad-ember:linear-gradient(100deg,var(--ember-hi),var(--ember));
  --glow:0 0 0 1px rgba(199,161,90,.45), 0 22px 70px -20px rgba(199,161,90,.40);
}

/* ---- ambient aurora: warm gold haze, no blue ---- */
.bg-aura i:nth-child(1){background:radial-gradient(circle,rgba(199,161,90,.18),transparent 65%)}
.bg-aura i:nth-child(2){background:radial-gradient(circle,rgba(235,207,147,.10),transparent 65%)}
.bg-aura i:nth-child(3){background:radial-gradient(circle,rgba(199,161,90,.13),transparent 65%)}

/* ---- concept strip + nav accents ---- */
.concept-strip{color:var(--gold); border-bottom-color:rgba(199,161,90,.16)}
.concept-strip a:hover{color:var(--gold-hi)}

/* ---- buttons: the primary keeps the gold gradient, dark ink on gold ---- */
.btn-primary{color:#15100a;
  box-shadow:0 14px 40px -12px rgba(199,161,90,.55), inset 0 1px 0 rgba(255,255,255,.45)}
.btn-primary:hover{box-shadow:0 20px 54px -14px rgba(199,161,90,.7), inset 0 1px 0 rgba(255,255,255,.45)}
/* optional deep-gold CTA variant for the "transform" energy moment */
.btn-ember{background:var(--grad-ember); color:#15100a;
  box-shadow:0 14px 40px -12px rgba(217,162,74,.6), inset 0 1px 0 rgba(255,255,255,.45)}
.btn-ember:hover{transform:translateY(-2px); box-shadow:0 20px 54px -14px rgba(217,162,74,.75), inset 0 1px 0 rgba(255,255,255,.45)}

/* ---- VSL mute pill + progress bar inherit the gold gradient via tokens,
        but the pill text needs the dark-on-gold ink ---- */
.vmute{color:#15100a;
  box-shadow:0 14px 44px -10px rgba(199,161,90,.65), inset 0 1px 0 rgba(255,255,255,.45)}
.vshell{box-shadow:var(--shadow),0 0 90px -28px rgba(199,161,90,.4)}

/* ---- spots bar glow ---- */
.spots-bar i{box-shadow:0 0 14px rgba(199,161,90,.6)}

/* ---- "Click This Now" VSL play-with-sound overlay (black + gold) ---- */
.vcta{position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; cursor:pointer; border:0;
  background:radial-gradient(circle at 50% 42%,rgba(0,0,0,.18),rgba(0,0,0,.62));
  color:var(--ink); font-family:'Barlow',sans-serif; -webkit-tap-highlight-color:transparent;
  transition:opacity .45s ease, visibility .45s ease}
.vcta .ring{width:88px; height:88px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-gold); color:#15100a;
  box-shadow:0 18px 50px -12px rgba(199,161,90,.7), inset 0 1px 0 rgba(255,255,255,.5);
  animation:vctapulse 2.2s infinite}
.vcta .ring svg{width:34px; height:34px; margin-left:4px}
.vcta .ring::before{content:""; position:absolute; width:88px; height:88px; border-radius:50%;
  border:2px solid rgba(199,161,90,.55); animation:vctaring 2.2s infinite}
.vcta b{font:800 1.18rem/1 'Anton','Barlow',sans-serif; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6)}
.vcta small{font:600 .72rem/1 'Barlow'; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-hi)}
@keyframes vctapulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes vctaring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
/* once "Click This Now" is clicked, strip ALL overlays instantly — clean video only */
.vshell.cta-done .vcta,
.vshell.cta-done .vbadge,
.vshell.cta-done .vmute,
.vshell.cta-done .vbar,
.vshell.cta-done .vscrim{opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transition:none !important}

/* ---- feature icon tiles ---- */
.feat .ic{background:rgba(199,161,90,.12); border-color:var(--line-gold)}

/* ---- ticker bullet glyph: square "▪" reads more industrial than ✦ ---- */
.ticker-track span::after{content:"▪"; color:var(--gold); font-size:.7rem}

/* ---- before/after compare handle ---- */
.cmp .cmp-handle{background:var(--gold-hi)}

/* ---- ptab / segment "on" state ink (dark on bright gold) ---- */
.ptabs button.on{box-shadow:0 10px 30px -10px rgba(199,161,90,.6)}
.seg-ctl button.on{box-shadow:0 8px 24px -8px rgba(199,161,90,.55)}
.ptabs button.on,.seg-ctl button.on,.vmute.on{color:#15100a}

/* ---- "ember" eyebrow helper for the transformation lines ---- */
.eyebrow.warm{color:var(--ember)}
.grad-ember{background:var(--grad-ember); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---- portfolio / hub specific bits (Transform Co split note) ---- */
.split-note{display:inline-flex; align-items:center; gap:.6em;
  font:600 .72rem/1 'Barlow'; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); background:rgba(199,161,90,.10); border:1px solid rgba(199,161,90,.24);
  border-radius:999px; padding:.5rem .9rem}
.split-note .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px var(--gold); animation:pulse 1.8s infinite}

/* ---- mobile navbar fit: the "TRANSFORM CO" wordmark + CTA overflow the
        floating glass bar on small screens. Drop the wordmark < 560px so the
        logo mark + Apply button always fit (nav links already hidden < 840px). ---- */
@media(max-width:560px){
  .navbar .logo span{display:none}
  .navbar .btn{padding:.62rem 1.15rem; font-size:.86rem}
}