/* Northern Edge Software — enhance.css
   Layered on top of styles.css. Owns all new homepage sections,
   custom cursor, scroll progress, magnetic buttons, reveals. */

/* ============== Tokens (extend) ============== */
:root {
  --gold: var(--amber, #eab05a);
  --gold-soft: rgba(234, 176, 90, 0.16);
  --cyan-soft: rgba(103, 217, 255, 0.14);
  --bg-card: rgba(8, 22, 38, 0.72);
  --bg-card-hi: rgba(12, 32, 54, 0.86);
  --grid-line: rgba(106, 149, 195, 0.10);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ============== Scroll progress ============== */
.nes-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan-strong), var(--gold));
  box-shadow: 0 0 16px rgba(103, 217, 255, 0.55);
  z-index: 200;
  transition: width 0.08s linear;
}

/* ============== Custom cursor ============== */
.nes-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 22px; height: 22px;
  border: 1px solid rgba(103, 217, 255, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  mix-blend-mode: difference;
  transition: width .25s var(--ease-out), height .25s var(--ease-out),
              border-color .2s, opacity .2s, background .2s;
}
.nes-cursor.is-visible { opacity: 1; }
.nes-cursor.is-hover {
  width: 44px; height: 44px;
  border-color: var(--gold);
  background: rgba(234, 176, 90, 0.08);
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .nes-cursor { display: none; }
}

/* ============== Reveal ============== */
.reveal-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal-up.is-visible { opacity: 1; transform: none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal-stagger.is-visible > *,
.reveal-stagger > *.is-visible { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ============== Magnetic / shared button polish ============== */
.btn-magnetic { transition: transform .25s var(--ease-out), background .25s, color .25s, border-color .25s; }
.btn-magnetic:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ============== Hero polish (additive) ============== */
.frame-hero {
  position: relative;
  isolation: isolate;
}
.frame-hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 60%;
  background:
    radial-gradient(60% 80% at 80% 30%, rgba(103, 217, 255, 0.18), transparent 65%),
    radial-gradient(40% 70% at 18% 70%, rgba(234, 176, 90, 0.12), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

/* trust row */
.trust-row {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.trust-row p {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}
.trust-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center;
}
.trust-logos span {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  opacity: 0.78;
  transition: opacity .25s, color .25s;
  position: relative;
}
.trust-logos span::after {
  content: "";
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line-strong);
}
.trust-logos span:last-child::after { display: none; }
.trust-logos span:hover { opacity: 1; color: var(--cyan); }

/* hero stats float */
.hero-stat { transition: transform .35s var(--ease-out); }

/* ============== Marquee ============== */
.frame-marquee {
  width: 100%;
  margin-block: 2.5rem;
  padding: 1.4rem 0;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(0,0,0,0.85), rgba(0,0,0,0.4) 12%, rgba(0,0,0,0.4) 88%, rgba(0,0,0,0.85)),
    linear-gradient(180deg, rgba(8, 22, 38, 0.5), rgba(2, 8, 16, 0.5));
  overflow: hidden;
  position: relative;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  white-space: nowrap;
  animation: nes-marquee 60s linear infinite;
  width: max-content;
}
@keyframes nes-marquee {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  font-family: "Rajdhani", sans-serif;
}
.marquee-item strong {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text);
  background: linear-gradient(180deg, #fff, #6f95b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.marquee-item .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px var(--gold);
  flex-shrink: 0;
}

/* ============== Section heads ============== */
.section-head {
  width: var(--shell);
  margin-inline: auto;
  text-align: center;
  margin-bottom: 3rem;
  max-width: 920px;
}
.section-head .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
  font-weight: 600;
}
.section-head h2 {
  font-family: "Rajdhani", sans-serif;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}
.section-head h2 .accent { color: var(--gold); }
.section-head > p {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 640px;
  margin-inline: auto;
  line-height: 1.6;
}

