.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 + 1vw,1.75rem);
line-height:1.10;
font-weight:950;
letter-spacing:-.022em;
}
.qp-plat-pro p{
font-size:clamp(.90rem,.86rem + .22vw,1rem);
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,1rem + 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:grid;
grid-auto-rows:56px;
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;
height:56px;
min-height:56px;
padding:0 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(0);
}
.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}
}