/* 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:#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 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:#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}
/* 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 #7fe3ff)}
.streak.k2{animation-delay:-3s;stroke:#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:#7fe3ff;filter:drop-shadow(0 0 3px #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:#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:#7fc8ff;stroke-opacity:.32;stroke-width:1.2;stroke-dasharray:2 5;stroke-linecap:round}
.slink-core{fill:none;stroke:#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(42,91,215,.5),transparent 70%),radial-gradient(360px 200px at 0% 100%,rgba(25,179,255,.18),transparent 70%),linear-gradient(165deg,#000a4a 0%,#020a3a 60%,#00061f 100%);
  border:1px solid rgba(127,200,255,.22);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:#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-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(25,179,255,.7))}
.sx-keys circle{fill:#7fc8ff;opacity:.7}
.sx-chip{fill:rgba(10,30,110,.65);stroke:#3d7bff;stroke-opacity:.7;stroke-width:1.3}
.sx-chip-on{fill:rgba(25,179,255,.2);stroke:#7fe3ff;stroke-width:1.6;opacity:0;filter:drop-shadow(0 0 5px rgba(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:url(#g-gauge);stroke-width:7;stroke-linecap:round;stroke-dasharray:100 200;stroke-dashoffset:0;filter:drop-shadow(0 0 5px rgba(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{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:#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:#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(25,179,255,.2);stroke:#7fe3ff;stroke-width:1.4}
.sx-hl{stroke:#fff;stroke-width:5;stroke-linecap:round}
.sx-btn{fill:#19b3ff;filter:drop-shadow(0 0 5px rgba(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:#bfe6ff;opacity:0;filter:drop-shadow(0 0 6px #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}
}