/* ==========================================================================
   NestPeople — Product page (single page, dark mode)
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:#05071A;color:#EEE9FF;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(97,82,232,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(97,82,232,.045) 1px,transparent 1px);background-size:68px 68px}
.pd svg,.pd-mods svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Hero ---------- */
.pd-hero{position:relative;z-index:1;overflow:hidden;padding:clamp(14px,2.6vh,40px) clamp(18px,3vw,56px) clamp(18px,3vh,40px)}
.pd-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(45% 55% at 68% 52%,rgba(124,76,224,.32) 0%,transparent 70%),radial-gradient(35% 40% at 8% 20%,rgba(97,82,232,.18) 0%,transparent 70%)}
.pd-inner{position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(16px,2vw,40px);align-items:center}

.pd-copy{position:relative;z-index:2}
.pd-badge{display:inline-flex;align-items:center;gap:10px;padding:clamp(6px,1.1vh,10px) 20px;border-radius:999px;background:rgba(124,76,224,.2);border:1px solid rgba(169,157,255,.4);
  color:#D9D0FF;font-weight:800;font-size:clamp(14px,2.2vh,18px);box-shadow:0 0 24px rgba(124,76,224,.25)}
.pd-badge svg{width:1.2em;height:1.2em;color:#B79CFF}
.pd h1{margin:clamp(14px,2.8vh,30px) 0 clamp(14px,2.6vh,28px);font-size:clamp(34px,min(3.7vw,7vh),66px);font-weight:900;line-height:1.1;letter-spacing:-.035em;color:#fff}
.pd-grad{position:relative;display:inline-block;color:transparent;background:linear-gradient(95deg,#B79CFF 0%,#9B6BF0 50%,#7C4CE0 100%);-webkit-background-clip:text;background-clip:text}
.pd-under{position:absolute;left:8%;right:0;bottom:-.22em;width:86%;height:.2em;overflow:visible}
.pd-under path{stroke:#8B5CF6;stroke-width:6;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(139,92,246,.8))}
.pd-desc{font-size:clamp(15px,min(1.3vw,2.6vh),20px);color:#C9CDE6;max-width:430px;line-height:1.5;margin-bottom:clamp(16px,3.2vh,34px)}
.pd-actions{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.8vh,18px);margin-bottom:clamp(16px,3.2vh,34px)}
.pd-btn{display:inline-flex;align-items:center;gap:12px;height:clamp(46px,7.4vh,60px);padding:0 clamp(22px,2vw,32px);border-radius:14px;font-weight:700;font-size:clamp(15px,min(1.2vw,2.5vh),19px);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease}
.pd-btn svg{width:1.3em;height:1.3em}
.pd-btn-fill{color:#fff;background:linear-gradient(135deg,#9B6BF0 0%,#7C3AED 55%,#6D28D9 100%);box-shadow:0 14px 34px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.2)}
.pd-btn-fill:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(124,58,237,.6),0 0 0 4px rgba(155,107,240,.18)}
.pd-btn-fill .pd-arr{transition:transform .25s ease}
.pd-btn-fill:hover .pd-arr{transform:translateX(4px)}
.pd-btn-line{color:#fff;border:1.5px solid rgba(183,156,255,.6);background:rgba(13,17,48,.5)}
.pd-btn-line svg{color:#B79CFF}
.pd-btn-line:hover{border-color:#fff;background:rgba(124,76,224,.14);box-shadow:0 0 24px rgba(155,107,240,.35)}
.pd-checks{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:clamp(13px,min(1vw,2.1vh),16px);font-weight:600;color:#E4E1F5}
.pd-checks li{display:flex;align-items:center;gap:9px}
.pd-checks span{display:grid;place-items:center;width:1.45em;height:1.45em;border-radius:50%;background:linear-gradient(135deg,#9B6BF0,#6D28D9);box-shadow:0 0 12px rgba(155,107,240,.6)}
.pd-checks svg{width:.95em;height:.95em;color:#fff;stroke-width:2.6}

/* ---------- Stage: everything inside sizes with the stage width (cqw) ---------- */
.pd-stage{position:relative;justify-self:center;width:min(100%,calc(68vh * 1.43));aspect-ratio:1.43;container-type:inline-size;z-index:1}
.pd-ring{position:absolute;left:16%;top:9%;width:62%;aspect-ratio:1;border-radius:50%;
  border:.35cqw solid rgba(183,156,255,.35);box-shadow:0 0 3cqw rgba(155,107,240,.45),inset 0 0 4cqw rgba(155,107,240,.25)}
.pd-ring::before{content:'';position:absolute;inset:-.35cqw;border-radius:50%;padding:.35cqw;
  background:conic-gradient(from var(--pa,0deg),transparent 0 55%,#fff 68%,#C4B5FD 74%,transparent 86%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:pdSpin 9s linear infinite}
.pd-ring::after{content:'';position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(124,76,224,.35),transparent 70%);filter:blur(2cqw)}
@property --pa{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes pdSpin{to{--pa:360deg}}

.pd-podium{position:absolute;left:3%;top:84%;width:84%;height:12%;border-radius:50%;
  background:radial-gradient(60% 80% at 50% 30%,rgba(196,181,253,.35),rgba(76,29,149,.85) 60%,#1E1250 100%);
  box-shadow:0 0 0 .3cqw rgba(196,181,253,.55),0 .6cqw 4cqw rgba(139,92,246,.75),0 2cqw 6cqw rgba(109,40,217,.55)}
.pd-podium span{position:absolute;inset:-6% 4% auto;height:55%;border-radius:50%;border-top:.35cqw solid rgba(255,255,255,.75);filter:blur(.15cqw);animation:pdPulse 3.2s ease-in-out infinite}
@keyframes pdPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* laptop */
.pd-laptop{position:absolute;left:12%;top:31%;width:66%;z-index:2}
.pd-screen{position:relative;margin:0 6%;aspect-ratio:1.55;display:grid;grid-template-columns:24% 1fr;border-radius:1.2cqw 1.2cqw .4cqw .4cqw;overflow:hidden;
  background:#0E1130;border:.7cqw solid #0B0B14;box-shadow:0 0 0 .12cqw rgba(196,181,253,.35),0 2cqw 5cqw rgba(0,0,0,.55),0 0 4cqw rgba(139,92,246,.35)}
.pd-base{height:2.6cqw;margin:0 -1%;border-radius:0 0 3cqw 3cqw;background:linear-gradient(180deg,#D7D3E8 0%,#9A95B4 60%,#5B5677 100%);box-shadow:0 1.2cqw 2.5cqw rgba(0,0,0,.55);position:relative}
.pd-base::before{content:'';position:absolute;left:42%;right:42%;top:0;height:30%;border-radius:0 0 1cqw 1cqw;background:#7D7898}

.pd-side{background:linear-gradient(180deg,#24124F,#170B38);padding:1.6cqw .9cqw;display:flex;flex-direction:column;gap:.45cqw;font-size:1.05cqw;color:#D9D0FF}
.pd-brand{display:flex;align-items:center;gap:.6cqw;margin-bottom:1cqw}
.pd-brand img{width:2.2cqw;height:auto}
.pd-brand b{display:flex;flex-direction:column;font-size:1.15cqw;line-height:1.15;color:#fff}
.pd-brand small{display:block;font-size:.8cqw;line-height:1.2;font-weight:700;color:#C4B5FD}
.pd-side span{display:flex;align-items:center;gap:.7cqw;padding:.55cqw .7cqw;border-radius:.6cqw}
.pd-side span svg{width:1.3cqw;height:1.3cqw;flex-shrink:0}
.pd-side .on{background:linear-gradient(135deg,#8B5CF6,#6D28D9);color:#fff;box-shadow:0 0 1.4cqw rgba(139,92,246,.6)}

.pd-dash{padding:1.4cqw 1.5cqw;display:flex;flex-direction:column;gap:1cqw;background:linear-gradient(180deg,#121535,#0D1030)}
.pd-dash-top{display:flex;align-items:center;justify-content:space-between}
.pd-dash-top b{font-size:1.7cqw;color:#fff}
.pd-dash-top span{display:flex;align-items:center;gap:.3cqw;font-size:.9cqw;color:#C9CDE6;border:.1cqw solid rgba(169,157,255,.3);border-radius:.6cqw;padding:.3cqw .7cqw}
.pd-dash-top span svg{width:.9cqw;height:.9cqw}
.pd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.8cqw}
.pd-kpis div{background:#171B42;border:.1cqw solid rgba(169,157,255,.18);border-radius:.8cqw;padding:.8cqw;display:flex;flex-direction:column;gap:.2cqw}
.pd-kpis svg{width:1.7cqw;height:1.7cqw}
.pd-kpis b{font-size:1.75cqw;line-height:1.1;color:#fff}
.pd-kpis small{font-size:.8cqw;color:#9BA2C9;line-height:1.2}
.pd-panels{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:.8cqw;min-height:0}
.pd-trend,.pd-over{background:#171B42;border:.1cqw solid rgba(169,157,255,.18);border-radius:.8cqw;padding:.8cqw;display:flex;flex-direction:column;min-height:0}
.pd-trend small,.pd-over small{font-size:.9cqw;font-weight:700;color:#E4E1F5;margin-bottom:.4cqw}
.pd-trend svg{flex:1;width:100%;min-height:0}
.pd-area{fill:url(#pdArea);stroke:none}
.pd-line{fill:none;stroke:#B79CFF;stroke-width:2;stroke-dasharray:320;stroke-dashoffset:320;animation:pdDraw 2.2s ease .4s forwards}
.pd-pts circle{fill:#fff;stroke:#8B5CF6;stroke-width:1.4}
@keyframes pdDraw{to{stroke-dashoffset:0}}
.pd-donut-row{flex:1;display:flex;align-items:center;gap:1cqw}
.pd-donut{width:7cqw;height:7cqw;flex-shrink:0;transform:rotate(-90deg)}
.pd-donut circle{fill:none;stroke-width:5}
.pd-donut .bg{stroke:#262B5C}
.pd-donut .a{stroke:#8B7CFF;stroke-dasharray:90.3 100;stroke-dashoffset:0}
.pd-donut .b{stroke:#F59E0B;stroke-dasharray:5.6 100;stroke-dashoffset:-90.3}
.pd-donut .c{stroke:#38BDF8;stroke-dasharray:4.1 100;stroke-dashoffset:-95.9}
.pd-donut text{transform:rotate(90deg);transform-origin:21px 21px;fill:#fff;font-size:8px;font-weight:800;text-anchor:middle;dominant-baseline:middle;stroke:none}
.pd-donut text.t{font-size:4px;font-weight:600;fill:#9BA2C9}
.pd-over ul{list-style:none;display:flex;flex-direction:column;gap:.5cqw;font-size:.85cqw;color:#C9CDE6;flex:1}
.pd-over li{display:flex;align-items:center;gap:.5cqw}
.pd-over li i{width:.7cqw;height:.7cqw;border-radius:50%}
.pd-over li b{margin-left:auto;color:#fff}

/* floating module cards (your card images) */
.pd-card{position:absolute;z-index:3;height:auto;cursor:pointer;
  filter:drop-shadow(0 0 1.4cqw color-mix(in srgb,var(--c) 55%,transparent)) drop-shadow(0 1.4cqw 1.8cqw rgba(0,0,0,.45));
  animation:pdFloat 6s ease-in-out infinite;transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .35s ease}
.pd-card:hover{animation-play-state:paused;transform:translateY(-1cqw) scale(1.07);
  filter:drop-shadow(0 0 1.2cqw var(--c)) drop-shadow(0 0 3.5cqw color-mix(in srgb,var(--c) 75%,transparent)) drop-shadow(0 1.6cqw 2cqw rgba(0,0,0,.5))}
.c-att{left:16%;top:3%;width:18.5%;animation-delay:0s}
.c-leave{left:45%;top:1%;width:18%;transform:rotate(2deg);animation-delay:1.1s}
.c-pay{left:77%;top:11%;width:18.5%;animation-delay:2.2s}
.c-emp{left:-1%;top:38%;width:19.5%;transform:rotate(-2deg);animation-delay:.6s}
.c-rep{left:80%;top:43%;width:19.5%;animation-delay:1.7s}
.c-leave:hover{transform:rotate(2deg) translateY(-1cqw) scale(1.07)}
.c-emp:hover{transform:rotate(-2deg) translateY(-1cqw) scale(1.07)}
@keyframes pdFloat{0%,100%{translate:0 0}50%{translate:0 -1.1cqw}}

/* ---------- Explore modules bar ---------- */
.pd-mods{position:relative;z-index:2;display:flex;align-items:stretch;margin-top:clamp(10px,2.2vh,28px);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(23,27,66,.85),rgba(13,17,48,.9));border:1px solid rgba(169,157,255,.25);
  box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 30px rgba(124,76,224,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pd-mods-tab{flex:0 0 auto;display:flex;align-items:center;padding:0 clamp(40px,4vw,70px) 0 clamp(20px,2.4vw,40px);font-weight:800;font-size:clamp(16px,min(1.5vw,3vh),26px);line-height:1.15;color:#fff;
  background:linear-gradient(135deg,#9B6BF0,#6D28D9);clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.pd-mods a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,.8vh,10px);padding:clamp(10px,2vh,22px) 8px;position:relative;
  font-weight:700;font-size:clamp(13px,min(1.15vw,2.4vh),19px);color:#fff;transition:background .3s ease}
.pd-mods a+a::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(169,157,255,.22)}
.pd-mods a svg{width:clamp(26px,4.8vh,40px);height:clamp(26px,4.8vh,40px);color:var(--c);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 60%,transparent));transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .3s ease}
.pd-mods a:hover{background:radial-gradient(70% 90% at 50% 50%,color-mix(in srgb,var(--c) 22%,transparent),transparent)}
.pd-mods a:hover svg{transform:translateY(-3px) scale(1.15);filter:drop-shadow(0 0 14px var(--c))}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .pd-inner{grid-template-columns:1fr;gap:28px}
  .pd-copy{text-align:left}
  .pd-stage{width:100%;max-width:760px}
  .pd-mods{flex-wrap:wrap}
  .pd-mods-tab{flex-basis:100%;clip-path:none;padding:14px 22px}
  .pd-mods a{flex:1 1 33%}
  .pd-mods a:nth-of-type(4)::before{display:none}
}
@media (max-width:600px){
  .pd h1{font-size:36px}
  .pd-actions{align-items:stretch}
  .pd-btn{justify-content:center}
  .pd-mods a{flex:1 1 50%}
  .pd-mods a:nth-of-type(odd)::before{display:none}
  .pd-mods a:nth-of-type(4)::before{display:block}
}
@media (prefers-reduced-motion:reduce){
  .pd-card,.pd-ring::before,.pd-podium span{animation:none}
  .pd-line{animation:none;stroke-dashoffset:0}
}

/* heading on exactly two lines */
.pd h1{font-size:clamp(28px,min(2.85vw,7vh),58px)}
.pd h1 .pd-l{display:block;white-space:nowrap}
.pd-desc{margin-bottom:clamp(18px,3.4vh,36px)}
@media (max-width:600px){ .pd h1{font-size:clamp(22px,6.6vw,36px)} }

/* "Your People" uses the same colours as "people thrive." on the home page */
.pd-grad{background:linear-gradient(95deg,#B49CFF 0%,#9B8CFF 40%,#45C8F0 75%,#3FD3F2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pd-under{left:0;right:6%;bottom:-.16em;width:94%;height:.2em}
.pd-under path{stroke:url(#pdUl);stroke-width:5;filter:none}
/* badge + heading sit higher */
@media (min-width:1101px){
  .pd-inner{align-items:start}
  .pd-copy{padding-top:clamp(28px,8vh,90px)}
}

/* Product badge: zoom, glow, shine and spreading stack layers on hover */
.pd-badge{position:relative;overflow:hidden;cursor:default;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease,border-color .35s ease,background .35s ease}
.pd-badge::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg)}
.pd-stack path{transition:transform .45s cubic-bezier(.34,1.56,.64,1),stroke .3s ease}
.pd-badge:hover{transform:scale(1.12);border-color:rgba(196,181,253,.85);background:rgba(124,76,224,.32);color:#fff;
  box-shadow:0 0 0 5px rgba(155,107,240,.16),0 0 26px rgba(155,107,240,.65),0 0 60px rgba(124,76,224,.45)}
.pd-badge:hover::after{left:130%;transition:left .8s ease}
.pd-badge:hover .pd-stack{color:#fff;filter:drop-shadow(0 0 6px rgba(196,181,253,.95))}
.pd-badge:hover .pd-stack .l1{transform:translateY(-2.6px)}
.pd-badge:hover .pd-stack .l3{transform:translateY(2.6px)}
@media (prefers-reduced-motion:reduce){ .pd-badge:hover{transform:none} }

/* ---------- Globe (replaces the laptop) ---------- */
.pd-globe{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.pd-podium{z-index:0;left:12%;width:70%;top:83%;height:13%}
.pd-podium{transition:box-shadow .5s ease}
/* card / module linked to the globe */
.pd-card.is-active{animation-play-state:paused;transform:translateY(-1cqw) scale(1.08);
  filter:drop-shadow(0 0 1.2cqw var(--c)) drop-shadow(0 0 3.8cqw color-mix(in srgb,var(--c) 80%,transparent)) drop-shadow(0 1.6cqw 2cqw rgba(0,0,0,.5))}
.c-leave.is-active{transform:rotate(2deg) translateY(-1cqw) scale(1.08)}
.c-emp.is-active{transform:rotate(-2deg) translateY(-1cqw) scale(1.08)}
.pd-stage.is-linked .pd-card:not(.is-active){opacity:.55;filter:saturate(.7) drop-shadow(0 1cqw 1.4cqw rgba(0,0,0,.4));transition:opacity .35s ease,filter .35s ease}
.pd-mods a.is-active{background:radial-gradient(70% 90% at 50% 50%,color-mix(in srgb,var(--c) 26%,transparent),transparent)}
.pd-mods a.is-active svg{transform:translateY(-3px) scale(1.15);filter:drop-shadow(0 0 14px var(--c))}
.pd-mods a.is-active::after{content:'';position:absolute;left:22%;right:22%;bottom:0;height:3px;border-radius:3px;background:var(--c);box-shadow:0 0 12px var(--c)}
.pd-fx{position:absolute;left:-6%;top:-8%;width:112%;height:116%;z-index:4;pointer-events:none}
.pd-badge-fx{position:absolute;pointer-events:none;z-index:3}
.pd-badge.is-on{transform:scale(1.12);border-color:rgba(196,181,253,.85);background:rgba(124,76,224,.32);color:#fff;
  box-shadow:0 0 0 5px rgba(155,107,240,.16),0 0 26px rgba(155,107,240,.65),0 0 60px rgba(124,76,224,.45)}
.pd-badge.is-on .pd-stack{color:#fff;filter:drop-shadow(0 0 6px rgba(196,181,253,.95))}
.pd-badge.is-on .pd-stack .l1{transform:translateY(-2.6px)}
.pd-badge.is-on .pd-stack .l3{transform:translateY(2.6px)}
.pd-badge{cursor:pointer}

/* Explore HRMS Modules bar — same look, smaller */
.pd-mods{border-radius:18px}
.pd-mods-tab{padding:0 clamp(30px,3vw,52px) 0 clamp(16px,1.8vw,30px);font-size:clamp(14px,min(1.15vw,2.4vh),19px);line-height:1.15}
.pd-mods a{padding:clamp(6px,1.2vh,12px) 8px;gap:clamp(2px,.5vh,6px);font-size:clamp(12.5px,min(.95vw,2vh),16px)}
.pd-mods a svg{width:clamp(20px,3.6vh,30px);height:clamp(20px,3.6vh,30px)}

/* globe canvas reaches past its box so rings/glow are never cut in a straight line */
.pd-globe{inset:auto;left:-12%;top:-12%;width:124%;height:132%;
  -webkit-mask-image:linear-gradient(#000 78%,transparent 100%);mask-image:linear-gradient(#000 78%,transparent 100%)}

/* ===== v-wave: soft aura + modules on a colour wave ===== */
@media (min-width:1101px){
/* aurora behind copy */
.pd-aura{position:absolute;left:0;top:0;width:58%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.pd-aura i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.pd-aura i:nth-child(1){width:520px;height:420px;left:-120px;top:40px;background:radial-gradient(closest-side,#6D28D9,transparent);animation:pdA 16s ease-in-out infinite alternate}
.pd-aura i:nth-child(2){width:420px;height:360px;left:260px;top:180px;background:radial-gradient(closest-side,#4F46E5,transparent);opacity:.45;animation:pdB 19s ease-in-out infinite alternate}
.pd-aura i:nth-child(3){width:340px;height:300px;left:120px;top:360px;background:radial-gradient(closest-side,#C026D3,transparent);opacity:.32;animation:pdA 22s ease-in-out infinite alternate-reverse}
.pd-aura b{position:absolute;inset:0;background-image:radial-gradient(rgba(196,181,253,.28) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask:radial-gradient(60% 60% at 35% 50%,#000,transparent 75%);mask:radial-gradient(60% 60% at 35% 50%,#000,transparent 75%)}
.pd-aura s{position:absolute;left:8%;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(196,181,253,.5),transparent);transform:rotate(-12deg)}
@keyframes pdA{to{transform:translate(80px,40px) scale(1.15)}}
@keyframes pdB{to{transform:translate(-70px,-50px) scale(.9)}}
.pd-copy{position:relative;z-index:1}

.pd-aura i{opacity:.16!important;filter:blur(90px)!important}.pd-aura i:nth-child(3){opacity:.1!important}.pd-aura b{opacity:.55}
.pd-mods{position:relative;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
.pd-mods a::before,.pd-mods a::after{display:none!important}
.pd-mods a,.pd-mods a:hover,.pd-mods a[class]{background:none!important;box-shadow:none!important;border:0!important;outline:0}
.pd-mods a svg{margin:0!important;color:var(--c)!important;stroke:var(--c)}
.pd-mods a span{margin:0!important}
.pd-mods-tab{all:unset}
.pd-aura i{opacity:.16!important;filter:blur(90px)!important}
.pd-aura i:nth-child(3){opacity:.1!important}
.pd-aura b{opacity:.55}

.pd-mods{position:relative;background:none!important;border:0!important;box-shadow:none!important;display:flex!important;align-items:center;gap:0!important;padding:0 0 0 0!important;height:118px;overflow:visible!important}
.pd-mods-tab{all:unset;display:flex!important;flex-direction:column;justify-content:center;flex:none;width:170px;font:800 12px/1.4 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#C4B5FD;white-space:nowrap}
.pd-wave{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pd-wave .base{fill:none;stroke:url(#pdWG);stroke-width:2;opacity:.75}
.pd-wave .glow{fill:none;stroke:url(#pdWG);stroke-width:10;opacity:.18;filter:blur(6px)}
.pd-wave .run{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:60 1940;filter:drop-shadow(0 0 6px #C4B5FD);animation:pdRun 7s linear infinite}
@keyframes pdRun{from{stroke-dashoffset:2000}to{stroke-dashoffset:0}}
.pd-mods a{position:relative;z-index:1;flex:1 1 0;display:flex!important;flex-direction:column!important;align-items:center;gap:8px;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;height:auto!important;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.pd-mods a::before,.pd-mods a::after{display:none!important}
.pd-mods a:nth-of-type(odd){transform:translateY(-16px)}
.pd-mods a:nth-of-type(even){transform:translateY(16px)}
.pd-mods a svg{width:48px!important;height:48px!important;padding:12px;box-sizing:border-box;border-radius:50%;margin:0!important;color:var(--c)!important;stroke:var(--c);
  background:#0F0C26;border:2px solid var(--c);box-shadow:0 0 0 6px rgba(10,8,28,.92),0 0 18px color-mix(in srgb,var(--c) 55%,transparent);transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s}
.pd-mods a span{font:700 14px Inter,sans-serif!important;color:#E9E7F5!important;margin:0!important;transition:color .3s}
.pd-mods a:nth-of-type(even){flex-direction:column-reverse!important}
.pd-mods a:hover svg{transform:scale(1.18);box-shadow:0 0 0 6px rgba(10,8,28,.92),0 0 34px var(--c)}
.pd-mods a:hover span{color:var(--c)!important}
.pd-mods a,.pd-mods a:hover,.pd-mods a:focus,.pd-mods a[class]{background:none!important;box-shadow:none!important;outline:0}
.pd-mods{height:104px;margin-top:-14px!important}
.pd-mods a:nth-of-type(odd){transform:translateY(-12px)}
.pd-mods a:nth-of-type(even){transform:translateY(12px)}
.pd-mods a svg{width:44px!important;height:44px!important;padding:11px}
/* CTA buttons in hero copy */
.pd-cta{display:flex;gap:14px;margin-top:clamp(18px,3.4vh,30px)}
.pd-cta a{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:12px;font:700 15px Inter,sans-serif;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s}
.pd-cta .p{color:#fff;background:linear-gradient(135deg,#8B5CF6,#6D28D9);box-shadow:0 10px 26px rgba(109,40,217,.45)}
.pd-cta .p:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(109,40,217,.6)}
.pd-cta .g{color:#E9E7F5;border:1px solid rgba(196,181,253,.35);background:rgba(255,255,255,.04)}
.pd-cta .g:hover{background:rgba(167,139,250,.14);border-color:#C4B5FD}
/* fog under the wave */
.pd-mods::before{content:'';position:absolute;left:8%;right:0;top:40%;height:90px;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%,rgba(139,92,246,.18),transparent 70%);filter:blur(10px)}
/* sequential ping ring on each node (like the light visiting it) */
.pd-mods a{--d:0s}
.pd-mods a:nth-of-type(1){--d:0s}.pd-mods a:nth-of-type(2){--d:1s}.pd-mods a:nth-of-type(3){--d:2s}
.pd-mods a:nth-of-type(4){--d:3s}.pd-mods a:nth-of-type(5){--d:4s}.pd-mods a:nth-of-type(6){--d:5s}
.pd-mods a .ping{position:absolute;left:50%;width:44px;height:44px;margin-left:-22px;border-radius:50%;border:2px solid var(--c);pointer-events:none;opacity:0;animation:pdPing 6s ease-out infinite;animation-delay:var(--d)}
.pd-mods a:nth-of-type(odd) .ping{top:0}
.pd-mods a:nth-of-type(even) .ping{bottom:0}
@keyframes pdPing{0%{transform:scale(1);opacity:.9}14%{transform:scale(1.9);opacity:0}100%{opacity:0}}
/* hover hint */
.pd-mods a em{position:absolute;left:50%;transform:translate(-50%,6px);white-space:nowrap;font:600 11.5px Inter,sans-serif;font-style:normal;color:#CFCBE6;
  padding:4px 10px;border-radius:999px;background:rgba(20,16,48,.92);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.pd-mods a:nth-of-type(odd) em{top:calc(100% + 4px)}
.pd-mods a:nth-of-type(even) em{bottom:calc(100% + 4px);transform:translate(-50%,-6px)}
.pd-mods a:hover em{opacity:1;transform:translate(-50%,0)}
.pd-mods a span{letter-spacing:.01em}
.pd-wave .run{animation-duration:6s!important}
.pd-mods a{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

.pd-hero{position:relative}
#pdAuraFix{}
}
@media (max-width:1100px){
  .pd-aura,.pd-wave{display:none}
  .pd-mods a .ping,.pd-mods a em{display:none}
  .pd-cta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
  .pd-cta a{display:inline-flex;align-items:center;height:46px;padding:0 20px;border-radius:12px;font:700 15px Inter,sans-serif;text-decoration:none}
  .pd-cta .p{color:#fff;background:linear-gradient(135deg,#8B5CF6,#6D28D9)}
  .pd-cta .g{color:#E9E7F5;border:1px solid rgba(196,181,253,.35)}
}
.np-off .pd-aura i,.np-off .pd-wave .run,.np-off .pd-mods .ping{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .pd-aura i,.pd-wave .run,.pd-mods .ping{animation:none!important} }
/* modules always above the globe; no running light */
.pd-mods{z-index:20!important;isolation:isolate}
.pd-wave .run{display:none!important}
.pd-mods a .ping{display:none!important}
/* soft fade at the bottom of the globe so it never leaves a hard edge over the modules */
@media (min-width:1101px){
  .pd-globe,.pd-fx{-webkit-mask:linear-gradient(180deg,#000 74%,transparent 92%);mask:linear-gradient(180deg,#000 74%,transparent 92%)}
}
.pd-mods{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ===== Product page — phones ===== */
@media (max-width:600px){
  .pd-checks{display:flex!important;flex-wrap:nowrap!important;gap:6px!important}
  .pd-checks li{flex:1 1 0;min-width:0;font-size:11px!important;white-space:nowrap;gap:5px!important}
  .pd-cta{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important}
  .pd-cta a{justify-content:center;height:46px!important;padding:0 8px!important;font-size:14px!important;white-space:nowrap}
  /* modules: label + 3x2 colour tiles */
  .pd-mods{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:10px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important;margin-top:8px!important}
  .pd-mods-tab{all:unset;grid-column:1/-1;display:flex!important;align-items:center;gap:10px;font:800 11px/1 Inter,sans-serif!important;letter-spacing:.14em;text-transform:uppercase;color:#C4B5FD;margin-bottom:2px}
  .pd-mods-tab br{display:none}
  .pd-mods-tab::before{content:'';width:22px;height:2px;border-radius:2px;background:#A78BFA}
  .pd-mods-tab::after{content:' ';}
  .pd-mods a{display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;gap:8px!important;height:auto!important;padding:14px 6px!important;border-radius:14px!important;
    background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,#14112E),#0E0B24)!important;border:1px solid color-mix(in srgb,var(--c) 32%,transparent)!important;box-shadow:none!important}
  .pd-mods a::before,.pd-mods a::after{display:none!important}
  .pd-mods a svg{width:42px!important;height:42px!important;padding:10px;box-sizing:border-box;border-radius:12px;margin:0!important;
    background:color-mix(in srgb,var(--c) 18%,transparent);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--c) 35%,transparent)}
  .pd-mods a span{font:700 12.5px Inter,sans-serif!important;color:#EDEBF8!important;margin:0!important}
}
@media (max-width:370px){ .pd-checks li{font-size:10px!important} .pd-checks li svg,.pd-checks li i{width:14px!important;height:14px!important} }
@media (max-width:600px){
  .pd-checks{justify-content:space-between}
  .pd-checks li{flex:0 1 auto!important}
  .pd-checks li>*:first-child{flex:none!important}
}
@media (max-width:600px){ .pd-mods a.is-active{border-color:var(--c)!important;box-shadow:0 0 0 1px var(--c),0 0 22px color-mix(in srgb,var(--c) 45%,transparent)!important;transform:translateY(-2px)} .pd-mods a{transition:box-shadow .3s,border-color .3s,transform .3s} }