@font-face{font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/inter-latin.woff2') format('woff2');}
  @font-face{font-family:'Sora'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/sora-latin.woff2') format('woff2');}
  :root{
    --bg:#FFFFFF; --bg-soft:#FFFFFF; --dark:#000000; --dark2:#0A0A0A; --card:#FFFFFF; --border:rgba(0,0,0,.14);
    --fg:#000000; --muted:#1A1A1A; --primary:#FFCD00; --primary-dark:#E6B800; --accent:#C8102E; --accent-dark:#A50E27;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--fg); position:relative; overflow-x:hidden;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased; line-height:1.5;
  }
  /* premium entertainment ambient backdrop: fixed so it reads as one continuous atmosphere */
  body::before{
    content:""; position:fixed; inset:0; z-index:-1;
    background:
      radial-gradient(circle at 78% 8%, rgba(255,205,0,.14) 0%, transparent 38%),
      radial-gradient(circle at 92% 55%, rgba(200,16,46,.07) 0%, transparent 32%),
      var(--bg);
  }
  a{color:inherit;}
  ::selection{background:var(--primary); color:var(--dark);}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
  .container{max-width:1280px; margin:0 auto; padding:0 24px;}
  .icon{width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:-0.15em;}
  .icon-fill{fill:currentColor; stroke:none;}

  /* ---------- header ---------- */
  /* sticky + backdrop-filter is a known Safari scroll-jank pattern (the browser
     re-samples/blurs whatever scrolls behind this element every frame it's
     visible); translateZ(0) forces its own compositor layer so that sampling
     doesn't fall back to the main thread. Keep this in sync with .mobile-sticky
     below, and don't add a second simultaneous backdrop-filter layer without
     re-testing scroll on a real iPhone. */
  header.site-header{position:sticky; top:0; z-index:50; background:transparent; border-bottom:1px solid transparent; transition:background .3s,border-color .3s;}
  header.site-header.scrolled{background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom-color:var(--border); box-shadow:0 1px 0 rgba(0,0,0,.04); transform:translateZ(0);}
  .header-inner{display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; gap:16px;}
  .logo{display:inline-flex; align-items:center; gap:8px; font-family:"Sora","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:20px; font-weight:700; text-decoration:none; color:var(--fg);}
  .logo-mark{height:36px; width:auto; flex:none;}
  /* the header wordmark is two lines tall, so it needs a little more height to stay legible */
  header .logo-mark{height:46px;}
  header .logo-mark.logo-icon{height:40px;}
  /* new IPTVGerMax wordmark: sized so the lettering stays legible */
  header .logo-mark:not(.logo-icon){height:48px;} @media(min-width:1024px){header .logo-mark:not(.logo-icon){height:58px;}}
  .logo .i{color:var(--accent);}
  nav.nav-links{display:none; align-items:center; gap:28px;}
  nav.nav-links a{color:var(--muted); text-decoration:none; font-size:14px; font-weight:500;}
  nav.nav-links a:hover{color:var(--fg);}
  .lang-switch{display:none; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--muted); margin-right:4px;}
  .lang-switch .lang-current{color:var(--dark);}
  .lang-switch a{color:var(--muted); text-decoration:none;}
  .lang-switch a:hover{color:var(--accent);}
  .btn.header-cta{display:none; flex:none; white-space:nowrap;}
  /* small laptops: the offer label is long, so tighten the nav instead of letting the button wrap */
  @media(min-width:1024px) and (max-width:1199px){nav.nav-links{gap:14px;} nav.nav-links a{font-size:13px;} .btn.header-cta{padding:9px 14px; font-size:13px;}}
  .menu-btn{background:none; border:none; color:var(--fg); padding:8px; cursor:pointer; border-radius:8px; line-height:0;}
  .menu-btn svg{width:24px; height:24px;}
  .mobile-menu{display:none; border-top:1px solid var(--border); background:var(--bg); padding:24px;}
  .mobile-menu.open{display:block;}
  .mobile-menu nav{display:flex; flex-direction:column; gap:4px;}
  .mobile-menu a{padding:12px; border-radius:8px; text-decoration:none; color:var(--fg); font-weight:500;}
  .mobile-menu a:hover{background:rgba(0,0,0,.05);}
  .mobile-menu .lang-switch{display:flex; padding:0 12px; margin-bottom:8px;}
  .mobile-menu .btn{width:100%; margin-top:16px;}
  @media(min-width:1024px){
    nav.nav-links{display:flex;}
    .lang-switch{display:flex;}
    .btn.header-cta{display:inline-flex;}
    .menu-btn{display:none;}
    .mobile-menu{display:none !important;}
  }

  /* ---------- buttons ---------- */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; font-weight:500; padding:10px 20px; font-size:14px; text-decoration:none; transition:all .2s ease; cursor:pointer; border:none;}
  .btn-primary{background:var(--primary); color:var(--dark); font-weight:700; box-shadow:0 8px 24px -8px rgba(255,205,0,.55);}
  .btn-primary:hover{background:var(--primary-dark); transform:translateY(-2px);}
  .grad-text{background:linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  /* Secondary buttons are never white: solid black on light sections, outlined on dark ones. */
  .btn-secondary{background:var(--dark); color:#fff; font-weight:700; border:1px solid transparent;}
  .btn-secondary:hover{background:#222; transform:translateY(-2px);}
  .final-cta .btn-secondary, .perks .btn-secondary, .vod .btn-secondary{background:transparent; border-color:rgba(255,255,255,.7); color:#fff;}
  .final-cta .btn-secondary:hover, .perks .btn-secondary:hover, .vod .btn-secondary:hover{background:rgba(255,255,255,.14);}
  .btn-lg{padding:14px 28px; font-size:16px;}

  /* ---------- type helpers ---------- */
  .eyebrow{display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--accent); margin-bottom:12px;}
  h1,h2,h3{font-family:"Sora","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-weight:700; letter-spacing:-0.02em; margin:0;}
  .muted{color:var(--muted);}
  .section{padding:96px 0;}
  @media(max-width:640px){.section{padding:64px 0;}}
  .section-head{max-width:640px; margin:0 auto 56px; text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center;}
  .section-head.left{text-align:left; margin:0 0 48px; align-items:flex-start;}
  .section-head h2{font-size:34px;}
  @media(min-width:640px){.section-head h2{font-size:38px;}}
  .section-head p{font-size:17px; margin:0;}
  .band{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-soft);}

  @media(prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }

  /* ---------- hero ---------- */
  .hero{position:relative; overflow:hidden; padding:20px 0 24px;}
  @media(min-width:1024px){.hero{padding:56px 0 32px;}}
  .hero::before{content:"";position:absolute; inset:0 0 auto 0; height:560px; background:radial-gradient(ellipse 60% 50% at 50% -10%, rgba(255,205,0,.16), transparent); z-index:-1;}
  .hero-grid{
    display:grid; align-items:center; row-gap:0; column-gap:48px;
    grid-template-columns:1fr;
    grid-template-areas:"title" "visual" "lead" "devices" "ctas" "guarantee";
  }
  @media(min-width:1024px){
    .hero-grid{
      grid-template-columns:0.85fr 1.15fr;
      grid-template-areas:
        "title visual"
        "lead visual"
        "devices visual"
        "ctas visual"
        "guarantee visual";
    }
  }
  .hero h1{grid-area:title; font-size:38px; line-height:1.1; margin:0 0 12px;}
  @media(min-width:1024px){.hero h1{margin:0 0 20px;}}
  @media(min-width:640px){.hero h1{font-size:48px;}}
  @media(min-width:1024px){.hero h1{font-size:58px;}}
  @media(min-width:1024px) and (max-width:1279px){.hero h1{font-size:48px;}}
  .hero p.lead{grid-area:lead; font-size:18px; max-width:520px; margin:0 0 20px;}
  @media(min-width:1024px){.hero p.lead{margin:0 0 28px;}}
  .hero-devices{grid-area:devices; display:block; width:100%; max-width:480px; height:auto; margin:0 0 20px;}
  @media(min-width:1024px){.hero-devices{margin:0 0 28px;}}
  .hero-ctas{grid-area:ctas; display:flex; flex-wrap:wrap; gap:16px; margin-bottom:20px;}
  @media(min-width:1024px){.hero-ctas{margin-bottom:28px;}}
  .hero-guarantee{grid-area:guarantee; margin:8px 0 0; font-size:14px; color:var(--muted);}

  /* ---------- hero visual (TV mockup) ---------- */
  .hero-visual{grid-area:visual; position:relative; aspect-ratio:4/3; width:100%; max-width:760px; margin:0 auto; align-self:start;}
  @media(max-width:1023px){.hero-visual{max-width:none; width:calc(100% + 48px); margin:12px -24px 20px;}}
  .hv-glow{position:absolute; inset:-40px; border-radius:48px; background:radial-gradient(ellipse at center, rgba(255,205,0,.24), transparent 65%); filter:blur(24px);}
  .hv-glow2{position:absolute; inset:-40px; border-radius:48px; background:radial-gradient(ellipse at 70% 75%, rgba(200,16,46,.10), transparent 60%); filter:blur(24px);}
  .hv-bg{position:absolute; inset:0; border-radius:32px; background:linear-gradient(to bottom, var(--dark2), var(--dark), #000);}
  .hv-arc{position:absolute; inset:0; width:100%; height:100%; opacity:.7;}
  .hv-tv{position:absolute; left:8%; right:8%; top:8%; bottom:22%; border-radius:16px; border:1px solid rgba(255,255,255,.1); background:#000; padding:8px; box-shadow:0 30px 60px -15px rgba(0,0,0,.3);}
  .hv-tvimg{position:absolute; inset:6%; width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 30px 60px rgba(0,0,0,.2));}
  .hv-screen{position:relative; display:flex; height:100%; width:100%; overflow:hidden; border-radius:12px; background:linear-gradient(135deg, var(--dark2), var(--dark), #000);}
  .hv-screenglow{position:absolute; top:-40px; right:-40px; width:160px; height:160px; border-radius:999px; background:rgba(255,205,0,.35); filter:blur(40px); animation:glow 5s ease-in-out infinite;}
  .hv-screenglow2{position:absolute; bottom:-24px; left:-24px; width:110px; height:110px; border-radius:999px; background:rgba(200,16,46,.12); filter:blur(30px);}
  @keyframes glow{0%,100%{opacity:.5;}50%{opacity:.85;}}
  .hv-sidebar{position:relative; z-index:1; display:none; flex-direction:column; gap:4px; width:30%; flex:none; border-right:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.25); padding:10px;}
  @media(min-width:640px){.hv-sidebar{display:flex;}}
  .hv-navitem{display:flex; align-items:center; gap:6px; border-radius:6px; padding:6px 8px; font-size:10px; font-weight:500; color:#fff;}
  .hv-navitem svg{width:10px; height:10px; flex:none;}
  .hv-navitem.active{background:var(--primary); color:var(--dark);}
  .hv-main{position:relative; flex:1; padding:12px;}
  .hv-preview{position:relative; height:55%; width:100%; overflow:hidden; border-radius:8px; background:linear-gradient(135deg, rgba(255,205,0,.28), rgba(200,16,46,.16), rgba(0,0,0,.4));}
  .hv-play{position:absolute; left:50%; top:50%; width:32px; height:32px; transform:translate(-50%,-50%); border-radius:999px; background:rgba(255,255,255,.15); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;}
  .hv-play svg{width:14px; height:14px; margin-left:2px; color:rgba(255,255,255,.9);}
  .hv-bar1{margin-top:8px; height:6px; width:40%; border-radius:999px; background:rgba(255,255,255,.15);}
  .hv-thumbs{margin-top:8px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
  .hv-thumbs div{aspect-ratio:16/9; border-radius:6px; background:linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.05));}
  .hv-stand{position:absolute; bottom:16%; left:50%; transform:translateX(-50%); width:96px; height:8px; border-radius:999px; background:rgba(255,255,255,.1);}
  .hv-shadow{position:absolute; bottom:8%; left:50%; transform:translateX(-50%); width:160px; height:12px; border-radius:999px; background:rgba(0,0,0,.35); filter:blur(6px);}
  .hv-companion{position:absolute; bottom:2%; right:6%; display:none; width:56px; height:96px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#000; padding:4px; box-shadow:0 20px 40px -15px rgba(0,0,0,.25);}
  @media(min-width:640px){.hv-companion{display:block;}}
  .hv-companion div{height:100%; width:100%; border-radius:8px; background:linear-gradient(to bottom, rgba(200,16,46,.3), var(--dark2), #000);}
  .hv-card{position:absolute; z-index:2; display:none; align-items:center; gap:8px; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:#fff; padding:10px 14px; font-size:14px; font-weight:500; box-shadow:0 20px 40px -15px rgba(0,0,0,.18); animation:floaty 6s ease-in-out infinite;}
  @keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
  .hv-card .icon{color:var(--dark);}
  @media(min-width:640px){.hv-card{display:flex;}}
  .hv-card.c1{left:-8%; top:10%; border-color:rgba(255,205,0,.5);}
  .hv-card.c2{right:-6%; top:4%; animation-delay:1.2s; border-color:rgba(0,0,0,.25);}
  .hv-card.c3{left:-4%; bottom:14%; animation-delay:2.1s; border-color:rgba(200,16,46,.35);}
  .hv-card.c4{right:-4%; bottom:6%; animation-delay:.6s; border-color:rgba(255,205,0,.5);}

  /* ---------- perks (premium dark feature grid) ---------- */
  /* Dark section reuses the same gradient+glow treatment as .final-cta so the
     two dark sections on the page feel like one design system, not two. */
  .perks{position:relative; overflow:hidden; padding:80px 0;}
  .perks::before{content:"";position:absolute; inset:0; background:linear-gradient(to bottom, var(--dark2), var(--dark) 55%, var(--dark));}
  .perks::after{content:"";position:absolute; left:22%; top:-120px; width:520px; height:420px; border-radius:999px; background:rgba(255,205,0,.16); filter:blur(120px); pointer-events:none;}
  .perks .red-glow{position:absolute; right:8%; bottom:-140px; width:440px; height:340px; border-radius:999px; background:rgba(200,16,46,.16); filter:blur(120px); pointer-events:none;}
  .perks .container{position:relative;}
  .perks .section-head{max-width:700px;}
  .perks .section-head .eyebrow{color:var(--primary);}
  .perks .section-head h2{color:#fff;}
  .perks .section-head p{color:#fff;}
  .perks-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:16px;}
  @media(min-width:640px){.perks-grid{grid-template-columns:1fr 1fr;}}
  @media(min-width:1024px){.perks-grid{grid-template-columns:repeat(3,1fr); gap:24px;}}
  .perk-card{display:flex; flex-direction:column; align-items:center; text-align:center; border-radius:20px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); padding:28px; transition:border-color .3s ease, transform .3s ease;}
  .perk-card:hover{border-color:rgba(255,205,0,.35); transform:translateY(-4px);}
  .perk-icon{display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; margin-bottom:20px;}
  .perk-icon .icon{width:24px; height:24px;}
  .perk-icon.tint-yellow{background:rgba(255,205,0,.14); border:1px solid rgba(255,205,0,.3); color:var(--primary);}
  .perk-icon.tint-red{background:rgba(255,90,110,.14); border:1px solid rgba(255,90,110,.3); color:#ff8095;}
  .perk-card h3{color:#fff; font-size:17px; margin:0 0 8px;}
  .perk-card p{color:#fff; font-size:14px; line-height:1.6; margin:0;}

  /* ---------- vod (films & series poster wall) ---------- */
  /* Third dark section; same palette as .perks / .final-cta. The two poster rows
     are pure-CSS marquees: each track holds its poster set twice and slides by
     exactly -50%, so the loop is seamless and never ends. The rows must NEVER
     pause: no :hover / :active pause, and pointer-events:none so a tap, click,
     drag or long-press on a poster can't interrupt or grab them. Only transform
     is animated (compositor-only, cheap on mobile). */
  .vod{position:relative; overflow:hidden; padding:48px 0; color:#fff; background:linear-gradient(135deg, var(--dark2), var(--dark) 55%, #000);}
  .vod::before{content:""; position:absolute; left:-140px; top:-180px; width:560px; height:440px; border-radius:999px; background:rgba(255,205,0,.16); filter:blur(120px); pointer-events:none;}
  .vod::after{content:""; position:absolute; right:-120px; bottom:-200px; width:520px; height:400px; border-radius:999px; background:rgba(200,16,46,.2); filter:blur(130px); pointer-events:none;}
  .vod-inner{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr); gap:24px;}
  .vod-head, .vod-body{padding:0 24px;}
  .vod-pill{display:inline-flex; align-items:center; gap:10px; padding:9px 18px; border-radius:999px; border:1px solid rgba(255,205,0,.32); background:rgba(255,205,0,.08); color:var(--primary); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:22px;}
  .vod-pill .icon{width:16px; height:16px;}
  .vod h2{font-size:34px; line-height:1.1; color:#fff;}
  .vod-sub{display:block; margin-top:12px; font-size:20px; letter-spacing:-0.01em; color:var(--primary);}
  .vod-rows{display:flex; flex-direction:column; gap:14px; min-width:0; overflow:hidden; padding:4px 0 14px; pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);}
  .vod-track{display:flex; width:max-content; will-change:transform; animation:vod-scroll 46s linear infinite;}
  .vod-track.rev{animation-direction:reverse; animation-duration:54s;}
  .vod-track img{flex:none; width:138px; height:207px; margin-right:14px; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:var(--dark2); box-shadow:0 16px 28px -16px rgba(0,0,0,.85);}
  @keyframes vod-scroll{to{transform:translate3d(-50%,0,0);}}
  .vod-body p{margin:0 0 24px; max-width:560px; font-size:17px; line-height:1.65; color:#fff;}
  .vod-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-width:520px; margin:0 0 28px; padding:0; list-style:none;}
  .vod-stats li{padding:14px 8px; border-radius:16px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); text-align:center;}
  .vod-stats strong{display:block; font-family:"Sora","Inter",sans-serif; font-size:22px; line-height:1.2; letter-spacing:-0.02em; color:#fff;}
  .vod-stats span{display:block; margin-top:4px; font-size:12px; line-height:1.35; color:#fff;}
  .vod-cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;}
  .vod-price{font-size:15px; color:#fff;}
  .vod-price strong{color:var(--primary);}
  .vod-body .vod-note{display:flex; align-items:center; gap:8px; margin:20px 0 0; font-size:13px; color:#fff;}
  .vod-body .vod-note .icon{flex:none; width:16px; height:16px; color:var(--primary);}
  @media(min-width:1024px){
    .vod{padding:40px 0;}
    /* The poster wall spans the whole section and sits behind the text: its mask
       keeps the posters faint (~16%) under the left column so the copy stays
       readable, then ramps to full strength on the right. */
    .vod-inner{--vod-pad:max(24px, calc((100vw - 1280px) / 2 + 24px)); grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:auto auto; column-gap:56px; row-gap:22px; padding-left:var(--vod-pad);}
    .vod-head{grid-column:1; grid-row:1; align-self:end; padding:0; position:relative; z-index:1;}
    .vod-body{grid-column:1; grid-row:2; align-self:start; padding:0; position:relative; z-index:1;}
    .vod-rows{grid-column:1 / -1; grid-row:1 / -1; align-self:center; margin-left:calc(-1 * var(--vod-pad)); gap:20px; padding:8px 0 20px;
      -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,.1) 0%, rgba(0,0,0,.16) 26%, rgba(0,0,0,.3) 40%, #000 53%, #000 97%, transparent); mask-image:linear-gradient(to right, rgba(0,0,0,.1) 0%, rgba(0,0,0,.16) 26%, rgba(0,0,0,.3) 40%, #000 53%, #000 97%, transparent);}
    .vod h2{font-size:48px;}
    .vod-sub{font-size:26px;}
    .vod-stats strong{font-size:26px;}
    .vod-stats span{font-size:13px;}
    .vod-track img{width:196px; height:294px; margin-right:20px; border-radius:18px;}
  }
  /* The site-wide reduced-motion rule forces every animation to .001ms, which
     would turn an infinite marquee into a strobe. The poster wall is meant to
     keep moving for everyone, so it stays on but drifts at half speed. */
  @media(prefers-reduced-motion:reduce){
    .vod-track{animation-duration:92s !important;}
    .vod-track.rev{animation-duration:108s !important;}
  }

  /* ---------- pricing ---------- */
  .pricing-top{max-width:640px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;}
  .pricing-top .highlight{color:var(--accent); font-weight:600;}
  .device-tabs{display:flex; max-width:760px; margin:32px auto 0; border:1px solid var(--border); background:#fff; box-shadow:0 8px 24px -16px rgba(0,0,0,.15); border-radius:999px; padding:4px; gap:4px;}
  @media(min-width:640px){.device-tabs{padding:6px;}}
  .device-tab-wrap{position:relative; min-width:0; flex:1;}
  .device-tab{width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:0; background:transparent; color:var(--muted); font-size:12px; font-weight:600; padding:10px 8px; border-radius:999px; cursor:pointer; transition:background .2s ease, color .2s ease;}
  @media(min-width:640px){.device-tab{font-size:16px; padding:14px 20px;}}
  .device-tab:hover{color:var(--fg);}
  .device-tab.active{background:var(--primary); color:var(--dark); box-shadow:0 8px 18px -6px rgba(255,205,0,.6);}
  .device-tab-badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--accent); color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:999px; box-shadow:0 6px 16px -4px rgba(200,16,46,.55); z-index:1;}
  @media(min-width:640px){.device-tab-badge{top:-14px; font-size:10px; padding:4px 12px;}}
  .pricing-grid{display:grid; grid-template-columns:1fr; gap:24px; align-items:start; margin-top:32px;}
  @media(min-width:640px){.pricing-grid{grid-template-columns:1fr 1fr;}}
  @media(min-width:1024px){.pricing-grid{grid-template-columns:repeat(4,1fr);}}
  @media(max-width:639px){
    .plan[data-months="12"]{order:1;}
    .plan[data-months="6"]{order:2;}
    .plan[data-months="3"]{order:3;}
    .plan[data-months="24"]{order:4;}
  }
  .plan{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:24px; border-radius:16px; border:1px solid var(--border); background:#fff; padding:32px; box-shadow:0 16px 40px -24px rgba(0,0,0,.2); transition:all .3s ease;}
  .plan::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg, var(--primary), var(--accent)); z-index:1;}
  .plan:hover{transform:translateY(-4px); border-color:rgba(0,0,0,.25);}
  .plan.popular{border:2px solid var(--accent); background:linear-gradient(to bottom, rgba(200,16,46,.06), rgba(255,205,0,.05) 45%, #fff); box-shadow:0 35px 70px -20px rgba(200,16,46,.25);}
  .plan.popular::before{height:6px;}
  .plan.popular::after{content:""; position:absolute; top:-64px; left:50%; transform:translateX(-50%); width:160px; height:160px; border-radius:999px; background:rgba(200,16,46,.18); filter:blur(50px); pointer-events:none;}
  @media(min-width:1024px){.plan.popular{transform:translateY(-16px) scale(1.05);} .plan.popular:hover{transform:translateY(-20px) scale(1.05);}}
  .plan-badge{position:absolute; top:16px; left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--accent); color:#fff; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:6px 20px; border-radius:999px; box-shadow:0 10px 22px -6px rgba(200,16,46,.55); z-index:2;}
  .plan.popular > div:first-of-type{position:relative; margin-top:28px;}
  .plan h3{font-size:18px;}
  .plan.popular h3{font-size:20px;}
  .plan-tag{display:flex; align-items:center; gap:6px; margin-top:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent);}
  .plan-tag .dot{width:6px; height:6px; border-radius:999px; background:var(--accent);}
  .plan-price-row{display:flex; align-items:center; gap:8px; margin-top:16px;}
  .plan-price-row .was{font-size:14px; font-weight:500; color:var(--muted); text-decoration:line-through;}
  .plan-price{display:flex; align-items:baseline; gap:8px; margin-top:4px;}
  .plan-price .amount{font-family:"Sora","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:36px; font-weight:800; letter-spacing:-0.02em;}
  .plan.popular .plan-price .amount{font-size:44px;}
  .save-badge{background:var(--accent); color:#fff; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:4px 10px; border-radius:6px;}
  .plan-permonth{font-size:14px; color:var(--muted); margin:4px 0 0;}
  .plan-included{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);}
  .plan-features{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; flex:1;}
  .plan-features li{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--fg);}
  .plan-features .check-circle{display:flex; align-items:center; justify-content:center; flex:none; width:16px; height:16px; margin-top:2px; border-radius:999px; background:var(--primary);}
  .plan-features .check-circle .icon{width:10px; height:10px; color:var(--dark);}
  .plan .btn{width:100%;}
  .plan:not(.popular) .btn-secondary{background:var(--dark); color:#fff; border-color:transparent; font-weight:700;}
  .plan:not(.popular) .btn-secondary:hover{background:#222;}
  .plan.popular .btn-primary{position:relative; padding:14px 28px; font-size:16px;}
  .reassurance{display:flex; flex-wrap:wrap; justify-content:center; gap:16px 32px; margin-top:20px;}
  .reassurance span{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted);}
  .reassurance .icon{color:var(--accent);}
  .center-note{text-align:center; color:var(--muted); font-size:14px; margin-top:40px;}

  /* ---------- why IPTVGerMax ---------- */
  .why-grid{display:grid; grid-template-columns:1fr; gap:56px;}
  @media(min-width:1024px){.why-grid{grid-template-columns:1fr 1fr; gap:48px;}}
  .why-left{max-width:480px;}
  @media(min-width:1024px){.why-left{position:sticky; top:112px;}}
  .why-left h2{font-size:32px; line-height:1.2; margin:16px 0 0;}
  @media(min-width:640px){.why-left h2{font-size:36px;}}
  .why-left p.lead{font-size:16px; margin:20px 0 0;}
  @media(min-width:640px){.why-left p.lead{font-size:18px;}}
  .why-stats{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;}
  .why-stat{display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:#fff; border-radius:999px; padding:9px 16px; font-size:14px; font-weight:500;}
  .why-stat .icon{color:var(--accent);}
  .why-image{display:none; width:calc(100% + 80px); max-width:560px; height:auto; margin:40px 0 0 -40px; filter:drop-shadow(0 24px 48px rgba(0,0,0,.18));}
  @media(min-width:640px){.why-image{display:block;}}
  .why-left .btn{margin-top:40px;}
  .why-list{display:flex; flex-direction:column; gap:16px; margin-top:20px;}
  .why-item{display:flex; align-items:flex-start; gap:16px; border-radius:16px; border:1px solid var(--border); background:#fff; padding:20px; transition:border-color .3s;}
  .why-item:hover{border-color:rgba(0,0,0,.25);}
  .why-item.highlight{border-color:rgba(255,205,0,.5); background:linear-gradient(90deg, rgba(255,205,0,.14), rgba(200,16,46,.05) 60%, #fff);}
  .why-item .check{display:flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; border-radius:999px; background:rgba(0,0,0,.08); color:var(--dark);}
  .why-item.highlight .check{background:var(--primary); color:var(--dark);}
  .why-item .check .icon{width:16px; height:16px;}
  .why-item h3{font-size:16px;}
  .why-item p{font-size:14px; color:var(--muted); margin:4px 0 0; line-height:1.6;}

  /* ---------- devices ---------- */
  .devices-streaming-img{display:block; width:100%; max-width:720px; height:auto; margin:40px auto 0;}
  .center{display:flex; justify-content:center; margin-top:48px;}

  /* ---------- how it works ---------- */
  .how-head{max-width:640px; margin:0 auto; text-align:center;}
  .how-head h2{margin:16px auto 0;}
  .how-head p.lead{max-width:520px; margin:16px auto 0;}
  .steps-grid{position:relative; display:grid; grid-template-columns:1fr; gap:48px; max-width:760px; margin:64px auto 0;}
  @media(min-width:768px){.steps-grid{grid-template-columns:repeat(3,1fr); gap:24px;}}
  .steps-grid::before{content:""; position:absolute; top:32px; left:16.6667%; right:16.6667%; border-top:1px dashed var(--border); display:none;}
  @media(min-width:768px){.steps-grid::before{display:block;}}
  .step-card{position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;}
  .step-icon{position:relative; display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:999px; background:var(--dark); box-shadow:0 15px 30px -12px rgba(0,0,0,.35);}
  .step-icon .icon{width:28px; height:28px; color:var(--primary);}
  .step-num{position:absolute; top:-12px; right:-8px; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; border:1px solid var(--border); background:#fff; font-size:12px; font-weight:700; color:var(--accent);}
  .step-card h3{font-size:18px;}
  .step-card p{font-size:14px; color:var(--muted); margin:0; line-height:1.6; max-width:260px;}
  .how-cta{margin-top:56px;}
  /* ---------- shared CTA rows + WhatsApp button ---------- */
  .cta-row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; margin-top:40px;}
  .cta-row.left{justify-content:flex-start; margin-top:28px;}
  .icon.icon-fill{fill:currentColor; stroke:none;}
  .btn-wa{background:#25D366; color:#000; font-weight:700; box-shadow:0 8px 24px -10px rgba(37,211,102,.75);}
  .btn-wa:hover{background:#1EBE5A; transform:translateY(-2px);}
  .order-note{text-align:center; font-size:14px; font-weight:600; color:var(--fg); margin:28px 0 0;}
  .order-note + .cta-row{margin-top:16px;}
  .btn{text-align:center;}
  .hero-ctas .btn{text-wrap:balance;}
  .cta-sub{text-align:center; font-size:13px; font-weight:600; line-height:1.5; color:var(--fg); margin:14px 0 0;}
  .perks .cta-sub, .final-cta .cta-sub{color:#fff; font-size:13px; margin:14px 0 0;}

  /* ---------- feature split ---------- */
  .split-grid{display:grid; grid-template-columns:1fr; gap:56px; align-items:center;}
  @media(min-width:1024px){.split-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:1023px){.feature-split{overflow:hidden;}}
  .split-visual{width:100%; max-width:540px; position:relative; margin:0 auto;}
  .split-visual::before{content:"";position:absolute; top:-32px; left:-32px; width:160px; height:160px; border-radius:999px; background:rgba(255,205,0,.22); filter:blur(50px);}
  .split-visual::after{content:"";position:absolute; bottom:-40px; right:-40px; width:130px; height:130px; border-radius:999px; background:rgba(200,16,46,.14); filter:blur(50px);}
  .split-visual img{position:relative; width:100%; height:auto; border-radius:32px; border:1px solid var(--border); box-shadow:0 24px 48px -20px rgba(0,0,0,.2);}
  .split-text h2{font-size:30px;}
  @media(min-width:640px){.split-text h2{font-size:36px;}}
  .split-subhead{margin:12px 0 0; font-size:18px; font-weight:600; color:var(--accent);}
  .split-body{margin:20px 0 0; max-width:560px; font-size:16px; line-height:1.7; color:var(--muted);}
  @media(min-width:640px){.split-body{font-size:18px;}}

  /* ---------- installation ---------- */
  .install-grid{display:grid; grid-template-columns:1fr; gap:24px;}
  @media(min-width:640px){.install-grid{grid-template-columns:1fr 1fr;}}
  @media(min-width:1024px){.install-grid{grid-template-columns:repeat(4,1fr);}}
  .install-card{border-radius:16px; border:1px solid var(--border); background:#fff; padding:28px;}
  .install-card h3{font-size:16px; margin-top:20px;}
  .install-card ol{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
  .install-card ol li{display:flex; gap:10px; font-size:14px; color:var(--muted); line-height:1.6;}
  .install-card ol li b{color:var(--accent); flex:none;}

  /* ---------- legal notice ---------- */
  .legal-box{max-width:720px; margin:0 auto; display:flex; gap:16px; align-items:flex-start; border-radius:16px; border:1px solid var(--border); background:#fff; padding:28px;}
  .legal-box .icon{color:var(--accent); flex:none; margin-top:2px; width:20px; height:20px;}
  .legal-box p{font-size:14px; color:var(--muted); margin:0; line-height:1.7;}

  /* ---------- faq ---------- */
  .faq-wrap{max-width:720px; margin:48px auto 0; border-radius:16px; border:1px solid var(--border); background:#fff; overflow:hidden;}
  .faq-item{border-bottom:1px solid var(--border);}
  .faq-item:last-child{border-bottom:none;}
  .faq-item button{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:none; border:none; text-align:left; padding:20px 24px; cursor:pointer; color:var(--fg); font-size:16px; font-weight:500; font-family:inherit;}
  .faq-item .icon{color:var(--muted); transition:transform .3s; flex:none;}
  .faq-item.open .icon{transform:rotate(180deg); color:var(--accent);}
  .faq-panel{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .3s ease, opacity .3s ease;}
  .faq-item.open .faq-panel{grid-template-rows:1fr; opacity:1;}
  .faq-panel > div{overflow:hidden;}
  .faq-panel p{margin:0; padding:0 24px 20px; font-size:15px; color:var(--muted); line-height:1.7;}

  /* ---------- final cta ---------- */
  .final-cta{position:relative; overflow:hidden; text-align:center;}
  .final-cta::before{content:"";position:absolute; inset:0; background:linear-gradient(to bottom, var(--dark2), var(--dark), var(--dark)); pointer-events:none;}
  .final-cta::after{content:"";position:absolute; left:50%; top:0; width:720px; height:420px; transform:translateX(-50%); border-radius:999px; background:rgba(255,205,0,.22); filter:blur(120px); pointer-events:none;}
  .final-cta .pink-glow{position:absolute; left:62%; top:40px; width:420px; height:260px; transform:translateX(-50%); border-radius:999px; background:rgba(200,16,46,.12); filter:blur(110px); pointer-events:none;}
  .final-cta .container{position:relative; z-index:1; max-width:640px;}
  .final-cta h2{font-size:32px; color:#fff;}
  @media(min-width:640px){.final-cta h2{font-size:38px;}}
  .final-cta p{font-size:18px; color:#fff; margin:16px 0 32px;}
  .final-cta .hero-ctas{justify-content:center;}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--border); background:var(--dark); color:#fff;}
  footer .logo{color:#fff;}
  .footer-grid{display:grid; grid-template-columns:1fr; gap:48px; padding-top:64px; padding-bottom:64px;}
  @media(min-width:640px){.footer-grid{grid-template-columns:1fr 1fr;}}
  @media(min-width:1024px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;}}
  .footer-grid p{font-size:14px; color:#fff; max-width:280px;}
  .footer-grid h3{font-size:14px; color:#fff;}
  .footer-links{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
  .footer-links a, .footer-links span{font-size:14px; color:#fff; text-decoration:none;}
  .footer-links a:hover{color:#fff;}
  .footer-mail{display:block; margin-top:12px; font-size:14px; font-weight:500; color:var(--primary); text-decoration:none;}
  .footer-mail:hover{color:#fff;}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.12);}
  .footer-bottom .container{display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:space-between; padding:24px; font-size:12px; color:#fff; text-align:center;}
  @media(min-width:640px){.footer-bottom .container{flex-direction:row; text-align:left;}}
  .footer-bottom p:last-child{max-width:480px;}
  @media(min-width:640px){.footer-bottom p:last-child{text-align:right;}}

  /* ---------- mobile sticky cta ---------- */
  /* fixed + backdrop-filter, always on-screen on mobile: same Safari scroll-jank
     risk as header.site-header.scrolled above. transform:translateZ(0) forces
     its own compositor layer. This is the second of two backdrop-filter layers
     live at once during mobile scroll -- don't add a third without testing on
     a real iPhone. */
  .mobile-sticky{position:fixed; left:0; right:0; bottom:0; z-index:40; border-top:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.97); backdrop-filter:blur(10px); padding:12px 16px calc(env(safe-area-inset-bottom) + 12px); transform:translateZ(0);}
  .mobile-sticky{display:flex; align-items:center; gap:14px;}
  .mobile-sticky .btn{flex:1; min-width:0; text-align:center;}
  .ms-offer{flex:none; color:#fff; line-height:1.15;}
  .ms-offer strong{display:block; font-family:"Sora","Inter",sans-serif; font-size:20px; letter-spacing:-0.02em;}
  .ms-offer strong span{font-size:12px; font-weight:500; letter-spacing:0;}
  .ms-offer small{display:block; margin-top:2px; font-size:11px; font-weight:700; color:var(--primary);}
  body{padding-bottom:76px;}
  @media(min-width:1024px){.mobile-sticky{display:none;} body{padding-bottom:0;}}

  /* ---------- whatsapp float ---------- */
  .whatsapp-float{position:fixed; right:16px; bottom:92px; z-index:45; width:56px; height:56px; border-radius:999px; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -8px rgba(0,0,0,.35); transition:transform .2s ease;}
  .whatsapp-float:hover{transform:scale(1.08);}
  .whatsapp-float svg{width:28px; height:28px; fill:#fff;}
  @media(min-width:1024px){.whatsapp-float{bottom:24px; right:24px;}}

  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  .skip-link{position:absolute; left:16px; top:-60px; z-index:60; background:var(--dark); color:#fff; padding:10px 16px; border-radius:8px; text-decoration:none; transition:top .2s;}
  .skip-link:focus{top:16px;}

  /* ---------- germany strip (premium) ---------- */
  .de-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center;}
  @media(min-width:1024px){.de-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:64px;}}
  .de-copy h2{font-size:32px; line-height:1.15;}
  @media(min-width:640px){.de-copy h2{font-size:40px;}}
  .de-lead{font-size:18px; line-height:1.65; margin:20px 0 0; color:var(--fg);}
  .de-text{font-size:16px; line-height:1.7; margin:14px 0 0;}
  .de-text a, .wiki a, .faq-panel p a{color:var(--accent); font-weight:600;}
  .de-usps{list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:14px;}
  @media(min-width:640px){.de-usps{grid-template-columns:repeat(2,minmax(0,1fr));}}
  .de-usps li{display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--border); border-radius:16px; background:#fff; transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;}
  .de-usps li:hover{border-color:rgba(255,205,0,.7); transform:translateY(-2px); box-shadow:0 16px 32px -20px rgba(0,0,0,.25);}
  .de-usp-icon{flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:rgba(255,205,0,.16); border:1px solid rgba(255,205,0,.45); color:var(--dark);}
  .de-usp-icon .icon{width:20px; height:20px;}
  .de-usps h3{font-size:16px;}
  .de-usps p{font-size:14px; line-height:1.55; margin:4px 0 0; color:var(--muted);}
  .de-panel{position:relative; overflow:hidden; isolation:isolate; border-radius:28px; padding:36px 28px; color:#fff; background:linear-gradient(160deg,#161616,#000 62%); box-shadow:0 40px 80px -30px rgba(0,0,0,.45);}
  @media(min-width:640px){.de-panel{padding:44px 40px;}}
  .de-panel::before{content:""; position:absolute; right:-90px; top:-110px; width:300px; height:300px; border-radius:999px; background:rgba(255,205,0,.24); filter:blur(80px); z-index:-1;}
  .de-panel::after{content:""; position:absolute; left:-70px; bottom:-130px; width:280px; height:280px; border-radius:999px; background:rgba(200,16,46,.28); filter:blur(90px); z-index:-1;}
  .de-kicker{display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--primary);}
  .de-flag{display:inline-flex; flex-direction:column; width:22px; height:15px; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.3);}
  .de-flag i{flex:1;} .de-flag i:nth-child(1){background:#000;} .de-flag i:nth-child(2){background:var(--accent);} .de-flag i:nth-child(3){background:var(--primary);}
  .de-quote{font-family:"Sora","Inter",sans-serif; font-size:24px; line-height:1.3; font-weight:700; letter-spacing:-.01em; margin:18px 0 0; color:#fff;}
  @media(min-width:640px){.de-quote{font-size:28px;}}
  .de-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:28px 0 0;}
  .de-stats div{display:flex; flex-direction:column-reverse; padding:16px; border-radius:16px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));}
  .de-stats dd{margin:0; font-family:"Sora","Inter",sans-serif; font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:#fff;}
  @media(min-width:640px){.de-stats dd{font-size:28px;}}
  .de-stats dt{margin-top:4px; font-size:13px; color:rgba(255,255,255,.82);}
  .de-panel .btn{width:100%; margin-top:28px;}
  .de-panel-note{margin:12px 0 0; text-align:center; font-size:13px; color:rgba(255,255,255,.82);}
  .de-panel-link{display:flex; justify-content:center; align-items:center; gap:6px; margin-top:14px; font-size:14px; font-weight:600; color:#fff; text-decoration:none;}
  .de-panel-link:hover{color:var(--primary);}

  /* ---------- what is iptv (premium) ---------- */
  .wiki .compare{margin-top:48px;}
  .wiki-head{display:grid; grid-template-columns:minmax(0,1fr); gap:28px; align-items:end;}
  @media(min-width:1024px){.wiki-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px;}}
  .wiki-head h2{font-size:32px; line-height:1.15;}
  @media(min-width:640px){.wiki-head h2{font-size:40px;}}
  .wiki-head > div > p{font-size:17px; margin:16px 0 0;}
  .wiki-def{position:relative; margin:0; border-radius:20px; padding:24px 24px 24px 30px; background:#fff; border:1px solid rgba(255,205,0,.6); box-shadow:0 20px 40px -28px rgba(0,0,0,.3);}
  .wiki-def::before{content:""; position:absolute; left:0; top:20px; bottom:20px; width:4px; border-radius:0 4px 4px 0; background:linear-gradient(var(--primary),var(--accent));}
  .wiki-def-label{display:block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);}
  .wiki-def p{margin:8px 0 0; font-size:16px; line-height:1.7;}
  .wiki-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin-top:48px;}
  @media(min-width:640px){.wiki-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media(min-width:1024px){.wiki-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
  .wiki-card{position:relative; display:flex; flex-direction:column; padding:28px 24px; border-radius:20px; border:1px solid var(--border); background:#fff; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;}
  .wiki-card:hover{transform:translateY(-4px); border-color:rgba(0,0,0,.25); box-shadow:0 24px 40px -28px rgba(0,0,0,.3);}
  .wiki-num{position:absolute; top:22px; right:22px; font-family:"Sora","Inter",sans-serif; font-size:13px; font-weight:800; letter-spacing:.06em; color:rgba(0,0,0,.28);}
  .wiki-icon, .install-icon{display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background:var(--dark); color:var(--primary); box-shadow:0 12px 24px -12px rgba(0,0,0,.45);}
  .wiki-icon .icon, .install-icon .icon{width:22px; height:22px;}
  .wiki-card h3{font-size:17px; margin-top:20px;}
  .wiki-card p{font-size:14.5px; line-height:1.65; color:var(--muted); margin:10px 0 0;}
  .wiki-chips{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0;}
  .wiki-chips li{font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:rgba(255,205,0,.16); border:1px solid rgba(255,205,0,.45);}
  .compare{margin-top:56px; border-radius:24px; border:1px solid var(--border); background:#fff; overflow:hidden; box-shadow:0 24px 48px -32px rgba(0,0,0,.3);}
  .compare-head{padding:28px 24px 0;}
  @media(min-width:640px){.compare-head{padding:32px 32px 0;}}
  .compare-head h3{font-size:22px;}
  .compare-head p{font-size:15px; color:var(--muted); margin:8px 0 0;}
  .compare table{width:100%; border-collapse:collapse; margin-top:24px; font-size:15px; line-height:1.55;}
  .compare th, .compare td{padding:14px 24px; text-align:left; vertical-align:top; border-top:1px solid var(--border);}
  @media(min-width:640px){.compare th, .compare td{padding:16px 32px;}}
  .compare thead th{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); background:rgba(0,0,0,.025);}
  .compare thead th.is-iptv{color:var(--dark); background:rgba(255,205,0,.22);}
  .compare tbody th{font-weight:700; width:24%;}
  .compare td.is-iptv{background:rgba(255,205,0,.08); font-weight:600;}
  .compare td.is-iptv .icon{width:16px; height:16px; margin-right:8px; color:var(--accent); vertical-align:-3px;}
  .compare-foot{margin:0; padding:18px 24px 24px; font-size:14px; border-top:1px solid var(--border); color:var(--muted);}
  @media(min-width:640px){.compare-foot{padding:20px 32px 28px;}}
  @media(max-width:639px){
    .compare thead{display:none;}
    .compare tbody tr{display:block; padding:16px 24px; border-top:1px solid var(--border);}
    .compare tbody th, .compare td{display:block; width:auto; padding:4px 0; border:none;}
    .compare tbody th{font-size:16px; margin-bottom:4px;}
    .compare td::before{content:attr(data-label); display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
    .compare td.is-iptv{margin-top:6px; padding:8px 12px; border-radius:10px;}
  }

  /* ---------- installation (premium) ---------- */
  .install-card{position:relative; overflow:hidden; display:flex; flex-direction:column; border-radius:20px; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;}
  .install-card::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--primary),var(--accent)); opacity:0; transition:opacity .25s ease;}
  .install-card:hover{transform:translateY(-4px); border-color:rgba(0,0,0,.22); box-shadow:0 24px 40px -28px rgba(0,0,0,.3);}
  .install-card:hover::before{opacity:1;}
  .install-top{display:flex; align-items:center; justify-content:space-between; gap:12px;}
  .install-time{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.05);}
  .install-time .icon{width:14px; height:14px; color:var(--accent);}
  .install-card h3{font-size:17px; margin-top:20px;}
  .install-sub{font-size:13px; color:var(--muted); margin:4px 0 0;}
  .install-card ol.install-steps{gap:14px; margin-top:20px;}
  .install-steps li{position:relative; gap:12px;}
  .install-steps .dot{flex:none; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; background:var(--primary); color:var(--dark); font-size:12px; font-weight:800; line-height:1;}
  .install-steps li:not(:last-child)::after{content:""; position:absolute; left:11.5px; top:26px; bottom:-14px; width:1px; background:rgba(0,0,0,.15);}
  .help-strip{position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; align-items:flex-start; gap:20px; margin-top:40px; padding:28px; border-radius:24px; color:#fff; background:linear-gradient(135deg,#161616,#000 65%);}
  @media(min-width:900px){.help-strip{flex-direction:row; align-items:center; justify-content:space-between; padding:28px 36px;}}
  .help-strip::before{content:""; position:absolute; right:10%; top:-120px; width:320px; height:240px; border-radius:999px; background:rgba(255,205,0,.2); filter:blur(80px); z-index:-1;}
  .help-strip-text{display:flex; gap:16px; align-items:flex-start;}
  .help-strip-text .wiki-icon{background:rgba(255,205,0,.14); border:1px solid rgba(255,205,0,.35); box-shadow:none; flex:none;}
  .help-strip h3{font-size:20px; color:#fff;}
  .help-strip p{color:rgba(255,255,255,.85); font-size:15px; margin:6px 0 0; max-width:520px;}
  .help-actions{display:flex; flex-wrap:wrap; gap:12px;}
  .help-strip .btn-secondary{background:transparent; border-color:rgba(255,255,255,.7); color:#fff;}
  .help-strip .btn-secondary:hover{background:rgba(255,255,255,.14);}
  .legal-box p strong{color:var(--fg);}

  /* ---------- faq (premium) ---------- */
  .faq-layout{display:grid; grid-template-columns:minmax(0,1fr); gap:40px;}
  @media(min-width:1024px){.faq-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:start;}}
  @media(min-width:1024px){.faq-intro{position:sticky; top:112px;}}
  .faq-intro h2{font-size:32px; line-height:1.15;}
  @media(min-width:640px){.faq-intro h2{font-size:40px;}}
  .faq-intro > p{font-size:17px; margin:16px 0 0;}
  .faq-help{position:relative; overflow:hidden; isolation:isolate; margin-top:28px; padding:28px 24px; border-radius:20px; color:#fff; background:linear-gradient(150deg,#161616,#000 65%);}
  .faq-help::before{content:""; position:absolute; right:-60px; top:-80px; width:220px; height:200px; border-radius:999px; background:rgba(255,205,0,.22); filter:blur(70px); z-index:-1;}
  .faq-help .wiki-icon{background:rgba(255,205,0,.14); border:1px solid rgba(255,205,0,.35); box-shadow:none;}
  .faq-help h3{font-size:18px; color:#fff; margin-top:16px;}
  .faq-help p{color:rgba(255,255,255,.85); font-size:14.5px; line-height:1.6; margin:6px 0 20px;}
  .faq-help .btn{width:100%;}
  .faq-help-link{display:flex; justify-content:center; align-items:center; gap:6px; margin-top:14px; color:#fff; font-size:14px; font-weight:600; text-decoration:none;}
  .faq-help-link:hover{color:var(--primary);}
  .faq-layout .faq-wrap{max-width:none; margin:0; border:none; border-radius:0; background:transparent; overflow:visible; display:flex; flex-direction:column; gap:12px;}
  .faq-layout .faq-item, .faq-layout .faq-item:last-child{border:1px solid var(--border); border-radius:16px; background:#fff; transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;}
  .faq-layout .faq-item:hover{border-color:rgba(0,0,0,.25);}
  .faq-layout .faq-item.open{border-color:rgba(255,205,0,.75); box-shadow:0 18px 36px -24px rgba(0,0,0,.25); background:linear-gradient(180deg,rgba(255,205,0,.09),#fff 70%);}
  .faq-layout .faq-item button{padding:18px 20px; font-weight:600;}
  .faq-layout .faq-item button .icon{width:28px; height:28px; padding:6px; border-radius:999px; background:rgba(0,0,0,.05); color:var(--dark);}
  .faq-layout .faq-item.open button .icon{background:var(--primary); color:var(--dark);}
  .faq-layout .faq-panel p{padding:0 20px 20px;}
  .faq-cta{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:28px;}
  .faq-cta span{font-size:13px; font-weight:600; color:var(--fg);}

  /* ---------- final cta (premium) ---------- */
  .final-cta .container{max-width:880px;}
  .final-cta h2, .final-cta > .container > p{max-width:640px; margin-left:auto; margin-right:auto;}
  .final-pill{display:inline-flex; align-items:center; gap:8px; padding:8px 16px; margin-bottom:20px; border-radius:999px; border:1px solid rgba(255,205,0,.4); background:rgba(255,205,0,.1); color:var(--primary); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;}
  .final-pill .icon{width:14px; height:14px;}
  .final-link{display:inline-block; margin-top:18px; color:#fff; font-size:14px; font-weight:600; text-underline-offset:4px;}
  .final-link:hover{color:var(--primary);}
  .final-trust{list-style:none; padding:0; margin:40px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
  @media(min-width:768px){.final-trust{grid-template-columns:repeat(4,minmax(0,1fr));}}
  .final-trust li{display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); color:#fff; font-size:13px; font-weight:600; line-height:1.35; text-align:center;}
  .final-trust .icon{width:22px; height:22px; color:var(--primary);}

/* ---------- footer (premium) ---------- */
.footer-top{display:grid; grid-template-columns:minmax(0,1fr); gap:40px; padding-top:64px; padding-bottom:48px;}
@media(min-width:640px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1024px){.footer-top{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:48px;}}
.footer-brand p{font-size:14px; line-height:1.7; color:rgba(255,255,255,.85); max-width:360px; margin:16px 0 0;}
.footer-wa{display:inline-flex; align-items:center; gap:10px; margin-top:20px; padding:10px 18px; border-radius:999px; background:#25D366; color:#000; font-size:14px; font-weight:700; text-decoration:none; transition:transform .2s ease, background .2s ease;}
.footer-wa:hover{background:#1EBE5A; transform:translateY(-2px);}
.footer-wa svg{width:18px; height:18px; fill:currentColor; flex:none;}
.footer-trust{list-style:none; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:8px;}
.footer-trust li{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16); font-size:12px; font-weight:600; color:#fff;}
.footer-trust .icon{width:14px; height:14px; color:var(--primary);}
.footer-title{margin:0; font-family:"Sora","Inter",sans-serif; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--primary);}
.footer-top .footer-links a{color:rgba(255,255,255,.88); transition:color .2s ease;}
.footer-top .footer-links a:hover{color:var(--primary);}
/* ---------- footer: legal & support badges, legal line ---------- */
.footer-badges{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
.footer-badges li{display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(255,255,255,.88);}
.footer-badges .icon{width:18px; height:18px; flex:none;}
.footer-badges .badge-green{color:#4ADE80;}
.footer-badges .badge-yellow{color:var(--primary);}
.footer-legal{display:flex; flex-direction:column; gap:8px;}
.footer-bottom .footer-legal p{max-width:none; text-align:inherit; margin:0;}
.footer-legal-links{display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:center;}
@media(min-width:640px){.footer-legal-links{justify-content:flex-start;}}
.footer-legal-links a{color:rgba(255,255,255,.75); text-decoration:none; transition:color .2s ease;}
.footer-legal-links a:hover{color:var(--primary);}

/* WordPress menus render <li> items inside the nav containers */
nav.nav-links li, .mobile-menu nav li{list-style:none; display:contents;}
.footer-links li.menu-item{list-style:none;}