/* ============== Impact metrics ============== */
.frame-impact {
  width: var(--shell);
  margin: 6rem auto 0;
  padding: 4rem 2.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(8, 22, 38, 0.85), rgba(4, 14, 26, 0.7));
  position: relative;
  overflow: hidden;
}
.frame-impact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
  pointer-events: none;
}
.impact-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 3rem;
  position: relative;
}
.impact-head .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.8rem;
  font-weight: 600;
}
.impact-head h2 {
  font-family: "Rajdhani", sans-serif;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.impact-head > p {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  position: relative;
}
.impact-card {
  padding: 2rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-card);
  transition: transform .35s var(--ease-out), border-color .25s, background .25s;
}
.impact-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  background: var(--bg-card-hi);
}
.impact-card .num {
  display: block;
  font-family: "Rajdhani", sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.02em;
}
.impact-card .lbl {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}
.impact-card .desc {
  margin-top: 0.85rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ============== Capabilities ============== */
.frame-capabilities {
  width: var(--shell);
  margin: 6rem auto 0;
  padding: 0 1rem;
}
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.cap-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  padding: 2rem 1.75rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color .3s, transform .35s var(--ease-out);
  isolation: isolate;
}
.cap-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(103, 217, 255, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity .35s;
  z-index: 0;
  pointer-events: none;
}
.cap-card[data-tone="gold"]::before {
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(234, 176, 90, 0.18), transparent 70%);
}
.cap-card:hover { transform: translateY(-4px); border-color: var(--cyan); }
.cap-card[data-tone="gold"]:hover { border-color: var(--gold); }
.cap-card:hover::before { opacity: 1; }
.cap-card > * { position: relative; z-index: 1; }

.cap-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(103, 217, 255, 0.06);
  color: var(--cyan);
  margin-bottom: 1.25rem;
}
.cap-card[data-tone="gold"] .cap-icon {
  background: rgba(234, 176, 90, 0.08);
  color: var(--gold);
}
.cap-icon svg { width: 24px; height: 24px; }

.cap-card h3 {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  margin-bottom: 0.7rem;
}
.cap-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}
.cap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cap-tag {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-muted);
  background: rgba(7, 23, 40, 0.6);
}
.cap-card[data-tone="gold"] .cap-tag { color: var(--gold); border-color: rgba(234, 176, 90, 0.35); }

/* ============== Demo console ============== */
.frame-demo {
  width: var(--shell);
  margin: 6rem auto 0;
  padding: 0 1rem;
}
.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: center;
}
.demo-copy .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
  font-weight: 600;
}
.demo-copy h2 {
  font-family: "Rajdhani", sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.05;
  font-weight: 700;
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}
.demo-copy > p {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 1.75rem;
}
.demo-features { display: grid; gap: 0.85rem; }
.demo-feature {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.55;
}
.demo-feature .check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid rgba(234, 176, 90, 0.4);
  font-size: 0.78rem;
  font-weight: 700;
}

.console-mock {
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #02090f, #050f1c);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.console-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 22, 38, 0.65);
}
.console-dots { display: flex; gap: 0.4rem; }
.console-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #1c3a55;
}
.console-dots span:nth-child(1) { background: #ff5f57; }
.console-dots span:nth-child(2) { background: #febc2e; }
.console-dots span:nth-child(3) { background: #28c840; }
.console-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.console-pulse {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: var(--cyan);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(103, 217, 255, 0.4);
  background: rgba(103, 217, 255, 0.08);
  position: relative;
}
.console-pulse::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  margin-right: 0.4rem;
  vertical-align: middle;
  animation: nes-pulse 1.4s ease-in-out infinite;
}
@keyframes nes-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.65); }
}
.console-body {
  padding: 1.2rem 1.3rem 1.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.85;
  display: grid;
  gap: 0.1rem;
  min-height: 280px;
}
.console-row {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  animation: nes-row-in .4s var(--ease-out);
}
@keyframes nes-row-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}
.console-row .pfx { color: var(--gold); }
.console-row .ok { color: #6dd49b; }
.console-row .key { color: var(--cyan); }
.console-row .dim { color: var(--text-muted); opacity: 0.65; }
.console-row .val { color: var(--text); }
.console-cursor {
  display: inline-block;
  width: 8px; height: 14px;
  background: var(--cyan);
  vertical-align: middle;
  animation: nes-blink 1s steps(2) infinite;
}
@keyframes nes-blink { 50% { opacity: 0; } }

.console-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  height: 56px;
}
.console-chart .bar {
  flex: 1;
  background: linear-gradient(180deg, var(--cyan), rgba(103, 217, 255, 0.2));
  border-radius: 2px 2px 0 0;
  min-height: 4px;
  animation: nes-bar 2.4s ease-in-out infinite;
}
.console-chart .bar:nth-child(2n) { animation-delay: 0.2s; background: linear-gradient(180deg, var(--gold), rgba(234, 176, 90, 0.2)); }
.console-chart .bar:nth-child(3n) { animation-delay: 0.4s; }
.console-chart .bar:nth-child(5n) { animation-delay: 0.6s; }
.console-chart .bar:nth-child(7n) { animation-delay: 0.8s; }
@keyframes nes-bar {
  0%, 100% { height: 30%; }
  50% { height: 100%; }
}

