/* NET2000 homepage concept v3: quick services menu, dark "super fast" hero, modernised sections.
   Plain CSS on top of site.css. No external fonts or libraries. */
@property --spd{syntax:'<integer>';inherits:true;initial-value:0}
@property --arc{syntax:'<number>';inherits:true;initial-value:0}
:root{--sky:#19b3ff;--royal:#2a5bd7;--bolt:#e01330;--neon:#7fe3ff;--deep:#020a3a}
html{overflow-x:hidden}
section[id],#nbn-check{scroll-margin-top:150px}

/* ---- Header + quick services menu ---- */
.top{background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
.qnav{border-top:1px solid rgba(217,225,239,.7)}
.top .qnav-in{display:flex;gap:8px;max-width:1320px;min-height:0;justify-content:flex-start;padding-top:10px;padding-bottom:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.qnav-in::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:center;gap:.45em;flex:none;min-height:40px;padding:.5em 1em;border-radius:999px;font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap;color:var(--navy-800);background:linear-gradient(180deg,#fff,#f1f5ff);border:1px solid #cdd8f0;box-shadow:0 1px 0 #fff inset,0 2px 8px rgba(0,0,80,.07);transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.pill svg{width:18px;height:18px;flex:none;color:var(--royal)}
.pill:hover,.pill:focus-visible{color:#fff;background:linear-gradient(135deg,var(--sky),var(--royal));border-color:transparent;box-shadow:0 6px 18px rgba(25,140,255,.35);transform:translateY(-1px)}
.pill:hover svg,.pill:focus-visible svg,.pill-hot svg{color:#fff}
.pill-hot{color:#fff;background:linear-gradient(135deg,var(--sky),var(--royal));border-color:transparent;box-shadow:0 4px 14px rgba(25,140,255,.35)}
@media (min-width:1100px){.top .qnav-in{justify-content:center;gap:6px}.pill{font-size:.85rem;padding:.45em .8em;gap:.4em}.pill svg{width:16px;height:16px}}
@media (min-width:1100px) and (max-width:1199px){.top .qnav-in{flex-wrap:wrap}}
/* 4.2: longer "Website refresh & new sites" label. Centre safely (never clip the first pill), use the full
   header width, and show pill icons only where the row fits with them. */
@media (min-width:1100px){.top .qnav-in{justify-content:safe center;max-width:none}}
@media (min-width:1100px) and (max-width:1479px){.pill svg{display:none}.pill{padding:.45em .85em}}
@media (min-width:1200px) and (max-width:1379px){.top .qnav-in{gap:4px}.pill{font-size:.8rem;padding:.42em .66em}}
@media (max-width:1099px){.qnav{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}.top .qnav-in{padding-right:40px}}
@media (max-width:520px){.pill{min-height:38px;font-size:.86rem;padding:.45em .85em}.top .qnav-in{padding-top:8px;padding-bottom:8px}}

/* ---- Hero ---- */
.journey{position:relative;overflow:hidden;color:#e6edff;padding:46px 0 44px;
  background:radial-gradient(900px 420px at 80% 0%,rgba(42,91,215,.55),transparent 65%),
             radial-gradient(700px 380px at 0% 30%,rgba(25,179,255,.22),transparent 70%),
             radial-gradient(600px 300px at 60% 100%,rgba(224,19,48,.10),transparent 70%),
             linear-gradient(170deg,#000a4a 0%,#020a3a 55%,#00061f 100%)}
.journey::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(127,200,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,200,255,.07) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%)}
.journey::after{content:"";position:absolute;left:-30%;top:18%;width:60%;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(127,227,255,.8),transparent);filter:blur(.5px);animation:jstreak 6s linear infinite;opacity:.6}
@keyframes jstreak{0%{transform:translateX(0)}100%{transform:translateX(260%)}}
.journey .wrap{position:relative;max-width:1180px}
.j-top{display:grid;gap:28px;align-items:center;margin-bottom:26px}
@media (min-width:900px){.j-top{grid-template-columns:1.35fr .65fr}}
.j-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#bfe6ff;background:rgba(255,255,255,.07);border:1px solid rgba(127,200,255,.25);border-radius:999px;padding:.4em .95em;margin-bottom:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.j-kicker i{width:8px;height:8px;border-radius:50%;background:#ff3b55;box-shadow:0 0 10px #ff3b55;animation:jblink 1.6s ease-in-out infinite}
.journey h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 .35em;color:#fff}
.journey h1 .j-big{display:block;background:linear-gradient(90deg,#7fe3ff,#19b3ff 40%,#5b8cff 80%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(25,179,255,.35))}
.journey h1 .j-calm{display:block;font-size:.62em;font-weight:700;color:#dbe6ff;margin-top:.25em;letter-spacing:-.01em}
.j-lead{font-size:clamp(1.02rem,2vw,1.18rem);color:#c3d0f2;margin:0 0 22px;max-width:52ch}
.j-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn-bold{background:linear-gradient(135deg,var(--sky),var(--royal));color:#fff;box-shadow:0 0 0 1px rgba(127,227,255,.35) inset,0 8px 26px rgba(25,140,255,.45);border:0;padding:.85em 1.45em}
.btn-bold:hover{background:linear-gradient(135deg,#3cc2ff,#1e4fc8);color:#fff;box-shadow:0 0 0 1px rgba(127,227,255,.5) inset,0 10px 30px rgba(25,140,255,.6)}
.btn-glass{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.28);padding:.85em 1.45em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)}
.glass-dark{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(160,200,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 60px rgba(0,0,30,.45);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}

/* speed gauge */
.spd{position:relative;border-radius:24px;padding:18px 20px 16px;text-align:center}
.spd-dial{display:block;width:100%;max-width:300px;margin:0 auto -64px;overflow:visible}
.spd-track{fill:none;stroke:rgba(160,200,255,.15);stroke-width:12;stroke-linecap:round}
.spd-arc{fill:none;stroke:url(#g-gauge);stroke-width:12;stroke-linecap:round;stroke-dasharray:100 200;stroke-dashoffset:calc(100 - var(--arc));filter:drop-shadow(0 0 8px rgba(25,179,255,.8))}
.spd-ticks path{stroke:rgba(200,225,255,.45);stroke-width:2;stroke-linecap:round}
.spd-read{position:relative;display:flex;align-items:baseline;justify-content:center;gap:8px}
.spd-num{font:800 clamp(2.8rem,6vw,3.8rem)/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#fff;font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:right;text-shadow:0 0 22px rgba(25,179,255,.7);counter-reset:spd var(--spd)}
.spd-num::after{content:counter(spd)}
.spd-unit{font-weight:800;color:#7fe3ff;letter-spacing:.06em}
.spd-tier{position:relative;height:1.6em;margin:6px 0 8px;font-size:.86rem;font-weight:700;color:#bfe6ff}
.spd-tier span{position:absolute;inset:0;opacity:0;animation:jtier 12s linear infinite}
.spd-tier span:nth-child(2){animation-delay:4s}.spd-tier span:nth-child(3){animation-delay:8s}
@keyframes jtier{0%,6%{opacity:0}9%,30%{opacity:1}33%,100%{opacity:0}}
.spd-note{font-size:.78rem;line-height:1.4;color:#9fb2dc;margin:0}
.spd{animation:jspeed 12s ease-in-out infinite}
@keyframes jspeed{
  0%{--spd:0;--arc:0} 8%,30%{--spd:100;--arc:25} 40%,62%{--spd:400;--arc:55} 72%,97%{--spd:1000;--arc:100} 100%{--spd:0;--arc:0}}

/* art panel */
.j-panel{border-radius:28px;padding:14px 14px 6px}
.j-art{display:block;width:100%;height:auto}
.j-art-m{display:none}
@media (max-width:760px){
  .journey{padding:30px 0 32px}
  .j-art-d{display:none}.j-art-m{display:block;max-width:420px;margin:0 auto}
  .j-panel{padding:10px 4px 4px;border-radius:22px}
  .j-cta .btn{flex:1 1 100%}
  .spd-dial{max-width:240px;margin-bottom:-52px}
  
}

/* SVG styling on dark */
.ln{fill:none;stroke:#cfe6ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fg{fill:rgba(127,200,255,.07)}
.ln-sky{fill:none;stroke:#7fe3ff;stroke-width:1.8;stroke-linecap:round;filter:drop-shadow(0 0 3px #19b3ff)}
.ln-soft{fill:none;stroke:#7fc8ff;stroke-opacity:.35;stroke-width:1.1}
.scr{stroke:#7fe3ff;stroke-opacity:.6;stroke-dasharray:4 3;animation:jtype 2.4s linear infinite}
@keyframes jtype{to{stroke-dashoffset:-14}}
.win{fill:rgba(255,214,120,.0);animation:jwin 5s ease-in-out infinite}.win.w2{animation-delay:1.7s}.win.w3{animation-delay:3.3s}
@keyframes jwin{0%,40%{fill:rgba(255,214,120,0)}50%,90%{fill:rgba(255,214,120,.55)}}
.nbn-t{font:800 14px system-ui,Arial,sans-serif;fill:#fff;text-anchor:middle}
.wire{fill:none;stroke:#3d7bff;stroke-opacity:.35;stroke-width:1.6;stroke-linecap:round}
.cable{fill:none;stroke:#7fc8ff;stroke-width:3.2;stroke-linecap:round;stroke-opacity:.6}
.st{fill:none;stroke-linecap:round;stroke-width:2.6}
.st.dn{stroke:#7fe3ff;stroke-dasharray:1.2 8.8;animation:jdn var(--d,3s) linear infinite}
.st.up{stroke:#ffffff;stroke-opacity:.75;stroke-width:1.8;stroke-dasharray:.8 11.7;animation:jup calc(var(--d,3s)*1.4) linear infinite}
.s0{--d:1.1s}.s1{--d:2.2s}.s2{--d:3s}.s3{--d:3.8s}.s4{--d:4.6s}
@keyframes jdn{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes jup{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}
.streak{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:14 86;animation:jdn 1.3s cubic-bezier(.5,0,.5,1) infinite;filter:drop-shadow(0 0 4px #7fe3ff)}
.streak.k2{animation-delay:-.65s;stroke:#7fe3ff}
.glowy{filter:url(#glow)}
.boost1{animation:jdn 1.1s linear infinite,jb1 12s linear infinite}
.boost2{animation:jdn .8s linear infinite,jb2 12s linear infinite}
@keyframes jb1{0%,40%{opacity:0}44%,97%{opacity:1}100%{opacity:0}}
@keyframes jb2{0%,72%{opacity:0}76%,97%{opacity:1}100%{opacity:0}}
.led{fill:#7fe3ff;filter:drop-shadow(0 0 3px #19b3ff)}
.led-r{fill:#ff3b55;filter:drop-shadow(0 0 3px #ff3b55)}
.blink{animation:jblink 1.4s steps(2,jump-none) infinite}.blink.b2{animation-duration:.9s}.blink.b3{animation-duration:2.1s;animation-delay:.3s}.blink.b4{animation-duration:.6s}
@keyframes jblink{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}
.wave{animation:jwave 1.8s ease-in-out infinite}.wave.w2{animation-delay:.25s}.wave.w3{animation-delay:.5s}
@keyframes jwave{0%,100%{opacity:.2}40%{opacity:1}}
.tile-ring{fill:rgba(10,30,110,.65);stroke:#3d7bff;stroke-opacity:.7;stroke-width:1.3}
.tile .ln{stroke:#e8f3ff}
.tile.hot .tile-ring{stroke:#7fe3ff;stroke-opacity:1;animation:jring 2.6s ease-in-out infinite}
@keyframes jring{0%,100%{filter:drop-shadow(0 0 0 rgba(25,179,255,0))}50%{filter:drop-shadow(0 0 8px rgba(25,179,255,.9))}}
.tile-lbl{font:600 11.5px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#cfe0ff;text-anchor:middle}
.cap{font:800 12px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#7fe3ff;text-anchor:middle;letter-spacing:.14em;text-transform:uppercase}
.tag{font:800 10.5px system-ui,Arial,sans-serif;fill:#7fe3ff;text-anchor:middle;letter-spacing:.08em}
.lbl{font:700 15px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#fff;text-anchor:middle}
.sub{font:500 12.5px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#9fb2dc;text-anchor:middle}
.lbl.l,.sub.l{text-anchor:start}
.halo{fill:none;stroke:#19b3ff;stroke-opacity:.25;stroke-width:8;filter:url(#glow-lg)}
.globe-rim{stroke:#9fd4ff}
.mer{fill:none;stroke:#7fc8ff;stroke-opacity:.55;stroke-width:1.1;animation:jmer 8s linear infinite}

@keyframes jmer{0%{transform:scaleX(1)}25%{transform:scaleX(0)}50%{transform:scaleX(-1)}75%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.orbit{fill:none;stroke:#7fc8ff;stroke-opacity:.3;stroke-width:1;stroke-dasharray:3 6}
.sway{animation:jsway 9s ease-in-out infinite alternate}
@keyframes jsway{from{transform:rotate(calc(var(--a) - 16deg))}to{transform:rotate(calc(var(--a) + 16deg))}}
@keyframes jorbit{to{transform:rotate(360deg)}}
.beam{stroke:url(#g-beam);stroke-width:6;stroke-linecap:round;opacity:.5}
.beam{stroke:#7fe3ff;stroke-width:7;opacity:.18;filter:url(#glow-lg)}
.beam-core{stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:22 78;animation:jdn 1.1s linear infinite;filter:drop-shadow(0 0 4px #7fe3ff)}
.beam-core.b2{animation-delay:-.55s;stroke:#7fe3ff}

/* pause when off-screen (toggled by a few lines of JS) and reduced motion */
.journey.is-paused *,.journey.is-paused,.journey.is-paused::after{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){
  .journey *,.journey,.journey::after{animation:none !important}
  .journey,.spd{--spd:1000;--arc:100}
  .spd-tier span{opacity:0}.spd-tier span:last-child{opacity:1}
  .st.dn{stroke-dasharray:1.2 8.8}.boost1,.boost2,.streak{opacity:0}
  .win.w2{fill:rgba(255,214,120,.55)}
}

/* ---- Lower sections, light refresh ---- */
.hero.hero-lite{background:linear-gradient(180deg,#f3f7ff,#fff);color:var(--ink);padding:56px 0 60px}
.hero-lite h2.h1-like{color:var(--navy-800);font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:-.015em;max-width:20ch}
.hero-lite .lead{color:var(--muted)}
.hero-lite .kicker{color:var(--royal)}
.hero-lite .facts{color:var(--ink)}.hero-lite .facts svg{color:var(--royal)}
.hero-lite .hero-card{box-shadow:0 18px 50px rgba(10,31,143,.14);border:1px solid var(--line)}
.btn-primary{background:linear-gradient(135deg,var(--sky),var(--royal));box-shadow:0 4px 14px rgba(25,140,255,.3)}
.btn-primary:hover{background:linear-gradient(135deg,#3cc2ff,#1e4fc8)}
.card{border-radius:18px}
.speed-note{margin-top:10px;padding:10px 14px;border-radius:12px;background:var(--blue-50);font-size:.92rem;color:var(--navy-800)}
@media (max-width:760px){.j-cta .btn-glass{flex:1 1 40%;padding:.8em .9em}}
.mer{stroke-opacity:.8;stroke-width:1.3}
@media (prefers-reduced-motion:reduce){.journey::after{display:none}}
.budget-note{margin:8px 0 0;font-size:.85rem;color:var(--muted)}