/* ==========================================================================
   i7 Global — Glassmorphic + Aurora design system
   Light & dark themes · animated aurora background · frosted glass surfaces
   ========================================================================== */

/* ============ Reset & base ============ */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  color: var(--fg);
  background: var(--page);
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============ Theme tokens ============ */
[data-theme="light"] {
  --page:        #faf7fb;
  --fg:          #1a0a20;
  --fg-muted:    #4a3958;
  --fg-soft:     #6e5a7a;
  --glass-bg:    rgba(255, 255, 255, 0.88);                                 /* opaque enough to stand off white sections */
  --glass-bg-strong: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(79, 10, 97, 0.14);                                   /* purple-tinted, visible against white */
  --glass-shadow: 0 4px 16px rgba(79, 10, 97, 0.08), 0 1px 3px rgba(79, 10, 97, 0.06);
  --accent:      #6d2785;
  --accent-2:    #b072c5;
  --gold:        #c98a1e;
  --gold-soft:   #f5c352;
  --line:        rgba(79, 10, 97, 0.10);
  --aurora-1:    rgba(176, 114, 197, 0.55);
  --aurora-2:    rgba(245, 195, 82, 0.35);
  --aurora-3:    rgba(220, 130, 200, 0.40);
  --aurora-4:    rgba(138, 68, 163, 0.30);
}

[data-theme="dark"] {
  --page:        #0a0512;
  --fg:          #f5edf8;
  --fg-muted:    #c2b3d0;
  --fg-soft:     #8d7da0;
  --glass-bg:    rgba(28, 16, 42, 0.45);
  --glass-bg-strong: rgba(28, 16, 42, 0.65);
  --glass-border: rgba(176, 114, 197, 0.18);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --accent:      #d0a8de;
  --accent-2:    #b072c5;
  --gold:        #f5c352;
  --gold-soft:   #f5c352;
  --line:        rgba(255, 255, 255, 0.10);
  --aurora-1:    rgba(176, 114, 197, 0.30);
  --aurora-2:    rgba(245, 195, 82, 0.18);
  --aurora-3:    rgba(231, 84, 168, 0.25);
  --aurora-4:    rgba(78, 30, 140, 0.45);
}

/* ============ AURORA — animated gradient background ============ */
body::before {
  content: '';
  position: fixed;
  inset: -25%;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 15% 25%, var(--aurora-1), transparent 60%),
    radial-gradient(45% 40% at 85% 20%, var(--aurora-2), transparent 60%),
    radial-gradient(50% 50% at 70% 80%, var(--aurora-3), transparent 65%),
    radial-gradient(35% 40% at 20% 90%, var(--aurora-4), transparent 60%),
    var(--page);
  animation: aurora-drift 24s ease-in-out infinite alternate;
  filter: blur(60px) saturate(120%);
  pointer-events: none;
}
body::after {
  /* Subtle noise overlay so aurora doesn't look "plasticky" */
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.6;
}
@keyframes aurora-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(2%, -3%) rotate(2deg); }
  66%  { transform: translate(-2%, 2%) rotate(-2deg); }
  100% { transform: translate(1%, -1%) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ============ GLASS surface ============ */
.glass, .value-card, .stat-card, .team-card, .timeline-card,
.ach-card, .contact-box, .testimonial, #contact-form {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  box-shadow: var(--glass-shadow);
}

/* ============ BRAND TILE (i7 logo container) ============ */
/* White frame in light theme, subtle glass tint in dark theme so the logo
   square doesn't glare against the dark surroundings. Used in the navbar,
   the hero centre and the footer. */
.brand-tile {
  background: #ffffff;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
[data-theme="dark"] .brand-tile {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* ============ NAV ============ */
/* Hero is dark in BOTH themes, so the un-scrolled navbar always needs light text.
   Once scrolled past the hero, navbar background turns glass and text picks up the theme. */
#navbar {
  background: transparent;
  transition: background .3s, backdrop-filter .3s, box-shadow .3s;
}
#navbar .nav-text     { color: #fff; }
#navbar .nav-subtext  { color: rgba(255,255,255,.7); }
.nav-link {
  position: relative;
  display: inline-block;
  padding: .6rem 1rem;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  border-radius: 999px;
  transition: color .2s, background .2s;
}
.nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
}

