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

/* =========================================================
   LCP PATCH (qHero--v2)
   Amaç: İlk paint'i ucuzlat -> LCP metni erken boyansın.
   - Ağır background/mask/aurora efektleri qt-ready sonrası
   - LCP metninde sistem font (webfont swap LCP'yi geciktirmesin)
   ========================================================= */

/* 1) LCP'yi hızlandır: hero metinleri webfont beklemesin */
.qHero--v2 .qHero-title,
.qHero--v2 .qHero-sub,
.qHero--v2 .qHero-desc{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
}

/* 2) İlk paint'te ağır arka planları kapat / sadeleştir */
.qHero--v2{
  /* contain/content-visibility bazen gereksiz pahalı kombinasyon olabiliyor */
  contain: layout paint style !important;
  content-visibility: visible !important;
}

.qHero--v2 .qHero-bleed{
  /* İlk anda sade, hızlı boyanan arka plan */
  background: linear-gradient(180deg, rgba(67,97,238,.04), rgba(67,97,238,0)) !important;
}

/* Ağır pseudo/maske ilk anda yok */
.qHero--v2 .qHero-bleed::before{
  content: none !important;
  animation: none !important;
}

/* Title ilk anda düz renk (gradient text pahalı olabiliyor) */
.qHero--v2 .qHero-title{
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #0b1120 !important;
  text-shadow: none !important;
}

/* Reactor/card animasyonlarını ilk anda kapat */
.qHero--v2 .qReactor-ring,
.qHero--v2 .qHero-card{
  animation: none !important;
}

/* 3) qt-ready gelince “modern efektleri” aç */
.qt-ready .qHero--v2 .qHero-bleed{
  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)) !important;
}

/* Ağır aurora pseudo sadece qt-ready sonrası */
.qt-ready .qHero--v2 .qHero-bleed::before{
  content:"" !important;
  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)
  );
  /* mask pahalı ama LCP'den sonra */
  -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: qAuroraSpin 34s linear infinite;
}

@keyframes qAuroraSpin{
  from{ transform:translate3d(0,0,0) rotate(0deg); }
  to  { transform:translate3d(0,0,0) rotate(360deg); }
}

/* Title gradienti sadece qt-ready sonrası */
.qt-ready .qHero--v2 .qHero-title{
  background: linear-gradient(135deg, #0b1120 12%, #2b4de6 60%, #4cc9f0 94%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 8px 22px rgba(67,97,238,.05) !important;
}

/* Reactor / card animasyonları qt-ready sonrası */
.qt-ready .qHero--v2 .qReactor-ring{
  animation: qSpin 28s linear infinite !important;
}
@keyframes qSpin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

.qt-ready .qHero--v2 .qHero-card{
  animation: qCardFloat 12s ease-in-out infinite !important;
}
@keyframes qCardFloat{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(0,-6px,0); }
}

/* Mobilde zaten kart gizli; yine de pahalı şeyleri ekstra kıs */
@media (max-width:768px){
  .qHero--v2 .qHero-card{ display:none !important; }
  .qHero--v2 .qHero-right{ opacity:.12 !important; }
}

/* Reduced motion: her şeyi durdur */
@media (prefers-reduced-motion: reduce){
  .qHero--v2 *,
  .qHero--v2 .qHero-bleed::before{
    animation:none !important;
    transition:none !important;
  }
}




