:root{
  --bg:#070A11;
  --panel: rgba(255,255,255,.04);
  --panel2: rgba(255,255,255,.03);
  --line: rgba(255,255,255,.10);
  --text:#F1F5FF;
  --muted: rgba(241,245,255,.72);

  --a:#6B7CFF;   /* accent 1 */
  --b:#2AF2C6;   /* accent 2 */
  --w:#FFFFFF;

  --r:22px;
  --shadow: 0 28px 80px rgba(0,0,0,.60);
  --shadow2: 0 14px 36px rgba(0,0,0,.35);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(107,124,255,.22), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(42,242,198,.16), transparent 60%),
    linear-gradient(180deg, var(--bg), #060711 70%, #050510);
  line-height:1.6;
}

a{ color:inherit; text-decoration:none }
.container{ width:min(1180px, 92vw); margin-inline:auto }

.skip{
  position:absolute; left:-9999px; top:10px;
  background:#fff; color:#111;
  padding:10px 14px; border-radius:12px;
  font-weight:900; z-index:9999;
}
.skip:focus{ left:10px }

/* HEADER (NEW) */
.hdr{
  position:sticky; top:0; z-index:60;
  background: rgba(7,10,17,.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hdr__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding: 14px 0;
}
.logo{ display:flex; align-items:center; gap:12px; font-weight:950; letter-spacing:.2px; }
.logo__mark{
  width:42px; height:42px; border-radius:16px;
  background:
    radial-gradient(16px 16px at 30% 35%, rgba(42,242,198,.95), transparent 60%),
    radial-gradient(18px 18px at 70% 60%, rgba(107,124,255,.95), transparent 64%),
    linear-gradient(135deg, rgba(42,242,198,.18), rgba(107,124,255,.18));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow2);
}
.logo__txt b{ color: var(--b); }

.nav{ display:flex; gap:18px; align-items:center; }
.nav a{
  color: rgba(241,245,255,.78);
  font-weight:900;
  padding: 10px 10px;
  border-radius: 999px;
}
.nav a:hover{ background: rgba(255,255,255,.06); }

.hdr__cta{ display:flex; gap:10px; align-items:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  font-weight:950;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{
  background: linear-gradient(135deg, rgba(107,124,255,.26), rgba(42,242,198,.16));
  border-color: rgba(42,242,198,.22);
}
.btn--ghost{ background: rgba(255,255,255,.03); }
.btn--soft{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}

.burger{
  display:none;
  width:46px; height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.burger span{
  display:block;
  width:18px; height:2px;
  background: rgba(241,245,255,.92);
  margin: 7px auto;
  border-radius:2px;
}
.mnav{ display:none; padding: 6px 0 16px; }
.mnav a{
  display:block;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  margin-top:10px;
  font-weight:900;
}
.mnav.is-open{ display:block; }

@media (max-width: 980px){
  .nav{ display:none; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }
}

/* HERO (NEW) */
.hero{ position:relative; padding: 30px 0 10px; overflow:hidden; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 1100px){
  .hero__grid{ grid-template-columns: 1fr; }
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(241,245,255,.78);
  font-weight:950;
  width: fit-content;
}
.pill__dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--b);
  box-shadow: 0 0 0 7px rgba(42,242,198,.10);
}

