/* ===================================================================
   ARVIONA LABS — DESIGN SYSTEM (Self-Contained, No CDN)
   =================================================================== */

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; }

/* === DESIGN TOKENS === */
:root {
  /* Core palette */
  --bg: #131411;
  --surface: #131411;
  --surface-container-lowest: #0e0e0c;
  --surface-container-low: #1c1c19;
  --surface-container: #20201d;
  --surface-container-high: #2a2a27;
  --surface-container-highest: #353532;
  --surface-variant: #353532;
  --surface-bright: #3a3936;

  /* Text */
  --on-bg: #e5e2dd;
  --on-surface: #e5e2dd;
  --on-surface-variant: #c1c9c1;

  /* Brand */
  --primary: #a1d1b5;
  --primary-container: #00321f;
  --on-primary: #073824;
  --on-primary-container: #6e9c82;
  --secondary: #dac2aa;
  --secondary-fixed-dim: #dac2aa;
  --secondary-fixed: #f8dec5;
  --secondary-container: #574634;
  --on-secondary: #3c2e1d;
  --tertiary: #b8cea2;
  --tertiary-fixed-dim: #b8cea2;
  --tertiary-container: #1e2f11;

  /* Accent */
  --neon: #2DFF8D;
  --deep-earth: #1A1D1C;
  --surface-cream: #F2E8DF;
  --fossil-brown: #5F3D3B;

  /* Outline */
  --outline: #8b938c;
  --outline-variant: #414943;

  /* Error */
  --error: #ffb4ab;

  /* Spacing */
  --unit: 8px;
  --gutter: 24px;
  --stack-xs: 4px;
  --stack-md: 16px;
  --stack-xl: 48px;
  --margin-mobile: 20px;
  --margin-desktop: 64px;
  --container-max: 1280px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;
}

/* === BASE === */
body {
  background: var(--bg);
  color: var(--on-bg);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

/* === TYPOGRAPHY === */
.display-lg, h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.headline-lg, h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: -0.01em;
}
.title-md, h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.33;
}
.body-lg {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  line-height: 1.56;
}
.body-md {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.label-tech {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: 0.05em;
}
.section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neon);
}

/* === LAYOUT === */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.main { flex: 1; padding-top: 72px; }
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--margin-desktop);
  padding-right: var(--margin-desktop);
}
.section { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 768px) {
  .container { padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }
  .section { padding-top: 48px; padding-bottom: 48px; }
}

/* Grids */
.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); gap: var(--unit); }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .grid-12 { grid-template-columns: 1fr; }
  .col-4, .col-5, .col-7, .col-8, .col-12 { grid-column: span 1; }
}

/* Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-grow { flex-grow: 1; }

/* Spacing */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-12 { gap: 48px; }
.gap-unit { gap: var(--unit); }
.gap-gutter { gap: var(--gutter); }

