@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html[data-theme=light]{color-scheme:light}
html[data-theme=dark]{color-scheme:dark}
:root{
  --bg:#f8f9fc;--fg:#0f172a;--muted:#64748b;--line:#e2e8f0;
  --pill:#0f172a;--pillfg:#fff;--soft:#f1f5f9;
  --accent:#6366f1;--accent-soft:#eef2ff;--accent-dark:#4338ca;
  --danger:#ef4444;--danger-soft:#fef2f2;
  --radius-lg:20px;--radius-md:14px;--radius-sm:10px;
}
html[data-theme=dark]{
  --bg:#0c0f1a;--fg:#f1f5f9;--muted:#94a3b8;--line:#1e293b;
  --pill:#f1f5f9;--pillfg:#0c0f1a;--soft:#141829;
  --accent:#818cf8;--accent-soft:#1e1b4b;--accent-dark:#a5b4fc;
  --danger:#f87171;--danger-soft:#450a0a;
}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Plus Jakarta Sans',system-ui,sans-serif;transition:background .4s,color .4s;overflow-x:hidden}
.page{max-width:1080px;margin:auto;padding:0 24px}
a{color:inherit}

/* --- Scrollbar --- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* --- Nav --- */
nav{height:82px;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(1080px,calc(100% - 48px));z-index:1000;padding:0;border:1px solid transparent;background:transparent;transition:top .5s cubic-bezier(.16,1,.3,1),width .5s cubic-bezier(.16,1,.3,1),padding .5s,height .5s,border-radius .5s,background .5s,border-color .5s,box-shadow .5s,backdrop-filter .5s}
nav.scrolled{top:16px;width:min(740px,calc(100% - 32px));height:58px;padding:0 10px 0 18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);box-shadow:0 4px 32px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.04)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.025em;text-decoration:none;color:var(--fg)}
.brand .mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;box-shadow:0 4px 16px -2px color-mix(in srgb, var(--accent) 50%, transparent);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.08)}
.nav-right{display:flex;align-items:center;gap:10px}
.theme{width:60px;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--soft);padding:3px;cursor:pointer;transition:background .35s,border-color .35s}
html[data-theme=dark] .theme{background:#1e1b4b;border-color:#312e81}
.theme i{width:26px;height:26px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-style:normal;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
html[data-theme=dark] .theme i{transform:translateX(26px)}
.pill-link{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer}
.pill-link:hover{transform:translateY(-2px);background:var(--soft);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.pill-link.primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border-color:transparent;box-shadow:0 4px 16px -2px color-mix(in srgb, var(--accent) 40%, transparent)}
.pill-link.primary:hover{box-shadow:0 8px 24px -4px color-mix(in srgb, var(--accent) 50%, transparent)}

/* --- Hero --- */
.hero{text-align:center;padding:160px 0 40px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);padding:6px 16px;border-radius:999px;margin-bottom:28px;background:color-mix(in srgb, var(--bg) 80%, transparent);backdrop-filter:blur(8px)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;animation:pulseDot 1.8s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
h1{font-size:clamp(34px,5.6vw,62px);line-height:1.06;letter-spacing:-.045em;margin:0 auto;max-width:760px;font-weight:800}
h1 span{background:linear-gradient(135deg,var(--accent),#a78bfa,var(--accent-dark));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:560px;margin:24px auto 40px;font-size:clamp(15px,1.4vw,17px);line-height:1.7;color:var(--muted)}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:80px}
.btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 26px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);font:600 14.5px 'Plus Jakarta Sans';cursor:pointer;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border-color:transparent;box-shadow:0 4px 20px -4px color-mix(in srgb, var(--accent) 45%, transparent)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.btn.primary:hover{box-shadow:0 8px 32px -4px color-mix(in srgb, var(--accent) 55%, transparent)}

/* --- Notification stack mockup --- */
.notif-stack{position:relative;max-width:420px;margin:0 auto 100px;height:200px}
.notif-card{position:absolute;left:50%;width:min(340px,calc(100% - 40px));border-radius:var(--radius-lg);border:1px solid var(--line);background:color-mix(in srgb, var(--soft) 90%, transparent);backdrop-filter:blur(16px);padding:16px 18px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 8px 32px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.04);opacity:0}
.notif-card .ic{width:36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.notif-card .body{text-align:left}
.notif-card .t1{font-weight:700;font-size:13.5px}
.notif-card .t2{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.notif-card.email{transform:translateX(-50%) translateY(0) rotate(-3deg);z-index:1;animation:cardIn1 .8s cubic-bezier(.16,1,.3,1) .2s forwards}
.notif-card.email .ic{background:var(--accent-soft);color:var(--accent)}
.notif-card.telegram{transform:translateX(-50%) translateY(56px) rotate(2deg);z-index:2;animation:cardIn2 .8s cubic-bezier(.16,1,.3,1) .5s forwards}
.notif-card.telegram .ic{background:#eff6ff;color:#3b82f6}
html[data-theme=dark] .notif-card.telegram .ic{background:#172554;color:#60a5fa}
@keyframes cardIn1{from{opacity:0;transform:translateX(-50%) translateY(-14px) rotate(-3deg)}to{opacity:1;transform:translateX(-50%) translateY(0) rotate(-3deg)}}
@keyframes cardIn2{from{opacity:0;transform:translateX(-50%) translateY(70px) rotate(2deg)}to{opacity:1;transform:translateX(-50%) translateY(56px) rotate(2deg)}}

/* --- Features --- */
.section{padding:64px 0}
.section h2{font-size:30px;letter-spacing:-.025em;text-align:center;margin:0 0 48px;font-weight:800}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.feature{border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;background:color-mix(in srgb, var(--soft) 80%, transparent);backdrop-filter:blur(8px);transition:all .35s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;cursor:pointer}
.feature:before{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb, var(--accent) 8%, transparent),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.feature:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08);border-color:color-mix(in srgb, var(--accent) 30%, var(--line))}
.feature:hover:before{opacity:1}
.feature .fic{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;display:grid;place-items:center;font-size:18px;margin-bottom:16px;box-shadow:0 4px 12px -2px color-mix(in srgb, var(--accent) 35%, transparent);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.feature:hover .fic{transform:rotate(-6deg) scale(1.08)}
.feature h3{font-size:16px;margin:0 0 8px;font-weight:700}
.feature p{color:var(--muted);font-size:13.5px;line-height:1.65;margin:0}

/* --- Steps --- */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;background:var(--bg);transition:all .3s cubic-bezier(.16,1,.3,1);cursor:pointer}
.step:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.06);border-color:color-mix(in srgb, var(--accent) 25%, var(--line))}
.step .num{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;margin-bottom:14px;box-shadow:0 4px 12px -2px color-mix(in srgb, var(--accent) 30%, transparent)}
.step h3{font-size:14.5px;margin:0 0 6px;font-weight:700}
.step p{color:var(--muted);font-size:13px;line-height:1.6;margin:0}

/* --- CTA band --- */
.cta-band{border:1px solid var(--line);border-radius:24px;padding:56px 36px;text-align:center;background:linear-gradient(150deg,var(--accent-soft),var(--bg),var(--soft));margin:24px 0 80px;position:relative;overflow:hidden}
.cta-band:before{content:"";position:absolute;top:-80px;right:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb, var(--accent) 20%, transparent),transparent);animation:blobFloat1 14s ease-in-out infinite;pointer-events:none}
@keyframes blobFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,25px) scale(1.08)}}
.cta-band h2{margin:0 0 12px;font-size:28px;letter-spacing:-.025em;font-weight:800}
.cta-band p{color:var(--muted);margin:0 0 28px;font-size:15px}

/* --- Footer --- */
footer{border-top:1px solid var(--line);padding:40px 0 52px;text-align:center;color:var(--muted);font-size:13px}
footer a{color:var(--fg);text-decoration:none;font-weight:600}
footer .social{display:flex;gap:14px;justify-content:center;margin:16px 0}
footer .social a{color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:12.5px;transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer}
footer .social a:hover{transform:translateY(-2px);color:var(--accent);border-color:var(--accent-soft);background:var(--accent-soft)}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.show{opacity:1;transform:none}
.enter{opacity:0;transform:translateY(16px);filter:blur(4px);animation:enterIn .7s cubic-bezier(.16,1,.3,1) forwards}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}
@keyframes enterIn{to{opacity:1;transform:none;filter:none}}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
@media(max-width:760px){
  .feature-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .hero{padding:130px 0 30px}
  nav{height:76px}
}
@media(max-width:480px){
  .steps-grid{grid-template-columns:1fr}
  .cta-band{padding:40px 24px}
  .nav-right{gap:6px}
  .pill-link{padding:7px 12px;font-size:12px}
  .hero-actions{flex-direction:column;align-items:center}
  .notif-stack{height:180px}
}