/* Paragon MSP home page (H14, 360 coverage hero).  Loads after the shared paragon.css; holds only home-specific code. */
/* Paragon MSP home hero shared layer.  Reuses paragon.css tokens; light top blending into the inner page dark. */
:root{--tide-dk:#14171b}
body.pg-home{background:#14171b}
.hx{color:var(--ink);padding:0;background:#f7f9fb}
.hx::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,transparent 62%,#000 92%);mask-image:linear-gradient(180deg,transparent 62%,#000 92%);pointer-events:none;z-index:0}
.hx>*{position:relative;z-index:1}
.hx .eyebrow{color:var(--blue);margin:0}
.hx h1{color:var(--ink);font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-.025em;margin:14px 0 16px}
.hx p.lead{color:var(--sub);font-size:18px;max-width:34em;margin:0 0 26px}
.hx .hacts{display:flex;flex-wrap:wrap;gap:12px}
.hx .pbtn{max-width:100%;text-align:center;line-height:1.25}
.hx.dark h1{color:#fff}.hx.dark p.lead{color:#c9d4e5}.hx.dark .eyebrow{color:var(--blue-hi)}
.hx svg text{font-family:var(--display)}
.hx svg .mono{font-family:var(--mono)}
/* chips */
.chip{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--body);padding:7px 12px;border-radius:999px;white-space:nowrap}
.chip.dk{background:rgba(20,23,27,.85);border:1px solid #3a4654;color:#e9eef3}
.chip.lt{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 12px 26px -14px rgba(4,36,58,.45)}
.cd{position:relative;width:8px;height:8px;border-radius:50%;flex:none}.cd::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:hxping 2.2s ease-out infinite}
.cd.ok{background:#2fd08f;--c:47,208,143}.cd.bad{background:#ff6b4a;--c:255,107,74}.cd.info{background:#3fa9f5;--c:63,169,245}
.live{display:flex;align-items:center;gap:8px;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9fb0c4}
/* shared motion, same timings as inner pages */
.ringp{transform-box:fill-box;transform-origin:center;animation:hxring 3.6s ease-out infinite}
@keyframes hxring{0%{transform:scale(.92);opacity:1}100%{transform:scale(1.08);opacity:.35}}
.pulse{transform-box:fill-box;transform-origin:center;animation:hxpulse 3.6s ease-out infinite;opacity:0}
@keyframes hxpulse{0%{transform:scale(.25);opacity:.9}100%{transform:scale(1);opacity:0}}
.flow{stroke-dasharray:3 10;stroke-linecap:round;animation:hxdash 1.4s linear infinite}
@keyframes hxdash{to{stroke-dashoffset:-26}}
.spin{transform-box:fill-box;transform-origin:center;animation:hxspin 24s linear infinite}
@keyframes hxspin{to{transform:rotate(360deg)}}
.sweep{transform-box:view-box;animation:hxspin 6s linear infinite}
.blinkl{animation:hxled 1.6s steps(2) infinite}
@keyframes hxled{50%{opacity:.35}}
.floaty{animation:hxfloat 4s ease-in-out infinite}
@keyframes hxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:980px){
 .pgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
 .pgrid{grid-template-columns:1fr;gap:10px}.pp{padding:14px}
 .hx h1{font-size:34px}
 .hx p.lead{font-size:17px}
 .hx .hacts .pbtn{width:100%}
 .chip{font-size:12px;padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){.pulse{opacity:.16}}

/* hero H14: 360 coverage ring.  Chips close the gaps in a six-area ring.  Only transform, opacity and SVG stroke-dashoffset animate. */
.pg-home .hx{--gy:360px;background:linear-gradient(180deg,#f7f9fb 0,#eef5fa calc(var(--gy)*.55),#e3eef7 var(--gy),#b9d3e6 calc(var(--gy) + 60px),#6f97b5 calc(var(--gy) + 125px),#34546e calc(var(--gy) + 190px),#22303d calc(var(--gy) + 250px),#181c22 calc(var(--gy) + 340px),#14171b calc(var(--gy) + 460px));display:flex;flex-direction:column}
.pg-home .hx>.pw{text-align:center;width:100%;padding-block:44px 0}
.pg-home .htx{max-width:820px;margin:0 auto}
.pg-home .hx h1{margin:12px 0 14px}
.pg-home .hx p.lead{margin-inline:auto;margin-bottom:24px}
.pg-home .hacts{justify-content:center}
.pg-home .stage{position:relative;flex:none;min-height:520px}
.pg-home .stage.js{min-height:0}
.pg-home .geow{position:absolute;left:0;right:0;top:-160px;bottom:0;overflow:hidden;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 200px,#000 calc(100% - 110px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 200px,#000 calc(100% - 110px),transparent 100%)}
.pg-home .geo{position:absolute;left:50%;top:160px;width:1200px;height:1200px;margin:0}
.pg-home .stage:not(.js) .geow{display:none}
.pg-home .geo svg{display:block;width:100%;height:100%;overflow:visible}
.pg-home .geo .ring{fill:none;stroke:#3fa9f5;vector-effect:non-scaling-stroke}
/* radar rings: three rings a third of a cycle apart (negative delays in the markup), each fades in from nothing, so one is always on screen */
.pg-home .geo .hp{fill:none;stroke:#3fa9f5;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:hpscale 6s cubic-bezier(.22,.61,.36,1) infinite,hpfade 6s linear infinite;opacity:0}
@keyframes hpscale{0%{transform:scale(.6)}100%{transform:scale(1)}}
@keyframes hpfade{0%{opacity:0}14%{opacity:.36}100%{opacity:0}}
.pg-home .beam{animation:hbeam 5s ease-in-out infinite}
@keyframes hbeam{0%,100%{opacity:.4}50%{opacity:.62}}
.pg-home svg.cov{position:absolute;left:0;top:0;z-index:1;overflow:visible;display:block}
.pg-home .stage:not(.js) svg.cov{position:relative;margin:24px auto 40px;width:min(440px,84vw);height:auto}
.pg-home svg.cov text{font-family:var(--mono);font-weight:700;letter-spacing:.1em}
.pg-home svg.cov .c360{font-family:var(--display);font-weight:800;letter-spacing:-.04em}
.pg-home svg.cov .ccov{font-family:var(--body);font-weight:600;letter-spacing:.02em}
.pg-home svg.cov .cnt{letter-spacing:.06em;font-weight:600}
.pg-home svg.cov .ch{will-change:transform}
/* chips: about 1.4x the H13d size, one accent family per service area (blues and teals) */
.orb{position:absolute;inset:0;z-index:2;pointer-events:none}
.pg-home .stage:not(.js) .orb{display:none}
.oc{position:absolute;left:0;top:0;--ac:#3fa9f5;--ac2:#a6dafc;will-change:transform,opacity;pointer-events:auto}
.oc[hidden]{display:none}
.oc .in{position:relative;display:flex;align-items:center;gap:12px;padding:7px 18px 7px 7px;border-radius:999px;white-space:nowrap}
.oc.lt .in{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 14px 30px -16px rgba(4,36,58,.5)}
.oc.dk .in{background:rgba(22,28,35,.9);border:1px solid #34414f;color:#eef3f8;box-shadow:0 16px 34px -18px rgba(0,0,0,.8)}
.oc .ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none}
.oc.lt .ico{background:linear-gradient(160deg,#e6f1f8,#d3e7f4);color:var(--ac)}
.oc.dk .ico{background:linear-gradient(160deg,#243140,#1c2632);color:var(--ac2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.oc .tx{display:block;text-align:left}
.oc .tx b{display:block;font:600 16.5px/1.2 var(--body);letter-spacing:-.005em}
.oc .tx small{display:block;font:600 12px/1.3 var(--mono);letter-spacing:.02em;color:var(--sub);margin-top:2px}
.oc.dk .tx small{color:#9fb0c4}
.oc .st{position:relative;width:9px;height:9px;border-radius:50%;flex:none;margin-left:2px;background:var(--ac2)}
.oc .st::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ac2);animation:hxping 2.2s ease-out infinite}
.oc .gl{position:absolute;inset:-4px;border-radius:999px;border:1.5px solid var(--ac2);box-shadow:0 0 26px 2px rgba(63,169,245,.45);opacity:0;pointer-events:none}
@keyframes hxping{0%{transform:scale(1);opacity:0}12%{transform:scale(1.25);opacity:.7}80%,100%{transform:scale(2.8);opacity:0}}
/* second chip face: carries the outgoing label during a crossfade, stacked on the main face */
.oc .in.ghost{position:absolute;top:0;left:0;pointer-events:none}
.oc.lft .in.ghost{left:auto;right:0}
.oc.mob .in.ghost{left:50%;margin-left:0;translate:-50% 0}
.oc .in{will-change:transform,opacity}
@media (max-width:1099.98px){
 .pg-home .hx>.pw{padding-block:40px 0}
 .pg-home .stage{min-height:0;display:flex;flex-direction:column;align-items:center;padding:0 0 36px}
 .pg-home svg.cov{position:relative}
 .orb{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:4px;width:100%;padding-inline:16px}
 .oc{position:relative;left:auto;top:auto;max-width:100%}
 .oc .in{padding:6px 16px 6px 6px}
 .oc .tx b{font-size:15.5px}
 .oc .tx small{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.oc .st::after,.pg-home .beam,.pg-home .geo .hp,.pg-home .geo .spin{animation:none}.oc .st::after{opacity:0}}

/* proof points strip, flows straight out of the hero */
.proofs{position:relative;color:#fff;padding-top:30px}
.proofs .eyebrow{font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-hi);margin:0}
.pgrid{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pp{display:flex;gap:14px;align-items:flex-start;background:#1b2027;border:1px solid #2f3b48;border-radius:16px;padding:18px}
.pi{flex:none;width:44px;height:44px;border-radius:12px;background:#22272e;border:1px solid #3a4757;display:grid;place-items:center}
.pp h3{font-size:16.5px;color:#fff;margin:0 0 4px}
.pp p{margin:0;font-size:14px;color:#9fb0c4;line-height:1.45}
.pnums{display:flex;flex-wrap:wrap;gap:10px 36px;margin-top:22px;font-size:14px;color:#9fb0c4}
.pnums b{font:800 20px var(--display);color:#fff;margin-right:6px}
/* one continuous dark field under the hero: dot grid plus faint glows that span sections */
.hdark{position:relative;overflow:hidden;color:#e9eef3;background:
 radial-gradient(1100px 760px at 86% 30%,rgba(63,169,245,.10),transparent 70%),
 radial-gradient(1000px 900px at 4% 52%,rgba(2,99,153,.17),transparent 70%),
 radial-gradient(900px 560px at 80% 76%,rgba(63,169,245,.09),transparent 70%),
 #14171b}
.hdark::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.hdark>*{position:relative}
.hsec{padding-top:clamp(56px,8vw,104px)}
.hdark>.hsec:last-child{padding-bottom:clamp(56px,8vw,104px)}
.pg-home footer.pfoot{margin-top:0}
.hhd{max-width:860px;margin-bottom:30px}
.hhd .eyebrow{font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-hi);margin:0}
.hhd h2{font-size:clamp(26px,3.2vw,38px);line-height:1.15;color:#fff;margin:10px 0 12px;letter-spacing:-.015em}
.hhd p{color:#9fb0c4;font-size:17px;margin:0}
/* services */
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc{display:flex;flex-direction:column;gap:10px;background:#1b2027;border:1px solid #2f3b48;border-radius:18px;padding:24px;text-decoration:none;color:inherit;transition:transform .25s,border-color .25s,box-shadow .25s}
.svc:hover{transform:translateY(-4px);border-color:#3a6f98;box-shadow:0 18px 36px -18px rgba(0,0,0,.6)}
.svc .si{width:52px;height:52px;border-radius:14px;background:#22272e;border:1px solid #3a4757;display:grid;place-items:center;color:#cfe2f4;margin-bottom:4px}
.svc .k{font:700 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-hi)}
.svc h3{font-size:20px;color:#fff;margin:0}
.svc p{margin:0;color:#9fb0c4;font-size:15px;flex:1}
.svc .go{display:inline-flex;align-items:center;gap:6px;color:var(--blue-hi);font:700 14px var(--display);margin-top:4px}
/* how we work */
.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative}
.steps3::before{content:"";position:absolute;left:10%;right:10%;top:62px;border-top:2px dashed rgba(63,169,245,.35)}
.steps3 li{position:relative;background:#1b2027;border:1px solid #2f3b48;border-radius:18px;padding:22px 24px 24px}
.steps3 .num{display:block;font:800 72px/1 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.4px #3fa9f5;margin-bottom:12px}
.steps3 h3{font-size:20px;color:#fff;margin:0 0 6px;display:flex;align-items:center;gap:10px}
.steps3 p{margin:0;color:#9fb0c4;font-size:15px}
.steps3 .tag{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#9fe3c9;background:rgba(18,145,107,.14);border:1px solid rgba(18,145,107,.4);border-radius:999px;padding:3px 9px}
/* stats */
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.stats3 .st{padding:8px 28px 8px 28px;border-left:1px solid #2f3b48}
.stats3 .st:first-child{border-left:0;padding-left:0}
.stats3 b{display:block;font:800 clamp(44px,5vw,64px)/1.05 var(--display);letter-spacing:-.03em;color:#fff}
.stats3 p{margin:10px 0 8px;color:#c9d4e5;font-size:16px;max-width:26ch}
.stats3 .src{font:600 12px var(--mono);letter-spacing:.04em;color:#9fb0c4}
/* booking CTA */
.hcta{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center;background:linear-gradient(120deg,#04243a,#026399);border-radius:22px;padding:clamp(28px,4vw,44px);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.hcta h2{line-height:1.15;color:#fff;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.015em;margin:0 0 10px}
.hcta h2 span{color:#9fd4fb}
.hcta p.sub{color:#d7e8f5;margin:0 0 22px;font-size:17px}
.hcta .acts{display:flex;flex-wrap:wrap;gap:12px}
.hcta .pbtn{max-width:100%;text-align:center;line-height:1.25}
.hcta figure{margin:0;background:rgba(4,36,58,.45);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:22px}
.hcta blockquote{margin:0;color:#e6f1f8;font-size:16px;line-height:1.6}
.hcta blockquote::before{content:"\201C";display:block;font:800 44px/0.8 var(--display);color:#3fa9f5;margin-bottom:6px}
.hcta figcaption{display:flex;align-items:center;gap:10px;margin-top:14px;color:#cfe2f4;font-size:14px}
.hcta figcaption i{width:34px;height:34px;border-radius:50%;background:#3fa9f5;color:#04243a;display:grid;place-items:center;font:800 15px var(--display);font-style:normal}
@media (max-width:980px){.pgrid{grid-template-columns:1fr 1fr}.sgrid{grid-template-columns:1fr 1fr}.hcta{grid-template-columns:1fr}}
@media (max-width:760px){.steps3{grid-template-columns:1fr}.steps3::before{display:none}.stats3{grid-template-columns:1fr;gap:26px}.stats3 .st{border-left:0;padding:0;border-top:1px solid #2f3b48;padding-top:22px}.stats3 .st:first-child{border-top:0;padding-top:0}}
@media (max-width:640px){.pgrid{grid-template-columns:1fr;gap:10px}.pp{padding:14px}.sgrid{grid-template-columns:1fr}.hcta .acts .pbtn{width:100%}.steps3 .num{font-size:56px}}