/* NET2000 home 4.17: calmer hero flows back except on the activity arc; flows on the home/business diagrams (end of file). Built from home-4.16.css. */
/* NET2000 home 4.16: calmer hero wires, new home/business/file share diagrams (end of file). Built from home-4.15.css. */
/* NET2000 home 4.15: hero window is a "What we do" showcase (end of file). Built from home-4.8.css. */
/* NET2000 home 4.8: Better Online Experience page and homepage teaser (diagrams + palettes at the end), shooting stars in the night sky.
   Built from home-4.7.css. */
/* NET2000 home 4.7: 24-hour activity arc and AI server in the hero; per-section diagram colours (palettes below).
   Built from home-4.6.css, which was built from home-4.5.css. */
/* 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 15s linear infinite;opacity:.6;transform:translateX(-50%)}
/* 4.4: 14 s sweep from fully off-screen left to off-screen right, then a 1 s hold off-screen (was 6 s, restarting in view) */
@keyframes jstreak{0%{transform:translateX(-50%)}93.33%,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 3.2s 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:jt1 10.4s linear 1 forwards}
.spd-tier span:nth-child(2){animation-name:jt2}.spd-tier span:nth-child(3){animation-name:jt3}
/* 4.5: one gauge cycle = 10.4 s, from 1000 (0.8 s ease down to 0, 1 s at 0) up through 100 and 400 to 1000, then it stops
   on 1000 (fill forwards). sections-4.5.js waits a random 3-7 s and replays every gauge animation together. Times (s):
   0-0.8 drop | 0.8-1.8 at 0 | 2.76-5.4 at 100 | 6.6-9.24 at 400 | 10.4 at 1000 */
