.hero {
  padding: 86px 0 48px;
  border-bottom: 1px solid rgba(49, 212, 255, .16);
  background:
    linear-gradient(110deg, rgba(3, 8, 20, .98), rgba(3, 13, 34, .82)),
    url("../../../assets/img/iptvbar-content.webp") center/cover no-repeat;
}

.hero .wrap { max-width: 1060px; }
.hero .breadcrumb { display:flex; gap:8px; margin-bottom:26px; color:rgba(220,238,245,.68); font-size:14px; }
.hero .breadcrumb a { color:#75dfff; text-decoration:none; }
.hero .eyebrow { color:#31d4ff; font-weight:800; letter-spacing:.15em; font-size:13px; margin-bottom:14px; }
.hero h1 { max-width:900px; font-size:clamp(36px,5vw,64px); line-height:1.05; margin:0 0 22px; }
.hero .lead { max-width:850px; color:rgba(238,246,250,.82); font-size:19px; line-height:1.7; }

main > .section { padding:54px 0; border-bottom:1px solid rgba(49,212,255,.1); }
main > .section:nth-child(odd) { background:rgba(4,12,28,.45); }
main > .section .wrap { max-width:980px; }
main > .section h2 { color:#eafaff; font-size:clamp(26px,3vw,38px); margin:0 0 22px; }
main > .section p, main > .section li { color:rgba(235,242,247,.82); font-size:17px; line-height:1.78; }
main > .section a { color:#61dcff; }
main > .section code { color:#b6f1ff; background:#071a31; border:1px solid rgba(49,212,255,.2); padding:.15em .35em; border-radius:5px; }
main > .section ul, main > .section ol { padding-left:24px; }

.callout { margin:28px 0; padding:20px 22px; border:1px solid rgba(49,212,255,.3); border-left:4px solid #31d4ff; border-radius:12px; background:rgba(7,25,50,.7); color:rgba(238,248,252,.9); line-height:1.7; }
.ctaRow { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

@media (max-width:700px) {
  .hero { padding:56px 0 36px; }
  .hero h1 { font-size:38px; }
  .hero .lead { font-size:17px; }
  main > .section { padding:38px 0; }
  main > .section p, main > .section li { font-size:16px; }
}