.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mt-auto { margin-top: auto; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-10 { margin-bottom: 40px; }
.pt-4 { padding-top: 16px; }
.pt-6 { padding-top: 24px; }
.pt-8 { padding-top: 32px; }
.pb-4 { padding-bottom: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.p-10 { padding: 40px; }
.p-gutter { padding: var(--gutter); }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-10 { padding-top: 40px; padding-bottom: 40px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }

/* Sizing */
.w-full { width: 100%; }
.w-max { width: max-content; }
.h-full { height: 100%; }
.h-48 { height: 192px; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.min-h-screen { min-height: 100vh; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
/* Misc */
.mx-auto { margin-left: auto; margin-right: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.rounded-sm { border-radius: var(--r-sm); }
.rounded { border-radius: var(--r-md); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-xl { border-radius: var(--r-lg); }
.rounded-2xl { border-radius: var(--r-xl); }
.rounded-full { border-radius: var(--r-full); }
.border { border: 1px solid; }
.border-t { border-top: 1px solid; }
.border-b { border-bottom: 1px solid; }
.space-y-2 > * + * { margin-top: 8px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-6 > * + * { margin-top: 24px; }

/* Transitions */
.transition { transition: all 0.3s ease; }
.transition-colors { transition: color 0.3s, background-color 0.3s, border-color 0.3s; }
.transition-opacity { transition: opacity 0.5s ease; }
.transition-transform { transition: transform 0.3s ease; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }

/* Scroll Reveal */
body.reveal-active .scroll-reveal {
  opacity: 0;
  translate: var(--reveal-x, 0) var(--reveal-y, 34px);
  filter: blur(10px);
  transition:
    opacity 820ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 820ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 820ms ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, translate, filter;
}
body.reveal-active .scroll-reveal[data-reveal="left"] {
  --reveal-x: -42px;
  --reveal-y: 18px;
}
body.reveal-active .scroll-reveal[data-reveal="right"] {
  --reveal-x: 42px;
  --reveal-y: 18px;
}
body.reveal-active .scroll-reveal[data-reveal="up-soft"] {
  --reveal-y: 24px;
}
body.reveal-active .scroll-reveal.reveal-in {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}

/* === COLORS === */
.text-primary { color: var(--primary); }
.text-neon { color: var(--neon); }
.text-secondary { color: var(--secondary); }
.text-secondary-dim { color: var(--secondary-fixed-dim); }
.text-tertiary { color: var(--tertiary); }
.text-tertiary-dim { color: var(--tertiary-fixed-dim); }
.text-on-bg { color: var(--on-bg); }
.text-on-surface { color: var(--on-surface); }
.text-on-surface-variant { color: var(--on-surface-variant); }
.text-on-primary-container { color: var(--on-primary-container); }
.text-outline { color: var(--outline); }

.bg-surface { background: var(--surface); }
.bg-container { background: var(--surface-container); }
.bg-container-low { background: var(--surface-container-low); }
.bg-container-high { background: var(--surface-container-high); }
.bg-container-lowest { background: var(--surface-container-lowest); }
.bg-primary-container { background: var(--primary-container); }
.bg-deep-earth { background: var(--deep-earth); }

.border-outline { border-color: var(--outline-variant); }
.border-tertiary { border-color: rgba(184, 206, 162, 0.2); }
.border-neon { border-color: rgba(45, 255, 141, 0.5); }

.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.mix-blend-screen { mix-blend-mode: screen; }
.mix-blend-luminosity { mix-blend-mode: luminosity; }

/* === COMPONENT STYLES === */

/* Nav */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--margin-desktop);
  background: rgba(19, 20, 17, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(65, 73, 67, 0.2);
}
@media (max-width: 768px) { .nav { padding: 16px var(--margin-mobile); } }
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--primary-container);
  border: 1px solid rgba(184, 206, 162, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-icon-image {
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 18px rgba(9, 92, 255, 0.25);
}
.brand-logo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nav-icon .material-symbols-outlined { color: var(--neon); font-size: 18px; }
.nav-brand {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--on-bg);
  letter-spacing: -0.01em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
@media (max-width: 768px) { .nav-links { display: none; } }
.nav-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: var(--on-surface-variant);
  transition: color 0.3s;
}
.nav-link:hover { color: var(--neon); }
.nav-link.active {
  color: var(--neon);
  font-weight: 700;
  border-bottom: 2px solid var(--neon);
  padding-bottom: 4px;
}
.nav-cta {
  display: inline-block;
  background: var(--secondary-fixed-dim);
  color: var(--primary-container);
  padding: 8px 24px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 700;
  transition: background 0.3s;
}
.nav-cta:hover { background: var(--secondary-fixed); }
.nav-hamburger {
  display: none;
  color: var(--on-surface);
  padding: 8px;
}
@media (max-width: 768px) { .nav-hamburger { display: flex; } }

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 65px;
  left: 0;
  right: 0;
  z-index: 40;
  flex-direction: column;
  background: var(--surface-container-low);
  border-bottom: 1px solid rgba(65, 73, 67, 0.2);
  padding: 16px var(--margin-mobile);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  display: block;
  padding: 12px 0;
  color: var(--on-surface-variant);
  font-size: 16px;
  border-bottom: 1px solid rgba(65, 73, 67, 0.1);
  transition: color 0.3s;
}
.mobile-menu a:hover, .mobile-menu a.active { color: var(--neon); }

/* Glass Panel */
.glass {
  background: rgba(42, 42, 39, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(146, 167, 126, 0.2);
}
.glass-dark {
  background: rgba(19, 20, 17, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(184, 206, 162, 0.1);
}

/* Cards */
.card {
  background: var(--surface-container);
  border: 1px solid rgba(184, 206, 162, 0.2);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.3s;
}
.card:hover { border-color: rgba(45, 255, 141, 0.4); }

/* Buttons */
.btn-primary {
  display: inline-block;
  background: var(--secondary-fixed-dim);
  color: var(--primary-container);
  padding: 12px 32px;
  border-radius: var(--r-full);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  transition: background 0.3s;
}
.btn-primary:hover { background: var(--secondary-fixed); }
.btn-secondary {
  display: inline-block;
  border: 1px solid rgba(184, 206, 162, 0.5);
  color: var(--on-bg);
  padding: 12px 32px;
  border-radius: var(--r-full);
  font-size: 16px;
  background: rgba(42, 42, 39, 0.4);
  backdrop-filter: blur(20px);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.btn-secondary:hover {
  border-color: var(--neon);
  box-shadow: 0 0 25px rgba(45, 255, 141, 0.2);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
  padding: 8px 24px;
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  transition: all 0.3s;
}
.btn-outline:hover { border-color: var(--neon); color: var(--neon); }

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: rgba(0, 50, 31, 0.5);
  border: 1px solid rgba(161, 209, 181, 0.2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--neon);
  letter-spacing: 0.05em;
}
.chip-surface {
  background: var(--surface-container-high);
  border: 1px solid rgba(65, 73, 67, 0.3);
  color: var(--tertiary-fixed-dim);
}
.chip-neutral {
  background: var(--surface-container-high);
  border: 1px solid rgba(65, 73, 67, 0.3);
  color: var(--neon);
}

/* Status Dot */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon);
  animation: pulse 2s ease-in-out infinite;
}
.dot-sm { width: 6px; height: 6px; }

/* Glow Effects */
.neon-text-glow { text-shadow: 0 0 10px rgba(45, 255, 141, 0.5); }
.neon-box-glow {
  box-shadow: 0 0 20px rgba(45, 255, 141, 0.15);
  transition: box-shadow 0.3s;
}
.neon-box-glow:hover { box-shadow: 0 0 35px rgba(45, 255, 141, 0.3); }
.glow-hover { transition: all 0.3s; }
.glow-hover:hover {
  box-shadow: 0 0 20px rgba(45, 255, 141, 0.2);
  border-color: rgba(45, 255, 141, 0.4);
}
.glow-border {
  box-shadow: 0 0 15px rgba(45, 255, 141, 0.1);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.glow-border:hover {
  box-shadow: 0 0 25px rgba(45, 255, 141, 0.3);
  border-color: rgba(45, 255, 141, 0.5);
}
.text-gradient {
  background: linear-gradient(to right, #dac2aa, #a1d1b5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tech-grid {
  background-image:
    linear-gradient(to right, rgba(146, 167, 126, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(146, 167, 126, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Gradient Overlays */
.gradient-up { background: linear-gradient(to top, var(--bg), transparent); }
.gradient-right { background: linear-gradient(to right, rgba(26, 29, 28, 0.8), transparent); }

/* Footer */
.footer {
  background: var(--deep-earth);
  border-top: 1px solid rgba(65, 73, 67, 0.1);
}
.footer-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--stack-xl);
  padding: 48px var(--margin-desktop);
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; padding: 32px var(--margin-mobile); }
}
.footer-simple {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 40px var(--margin-desktop);
}
@media (max-width: 768px) {
  .footer-simple { flex-direction: column; text-align: center; padding: 32px var(--margin-mobile); }
}

/* Animations */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-16px); }
}
@keyframes subtle-glow {
  0% { box-shadow: 0 0 0px rgba(45, 255, 141, 0); }
  50% { box-shadow: 0 0 20px rgba(45, 255, 141, 0.2); }
  100% { box-shadow: 0 0 0px rgba(45, 255, 141, 0); }
}
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-glow:hover { animation: subtle-glow 2s infinite; }
@media (prefers-reduced-motion: reduce) {
  .animate-pulse,
  .animate-float {
    animation: none !important;
  }

  body.reveal-active .scroll-reveal {
    opacity: 1;
    translate: 0 0;
    filter: none;
    transition: none;
  }
}

/* Radial Blurs */
.blur-neon {
  position: absolute;
  border-radius: 50%;
  background: rgba(45, 255, 141, 0.05);
  filter: blur(100px);
  pointer-events: none;
}
.blur-primary {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 50, 31, 0.2);
  filter: blur(80px);
  pointer-events: none;
}
.blur-3xl { filter: blur(64px); }

/* Backdrop */
.backdrop-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Special Hero Section */
.hero-section {
  min-height: 92vh;
  display: flex;
  align-items: center;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: center;
  width: 100%;
}
.hero-globe-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hero-globe-stage {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  margin-left: auto;
  display: grid;
  place-items: center;
  overflow: visible;
}
.hero-globe-aura {
  position: absolute;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 255, 236, 0.92) 0%, rgba(217, 255, 220, 0.36) 56%, rgba(175, 255, 196, 0.12) 72%, transparent 82%);
  filter: blur(20px);
  opacity: 0.95;
}
.hero-globe-shell {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 44% 32%, rgba(255, 255, 255, 0.98), rgba(245, 249, 243, 0.98) 55%, rgba(232, 240, 232, 0.96) 78%, rgba(216, 235, 219, 0.92) 100%);
  box-shadow:
    0 0 42px rgba(226, 255, 226, 0.9),
    0 0 86px rgba(172, 255, 190, 0.28),
    inset 18px 18px 48px rgba(255, 255, 255, 0.66),
    inset -28px -42px 64px rgba(203, 219, 204, 0.55);
}
.hero-globe-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 48% 34%, transparent 0 54%, rgba(163, 188, 165, 0.08) 72%, rgba(154, 255, 176, 0.14) 100%);
  pointer-events: none;
}
.hero-globe-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(106deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 28%, rgba(175, 189, 177, 0.05) 55%, rgba(134, 154, 138, 0.2) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hero-globe-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-globe-pill {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-section { min-height: auto; padding-top: 40px; padding-bottom: 40px; }
  .hero-globe-stage {
    width: min(100%, 390px);
    margin: 16px auto 0;
  }
  .hero-globe-shell {
    max-width: 360px;
  }
  .hero-globe-pill {
    bottom: 4px;
  }
}

/* Bento Grid */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--unit);
}
.bento > .span-4 { grid-column: span 4; }
.bento > .span-8 { grid-column: span 8; }
.bento > .span-12 { grid-column: span 12; }
@media (max-width: 768px) {
  .bento { grid-template-columns: 1fr; }
  .bento > .span-4, .bento > .span-8, .bento > .span-12 { grid-column: span 1; }
}