#navbar.scrolled {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
}
#navbar.scrolled .nav-text     { color: var(--fg); }
#navbar.scrolled .nav-subtext  { color: var(--fg-soft); }
#navbar.scrolled .nav-link     { color: var(--fg-muted); }
#navbar.scrolled .nav-link:hover { color: var(--accent); background: var(--glass-bg); }
#navbar.scrolled .btn-ghost    { color: var(--fg); }
#navbar.scrolled .theme-toggle { color: var(--fg); }

.mobile-link {
  display: block;
  padding: .85rem 1rem;
  font-weight: 500;
  color: var(--fg);
  border-radius: 10px;
}
.mobile-link:hover { background: var(--glass-bg); color: var(--accent); }

/* ============ BUTTONS ============ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.7rem;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  border-radius: 999px;
  box-shadow: 0 12px 32px -8px rgba(109, 39, 133, 0.5), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .25s, box-shadow .25s, filter .25s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 18px 40px -10px rgba(109, 39, 133, 0.6), inset 0 1px 0 rgba(255,255,255,.25);
}

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.7rem;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--fg);
  font-weight: 600;
  font-size: .9rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  transition: all .25s;
}
[data-theme="dark"] .btn-outline-white { color: #fff; }
.btn-outline-white:hover {
  background: var(--glass-bg-strong);
  transform: translateY(-2px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.1rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--fg);
  background: var(--glass-bg);
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .2s;
}
.btn-ghost:hover { background: var(--glass-bg-strong); color: var(--accent); }

/* ============ THEME TOGGLE ============ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--glass-bg);
  color: var(--fg);
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all .25s;
}
.theme-toggle:hover { background: var(--glass-bg-strong); transform: translateY(-1px); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-icon-sun, .theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-moon { display: block; }
[data-theme="dark"]  .theme-icon-sun  { display: block; }

/* ============ HERO ============ */
/* Hero stays a dark cinematic surface in BOTH themes so white text always reads.
   Aurora glows around the edges; a deep purple gradient anchors the center. */
.hero-bg {
  position: relative;
  background:
    radial-gradient(80% 60% at 20% 20%, rgba(138,68,163,.45), transparent 60%),
    radial-gradient(60% 50% at 90% 30%, rgba(230,169,59,.22), transparent 60%),
    linear-gradient(135deg, #3a0747 0%, #4f0a61 45%, #1a0530 100%);
}
[data-theme="dark"] .hero-bg {
  background:
    radial-gradient(80% 60% at 20% 20%, rgba(138,68,163,.55), transparent 60%),
    radial-gradient(60% 50% at 90% 30%, rgba(230,169,59,.25), transparent 60%),
    linear-gradient(135deg, #2a0540 0%, #1a0530 45%, #050208 100%);
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(176,114,197,.20), transparent 60%),
    radial-gradient(50% 50% at 80% 70%, rgba(245,195,82,.12), transparent 60%);
  pointer-events: none;
}

.hero-grid { display: none; }  /* removed grid overlay in favor of aurora */

/* Orbit pills are now glass */
.orbit-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  color: var(--fg);
  font-size: .82rem;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: var(--glass-shadow);
  white-space: nowrap;
  animation: pill-float 7s ease-in-out infinite;
}
.orbit-pill:nth-of-type(2) { animation-delay: -1.2s; }
.orbit-pill:nth-of-type(3) { animation-delay: -2.4s; }
.orbit-pill:nth-of-type(4) { animation-delay: -3.6s; }
.orbit-pill:nth-of-type(5) { animation-delay: -4.8s; }
.orbit-pill:nth-of-type(6) { animation-delay: -6.0s; }
.orbit-icon { font-size: 1rem; line-height: 1; }

/* When the orbit pill is a link (jumps to the matching division), make the
   hover state obvious so it reads as clickable without breaking the float. */
a.orbit-pill {
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s, color .2s;
}
a.orbit-pill:hover,
a.orbit-pill:focus-visible {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 0 0 4px rgba(245,195,82,.25), var(--glass-shadow);
  color: #fff;
  outline: none;
}