.h1{
  margin: 14px 0 10px;
  font-size: clamp(34px, 3.4vw, 56px);
  line-height:1.06;
  letter-spacing:-.7px;
}
.h1 span{
  color: transparent;
  background: linear-gradient(90deg, var(--b), #D9FFF5);
  -webkit-background-clip:text; background-clip:text;
}
.lead{
  margin: 0 0 18px;
  color: rgba(241,245,255,.72);
  max-width: 78ch;
}
.hero__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.proof{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 1100px){ .proof{ grid-template-columns: 1fr; } }
.proof__item{
  padding: 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.proof .k{ color: rgba(241,245,255,.62); font-weight:950; font-size: 13px; }
.proof .v{ margin-top: 6px; font-weight:950; }

/* HERO CARD */
.hero__card{
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(107,124,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.cardTop{
  padding: 14px 14px 10px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cardTop__t{ font-weight:950; letter-spacing:.2px; }
.cardTop__d{ margin-top:4px; color: rgba(241,245,255,.62); font-size: 13px; }

.status{
  display:inline-flex; gap:8px; align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-weight:950;
  color: rgba(241,245,255,.80);
}
.status i{
  width:9px; height:9px; border-radius:999px;
  background: var(--b);
  box-shadow: 0 0 0 6px rgba(42,242,198,.10);
}

/* RADAR (NEW, CLEAN) */
.radar{
  position:relative;
  height: 380px;
  background:
    radial-gradient(600px 360px at 50% 50%, rgba(42,242,198,.12), rgba(107,124,255,.06) 55%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  overflow:hidden;
}
.radar__grid{
  position:absolute; inset:0;
  background:
    linear-gradient(transparent 24px, rgba(255,255,255,.05) 25px) 0 0/100% 25px,
    linear-gradient(90deg, transparent 24px, rgba(255,255,255,.05) 25px) 0 0/25px 100%;
  opacity: .30;
}
.radar__rings{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 78px, rgba(255,255,255,.11) 79px 80px, transparent 81px),
    radial-gradient(circle at 50% 50%, transparent 0 140px, rgba(255,255,255,.11) 141px 142px, transparent 143px),
    radial-gradient(circle at 50% 50%, transparent 0 200px, rgba(255,255,255,.11) 201px 202px, transparent 203px);
  opacity: .9;
}
.radar__sweep{
  position:absolute; inset:-55%;
  background: conic-gradient(from 120deg, rgba(42,242,198,0), rgba(42,242,198,.20), rgba(107,124,255,.08), rgba(42,242,198,0) 46%);
  animation: sweep 5.8s linear infinite;
  opacity:.75;
}
@keyframes sweep{ to{ transform: rotate(360deg); } }

.radar__stage{ position:absolute; inset:0; }

/* Threat dots: label ALWAYS visible */
.threat-dot{
  position:absolute;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--b);
  box-shadow: 0 0 0 6px rgba(42,242,198,.10), 0 0 18px rgba(42,242,198,.22);
  opacity: 1;
  transition: opacity .5s ease;
}
.threat-dot::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 999px;
  border:1px solid rgba(42,242,198,.20);
  opacity:.55;
}
.threat-dot span{
  position:absolute;
  left: 12px;
  top: -12px;
  max-width: 170px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;

  font-size: 12px;
  font-weight: 950;
  color: rgba(241,245,255,.92);
  background: rgba(8,10,16,.78);
  border:1px solid rgba(255,255,255,.10);
  padding: 7px 10px;
  border-radius: 12px;
  box-shadow: var(--shadow2);
}

.cardFoot{
  padding: 12px 14px 14px;
  display:flex; gap:8px; flex-wrap:wrap;
  border-top: 1px solid rgba(255,255,255,.06);
}
.tag{
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(241,245,255,.75);
  font-weight:900;
  font-size: 12px;
}

/* Sections */
.section{ padding: 30px 0; }
.section--alt{
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 12px; flex-wrap:wrap;
  margin: 10px 0 14px;
}
.head h2{ margin:0; font-size: clamp(22px, 2.3vw, 34px); letter-spacing: -.2px; }
.head p{ margin:0; color: var(--muted); max-width: 90ch; font-weight:850; }

/* Bento */
.bento{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.tile{
  grid-column: span 4;
  padding: 16px;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow2);
}
.tile h3{ margin:0 0 8px; letter-spacing:-.1px; }
.tile p{ margin:0 0 10px; color: rgba(241,245,255,.72); }

.tile--wide{ grid-column: span 8; }
.tile--tall{ grid-column: span 4; grid-row: span 2; }

.mini{ margin: 8px 0 0; padding-left: 18px; color: rgba(241,245,255,.76); font-weight:850; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px; }
.chips span{
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(241,245,255,.72);
  font-weight:900;
  font-size: 12px;
}
.note{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(241,245,255,.75);
  font-weight:900;
  font-size: 13px;
}

@media (max-width: 1100px){
  .tile, .tile--wide, .tile--tall{ grid-column: span 12; grid-row:auto; }
}

/* Timeline */
.timeline{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 980px){ .timeline{ grid-template-columns: 1fr; } }

.step{
  display:flex; gap: 12px;
  padding: 14px;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.step__n{
  width:56px; height:56px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(107,124,255,.18), rgba(42,242,198,.10));
  border:1px solid rgba(255,255,255,.10);
  font-weight:950;
}
.step__t{ font-weight:950; }
.step__d{ margin-top: 6px; color: rgba(241,245,255,.72); }

.cta{
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg, rgba(107,124,255,.14), rgba(42,242,198,.10));
  display:flex; justify-content:space-between; align-items:center;
  gap: 12px; flex-wrap:wrap;
}
.cta__t{ font-weight:950; }
.cta__d{ margin-top:4px; color: rgba(241,245,255,.74); font-weight:850; }

/* Why */
.why{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 980px){ .why{ grid-template-columns: 1fr; } }
.why__card{
  padding: 16px;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow2);
}
.why__t{ font-weight:950; margin-bottom: 8px; }
.why__card p{ margin:0; color: rgba(241,245,255,.72); }

/* FAQ */
.faq{ display:grid; gap: 10px; }
.qa{
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 12px 14px;
}
.qa summary{
  cursor:pointer;
  list-style:none;
  font-weight:950;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa p{ margin:10px 0 0; color: rgba(241,245,255,.72); }

/* Footer */
.footer{
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 16px;
}
.footer__in{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap: 14px; flex-wrap:wrap;
  color: rgba(241,245,255,.74);
  font-weight:850;
}
.footer__brand{ font-weight:950; }
.footer__sub{ margin-top: 6px; color: rgba(241,245,255,.62); font-weight:850; }
.footer__links{ display:flex; gap: 12px; flex-wrap:wrap; }
.footer__links a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.footer__mail{ color: rgba(241,245,255,.86); }

/* hero glow */
.heroGlow{
  position:absolute; inset:auto 0 -220px 0;
  height: 320px;
  background: radial-gradient(500px 200px at 50% 0%, rgba(42,242,198,.16), transparent 70%);
  pointer-events:none;
  filter: blur(2px);
}

/* ===== Inner pages (About / Contact) ===== */
.is-active{ background: rgba(255,255,255,.06); }

.pageHero{ padding: 28px 0 10px; }
.pageHero__in{
  padding: 18px 0 6px;
}
.crumbs{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  color: rgba(241,245,255,.62);
  font-weight:900;
  font-size: 13px;
}
.crumbs a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.pageTitle{
  margin: 10px 0 8px;
  font-size: clamp(28px, 3vw, 44px);
  line-height:1.1;
  letter-spacing: -.5px;
}
.pageLead{
  margin: 0;
  max-width: 85ch;
  color: rgba(241,245,255,.72);
  font-weight: 850;
}

/* panels */
.panel{
  padding: 16px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow2);
}
.panel h2{ margin:0 0 10px; font-size: 18px; letter-spacing: -.1px; }
.panel p{ margin:0; color: rgba(241,245,255,.72); }

.aboutGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.aboutGrid .panel{ grid-column: span 6; }
.aboutGrid .panel--wide{ grid-column: span 12; }
@media (max-width: 980px){
  .aboutGrid .panel{ grid-column: span 12; }
}

.list2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 980px){
  .list2{ grid-template-columns: 1fr; }
}
.li{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.li__t{ font-weight:950; margin-bottom: 6px; }
.li__d{ color: rgba(241,245,255,.72); font-weight:850; }

/* contact */
.contactGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.contactGrid .panel{ grid-column: span 6; }
.contactGrid .panel--wide{ grid-column: span 12; }
@media (max-width: 980px){
  .contactGrid .panel{ grid-column: span 12; }
}

.contactCards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 980px){
  .contactCards{ grid-template-columns: 1fr; }
}

.contactCard{
  display:flex;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: transform .14s ease, background .14s ease;
}
.contactCard:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.05);
}
.contactCard__ic{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight: 950;
}
.contactCard__t{ font-weight:950; }
.contactCard__v{ margin-top: 4px; font-weight:950; color: rgba(241,245,255,.88); }
.contactCard__d{ margin-top: 6px; color: rgba(241,245,255,.70); font-weight:850; }

.cta--page{ margin-top: 16px; }