:root{--ink:#f5f6f8;--mute:#9aa0ab;--line:rgba(255,255,255,.12);--card:rgba(22,24,30,.78)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:#030409;color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.nav{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 28px;background:rgba(3,4,9,.6);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:8px}.wv{width:30px;height:16px;color:#fff}.pt{font-size:19px;font-weight:500;letter-spacing:-.01em}.by{font-size:11px;letter-spacing:.14em;color:#c9ccd3;margin-left:6px}
.links{display:flex;gap:30px;font-size:14px;color:#b9bdc6}.links a{padding:4px 0;border-bottom:1.5px solid transparent}.links a:hover{color:#fff}.links .on{color:#fff;border-color:#fff}
.hero{position:relative;text-align:center;padding:34px 24px 60px;overflow:hidden}
h1{font-size:clamp(44px,6.4vw,92px);font-weight:300;letter-spacing:-.025em;line-height:1.05}
.sub{color:#c3c7cf;font-size:clamp(15px,1.5vw,19px);font-weight:300;margin-top:12px}
.stage{position:relative;height:min(46vh,430px);max-width:1000px;margin:-4px auto 0}
.glow{position:absolute;inset:-30% -25%;background:radial-gradient(closest-side,rgba(32,72,190,.75),rgba(16,38,120,.4) 45%,rgba(3,4,9,0) 100%);pointer-events:none}
#c{position:relative;width:100%;height:100%;display:block;cursor:grab}#c:active{cursor:grabbing}
.hs{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;transition:opacity .4s,background .2s;opacity:.75}
.hs::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.hs:hover{background:rgba(255,255,255,.35);opacity:1}.hs.off{opacity:0;pointer-events:none}
.card{position:absolute;right:2%;top:10%;width:250px;text-align:left;padding:16px 18px;border-radius:16px;background:rgba(18,22,34,.7);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--line)}
.card h2{font-size:14px;font-weight:500;margin-bottom:4px}.card p{color:var(--mute);font-size:13px}
.x{position:absolute;top:6px;right:10px;background:none;border:0;color:var(--mute);font-size:18px;cursor:pointer}
.ph{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:11px;color:rgba(255,255,255,.35);white-space:nowrap}
.chat{position:relative;max-width:620px;margin:8px auto 0;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 8px 8px 18px;border-radius:99px;background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.spark{width:20px;height:20px;color:#e8ebf2}
.chat input{flex:1;min-width:0;background:none;border:0;color:#fff;font:inherit;font-size:15px;padding:8px 0;outline:0}.chat input::placeholder{color:#a3a8b2}
.chat button{width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;display:grid;place-items:center}.chat button svg{width:14px;height:14px}
.reply{flex-basis:100%;text-align:left;padding:0 10px 6px;color:var(--mute);font-size:13px}
.tiers{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1110px;margin:22px auto 0;text-align:left}
.tier{position:relative;height:170px;padding:20px 22px;border-radius:14px;background:var(--card);border:1px solid var(--line);overflow:hidden;transition:border-color .2s,transform .2s}
.tier:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.tier h2{font-size:19px;font-weight:500}.tier i{display:block;width:18px;height:2px;background:#fff;margin:8px 0 10px}.tier p{font-size:13px;color:var(--mute)}
.ar{position:absolute;right:18px;bottom:18px;width:14px;height:14px;color:#fff}
.gg{position:absolute;left:26px;bottom:-6px;height:110px}.ptk{position:absolute;left:22px;bottom:14px;height:62px}
.bb{position:absolute;left:22px;bottom:24px;width:58px;height:30px;color:#e8ebf2}
section h2{font-size:clamp(30px,3.6vw,48px);font-weight:300;letter-spacing:-.02em;text-align:center}
.lead{color:var(--mute);text-align:center;margin:10px auto 36px;max-width:34em;font-weight:300}
.specs,.inq{padding:100px 6vw 20px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1110px;margin:40px auto 0}
.strip div{padding:28px 20px;border-radius:14px;background:var(--card);border:1px solid var(--line)}.strip b{display:block;font-size:24px;font-weight:400}.strip span{color:var(--mute);font-size:13px}
.inq{background:radial-gradient(600px 300px at 50% 70%,rgba(30,64,170,.28),transparent)}
.iform{max-width:620px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.iform input,.iform select,.iform textarea{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;color:#fff;padding:14px;font:inherit}
.iform select,.iform textarea,.iform button{grid-column:1/-1}.iform textarea{min-height:110px}
.send{padding:13px;border-radius:99px;border:0;background:#f5f6f8;color:#05070d;font:inherit;font-weight:500;cursor:pointer}.thanks{text-align:center;grid-column:1/-1}
footer{display:flex;gap:10px;justify-content:center;align-items:center;color:var(--mute);font-size:12px;padding:80px 0 40px}footer .wv{width:22px;height:12px}
@media(max-width:820px){.nav{grid-template-columns:1fr;justify-items:center;gap:10px;padding:12px}.links{gap:18px;font-size:13px}.spacer{display:none}
.stage{height:36vh}.tiers{grid-template-columns:1fr;gap:14px}.strip{grid-template-columns:1fr 1fr}.card{left:4%;right:4%;width:auto;top:auto;bottom:6%}.ph{display:none}}
.iform>*{min-width:0;width:100%}
.gg{left:auto;right:56px;bottom:-8px;height:120px}.ptk{left:auto;right:50px;bottom:16px;height:70px}
@media(max-width:820px){.iform{grid-template-columns:1fr}.stage{height:34vh}}
/* v3: extended canvas with soft edge fade; chat layered above */
.stage{height:calc(min(46vh,430px) + 150px);margin-bottom:-150px;max-width:1200px;z-index:1}
.glow{inset:-20% -10% 0;z-index:0}
#c{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 62%,transparent 96%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 62%,transparent 96%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
.chat,.tiers{z-index:3}.hs,.card{z-index:4}
.ph{bottom:160px}
@media(max-width:820px){.stage{height:calc(36vh + 110px);margin-bottom:-110px}.ph{display:none}}
/* customizer */
.mktoggle{position:absolute;left:3%;top:6%;z-index:5;display:flex;gap:8px;align-items:center;padding:8px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.22);background:rgba(20,34,80,.45);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#fff;font:inherit;font-size:13px;cursor:pointer}
.mktoggle svg{width:16px;height:16px}.mktoggle[aria-expanded=true]{background:rgba(255,255,255,.16)}
.mkpanel{position:absolute;left:3%;top:calc(6% + 44px);z-index:5;width:260px;text-align:left;padding:16px;border-radius:18px;background:rgba(12,20,52,.62);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);font-size:13px}
.mkpanel h2,.mkpanel h4{font-size:14px;font-weight:500;display:flex;justify-content:space-between;align-items:baseline}.mkpanel h2 span,.mkpanel h4 span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:400}
.lbl{color:var(--mute);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin:12px 0 8px}
.sws{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.sw{aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:var(--c);cursor:pointer;padding:0;position:relative}
.sw.on{box-shadow:0 0 0 2px #0b1534,0 0 0 3.5px #fff}
.sw.custom{background:conic-gradient(red,#ff0,lime,cyan,blue,#f0f,red);overflow:hidden}.sw.custom input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.row{display:flex;gap:8px;margin-top:8px}
.filebtn{flex:1;position:relative;overflow:hidden;text-align:center;padding:7px 8px;border-radius:10px;border:1px dashed rgba(255,255,255,.3);color:#dfe3ea;font-size:12px;cursor:pointer}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.mini{padding:7px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:12px;cursor:pointer;flex:1}
.mini.solid{background:#f2f4f8;color:#071338;border-color:transparent;font-weight:500}
.rng{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:8px;margin-top:8px;color:var(--mute);font-size:12px}
.rng input{accent-color:#c9d0dc;width:100%}
.tiny{font-size:10.5px;color:rgba(255,255,255,.45);margin-top:8px}
.mkcta{display:block;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:var(--mute)}.mkcta b{color:#fff;font-weight:500}
@media(max-width:820px){.mktoggle{top:2%;left:50%;transform:translateX(-50%)}.mkpanel{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:52vh;overflow:auto;z-index:40}.stage{z-index:auto}}
.mkpanel{width:300px;padding:14px 16px}.mkpanel h2,.mkpanel h4{gap:8px}.mini{padding:6px 10px;white-space:nowrap}.filebtn{white-space:nowrap;font-size:11.5px}
.rng{margin-top:5px}.lbl{margin:10px 0 6px}
@media(max-width:820px){.mkpanel{width:auto}}
/* inside tab */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;margin-top:10px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.tab{padding:6px;border:0;border-radius:8px;background:none;color:var(--mute);font:inherit;font-size:12px;cursor:pointer}.tab.on{background:rgba(255,255,255,.16);color:#fff}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:3px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.seg button{padding:7px 0;border:0;border-radius:8px;background:none;color:#cfd4dd;font:inherit;font-size:12px;cursor:pointer}.seg button.on{background:#f2f4f8;color:#071338;font-weight:500}
.lbl .linkbtn{float:right;background:none;border:0;color:#9fbaff;font:inherit;font-size:10px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:0}
.uls{display:flex;flex-wrap:wrap;gap:6px}
.ul{position:relative;cursor:pointer}.ul input{position:absolute;opacity:0;pointer-events:none}
.ul span{display:inline-block;padding:5px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.22);font-size:11.5px;color:#cfd4dd}
.ul input:checked+span{background:rgba(159,186,255,.18);border-color:#9fbaff;color:#fff}
.ul input:checked+span::before{content:"✓ ";}
.ul input:focus-visible+span{outline:2px solid #9fbaff}
.ul.locked{cursor:not-allowed}.ul.locked span{opacity:.55;border-style:dashed}.ul.locked span::after{content:" 🔒";font-size:9px}
.build{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.build .lbl{margin:0 0 6px}.build ul{list-style:none;padding:0;margin:0;display:grid;gap:3px}
.build li{display:flex;justify-content:space-between;gap:10px;font-size:12px}.build li span{color:var(--mute)}.build li b{font-weight:500;text-align:right}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;border:1px solid rgba(255,255,255,.4);vertical-align:-1px}
.demo{font-size:9.5px;letter-spacing:.1em;padding:1px 6px;border-radius:5px;background:#f2c200;color:#111;margin-right:6px}
.strip.two{grid-template-columns:repeat(2,1fr);max-width:740px}
.bsl{grid-column:1/-1;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:-6px}
.bsum{min-height:64px!important;height:auto;color:#cfd4dd!important;font-size:13px!important;line-height:1.5;overflow:hidden;resize:none;white-space:pre-wrap;word-break:break-word}
.mkpanel{max-height:calc(100vh - 140px);overflow:auto}
@media(max-width:820px){.strip.two{grid-template-columns:1fr 1fr}.mkpanel{max-height:58vh}}
.stage{z-index:auto}
.build li b{min-width:0;overflow-wrap:anywhere}.build li span{flex:none}
.mkpanel{max-height:calc(100vh - 230px)}
@media(max-width:820px){.mkpanel{max-height:58vh}}
@media(min-width:821px){.mkpanel{left:0;width:272px}.mktoggle{left:0}}
/* v6: zero-layout-shift cert chips */
.uls{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ul span{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:28px;padding:0 4px;font-weight:400!important;white-space:nowrap;box-sizing:border-box;border-width:1px!important}
.ul span::before{content:"✓"!important;display:inline-block;width:10px;text-align:center;opacity:0;flex:none}
.ul input:checked+span::before{content:"✓"!important;opacity:1}
.ul span::after{content:"🔒"!important;display:inline-block;width:10px;font-size:9px;opacity:0;flex:none}
.ul.locked span::after{opacity:1}
.ul.locked span{border-style:dashed}
#ulnote{display:block!important;min-height:1.4em;visibility:visible}
#ulnote[hidden]{visibility:hidden}
.lbl .linkbtn{width:64px;text-align:right}
.build li{min-height:18px}.build li:last-child{min-height:34px;align-items:flex-start}
.uls{grid-template-columns:repeat(3,minmax(0,1fr))}
.ul{min-width:0}.ul span{overflow:hidden}
.mkpanel{overflow-x:hidden;scrollbar-gutter:stable}
.lbl .linkbtn{width:76px;white-space:nowrap;line-height:1.2}
.build li:last-child{min-height:50px}
.build li:last-child{min-height:66px}@media(max-width:820px){.build li:last-child{min-height:50px}}
/* v7: battery seg, collapsibles, mobile bottom sheet */
.seg.two{grid-template-columns:repeat(2,1fr)}
.grab,.mkclose{display:none}
.mkbody{display:block}
.logox{margin-top:10px}.logox>summary,.build>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
.logox>summary::-webkit-details-marker,.build>summary::-webkit-details-marker{display:none}
.logox>summary{color:var(--mute);font-size:11px;letter-spacing:.1em;text-transform:uppercase;min-height:28px}
.logox>summary em{margin-left:auto;font-style:normal;text-transform:none;letter-spacing:0;color:#dfe3ea;font-size:12px}
.logox>summary svg,.build>summary svg{width:12px;height:12px;flex:none;transition:transform .2s;color:var(--mute)}
.logox[open]>summary svg,.build[open]>summary svg{transform:rotate(180deg)}
.build>summary .lbl{margin:0}
#buildline{margin-left:auto;font-size:12px;color:#dfe3ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.build[open] #buildline{visibility:hidden}
.build[open]>summary{margin-bottom:6px}
@media (min-width:769px){.logox>summary,.build>summary{pointer-events:none}.logox>summary svg,.build>summary svg,.build #buildline{display:none}}
@media (max-width:768px){
 .mktoggle{top:2%;left:50%;transform:translateX(-50%)}
 .mkpanel{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:auto!important;max-height:none!important;margin:0!important;
  height:var(--sheet-h,40vh);border-radius:22px 22px 0 0;padding:0!important;display:flex;flex-direction:column;overflow:hidden!important;z-index:60;
  background:rgba(10,16,42,.86);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);border-bottom:0;touch-action:none;overscroll-behavior:contain}
 .mkpanel[hidden]{display:none}
 .mkpanel.anim{transition:height .32s cubic-bezier(.2,.8,.2,1)}
 .grab{display:flex;justify-content:center;align-items:center;height:26px;flex:none;cursor:grab;touch-action:none}
 .grab i{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.35)}
 .mkclose{display:grid;place-items:center;position:absolute;top:8px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:22px;z-index:2;cursor:pointer}
 .mkbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:0 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;scrollbar-width:none}
 .mkbody>h4{order:0;min-height:30px;padding-right:52px;touch-action:none}
 .mkbody>.build{order:1}.mkbody>.tabs{order:2}.mkbody>#tab-look,.mkbody>#tab-inside,.mkbody>#tab-ports{order:3}.mkbody>.mkcta{order:4}
 .tabs{margin-top:10px}.tab{min-height:40px;font-size:13px}
 .build{margin-top:8px;padding:0 12px}.build>summary{min-height:44px}.build[open]{padding-bottom:10px}
 .sws{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 6px;margin:0 -2px;scrollbar-width:none;scroll-snap-type:x proximity}
 .sws::-webkit-scrollbar,.mkbody::-webkit-scrollbar{display:none}
 .sw{flex:none;width:44px;height:44px;aspect-ratio:auto;scroll-snap-align:start}
 .logox>summary{min-height:44px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
 .filebtn,.mini{min-height:44px;display:flex;align-items:center;justify-content:center}
 .rng{min-height:36px}.rng input{height:32px}
 .seg button{min-height:44px;font-size:13px}
 .uls{gap:8px}.ul span{height:44px;font-size:12.5px}
 .lbl .linkbtn{min-height:32px;width:84px}
 .mkcta{min-height:44px;display:flex;align-items:center}
 .build li:last-child{min-height:34px}
 body.sheet-open{overflow:hidden;overscroll-behavior:none}
 body.sheet-open .stage{position:fixed!important;top:0;left:0;right:0;max-width:none;margin:0!important;height:calc(100vh - var(--sheet-h,40vh) + 24px)!important;height:calc(100dvh - var(--sheet-h,40vh) + 24px)!important;z-index:50!important;
  background:radial-gradient(70% 60% at 50% 55%,rgba(32,72,190,.55),rgba(3,4,9,0) 75%),#030409}
 body.sheet-open .stage .mktoggle,body.sheet-open .stage .glow,body.sheet-open .card{display:none}
 body.sheet-open #c{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 82%,transparent 100%)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* v8: chat pill + attached reply card */
.chat{border-radius:28px;transition:border-radius .28s ease,background .28s ease;row-gap:0}
.chat.has-reply{border-radius:24px}
.chat .reply[hidden]{display:none}
.chat .reply{flex-basis:calc(100% + 26px);margin:8px -8px -8px -18px;padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);border-radius:0 0 23px 23px;color:#c9ced8;font-size:13.5px;line-height:1.55;overflow-wrap:anywhere;animation:ptReply .28s ease}
.chat .reply .demo{margin-right:6px}
@keyframes ptReply{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:768px){.chat .reply{padding:12px 16px 14px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.chat .reply{animation:none}.chat{transition:none}}
/* v9: nav pill, mobile menu, subpages */
.navr{justify-self:end;display:flex;align-items:center;gap:8px;min-width:0}
.buildpill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:12px;color:#dfe3ea;white-space:nowrap}
.buildpill[hidden]{display:none}.buildpill:hover{border-color:rgba(255,255,255,.4);color:#fff}
.buildpill i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,255,255,.5)}.buildpill b{font-weight:500;color:#fff}
.menubtn{display:none;width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.06);color:#fff;place-items:center;cursor:pointer}.menubtn svg{width:20px;height:20px}
.tier .bbx{position:absolute;right:14px;bottom:8px;height:108px;width:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.sub-page main,.sub-page section,.sub-page header{position:relative}
.phero{max-width:1100px;margin:0 auto;padding:70px 28px 30px;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8fa6ff;margin-bottom:12px}
.phero h1{font-size:clamp(44px,6vw,76px);font-weight:600;letter-spacing:-.03em;line-height:1;background:linear-gradient(180deg,#fff,#b9c2d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.phero .lead{margin:18px 0 26px;color:#b9bdc6;font-size:17px;line-height:1.5;max-width:460px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:22px;border:1px solid rgba(255,255,255,.25);font-size:14px;color:#fff}
.btn.pri{background:#fff;color:#05060b;border-color:#fff}.btn:hover{border-color:#fff}
.pimg{position:relative;display:grid;place-items:center;min-height:320px}.pimg .glow{position:absolute;inset:-10% -5%;background:radial-gradient(50% 50% at 50% 55%,rgba(40,90,230,.55),rgba(3,4,9,0) 70%);pointer-events:none}
.pimg img{position:relative;max-width:100%;max-height:360px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.phero.bb .pimg img{max-height:330px}
.pchat{max-width:1100px;margin:0 auto;padding:0 28px}.pchat .chat{margin-top:0}
.pover,.pgrid{max-width:1100px;margin:0 auto;padding:44px 28px 0}
.pover h2,.pgrid h2{font-size:22px;font-weight:500;margin-bottom:16px}
.pover ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.pover li{padding:16px 18px 16px 40px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:#cfd3da;font-size:14px;line-height:1.5;position:relative}
.pover li:before{content:"";position:absolute;left:18px;top:23px;width:8px;height:8px;border-radius:50%;background:#4a74ff;box-shadow:0 0 10px #4a74ff}
.pover .body{color:#b9bdc6;line-height:1.7;max-width:760px}
.ghead{display:flex;align-items:center;gap:12px;margin-bottom:16px}.ghead h2{margin:0}
.prelim{font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:10px;border:1px solid rgba(143,166,255,.45);color:#8fa6ff}
.gcells{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.gcells>div{padding:20px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.gcells b{display:block;font-size:22px;font-weight:500;margin-bottom:6px}.gcells span{font-size:13px;color:var(--mute)}
.gcells.team .av{display:block;width:44px;height:44px;border-radius:50%;margin-bottom:12px;background:linear-gradient(135deg,#2c4fc7,#121a3a)}.gcells.team b{font-size:16px}
.inq.ponly{padding-top:70px}.inq.ponly h1{font-size:clamp(34px,5vw,52px);font-weight:600;letter-spacing:-.02em;text-align:center}
.tiny.ctr{text-align:center;margin-top:14px}.tiny.ctr a{color:#8fa6ff}
@media (max-width:820px){
 .nav{grid-template-columns:1fr auto!important;justify-items:stretch!important;padding:10px 14px!important;gap:8px!important}
 .nav .by{display:none}
 .menubtn{display:grid}
 .nav .links{display:none;grid-column:1/-1;flex-direction:column;gap:0!important;padding:4px 0 8px}
 .nav.open .links{display:flex}.nav .links a{min-height:44px;display:flex;align-items:center;font-size:15px;border-bottom:1px solid rgba(255,255,255,.07)!important}
 .nav .links .on{color:#fff;box-shadow:inset 3px 0 0 #4a74ff;padding-left:10px}
 .buildpill span{display:none}
 .phero{grid-template-columns:1fr;padding:36px 18px 20px;gap:18px}.pimg{min-height:220px;order:-1}.pimg img{max-height:240px}
 .pover,.pgrid{padding:32px 18px 0}.pchat{padding:0 18px}.gcells{grid-template-columns:repeat(2,1fr)}.gcells b{font-size:18px}
}
.phero,.pover,.pgrid,.pchat,.inq.ponly{width:100%;box-sizing:border-box}
.pimg img{width:100%;height:auto;max-width:460px}
.pchat{margin-top:10px}
@media (max-width:820px){.nav .brand{order:1}.navr{order:2}.nav .links{order:3}}
.pchat .chat{margin:28px auto 0!important;transform:none!important;top:auto!important}
.phero .lead{text-align:left;margin-left:0}
.pover h2,.pgrid h2{text-align:left}
@media (max-width:820px){.phero .ptext{text-align:center}.phero .lead{text-align:center;margin-left:auto;margin-right:auto}.ctas{justify-content:center}}
.pover ul{padding:0;margin:0}

/* camo (v10) */
.seg.five{grid-template-columns:repeat(5,1fr)}.seg.five button{font-size:11px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:7px 2px}
.camorng input:disabled{opacity:.35}.camorng:has(input:disabled){color:rgba(255,255,255,.3)}
@media (min-width:769px){.seg.five{grid-template-columns:repeat(3,1fr)}.seg.five button{font-size:11.5px}}

/* v11 */
@media (min-width:769px){.mkpanel{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}}
.phero.bb{position:relative;left:auto;bottom:auto;width:100%;height:auto;color:inherit}
.ptk{right:34px;bottom:10px;height:auto;width:min(46%,190px)}
@media (min-width:821px){.tier p{max-width:50%}}

/* v13: desktop floating window */
@media (min-width:769px){
 .mkpanel{position:fixed!important;right:auto!important;bottom:auto!important;margin:0!important;z-index:60!important;display:flex;flex-direction:column;padding:0!important;overflow:hidden!important;max-height:calc(100vh - 24px);top:88px;left:auto}
 .mkpanel[hidden]{display:none}
 .mkpanel.dragging{user-select:none;-webkit-user-select:none;box-shadow:0 28px 70px rgba(0,0,0,.55)}
 .grab{display:flex;align-items:center;justify-content:center;height:30px;flex:none;cursor:move;touch-action:none;border-bottom:1px solid rgba(255,255,255,.08);border-radius:18px 18px 0 0}
 .grab i{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
 .mkpanel.dragging .grab{cursor:grabbing}
 .mkclose{display:grid;place-items:center;position:absolute;top:3px;right:8px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:16px;line-height:1;z-index:2;cursor:pointer}
 .mkbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 16px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
}

/* v14: one-line title in desktop window */
@media (min-width:769px){.mkbody>h4{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.mkbody>h4{white-space:nowrap}.mkbody>h4 span{font-size:9.5px}}

/* v15: mobile sheet fit (iPhone Safari) */
@media (max-width:768px){
 .mkpanel{box-sizing:border-box!important;width:100%!important;max-width:100vw!important;left:0!important;right:0!important;max-height:calc(100vh - 24px)!important;max-height:calc(100dvh - 24px)!important}
 .mkpanel *,.mkpanel *::before,.mkpanel *::after{box-sizing:border-box}
 .mkbody{width:100%;max-width:100%;min-width:0;overflow-x:hidden;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}
 .mkbody>*,#tab-look,#tab-inside,#tab-ports,#tab-look>*,#tab-inside>*,#tab-ports>*,.build>summary>*{min-width:0;max-width:100%}
 .mkclose{right:max(10px,env(safe-area-inset-right,0px))}
 .mkbody>h4{padding-right:60px;min-width:0}.mkbody>h4 span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
 .sws{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:8px;overflow:visible!important;margin:0;padding:4px 2px 6px}
 .sw{width:100%!important;height:auto!important;aspect-ratio:1!important;max-width:48px;justify-self:center}
 .seg.five{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .seg{min-width:0}.seg button{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .build>summary{min-width:0}.build #buildline{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
 .build li b{min-width:0;overflow-wrap:anywhere}
 .uls{min-width:0}
}

/* v16: iOS layout-viewport hardening */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
@media (max-width:768px){.stage,.hero,.pimg{overflow-x:clip}.glow{max-width:100%}}
.stage canvas,#c{display:block;max-width:100%!important}
@media (max-width:768px){
 .glow{inset:-20% 0 0!important}
 .mkpanel{inset:auto 0 0 0!important;width:auto!important;max-width:none!important;scrollbar-gutter:auto!important;contain:layout paint;background:rgb(10,16,42)!important;z-index:1000!important}
 .seg.five{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .mkpanel .row,.mkpanel .strip,.mkpanel .seg.two{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .mkpanel .row>*{min-width:0}
 body.sheet-open .chat,body.sheet-open .pchat,body.sheet-open .buildpill,body.sheet-open .reply{visibility:hidden!important}
}
@media (max-width:768px){.mkpanel .row>*{flex:1 1 0;min-width:0}}
/* v22: mobile info card slides in beside the model */
@media (max-width:768px){
 .stage .card{left:auto;right:3%;bottom:auto;top:50%;width:46%;max-width:200px;padding:11px 12px;border-radius:13px;transform:translate(0,-50%);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);display:block}
 .stage .card[hidden]{display:block;opacity:0;pointer-events:none;transform:translate(14px,-50%)}
 .stage .card h2{font-size:12.5px;line-height:1.25;margin-bottom:4px;padding-right:16px}
 .stage .card p{font-size:11.5px;line-height:1.38}
 .stage .card .x{top:6px;right:6px}
 body.sheet-open .stage .card{display:none}
}
/* v23: lead capture */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.iform{position:relative}.fstatus{grid-column:1/-1;margin:0;font-size:13px;color:var(--mute);min-height:1em;text-align:center}.fstatus.err{color:#ff8a80}
.iform.sending{opacity:.75}.send:disabled{opacity:.6;cursor:progress}.iform [aria-invalid=true]{border-color:#ff8a80}
.chat .clead{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;position:relative}
.chat .clead input,.chat .clead textarea{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;color:#fff;padding:10px 12px;font:inherit;font-size:13.5px;min-width:0;width:100%}
.chat .clead textarea,.chat .clead .send,.chat .clead .fstatus{grid-column:1/-1}.chat .clead .send{padding:10px}
.chat .cl-open{color:#fff;text-decoration:underline;white-space:nowrap}.chat .lead-intro i{color:var(--mute);font-style:normal}
@media(max-width:520px){.chat .clead{grid-template-columns:1fr}}
.chat .clead .send{width:100%;height:auto;display:block;border-radius:99px;background:#f5f6f8;color:#05070d;font-weight:500;padding:11px;white-space:nowrap}
.chat .clead input{flex:none}

/* v26 AI chat */
.chat .reply .you{display:block;color:var(--mute,#a3a8b2);font-size:.92em;margin-bottom:6px}
.chat .reply .ai-msg{display:block}
.chat .typing{display:inline-flex;gap:4px;padding:4px 0}.chat .typing i{width:6px;height:6px;border-radius:50%;background:#cfd3da;opacity:.35;animation:pttype 1s infinite}
.chat .typing i:nth-child(2){animation-delay:.15s}.chat .typing i:nth-child(3){animation-delay:.3s}
@keyframes pttype{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.chat.busy button[type=submit],.chat.busy>button{opacity:.5;pointer-events:none}
@media (prefers-reduced-motion:reduce){.chat .typing i{animation:none;opacity:.7}}

/* v30: long replies scroll instead of clipping */
/* v7 (Nov 4 2026): the 420px cap made complete answers look cut off, because the scrollbar is invisible
   inside the rounded bubble. Let the bubble grow with the text and only cap it against the viewport. */
.chat .reply{max-height:none;overflow:visible;overscroll-behavior:contain}
@media (max-width:768px){.chat .reply{max-height:calc(100vh - 180px);max-height:calc(100dvh - 180px);overflow-y:auto;-webkit-overflow-scrolling:touch}}
/* v33: chat character counter */
.chat{position:relative}.chat .ccount{position:absolute;right:3.2rem;bottom:.35rem;font-size:.7rem;opacity:.6;pointer-events:none}.chat .ccount.max{color:#c0392b;opacity:1}

/* rear port configurator (inside the ports hotspot card) */
.card .ports{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ports .prow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;font-size:13px;color:#d9dce2}
.ports .step{display:flex;align-items:center;gap:6px}
.ports .step button{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink);font-size:15px;line-height:1;cursor:pointer}
.ports .step button:disabled{opacity:.3;cursor:default}
.ports .step b{min-width:18px;text-align:center;font-weight:500}
.ports .cap{margin-top:8px;font-size:12px;color:var(--mute)}
.ports .bar{height:5px;border-radius:3px;background:rgba(255,255,255,.1);margin:6px 0 4px;overflow:hidden}.ports .bar i{display:block;height:100%;background:#4c8dff;border-radius:3px;transition:width .2s}
.ports .bar.full i{background:#7fb2ff}
.ports .pnote{font-size:11px;color:var(--mute);margin-top:6px}
.card:has(.ports:not([hidden])){width:290px}

/* v6: tile glyphs, unsquashed product images, framed photos, gallery */
.tier .glyph{position:absolute;right:22px;bottom:14px;width:104px;height:104px;aspect-ratio:1/1;opacity:.95}
.pimg img{width:auto!important;height:auto!important;max-width:min(100%,520px)!important;max-height:380px;object-fit:contain;aspect-ratio:auto}
.pimg img.photo{width:100%!important;max-width:560px!important;max-height:none;aspect-ratio:4/3;object-fit:cover;border-radius:18px;border:1px solid rgba(255,255,255,.08);filter:none;box-shadow:0 30px 60px rgba(0,0,0,.55)}
.pgal{max-width:1100px;margin:0 auto 30px;padding:0 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;box-sizing:border-box;width:100%}
.pgal figure{margin:0}.pgal img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.08);display:block}
.pgal figcaption{color:#9aa1ad;font-size:13px;margin-top:8px}.pgal .illus{grid-column:1/-1;color:#7d8491;font-size:12px;margin:0}
@media (max-width:820px){.tier .glyph{width:84px;height:84px;right:14px;bottom:10px}.pgal{padding:0 18px}}

/* v7: text-only product hero + equal cutout rows; About Pulsar logo */
.phero.solo{grid-template-columns:1fr;text-align:center;padding-bottom:10px}.phero.solo .lead{margin-left:auto;margin-right:auto}.phero.solo .ctas{justify-content:center}
.prow{max-width:1180px;margin:0 auto 40px;padding:10px 28px 0;display:grid;gap:36px;align-items:end;box-sizing:border-box;width:100%;position:relative}
.prow.c3{grid-template-columns:repeat(3,1fr)}.prow.c2{grid-template-columns:repeat(2,1fr);max-width:900px;gap:60px}
.prow::before{content:"";position:absolute;inset:-10% 0 10%;background:radial-gradient(50% 45% at 50% 60%,rgba(40,90,230,.35),rgba(3,4,9,0) 70%);pointer-events:none;z-index:-1}
.prow figure{margin:0;display:flex;flex-direction:column;align-items:center}
.prow img{width:100%;height:300px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 22px rgba(0,0,0,.55))}
.prow.c2 img{height:380px}
.prow figcaption{color:#9aa1ad;font-size:13px;margin-top:14px}.prow .illus{grid-column:1/-1;text-align:center;color:#7d8491;font-size:12px;margin:0}
.pimg.plogo img{width:min(100%,440px)!important;max-height:none;filter:drop-shadow(0 0 28px rgba(76,141,255,.35))}
.pimg.plogo .glow{background:radial-gradient(45% 45% at 50% 50%,rgba(40,90,230,.6),rgba(3,4,9,0) 70%)}
@media (max-width:820px){.prow.c3,.prow.c2{grid-template-columns:1fr;gap:26px;padding:0 18px}.prow img,.prow.c2 img{height:auto;max-height:280px}}

/* v8: official logos */
.brand .wm{height:28px;width:auto;display:block}
footer .fm{height:22px;width:auto}
.pimg.plogo img{width:min(100%,380px)!important;filter:drop-shadow(0 0 34px rgba(110,120,255,.35))}
@media (max-width:820px){.brand .wm{height:22px}.pimg.plogo img{width:min(70%,260px)!important}}

/* v9: mobile "Ports" customization tab (third menu option, mobile only) */
.tab.mobonly{display:none}
@media (max-width:768px){
 .tab.mobonly{display:block}
 .tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
 /* 3D hotspot buttons are inert at mobile widths: taps only orbit the model, never lock the camera */
 .stage .hs{display:none!important;pointer-events:none!important}
 /* v10: exception - in the landing state (customizer sheet closed) the rear/power hotspot is live and
    opens the Ports tab. 44px hit area, 14px visual dot at the same centre, above the sheet handle. */
 /* display stays on so the facing test can fade instead of popping; pointer-events follows .off */
 .stage .hs.rear{display:block!important;width:44px;height:44px;margin:-22px;border:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;z-index:6}
 .stage .hs.rear:not(.off){pointer-events:auto!important}
 .stage .hs.rear::after{inset:15px;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.20),0 0 16px rgba(255,255,255,.55)}
 .stage .hs.rear:not(.off):active::after{box-shadow:0 0 0 7px rgba(255,255,255,.30),0 0 20px rgba(255,255,255,.7)}
 /* once the sheet is open (or opening) the dot is gone outright - no ghost taps mid-transition */
 body.sheet-open .stage .hs.rear{display:none!important;pointer-events:none!important}
 /* the ports configurator as a normal customization panel, same look as Look/Inside */
 #tab-ports .portslead{margin:8px 0 6px;font-size:11.5px;line-height:1.45;color:var(--mute)}
 #tab-ports .ports{margin-top:0;padding-top:0;border-top:0}
 #tab-ports .prow{min-height:46px;padding:4px 0;font-size:13px;border-top:1px solid rgba(255,255,255,.07)}
 #tab-ports .prow:nth-of-type(1){border-top:0}
 #tab-ports .step{gap:4px;flex:none}
 #tab-ports .step button{width:38px;height:38px;font-size:18px;border-radius:11px}
 #tab-ports .step b{min-width:26px;font-size:14px}
 #tab-ports .ports{display:flex;flex-direction:column}
 /* live slot usage first, so it is always on screen above the steppers */
 #tab-ports .cap{order:-1;position:sticky;top:0;z-index:2;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#132a63;border:1px solid rgba(76,141,255,.28);box-shadow:0 6px 14px rgba(3,6,20,.45);font-size:12.5px;line-height:1.4}
 #tab-ports .bar{height:6px;margin:8px 0 4px}
 #tab-ports .pnote{font-size:11px;line-height:1.45;margin:12px 0 2px}
 /* mobile never shows the desktop drawer inside the info card */
 .stage .card .ports{display:none}
}
@media (min-width:769px){#tab-ports{display:none!important}}

/* ---- cookie banner (consent.js) ---- */
.ptcb{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:620px;margin:0 auto;padding:16px 18px;border-radius:16px;
  background:rgba(12,20,52,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 50px rgba(0,0,0,.55);color:#dfe3ea;font-size:13.5px;line-height:1.55;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.ptcb p{margin:0;flex:1 1 260px;min-width:0}
.ptcb a{color:#9db2ff}
.ptcb-b{display:flex;gap:8px;flex:0 0 auto}
.ptcb button{border-radius:999px;padding:10px 18px;font:inherit;font-size:13px;cursor:pointer;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff}
.ptcb .ptcb-a{background:#fff;color:#0b1020;border-color:#fff;font-weight:500}
.ptcb button:focus-visible{outline:2px solid #7f9bff;outline-offset:2px}
@media(max-width:520px){.ptcb{left:10px;right:10px;bottom:10px;padding:14px}.ptcb-b{width:100%}.ptcb-b button{flex:1}}
/* ---- legal pages ---- */
.phero.legal{padding:120px 6vw 10px}
.phero.legal .lead{margin-bottom:6px}
.pover .body a{color:#9db2ff}
.pover .body + .pover,.pover .body{margin-bottom:0}
.pover li b{color:#e8ebf2;font-weight:500}

/* Visually hidden but readable by screen readers: used for form labels where the
   visible affordance is the placeholder. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}