@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Barlow+Condensed:wght@400;600;700&family=Bebas+Neue&family=DM+Sans:wght@400;500;700&family=Inter:wght@400;500;600;700;800&family=Lato:wght@400;700;900&family=Manrope:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800&family=Open+Sans:wght@400;600;700;800&family=Oswald:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&family=Poppins:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Raleway:wght@400;500;600;700;800&family=Roboto:wght@400;500;700;900&family=Roboto+Condensed:wght@400;700&family=Space+Grotesk:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700;800&display=swap');
/* =========================================================
   Live Streaming BD — Design tokens
   ========================================================= */
:root{
  --black:        #F6F8FB;
  --charcoal:     #FFFFFF;
  --panel:        #FFFFFF;
  --stripe:       #F1F5F9;
  --line:         #E2E8F0;
  --orange:       #E85D04;
  --orange-2:     #F97316;
  --amber:        #B45309;
  --cream:        #172033;
  --cream-dim:    #5B6577;
  --success:      #16865B;
  --shadow:       0 18px 45px rgba(15,23,42,.10);
  --radius:       14px;
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --header-bg:    #111827;
  --header-text:  #FFFFFF;
  --header-border:#F97316;
  --header-muted: #D1D5DB;
  --button-text:  #FFFFFF;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

::selection{ background:var(--orange); color:var(--black); }

:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
}

/* -------- Tiger stripe texture (signature motif) -------- */
.stripes{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.stripes span{
  position:absolute;
  top:-20%;
  height:140%;
  width:46px;
  background:linear-gradient(180deg, rgba(232,89,12,.10), rgba(232,89,12,.02));
  transform:skewX(-14deg);
}

/* -------- Eyebrow / labels -------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  letter-spacing:.05em;
  font-size:12px;
  color:var(--orange-2);
  text-transform:none;
  font-weight:800;
}
.eyebrow::before{
  content:"";
  width:26px;
  height:3px;
  background:var(--orange);
  display:inline-block;
}

/* -------- Headings -------- */
h1,h2,h3,h4{
  font-family:var(--font-body);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  margin:0 0 .55em;
  text-transform:none;
}
h1{ font-size:clamp(2.4rem, 6vw, 4.6rem); }
h2{ font-size:clamp(1.8rem, 4vw, 2.8rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; color:var(--cream-dim); }

.accent{ color:var(--orange-2); }

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--header-bg);
  color:var(--header-text);
  border-bottom:2px solid var(--header-border);
  box-shadow:0 8px 24px rgba(15,23,42,.12);
  isolation:isolate;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
  max-width:1180px;
  margin:0 auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--header-text);
}
.brand img{ height:44px; width:auto; }
.nav-links{
  display:flex;
  gap:30px;
  align-items:center;
}
.nav-links a{
  font-size:14px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  color:var(--header-muted);
  position:relative;
  padding:6px 0;
  transition:color .2s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--header-text); }
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:var(--orange);
}
.nav-cta{
  background:var(--orange);
  color:var(--button-text) !important;
  padding:10px 20px;
  border-radius:999px;
  font-weight:800;
}
.nav-cta:hover{ background:var(--orange-2); }

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  border-radius:8px;
  width:44px; height:40px;
  color:var(--header-text);
  font-size:20px;
  cursor:pointer;
}

@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed;
    inset:72px 0 0 0;
    flex-direction:column;
    background:var(--header-bg);
    color:var(--header-text);
    padding:28px 20px;
    gap:22px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    align-items:flex-start;
    border-top:1px solid var(--line);
  }
  .nav-links.open{
    opacity:1; transform:translateY(0); pointer-events:auto;
  }
  .nav-links a{ font-size:16px; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:800;
  font-size:14px;
  letter-spacing:.03em;
  text-transform:none;
  padding:13px 22px;
  border-radius:8px;
  cursor:pointer;
  border:2px solid transparent;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--orange); color:var(--button-text); }
.btn-primary:hover{ background:var(--orange-2); }
.btn-outline{ border-color:var(--cream-dim); color:var(--cream); background:transparent; }
.btn-outline:hover{ border-color:var(--cream); background:rgba(246,238,224,.06); }
.btn-block{ width:100%; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  padding:76px 0 70px;
  overflow:hidden;
  background:linear-gradient(180deg, var(--black), var(--charcoal));
  border-bottom:1px solid var(--line);
}
.hero .wrap{ position:relative; z-index:2; }
.hero-badge{
  display:inline-block;
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.12em;
  color:var(--amber);
  border:1px solid var(--line);
  background:var(--panel);
  padding:8px 16px;
  border-radius:999px;
  margin-bottom:22px;
}
.hero h1{ max-width:780px; }
.hero-sub{
  max-width:560px;
  font-size:1.1rem;
  margin-bottom:34px;
}
.hero-stats{
  display:flex;
  gap:36px;
  margin-top:56px;
  flex-wrap:wrap;
}
.hero-stat b{
  display:block;
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--cream);
}
.hero-stat span{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--cream-dim);
}

