@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#06101c;
  --panel:#0b1728;
  --panel2:#101f34;
  --line:rgba(148,163,184,.22);
  --text:#f8fafc;
  --muted:#9fb3c8;
  --blue:#2563eb;
  --blue2:#2f80ff;
  --cyan:#06d6d4;
  --purple:#7c3aed;
  --green:#11b981;
  --orange:#fb923c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  background:
    radial-gradient(circle at 12% 5%, rgba(37,99,235,.28), transparent 32%),
    radial-gradient(circle at 88% 8%, rgba(124,58,237,.22), transparent 30%),
    linear-gradient(180deg,#04101d 0%,#081323 45%,#06101c 100%);
  color:var(--text);
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
  mask-image:linear-gradient(to bottom,black,transparent 75%);
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.section{max-width:1320px;margin:0 auto;padding:76px 28px}

.site-header{
  position:sticky; top:0; z-index:20;
  height:76px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  backdrop-filter:blur(18px);
  background:rgba(4,14,26,.72);
  border-bottom:1px solid rgba(148,163,184,.13);
}
.brand img{width:190px;height:auto;display:block}
.nav{display:flex;gap:34px;font-weight:700;font-size:14px}
.nav a{color:#e2e8f0;opacity:.95}
.nav a:hover{color:#58a6ff}
.login-btn,.primary-btn,.secondary-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:10px;padding:14px 22px;font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
}
.login-btn,.primary-btn{
  background:linear-gradient(135deg,var(--blue),#24c8ff 55%,var(--purple));
  box-shadow:0 15px 34px rgba(37,99,235,.32);
}
.secondary-btn{
  color:#fff;background:rgba(7,17,31,.5);border-color:rgba(148,163,184,.45)
}
.secondary-btn:hover{border-color:#7dd3fc;background:rgba(37,99,235,.14)}

.hero{
  min-height:620px;
  display:grid;grid-template-columns:1fr 1.08fr;gap:52px;align-items:center;
  padding-top:86px;
}
.eyebrow,.section-title span,.story-copy span,.analysis-band span{
  color:#7ba7ff;background:rgba(37,99,235,.16);
  border:1px solid rgba(37,99,235,.25);
  border-radius:999px;padding:7px 12px;
  font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
}
.hero h1{font-size:64px;line-height:1.06;margin:22px 0 22px;letter-spacing:-.05em}
.hero h1 span,.why h2 span,.analysis-band strong,.contact h2 span{color:#3b82f6}
.hero p{max-width:630px;font-size:19px;line-height:1.8;color:#cbd5e1}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap;margin:32px 0}
.trust-row{display:flex;flex-wrap:wrap;gap:20px;margin-top:32px;color:#dbeafe;font-size:13px;font-weight:800}
.trust-row span{opacity:.93}

.hero-visual{perspective:1200px}
.laptop{
  transform:rotateY(-9deg) rotateX(5deg);
  border-radius:28px;padding:14px;
  background:linear-gradient(145deg,rgba(148,163,184,.25),rgba(15,23,42,.2));
  border:1px solid rgba(148,163,184,.28);
  box-shadow:0 44px 90px rgba(0,0,0,.48);
}
.screen{
  min-height:410px;border-radius:18px;overflow:hidden;
  background:#081323;border:1px solid rgba(125,211,252,.15);
}
.screen-top{height:52px;background:#0e1b2f;display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid rgba(148,163,184,.13)}
.screen-top img{width:32px}.screen-top span{margin-left:auto;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#06d6d4)}
.dashboard{display:grid;grid-template-columns:145px 1fr;min-height:358px}
.dashboard aside{background:#0b1424;padding:20px;display:flex;gap:15px;flex-direction:column}
.dashboard aside b{background:#2563eb;border-radius:8px;padding:9px 10px}
.dashboard aside small{color:#9fb3c8}
.dash-main{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px}
.stat,.chart,.orders{background:rgba(15,31,53,.92);border:1px solid rgba(148,163,184,.16);border-radius:14px;padding:16px}
.stat small{color:#9fb3c8}.stat strong{display:block;font-size:20px;margin:7px 0}.stat em{color:#34d399;font-style:normal}.stat .red{color:#fb7185}
.chart{grid-column:span 2;height:190px;display:flex;align-items:end;gap:16px;padding-top:40px}
.chart span{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#2f80ff,#06d6d4)}
.orders p{color:#cbd5e1;font-size:13px}.orders span{color:#22c55e}

.section-title{text-align:center;margin-bottom:42px}
.section-title span{display:inline-flex;background:transparent;border:0;color:#3b82f6}
.section-title h2{font-size:34px;margin:8px 0 0}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{
  background:linear-gradient(180deg,rgba(15,31,53,.86),rgba(9,20,35,.86));
  border:1px solid rgba(148,163,184,.19);
  border-radius:18px;padding:30px;min-height:315px;
  box-shadow:0 24px 60px rgba(0,0,0,.16);
}
.card:hover{transform:translateY(-5px);transition:.25s;border-color:rgba(59,130,246,.55)}
.icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:900;margin-bottom:20px}
.icon.blue{background:#2563eb}.icon.green{background:#10b981}.icon.orange{background:#fb923c}.icon.purple{background:#7c3aed}
.card h3{font-size:21px}.card small{color:#dbeafe}.card li{margin:10px 0;color:#cbd5e1;font-size:14px}.card ul{padding-left:18px}
.card a{display:inline-block;color:#58a6ff;font-weight:900;margin-top:12px}

.why{padding-top:38px}
.why-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;text-align:center}
.why-grid b{width:58px;height:58px;border-radius:50%;border:1px solid #2563eb;display:grid;place-items:center;margin:0 auto 12px;font-size:25px;color:#60a5fa}
.why-grid h4{margin:0 0 8px}.why-grid p{color:#cbd5e1;font-size:13px;line-height:1.6}

.analysis-band{
  margin:46px 0;
  background:linear-gradient(90deg,#f8fbff,#eaf1ff);
  color:#07111f;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;
  padding:70px max(28px,calc((100vw - 1320px)/2 + 28px));
}
.analysis-band span{background:transparent;border:0;color:#2563eb;padding:0}
.analysis-band h2{font-size:42px;line-height:1.12;margin:12px 0 20px;color:#07111f}
.analysis-band ul{list-style:none;padding:0;margin:0 0 26px}.analysis-band li{margin:12px 0}.analysis-band li:before{content:"✓";color:#2563eb;font-weight:900;margin-right:10px}
.analysis-art{display:grid;place-items:center}
.monitor{width:min(430px,100%);height:260px;border-radius:22px;background:#dbeafe;border:12px solid #b8d4ff;position:relative;box-shadow:0 25px 45px rgba(37,99,235,.20)}
.bars{display:flex;gap:16px;align-items:end;height:120px;margin:54px 38px 0}.bars i{width:46px;border-radius:10px 10px 0 0;background:#3b82f6}.bars i:nth-child(1){height:45%}.bars i:nth-child(2){height:70%}.bars i:nth-child(3){height:55%}.bars i:nth-child(4){height:95%}
.pie{position:absolute;right:42px;bottom:35px;width:90px;height:90px;border-radius:50%;background:conic-gradient(#2563eb 0 52%,#93c5fd 52% 76%,#dbeafe 76%)}

.story{display:grid;grid-template-columns:1fr 1.1fr;gap:58px;align-items:center}
.story h2{font-size:36px;line-height:1.15}.story p{color:#cbd5e1;line-height:1.75}
.city-card{border-radius:22px;overflow:hidden;background:#0c1930;border:1px solid rgba(148,163,184,.21);box-shadow:0 30px 70px rgba(0,0,0,.28)}
.skyline{height:330px;background:
  linear-gradient(to top,rgba(6,16,28,.1),rgba(6,16,28,.1)),
  radial-gradient(circle at 30% 15%,rgba(255,187,91,.5),transparent 18%),
  linear-gradient(180deg,#1e3a8a,#07111f 70%);
  position:relative;
}
.skyline:before{content:"";position:absolute;left:0;right:0;bottom:0;height:165px;background:
  linear-gradient(90deg,transparent 0 6%,#121d31 6% 12%,transparent 12% 18%,#1d2940 18% 27%,transparent 27% 33%,#15243c 33% 43%,transparent 43% 52%,#24324b 52% 62%,transparent 62% 70%,#101d31 70% 79%,transparent 79% 88%,#1b2942 88% 96%,transparent 96%);
}
.skyline:after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(180deg,rgba(37,99,235,.15),rgba(251,146,60,.18))}
.story-badges{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px}
.story-badges div{background:rgba(15,31,53,.9);border:1px solid rgba(148,163,184,.22);border-radius:14px;padding:18px}
.story-badges small{color:#9fb3c8}.story-badges strong{display:block;font-size:29px}.story-badges span{color:#dbeafe}

.cta-strip{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  background:linear-gradient(135deg,#2563eb,#06b6d4 45%,#7c3aed);
  border-radius:18px;padding:32px 44px;
}
.cta-strip strong{font-size:24px}.cta-strip p{margin:8px 0 0;color:#e0f2fe}
.cta-strip a{background:#fff;color:#2563eb;border-radius:10px;padding:15px 24px;font-weight:900}

.contact{display:grid;grid-template-columns:.9fr 1.1fr .9fr;gap:32px;align-items:start}
.contact h2{font-size:36px;line-height:1.12}.contact p{color:#cbd5e1}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form input,.contact-form textarea,.modal-card input,.modal-card textarea{
  width:100%;background:rgba(15,31,53,.72);border:1px solid rgba(148,163,184,.28);
  color:#fff;border-radius:10px;padding:16px;outline:none;
}
.contact-form textarea{grid-column:1/-1;min-height:112px}
.contact-form button{width:max-content}
.contact-info{display:grid;gap:18px}
.contact-info a,.contact-info p{display:flex;gap:14px;align-items:center;color:#cbd5e1;margin:0}
.contact-info b{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,#10b981,#2563eb);display:grid;place-items:center}
.contact-info strong{color:#fff}

footer{border-top:1px solid rgba(148,163,184,.13);display:flex;align-items:center;justify-content:space-between;padding:26px 48px;color:#94a3b8}
footer img{width:155px}footer div{display:flex;gap:12px}footer div a{width:36px;height:36px;border-radius:50%;background:rgba(148,163,184,.1);display:grid;place-items:center}

dialog{border:0;border-radius:22px;padding:0;background:transparent;color:#fff;max-width:560px;width:calc(100% - 28px)}
dialog::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(8px)}
.modal-card{position:relative;background:linear-gradient(180deg,#0d1b30,#07111f);border:1px solid rgba(148,163,184,.25);border-radius:22px;padding:30px;display:grid;gap:14px}
.modal-card h3{font-size:30px;margin:8px 0 0}.modal-card p{color:#cbd5e1}.close{position:absolute;right:18px;top:14px;background:transparent;color:#fff;border:0;font-size:32px;cursor:pointer}.modal-card textarea{min-height:120px}

@media (max-width:1050px){
  .nav{display:none}
  .hero,.story,.analysis-band,.contact{grid-template-columns:1fr}
  .hero h1{font-size:48px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .site-header{padding:0 18px}.brand img{width:148px}.login-btn{padding:11px 13px;font-size:13px}
  .section{padding:54px 18px}.hero{padding-top:54px}.hero h1{font-size:38px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .cards,.why-grid,.contact-form{grid-template-columns:1fr}
  .dashboard{grid-template-columns:1fr}.dashboard aside{display:none}.dash-main{grid-template-columns:1fr}.chart{grid-column:auto}
  .cta-strip{flex-direction:column;align-items:flex-start;padding:28px}
  footer{padding:24px 18px;flex-direction:column;gap:16px}
}