/* Products hub (/products.html), the homepage "More from us" row, and the highlighted NizmoScreen link in the top bar. */
.nav a.nav-hot{position:relative;display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:600}
.nav a.nav-hot span{background:linear-gradient(90deg,#3fd0d4,#7fb4ff,#b48cff,#3fd0d4);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nh-shine 6s linear infinite}
.nav a.nav-hot i{font:700 9.5px/1 var(--mono);letter-spacing:.08em;font-style:normal;padding:3px 6px;border-radius:999px;color:#04131a;background:linear-gradient(90deg,#3fd0d4,#8f7bff);box-shadow:0 0 0 0 rgba(63,208,212,.55);animation:nh-ping 2.4s infinite}
.nav a.nav-hot::after{content:"";position:absolute;inset:4px 2px;border-radius:8px;border:1px solid rgba(63,208,212,.28);background:rgba(63,208,212,.06);z-index:-1}
.nav a.nav-hot:hover::after{border-color:rgba(63,208,212,.6);background:rgba(63,208,212,.12)}
.mmenu a.nav-hot{color:#9ff0f2;font-weight:700}.mmenu a.nav-hot::after{content:" New";font:700 11px var(--mono);color:#3fd0d4}
@keyframes nh-shine{to{background-position:300% 0}}
@keyframes nh-ping{0%{box-shadow:0 0 0 0 rgba(63,208,212,.55)}70%{box-shadow:0 0 0 8px rgba(63,208,212,0)}100%{box-shadow:0 0 0 0 rgba(63,208,212,0)}}
@media (prefers-reduced-motion:reduce){.nav a.nav-hot span,.nav a.nav-hot i{animation:none}}

/* homepage: more products */
.more-prod{margin-top:22px;display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:14px}
.mp{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#0d141c,#0a0f15);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s;overflow:hidden;min-height:200px}
.mp:hover{border-color:rgba(63,208,212,.5);transform:translateY(-2px)}
.mp h3{font:700 22px/1.1 var(--display);margin:0}.mp p{margin:0;color:#b8c5cf;font-size:15px}
.mp .mp-k{font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.mp .mp-p{margin-top:auto;font-size:14px;color:var(--steel)}.mp .mp-p b{font:700 24px var(--display);color:var(--bone)}
.mp .mp-go{font-weight:600;color:#9fe9ec;font-size:14.5px}
.mp.feat{background:radial-gradient(500px 220px at 100% 0,rgba(123,92,255,.25),transparent 70%),radial-gradient(400px 200px at 0 100%,rgba(63,208,212,.18),transparent 70%),#0a0f15;border-color:rgba(63,208,212,.35);padding-right:44%}
.mp.feat img{position:absolute;right:-6%;top:50%;width:52%;transform:translateY(-50%) perspective(900px) rotateY(-14deg);border-radius:10px;border:1px solid rgba(160,190,210,.25);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.mp .soon{position:absolute;top:14px;right:14px;font:700 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:rgba(63,208,212,.14);color:#9ff0f2;border:1px solid rgba(63,208,212,.35)}
.mp.feat .soon{right:auto;left:20px;top:auto;bottom:20px}
.mp.feat .mp-p{margin-bottom:28px}
@media (max-width:1100px){.more-prod{grid-template-columns:repeat(2,minmax(0,1fr))}.mp.feat{grid-column:1/-1}}
@media (max-width:640px){.more-prod{grid-template-columns:minmax(0,1fr)}.mp.feat{padding-right:20px}.mp.feat img{position:static;width:100%;transform:none;margin:10px 0 0}.mp.feat .soon{position:absolute;top:14px;right:14px;left:auto;bottom:auto}.mp.feat .mp-p{margin-bottom:0}}

/* products hub */
.ph-hero{padding:64px 0 26px;text-align:center;position:relative;isolation:isolate}
.ph-hero::before{content:"";position:absolute;inset:-10% 0 auto;height:520px;z-index:-1;background:radial-gradient(600px 260px at 25% 10%,rgba(47,143,216,.2),transparent 70%),radial-gradient(600px 260px at 75% 20%,rgba(63,208,212,.14),transparent 70%)}
.ph-hero h1{font:700 clamp(38px,5.6vw,72px)/1 var(--display);margin:12px 0 14px}.ph-hero p{color:#c3ced7;font-size:19px;max-width:680px;margin:0 auto}
.ph-need{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:28px 0 0}
.ph-need button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--graphite);color:var(--bone);border-radius:999px;padding:10px 16px;font:600 15px var(--body);cursor:pointer}
.ph-need button svg{width:18px;height:18px;fill:#3fd0d4}.ph-need button[aria-pressed=true]{background:var(--bone);color:#071017;border-color:var(--bone)}.ph-need button[aria-pressed=true] svg{fill:#071017}
.ph-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pc{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#0d141c,#0a0f15);padding:22px;transition:border-color .2s,transform .2s,opacity .25s}
.pc:hover{border-color:rgba(63,208,212,.45);transform:translateY(-2px)}.pc[hidden]{display:none}
.pc .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(63,208,212,.1);border:1px solid rgba(63,208,212,.25);margin-bottom:14px}.pc .ic svg{width:24px;height:24px;fill:#3fd0d4}
.pc h2{font:700 24px/1.1 var(--display);margin:0 0 6px}.pc p{margin:0 0 14px;color:#b8c5cf;font-size:15px}
.pc ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:7px;font-size:14.5px;color:#d3dde4}.pc li{display:flex;gap:8px}.pc li::before{content:"";width:6px;height:6px;margin-top:9px;border-radius:2px;background:#3fd0d4;flex:none}
.pc .pp{margin-top:auto;display:flex;align-items:baseline;gap:6px;color:var(--steel);font-size:14px}.pc .pp b{font:700 30px var(--display);color:var(--bone)}
.pc .pa{display:flex;gap:8px;margin-top:14px}.pc .pa .x-btn{flex:1;justify-content:center}
.pc .tag{position:absolute;top:16px;right:16px;font:700 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--steel);border:1px solid var(--line)}
.pc .tag.new{background:rgba(63,208,212,.14);color:#9ff0f2;border-color:rgba(63,208,212,.35)}.pc .tag.hot{background:rgba(242,179,61,.14);color:#f3d79a;border-color:rgba(242,179,61,.35)}.pc .tag.free{background:rgba(61,220,151,.14);color:#a9f2cf;border-color:rgba(61,220,151,.35)}
.pc.wide{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:center;background:radial-gradient(600px 260px at 100% 0,rgba(123,92,255,.22),transparent 70%),#0a0f15;border-color:rgba(63,208,212,.3)}
.pc.wide img{width:100%;border-radius:12px;border:1px solid rgba(160,190,210,.2);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.ph-none{grid-column:1/-1;text-align:center;color:var(--steel);padding:30px}
.ph-help{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ph-help a,.ph-help button{display:flex;flex-direction:column;gap:4px;text-align:left;padding:18px;border-radius:14px;border:1px solid var(--line);background:var(--graphite);color:inherit;text-decoration:none;font:inherit;cursor:pointer;transition:border-color .2s}
.ph-help a:hover,.ph-help button:hover{border-color:rgba(63,208,212,.45)}.ph-help b{font:700 17px var(--display)}.ph-help small{color:var(--steel);font-size:13.5px}
.ph-acct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:22px;align-items:center;padding:26px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(47,143,216,.12),rgba(10,15,21,.9))}
.ph-acct h2{font:700 30px/1.05 var(--display);margin:0 0 8px}.ph-acct p{margin:0;color:#c3ced7}
.ph-acct nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ph-acct nav a{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid var(--line);text-decoration:none;color:var(--bone);font-weight:600;font-size:14.5px}
.ph-acct nav a:hover{border-color:rgba(63,208,212,.5)}.ph-acct nav svg{width:18px;height:18px;fill:#3fd0d4;flex:none}
@media (max-width:1000px){.ph-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ph-help{grid-template-columns:repeat(2,minmax(0,1fr))}.ph-acct{grid-template-columns:minmax(0,1fr)}}
@media (max-width:680px){.ph-grid{grid-template-columns:minmax(0,1fr)}.pc.wide{grid-column:auto;grid-template-columns:minmax(0,1fr)}.ph-acct nav{grid-template-columns:repeat(2,minmax(0,1fr))}.ph-help{grid-template-columns:minmax(0,1fr)}}
.more-all{text-align:center;margin:18px 0 0}.more-all a{color:#9fe9ec;font-weight:600;text-decoration:none}.more-all a:hover{text-decoration:underline}
.nav a,.hdr-r .x-btn,.theme-tg{white-space:nowrap}
@media (max-width:1400px){.nav{gap:2px;margin-left:8px}.nav a{padding:8px 9px;font-size:15px}.theme-tg{display:none}}
@media (max-width:1180px){.nav a[href$="#move"],.nav a[href$="#builder"]{display:none}}
.pc.wide .tag{position:static;display:inline-block;margin-bottom:12px}.pc.wide img{aspect-ratio:1100/630;object-fit:cover;object-position:top left}

/* ---------- widescreen scaling ----------
 * 1) Fluid content column instead of a fixed strip: 1240px on laptops, 1440 / 1600 / 1840px on big monitors, with
 *    body text stepping up.
 * 2) Very wide screens (1440p/4K at 100% Windows scaling, ultrawides): the page is also scaled up with the standard CSS
 *    zoom property (Chrome, Edge, Safari, Firefox 126+), so text and buttons stay readable. Older browsers simply skip it.
 *    Phones, tablets and laptops are unchanged. */
@media (min-width:1680px){.wrap{width:min(1440px,100% - 80px)}body{font-size:18px}}
@media (min-width:2000px){.wrap{width:min(1600px,100% - 120px)}}
@media (min-width:2400px){.wrap{width:min(1840px,100% - 160px)}html{zoom:1.15}}
@media (min-width:3000px){html{zoom:1.45}}
@media (min-width:3800px){html{zoom:1.75}}

/* ---------- NizmoScreen feature card: living border, rotating screens, fluid button ---------- */
@property --mpa{syntax:"<angle>";inherits:false;initial-value:0deg}
.mp.feat{isolation:isolate;border-color:transparent}
.mp.feat::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--mpa),rgba(63,208,212,.15),#3fd0d4,#7fb4ff,#b48cff,rgba(63,208,212,.15) 40%,rgba(63,208,212,.15));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:mp-spin 6s linear infinite}
.mp-glow{position:absolute;inset:-40%;z-index:-1;background:radial-gradient(closest-side,rgba(63,208,212,.22),transparent 70%) 20% 70%/50% 50% no-repeat,radial-gradient(closest-side,rgba(143,123,255,.25),transparent 70%) 80% 20%/55% 55% no-repeat;animation:mp-drift 14s ease-in-out infinite alternate;pointer-events:none}
.mp.feat img{position:static;width:auto;transform:none;border:0;box-shadow:none;border-radius:0}
.mp-shots{position:absolute;right:0;top:0;bottom:0;width:44%;overflow:hidden;border-left:1px solid rgba(160,190,210,.18);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(90deg,transparent,#000 14%)}
.mp-shots img{position:absolute!important;inset:0;width:100%!important;height:100%;object-fit:cover;object-position:left top;opacity:0;animation:mp-show 16s infinite;transform-origin:30% 30%}
.mp-shots img:nth-child(1){animation-delay:0s}.mp-shots img:nth-child(2){animation-delay:4s}.mp-shots img:nth-child(3){animation-delay:8s}.mp-shots img:nth-child(4){animation-delay:12s}
.mp-scan{position:absolute;left:0;right:0;height:38%;top:-40%;background:linear-gradient(180deg,transparent,rgba(63,208,212,.10) 70%,rgba(63,208,212,.35) 98%,transparent);animation:mp-scan 4s cubic-bezier(.5,0,.5,1) infinite;mix-blend-mode:screen}
.mp-spark{position:absolute;left:8%;right:8%;bottom:10%;height:22%;width:84%;overflow:visible}
.mp-spark path{fill:none;stroke:#3fd0d4;stroke-width:2.2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(63,208,212,.8));stroke-dasharray:420;stroke-dashoffset:420;animation:mp-draw 4s ease-in-out infinite}
.mp.feat:hover .mp-shots img{animation-play-state:running}
.mp-cta{position:relative;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:4px;padding:10px 18px;border-radius:999px;font-weight:700;font-size:14.5px;color:#fff;overflow:hidden;isolation:isolate;
  background:linear-gradient(115deg,#0fb5c4,#2f8fd8,#7b5cff,#3fd0d4,#0fb5c4);background-size:300% 300%;animation:mp-flow 6s ease-in-out infinite;box-shadow:0 8px 24px rgba(47,143,216,.35),inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .2s,box-shadow .2s}
.mp-cta::before{content:"";position:absolute;inset:-60% -10%;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent) 0 0/40% 60% no-repeat;animation:mp-blob 3.5s ease-in-out infinite;filter:blur(6px)}
.mp-cta::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:mp-shine 3.2s ease-in-out infinite}
.mp-cta svg{width:16px;height:16px;fill:currentColor;transition:transform .25s}
.mp.feat:hover .mp-cta{transform:translateY(-1px);box-shadow:0 12px 30px rgba(123,92,255,.45),inset 0 0 0 1px rgba(255,255,255,.3)}.mp.feat:hover .mp-cta svg{transform:translateX(4px)}
.mp.feat .mp-p{margin-bottom:6px}
@keyframes mp-spin{to{--mpa:360deg}}
@keyframes mp-drift{0%{transform:translate(0,0)}100%{transform:translate(8%,-6%)}}
@keyframes mp-show{0%{opacity:0;transform:scale(1.04)}5%{opacity:1}25%{opacity:1}31%{opacity:0;transform:scale(1.14) translate(-2%,-2%)}100%{opacity:0}}
@keyframes mp-scan{0%{top:-40%}100%{top:105%}}
@keyframes mp-draw{0%{stroke-dashoffset:420;opacity:0}15%{opacity:1}60%{stroke-dashoffset:0;opacity:1}90%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes mp-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes mp-blob{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
@keyframes mp-shine{0%,55%{left:-60%}85%,100%{left:130%}}
@media (max-width:640px){.mp-shots{position:relative;width:auto;height:180px;margin:12px -20px -20px;border-left:0;border-top:1px solid rgba(160,190,210,.18);-webkit-mask-image:none;mask-image:none}}
@media (prefers-reduced-motion:reduce){.mp.feat::before,.mp-glow,.mp-scan,.mp-spark path,.mp-cta,.mp-cta::before,.mp-cta::after{animation:none}.mp-shots img{animation:none}.mp-shots img:first-child{opacity:1}.mp-spark path{stroke-dashoffset:0}}
.mp.feat .mp-shots img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;transform:none}
@media (max-width:640px){.mp.feat .mp-shots img{position:absolute;margin:0;width:100%}}