@keyframes jt1{0%,23%{opacity:0}26.5%,51.9%{opacity:1}55%,100%{opacity:0}}
@keyframes jt2{0%,60%{opacity:0}63.5%,88.8%{opacity:1}92%,100%{opacity:0}}
@keyframes jt3{0%{opacity:1}6%,96%{opacity:0}100%{opacity:1}}
.spd-note{font-size:.78rem;line-height:1.4;color:#9fb2dc;margin:0}
.spd{animation:jspeed 10.4s ease-in-out 1 forwards}
@keyframes jspeed{
  0%{--spd:1000;--arc:100} 7.69%,17.31%{--spd:0;--arc:0} 26.54%,51.92%{--spd:100;--arc:25} 63.46%,88.85%{--spd:400;--arc:55} 100%{--spd:1000;--arc:100}}

/* 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:var(--ln,#cfe6ff);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fg{fill:rgba(var(--ac-rgb,127,200,255),.07)}
.ln-sky{fill:none;stroke:var(--ac,#7fe3ff);stroke-width:1.8;stroke-linecap:round;filter:drop-shadow(0 0 3px var(--ac-g,#19b3ff))}
.ln-soft{fill:none;stroke:var(--ac-s,#7fc8ff);stroke-opacity:.35;stroke-width:1.1}
.scr{stroke:var(--ac,#7fe3ff);stroke-opacity:.6;stroke-dasharray:4 3;animation:jtype 8s linear infinite}
@keyframes jtype{to{stroke-dashoffset:-14}}
.win{fill:rgba(255,214,120,.0);animation:jwin 9s ease-in-out infinite}.win.w2{animation-delay:3s}.win.w3{animation-delay:6s}
@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:var(--ac-d,#3d7bff);stroke-opacity:.35;stroke-width:1.6;stroke-linecap:round}
.cable{fill:none;stroke:var(--ac-s,#7fc8ff);stroke-width:3.2;stroke-linecap:round;stroke-opacity:.6}
.st{fill:none;stroke-linecap:round;stroke-width:2.6}
.st.dn{stroke:var(--ac,#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}
/* 4.4: flowing dots about 2.1x slower (were 1.1 / 2.2 / 3 / 3.8 / 4.6 s) */
/* 4.5: flowing dots slowed again, about 1.75-1.9x (4.4: 2.4 / 4.6 / 6.4 / 8 / 9.6 s) */
.s0{--d:4.5s}.s1{--d:8s}.s2{--d:11s}.s3{--d:14s}.s4{--d:17s}
@keyframes jdn{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes jup{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}
/* 4.4: single light pulses. The dash period (200) is longer than the path (100), so each pulse enters from the start,
   leaves past the end, then waits 1 s off the line before the next run: no restart jump. */
/* 4.5: pulse 5 s run + 1 s hold (4.4: 2.8 s + 1 s) */
@keyframes jpulse{0%{stroke-dashoffset:20}83.33%,100%{stroke-dashoffset:-106}}
.streak{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:14 186;stroke-dashoffset:20;animation:jpulse 6s cubic-bezier(.5,0,.5,1) infinite;filter:drop-shadow(0 0 4px var(--ac,#7fe3ff))}
.streak.k2{animation-delay:-3s;stroke:var(--ac,#7fe3ff)}
.glowy{filter:url(#glow)}
/* 4.4: extra flow shown only at the 400 and 1000 Mbps steps of the gauge (13 s cycle). The selector now outranks .st.dn so it applies.
   jpulse2 = 2 s run + 1 s hold. */
@keyframes jpulse2{0%{stroke-dashoffset:20}78.26%,100%{stroke-dashoffset:-106}}
.st.dn.boost1{opacity:0;animation:jdn 4.5s linear infinite,jb1 10.4s linear 1 forwards}
.streak.boost2{opacity:0;animation:jpulse2 4.6s cubic-bezier(.5,0,.5,1) infinite,jb2 10.4s linear 1 forwards}  /* 4.5: 3.6 s run + 1 s hold (4.4: 2 s + 1 s) */
.streak.k2.boost2{animation-delay:-2.3s,0s}
/* 4.5: boost dots on from the 400 step, boost pulses from the 1000 step; both stay on through the random hold at 1000 */
@keyframes jb1{0%{opacity:1}4%,60.5%{opacity:0}64.5%,100%{opacity:1}}
@keyframes jb2{0%{opacity:1}4%,89.5%{opacity:0}94%,100%{opacity:1}}
.led{fill:var(--ac,#7fe3ff);filter:drop-shadow(0 0 3px var(--ac-g,#19b3ff))}
.led-r{fill:#ff3b55;filter:drop-shadow(0 0 3px #ff3b55)}
.blink{animation:jblink 2.8s steps(2,jump-none) infinite}.blink.b2{animation-duration:2s}.blink.b3{animation-duration:3.6s;animation-delay:.6s}.blink.b4{animation-duration:1.6s}
@keyframes jblink{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}
.wave{animation:jwave 3.2s ease-in-out infinite}.wave.w2{animation-delay:.45s}.wave.w3{animation-delay:.9s}
@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 4.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:var(--ac,#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 18s linear infinite}  /* 4.4: globe spin 8 s -> 18 s; a continuous spin, so no hold (index.html delays rescaled) */

@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}
/* 4.4: 15 s per swing (was 9 s), resting 0.5 s at each end, so 1 s still at each turn */
.sway{animation:jsway 15s ease-in-out infinite alternate}
@keyframes jsway{0%,3.33%{transform:rotate(calc(var(--a) - 16deg))}96.67%,100%{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)}
/* 4.4: beam pulses 2.4 s run + 1 s hold (were a 1.1 s continuous loop) */
/* 4.5: beam 4.4 s run + 1 s hold (4.4: 2.4 s + 1 s) */
@keyframes jbeam{0%{stroke-dashoffset:32}81.48%,100%{stroke-dashoffset:-110}}
.beam-core{stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:22 178;stroke-dashoffset:32;animation:jbeam 5.4s linear infinite;filter:drop-shadow(0 0 4px #7fe3ff)}
.beam-core.b2{animation-delay:-2.7s;stroke:#7fe3ff}

/* 4.5: second satellite orbits the globe (see .orb2 below). 4.4 rules kept for reference: second satellite: drifts gently on its own (11 s each way, 0.5 s rest at each end), faint relay link to the data centre */
.sat2{transform-box:fill-box;transform-origin:50% 50%;animation:jdrift 11s ease-in-out infinite alternate}
@keyframes jdrift{0%,4.5%{transform:translate(-3px,2px) rotate(-5deg)}95.5%,100%{transform:translate(3px,-3px) rotate(4deg)}}
.slink{fill:none;stroke:var(--ac-s,#7fc8ff);stroke-opacity:.32;stroke-width:1.2;stroke-dasharray:2 5;stroke-linecap:round}
.slink-core{fill:none;stroke:var(--ac-l,#bfe6ff);stroke-opacity:.8;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:16 184;stroke-dashoffset:20;animation:jlink 7s ease-in-out infinite;animation-delay:-1.2s}
/* 4.5: relay pulse 6 s run + 1 s hold (4.4: 3.6 s + 1 s) */
@keyframes jlink{0%{stroke-dashoffset:20}85.71%,100%{stroke-dashoffset:-104}}

/* 4.5: second satellite swings on its own arc about the globe centre (radius ~158 desktop, ~146 mobile), outside the first
   satellite's radius (~110 / ~106), in step with it, 15 s per swing, 0.5 s rest at each end of a pass so it is still for 1 s at each turn.
   The dish and the dotted link point at the globe's centre the whole time because the whole group rotates about it. */
.orb2{animation:jorb2 15s ease-in-out infinite alternate}
@keyframes jorb2{0%,3.33%{transform:rotate(var(--a0))}96.67%,100%{transform:rotate(var(--a1))}}
/* 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,.st.dn.boost1,.streak.boost2,.slink-core{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)}

/* ================= 4.5: line diagrams for each section (same line-art language as the hero) ================= */
.sx{margin:0;position:relative;border-radius:20px;padding:12px 12px 8px;color:#e6edff;overflow:hidden;
  background:radial-gradient(420px 220px at 85% 0%,rgba(var(--pn-rgb,42,91,215),var(--pn-a,.5)),transparent 70%),radial-gradient(360px 200px at 0% 100%,rgba(var(--ac2-rgb,25,179,255),.18),transparent 70%),linear-gradient(165deg,#000a4a 0%,#020a3a 60%,#00061f 100%);
  border:1px solid rgba(var(--ac-rgb,127,200,255),.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px rgba(0,10,60,.22)}
.sx svg{display:block;width:100%;height:auto;overflow:visible}
.sx-l{font:600 13px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:var(--ln,#dbe8ff);text-anchor:middle}
.sx-n{font:700 12.5px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#fff;text-anchor:middle}
.sx-s{font:500 11.5px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#9fb2dc;text-anchor:middle}
.sx-k{font:800 11px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#7fe3ff;text-anchor:middle;letter-spacing:.12em;text-transform:uppercase}
.sx .sx-k{fill:var(--ac,#7fe3ff)}
.sx-big{font:800 19px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#fff;text-anchor:middle;filter:drop-shadow(0 0 6px rgba(var(--ac2-rgb,25,179,255),.7))}
.sx-keys circle{fill:var(--ac-s,#7fc8ff);opacity:.7}
.sx-chip{fill:rgba(10,30,110,.65);stroke:var(--ac-d,#3d7bff);stroke-opacity:.7;stroke-width:1.3}
.sx-chip-on{fill:rgba(var(--ac2-rgb,25,179,255),.2);stroke:var(--ac,#7fe3ff);stroke-width:1.6;opacity:0;filter:drop-shadow(0 0 5px rgba(var(--ac2-rgb,25,179,255),.8));animation:sxchip 16s ease-in-out infinite}
.sx-chip-on.c1{animation-delay:4s}.sx-chip-on.c2{animation-delay:8s}.sx-chip-on.c3{animation-delay:12s}
@keyframes sxchip{0%{opacity:0}5%,22%{opacity:1}27%,100%{opacity:0}}
.sx-arc{fill:none;stroke:var(--sx-arc,url(#g-gauge));stroke-width:7;stroke-linecap:round;stroke-dasharray:100 200;stroke-dashoffset:0;filter:drop-shadow(0 0 5px rgba(var(--ac2-rgb,25,179,255),.8));animation:sxarc 12s ease-in-out infinite}
@keyframes sxarc{0%,8%{stroke-dashoffset:100}45%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
.sx-caret{fill:var(--ac,#7fe3ff);animation:jblink 2.4s steps(2,jump-none) infinite}
.sx-pin{animation:sxbob 6s ease-in-out infinite}
@keyframes sxbob{0%,16%{transform:translateY(0)}50%,66%{transform:translateY(-5px)}100%{transform:translateY(0)}}
.sx-ripple{fill:none;stroke:var(--ac,#7fe3ff);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:sxripple 5s ease-out infinite}
@keyframes sxripple{0%{transform:scale(.3);opacity:.9}75%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.sx-card{fill:rgba(255,214,120,.25);stroke:#ffd678;stroke-width:1.2;animation:sxcard 8s ease-in-out infinite}
@keyframes sxcard{0%,12%{transform:translateY(0)}40%,80%{transform:translateY(8px)}100%{transform:translateY(0)}}
.sx-lock{fill:none;stroke:#4ade80;stroke-width:1.2}
.sx-tick{fill:none;stroke:#4ade80;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;filter:drop-shadow(0 0 4px rgba(74,222,128,.7));animation:sxtick 9s ease-in-out infinite}
@keyframes sxtick{0%,10%{stroke-dashoffset:100;opacity:1}35%,85%{stroke-dashoffset:0;opacity:1}95%{stroke-dashoffset:0;opacity:0}96%,100%{stroke-dashoffset:100;opacity:0}}
.sx-spin{animation:jorbit 20s linear infinite}
.sx-hand{animation:jorbit 16s linear infinite}
.sx-eye{animation:sxeye 7s ease-in-out infinite}
@keyframes sxeye{0%,90%{transform:scaleY(1)}94%{transform:scaleY(.1)}98%,100%{transform:scaleY(1)}}
.sx-dot{fill:var(--ac-l,#bfe6ff);animation:jwave 3.2s ease-in-out infinite}.sx-dot.d2{animation-delay:.45s}.sx-dot.d3{animation-delay:.9s}
/* website refresh: old site fades into the new one, holds, fades back, holds (14 s) */
.sx-dated{fill:none;stroke:#a7a39a;stroke-width:1.2;stroke-opacity:.8}
.sx-serif{font:italic 700 15px "Times New Roman",Times,serif;fill:#e8c86a;text-anchor:middle}
.sx-counter{font:10px "Courier New",monospace;fill:#cfc6a8;text-anchor:middle}
.sx-hero{fill:rgba(var(--ac2-rgb,25,179,255),.2);stroke:var(--ac,#7fe3ff);stroke-width:1.4}
.sx-hl{stroke:#fff;stroke-width:5;stroke-linecap:round}
.sx-btn{fill:var(--ac-g,#19b3ff);filter:drop-shadow(0 0 5px rgba(var(--ac2-rgb,25,179,255),.9))}
.sx-old{opacity:0;animation:sxold 14s ease-in-out infinite}
.sx-new{opacity:1;animation:sxnew 14s ease-in-out infinite}
.sx-scan{fill:var(--ac-l,#bfe6ff);opacity:0;filter:drop-shadow(0 0 6px var(--ac,#7fe3ff));animation:sxscan 14s ease-in-out infinite}
@keyframes sxold{0%,30%{opacity:1}40%,92%{opacity:0}100%{opacity:1}}
@keyframes sxnew{0%,30%{opacity:0}40%,92%{opacity:1}100%{opacity:0}}
@keyframes sxscan{0%,28%{transform:translateY(0);opacity:0}30%{opacity:1}40%{transform:translateY(158px);opacity:1}42%,100%{transform:translateY(158px);opacity:0}}

/* layout */
.sx-top{display:grid;gap:18px;align-items:center;margin-bottom:28px}
.sx-top > .section-head,.sx-top > .m365-head{margin-bottom:0;min-width:0}
.sx-top > .sx{order:-1;width:100%;max-width:460px;justify-self:center}
.service.has-art{grid-template-areas:"art" "text" "side"}
.service.has-art > .sx{grid-area:art;width:100%;max-width:460px;justify-self:center}
.service.has-art > div:nth-of-type(1){grid-area:text}.service.has-art > div:nth-of-type(2){grid-area:side}
.hero-grid.has-art{grid-template-areas:"art" "text" "card" "more"}
.hero-grid.has-art > .sx{grid-area:art;width:100%;max-width:460px;justify-self:center}
.cta-band.has-art > .sx{flex:1 1 100%;max-width:420px;background:rgba(0,6,40,.45);margin:0 auto}
.cta-band.has-art > .sx-band-text{flex:1 1 280px;min-width:0}
@media (max-width:520px){.sx{border-radius:16px;padding:8px 6px 4px}.sx-top{gap:14px}}
@media (min-width:860px){
  .sx-top{grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:44px}
  .sx-top > .sx{order:0;max-width:440px;justify-self:end}
  .sv-home.has-art{grid-template-areas:"text side" "art side";grid-template-rows:auto 1fr}
  .sv-biz.has-art{grid-template-areas:"text art" "text side";grid-template-rows:auto 1fr}
  .service.has-art > .sx{align-self:start}
  .service.has-art > .sx{max-width:500px;justify-self:stretch}
  .sv-biz.has-art > div:nth-of-type(1){align-self:start}
  .hero-grid.has-art{grid-template-areas:"text card" "art card" "more card";grid-template-rows:auto auto 1fr}
  .hero-grid.has-art > .sx{max-width:520px;justify-self:start}
  .cta-band.has-art{flex-wrap:nowrap;gap:28px}
  .cta-band.has-art > .sx{flex:0 0 300px;margin:0}
  .cta-band.has-art > .top-actions{flex:0 0 auto}
}
@media (min-width:860px) and (max-width:1099px){.cta-band.has-art{flex-wrap:wrap}.cta-band.has-art > .sx{flex:0 0 260px}}
@media (min-width:1100px){.cta-band.has-art > .sx{flex-basis:340px}}
.sx-web .sx-n{font-size:15px}.sx-web .sx-s{font-size:14px}.sx-web .sx-big{font-size:22px}

/* off-screen diagrams pause (sections-4.5.js); reduced motion: static and fully drawn */
.sx.is-off *{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){
  .sx *{animation:none !important}
  .sx .streak,.sx .slink-core,.sx-scan,.sx-ripple,.sx-old{opacity:0}
  .sx-new{opacity:1}.sx-chip-on{opacity:1}.sx-chip-on.c1,.sx-chip-on.c2,.sx-chip-on.c3{opacity:0}
  .sx-arc,.sx-tick{stroke-dashoffset:0}
}

/* ================= 4.6: a colour for each section diagram =================
   Every diagram colour comes from a few CSS custom properties (fallbacks = the 4.5 blues, so the hero is unchanged).
   Palette switch: <html data-palette="context"> (default), "soft" (muted), "cool" (blues/teals/violets only) or "classic" (4.5 blue).
   For a preview without editing the page, add ?palette=soft (or cool / classic / context) to the URL (sections-4.6.js). */
/* context */
.sx-check{--ac:#4ee6d5;--ac-rgb:78,230,213;--ac-g:#14b8a6;--ac2-rgb:20,184,166;--ac-d:#0d9488;--ac-s:#69eadb;--ac-l:#aff4ec;--ln:#d8faf6;--pn-rgb:13,148,136;--pn-a:.42;--sx-arc:#4ee6d5}
.sx-home{--ac:#ffbf5e;--ac-rgb:255,191,94;--ac-g:#f59e0b;--ac2-rgb:245,158,11;--ac-d:#b8660c;--ac-s:#ffc976;--ac-l:#ffe2b7;--ln:#fff1dc;--pn-rgb:184,102,12;--pn-a:.42;--sx-arc:#ffbf5e}
.sx-biz{--ac:#98abff;--ac-rgb:152,171,255;--ac-g:#5468ff;--ac2-rgb:84,104,255;--ac-d:#3b4cca;--ac-s:#a7b8ff;--ac-l:#d1d9ff;--ln:#e8edff;--pn-rgb:59,76,202;--pn-a:.42;--sx-arc:#98abff}
.sx-host{--ac:#5eea8f;--ac-rgb:94,234,143;--ac-g:#22c55e;--ac2-rgb:34,197,94;--ac-d:#15803d;--ac-s:#76eda0;--ac-l:#b7f6cd;--ln:#dcfae6;--pn-rgb:21,128,61;--pn-a:.42;--sx-arc:#5eea8f}
.sx-web{--ac:#f78ce6;--ac-rgb:247,140,230;--ac-g:#e04fd0;--ac2-rgb:224,79,208;--ac-d:#a3339a;--ac-s:#f89dea;--ac-l:#fbcbf4;--ln:#fde6fa;--pn-rgb:163,51,154;--pn-a:.42;--sx-arc:#f78ce6}
.sx-m365{--ac:#5fc4ff;--ac-rgb:95,196,255;--ac-g:#0a8fe6;--ac2-rgb:10,143,230;--ac-d:#0067b8;--ac-s:#77cdff;--ac-l:#b7e4ff;--ln:#dcf2ff;--pn-rgb:0,103,184;--pn-a:.42;--sx-arc:#5fc4ff}
.sx-why{--ac:#ffd75e;--ac-rgb:255,215,94;--ac-g:#e6ac00;--ac2-rgb:230,172,0;--ac-d:#a77c00;--ac-s:#ffdd76;--ac-l:#ffedb7;--ln:#fff6dc;--pn-rgb:167,124,0;--pn-a:.42;--sx-arc:#ffd75e}
.sx-sup{--ac:#ff9c87;--ac-rgb:255,156,135;--ac-g:#ff6a50;--ac2-rgb:255,106,80;--ac-d:#c2412d;--ac-s:#ffab99;--ac-l:#ffd2c9;--ln:#ffe9e5;--pn-rgb:194,65,45;--pn-a:.42;--sx-arc:#ff9c87}
.sx-con{--ac:#bba3ff;--ac-rgb:187,163,255;--ac-g:#8b5cf6;--ac2-rgb:139,92,246;--ac-d:#6d3fd6;--ac-s:#c5b1ff;--ac-l:#e0d6ff;--ln:#f0ebff;--pn-rgb:109,63,214;--pn-a:.42;--sx-arc:#bba3ff}
/* soft */
[data-palette="soft"] .sx-check{--ac:#94dcd3;--ac-rgb:148,220,211;--ac-g:#4fb3a8;--ac2-rgb:79,179,168;--ac-d:#2f7f78;--ac-s:#a4e1da;--ac-l:#cfefeb;--ln:#e7f7f5;--pn-rgb:47,127,120;--pn-a:.42;--sx-arc:#94dcd3}
[data-palette="soft"] .sx-home{--ac:#ecc994;--ac-rgb:236,201,148;--ac-g:#c99a55;--ac2-rgb:201,154,85;--ac-d:#8a6633;--ac-s:#efd1a4;--ac-l:#f6e7cf;--ln:#fbf3e7;--pn-rgb:138,102,51;--pn-a:.42;--sx-arc:#ecc994}
[data-palette="soft"] .sx-biz{--ac:#b0bcec;--ac-rgb:176,188,236;--ac-g:#7183c9;--ac2-rgb:113,131,201;--ac-d:#47559a;--ac-s:#bcc6ef;--ac-l:#dbe1f6;--ln:#eef0fb;--pn-rgb:71,85,154;--pn-a:.42;--sx-arc:#b0bcec}
[data-palette="soft"] .sx-host{--ac:#a3dfb4;--ac-rgb:163,223,180;--ac-g:#5fae79;--ac2-rgb:95,174,121;--ac-d:#3b7a50;--ac-s:#b1e4bf;--ac-l:#d6f1dd;--ln:#ebf8ee;--pn-rgb:59,122,80;--pn-a:.42;--sx-arc:#a3dfb4}
[data-palette="soft"] .sx-web{--ac:#e4aedc;--ac-rgb:228,174,220;--ac-g:#b871ad;--ac2-rgb:184,113,173;--ac-d:#7e4a77;--ac-s:#e8bae1;--ac-l:#f3dbef;--ln:#f9edf7;--pn-rgb:126,74,119;--pn-a:.42;--sx-arc:#e4aedc}
[data-palette="soft"] .sx-m365{--ac:#a2cdee;--ac-rgb:162,205,238;--ac-g:#5b9ccc;--ac2-rgb:91,156,204;--ac-d:#386c94;--ac-s:#b0d4f1;--ac-l:#d5e8f7;--ln:#ebf4fb;--pn-rgb:56,108,148;--pn-a:.42;--sx-arc:#a2cdee}
[data-palette="soft"] .sx-why{--ac:#e9d38e;--ac-rgb:233,211,142;--ac-g:#c4a648;--ac2-rgb:196,166,72;--ac-d:#86702c;--ac-s:#ecda9f;--ac-l:#f5ebcc;--ln:#faf5e6;--pn-rgb:134,112,44;--pn-a:.42;--sx-arc:#e9d38e}
[data-palette="soft"] .sx-sup{--ac:#eeb4a6;--ac-rgb:238,180,166;--ac-g:#cc7b68;--ac2-rgb:204,123,104;--ac-d:#8f4f40;--ac-s:#f1bfb3;--ac-l:#f7ddd7;--ln:#fbeeeb;--pn-rgb:143,79,64;--pn-a:.42;--sx-arc:#eeb4a6}
[data-palette="soft"] .sx-con{--ac:#c8baee;--ac-rgb:200,186,238;--ac-g:#9580cf;--ac2-rgb:149,128,207;--ac-d:#62528f;--ac-s:#d0c4f1;--ac-l:#e6e0f7;--ln:#f3f0fb;--pn-rgb:98,82,143;--pn-a:.42;--sx-arc:#c8baee}
/* cool */
[data-palette="cool"] .sx-check{--ac:#4ee6d5;--ac-rgb:78,230,213;--ac-g:#14b8a6;--ac2-rgb:20,184,166;--ac-d:#0d9488;--ac-s:#69eadb;--ac-l:#aff4ec;--ln:#d8faf6;--pn-rgb:13,148,136;--pn-a:.42;--sx-arc:#4ee6d5}
[data-palette="cool"] .sx-home{--ac:#7fd8ff;--ac-rgb:127,216,255;--ac-g:#22a8f0;--ac2-rgb:34,168,240;--ac-d:#1478c0;--ac-s:#92deff;--ac-l:#c5edff;--ln:#e3f6ff;--pn-rgb:20,120,192;--pn-a:.42;--sx-arc:#7fd8ff}
[data-palette="cool"] .sx-biz{--ac:#98abff;--ac-rgb:152,171,255;--ac-g:#5468ff;--ac2-rgb:84,104,255;--ac-d:#3b4cca;--ac-s:#a7b8ff;--ac-l:#d1d9ff;--ln:#e8edff;--pn-rgb:59,76,202;--pn-a:.42;--sx-arc:#98abff}
[data-palette="cool"] .sx-host{--ac:#5ee8c0;--ac-rgb:94,232,192;--ac-g:#14c39a;--ac2-rgb:20,195,154;--ac-d:#0f8a70;--ac-s:#76ebc9;--ac-l:#b7f5e3;--ln:#dcfaf1;--pn-rgb:15,138,112;--pn-a:.42;--sx-arc:#5ee8c0}
[data-palette="cool"] .sx-web{--ac:#d7a2ff;--ac-rgb:215,162,255;--ac-g:#a855f7;--ac2-rgb:168,85,247;--ac-d:#7e3bd0;--ac-s:#ddb0ff;--ac-l:#edd5ff;--ln:#f6ebff;--pn-rgb:126,59,208;--pn-a:.42;--sx-arc:#d7a2ff}
[data-palette="cool"] .sx-m365{--ac:#62b8ff;--ac-rgb:98,184,255;--ac-g:#2b86ff;--ac2-rgb:43,134,255;--ac-d:#1f5fd6;--ac-s:#7ac3ff;--ac-l:#b8dfff;--ln:#dcefff;--pn-rgb:31,95,214;--pn-a:.42;--sx-arc:#62b8ff}
[data-palette="cool"] .sx-why{--ac:#b8ccff;--ac-rgb:184,204,255;--ac-g:#7c95ff;--ac2-rgb:124,149,255;--ac-d:#4e63c9;--ac-s:#c3d4ff;--ac-l:#dfe8ff;--ln:#eff4ff;--pn-rgb:78,99,201;--pn-a:.42;--sx-arc:#b8ccff}
[data-palette="cool"] .sx-sup{--ac:#7ff0ff;--ac-rgb:127,240,255;--ac-g:#1fc8e0;--ac2-rgb:31,200,224;--ac-d:#0f8fa6;--ac-s:#92f2ff;--ac-l:#c5f8ff;--ln:#e3fcff;--pn-rgb:15,143,166;--pn-a:.42;--sx-arc:#7ff0ff}
[data-palette="cool"] .sx-con{--ac:#bba3ff;--ac-rgb:187,163,255;--ac-g:#8b5cf6;--ac2-rgb:139,92,246;--ac-d:#6d3fd6;--ac-s:#c5b1ff;--ac-l:#e0d6ff;--ln:#f0ebff;--pn-rgb:109,63,214;--pn-a:.42;--sx-arc:#bba3ff}
[data-palette="classic"] .sx{--ac:initial;--ac-rgb:initial;--ac-g:initial;--ac2-rgb:initial;--ac-d:initial;--ac-s:initial;--ac-l:initial;--ln:initial;--pn-rgb:initial;--pn-a:initial;--sx-arc:initial}

/* ================= 4.7: hero "Everything you do online" on a 24-hour arc (sections-4.7.js) =================
   Three activities on an arc. Each one enters at the right, rises to the top, waits there 1.8 s (larger, brighter ring and
   label), then glides on (2.6 s) and leaves at the left: anti-clockwise, the way the sun crosses our northern sky.
   16 activities = one 24-hour day in 70.4 s. The sky follows the hour of the activity at the top.
   No JS / reduced motion: Smart home, Streaming TV (top) and Social media under a sunset sky. */
.sky-bg{opacity:.6}
.sky-edge{fill:none;stroke:#7fc8ff;stroke-opacity:.18;stroke-width:1}
.sky-hz{fill:none;stroke:#cfe6ff;stroke-opacity:.22;stroke-width:1.2}
.sky-star{fill:#fff}
.tw{animation:jtw 7s ease-in-out infinite}.tw.t1{animation-delay:-2.3s}.tw.t2{animation-delay:-4.6s}
@keyframes jtw{0%,100%{opacity:.9}50%{opacity:.35}}
.sc-star{fill:#fff;filter:drop-shadow(0 0 3px rgba(191,230,255,.9))}
.sun-c{fill:rgba(255,214,120,.3);stroke:#ffd678;stroke-width:1.6;filter:drop-shadow(0 0 6px #ffb347)}
.sun-rays{stroke:#ffd678;stroke-width:1.6;stroke-linecap:round}
.moon{fill:rgba(230,240,255,.22);stroke:#e8f0ff;stroke-width:1.4;filter:drop-shadow(0 0 5px #bfe6ff)}
.cap.l{text-anchor:start}.cap.r{text-anchor:end}
.sky-tod{transition:opacity .6s ease}
.arc-track{fill:none;stroke:#7fc8ff;stroke-opacity:.3;stroke-width:1;stroke-dasharray:3 6}
.arc-halo{fill:rgba(25,179,255,.14);stroke:#7fe3ff;stroke-opacity:.7;stroke-width:1.2;filter:drop-shadow(0 0 8px rgba(25,179,255,.9))}
.arc-it .tile-lbl{paint-order:stroke;stroke:rgba(2,10,58,.75);stroke-width:3px;stroke-linejoin:round;transition:fill .5s ease}
.arc-it.em .tile-lbl{fill:#fff;font-weight:800}
.j-art-m .arc-it .tile-lbl{font-size:10.5px}
.arc-it.em .tile-ring{stroke:#7fe3ff;stroke-opacity:1}

/* ================= 4.7: AI server rack + cut-away (AI chip under a water block, RAM, NVMe SSDs, radiator and fans) ================= */
.ai-u{fill:rgba(25,179,255,.16);stroke:#7fe3ff;stroke-width:1.6;filter:drop-shadow(0 0 4px #19b3ff)}
.ai-t{font:800 7px system-ui,Arial,sans-serif;fill:#7fe3ff;text-anchor:middle}
.aib-h{font:800 10.5px system-ui,Arial,sans-serif;fill:#7fe3ff;letter-spacing:.14em}
.aib-ai{font:800 12px system-ui,Arial,sans-serif;fill:#fff;text-anchor:middle;filter:drop-shadow(0 0 4px #19b3ff)}
.aib-n{fill:#7fe3ff;opacity:.8}
.aib-blk{fill:rgba(25,179,255,.18)}
.aib-l{opacity:var(--aib-l,1)}
.aib-l text{font:600 10.5px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#cfe0ff;text-anchor:middle}
.zoom{fill:none;stroke:#7fc8ff;stroke-opacity:.35;stroke-width:1;stroke-dasharray:2 4}
.tube{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.45}
.t-hot{stroke:#ff9a6a}.t-cool{stroke:#7fe3ff}
.cflow{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1.5 8.5;animation:jdn 16s linear infinite}
.cf-h{stroke:#ffd0b0}.cf-c{stroke:#e0fbff}
.fan-b{animation:jorbit 10s linear infinite}
@media (prefers-reduced-motion:reduce){.tw,.cflow,.fan-b{animation:none !important}.arc-it .tile-lbl{transition:none}.sky-tod{transition:none}}

/* ================= 4.8: Better Online Experience (better-online.html) and the homepage teaser =================
   Diagram colours: same custom-property scheme as 4.6 (context / soft / cool palettes; classic = 4.5 blue via the .sx reset above). */
/* context */
.sx-tips{--ac:#6ff0c4;--ac-rgb:111,240,196;--ac-g:#14c38e;--ac2-rgb:20,195,142;--ac-d:#0f7a5c;--ac-s:#85f2cd;--ac-l:#bef8e4;--ln:#dffcf2;--pn-rgb:15,122,92;--pn-a:.42;--sx-arc:#6ff0c4}
.sx-bwifi{--ac:#6fd3ff;--ac-rgb:111,211,255;--ac-g:#0ea5e9;--ac2-rgb:14,165,233;--ac-d:#0369a1;--ac-s:#85daff;--ac-l:#beebff;--ln:#dff5ff;--pn-rgb:3,105,161;--pn-a:.42;--sx-arc:#6fd3ff}
.sx-bscam{--ac:#ffc46b;--ac-rgb:255,196,107;--ac-g:#f59e0b;--ac2-rgb:245,158,11;--ac-d:#b45309;--ac-s:#ffcd81;--ac-l:#ffe4bc;--ln:#fff2de;--pn-rgb:180,83,9;--pn-a:.42;--sx-arc:#ffc46b}
.sx-bsec{--ac:#7beab0;--ac-rgb:123,234,176;--ac-g:#22c55e;--ac2-rgb:34,197,94;--ac-d:#15803d;--ac-s:#8fedbc;--ac-l:#c4f6db;--ln:#e2faee;--pn-rgb:21,128,61;--pn-a:.42;--sx-arc:#7beab0}
.sx-brtr{--ac:#c4a5ff;--ac-rgb:196,165,255;--ac-g:#8b5cf6;--ac2-rgb:139,92,246;--ac-d:#6d28d9;--ac-s:#cdb2ff;--ac-l:#e4d6ff;--ln:#f2ebff;--pn-rgb:109,40,217;--pn-a:.42;--sx-arc:#c4a5ff}
.sx-bquick{--ac:#c6f27a;--ac-rgb:198,242,122;--ac-g:#84cc16;--ac2-rgb:132,204,22;--ac-d:#4d7c0f;--ac-s:#cff48e;--ac-l:#e5f9c3;--ln:#f2fce2;--pn-rgb:77,124,15;--pn-a:.42;--sx-arc:#c6f27a}
/* soft */
[data-palette="soft"] .sx-tips{--ac:#95e2cc;--ac-rgb:149,226,204;--ac-g:#47b099;--ac2-rgb:71,176,153;--ac-d:#2e7069;--ac-s:#a5e6d4;--ac-l:#cff2e8;--ln:#e8f9f4;--pn-rgb:46,112,105;--pn-a:.42;--sx-arc:#95e2cc}
[data-palette="soft"] .sx-bwifi{--ac:#95d1ef;--ac-rgb:149,209,239;--ac-g:#439fce;--ac2-rgb:67,159,206;--ac-d:#276691;--ac-s:#a5d8f1;--ac-l:#cfeaf8;--ln:#e8f5fb;--pn-rgb:39,102,145;--pn-a:.42;--sx-arc:#95d1ef}
[data-palette="soft"] .sx-bscam{--ac:#e8c899;--ac-rgb:232,200,153;--ac-g:#c99b4d;--ac2-rgb:201,155,77;--ac-d:#8d5938;--ac-s:#ebd0a8;--ac-l:#f5e6d1;--ln:#faf3e9;--pn-rgb:141,89,56;--pn-a:.42;--sx-arc:#e8c899}
[data-palette="soft"] .sx-bsec{--ac:#9cdec1;--ac-rgb:156,222,193;--ac-g:#4fb17d;--ac2-rgb:79,177,125;--ac-d:#317357;--ac-s:#abe3ca;--ac-l:#d2f0e3;--ln:#e9f8f1;--pn-rgb:49,115,87;--pn-a:.42;--sx-arc:#9cdec1}
[data-palette="soft"] .sx-brtr{--ac:#c6b6ef;--ac-rgb:198,182,239;--ac-g:#8c74d5;--ac2-rgb:140,116,213;--ac-d:#6440b1;--ac-s:#cfc1f1;--ac-l:#e5def8;--ln:#f2effb;--pn-rgb:100,64,177;--pn-a:.42;--sx-arc:#c6b6ef}
[data-palette="soft"] .sx-bquick{--ac:#c7e3a1;--ac-rgb:199,227,161;--ac-g:#88b553;--ac2-rgb:136,181,83;--ac-d:#52713c;--ac-s:#cfe7af;--ac-l:#e6f2d5;--ln:#f3f9ea;--pn-rgb:82,113,60;--pn-a:.42;--sx-arc:#c7e3a1}
/* cool */
[data-palette="cool"] .sx-tips{--ac:#4ee6d5;--ac-rgb:78,230,213;--ac-g:#14b8a6;--ac2-rgb:20,184,166;--ac-d:#0d9488;--ac-s:#69eadb;--ac-l:#aff4ec;--ln:#d8faf6;--pn-rgb:13,148,136;--pn-a:.42;--sx-arc:#4ee6d5}
[data-palette="cool"] .sx-bwifi{--ac:#7fd8ff;--ac-rgb:127,216,255;--ac-g:#22a8f0;--ac2-rgb:34,168,240;--ac-d:#1478c0;--ac-s:#92deff;--ac-l:#c5edff;--ln:#e3f6ff;--pn-rgb:20,120,192;--pn-a:.42;--sx-arc:#7fd8ff}
[data-palette="cool"] .sx-bscam{--ac:#b8ccff;--ac-rgb:184,204,255;--ac-g:#7c95ff;--ac2-rgb:124,149,255;--ac-d:#4e63c9;--ac-s:#c3d4ff;--ac-l:#dfe8ff;--ln:#eff4ff;--pn-rgb:78,99,201;--pn-a:.42;--sx-arc:#b8ccff}
[data-palette="cool"] .sx-bsec{--ac:#5ee8c0;--ac-rgb:94,232,192;--ac-g:#14c39a;--ac2-rgb:20,195,154;--ac-d:#0f8a70;--ac-s:#76ebc9;--ac-l:#b7f5e3;--ln:#dcfaf1;--pn-rgb:15,138,112;--pn-a:.42;--sx-arc:#5ee8c0}
[data-palette="cool"] .sx-brtr{--ac:#d7a2ff;--ac-rgb:215,162,255;--ac-g:#a855f7;--ac2-rgb:168,85,247;--ac-d:#7e3bd0;--ac-s:#ddb0ff;--ac-l:#edd5ff;--ln:#f6ebff;--pn-rgb:126,59,208;--pn-a:.42;--sx-arc:#d7a2ff}
[data-palette="cool"] .sx-bquick{--ac:#62b8ff;--ac-rgb:98,184,255;--ac-g:#2b86ff;--ac2-rgb:43,134,255;--ac-d:#1f5fd6;--ac-s:#7ac3ff;--ac-l:#b8dfff;--ln:#dcefff;--pn-rgb:31,95,214;--pn-a:.42;--sx-arc:#62b8ff}
/* diagram details */
.bo-cov{fill:rgba(var(--ac2-rgb,25,179,255),.09);stroke:var(--ac,#7fe3ff);stroke-opacity:.35;stroke-width:1.2;stroke-dasharray:3 5}
.bo-warn{fill:#ffb020;filter:drop-shadow(0 0 4px rgba(255,176,32,.8))}
.bo-bubble{fill:rgba(var(--ac2-rgb,245,158,11),.16);stroke:var(--ac,#ffc46b);stroke-width:1.2}
.bo-glass{animation:boglass 7s ease-in-out infinite}
@keyframes boglass{0%,100%{transform:translateX(0)}45%,60%{transform:translateX(-120px)}}
.bo-fw{fill:none;stroke:var(--ac,#7fe3ff);stroke-width:6;stroke-linecap:round;stroke-dasharray:100 200;filter:drop-shadow(0 0 4px rgba(var(--ac2-rgb,25,179,255),.8));animation:bofw 9s ease-in-out infinite}
@keyframes bofw{0%,8%{stroke-dashoffset:100}40%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
.bo-spin{animation-duration:9s}
.bo-needle{animation:boneedle 6s ease-in-out infinite}
@keyframes boneedle{0%,10%{transform:rotate(-95deg)}45%,80%{transform:rotate(0)}100%{transform:rotate(-95deg)}}
.sx.is-off .bo-glass,.sx.is-off .bo-fw,.sx.is-off .bo-needle{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.bo-glass,.bo-fw,.bo-needle{animation:none}.bo-fw{stroke-dashoffset:0}}
/* homepage teaser */
.tips-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0 0 22px;padding:0;list-style:none}
.tip{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;box-shadow:var(--shadow)}
.tip h3{display:flex;align-items:center;gap:10px;font-size:1.05rem;margin:0 0 .4em}
.tip h3 svg{width:22px;height:22px;flex:none;color:var(--royal,#1b4fd8)}
.tip p{margin:0;color:var(--muted);font-size:.95rem}
.web-lead{font-weight:600;font-size:.98rem;color:#fff;margin:.15em 0 .6em;opacity:.95}
.web-lead + p{margin-top:0}
.bo-more{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bo-more .btn svg{width:18px;height:18px}
/* the page */
.bo-page .page-head p{max-width:62ch}
.bo-jump{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.bo-jump .pill{white-space:normal}
.bo-body{max-width:860px}
.bo-body h3{font-size:1.12rem;margin:1.4em 0 .5em}
.bo-body p,.bo-body li{line-height:1.6}
.bo-body ul{padding-left:1.25em}.bo-body li{margin:.35em 0}
.bo-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:12px 0 8px}
.bo-grid .card{padding:20px}
.bo-grid .card h4{margin:0 0 .45em;font-size:1.02rem;color:var(--navy-800)}
.bo-grid .card p{margin:.3em 0;font-size:.95rem}
.bo-grid .card .k{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--royal,#1b4fd8);margin-bottom:.35em}
.bo-note{margin:14px 0 0;padding:12px 16px;border-radius:12px;background:var(--blue-50,#eef4ff);color:var(--navy-800);font-size:.95rem}
.bo-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:.95rem}
.bo-table th,.bo-table td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--line)}
.bo-table th{color:var(--navy-800);white-space:nowrap}
@media (max-width:560px){.bo-table,.bo-table tbody,.bo-table tr,.bo-table th,.bo-table td{display:block}.bo-table th{padding-bottom:0;border:0}.bo-table td{padding-top:4px}}
.bo-sources ol{font-size:.86rem;color:var(--muted);padding-left:1.3em}
.bo-sources li{margin:.3em 0;overflow-wrap:anywhere}
.qnav .pill[aria-current="page"]{background:linear-gradient(135deg,var(--sky),var(--royal));color:#fff;border-color:transparent}

/* ================= 4.8: shooting stars in the hero's night sky (sections-4.8.js) =================
   A thin bright head with a fading tail, 0.6-1.0 s each, a few per night, never over the Southern Cross, moon or labels.
   Drawn only with JS, while the hero is on screen and the tab is visible; none with reduced motion. */
.meteor{pointer-events:none;opacity:0;animation:jmet-o var(--md,.8s) linear forwards}
.meteor path{fill:none;stroke-linecap:round}
.meteor .m-tail{stroke:#9fd2ff;stroke-width:1.1;stroke-opacity:.38;stroke-dasharray:34 400;animation:jmet-t var(--md,.8s) cubic-bezier(.3,.1,.55,1) forwards}
.meteor .m-mid{stroke:#d8ecff;stroke-width:1.4;stroke-opacity:.7;stroke-dasharray:14 400;animation:jmet-m var(--md,.8s) cubic-bezier(.3,.1,.55,1) forwards}
.meteor .m-head{stroke:#fff;stroke-width:2;stroke-dasharray:4 400;animation:jmet-h var(--md,.8s) cubic-bezier(.3,.1,.55,1) forwards}
@keyframes jmet-h{from{stroke-dashoffset:4}to{stroke-dashoffset:-100}}
@keyframes jmet-m{from{stroke-dashoffset:14}to{stroke-dashoffset:-90}}
@keyframes jmet-t{from{stroke-dashoffset:34}to{stroke-dashoffset:-70}}
@keyframes jmet-o{0%{opacity:0}12%{opacity:1}65%{opacity:.95}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.meteor{display:none}}

/* ================= 4.15: "What we do" showcase in the hero window (replaces the speed gauge) =================
   Eight slides, one per product or service, each with its own section diagram and palette colour. The side text
   (.j-say) changes with the window. Slides sit stacked in one grid cell, so the tallest slide sets the height and
   nothing shifts when the text length changes. Soft cross-fade with a slight lift and blur; text and diagram move
   together. Pauses on hover, keyboard focus, off-screen and in a hidden tab (sections-4.15.js).
   No JS: the first slide shows, still. Reduced motion: no auto-advance and no transitions (dots still work). */
@media (min-width:900px){.j-top{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.j-lead{margin-bottom:16px}

/* side text */
.j-say{display:grid;margin:0 0 22px;max-width:54ch}
.js-s{grid-area:1/1;align-self:start;min-width:0;padding:4px 0 4px 16px;border-left:3px solid var(--ac,#7fe3ff);
  opacity:0;visibility:hidden;transform:translateY(10px);filter:blur(5px);
  transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1),filter 1.1s ease,visibility 0s linear 1.4s}
.js-s.on{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:.45s,.45s,.45s,0s}
.js-s.out{transform:translateY(-10px)}
.js-eb{margin:0 0 4px;font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ac,#7fe3ff)}
.js-eb b{display:inline-block;margin-right:.7em;color:#9fb2dc;font-weight:700;font-variant-numeric:tabular-nums}
.js-t{margin:0 0 6px;font-size:clamp(1.28rem,2.3vw,1.6rem);line-height:1.2;font-weight:800;color:#fff;letter-spacing:-.01em}
.js-l{margin:0 0 8px;font-size:clamp(.98rem,1.7vw,1.06rem);line-height:1.5;color:#c9d5f4}
.js-a{font-weight:700;font-size:.95rem;color:var(--ac-l,#bfe6ff);text-decoration:none;border-bottom:1px solid rgba(var(--ac-rgb,127,200,255),.5)}
.js-a:hover,.js-a:focus-visible{color:#fff;border-bottom-color:#fff}

/* window */
.pv-wrap{display:flex;min-width:0}
.pv{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;padding:16px 16px 10px;gap:8px}
.pv-stage{flex:1;display:grid;align-items:center;min-height:0}
.pv-s{grid-area:1/1;margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.975);filter:blur(6px);
  transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1),filter 1.1s ease,visibility 0s linear 1.4s}
.pv-s.on{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:.45s,.45s,.45s,0s}
.pv-s.out{transform:translateY(-10px) scale(.975)}
.pv-s::before{content:"";position:absolute;inset:-6% -4% 12%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--ac2-rgb,25,179,255),.2),transparent)}
.pv-s svg{display:block;width:100%;height:auto;max-width:460px;overflow:visible}
.pv-s .sx-k{fill:var(--ac,#7fe3ff)}
.pv-s:not(.on) *{animation-play-state:paused !important}
.pv-cap{display:inline-flex;align-items:center;gap:.4em;font-weight:800;font-size:.98rem;color:var(--ac,#7fe3ff);text-decoration:none;
  padding:.3em .9em;border-radius:999px;background:rgba(var(--ac-rgb,127,200,255),.1);border:1px solid rgba(var(--ac-rgb,127,200,255),.32)}
.pv-cap:hover,.pv-cap:focus-visible{color:#fff;background:rgba(var(--ac-rgb,127,200,255),.22)}
.pv-cap svg{width:16px;height:16px;flex:none}
.pv-ctl{display:flex;align-items:center;justify-content:center;gap:6px;min-height:28px}
.pv-ctl[hidden]{display:none}
.pv-dots{display:flex;align-items:center;gap:0}
.pv-dot{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;border-radius:12px}
.pv-dot::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:4px;background:rgba(200,225,255,.35);transition:width .6s ease,margin .6s ease,background .6s}
.pv-dot:hover::before{background:rgba(220,235,255,.75)}
.pv-dot.on{width:38px}
.pv-dot.on::before{width:28px;margin-left:-14px;background:rgba(200,225,255,.25)}
.pv-dot.on::after{content:"";position:absolute;left:5px;top:50%;height:8px;margin-top:-4px;border-radius:4px;width:calc(var(--p,0) * 28px);background:var(--ac,#7fe3ff);box-shadow:0 0 8px var(--ac-g,#19b3ff);transition:width .25s linear}
.pv-dot:focus-visible{outline:2px solid #7fe3ff;outline-offset:1px}
.pv-pp{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:4px;padding:0;border-radius:50%;cursor:pointer;color:#dbe8ff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24)}
.pv-pp:hover{background:rgba(255,255,255,.16)}
.pv-pp:focus-visible{outline:2px solid #7fe3ff;outline-offset:2px}
.pv-pp svg{width:12px;height:12px;fill:currentColor}
.pv-pp .i-play{display:none}.pv-pp[aria-pressed="true"] .i-play{display:block}.pv-pp[aria-pressed="true"] .i-pause{display:none}
@media (max-width:520px){.pv{padding:12px 8px 8px}.pv-cap{font-size:.92rem}}
@media (prefers-reduced-motion:reduce){
  .js-s,.pv-s,.pv-dot::before,.pv-dot.on::after{transition:none !important}
  .js-s,.pv-s{filter:none;transform:none}
  .pv-s::before{display:none}
}

/* ================= 4.16 =================
   Hero art: the flowing data dots, light pulses and speed "boost" pulses along the wires are gone (removed from the
   HTML), so the wires are still lines. Sky arc, sun and moon, stars, shooting stars, satellites (with their short beams),
   globe, AI rack (fans and coolant) and the background sweep are unchanged.
   New static Wi-Fi link line (.wl) for the new home, business and file share diagrams: no flow, only the soft LED blink. */
.wl,.wl path{fill:none;stroke:var(--ac-s,#7fc8ff);stroke-opacity:.6;stroke-width:1.5;stroke-dasharray:3 5;stroke-linecap:round}
.j-art .wire{stroke-opacity:.5}
/* file share palette: chartreuse (distinct from the other homepage colours) */
.sx-fshare{--ac:#b9f264;--ac-rgb:185,242,100;--ac-g:#7cc81c;--ac2-rgb:124,200,28;--ac-d:#4d7c0f;--ac-s:#c6f47f;--ac-l:#e0f9b9;--ln:#f0fcdc;--pn-rgb:77,124,15;--pn-a:.42;--sx-arc:#b9f264}
[data-palette="soft"] .sx-fshare{--ac:#cfe6a6;--ac-rgb:207,230,166;--ac-g:#93b65c;--ac2-rgb:147,182,92;--ac-d:#5b7836;--ac-s:#d6eab3;--ac-l:#e9f4d6;--ln:#f5faeb;--pn-rgb:91,120,54;--pn-a:.42;--sx-arc:#cfe6a6}
[data-palette="cool"] .sx-fshare{--ac:#5ee8c0;--ac-rgb:94,232,192;--ac-g:#14c39a;--ac2-rgb:20,195,154;--ac-d:#0f8a70;--ac-s:#76ebc9;--ac-l:#b7f5e3;--ln:#dcfaf1;--pn-rgb:15,138,112;--pn-a:.42;--sx-arc:#5ee8c0}
/* menu: 8 pills now (File share in; Support and Contact are in the top bar). One row from 1200 px up (1100-1199 wraps
   to two centred rows as since 4.2); pill icons only from 1540 px, where the row fits with them. */
@media (min-width:1480px) and (max-width:1539px){.pill svg{display:none}.pill{padding:.45em .85em}}

/* ================= 4.17 =================
   Hero art: flowing dots are back on the house, office, router, NBN, data centre and globe links, slower and softer
   than 4.15 (about 1.6x slower, a fifth fewer dots, fainter return dots, one light pulse per link instead of two,
   no speed "boost" pulses). The links to and from the 24-hour activity arc stay still (removed in the HTML).
   New home and business diagrams get the same calm flow as the other section diagrams. */
.j-art .s0,#s-aiboard .s0{--d:7.5s}.j-art .s1,#s-aiboard .s1{--d:13s}.j-art .s2,#s-aiboard .s2{--d:18s}.j-art .s3,#s-aiboard .s3{--d:23s}.j-art .s4,#s-aiboard .s4{--d:28s}
.j-art .st.dn,#s-aiboard .st.dn{stroke-dasharray:1.2 11.3;stroke-opacity:.8}
.j-art .st.up,#s-aiboard .st.up{stroke-dasharray:.8 19.2;stroke-opacity:.45}
.j-art .streak{animation-duration:10s;stroke-opacity:.7}
.j-art .streak.k2{display:none}
.sx-home .st.dn,.sx-biz .st.dn{stroke-opacity:.85}
.sx-home .st.up,.sx-biz .st.up{stroke-opacity:.5}