/* =========================================================
   Section shell
   ========================================================= */
section{ padding:88px 0; position:relative; }
.section-alt{ background:var(--charcoal); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head p{ font-size:1.05rem; }

/* =========================================================
   Roster grid (app cards) — signature element
   ========================================================= */
.roster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:22px;
}
.roster-card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.roster-card:hover{ border-color:var(--orange); transform:translateY(-4px); }
.roster-num{
  position:absolute;
  top:-14px;
  right:6px;
  font-family:var(--font-display);
  font-size:5.2rem;
  color:transparent;
  -webkit-text-stroke:1.5px var(--line);
  line-height:1;
  user-select:none;
}
.roster-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
  position:relative;
  z-index:1;
}
.roster-logo{
  width:56px; height:56px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  flex:none;
  background:var(--stripe);
}
.roster-logo img{ width:100%; height:100%; object-fit:cover; }
.roster-name{ font-family:var(--font-display); font-size:1.25rem; text-transform:uppercase; }
.roster-tag{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--amber);
  font-weight:800;
}
.roster-card p{ position:relative; z-index:1; font-size:14.5px; min-height:66px; }
.roster-actions{ display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1; }
.roster-actions .btn{ flex:1; padding:11px 14px; font-size:12.5px; }
.roster-more{
  display:block;
  margin-top:14px;
  font-size:12.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--cream-dim);
  position:relative; z-index:1;
}
.roster-more:hover{ color:var(--orange-2); }

/* =========================================================
   Playbook (how it works) steps
   ========================================================= */
.playbook{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.play-step{
  padding:32px 26px;
  border-right:1px solid var(--line);
  background:var(--panel);
}
.play-step:last-child{ border-right:none; }
.play-step .num{
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--orange);
  display:block;
  margin-bottom:10px;
}
.play-step h4{ margin-bottom:8px; font-size:1rem; }
.play-step p{ font-size:14px; margin:0; }

/* =========================================================
   Benefit lists
   ========================================================= */
.benefit-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:24px;
}
.benefit-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px;
}
.benefit-card .eyebrow{ margin-bottom:14px; }
.benefit-card ul{ display:flex; flex-direction:column; gap:14px; }
.benefit-card li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14.5px;
  color:var(--cream);
}
.benefit-card li::before{
  content:"";
  flex:none;
  width:9px; height:9px;
  margin-top:6px;
  background:var(--orange);
  border-radius:2px;
  transform:rotate(45deg);
}

/* =========================================================
   Why us — scouting report
   ========================================================= */
