/* =====================================================================
   Landing page - control room language.
   Sports Media 7 is a live sports production house, so the page borrows
   from broadcast graphics: tally lights, slate labels, lower-third stat
   bands, camera-position numbering. Every colour comes from the
   white-label brand tokens, so a client's palette drives the whole page.
   ===================================================================== */
.lp{--lp-ink:#0a0f1c;--lp-line:#e6eaf1;--lp-muted:#5f6b80;--lp-wash:#f6f8fc;}
.lp-slate{font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;}
.lp-h2{font-weight:900;letter-spacing:-.03em;line-height:1.08;font-size:clamp(1.7rem,3.6vw,2.6rem);text-wrap:balance;}
.lp-lead{font-size:1.02rem;line-height:1.7;color:var(--lp-muted);max-width:62ch;}
.lp-sec{padding:clamp(56px,7vw,96px) 0;}

/* ---------- HERO ---------- */
.lp-hero{position:relative;background:var(--lp-ink);color:#fff;overflow:hidden;
  padding:clamp(64px,9vw,120px) 0 clamp(56px,7vw,92px);}
.lp-hero-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000,transparent);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000,transparent);}
.lp-hero-glow{position:absolute;top:-28%;right:-12%;width:62vw;height:62vw;border-radius:50%;
  background:var(--brand-primary);opacity:.22;filter:blur(90px);pointer-events:none;}
.lp-hero-in{position:relative;z-index:2;}
.lp-tally{display:inline-flex;align-items:center;gap:9px;padding:.4rem .95rem;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;}
.lp-tally-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-danger,#e11d48);
  box-shadow:0 0 0 4px rgba(225,29,72,.22);animation:lp-blink 1.8s infinite;}
@keyframes lp-blink{0%,100%{opacity:1}50%{opacity:.35}}
.lp-title{font-weight:900;letter-spacing:-.04em;line-height:.98;margin:1.4rem 0 0;
  font-size:clamp(2.3rem,6.4vw,4.6rem);text-wrap:balance;}
.lp-title em{font-style:normal;color:var(--brand-primary);}
.lp-sub{margin-top:1.2rem;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.65;
  color:rgba(255,255,255,.76);max-width:56ch;}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.2rem;}
.lp-btn{display:inline-flex;align-items:center;gap:9px;padding:.85rem 1.7rem;border-radius:999px;
  font-weight:800;text-decoration:none;border:0;transition:transform .15s,filter .15s;}
.lp-btn:hover{transform:translateY(-2px);}
.lp-btn-1{background:var(--brand-primary);color:#fff;}
.lp-btn-1:hover{color:#fff;filter:brightness(1.1);}
.lp-btn-2{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);}
.lp-btn-2:hover{background:rgba(255,255,255,.18);color:#fff;}
.lp-trust{margin-top:1.6rem;font-size:.82rem;color:rgba(255,255,255,.55);}

/* ---------- lower-third stat band ---------- */
.lp-band{position:relative;z-index:2;margin-top:clamp(40px,5vw,64px);
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);}
.lp-band-in{display:grid;grid-template-columns:repeat(4,1fr);}
.lp-stat{padding:22px 18px;border-left:1px solid rgba(255,255,255,.1);position:relative;}
.lp-stat:first-child{border-left:0;padding-left:26px;}
.lp-stat:first-child::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;
  background:var(--brand-primary);border-radius:2px;}
.lp-stat-v{font-weight:900;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;letter-spacing:-.02em;}
.lp-stat-k{margin-top:6px;font-size:.64rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);}

/* ---------- problem / before-after ---------- */
.lp-swap{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;}
.lp-panel{border-radius:18px;padding:26px;height:100%;}
.lp-panel-old{background:var(--lp-wash);border:1px solid var(--lp-line);}
.lp-panel-new{background:var(--lp-ink);color:#fff;border:1px solid var(--lp-ink);}
.lp-plist{list-style:none;padding:0;margin:14px 0 0;}
.lp-plist li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:.93rem;line-height:1.5;}
.lp-plist li+li{border-top:1px solid rgba(0,0,0,.06);}
.lp-panel-new .lp-plist li+li{border-top-color:rgba(255,255,255,.1);}
.lp-plist i{flex:0 0 auto;margin-top:3px;}
.lp-arrow{align-self:center;color:var(--lp-muted);font-size:1.6rem;}

