/* My Panel IPTV — blue, cyan and quiet light surfaces. */
:root {
  --ink: #f2f6fc;
  --anthracite: #ffffff;
  --slate: #e9f0fa;
  --paper: #142742;
  --paper-shade: #dce1e8;
  --gold: #0757cc;
  --gold-light: #064ba9;
  --gold-deep: #064ba9;
  --gold-rgb: 7,87,204;
  --muted-light: #536070;
  --muted-dark: #536070;
  --text: #142742;
  --card-border: #d5dce5;
  --header-bg: rgba(249,250,252,.98);
  --header-height: 148px;
}
body { background: var(--ink); }
html { scroll-padding-top: calc(var(--header-height) + 18px); }
.site-header, .site-header.scrolled { height: var(--header-height); box-shadow: 0 3px 18px #14274208; }
.site-header .nav-wrap { width: min(calc(100% - 40px), 1200px); }
.site-header .brand-logo { transform: none; }
.site-header .brand-logo img, .site-header.scrolled .brand-logo img { width: 156px; height: auto; object-fit: contain; filter: none; }
.desktop-nav a, .mobile-menu > a:not(.btn), .language-menu button, .language-menu button b { color: var(--paper); }
.site-header .language-toggle { background: #f5f6f8; }
.menu-toggle span { background: var(--paper); }
.mobile-menu, .language-menu { background: white; }
.site-header .mobile-menu.open { max-height: calc(100dvh - var(--header-height)); }
.btn, .catalogue-card .order-btn { border-radius: 8px; }
.btn-primary { color: white; background: var(--gold); border-color: var(--gold); box-shadow: 0 5px 12px #0757cc18; }
.btn-primary:hover, .catalogue-card:hover .order-btn { background: #064ba9; color: white; }
.hero.section { padding: calc(var(--header-height) + 66px) 0 76px; background: linear-gradient(110deg,#f7f8fa 0%,#f7f8fa 53%,#e3f2fd 53%,#e9f0fa 100%); }
.hero-glow, .visual-orbit, .hero::before { display: none; }
.hero .eyebrow { display: inline-flex; border: 1px solid #c7ddfa; border-radius: 100px; padding: 9px 15px; background: #edf5ff; color: #064ba9; letter-spacing: 1px; }
.hero h1 { font-size: clamp(38px,4.2vw,62px); line-height: 1.12; letter-spacing: -2px; max-width: 720px; }
.hero h1 em { display: block; font-weight: 800; background: none; color: var(--gold); -webkit-text-fill-color: currentColor; }
.hero-lead { font-size: 16px; max-width: 610px; }
.hero .btn-ghost, .faq-intro .btn { background: white; border-color: #c5cdd7; color: var(--paper); }
.hero-trust { color: var(--muted-dark); }
.check-list li { color: var(--paper); }
[dir="rtl"] .check-list li { padding-left: 0; padding-right: 25px; text-align: right; }
[dir="rtl"] .check-list li::before { left: auto; right: 0; }
.hero-visual { min-height: 390px; }
.hero-visual .dashboard-window { inset: 24px 0 24px; transform: none; border-radius: 16px; border: 1px solid #dce1e8; box-shadow: 0 24px 60px #14274214; }
.hero-visual .window-bar { background: #142742; color: white; }
.product-mark { background: var(--gold); color: white; font-size: 12px; }
.hero-visual .mini-stats > div { border: 1px solid #e5e8ed; border-radius: 8px; background: #fff; }
.hero-visual .quality-card { top: 0; right: -8px; border-radius: 12px; background: #0757cc; color: white; }
.hero-visual .quality-card b, .hero-visual .quality-card span { color: white; }
.hero-visual .live-card { left: 16px; bottom: 2px; border-radius: 10px; background: white; border-color: #dce1e8; }
.float-card b { color: var(--paper); }
.stats { background: #142742; padding: 0; }
.stats-grid { border: 0; padding-block: 24px; }
.stat strong { color: white; font-size: 36px; font-weight: 800; }
.stat span { color: #cbd2dc; }
.stat { border-color: #ffffff25; }
.pricing-section { background: #f2f6fc; }
.pricing-section .section-heading { display: block; text-align: center; max-width: 740px; margin-inline: auto; }
.pricing-section .section-heading p { max-width: 660px; margin: 18px auto 0; }
.pricing-section .section-heading .kicker { margin-bottom: 14px; }
.volume-message { padding: 22px 26px; background: white; border: 1px solid #dce1e8; border-radius: 12px; }
.catalogue-group-title { letter-spacing: 1px; }
.category-stats { background: #e5eaf0; border-color: #d5dce5; border-radius: 10px; }
.catalogue-card { padding: 22px; border: 1px solid #d5dce5; border-radius: 14px; background: white; box-shadow: 0 5px 18px #14274209; gap: 20px; }
.catalogue-card::before, .catalogue-card::after { display: none; }
.catalogue-logo { aspect-ratio: 16/8; border-radius: 8px; background: #f7f8fa; }
.catalogue-logo img { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
.catalogue-index { font-size: 10px; letter-spacing: 1px; }
.catalogue-card h3 { font-size: 23px; }
.catalogue-card strong { font-size: 34px; }
.catalogue-card p { background: #edf5ff; border-color: #c7ddfa; font-size: 12px; }
.catalogue-card:hover, .js-reveal.reveal-ready .catalogue-card.visible:hover, .catalogue-card:focus-within { box-shadow: 0 14px 30px #14274212; }
#avantages { background: #f8f9fb; }
#avantages .section-heading { margin-inline: auto; text-align: center; }
#avantages .section-heading p { margin-inline: auto; }
.benefit-grid { gap: 22px; align-items: stretch; }
.feature-card, .feature-card.featured { margin-top: 0; padding: 30px; border: 1px solid #dce2e9; border-radius: 14px; background: white; box-shadow: 0 4px 14px #14274205; }
.feature-card .icon-box { height: 44px; width: 44px; justify-content: center; border-radius: 10px; background: #e9f4ff; }
.panel-section { background: #edf5fc; border-block: 1px solid #dce2e9; }
.panel-card { border-radius: 16px; box-shadow: 0 18px 48px #14274210; }
.secure-chip { background: white; }
.guidance-section { background: white; }
.guidance-shell { padding: 42px; gap: 48px; background: #f0f5fb; border: 1px solid #d7dee7; border-radius: 20px; }
.guidance-point-icon { background: white; border-radius: 10px; color: var(--gold); }
.faq-section { background: #f7f8fa; }
.faq-item { background: white; border: 1px solid #dce2e9; border-radius: 12px; margin-bottom: 12px; }
.faq-item.open { background: #edf5ff; border-color: #b7d6f9; }
.apps-section { background: #f0f5fb; }
.apps-gallery .app-card, .apps-gallery .app-logo { background: white; border-color: #e1e5eb; border-radius: 12px; }
.final-cta { background: #f0f5fb; padding-block: 30px 80px; }
.cta-box { background: #142742; border: 0; border-radius: 20px; padding: 48px; }
.cta-box h2 { color: white; }
.cta-box p { color: #cbd2dc; }
.cta-box .kicker, .cta-actions > a:last-child { color: #8de3ff; }
footer { background: #f8f9fb; }
footer .footer-logo img { width: 140px; }
.footer-contact { color: var(--gold); }
.whatsapp-float { background: white; color: var(--paper); box-shadow: 0 4px 20px #14274218; }
.whatsapp-float span { background: #167044; color: white; }
.hero-copy, .hero-visual, .catalogue-copy, .guidance-intro, .panel-copy { min-width: 0; }
[dir="rtl"] .hero-copy, [dir="rtl"] .catalogue-copy, [dir="rtl"] .catalogue-card h3, [dir="rtl"] .guidance-intro, [dir="rtl"] .guidance-point { text-align: right; }
[dir="rtl"] .hero-visual, [dir="rtl"] .panel-art, [dir="rtl"] .apps-gallery { direction: ltr; }
[dir="rtl"] .desktop-language .language-menu { right: auto; left: 0; }
[dir="rtl"] .stat strong, [dir="rtl"] .category-stats:not(.category-stats-activation) .category-stat strong { direction: ltr; unicode-bidi: isolate; }
@media(min-width:1251px) { .hero-grid { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 54px; } }
@media(max-width:1250px) { .hero-copy { max-width: 780px; margin-inline: auto; } .hero h1 { margin-inline: auto; } }
@media(max-width:1100px) {
 :root { --header-height: 128px; }
 .site-header .brand-logo img, .site-header.scrolled .brand-logo img { width: 136px; }
}
@media(max-width:820px) {
 .section { padding-block: 72px; }
 .hero.section { padding-top: calc(var(--header-height) + 38px); padding-bottom: 55px; }
 .guidance-shell { padding: 28px; grid-template-columns: 1fr; }
 .hero-visual { max-width: 580px; }
 .cta-box { padding: 36px 28px; }
}
@media(max-width:560px) {
 :root { --header-height: 112px; }
 html { scroll-padding-top: calc(var(--header-height) + 14px); }
 .site-header .brand-logo img, .site-header.scrolled .brand-logo img { width: 116px; }
 .hero.section { padding-top: calc(var(--header-height) + 34px); background: linear-gradient(160deg,#f7f8fa 40%,#e3f2fd); }
 .hero h1 { font-size: clamp(34px,9vw,48px); letter-spacing: -1.3px; }
 .hero .eyebrow { font-size: 9px; letter-spacing: .7px; }
 .hero-visual { min-height: 330px; }
 .hero-visual .quality-card { right: 0; }
 .hero-visual .dashboard-window { inset: 20px 0; }
 .volume-message { padding: 20px; }
 .guidance-shell { padding: 24px 18px; }
 .stat strong { font-size: 28px; }
 .catalogue-card { padding: 20px; }
 .cta-box { border-radius: 16px; }
}
/* A spacious workspace identity: blue actions, cyan accents, white surfaces. */
:root { --header-height: 144px; --ink:#edf2f8; --catalogue-bg:#e7eef7; --panel-bg:#e4eef8; --footer-surface:#eaf0f7; --anthracite:#fff; --slate:#e8f0fa; --paper:#142742; --gold:#0757cc; --gold-light:#064ba9; --gold-deep:#064ba9; --gold-rgb:7,87,204; --muted-light:#52647b; --muted-dark:#52647b; --card-border:#d5e2f0; --header-bg:rgba(255,255,255,.98); }
body { color:var(--paper); }
html.is-initializing { background:var(--ink); }
html.is-initializing body { visibility:hidden; }
.section { padding-block:96px; }
.container { max-width:1240px; }
.site-header { border-bottom:1px solid #dce7f3; }
.site-header .nav-wrap { width:min(calc(100% - 48px),1240px); gap:24px; align-items:center; }
.site-header .brand-logo { display:flex; align-items:center; justify-content:center; margin-inline-start:20px; }
.site-header .brand-logo img, .site-header.scrolled .brand-logo img { width:189px; height:auto; aspect-ratio:3/2; border-radius:10px; display:block; }
.desktop-nav { gap:24px; }
.desktop-nav a { font-size:13px; }
.btn { min-height:48px; padding:14px 22px; font-weight:700; border-radius:10px; }
.btn-primary { box-shadow:0 4px 10px #0757cc12; }
.btn-primary:hover { box-shadow:0 8px 20px #0757cc20; }
.btn-ghost { color:#142742; }
.hero.section { padding-top:calc(var(--header-height) + 72px); padding-bottom:80px; background:var(--ink); border-bottom:1px solid #dce7f3; }
.hero .eyebrow { background:transparent; border:0; padding:0; color:#0757cc; letter-spacing:1.6px; font-size:11px; }
.hero .eyebrow > span { display:block; width:8px; height:8px; background:#16b9d7; border-radius:2px; }
.hero h1 { max-width:730px; font-size:clamp(40px,4.2vw,64px); line-height:1.12; letter-spacing:-2.6px; margin-block:24px; }
.hero h1 em { font-weight:600; }
.hero-lead { font-size:16px; line-height:1.85; }
.hero-trust { font-size:12px; padding-top:12px; }
.hero-visual { min-height:390px; }
.hero-visual .dashboard-window { inset:20px 0 30px; border-radius:18px; border-color:#bfd6f1; box-shadow:0 22px 60px #143e6b12; }
.hero-visual .window-bar { background:#fff; color:#142742; border-bottom:1px solid #dce7f3; }
.product-mark { border-radius:8px; background:#0757cc; }
.hero-visual .window-actions i:first-child { background:#39bed5; }
.hero-visual .quality-card { display:none; }
.hero-visual .live-card { bottom:4px; inset-inline-start:28px; padding:15px 22px 15px 36px; box-shadow:0 8px 24px #143e6b10; }
.pulse { animation:none; background:#0e7490; box-shadow:none; }
.stats { background:#fff; }
.stats-grid { padding-block:28px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.stats .stat { border:0; }
.stats .stat + .stat { border-inline-start:1px solid #dce7f3; }
.stat strong { color:#0757cc; font-size:34px; }
.stat span { color:#52647b; font-size:12px; }
.stat { border-color:#dce7f3; }
.pricing-section { background:var(--catalogue-bg); }
.pricing-section .section-heading { max-width:800px; }
.pricing-section .section-heading .panel-range { color:var(--gold); font-weight:600; margin-top:16px; }
.section-heading h2, .panel-copy h2, .guidance-intro h2, .faq-intro h2, .cta-box h2 { font-size:clamp(28px,3.1vw,44px); line-height:1.2; letter-spacing:-1.3px; text-wrap:balance; }
.kicker { letter-spacing:1.6px; font-size:11px; }
.volume-message { border:1px solid #cbdff5; border-inline-start:4px solid #0757cc; padding:22px 26px; border-radius:12px; box-shadow:none; }
.catalogue-group-title { justify-content:flex-start; letter-spacing:1.3px; font-size:15px; }
.catalogue-group-title::before { width:9px; height:9px; border-radius:3px; background:#0e7490; }
.catalogue-group-title::after { background:#d2e0ee; height:1px; }
.category-stats { background:transparent; border:0; border-bottom:1px solid #d5e2f0; border-radius:0; padding-bottom:18px; }
.category-stat strong { font-size:23px; }
.catalogue-card { border:1px solid #d5e2f0; border-radius:18px; padding:22px; gap:20px; background:#fff; box-shadow:0 3px 9px #143e6b04; }
.catalogue-logo { background:#f7f9fc; aspect-ratio:16/7; border:0; border-radius:10px; }
.catalogue-logo img { inset:16px; width:calc(100% - 32px); height:calc(100% - 32px); }
.catalogue-copy { gap:6px 10px; }
.catalogue-card h3 { font-size:23px; letter-spacing:-.6px; }
.catalogue-index { color:#52647b; font-size:9px; letter-spacing:1.5px; }
.catalogue-card p { padding:7px 10px; border:0; background:#edf5ff; color:#064ba9; border-radius:6px; }
.catalogue-card strong { font-size:35px; direction:ltr; unicode-bidi:isolate; }
.catalogue-card .order-btn { border-radius:9px; background:#0757cc; }
.catalogue-card:hover, .js-reveal.reveal-ready .catalogue-card.visible:hover { transform:translateY(-3px); box-shadow:0 12px 30px #143e6b0d; border-color:#99bde8; }
#avantages { background:#fff; }
.benefit-grid { gap:28px; }
.feature-card, .feature-card.featured { padding:30px 26px; border:0; border-top:3px solid #d1e4fc; border-radius:0 0 14px 14px; box-shadow:none; background:#f7faff; }
.feature-card.featured { border-color:#39bed5; background:#f3fbfc; }
.feature-card .icon-box { border-radius:9px; background:white; color:#0757cc; }
.feature-card h3 { font-size:20px; line-height:1.4; }
.feature-card p { line-height:1.85; }
.panel-section { background:var(--panel-bg); border:0; }
.panel-card { box-shadow:0 18px 40px #143e6b0c; border-radius:16px; }
.panel-top { background:#fff; }
.panel-copy p { line-height:1.85; }
.secure-chip { border:1px solid #bfd6f1; color:#0757cc; }
.guidance-section { background:#fff; }
.guidance-shell { padding:0; background:transparent; border:0; gap:80px; }
.guidance-badge { border:0; padding:0; color:#0757cc; letter-spacing:1px; }
.guidance-points { border-inline-start:1px solid #cbdff5; padding-inline-start:30px; }
.guidance-point { border-bottom-color:#e1ebf5; }
.guidance-point-icon { border-radius:50%; border:1px solid #bdd9f6; color:#0757cc; background:#f1f7ff; }
.faq-section { background:var(--ink); }
.faq-item { border-radius:12px; border:1px solid #d5e2f0; box-shadow:none; }
.faq-item.open { background:#fff; border-color:#9cbfe9; }
.faq-item button { line-height:1.5; gap:16px; text-align:start; }
.faq-answer { padding-inline:20px 62px; }
.language-menu button, .catalogue-subtitle { text-align:start; }
.desktop-nav { margin-left:0; margin-inline-start:auto; }
.faq-item button span { flex-shrink:0; color:#0757cc; background:#edf5ff; }
.faq-answer p { line-height:1.85; }
.apps-section { background:white; }
.apps-gallery .app-card { box-shadow:none; border:1px solid #dce7f3; border-radius:14px; }
.apps-motion-toggle { color:#0757cc; border-color:#bfd6f1; min-height:44px; }
.final-cta { background:#fff; padding-block:24px 80px; }
.cta-box { background:#edf5ff; border:1px solid #bfd6f1; border-radius:22px; padding:50px; }
.cta-box h2 { color:#142742; }
.cta-box p { color:#52647b; }
.cta-box .kicker, .cta-actions > a:last-child { color:#0757cc; }
footer { background:var(--footer-surface); border-color:#d5e2f0; }
footer .footer-logo img { width:168px; height:112px; border-radius:12px; }
.footer-grid p { max-width:340px; line-height:1.8; }
.footer-bottom { border-color:#d5e2f0; }
.whatsapp-float { border-radius:100px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline:3px solid #0757cc; outline-offset:4px; }
[dir="rtl"] .hero h1 { letter-spacing:0; }
[dir="rtl"] .hero-visual .dash-main, [dir="rtl"] .panel-content { direction:rtl; text-align:right; }
[dir="rtl"] .mini-stats span, [dir="rtl"] .panel-boxes b, [dir="rtl"] .chart-heading b { direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] .hero .eyebrow, [dir="rtl"] .guidance-badge { border:0; padding-inline:0; }
[dir="rtl"] .btn > span[aria-hidden], [dir="rtl"] .text-link > span { display:inline-block; rotate:180deg; }
.hero-actions .btn, .cta-actions .btn { white-space:normal; text-align:center; }
@media(min-width:1251px) { .hero-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:64px; } }
@media(max-width:1250px) { .hero-visual { margin-top:20px; } .hero h1 { max-width:800px; } }
@media(max-width:1100px) {
 :root { --header-height:128px; }
 .site-header .brand-logo { margin-inline-start:12px; }
 .site-header .brand-logo img, .site-header.scrolled .brand-logo img { width:166.32px; height:auto; }
 .site-header .mobile-menu { top:100%; }
 .site-header .mobile-menu.open { max-height:calc(100dvh - var(--header-height)); overflow-y:auto; }
 .mobile-language .language-menu { position:static; width:100%; max-height:none; box-shadow:none; margin-top:8px; }
 .mobile-menu.open { padding-bottom:24px; }
 .menu-toggle { margin-left:0; margin-inline-start:auto; }
}
@media(max-width:820px) {
 .section { padding-block:64px; }
 .hero.section { padding-top:calc(var(--header-height) + 42px); padding-bottom:54px; }
 .guidance-shell { padding:0; gap:36px; }
 .guidance-points { padding-inline-start:20px; }
 .cta-box { padding:36px 28px; }
 .benefit-grid { gap:20px; }
}
@media(max-width:560px) {
 :root { --header-height:116px; }
 .site-header .nav-wrap { width:calc(100% - 32px); }
 .site-header .brand-logo { margin-inline-start:8px; }
 .site-header .brand-logo img, .site-header.scrolled .brand-logo img { width:151.2px; height:auto; }
 .hero.section { background:var(--ink); padding-top:calc(var(--header-height) + 38px); }
 .hero h1 { font-size:clamp(34px,9vw,46px); line-height:1.17; letter-spacing:-1.5px; }
 .hero .eyebrow { letter-spacing:1px; line-height:1.7; }
 .hero-lead { font-size:15px; }
 .hero-actions { gap:12px; }
 .hero-visual { min-height:325px; }
 .hero-visual .dashboard-window { inset:12px 0 24px; }
 .hero-visual .live-card { inset-inline-start:12px; bottom:0; padding:12px 15px 12px 32px; }
 .faq-answer { padding-inline:16px 40px; }
 .mini-stats { gap:5px; }
 .mini-stats > div { padding:8px 5px; }
 .stats .stat { padding:20px 4px; }
 .stat strong { font-size:clamp(20px,5.3vw,28px); letter-spacing:-.6px; white-space:nowrap; }
 .stat span { font-size:11px; }
 .catalogue-card { padding:20px; }
 .volume-message { padding:20px; }
 .section-heading h2 { letter-spacing:-.8px; }
 .guidance-points { padding-inline-start:14px; }
 .guidance-point { gap:12px; }
 .cta-box { padding:30px 22px; }
 .whatsapp-float { right:14px; bottom:14px; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } .catalogue-card:hover { transform:none!important; } }