/* Youtubify — pixel-match foundation for the contentfolio template look.
   Geist + DM Sans, pure-black bg, wide navy glow, MEDIUM-weight tight type, small refined buttons. */
:root{ --accent:#3064ff; --accent-light:#3064ff; --accent-dark:#002696; }
html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; background:#000; }

/* wide navy radial glow behind the hero (on black) */
.glow-top{
  position:absolute; inset:0 0 auto 0; height:820px; z-index:0; pointer-events:none;
  background:
    radial-gradient(1150px 620px at 50% 40px, rgba(8,26,80,.80) 0%, rgba(8,26,80,.32) 42%, rgba(0,0,0,0) 72%),
    radial-gradient(1500px 700px at 50% -120px, rgba(48,100,255,.10) 0%, rgba(0,0,0,0) 60%);
}

/* type scale — Geist medium, tight negative tracking (matches live h1 64/70/-2.56, h2 42/50/-1.68) */
.display{ font-family:'Geist',sans-serif; font-weight:500; font-size:clamp(40px,6.6vw,64px);
  line-height:1.07; letter-spacing:-0.04em; color:#fff; }
.headline{ font-family:'Geist',sans-serif; font-weight:500; font-size:clamp(30px,4.6vw,42px);
  line-height:1.18; letter-spacing:-0.04em; color:#fff; }
.subcopy{ font-size:clamp(14px,1.4vw,16px); line-height:1.4; color:rgba(255,255,255,.8); }
.eyebrow{ font-size:.82rem; font-weight:600; letter-spacing:.04em; color:#8aa2d6; }

/* "New" pill — faint white gradient capsule (radius 40px) + solid blue-gradient badge */
.pill{ display:inline-flex; align-items:center; gap:.55rem; padding:6px 16px 6px 6px;
  border-radius:40px; background:linear-gradient(rgba(255,255,255,.08) -99%, rgba(255,255,255,.03) 100%);
  color:#fff; font-size:16px; font-weight:400; }
.pill-badge{ background:linear-gradient(#002696 0%, #3064ff 100%); color:#fff; font-weight:700; font-size:12px;
  padding:9px 10px; border-radius:40px; }

/* buttons — match template: vertical blue gradient, 10px radius, no shadow */
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:12px 18px; border-radius:10px; font-size:16px; font-weight:400; color:#fff;
  background:linear-gradient(#3064ff 0%, #002696 100%); box-shadow:none; transition:filter .15s, transform .15s; }
.btn-primary:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn-secondary{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:12px 18px; border-radius:10px; font-size:16px; font-weight:400; color:#fff;
  background:rgba(255,255,255,.1); border:none; transition:background .15s; }
.btn-secondary:hover{ background:rgba(255,255,255,.16); }

/* cards */
.card{ background:#0c0f17; border:1px solid rgba(255,255,255,.08); border-radius:1rem; padding:1.4rem; }
.grad-text{ color:#5b8cff; } /* the template's accent words are solid blue, not a gradient */

/* asset / channel cards (showcase grids) */
.asset-card{ border-radius:1rem; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#0a0d14; }
.asset-thumb{ position:relative; aspect-ratio:16/10; display:flex; align-items:flex-end; padding:.9rem; }
.asset-pill{ position:absolute; top:.75rem; right:.75rem; background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  color:#fff; font-size:.78rem; font-weight:600; padding:.25rem .6rem; border-radius:999px; }
.asset-meta{ display:flex; align-items:center; gap:.45rem; background:rgba(0,0,0,.5); backdrop-filter:blur(6px);
  padding:.35rem .7rem; border-radius:999px; color:#fff; font-weight:600; font-size:.9rem; }
.asset-meta .check{ color:#3b82f6; }

/* grayscale logo bar under hero */
.logobar{ display:flex; align-items:center; justify-content:center; gap:3rem; flex-wrap:wrap;
  opacity:.55; filter:grayscale(1); }
.logobar .logo{ color:#cbd3df; font-weight:700; font-size:1.15rem; letter-spacing:-.01em; white-space:nowrap; }

/* sticky nav */
.nav{ position:sticky; top:0; z-index:50; transition:background .25s, border-color .25s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(0,0,0,.7); backdrop-filter:blur(12px); border-bottom-color:rgba(255,255,255,.08); }

/* FAQ accordion */
.faq-item{ border-bottom:1px solid rgba(255,255,255,.08); }
.faq-q{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.3rem 0; color:#fff; font-weight:500; font-size:1.05rem; cursor:pointer; background:none; border:none; }
.faq-icon{ color:#5b8cff; font-size:1.4rem; transition:transform .2s; flex:none; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s; color:rgba(255,255,255,.8); }
.faq-a p{ padding:0 0 1.3rem; line-height:1.6; }
.faq-item.open .faq-a{ max-height:420px; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }

.counter{ font-variant-numeric:tabular-nums; }
/* Typeform inline embed fills its container (avoids the 300x150 fallback) */
#tf-inline iframe{ width:100%!important; height:100%!important; border:0!important; }
#tf-inline .tf-v1-widget,#tf-inline [data-tf-widget]{ width:100%!important; height:100%!important; }
@media (max-width:768px){ .glow-top{ height:560px; } .logobar{ gap:1.6rem; } }