:root{
  --bg:#080d16;
  --text:rgba(242,244,247,0.98);
  --muted:rgba(178,190,205,0.92);
  --line:rgba(148, 163, 184, 0.22);
  --card:rgba(2,6,23,0.42);
  --card2:rgba(15, 27, 51, 0.58);
  --accent:#5ec8fa;
  --shadow: 0 18px 60px rgba(2,6,23,0.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 120% 55% at 50% -25%, rgba(56, 189, 248, 0.14), transparent 52%),
    radial-gradient(ellipse 90% 45% at 100% 15%, rgba(129, 140, 248, 0.07), transparent 50%),
    radial-gradient(ellipse 70% 40% at 0% 85%, rgba(15, 23, 42, 0.45), transparent 55%);
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px; margin:0 auto; padding: clamp(18px, 3vw, 28px) clamp(14px, 3vw, 22px) clamp(48px, 7vw, 72px);}
.top{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 14px 16px;
  border:1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  backdrop-filter: blur(12px);
}
.brand{display:flex; align-items:flex-start; gap:12px; min-width:0}
.brandMark{width:4px; align-self:stretch; min-height:2.75rem; margin-top:2px; border-radius:2px; background: linear-gradient(180deg, var(--accent), rgba(56, 189, 248, 0.45)); flex-shrink:0;}
.brandText{display:flex; flex-direction:column; gap:.45rem; min-width:0}
.name{font-weight:800; letter-spacing:-0.03em; font-size: clamp(1.25rem, 2.2vw, 1.45rem); line-height:1.15; color: rgba(248,250,252,0.98);}
.tag{color:var(--muted); font-size:12.5px; line-height:1.45; max-width: 40rem;}
.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px; border-radius: 999px;
  border:1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.35);
  font-size: 13px;
  white-space: nowrap;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid rgba(148,163,184,0.25);
  background: rgba(2,6,23,0.35);
  box-shadow: 0 10px 30px rgba(2,6,23,0.28);
  font-weight: 650;
}
.btn.primary{background: linear-gradient(180deg, rgba(56,189,248,0.25), rgba(2,6,23,0.35)); border-color: rgba(56,189,248,0.35);}
.hero{
  margin-top: clamp(12px, 2vw, 18px);
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(14px, 2.5vw, 22px);
  align-items:start;
}
@media (max-width: 980px){
  .top{flex-direction:column; align-items:flex-start}
  .nav{justify-content:flex-start}
  .hero{grid-template-columns:1fr}
}
.card{
  border:1px solid var(--line);
  border-radius: 18px;
  padding: clamp(18px, 2.5vw, 24px) clamp(18px, 2.5vw, 22px);
  background: rgba(2, 6, 23, 0.22);
}
.panel{
  border:1px solid var(--line);
  border-radius: 18px;
  padding: clamp(16px, 2vw, 18px);
  background: var(--card2);
  box-shadow: var(--shadow);
}
.eyebrow{margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.14em; color: rgba(226,232,240,0.72);}
h1{margin:0 0 12px; font-size: clamp(1.85rem, 4.2vw, 2.55rem); line-height: 1.08; letter-spacing: -0.035em; max-width: 36rem;}
.lead{margin:0 0 16px; color: rgba(203,213,225,0.92); font-size: clamp(15px, 1.35vw, 17px); line-height:1.6; max-width: 62ch;}
.grid2{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
@media (max-width: 820px){ .grid2{grid-template-columns:1fr;} }
.h2{margin: 0 0 10px; font-size: clamp(1.05rem, 2.0vw, 1.3rem); line-height:1.2; letter-spacing:-0.02em;}
.h3{margin: 0 0 8px; font-size: 15px; font-weight: 800; letter-spacing:-0.01em;}
.p{margin:0; color: rgba(226,232,240,0.9);}
.list{margin: 10px 0 0; padding-left: 18px; color: rgba(226,232,240,0.92);}
.list li{margin: 7px 0;}
.muted{color: var(--muted);}
.kpiRow{margin-top: 12px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px;}
@media (max-width: 820px){ .kpiRow{grid-template-columns:1fr;} }
.kpi{padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(148,163,184,0.18); background: rgba(2,6,23,0.30);}
.kpi b{display:block; font-size: 16px; color: rgba(248,250,252,0.98);}
.kpi span{display:block; margin-top: 4px; font-size: 13px; color: rgba(203,213,225,0.85);}
.ctaRow{display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px;}
.hr{height:1px; background: rgba(148,163,184,0.16); margin: 16px 0;}
.foot{
  margin-top: clamp(20px, 4vw, 30px);
  border-top: 1px solid var(--line);
  padding-top: 16px;
  color: rgba(178,190,205,0.9);
  font-size: 13px;
  display:flex; justify-content:space-between; gap: 12px 20px; flex-wrap:wrap;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(56,189,248,0.10);
  border: 1px solid rgba(56,189,248,0.22);
  color: rgba(226,232,240,0.92);
  font-size: 12px;
}