.report-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:20px;
}
.report-item{
  padding:24px;
  border-left:3px solid var(--orange);
  background:var(--stripe);
  border-radius:0 10px 10px 0;
}
.report-item h4{ font-size:.95rem; margin-bottom:6px; }
.report-item p{ font-size:13.5px; margin:0; }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{
  position:relative;
  background:linear-gradient(120deg, var(--orange) 0%, #C7460A 100%);
  color:var(--black);
  border-radius:var(--radius);
  padding:56px 44px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}
.cta-band h2{ color:var(--black); margin-bottom:6px; }
.cta-band p{ color:rgba(13,11,9,.75); margin:0; font-size:1.02rem; }
.cta-band .btn-outline{ border-color:var(--black); color:var(--black); }
.cta-band .btn-outline:hover{ background:rgba(13,11,9,.1); }
.cta-band .btn-primary{ background:var(--black); color:var(--cream); }
.cta-band .btn-primary:hover{ background:#000; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:#172033;
  color:#F8FAFC;
  border-top:1px solid var(--line);
  padding:60px 0 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px;
}
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.footer-brand img{ height:46px; }
.footer-brand span{ font-family:var(--font-display); font-size:1.2rem; text-transform:uppercase; }
.footer-col h4{
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:16px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:14px; color:#CBD5E1; }
.footer-col a:hover{ color:#FFFFFF; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:12.5px;
  color:#CBD5E1;
}
@media (max-width:760px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   App detail page
   ========================================================= */
.app-hero{
  padding:70px 0 60px;
  background:linear-gradient(180deg, var(--black), var(--charcoal));
  border-bottom:1px solid var(--line);
}
.app-hero-top{
  display:flex;
  align-items:center;
  gap:22px;
  margin-bottom:26px;
  flex-wrap:wrap;
}
.app-hero-logo{
  width:84px; height:84px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
}
.app-hero-logo img{ width:100%; height:100%; object-fit:cover; }
.breadcrumb{
  font-size:13px;
  color:var(--cream-dim);
  margin-bottom:20px;
  display:flex;
  gap:8px;
  align-items:center;
}
.breadcrumb a{ color:var(--cream-dim); }
.breadcrumb a:hover{ color:var(--orange-2); }

.two-col{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:40px;
  align-items:start;
}
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } }

.side-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  position:sticky;
  top:100px;
}
.side-card h3{ margin-bottom:6px; }
.side-card p{ font-size:14px; }
.side-stat-row{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.side-stat-row:last-of-type{ border-bottom:none; }
.side-stat-row b{ color:var(--cream); }

.step-list{ display:flex; flex-direction:column; gap:18px; margin-top:20px; }
.step-item{ display:flex; gap:16px; }
.step-item .dot{
  flex:none;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--stripe);
  border:1px solid var(--orange);
  color:var(--orange-2);
  font-family:var(--font-display);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.step-item h4{ font-size:15px; margin-bottom:4px; }
.step-item p{ font-size:13.5px; margin:0; }

.other-apps-strip{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding-bottom:10px;
}
.mini-app{
  flex:none;
  width:110px;
  text-align:center;
  padding:14px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
}
.mini-app:hover{ border-color:var(--orange); }
.mini-app img{ width:44px; height:44px; border-radius:10px; margin:0 auto 8px; object-fit:cover; }
.mini-app span{ font-size:12px; font-weight:700; }

/* =========================================================
   Contact / Join Now page
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px;
}
.contact-card h3{ margin-bottom:10px; }
.contact-card .big-link{
  display:block;
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--orange-2);
  margin:14px 0 20px;
  word-break:break-word;
}
.path-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin-top:10px;
}
.path-card{
  background:var(--stripe);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  text-align:left;
}
.path-card .eyebrow{ margin-bottom:10px; }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* Top live apps listing table-ish */
.apps-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:30px;
  flex-wrap:wrap;
  gap:16px;
}
.apps-count{ font-size:13px; color:var(--cream-dim); text-transform:uppercase; letter-spacing:.06em; }

/* =========================================================
   PREMIUM UPGRADE — motion, trust, mobile polish
   ========================================================= */

/* ---------- Scroll progress bar ---------- */
.progress-bar{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg, var(--orange), var(--amber));
  z-index:200;
  transition:width .08s linear;
}

/* ---------- Nav scrolled state ---------- */
.site-header{ transition:box-shadow .3s ease, background .3s ease; }
.site-header.scrolled{
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  background:rgba(13,11,9,.96);
}

/* ---------- Keyframes ---------- */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(232,89,12,.45); }
  50%{ box-shadow:0 0 0 10px rgba(232,89,12,0); }
}
@keyframes shimmerMove{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@keyframes ripple{
  from{ transform:scale(0); opacity:.55; }
  to{ transform:scale(2.6); opacity:0; }
}
@keyframes tigerDrift{
  0%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(-14px,10px) rotate(2deg); }
  100%{ transform:translate(0,0) rotate(0deg); }
}

/* ---------- Hero entrance choreography ---------- */
.hero-badge{ animation:fadeUp .7s ease both; }
.hero h1{ animation:fadeUp .8s ease .08s both; }
.hero-sub{ animation:fadeUp .8s ease .18s both; }
.hero .btn-row{ animation:fadeUp .8s ease .28s both; }
.hero-stats{ animation:fadeUp .8s ease .38s both; }
.hero-badge{
  animation-name:fadeUp, pulseGlow;
  animation-duration:.7s, 2.6s;
  animation-delay:0s, 1s;
  animation-iteration-count:1, infinite;
  animation-timing-function:ease, ease-in-out;
  animation-fill-mode:both, none;
}
.stripes span{ animation:tigerDrift 9s ease-in-out infinite; }
.stripes span:nth-child(2){ animation-duration:11s; animation-delay:-2s; }
.stripes span:nth-child(3){ animation-duration:8s; animation-delay:-4s; }
.stripes span:nth-child(4){ animation-duration:12s; animation-delay:-1s; }
.stripes span:nth-child(5){ animation-duration:10s; animation-delay:-6s; }

