/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 24px 80px;text-align:center;position:relative;overflow:hidden;}
.hero-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 50% -10%, rgba(124,106,255,0.15) 0%, transparent 60%),radial-gradient(ellipse 40% 40% at 80% 80%, rgba(34,217,160,0.06) 0%, transparent 50%);}
.hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--bdr) 1px,transparent 1px),linear-gradient(90deg,var(--bdr) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black,transparent);}
.hero-inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(124,106,255,0.1);border:1px solid rgba(124,106,255,0.25);border-radius:100px;padding:5px 16px;font-size:12px;font-weight:600;color:var(--acc2);margin-bottom:32px;animation:up .6s ease both;}
.hero-tag-dot{width:6px;height:6px;border-radius:50%;background:var(--grn);animation:pls 2s infinite}
@keyframes pls{0%,100%{opacity:1}50%{opacity:.2}}
.hero h1{font-family:var(--fh);font-size:clamp(36px,7vw,82px);font-weight:900;line-height:1.0;margin-bottom:24px;animation:up .7s ease .1s both;}
.hero h1 em{font-style:normal;color:var(--acc2)}
.hero-p{font-size:16px;color:var(--sub);max-width:460px;margin:0 auto 40px;line-height:1.8;animation:up .7s ease .2s both;}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:up .7s ease .3s both}
.btn-p{padding:14px 32px;border-radius:12px;font-size:14px;font-weight:700;background:var(--acc);color:#fff;}
.btn-s{padding:14px 28px;border-radius:12px;font-size:14px;font-weight:600;background:var(--surf);color:var(--txt);border:1px solid var(--bdr);}
.hero-feats{display:flex;gap:40px;justify-content:center;margin-top:64px;flex-wrap:wrap;animation:up .7s ease .4s both;}
.hf-v{font-family:var(--fh);font-size:26px;font-weight:900;color:var(--acc2)}
.hf-l{font-size:12px;color:var(--sub);margin-top:2px}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* SECTIONS */
section{padding:100px 24px}
.wrap{max-width:1100px;margin:0 auto}
.s-label{font-size:11px;font-weight:700;letter-spacing:3px;color:var(--acc2);margin-bottom:14px}
.s-title{font-family:var(--fh);font-size:clamp(28px,4.5vw,46px);font-weight:900;margin-bottom:14px}
.s-sub{font-size:15px;color:var(--sub);max-width:440px;line-height:1.8}

#features{background:var(--bg2)}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;margin-top:56px}
.feat-card{background:var(--bg2);padding:36px;}
.feat-ico{width:48px;height:48px;border-radius:11px;background:var(--surf);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px}
.feat-card h3{font-family:var(--fh);font-size:16px;font-weight:700;margin-bottom:8px}
.feat-card p{font-size:13px;color:var(--sub);line-height:1.7}

#tariffs{background:var(--bg)}
#howto{background:var(--bg2)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-top:52px}
.step-n{width:44px;height:44px;border-radius:11px;background:var(--surf);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:18px;font-weight:900;color:var(--acc2);margin-bottom:18px;}
.step h3{font-family:var(--fh);font-size:15px;font-weight:700;margin-bottom:8px}
.step p{font-size:13px;color:var(--sub);line-height:1.7}

/* FOOTER */
footer{background:var(--bg2);border-top:1px solid var(--bdr);padding:56px 24px}
.foot-inner{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.foot-brand p{font-size:13px;color:var(--sub);margin-top:10px;max-width:240px;}
.foot-col h4{font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;margin-bottom:14px}
.foot-col a{display:block;font-size:13px;color:var(--sub);margin-bottom:9px;}
.foot-bottom{max-width:1100px;margin:36px auto 0;padding-top:20px;border-top:1px solid var(--bdr);display:flex;justify-content:space-between;font-size:12px;color:var(--sub)}

.nav-link{font-size:13px;color:var(--sub);padding:6px 14px;border-radius:8px;}
@media(max-width:880px){ .nav-link{display:none} }
@media(max-width:560px){ .hero-feats{gap:24px} .hf-v{font-size:20px} .foot-inner, .foot-bottom{flex-direction:column} }