@keyframes pill-float {
  0%, 100% { transform: translate(var(--tx,0), var(--ty,0)) translateY(0); }
  50%      { transform: translate(var(--tx,0), var(--ty,0)) translateY(-8px); }
}

/* ============ SECTION TYPOGRAPHY ============ */
section { position: relative; }

/* Override Tailwind bg-white / bg-slate-50 so aurora shines through */
section.bg-white, section.bg-slate-50 { background: transparent !important; }
#divisions.bg-slate-50 { background: transparent !important; }
section.bg-brand-800   {
  background: linear-gradient(135deg, rgba(79,10,97,.85), rgba(34,4,40,.85)) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  width: 36px;
  height: 1px;
}
.section-eyebrow::before { background: linear-gradient(90deg, var(--accent), transparent); }
.section-eyebrow::after  { background: linear-gradient(90deg, transparent, var(--accent)); }

.section-title {
  margin-top: 1.1rem;
  font-family: 'Plus Jakarta Sans', Inter, sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--fg);
}
.section-title .text-brand-800,
.section-title span[class*="text-brand"] {
  color: var(--accent) !important;
  background: linear-gradient(135deg, var(--accent-2), var(--gold-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============ VALUE CARDS ============ */
.value-card { padding: 1.6rem; }
.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-2);
  box-shadow: 0 24px 60px -20px rgba(109,39,133,.35);
}
.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  margin-bottom: 1.1rem;
  box-shadow: 0 8px 20px -4px rgba(109,39,133,.4);
}
.value-card h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--fg);
  margin-bottom: .4rem;
}
.value-card p {
  font-size: .9rem;
  color: var(--fg-muted);
  line-height: 1.6;
}

/* ============ STATS ============ */
.stat-card {
  text-align: center;
  padding: 1.75rem 1.25rem;
}
.stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-2);
}
.stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.5vw, 2.8rem);
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.stat-label {
  margin-top: .6rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* ============ TEAM CARDS ============ */
.team-card {
  overflow: hidden;
  padding: 0;
}
.team-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-2);
}
.team-photo {
  aspect-ratio: 16 / 9;         /* matches .ach-img so leadership and achievement cards line up */
  background-size: cover;
  background-position: center;
  position: relative;
}
.team-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35));
}
.team-info { padding: 1.4rem; }
.team-info h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--fg);
  font-size: 1.1rem;
}
.team-info .role {
  font-size: .76rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: .35rem 0 .65rem;
}
.team-info .bio {
  font-size: .87rem;
  color: var(--fg-muted);
  line-height: 1.6;
}

/* ============ TIMELINE ============ */
.timeline-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 768px) {
  .timeline-row { grid-template-columns: 1fr auto 1fr; }
}
.timeline-card { padding: 1.75rem 1.9rem; }
.timeline-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-2);
}
.timeline-year {
  display: inline-block;
  padding: .3rem .8rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--gold-soft);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.timeline-card h3 {
  margin-top: .75rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--fg);
}
.timeline-card p {
  margin-top: .45rem;
  font-size: .92rem;
  color: var(--fg-muted);
  line-height: 1.6;
}
.timeline-dot {
  display: none;
  width: 20px; height: 20px;
  background: var(--page);
  border: 3px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(109,39,133,.10), 0 0 20px rgba(176,114,197,.4);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .timeline-dot { display: block; }
}
.timeline-dot-active {
  background: var(--gold-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px rgba(245,195,82,.25), 0 0 0 14px rgba(109,39,133,.08), 0 0 30px rgba(245,195,82,.5);
  animation: pulse-dot 2.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 6px rgba(245,195,82,.25), 0 0 0 14px rgba(109,39,133,.08), 0 0 30px rgba(245,195,82,.5); }
  50%      { box-shadow: 0 0 0 12px rgba(245,195,82,.15), 0 0 0 22px rgba(109,39,133,.04), 0 0 40px rgba(245,195,82,.6); }
}

/* ============ ACHIEVEMENTS ============ */
.filter-btn {
  padding: .55rem 1.15rem;
  font-size: .82rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--fg-muted);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .2s;
}
.filter-btn:hover { color: var(--accent); border-color: var(--accent-2); }
.filter-btn.active {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 22px -4px rgba(109,39,133,.5);
}

