*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

:root{
--primary:#2563eb;
--accent:#14b8a6;
--violet:#7c3aed;
--orange:#f59e0b;
--dark:#101827;
--text:#334155;
--muted:#64748b;
--line:#dbe7f3;
--light:#f8fbff;
--shadow:0 24px 70px rgba(15,23,42,.09);
}

body{
font-family:Arial, Helvetica, sans-serif;
background:
linear-gradient(120deg,rgba(37,99,235,.05),transparent 34%),
linear-gradient(240deg,rgba(20,184,166,.06),transparent 38%),
var(--light);
color:var(--dark);
overflow-x:hidden;
}

@keyframes riseIn{
from{
opacity:0;
transform:translateY(18px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.topbar{
background:linear-gradient(90deg,#101827,#14213d 58%,#0f766e);
color:white;
padding:10px 7%;
display:flex;
justify-content:space-between;
font-size:14px;
}

header{
position:sticky;
top:0;
z-index:1000;
background:rgba(255,255,255,.92);
backdrop-filter:blur(12px);
padding:18px 7%;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid var(--line);
box-shadow:0 10px 35px rgba(15,23,42,.04);
}

.logo{
font-size:28px;
font-weight:700;
text-decoration:none;
color:var(--dark);
display:inline-flex;
align-items:center;
gap:10px;
letter-spacing:.2px;
}

.logo::before{
content:'';
width:14px;
height:14px;
border-radius:4px;
background:linear-gradient(135deg,var(--primary),var(--accent) 55%,var(--orange));
box-shadow:0 8px 20px rgba(37,99,235,.24);
transform:rotate(45deg);
}

nav{
display:flex;
gap:8px;
flex-wrap:wrap;
align-items:center;
justify-content:center;
}

nav a{
text-decoration:none;
color:#334155;
font-weight:600;
transition:.25s;
padding:9px 12px;
border-radius:999px;
}

nav a:hover{
color:var(--primary);
background:#e0f2fe;
}

.btn{
text-decoration:none;
padding:14px 24px;
border-radius:40px;
display:inline-block;
font-weight:700;
background:linear-gradient(135deg,var(--primary),var(--violet) 48%,var(--accent));
color:white;
box-shadow:0 15px 35px rgba(37,99,235,.24);
transition:.25s;
}

.btn:hover{
transform:translateY(-4px);
box-shadow:0 20px 45px rgba(14,165,233,.28);
}

.hero{
position:relative;
overflow:hidden;
padding:105px 7% 90px;
background:
linear-gradient(115deg,rgba(37,99,235,.12) 0%,transparent 32%),
linear-gradient(245deg,rgba(20,184,166,.14) 0%,transparent 34%),
linear-gradient(135deg,#eef6ff 0%,#ffffff 48%,#edfdf8 100%);
}

.hero::before,
.hero::after{
content:'';
position:absolute;
width:62%;
height:240px;
border-radius:0;
filter:none;
clip-path:polygon(0 0,100% 28%,82% 100%,0 70%);
}

.hero::before{
background:linear-gradient(90deg,rgba(37,99,235,.10),rgba(245,158,11,.10),rgba(20,184,166,.10));
left:-18%;
top:10%;
transform:rotate(-8deg);
}

.hero::after{
background:linear-gradient(90deg,rgba(124,58,237,.09),rgba(20,184,166,.11));
right:-20%;
bottom:8%;
transform:rotate(7deg);
}

.hero-inner{
position:relative;
z-index:2;
max-width:1050px;
animation:riseIn .8s ease both;
}

.eyebrow{
display:inline-block;
padding:10px 18px;
border-radius:40px;
background:linear-gradient(135deg,#dbeafe,#ccfbf1);
color:#1e3a8a;
font-size:13px;
font-weight:700;
margin-bottom:24px;
border:1px solid rgba(37,99,235,.13);
box-shadow:0 12px 28px rgba(37,99,235,.09);
}

h1{
font-size:clamp(42px,6vw,76px);
line-height:1.04;
max-width:980px;
margin-bottom:22px;
}

.gradient{
background:linear-gradient(135deg,var(--primary),var(--violet) 52%,var(--accent));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
font-size:19px;
line-height:1.9;
color:var(--muted);
max-width:820px;
}

.hero-actions{
display:flex;
gap:16px;
flex-wrap:wrap;
margin-top:32px;
}

.secondary-btn{
background:white;
color:var(--dark);
}

section{
padding:82px 7%;
}

.section-title{
max-width:830px;
margin-bottom:42px;
animation:riseIn .7s ease both;
}

.section-title h2{
font-size:clamp(32px,4vw,48px);
line-height:1.1;
margin-bottom:14px;
}

.section-title p{
line-height:1.9;
color:var(--muted);
font-size:17px;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:24px;
}

.card{
position:relative;
overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.80));
border-radius:24px;
padding:30px;
box-shadow:0 18px 50px rgba(15,23,42,.06);
border:1px solid rgba(226,232,240,.75);
transition:.3s;
animation:riseIn .7s ease both;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 28px 70px rgba(14,165,233,.10);
border-color:rgba(14,165,233,.18);
}

.card::before{
content:'';
position:absolute;
width:100%;
height:4px;
right:0;
top:0;
border-radius:0;
background:linear-gradient(90deg,var(--primary),var(--violet),var(--accent),var(--orange));
}

.card h3{
position:relative;
z-index:1;
font-size:24px;
margin-bottom:12px;
}

.card p,
.card li{
position:relative;
z-index:1;
line-height:1.85;
color:var(--muted);
}

.card ul{
padding-left:18px;
}

.process{
background:linear-gradient(135deg,#ffffff 0%,#eff6ff 52%,#ecfeff 100%);
}

.faq{
background:#ffffff;
}

.faq details{
background:#f8fbff;
border:1px solid var(--line);
border-radius:18px;
padding:20px 22px;
margin-bottom:14px;
}

.faq summary{
font-weight:700;
cursor:pointer;
}

.faq p{
margin-top:12px;
line-height:1.85;
color:var(--muted);
}

.cta{
background:linear-gradient(135deg,#1d4ed8,#7c3aed 48%,#0f766e);
color:white;
border-radius:36px;
padding:54px 42px;
max-width:1100px;
margin:auto;
text-align:center;
box-shadow:0 30px 85px rgba(37,99,235,.24);
position:relative;
overflow:hidden;
animation:riseIn .7s ease both;
}

.cta::before{
content:'';
position:absolute;
inset:0;
background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
background-size:42px 42px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);
pointer-events:none;
}

.cta > *{
position:relative;
z-index:1;
}

.cta h2{
font-size:clamp(32px,4vw,48px);
margin-bottom:14px;
}

.cta p{
line-height:1.8;
max-width:780px;
margin:0 auto 26px;
}

footer{
background:#0f172a;
padding:70px 7%;
color:white;
}

.footer-grid{
display:grid;
grid-template-columns:1.2fr 1fr 1fr;
gap:38px;
max-width:1150px;
margin:auto;
}

.footer-grid h3{
margin-bottom:12px;
font-size:20px;
}

.footer-grid p,
.footer-grid a{
font-size:15px;
line-height:1.9;
color:#cbd5e1;
text-decoration:none;
}

.footer-bottom{
margin-top:46px;
padding-top:22px;
border-top:1px solid rgba(148,163,184,.18);
text-align:center;
font-size:13px;
color:#94a3b8;
}

@media(max-width:950px){
.topbar,
header{
flex-direction:column;
gap:14px;
text-align:center;
}

nav,
.hero-actions{
justify-content:center;
}

.hero{
text-align:center;
padding:85px 6% 70px;
}

.hero p,
.section-title{
margin-left:auto;
margin-right:auto;
}

.footer-grid{
grid-template-columns:1fr;
text-align:center;
}
}