/* 8KPRO.TV: original multicolour design inspired by the supplied app and panel palette. */
:root {
  --ink: #091a2c;
  --navy: #061424;
  --navy-2: #0c2a3e;
  --text: #31435b;
  --muted: #627087;
  --gold: #f5bc48;
  --gold-light: #ffe4a1;
  --blue: #3277e3;
  --violet: #8660d5;
  --cyan: #16889c;
  --rose: #ce557e;
  --surface: #f4f7fb;
  --radius: 22px;
  --shadow: 0 16px 50px rgb(7 27 48 / 8%);
}
body { background: #fbfcfe; }
h1,h2,h3 { text-wrap: balance; }
.topbar { background: #030e1c; border-bottom: 1px solid #ffffff0e; }
.topbar .shell { padding-block: 8px; }
.topbar a { color: #badfe7; }
.site-header { background: #061424f2; border-color: #ffffff12; color: #f4f7ff; }
.header-inner { min-height: 88px; }
.site-header .brand small { color: #a4bbd1; }
.site-header .brand > span { letter-spacing: -.045em; }
.site-header .brand img { width: 54px; height: 54px; }
#main-navigation { gap: 21px; }
#main-navigation > a:not(.btn):hover { color: #f5c769; }
.menu-toggle { background: #0e293a; color: #fff; border-color: #ffffff25; }
.nav-explore > div { color: #f4f7ff; background: #0b2335; border-color: #2a445d; }
.nav-explore > div a:hover { color: #f5c769; background: #18364a; }
.btn { border-radius: 11px; background: linear-gradient(115deg,#ffe09a,#f2b641); box-shadow: 0 6px 22px #ecb94125; }
.btn:hover { box-shadow: 0 12px 30px #e2ae4338; }
.btn-outline { background: #fff; border-color: #cdd7e4; color: #173956; box-shadow: none; }
.btn-ghost { background: #ffffff08; color: #f6f8ff; border-color: #ffffff4a; box-shadow: none; }
.home-hero,.page-hero {
  background: radial-gradient(ellipse at 90% 10%,#21637e52,transparent 45%),radial-gradient(ellipse at 8% 70%,#8660d523,transparent 35%),linear-gradient(130deg,#061424,#082436 68%,#071828);
}
.home-hero::before { width: 560px; height: 560px; right: -6%; top: -120px; border-color: #73d7e014; box-shadow: 0 0 0 70px #ffffff02,0 0 0 140px #ffffff01; }
.home-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg,#56c9d3,#9470db,#e5b75d,#e87887); }
.hero-grid { gap: 52px; padding-block: 86px 92px; }
.home-hero h1 { font-size: clamp(2.7rem,4.1vw,4.35rem); line-height: 1.11; max-width: 620px; }
.home-hero .hero-intro { max-width: 570px; font-size: 1.06rem; color: #c4d7e4; }
.hero-highlight { color: #f9ce76; }
.hero-media { transform: rotate(-1deg); border: 1px solid #5e8d9b48; border-radius: 20px; box-shadow: 0 30px 70px #00000055; }
.home-hero .hero-media > img { aspect-ratio: 16/11; object-fit: cover; }
.hero-media figcaption { background: #061725; color: #b6d0dd; }
.page-hero .hero-media { transform: none; }
.page-hero .hero-grid { padding-block: 44px 60px; gap: 44px; }
.page-hero h1 { font-size: clamp(2.1rem,3.1vw,3.35rem); }
.hero-trust > span { color: #c2d5df; }
.hero-trust .icon { color: #58d1bf; }
.eyebrow { color: #47697d; font-size: .7rem; letter-spacing: .15em; }
.info-strip { background: #fff; border-color: #e3eaf2; }
.info-strip .shell { padding-block: 8px; }
.info-strip article { min-height: 95px; border-color: #e6edf4; }
.info-strip article:nth-child(1) .icon { color: #3487aa; }
.info-strip article:nth-child(2) .icon { color: #8961cd; }
.info-strip article:nth-child(3) .icon { color: #bf861a; }
.info-strip article:nth-child(4) .icon { color: #ca5e88; }
.section-block { padding-block: 60px; }
.section-head { margin-bottom: 30px; }
.section-head h2 { font-size: clamp(1.9rem,3vw,3rem); }
.section-head > p:last-child { color: #65748b; max-width: 820px; }
.split-section { gap: 56px; }
.split-section .media-frame { box-shadow: var(--shadow); }
.media-frame { border-color: #e0e7f0; background: #f7f9fc; border-radius: 18px; }
.media-frame figcaption { color: #66758a; background: #fbfcfe; }
.hero-media figcaption { color: #b6d0dd; background: #061725; }
.stats-band {
  padding: 48px; border-radius: 24px;
  background: radial-gradient(ellipse at right top,#2d5b762d,transparent 50%),#081b2c;
  box-shadow: 0 20px 60px #142d4820;
}
.stats-band h2 { max-width: 750px; }
.stats-band .eyebrow { color: #e8bd6a; }
.stat-grid { gap: 18px; }
.stat-grid > div { padding: 23px 20px; border: 1px solid #365365; border-bottom: 3px solid #56b7ca; border-radius: 13px; background: #ffffff04; }
.stat-grid > div:nth-child(2) { border-bottom-color: #9971d6; }
.stat-grid > div:nth-child(3) { border-bottom-color: #e8b955; }
.stat-grid > div:nth-child(4) { border-bottom-color: #e16b91; }
.stat-grid strong { color: #f7fafc; font-size: clamp(1.75rem,2.7vw,3rem); }
.stat-grid span { color: #adc6d7; }
.stats-band .fine-print { color: #9eb7c8; }
.carousel-controls button { border-radius: 9px; border-color: #d6e1ed; background: #fff; color: #183e56; }
.carousel-controls button:hover { background: #eef6fa; border-color: #8ab7c4; }
.carousel-track { scrollbar-color: #91b3c7 #edf3f8; gap: 20px; padding-bottom: 14px; }
.carousel-card { transition: transform .25s ease; }
.carousel-card:hover { transform: translateY(-3px); }
.carousel.logos .media-frame { border: 1px solid #e4eaf2; background: #fff; }
.carousel.logos .media-frame img { padding: 18px; object-fit: contain; }
.carousel.logos .media-frame figcaption { min-height: 48px; font-size: .73rem; }
.carousel.sports .media-frame { background: #fff; }
.carousel.screens .carousel-card { flex-basis: min(820px,92%); }
.carousel.screens .media-frame { background: #081b2c; border-color: #203d53; box-shadow: 0 10px 28px #12284414; }
.carousel.screens .media-frame > img { aspect-ratio: auto; object-fit: contain; }
.carousel.screens figcaption { color: #c1d1df; background: #0b2337; }
.carousel.posters .media-frame { background: #091b2d; border: 0; }
.carousel.posters figcaption { color: #d2ddec; background: #091b2d; }
.feature-grid { gap: 25px; }
.feature-card { border: 1px solid #dee7ef; border-radius: 20px; background: #fff; box-shadow: 0 12px 40px #15314c07; transition: transform .25s,box-shadow .25s; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px #15314c14; }
.feature-card > div { padding: 25px; }
.feature-card:nth-child(3n+1) > div { border-top: 3px solid #46a4b3; }
.feature-card:nth-child(3n+2) > div { border-top: 3px solid #9570d7; }
.feature-card:nth-child(3n) > div { border-top: 3px solid #dfb45e; }
.price-grid { gap: 20px; }
.price-card { position: relative; padding: 31px 25px; border: 1px solid #dee7ef; border-radius: 18px; background: #fff; box-shadow: 0 15px 45px #1b395009; }
.price-card::before { content: ""; position: absolute; left: 25px; right: 25px; top: 0; height: 3px; background: #58a9be; border-radius: 0 0 10px 10px; }
.price-card:nth-child(2)::before { background: #9874d6; }
.price-card:nth-child(3)::before { background: #ed9764; }
.price-card:nth-child(4)::before { background: #e3b752; }
.price-card .eyebrow { color: #5f6d83; letter-spacing: .1em; font-size: .64rem; }
.price-card h3 { font-size: 1.38rem; }
.price { color: #102b43; font-size: clamp(2.4rem,3.6vw,3.8rem); letter-spacing: -.06em; }
.price-detail { font-size: .78rem; color: #68778e; min-height: 38px; }
.price-card.recommended { background: #071c2d; border-color: #b59a58; box-shadow: 0 20px 45px #071c2d22; }
.price-card.recommended h3,.price-card.recommended .price { color: #fff; }
.price-card.recommended .eyebrow { color: #e9c679; }
.price-card.recommended .price-detail,.price-card.recommended li { color: #bcd1de; }
.price-card.recommended .icon { color: #73d9c3; }
.price-card.recommended::after { content: "LONGER TERM"; position: absolute; top: -12px; right: 20px; padding: 5px 10px; border-radius: 6px; font-size: .6rem; font-weight: 800; letter-spacing: .1em; color: #152738; background: #f8d58a; }
.page-core .price-card.recommended::after,.page-reseller .price-card.recommended::after { content: "COMPARE THE TOTAL"; }
.guide-card { position: relative; padding: 29px; background: #fff; border-color: #dfe7ef; border-radius: 17px; box-shadow: 0 10px 30px #142d4906; }
.guide-card:nth-child(3n+1) .card-icon { color: #147286; background: #e8f6f8; }
.guide-card:nth-child(3n+2) .card-icon { color: #7d54be; background: #f1ecfc; }
.guide-card:nth-child(3n) .card-icon { color: #936711; background: #fff4db; }
.guide-card:hover { border-color: #9dbdcb; box-shadow: 0 16px 36px #142d4910; }
.card-grid { gap: 22px; }
.family-nav { border-top: 1px solid #e0e9f1; margin-top: 40px; }
.trial-callout { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 33px 38px; margin-block: 35px; border: 1px solid #2b5062; border-radius: 19px; color: #bed4df; background: radial-gradient(ellipse at right,#49538235,transparent 65%),#08283a; }
.trial-callout h2 { color: #fff; font-size: clamp(1.35rem,2.3vw,2rem); margin-bottom: 13px; }
.trial-callout .eyebrow { color: #f1c66d; margin-bottom: 8px; }
.trial-callout p:last-child { margin-bottom: 0; max-width: 730px; font-size: .9rem; }
.trial-callout > .btn { flex-shrink: 0; }
.player-feature { padding-top: 62px; }
.player-showcase { padding: 30px; border: 1px solid #233b53; border-radius: 24px; background: radial-gradient(ellipse at right top,#304b7635,transparent 60%),#061526; box-shadow: 0 25px 50px #071c2d1c; }
.player-picker { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 25px; }
.player-picker button { display: inline-flex; align-items: center; gap: 8px; color: #adc5d8; border: 1px solid #284257; border-radius: 10px; padding: 13px 19px; background: #0a2437; font-weight: 700; font-size: .85rem; }
.player-picker button::before { content: ""; width: 7px; height: 7px; background: #698598; border-radius: 50%; }
.player-picker button[aria-pressed="true"] { color: #182e42; border-color: #e6c47e; background: #f5d58b; }
.player-picker button[aria-pressed="true"]::before { background: #77570b; }
.player-panels .media-frame { border-color: #2b4155; background: #050e1c; }
.player-panels .media-frame > img { width: 100%; max-height: 650px; object-fit: contain; }
.player-panels .media-frame figcaption { background: #0b2134; color: #b9cddd; }
.player-panels .btn { margin-top: 20px; }
[hidden] { display: none !important; }
.faq-list details { margin-bottom: 12px; border: 1px solid #dce6ef; background: #fff; border-radius: 13px; }
.faq-list summary { padding: 21px 24px; color: #17334c; }
.faq-list details[open] { border-color: #9ab9c8; box-shadow: 0 8px 25px #18384d08; }
.faq-list summary > span { color: #367b94; }
.reference-grid article { border: 1px solid #dfe7ef; background: #fff; border-top: 3px solid #81b3c5; }
.reference-grid article:nth-child(3n+2) { border-top-color: #a88ade; }
.reference-grid article:nth-child(3n) { border-top-color: #ddb365; }
.flag-grid a { background: #fff; border-color: #dfe7ef; }
.blog-grid { gap: 26px; }
.blog-card { border-radius: 18px; border-color: #e1e8f0; background: #fff; box-shadow: 0 12px 35px #0c25400a; }
.blog-card .blog-image img { object-fit: cover; transition: transform .5s; }
.blog-card:hover .blog-image img { transform: scale(1.025); }
.blog-card > div { padding: 27px; }
.blog-card h3 { font-size: 1.18rem; line-height: 1.35; }
.pagination a { border-color: #d8e4ee; border-radius: 9px; }
.pagination a[aria-current="page"] { background: #103b51; color: #fff; border-color: #103b51; }
.article-shell { max-width: 1050px; }
.article-meta { color: #67788e; background: #edf3f8; border-radius: 12px; padding: 14px 22px; border-color: #dfe8f1; }
.toc-card { border-left: 4px solid #54a5b7; border-radius: 12px; background: #fff; box-shadow: 0 8px 30px #16304908; }
.toc-card a { color: #275777; }
.content-section { margin-block: 32px; }
.content-section h2 { font-size: clamp(1.4rem,2.1vw,2rem); }
.table-scroll { border-radius: 14px; border-color: #dce6ef; background: #fff; }
thead { background: #0c2c42; color: #fff; }
thead th { color: #fff; }
tbody tr:nth-child(even) { background: #f7fafc; }
caption { color: #4e657a; }
.download-card { border: 1px solid #b6d0db; border-radius: 18px; background: linear-gradient(120deg,#f1f8fb,#f4f0fc); }
.download-code { color: #174b62; letter-spacing: .035em; }
.calculator { border-radius: 17px; border-color: #c5dbe4; background: #f3f8fb; }
.calculator output { color: #153e54; border-color: #c9dce6; background: #fff; }
.api-form,.order-form-card,.order-side { border-color: #dce6ef; border-radius: 19px; background: #fff; box-shadow: 0 15px 45px #0d2d4808; }
.form-row input,.form-row textarea,.form-row select { background: #fbfcfe; border-color: #cddce7; border-radius: 9px; }
.form-row input:focus,.form-row select:focus,.form-row textarea:focus { border-color: #4387a0; }
.order-side { border-top: 4px solid #d7b56f; background: #f7faff; }
.order-side .price { color: #173a52; }
.order-side img { border-radius: 13px; }
.pre-footer { background: radial-gradient(ellipse at right top,#8771be40,transparent 50%),linear-gradient(115deg,#082638,#102744); border-top: 1px solid #24465a; }
.pre-footer h2 { max-width: 750px; }
.pre-footer .eyebrow { color: #ecc774; }
.pre-footer p { color: #b9d1de; }
.site-footer { background: #050f1c; }
.footer-brand .brand small { color: #9fbacf; }
.footer-grid h2 { color: #f2f7fc; }
.footer-grid a:hover { color: #f3cd7b; }
.footer-bottom { border-color: #203449; }
.whatsapp-float { background: #105b52; border: 1px solid #397e70; box-shadow: 0 8px 25px #083c3833; }
.whatsapp-float:hover { background: #164d43; }
@keyframes pro-enter { from { opacity: .15; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.home-hero .hero-grid > div { animation: pro-enter .7s ease both; }
.home-hero .hero-media { animation: pro-enter .8s ease both; }
@media (min-width: 1200px) {
  .home-hero .hero-grid { grid-template-columns: 1fr 1.05fr; }
  .page-apps .hero-grid { grid-template-columns: .9fr 1.1fr; }
}
@media (max-width: 1100px) {
  #main-navigation { background: #071e31; border-color: #28485e; }
  .nav-explore > div { background: #0b2335; }
  .hero-grid { gap: 35px; }
  .price-card { padding: 28px 20px; }
  .trial-callout { padding: 30px; }
}
@media (max-width: 850px) {
  .trial-callout { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero-grid { padding-block: 55px; }
  .hero-media { transform: none; }
  .stats-band { padding: 35px 28px; }
  .stat-grid > div { padding: 20px; }
  .player-showcase { padding: 22px; }
  .section-block { padding-block: 45px; }
  .carousel.screens .carousel-card { flex-basis: 95%; }
}
@media (max-width: 560px) {
  :root { --shell: min(100% - 36px,1280px); --radius: 16px; }
  .brand > span { font-size: 1.35rem; }
  .brand small { font-size: .5rem; }
  .site-header .brand img { width: 45px; height: 45px; }
  .header-inner { min-height: 75px; }
  .home-hero h1 { font-size: 2.55rem; }
  .page-hero h1 { font-size: 2.15rem; }
  .home-hero .hero-intro { font-size: .98rem; }
  .hero-grid { padding-block: 42px 48px; gap: 32px; }
  .home-hero .hero-media > img { aspect-ratio: 16/10; }
  .hero-trust { gap: 10px; font-size: .72rem; }
  .hero-actions .btn { padding: 13px 17px; min-height: 48px; }
  .info-strip article { padding: 15px 10px; gap: 10px; }
  .info-strip article:first-child { padding-left: 10px; }
  .info-strip .icon { width: 26px; height: 26px; flex-basis: 26px; }
  .info-strip span { font-size: .69rem; }
  .info-strip strong { font-size: .79rem; }
  .section-head { margin-bottom: 25px; }
  .section-block { padding-block: 36px; }
  .section-head h2 { font-size: 1.9rem; }
  .stats-band { border-radius: 18px; padding: 30px 20px; }
  .stat-grid { gap: 12px; }
  .stat-grid > div { padding: 18px 13px; }
  .stat-grid strong { font-size: 1.85rem; }
  .stat-grid span { font-size: .74rem; }
  .trial-callout { padding: 26px 23px; margin-block: 27px; }
  .trial-callout .btn { width: 100%; }
  .player-showcase { padding: 16px; border-radius: 17px; }
  .player-picker { gap: 8px; }
  .player-picker button { padding: 10px 12px; font-size: .75rem; flex: 1 1 130px; justify-content: center; }
  .player-panels .btn { width: 100%; font-size: .8rem; }
  .media-frame figcaption { padding: 12px; font-size: .71rem; }
  .guide-card { padding: 25px; }
  .feature-card > div,.blog-card > div { padding: 23px; }
  .price-card { padding: 31px 25px; }
  .faq-list summary { padding: 19px 20px; font-size: .9rem; }
  .article-meta { padding: 13px 17px; }
  .whatsapp-float { bottom: 16px; right: 14px; }
  .whatsapp-float span { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-grid > div,.home-hero .hero-media { animation: none; }
  .carousel-card,.feature-card,.blog-image img { transition: none; }
  .carousel-card:hover,.feature-card:hover { transform: none; }
}