.ach-card {
  overflow: hidden;
  padding: 0;
}
.ach-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-2);
  box-shadow: 0 30px 60px -20px rgba(109,39,133,.4);
}
.ach-card.hidden-card { display: none; }
.ach-img {
  aspect-ratio: 16 / 9;         /* cinematic landscape — consistent with hero/video */
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform .5s ease;
}
.ach-card:hover .ach-img { transform: scale(1.05); }
.ach-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35));
}
.ach-body { padding: 1.4rem 1.5rem 1.6rem; }
.ach-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--glass-bg-strong);
  padding: .25rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
}
.ach-card h3 {
  margin-top: .8rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--fg);
}
.ach-card p {
  margin-top: .45rem;
  font-size: .9rem;
  color: var(--fg-muted);
  line-height: 1.55;
}
.ach-metric {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .02em;
}

/* ============ DIVISIONS ============ */
.division-block {
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
}
.division-block + .division-block { border-top: 1px solid var(--glass-border); }

/* Division tag — each variant uses a tinted version of its accent for the bg
   so the foreground text always reads correctly against ANY parent bg.
   No glass-bg-strong here (that was white in light mode → invisible text). */
.division-tag {
  display: inline-block;
  padding: .45rem 1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 1.2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid transparent;
}
/* Gold tag for dark-purple parent (Real Estate) */
.division-tag.dark {
  background: rgba(245, 195, 82, 0.18);
  border-color: rgba(245, 195, 82, 0.35);
  color: #f5c352;
}
/* Gold tag for slate parent (Machinery) */
.division-tag.slate {
  background: rgba(245, 195, 82, 0.18);
  border-color: rgba(245, 195, 82, 0.35);
  color: #f5c352;
}
/* Mint tag for emerald parent (Agri-Park) */
.division-tag.emerald {
  background: rgba(167, 243, 208, 0.22);
  border-color: rgba(167, 243, 208, 0.4);
  color: #d1fae5;
}
/* Gold tag for amber parent (Mekong Farm) */
.division-tag.amber {
  background: rgba(254, 240, 138, 0.22);
  border-color: rgba(254, 240, 138, 0.4);
  color: #fde68a;
}
/* Purple tag for light parent (Genetic, Indust-Park) — flips for dark mode */
.division-tag.light {
  background: rgba(109, 39, 133, 0.12);
  border-color: rgba(109, 39, 133, 0.25);
  color: var(--accent);
}
[data-theme="dark"] .division-tag.light {
  background: rgba(208, 168, 222, 0.14);
  border-color: rgba(208, 168, 222, 0.3);
  color: var(--accent);
}

.division-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin-bottom: 1.1rem;
}

.division-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: .92;
  max-width: 40rem;
}

.division-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid currentColor;
  border-top-color: var(--glass-border);
}
.division-stats > div { display: flex; flex-direction: column; }
.division-stats .num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--gold-soft);
}
.division-stats.light .num { color: var(--accent); }
.division-stats .lbl {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
  margin-top: .35rem;
}

.division-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 2rem;
  padding: .85rem 1.6rem;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: var(--fg);
  border: 1px solid var(--glass-border);
  font-weight: 600;
  font-size: .9rem;
  border-radius: 999px;
  transition: all .25s;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.3);
}
.division-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  border-color: transparent;
}
.division-cta.light:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}

.div-img {
  aspect-ratio: 1 / 1;          /* square — for the two side images */
  background-size: cover;
  background-position: center;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  transition: transform .4s ease;
  box-shadow: var(--glass-shadow);
}
.div-img:hover { transform: scale(1.02); }
.div-img.col-span-2 { aspect-ratio: 16 / 9; }    /* main hero image — wide cinematic */

/* ============ TESTIMONIALS ============ */
/* Testimonials section is always a dark gradient, so cards use DARK glass
   regardless of site theme (otherwise white text becomes invisible in light mode). */
.testimonial {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.testimonial:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(245, 195, 82, 0.35) !important;
  transform: translateY(-3px);
}
.testimonial p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95) !important;
}
.testimonial footer {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  font-size: .82rem;
}
.testimonial footer strong {
  color: var(--gold-soft);
  font-weight: 600;
  font-size: .95rem;
}
.testimonial footer span { color: rgba(255, 255, 255, 0.7); }
.testimonial svg { color: var(--gold-soft) !important; }

