/* Punsier OS / Future Experience — additive theme layer, no external libraries */
:root { --electric:#44b7ff; --electric2:#9d85ff; --edge:rgba(107,187,255,.25); }
body {background: #040c19;}
.site-header {background:rgba(3,12,27,.76);border-bottom-color:rgba(101,198,255,.18)}
.site-header::after {content:"";position:absolute;bottom:0;left:0;height:1px;width:100%;background:linear-gradient(90deg,transparent 4%,rgba(41,158,255,.55) 28%,transparent 59%,rgba(69,232,226,.45) 80%,transparent);opacity:.8;pointer-events:none}
.reading-progress {position:fixed;z-index:100;top:0;left:0;height:2px;width:100%;background:linear-gradient(90deg,#37dfff,#398bff,#a47dff);transform:scaleX(0);transform-origin:left center;box-shadow:0 0 16px #3daaff;pointer-events:none}
body.admin-bar .reading-progress{top:32px}
.hero{background:radial-gradient(ellipse at 71% 40%,rgba(20,57,138,.43),transparent 48%),radial-gradient(ellipse at 24% 15%,rgba(28,43,90,.14),transparent 55%),linear-gradient(110deg,#040b18 2%,#071429 60%,#060f20);min-height:745px}
.neural-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.72}
.hero-grid{z-index:0;opacity:.36;background-size:70px 70px;mask-image:linear-gradient(90deg,transparent 4%,black 70%);transform:perspective(750px) rotateX(16deg) scale(1.2);transform-origin:center bottom}
.hero-scanbeam{position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(105deg,transparent 42%,rgba(71,156,255,.05) 50%,rgba(84,218,255,.10) 50.3%,transparent 57%);transform:translateX(-85%);animation:heroBeam 11s ease-in-out infinite;mix-blend-mode:screen}
.hero-inner,.hero-bottom{position:relative;z-index:1}.hero-inner{min-height:710px;grid-template-columns:1.03fr .97fr;padding-block:85px 75px}
.hero-copy{position:relative;z-index:2}
.hero-serial{font:700 10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:#6c8eaf;letter-spacing:.14em;display:flex;align-items:center;gap:10px;margin-bottom:21px;white-space:nowrap}
.serial-icon{color:#45bbf6;font-size:17px;animation:serialPulse 3s infinite}.serial-right{border-left:1px solid #305077;padding-left:12px;color:#8fcafa}
.eyebrow-pill{background:rgba(15,45,83,.62);box-shadow:inset 0 1px 0 rgba(145,215,255,.12),0 0 30px rgba(34,137,241,.09);border-color:rgba(79,178,255,.35)}
.hero h1{font-size:clamp(48px,5.0vw,78px);letter-spacing:-.075em;line-height:1.06;margin-top:28px;max-width:750px;text-wrap:balance}
.hero h1 .headline-electric{background-image:linear-gradient(105deg,#47a0ff 5%,#73ebff 28%,#e0faff 40%,#48b3ff 55%,#9a8aff 70%,#56c9ff 88%);background-size:230% 100%;animation:headGlow 7s linear infinite;background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 25px rgba(40,152,255,.16))}
.hero-lead{font-size:16px;max-width:570px}.hero-actions .btn-primary{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(115deg,#198aff,#4bcbff);box-shadow:0 0 0 1px rgba(68,196,255,.25),0 17px 55px rgba(22,117,249,.23)}
.hero-actions .btn-primary::before,.final-cta .btn-primary::before{content:"";position:absolute;z-index:-1;inset:-60% auto -60% -45%;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transform:rotate(23deg);animation:buttonShine 5.5s ease-in-out infinite;pointer-events:none}
.hero-terminal{margin-top:26px;min-height:45px;padding:12px 15px;display:inline-flex;gap:11px;flex-wrap:wrap;align-items:center;background:rgba(4,15,28,.68);border:1px solid rgba(79,154,241,.27);border-radius:10px;box-shadow:inset 0 0 25px rgba(6,46,85,.26);font:600 11px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.015em}
.terminal-prompt{color:#51c3d9}.terminal-command{color:#caeaff}.terminal-command b{color:#6ff3be}.terminal-cursor{width:7px;height:14px;background:#7cfad8;box-shadow:0 0 12px #36f7c8;animation:blink .9s steps(1) infinite}
.hero-notes{margin-top:21px}
.hero-visual{min-height:515px;perspective:1100px;transform:translateX(9px)}
.orb-outer{width:490px;height:490px;border:1px solid rgba(56,160,255,.42);background:conic-gradient(from 10deg,transparent 0 36%,rgba(55,183,255,.14) 38%,transparent 40% 70%,rgba(103,142,255,.09) 72%,transparent 74%);box-shadow:0 0 0 15px rgba(8,67,116,.035),0 0 55px rgba(26,118,238,.12);animation:orbitRotate 32s linear infinite}
.orb-outer::before{content:"";position:absolute;inset:-9px;border-radius:50%;border-top:2px solid rgba(77,218,255,.88);border-left:1px solid transparent;border-bottom:1px solid rgba(93,109,255,.45);filter:drop-shadow(0 0 12px #1c87ff)}
.orb-inner{width:340px;height:340px;animation:orbitRotateBack 22s linear infinite}
.orbit-markers{position:absolute;inset:0;pointer-events:none;animation:orbitRotate 25s linear infinite}
.orbit-markers i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;background:#6dedff;border-radius:50%;box-shadow:0 0 0 5px #3ca5ff18,0 0 19px #42baff}
.orbit-markers i:nth-child(1){transform:translate(0,-245px)}.orbit-markers i:nth-child(2){transform:translate(229px,75px);width:5px;height:5px}.orbit-markers i:nth-child(3){transform:translate(-199px,139px)}.orbit-markers i:nth-child(4){transform:translate(-200px,-140px);width:5px;height:5px}
.holo-core{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.holo-core span{position:absolute;width:390px;height:390px;border:1px solid rgba(31,177,250,.21);border-radius:50%;box-shadow:0 0 65px rgba(32,168,255,.12);transform:rotateX(65deg) rotate(-35deg);animation:haloFloat 8s ease-in-out infinite}.holo-core span:nth-child(2){width:300px;height:300px;transform:rotateY(65deg) rotate(-45deg);animation-delay:-3s;border-color:rgba(103,94,255,.28)}.holo-core span:nth-child(3){width:220px;height:220px;filter:blur(3px);background:radial-gradient(circle,rgba(41,114,245,.13),transparent 75%);border:0}
.glass-dash{width:min(100%,495px);transform:perspective(1300px) rotateY(-7deg) rotateX(3deg);background:linear-gradient(136deg,rgba(19,43,79,.96),rgba(5,16,34,.97) 55%,rgba(12,35,74,.96));border-color:rgba(88,198,255,.50);box-shadow:0 32px 110px rgba(1,6,23,.80),0 0 90px rgba(14,119,255,.20),inset 0 1px 0 rgba(193,239,255,.21);transition:transform .25s ease-out,box-shadow .35s;will-change:transform}
.glass-dash::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.07);border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 55px rgba(63,172,255,.06)}
.panel-scanline{position:absolute;inset:-1px;pointer-events:none;z-index:3;background:linear-gradient(180deg,transparent 0%,rgba(70,201,255,.015) 47%,rgba(82,200,255,.13) 50%,rgba(68,177,255,.015) 53%,transparent 60%);height:80%;transform:translateY(-100%);animation:panelScan 7s linear infinite}
.dash-top{background:linear-gradient(90deg,#06172b,#132a48)}.dash-top-title{letter-spacing:.13em}.dash-live{color:#72ebd6}.dash-live span{box-shadow:0 0 13px #28e5c8;animation:serialPulse 2s infinite}
.dash-body h2{font-size:clamp(29px,3vw,44px);letter-spacing:-.055em}.dash-list>div{transition:background .3s,border-color .3s}.dash-list>div:nth-child(2){border-color:rgba(76,164,255,.46);background:linear-gradient(90deg,rgba(21,79,148,.44),rgba(7,22,43,.85))}
.telemetry{margin-top:19px;border-top:1px solid #35517b55;padding-top:12px}.telemetry>span{font:700 8px ui-monospace,Consolas,monospace;letter-spacing:.18em;color:#6eb2e9}.telemetry-bars{height:39px;margin-top:8px;display:flex;align-items:end;gap:4px;opacity:.8}.telemetry-bars i{height:var(--h);flex:1;min-width:1px;border-radius:2px 2px 0 0;background:linear-gradient(0deg,#0a67d7,#69dbf8);box-shadow:0 0 9px rgba(56,178,255,.23);animation:waveBar 1.7s ease-in-out infinite alternate}.telemetry-bars i:nth-child(3n){animation-delay:-1.15s}.telemetry-bars i:nth-child(5n){animation-delay:-.75s}.telemetry-bars i:nth-child(7n){animation-delay:-.45s}
.float-card{border-color:rgba(115,212,255,.4);box-shadow:0 14px 48px #0008,0 0 30px rgba(26,119,237,.12);animation:floatCard 6s ease-in-out infinite}.float-right{animation-delay:-3s}
.hero-bottom .hero-scroll span{display:inline-block;animation:scrollBounce 2s ease-in-out infinite}
.signal-strip{height:51px;display:flex;align-items:center;overflow:hidden;border-block:1px solid rgba(78,177,255,.24);background:linear-gradient(90deg,#061a32,#0a1d35,#061a32);position:relative}
.signal-strip:before,.signal-strip:after{content:"";width:130px;position:absolute;inset-block:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,#061a32,transparent)}.signal-strip:after{left:auto;right:0;transform:rotate(180deg)}
.signal-track{display:flex;align-items:center;gap:33px;min-width:max-content;white-space:nowrap;animation:signalFlow 39s linear infinite}.signal-track span{font:800 10px ui-monospace,Consolas,monospace;letter-spacing:.17em;color:#7fb9ec}.signal-track b{font-size:16px;color:#4addf5;text-shadow:0 0 14px #39a1ff;font-weight:600}
.trust-band{background:linear-gradient(180deg,#091a30,#07182a)}.trust-item strong{background:linear-gradient(160deg,#fff,#b5dcff);-webkit-background-clip:text;background-clip:text;color:transparent}.trust-item strong .accent{background:linear-gradient(90deg,#2eb6ff,#72edff);-webkit-background-clip:text;background-clip:text;color:transparent}
.services-section{background:radial-gradient(ellipse at 85% 35%,rgba(10,62,130,.14),transparent 60%),#071324}
.service-card{transform-style:preserve-3d;background:linear-gradient(150deg,#102540,#0a172b 75%);border-color:rgba(99,171,252,.24);box-shadow:inset 0 1px 0 rgba(150,208,255,.05);transition:transform .23s ease-out,box-shadow .25s,border-color .25s}
.service-card:before{z-index:0;inset:0;opacity:0;background:radial-gradient(290px circle at var(--mx,50%) var(--my,50%),rgba(45,156,255,.23),transparent 68%);transition:opacity .3s}
.service-card:after{content:"";inset:0;position:absolute;pointer-events:none;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(118,223,255,.72),transparent 69%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.service-card:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px);box-shadow:0 26px 56px rgba(0,5,18,.36),0 0 38px rgba(15,113,245,.13)}.service-card:hover:before,.service-card:hover:after{opacity:1}
.service-card:focus-within{border-color:#67caff;box-shadow:0 0 0 2px #63bfff55}.service-card:focus-within:before{opacity:1}
.service-topline{position:absolute;top:0;left:11%;width:44%;height:1px;opacity:.7;background:linear-gradient(90deg,transparent,#68ceff,transparent);transform:scaleX(.5);transform-origin:left;transition:transform .45s;box-shadow:0 0 10px #2aafff}
.service-card:hover .service-topline{transform:scaleX(1.8)}
.service-card .service-icon{transition:transform .4s,box-shadow .4s}.service-card:hover .service-icon{transform:translateZ(30px) rotate(-6deg);box-shadow:0 0 40px rgba(51,170,251,.24)}
.service-card .service-card-top,.service-card h3,.service-card p,.service-card .service-category,.service-card .service-card-bottom{transform:translateZ(10px)}
.problem-choice{overflow:hidden}.problem-choice:after{content:"";position:absolute;left:-110%;right:auto;top:0;height:100%;width:70%;background:linear-gradient(90deg,transparent,rgba(99,200,255,.08),transparent);transform:skewX(-20deg);transition:left .65s}.problem-choice:hover:after{left:170%}
.problem-result{box-shadow:0 18px 65px rgba(0,60,136,.1),inset 0 1px 0 #aeeaff12}.problem-result.is-updating{animation:resultRefresh .45s ease}
.final-cta{background:radial-gradient(ellipse at 52% 0%,rgba(30,105,222,.26),transparent 66%),linear-gradient(130deg,#12274a,#081629 58%,#10214b)}.final-cta:after{content:"";position:absolute;inset:-3px;pointer-events:none;border-radius:inherit;background:linear-gradient(130deg,transparent 20%,rgba(57,176,255,.10) 51%,transparent 75%);transform:translateX(-90%);animation:ctaSheen 12s linear infinite;z-index:-1}
.quick-wa{position:fixed;z-index:45;right:22px;bottom:23px;display:flex;align-items:center;gap:9px;font-weight:850;font-size:11px;letter-spacing:.025em;color:#eafff6;background:linear-gradient(135deg,#008c6b,#075947);border:1px solid rgba(109,255,198,.56);box-shadow:0 10px 40px #001911b8,0 0 24px #0cbf9555;border-radius:999px;padding:13px 17px;isolation:isolate;transition:transform .2s,box-shadow .2s}
.quick-wa svg{width:19px;height:19px}.quick-wa:hover{transform:translateY(-4px);box-shadow:0 15px 50px #001911c9,0 0 35px #0cbf9559}.quick-wa-pulse{position:absolute;z-index:-1;inset:0;border:1px solid rgba(90,251,200,.5);border-radius:inherit;animation:waPulse 3.2s ease-out infinite;pointer-events:none}
/* Reveal is opt-in only after JS establishes an IntersectionObserver. */
.js-ready [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1)}
.js-ready [data-reveal].is-visible{opacity:1;transform:translateY(0)}
.js-ready .hero-copy[data-reveal]{transition-delay:.1s}.js-ready .hero-visual[data-reveal]{transition-delay:.22s}
.js-ready .service-card[data-reveal]:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px)}
.js-ready .service-card[data-reveal].is-visible{transform:translateY(0)}
.js-ready .service-card[data-reveal].is-visible:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px)}
@keyframes orbitRotate{to{transform:rotate(340deg)}}@keyframes orbitRotateBack{to{transform:rotate(-360deg)}}
@keyframes heroBeam{0%,18%{transform:translateX(-115%)}43%,100%{transform:translateX(115%)}}
@keyframes serialPulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes headGlow{0%{background-position:0% 50%}100%{background-position:230% 50%}}
@keyframes buttonShine{0%,70%{left:-45%}100%{left:150%}}
@keyframes blink{50%{opacity:0}}
@keyframes haloFloat{0%,100%{filter:brightness(1) drop-shadow(0 0 5px #1389ff)}50%{filter:brightness(1.4) drop-shadow(0 0 25px #1389ff)}}
@keyframes panelScan{0%{transform:translateY(-120%)}58%,100%{transform:translateY(170%)}}
@keyframes waveBar{0%{transform:scaleY(.62);opacity:.45}100%{transform:scaleY(1);opacity:1}}
@keyframes floatCard{0%,100%{translate:0 0}50%{translate:0 -13px}}
@keyframes scrollBounce{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
@keyframes signalFlow{to{transform:translateX(-50%)}}
@keyframes resultRefresh{0%{filter:brightness(1.35)}100%{filter:brightness(1)}}
@keyframes ctaSheen{0%,68%{transform:translateX(-105%)}100%{transform:translateX(125%)}}
@keyframes waPulse{0%{opacity:.65;transform:scale(1)}78%,100%{opacity:0;transform:scale(1.25)}}
@media(max-width:1160px){.hero h1{font-size:clamp(45px,4.9vw,65px)}.glass-dash{max-width:450px}.hero-visual{min-height:475px}.hero-serial{font-size:9px}.hero-inner{min-height:650px}}
@media(max-width:960px){.hero-inner{grid-template-columns:1fr;gap:15px;padding:80px 0 50px}.hero h1{font-size:clamp(46px,7.6vw,80px)}.hero-visual{min-height:475px;transform:none}.hero-serial{font-size:10px}.orb-outer{width:435px;height:435px}.orb-inner{width:308px;height:308px}.orbit-markers i{display:none}.glass-dash{max-width:480px}.float-left{left:5%}.float-right{right:4%}}
@media(max-width:640px){.hero{min-height:auto}.hero-inner{padding:42px 0 40px}.hero-serial{font-size:8px;gap:6px;margin-bottom:16px;white-space:normal}.serial-right{display:none}.hero h1{font-size:clamp(41px,10.4vw,56px);letter-spacing:-.065em}.hero-terminal{font-size:9px;gap:7px;padding:9px 10px;max-width:100%}.hero-visual{min-height:355px;margin-top:35px}.orb-outer{width:327px;height:327px}.orb-inner{width:230px;height:230px}.holo-core span{width:260px;height:260px}.holo-core span:nth-child(2){width:215px;height:215px}.glass-dash{max-width:360px;width:calc(100% - 15px);transform:none!important}.dash-top-title{font-size:7px}.dash-live{font-size:7px}.telemetry{margin-top:11px}.telemetry-bars{height:24px}.signal-strip{height:44px}.signal-track{gap:22px}.signal-track span{font-size:9px}.quick-wa{right:14px;bottom:14px;border-radius:50%;padding:14px;width:52px;height:52px;justify-content:center}.quick-wa svg{width:23px;height:23px}.quick-wa>span:last-child{display:none}.hero-bottom{position:relative}.float-left{left:0}.float-right{right:-3px}.story-decoration{height:235px}}
@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}.neural-canvas{display:none}.hero-scanbeam,.headline-electric,.hero h1 .headline-electric,.orb,.orbit-markers,.holo-core span,.panel-scanline,.telemetry-bars i,.float-card,.hero-scroll span,.terminal-cursor,.serial-icon,.dash-live span,.signal-track,.quick-wa-pulse,.final-cta:after,.hero-actions .btn-primary:before{animation:none!important}.js-ready [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}.glass-dash,.service-card,.service-card:hover{transform:none!important;transition:none!important}.reading-progress{display:none}.signal-track{transform:none!important}}