/* Stats */
.stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.1;
}

/* Staggered Cards */
.stagger-1 { transform: translateY(0); }
.stagger-2 { transform: translateY(32px); }
.stagger-3 { transform: translateY(64px); }
@media (max-width: 768px) {
  .stagger-2, .stagger-3 { transform: translateY(0); }
}

/* Group hover (image opacity) */
.card-img { transition: opacity 0.5s; }
.card:hover .card-img { opacity: 0.95; }

/* ===========================
   MATERIAL SYMBOLS OVERRIDES
   =========================== */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1;
}

/* Icon in link — slide right on hover */
.link-arrow .material-symbols-outlined { transition: transform 0.3s; }
.link-arrow:hover .material-symbols-outlined { transform: translateX(4px); }

/* Responsive hidden */
@media (max-width: 768px) { .md-hide { display: none !important; } }
@media (min-width: 769px) { .md-show { display: none !important; } }

/* Hover:scale effect */
.hover-scale { transition: transform 0.7s ease; }
.hover-scale:hover { transform: scale(1.05); }

/* === CUSTOM DROP SHADOWS === */
.drop-glow { filter: drop-shadow(0 0 50px rgba(45, 255, 141, 0.25)); }
.drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)); }

/* Accent neon glow on bottom border */
.neon-bottom-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--neon);
}