/* ============== Process ============== */
.frame-process {
  width: var(--shell);
  margin: 6rem auto 0;
  padding: 0 1rem;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  position: relative;
}
.process-grid::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 4%;
  right: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  z-index: 0;
}
.process-step {
  position: relative;
  padding: 2rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-card);
  transition: transform .35s var(--ease-out), border-color .25s;
}
.process-step:hover { transform: translateY(-4px); border-color: var(--gold); }
.process-step .step-num {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(234, 176, 90, 0.2), rgba(234, 176, 90, 0.05));
  border: 1px solid rgba(234, 176, 90, 0.4);
  font-family: "Rajdhani", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 1;
}
.process-step h3 {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
  letter-spacing: 0.005em;
}
.process-step p {
  font-size: 0.93rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.process-step .meta {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}

/* ============== Testimonials ============== */
.frame-testimonials {
  width: var(--shell);
  margin: 6rem auto 0;
  padding: 0 1rem;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.25rem;
}
.testimonial {
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease-out), border-color .25s;
}
.testimonial:hover { transform: translateY(-4px); border-color: var(--cyan); }
.testimonial.is-feature {
  background: linear-gradient(135deg, rgba(234, 176, 90, 0.08), rgba(8, 22, 38, 0.7));
  border-color: rgba(234, 176, 90, 0.35);
}
.testimonial .stars {
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  margin-bottom: 1.2rem;
}
.testimonial blockquote {
  margin: 0 0 1.6rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text);
  font-weight: 500;
}
.testimonial.is-feature blockquote {
  font-size: 1.18rem;
  line-height: 1.55;
}
.testimonial cite {
  margin-top: auto;
  font-style: normal;
  display: grid;
  gap: 0.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.testimonial cite strong {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.testimonial cite span {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============== Footer ============== */
.site-footer {
  width: var(--shell);
  margin: 7rem auto 3rem;
  padding: 3rem 2.25rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(8, 22, 38, 0.7), rgba(2, 8, 16, 0.85));
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem 2rem;
}
.foot-brand .foot-mark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.foot-brand .foot-mark img { width: 36px; height: 36px; }
.foot-brand .foot-mark strong {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
}
.foot-brand p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 380px;
}
.foot-col h4 {
  font-family: "Rajdhani", sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
  font-weight: 700;
}
.foot-col ul { display: grid; gap: 0.55rem; }
.foot-col a {
  font-size: 0.92rem;
  color: var(--text-muted);
  transition: color .2s;
}
.foot-col a:hover { color: var(--cyan); }
.foot-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ============== Toast ============== */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(8, 22, 38, 0.95);
  backdrop-filter: blur(12px);
  font-size: 0.92rem;
  color: var(--text);
  z-index: 300;
  transition: transform .35s var(--ease-out), opacity .35s;
  opacity: 0;
  pointer-events: none;
}
.toast.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ============== Hero globe: WEBP fallback (canvas is disabled) ============== */
.hero-animated-globe { display: none; }
#mission-canvas[data-disabled="true"] { display: none; }

/* ============== Cinematic Drone Scene v2 — Photoreal Dogfight ============== */
.drone-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  /* Dawn sky: deep violet → warm gold horizon */
  background:
    linear-gradient(180deg,
      #1a0e2e 0%,
      #2a1840 12%,
      #4a2854 28%,
      #8a4a4a 48%,
      #c87850 62%,
      #d89464 70%,
      #4a3a3a 82%,
      #1a1612 92%,
      #0a0908 100%);
}

/* Atmospheric scatter — sun bloom + light volumetric */
.drone-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 72% 38%, rgba(255, 210, 140, 0.45), transparent 55%),
    radial-gradient(700px 400px at 30% 30%, rgba(120, 80, 140, 0.25), transparent 60%);
  mix-blend-mode: screen;
}

/* Volumetric haze */
.drone-haze {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 55%,
      rgba(216, 148, 100, 0.18) 65%,
      rgba(120, 80, 80, 0.22) 80%,
      rgba(20, 14, 14, 0.4) 100%);
  pointer-events: none;
}

