.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; }
}