:root{
  --bg:#090b10;
  --panel:#11151d;
  --text:#f4f7fb;
  --muted:#99a4b5;
  --cyan:#4df6ff;
  --magenta:#ff4fd8;
  --lime:#b7ff4a;
  --orange:#ff9f43;
  --violet:#9d72ff;
  --blue:#5f8dff;
  --line:rgba(255,255,255,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 16% 5%,rgba(77,246,255,.08),transparent 32rem),
    radial-gradient(circle at 90% 12%,rgba(255,79,216,.08),transparent 30rem),
    var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{color:inherit;text-decoration:none}
.shell{width:min(1180px,calc(100% - 36px));margin:auto}
.noise{pointer-events:none;position:fixed;inset:0;opacity:.018;z-index:99;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);background:rgba(9,11,16,.72);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-wrap{height:82px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand-mark{
  display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  color:#071013;font-weight:900;letter-spacing:-.08em;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  box-shadow:0 0 34px rgba(77,246,255,.23)
}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}
.brand-copy strong{font-size:1rem}
.brand-copy small{color:var(--muted);font-size:.68rem;margin-top:4px;letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;gap:26px;color:#c4ccd8;font-size:.92rem}
.nav a:hover{color:white}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 19px;
  border:1px solid var(--line);border-radius:13px;font-weight:800;font-size:.9rem;
  transition:.2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-login{background:#f6f7f9;color:#090b10;border-color:white}
.btn-primary{
  color:#071013;border:none;
  background:linear-gradient(105deg,var(--cyan),#8dffbd 48%,var(--lime));
  box-shadow:0 0 30px rgba(77,246,255,.17)
}
.btn-ghost{background:rgba(255,255,255,.035)}
.hero{
  min-height:720px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;
  gap:58px;padding-top:58px;padding-bottom:58px
}
.eyebrow,.section-kicker{
  font-size:.73rem;letter-spacing:.22em;font-weight:900;color:var(--cyan);margin-bottom:18px
}
.hero h1,.section h2,.cta h2{
  margin:0;line-height:.92;letter-spacing:-.06em;font-size:clamp(3.6rem,7vw,7.2rem)
}
.hero h1 span{background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--lime));-webkit-background-clip:text;color:transparent}
.hero-text{max-width:640px;font-size:1.18rem;line-height:1.72;color:#b9c2cf;margin:30px 0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.hero-badges span{padding:8px 11px;border:1px solid var(--line);border-radius:999px;color:#9fa9b9;font-size:.78rem;background:rgba(255,255,255,.025)}
.hero-visual{position:relative}
.glow{position:absolute;border-radius:999px;filter:blur(70px);opacity:.32}
.glow-a{width:280px;height:280px;background:var(--cyan);left:-30px;bottom:0}
.glow-b{width:240px;height:240px;background:var(--magenta);right:-30px;top:0}
.glass-window{
  position:relative;overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(24,29,41,.92),rgba(12,15,21,.9));
  box-shadow:0 35px 90px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.07);
  transform:rotate(1.7deg)
}
.window-top{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 20px;color:#b7c0cd;font-size:.82rem}
.window-top span{margin:auto}
.window-top b{color:var(--lime);font-size:.7rem}
.dots{display:flex;gap:6px}.dots i{width:8px;height:8px;border-radius:50%;background:#414958}.dots i:nth-child(2){background:var(--magenta)}.dots i:nth-child(3){background:var(--cyan)}
.dashboard-grid{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metric{min-height:145px;border:1px solid var(--line);border-radius:18px;padding:18px;background:rgba(255,255,255,.025);display:flex;flex-direction:column}
.metric.wide{grid-column:1 / -1;min-height:175px}
.metric small{color:#8d98a9;font-size:.67rem;letter-spacing:.08em}
.metric strong{font-size:2.15rem;margin-top:auto;letter-spacing:-.04em}
.metric span{color:#778395;font-size:.72rem;margin-top:4px}
.metric .live{color:var(--lime)}
.spark{height:42px;display:flex;align-items:end;gap:6px;margin-top:13px}
.spark i{flex:1;border-radius:4px;background:linear-gradient(var(--cyan),rgba(77,246,255,.15))}
.spark i:nth-child(1){height:38%}.spark i:nth-child(2){height:65%}.spark i:nth-child(3){height:51%}.spark i:nth-child(4){height:81%}.spark i:nth-child(5){height:62%}.spark i:nth-child(6){height:92%}.spark i:nth-child(7){height:74%}
.section{padding:110px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.section h2{font-size:clamp(3rem,5vw,5.8rem)}
.section h2 span{color:#a8b1bf}
.copy p,.integration-note,.security-panel p,.cta-right p{font-size:1.08rem;line-height:1.75;color:#a9b3c2}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feature-card{position:relative;min-height:260px;border:1px solid var(--line);border-radius:22px;padding:24px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.018));overflow:hidden}
.feature-card:after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;right:-50px;top:-50px;background:currentColor;filter:blur(45px);opacity:.09}
.feature-card .number{font-size:.7rem;letter-spacing:.15em;color:#818b9a}
.feature-card h3{font-size:1.35rem;margin:90px 0 8px}
.feature-card p{color:#9ba6b6;line-height:1.65;margin:0;font-size:.92rem}
.cyan{color:var(--cyan)}.magenta{color:var(--magenta)}.lime{color:var(--lime)}.orange{color:var(--orange)}.violet{color:var(--violet)}.blue{color:var(--blue)}
.integration-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
.pill{min-height:115px;border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;justify-content:end;background:rgba(255,255,255,.025)}
.pill b{font-size:1rem}.pill small{color:#8f9bab;margin-top:5px}
.integration-note{max-width:820px;margin-top:30px}
.security-panel{
  border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:48px;
  display:grid;grid-template-columns:1.25fr .75fr;gap:60px;
  background:
    radial-gradient(circle at 10% 50%,rgba(157,114,255,.11),transparent 30%),
    rgba(255,255,255,.025)
}
.security-panel h2{font-size:clamp(2.7rem,4vw,4.9rem)}
.security-list{display:flex;flex-direction:column;gap:14px;align-self:center}
.security-list span{border-bottom:1px solid var(--line);padding-bottom:13px;color:#c5ceda}
.cta{padding-bottom:120px}
.cta-box{border-radius:30px;padding:50px;display:grid;grid-template-columns:1fr .75fr;gap:70px;background:linear-gradient(135deg,rgba(77,246,255,.12),rgba(255,79,216,.08) 48%,rgba(183,255,74,.08));border:1px solid rgba(255,255,255,.13)}
.cta h2{font-size:clamp(3rem,5vw,5.6rem)}
.cta-right{display:flex;flex-direction:column;justify-content:end;align-items:flex-start}
footer{border-top:1px solid var(--line);padding:34px 0 45px;color:#8e99a8}
.footer-wrap{display:flex;justify-content:space-between;gap:30px}.footer-wrap>div:first-child{display:flex;flex-direction:column}.footer-wrap span{font-size:.75rem;margin-top:3px}.footer-links{display:flex;gap:20px;font-size:.84rem}

.legal{padding:90px 0;max-width:860px}.legal h1{font-size:3.3rem;letter-spacing:-.05em}.legal h2{margin-top:38px}.legal p{line-height:1.7;color:#aab4c2}

@media(max-width:900px){
  .nav{display:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:86px}
  .hero-visual{max-width:620px}
  .cards{grid-template-columns:1fr 1fr}
  .split,.security-panel,.cta-box{grid-template-columns:1fr}
  .integration-row{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .shell{width:min(100% - 24px,1180px)}
  .nav-wrap{height:70px}.brand-copy small{display:none}.btn-login{padding:0 13px}
  .hero{padding-top:62px;gap:42px}.hero h1{font-size:3.55rem}
  .dashboard-grid{grid-template-columns:1fr}.metric.wide{grid-column:auto}
  .cards,.integration-row{grid-template-columns:1fr}
  .section{padding:78px 0}.security-panel,.cta-box{padding:28px 22px}
  .footer-wrap{flex-direction:column}.footer-links{flex-wrap:wrap}
}