/* Sun — bright dawn disc */
.drone-sun {
  position: absolute;
  top: 38%;
  right: 24%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      #fff8e0 0%,
      #ffdca0 18%,
      rgba(255, 200, 130, 0.85) 32%,
      rgba(255, 160, 100, 0.5) 50%,
      rgba(234, 110, 80, 0.25) 70%,
      transparent 100%);
  filter: blur(0.5px);
  box-shadow:
    0 0 60px 30px rgba(255, 200, 130, 0.35),
    0 0 200px 80px rgba(234, 130, 90, 0.18);
  animation: drone-sun-pulse 6s ease-in-out infinite;
  z-index: 1;
}
@keyframes drone-sun-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* God rays from sun */
.drone-sun-rays {
  position: absolute;
  top: 38%;
  right: 24%;
  width: 90px;
  height: 90px;
  pointer-events: none;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(255, 220, 150, 0.12) 5deg,
      transparent 10deg,
      transparent 50deg,
      rgba(255, 220, 150, 0.08) 55deg,
      transparent 60deg,
      transparent 110deg,
      rgba(255, 220, 150, 0.10) 115deg,
      transparent 120deg);
  transform: scale(8);
  filter: blur(8px);
  opacity: 0.5;
  animation: ray-rotate 60s linear infinite;
  z-index: 1;
}
@keyframes ray-rotate { to { transform: scale(8) rotate(360deg); } }

/* Distant cloud bank */
.drone-clouds {
  position: absolute;
  inset: 0 0 40% 0;
  background:
    radial-gradient(ellipse 30% 8% at 18% 55%, rgba(255, 200, 170, 0.25), transparent 70%),
    radial-gradient(ellipse 40% 10% at 55% 48%, rgba(220, 160, 140, 0.22), transparent 70%),
    radial-gradient(ellipse 25% 7% at 85% 58%, rgba(255, 180, 150, 0.20), transparent 70%),
    radial-gradient(ellipse 35% 6% at 35% 62%, rgba(180, 130, 130, 0.18), transparent 70%);
  filter: blur(1px);
  animation: cloud-drift 80s linear infinite;
}
@keyframes cloud-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-40px); }
}

/* Far mountains — silhouette layer 1 (lightest, atmospheric) */
.drone-mountains {
  position: absolute;
  left: -5%;
  right: -5%;
  pointer-events: none;
}
.drone-mountains--far {
  bottom: 36%;
  height: 18%;
  background:
    polygon(0 100%, 8% 60%, 14% 80%, 22% 50%, 30% 75%, 40% 45%, 48% 70%, 56% 55%, 66% 75%, 74% 50%, 82% 70%, 90% 45%, 100% 70%, 100% 100%);
  -webkit-mask:
    linear-gradient(135deg, transparent 35%, #000 50%) 0 0/8% 100% repeat-x,
    linear-gradient(45deg, transparent 35%, #000 50%) 0 0/8% 100% repeat-x;
  background:
    linear-gradient(180deg, rgba(80, 60, 90, 0.6) 0%, rgba(60, 50, 80, 0.7) 100%);
  clip-path: polygon(
    0 100%, 0 75%, 4% 60%, 9% 72%, 13% 55%, 18% 70%, 23% 50%, 28% 65%,
    33% 48%, 38% 62%, 44% 45%, 49% 60%, 55% 50%, 60% 65%, 66% 48%,
    71% 62%, 77% 55%, 82% 70%, 88% 50%, 93% 65%, 98% 55%, 100% 70%, 100% 100%);
  filter: blur(0.5px);
  opacity: 0.75;
}
.drone-mountains--mid {
  bottom: 28%;
  height: 14%;
  background: linear-gradient(180deg, rgba(40, 30, 50, 0.8) 0%, rgba(30, 22, 38, 0.9) 100%);
  clip-path: polygon(
    0 100%, 0 70%, 6% 55%, 12% 65%, 18% 45%, 24% 60%, 32% 40%,
    40% 55%, 48% 38%, 55% 52%, 62% 42%, 70% 58%, 78% 45%,
    86% 60%, 93% 50%, 100% 65%, 100% 100%);
  filter: blur(0.3px);
}

/* Tactical grid — softer, more atmospheric */
.drone-grid {
  position: absolute;
  bottom: 0;
  left: -10%;
  right: -10%;
  height: 45%;
  background-image:
    linear-gradient(rgba(103, 217, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 217, 255, 0.12) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(700px) rotateX(74deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 80%, transparent 100%);
  animation: drone-grid-scroll 18s linear infinite;
  opacity: 0.6;
  z-index: 2;
}
@keyframes drone-grid-scroll {
  to { background-position: 0 80px, 80px 0; }
}

/* Horizon glow */
.drone-horizon {
  position: absolute;
  top: 70%;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 180, 120, 0.6) 30%, rgba(255, 200, 140, 0.8) 50%, rgba(255, 180, 120, 0.6) 70%, transparent);
  box-shadow: 0 0 24px rgba(255, 180, 120, 0.5), 0 -2px 12px rgba(255, 200, 140, 0.4);
  z-index: 2;
}

/* Terrain — near foreground darkening */
.drone-terrain {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  pointer-events: none;
}
.drone-terrain--far {
  height: 22%;
  bottom: 18%;
  background:
    radial-gradient(ellipse 60% 110% at 22% 100%, rgba(40, 28, 38, 0.6) 0%, transparent 65%),
    radial-gradient(ellipse 55% 100% at 65% 100%, rgba(35, 25, 35, 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 50% 90% at 88% 100%, rgba(45, 30, 40, 0.5) 0%, transparent 65%);
  filter: blur(0.5px);
}
.drone-terrain--mid {
  height: 18%;
  bottom: 8%;
  background:
    radial-gradient(ellipse 70% 110% at 35% 100%, rgba(20, 14, 20, 0.85) 0%, transparent 65%),
    radial-gradient(ellipse 65% 100% at 75% 100%, rgba(18, 12, 16, 0.85) 0%, transparent 65%);
}
.drone-terrain--near {
  height: 12%;
  background: linear-gradient(180deg, transparent, rgba(8, 5, 10, 0.95) 75%);
}

/* Birds for scale & life */
.drone-bird {
  position: absolute;
  width: 18px;
  height: 7px;
  z-index: 3;
  filter: blur(0.3px);
  opacity: 0.55;
  animation: bird-flap 0.6s ease-in-out infinite;
}
.drone-bird--1 { top: 32%; left: -3%; animation: bird-flap 0.6s ease-in-out infinite, bird-fly-1 50s linear infinite; }
.drone-bird--2 { top: 28%; left: -3%; width: 12px; height: 5px; animation: bird-flap 0.7s ease-in-out infinite, bird-fly-2 65s linear infinite; animation-delay: -10s, -20s; }
@keyframes bird-flap {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.4); }
}
@keyframes bird-fly-1 {
  to { transform: translateX(110vw); }
}
@keyframes bird-fly-2 {
  to { transform: translateX(110vw); }
}