.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; }
}
.qp2-combos,.qp2-combos *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.qp2-combos{
--ink:#0f172a;--muted:#64748b;--glass:rgba(10,18,34,.62);--bd:rgba(255,255,255,.11);--card:#fff;
--bg-deep:#0b1222;--glow-1:#6366f1;--glow-2:#ec4899;--accent1:#6366f1;--accent2:#ec4899;
--ag1:rgba(99,102,241,.14);--ag2:rgba(236,72,153,.14);
padding:clamp(30px,4.6vw,58px) 0;color:#fff;position:relative;overflow:hidden;isolation:isolate;
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
background:
radial-gradient(1200px 520px at 18% 18%,color-mix(in srgb,var(--glow-1) 18%,transparent),transparent 62%),
radial-gradient(1100px 520px at 82% 78%,color-mix(in srgb,var(--glow-2) 16%,transparent),transparent 62%),
linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 88%,#0b1222) 0%,color-mix(in srgb,var(--bg-deep) 74%,#111b33) 100%);
contain:layout paint
}
@supports selector(:has(*)){
.qp2-combos:has(#qp2-instagram:checked){--bg-deep:#120a14;--glow-1:#833ab4;--glow-2:#f77737}
.qp2-combos:has(#qp2-telegram:checked){--bg-deep:#071225;--glow-1:#229ed9;--glow-2:#2aabee}
.qp2-combos:has(#qp2-tiktok:checked){--bg-deep:#080a10;--glow-1:#00f2ea;--glow-2:#ff0050}
.qp2-combos:has(#qp2-twitter:checked){--bg-deep:#081423;--glow-1:#1da1f2;--glow-2:#38bdf8}
}
.qp2-combos::before{
content:"";position:absolute;inset:-22%;pointer-events:none;z-index:0;
background:
radial-gradient(circle at 18% 26%,color-mix(in srgb,var(--glow-1) 40%,transparent),transparent 60%),
radial-gradient(circle at 84% 76%,color-mix(in srgb,var(--glow-2) 34%,transparent),transparent 60%);
opacity:.22;filter:blur(54px);transform:translateZ(0)
}
.qp2-combos::after{
content:"";position:absolute;left:50%;transform:translateX(-50%);
width:100vw;top:0;bottom:0;pointer-events:none;z-index:0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(255,255,255,.05)
}
.qp2-shell{width:min(1200px,92%);margin:0 auto;position:relative;z-index:1}
.qp2-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

#qp2-instagram:checked~.qp2-head,#qp2-instagram:checked~.qp2-panels{--accent1:#ee2a7b;--accent2:#f77737;--ag1:rgba(238,42,123,.16);--ag2:rgba(247,119,55,.16)}
#qp2-telegram:checked~.qp2-head,#qp2-telegram:checked~.qp2-panels{--accent1:#229ed9;--accent2:#3b82f6;--ag1:rgba(34,158,217,.16);--ag2:rgba(59,130,246,.16)}
#qp2-tiktok:checked~.qp2-head,#qp2-tiktok:checked~.qp2-panels{--accent1:#00f2ea;--accent2:#ff0050;--ag1:rgba(0,242,234,.12);--ag2:rgba(255,0,80,.12)}
#qp2-twitter:checked~.qp2-head,#qp2-twitter:checked~.qp2-panels{--accent1:#1da1f2;--accent2:#38bdf8;--ag1:rgba(29,161,242,.12);--ag2:rgba(56,189,248,.12)}

.qp2-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px}
.qp2-title{
font-size:clamp(1.35rem,1.1rem + .9vw,1.95rem);font-weight:850;letter-spacing:-.03em;
margin:0 0 6px;line-height:1.12;
background:linear-gradient(180deg,#fff 0%,rgba(203,213,225,.82) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:0 2px 10px rgba(0,0,0,.14)
}
.qp2-sub{margin:0;max-width:54ch;font-size:.92rem;line-height:1.5;color:rgba(148,163,184,.92)}

.qp2-tabs-wrap{
display:inline-flex;align-items:center;gap:8px;padding:4px;
background:rgba(15,23,42,.52);border-radius:999px;border:1px solid rgba(255,255,255,.10);
box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.qp2-tabs{display:flex;align-items:center;gap:4px}
.qp2-tab{
cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:6px;
padding:6px 12px 6px 6px;border-radius:999px;white-space:nowrap;min-height:38px;
color:rgba(148,163,184,.95);font-size:.8rem;font-weight:650;
transition:background .18s ease,color .18s ease,box-shadow .18s ease
}
.qp2-tab .ico{
width:26px;height:26px;min-width:26px;min-height:26px;border-radius:999px;
display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)
}
.qp2-tab i{display:inline-block;width:1em;height:1em;line-height:1;font-size:.88rem}

#qp2-instagram:checked~.qp2-head label[for="qp2-instagram"],
#qp2-telegram:checked~.qp2-head label[for="qp2-telegram"],
#qp2-tiktok:checked~.qp2-head label[for="qp2-tiktok"],
#qp2-twitter:checked~.qp2-head label[for="qp2-twitter"]{
background:rgba(255,255,255,.95);color:var(--ink);
box-shadow:0 6px 16px rgba(0,0,0,.16),inset 0 -2px 4px rgba(0,0,0,.05)
}
#qp2-instagram:checked~.qp2-head label[for="qp2-instagram"] .ico,
#qp2-telegram:checked~.qp2-head label[for="qp2-telegram"] .ico,
#qp2-tiktok:checked~.qp2-head label[for="qp2-tiktok"] .ico,
#qp2-twitter:checked~.qp2-head label[for="qp2-twitter"] .ico{
background:linear-gradient(135deg,var(--accent1),var(--accent2));
color:#fff;border-color:transparent;box-shadow:0 2px 6px rgba(0,0,0,.16)
}

.qp2-panels{
background:var(--glass);border-radius:22px;padding:18px;border:1px solid var(--bd);
box-shadow:0 18px 44px -22px rgba(0,0,0,.56),inset 0 1px 1px rgba(255,255,255,.12);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
position:relative;overflow:hidden;contain:layout paint
}
.qp2-panels::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.62;
background:
radial-gradient(720px circle at top right,var(--ag1),transparent 52%),
radial-gradient(560px circle at bottom left,var(--ag2),transparent 52%)
}
.qp2-panels>*{position:relative;z-index:1}
.qp2-panel{display:none}
#qp2-instagram:checked~.qp2-panels #qp2-panel-instagram,
#qp2-telegram:checked~.qp2-panels #qp2-panel-telegram,
#qp2-tiktok:checked~.qp2-panels #qp2-panel-tiktok,
#qp2-twitter:checked~.qp2-panels #qp2-panel-twitter{display:block}

.qp2-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}

