/* Qovox shared polish layer (Parser, P2P Streamer, Qovox AI). Additive, loaded after each site's own CSS. Respects prefers-reduced-motion and the light theme. */
@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--fx-ease:cubic-bezier(.22,.8,.24,1);--fx-surface:#131316;--fx-hdr:#0b0b0dd9;--fx-track:#ffffff1a}
:root[data-theme="light"]{--fx-surface:#fff;--fx-hdr:#ffffffe8;--fx-track:#0000001a}
::selection{background:#e5091466;color:#fff}
html{scrollbar-width:thin;scrollbar-color:#e5091488transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:linear-gradient(#e50914,#8c050c);border-radius:8px;border:2px solid transparent;background-clip:padding-box}

/* atmosphere: drifting red glow and a faint hammer, tied to the Qovox mark */
body{position:relative}
body::before{content:'';position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;
  background:radial-gradient(34vmax 34vmax at 18% 12%,#e5091426,transparent 62%),radial-gradient(30vmax 30vmax at 88% 8%,#ff3b301c,transparent 60%),radial-gradient(40vmax 40vmax at 70% 95%,#9d070f20,transparent 65%);
  animation:fx-drift 26s ease-in-out infinite alternate}
body::after{content:'';position:fixed;right:-60px;bottom:-40px;width:min(46vw,520px);aspect-ratio:1;z-index:-1;pointer-events:none;opacity:.022;background:url(logo-mark.png) center/contain no-repeat;transform:rotate(-12deg)}
@keyframes fx-drift{to{transform:translate3d(3vmax,2vmax,0) scale(1.08)}}
html.fx main{animation:fx-page .6s var(--fx-ease) both}
@keyframes fx-page{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* progress + back to top */
#fx-bar{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:300;pointer-events:none;background:linear-gradient(90deg,#8c050c,#e50914,#ff8a82);box-shadow:0 0 14px #ff3b30aa}
#fx-top{position:fixed;right:18px;bottom:18px;width:52px;height:52px;border-radius:50%;border:0;z-index:90;padding:0;cursor:pointer;display:grid;place-items:center;
  background:conic-gradient(#ff3b30 calc(var(--p,0)*1turn),var(--fx-track) 0);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s var(--fx-ease),filter .2s}
#fx-top::before{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--fx-surface)}
#fx-top img{position:relative;width:26px;height:26px;transition:transform .35s var(--fx-ease)}
#fx-top.on{opacity:1;transform:none;pointer-events:auto}
#fx-top:hover{filter:drop-shadow(0 0 12px #e50914aa)}#fx-top:hover img{transform:rotate(-24deg) translateY(-1px)}#fx-top:active img{transform:rotate(18deg) scale(.9)}

/* header: logo strike on load, glow on hover, tidy scrolled state, animated link underline */
header.nav,.site-nav,.hdr{transition:background .25s,box-shadow .25s,border-color .25s}
header.nav.scrolled,.site-nav.scrolled,.hdr.scrolled{box-shadow:0 10px 40px -24px #000;border-bottom-color:#e5091433}
.logo-img,.brand img,.logo img{transform-origin:20% 70%;animation:fx-strike 1s .15s var(--fx-ease) both;transition:filter .25s,transform .25s var(--fx-ease)}
.logo-img:hover,.brand:hover img,.logo:hover img{filter:drop-shadow(0 0 12px #e5091499);transform:translateY(-1px)}
@keyframes fx-strike{0%{transform:rotate(-26deg) translateY(-6px);opacity:0}55%{transform:rotate(9deg)}78%{transform:rotate(-3deg)}100%{transform:none;opacity:1}}
.nav-links a:not(.btn),.hdr .nav a{position:relative}
.nav-links a:not(.btn)::after,.hdr .nav a::after{content:'';position:absolute;left:.5rem;right:.5rem;bottom:.1rem;height:2px;border-radius:2px;background:linear-gradient(90deg,#e50914,#ff8a82);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--fx-ease)}
.nav-links a:not(.btn):hover::after,.nav-links a[aria-current=page]::after,.nav-links a.active::after,.hdr .nav a:hover::after,.hdr .nav a[aria-current=page]::after{transform:scaleX(1)}

/* buttons */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,#ffffff55 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--fx-ease)}
.btn-primary:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.97)}
.fx-ripple{position:absolute;border-radius:50%;background:#ffffff59;transform:scale(0);animation:fx-rip .6s ease-out forwards;pointer-events:none;z-index:-1}
@keyframes fx-rip{to{transform:scale(1);opacity:0}}

/* headings */
.grad,.grad-text{background-size:220% 100%;animation:fx-shimmer 7s linear infinite}
@keyframes fx-shimmer{to{background-position:-220% 0}}
.eyebrow{position:relative}

/* cards: lift, spotlight, icon tilt */
.card,.kpi,.metric,.keyrow,.bento-card,.pricing-teaser-card,.promo-card,.codecard,.code-card,.plan,.step,.panel{transition:transform .3s var(--fx-ease),border-color .3s,box-shadow .3s,background .3s}
.card:hover,.kpi:hover,.bento-card:hover,.pricing-teaser-card:hover,.promo-card:hover,.plan:hover,.step:hover{transform:translateY(-4px);border-color:#e5091455!important;box-shadow:0 0 0 1px #e5091433,0 18px 50px -24px #e50914}
.card,.kpi,.metric{position:relative}
.card::after,.kpi::after,.metric::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0),#e5091422,transparent 60%)}
.card:hover::after,.kpi:hover::after,.metric:hover::after{opacity:1}
.ic,.ico{transition:transform .35s var(--fx-ease),box-shadow .25s}
.card:hover .ic,.card:hover .ico,.bento-card:hover .ic,.bento-card:hover .ico{transform:rotate(-8deg) scale(1.08);box-shadow:0 0 22px -4px #e50914}
.plan.pop,.plan.featured,.plan.popular{position:relative}
.plan.pop::before,.plan.featured::before,.plan.popular::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--fx-a),#e50914,#ff8a82,#9d070f,#ff3b30,#e50914);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:fx-spin 7s linear infinite}
@keyframes fx-spin{to{--fx-a:360deg}}
.chip{transition:border-color .2s,transform .2s var(--fx-ease)}.chip:hover{border-color:#e5091488;transform:translateY(-2px)}
.badge{transition:transform .2s var(--fx-ease)}.badge:hover{transform:scale(1.06)}

/* forms */
input,select,textarea,.inp,.sel{transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,select:focus,textarea:focus,.inp:focus,.sel:focus{border-color:#ff3b30!important;box-shadow:0 0 0 4px #e5091426}
:focus-visible{outline:2px solid #ff3b30;outline-offset:3px}

/* faq, tables, code */
details{transition:border-color .25s,background .25s,box-shadow .25s}details:hover{border-color:#e5091455}details[open]{border-color:#e5091488;box-shadow:0 14px 40px -26px #e50914}
summary{transition:color .2s}summary:hover{color:#ff8a82}
details[open]>*:not(summary){animation:fx-down .35s var(--fx-ease)}
@keyframes fx-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
tbody tr{transition:background .15s}tbody tr:hover{background:#e509140c}
pre{transition:border-color .2s,box-shadow .2s}pre:hover{border-color:#e5091444}

/* footer, social, toast, modal */
footer{position:relative}
footer::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,transparent,#e50914,#ff8a82,#e50914,transparent);opacity:.7;pointer-events:none}
footer a{transition:color .2s,transform .2s var(--fx-ease)}
.qx-footer li a:hover,.site-footer li a:hover{transform:translateX(4px)}
.toast{animation:fx-toast .35s var(--fx-ease)}@keyframes fx-toast{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
.modal.open .box{animation:fx-pop .3s var(--fx-ease)}@keyframes fx-pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.qx-menu,.umenu{animation:fx-pop .22s var(--fx-ease);transform-origin:90% 0}
.qx-avatar,.avatar{transition:box-shadow .2s,transform .2s var(--fx-ease)}.qx-avatar:hover,.avatar:hover{transform:scale(1.06)}

/* scroll reveal (only on pages that opt in; never hides content without JS) */
html.fx .fx-hide{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .7s var(--fx-ease),transform .7s var(--fx-ease);transition-delay:calc(var(--i,0)*70ms)}
html.fx .fx-hide.fx-show{opacity:1;transform:none}

@media (hover:none){.card:hover,.kpi:hover,.plan:hover,.bento-card:hover{transform:none}.card::after,.kpi::after,.metric::after{display:none}}
@media (max-width:600px){#fx-top{right:12px;bottom:12px;width:46px;height:46px}}
@media (prefers-reduced-motion:reduce){body::before,.grad,.grad-text,.logo-img,.brand img,.logo img,html.fx main,.plan.pop::before,.plan.featured::before,.plan.popular::before{animation:none!important}html.fx .fx-hide{opacity:1;transform:none;transition:none}}

/* ===== Calm, professional pass =====
   The logo and the header never animate or resize. Nothing moves on its own; cards and buttons answer the pointer with a small, quiet change. */
.logo img,.logo-img,.brand img,.logo:hover img,.logo-img:hover,.brand:hover img{animation:none!important;transform:none!important;filter:none!important;opacity:1!important;transition:none!important}
.hdr.scrolled .in{height:64px}
body::before{animation:none}
body::after{display:none}
html.fx main{animation:fx-fade .35s ease both}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
.nav a:hover{transform:none}
.btn-primary::before,.fx-ripple{display:none}
.btn:active{transform:none}
.btn-primary:hover{transform:translateY(-1px)}
.grad,.grad-text{animation:none!important;background-size:100% 100%}
.card:hover,.kpi:hover,.bento-card:hover,.pricing-teaser-card:hover,.promo-card:hover,.step:hover,.plan:hover{transform:translateY(-2px)}
.card:hover .ico,.card:hover .ic,.bento-card:hover .ic,.bento-card:hover .ico{transform:none;box-shadow:none}
.plan.pop::before,.plan.featured::before,.plan.popular::before{animation:none!important}
.plan li:hover{transform:none;color:inherit}
.soc a:hover{transform:translateY(-2px)}
#fx-top:hover img,#fx-top:active img{transform:none}
.badge:hover,.avatar:hover,.qx-avatar:hover,.chip:hover{transform:none}
.drop:hover .ph svg{transform:none}.drop.over{transform:none}
.bar i{animation:none!important}
.ftr li a:hover,.qx-footer li a:hover,.site-footer li a:hover{transform:none}
.card:hover::after,.kpi:hover::after,.metric:hover::after{opacity:.7}
html.fx .fx-hide{transform:translateY(10px);transition-duration:.5s;transition-delay:calc(var(--i,0)*45ms)}
html.fx .card.fx-hide.fx-show:hover,html.fx .plan.fx-hide.fx-show:hover{transform:translateY(-2px)}

/* type and surface polish */
body{text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","calt";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{text-wrap:balance}p,.lede,li{text-wrap:pretty}
.price,.kpi b,.metric b,table,.mono{font-variant-numeric:tabular-nums}
.card,.plan,.kpi,.bento-card{box-shadow:inset 0 1px 0 #ffffff0a}
.card:hover,.kpi:hover,.bento-card:hover,.plan:hover{box-shadow:inset 0 1px 0 #ffffff0f,0 14px 36px -22px #e50914}
.hdr,header.nav,.site-nav{border-bottom:1px solid #ffffff14}
.btn{letter-spacing:.005em}