/* ============== Drones (photoreal quadcopters) ============== */
.drone-quad {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7));
}
.drone-quad svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Hero foreground quadcopter — banking maneuver */
.drone-quad--hero {
  width: 220px;
  height: 130px;
  top: 50%;
  left: 8%;
  transform-origin: center;
  animation: hero-bank 12s ease-in-out infinite;
}
.drone-quad--hero .quad-shadow {
  position: absolute;
  bottom: -20px;
  left: 15%;
  width: 70%;
  height: 14px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 70%);
  filter: blur(4px);
  animation: shadow-pulse 12s ease-in-out infinite;
}
@keyframes hero-bank {
  0%   { transform: translate(0, 0) rotate(-4deg) rotateY(8deg); }
  25%  { transform: translate(20px, -14px) rotate(6deg) rotateY(-4deg); }
  50%  { transform: translate(40px, -4px) rotate(-2deg) rotateY(2deg); }
  75%  { transform: translate(15px, 10px) rotate(8deg) rotateY(-6deg); }
  100% { transform: translate(0, 0) rotate(-4deg) rotateY(8deg); }
}
@keyframes shadow-pulse {
  0%, 100% { opacity: 0.6; transform: scaleX(1); }
  50%      { opacity: 0.4; transform: scaleX(0.85); }
}