/* ---------- Reveal: staggered children ---------- */
.reveal{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; filter:blur(3px); }
.reveal.in{ filter:blur(0); }
.roster-grid.reveal-group .roster-card,
.benefit-cols.reveal-group .benefit-card,
.report-grid.reveal-group .report-item,
.path-grid.reveal-group .path-card,
.playbook.reveal-group .play-step{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.roster-grid.reveal-group.in .roster-card,
.benefit-cols.reveal-group.in .benefit-card,
.report-grid.reveal-group.in .report-item,
.path-grid.reveal-group.in .path-card,
.playbook.reveal-group.in .play-step{
  opacity:1; transform:translateY(0);
}
.roster-grid.reveal-group .roster-card:nth-child(1){ transition-delay:.02s; }
.roster-grid.reveal-group .roster-card:nth-child(2){ transition-delay:.08s; }
.roster-grid.reveal-group .roster-card:nth-child(3){ transition-delay:.14s; }
.roster-grid.reveal-group .roster-card:nth-child(4){ transition-delay:.20s; }
.roster-grid.reveal-group .roster-card:nth-child(5){ transition-delay:.26s; }
.roster-grid.reveal-group .roster-card:nth-child(6){ transition-delay:.32s; }
.roster-grid.reveal-group .roster-card:nth-child(7){ transition-delay:.38s; }
.benefit-cols.reveal-group .benefit-card:nth-child(2),
.report-grid.reveal-group .report-item:nth-child(2),
.path-grid.reveal-group .path-card:nth-child(2),
.playbook.reveal-group .play-step:nth-child(2){ transition-delay:.08s; }
.report-grid.reveal-group .report-item:nth-child(3),
.path-grid.reveal-group .path-card:nth-child(3),
.playbook.reveal-group .play-step:nth-child(3){ transition-delay:.16s; }
.report-grid.reveal-group .report-item:nth-child(4),
.playbook.reveal-group .play-step:nth-child(4){ transition-delay:.24s; }
.report-grid.reveal-group .report-item:nth-child(5){ transition-delay:.32s; }

/* ---------- Card hover motion ---------- */
.roster-card{ transition:border-color .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.roster-card:hover{
  transform:translateY(-8px) scale(1.012);
  box-shadow:0 22px 44px rgba(0,0,0,.42), 0 0 0 1px rgba(232,89,12,.25);
}
.roster-logo{ transition:transform .35s ease; }
.roster-card:hover .roster-logo{ transform:scale(1.08) rotate(-2deg); }
.roster-num{ transition:color .3s ease, -webkit-text-stroke-color .3s ease; }
.roster-card:hover .roster-num{ -webkit-text-stroke-color:var(--orange); }

.mini-app{ transition:transform .25s ease, border-color .25s ease; }
.mini-app:hover{ transform:translateY(-4px); }

.report-item{ transition:transform .25s ease, background .25s ease; }
.report-item:hover{ transform:translateX(4px); background:var(--panel); }

.path-card{ transition:transform .25s ease, border-color .25s ease; }
.path-card:hover{ transform:translateY(-6px); border-color:var(--orange); }

.benefit-card{ transition:transform .25s ease, border-color .25s ease; }
.benefit-card:hover{ transform:translateY(-4px); border-color:var(--line); }

/* ---------- Buttons: glow + ripple ---------- */
.btn{ position:relative; overflow:hidden; }
.btn-primary{ box-shadow:0 6px 20px rgba(232,89,12,.28); }
.btn-primary:hover{ box-shadow:0 10px 28px rgba(232,89,12,.42); }
.btn .ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:scale(0);
  animation:ripple .6s ease-out forwards;
  pointer-events:none;
}
.btn-outline .ripple{ background:rgba(232,89,12,.35); }

/* ---------- Trust marquee ---------- */
.trust-bar{
  border-bottom:1px solid var(--line);
  background:var(--charcoal);
  padding:22px 0;
  overflow:hidden;
}
.trust-bar-label{
  text-align:center;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cream-dim);
  margin-bottom:16px;
}
.marquee{
  display:flex;
  width:max-content;
  gap:52px;
  animation:marqueeScroll 26s linear infinite;
}
.trust-bar:hover .marquee{ animation-play-state:paused; }
.marquee-item{
  display:flex;
  align-items:center;
  gap:10px;
  opacity:.8;
  filter:grayscale(15%);
  white-space:nowrap;
}
.marquee-item img{ width:28px; height:28px; border-radius:7px; object-fit:cover; }
.marquee-item span{ font-family:var(--font-display); font-size:15px; letter-spacing:.03em; text-transform:uppercase; color:var(--cream-dim); }

/* ---------- Stats / counters ---------- */
.stats-band{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.stat-cell{
  padding:34px 24px;
  text-align:center;
  border-right:1px solid var(--line);
  background:var(--panel);
}
.stat-cell:last-child{ border-right:none; }
.stat-num{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,2.6rem);
  color:var(--orange-2);
  font-variant-numeric:tabular-nums;
  display:block;
}
.stat-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--cream-dim);
  margin-top:6px;
  display:block;
}
@media (max-width:760px){
  .stats-band{ grid-template-columns:repeat(2,1fr); }
  .stat-cell{ border-bottom:1px solid var(--line); }
}

