/*
Theme Name: Stream TV Premium (Green & Blue) + Images
Author: Stream TV
Version: 3.0.0
Description: Premium single-page Stream TV theme with embedded images, animations, WHMCS pricing links, and SEO schema.
*/

:root{
  --stv-green:#22c55e;
  --stv-blue:#0ea5e9;
  --stv-dark:#0b1220;
  --stv-darker:#020617;
  --stv-text:#e5e7eb;
  --stv-muted:#9ca3af;
  --stv-card:rgba(15,23,42,0.72);
  --stv-border:rgba(148,163,184,0.16);
  --stv-shadow:0 18px 40px rgba(0,0,0,0.45);
  --stv-glow-green: 0 0 24px rgba(34,197,94,0.22);
  --stv-glow-blue: 0 0 24px rgba(14,165,233,0.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(14,165,233,0.14), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(34,197,94,0.14), transparent 55%),
    linear-gradient(180deg, var(--stv-darker), var(--stv-dark));
  color:var(--stv-text);
}

a{color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 18px}
.section{padding:78px 0}
.anchor{scroll-margin-top:88px}

.header{
  position:sticky;top:0;z-index:1000;
  backdrop-filter: blur(12px);
  background: rgba(2,6,23,0.68);
  border-bottom: 1px solid var(--stv-border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:40px;width:auto}
.nav{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.nav a{opacity:0.9;text-decoration:none;font-weight:650;font-size:14px}
.nav a:hover{opacity:1}
.nav .cta{padding:10px 14px;border-radius:12px;font-weight:900;border:1px solid transparent}
.cta-green{background:var(--stv-green);color:#052e16;box-shadow: var(--stv-glow-green)}
.cta-blue{background:var(--stv-blue);color:#06263a;box-shadow: var(--stv-glow-blue)}

.hero{
  padding:92px 0 72px 0;
  background:
    linear-gradient(rgba(2,6,23,0.82), rgba(2,6,23,0.82)),
    url('./assets/hero.webp') center/cover no-repeat;
  border-bottom: 1px solid var(--stv-border);
}
.hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:34px;align-items:center}
.h1{font-size:46px;line-height:1.08;margin:0 0 12px 0;letter-spacing:-0.02em}
.sub{color:var(--stv-muted);font-size:17px;line-height:1.5;margin:0 0 20px 0}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0 0}
.badge{padding:7px 12px;border-radius:999px;background: rgba(2,6,23,0.65);border:1px solid var(--stv-border);font-size:12px;font-weight:800;color:#dbeafe}
.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;text-decoration:none;
  padding:14px 18px;border-radius:14px;
  font-weight:950;letter-spacing:0.01em;
  border:1px solid transparent;
  box-shadow: var(--stv-shadow);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{transform: translateY(-1px);filter:brightness(1.02)}
.btn-green{background:var(--stv-green);color:#052e16;box-shadow: var(--stv-shadow), var(--stv-glow-green)}
.btn-blue{background:var(--stv-blue);color:#06263a;box-shadow: var(--stv-shadow), var(--stv-glow-blue)}

.hero-card{
  background: var(--stv-card);
  border:1px solid var(--stv-border);
  border-radius:18px;
  box-shadow: var(--stv-shadow);
  padding:18px;
}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kv .item{padding:14px;border-radius:14px;background: rgba(2,6,23,0.55);border:1px solid var(--stv-border)}
.kv .label{color:var(--stv-muted);font-size:12px;font-weight:850}
.kv .value{font-size:16px;font-weight:950;margin-top:6px}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{
  background: var(--stv-card);
  border:1px solid var(--stv-border);
  border-radius:18px;
  padding:18px;
  box-shadow: var(--stv-shadow);
}
.card h3{margin:0 0 8px 0;font-size:16px}
.card p{margin:0;color:var(--stv-muted);line-height:1.55}
.section-title{font-size:28px;margin:0 0 10px 0}
.section-sub{color:var(--stv-muted);margin:0 0 22px 0}

.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.media{border-radius:18px;overflow:hidden;border:1px solid var(--stv-border);box-shadow:var(--stv-shadow)}
.media img{width:100%;height:260px;object-fit:cover;display:block}
.media .cap{padding:12px 14px;background:rgba(2,6,23,0.65);color:var(--stv-muted);font-size:13px}

.sports-band{
  background:
    linear-gradient(rgba(2,6,23,0.86), rgba(2,6,23,0.86)),
    url('./assets/sports.webp') center/cover no-repeat;
  border-top:1px solid var(--stv-border);
  border-bottom:1px solid var(--stv-border);
}

.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.price{font-size:34px;font-weight:980;color:var(--stv-green);margin:10px 0 16px 0}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:950}
.tag-green{background:rgba(34,197,94,0.18);border:1px solid rgba(34,197,94,0.35);color:#a7f3d0}
.tag-blue{background:rgba(14,165,233,0.18);border:1px solid rgba(14,165,233,0.35);color:#bfdbfe}
.list{margin:0;padding-left:18px;color:var(--stv-muted);line-height:1.65}

.support-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.support-photo{border-radius:18px;overflow:hidden;border:1px solid var(--stv-border);box-shadow:var(--stv-shadow)}
.support-photo img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block}

.footer{padding:32px 0;border-top:1px solid var(--stv-border);color:var(--stv-muted);font-size:13px}
.footer a{color:#cbd5e1;text-decoration:none}
.footer a:hover{text-decoration:underline}

.reveal{opacity:0;transform: translateY(12px);transition: opacity .7s ease, transform .7s ease}
.reveal.show{opacity:1;transform: translateY(0)}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:repeat(2,1fr)}
  .media-grid{grid-template-columns:1fr}
  .support-split{grid-template-columns:1fr}
  .h1{font-size:38px}
}
@media (max-width: 520px){
  .grid{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .nav{gap:10px}
  .nav a{font-size:13px}
}