*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',system-ui,-apple-system,sans-serif}
html{scroll-behavior:smooth}
body{background:#f4f7fb;color:#1b2a41;overflow-x:hidden}
::selection{background:#0176d3;color:#fff}
h1,h2,h3{letter-spacing:-.02em}
a{text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.6rem}
.btn{display:inline-block;background:#0176d3;color:#fff;padding:.8rem 1.7rem;border-radius:10px;font-weight:700;font-size:.95rem;border:none;cursor:pointer;transition:.2s;box-shadow:0 6px 20px rgba(1,118,211,.35)}
.btn:hover{background:#015fa8;transform:translateY(-2px);box-shadow:0 10px 28px rgba(1,118,211,.45)}
.btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.15)}
.btn.lite{background:#eef2f8;color:#16325c;box-shadow:none}
.btn.lite:hover{background:#dde6f2}
.btn.big{font-size:1.05rem;padding:1rem 2.4rem}
/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 4vw;display:flex;justify-content:space-between;align-items:center;transition:.25s}
nav.sc{background:rgba(10,22,40,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.navl{display:flex;align-items:center;gap:.7rem;font-weight:800;font-size:1.1rem;color:#fff}
.navl img{height:34px;border-radius:9px}
.navl .bdg{background:#38b6ff;color:#06243f;font-size:.6rem;padding:.2rem .55rem;border-radius:99px;letter-spacing:.06em;font-weight:800}
.navr{display:flex;align-items:center;gap:.6rem}
.navr a.nl{color:#c9d6ea;font-size:.87rem;font-weight:600;margin-right:.8rem}
.navr a.nl:hover{color:#fff}
/* HERO */
.hero{position:relative;background:linear-gradient(155deg,#081120 0%,#0d2340 42%,#0d47a1 78%,#1565c0 100%);color:#fff;padding:9.5rem 4vw 5rem;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:28px 28px}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:float 9s ease-in-out infinite}
.orb1{width:480px;height:480px;background:#38b6ff;top:-160px;right:-80px}
.orb2{width:380px;height:380px;background:#19e3b1;bottom:-140px;left:-100px;opacity:.22;animation-delay:1.4s}
.orb3{width:260px;height:260px;background:#7c4dff;top:40%;left:38%;opacity:.18;animation-delay:.7s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.kick{display:inline-flex;align-items:center;gap:.5rem;background:rgba(56,182,255,.12);border:1px solid rgba(56,182,255,.35);color:#7ed0ff;font-size:.74rem;font-weight:700;padding:.4rem .9rem;border-radius:99px;letter-spacing:.04em}
.kick i{width:7px;height:7px;border-radius:50%;background:#19e3b1;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-size:3.4rem;font-weight:800;line-height:1.08;margin:1.1rem 0}
.hero h1 .gr{background:linear-gradient(90deg,#38b6ff,#19e3b1);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:1.08rem;color:#a8bdd9;line-height:1.65;max-width:520px}
.cta{display:flex;gap:.9rem;margin:1.8rem 0 2.2rem;flex-wrap:wrap}
.trow{display:flex;gap:1.6rem;flex-wrap:wrap}
.trow .t{font-size:.8rem;color:#a8bdd9;display:flex;align-items:center;gap:.45rem}
.trow .t b{color:#19e3b1}
/* DASHBOARD MOCK */
.mock{position:relative;background:rgba(13,25,45,.75);border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 40px 90px rgba(3,10,24,.6);overflow:hidden;backdrop-filter:blur(6px);transform:perspective(1400px) rotateY(-7deg) rotateX(2deg);transition:.4s}
.mock:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}
.mock .bar{display:flex;gap:.4rem;padding:.7rem .9rem;border-bottom:1px solid rgba(255,255,255,.08);align-items:center}
.mock .bar i{width:10px;height:10px;border-radius:50%}
.mock .bar i:nth-child(1){background:#ff5f57}.mock .bar i:nth-child(2){background:#febc2e}.mock .bar i:nth-child(3){background:#28c840}
.mock .bar span{margin-left:auto;font-size:.68rem;color:#5d7aa6}
.mock .body{display:grid;grid-template-columns:110px 1fr;min-height:270px}
.mock .side{background:rgba(8,17,32,.6);padding:.8rem .6rem}
.mock .side i{display:block;height:9px;border-radius:4px;background:rgba(255,255,255,.1);margin-bottom:.6rem}
.mock .side i.on{background:#38b6ff}
.mock .main{padding:.9rem}
.mock .kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;margin-bottom:.8rem}
.mock .kpi{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:.6rem}
.mock .kpi b{display:block;color:#fff;font-size:.95rem}
.mock .kpi span{font-size:.58rem;color:#7e94b8;text-transform:uppercase}
.mock .rowline{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.05);border-radius:8px;padding:.55rem .7rem;margin-bottom:.45rem}
.mock .rowline i{width:70px;height:8px;border-radius:4px;background:rgba(255,255,255,.14)}
.mock .rowline u{width:44px;height:14px;border-radius:99px;background:rgba(46,204,113,.3);border:1px solid rgba(46,204,113,.5)}
.mock .rowline u.b{background:rgba(56,182,255,.25);border-color:rgba(56,182,255,.5)}
/* LOGOS/STATS */
.strip{background:#fff;border-bottom:1px solid #e5e9f0;padding:2.4rem 4vw}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.strip b{display:block;font-size:2rem;color:#0f1c2e;font-weight:800}
.strip span{font-size:.78rem;color:#8ea3c0;text-transform:uppercase;letter-spacing:.05em}
/* SECTIONS */
section.blk{padding:5rem 0}
h2.sec{font-size:2.1rem;text-align:center;color:#0f1c2e}
h2.sec em{font-style:normal;color:#0176d3}
p.sec{text-align:center;color:#54698d;font-size:.98rem;max-width:560px;margin:.8rem auto 3rem;line-height:1.65}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.fcard{background:#fff;border:1px solid #e5e9f0;border-radius:16px;padding:1.7rem;transition:.2s;position:relative;overflow:hidden}
.fcard::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#0176d3,#38b6ff);transform:scaleX(0);transform-origin:left;transition:.3s}
.fcard:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(15,23,42,.1);border-color:#c4d7f2}
.fcard:hover::after{transform:scaleX(1)}
.fcard .ic{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#e0f2fd,#c8e6ff);display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:1rem}
.fcard b{display:block;font-size:1.02rem;margin-bottom:.45rem;color:#111c2e}
.fcard span{font-size:.85rem;color:#8ea3c0;line-height:1.6}
/* HOW */
.how{background:linear-gradient(180deg,#0d2340,#0a1628);color:#fff;border-radius:0}
.how h2.sec{color:#fff}
.how p.sec{color:#8ea3c0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.stepc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.8rem;position:relative}
.stepc .n{position:absolute;top:-16px;left:1.6rem;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#0176d3,#38b6ff);display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 6px 16px rgba(1,118,211,.4)}
.stepc b{display:block;font-size:1rem;margin:.6rem 0 .5rem}
.stepc span{font-size:.85rem;color:#8ea3c0;line-height:1.6}
/* SHOWCASE */
.show{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.show .lst{display:grid;gap:.9rem;margin-top:1.4rem}
.show .li{display:flex;gap:.9rem;align-items:flex-start}
.show .li i{flex-shrink:0;width:26px;height:26px;border-radius:8px;background:#e0f2fd;color:#0176d3;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-style:normal;font-weight:800}
.show .li b{display:block;font-size:.9rem}
.show .li span{font-size:.82rem;color:#8ea3c0;line-height:1.55}
.botdemo{background:#0d1b2e;border-radius:16px;padding:1.4rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(5,15,35,.25)}
.botdemo .bh{display:flex;align-items:center;gap:.7rem;padding-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:.9rem}
.botdemo .bh .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#7c4dff,#38b6ff);display:flex;align-items:center;justify-content:center}
.botdemo .bh b{color:#fff;font-size:.9rem}.botdemo .bh span{font-size:.7rem;color:#7e94b8;display:block}
.msg{display:flex;gap:.6rem;margin-bottom:.8rem}
.msg .ma{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:#2a3d5c;display:flex;align-items:center;justify-content:center;font-size:.8rem}
.msg .mc{background:rgba(255,255,255,.06);border-radius:0 10px 10px 10px;padding:.55rem .8rem;font-size:.78rem;color:#c9d6ea;max-width:85%}
.msg .mc b{color:#38b6ff;display:block;font-size:.72rem}
/* PLANS */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;align-items:stretch}
.plan{background:#fff;border:1px solid #e5e9f0;border-radius:18px;padding:2rem;position:relative;transition:.2s;display:flex;flex-direction:column}
.plan:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(15,23,42,.1)}
.plan.hot{border-color:#0176d3;box-shadow:0 20px 55px rgba(1,118,211,.18);transform:scale(1.03)}
.plan.hot:hover{transform:scale(1.03) translateY(-5px)}
.plan .tag{position:absolute;top:-12px;right:18px;background:linear-gradient(90deg,#0176d3,#38b6ff);color:#fff;font-size:.62rem;font-weight:800;padding:.3rem .8rem;border-radius:99px;letter-spacing:.08em}
.plan h3{font-size:1.05rem;color:#111c2e}
.plan .price{font-size:2.3rem;font-weight:800;color:#111c2e;margin:.5rem 0}
.plan .price small{font-size:.85rem;color:#8ea3c0;font-weight:400}
.plan ul{list-style:none;margin:1rem 0 1.5rem;flex:1}
.plan li{font-size:.85rem;color:#54698d;padding:.35rem 0}
.plan li::before{content:'✓';color:#0176d3;font-weight:800;margin-right:.55rem}
.plan li.no{color:#b8c4d6}.plan li.no::before{content:'✕';color:#d4dce8}
.plan .btn{text-align:center}
/* TESTIMONIALS */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.tc{background:#fff;border:1px solid #e5e9f0;border-radius:16px;padding:1.6rem}
.tc .stars{color:#f1c40f;letter-spacing:.15em;margin-bottom:.7rem}
.tc p{font-size:.86rem;color:#3a4657;line-height:1.65;font-style:italic}
.tc .who{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem}
.tc .who i{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#0176d3,#38b6ff);color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:.8rem}
.tc .who b{display:block;font-size:.84rem}.tc .who span{font-size:.72rem;color:#8ea3c0}
/* FAQ */
.faq{max-width:720px;margin:0 auto}
.qa{background:#fff;border:1px solid #e5e9f0;border-radius:12px;margin-bottom:.7rem;overflow:hidden}
.qa .q{padding:1.05rem 1.3rem;font-weight:700;font-size:.92rem;color:#111c2e;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.qa .q::after{content:'+';color:#0176d3;font-size:1.3rem;font-weight:400;transition:.2s}
.qa.open .q::after{transform:rotate(45deg)}
.qa .a{max-height:0;overflow:hidden;transition:.25s;padding:0 1.3rem;font-size:.85rem;color:#54698d;line-height:1.65}
.qa.open .a{max-height:220px;padding:0 1.3rem 1.1rem}
/* REGISTER */
.reg{background:linear-gradient(155deg,#081120,#0d47a1);padding:5rem 0;position:relative;overflow:hidden}
.reg::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:26px 26px}
.reg .wrap{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center}
.reg h2{color:#fff;font-size:2rem}
.reg .rp{color:#a8bdd9;font-size:.95rem;line-height:1.7;margin:1rem 0 1.6rem}
.reg .chk{display:grid;gap:.7rem}
.reg .chk div{color:#c9d6ea;font-size:.88rem;display:flex;gap:.6rem;align-items:center}
.reg .chk i{color:#19e3b1;font-style:normal;font-weight:800}
.regcard{background:rgba(255,255,255,.97);border-radius:18px;padding:2.1rem;box-shadow:0 30px 80px rgba(3,10,24,.5)}
.regcard h3{font-size:1.25rem;color:#111c2e}
.regcard>p{color:#54698d;font-size:.82rem;margin:.4rem 0 1.4rem}
.field{margin-bottom:.8rem}
.field label{display:block;font-size:.68rem;color:#54698d;margin-bottom:.28rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.field input{width:100%;padding:.72rem .9rem;border:1px solid #dbe5f0;background:#f8fafc;border-radius:9px;font-size:.9rem;color:#111c2e}
.field input:focus{outline:none;border-color:#0176d3;background:#fff;box-shadow:0 0 0 3px rgba(1,118,211,.12)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.pick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.55rem}
.pick label{border:1px solid #dbe5f0;border-radius:10px;padding:.7rem .4rem;text-align:center;cursor:pointer;font-size:.74rem;display:block;background:#f8fafc;transition:.12s;color:#54698d}
.pick input{display:none}
.pick label.on{border-color:#0176d3;background:#e0f2fd;box-shadow:0 0 0 1px #0176d3;color:#111c2e}
.pick b{display:block;font-size:.85rem;color:#111c2e}
.agb{display:flex;gap:.7rem;align-items:flex-start;font-size:.78rem;color:#54698d;margin:.9rem 0}
.agb input{width:auto;margin-top:.2rem}
.agb a{color:#0176d3}
.err{background:#fdecec;color:#b3261e;border-radius:8px;padding:.6rem .9rem;font-size:.8rem;margin-bottom:.8rem;display:none}
.ok{background:#d9f2e6;color:#0c7a43;border-radius:8px;padding:.8rem;font-size:.85rem;margin-bottom:.8rem;display:none}
/* FOOTER */
footer{background:#0a1628;color:#8ea3c0;padding:3rem 4vw 1.8rem}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
footer b{color:#fff;display:block;margin-bottom:.8rem;font-size:.9rem}
footer a{color:#8ea3c0;display:block;font-size:.82rem;padding:.25rem 0}
footer a:hover{color:#fff}
footer .fl{font-size:.8rem;line-height:1.6}
.fbot{border-top:1px solid rgba(255,255,255,.08);margin-top:2.2rem;padding-top:1.4rem;text-align:center;font-size:.74rem}
/* REVEAL */
.rv{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(max-width:960px){.hero .wrap,.show,.reg .wrap{grid-template-columns:1fr}.feat,.steps,.testi,.plans{grid-template-columns:1fr 1fr}.strip .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.hero h1{font-size:2.2rem}.feat,.steps,.testi,.plans,.g2{grid-template-columns:1fr}.pick{grid-template-columns:1fr}footer .wrap{grid-template-columns:1fr 1fr}}