.qHero--v2{
--q-blue:#4361ee;
--q-indigo:#3a0ca3;
--q-cyan:#4cc9f0;
--q-pink:#f72585;
--q-ink:#0b1120;
--q-text:#334155;
--q-muted:#64748b;
--q-bg:#f8fafc;
--r-16:16px;
--r-20:20px;
--r-24:24px;
position:relative;
margin:0;
padding:0;
overflow:hidden;
background:var(--q-bg);
color:var(--q-ink);
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
z-index:10;
isolation:isolate;
contain: layout paint;
content-visibility:visible;
contain-intrinsic-size:auto;
}
.qHero--v2 .qHero-bleed{
position:relative;
left:50%;
right:50%;
margin-left:-50vw;
margin-right:-50vw;
width:100vw;
padding-bottom:10px;
border-bottom:1px solid rgba(67,97,238,.10);
background:
radial-gradient(820px 320px at 12% 10%, rgba(67,97,238,.11), transparent 62%),
radial-gradient(760px 320px at 88% 18%, rgba(76,201,240,.10), transparent 64%),
radial-gradient(620px 320px at 55% 98%, rgba(247,37,133,.06), transparent 66%),
linear-gradient(180deg, rgba(67,97,238,.035), rgba(67,97,238,0));
}
.qHero--v2 .qHero-bleed::before{
content:"";
position:absolute;
inset:-55% -45%;
pointer-events:none;
opacity:.32;
background:conic-gradient(from 220deg at 50% 52%,
rgba(67,97,238,.14),
rgba(76,201,240,.13),
rgba(247,37,133,.08),
rgba(67,97,238,.14));
-webkit-mask-image: radial-gradient(circle at 50% 52%, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 56%);
mask-image: radial-gradient(circle at 50% 52%, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 56%);
transform:translate3d(0,0,0);
animation:none;
}
.qt-ready .qHero--v2 .qHero-bleed::before{
animation:qAuroraSpin 34s linear infinite;
}
@keyframes qAuroraSpin{
from{ transform:translate3d(0,0,0) rotate(0deg); }
to{ transform:translate3d(0,0,0) rotate(360deg); }
}
.qHero--v2 .qHero-wrap{
width:min(1240px, 92%);
margin:0 auto;
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0, 1.35fr) 320px;
gap:28px;
align-items:center;
min-height: 300px;
}
.qHero--v2 .qHero-sub{
display:inline-flex;
align-items:center;
margin:0 0 10px;
font-weight:900;
font-size:.70rem;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--q-ink);
padding:6px 12px;
border-radius:999px;
background:
linear-gradient(135deg, rgba(67,97,238,.18), rgba(76,201,240,.14)),
rgba(255,255,255,.72);
border:1px solid rgba(67,97,238,.18);
box-shadow:0 10px 22px -20px rgba(67,97,238,.32);
}
.qHero--v2 .qHero-title{
margin:0 0 8px;
font-weight:950;
letter-spacing:-.045em;
font-size:clamp(1.85rem, 3.05vw, 2.75rem);
background:linear-gradient(135deg, #0b1120 12%, #2b4de6 60%, #4cc9f0 94%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-shadow:0 8px 22px rgba(67,97,238,.05);
}
.qHero--v2 .qHero-desc{
margin:0 0 12px;
color:var(--q-text);
max-width:56ch;
font-weight:500;
font-size:.98rem;
}
.qHero--v2 .qHero-ctas{
display:flex;
gap:12px;
align-items:center;
flex-wrap:wrap;
}
.qHero--v2 .qHero-btn{
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-weight:900;
border-radius:14px;
padding:10px 22px;
font-size:.98rem;
position:relative;
overflow:hidden;
transform:translate3d(0,0,0);
transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
will-change:transform;
}
.qHero--v2 .qHero-primary{
color:#fff !important;
background:linear-gradient(135deg, var(--q-indigo), var(--q-blue) 55%, var(--q-cyan));
box-shadow:0 14px 30px -20px rgba(58,12,163,.48);
}
.qHero--v2 .qHero-primary::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
opacity:.78;
background:
radial-gradient(220px 80px at 25% 0%, rgba(255,255,255,.26), transparent 62%),
radial-gradient(180px 110px at 70% 110%, rgba(76,201,240,.14), transparent 58%);
}
@media (hover:hover){
.qHero--v2 .qHero-primary:hover{
transform:translateY(-2px);
box-shadow:0 18px 36px -20px rgba(67,97,238,.58);
}
}
.qHero--v2 .qHero-ghost{
background:rgba(255,255,255,.84);
color:var(--q-indigo) !important;
border:1px solid rgba(67,97,238,.18);
box-shadow:0 12px 26px -22px rgba(2,6,23,.18);
}
@media (hover:hover){
.qHero--v2 .qHero-ghost:hover{
transform:translateY(-2px);
filter:saturate(1.05);
}
}
.qHero--v2 .qHero-right{
position:relative;
display:flex;
justify-content:center;
align-items:center;
height:220px;
}
.qHero--v2 .qReactor{
position:absolute;
width:240px;
height:240px;
pointer-events:none;
opacity:.10;
transform:translate3d(0,0,0);
}
.qHero--v2 .qReactor-ring{
position:absolute;
inset:14px;
border-radius:50%;
border:1px solid rgba(67,97,238,.20);
background:
radial-gradient(circle at 50% 50%, rgba(76,201,240,.09), transparent 60%),
conic-gradient(from 0deg,
rgba(67,97,238,0),
rgba(67,97,238,.18),
rgba(76,201,240,.12),
rgba(247,37,133,.06),
rgba(67,97,238,0));
-webkit-mask-image: radial-gradient(circle, rgba(0,0,0,.82) 60%, rgba(0,0,0,0) 74%);
mask-image: radial-gradient(circle, rgba(0,0,0,.82) 60%, rgba(0,0,0,0) 74%);
animation:none;
transform:translateZ(0);
}
.qt-ready .qHero--v2 .qReactor-ring{
animation:qSpin 28s linear infinite;
}
@keyframes qSpin{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}
.qHero--v2 .qHero-card{
position:relative;
z-index:2;
width:100%;
max-width:300px;
background:
radial-gradient(260px 160px at 20% 20%, rgba(67,97,238,.10), transparent 60%),
radial-gradient(240px 160px at 82% 30%, rgba(76,201,240,.08), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
border:1px solid rgba(255,255,255,.78);
border-radius:var(--r-24);
padding:16px;
box-shadow:
0 18px 44px -30px rgba(2,6,23,.30),
0 14px 34px -30px rgba(67,97,238,.30);
transform:translate3d(0,0,0);
overflow:hidden;
isolation:isolate;
will-change:transform;
}
.qt-ready .qHero--v2 .qHero-card{
animation:qCardFloat 12s ease-in-out infinite;
}
@keyframes qCardFloat{
0%,100%{ transform:translate3d(0,0,0); }
50%{ transform:translate3d(0,-6px,0); }
}
.qHero--v2 .qHero-cardQ{
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
}
.qHero--v2 .qHero-cardQ::before{
content:"";
position:absolute;
left:72%;
top:55%;
width:176px;
height:176px;
transform:translate(-50%,-50%);
opacity:.26;
background-repeat:no-repeat;
background-position:center;
background-size:100% 100%;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='aurora' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%239BB0FF'/%3E%3Cstop offset='100%25' stop-color='%235D78FF'/%3E%3C/linearGradient%3E%3Cfilter id='soft'%3E%3CfeGaussianBlur in='SourceAlpha' stdDeviation='1.8' result='b'/%3E%3CfeColorMatrix in='b' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3CfeOffset dy='1'/%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cmask id='qInnerCut'%3E%3Crect x='0' y='0' width='120' height='120' fill='white'/%3E%3Cline x1='60' y1='60' x2='78' y2='78' stroke='black' stroke-width='13' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='url(%23aurora)' stroke-width='3.2' opacity='.70'/%3E%3Ccircle cx='60' cy='60' r='24' fill='none' stroke='url(%23aurora)' stroke-width='7.5' stroke-linecap='round' filter='url(%23soft)' mask='url(%23qInnerCut)'/%3E%3Cline x1='68' y1='68' x2='84' y2='84' stroke='url(%23aurora)' stroke-width='7' stroke-linecap='round' filter='url(%23soft)'/%3E%3C/svg%3E");
filter:drop-shadow(0 10px 28px rgba(0,0,0,.08)) drop-shadow(0 0 14px rgba(155,176,255,.10));
animation:qHeroQBreathe 5s ease-in-out infinite;
}
.qHero--v2 .qHero-cardQ::after{
content:"";
position:absolute;
left:72%;
top:55%;
width:176px;
height:176px;
transform:translate(-50%,-50%);
border-radius:999px;
opacity:.18;
background:
radial-gradient(circle at 52% 12%, rgba(155,176,255,.98) 0 5px, rgba(255,255,255,.18) 6px, transparent 8px),
radial-gradient(circle at 94% 50%, rgba(155,176,255,.86) 0 5px, rgba(255,255,255,.16) 6px, transparent 8px),
radial-gradient(circle at 48% 92%, rgba(155,176,255,.78) 0 5px, rgba(255,255,255,.14) 6px, transparent 8px),
radial-gradient(circle at 6% 44%, rgba(155,176,255,.70) 0 5px, rgba(255,255,255,.16) 6px, transparent 8px);
filter:drop-shadow(0 0 12px rgba(167,186,255,.10));
transform-origin:50% 50%;
animation:qHeroQOrbit 8s linear infinite;
will-change:transform;
}
@keyframes qHeroQOrbit{
from{ transform:translate(-50%,-50%) rotate(0deg); }
to{ transform:translate(-50%,-50%) rotate(360deg); }
}
@keyframes qHeroQBreathe{
0%,100%{ transform:translate(-50%,-50%) scale(1); }
50%{ transform:translate(-50%,-50%) scale(1.03); }
}
.qHero--v2 .qCard-head,
.qHero--v2 .qCard-text,
.qHero--v2 .qCard-foot{
position:relative;
z-index:1;
}
.qHero--v2 .qCard-head{
display:flex;
align-items:center;
gap:10px;
margin:0 0 10px;
padding-bottom:10px;
border-bottom:1px solid rgba(67,97,238,.10);
}
.qHero--v2 .qCard-title{
margin:0;
font-weight:950;
font-size:1.06rem;
color:var(--q-ink);
line-height:1.15;
letter-spacing:-.01em;
}
.qHero--v2 .qCard-text{
margin:0 0 12px;
color:var(--q-muted);
line-height:1.52;
font-weight:650;
font-size:.98rem;
}
.qHero--v2 .qCard-foot{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding-top:10px;
border-top:1px solid rgba(67,97,238,.10);
}
.qHero--v2 .qMiniPill{
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.74);
border:1px solid rgba(15,23,42,.06);
box-shadow:0 10px 22px rgba(2,6,23,.06);
color:#1f2a5a;
font-weight:900;
font-size:.80rem;
line-height:1;
}
.qHero--v2 .qMiniPill span{
font-weight:950;
color:var(--q-indigo);
}
@media (max-width:1024px){
.qHero--v2 .qHero-wrap{
grid-template-columns:1fr;
text-align:center;
gap:18px;
padding:16px 0 10px;
min-height: 0;
}
.qHero--v2 .qHero-ctas{ justify-content:center; }
.qHero--v2 .qHero-right{ height:200px; }
}
@media (max-width:768px){
.qHero--v2 .qHero-wrap{
padding:14px 0 8px;
gap:12px;
min-height: 0;
}
.qHero--v2 .qHero-title{
font-size:1.62rem;
line-height:1.08;
margin-bottom:8px;
}
.qHero--v2 .qHero-sub{
margin-bottom:8px;
padding:6px 11px;
font-size:.68rem;
}
.qHero--v2 .qHero-desc{
max-width:60ch;
font-size:.93rem;
margin-bottom:10px;
}
.qHero--v2 .qHero-ctas{
width:100%;
gap:10px;
}
.qHero--v2 .qHero-btn{
flex:1;
padding:10px 0;
font-size:.92rem;
border-radius:14px;
}
.qHero--v2 .qHero-card{ display:none; }
.qHero--v2 .qHero-right{
display:block;
position:absolute;
inset:-10px -38px auto auto;
width:210px;
height:210px;
opacity:.14;
pointer-events:none;
z-index:0;
}
.qHero--v2 .qReactor{ width:210px; height:210px; }
.qHero--v2 .qReactor-ring{ animation:none !important; }
.qHero--v2 .qHero-left{ position:relative; z-index:1; }
}
@media (prefers-reduced-motion: reduce){
.qHero--v2 *{ animation:none !important; transition:none !important; }
.qHero--v2 .qHero-bleed::before{ animation:none !important; }
.qHero--v2{ contain-intrinsic-size:360px; }
}
.qp-plat-pro{
--ac: var(--accent, #5d74ff);
--ink:#0b1227;
--muted:#5f6b8f;
--max:1180px;
--noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
position:relative;
isolation:isolate;
z-index:1;
padding:28px 0 36px;
text-align:center;
font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-size:16px;
line-height:1.35;
color:var(--ink);
contain:layout paint;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.qp-plat-pro, .qp-plat-pro *{ box-sizing:border-box; }
.qp-plat-pro :where(h1,h2,h3,h4,h5,h6,p){ margin:0; }
.qp-plat-pro :where(ul,ol){ margin:0; padding:0; list-style:none; }
.qp-plat-pro :where(a){ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.qp-plat-pro :where(svg,img){ display:block; }
.qp-plat-pro :where(img){ max-width:100%; height:auto; }
.qp-plat-pro::before{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
top:0; bottom:0;
width:100vw;
z-index:-1;
background:
var(--noise),
radial-gradient(1100px 380px at 50% -12%, color-mix(in srgb, var(--ac) 12%, transparent), transparent 62%),
radial-gradient(1100px 420px at 88% 0%, rgba(66,207,192,.06), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,.42), rgba(247,249,255,.96));
background-blend-mode:overlay, normal, normal, normal;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.75),
inset 0 -1px 0 rgba(255,255,255,.66),
0 -1px 0 rgba(15,23,42,.04);
}
.qp-plat-pro h2{
font-size:clamp(1.18rem, 1.02rem + 1.0vw, 1.75rem);
line-height:1.10;
font-weight:950;
letter-spacing:-.022em;
}
.qp-plat-pro p{
font-size:clamp(.90rem, .86rem + .22vw, 1.00rem);
line-height:1.55;
font-weight:650;
max-width:56ch;
margin:8px auto 14px;
color:var(--muted);
}
.qp-plat-pro p::after{
content:"";
display:block;
width:78px;
height:1px;
margin:10px auto 0;
border-radius:999px;
background:linear-gradient(90deg, rgba(99,102,241,0), rgba(99,102,241,.55), rgba(99,102,241,0));
opacity:.78;
}
.qp-plat-pro .grid{
width:min(var(--max), 94vw);
margin:0 auto;
display:grid;
gap:12px;
grid-template-columns:repeat(7, minmax(0,1fr));
align-items:stretch;
}
.qp-plat-pro .tile{
--brand-rgb:106,126,255;
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:8px;
min-height:112px;
padding:12px 8px;
border-radius:18px;
outline:none;
cursor:pointer;
overflow:hidden;
background:
radial-gradient(220px 120px at 28% 22%, rgba(var(--brand-rgb), .09), transparent 62%),
linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.54));
border:1px solid rgba(255,255,255,.86);
box-shadow:
0 4px 10px rgba(15,23,42,.05),
0 2px 4px rgba(15,23,42,.03),
inset 0 0 0 1px rgba(255,255,255,.62);
transform:translateZ(0);
transition:transform .20s cubic-bezier(.2,.8,.2,1), box-shadow .20s ease, border-color .20s ease, background .20s ease;
}
.qp-plat-pro .tile::after{
content:"";
position:absolute;
top:0; left:-120%;
width:55%; height:100%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
transform:skewX(-25deg);
pointer-events:none;
opacity:0;
}
@media (hover:hover){
.qp-plat-pro .tile:hover{
transform:translateY(-3px);
border-color:rgba(var(--brand-rgb), .26);
background:
radial-gradient(240px 140px at 28% 22%, rgba(var(--brand-rgb), .12), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.72));
box-shadow:
0 16px 34px rgba(15,23,42,.10),
0 0 0 1px rgba(var(--brand-rgb), .14) inset,
0 10px 42px -12px rgba(var(--brand-rgb), .22);
}
.qp-plat-pro .tile:hover::after{
left:160%;
opacity:1;
transition:left .75s ease, opacity .18s ease;
}
}
.qp-plat-pro .tile:active{
transform:scale(.985);
background:
radial-gradient(240px 140px at 28% 22%, rgba(var(--brand-rgb), .10), transparent 62%),
rgba(255,255,255,.88);
}
.qp-plat-pro .tile:focus-visible{
border-color:rgba(var(--brand-rgb), .45);
box-shadow:0 0 0 4px rgba(var(--brand-rgb), .18), 0 10px 26px rgba(15,23,42,.10);
}
.qp-plat-pro .ico{
width:44px; height:44px;
border-radius:14px;
display:grid;
place-items:center;
background:rgba(255,255,255,.95);
border:1px solid rgba(241,245,249,.90);
box-shadow:0 8px 18px rgba(15,23,42,.07), 0 0 0 1px rgba(255,255,255,1) inset;
transform:translateZ(0);
transition:transform .20s ease, box-shadow .20s ease, border-color .20s ease;
}
.qp-plat-pro i{
display:block;
line-height:1;
font-size:24px;
color:rgb(var(--brand-rgb));
transition:transform .20s ease, color .20s ease;
}
@media (hover:hover){
.qp-plat-pro .tile:hover .ico{
transform:scale(1.06);
box-shadow:0 12px 22px rgba(var(--brand-rgb), .18);
border-color:rgba(var(--brand-rgb), .22);
}
.qp-plat-pro .tile:hover i{ transform:translateY(-.5px); }
}
.qp-plat-pro .label{
font-size:.90rem;
font-weight:950;
letter-spacing:-.02em;
color:#0b1227;
line-height:1.12;
max-width:12ch;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.qp-plat-pro .sub{
font-size:.76rem;
color:#6b7280;
line-height:1.22;
max-width:18ch;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.qp-plat-pro .tile.instagram { --brand-rgb:221,42,123; }
.qp-plat-pro .tile.twitter   { --brand-rgb:29,161,242; }
.qp-plat-pro .tile.telegram  { --brand-rgb:41,169,235; }
.qp-plat-pro .tile.tiktok    { --brand-rgb:16,22,38; }
.qp-plat-pro .tile.youtube   { --brand-rgb:255,0,51; }
.qp-plat-pro .tile.facebook  { --brand-rgb:24,119,242; }
.qp-plat-pro .tile.linkedin  { --brand-rgb:10,102,194; }
.qp-plat-pro .tile.spotify   { --brand-rgb:29,185,84; }
.qp-plat-pro .tile.soundcloud{ --brand-rgb:255,119,0; }
.qp-plat-pro .tile.twitch    { --brand-rgb:145,70,255; }
.qp-plat-pro .tile.whatsapp  { --brand-rgb:37,211,102; }
.qp-plat-pro .tile.pinterest { --brand-rgb:230,0,35; }
.qp-plat-pro .tile.kick      { --brand-rgb:83,252,24; }
.qp-plat-pro .tile.diger     { --brand-rgb:106,126,255; }
@media (max-width:1024px){
.qp-plat-pro{ padding:22px 0 28px; }
.qp-plat-pro .grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.qp-plat-pro .tile{ min-height:108px; }
}
@media (max-width:768px){
.qp-plat-pro{ padding:18px 0 22px; }
.qp-plat-pro h2{ font-size:clamp(1.12rem, 1.0rem + 1.5vw, 1.52rem); }
.qp-plat-pro p{ font-size:.92rem; margin:6px auto 12px; }
.qp-plat-pro .grid{ width:100%; padding:0 12px; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.qp-plat-pro .tile{
min-height:104px;
padding:12px 6px;
border-radius:16px;
box-shadow:0 6px 14px rgba(15,23,42,.07), inset 0 0 0 1px rgba(255,255,255,.62);
}
.qp-plat-pro .ico{ width:40px; height:40px; border-radius:12px; }
.qp-plat-pro i{ font-size:22px; }
.qp-plat-pro .label{ font-size:.84rem; }
.qp-plat-pro .sub{ font-size:.74rem; }
}

.blur-cover{
position:fixed;
inset:0;
background:rgba(15,23,42,.12);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
opacity:0;
pointer-events:none;
transition:opacity .24s ease;
z-index:9990;
contain:paint;
}
@media (min-width:769px){
.blur-cover{ display:none !important; }
}
body.q-scroll-lock{
overflow:hidden !important;
touch-action:none;
overscroll-behavior:contain;
}
body.q-scroll-lock .blur-cover{
opacity:1;
pointer-events:auto;
}
.q-sheet{ display:none; }
@media (max-width:768px){
.q-sheet{
display:flex;
flex-direction:column;
position:fixed;
left:0; right:0; bottom:0;
height:66vh;
max-height:540px;
min-height:360px;
--accent-rgb:106,126,255;
background:
var(--noise),
radial-gradient(120% 140% at 0% 0%, rgba(155,176,255,.16), transparent 60%),
radial-gradient(120% 120% at 100% 0%, rgba(99,102,241,.10), transparent 58%),
linear-gradient(180deg, rgba(255,255,255,.985), rgba(247,249,255,.995));
backdrop-filter:blur(8px) saturate(175%);
-webkit-backdrop-filter:blur(8px) saturate(175%);
border-radius:22px 22px 0 0;
transform:translate3d(0,105%,0);
transition:transform .36s cubic-bezier(.23,1,.32,1);
z-index:10000;
box-shadow:
0 -14px 46px rgba(15,23,42,.20),
0 0 0 1px rgba(255,255,255,.55) inset;
overflow:hidden;
contain:layout paint;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.q-sheet.active{ transform:translate3d(0,0,0); }
.q-sheet::before{
content:"";
position:absolute;
top:10px; left:50%;
transform:translateX(-50%);
width:44px; height:5px;
border-radius:99px;
background:rgba(15,23,42,.14);
}
.q-sheet-title{
padding:24px 18px 12px;
text-align:center;
font-size:1.06rem;
font-weight:900;
letter-spacing:-.02em;
color:#0f172a;
position:relative;
}
.q-sheet-title::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:0;
width:64px; height:2px;
border-radius:4px;
background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.42), transparent);
}
.q-list{
flex:1;
overflow-y:auto;
padding:12px 14px calc(84px + env(safe-area-inset-bottom));
display:flex;
flex-direction:column;
gap:8px;
background:
radial-gradient(900px 240px at 50% 0%, rgba(var(--accent-rgb), .06), transparent 60%),
#f8fafc;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
scrollbar-width:none;
}
.q-list::-webkit-scrollbar{ display:none; }
.q-sheet :where(a, a:visited, a:hover, a:active, a:focus){
color:inherit !important;
text-decoration:none !important;
border-bottom:0 !important;
outline:0;
}
.q-sheet :where(a, a *, .q-item, .q-item *, u, ins){
text-decoration:none !important;
border-bottom:0 !important;
}
.q-item{
display:flex;
align-items:center;
gap:10px;
padding:13px 14px;
border-radius:14px;
font-size:.95rem;
font-weight:800;
letter-spacing:-.015em;
color:#334155;
position:relative;
overflow:hidden;
min-width:0;
background:
radial-gradient(520px 180px at 12% 0%, rgba(var(--accent-rgb), .10), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
border:1px solid rgba(226,232,240,.88);
box-shadow:
0 1px 2px rgba(15,23,42,.03),
0 14px 30px -26px rgba(15,23,42,.26);
transform:translateZ(0);
-webkit-tap-highlight-color:transparent;
transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.q-item::before{
content:"";
width:10px; height:10px;
border-radius:999px;
background:rgb(var(--accent-rgb));
box-shadow:
0 0 0 4px rgba(var(--accent-rgb), .14),
0 6px 16px rgba(var(--accent-rgb), .18);
flex-shrink:0;
}
.q-item::after{
content:"›";
margin-left:auto;
font-size:1.55rem;
color:rgba(148,163,184,.92);
line-height:1;
transform:translateY(-1px);
}
.q-item:active{
transform:scale(.988);
background:
radial-gradient(520px 180px at 12% 0%, rgba(var(--accent-rgb), .14), transparent 60%),
linear-gradient(180deg, rgba(241,245,249,.98), rgba(255,255,255,.92));
box-shadow:
0 1px 2px rgba(15,23,42,.03),
0 10px 22px -22px rgba(15,23,42,.22);
}
.q-item :where(span, strong, em, b){
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.q-back{
position:absolute;
bottom:calc(18px + env(safe-area-inset-bottom));
left:50%;
transform:translateX(-50%);
display:inline-flex;
align-items:center;
justify-content:center;
min-width:160px;
padding:12px 34px;
font-size:.95rem;
font-weight:900;
letter-spacing:.02em;
color:#fff;
border:0;
border-radius:999px;
cursor:pointer;
background:
radial-gradient(220px 120px at 25% 0%, rgba(255,255,255,.22), transparent 60%),
linear-gradient(135deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), .86));
box-shadow:
0 12px 28px -6px rgba(var(--accent-rgb), .52),
0 0 0 1px rgba(255,255,255,.22) inset;
-webkit-tap-highlight-color:transparent;
transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.q-back:active{
transform:translateX(-50%) scale(.96);
box-shadow:0 6px 16px rgba(var(--accent-rgb), .34);
}
}
@media (prefers-reduced-motion: reduce){
.qp-plat-pro *, .q-sheet, .blur-cover{ transition:none !important; }
.qp-plat-pro .tile::after{ display:none !important; }
}