:root{
  --bg:#061426;
  --bg-soft:#0a1f38;
  --primary:#1595ff;
  --primary-2:#2563eb;
  --text:#f7fbff;
  --muted:#b8c7d9;
  --line:rgba(255,255,255,.12);
  --card:rgba(11,33,58,.78);
  --light:#f4f8fd;
  --dark:#071426;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit}
.page-glow{
  position:fixed;
  width:440px;height:440px;
  border-radius:50%;
  filter:blur(110px);
  pointer-events:none;
  opacity:.18;
  z-index:0;
}
.glow-one{background:#008cff;top:-180px;right:-120px}
.glow-two{background:#225cff;bottom:20%;left:-220px}
.site-header{
  width:min(1180px,92%);
  margin:auto;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:5;
}
.logo{display:flex;gap:12px;text-decoration:none;align-items:center}
.logo-mark{
  width:48px;height:48px;
  position:relative;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#1db4ff,#2458e8);
  clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);
}
.logo-mark:before{
  content:"";
  width:30px;height:30px;background:#071426;
  clip-path:inherit;
}
.logo-core{
  position:absolute;width:10px;height:10px;
  border-radius:50%;background:#1db4ff;
}
.logo-text{display:flex;flex-direction:column}
.logo-text strong{font-size:25px;letter-spacing:.4px}
.logo-text strong span,.footer-logo span{color:#2da5ff}
.logo-text small{font-size:11px;color:#d3e1ef;text-align:right}
.support-link{
  text-decoration:none;color:#cfe2f3;
  display:flex;align-items:center;gap:10px;
  font-size:14px
}
.support-icon{color:#2da5ff;font-size:18px}
.hero{
  width:min(1180px,92%);
  margin:26px auto 70px;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:54px;
  align-items:center;
  min-height:670px;
  position:relative;
  z-index:2;
}
.status-pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border:1px solid rgba(45,165,255,.55);
  border-radius:999px;background:rgba(15,75,125,.28);
  font-size:13px;font-weight:600;letter-spacing:.3px;margin-bottom:24px
}
.status-dot{
  width:9px;height:9px;border-radius:50%;
  background:#36e4ff;box-shadow:0 0 14px #36e4ff;
  animation:pulse 1.8s infinite
}
@keyframes pulse{50%{opacity:.35;transform:scale(.75)}}
.hero h1{
  font-size:clamp(45px,6vw,74px);
  line-height:.98;letter-spacing:-3px;
  max-width:680px;margin-bottom:26px
}
.hero h1 span{
  background:linear-gradient(90deg,#2ca9ff,#3d6cff);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-subtitle{
  font-size:21px;line-height:1.55;font-weight:600;
  max-width:640px;margin-bottom:17px
}
.hero-copy{
  color:var(--muted);line-height:1.75;
  max-width:620px;font-size:16px
}
.hero-actions{display:flex;gap:14px;margin:30px 0}
.btn{
  text-decoration:none;padding:14px 21px;
  border-radius:10px;font-weight:700;font-size:14px;
  transition:.25s ease
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,#1595ff,#285ce8);box-shadow:0 12px 30px rgba(24,117,255,.28)}
.btn-secondary{border:1px solid var(--line);background:rgba(255,255,255,.05)}
.trust-note{
  display:flex;gap:14px;align-items:center;
  padding:17px 19px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);border-radius:15px;
  max-width:550px
}
.trust-icon{
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;background:rgba(29,149,255,.18);
  color:#43b5ff;font-weight:800
}
.trust-note div{display:flex;flex-direction:column;gap:3px}
.trust-note span{color:#afc0d3;font-size:13px}
.hero-visual{position:relative;min-height:560px}
.image-panel{
  position:absolute;inset:0 0 70px 0;
  overflow:hidden;border-radius:30px;
  box-shadow:0 35px 80px rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.1)
}
.image-panel img{width:100%;height:100%;object-fit:cover}
.image-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,18,33,.05),rgba(4,18,33,.6))
}
.progress-card{
  position:absolute;right:-20px;bottom:0;width:min(390px,88%);
  padding:24px;border-radius:20px;
  background:rgba(7,26,47,.93);
  border:1px solid rgba(45,165,255,.45);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(18px)
}
.progress-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.progress-heading small{color:#8fafc9}
.progress-heading h2{font-size:20px;margin-top:4px}
.progress-heading>span{font-size:27px;font-weight:800;color:#42b6ff}
.progress-track{height:8px;border-radius:10px;background:#173551;margin:18px 0 9px;overflow:hidden}
.progress-bar{
  width:0;height:100%;border-radius:10px;
  background:linear-gradient(90deg,#16a2ff,#2466ff);
  box-shadow:0 0 16px rgba(37,125,255,.75);
  transition:width 1.5s ease
}
.progress-meta{display:flex;justify-content:space-between;font-size:11px;color:#8ba8c2}
.progress-list{list-style:none;margin-top:20px;display:grid;gap:11px}
.progress-list li{font-size:13px;color:#dbe8f4}
.progress-list li span{color:#2da5ff;margin-right:8px}
.improvements{
  background:var(--light);color:#0a1b2d;
  padding:90px max(4%,calc((100% - 1180px)/2));
  position:relative;z-index:3
}
.section-heading{text-align:center;max-width:760px;margin:0 auto 48px}
.section-heading>span,.banner-label{color:#168cf0;font-size:13px;font-weight:800;letter-spacing:1.4px}
.section-heading h2{font-size:clamp(30px,4vw,46px);line-height:1.15;margin:13px 0 18px;letter-spacing:-1.5px}
.section-heading p{color:#65778b;line-height:1.7}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature-card{
  background:#fff;padding:32px 25px;border-radius:18px;
  border:1px solid #dbe7f4;
  box-shadow:0 14px 35px rgba(56,92,130,.07);
  text-align:center;transition:.25s ease
}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 20px 42px rgba(56,92,130,.12)}
.feature-icon{
  width:62px;height:62px;border-radius:50%;
  margin:0 auto 20px;display:grid;place-items:center;
  background:linear-gradient(135deg,#15a5ff,#275ae7);
  color:white;font-size:25px;box-shadow:0 11px 25px rgba(30,113,244,.25)
}
.feature-card h3{font-size:18px;margin-bottom:11px}
.feature-card p{font-size:14px;line-height:1.65;color:#66788b}
.coming-banner{
  margin-top:30px;padding:42px 55px;border-radius:24px;
  background:linear-gradient(135deg,#e8f3ff,#f7fbff);
  display:grid;grid-template-columns:320px 1fr;align-items:center;gap:45px;
  border:1px solid #dceafa
}
.coming-banner h2{font-size:34px;line-height:1.2;margin:8px 0 12px}
.coming-banner p{color:#65778b}
.coming-banner strong{color:#168cf0}
.device-art{height:170px;position:relative}
.monitor,.tablet,.phone{
  position:absolute;background:#132d49;border:5px solid #183957;
  box-shadow:0 12px 24px rgba(16,55,90,.16)
}
.monitor{width:180px;height:115px;left:60px;top:10px;border-radius:8px}
.monitor:after{content:"";position:absolute;width:62px;height:7px;background:#183957;left:54px;bottom:-24px;border-radius:6px}
.monitor span,.tablet span,.phone span{display:block;width:15px;height:15px;border-radius:50%;background:#2da5ff;position:absolute;inset:0;margin:auto}
.tablet{width:70px;height:105px;right:20px;bottom:5px;border-radius:9px}
.phone{width:43px;height:78px;left:18px;bottom:5px;border-radius:8px}
.site-footer{
  background:#061426;padding:55px max(4%,calc((100% - 1180px)/2)) 22px;
  position:relative;z-index:3
}
.footer-content{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:65px;padding-bottom:36px}
.footer-logo{font-size:29px;font-weight:800;margin-bottom:15px}
.footer-brand p{color:#aebfd0;max-width:380px;line-height:1.65}
.footer-column{display:flex;flex-direction:column;gap:10px;color:#aebfd0;font-size:14px}
.footer-column h3{color:#fff;margin-bottom:7px}
.footer-column a{text-decoration:none}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:21px;
  display:flex;justify-content:space-between;gap:20px;
  color:#8fa4b9;font-size:13px
}
@media(max-width:980px){
  .hero{grid-template-columns:1fr;gap:42px}
  .hero-visual{min-height:540px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .coming-banner{grid-template-columns:1fr;text-align:center}
  .device-art{width:320px;max-width:100%;margin:auto}
}
@media(max-width:640px){
  .site-header{height:82px}
  .support-link{font-size:0}
  .support-icon{font-size:20px}
  .hero{margin-top:15px;min-height:auto}
  .hero h1{letter-spacing:-2px}
  .hero-subtitle{font-size:18px}
  .hero-actions{flex-direction:column}
  .btn{text-align:center}
  .hero-visual{min-height:500px}
  .image-panel{inset:0 0 120px 0}
  .progress-card{right:0;width:100%}
  .feature-grid{grid-template-columns:1fr}
  .coming-banner{padding:35px 22px}
  .coming-banner h2{font-size:28px}
  .footer-content{grid-template-columns:1fr;gap:30px}
  .footer-bottom{flex-direction:column}
}