/* ================= New homepage — hero ================= */

.nhero {
  position: relative;
  padding-top: 160px;
  padding-bottom: clamp(60px, 8vw, 110px);
  overflow: hidden;
}
.nhero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 78% 8%, rgba(149,185,255,.40), transparent 60%),
    radial-gradient(55% 55% at 8% 100%, rgba(220,232,255,.7), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.nhero-grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 980px) { .nhero-grid { grid-template-columns: 1fr; } }

.nhero h1 {
  font-size: clamp(46px, 6.6vw, 82px);
  line-height: 1.0;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
}
.nhero h1 .grad-text { display: block; }
.nhero p.lede { margin-top: 26px; color: var(--text-2); }
.nhero-ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

.nhero-eyebrow { margin-bottom: 26px; }

/* Trust row */
.nhero-trust {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.nhero-trust .lab {
  font-family: var(--font-display);
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500;
  margin-bottom: 18px;
}
.hero-logos { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.hero-logo { display: grid; place-items: center; height: 34px; }
.hero-logo img {
  max-height: var(--hl-h, 26px); max-width: 118px; width: auto; height: auto;
  object-fit: contain; filter: grayscale(1); opacity: .55;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.hero-logo:hover img { filter: none; opacity: 1; }

/* Hero product panel */
.hero-panel {
  position: relative; width: 100%; max-width: 560px; justify-self: end;
  background: #fff; border: 1px solid var(--border-2); border-radius: var(--r-xl);
  overflow: hidden; box-shadow: 0 34px 80px rgba(10,32,92,.18), 0 4px 12px rgba(10,32,92,.06);
}
@media (max-width: 980px) { .hero-panel { justify-self: center; margin-top: 12px; } }
.hp-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.hp-dots { display: flex; gap: 6px; }
.hp-dots i { width: 9px; height: 9px; border-radius: 999px; background: var(--border-2); }
.hp-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.hp-title .wavemark { width: 20px; height: 15px; }
.hp-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #1F7A4D; }
.hp-live i { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 3px rgba(90,204,155,.24); animation: pulse 2s var(--ease) infinite; }
.hp-body { padding: 20px; display: grid; gap: 16px; }
.hp-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hp-metric { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.hp-metric .mk { font-family: var(--font-display); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.hp-metric .mv { margin-top: 7px; font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--text); font-feature-settings: "tnum"; }
.hp-metric .mv span { font-size: 12px; color: var(--text-3); font-weight: 500; margin-left: 3px; }
.hp-metric .mt { margin-top: 5px; font-size: 12.5px; font-weight: 600; }
.hp-metric .mt.up { color: #1F7A4D; }
.hp-spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 8px; }
.hp-spark i { flex: 1; background: var(--grad); border-radius: 2px; }
.hp-chart { width: 100%; height: 92px; display: block; }
.hp-rows { display: flex; flex-direction: column; gap: 8px; }
.hp-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--r-md); }
.hp-row .ri { width: 30px; height: 30px; border-radius: 9px; background: #DEEAF7; color: var(--brand-vibrant); display: grid; place-items: center; }
.hp-row.g .ri { background: rgba(90,204,155,.16); color: #1F7A4D; }
.hp-row .rt { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.25; }
.hp-row .rt em { display: block; font-style: normal; font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--text-3); margin-top: 2px; }
.hp-row .rn { font-family: var(--font-mono); font-size: 12px; color: var(--brand-vibrant); background: var(--surface-2); border: 1px solid var(--border); padding: 4px 9px; border-radius: 8px; }
.hp-row .rn.g { color: #1F7A4D; background: rgba(90,204,155,.10); border-color: rgba(90,204,155,.28); }

/* Visual stage */
.nhero-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  justify-self: end;
}
@media (max-width: 980px) { .nhero-stage { justify-self: center; margin-top: 20px; } }

.gpsmap {
  position: absolute; inset: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(130% 80% at 50% 0%, #EAF1FA, #fff 70%);
  border: 1px solid var(--border-2);
  box-shadow: 0 30px 80px rgba(10,32,92,.14), 0 4px 12px rgba(10,32,92,.06);
}
.gpsmap-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(38,103,216,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(38,103,216,.07) 1px, transparent 1px);
  background-size: 40px 40px;
}
.gpsmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Floating HUD cards */
.nhud {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 13px 16px;
  box-shadow: 0 12px 34px rgba(10,32,92,.12);
  z-index: 3;
  white-space: nowrap;
}
.nhud .h {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; margin-bottom: 7px;
}
.nhud .h .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(90,204,155,.2); animation: pulse 2s infinite; }
.nhud .v { font-family: var(--font-display); font-size: 23px; font-weight: 600; color: var(--text); letter-spacing: -.02em; font-feature-settings: "tnum"; }
.nhud .v .u { font-size: 12px; color: var(--text-3); font-weight: 500; margin-left: 3px; }
.nhud .sub { font-size: 12px; color: var(--text-3); margin-top: 5px; }
.nhud .sub .up { color: #1F7A4D; font-weight: 700; }
.nhud-tl { top: 5%; left: -7%; animation: nfloat 7s ease-in-out infinite; }
.nhud-br { bottom: 7%; right: -7%; animation: nfloat 7s ease-in-out infinite .9s; }
.nhud-bl { bottom: 24%; left: -4%; animation: nfloat 7s ease-in-out infinite 1.8s; }
@media (max-width: 1100px) {
  .nhud-tl { left: 0; } .nhud-br { right: 0; } .nhud-bl { left: 0; }
}
@keyframes nfloat { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-7px);} }

.nspark { display: flex; align-items: end; gap: 3px; height: 26px; margin-top: 8px; }
.nspark i { display: block; width: 4px; background: var(--grad); border-radius: 2px; }

/* Pins */
.npin { position: absolute; width: 12px; height: 12px; border-radius: 999px; background: var(--brand-bright); z-index: 2; }
.npin::after { content: ""; position: absolute; inset: 3.5px; border-radius: 999px; background: #fff; }
.npin.g { background: var(--accent); }
.npin.d { background: var(--brand-dark); }