/* ---------- Trust / security section ---------- */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}
.trust-card{
  background:var(--stripe);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.trust-icon{
  flex:none;
  width:44px; height:44px;
  border-radius:12px;
  background:rgba(232,89,12,.14);
  color:var(--orange-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:18px;
}
.trust-card h4{ margin-bottom:6px; font-size:.98rem; }
.trust-card p{ margin:0; font-size:13.5px; }

/* ---------- FAQ accordion ---------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:820px; }
.faq-item{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:800;
  font-size:15px;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-family:var(--font-display);
  font-size:22px;
  color:var(--orange-2);
  flex:none;
  transition:transform .3s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-body{
  padding:0 24px 20px;
  font-size:14px;
  color:var(--cream-dim);
  animation:fadeUp .35s ease both;
}
.faq-item summary{ transition:background .2s ease; }
.faq-item summary:hover{ background:var(--stripe); }

/* ---------- Small helper for premium micro-copy row ---------- */
.trust-strip{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:26px;
}
.trust-strip span{
  font-size:12.5px;
  color:var(--cream-dim);
  display:flex;
  align-items:center;
  gap:8px;
}
.trust-strip span::before{
  content:"✓";
  color:var(--success);
  font-weight:800;
}

/* ---------- Mobile ratio & spacing polish ---------- */
@media (max-width:600px){
  .wrap{ padding:0 18px; }
  section{ padding:64px 0; }
  .hero{ padding:76px 0 60px; }
  .hero-stats{ gap:22px; }
  .hero-stat b{ font-size:1.6rem; }
  .cta-band{ padding:36px 24px; flex-direction:column; align-items:flex-start; }
  .cta-band .btn-row{ width:100%; }
  .cta-band .btn{ flex:1; }
  .app-hero-top{ gap:14px; }
  .app-hero-logo{ width:64px; height:64px; }
  .roster-actions{ flex-direction:column; }
  .roster-actions .btn{ width:100%; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .stats-band{ grid-template-columns:1fr 1fr; }
}
@media (max-width:400px){
  h1{ font-size:2.1rem; }
  .stats-band{ grid-template-columns:1fr; }
  .stat-cell{ border-right:none; border-bottom:1px solid var(--line); }
}

/* =========================================================
   Contrast safety layer
   The admin can customize every color, but text must remain readable.
   ========================================================= */
body{ color:var(--auto-bg-text, var(--cream)); }
p{ color:var(--auto-bg-muted, var(--cream-dim)); }
.section-alt{ color:var(--auto-surface-text, var(--cream)); }
.section-alt p{ color:var(--auto-surface-muted, var(--cream-dim)); }
.roster-card,.play-step,.benefit-card,.trust-card,.faq-item,.mini-app,.app-hero,.path-card,.report-item{
  color:var(--auto-panel-text, var(--cream));
}
.roster-card p,.play-step p,.benefit-card p,.benefit-card li,.trust-card p,.faq-item .faq-body,.mini-app p,.path-card p,.report-item p,.roster-more{
  color:var(--auto-panel-muted, var(--cream-dim));
}
.roster-name,.play-step h4,.benefit-card h3,.trust-card h4,.faq-item summary,.path-card h3,.report-item h4{ color:var(--auto-panel-text, var(--cream)); }
.site-header .brand,.site-header .nav-links a{ color:var(--header-text); }
.site-header .nav-links a:not(.nav-cta){ color:var(--header-muted); }
.site-header .nav-links a:not(.nav-cta):hover,.site-header .nav-links a.active{ color:var(--header-text); }
.btn-primary{ color:var(--button-text) !important; }

/* Prevent mobile content from touching the viewport edges or hiding behind the header. */
@media (max-width:860px){
  .nav{ min-height:72px; padding:10px 16px; gap:12px; }
  .brand{ min-width:0; gap:9px; font-size:1rem; }
  .brand img{ height:42px; }
  .nav-links{ z-index:999; overflow-y:auto; }
}
@media (max-width:560px){
  .nav{ padding:9px 14px; }
  .brand img{ height:40px; }
  .nav-toggle{ flex:0 0 44px; }
}

/* =========================================================
   Floating WhatsApp contact
   ========================================================= */
.floating-whatsapp{
  position:fixed;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:2147483000;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:52px;
  padding:0 17px;
  border-radius:999px;
  background:#25D366;
  color:#fff !important;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 12px 30px rgba(37,211,102,.28);
  border:3px solid #fff;
  text-decoration:none;
  pointer-events:auto;
  transition:transform .2s ease, box-shadow .2s ease;
}
.floating-whatsapp:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(37,211,102,.36); }
.floating-whatsapp .wa-icon{
  width:27px !important;
  height:27px !important;
  min-width:27px !important;
  max-width:27px !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 27px !important;
}
.floating-whatsapp .wa-icon svg{
  width:27px !important;
  height:27px !important;
  min-width:27px !important;
  min-height:27px !important;
  max-width:27px !important;
  max-height:27px !important;
  display:block !important;
}
@media (max-width:560px){
  .floating-whatsapp{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); width:56px; height:54px; min-height:54px; padding:0; justify-content:center; }
  .floating-whatsapp .wa-label{ display:none; }
}

/* Dynamic app search */
.app-search-wrap{margin:24px 0 8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.app-search-box{position:relative;flex:1 1 420px}
.app-search-box input{width:100%;box-sizing:border-box;padding:15px 46px 15px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);font:500 16px/1.4 var(--font-body);outline:none;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.app-search-box input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,93,4,.14)}
.app-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);cursor:pointer;padding:8px;border-radius:10px;font:700 14px var(--font-body)}
.app-search-clear:hover{background:rgba(127,127,127,.1);color:var(--text)}
.app-search-count{font-size:14px;color:var(--muted);min-width:150px}
.search-empty{grid-column:1/-1;padding:38px 20px;text-align:center;border:1px dashed var(--line);border-radius:16px;background:var(--surface);color:var(--text);display:flex;flex-direction:column;gap:8px}
.search-empty span{color:var(--muted)}

