/* BallonDor Scout — Custom CSS */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root { --nav-h:64px; --sw:256px; --scw:72px; }

body { font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased; }

/* ── Nav — always white & clean ── */
#main-nav { transition:background .3s ease,box-shadow .3s ease; }
#main-nav.scrolled { box-shadow:0 2px 16px rgba(0,0,0,.07); }

/* ── Hero ── */
.hero-section { position:relative; min-height:100vh; display:flex; align-items:center; background:#070A15; }
.hero-bg      { position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.28) saturate(.65); }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(140deg,rgba(7,10,21,.98) 0%,rgba(9,15,32,.86) 50%,rgba(8,12,24,.62) 100%); }
.hero-glow    { position:absolute; inset:0; background:radial-gradient(ellipse at 18% 55%,rgba(201,168,76,.07) 0%,transparent 55%),radial-gradient(ellipse at 78% 25%,rgba(59,130,246,.04) 0%,transparent 50%); pointer-events:none; }

/* ── Sidebar ── */
.sb { width:var(--sw); transition:width .3s cubic-bezier(.4,0,.2,1); overflow:hidden; flex-shrink:0; }
.sb.col { width:var(--scw); }
.sb-main { margin-left:var(--sw); transition:margin-left .3s cubic-bezier(.4,0,.2,1); }
.sb-text  { max-width:200px; opacity:1; overflow:hidden; white-space:nowrap; transition:max-width .25s ease,opacity .2s ease; }
.sb-label { max-height:28px; opacity:1; overflow:hidden; transition:max-height .25s ease,opacity .2s ease,margin .2s ease; }
.sb.col .sb-text  { max-width:0; opacity:0; }
.sb.col .sb-label { max-height:0; opacity:0; margin:0!important; }
.sb.col .sb-link  { justify-content:center; padding-left:0!important; padding-right:0!important; }

/* ── Progress bar ── */
.prog-fill { background:linear-gradient(90deg,#C9A84C,#DEC070); border-radius:9999px; }

/* ── How It Works — step connector line ── */
.hiw-connector { position:absolute; top:32px; left:calc(50% + 32px); right:calc(-50% + 32px); height:1px; background:linear-gradient(90deg, #e5e7eb, #d1d5db); display:none; }
@media(min-width:768px){ .hiw-connector { display:block; } }

/* ── Card hover shine ── */
.card-shine { position:relative; overflow:hidden; }
.card-shine::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%); opacity:0; transition:opacity .4s; }
.card-shine:hover::after { opacity:1; }

/* ── Animations ── */
@keyframes slideInRight { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
.flash-anim { animation:slideInRight .28s ease; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.pulse { animation:pulse 2.5s ease-in-out infinite; }
.fade-up { opacity:0; transform:translateY(22px); transition:opacity .55s ease,transform .55s ease; }
.fade-up.in { opacity:1; transform:none; }

/* ── Section label pill ── */
.section-pill { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#9E7D28; background:rgba(201,168,76,.08); border:1px solid rgba(201,168,76,.2); padding:4px 12px; border-radius:9999px; }

/* ── Pricing card highlight ── */
.pricing-popular { box-shadow:0 0 0 2px #C9A84C, 0 20px 60px -10px rgba(201,168,76,.18); }

/* ── Scrollbar ── */
.sb::-webkit-scrollbar { width:3px; }
.sb::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:2px; }
.sb { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent; }

/* ── Mobile ── */
@media(max-width:768px){
  :root { --nav-h:60px; }
  .sb { position:fixed; top:var(--nav-h); bottom:0; left:0; width:var(--sw)!important;
        transform:translateX(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1)!important; z-index:300; }
  .sb.mob-open { transform:translateX(0)!important; }
  .sb-main { margin-left:0!important; }
}

/* ── Discover filters ── */
.filter-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:9999px; font-size:12px; font-weight:600; border:1.5px solid #e5e7eb; color:#6b7280; cursor:pointer; transition:all .2s; background:#fff; }
.filter-chip:hover, .filter-chip.active { border-color:#C9A84C; color:#9E7D28; background:rgba(201,168,76,.06); }

/* ── Talent card text shadow for readability ── */
.talent-card-meta { text-shadow:0 1px 3px rgba(0,0,0,.5); }