:root{
--bg:#ffffff;
--text:#0f172a;
--black:#0f172a;
--muted:#475569;
--text-muted:#475569;
--line:#e5e7eb;
--soft:#f8fafc;
--blue:#1d4ed8;
--blue2:#2563eb;
--gold:#b8860b;
--accent-glow: rgba(37, 99, 235, .35);
--accent-primary:#2563eb;
--accent-gold:#b8860b;
--border-color:#e5e7eb;
--shadow: 0 10px 30px rgba(15, 23, 42, .08);
--radius: 16px;
--wrap: 1120px;
}
html {
scroll-behavior: smooth;
}
body {
animation: bodyFade 0.8s ease-in;
}
@keyframes bodyFade {
from { opacity: 0; }
to { opacity: 1; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.nbn{
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
background:var(--bg);
color:var(--text);
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 16px;}
.topbar{
position:sticky; top:0; z-index:50;
background:#fff; border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; min-width:240px;}
.brand__logo{width:38px; height:38px; object-fit:contain;}
.brand__name{font-weight:900; letter-spacing:.2px;}
.brand__tag{font-size:12px; color:var(--muted); margin-top:2px;}
.nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.nav__link{
text-decoration:none; color:var(--text);
padding:10px 10px; border-radius:12px;
font-weight:800; font-size:14px;
}
.nav__link:hover{background:var(--soft)}
.btn{
display:inline-flex; align-items:center; justify-content:center;
padding:10px 14px; border-radius:12px;
text-decoration:none; font-weight:900; font-size:14px;
border:1px solid transparent;
}
.btn--primary{background:var(--blue); color:#fff;}
.btn--primary:hover {
transform: translateY(-2px) scale(1.04);
box-shadow:
0 0 0 1px rgba(255,255,255,.15),
0 12px 30px -6px var(--accent-glow);
}
.btn--soft{background:var(--soft); border-color:var(--line); color:var(--text);}
.btn--soft:hover{background:#eef2ff}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--text);}
.btn--ghost:hover{background:var(--soft)}
.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;
}
.themeToggle{
width:40px;
height:40px;
border-radius:999px;
border:1px solid var(--line);
background:var(--soft);
color:var(--text);
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
padding:0;
transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.themeToggle:hover{
background:#eef2ff;
transform:translateY(-1px);
}
.themeToggle:focus-visible{
outline:2px solid var(--blue);
outline-offset:2px;
}
.themeToggle__icon{font-size:15px; line-height:1;}
.hero{
position:relative;
padding:24px 0 10px;
overflow:hidden;
}
.heroCard{
border:1px solid var(--line);
border-radius:18px;
background:#fff;
box-shadow:0 12px 30px rgba(15,23,42,.06);
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(59,130,246,.15), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(251,191,36,.12), transparent 45%);
pointer-events: none;
}
.heroCard__inner{
display:grid;
grid-template-columns: 1.25fr .75fr;
gap:18px;
padding:22px;
}
.badgeLine{display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:900; font-size:13px;}
.badgeDot{width:10px; height:10px; border-radius:999px; background:var(--gold);}
.heroTitle{font-size:42px; line-height:1.08; margin:12px 0 10px;}
.heroTitle em{font-style:normal; color:var(--gold)}
.heroLead{font-size:16px; color:var(--muted); margin:0 0 16px; max-width:62ch;}
.heroActions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.heroNotes{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.note{border:1px solid var(--line); border-radius:14px; padding:12px; background:#fff;}
.note__k{font-weight:1000; margin-bottom:6px;}
.note__v{color:var(--muted); font-weight:700; font-size:13px;}
.heroRight{border-left:1px solid var(--line); padding-left:18px;}
.pill{
display:inline-flex; padding:8px 12px; border-radius:999px;
font-weight:1000; border:1px solid #f1e2b0; background:#fffdf4; color:#6b4e00;
}
.heroStats{display:grid; gap:10px; margin-top:12px;}
.stat{border:1px solid var(--line); border-radius:14px; padding:12px; background:#fff;}
.stat__k{font-weight:1000; margin-bottom:6px;}
.stat__v{color:var(--muted); font-weight:700; font-size:13px;}
.section{padding:22px 0;}
.sectionHead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:12px;}
.h2{margin:0; font-size:24px;}
.p{margin:6px 0 0; color:var(--muted); font-weight:700;}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.card{border:1px solid var(--line); border-radius:16px; padding:14px; background:#fff; box-shadow:0 6px 18px rgba(15,23,42,.04);}
.card__t{font-weight:1000; margin-bottom:8px;}
.card__p{color:var(--muted); font-weight:700; font-size:13px; margin-bottom:10px;}
.link{color:var(--blue); font-weight:1000; text-decoration:none;}
.link:hover{text-decoration:underline;}
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.quote{border:1px solid var(--line); border-radius:16px; padding:14px; background:#fff;}
.quote span{display:block; margin-top:10px; color:var(--muted); font-weight:900;}
.faq{display:grid; gap:10px;}
.faq details{border:1px solid var(--line); border-radius:16px; padding:12px 14px; background:#fff;}
.faq summary{font-weight:1000; cursor:pointer;}
.faq__a{margin-top:10px; color:var(--muted); font-weight:700; font-size:13px;}
.callout{
margin-top:14px; border:1px solid var(--line);
background:var(--soft); border-radius:16px;
padding:14px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.calloutTitle{font-weight:1000;}
.calloutDesc{color:var(--muted); font-weight:700; font-size:13px; margin-top:4px;}
.contentCard{
border:1px solid var(--line);
border-radius:16px;
padding:16px;
background:#fff;
box-shadow:0 6px 18px rgba(15,23,42,.04);
}
.wysiwyg{color:var(--text);}
.wysiwyg p{color:var(--black); font-weight:700; line-height:1.7;}
.wysiwyg a{color:var(--blue); font-weight:1000;}
.footer{border-top:1px solid var(--line); background:#fff; padding:18px 0; margin-top:18px;}
.footerGrid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
.footerLinks{display:flex; flex-direction:column; gap:8px;}
.footerLinks a{color:var(--text); text-decoration:none; font-weight:900; font-size:13px;}
.footerLinks a:hover{text-decoration:underline;}
.footerBottom{display:flex; gap:10px; align-items:center; justify-content:center; color:var(--muted); font-weight:800; font-size:12px; padding-top:10px;}
.dot{opacity:.5}
@media (max-width: 980px){
.heroCard__inner{grid-template-columns:1fr;}
.heroRight{border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:14px;}
.cards{grid-template-columns:1fr;}
.quotes{grid-template-columns:1fr;}
.footerGrid{grid-template-columns:1fr;}
}
@media (max-width: 900px){
.nav{display:none}
} @media (hover: none) and (pointer: coarse){
body.nbn .nav{
display:none !important;
}
body.nbn .mobile-menu-btn{
display:inline-flex !important;
}
body.nbn .mobileDock{
display:grid !important;
}
body.nbn .brand{
min-width:0;
max-width:calc(100% - 58px);
}
body.nbn .brand__tag{
display:none;
}
body.nbn{
padding-bottom:calc(92px + env(safe-area-inset-bottom));
}
}
html.nbn-handset body.nbn .nav{
display:none !important;
}
html.nbn-handset body.nbn .mobile-menu-btn{
display:inline-flex !important;
}
html.nbn-handset body.nbn .mobileDock{
display:grid !important;
}
html.nbn-handset body.nbn .brand{
min-width:0;
max-width:calc(100% - 58px);
}
html.nbn-handset body.nbn .brand__tag{
display:none;
}
html.nbn-handset body.nbn{
padding-bottom:calc(92px + env(safe-area-inset-bottom));
}
@media (max-width: 760px){
.heroTitle{font-size:34px}
.heroNotes{grid-template-columns:1fr}
} .gridControls{
display:flex; gap:10px; flex-wrap:wrap;
align-items:center; justify-content:space-between;
margin-bottom:10px;
}
.gridInput{
flex:1 1 260px;
padding:12px 12px;
border-radius:12px;
border:1px solid var(--line);
font-weight:800;
}
.gridSelect{
flex:0 1 220px;
padding:12px 12px;
border-radius:12px;
border:1px solid var(--line);
font-weight:900;
background:#3b82f6;
}
.gridMeta{
display:flex; align-items:center; justify-content:space-between;
gap:10px; margin:8px 0 14px;
}
.gridCount{font-weight:1000;}
.gridHint{color:var(--black); font-weight:700; font-size:12px;}
.gridEmpty{margin-top:12px; color:var(--black); font-weight:900;}
.gridError{padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--soft); font-weight:900;}
.channelsGrid{
display:grid;
grid-template-columns: repeat(6, 1fr);
gap:10px;
}
.chCard{
border:1px solid var(--line);
border-radius:14px;
background:#fff;
padding:10px;
text-align:center;
}
.chLogo{
width:100%;
height:44px;
object-fit:contain;
margin-bottom:8px;
}
.chName{font-weight:1000; font-size:13px;}
.chCat{margin-top:4px; color:var(--black); font-weight:800; font-size:12px;}
@media (max-width: 1100px){ .channelsGrid{grid-template-columns: repeat(5, 1fr);} }
@media (max-width: 980px){  .channelsGrid{grid-template-columns: repeat(4, 1fr);} }
@media (max-width: 760px){  .channelsGrid{grid-template-columns: repeat(2, 1fr);} }
.gridCheck{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 12px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
font-weight:900;
user-select:none;
}
.gridCheck input{width:16px;height:16px;}
.gridBottom{
display:flex;
justify-content:center;
margin-top:14px;
}
.chMeta{
display:flex;
flex-wrap:wrap;
gap:6px;
justify-content:center;
margin-top:8px;
}
.chCat, .chQual, .chReplay{
display:inline-flex;
align-items:center;
padding:4px 8px;
border-radius:999px;
border:1px solid var(--line);
background:var(--soft);
font-weight:900;
font-size:11px;
color:var(--text);
}
.chReplay{
border-color:#f1e2b0;
background:#fffdf4;
color:#6b4e00;
} .legalLayout{
display:grid;
grid-template-columns: 280px 1fr;
gap:14px;
align-items:start;
}
.legalAside{
position:sticky;
top:86px;
border:1px solid var(--line);
border-radius:16px;
background:#fff;
padding:14px;
height: fit-content;
}
.legalAside__title{font-weight:1000; margin-bottom:10px;}
.legalToc__hint{color:var(--muted); font-weight:800; font-size:12px;}
.legalToc__list{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.legalToc__item{
text-decoration:none;
font-weight:900;
color:var(--text);
padding:8px 10px;
border-radius:12px;
border:1px solid var(--line);
background:var(--soft);
}
.legalToc__item.is-h3{margin-left:10px; font-weight:800; font-size:13px;}
.legalToc__item.is-active{border-color:#f1e2b0; background:#fffdf4; color:#6b4e00;}
.legalAside__box{margin-top:12px; border-top:1px solid var(--line); padding-top:12px;}
.legalAside__k{font-weight:1000;}
.legalAside__v{color:var(--muted); font-weight:900; margin-top:4px;}
.legalWysiwyg h2{margin-top:22px;}
.legalWysiwyg h3{margin-top:16px;} .crumbs{
display:flex;
gap:8px;
align-items:center;
margin:10px 0 14px;
color:var(--muted);
font-weight:900;
font-size:13px;
}
.crumbs a{color:var(--blue); text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}
.crumbSep{opacity:.6}
@media (max-width: 980px){
.legalLayout{grid-template-columns: 1fr;}
.legalAside{position:relative; top:auto;}
} .cookieBar{
position:fixed;
left:14px;
right:14px;
bottom:14px;
z-index:9999;
}
.cookieBar__inner{
max-width:1100px;
margin:0 auto;
border:1px solid var(--line);
background:#fff;
border-radius:16px;
box-shadow: 0 10px 30px rgba(0,0,0,.08);
padding:14px;
display:flex;
gap:14px;
align-items:flex-start;
justify-content:space-between;
}
.cookieBar__title{font-weight:1000; margin-bottom:4px;}
.cookieBar__desc{color:var(--muted); font-weight:800; font-size:13px; line-height:1.4;}
.cookieBar__actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.cookieBar__link{color:var(--blue); text-decoration:none; font-weight:900;}
.cookieBar__link:hover{text-decoration:underline;}
@media (max-width: 760px){
.cookieBar__inner{flex-direction:column; align-items:stretch;}
.cookieBar__actions{justify-content:flex-start;}
} .embedFrame{
border:1px solid var(--line);
border-radius:16px;
overflow:hidden;
background:#fff;
}
.embedFrame iframe{
width:100%;
height:900px;
border:0;
display:block;
}
.embedNote{
margin-top:10px;
color:var(--muted);
font-weight:800;
font-size:13px;
line-height:1.45;
}
@media (max-width: 760px){
.embedFrame iframe{ height: 780px; }
} .speedLayout{
display:grid;
grid-template-columns: 1.2fr .8fr;
gap:14px;
align-items:start;
}
.speedLeft{min-width:0;}
.speedRight{min-width:0; display:flex; flex-direction:column; gap:14px;}
.embedFrame{
border:1px solid var(--line);
border-radius:16px;
overflow:hidden;
background:#3b82f6;
}
.embedFrame iframe{
display:block;
width:100%;
border:0;
}
.embedNote{
margin-top:10px;
color:var(--muted);
font-weight:800;
font-size:13px;
line-height:1.45;
}
.speedCard{
border:1px solid var(--line);
border-radius:16px;
background:#3b82f6;
padding:14px;
}
.speedCard__title{
font-weight:1000;
margin-bottom:10px;
font-size:15px;
}
.speedTable{display:flex; flex-direction:column; gap:8px;}
.speedRow{
display:flex;
gap:10px;
justify-content:space-between;
align-items:flex-start;
padding:10px 12px;
border-radius:12px;
border:1px solid var(--line);
background:var(--soft);
}
.speedK{color:var(--text); font-weight:1000;}
.speedV{color:var(--text); font-weight:900;}
.speedMini{
margin-top:10px;
color:var(--muted);
font-weight:800;
font-size:13px;
line-height:1.45;
}
.speedList{
margin:0;
padding-left:18px;
color:var(--text);
font-weight:900;
line-height:1.55;
}
.speedList li{margin:6px 0;}
.speedP{
color:var(--muted);
font-weight:800;
line-height:1.55;
}
.speedBtns{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
@media (max-width: 980px){
.speedLayout{grid-template-columns: 1fr;}
}
@media (max-width: 760px){
.embedFrame iframe{height: 720px;}
}
.contactLayout{
display:grid;
grid-template-columns: 1.1fr .9fr;
gap:14px;
align-items:start;
}
@media (max-width: 980px){ .contactLayout{grid-template-columns:1fr;} }
.contactBox{
border:1px solid var(--line);
border-radius:16px;
padding:14px;
background:var(--soft);
margin-bottom:12px;
}
.contactK{font-weight:1000; margin-bottom:4px;}
.contactV{color:var(--muted); font-weight:800; margin-bottom:10px;}
.contactBtns{display:flex; gap:10px; flex-wrap:wrap;}
.nbnForm__grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.nbnField{display:flex; flex-direction:column; gap:6px;}
.nbnField span{font-weight:900; color:var(--text);}
.nbnField input, .nbnField textarea{
border:1px solid var(--line);
border-radius:12px;
padding:12px;
font-weight:800;
width:100%;
}
.nbnField--full{grid-column:1/-1;}
.nbnForm__actions{grid-column:1/-1; display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}
.nbnNotice{
border-radius:14px;
padding:12px 14px;
font-weight:900;
border:1px solid var(--line);
margin-bottom:12px;
}
.nbnNotice--ok{background:#f4fff3;}
.nbnNotice--err{background:#fff3f3;}
@media (max-width: 760px){
.nbnForm__grid{grid-template-columns:1fr;}
}
.faqSearch{margin-bottom:14px;}
.faqItem{
border:1px solid var(--line);
border-radius:16px;
overflow:hidden;
background:#fff;
margin:10px 0;
}
.faqQ{
width:100%;
text-align:left;
background:var(--soft);
border:0;
padding:14px 14px;
font-weight:1000;
cursor:pointer;
}
.faqA{
display:none;
padding:14px 14px;
border-top:1px solid var(--line);
}
.faqItem.is-open .faqA{display:block;}
.faqA p, .faqA li{font-weight:800; line-height:1.55;}
.postGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.postCard{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff;}
.postCard__thumb{display:block; aspect-ratio:16/9; background:var(--soft);}
.postCard__thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.postCard__body{padding:14px;}
.postCard__meta{color:var(--muted); font-weight:900; font-size:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.postCard__title{margin:10px 0 8px; font-weight:1000; font-size:18px;}
.postCard__title a{text-decoration:none; color:var(--text);}
.postCard__title a:hover{text-decoration:underline;}
.postCard__ex{color:var(--muted); font-weight:800; line-height:1.5; margin:0 0 12px;}
.pager{display:flex; justify-content:space-between; margin-top:18px; font-weight:1000;}
@media(max-width: 980px){.postGrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width: 640px){.postGrid{grid-template-columns:1fr;}}
.plansTeaser{
margin-top:18px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
.planBox{
border:1px solid var(--line);
border-radius:16px;
padding:14px;
background:#fff;
}
.planBox__k{font-weight:1000;margin-bottom:6px;}
.planBox__v{color:var(--muted);font-weight:800;line-height:1.45;}
@media(max-width:980px){.plansTeaser{grid-template-columns:1fr;}}
.plansGridPro{
margin-top:18px;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:16px;
align-items:stretch;
}
.planPro{
border:1px solid var(--line);
border-radius:18px;
background:#fff;
padding:18px;
box-shadow: 0 12px 30px rgba(0,0,0,.05);
}
.planPro--featured{
border-color: rgba(30,88,255,.35);
box-shadow: 0 16px 45px rgba(30,88,255,.12);
}
.planPro__head{
display:flex;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.planPro__name{
font-weight:1000;
font-size:16px;
margin-bottom:4px;
}
.planPro__desc{
color:var(--muted);
font-weight:800;
font-size:13px;
line-height:1.35;
max-width:320px;
}
.planPro__badge{
border:1px solid var(--line);
background:#fff;
border-radius:999px;
padding:8px 10px;
font-weight:1000;
font-size:12px;
white-space:nowrap;
}
.planPro__badge--soft{
background:var(--soft);
}
.planPro__price{
font-size:34px;
font-weight:1000;
margin:14px 0 10px;
}
.planPro__list{
margin:0;
padding-left:18px;
color:var(--text);
font-weight:900;
line-height:1.6;
}
.planPro__list li{
margin:7px 0;
}
.planPro__actions{
margin-top:14px;
}
.btn--block{
width:100%;
display:inline-flex;
justify-content:center;
align-items:center;
} @media (max-width: 980px){
.plansGridPro{grid-template-columns:1fr;}
.planPro__desc{max-width:none;}
} .sectionHead--split{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
}
.sectionHead__left{min-width:260px;}
.sectionHead__right{max-width:520px;}
@media(max-width: 980px){
.sectionHead--split{flex-direction:column; align-items:flex-start;}
.sectionHead__right{max-width:none;}
} .plansGridPro{
margin-top:10px;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:16px;
align-items:stretch;
} .planPro{
position:relative;
border:1px solid var(--line);
border-radius:20px;
background:#fff;
padding:18px;
box-shadow: 0 12px 30px rgba(0,0,0,.05);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.planPro:hover{
transform: translateY(-3px);
box-shadow: 0 18px 45px rgba(0,0,0,.08);
border-color: rgba(30,88,255,.22);
} .planPro--featured{
border-color: rgba(30,88,255,.35);
box-shadow: 0 16px 45px rgba(30,88,255,.12);
}
.planPro--featured:hover{
box-shadow: 0 22px 55px rgba(30,88,255,.16);
} .planPro--value{
border-color: rgba(212,175,55,.55);
box-shadow: 0 16px 45px rgba(212,175,55,.10);
}
.planPro--value:hover{
box-shadow: 0 22px 55px rgba(212,175,55,.14);
} .planPro__tag{
position:absolute;
top:14px;
left:14px;
padding:7px 10px;
border-radius:999px;
font-weight:1000;
font-size:12px;
border:1px solid rgba(212,175,55,.55);
background: rgba(212,175,55,.12);
} .planPro__head{
display:flex;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
align-items:flex-start;
}
.planPro__name{
font-weight:1000;
font-size:16px;
margin-bottom:4px;
}
.planPro__desc{
color:var(--muted);
font-weight:800;
font-size:13px;
line-height:1.35;
max-width:320px;
} .planPro__badge{
border:1px solid var(--line);
background:#fff;
border-radius:999px;
padding:8px 10px;
font-weight:1000;
font-size:12px;
white-space:nowrap;
}
.planPro__badge--soft{ background:var(--soft); } .planPro__medal{
width:56px;
height:56px;
border-radius:999px;
border:2px solid rgba(212,175,55,.55);
background: rgba(212,175,55,.10);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-weight:1000;
user-select:none;
}
.planPro__medalTop{font-size:14px; line-height:1;}
.planPro__medalBot{font-size:12px; line-height:1; opacity:.9;} .planPro__price{
font-size:34px;
font-weight:1000;
margin:14px 0 10px;
} .planPro__list{
margin:0;
padding-left:18px;
color:var(--text);
font-weight:900;
line-height:1.6;
}
.planPro__list li{ margin:7px 0; } .planPro__actions{ margin-top:14px; }
.btn--block{
width:100%;
display:inline-flex;
justify-content:center;
align-items:center;
}
.planPro__hint{
margin-top:10px;
color:var(--muted);
font-weight:800;
font-size:12.5px;
line-height:1.35;
} @media (max-width: 980px){
.plansGridPro{grid-template-columns:1fr;}
.planPro__desc{max-width:none;}
} .planPro--value{
padding-top: 34px; }
.planPro--value .planPro__tag{
top: 12px;
right: 80px;
left: auto; z-index: 2;
}
.section {
opacity: 0;
transform: translateY(40px);
animation: sectionIn 0.9s ease forwards;
}
.section:nth-of-type(1) { animation-delay: .1s; }
.section:nth-of-type(2) { animation-delay: .2s; }
.section:nth-of-type(3) { animation-delay: .3s; }
@keyframes sectionIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.plan-card,
.stat-card,
.review-card {
transition: transform .35s ease, box-shadow .35s ease, border .35s ease;
}
.plan-card:hover,
.stat-card:hover,
.review-card:hover {
transform: translateY(-10px) scale(1.015);
box-shadow: 0 25px 60px -20px rgba(0,0,0,.8);
}
.section-title {
position: relative;
}
.section-title::after {
content: "";
display: block;
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--accent-primary), var(--accent-gold));
margin: 16px auto 0;
border-radius: 2px;
}
.review-card {
backdrop-filter: blur(8px);
}
.review-card:hover .review-text {
color: #ffffff;
}
body.nbn.theme-dark .footer {
background:
radial-gradient(circle at top, rgba(59,130,246,.08), transparent 50%),
#020204;
}
.topbar__inner { position: relative; }
.mobile-menu-btn{
background:#fff;
border:1px solid var(--line);
color:var(--text);
font-size: 1.2rem;
width: 44px;
height: 44px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.mobile-menu-btn:hover{background:var(--soft);}
body.nbn.theme-dark .mobile-menu-btn{
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
color: #fff;
}
@media (min-width: 900px){
.mobile-menu-btn{ display:none; }
}
.nav-mobile{
display:none;
position:absolute;
left:24px;
right:24px;
top:72px;
background:#fff;
border:1px solid var(--line);
border-radius: 14px;
padding: 14px;
box-shadow:0 14px 36px rgba(15,23,42,.16);
z-index: 2000;
}
.nav-mobile .nav__link{
display:block;
padding: 12px 12px;
border-radius: 12px;
color:var(--text);
}
.nav-mobile .nav__link:hover{
background:var(--soft);
color:var(--text);
}
.nav-mobile.is-open{ display:block; }
.nav-mobile .themeToggle{margin-top:8px;}
.mobileDock{
display:none;
position:fixed;
left:max(10px, env(safe-area-inset-left));
right:max(10px, env(safe-area-inset-right));
bottom:max(10px, env(safe-area-inset-bottom));
z-index:2200;
grid-template-columns:repeat(7, minmax(0, 1fr));
gap:4px;
padding:5px;
border-radius:16px;
border:1px solid var(--line);
background:rgba(255,255,255,.95);
box-shadow:0 16px 38px rgba(15,23,42,.2);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.mobileDock__link{
min-height:54px;
border-radius:12px;
border:1px solid transparent;
color:var(--text);
text-decoration:none;
font-weight:900;
font-size:10px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
}
.mobileDock__theme{
appearance:none;
-webkit-appearance:none;
font:inherit;
padding:0;
margin:0;
background:transparent;
cursor:pointer;
}
.mobileDock__theme:focus-visible{
outline:2px solid #2563eb;
outline-offset:-2px;
}
.mobileDock__link i{
font-size:15px;
line-height:1;
color:var(--muted);
}
.mobileDock__link:hover{
background:var(--soft);
}
.mobileDock__link.is-active{
background:#eef2ff;
border-color:#c7d2fe;
color:#1e3a8a;
}
.mobileDock__link.is-active i{
color:#1d4ed8;
}
body.nbn.theme-dark .nav-mobile{
background: rgba(5, 6, 10, 0.95);
border-color: rgba(255,255,255,0.10);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:none;
}
body.nbn.theme-dark .nav-mobile .nav__link{color:#cbd5e1;}
body.nbn.theme-dark .nav-mobile .nav__link:hover{
background: rgba(255,255,255,0.06);
color:#fff;
}
body.nbn.theme-dark .themeToggle{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.15);
color:#fff;
}
body.nbn.theme-dark .themeToggle:hover{
background:rgba(255,255,255,.12);
}
body.nbn.theme-dark .mobileDock{
background:rgba(5,6,10,.92);
border-color:rgba(255,255,255,.16);
box-shadow:0 18px 42px rgba(0,0,0,.45);
}
body.nbn.theme-dark .mobileDock__link{
color:#cbd5e1;
}
body.nbn.theme-dark .mobileDock__link i{
color:#94a3b8;
}
body.nbn.theme-dark .mobileDock__link:hover{
background:rgba(255,255,255,.08);
}
body.nbn.theme-dark .mobileDock__link.is-active{
background:rgba(37,99,235,.22);
border-color:rgba(147,197,253,.38);
color:#eff6ff;
}
body.nbn.theme-dark .mobileDock__link.is-active i{
color:#93c5fd;
}
@media (min-width: 900px){
.nav-mobile{ display:none !important; }
}
@media (max-width: 900px){
.mobileDock{display:grid;}
.mobile-menu-btn,
.nav-mobile{display:none !important;}
body.nbn{padding-bottom:calc(92px + env(safe-area-inset-bottom));}
} body.nbn.theme-dark .wysiwyg { color: #cbd5e1; }
body.nbn.theme-dark .wysiwyg p { margin: 0 0 14px; color: #cbd5e1; }
body.nbn.theme-dark .wysiwyg h1,
body.nbn.theme-dark .wysiwyg h2,
body.nbn.theme-dark .wysiwyg h3 { color: #fff; margin: 18px 0 10px; }
body.nbn.theme-dark .wysiwyg a { color: var(--accent-primary); text-decoration: none; }
body.nbn.theme-dark .wysiwyg a:hover { text-decoration: underline; }
body.nbn.theme-dark .wysiwyg ul,
body.nbn.theme-dark .wysiwyg ol { margin: 10px 0 16px 22px; }
body.nbn.theme-dark .wysiwyg li { margin: 6px 0; }
body.nbn.theme-dark .wysiwyg hr { border: 0; border-top: 1px solid var(--border-color); margin: 18px 0; }
body.nbn.theme-dark .wysiwyg strong { color: #fff; }
body.nbn.theme-dark .sectionHead{
display:flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin: 0 0 18px;
}
body.nbn.theme-dark .sectionHead .h2{
margin: 0;
color: #fff;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
}
body.nbn.theme-dark .sectionHead .p{
margin: 8px 0 0;
color: rgba(203,213,225,0.85);
font-size: 1rem;
}
body.nbn.theme-dark .faq{
display: grid;
gap: 12px;
margin-top: 14px;
}
body.nbn.theme-dark .faq details{
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.03);
border-radius: 16px;
padding: 16px 18px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
body.nbn.theme-dark .faq summary{
cursor: pointer;
list-style: none;
color: #fff;
font-weight: 700;
display:flex;
align-items:center;
justify-content: space-between;
gap: 14px;
}
body.nbn.theme-dark .faq summary::-webkit-details-marker{ display:none; }
body.nbn.theme-dark .faq summary:after{
content:"+";
width: 34px;
height: 34px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.9);
font-weight: 800;
}
body.nbn.theme-dark .faq details[open] summary:after{ content:"–"; }
body.nbn.theme-dark .faq__a{
margin-top: 10px;
color: rgba(203,213,225,0.90);
line-height: 1.6;
}
body.nbn.theme-dark .callout{
margin-top: 22px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(37,99,235,0.08);
border-radius: 16px;
padding: 18px;
display:flex;
align-items:center;
justify-content: space-between;
gap: 18px;
}
body.nbn.theme-dark .calloutTitle{
color:#fff;
font-weight: 800;
margin-bottom: 6px;
}
body.nbn.theme-dark .calloutDesc{
color: rgba(203,213,225,0.85);
font-size: 0.95rem;
}
@media (max-width: 720px){
body.nbn.theme-dark .callout{ flex-direction: column; align-items: stretch; }
body.nbn.theme-dark .callout .btn{ width: 100%; }
} body.nbn.theme-dark{
background-color:#05060a;
color:#fff;
--bg:#05060a;
--text:#e2e8f0;
--black:#e2e8f0;
--muted:#94a3b8;
--line:rgba(255,255,255,.14);
--soft:rgba(255,255,255,.06);
--border-color:rgba(255,255,255,.14);
--blue:#3b82f6;
background-image:
radial-gradient(circle at 15% 15%, rgba(37, 99, 235, 0.12) 0%, transparent 45%),
radial-gradient(circle at 85% 85%, rgba(124, 58, 237, 0.10) 0%, transparent 45%);
}
body.nbn.theme-dark .topbar{
background:rgba(5,6,10,.86);
border-bottom:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
}
body.nbn.theme-dark .brand__name,
body.nbn.theme-dark .nav__link,
body.nbn.theme-dark .h2,
body.nbn.theme-dark .calloutTitle,
body.nbn.theme-dark .footerLinks h4{
color:#fff;
}
body.nbn.theme-dark .brand__tag,
body.nbn.theme-dark .p,
body.nbn.theme-dark .footerBottom{
color:#94a3b8;
}
body.nbn.theme-dark .nav__link:hover{background:rgba(255,255,255,.08);}
body.nbn.theme-dark .btn--soft{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); color:#fff;}
body.nbn.theme-dark .btn--ghost{border-color:rgba(255,255,255,.15); color:#fff;}
body.nbn.theme-dark .section{padding:70px 0;}
body.nbn.theme-dark .fp-headCenter{justify-content:center; text-align:center;}
body.nbn.theme-dark .fp-hero{padding-top:34px;}
body.nbn.theme-dark .fp-heroGrid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center;}
body.nbn.theme-dark .fp-badge{display:inline-flex; align-items:center; gap:8px; color:#60a5fa; background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.25); border-radius:999px; padding:6px 12px; font-weight:700; font-size:13px;}
body.nbn.theme-dark .fp-badgeDot{width:8px; height:8px; border-radius:999px; background:#60a5fa; box-shadow:0 0 10px #60a5fa;}
body.nbn.theme-dark .fp-title{font-size:clamp(2rem,4.8vw,4rem); line-height:1.06; margin:16px 0;}
body.nbn.theme-dark .fp-title em{font-style:normal; color:#3b82f6;}
body.nbn.theme-dark .fp-lead{color:#cbd5e1; max-width:60ch; font-size:1.08rem; margin:0 0 24px;}
body.nbn.theme-dark .fp-actions{display:flex; gap:12px; flex-wrap:wrap;}
body.nbn.theme-dark .fp-stats{display:grid; gap:12px;}
body.nbn.theme-dark .fp-statCard{background:rgba(22,27,46,.62); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:16px;}
body.nbn.theme-dark .fp-statCard h4{margin:0 0 6px; color:#fff;}
body.nbn.theme-dark .fp-statCard p{margin:0; color:#cbd5e1;}
body.nbn.theme-dark .fp-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
body.nbn.theme-dark .fp-step{border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); border-radius:14px; padding:18px;}
body.nbn.theme-dark .fp-step h3{margin:0 0 8px; color:#fff;}
body.nbn.theme-dark .fp-step p{margin:0; color:#cbd5e1;}
body.nbn.theme-dark .fp-stepNo{width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.15); color:#60a5fa; font-weight:900; margin-bottom:10px;}
body.nbn.theme-dark .fp-split{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
body.nbn.theme-dark .fp-reviews{display:grid; gap:10px;}
body.nbn.theme-dark .fp-review{border:1px solid rgba(255,255,255,.1); background:rgba(22,27,46,.62); border-radius:14px; padding:14px;}
body.nbn.theme-dark .fp-review p{margin:0 0 10px; color:#e2e8f0; font-style:italic;}
body.nbn.theme-dark .fp-review span{color:#94a3b8; font-weight:800; font-size:13px;}
body.nbn.theme-dark .faq details{border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.03);}
body.nbn.theme-dark .faq summary{color:#fff;}
body.nbn.theme-dark .faq__a{color:#cbd5e1;}
body.nbn.theme-dark .callout{border-color:rgba(255,255,255,.1); background:rgba(37,99,235,.1);}
body.nbn.theme-dark .calloutDesc{color:#cbd5e1;}
body.nbn.theme-dark .footer{background:#020204; border-top:1px solid rgba(255,255,255,.08);}
body.nbn.theme-dark .footerLinks a{color:#cbd5e1;}
body.nbn.theme-dark .heroCard,
body.nbn.theme-dark .contentCard,
body.nbn.theme-dark .note,
body.nbn.theme-dark .stat,
body.nbn.theme-dark .card,
body.nbn.theme-dark .quote,
body.nbn.theme-dark .postCard,
body.nbn.theme-dark .legalAside,
body.nbn.theme-dark .chCard,
body.nbn.theme-dark .contactBox,
body.nbn.theme-dark .faqItem,
body.nbn.theme-dark .gridCheck{
background:rgba(15,23,42,.55);
border-color:rgba(255,255,255,.14);
box-shadow:0 14px 30px rgba(0,0,0,.25);
}
body.nbn.theme-dark .postCard__title a,
body.nbn.theme-dark .gridCount,
body.nbn.theme-dark .speedK,
body.nbn.theme-dark .speedV,
body.nbn.theme-dark .contactK{
color:#fff;
}
body.nbn.theme-dark .postCard__meta,
body.nbn.theme-dark .postCard__ex,
body.nbn.theme-dark .contactV,
body.nbn.theme-dark .embedNote,
body.nbn.theme-dark .speedMini,
body.nbn.theme-dark .speedP,
body.nbn.theme-dark .gridHint,
body.nbn.theme-dark .gridEmpty{
color:#cbd5e1;
}
body.nbn.theme-dark .legalToc__item{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.12);
color:#e2e8f0;
}
body.nbn.theme-dark .nbnField input,
body.nbn.theme-dark .nbnField textarea,
body.nbn.theme-dark .gridInput,
body.nbn.theme-dark .gridSelect{
background:rgba(255,255,255,.04);
color:#fff;
border-color:rgba(255,255,255,.16);
}
body.nbn.theme-dark .gridSelect option{
color:#0f172a;
background:#fff;
}
body.nbn.theme-dark .speedCard{
background:rgba(37,99,235,.15);
border-color:rgba(255,255,255,.16);
}
body.nbn.theme-dark .speedRow{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.12);
}
body.nbn.theme-dark .cookieBar__inner{
background:rgba(10,14,25,.95);
border-color:rgba(255,255,255,.14);
}
body.nbn.theme-dark .cookieBar__title{color:#fff;}
body.nbn.theme-dark .cookieBar__desc{color:#cbd5e1;}
body.nbn.theme-dark .cookieBar__link{color:#93c5fd;} body.nbn.theme-dark .faq details{
background:rgba(15,23,42,.78);
border-color:rgba(148,163,184,.35);
}
body.nbn.theme-dark .faq summary{
color:#f8fafc;
}
body.nbn.theme-dark .faq summary:after{
color:#e2e8f0;
border-color:rgba(148,163,184,.45);
background:rgba(15,23,42,.75);
}
body.nbn.theme-dark .faq__a{
color:#e2e8f0;
}
body.nbn.theme-dark .faqItem{
background:rgba(15,23,42,.74);
border-color:rgba(148,163,184,.35);
}
body.nbn.theme-dark .faqQ{
color:#f8fafc;
background:rgba(51,65,85,.45);
}
body.nbn.theme-dark .faqQ:hover{
background:rgba(71,85,105,.5);
}
body.nbn.theme-dark .faqA{
color:#e2e8f0;
border-top-color:rgba(148,163,184,.35);
}
body.nbn.theme-dark .faqA p,
body.nbn.theme-dark .faqA li{
color:#e2e8f0;
} body.nbn.theme-dark .plansGridPro{
margin-top:18px;
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:16px;
align-items:stretch;
}
body.nbn.theme-dark .planPro{
position:relative;
display:flex;
flex-direction:column;
min-height:100%;
border:1px solid rgba(255,255,255,.16);
border-radius:18px;
background:rgba(15,23,42,.62);
padding:18px;
box-shadow:0 14px 34px rgba(0,0,0,.26);
}
body.nbn.theme-dark .planPro__head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:10px;
margin-bottom:10px;
}
body.nbn.theme-dark .planPro__name{
color:#fff;
font-weight:1000;
font-size:16px;
margin-bottom:4px;
}
body.nbn.theme-dark .planPro__desc{
color:#cbd5e1;
font-weight:800;
font-size:13px;
line-height:1.4;
max-width:none;
}
body.nbn.theme-dark .planPro__badge{
border:1px solid rgba(255,255,255,.2);
background:rgba(255,255,255,.08);
color:#fff;
border-radius:999px;
padding:8px 10px;
font-weight:1000;
font-size:12px;
white-space:nowrap;
}
body.nbn.theme-dark .planPro__badge--soft{
background:rgba(255,255,255,.12);
}
body.nbn.theme-dark .planPro__price{
color:#fff;
font-size:34px;
font-weight:1000;
margin:12px 0 10px;
}
body.nbn.theme-dark .planPro__list{
margin:0;
padding-left:18px;
color:#e2e8f0;
font-weight:900;
line-height:1.6;
flex:1 1 auto;
}
body.nbn.theme-dark .planPro__list li{
margin:7px 0;
}
body.nbn.theme-dark .planPro__actions{
margin-top:14px;
}
body.nbn.theme-dark .planPro__tag{
position:absolute;
top:12px;
right:12px;
left:auto;
padding:7px 10px;
border-radius:999px;
font-weight:1000;
font-size:12px;
border:1px solid rgba(212,175,55,.6);
background:rgba(212,175,55,.18);
color:#f8e6ab;
z-index:2;
}
body.nbn.theme-dark .planPro--featured{
border-color:rgba(96,165,250,.45);
box-shadow:0 16px 40px rgba(59,130,246,.2);
}
body.nbn.theme-dark .planPro--value{
border-color:rgba(212,175,55,.55);
box-shadow:0 16px 40px rgba(212,175,55,.16);
padding-top:44px;
}
@media (max-width: 1100px){
body.nbn.theme-dark .plansGridPro{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 980px){
body.nbn.theme-dark .plansGridPro{grid-template-columns:1fr;}
body.nbn.theme-dark .fp-heroGrid{grid-template-columns:1fr;}
body.nbn.theme-dark .fp-steps{grid-template-columns:1fr;}
body.nbn.theme-dark .fp-split{grid-template-columns:1fr;}
} .rxHero{
position:relative;
overflow:hidden;
padding: clamp(56px, 9vw, 110px) 0 clamp(34px, 7vw, 70px);
}
.rxGlow{
position:absolute;
border-radius:999px;
filter:blur(90px);
pointer-events:none;
}
.rxGlow--one{
width:min(45vw, 520px);
height:min(45vw, 520px);
top:-120px;
left:-100px;
background:rgba(37,99,235,.25);
}
.rxGlow--two{
width:min(50vw, 620px);
height:min(50vw, 620px);
right:-150px;
bottom:-210px;
background:rgba(14,165,233,.18);
}
.rxHero__grid{
position:relative;
z-index:1;
display:grid;
grid-template-columns: 1.18fr .82fr;
gap:20px;
align-items:stretch;
}
.rxHero__copy{
border:1px solid var(--line);
border-radius:24px;
padding: clamp(20px, 3vw, 34px);
background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
box-shadow:0 24px 55px rgba(15,23,42,.12);
}
.rxEyebrow{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
border:1px solid rgba(37,99,235,.25);
background:rgba(37,99,235,.08);
color:#1d4ed8;
border-radius:999px;
padding:8px 12px;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.rxEyebrow__dot{
width:8px;
height:8px;
border-radius:999px;
background:#1d4ed8;
}
.rxHero__title{
margin:0 0 12px;
font-size: clamp(2rem, 4.4vw, 3.8rem);
line-height:1.06;
letter-spacing:-.02em;
}
.rxHero__lead{
margin:0;
max-width:66ch;
font-weight:700;
color:var(--muted);
}
.rxHero__actions{
margin-top:18px;
display:flex;
flex-wrap:wrap;
gap:10px;
}
.rxHero__chips{
margin:18px 0 0;
padding:0;
display:flex;
flex-wrap:wrap;
gap:10px;
list-style:none;
}
.rxHero__chips li{
border:1px solid var(--line);
border-radius:999px;
background:#fff;
padding:8px 12px;
font-size:12px;
font-weight:900;
}
.rxHero__panel{min-width:0;}
.rxGlass{
height:100%;
border:1px solid var(--line);
border-radius:24px;
padding:22px;
background:linear-gradient(160deg, rgba(255,255,255,.78), rgba(248,250,252,.65));
box-shadow:0 24px 55px rgba(15,23,42,.12);
}
.rxPanel__head{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-bottom:12px;
}
.rxPanel__head h3{
margin:0;
font-size:18px;
}
.rxStatus{
display:inline-flex;
align-items:center;
gap:6px;
border-radius:999px;
padding:6px 10px;
font-size:11px;
font-weight:1000;
text-transform:uppercase;
letter-spacing:.08em;
}
.rxStatus--ok{
color:#166534;
border:1px solid rgba(34,197,94,.35);
background:rgba(34,197,94,.12);
}
.rxMetrics{
margin:6px 0 14px;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.rxMetric{
border:1px solid var(--line);
border-radius:14px;
padding:12px;
background:#fff;
}
.rxMetric__k{
color:var(--muted);
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
}
.rxMetric__v{
margin-top:4px;
font-size:22px;
font-weight:1000;
}
.rxSection{padding: clamp(42px, 6vw, 78px) 0;}
.rxTrust{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:14px;
}
.rxTrust__item{
border:1px solid var(--line);
border-radius:18px;
background:#fff;
box-shadow:0 14px 32px rgba(15,23,42,.08);
padding:18px;
}
.rxTrust__item h3{
margin:0 0 8px;
font-size:18px;
}
.rxTrust__item p{
margin:0;
color:var(--muted);
font-weight:700;
}
.rxSectionHead{
max-width:760px;
margin:0 auto 18px;
text-align:center;
}
.rxSectionHead--left{
text-align:left;
margin-left:0;
}
.rxSectionHead__over{
margin:0 0 8px;
color:#2563eb;
font-size:12px;
font-weight:1000;
text-transform:uppercase;
letter-spacing:.12em;
}
.rxSectionHead__title{
margin:0;
font-size: clamp(1.65rem, 3.7vw, 2.5rem);
line-height:1.14;
}
.rxSectionHead__lead{
margin:10px 0 0;
color:var(--muted);
font-weight:700;
}
.rxPlansWrap .plansGridPro{margin-top:14px;}
.rxFlow{
margin:0;
padding:0;
list-style:none;
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:14px;
}
.rxFlow__item{
border:1px solid var(--line);
border-radius:18px;
background:#fff;
box-shadow:0 14px 32px rgba(15,23,42,.08);
padding:18px;
}
.rxFlow__no{
width:42px;
height:42px;
border-radius:999px;
border:1px solid rgba(37,99,235,.3);
background:rgba(37,99,235,.08);
color:#1d4ed8;
font-size:13px;
font-weight:1000;
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:10px;
}
.rxFlow__item h3{
margin:0 0 8px;
font-size:18px;
}
.rxFlow__item p{
margin:0;
color:var(--muted);
font-weight:700;
}
.rxStack{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.rxDeviceCard{
border:1px solid var(--line);
border-radius:20px;
padding:20px;
background:#fff;
box-shadow:0 14px 32px rgba(15,23,42,.08);
}
.rxDeviceCard h3{
margin:0 0 8px;
font-size:22px;
}
.rxDeviceCard p{
margin:0;
color:var(--muted);
font-weight:700;
}
.rxDeviceCard ul{
margin:14px 0;
padding-left:18px;
color:var(--text);
font-weight:800;
line-height:1.6;
}
.rxSplit{
display:grid;
grid-template-columns:1.08fr .92fr;
gap:14px;
align-items:start;
}
.rxSupport{
border:1px solid var(--line);
border-radius:20px;
padding:20px;
background:#fff;
box-shadow:0 14px 32px rgba(15,23,42,.08);
}
.rxSupport h3{
margin:0 0 8px;
font-size:24px;
}
.rxSupport p{
margin:0 0 16px;
color:var(--muted);
font-weight:700;
}
.rxSupport .btn + .btn{margin-top:10px;}
.rxFinal{padding-top:30px;}
.rxFinal__card{
border:1px solid var(--line);
border-radius:24px;
padding: clamp(20px, 4vw, 34px);
background:linear-gradient(145deg, rgba(37,99,235,.12), rgba(14,165,233,.08));
box-shadow:0 24px 55px rgba(15,23,42,.12);
text-align:center;
}
.rxFinal__card h2{
margin:0;
font-size:clamp(1.7rem, 4vw, 2.8rem);
}
.rxFinal__card p{
margin:10px auto 0;
max-width:62ch;
color:var(--muted);
font-weight:700;
}
.rxFinal__actions{
margin-top:18px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
}
body.nbn.theme-dark .rxHero__copy,
body.nbn.theme-dark .rxGlass,
body.nbn.theme-dark .rxTrust__item,
body.nbn.theme-dark .rxFlow__item,
body.nbn.theme-dark .rxDeviceCard,
body.nbn.theme-dark .rxSupport,
body.nbn.theme-dark .rxMetric{
background:rgba(15,23,42,.68);
border-color:rgba(255,255,255,.15);
box-shadow:0 20px 44px rgba(0,0,0,.35);
}
body.nbn.theme-dark .rxHero__chips li{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.16);
}
body.nbn.theme-dark .rxStatus--ok{
color:#86efac;
border-color:rgba(134,239,172,.35);
background:rgba(34,197,94,.2);
}
body.nbn.theme-dark .rxFinal__card{
border-color:rgba(255,255,255,.14);
background:linear-gradient(145deg, rgba(37,99,235,.22), rgba(14,165,233,.12));
box-shadow:0 28px 60px rgba(0,0,0,.42);
}
@media (max-width: 1040px){
.rxHero__grid,
.rxFlow,
.rxStack,
.rxSplit{grid-template-columns:1fr;}
}
@media (max-width: 900px){
.rxTrust{grid-template-columns:1fr;}
}
@media (max-width: 640px){
.rxHero__actions .btn,
.rxFinal__actions .btn{width:100%;}
.rxMetrics{grid-template-columns:1fr;}
} body.nbn .hero{
position:relative;
padding:clamp(34px, 6vw, 68px) 0 20px;
overflow:hidden;
}
body.nbn .hero::before{
content:"";
position:absolute;
inset:auto 0 0;
height:280px;
pointer-events:none;
background:
radial-gradient(circle at 10% 20%, rgba(37,99,235,.14), transparent 45%),
radial-gradient(circle at 86% 82%, rgba(14,165,233,.10), transparent 48%);
}
body.nbn .heroCard{
border-radius:22px;
border:1px solid var(--line);
background:linear-gradient(170deg, rgba(255,255,255,.78), rgba(248,250,252,.64));
box-shadow:0 22px 54px rgba(15,23,42,.12);
}
body.nbn .heroCard__inner{
position:relative;
z-index:1;
grid-template-columns:1.15fr .85fr;
gap:20px;
padding:clamp(18px, 3vw, 30px);
}
body.nbn .heroCard__inner--single{
grid-template-columns:1fr;
}
body.nbn .badgeLine{
margin-bottom:10px;
font-size:11px;
text-transform:uppercase;
letter-spacing:.12em;
color:#2563eb;
}
body.nbn .badgeDot{
width:8px;
height:8px;
background:#2563eb;
}
body.nbn .heroTitle{
margin:0;
font-size:clamp(2rem, 4.1vw, 3.25rem);
line-height:1.06;
}
body.nbn .heroTitle em{
color:#2563eb;
}
body.nbn .heroLead{
margin-top:12px;
color:var(--muted);
font-weight:700;
max-width:66ch;
}
body.nbn .heroActions{
margin-top:16px;
}
body.nbn .heroRight{
border-left:1px solid var(--line);
padding-left:16px;
}
body.nbn .pill{
border-color:rgba(37,99,235,.25);
background:rgba(37,99,235,.1);
color:#1d4ed8;
}
body.nbn .stat{
border-radius:14px;
background:#fff;
}
body.nbn .contentCard{
border-radius:20px;
background:linear-gradient(170deg, rgba(255,255,255,.84), rgba(248,250,252,.7));
box-shadow:0 16px 38px rgba(15,23,42,.1);
}
body.nbn .postCard{
border-radius:20px;
box-shadow:0 16px 38px rgba(15,23,42,.1);
}
body.nbn .postCard__thumb{
background:linear-gradient(145deg, rgba(37,99,235,.12), rgba(14,165,233,.08));
}
body.nbn .postCard__body{
padding:16px;
}
body.nbn .postCard__title{
font-size:20px;
}
body.nbn .pager{
margin-top:24px;
}
body.nbn.theme-dark .hero::before{
background:
radial-gradient(circle at 10% 20%, rgba(37,99,235,.22), transparent 45%),
radial-gradient(circle at 86% 82%, rgba(14,165,233,.16), transparent 48%);
}
body.nbn.theme-dark .heroCard,
body.nbn.theme-dark .contentCard,
body.nbn.theme-dark .postCard,
body.nbn.theme-dark .stat{
background:rgba(15,23,42,.68);
border-color:rgba(255,255,255,.15);
box-shadow:0 20px 44px rgba(0,0,0,.36);
}
body.nbn.theme-dark .heroTitle em{
color:#60a5fa;
}
body.nbn.theme-dark .badgeLine{
color:#93c5fd;
}
body.nbn.theme-dark .badgeDot{
background:#60a5fa;
}
body.nbn.theme-dark .pill{
border-color:rgba(147,197,253,.35);
background:rgba(37,99,235,.22);
color:#dbeafe;
}
@media (max-width: 980px){
body.nbn .heroCard__inner{
grid-template-columns:1fr;
}
body.nbn .heroRight{
border-left:none;
border-top:1px solid var(--line);
padding-left:0;
padding-top:14px;
}
} body.home .topbar{
backdrop-filter: blur(14px);
background:rgba(255,255,255,.72);
border-bottom-color:rgba(148,163,184,.26);
}
.home .rxHero{
isolation:isolate;
background:
radial-gradient(1200px 620px at -10% -20%, rgba(56,189,248,.22), transparent 60%),
radial-gradient(980px 580px at 118% 120%, rgba(250,204,21,.17), transparent 62%),
linear-gradient(180deg, rgba(15,23,42,.03), transparent 70%);
}
.home .rxHero::before{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background:
linear-gradient(105deg, rgba(255,255,255,.38), transparent 48%),
repeating-linear-gradient(90deg, rgba(15,23,42,.03) 0 1px, transparent 1px 68px);
mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.12));
}
.rxMesh{
position:absolute;
right:-110px;
top:-130px;
width:min(46vw, 560px);
height:min(46vw, 560px);
z-index:0;
pointer-events:none;
}
.rxMesh__ring{
--rx-scale:1;
position:absolute;
inset:0;
border-radius:999px;
border:1px solid rgba(37,99,235,.25);
transform:scale(var(--rx-scale));
transform-origin:center;
animation:rxOrbit 20s linear infinite;
}
.rxMesh__ring--a{--rx-scale:1;}
.rxMesh__ring--b{
--rx-scale:.76;
border-color:rgba(14,165,233,.28);
animation-duration:14s;
animation-direction:reverse;
}
.rxMesh__ring--c{
--rx-scale:.52;
border-color:rgba(250,204,21,.3);
animation-duration:12s;
}
.home .rxHero__copy,
.home .rxGlass,
.home .rxTrust__item,
.home .rxFlow__item,
.home .rxDeviceCard,
.home .rxSupport,
.home .rxMetric,
.home .rxFinal__card,
.home .rxPlansWrap .planPro{
position:relative;
overflow:hidden;
border-color:rgba(148,163,184,.35);
background:linear-gradient(160deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
box-shadow:
0 30px 60px rgba(15,23,42,.12),
inset 0 1px 0 rgba(255,255,255,.55);
backdrop-filter:blur(10px) saturate(120%);
}
.home .rxHero__copy::after,
.home .rxGlass::after,
.home .rxTrust__item::after,
.home .rxFlow__item::after,
.home .rxDeviceCard::after,
.home .rxSupport::after,
.home .rxMetric::after,
.home .rxFinal__card::after,
.home .rxPlansWrap .planPro::after{
content:"";
position:absolute;
inset:-1px;
border-radius:inherit;
pointer-events:none;
background:radial-gradient(420px at var(--rx-glow-x, 18%) var(--rx-glow-y, -8%), rgba(56,189,248,.22), transparent 70%);
opacity:.9;
}
.home .rxHero__title{
margin:0 0 14px;
font-size:clamp(2.25rem, 5vw, 4.15rem);
letter-spacing:-.03em;
line-height:1.03;
}
body.nbn.theme-light.home .rxHero__title{
background:linear-gradient(106deg, #0f172a 0%, #1d4ed8 48%, #0f172a 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
body.nbn.theme-dark.home .rxHero__title{
background:linear-gradient(107deg, #ffffff 0%, #dbeafe 30%, #7dd3fc 66%, #fde68a 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-shadow:0 0 36px rgba(56,189,248,.25);
}
.home .rxHero__lead{
max-width:60ch;
font-size:1.02rem;
line-height:1.72;
}
.home .rxEyebrow{
border-color:rgba(37,99,235,.35);
background:linear-gradient(135deg, rgba(37,99,235,.16), rgba(14,165,233,.09));
}
.home .rxHero__chips li{
border-color:rgba(59,130,246,.25);
background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,245,249,.74));
box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.home .rxSectionHead__over{
color:#1d4ed8;
text-shadow:0 0 16px rgba(37,99,235,.15);
}
.home .rxSectionHead__title{
letter-spacing:-.02em;
}
.home .rxPlansWrap .planPro{
transition:
transform .28s ease,
box-shadow .28s ease,
border-color .28s ease;
}
.home .rxPlansWrap .planPro__price{
font-size:clamp(2rem, 3.4vw, 2.7rem);
}
.home .rxHero .btn--primary,
.home .rxFinal .btn--primary{
border:1px solid rgba(96,165,250,.42);
background:linear-gradient(120deg, #2563eb 0%, #0ea5e9 52%, #2563eb 100%);
background-size:200% 100%;
box-shadow:0 14px 34px rgba(37,99,235,.32);
animation:rxSheen 8s linear infinite;
}
.home .rxHero .btn--soft,
.home .rxFinal .btn--soft{
border-color:rgba(148,163,184,.32);
background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,245,249,.82));
}
.home .rxHero .btn--primary:hover,
.home .rxFinal .btn--primary:hover{
transform:translateY(-2px) scale(1.02);
box-shadow:0 18px 40px rgba(37,99,235,.4);
}
body.nbn .rxTilt{
--rx-lift:0px;
--rx-tilt-x:0deg;
--rx-tilt-y:0deg;
--rx-reveal-y:0px;
--rx-reveal-s:1;
--rx-glow-x:18%;
--rx-glow-y:-8%;
transform:perspective(1200px) rotateX(var(--rx-tilt-x)) rotateY(var(--rx-tilt-y)) translateY(calc(var(--rx-lift) + var(--rx-reveal-y))) scale(var(--rx-reveal-s));
transform-style:preserve-3d;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
will-change:transform;
}
body.nbn .rxTilt:hover{
--rx-lift:-7px;
border-color:rgba(37,99,235,.42);
}
.rxReveal{
transition:opacity .62s cubic-bezier(.2,.85,.25,1), transform .62s cubic-bezier(.2,.85,.25,1);
transition-delay:var(--rx-delay, 0s);
}
.rxReveal.is-ready{
opacity:0;
--rx-reveal-y:28px;
--rx-reveal-s:.98;
transform:translateY(var(--rx-reveal-y)) scale(var(--rx-reveal-s));
}
.rxReveal.is-ready.is-visible{
opacity:1;
--rx-reveal-y:0px;
--rx-reveal-s:1;
transform:translateY(0) scale(1);
}
.rxTilt.rxReveal.is-ready{
transform:perspective(1200px) rotateX(var(--rx-tilt-x)) rotateY(var(--rx-tilt-y)) translateY(calc(var(--rx-lift) + var(--rx-reveal-y))) scale(var(--rx-reveal-s));
}
.rxTilt.rxReveal.is-ready.is-visible{
transform:perspective(1200px) rotateX(var(--rx-tilt-x)) rotateY(var(--rx-tilt-y)) translateY(calc(var(--rx-lift) + var(--rx-reveal-y))) scale(var(--rx-reveal-s));
}
body.nbn.theme-dark.home{
background:
radial-gradient(960px 560px at 10% -10%, rgba(30,64,175,.22), transparent 62%),
linear-gradient(180deg, #020617 0%, #030712 64%, #020617 100%);
}
body.nbn.theme-dark.home .topbar{
background:rgba(2,6,23,.74);
border-bottom-color:rgba(148,163,184,.22);
}
body.nbn.theme-dark.home .rxHero{
background:
radial-gradient(1220px 660px at -8% -15%, rgba(56,189,248,.2), transparent 62%),
radial-gradient(980px 560px at 118% 120%, rgba(250,204,21,.14), transparent 62%),
linear-gradient(180deg, rgba(2,6,23,.88), rgba(2,6,23,.18) 68%, transparent);
}
body.nbn.theme-dark.home .rxHero::before{
background:
linear-gradient(110deg, rgba(148,163,184,.16), transparent 52%),
repeating-linear-gradient(90deg, rgba(148,163,184,.06) 0 1px, transparent 1px 68px);
mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.2));
}
body.nbn.theme-dark.home .rxHero__copy,
body.nbn.theme-dark.home .rxGlass,
body.nbn.theme-dark.home .rxTrust__item,
body.nbn.theme-dark.home .rxFlow__item,
body.nbn.theme-dark.home .rxDeviceCard,
body.nbn.theme-dark.home .rxSupport,
body.nbn.theme-dark.home .rxMetric,
body.nbn.theme-dark.home .rxFinal__card,
body.nbn.theme-dark.home .rxPlansWrap .planPro{
border-color:rgba(148,163,184,.28);
background:linear-gradient(160deg, rgba(8,16,36,.8), rgba(7,12,28,.64));
box-shadow:
0 30px 60px rgba(2,6,23,.56),
inset 0 1px 0 rgba(255,255,255,.08);
}
body.nbn.theme-dark.home .rxHero__chips li{
border-color:rgba(148,163,184,.3);
background:linear-gradient(180deg, rgba(15,23,42,.85), rgba(15,23,42,.6));
}
body.nbn.theme-dark.home .rxEyebrow{
border-color:rgba(125,211,252,.45);
color:#bae6fd;
background:linear-gradient(140deg, rgba(14,165,233,.28), rgba(37,99,235,.18));
}
body.nbn.theme-dark.home .rxSectionHead__over{
color:#7dd3fc;
}
body.nbn.theme-dark.home .rxSectionHead__title,
body.nbn.theme-dark.home .rxTrust__item h3,
body.nbn.theme-dark.home .rxFlow__item h3,
body.nbn.theme-dark.home .rxDeviceCard h3,
body.nbn.theme-dark.home .rxSupport h3,
body.nbn.theme-dark.home .rxPanel__head h3{
color:#f8fafc;
}
body.nbn.theme-dark.home .rxHero__lead,
body.nbn.theme-dark.home .rxTrust__item p,
body.nbn.theme-dark.home .rxFlow__item p,
body.nbn.theme-dark.home .rxDeviceCard p,
body.nbn.theme-dark.home .rxSupport p,
body.nbn.theme-dark.home .rxFinal__card p,
body.nbn.theme-dark.home .rxSectionHead__lead,
body.nbn.theme-dark.home .rxMetric__k{
color:#cbd5e1;
}
body.nbn.theme-dark.home .rxMetric__v{
color:#f8fafc;
}
body.nbn.theme-dark.home .rxFlow__no{
border-color:rgba(125,211,252,.45);
color:#e0f2fe;
background:rgba(14,165,233,.2);
}
body.nbn.theme-dark.home .rxHero .btn--soft,
body.nbn.theme-dark.home .rxFinal .btn--soft{
background:linear-gradient(180deg, rgba(30,41,59,.85), rgba(15,23,42,.75));
border-color:rgba(148,163,184,.34);
color:#f8fafc;
}
@keyframes rxOrbit{
to{transform:rotate(360deg) scale(var(--rx-scale, 1));}
}
@keyframes rxSheen{
0%{background-position:0% 50%;}
100%{background-position:200% 50%;}
}
@media (max-width: 980px){
.rxMesh{display:none;}
.home .rxHero__lead{font-size:.98rem; line-height:1.6;}
.home .rxHero__copy,
.home .rxGlass{padding:18px;}
}
@media (max-width: 640px){
.home .rxHero{padding-top:40px;}
.home .rxHero__title{font-size:clamp(1.9rem, 9vw, 2.55rem);}
.home .rxHero__chips{gap:8px;}
.home .rxHero__chips li{font-size:11px; padding:7px 10px;}
}
@media (prefers-reduced-motion: reduce){
.rxMesh__ring,
.home .rxHero .btn--primary,
.home .rxFinal .btn--primary{
animation:none !important;
}
.rxReveal,
body.nbn .rxTilt{
transition:none !important;
transform:none !important;
}
} body.nbn .plansGridPro{
gap:18px;
align-items:stretch;
}
body.nbn .planPro{
display:flex;
flex-direction:column;
min-height:100%;
position:relative;
overflow:hidden;
padding:20px;
border-radius:22px;
border:1px solid rgba(148,163,184,.34);
background:
linear-gradient(170deg, rgba(255,255,255,.96), rgba(248,250,252,.76));
box-shadow:
0 26px 52px rgba(15,23,42,.12),
inset 0 1px 0 rgba(255,255,255,.65);
}
body.nbn .planPro::before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:2px;
background:linear-gradient(90deg, rgba(59,130,246,.75), rgba(14,165,233,.75));
opacity:.9;
}
body.nbn .planPro__head{
gap:14px;
margin-bottom:12px;
}
body.nbn .planPro__name{
font-size:1.04rem;
letter-spacing:.01em;
}
body.nbn .planPro__desc{
color:#475569;
font-size:.84rem;
line-height:1.45;
}
body.nbn .planPro__badge{
border-color:rgba(148,163,184,.34);
background:rgba(241,245,249,.78);
color:#0f172a;
font-size:11px;
letter-spacing:.09em;
text-transform:uppercase;
}
body.nbn .planPro__price{
margin:4px 0 2px;
display:flex;
align-items:flex-end;
gap:8px;
line-height:1;
}
body.nbn .planPro__amount{
font-size:clamp(2.15rem, 4.6vw, 2.95rem);
font-weight:1000;
letter-spacing:-.03em;
}
body.nbn .planPro__currency{
margin-bottom:7px;
font-size:11px;
font-weight:1000;
letter-spacing:.12em;
text-transform:uppercase;
color:#1d4ed8;
}
body.nbn .planPro__sub{
color:#64748b;
font-size:12px;
font-weight:900;
letter-spacing:.07em;
text-transform:uppercase;
}
body.nbn .planPro__meta{
margin-top:10px;
margin-bottom:2px;
border:1px solid rgba(148,163,184,.28);
border-radius:12px;
background:rgba(241,245,249,.75);
color:#334155;
font-size:12px;
line-height:1.5;
font-weight:800;
padding:9px 11px;
}
body.nbn .planPro__list{
margin:12px 0 0;
padding:0;
list-style:none;
display:grid;
gap:8px;
}
body.nbn .planPro__list li{
margin:0;
padding-left:24px;
position:relative;
font-size:13px;
line-height:1.5;
}
body.nbn .planPro__list li::before{
content:"";
position:absolute;
left:0;
top:.28rem;
width:14px;
height:14px;
border-radius:999px;
border:1px solid rgba(37,99,235,.35);
background:linear-gradient(180deg, rgba(59,130,246,.22), rgba(14,165,233,.2));
box-shadow:inset 0 0 0 3px rgba(255,255,255,.85);
}
body.nbn .planPro__actions{
margin-top:auto;
padding-top:16px;
}
body.nbn .planPro__actions .btn{
min-height:44px;
border-radius:12px;
}
body.nbn .planPro--featured{
border-color:rgba(37,99,235,.46);
box-shadow:
0 30px 62px rgba(37,99,235,.18),
inset 0 1px 0 rgba(255,255,255,.7);
}
body.nbn .planPro--featured::before{
background:linear-gradient(90deg, #2563eb, #38bdf8);
}
body.nbn .planPro--value{
padding-top:46px;
border-color:rgba(234,179,8,.55);
box-shadow:
0 30px 62px rgba(202,138,4,.16),
inset 0 1px 0 rgba(255,255,255,.68);
}
body.nbn .planPro--value::before{
background:linear-gradient(90deg, #f59e0b, #facc15);
}
body.nbn .planPro--value .planPro__tag{
top:12px;
right:12px;
left:auto;
margin:0;
border-color:rgba(234,179,8,.6);
background:linear-gradient(180deg, rgba(250,204,21,.24), rgba(234,179,8,.18));
color:#713f12;
font-size:10px;
letter-spacing:.1em;
text-transform:uppercase;
}
body.nbn .planPro--value .planPro__currency{
color:#a16207;
}
body.nbn.theme-dark .planPro{
border-color:rgba(148,163,184,.3);
background:
linear-gradient(165deg, rgba(8,16,36,.82), rgba(7,12,28,.66));
box-shadow:
0 28px 58px rgba(2,6,23,.58),
inset 0 1px 0 rgba(255,255,255,.08);
}
body.nbn.theme-dark .planPro::before{
opacity:1;
}
body.nbn.theme-dark .planPro__desc{
color:#cbd5e1;
}
body.nbn.theme-dark .planPro__badge{
border-color:rgba(148,163,184,.33);
background:rgba(30,41,59,.72);
color:#f8fafc;
}
body.nbn.theme-dark .planPro__currency{
color:#93c5fd;
}
body.nbn.theme-dark .planPro__sub{
color:#94a3b8;
}
body.nbn.theme-dark .planPro__meta{
border-color:rgba(148,163,184,.28);
background:rgba(15,23,42,.72);
color:#cbd5e1;
}
body.nbn.theme-dark .planPro__list li{
color:#e2e8f0;
}
body.nbn.theme-dark .planPro__list li::before{
border-color:rgba(125,211,252,.42);
background:linear-gradient(180deg, rgba(56,189,248,.28), rgba(37,99,235,.24));
box-shadow:inset 0 0 0 3px rgba(2,6,23,.85);
}
body.nbn.theme-dark .planPro--featured{
border-color:rgba(96,165,250,.52);
box-shadow:
0 34px 66px rgba(30,64,175,.34),
inset 0 1px 0 rgba(255,255,255,.1);
}
body.nbn.theme-dark .planPro--value{
border-color:rgba(250,204,21,.52);
box-shadow:
0 34px 66px rgba(161,98,7,.34),
inset 0 1px 0 rgba(255,255,255,.1);
}
body.nbn.theme-dark .planPro--value .planPro__tag{
border-color:rgba(253,224,71,.46);
background:linear-gradient(180deg, rgba(250,204,21,.22), rgba(202,138,4,.16));
color:#fef3c7;
}
body.nbn.theme-dark .planPro--value .planPro__currency{
color:#fcd34d;
}
@media (max-width: 980px){
body.nbn .planPro{
padding:18px;
}
} .tvxPage {
--tvx-surface: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
--tvx-surface-soft: linear-gradient(170deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.88));
--tvx-border: rgba(148, 163, 184, 0.35);
--tvx-border-strong: rgba(37, 99, 235, 0.35);
--tvx-shadow: 0 28px 56px rgba(15, 23, 42, 0.12);
--tvx-text: #0f172a;
--tvx-muted: #475569;
--tvx-chip-bg: rgba(241, 245, 249, 0.95);
--tvx-chip-border: rgba(148, 163, 184, 0.36);
position: relative;
isolation: isolate;
}
.tvxHero {
position: relative;
padding: 26px 0 14px;
overflow: hidden;
}
.tvxHero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(800px 360px at -10% -20%, rgba(14, 165, 233, 0.18), transparent 62%),
radial-gradient(720px 340px at 110% 120%, rgba(250, 204, 21, 0.15), transparent 65%),
linear-gradient(180deg, rgba(15, 23, 42, 0.03), transparent 72%);
}
.tvxHero__card {
position: relative;
z-index: 1;
overflow: hidden;
border: 1px solid var(--tvx-border);
border-radius: 26px;
background: var(--tvx-surface);
box-shadow: var(--tvx-shadow);
padding: 24px;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 20px;
backdrop-filter: blur(10px) saturate(120%);
}
.tvxHero__mesh {
position: absolute;
right: -140px;
top: -160px;
width: 420px;
height: 420px;
pointer-events: none;
border-radius: 999px;
border: 1px solid rgba(56, 189, 248, 0.28);
box-shadow:
inset 0 0 0 56px rgba(37, 99, 235, 0.05),
inset 0 0 0 120px rgba(14, 165, 233, 0.04);
opacity: 0.9;
}
.tvxHero__left,
.tvxHero__right {
position: relative;
z-index: 1;
}
.tvxHero__title {
margin: 12px 0 12px;
font-size: clamp(2.1rem, 4.6vw, 3.5rem);
line-height: 1.03;
letter-spacing: -0.03em;
}
.tvxHero__title em {
font-style: normal;
color: #2563eb;
}
.tvxHero__lead {
margin: 0;
color: var(--tvx-muted);
font-weight: 700;
line-height: 1.68;
max-width: 58ch;
}
.tvxHero__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.tvxHero__stats {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.tvxKpi {
border: 1px solid var(--tvx-border);
border-radius: 14px;
background: var(--tvx-surface-soft);
padding: 10px 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.tvxKpi strong {
display: block;
font-size: 1.3rem;
font-weight: 1000;
line-height: 1.1;
}
.tvxKpi span {
display: block;
margin-top: 3px;
color: var(--tvx-muted);
font-size: 12px;
font-weight: 800;
}
.tvxHero__right {
border: 1px solid var(--tvx-border);
border-radius: 18px;
background: var(--tvx-surface-soft);
padding: 14px;
}
.tvxSignal {
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid rgba(14, 165, 233, 0.36);
background: linear-gradient(145deg, rgba(14, 165, 233, 0.16), rgba(37, 99, 235, 0.14));
border-radius: 999px;
padding: 7px 11px;
color: #0f172a;
font-size: 12px;
font-weight: 900;
}
.tvxSignal::before {
content: "";
width: 8px;
height: 8px;
border-radius: 999px;
background: #10b981;
box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.18);
}
.tvxHero__list {
margin: 12px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 9px;
}
.tvxHero__list li {
display: flex;
align-items: flex-start;
gap: 9px;
color: var(--tvx-text);
line-height: 1.45;
font-weight: 850;
font-size: 13px;
}
.tvxHero__list i {
margin-top: 2px;
color: #2563eb;
}
.tvxGridSection {
padding-top: 12px;
}
.tvxShell {
border-radius: 24px;
border-color: var(--tvx-border);
background: var(--tvx-surface);
box-shadow: var(--tvx-shadow);
padding: 20px;
}
.tvxToolbar {
display: grid;
grid-template-columns: minmax(280px, 1.45fr) minmax(170px, 1fr) minmax(170px, 1fr) auto auto;
gap: 10px;
align-items: end;
}
.tvxField {
display: flex;
flex-direction: column;
gap: 6px;
}
.tvxField__label {
color: var(--tvx-muted);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 900;
}
.tvxField--search {
flex-direction: row;
align-items: center;
gap: 9px;
border: 1px solid var(--tvx-border);
border-radius: 14px;
padding: 0 12px;
background: rgba(255, 255, 255, 0.9);
min-height: 48px;
}
.tvxField--search i {
color: #2563eb;
}
.tvxPage .gridInput,
.tvxPage .gridSelect {
width: 100%;
border-radius: 14px;
border: 1px solid var(--tvx-border);
background: rgba(255, 255, 255, 0.9);
color: var(--tvx-text);
padding: 11px 12px;
font-size: 14px;
font-weight: 850;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.tvxPage .gridInput {
min-height: 48px;
}
.tvxPage .gridSelect {
min-height: 48px;
height: 48px;
max-height: 48px;
line-height: 1.2;
padding: 0 36px 0 12px;
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position:
calc(100% - 16px) calc(50% - 2px),
calc(100% - 11px) calc(50% - 2px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
} .tvxToolbar .tvxField > .gridSelect {
display: block;
width: 100%;
box-sizing: border-box;
margin: 0;
min-height: 48px !important;
height: 48px !important;
max-height: 48px !important;
line-height: 1.2;
padding: 0 36px 0 12px !important;
}
@media (min-width: 901px) {
.tvxPage .gridSelect {
min-height: 44px;
height: 44px;
max-height: 44px;
}
.tvxToolbar .tvxField > .gridSelect {
min-height: 44px !important;
height: 44px !important;
max-height: 44px !important;
}
}
.tvxField--search .gridInput {
border: 0;
min-height: auto;
padding: 0;
background: transparent;
box-shadow: none;
}
.tvxPage .gridInput:focus,
.tvxPage .gridSelect:focus {
outline: none;
border-color: var(--tvx-border-strong);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
background: #ffffff;
}
.tvxField--search:focus-within {
border-color: var(--tvx-border-strong);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
background: #ffffff;
}
.tvxCheck {
min-height: 48px;
border-radius: 14px;
border-color: var(--tvx-border);
background: rgba(255, 255, 255, 0.88);
padding: 0 12px;
}
.tvxCheck input {
accent-color: #2563eb;
}
.tvxReset {
min-height: 48px;
border-radius: 14px;
white-space: nowrap;
}
.tvxQuickWrap {
margin-top: 13px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.tvxQuick__label {
font-size: 12px;
color: var(--tvx-muted);
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.tvxQuick {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tvxQuick__btn {
border: 1px solid var(--tvx-chip-border);
background: var(--tvx-chip-bg);
color: var(--tvx-text);
border-radius: 999px;
min-height: 34px;
padding: 0 12px;
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 850;
font-size: 12px;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tvxQuick__btn small {
border: 1px solid rgba(148, 163, 184, 0.42);
background: rgba(255, 255, 255, 0.92);
border-radius: 999px;
padding: 1px 6px;
font-size: 10px;
line-height: 1.2;
color: var(--tvx-muted);
}
.tvxQuick__btn:hover {
transform: translateY(-1px);
border-color: rgba(37, 99, 235, 0.42);
}
.tvxQuick__btn.is-active {
color: #ffffff;
border-color: rgba(37, 99, 235, 0.68);
background: linear-gradient(120deg, #2563eb, #0ea5e9);
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.26);
}
.tvxQuick__btn.is-active small {
border-color: rgba(255, 255, 255, 0.36);
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.tvxActive {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tvxActive__chip {
border: 1px solid rgba(37, 99, 235, 0.35);
border-radius: 999px;
background: rgba(37, 99, 235, 0.1);
color: #0f172a;
min-height: 32px;
padding: 0 11px;
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.tvxActive__chip span[aria-hidden="true"] {
font-size: 11px;
opacity: 0.8;
}
.tvxMeta {
margin: 12px 0 14px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.tvxMeta__left {
display: grid;
gap: 4px;
}
.tvxPage .gridCount {
font-size: 1rem;
font-weight: 1000;
}
.tvxProgress {
color: var(--tvx-muted);
font-size: 12px;
font-weight: 800;
}
.tvxPage .gridHint {
color: var(--tvx-muted);
font-size: 12px;
font-weight: 800;
}
.tvxPage .channelsGrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.tvxPage .chCard {
position: relative;
overflow: hidden;
border: 1px solid var(--tvx-border);
border-radius: 18px;
padding: 12px;
background: var(--tvx-surface-soft);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.tvxPage .chCard::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 2px;
background: linear-gradient(90deg, rgba(37, 99, 235, 0.92), rgba(14, 165, 233, 0.76));
opacity: 0;
transition: opacity 0.24s ease;
}
.tvxPage .chCard:hover {
transform: translateY(-4px);
border-color: rgba(37, 99, 235, 0.48);
box-shadow: 0 20px 36px rgba(15, 23, 42, 0.12);
}
.tvxPage .chCard:hover::before {
opacity: 1;
}
.tvxPage .chCard.is-replay {
border-color: rgba(234, 179, 8, 0.56);
box-shadow: 0 16px 32px rgba(202, 138, 4, 0.14);
}
.tvxPage .chRank {
position: absolute;
top: 8px;
left: 8px;
min-width: 32px;
height: 20px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.34);
background: rgba(255, 255, 255, 0.84);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 900;
color: var(--tvx-muted);
}
.tvxPage .chLogoWrap {
position: relative;
margin-top: 12px;
height: 56px;
border: 1px solid rgba(148, 163, 184, 0.3);
border-radius: 12px;
background: rgba(255, 255, 255, 0.82);
display: flex;
align-items: center;
justify-content: center;
}
.tvxPage .chLogo {
width: calc(100% - 14px);
height: calc(100% - 14px);
object-fit: contain;
}
.tvxPage .chLogoFallback {
display: none;
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid rgba(37, 99, 235, 0.4);
background: linear-gradient(145deg, rgba(37, 99, 235, 0.2), rgba(14, 165, 233, 0.22));
color: #1e3a8a;
font-size: 11px;
font-weight: 1000;
align-items: center;
justify-content: center;
}
.tvxPage .chLogoWrap.is-fallback .chLogo {
display: none;
}
.tvxPage .chLogoWrap.is-fallback .chLogoFallback {
display: inline-flex;
}
.tvxPage .chName {
margin-top: 10px;
text-align: center;
font-size: 13px;
line-height: 1.35;
font-weight: 950;
}
.tvxPage .chMeta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-top: 9px;
}
.tvxPage .chPill {
border: 1px solid var(--tvx-chip-border);
border-radius: 999px;
min-height: 22px;
padding: 0 8px;
background: var(--tvx-chip-bg);
color: var(--tvx-text);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
}
.tvxPage .chReplay.chPill {
border-color: rgba(234, 179, 8, 0.5);
background: linear-gradient(140deg, rgba(250, 204, 21, 0.24), rgba(234, 179, 8, 0.14));
color: #854d0e;
}
.tvxPage .chCard--skeleton {
pointer-events: none;
border-color: rgba(148, 163, 184, 0.22);
}
.tvxPage .chSkeleton {
border-radius: 10px;
background: linear-gradient(90deg, rgba(203, 213, 225, 0.45) 25%, rgba(226, 232, 240, 0.88) 45%, rgba(203, 213, 225, 0.45) 65%);
background-size: 220% 100%;
animation: tvxShimmer 1.25s linear infinite;
}
.tvxPage .chSkeleton--rank {
width: 36px;
height: 20px;
}
.tvxPage .chSkeleton--logo {
margin-top: 12px;
height: 56px;
}
.tvxPage .chSkeleton--name {
margin-top: 10px;
height: 14px;
}
.tvxPage .chSkeleton--chip {
margin-top: 10px;
height: 22px;
width: 70%;
margin-left: auto;
margin-right: auto;
border-radius: 999px;
}
.tvxBottom {
margin-top: 16px;
}
.tvxEmpty {
margin-top: 16px;
border: 1px dashed rgba(148, 163, 184, 0.55);
border-radius: 16px;
background: rgba(241, 245, 249, 0.8);
padding: 20px;
text-align: center;
}
.tvxEmpty__title {
font-size: 1.05rem;
font-weight: 1000;
margin-bottom: 8px;
}
.tvxEmpty p {
margin: 0 0 12px;
color: var(--tvx-muted);
font-size: 13px;
font-weight: 800;
}
.tvxPage .gridError {
border: 1px solid rgba(239, 68, 68, 0.28);
border-radius: 14px;
background: rgba(254, 242, 242, 0.92);
color: #7f1d1d;
font-size: 13px;
font-weight: 900;
padding: 14px;
}
@keyframes tvxShimmer {
to {
background-position: -220% 0;
}
}
@media (max-width: 1180px) {
.tvxToolbar {
grid-template-columns: minmax(260px, 1.35fr) minmax(160px, 1fr) minmax(160px, 1fr) auto;
}
.tvxReset {
grid-column: 4;
}
.tvxPage .channelsGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.tvxHero__card {
grid-template-columns: 1fr;
padding: 20px;
}
.tvxHero__stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tvxToolbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tvxField--search {
grid-column: 1 / -1;
}
.tvxReset {
grid-column: auto;
}
.tvxMeta {
flex-direction: column;
align-items: flex-start;
}
.tvxPage .channelsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.tvxHero {
padding-top: 18px;
}
.tvxHero__title {
font-size: clamp(1.9rem, 9vw, 2.4rem);
}
.tvxHero__stats {
grid-template-columns: 1fr;
}
.tvxShell {
padding: 16px;
}
.tvxToolbar {
grid-template-columns: 1fr;
}
.tvxCheck,
.tvxReset {
width: 100%;
justify-content: center;
}
.tvxPage .channelsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 430px) {
.tvxPage .channelsGrid {
grid-template-columns: 1fr;
}
}
body.nbn.theme-dark .tvxPage {
--tvx-surface: linear-gradient(165deg, rgba(8, 16, 36, 0.84), rgba(7, 12, 28, 0.72));
--tvx-surface-soft: linear-gradient(170deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.64));
--tvx-border: rgba(148, 163, 184, 0.3);
--tvx-border-strong: rgba(125, 211, 252, 0.52);
--tvx-shadow: 0 32px 64px rgba(2, 6, 23, 0.54);
--tvx-text: #e2e8f0;
--tvx-muted: #94a3b8;
--tvx-chip-bg: rgba(30, 41, 59, 0.78);
--tvx-chip-border: rgba(148, 163, 184, 0.34);
}
body.nbn.theme-dark .tvxHero::before {
background:
radial-gradient(820px 370px at -10% -22%, rgba(14, 165, 233, 0.22), transparent 62%),
radial-gradient(760px 340px at 110% 120%, rgba(250, 204, 21, 0.14), transparent 66%),
linear-gradient(180deg, rgba(2, 6, 23, 0.4), transparent 72%);
}
body.nbn.theme-dark .tvxHero__mesh {
border-color: rgba(125, 211, 252, 0.28);
box-shadow:
inset 0 0 0 56px rgba(37, 99, 235, 0.14),
inset 0 0 0 120px rgba(14, 165, 233, 0.1);
}
body.nbn.theme-dark .tvxHero__title em,
body.nbn.theme-dark .tvxHero__list i {
color: #7dd3fc;
}
body.nbn.theme-dark .tvxSignal {
border-color: rgba(125, 211, 252, 0.34);
background: linear-gradient(145deg, rgba(14, 165, 233, 0.2), rgba(37, 99, 235, 0.24));
color: #dbeafe;
}
body.nbn.theme-dark .tvxPage .gridInput,
body.nbn.theme-dark .tvxPage .gridSelect,
body.nbn.theme-dark .tvxField--search,
body.nbn.theme-dark .tvxCheck,
body.nbn.theme-dark .tvxPage .chLogoWrap,
body.nbn.theme-dark .tvxPage .chRank {
background: rgba(15, 23, 42, 0.78);
}
body.nbn.theme-dark .tvxPage .gridInput,
body.nbn.theme-dark .tvxPage .gridSelect,
body.nbn.theme-dark .tvxPage .chRank {
color: #e2e8f0;
}
body.nbn.theme-dark .tvxField--search:focus-within,
body.nbn.theme-dark .tvxPage .gridInput:focus,
body.nbn.theme-dark .tvxPage .gridSelect:focus {
border-color: rgba(125, 211, 252, 0.55);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22);
}
body.nbn.theme-dark .tvxQuick__btn.is-active {
background: linear-gradient(120deg, #0284c7, #2563eb);
}
body.nbn.theme-dark .tvxActive__chip {
border-color: rgba(125, 211, 252, 0.42);
background: rgba(14, 165, 233, 0.16);
color: #e2e8f0;
}
body.nbn.theme-dark .tvxPage .chCard {
box-shadow: 0 20px 38px rgba(2, 6, 23, 0.45);
}
body.nbn.theme-dark .tvxPage .chCard:hover {
border-color: rgba(125, 211, 252, 0.46);
box-shadow: 0 26px 48px rgba(2, 6, 23, 0.56);
}
body.nbn.theme-dark .tvxPage .chReplay.chPill {
border-color: rgba(253, 224, 71, 0.45);
background: linear-gradient(140deg, rgba(250, 204, 21, 0.2), rgba(202, 138, 4, 0.12));
color: #fde68a;
}
body.nbn.theme-dark .tvxPage .chLogoFallback {
color: #dbeafe;
}
body.nbn.theme-dark .tvxPage .gridError {
border-color: rgba(248, 113, 113, 0.35);
background: rgba(69, 10, 10, 0.7);
color: #fecaca;
}
body.nbn.theme-dark .tvxEmpty {
border-color: rgba(148, 163, 184, 0.38);
background: rgba(15, 23, 42, 0.76);
}
@media (prefers-reduced-motion: reduce) {
.tvxQuick__btn,
.tvxPage .chCard,
.tvxPage .chSkeleton {
animation: none !important;
transition: none !important;
transform: none !important;
}
} .tvxPage::before,
.tvxPage::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
overflow: hidden;
}
.tvxPage::before {
background:
radial-gradient(46% 34% at 6% 8%, rgba(14, 165, 233, 0.28), transparent 74%),
radial-gradient(34% 30% at 24% 36%, rgba(37, 99, 235, 0.16), transparent 76%);
opacity: 0.7;
}
.tvxPage::after {
background:
radial-gradient(42% 32% at 94% 22%, rgba(250, 204, 21, 0.22), transparent 74%),
radial-gradient(36% 30% at 82% 62%, rgba(56, 189, 248, 0.14), transparent 78%);
opacity: 0.62;
}
.tvxHero__card {
--tvx-mx: 18%;
--tvx-my: 30%;
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.84)),
radial-gradient(460px 220px at var(--tvx-mx) var(--tvx-my), rgba(14, 165, 233, 0.16), transparent 72%);
}
.tvxHero__mesh {
transform: translate3d(calc((var(--tvx-mx) - 50%) * -0.18), calc((var(--tvx-my) - 50%) * -0.12), 0);
transition: transform 0.25s ease;
}
.tvxNebula {
position: absolute;
pointer-events: none;
border-radius: 999px;
filter: blur(1px);
mix-blend-mode: screen;
opacity: 0.7;
}
.tvxNebula--a {
width: clamp(180px, 26vw, 360px);
height: clamp(180px, 26vw, 360px);
left: -70px;
bottom: -120px;
background: radial-gradient(circle, rgba(56, 189, 248, 0.32), transparent 70%);
animation: tvxNebulaFloatA 14s ease-in-out infinite alternate;
}
.tvxNebula--b {
width: clamp(210px, 28vw, 420px);
height: clamp(210px, 28vw, 420px);
right: -120px;
top: -140px;
background: radial-gradient(circle, rgba(37, 99, 235, 0.28), transparent 72%);
animation: tvxNebulaFloatB 19s ease-in-out infinite alternate;
}
.tvxScanline {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
linear-gradient(110deg, rgba(255, 255, 255, 0.24), transparent 45%),
repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.032) 0 1px, transparent 1px 58px);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.28));
}
.tvxHero__title {
background: linear-gradient(108deg, #0f172a 0%, #1d4ed8 43%, #06b6d4 72%, #0f172a 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tvxHero__title em {
color: transparent;
background: linear-gradient(108deg, #2563eb 0%, #0ea5e9 80%);
-webkit-background-clip: text;
background-clip: text;
}
.tvxHero__chips {
margin-top: 13px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tvxHero__chips span {
border: 1px solid rgba(148, 163, 184, 0.34);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.82));
border-radius: 999px;
min-height: 28px;
padding: 0 10px;
display: inline-flex;
align-items: center;
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 900;
color: #334155;
}
.tvxHero__right {
position: relative;
overflow: hidden;
}
.tvxHero__right::after {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
border-radius: inherit;
background: radial-gradient(260px at 78% 18%, rgba(56, 189, 248, 0.2), transparent 72%);
}
.tvxScope {
margin-top: 12px;
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 12px;
background: rgba(255, 255, 255, 0.58);
padding: 9px 10px;
}
.tvxScope__bars {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 5px;
align-items: end;
height: 30px;
}
.tvxScope__bars span {
border-radius: 4px;
background: linear-gradient(180deg, #0ea5e9, #2563eb);
height: 42%;
animation: tvxBars 1.6s ease-in-out infinite;
}
.tvxScope__bars span:nth-child(2) { animation-delay: 0.1s; }
.tvxScope__bars span:nth-child(3) { animation-delay: 0.2s; }
.tvxScope__bars span:nth-child(4) { animation-delay: 0.3s; }
.tvxScope__bars span:nth-child(5) { animation-delay: 0.4s; }
.tvxScope__bars span:nth-child(6) { animation-delay: 0.5s; }
.tvxScope__label {
margin-top: 6px;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #64748b;
font-weight: 900;
}
.tvxPage .chCard {
--tvx-hue: 212;
--tvx-tilt-x: 0deg;
--tvx-tilt-y: 0deg;
--tvx-glow-x: 18%;
--tvx-glow-y: -8%;
--tvx-delay: 0ms;
background:
linear-gradient(168deg, hsla(var(--tvx-hue), 88%, 97%, 0.92), hsla(var(--tvx-hue), 68%, 94%, 0.56)),
linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(241, 245, 249, 0.84));
border-color: hsla(var(--tvx-hue), 60%, 62%, 0.32);
transform: perspective(1000px) rotateX(var(--tvx-tilt-x)) rotateY(var(--tvx-tilt-y));
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
animation: tvxCardIn 0.46s cubic-bezier(0.2, 0.85, 0.25, 1) both;
animation-delay: var(--tvx-delay);
}
.tvxPage .chCard::before {
opacity: 0.9;
background: linear-gradient(90deg, hsla(var(--tvx-hue), 82%, 52%, 0.96), hsla(calc(var(--tvx-hue) + 26), 88%, 58%, 0.9));
}
.tvxPage .chCard::after {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
border-radius: inherit;
background: radial-gradient(220px at var(--tvx-glow-x) var(--tvx-glow-y), hsla(var(--tvx-hue), 88%, 62%, 0.22), transparent 72%);
opacity: 0.95;
}
.tvxPage .chCard:hover {
border-color: hsla(var(--tvx-hue), 82%, 52%, 0.54);
box-shadow:
0 22px 42px rgba(15, 23, 42, 0.14),
0 0 0 1px hsla(var(--tvx-hue), 85%, 58%, 0.14);
}
.tvxPage .chRank {
border-color: hsla(var(--tvx-hue), 58%, 62%, 0.35);
background: linear-gradient(145deg, hsla(var(--tvx-hue), 92%, 98%, 0.96), hsla(var(--tvx-hue), 82%, 95%, 0.88));
color: hsl(var(--tvx-hue), 72%, 36%);
}
.tvxPage .chCat.chPill {
border-color: hsla(var(--tvx-hue), 58%, 62%, 0.42);
background: hsla(var(--tvx-hue), 94%, 95%, 0.8);
color: hsl(var(--tvx-hue), 70%, 32%);
}
.tvxPage .chQual.chPill {
border-color: hsla(calc(var(--tvx-hue) + 30), 54%, 62%, 0.4);
background: hsla(calc(var(--tvx-hue) + 24), 94%, 95%, 0.75);
color: hsl(calc(var(--tvx-hue) + 24), 66%, 34%);
}
.tvxPage .tvxMeta,
.tvxPage .tvxQuickWrap,
.tvxPage .tvxToolbar {
position: relative;
z-index: 2;
}
body.nbn.theme-dark .tvxPage::before {
background: radial-gradient(circle, rgba(14, 165, 233, 0.34), transparent 68%);
}
body.nbn.theme-dark .tvxPage::after {
background: radial-gradient(circle, rgba(250, 204, 21, 0.2), transparent 72%);
}
body.nbn.theme-dark .tvxHero__card {
background:
linear-gradient(160deg, rgba(8, 16, 36, 0.88), rgba(7, 12, 28, 0.78)),
radial-gradient(460px 220px at var(--tvx-mx) var(--tvx-my), rgba(14, 165, 233, 0.22), transparent 72%);
}
body.nbn.theme-dark .tvxHero__title {
background: linear-gradient(108deg, #f8fafc 0%, #dbeafe 32%, #7dd3fc 68%, #fde68a 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.nbn.theme-dark .tvxHero__chips span,
body.nbn.theme-dark .tvxScope {
border-color: rgba(148, 163, 184, 0.33);
background: rgba(15, 23, 42, 0.68);
color: #cbd5e1;
}
body.nbn.theme-dark .tvxScope__label {
color: #93c5fd;
}
body.nbn.theme-dark .tvxPage .chCard {
background:
linear-gradient(168deg, hsla(var(--tvx-hue), 64%, 16%, 0.36), hsla(var(--tvx-hue), 62%, 13%, 0.22)),
linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(15, 23, 42, 0.72));
border-color: hsla(var(--tvx-hue), 58%, 62%, 0.36);
}
body.nbn.theme-dark .tvxPage .chCard::after {
background: radial-gradient(220px at var(--tvx-glow-x) var(--tvx-glow-y), hsla(var(--tvx-hue), 90%, 62%, 0.26), transparent 72%);
}
body.nbn.theme-dark .tvxPage .chRank {
border-color: hsla(var(--tvx-hue), 62%, 62%, 0.42);
background: linear-gradient(145deg, hsla(var(--tvx-hue), 52%, 24%, 0.8), hsla(var(--tvx-hue), 42%, 18%, 0.78));
color: hsla(var(--tvx-hue), 92%, 84%, 0.95);
}
body.nbn.theme-dark .tvxPage .chCat.chPill {
border-color: hsla(var(--tvx-hue), 58%, 62%, 0.48);
background: hsla(var(--tvx-hue), 56%, 24%, 0.45);
color: hsla(var(--tvx-hue), 96%, 86%, 0.95);
}
body.nbn.theme-dark .tvxPage .chQual.chPill {
border-color: hsla(calc(var(--tvx-hue) + 30), 58%, 62%, 0.46);
background: hsla(calc(var(--tvx-hue) + 24), 56%, 24%, 0.4);
color: hsla(calc(var(--tvx-hue) + 22), 96%, 86%, 0.95);
}
@keyframes tvxAuroraA {
0% { transform: translate3d(0, 0, 0) scale(1); }
100% { transform: translate3d(72px, 30px, 0) scale(1.14); }
}
@keyframes tvxAuroraB {
0% { transform: translate3d(0, 0, 0) scale(1); }
100% { transform: translate3d(-68px, -34px, 0) scale(1.15); }
}
@keyframes tvxNebulaFloatA {
0% { transform: translate3d(0, 0, 0) scale(1); }
100% { transform: translate3d(50px, -24px, 0) scale(1.08); }
}
@keyframes tvxNebulaFloatB {
0% { transform: translate3d(0, 0, 0) scale(1); }
100% { transform: translate3d(-58px, 36px, 0) scale(1.09); }
}
@keyframes tvxBars {
0%, 100% { height: 22%; }
50% { height: 100%; }
}
@keyframes tvxCardIn {
from {
opacity: 0;
transform: perspective(1000px) rotateX(var(--tvx-tilt-x)) rotateY(var(--tvx-tilt-y)) translateY(14px) scale(0.98);
}
to {
opacity: 1;
transform: perspective(1000px) rotateX(var(--tvx-tilt-x)) rotateY(var(--tvx-tilt-y)) translateY(0) scale(1);
}
}
@media (max-width: 980px) {
.tvxPage::before,
.tvxPage::after,
.tvxNebula,
.tvxScanline {
opacity: 0.45;
}
.tvxScope {
margin-top: 10px;
}
}
@media (max-width: 700px) {
.tvxHero__chips {
gap: 6px;
}
.tvxHero__chips span {
min-height: 26px;
font-size: 10px;
}
.tvxScope {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.tvxPage::before,
.tvxPage::after,
.tvxNebula,
.tvxScope__bars span,
.tvxPage .chCard {
animation: none !important;
}
} body.nbn {
--neo-a: rgba(56, 189, 248, 0.2);
--neo-b: rgba(37, 99, 235, 0.18);
--neo-c: rgba(250, 204, 21, 0.14);
--neo-border: rgba(148, 163, 184, 0.36);
--neo-shadow: 0 26px 52px rgba(15, 23, 42, 0.14);
}
body.nbn .hero {
isolation: isolate;
}
body.nbn .hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(106deg, rgba(255, 255, 255, 0.32), transparent 48%),
repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.024) 0 1px, transparent 1px 64px);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.16));
}
body.nbn .heroCard {
position: relative;
overflow: hidden;
border-color: var(--neo-border);
border-radius: 24px;
background:
linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.84)),
radial-gradient(460px 220px at 14% 10%, var(--neo-a), transparent 68%);
box-shadow: var(--neo-shadow);
backdrop-filter: blur(10px) saturate(118%);
}
body.nbn .heroCard::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 2px;
background: linear-gradient(90deg, #2563eb, #0ea5e9, #f59e0b);
opacity: 0.85;
}
body.nbn .heroCard::after {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
border-radius: inherit;
background: radial-gradient(380px at var(--rx-glow-x, 18%) var(--rx-glow-y, -10%), rgba(56, 189, 248, 0.2), transparent 72%);
}
body.nbn .heroTitle {
background: linear-gradient(108deg, #0f172a 0%, #1d4ed8 44%, #0ea5e9 72%, #0f172a 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.025em;
}
body.nbn .heroTitle em {
background: linear-gradient(108deg, #2563eb 0%, #0ea5e9 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.nbn .heroLead {
color: #475569;
font-weight: 750;
}
body.nbn .heroActions .btn {
min-height: 44px;
border-radius: 13px;
}
body.nbn .heroActions .btn--primary {
border: 1px solid rgba(96, 165, 250, 0.42);
background: linear-gradient(120deg, #2563eb 0%, #0ea5e9 56%, #2563eb 100%);
background-size: 200% 100%;
box-shadow: 0 16px 34px rgba(37, 99, 235, 0.28);
animation: neoPulse 8s linear infinite;
}
body.nbn .heroActions .btn--soft {
border-color: rgba(148, 163, 184, 0.34);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.86));
}
body.nbn .heroActions .btn--ghost {
border-color: rgba(148, 163, 184, 0.36);
background: rgba(255, 255, 255, 0.62);
}
body.nbn .heroRight {
border-left-color: rgba(148, 163, 184, 0.34);
background: linear-gradient(170deg, rgba(255, 255, 255, 0.62), rgba(241, 245, 249, 0.5));
border-radius: 16px;
padding: 14px 0 14px 18px;
}
body.nbn .pill {
border-color: rgba(56, 189, 248, 0.4);
background: linear-gradient(140deg, rgba(56, 189, 248, 0.18), rgba(37, 99, 235, 0.14));
color: #0f172a;
}
body.nbn .stat,
body.nbn .note {
border-color: rgba(148, 163, 184, 0.3);
background: linear-gradient(170deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.76));
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
body.nbn .contentCard:not(.tvxShell),
body.nbn .postCard,
body.nbn .legalAside,
body.nbn .contactBox,
body.nbn .speedCard,
body.nbn .embedFrame,
body.nbn .faq details,
body.nbn .faqItem {
border-color: var(--neo-border);
background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.82));
box-shadow: var(--neo-shadow);
}
body.nbn .contentCard:not(.tvxShell),
body.nbn .postCard,
body.nbn .legalAside,
body.nbn .contactBox,
body.nbn .speedCard {
position: relative;
overflow: hidden;
}
body.nbn .contentCard:not(.tvxShell)::after,
body.nbn .postCard::after,
body.nbn .legalAside::after,
body.nbn .contactBox::after,
body.nbn .speedCard::after {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
border-radius: inherit;
background: radial-gradient(340px at var(--rx-glow-x, 18%) var(--rx-glow-y, -8%), rgba(56, 189, 248, 0.16), transparent 70%);
}
body.nbn .postCard {
transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
body.nbn .postCard:hover {
transform: translateY(-4px);
border-color: rgba(37, 99, 235, 0.48);
box-shadow: 0 28px 50px rgba(15, 23, 42, 0.16);
}
body.nbn .postCard__thumb img {
transition: transform 0.35s ease;
}
body.nbn .postCard:hover .postCard__thumb img {
transform: scale(1.04);
}
body.nbn .postCard__title a {
line-height: 1.2;
}
body.nbn .legalToc__item,
body.nbn .speedRow {
border-color: rgba(148, 163, 184, 0.3);
background: linear-gradient(170deg, rgba(255, 255, 255, 0.88), rgba(241, 245, 249, 0.76));
}
body.nbn .nbnField input,
body.nbn .nbnField textarea,
body.nbn .gridInput,
body.nbn .gridSelect,
body.nbn .faqQ {
border-color: rgba(148, 163, 184, 0.35);
background: rgba(255, 255, 255, 0.94);
}
body.nbn .nbnField input:focus,
body.nbn .nbnField textarea:focus,
body.nbn .gridInput:focus,
body.nbn .gridSelect:focus,
body.nbn .faqQ:focus {
outline: none;
border-color: rgba(37, 99, 235, 0.52);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
body.nbn .embedFrame iframe {
height: clamp(560px, 70vh, 900px);
}
body.nbn .pager {
gap: 10px;
}
body.nbn.theme-dark {
--neo-border: rgba(148, 163, 184, 0.3);
--neo-shadow: 0 34px 66px rgba(2, 6, 23, 0.52);
}
body.nbn.theme-dark .hero::after {
background:
linear-gradient(108deg, rgba(148, 163, 184, 0.14), transparent 50%),
repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.05) 0 1px, transparent 1px 64px);
}
body.nbn.theme-dark .heroCard {
background:
linear-gradient(165deg, rgba(8, 16, 36, 0.86), rgba(7, 12, 28, 0.74)),
radial-gradient(460px 220px at 14% 10%, rgba(14, 165, 233, 0.22), transparent 72%);
}
body.nbn.theme-dark .heroTitle {
background: linear-gradient(108deg, #f8fafc 0%, #dbeafe 30%, #7dd3fc 66%, #fde68a 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.nbn.theme-dark .heroTitle em {
background: linear-gradient(108deg, #7dd3fc 0%, #fcd34d 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.nbn.theme-dark .heroLead,
body.nbn.theme-dark .stat__v,
body.nbn.theme-dark .note__v,
body.nbn.theme-dark .contactV,
body.nbn.theme-dark .speedMini,
body.nbn.theme-dark .speedP,
body.nbn.theme-dark .gridHint,
body.nbn.theme-dark .embedNote,
body.nbn.theme-dark .postCard__ex,
body.nbn.theme-dark .postCard__meta,
body.nbn.theme-dark .legalToc__hint,
body.nbn.theme-dark .legalAside__v,
body.nbn.theme-dark .crumbs,
body.nbn.theme-dark .faq__a {
color: #cbd5e1;
}
body.nbn.theme-dark .heroRight {
border-left-color: rgba(148, 163, 184, 0.32);
background: linear-gradient(170deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.56));
}
body.nbn.theme-dark .pill {
border-color: rgba(125, 211, 252, 0.45);
background: linear-gradient(140deg, rgba(14, 165, 233, 0.26), rgba(37, 99, 235, 0.2));
color: #e0f2fe;
}
body.nbn.theme-dark .stat,
body.nbn.theme-dark .note,
body.nbn.theme-dark .contentCard:not(.tvxShell),
body.nbn.theme-dark .postCard,
body.nbn.theme-dark .legalAside,
body.nbn.theme-dark .contactBox,
body.nbn.theme-dark .speedCard,
body.nbn.theme-dark .embedFrame,
body.nbn.theme-dark .faq details,
body.nbn.theme-dark .faqItem {
border-color: var(--neo-border);
background: linear-gradient(165deg, rgba(8, 16, 36, 0.8), rgba(7, 12, 28, 0.68));
box-shadow: var(--neo-shadow);
}
body.nbn.theme-dark .legalToc__item,
body.nbn.theme-dark .speedRow {
border-color: rgba(148, 163, 184, 0.32);
background: linear-gradient(170deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.7));
color: #e2e8f0;
}
body.nbn.theme-dark .nbnField input,
body.nbn.theme-dark .nbnField textarea,
body.nbn.theme-dark .gridInput,
body.nbn.theme-dark .gridSelect,
body.nbn.theme-dark .faqQ {
border-color: rgba(148, 163, 184, 0.34);
background: rgba(15, 23, 42, 0.78);
color: #e2e8f0;
}
body.nbn.theme-dark .nbnField input:focus,
body.nbn.theme-dark .nbnField textarea:focus,
body.nbn.theme-dark .gridInput:focus,
body.nbn.theme-dark .gridSelect:focus,
body.nbn.theme-dark .faqQ:focus {
border-color: rgba(125, 211, 252, 0.58);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.24);
}
@media (max-width: 900px) {
.brand {
min-width: 0;
gap: 10px;
}
.brand__tag {
display: none;
}
.mobile-menu-btn {
display: inline-flex !important;
}
.nav-mobile {
left: 10px;
right: 10px;
top: 62px;
}
.nav-mobile.is-open {
display: block !important;
}
}
@media (max-width: 760px) {
body.nbn .hero {
padding-top: 20px;
}
body.nbn .heroTitle {
font-size: clamp(1.9rem, 8.5vw, 2.5rem);
}
body.nbn .heroCard__inner {
gap: 14px;
padding: 16px;
}
body.nbn .heroActions .btn,
.contactBtns .btn,
.speedBtns .btn,
.nbnForm__actions .btn {
width: 100%;
}
.speedRow {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.pager {
flex-direction: column;
align-items: stretch;
}
.pager > div {
width: 100%;
}
.pager a {
display: inline-flex;
width: 100%;
justify-content: center;
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px 12px;
text-decoration: none;
}
.crumbs {
flex-wrap: wrap;
}
}
@media (max-width: 520px) {
.mobileDock {
grid-template-columns: repeat(7, minmax(0, 1fr));
overflow-x: hidden;
gap: 6px;
padding: 6px;
scrollbar-width: none;
}
.mobileDock::-webkit-scrollbar {
display: none;
}
.mobileDock__link {
min-width: 0;
}
body.nbn {
padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
}
@keyframes neoPulse {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
body.nbn .heroActions .btn--primary {
animation: none !important;
}
body.nbn .postCard,
body.nbn .heroCard {
transition: none !important;
transform: none !important;
}
} body.nbn .wysiwyg img,
body.nbn .wysiwyg video,
body.nbn .wysiwyg iframe {
max-width: 100%;
height: auto;
}
body.nbn .wysiwyg table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
body.nbn .wysiwyg pre,
body.nbn .wysiwyg code {
max-width: 100%;
overflow-x: auto;
}
body.nbn .nav-mobile {
z-index: 12010;
}
body.nbn .mobile-menu-btn {
position: relative;
z-index: 12020;
}
body.nbn .cookieBar {
z-index: 12030;
}
@media (max-width: 1024px) {
body.nbn .heroCard__inner {
grid-template-columns: 1fr;
}
body.nbn .heroRight {
border-left: 0;
border-top: 1px solid var(--line);
padding-left: 0;
padding-top: 12px;
}
body.nbn .speedLayout,
body.nbn .contactLayout,
body.nbn .legalLayout,
body.nbn .rxSplit,
body.nbn .rxStack,
body.nbn .rxFlow,
body.nbn .rxHero__grid,
body.nbn .rxTrust {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
body.nbn .topbar {
top: 0;
}
body.nbn .topbar__inner {
padding: 10px 0;
gap: 10px;
}
body.nbn .brand {
min-width: 0;
max-width: calc(100% - 58px);
}
body.nbn .brand__name {
font-size: 15px;
line-height: 1.1;
}
body.nbn .brand__tag {
display: none;
}
body.nbn .mobileDock {
z-index: 12000;
}
body.nbn .cookieBar {
bottom: calc(84px + env(safe-area-inset-bottom));
}
body.nbn .cookieBar__inner {
border-radius: 14px;
padding: 12px;
}
body.nbn .cookieBar__actions .btn {
width: 100%;
}
body.nbn .legalAside {
position: relative;
top: auto;
}
body.nbn .legalToc__list {
max-height: 38vh;
overflow: auto;
padding-right: 4px;
-webkit-overflow-scrolling: touch;
}
body.nbn .legalToc__item {
line-height: 1.35;
}
}
@media (max-width: 768px) {
body.nbn .btn,
body.nbn .nav__link,
body.nbn .gridInput,
body.nbn .gridSelect,
body.nbn .nbnField input,
body.nbn .nbnField textarea,
body.nbn .faqQ {
font-size: 16px;
}
body.nbn .hero {
padding: 18px 0 8px;
}
body.nbn .heroCard,
body.nbn .contentCard,
body.nbn .postCard,
body.nbn .legalAside,
body.nbn .speedCard,
body.nbn .contactBox,
body.nbn .faq details,
body.nbn .faqItem {
border-radius: 16px;
}
body.nbn .heroCard__inner {
padding: 14px;
gap: 12px;
}
body.nbn .heroTitle {
font-size: clamp(1.8rem, 8.2vw, 2.35rem);
line-height: 1.07;
}
body.nbn .heroLead {
font-size: 0.98rem;
line-height: 1.55;
}
body.nbn .heroActions,
body.nbn .contactBtns,
body.nbn .speedBtns,
body.nbn .nbnForm__actions,
body.nbn .rxHero__actions,
body.nbn .rxFinal__actions {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
body.nbn .heroActions .btn,
body.nbn .contactBtns .btn,
body.nbn .speedBtns .btn,
body.nbn .nbnForm__actions .btn,
body.nbn .rxHero__actions .btn,
body.nbn .rxFinal__actions .btn {
width: 100%;
min-height: 46px;
}
body.nbn .gridMeta,
body.nbn .tvxMeta {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
body.nbn .postGrid {
grid-template-columns: 1fr;
gap: 12px;
}
body.nbn .postCard__body {
padding: 12px;
}
body.nbn .postCard__title {
font-size: 18px;
}
body.nbn .postCard__meta {
gap: 6px;
font-size: 11px;
}
body.nbn .pager {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
body.nbn .pager > div,
body.nbn .pager a {
width: 100%;
}
body.nbn .pager a {
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 44px;
border: 1px solid var(--line);
border-radius: 12px;
padding: 8px 12px;
text-decoration: none;
}
body.nbn .speedRow {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 10px;
}
body.nbn .speedCard {
padding: 12px;
}
body.nbn .speedList {
font-size: 13px;
line-height: 1.5;
}
body.nbn .embedFrame iframe {
height: min(66vh, 620px);
}
body.nbn .crumbs {
flex-wrap: wrap;
gap: 6px;
font-size: 12px;
}
body.nbn .faq summary {
line-height: 1.4;
}
body.nbn .faq summary::after {
flex: 0 0 auto;
}
body.nbn .nbnForm__grid {
grid-template-columns: 1fr;
}
body.nbn .tvxPage .channelsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
body.nbn .wrap {
padding: 0 12px;
}
body.nbn .topbar__inner {
gap: 8px;
}
body.nbn .brand__logo {
width: 34px;
height: 34px;
}
body.nbn .brand__name {
font-size: 14px;
}
body.nbn .mobileDock {
grid-template-columns: repeat(7, minmax(0, 1fr));
overflow-x: hidden;
gap: 6px;
padding: 6px;
scrollbar-width: none;
}
body.nbn .mobileDock::-webkit-scrollbar {
display: none;
}
body.nbn .mobileDock__link {
min-width: 0;
min-height: 52px;
font-size: 9px;
}
body.nbn .mobileDock__link i {
font-size: 14px;
}
body.nbn {
padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
body.nbn .nav-mobile {
left: 8px;
right: 8px;
top: 58px;
padding: 10px;
}
body.nbn .cookieBar {
left: 8px;
right: 8px;
bottom: calc(88px + env(safe-area-inset-bottom));
}
body.nbn .cookieBar__desc {
font-size: 12px;
}
body.nbn .heroTitle {
font-size: clamp(1.7rem, 8.4vw, 2.05rem);
}
body.nbn .h2,
body.nbn .rxSectionHead__title {
font-size: clamp(1.35rem, 7vw, 1.7rem);
}
body.nbn .tvxPage .channelsGrid {
grid-template-columns: 1fr;
}
body.nbn .embedFrame iframe {
height: min(62vh, 520px);
}
}
@media (prefers-reduced-motion: reduce) {
body.nbn .heroCard,
body.nbn .contentCard,
body.nbn .postCard,
body.nbn .speedCard,
body.nbn .contactBox,
body.nbn .faqItem,
body.nbn .faq details {
animation: none !important;
transition: none !important;
transform: none !important;
}
} html.nbn-force-mobile body.nbn {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
html.nbn-force-mobile,
html.nbn-force-mobile body.nbn {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
html.nbn-force-mobile body.nbn .wrap {
width: 100%;
max-width: 100%;
padding-left: 12px;
padding-right: 12px;
}
html.nbn-force-mobile body.nbn .nav {
display: none !important;
}
html.nbn-force-mobile body.nbn .mobile-menu-btn {
display: inline-flex !important;
}
html.nbn-force-mobile body.nbn .mobileDock {
display: grid !important;
}
html.nbn-force-mobile body.nbn .brand {
min-width: 0;
}
html.nbn-force-mobile body.nbn .brand__tag {
display: none;
}
html.nbn-force-mobile body.nbn .sectionHead {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
html.nbn-force-mobile body.nbn .heroGrid,
html.nbn-force-mobile body.nbn .hero__grid,
html.nbn-force-mobile body.nbn .rxHero__grid,
html.nbn-force-mobile body.nbn .plansGrid,
html.nbn-force-mobile body.nbn .plansGridPro,
html.nbn-force-mobile body.nbn .postGrid,
html.nbn-force-mobile body.nbn .faqHub__grid,
html.nbn-force-mobile body.nbn .contactLayout,
html.nbn-force-mobile body.nbn .channelsGrid,
html.nbn-force-mobile body.nbn .tvxPage .channelsGrid {
grid-template-columns: 1fr !important;
}
html.nbn-force-mobile body.nbn .tvxToolbar {
grid-template-columns: 1fr !important;
gap: 8px;
}
html.nbn-force-mobile body.nbn .tvxField--search {
grid-column: auto !important;
}
html.nbn-force-mobile body.nbn .tvxField,
html.nbn-force-mobile body.nbn .tvxField--search,
html.nbn-force-mobile body.nbn .tvxCheck,
html.nbn-force-mobile body.nbn .tvxReset {
width: 100% !important;
min-width: 0 !important;
}
html.nbn-force-mobile body.nbn .tvxPage .gridSelect,
html.nbn-force-mobile body.nbn .tvxToolbar .tvxField > .gridSelect {
min-height: 44px !important;
height: 44px !important;
max-height: 44px !important;
line-height: 1.2 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
html.nbn-force-mobile body.nbn .tvxQuickWrap {
display: grid !important;
grid-template-columns: 1fr;
align-items: stretch;
width: 100%;
max-width: 100%;
min-width: 0;
}
html.nbn-force-mobile body.nbn .tvxQuick,
html.nbn-force-mobile body.nbn .tvxActive {
display: flex;
flex-wrap: wrap !important;
overflow: visible !important;
width: 100%;
max-width: 100%;
}
html.nbn-force-mobile body.nbn .tvxQuick__btn,
html.nbn-force-mobile body.nbn .tvxActive__chip {
flex: 0 1 auto;
max-width: 100%;
min-width: 0;
}
html.nbn-force-mobile body.nbn .btn {
min-height: 42px;
}
html.nbn-force-mobile body.nbn .heroTitle,
html.nbn-force-mobile body.nbn .rxHero__title {
font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
line-height: 1.12;
} @media (max-width: 900px) {
.tvxPage::before,
.tvxPage::after,
.tvxNebula,
.tvxHero__mesh,
.tvxScanline,
.tvxScope {
display: none !important;
}
.tvxHero__card,
.tvxPage .chCard,
.tvxPage .chCard::after {
animation: none !important;
transform: none !important;
transition: none !important;
}
.tvxQuick {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 8px;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tvxQuick::-webkit-scrollbar {
display: none;
}
.tvxQuick__btn {
flex: 0 0 auto;
}
.tvxBottom {
padding-bottom: calc(90px + env(safe-area-inset-bottom));
}
.tvxPage .gridInput,
.tvxPage .gridSelect {
font-size: 16px;
}
}
@media (max-width: 520px) {
.tvxToolbar {
grid-template-columns: 1fr !important;
gap: 8px;
}
.tvxCheck,
.tvxReset,
.tvxField,
.tvxField--search {
width: 100%;
}
.tvxPage .chLogoWrap {
height: 52px;
}
.tvxMeta {
margin-top: 10px;
}
} .tvxPage {
max-width: 100%;
overflow-x: clip;
}
@supports not (overflow: clip) {
.tvxPage {
overflow-x: hidden;
}
}
.tvxGridSection,
.tvxShell,
.tvxToolbar,
.tvxToolbar > *,
.tvxField,
.tvxField--search,
.tvxCheck,
.tvxReset {
min-width: 0;
}
.tvxField--search .gridInput {
min-width: 0;
}
.tvxHero__title,
.tvxHero__lead,
.tvxPage .chName,
.tvxActive__chip span {
overflow-wrap: anywhere;
}
@media (max-width: 900px) {
.tvxPage::before,
.tvxPage::after {
inset-inline: auto;
max-width: 100vw;
}
}
@media (max-width: 520px) {
.tvxQuickWrap,
.tvxMeta,
.tvxActive {
max-width: 100%;
}
.tvxQuick__btn {
white-space: nowrap;
}
} @media (max-width: 900px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
body.nbn,
body.nbn main,
body.nbn header,
body.nbn .topbar,
body.nbn .topbar__inner,
body.nbn section,
body.nbn .wrap,
body.nbn .hero,
body.nbn .heroCard,
body.nbn .heroCard__inner,
body.nbn .contentCard,
body.nbn .tvxPage,
body.nbn .tvxHero,
body.nbn .tvxHero__card,
body.nbn .tvxShell,
body.nbn .tvxGridSection {
max-width: 100%;
overflow-x: clip;
}
@supports not (overflow: clip) {
body.nbn,
body.nbn main,
body.nbn header,
body.nbn .topbar,
body.nbn .topbar__inner,
body.nbn section,
body.nbn .wrap,
body.nbn .hero,
body.nbn .heroCard,
body.nbn .heroCard__inner,
body.nbn .contentCard,
body.nbn .tvxPage,
body.nbn .tvxHero,
body.nbn .tvxHero__card,
body.nbn .tvxShell,
body.nbn .tvxGridSection {
overflow-x: hidden;
}
}
body.nbn .brand {
flex: 1 1 auto;
min-width: 0;
max-width: calc(100% - 52px);
}
body.nbn .brand__info,
body.nbn .brand__name {
min-width: 0;
}
body.nbn .brand__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.nbn .mobileDock,
body.nbn .nav-mobile,
body.nbn .cookieBar,
body.nbn .cookieBar__inner {
max-width: calc(100vw - 16px);
}
body.nbn .tvxHero__card,
body.nbn .tvxShell {
margin-left: 0;
margin-right: 0;
}
} @media (max-width: 900px) {
body.nbn .rxTilt,
body.nbn .rxTilt:hover,
body.nbn .rxTilt.rxReveal.is-ready,
body.nbn .rxTilt.rxReveal.is-ready.is-visible {
transform: none !important;
transition: none !important;
}
} @media (max-width: 520px) {
body.nbn .mobileDock {
left: max(8px, env(safe-area-inset-left));
right: max(8px, env(safe-area-inset-right));
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
overflow-x: hidden !important;
width: auto;
max-width: calc(100vw - 16px);
}
body.nbn .mobileDock__link {
min-width: 0 !important;
width: 100%;
}
body.nbn .mobileDock__link span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} @media (max-width: 900px) {
.tvxQuickWrap {
display: grid !important;
grid-template-columns: 1fr;
align-items: stretch;
gap: 8px;
width: 100%;
max-width: 100%;
min-width: 0;
}
.tvxQuickWrap > *,
.tvxQuick,
.tvxActive,
.tvxMeta,
.tvxMeta__left,
.tvxToolbar,
.tvxToolbar > * {
min-width: 0 !important;
max-width: 100% !important;
}
.tvxQuick {
width: 100%;
display: flex;
flex-wrap: wrap;
overflow: visible;
scrollbar-width: none;
}
.tvxQuick::-webkit-scrollbar {
display: none;
}
.tvxQuick__btn,
.tvxActive__chip {
flex: 0 1 auto;
}
.tvxActive {
width: 100%;
display: flex;
flex-wrap: wrap;
overflow: visible;
scrollbar-width: none;
}
.tvxActive::-webkit-scrollbar {
display: none;
}
} @media (max-width: 900px) {
.tvxPage::before,
.tvxPage::after {
content: none !important;
display: none !important;
}
.tvxHero__mesh,
.tvxNebula,
.tvxScanline {
display: none !important;
}
.tvxPage,
.tvxHero,
.tvxHero__card,
.tvxHero__left,
.tvxHero__right,
.tvxHero__stats,
.tvxKpi,
.tvxGridSection,
.tvxShell,
.tvxToolbar,
.tvxQuickWrap,
.tvxQuick,
.tvxActive,
.tvxMeta,
.tvxMeta__left,
.topbar,
.topbar__inner,
.wrap {
width: 100%;
max-width: 100%;
min-width: 0;
}
.tvxPage,
.tvxHero__card,
.tvxShell {
overflow-x: hidden !important;
}
.tvxToolbar > *,
.tvxQuickWrap > *,
.tvxActive > *,
.topbar__inner > * {
min-width: 0 !important;
max-width: 100% !important;
}
.tvxQuick,
.tvxActive {
flex-wrap: wrap;
overflow: visible;
}
.tvxQuick__btn,
.tvxActive__chip {
flex: 0 1 auto;
}
.tvxSignal,
.tvxHero__list li {
max-width: 100%;
min-width: 0;
overflow-wrap: anywhere;
}
.tvxSignal {
white-space: normal;
}
} .homeProof {
padding-top: 6px;
}
.homeProof__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.homeProof__item {
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 16px;
padding: 14px 12px;
background: linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.8));
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}
.homeProof__k {
font-size: clamp(1.2rem, 2.2vw, 1.55rem);
font-weight: 1000;
line-height: 1.1;
}
.homeProof__v {
margin-top: 5px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.abxSection {
padding-top: clamp(28px, 5vw, 52px);
}
.abxCompare {
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 18px;
overflow: hidden;
background: linear-gradient(168deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.84));
box-shadow: 0 24px 46px rgba(15, 23, 42, 0.1);
}
.abxCompare__head,
.abxCompare__row {
display: grid;
grid-template-columns: 1.45fr repeat(3, minmax(0, 1fr));
gap: 10px;
align-items: center;
padding: 12px 14px;
}
.abxCompare__head {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 950;
color: var(--muted);
background: rgba(226, 232, 240, 0.44);
}
.abxCompare__row {
border-top: 1px solid rgba(148, 163, 184, 0.24);
font-size: 13px;
font-weight: 850;
}
.abxCompare__row > div:first-child {
color: var(--muted);
font-weight: 900;
}
.abxCompare__row i {
color: #0ea5e9;
}
.abxWhy {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.abxWhy__item {
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 16px;
background: linear-gradient(166deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.84));
padding: 16px;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}
.abxWhy__item h3 {
margin: 0;
font-size: 1.08rem;
}
.abxWhy__item p {
margin: 8px 0 0;
color: var(--muted);
font-size: 14px;
font-weight: 800;
line-height: 1.55;
}
.abxFaq {
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 18px;
background: linear-gradient(166deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86));
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
padding: 16px;
}
.abxFaq .h2 {
margin-bottom: 10px;
}
.abxFaq details {
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 14px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.8);
}
.abxFaq details + details {
margin-top: 8px;
}
.abxFaq summary {
font-weight: 900;
cursor: pointer;
}
.abxFinal__card {
border: 1px solid rgba(56, 189, 248, 0.32);
border-radius: 20px;
padding: clamp(20px, 3.2vw, 34px);
background:
linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.9)),
radial-gradient(360px 180px at 14% 20%, rgba(14, 165, 233, 0.14), transparent 72%);
box-shadow: 0 28px 56px rgba(15, 23, 42, 0.14);
}
.abxFinal__card h2 {
margin: 0;
font-size: clamp(1.55rem, 3vw, 2.2rem);
line-height: 1.08;
}
.abxFinal__card p {
margin: 10px 0 0;
color: var(--muted);
font-size: 15px;
font-weight: 800;
}
.abxFinal__actions {
margin-top: 14px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
body.nbn.theme-dark .homeProof__item,
body.nbn.theme-dark .abxCompare,
body.nbn.theme-dark .abxWhy__item,
body.nbn.theme-dark .abxFaq,
body.nbn.theme-dark .abxFaq details,
body.nbn.theme-dark .abxFinal__card {
border-color: rgba(148, 163, 184, 0.32);
background: linear-gradient(166deg, rgba(8, 16, 36, 0.86), rgba(7, 12, 28, 0.72));
box-shadow: 0 28px 56px rgba(2, 6, 23, 0.5);
}
body.nbn.theme-dark .homeProof__v,
body.nbn.theme-dark .abxCompare__head,
body.nbn.theme-dark .abxCompare__row > div:first-child,
body.nbn.theme-dark .abxWhy__item p,
body.nbn.theme-dark .abxFinal__card p {
color: #94a3b8;
}
body.nbn.theme-dark .abxCompare__head {
background: rgba(30, 41, 59, 0.66);
}
@media (max-width: 980px) {
.homeProof__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.abxCompare__head,
.abxCompare__row {
grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
}
.abxWhy {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.abxCompare {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.abxCompare__head,
.abxCompare__row {
min-width: 680px;
}
.abxFinal__actions .btn {
width: 100%;
}
} .faqHub {
padding-top: 10px;
}
.faqHub__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.faqHub__item {
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 16px;
background: linear-gradient(166deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.84));
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
text-decoration: none;
color: inherit;
padding: 14px;
}
.faqHub__item i {
color: #2563eb;
font-size: 16px;
}
.faqHub__item h3 {
margin: 10px 0 6px;
font-size: 1.02rem;
}
.faqHub__item p {
margin: 0;
color: var(--muted);
font-size: 13px;
font-weight: 800;
line-height: 1.45;
}
.faqContent__layout {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
gap: 14px;
align-items: start;
}
.faqAssist {
position: sticky;
top: 86px;
}
.faqAssist p {
color: var(--muted);
font-weight: 800;
line-height: 1.55;
}
.faqAssist .btn + .btn {
margin-top: 8px;
}
.faqSearch__empty {
margin-top: 10px;
font-size: 13px;
font-weight: 900;
color: #0f172a;
}
.faqFinal__card {
border: 1px solid rgba(56, 189, 248, 0.32);
border-radius: 20px;
padding: clamp(20px, 3.2vw, 34px);
background:
linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.9)),
radial-gradient(360px 180px at 14% 20%, rgba(14, 165, 233, 0.14), transparent 72%);
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}
.faqFinal__card h2 {
margin: 0;
font-size: clamp(1.55rem, 3vw, 2.2rem);
line-height: 1.08;
}
.faqFinal__card p {
margin: 10px 0 0;
color: var(--muted);
font-size: 15px;
font-weight: 800;
}
.faqFinal__actions {
margin-top: 14px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.contactProof {
padding-top: 8px;
}
.contactProof__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.contactProof__item {
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 16px;
background: linear-gradient(166deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.84));
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
padding: 14px;
}
.contactProof__item h3 {
margin: 0;
font-size: 1.03rem;
}
.contactProof__item p {
margin: 7px 0 0;
color: var(--muted);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
body.nbn.theme-dark .faqHub__item,
body.nbn.theme-dark .faqAssist,
body.nbn.theme-dark .faqFinal__card,
body.nbn.theme-dark .contactProof__item {
border-color: rgba(148, 163, 184, 0.32);
background: linear-gradient(166deg, rgba(8, 16, 36, 0.86), rgba(7, 12, 28, 0.72));
box-shadow: 0 28px 56px rgba(2, 6, 23, 0.5);
}
body.nbn.theme-dark .faqHub__item p,
body.nbn.theme-dark .faqAssist p,
body.nbn.theme-dark .faqFinal__card p,
body.nbn.theme-dark .contactProof__item p {
color: #94a3b8;
}
body.nbn.theme-dark .faqSearch__empty {
color: #cbd5e1;
}
@media (max-width: 980px) {
.faqHub__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.faqContent__layout {
grid-template-columns: 1fr;
}
.faqAssist {
position: relative;
top: auto;
}
.contactProof__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.faqHub__grid {
grid-template-columns: 1fr;
}
.faqFinal__actions .btn {
width: 100%;
}
} .routeFlow {
padding-top: 8px;
}
.routeFlow__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.routeFlow__item {
position: relative;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 18px;
background:
linear-gradient(166deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.86)),
radial-gradient(300px 140px at 12% 18%, rgba(14, 165, 233, 0.14), transparent 72%);
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
padding: 15px;
}
.routeFlow__item::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 120px;
height: 2px;
background: linear-gradient(90deg, rgba(37, 99, 235, 0.92), rgba(14, 165, 233, 0));
}
.routeFlow__item h3 {
margin: 0;
font-size: 1.02rem;
}
.routeFlow__item p {
margin: 8px 0 0;
color: var(--muted);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.routeFlow__item .btn {
margin-top: 11px;
}
.routeFlow__actions {
margin-top: 11px;
display: grid;
gap: 8px;
}
body.nbn.theme-dark .routeFlow__item {
border-color: rgba(148, 163, 184, 0.32);
background:
linear-gradient(166deg, rgba(8, 16, 36, 0.86), rgba(7, 12, 28, 0.72)),
radial-gradient(300px 140px at 12% 18%, rgba(14, 165, 233, 0.2), transparent 72%);
box-shadow: 0 26px 54px rgba(2, 6, 23, 0.48);
}
body.nbn.theme-dark .routeFlow__item p {
color: #94a3b8;
}
@media (max-width: 980px) {
.routeFlow__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.routeFlow__grid {
grid-template-columns: 1fr;
}
.routeFlow__item .btn {
width: 100%;
}
} .footerClientHint {
color: var(--text-muted);
font-size: 0.85rem;
margin: 0 0 12px;
}
.footerClientCta {
text-align: center;
}
.footerClientCta + .footerClientCta {
margin-top: 10px;
}
body.nbn .heroActions .btn,
body.nbn .rxHero__actions .btn,
body.nbn .tvxHero__actions .btn,
body.nbn .routeFlow__item .btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
body.nbn .btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.24);
}
body.nbn.theme-dark .btn:focus-visible {
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.28);
}
@media (max-width: 768px) {
body.nbn .tvxHero__actions .btn,
body.nbn .faqFinal__actions .btn,
body.nbn .abxFinal__actions .btn,
body.nbn .routeFlow__item .btn {
width: 100%;
min-height: 46px;
}
} body.nbn .planPro--value {
margin-top: -10px;
padding-top: 20px;
border-color: rgba(250, 204, 21, 0.72);
outline: 1px solid rgba(253, 224, 71, 0.34);
background:
linear-gradient(170deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 235, 0.9)),
radial-gradient(340px 180px at 86% -10%, rgba(251, 191, 36, 0.22), transparent 72%);
box-shadow:
0 36px 74px rgba(202, 138, 4, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.74);
}
body.nbn .planPro--value::before {
height: 3px;
background: linear-gradient(90deg, #f59e0b, #facc15, #f59e0b);
}
body.nbn .planPro--value .planPro__tag {
position: relative;
top: auto;
right: auto;
left: auto;
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0 0 12px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(234, 179, 8, 0.68);
background: linear-gradient(180deg, rgba(254, 240, 138, 0.84), rgba(251, 191, 36, 0.38));
color: #78350f;
font-size: 10px;
font-weight: 1000;
letter-spacing: 0.085em;
text-transform: uppercase;
box-shadow: 0 10px 24px rgba(245, 158, 11, 0.22);
}
body.nbn .planPro--value .planPro__tag i {
font-size: 11px;
}
body.nbn .planPro--value .planPro__name {
font-size: 1.12rem;
}
body.nbn .planPro--value .planPro__price {
margin-top: 0;
}
body.nbn .planPro--value .planPro__amount {
font-size: clamp(2.35rem, 5.1vw, 3.2rem);
}
body.nbn .planPro--value .planPro__actions .btn {
box-shadow: 0 16px 34px rgba(245, 158, 11, 0.28);
}
body.nbn.theme-dark .planPro--value {
border-color: rgba(253, 224, 71, 0.62);
outline-color: rgba(253, 224, 71, 0.3);
background:
linear-gradient(165deg, rgba(17, 24, 39, 0.86), rgba(12, 18, 34, 0.76)),
radial-gradient(340px 180px at 86% -10%, rgba(250, 204, 21, 0.18), transparent 72%);
box-shadow:
0 38px 74px rgba(120, 53, 15, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
body.nbn.theme-dark .planPro--value .planPro__tag {
border-color: rgba(253, 224, 71, 0.56);
background: linear-gradient(180deg, rgba(250, 204, 21, 0.28), rgba(202, 138, 4, 0.2));
color: #fef3c7;
box-shadow: 0 12px 28px rgba(250, 204, 21, 0.2);
}
@media (max-width: 980px) {
body.nbn .planPro--value {
margin-top: 0;
}
} body.nbn {
--nbn-card-border: rgba(148, 163, 184, 0.34);
--nbn-card-bg: linear-gradient(166deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.84));
--nbn-card-shadow: 0 20px 42px rgba(15, 23, 42, 0.12);
--nbn-card-text: #0f172a;
--nbn-card-muted: #475569;
}
body.nbn.theme-dark {
--nbn-card-border: rgba(148, 163, 184, 0.32);
--nbn-card-bg: linear-gradient(166deg, rgba(8, 16, 36, 0.86), rgba(7, 12, 28, 0.72));
--nbn-card-shadow: 0 28px 56px rgba(2, 6, 23, 0.5);
--nbn-card-text: #e2e8f0;
--nbn-card-muted: #cbd5e1;
}
body.nbn :is(
.heroCard,
.contentCard:not(.tvxShell),
.postCard,
.legalAside,
.contactBox,
.speedCard,
.faqItem,
.routeFlow__item,
.homeProof__item,
.rxGlass,
.rxTrust__item,
.rxFlow__item,
.rxDeviceCard,
.rxSupport,
.rxMetric,
.rxFinal__card,
.abxWhy__item,
.abxCompare,
.abxFaq,
.abxFinal__card,
.faqHub__item,
.faqAssist,
.faqFinal__card,
.contactProof__item
) {
border-color: var(--nbn-card-border);
background: var(--nbn-card-bg);
box-shadow: var(--nbn-card-shadow);
}
body.nbn :is(
.heroCard,
.contentCard,
.postCard,
.legalAside,
.contactBox,
.speedCard,
.faqItem,
.routeFlow__item,
.homeProof__item,
.rxGlass,
.rxTrust__item,
.rxFlow__item,
.rxDeviceCard,
.rxSupport,
.rxMetric,
.rxFinal__card,
.abxWhy__item,
.abxCompare,
.abxFaq,
.abxFinal__card,
.faqHub__item,
.faqAssist,
.faqFinal__card,
.contactProof__item,
.tvxHero__card,
.tvxShell,
.tvxPage .chCard
) {
max-width: 100%;
}
body.nbn :is(
.heroCard__inner,
.contentCard,
.tvxHero__card,
.tvxShell,
.rxHero__copy,
.rxGlass,
.rxTrust__item,
.rxFlow__item,
.rxDeviceCard,
.rxSupport,
.rxMetric,
.abxWhy__item,
.faqHub__item,
.faqAssist,
.routeFlow__item
) > * {
min-width: 0;
}
body.nbn .heroNotes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
body.nbn .heroStats {
display: grid;
gap: 10px;
}
body.nbn .note,
body.nbn .stat {
border-color: var(--nbn-card-border);
background: var(--nbn-card-bg);
}
body.nbn .note__k,
body.nbn .stat__k,
body.nbn .rxMetric__k {
color: var(--nbn-card-text);
}
body.nbn .note__v,
body.nbn .stat__v,
body.nbn .rxMetric__v,
body.nbn .homeProof__v,
body.nbn .routeFlow__item p,
body.nbn .faqHub__item p,
body.nbn .contactProof__item p,
body.nbn .abxWhy__item p,
body.nbn .faqAssist p {
color: var(--nbn-card-muted);
}
body.nbn .rxHero__chips {
list-style: none !important;
margin: 18px 0 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: wrap;
gap: 10px;
}
body.nbn .rxHero__chips > li {
list-style: none !important;
margin: 0;
}
body.nbn .rxMetrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
body.nbn .tvxHero__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
body.nbn .tvxPage .gridSelect {
min-height: 44px;
height: 44px;
max-height: 44px;
line-height: 1.2;
}
@media (max-width: 900px) {
html.nbn-handset body.nbn {
padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}
html.nbn-handset body.nbn main {
padding-bottom: calc(142px + env(safe-area-inset-bottom)) !important;
}
body.nbn .heroCard__inner {
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 14px !important;
}
body.nbn .heroRight {
border-left: 0 !important;
border-top: 1px solid var(--nbn-card-border) !important;
border-radius: 0;
padding: 12px 0 0 !important;
}
body.nbn .heroNotes,
body.nbn .rxMetrics,
body.nbn .tvxHero__stats,
body.nbn .homeProof__grid,
body.nbn .rxTrust,
body.nbn .rxFlow,
body.nbn .rxStack,
body.nbn .faqHub__grid,
body.nbn .contactProof__grid,
body.nbn .routeFlow__grid {
grid-template-columns: 1fr !important;
}
body.nbn .tvxPage .gridSelect {
min-height: 44px;
height: 44px;
max-height: 44px;
}
body.nbn .tvxToolbar .tvxField > .gridSelect {
min-height: 44px !important;
height: 44px !important;
max-height: 44px !important;
padding: 0 34px 0 12px !important;
}
}