:root{
  --bg:#060b14;
  --bg2:#0d1425;
  --bg3:#101b31;
  --line:rgba(255,255,255,.10);
  --text:#f3f7fd;
  --muted:#b9c5db;
  --muted2:#90a2c0;
  --blue:#6ca6ea;
  --orange:#ef8f30;
  --gold:#ddb06f;
  --shadow:0 30px 80px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(60rem 40rem at 18% 12%, rgba(108,166,234,.14), transparent 60%),
    radial-gradient(60rem 40rem at 82% 22%, rgba(239,143,48,.10), transparent 60%),
    linear-gradient(180deg, var(--bg3), var(--bg2) 40%, #060b14);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.grid,.orb-a,.orb-b{position:fixed; inset:0; pointer-events:none}
.grid{
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at center, black, transparent 82%);
  opacity:.16;
  animation:gridShift 22s linear infinite;
}
.orb-a{
  background:radial-gradient(24rem 12rem at 30% 16%, rgba(108,166,234,.18), transparent 70%);
  filter:blur(36px);
  animation:driftA 10s ease-in-out infinite;
}
.orb-b{
  background:radial-gradient(26rem 14rem at 72% 68%, rgba(221,176,111,.14), transparent 70%);
  filter:blur(40px);
  animation:driftB 12s ease-in-out infinite;
}
.wrap{width:min(1240px, calc(100% - 40px)); margin:0 auto; position:relative; z-index:2}
header{
  display:flex; justify-content:space-between; align-items:center; gap:22px;
  padding:26px 0 8px;
}
.brand img{height:56px; display:block; filter:drop-shadow(0 12px 24px rgba(0,0,0,.24))}
nav{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
nav a{
  color:#e8effb; text-decoration:none; font-weight:600; font-size:15px;
  padding:11px 14px; border-radius:999px; border:1px solid transparent;
}
nav a:hover{background:rgba(255,255,255,.05); border-color:var(--line)}
.top-cta{
  background:linear-gradient(135deg,var(--orange),#d8701c);
  color:#fff; text-decoration:none; font-weight:700; padding:13px 18px;
  border-radius:14px; box-shadow:0 18px 36px rgba(0,0,0,.28);
}
.hero{
  min-height:calc(100vh - 88px);
  display:grid; grid-template-columns:1.02fr .98fr; gap:44px; align-items:center;
  padding:34px 0 70px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.05);
  border:1px solid var(--line); color:#dce8fb; font-size:14px; backdrop-filter:blur(10px)
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background:linear-gradient(180deg,#87db44,#2c9c53);
  box-shadow:0 0 0 5px rgba(76,195,138,.12),0 0 18px rgba(76,195,138,.28);
  animation:pulse 2.2s ease-in-out infinite;
}
.hero h1, .section-title{
  font-size:clamp(42px, 6vw, 82px); line-height:.96; letter-spacing:-.055em; font-weight:800;
}
.hero h1{margin:0 0 18px}
.section-title{margin:0 0 14px}
.lead,.section-lead{
  font-size:clamp(18px,2vw,24px); line-height:1.48; color:var(--muted);
}
.lead{margin:0 0 26px; max-width:740px}
.section-lead{max-width:820px; margin:0 0 24px}
.checks{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 24px}
.check{
  padding:12px 16px; border-radius:999px; background:rgba(255,255,255,.05);
  border:1px solid var(--line); color:#edf4ff; font-size:15px;
  cursor:pointer; transition:.2s ease;
}
.check:hover,.check.active{background:rgba(255,255,255,.10); transform:translateY(-2px)}
.actions{display:flex; gap:14px; flex-wrap:wrap; margin:4px 0 28px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:190px; padding:15px 22px; border-radius:14px; text-decoration:none; font-weight:700;
  transition:.22s ease; box-shadow:0 18px 36px rgba(0,0,0,.28)
}
.btn-primary{background:linear-gradient(135deg,var(--orange),#d8711d); color:#fff}
.btn-primary:hover,.btn-secondary:hover,.top-cta:hover{transform:translateY(-2px); filter:brightness(1.04)}
.btn-secondary{background:rgba(255,255,255,.045); border:1px solid var(--line); color:#edf4ff}
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:760px}
.stat,.feature-card,.panel,.cta,.feature-detail{
  padding:18px; border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(12px)
}
.stat .n{font-size:30px; font-weight:800; letter-spacing:-.04em}
.stat .t{color:var(--muted2); font-size:14px; margin-top:6px}
.visual{position:relative; min-height:660px}
.halo{
  position:absolute; left:50%; top:50%; width:620px; height:620px; transform:translate(-50%,-54%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 16%, rgba(108,166,234,.11) 34%, rgba(221,176,111,.10) 54%, transparent 72%);
  filter:blur(8px); animation:spin 24s linear infinite; opacity:.82;
}
.device{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(760px,100%); padding:12px; border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow); backdrop-filter:blur(18px);
  animation:floaty 8s ease-in-out infinite;
}
.device::before{
  content:""; position:absolute; inset:-1px; border-radius:30px; padding:1px;
  background:linear-gradient(135deg, rgba(154,198,255,.44), rgba(255,255,255,.15), rgba(221,176,111,.34));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.device img,.panel img{width:100%; display:block; border-radius:18px}
.float-card{
  position:absolute; padding:16px 18px; border-radius:18px; background:rgba(8,14,26,.82);
  border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow); backdrop-filter:blur(12px);
  animation:floaty2 7s ease-in-out infinite;
}
.c1{left:-6px; top:82px}
.c2{right:-6px; top:98px; animation-delay:-2s}
.c3{left:24px; bottom:34px; animation-delay:-4s}
.label{color:var(--muted2); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px}
.big{color:#f4f7ff; font-size:28px; font-weight:800; letter-spacing:-.04em}
.small{color:var(--muted); font-size:14px; line-height:1.4; max-width:220px}
.locations{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.loc{font-size:13px; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08)}
.bars{display:flex; align-items:flex-end; gap:6px; margin-top:12px; height:50px}
.bars span{width:12px; border-radius:8px 8px 2px 2px; background:linear-gradient(180deg,var(--gold),var(--blue)); animation:bars 3s ease-in-out infinite}
.bars span:nth-child(2){animation-delay:-.4s}
.bars span:nth-child(3){animation-delay:-.8s}
.bars span:nth-child(4){animation-delay:-1.2s}
.bars span:nth-child(5){animation-delay:-1.6s}
section{padding:38px 0}
.feature-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.feature-card{min-height:220px; padding:22px}
.feature-card h3{margin:0 0 10px; font-size:22px}
.feature-card p,.panel-copy p,.cta p,.feature-detail p{margin:0; color:var(--muted); line-height:1.6}
.split{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center}
.panel{overflow:hidden; padding:0}
.panel-copy{padding:10px 0}
.panel-copy h3{font-size:28px; margin:0 0 12px}
.feature-detail{
  margin-top:18px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
  align-items:start;
}
.feature-detail h3{font-size:30px; margin:0 0 10px}
.feature-detail ul{margin:14px 0 0; padding-left:18px; color:var(--muted)}
.feature-detail li{margin-bottom:10px; line-height:1.5}
.feature-detail .mini-card{
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.feature-pane{display:none}
.feature-pane.active{display:grid}
.cta{text-align:center; padding:54px 28px}
.cta p{max-width:760px; margin:14px auto 28px}
footer{padding:28px 0 40px; color:var(--muted2); font-size:14px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
@keyframes pulse{50%{transform:scale(1.18);opacity:.9}}
@keyframes gridShift{from{transform:translateY(0)}to{transform:translateY(56px)}}
@keyframes driftA{50%{transform:translate(14px,-10px) scale(1.04)}}
@keyframes driftB{50%{transform:translate(-18px,12px) scale(1.05)}}
@keyframes spin{to{transform:translate(-50%,-54%) rotate(360deg)}}
@keyframes floaty{50%{transform:translate(-50%,-52%) translateY(-10px)}}
@keyframes floaty2{50%{transform:translateY(-10px)}}
@keyframes bars{0%,100%{height:18px;opacity:.65}50%{height:48px;opacity:1}}
@media (max-width:1080px){
  .hero,.split,.feature-detail{grid-template-columns:1fr}
  .visual{min-height:690px}
  .c1{left:0; top:24px}
  .c2{right:0; top:86px}
  .c3{left:0; bottom:18px}
  .feature-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  header{padding-top:18px}
  .brand img{height:42px}
  nav{display:none}
  .hero{padding-top:8px}
  .stats,.feature-grid{grid-template-columns:1fr}
  .visual{min-height:520px; display:flex; flex-direction:column}
  .halo{width:360px;height:360px}
  .device{position:relative; left:auto; top:auto; transform:none; padding:10px; border-radius:20px}
  .device::before{border-radius:20px}
  .float-card{position:relative; left:auto; right:auto; top:auto; bottom:auto; margin:12px 0 0; animation:none}
  .actions .btn,.top-cta{width:100%}
}