/* Hostile target drone */
.drone-quad--hostile {
  width: 110px;
  height: 65px;
  top: 36%;
  right: 22%;
  animation: hostile-evade 9s ease-in-out infinite;
}
@keyframes hostile-evade {
  0%   { transform: translate(0, 0) rotate(3deg); }
  20%  { transform: translate(-18px, -8px) rotate(-5deg); }
  40%  { transform: translate(-30px, 6px) rotate(4deg); }
  60%  { transform: translate(-15px, 14px) rotate(-3deg); }
  80%  { transform: translate(8px, 4px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(3deg); }
}

/* Distant wingman */
.drone-quad--distant {
  width: 56px;
  height: 34px;
  top: 30%;
  left: 38%;
  opacity: 0.72;
  animation: distant-drift 14s ease-in-out infinite;
}
@keyframes distant-drift {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  50%      { transform: translate(40px, -8px) rotate(3deg); }
}

/* Spinning rotor blur — counter-rotating pairs (a/d clockwise, b/c CCW) */
.rotor { transform-origin: center; }
.rotor--a, .rotor--d { animation: rotor-spin-cw 0.05s linear infinite; }
.rotor--b, .rotor--c { animation: rotor-spin-ccw 0.05s linear infinite; }
@keyframes rotor-spin-cw  { to { transform: rotate(360deg); } }
@keyframes rotor-spin-ccw { to { transform: rotate(-360deg); } }

/* Strobing nav lights */
.nav-light {
  animation: nav-strobe 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px currentColor);
}
.nav-light--green { color: #5cffa8; animation-delay: 0s; }
.nav-light--red   { color: #ff5c5c; animation-delay: 0.7s; }
@keyframes nav-strobe {
  0%, 90%, 100% { opacity: 0.3; }
  5%, 15%       { opacity: 1; }
}

/* Tracer engagement lines — hero → hostile */
.drone-tracer {
  position: absolute;
  top: 56%;
  left: 22%;
  width: 56%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 200, 100, 0) 20%,
    rgba(255, 220, 150, 0.9) 45%,
    rgba(255, 255, 220, 1) 50%,
    rgba(255, 220, 150, 0.9) 55%,
    rgba(255, 200, 100, 0) 80%,
    transparent 100%);
  box-shadow: 0 0 8px rgba(255, 200, 100, 0.7);
  transform-origin: left center;
  transform: rotate(-12deg) scaleX(0);
  animation: tracer-fire 5s ease-in-out infinite;
  z-index: 4;
}
.drone-tracer--2 {
  top: 60%;
  animation-delay: 2.3s;
  transform: rotate(-9deg) scaleX(0);
}
@keyframes tracer-fire {
  0%, 70%, 100% { transform: rotate(-12deg) scaleX(0); opacity: 0; }
  72%           { transform: rotate(-12deg) scaleX(0); opacity: 1; }
  78%           { transform: rotate(-12deg) scaleX(1); opacity: 1; }
  85%           { transform: rotate(-12deg) scaleX(1); opacity: 0; }
}

/* HUD overlays */
.hud {
  position: absolute;
  z-index: 5;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  color: var(--cyan);
  letter-spacing: 0.08em;
}
.hud-label {
  display: inline-block;
  padding: 0.18rem 0.45rem;
  background: rgba(103, 217, 255, 0.12);
  border: 1px solid rgba(103, 217, 255, 0.4);
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

.hud--target {
  top: 32%;
  right: 22%;
  width: 72px;
  height: 72px;
  animation: hud-target-shift 9s ease-in-out infinite;
}
@keyframes hud-target-shift {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-12px, 8px); }
  66% { transform: translate(8px, -10px); }
}
.hud-corner {
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--gold);
  border-style: solid;
  border-width: 0;
}
.hud-corner--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.hud-corner--tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.hud-corner--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.hud-corner--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.hud--target .hud-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  background: rgba(234, 176, 90, 0.14);
  border-color: rgba(234, 176, 90, 0.5);
  font-size: 0.56rem;
}

.hud--waypoint {
  top: 22%;
  left: 18%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.hud-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(103, 217, 255, 0.18), 0 0 12px var(--cyan);
  animation: hud-pulse 1.6s ease-in-out infinite;
}
@keyframes hud-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(103, 217, 255, 0.08), 0 0 16px var(--cyan); }
}

.hud--telemetry {
  top: 16px;
  right: 16px;
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.7rem;
  background: rgba(2, 8, 16, 0.7);
  border: 1px solid rgba(103, 217, 255, 0.3);
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
.hud-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.6rem;
}
.hud-key { color: var(--text-muted); }
.hud-val { color: var(--cyan); font-weight: 600; min-width: 36px; text-align: right; }

/* Radar sweep */
.radar {
  position: absolute;
  bottom: 18px;
  left: 18px;
  width: 90px;
  height: 90px;
  z-index: 5;
}
.radar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(103, 217, 255, 0.35);
}
.radar-ring--2 { inset: 22%; border-color: rgba(103, 217, 255, 0.25); }
.radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(103, 217, 255, 0.4) 30deg, transparent 60deg);
  animation: radar-spin 3.5s linear infinite;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }
.radar-blip {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: radar-blip-fade 3.5s ease-in-out infinite;
}
.radar-blip--a { top: 28%; left: 38%; animation-delay: 0.4s; }
.radar-blip--b { top: 60%; left: 65%; animation-delay: 1.6s; }
.radar-blip--c { top: 45%; left: 22%; animation-delay: 2.4s; }
@keyframes radar-blip-fade {
  0%, 100% { opacity: 0; }
  10%, 25% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .drone-quad, .drone-grid, .radar-sweep, .radar-blip,
  .drone-clouds, .drone-sun, .drone-sun-rays, .hud--target, .hud-dot,
  .rotor, .nav-light, .drone-tracer, .drone-bird {
    animation: none !important;
  }
}