/* ============ FORM ============ */
.form-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: .45rem;
}
.form-input {
  width: 100%;
  padding: .85rem 1.1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  font-size: .95rem;
  color: var(--fg);
  font-family: inherit;
  transition: all .2s;
}
.form-input:focus {
  outline: none;
  background: var(--glass-bg-strong);
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(176,114,197,.18);
}
.form-input.invalid {
  border-color: #ef4444;
  background: rgba(239,68,68,.08);
}
.form-err {
  display: none;
  margin-top: .4rem;
  font-size: .8rem;
  color: #dc2626;
}
.form-err.show { display: block; }

#contact-form { padding: 1.75rem; }

/* ============ CONTACT BOXES ============ */
.contact-box {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.4rem 1.6rem;
}
.contact-box:hover {
  transform: translateY(-2px);
  border-color: var(--accent-2);
}
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--gold-soft);
  border-radius: 12px;
  box-shadow: 0 8px 18px -4px rgba(109,39,133,.4);
}
.contact-box h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .98rem;
  color: var(--fg);
  margin-bottom: .3rem;
}
.contact-box p { font-size: .9rem; color: var(--fg-muted); line-height: 1.6; }

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: var(--glass-bg);
  color: var(--fg);
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all .25s;
}
.social-btn:hover {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--gold-soft);
  transform: translateY(-2px);
  border-color: transparent;
}

/* ============ FOOTER ============ */
footer.bg-brand-950 {
  background: linear-gradient(180deg, rgba(58,7,71,.85), rgba(15,5,20,.95)) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border);
}
.footer-h {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-link {
  color: rgba(255,255,255,.7);
  transition: color .2s, padding-left .2s;
}
.footer-link:hover { color: var(--gold-soft); padding-left: 4px; }

/* ============ SCROLL ANIMATIONS ============ */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ UTILITIES ============ */
#back-to-top {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-border) !important;
  color: var(--fg) !important;
}
#back-to-top.show { opacity: 1; pointer-events: auto; }