/* =========================================================
   LIVE STREAMING BD — NEW THEME v2
   Deep navy / electric cyan / violet
   Visual refresh only: structure + JS hooks preserved.
   ========================================================= */
:root{
  --black:#070B16;
  --charcoal:#0B1020;
  --panel:#10182B;
  --stripe:#0D1424;
  --line:rgba(148,163,184,.16);
  --orange:#42E8FF;
  --orange-2:#7C5CFC;
  --amber:#8FEFFF;
  --cream:#F7FAFF;
  --cream-dim:#A9B4C7;
  --success:#39D98A;
  --shadow:0 20px 60px rgba(0,0,0,.28);
  --radius:18px;
  --header-bg:rgba(7,11,22,.84);
  --header-text:#FFFFFF;
  --header-border:rgba(66,232,255,.34);
  --header-muted:#B5C0D3;
  --button-text:#06101A;
}
body{
  background:
    radial-gradient(circle at 15% -10%, rgba(124,92,252,.12), transparent 32%),
    radial-gradient(circle at 90% 0%, rgba(66,232,255,.10), transparent 28%),
    var(--black);
  color:var(--cream);
}
::selection{background:rgba(66,232,255,.85);color:#07101A}
:focus-visible{outline-color:var(--orange)}
p{color:var(--cream-dim)}

.site-header{
  background:var(--header-bg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--header-border);
  box-shadow:0 12px 34px rgba(0,0,0,.20);
}
.site-header.scrolled{background:rgba(7,11,22,.94);box-shadow:0 16px 42px rgba(0,0,0,.35)}
.nav{padding:12px 24px}
.brand{font-family:var(--font-body);font-weight:900;letter-spacing:.02em;text-transform:none}
.brand img,.footer-brand img{border-radius:12px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.nav-links{gap:26px}
.nav-links a{color:var(--header-muted);font-weight:650}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a.active::after{height:3px;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--orange-2))}
.nav-cta{background:linear-gradient(135deg,var(--orange),#8BF4FF 58%,var(--orange-2));color:#06101A!important;box-shadow:0 8px 24px rgba(66,232,255,.20)}
.nav-cta:hover{filter:brightness(1.06);background:linear-gradient(135deg,#7BF0FF,#A4FAFF 58%,#957BFF)}
.nav-toggle{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
@media(max-width:860px){.nav-links{background:rgba(7,11,22,.97);border-top:1px solid rgba(148,163,184,.14)}}

.stripes span{width:68px;background:linear-gradient(180deg,rgba(66,232,255,.08),rgba(124,92,252,.025));filter:blur(.2px)}
.eyebrow{color:var(--orange);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.eyebrow::before{background:linear-gradient(90deg,var(--orange),var(--orange-2));border-radius:999px}
h1,h2,h3,h4{color:var(--cream);font-weight:800}
.accent{color:var(--orange)}

.hero{
  padding:104px 0 88px;
  background:
    radial-gradient(circle at 76% 24%, rgba(66,232,255,.13), transparent 23%),
    radial-gradient(circle at 90% 55%, rgba(124,92,252,.14), transparent 31%),
    linear-gradient(135deg,#080D1B 0%,#0D1528 55%,#0B1020 100%);
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 78%);
}
.hero-badge{
  border:1px solid rgba(66,232,255,.25);
  background:rgba(16,24,43,.72);
  color:#B6F7FF;
  box-shadow:0 10px 28px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.02);
}
.hero h1{font-size:clamp(2.6rem,6vw,5.1rem);max-width:860px;letter-spacing:-.045em}
.hero-sub{font-size:1.08rem;color:#B6C2D6;max-width:620px}
.hero-stat b{color:#fff;font-size:2.15rem}
.hero-stat span{color:#8F9DB4}

section{padding:94px 0}
.section-alt{background:linear-gradient(180deg,rgba(16,24,43,.58),rgba(8,13,27,.58));border-color:var(--line)}
.section-head{max-width:680px;margin-bottom:46px}
.section-head p{color:#9EABC0}

.roster-grid{gap:20px}
.roster-card,.benefit-card,.contact-card,.side-card,.mini-app,.play-step,.modal-box,.card{
  background:linear-gradient(180deg,rgba(16,24,43,.96),rgba(13,20,36,.96));
  border:1px solid rgba(148,163,184,.15);
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.roster-card{border-radius:20px;padding:24px}
.roster-card:hover{border-color:rgba(66,232,255,.46);box-shadow:0 24px 60px rgba(0,0,0,.28),0 0 0 1px rgba(66,232,255,.08);transform:translateY(-6px)}
.roster-logo{background:#0A1020;border-color:rgba(148,163,184,.14)}
.roster-num{color:transparent;-webkit-text-stroke:1px rgba(143,239,255,.13)}
.roster-tag{color:#86EFFF}
.roster-more{color:#93A0B6}
.roster-more:hover{color:#8EEFFF}

.app-search-box input{
  background:rgba(16,24,43,.92)!important;color:#F4F8FF!important;border-color:rgba(148,163,184,.16)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.18)!important;
}
.app-search-box input::placeholder{color:#708099}
.app-search-box input:focus{border-color:rgba(66,232,255,.52)!important;box-shadow:0 0 0 4px rgba(66,232,255,.10)!important}
.app-search-clear{color:#8693A9}
.app-search-count{color:#8190A8}

.btn{border-radius:12px;padding:13px 20px}
.btn-primary{background:linear-gradient(135deg,var(--orange),#8EF6FF 54%,var(--orange-2));color:#06101A;box-shadow:0 12px 28px rgba(66,232,255,.16)}
.btn-primary:hover{background:linear-gradient(135deg,#74F0FF,#A7FAFF 54%,#9C88FF);box-shadow:0 16px 34px rgba(66,232,255,.20)}
.btn-outline{border-color:rgba(148,163,184,.28);color:#EAF1FB;background:rgba(255,255,255,.02)}
.btn-outline:hover{border-color:rgba(66,232,255,.52);background:rgba(66,232,255,.07);color:#fff}

.playbook{border-color:rgba(148,163,184,.16);box-shadow:var(--shadow)}
.play-step{background:rgba(16,24,43,.92)}
.play-step .num{color:var(--orange);font-size:1.75rem}
.play-step h4{color:#F8FBFF}
.play-step p{color:#99A7BD}

.benefit-card{padding:32px}
.benefit-card li{color:#DCE5F2}
.benefit-card li::before{background:linear-gradient(135deg,var(--orange),var(--orange-2));box-shadow:0 0 14px rgba(66,232,255,.14)}
.report-grid{gap:18px}
.report-item{background:rgba(15,23,40,.70);border-left:3px solid transparent;border-image:linear-gradient(180deg,var(--orange),var(--orange-2)) 1;border-radius:0 14px 14px 0;box-shadow:0 12px 28px rgba(0,0,0,.12)}
.report-item h4{color:#F4F7FF}
.report-item p{color:#97A5BA}

.stats-band{background:linear-gradient(135deg,rgba(66,232,255,.07),rgba(124,92,252,.08));border:1px solid rgba(148,163,184,.14);border-radius:20px;box-shadow:var(--shadow)}
.stat-cell{border-color:rgba(148,163,184,.12)}
.stat-num{color:#F7FBFF}
.stat-label{color:#92A0B6}

.cta-band{background:linear-gradient(135deg,#43E8FF 0%,#7C5CFC 100%);color:#06101A;box-shadow:0 24px 60px rgba(66,232,255,.14)}
.cta-band h2{color:#06101A}.cta-band p{color:rgba(6,16,26,.72)}
.cta-band .btn-primary{background:#07101C;color:#E9FCFF}.cta-band .btn-primary:hover{background:#0D1A2F}
.cta-band .btn-outline{border-color:#06101A;color:#06101A}

.site-footer{background:#050914;border-top:1px solid rgba(148,163,184,.12)}
.footer-col h4{color:#82ECFF}
.footer-col a{color:#9AA8BC}.footer-col a:hover{color:#fff}
.footer-bottom{border-color:rgba(148,163,184,.12);color:#8391A6}

.app-hero{background:linear-gradient(135deg,#080D1B,#0E1628);border-bottom-color:var(--line)}
.app-hero-logo{border-color:rgba(148,163,184,.14);box-shadow:0 16px 36px rgba(0,0,0,.2)}
.breadcrumb,.breadcrumb a{color:#7F8CA2}.breadcrumb a:hover{color:#8CEFFF}
.side-card{top:100px}
.side-stat-row{border-color:rgba(148,163,184,.12)}.side-stat-row b{color:#F2F7FF}
.step-item .dot{background:rgba(66,232,255,.07);border-color:rgba(66,232,255,.45);color:#9AF2FF}

.floating-whatsapp{box-shadow:0 16px 42px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.06)}

/* Subtle glow only on key interactive elements */
.nav-cta,.btn-primary{position:relative;overflow:hidden}
.nav-cta::after,.btn-primary::after{content:"";position:absolute;inset:-120% 35%;transform:rotate(18deg);background:rgba(255,255,255,.24);filter:blur(12px);opacity:0;transition:opacity .25s}
.nav-cta:hover::after,.btn-primary:hover::after{opacity:.9}

@media(max-width:760px){
  .hero{padding:82px 0 68px}
  section{padding:72px 0}
  .wrap{padding:0 18px}
  .hero h1{font-size:clamp(2.35rem,13vw,3.6rem)}
  .hero-stats{gap:22px}
  .roster-grid{grid-template-columns:1fr}
  .cta-band{padding:42px 26px}
}

/* =========================================================
   ACCESSIBILITY / CONTRAST FINISH — Live Streaming BD
   Final hard overrides so the visual theme cannot leave text
   dark-on-dark or light-on-light when Admin theme values load.
   ========================================================= */
:root{
  --surface: var(--charcoal);
  --text: var(--cream);
  --muted: var(--cream-dim);
}

body{ color:var(--cream); }
h1,h2,h3,h4,h5,h6,
.section-head h2,
.hero h1,
.roster-name,
.play-step h4,
.benefit-card h3,
.report-item h4,
.trust-card h4,
.faq-item summary,
.path-card h3,
.side-card h3,
.contact-card h3{ color:var(--cream) !important; }

p,
.hero-sub,
.hero-stat span,
.section-head p,
.roster-card p,
.play-step p,
.benefit-card p,
.benefit-card li,
.report-item p,
.trust-card p,
.path-card p,
.step-item p,
.side-card p,
.app-search-count,
.apps-count,
.roster-more{ color:var(--cream-dim) !important; }

.section-alt,
.section-alt .section-head,
.section-alt .section-head h2,
.section-alt .section-head p{ color:var(--cream); }

/* Panels use one consistently dark surface with high-contrast text. */
.roster-card,
.play-step,
.benefit-card,
.report-item,
.trust-card,
.faq-item,
.contact-card,
.side-card,
.mini-app,
.path-card,
.app-hero,
.card{
  color:var(--cream);
  background:linear-gradient(180deg,#121C31 0%,#0F182B 100%);
  border-color:rgba(148,163,184,.22);
}

/* Trust cards had inline light-background styles; force the same readable surface. */
.trust-grid .report-item{
  background:linear-gradient(180deg,#121C31 0%,#0F182B 100%) !important;
  color:var(--cream) !important;
}
.trust-grid .report-item h4{ color:#F8FBFF !important; }
.trust-grid .report-item p{ color:#B7C4D8 !important; }

/* Search controls: no undefined CSS variables and clear contrast. */
.app-search-box input,
.app-search-box input:focus{
  background:#0E172A !important;
  color:#F8FBFF !important;
  border-color:rgba(148,163,184,.28) !important;
}
.app-search-box input::placeholder{ color:#8796AF !important; }
.app-search-clear{ color:#B8C4D7 !important; }
.search-empty{ background:#121C31 !important; color:#F8FBFF !important; border-color:rgba(148,163,184,.28) !important; }
.search-empty span{ color:#B7C4D8 !important; }

/* Buttons keep readable text in every section. */
.btn-primary,
.nav-cta{ color:#07111D !important; }
.btn-outline{ color:#F3F7FD !important; }
.btn-outline:hover{ color:#FFFFFF !important; }

/* Strong but restrained hierarchy. */
.eyebrow{ color:#79E9FF !important; }
.roster-tag{ color:#83ECFF !important; }
.roster-more:hover{ color:#8BDEFF !important; }
.stat-num{ color:#F8FBFF !important; }
.stat-label{ color:#A6B4C9 !important; }

/* Links and form text remain readable against dark surfaces. */
a{ color:inherit; }
input,textarea,select,button{ font:inherit; }

@media (max-width:860px){
  .nav-links{ background:#070B16 !important; }
}