.qp2-card{
background:var(--card);border-radius:18px;padding:14px;color:var(--ink);
border:1px solid rgba(0,0,0,.03);
box-shadow:0 6px 14px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.55);
display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.qp2-card::after{
content:"";position:absolute;top:0;left:0;width:100%;height:3px;
background:linear-gradient(90deg,var(--accent1),var(--accent2));
opacity:0;transition:opacity .18s ease
}
@media (hover:hover){
.qp2-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px -18px rgba(0,0,0,.26);border-color:rgba(0,0,0,.05)}
.qp2-card:hover::after{opacity:1}
}

.qp2-card-head{text-align:center}
.qp2-tagrow{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}

.qp2-platform{
display:inline-flex;align-items:center;justify-content:center;gap:5px;
padding:3px 7px;border-radius:7px;font-size:.62rem;font-weight:850;text-transform:uppercase;
color:#fff;background:#0f172a;box-shadow:0 2px 4px rgba(0,0,0,.14)
}
.qp2-platform.insta{background:linear-gradient(135deg,#f97316,#db2777)}
.qp2-platform.tg{background:linear-gradient(135deg,#0ea5e9,#3b82f6)}
.qp2-platform.tt{background:#0b0b0b}
.qp2-platform.tw{background:#0f172a}

.qp2-badge{
align-self:center;font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;
padding:3px 6px;border-radius:6px;font-weight:750;
background:#f0fdf4;color:#166534;border:1px solid #dcfce7
}
.qp2-badge.alt{background:#fffbeb;color:#b45309;border-color:#fef3c7}
.qp2-badge.dark{background:#f1f5f9;color:#475569;border-color:#e2e8f0}

.qp2-card-title{
text-align:center;
font-size:clamp(.98rem,.92rem + .25vw,1.12rem);
font-weight:900;letter-spacing:-.02em;line-height:1.18;
margin:0 0 4px;color:#0b1222;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
text-wrap:balance
}

.qp2-list{
list-style:none;padding:0;margin:-2px 0 12px;
font-size:.80rem;color:#475569;
display:flex;flex-direction:column;gap:4px
}
.qp2-list li{padding-left:16px;position:relative;line-height:1.38}
.qp2-list li::before{
content:"✓";position:absolute;left:0;top:1px;color:var(--accent2);
font-weight:900;font-size:.82em
}

.qp2-foot{
margin-top:auto;display:flex;align-items:center;justify-content:space-between;
padding-top:10px;border-top:1px solid #eef2f7
}
.qp2-price{display:flex;flex-direction:column}
.qp2-price-label{font-size:.62rem;color:#94a3b8;font-weight:750;text-transform:uppercase}
.qp2-price-val{
font-size:1.02rem;font-weight:850;letter-spacing:-.02em;
background:linear-gradient(135deg,var(--ink),var(--accent1));
-webkit-background-clip:text;background-clip:text;color:transparent
}

.qp2-btn{
display:inline-flex;align-items:center;justify-content:center;gap:5px;
padding:8px 14px;border-radius:10px;font-size:.78rem;font-weight:750;text-decoration:none;color:#fff;
background:linear-gradient(135deg,var(--accent1),var(--accent2));
background-size:200% auto;box-shadow:0 6px 14px rgba(0,0,0,.18);
position:relative;overflow:hidden;
transition:transform .18s ease,box-shadow .18s ease,background-position .18s ease
}
.qp2-btn::before{
content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
transform:skewX(-18deg);transition:left .45s ease
}
@media (hover:hover){
.qp2-btn:hover{background-position:right center;transform:translateY(-1px);box-shadow:0 10px 18px rgba(0,0,0,.22)}
.qp2-btn:hover::before{left:100%}
}

@media (max-width:1024px){.qp2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){
.qp2-head{flex-direction:column;align-items:flex-start;gap:12px}
.qp2-tabs-wrap{width:100%;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
.qp2-tabs-wrap::-webkit-scrollbar{display:none}
.qp2-tab{flex:0 0 auto}
}
@media (max-width:640px){
.qp2-panels{padding:12px;border-radius:18px;background:rgba(10,18,34,.56);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.qp2-grid{
display:flex;gap:10px;overflow-x:auto;padding:4px 4px 14px;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:stretch
}
.qp2-grid::-webkit-scrollbar{display:none}
.qp2-card{
flex:0 0 252px;width:252px;min-width:252px;max-width:252px;
scroll-snap-align:center;height:100%;min-height:268px;border-radius:16px
}
.qp2-tagrow{gap:8px}
}
@media (prefers-reduced-motion:reduce){
.qp2-combos *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}