@media (max-width: 480px) {
  .orbit-pill { font-size: .7rem; padding: .45rem .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   THEME-AWARE OVERRIDES — every hardcoded Tailwind color routed through tokens
   so light and dark themes are fully consistent.
   ========================================================================== */

/* ------- Text colors ------- */
.text-slate-400 { color: var(--fg-soft) !important; }
.text-slate-500 { color: var(--fg-soft) !important; }
.text-slate-600 { color: var(--fg-muted) !important; }
.text-slate-700,
.text-slate-800,
.text-slate-900 { color: var(--fg) !important; }
.text-brand-800 { color: var(--accent) !important; }

/* "font-semibold text-brand-800" inline strong-tags in About paragraph */
.font-semibold.text-brand-800 {
  color: var(--accent) !important;
  background: linear-gradient(135deg, var(--accent-2), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ------- Background overrides (sections become transparent so aurora shows) ------- */
section.bg-white,
section.bg-slate-50,
#divisions.bg-slate-50 { background: transparent !important; }

/* Testimonials section: keep dark but theme-aware */
section.bg-brand-800 {
  background: linear-gradient(135deg, var(--accent), #220428) !important;
  position: relative;
}
[data-theme="dark"] section.bg-brand-800 {
  background: linear-gradient(135deg, #3a0747, #0a0512) !important;
}

/* ------- Hero: always dark gradient, white text in both themes ------- */
.hero-bg .text-white          { color: #fff !important; }
.hero-bg .text-white\/90      { color: rgba(255,255,255,.92) !important; }
.hero-bg .text-white\/80      { color: rgba(255,255,255,.85) !important; }
.hero-bg .text-white\/60      { color: rgba(255,255,255,.65) !important; }
.hero-bg .ring-white\/20      { border-color: rgba(255,255,255,.25) !important; }
.hero-bg .ring-white\/40      { border-color: rgba(255,255,255,.4) !important; }
.hero-bg .bg-white\/10        { background: rgba(255,255,255,.1) !important; }
.hero-bg .bg-white\/95        { background: rgba(255,255,255,.97) !important; }

/* ------- Mobile menu: theme-aware bg/border ------- */
#mobile-menu.bg-white {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
#mobile-menu.border-slate-200,
#mobile-menu.border-t.border-slate-200 { border-color: var(--glass-border) !important; }

/* ------- Hover links pointing to brand purple ------- */
a.hover\:text-brand-800:hover { color: var(--accent) !important; }

/* ------- Contact form + map: theme-aware rings ------- */
#contact-form.bg-white { background: var(--glass-bg) !important; }
#contact-form.ring-slate-100,
.ring-slate-100 { box-shadow: 0 0 0 1px var(--glass-border); }
[data-theme="dark"] #contact-form { background: var(--glass-bg) !important; }

/* Map wrapper */
.rounded-2xl.overflow-hidden.shadow-xl.ring-1.ring-slate-100 {
  border: 1px solid var(--glass-border);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.25);
}
[data-theme="dark"] iframe {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.7) brightness(0.85);
}

/* ------- Form success callout ------- */
#form-success {
  background: var(--glass-bg-strong) !important;
  color: var(--accent) !important;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
[data-theme="dark"] #form-success {
  color: #6ee7b7 !important;
  background: rgba(16,185,129,.15) !important;
  border-color: rgba(16,185,129,.3);
}

/* ------- Footer: always dark backdrop in both themes ------- */
footer.bg-brand-950 {
  background: linear-gradient(180deg, rgba(58,7,71,.85), rgba(15,5,20,.95)) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border);
  color: rgba(255,255,255,.75) !important;
}
footer .text-slate-300 { color: rgba(255,255,255,.78) !important; }
footer .text-slate-400 { color: rgba(255,255,255,.55) !important; }
footer .bg-white { background: #fff !important; } /* logo tile stays white */

/* Newsletter input on footer */
#newsletter-form input {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
#newsletter-form input::placeholder { color: rgba(255,255,255,.45); }
#newsletter-form button {
  background: var(--gold) !important;
  color: #220428 !important;
}
#newsletter-form button:hover { background: var(--gold-soft) !important; }
#newsletter-msg { color: #6ee7b7 !important; }

/* ------- Divisions: theme-aware backgrounds ------- */
/* "dark" theme divisions (gradient brand-800 to brand-950) — keep as-is but theme tints */
[data-theme="dark"] .division-block.from-brand-800 {
  background: linear-gradient(135deg, #2a0540, #0a0512) !important;
}

/* "light" theme divisions (Genetic + Indust-Park) — flip to dark in dark mode */
.division-block.bg-white {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}
.division-block.bg-white .text-slate-800,
.division-block.bg-white .text-slate-900 { color: var(--fg) !important; }
.division-block.bg-white .text-slate-600 { color: var(--fg-muted) !important; }

/* "slate" theme division (Machinery) — keep dark in both themes */
.division-block.bg-slate-900 {
  background: linear-gradient(135deg, #1a1325, #0a0512) !important;
}

/* ------- Achievements filter container ------- */
#ach-filters { background: transparent; }

/* ------- Subscription/inbox emerald colors keep tone ------- */
.text-emerald-400 { color: #6ee7b7 !important; }
.text-emerald-800 { color: #047857 !important; }
[data-theme="dark"] .text-emerald-800 { color: #6ee7b7 !important; }
.bg-emerald-50    { background: rgba(16,185,129,.08) !important; }
[data-theme="dark"] .bg-emerald-50 { background: rgba(16,185,129,.12) !important; }
.ring-emerald-200 { box-shadow: 0 0 0 1px rgba(16,185,129,.3); }

/* ------- Brand-950 navbar logo tile (light card on dark sidebar) ------- */
.bg-brand-950, .from-brand-900, .to-brand-900, .bg-brand-900 {
  /* keep brand-900 utility class behaviour for inline use */
}

/* ------- Scroll indicator in hero ("Scroll" link) ------- */
.hero-bg a[href="#about"].text-white\/70 { color: rgba(255,255,255,.7) !important; }
.hero-bg a[href="#about"]:hover { color: #fff !important; }

/* ------- About leadership subtitle ------- */
#about .text-slate-500 { color: var(--fg-soft) !important; }