/* ============== Responsive ============== */
/* Collapse nav earlier — 6 items + CTA wraps awkwardly between 840-1024px */
@media (max-width: 1024px) {
  .nav-toggle { display: inline-block !important; }
  .nav-links {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 0.85rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-strong);
    background: linear-gradient(180deg, rgba(7, 18, 32, 0.98), rgba(4, 12, 23, 0.98));
    box-shadow: var(--shadow);
    display: none;
  }
  .nav-links.is-open { display: flex !important; }
  .nav-links a { justify-content: flex-start; }
  .btn-nav { margin-left: auto; }
}

@media (max-width: 1100px) {
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid::before { display: none; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .testimonial.is-feature { grid-column: 1 / -1; }
  .demo-grid { grid-template-columns: 1fr; }
  .impact-head { grid-template-columns: 1fr; gap: 1rem; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .impact-grid, .cap-grid, .process-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonial.is-feature { grid-column: auto; }
  .frame-impact { padding: 2.5rem 1.5rem; }
  .site-footer { grid-template-columns: 1fr; padding: 2rem 1.5rem; }
  .foot-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .marquee-item strong { font-size: 1.1rem; }
}

/* ============== Drone scene — narrow viewport cleanup ============== */
@media (max-width: 900px) {
  /* Hide clutter that overlaps stat cards on narrow displays */
  .hud--telemetry,
  .hud--target,
  .hud--waypoint,
  .radar,
  .drone-quad--distant {
    display: none;
  }
  .drone-quad--hero { width: 180px; height: 105px; left: 6%; top: 48%; }
  .drone-quad--hostile { width: 90px; height: 52px; right: 14%; top: 38%; }
}
@media (max-width: 600px) {
  .drone-quad--hero { width: 140px; height: 80px; }
  .drone-quad--hostile { width: 70px; height: 40px; }
  .drone-mountains, .drone-bird { opacity: 0.5; }
}

/* ============== Platform Orbit Showcase ============== */
/* Replaces the CSS drone scene with real globe + platform cards */

.showcase-scene {
  /* inherits drone-scene absolute positioning from existing styles */
  overflow: hidden;
}

.ss-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 30%, rgba(5,18,38,0.55), transparent 70%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(2,6,14,0.98) 0%, rgba(2,6,14,0.6) 50%, transparent 80%),
    #020810;
}

/* Globe composition */
.ss-globe-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: min(50%, 300px);
  pointer-events: none;
}

.ss-globe-wrap picture {
  display: block;
  width: 100%;
}

.globe-anim {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(103, 217, 255, 0.18),
    0 0 48px rgba(103, 217, 255, 0.14),
    0 0 100px rgba(30, 70, 130, 0.28);
}

.globe-glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,80,160,0.25) 0%, transparent 62%);
  pointer-events: none;
  animation: ss-globe-pulse 5s ease-in-out infinite;
}
@keyframes ss-globe-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.08); }
}

.globe-rings-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180%;
  pointer-events: none;
  opacity: 0.75;
  animation: ss-rings-spin 30s linear infinite;
}
@keyframes ss-rings-spin {
  to { transform: translate(-50%, -50%) rotateZ(360deg) rotateX(75deg); }
}

.globe-pedestal-layer {
  position: absolute;
  bottom: -38%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  pointer-events: none;
  opacity: 0.55;
}

/* Platform cards */
.ss-card {
  position: absolute;
  width: clamp(100px, 25%, 155px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(103, 217, 255, 0.30);
  background: rgba(3, 10, 22, 0.88);
  backdrop-filter: blur(12px);
  overflow: visible;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(103,217,255,0.04);
  transition: border-color .3s var(--ease-out), box-shadow .3s, transform .3s;
}
.ss-card:hover {
  border-color: var(--cyan);
  box-shadow: 0 14px 40px rgba(0,0,0,0.65), 0 0 28px rgba(103,217,255,0.22);
  z-index: 10;
}

.ss-card img {
  width: 100%;
  display: block;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  border-bottom: 1px solid rgba(103, 217, 255, 0.10);
}

.ss-card__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center top;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  border-bottom: 1px solid rgba(103, 217, 255, 0.10);
}

.ss-card__footer {
  padding: 0.42rem 0.6rem 0.48rem;
  display: grid;
  gap: 0.12rem;
}