/* ---------- features as camera positions ---------- */
.lp-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:16px;}
.lp-feat{position:relative;background:#fff;border:1px solid var(--lp-line);border-radius:18px;
  padding:26px 22px 22px;transition:border-color .18s,transform .18s,box-shadow .18s;}
.lp-feat:hover{border-color:var(--brand-primary);transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(11,18,32,.09);}
.lp-feat-n{position:absolute;top:18px;right:20px;font-weight:900;font-size:2.4rem;line-height:1;
  color:var(--lp-line);letter-spacing:-.04em;}
.lp-feat-i{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-primary);color:#fff;font-size:1.25rem;margin-bottom:16px;}
.lp-feat-t{font-weight:800;font-size:1.04rem;margin-bottom:7px;letter-spacing:-.01em;}
.lp-feat-d{font-size:.9rem;line-height:1.6;color:var(--lp-muted);margin:0;}

/* ---------- audience split ---------- */
.lp-aud{background:var(--lp-wash);border:1px solid var(--lp-line);border-radius:20px;padding:30px;height:100%;}
.lp-aud-tag{display:inline-block;padding:.26rem .8rem;border-radius:999px;background:#fff;
  border:1px solid var(--lp-line);font-size:.64rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--lp-muted);}
.lp-blist{list-style:none;padding:0;margin:18px 0 0;}
.lp-blist li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:.93rem;line-height:1.55;}
.lp-blist i{color:var(--brand-primary);flex:0 0 auto;margin-top:3px;}

