/* Cinematic IPTV Plus theme. Layout foundations live in styles.css. */
:root {
  --bg: #060607;
  --bg-2: #0d0d10;
  --surface: #151519;
  --surface-2: #1b1b20;
  --line: rgba(255, 255, 255, .12);
  --text: #fbf8f9;
  --muted: #b9afb3;
  --teal: #ff3651;
  --teal-dark: #bd1b31;
  --action: #d91f3c;
  --action-hover: #bd1b31;
  --cream: #101013;
  --ink: #fbf8f9;
}

body { background: var(--bg); }
.top-strip { background: #c81830; color: #fff; }
.top-strip-dot { background: #fff; box-shadow: 0 0 9px #fff; }
.site-header { background: rgba(7, 7, 9, .94); border-color: rgba(255, 255, 255, .1); }
.brand img { width: 183px; height: 46px; object-fit: contain; }
.primary-nav > a { color: #d2c8cb; }
.primary-nav > a:hover { color: #fff; }
.primary-nav .nav-contact { background: var(--action); border-color: var(--action); color: #fff; }
.primary-nav .nav-contact:hover { background: var(--action-hover); color: #fff; }
.menu-toggle { background: #1d171a; }

.hero {
  background-color: #050506;
  background-image: none;
}
.hero-photo { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.hero::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3, 3, 5, .95) 0%, rgba(3, 3, 5, .83) 37%, rgba(3, 3, 5, .32) 68%, rgba(3, 3, 5, .14) 100%), linear-gradient(0deg, #060607 0%, transparent 38%); }
.hero.section-pad { padding-block: 82px 78px; }
.hero::after { display: none; }
.hero-halo { z-index: 1; right: -230px; top: -340px; background: radial-gradient(circle, rgba(255, 33, 66, .12), transparent 68%); }
.hero-grid { z-index: 2; grid-template-columns: 1fr; min-height: 500px; align-items: center; }
.hero-copy { max-width: 790px; padding-bottom: 0; }
.hero h1 { max-width: 800px; font-size: clamp(3.6rem, 6vw, 5.7rem); line-height: 1.03; letter-spacing: -.065em; }
.hero h1 em { color: var(--teal); text-shadow: 0 0 45px rgba(255, 54, 81, .17); }
.hero-intro { max-width: 590px; color: #d0c4c8; }
.button-primary { background: var(--action); color: #fff; box-shadow: 0 8px 26px rgba(255, 37, 71, .22); }
.button-primary:hover { background: var(--action-hover); color: #fff; }
.button-ghost { background: rgba(18, 11, 14, .62); border-color: rgba(255, 255, 255, .28); }
.button-ghost:hover { border-color: var(--teal); color: #fff; }
.proof-bar { padding: 23px 0; background: #070709; border-top-color: rgba(255, 255, 255, .08); border-bottom-color: rgba(255, 255, 255, .08); }
.proof-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; min-height: 0; }
.proof-inner > div { min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #111114; text-align: center; }
.proof-inner strong { color: #fff; font-size: 29px; line-height: 1.05; letter-spacing: -.055em; }
.proof-inner > div:nth-child(3) strong { font-size: 25px; letter-spacing: -.07em; white-space: nowrap; }
.proof-inner span { color: #bbaeb2; font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }

.eyebrow { color: var(--teal); }
.eyebrow-line { background: var(--teal); }
.section-heading h2 span,
.device-copy h2 span,
.faq-intro h2 span { color: var(--teal); }
.heading-split > p,
.centered > p:last-child { color: #aea4a8; }
.intro-section { background: #08080a; padding-block: 105px 95px; }
.intro-section .heading-split { display: block; text-align: center; }
.intro-section .heading-split .eyebrow { justify-content: center; }
.intro-section .heading-split > p { max-width: 650px; margin: 18px auto 0; }
.benefit-card { min-height: 275px; background: linear-gradient(145deg, #171417, #0f0f12); border-color: var(--line); }
.benefit-card::after { background: rgba(255, 54, 81, .05); }
.benefit-card:hover { border-color: rgba(255, 54, 81, .55); }
.benefit-number { color: #fa798a; }
.benefit-symbol { background: rgba(255, 54, 81, .1); margin: 25px 0 22px; }
.benefit-symbol svg { width: 38px; height: 38px; stroke: var(--teal); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.benefit-card p { color: #ada3a7; }

.explore-section { background: #050506; border-top: 1px solid rgba(255,255,255,.06); }
.explore-section .section-heading { margin-bottom: 24px; }
.explore-section .section-heading h2 { font-size: clamp(2.8rem, 4.5vw, 4.9rem); }
.explore-section .section-heading > p:last-child { max-width: 650px; line-height: 1.7; }
.poster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.poster-card { position: relative; aspect-ratio: 2 / 3; min-height: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: #181317; box-shadow: 0 20px 40px rgba(0,0,0,.22); }
.poster-card::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.12) 40%, rgba(0,0,0,.86)); pointer-events: none; }
.poster-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.poster-card:hover img { transform: scale(1.045); }
.poster-caption { position: absolute; z-index: 1; left: 22px; right: 20px; bottom: 18px; }
.poster-caption span { color: #ffb4bc; font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.poster-caption h3 { margin: 5px 0 0; font-size: 26px; letter-spacing: -.045em; text-shadow: 0 2px 20px rgba(0,0,0,.55); }
.gallery-note { width: fit-content; max-width: 700px; margin: 0 auto 24px; padding: 9px 14px; color: #c7b7bd; border: 1px solid rgba(255,255,255,.13); border-radius: 99px; background: #151115; font-size: 12px; text-align: center; line-height: 1.5; }

.plans-section { background: radial-gradient(ellipse at 50% 0%, rgba(159, 16, 43, .12), transparent 37%), #0a090b; }
.device-selector-wrap { background: #171417; border-color: var(--line); }
.selector-icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; flex: none; }
.selector-icon svg { width: 29px; height: 29px; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.selector-label small,
.price-context { color: #b2a5aa; }
.device-selector { background: #0b0a0c; border-color: rgba(255,255,255,.15); }
.device-option { color: #d2c6ca; }
.device-option.is-selected { background: var(--action); color: #fff; box-shadow: 0 4px 15px rgba(255,54,81,.23); }
.plan-card { background: linear-gradient(155deg, #1b171a, #0f0e11); border-color: var(--line); }
.plan-card:hover { border-color: rgba(255,54,81,.65); }
.plan-card-featured { background: linear-gradient(160deg, #32171d, #1b1116 49%, #100e11); border-color: rgba(255,54,81,.75); }
.featured-ribbon { background: var(--action); color: #fff; }
.featured-ribbon[hidden] { display: none; }
.plan-topline { color: #ef8491; }
.plan-index { color: #9c767e; }
.plan-description,
.price-unit { color: #aea3a7; }
.plan-monthly { color: #ff8292; }
.plan-card li { color: #d1c5c9; }
.plan-button { background: #2e1c22; color: #fff; border-color: rgba(255,54,81,.35); }
.plan-button:hover { background: #48202b; }
.plan-card-featured .plan-button { background: var(--action); color: #fff; }
.plan-card-featured .plan-button:hover { background: var(--action-hover); }
.price-comparison { background: #171316; border-color: var(--line); }
.price-comparison thead th { color: #b8a6ab; }
.price-comparison tbody th { color: #e2d7da; }
.pricing-footnote { color: #a9989e; }

.how-section { background: #111014; color: #fff; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
.how-section .eyebrow { color: var(--teal); }
.how-section h2 span { color: var(--teal); }
.how-section .heading-split > p { color: #aea4a9; }
.step-card { min-height: 245px; background: #19161a; border-color: var(--line); }
.step-num { color: #fff; background: #b61a31; }
.step-card p { color: #aea4a8; }

.device-section { background: #08080a; }
.device-copy p:not(.eyebrow) { color: #afa4a8; }
.device-tile { background: linear-gradient(145deg, #20191d, #121114); border-color: var(--line); }
.device-tile svg { stroke: var(--teal); }
.text-link { color: var(--teal); border-bottom-color: rgba(255,54,81,.6); }
.text-link:hover { color: #ff8593; }

.faq-section { background: #0c0b0e; }
.faq-intro p:last-child,
.faq-list details p { color: #afa5a9; }
.faq-list summary span { border-color: rgba(255,54,81,.55); color: var(--teal); }
.contact-section { background: #0c0b0e; }
.contact-panel { background: linear-gradient(130deg, #2e111a, #1c1015 58%, #111014); border-color: rgba(255,54,81,.35); }
.contact-glow { background: rgba(255,54,81,.09); }
.contact-copy h2 span { color: var(--teal); }
.contact-copy > p:last-child { color: #c9b8bd; }
.contact-action { background: rgba(11,8,10,.55); border-color: rgba(255,255,255,.16); }
.contact-action:hover { border-color: var(--teal); background: rgba(39,17,23,.7); }
.contact-action small { color: #b6a6ab; }
.contact-action strong { color: var(--teal); }
.site-footer { background: #0c0b0e; }
.footer-main img { width: 169px; height: 42px; object-fit: contain; }
.footer-main p,
.footer-links a { color: #a4979c; }
.floating-chat { background: var(--action); color: #fff; }
.floating-chat:hover { background: var(--action-hover); }
.floating-chat svg { width: 17px; height: 17px; flex: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #ff9ca9; outline-offset: 3px; }

@media (max-width: 1100px) {
  .primary-nav { gap: 14px; }
  .hero h1 { font-size: clamp(3.4rem, 6.5vw, 5.1rem); }
}

@media (max-width: 860px) {
  .primary-nav { background: #100d10; }
  .hero-photo { object-position: 62% center; }
  .hero-grid { min-height: 500px; }
  .poster-grid { grid-template-columns: repeat(2, 1fr); }
  .poster-card { aspect-ratio: 2 / 3; }
  .proof-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
  .hero-photo { object-position: 67% center; }
  .hero::before { background: linear-gradient(90deg, rgba(3,3,5,.90), rgba(3,3,5,.68)), linear-gradient(0deg, #060607 0%, transparent 50%); }
  .hero.section-pad { padding-block: 70px 64px; }
  .hero-grid { min-height: 470px; }
  .hero h1 { font-size: clamp(3.0rem, 11vw, 4.15rem); }
  .proof-bar { padding: 14px 0; }
  .proof-inner { gap: 9px; }
  .proof-inner > div { min-height: 94px; }
  .proof-inner strong { font-size: 24px; }
  .proof-inner > div:nth-child(3) strong { font-size: 18px; }
  .proof-inner span { font-size: 9px; }
  .intro-section { padding-block: 74px; }
  .poster-grid { gap: 10px; }
  .poster-card { aspect-ratio: 2 / 3; border-radius: 9px; }
  .poster-caption { left: 12px; right: 10px; bottom: 12px; }
  .poster-caption span { font-size: 8px; }
  .poster-caption h3 { font-size: 20px; }
  .contact-panel { padding: 32px 24px; }
}