/* /iptv-apps — IPTV Apps & Player. Builds on style.css; page-scoped classes only. */
.apps-page{overflow-x:clip}
.apps-page h2{color:#0a1837}
.apps-page .section-heading h2{text-wrap:balance}
.apps-page p a,.apps-page li a:not(.btn){color:var(--blue);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.apps-page :focus-visible{outline:3px solid #9dbcf3;outline-offset:2px}
.device-panel-icon img,.login-icon img,.setup-step>img,.device-disclaimer img{filter:invert(27%) sepia(84%) saturate(2331%) hue-rotate(211deg) brightness(88%)}

/* Hero */
.apps-hero-wrap{padding-top:25px}
.apps-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:30px;padding:56px clamp(28px,5vw,72px);border-radius:25px;background:linear-gradient(114deg,#edf5ff 0%,#f8fbff 54%,#e7f1ff 100%);border:1px solid #e0ebff;overflow:hidden}
.apps-hero:before{content:'';position:absolute;inset:auto -10% -230px 35%;height:360px;border-radius:50%;background:radial-gradient(circle,#cde2ff 0%,transparent 66%);pointer-events:none}
.apps-hero-copy{position:relative;z-index:1}
.apps-hero h1{font-size:clamp(33px,3.9vw,52px);line-height:1.1;letter-spacing:-1.8px;margin:18px 0 16px;color:#0a1837;font-weight:850;text-wrap:balance}
.apps-hero-copy>p{color:#3b4d6b;font-size:17px;line-height:1.7;margin:0 0 26px;max-width:570px}
.apps-hero-copy>.apps-hero-note{font-size:12.5px;color:#6a7a93;margin:18px 0 0}

/* Hero art: TV, phone and app tiles (CSS only) */
.apps-art{position:relative;z-index:1;height:340px}
.art-glow{position:absolute;inset:8% 6% 10% 10%;border-radius:50%;background:radial-gradient(circle,#d6e7ff 0%,transparent 68%)}
.art-tv{position:absolute;left:2%;top:10%;width:80%}
.art-screen{aspect-ratio:16/10;border-radius:16px;background:#0d1f45;border:7px solid #13254d;box-shadow:0 26px 60px rgba(16,56,120,.25);padding:12px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.art-bar{display:flex;gap:6px}.art-bar i{height:6px;border-radius:9px;background:#2a4a85;width:16%}.art-bar i:first-child{background:#4f8dff;width:22%}
.art-layout{flex:1;display:grid;grid-template-columns:28% 1fr;gap:9px;min-height:0}
.art-side{display:grid;gap:6px;align-content:start}.art-side i{height:13px;border-radius:5px;background:#1c3466}.art-side i:nth-child(2){background:#2d63d8}
.art-main{display:grid;grid-template-rows:1fr auto;gap:8px;min-height:0}
.art-feature{border-radius:9px;background:linear-gradient(130deg,#2a6df0 0%,#1747b8 55%,#0f2f80 100%);display:grid;place-items:center;position:relative;overflow:hidden}
.art-feature:after{content:'';position:absolute;inset:auto -20% -60% 30%;height:120%;border-radius:50%;background:rgba(255,255,255,.08)}
.art-play{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);position:relative}
.art-play:after{content:'';position:absolute;left:13px;top:10px;border-left:12px solid #175cd3;border-top:7px solid transparent;border-bottom:7px solid transparent}
.art-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.art-row i{height:26px;border-radius:6px;background:#1c3466}
.art-stand{width:28%;height:12px;margin:0 auto;background:#13254d;border-radius:0 0 10px 10px;position:relative}
.art-stand:after{content:'';position:absolute;left:-30%;right:-30%;bottom:-6px;height:6px;border-radius:6px;background:#b9cdee}
.art-phone{position:absolute;right:4%;bottom:2%;width:28%;max-width:132px;aspect-ratio:9/18.5;border-radius:22px;background:#13254d;padding:6px;box-shadow:0 22px 46px rgba(16,56,120,.3);transform:rotate(6deg)}
.art-phone-screen{height:100%;border-radius:17px;background:#f4f8ff;padding:16px 9px 9px;display:flex;flex-direction:column;gap:6px;position:relative}
.art-notch{position:absolute;top:6px;left:50%;width:30%;height:5px;border-radius:5px;background:#13254d;transform:translateX(-50%)}
.art-phone-feature{height:34%;border-radius:10px;background:linear-gradient(150deg,#297dff,#1747b8)}
.art-phone-screen>i:not(.art-notch){height:13%;border-radius:7px;background:#dbe8fa}
.art-tiles{position:absolute;left:-2%;bottom:6%;display:flex;gap:10px}
.art-tile{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:850;letter-spacing:.3px;box-shadow:0 12px 26px rgba(16,56,120,.22)}
.art-tile:nth-child(2){transform:translateY(-14px)}

/* Generic app marks (original monograms, no official logos) */
.app-mark{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;font-weight:850;font-size:17px;letter-spacing:.2px;position:relative;overflow:hidden;box-shadow:0 10px 22px rgba(23,92,211,.18)}
.app-mark:before,.art-tile:before{content:'';position:absolute;inset:-40% -40% 45% 30%;border-radius:50%;background:rgba(255,255,255,.16)}
.art-tile{position:relative;overflow:hidden}
.app-mark span,.art-tile span{position:relative}
.app-mark-a{background:linear-gradient(140deg,#2f80ff,#1747b8)}
.app-mark-b{background:linear-gradient(140deg,#1f2f5c,#0b193b)}
.app-mark-c{background:linear-gradient(140deg,#3aa0ff,#1565d8)}
.app-mark-d{background:linear-gradient(140deg,#5b6cff,#3340c4)}
.app-mark-e{background:linear-gradient(140deg,#16a3b8,#0b6f8c)}
.app-mark-f{background:linear-gradient(140deg,#4b5d82,#27375a)}
.app-mark-g{background:linear-gradient(140deg,#f08a24,#c9600c)}
.app-mark-h{background:linear-gradient(140deg,#1aa1d6,#0e5f99)}
.app-mark-i{background:linear-gradient(140deg,#1d4ed8,#0e2f8f)}
.app-mark-j{background:linear-gradient(140deg,#6d5cf2,#4a37c9)}
.app-mark-sm{width:30px;height:30px;border-radius:9px;font-size:10px;box-shadow:none}

/* Device filter */
.device-filter{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 auto 30px}
.device-filter-group{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:7px;background:#f1f6ff;border:1px solid #dce8fa;border-radius:16px}
.device-chip{border:1px solid transparent;background:transparent;color:#203d70;font-size:14px;font-weight:700;padding:10px 16px;border-radius:11px;transition:background .2s,color .2s,box-shadow .2s}
.device-chip:hover{background:#fff;color:var(--blue)}
.device-chip.is-active{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(23,92,211,.24)}
.device-filter-status{margin:0;font-size:13px;color:#60718b}

/* App cards */
.apps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.app-card{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:0 14px 40px rgba(39,92,168,.06);transition:transform .2s,box-shadow .2s,border-color .2s;scroll-margin-top:100px}
.app-card:hover{transform:translateY(-4px);border-color:#c7dbfb;box-shadow:0 22px 48px rgba(39,92,168,.1)}
.app-card[hidden]{display:none}
.app-card:target{border-color:var(--blue);box-shadow:0 0 0 3px #cfe0ff,0 22px 48px rgba(39,92,168,.1)}
.app-card-head{display:flex;align-items:center;gap:14px}
.app-card h3{font-size:18px;letter-spacing:-.35px;margin:0 0 5px;line-height:1.25}
.app-price{display:inline-block;font-size:11.5px;font-weight:750;color:#185ac9;background:#edf5ff;border:1px solid #d6e6ff;padding:3px 9px;border-radius:99px}
.app-price-muted{color:#60718b;background:#f5f8fc;border-color:#e4ebf5}
.app-desc{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.app-meta{margin:0;display:grid;gap:10px;padding:14px 0;border-block:1px solid #edf2fa}
.app-meta div{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:start}
.app-meta dt{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#7588a8;padding-top:3px}
.app-meta dd{margin:0;font-size:13.5px;color:#203d70;font-weight:600;line-height:1.5}
.app-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.app-tags li{font-size:12px;font-weight:700;color:#1b4f9b;background:#f1f6ff;border-radius:8px;padding:3px 8px}
.app-points{flex:1}
.app-points-title{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#7588a8}
.app-pros{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.app-pros li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.5}
.app-pros li:before{content:'';position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:#e3efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23175CD3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.app-cons{margin:0;font-size:13.5px;line-height:1.55;color:#52627c;padding:10px 12px;background:#fbfcfe;border:1px solid #eef2f8;border-radius:10px}
.app-more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:14px;font-weight:750;color:var(--blue)}
.app-more:hover{text-decoration:underline;text-underline-offset:3px}
.apps-empty{text-align:center;padding:40px 20px;border:1px dashed #c9dbf6;border-radius:20px;background:#f8fbff;color:#52627c}
.apps-empty p{margin:0 0 14px}

/* Soft band sections */
.apps-band{background:linear-gradient(180deg,#F3F7FF 0%,#ECF4FF 100%);border-block:1px solid #E8EFFA}

/* Comparison table */
.apps-table-scroll{overflow-x:auto;border:1px solid #dce7f9;border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(23,92,211,.06);-webkit-overflow-scrolling:touch}
.apps-table{width:100%;min-width:860px;border-collapse:collapse;text-align:left}
.apps-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.apps-table th,.apps-table td{padding:16px 18px;border-bottom:1px solid #e9effa;font-size:14px;line-height:1.5;vertical-align:top}
.apps-table thead th{background:#f1f6ff;color:#1b4f9b;font-size:12px;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.apps-table tbody tr:last-child>*{border-bottom:none}
.apps-table tbody tr:hover{background:#fafcff}
.apps-table tbody tr:target{background:#edf5ff}
.apps-table tbody tr{scroll-margin-top:100px}
.apps-table tbody th{font-weight:750;white-space:nowrap}
.apps-table tbody th a{display:inline-flex;align-items:center;gap:10px;color:#0a1837}
.apps-table tbody th a:hover{color:var(--blue)}
.apps-table td{color:#40516e}
.apps-table td:nth-child(4){white-space:nowrap;font-weight:650;color:#185ac9}
.apps-table-note{text-align:center;color:#7989a1;font-size:12.5px;margin:14px auto 0;max-width:720px}
.login-methods{margin-top:48px}
.login-methods-title{text-align:center;font-size:22px;letter-spacing:-.4px;margin:0 0 20px}
.login-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.login-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 9px 23px rgba(29,69,138,.05)}
.login-icon,.device-panel-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#eaf3ff}
.login-card h4{font-size:17px;margin:14px 0 6px}
.login-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.65}
.login-note{text-align:center;font-size:14px;color:#52627c;margin:20px 0 0}

/* Device panels */
.device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.device-panel{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:0 14px 40px rgba(39,92,168,.05)}
.device-panel-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.device-panel h3{font-size:18px;margin:0;letter-spacing:-.3px}
.device-panel-head span:not(.device-panel-icon){font-size:12px;color:#7588a8;font-weight:650}
.device-panel>p{margin:0;font-size:14px;color:var(--muted);line-height:1.65}
.device-panel>.device-panel-label{margin:16px 0 8px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#7588a8}
.device-panel-apps{display:flex;flex-wrap:wrap;gap:7px}
.apps-page .device-panel-apps a{font-size:13px;font-weight:700;color:#175cd3;background:#f1f6ff;border:1px solid #dce8fa;border-radius:9px;padding:5px 10px;text-decoration:none}
.apps-page .device-panel-apps a:hover{background:#e4efff}
.device-panel>.device-panel-note{margin-top:auto;padding-top:16px;font-size:13px;color:#60718b}
.device-disclaimer{display:flex;gap:10px;align-items:flex-start;max-width:860px;margin:26px auto 0;padding:14px 18px;border-radius:14px;background:#f1f6ff;border:1px solid #d6e7ff;font-size:13.5px;color:#344667;line-height:1.6}
.device-disclaimer img{flex:none;margin-top:2px}

/* Setup steps */
.setup-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:none}
.setup-step{position:relative;background:#fff;border:1px solid #DEE9F8;border-radius:20px;padding:28px 24px 26px;box-shadow:0 9px 23px rgba(29,69,138,.05)}
.setup-num{position:absolute;top:22px;right:22px;font-size:46px;line-height:1;font-weight:900;color:#e3eeff;letter-spacing:-2px}
.setup-step>img{width:28px;height:28px;padding:11px;box-sizing:content-box;background:#eaf3ff;border-radius:14px}
.setup-step h3{font-size:19px;margin:16px 0 7px;letter-spacing:-.3px}
.setup-step p{margin:0;font-size:14px;color:var(--muted);line-height:1.65}

/* App vs subscription */
.difference{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:40px clamp(24px,4vw,52px);border:1px solid #e0ebff;border-radius:24px;background:#fff;box-shadow:var(--shadow)}
.difference h2{font-size:clamp(24px,2.4vw,31px);line-height:1.25;letter-spacing:-.7px;margin:8px 0 14px}
.difference-copy p{color:#40516e;font-size:15px;line-height:1.75;margin:0 0 12px}
.difference-copy strong{color:#0a1837}
.difference-link{display:inline-flex;gap:8px;align-items:center;margin-top:6px;font-weight:750;color:var(--blue)}
.difference-link:hover{text-decoration:underline;text-underline-offset:3px}
.difference-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.difference-col{border-radius:18px;padding:20px;background:#f4f8ff;border:1px solid #dce8fa}
.difference-col-accent{background:linear-gradient(155deg,#175CD3,#1d47b8);color:#fff;border-color:transparent}
.difference-label{display:block;font-weight:850;font-size:15px;margin-bottom:12px}
.difference-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.difference-col li{font-size:13.5px;line-height:1.45;padding-left:14px;position:relative}
.difference-col li:before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.difference-col-accent li:before{background:#bcd6ff}

/* FAQ */
.apps-faq .faq-item summary{font-size:15px;padding:19px 22px}
.apps-faq .faq-item p{font-size:14px;padding:0 24px 20px 62px}
.apps-faq-more{text-align:center;color:#52627c;font-size:14px;margin:22px 0 0}

/* CTA */
.apps-cta-wrap{padding-top:10px}
.apps-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:44px 48px;border-radius:24px;background:linear-gradient(115deg,#0f47b8 0%,#175CD3 45%,#2a76f4 100%);color:#fff;box-shadow:0 22px 50px rgba(23,92,211,.25)}
.apps-cta:before{content:'';position:absolute;right:-90px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 68%)}
.apps-cta>*{position:relative}
.apps-cta .kicker{color:#D8E9FF}
.apps-cta h2{color:#fff;font-size:clamp(23px,2.4vw,30px);line-height:1.25;margin:8px 0;letter-spacing:-.6px}
.apps-cta p{color:#EAF3FF;margin:0;max-width:620px;line-height:1.65}
.apps-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none}
.apps-btn-ghost{color:#fff;border-color:rgba(255,255,255,.7);background:transparent}
.apps-btn-ghost:hover{background:rgba(255,255,255,.12)}

@media(max-width:1020px){
.apps-hero{grid-template-columns:1fr 280px;padding:44px 34px}
.apps-art{height:260px}
.apps-grid,.device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.difference{grid-template-columns:1fr}
.apps-cta{flex-direction:column;align-items:flex-start}
}
@media(max-width:710px){
.apps-hero-wrap{padding-top:13px}
.apps-hero{grid-template-columns:1fr;padding:30px 22px;border-radius:18px;gap:10px}
.apps-hero h1{font-size:clamp(29px,7.6vw,40px);letter-spacing:-1.2px}
.apps-hero-copy>p{font-size:15px}
.apps-hero .hero-actions .btn{flex:1 1 auto}
.apps-art{height:230px;max-width:380px;width:100%;margin:0 auto}
.art-tile{width:42px;height:42px;font-size:10px;border-radius:12px}
.device-filter-group{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:100%;scrollbar-width:thin}
.device-chip{white-space:nowrap;font-size:13px;padding:9px 13px}
.apps-grid,.device-grid,.login-grid,.setup-steps,.difference-compare{grid-template-columns:1fr}
.app-card,.device-panel{padding:20px}
.apps-table th,.apps-table td{padding:13px 14px;font-size:13px}
.difference{padding:26px 20px}
.apps-faq .faq-item summary{font-size:13px;padding:15px}
.apps-faq .faq-item p{font-size:13px;padding:0 15px 17px 46px}
.apps-cta{padding:28px 22px;margin-bottom:35px}
.apps-cta-actions{width:100%}.apps-cta-actions .btn{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){.app-card:hover{transform:none}}