/* ---------- steps ---------- */
.lp-steps{counter-reset:lps;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.lp-step{position:relative;padding-top:52px;}
.lp-step::before{counter-increment:lps;content:counter(lps);position:absolute;top:0;left:0;
  width:38px;height:38px;border-radius:11px;background:var(--lp-ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem;}
.lp-step-t{font-weight:800;font-size:1.02rem;margin-bottom:6px;}
.lp-step-d{font-size:.9rem;color:var(--lp-muted);line-height:1.6;margin:0;}

/* ---------- about ---------- */
.lp-about{background:var(--lp-ink);color:#fff;border-radius:24px;padding:clamp(32px,4vw,54px);position:relative;overflow:hidden;}
.lp-about::after{content:"";position:absolute;right:-14%;bottom:-42%;width:46%;padding-top:46%;
  border-radius:50%;background:var(--brand-primary);opacity:.16;filter:blur(60px);}
.lp-about-in{position:relative;z-index:2;}
.lp-cred{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:26px;}
.lp-cred div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:16px;}
.lp-cred b{display:block;font-size:1.35rem;font-weight:900;letter-spacing:-.02em;}
.lp-cred span{font-size:.74rem;color:rgba(255,255,255,.6);font-weight:700;}

/* ---------- closing CTA ---------- */
.lp-final{background:var(--sm7-bg-gradient);color:#fff;border-radius:24px;
  padding:clamp(34px,4.5vw,60px);text-align:center;position:relative;overflow:hidden;}
.lp-final-in{position:relative;z-index:2;}

/* ---------- FAQ ---------- */
.lp-faq{border:1px solid var(--lp-line);border-radius:16px;background:#fff;overflow:hidden;}
.lp-faq+.lp-faq{margin-top:10px;}
.lp-faq summary{padding:17px 20px;font-weight:800;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:.96rem;}
.lp-faq summary::-webkit-details-marker{display:none;}
.lp-faq summary::after{content:"\f282";font-family:"bootstrap-icons";font-weight:400;
  color:var(--lp-muted);transition:transform .2s;flex:0 0 auto;}
.lp-faq[open] summary::after{transform:rotate(180deg);}
.lp-faq-b{padding:0 20px 18px;color:var(--lp-muted);font-size:.92rem;line-height:1.7;}

/* ---------- tournament + organiser cards (kept) ---------- */
.lp-tcard{background:#fff;border:1px solid var(--lp-line);border-radius:18px;overflow:hidden;
  text-decoration:none;display:block;height:100%;transition:transform .16s,box-shadow .16s,border-color .16s;}
.lp-tcard:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(11,18,32,.1);border-color:var(--brand-primary);}
.lp-tcard-img{height:146px;background-size:cover;background-position:center;background-color:var(--lp-wash);position:relative;}
.lp-live{position:absolute;top:11px;left:11px;display:inline-flex;align-items:center;gap:6px;
  background:var(--brand-danger,#e11d48);color:#fff;font-size:.6rem;font-weight:800;
  letter-spacing:.11em;padding:4px 10px;border-radius:999px;}
.lp-live::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;animation:lp-blink 1.6s infinite;}
.lp-org{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;
  border:1px solid var(--lp-line);border-radius:16px;text-decoration:none;height:100%;
  transition:border-color .15s,transform .15s;}
.lp-org:hover{border-color:var(--brand-primary);transform:translateY(-2px);}
.lp-org-logo{width:46px;height:46px;border-radius:13px;object-fit:contain;background:var(--lp-wash);
  border:1px solid var(--lp-line);padding:3px;flex:0 0 auto;}

/* ---------- SEO landing pages (v2.75) ----------
   Three components the landing page did not need: a breadcrumb, a
   two-column spec table, and the related-pages grid. Same language -
   hairline rules, slate labels, no new colours. */
.seo-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 0;
  font-size:.78rem;font-weight:700;color:var(--lp-muted);}
.seo-crumb a{color:var(--lp-muted);text-decoration:none;}
.seo-crumb a:hover{color:var(--brand-primary);text-decoration:underline;}
.seo-crumb i{font-size:.6rem;opacity:.5;}
.seo-crumb-now{color:var(--lp-ink);}

.seo-spec{border:1px solid var(--lp-line);border-radius:16px;overflow:hidden;background:#fff;}
.seo-spec-row{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:0;}
.seo-spec-row+.seo-spec-row{border-top:1px solid var(--lp-line);}
.seo-spec-k{padding:15px 18px;font-weight:800;font-size:.86rem;background:var(--lp-wash);
  border-right:1px solid var(--lp-line);}
.seo-spec-v{padding:15px 18px;font-size:.92rem;line-height:1.6;color:var(--lp-muted);}

.seo-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;}
.seo-rel a{display:flex;align-items:center;gap:11px;padding:15px 16px;background:#fff;
  border:1px solid var(--lp-line);border-radius:14px;text-decoration:none;color:inherit;
  font-weight:700;font-size:.92rem;transition:border-color .15s,transform .15s;}
.seo-rel a:hover{border-color:var(--brand-primary);transform:translateY(-2px);}
.seo-rel i{color:var(--brand-primary);flex:0 0 auto;}

.seo-chips{display:flex;flex-wrap:wrap;gap:9px;}
.seo-chips a{padding:.42rem .95rem;border-radius:999px;background:#fff;border:1px solid var(--lp-line);
  font-size:.82rem;font-weight:700;text-decoration:none;color:var(--lp-ink);}
.seo-chips a:hover{border-color:var(--brand-primary);color:var(--brand-primary);}

@media(max-width:575.98px){
  .seo-spec-row{grid-template-columns:1fr;}
  .seo-spec-k{border-right:0;border-bottom:1px solid var(--lp-line);}
}

@media(max-width:991.98px){
  .lp-band-in{grid-template-columns:repeat(2,1fr);}
  .lp-stat:nth-child(3){border-left:0;}
  .lp-stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1);}
  .lp-swap{grid-template-columns:1fr;}
  .lp-arrow{transform:rotate(90deg);justify-self:center;}
}
@media(prefers-reduced-motion:reduce){
  .lp-btn:hover,.lp-feat:hover,.lp-tcard:hover,.lp-org:hover{transform:none;}
  .lp-tally-dot,.lp-live::before{animation:none;}
}