.qp-wrap{
--ink:#0f172a;
--ink-soft:#6a7398;
--lav:#6a7eff;
--lav2:#9faeff;
--bd:rgba(106,126,255,.18);
--max:880px;
}
body{
margin:0;
font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
color:var(--ink);
background:
radial-gradient(900px 320px at 50% -140px, rgba(106,126,255,.16), transparent 60%),
radial-gradient(600px 220px at 20% 0%, rgba(159,174,255,.14), transparent 55%),
linear-gradient(180deg,#f7f8ff,#ffffff);
}
.qp-wrap{
width:min(var(--max),100%);
margin:0 auto;
padding:18px 20px 44px;
overflow-wrap:anywhere;
}
.qp-hero{
border-radius:18px;
background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.36));
backdrop-filter:blur(10px) saturate(160%);
-webkit-backdrop-filter:blur(10px) saturate(160%);
border:1px solid var(--bd);
box-shadow:inset 0 1px 2px rgba(255,255,255,.75), 0 10px 26px rgba(106,126,255,.12);
padding:20px 24px;
display:flex;
align-items:center;
gap:18px;
position:relative;
overflow:hidden;
transform:translateZ(0);
}
.qp-hero::after{
content:"";
position:absolute;
inset:-1px;
background:
radial-gradient(260px 120px at 16% 14%, rgba(106,126,255,.18), transparent 60%),
radial-gradient(240px 120px at 86% 28%, rgba(159,174,255,.16), transparent 62%);
pointer-events:none;
}
.qp-hero > *{position:relative;z-index:1;}
.qp-hero .ic{
width:52px;height:52px;
border-radius:14px;
display:grid;place-items:center;
background:linear-gradient(135deg,rgba(106,126,255,.18),rgba(255,255,255,.72));
box-shadow:inset 0 0 0 1px rgba(106,126,255,.25);
color:var(--lav);
flex:0 0 auto;
}
.qp-hero .ic i{font-size:22px;line-height:1;display:block;}
.qp-hero h1{
margin:0;
font-size:clamp(24px,4vw,34px);
font-weight:900;
background:linear-gradient(90deg,var(--lav),var(--lav2));
-webkit-background-clip:text;
color:transparent;
}
.qp-hero p{
margin:6px 0 0;
color:var(--ink-soft);
font-size:.95rem;
line-height:1.45;
}
.qp-card{
margin-top:22px;
background:#fff;
border-radius:16px;
border:1px solid rgba(106,126,255,.16);
box-shadow:0 6px 18px rgba(106,126,255,.06);
padding:18px 20px;
}
@media (min-width:768px){ .qp-card{padding:20px 24px;} }
.qp-card h2{
margin:0 0 12px;
font-size:1.08rem;
font-weight:900;
color:var(--ink);
letter-spacing:-.2px;
}
.qp-card h2::after{
content:"";
display:block;
height:2px;
width:42px;
margin-top:6px;
background:linear-gradient(90deg,var(--lav),var(--lav2));
border-radius:2px;
opacity:.95;
}
.qp-card p, .qp-card li{
line-height:1.72;
font-size:.96rem;
color:#1f273d;
}
.qp-card p{margin:0 0 12px;}
.qp-card p:last-child{margin-bottom:0;}
.qp-card ul{margin:10px 0 10px 1.1em;padding:0;}
.qp-note{
margin:12px 0 0;
background:linear-gradient(180deg,#ffffff,#f7f9ff);
border:1px solid rgba(106,126,255,.22);
box-shadow:0 10px 24px rgba(106,126,255,.10);
padding:13px 16px;
border-radius:12px;
font-weight:700;
color:#263158;
line-height:1.6;
}
.qp-card a{
color:var(--lav);
text-decoration:none;
font-weight:850;
}
.qp-card a:hover{text-decoration:underline;}
.qp-contract{
margin-top:14px;
padding:16px 18px;
border-radius:14px;
background:linear-gradient(180deg, rgba(248,250,252,.92), rgba(255,255,255,.90));
border:1px solid rgba(106,126,255,.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
overflow-wrap:anywhere;
word-break:break-word;
}
.qp-contract h1,
.qp-contract h2,
.qp-contract h3{
margin:14px 0 8px;
font-weight:900;
letter-spacing:-.2px;
line-height:1.25;
color:var(--ink);
}
.qp-contract h2{font-size:1.02rem;}
.qp-contract h3{font-size:.98rem;}
.qp-contract p,
.qp-contract li{
margin:0 0 10px;
font-size:.95rem;
line-height:1.72;
color:rgba(15,23,42,.92);
}
.qp-contract p:last-child{margin-bottom:0;}
.qp-contract ul,
.qp-contract ol{
margin:10px 0 10px 1.1em;
padding:0;
}
.qp-contract li{margin:6px 0;}
.qp-contract hr{
border:0;
height:1px;
background:linear-gradient(to right, transparent, rgba(15,23,42,.14), transparent);
margin:14px 0;
}
.qp-actions{
display:grid;
gap:12px;
margin-top:14px;
}
@media(min-width:680px){ .qp-actions{grid-template-columns:repeat(2,1fr);} }
.qp-btn{
display:flex;
align-items:center;
gap:12px;
padding:14px 14px;
border-radius:14px;
text-decoration:none;
border:1px solid rgba(106,126,255,.18);
background:linear-gradient(180deg,#ffffff,#f7f9ff);
box-shadow:0 8px 22px rgba(106,126,255,.08);
color:var(--ink);
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.qp-btn i{
width:42px;height:42px;
border-radius:12px;
display:grid;place-items:center;
background:linear-gradient(135deg,rgba(106,126,255,.18),rgba(255,255,255,.72));
box-shadow:inset 0 0 0 1px rgba(106,126,255,.22);
font-size:18px;
color:var(--lav);
flex:0 0 auto;
}
.qp-btn span{display:block;font-weight:900;line-height:1.15;}
.qp-btn small{
display:block;
margin-top:2px;
color:var(--ink-soft);
font-weight:650;
font-size:.86rem;
}
.qp-btn:hover{
transform:translateY(-1px);
box-shadow:0 12px 30px rgba(106,126,255,.12);
border-color:rgba(106,126,255,.28);
background:linear-gradient(180deg,#ffffff,#f4f6ff);
}
.qp-btn:active{transform:translateY(0);}
.qp-btn:focus-visible{outline:2px solid rgba(106,126,255,.45);outline-offset:2px;}
.qp-btn-mail span{
background:linear-gradient(90deg,var(--lav),var(--lav2));
-webkit-background-clip:text;
color:transparent;
}
.qp-btn-wa i{
background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(255,255,255,.72));
box-shadow:inset 0 0 0 1px rgba(34,197,94,.25);
color:#16a34a;
}
@media (max-width:480px){
.qp-wrap{padding:16px 14px 40px;}
.qp-hero{padding:16px 16px;}
.qp-card{padding:16px 16px;}
.qp-contract{padding:14px 14px;}
}