.ss-card__cat {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
  opacity: 0.85;
}

.ss-card__name {
  font-family: "Rajdhani", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1;
}

/* Pulse dot per card */
.ss-card__pulse {
  position: absolute;
  top: -3px; right: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(103,217,255,0.55);
  animation: ss-card-pulse 2.5s ease-out infinite;
}
@keyframes ss-card-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(103,217,255,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(103,217,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(103,217,255,0); }
}

/* Individual card positions + float animations */
.ss-card--drone  { top: 6%;  left: 1%;    animation: ss-float-a 7s ease-in-out infinite; }
.ss-card--ai     { top: 5%;  right: 1%;   border-color: rgba(234,176,90,0.38); animation: ss-float-b 8.5s ease-in-out infinite; }
.ss-card--saas   { top: 48%; left: 0%;    animation: ss-float-c 9s ease-in-out infinite; }
.ss-card--fintech{ top: 46%; right: 0%;   animation: ss-float-d 7.5s ease-in-out infinite; }
.ss-card--vr     { bottom: 4%; left: 50%; transform: translateX(-50%); width: clamp(90px, 23%, 142px); animation: ss-float-e 10s ease-in-out infinite; }

/* Gold accent cards */
.ss-card--ai     .ss-card__cat       { color: var(--gold); }
.ss-card--ai     .ss-card__pulse     { background: var(--gold); box-shadow: 0 0 0 0 rgba(234,176,90,0.55); animation-delay: 0.6s; }
.ss-card--fintech .ss-card__cat      { color: var(--gold); }
.ss-card--fintech .ss-card__pulse    { background: var(--gold); box-shadow: 0 0 0 0 rgba(234,176,90,0.55); animation-delay: 1.2s; }
.ss-card--saas   .ss-card__pulse     { animation-delay: 0.3s; }
.ss-card--vr     .ss-card__pulse     { animation-delay: 0.9s; }
.ss-card--ai:hover, .ss-card--fintech:hover {
  border-color: var(--gold);
  box-shadow: 0 14px 40px rgba(0,0,0,0.65), 0 0 28px rgba(234,176,90,0.22);
}

/* Float keyframes */
@keyframes ss-float-a {
  0%, 100% { transform: translate(0,  0)    rotate(-1.5deg); }
  50%       { transform: translate(5px,-9px) rotate(0.5deg);  }
}
@keyframes ss-float-b {
  0%, 100% { transform: translate(0,  0)    rotate(1.5deg);  }
  50%       { transform: translate(-6px,-7px) rotate(-0.5deg); }
}
@keyframes ss-float-c {
  0%, 100% { transform: translate(0, 0)   rotate(1deg);    }
  50%       { transform: translate(7px,8px) rotate(-1deg);  }
}
@keyframes ss-float-d {
  0%, 100% { transform: translate(0, 0)    rotate(-1deg);  }
  50%       { transform: translate(-5px,9px) rotate(1deg);  }
}
@keyframes ss-float-e {
  0%, 100% { transform: translateX(-50%) translateY(0)    rotate(0.5deg);  }
  50%       { transform: translateX(-50%) translateY(-7px) rotate(-0.5deg); }
}

/* HUD */
.ss-hud {
  position: absolute;
  top: 14px; right: 14px;
  display: grid;
  gap: 0.18rem;
  padding: 0.5rem 0.65rem;
  background: rgba(2, 8, 18, 0.75);
  border: 1px solid rgba(103, 217, 255, 0.28);
  border-radius: 4px;
  backdrop-filter: blur(10px);
  font-family: "JetBrains Mono", monospace;
}
.ss-hud__row {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}
.ss-hud .hud-key { color: var(--text-muted); }
.ss-hud .hud-val { color: var(--cyan); font-weight: 600; min-width: 28px; text-align: right; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ss-card,
  .globe-glow,
  .globe-rings-layer {
    animation: none !important;
  }
}

/* Narrow viewport — hide outer cards, keep globe + VR */
@media (max-width: 620px) {
  .ss-card--drone, .ss-card--ai { display: none; }
  .ss-card { width: clamp(85px, 28%, 120px); }
  .ss-globe-wrap { width: 62%; }
}

/* ============== Photo Scene ============== */
.photo-scene {
  /* absolute inset inherited from .drone-scene */
}
.photo-scene__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.photo-scene__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(2,6,14,0.55) 0%, rgba(2,6,14,0.1) 55%, rgba(2,6,14,0.35) 100%),
    linear-gradient(to top,   rgba(2,6,14,0.65) 0%, transparent 45%);
}