/* ════════════════════════════════════════════════════════════════════════════
   LUX.CSS — ALLEANZA S.A.M. · "EMERALD RESERVE" DESIGN SYSTEM
   The definitive premium layer. Loaded LAST on every page: it re-maps every
   design token of the legacy layers (style.css + command.css + patches) into
   one coherent luxury identity — deep forest black, dark emerald, jade glass
   and warm gold — then rebuilds depth, light, typography and motion on top.
   ──────────────────────────────────────────────────────────────────────────
   INDEX
   01. Design tokens (full remap of legacy token systems)
   02. Global canvas: ambient background, grain, vignette, selection, scrollbar
   03. Typography scale
   04. Header / navigation / dropdowns / mobile menu / bottom nav
   05. Buttons
   06. Cards, panels, glass surfaces
   07. Hero
   08. Section rhythm & content blocks
   09. Forms, tables, badges, toasts, loaders
   10. Footer
   11. Page transitions & preloader
   12. Responsive & accessibility
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 01 · DESIGN TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Luxury core */
  --lux-void:    #030807;
  --lux-deep:    #04100A;
  --lux-surface: #06150E;
  --lux-raised:  #0A1D13;
  --lux-panel:   #0D2418;
  --lux-emerald: #2BE39B;
  --lux-emerald-deep: #0E5C3F;
  --lux-jade:    #35D9B8;
  --lux-gold:    #E2B95C;
  --lux-gold-2:  #F2D48A;
  --lux-gold-deep: #9C7A2E;
  --lux-ink:     #EDF7F0;
  --lux-ink-2:   #A5C2B0;
  --lux-ink-3:   #6D8E7B;

  /* Remap: style.css design system */
  --bg-void:    var(--lux-void);
  --bg-deep:    var(--lux-deep);
  --bg-surface: var(--lux-surface);
  --bg-raised:  var(--lux-raised);
  --bg-panel:   var(--lux-panel);
  --glass-base:  rgba(6, 18, 12, 0.76);
  --glass-mid:   rgba(10, 28, 19, 0.60);
  --glass-light: rgba(43, 227, 155, 0.06);
  --glass-blur:  blur(24px) saturate(1.6);
  --glass-blur-heavy: blur(42px) saturate(1.9);
  --ice:     var(--lux-emerald);
  --ice-2:   #5FF0BD;
  --ice-dim: rgba(43, 227, 155, 0.13);
  --ice-glow: 0 0 24px rgba(43, 227, 155, 0.34), 0 0 64px rgba(43, 227, 155, 0.12);
  --ice-glow-sm: 0 0 12px rgba(43, 227, 155, 0.38);
  --elec:     var(--lux-jade);
  --elec-dim: rgba(53, 217, 184, 0.14);
  --gold:     var(--lux-gold);
  --gold-2:   var(--lux-gold-2);
  --gold-dim: rgba(226, 185, 92, 0.14);
  --gold-glow: 0 0 22px rgba(226, 185, 92, 0.38);
  --amber:     var(--lux-gold);
  --amber-dim: rgba(226, 185, 92, 0.14);
  --status-good: #3DE08A;
  --status-good-dim: rgba(61, 224, 138, 0.12);
  --t-prime: var(--lux-ink);
  --t-mid:   var(--lux-ink-2);
  --t-dim:   var(--lux-ink-3);
  --t-faint: #2A3F33;
  --b-ice:  1px solid rgba(43, 227, 155, 0.22);
  --b-sub:  1px solid rgba(255, 255, 255, 0.06);
  --b-gold: 1px solid rgba(226, 185, 92, 0.30);

  /* Remap: command.css operational system */
  --cc-bg:         var(--lux-deep);
  --cc-bg-2:       var(--lux-surface);
  --cc-bg-3:       var(--lux-raised);
  --cc-panel:      rgba(8, 22, 14, 0.74);
  --cc-panel-2:    rgba(12, 30, 20, 0.58);
  --cc-panel-solid:rgba(6, 17, 11, 0.94);
  --cc-border:     rgba(88, 168, 128, 0.28);
  --cc-border-lit: rgba(122, 232, 178, 0.58);
  --cc-border-dim: rgba(66, 110, 86, 0.20);
  --cc-glow:       0 0 0 1px rgba(80, 160, 118, 0.13), 0 14px 40px rgba(0, 0, 0, 0.55);
  --cc-glow-lit:   0 0 0 1px rgba(122, 232, 178, 0.26), 0 0 28px rgba(43, 227, 155, 0.18), 0 18px 48px rgba(0, 0, 0, 0.6);
  --cc-glow-green: 0 0 0 1px rgba(61, 224, 138, 0.2), 0 0 20px rgba(61, 224, 138, 0.16), 0 10px 30px rgba(0, 0, 0, 0.5);
  --cc-green:   #3DE08A;
  --cc-green-2: #28C070;
  --cc-green-3: rgba(61, 224, 138, 0.12);
  --cc-amber:   var(--lux-gold);
  --cc-amber-2: var(--lux-gold-2);
  --cc-amber-3: rgba(226, 185, 92, 0.13);
  --cc-cyan:    var(--lux-jade);
  --cc-cyan-2:  #22BD9C;
  --cc-cyan-3:  rgba(53, 217, 184, 0.11);
  --cc-red:     #FF5468;
  --cc-red-2:   #E8384A;
  --cc-purple:  #B49CFF;
  --cc-teal:    #1ADBA0;
  --cc-text:    var(--lux-ink);
  --cc-text-2:  var(--lux-ink-2);
  --cc-text-3:  var(--lux-ink-3);
  --cc-text-dim:#41584A;
  --cc-blur: blur(22px) saturate(1.5) brightness(1.04);
  --cc-blur-heavy: blur(34px) saturate(1.8) brightness(1.06);

  /* Motion */
  --lux-ease:      cubic-bezier(0.22, 0.72, 0.18, 1);
  --lux-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --lux-ease-back: cubic-bezier(0.34, 1.45, 0.44, 1);
  --lux-t-fast: .22s var(--lux-ease);
  --lux-t-med:  .42s var(--lux-ease);
  --lux-t-slow: .8s var(--lux-ease-out);

  /* Surfaces & shadows */
  --lux-radius: 18px;
  --lux-radius-lg: 26px;
  --lux-shadow-1: 0 2px 6px rgba(0,0,0,.35), 0 10px 26px -8px rgba(0,0,0,.5);
  --lux-shadow-2: 0 4px 14px rgba(0,0,0,.42), 0 24px 60px -16px rgba(0,0,0,.66);
  --lux-shadow-3: 0 8px 22px rgba(0,0,0,.5), 0 42px 90px -20px rgba(0,0,0,.75);
  --lux-edge: inset 0 1px 0 rgba(255,255,255,.07);

  accent-color: var(--lux-emerald);
}

/* ── 02 · GLOBAL CANVAS ──────────────────────────────────────────────────── */
html { background: var(--lux-void); }
body {
  background:
    radial-gradient(1200px 700px at 82% -10%, rgba(14, 92, 63, .20), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(9, 60, 40, .18), transparent 55%),
    radial-gradient(1400px 900px at 50% 120%, rgba(226, 185, 92, .05), transparent 60%),
    linear-gradient(180deg, #04100A 0%, #030807 46%, #02120B 100%);
  background-attachment: fixed;
  color: var(--lux-ink);
}

/* cinematic film grain + vignette (pure CSS, zero requests) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: .5; mix-blend-mode: overlay;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(1, 6, 4, .55) 100%);
}
body > header, body > main, body > footer, body > nav,
body > .mobile-menu, body > .admin-shell, body > .admin-login { position: relative; z-index: 2; }

/* environmental backdrop: deep forest grade instead of blue */
.env-backdrop { filter: brightness(.30) saturate(.9) contrast(1.1) hue-rotate(-6deg); }
.env-backdrop::after {
  background:
    radial-gradient(ellipse 80% 60% at 72% 28%, rgba(14, 92, 63, .32), transparent 62%),
    radial-gradient(ellipse 42% 42% at 18% 78%, rgba(226, 185, 92, .08), transparent 52%),
    linear-gradient(180deg, rgba(3, 10, 7, .82) 0%, rgba(3, 10, 7, .46) 30%, rgba(3, 10, 7, .32) 55%, rgba(2, 8, 6, .96) 100%);
}
.env-fog { opacity: .5; }

/* refined aurora recolor (premium-2026 layer) */
.pm-aurora { opacity: .44; }
.pm-aurora .a1 { background: radial-gradient(circle at 30% 30%, rgba(43, 227, 155, .15), transparent 62%); }
.pm-aurora .a2 { background: radial-gradient(circle at 60% 40%, rgba(53, 217, 184, .11), transparent 60%); }
.pm-aurora .a3 { background: radial-gradient(circle at 50% 60%, rgba(226, 185, 92, .11), transparent 58%); }

::selection { background: rgba(226, 185, 92, .34); color: #FFF9EC; }
* { scrollbar-width: thin; scrollbar-color: rgba(43, 227, 155, .34) rgba(6, 16, 11, .5); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(4, 12, 8, .7); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(43, 227, 155, .42), rgba(226, 185, 92, .30));
  border-radius: 8px; border: 2px solid rgba(4, 12, 8, .8);
}
:focus-visible { outline: 2px solid var(--lux-gold) !important; outline-offset: 3px; }

/* ── 03 · TYPOGRAPHY ─────────────────────────────────────────────────────── */
h1, h2, h3, .hero2-title, .article-title, .display-xl, .display-lg {
  font-family: var(--f-display, 'Syne', sans-serif);
  letter-spacing: -.015em;
  text-rendering: optimizeLegibility;
}
h2 { font-weight: 800; }
p { line-height: 1.68; }

.lux-serif, .hero2-motto {
  font-family: 'Playfair Display', 'Syne', serif !important;
  font-style: italic;
  font-weight: 600 !important;
  letter-spacing: .01em;
}

/* golden kicker / eyebrow */
.monster-kicker, .cc-head-title, .home-section-head .monster-kicker {
  color: var(--lux-gold) !important;
  font-family: var(--f-mono, monospace);
  letter-spacing: .22em !important;
  text-transform: uppercase;
  font-size: .68rem !important;
  display: inline-flex; align-items: center; gap: .6rem;
}
.monster-kicker::before {
  content: ""; width: 26px; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--lux-gold), transparent);
}

/* section titles: subtle gradient ink + gold underline accent */
.monster-head h2, .home-section-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.3rem) !important;
  line-height: 1.12;
  background: linear-gradient(180deg, #F4FBF6 0%, #C7DCCd 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.monster-head, .home-section-head { position: relative; }

/* gold highlight word (hero line 2 etc.) */
.hero2-title .amber, .amber {
  background: linear-gradient(115deg, #F5DFA1 0%, var(--lux-gold) 42%, #B98F35 74%, #F2D48A 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lux-gold-sheen 7s ease-in-out infinite;
}
@keyframes lux-gold-sheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ── 04 · HEADER / NAVIGATION ────────────────────────────────────────────── */
.site-header {
  background: linear-gradient(180deg, rgba(4, 14, 9, .88), rgba(4, 14, 9, .66)) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  backdrop-filter: blur(26px) saturate(1.6);
  border-bottom: 1px solid rgba(122, 232, 178, .14) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 50px -22px rgba(0,0,0,.8);
  transition: transform .45s var(--lux-ease), background .35s ease, box-shadow .35s ease;
}
.site-header.scrolled {
  background: linear-gradient(180deg, rgba(3, 11, 7, .94), rgba(3, 11, 7, .82)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -18px rgba(0,0,0,.9);
}
.site-header.lux-hidden { transform: translateY(-110%); }
.site-header .brand-mark {
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(226,185,92,.4), 0 0 22px rgba(226,185,92,.22), 0 6px 18px rgba(0,0,0,.5);
  transition: transform var(--lux-t-med), box-shadow var(--lux-t-med);
}
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.06); box-shadow: 0 0 0 2px rgba(242,212,138,.7), 0 0 34px rgba(226,185,92,.4), 0 8px 22px rgba(0,0,0,.55); }
.brand-word { letter-spacing: .02em; }
.brand-word small { color: var(--lux-ink-3); }

/* nav links: animated gradient underline + soft lift */
header .nav-links > li > a, header .nav-links .nav-group > button {
  position: relative;
  padding: .55rem .85rem !important;
  border-radius: 10px;
  color: var(--lux-ink-2);
  font-weight: 600;
  letter-spacing: .015em;
  transition: color var(--lux-t-fast), background var(--lux-t-fast), transform var(--lux-t-fast);
}
header .nav-links > li > a::after, header .nav-links .nav-group > button::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .28rem; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lux-emerald), var(--lux-gold));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .38s var(--lux-ease);
}
header .nav-links > li > a:hover, header .nav-links .nav-group > button:hover,
header .nav-links .nav-group.open > button {
  color: #fff; background: rgba(43, 227, 155, .07);
}
header .nav-links > li > a:hover::after, header .nav-links .nav-group > button:hover::after,
header .nav-links .nav-group.open > button::after { transform: scaleX(1); }

/* the ONLY persistent highlight: current page / current section */
header .nav-links a.active,
header .nav-links .nav-group.lux-current > button {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(43,227,155,.13), rgba(43,227,155,.05)) !important;
  box-shadow: inset 0 0 0 1px rgba(122,232,178,.22);
}
header .nav-links a.active::after,
header .nav-links .nav-group.lux-current > button::after { transform: scaleX(1); }

/* Dropdown: stable hover (invisible bridge kills the gap), glass panel,
   spring-in animation, item micro-interactions */
header .nav-group { position: relative; }
header .nav-group::after {
  /* hover bridge: keeps :hover alive while the cursor travels to the panel */
  content: ""; position: absolute; left: -14px; right: -14px; top: 100%; height: 22px;
}
header .nav-group .nav-dropdown {
  min-width: 264px;
  padding: .55rem !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(7, 20, 13, .97), rgba(5, 15, 10, .99)) !important;
  border: 1px solid rgba(122, 232, 178, .2) !important;
  box-shadow: var(--lux-shadow-3), 0 0 0 1px rgba(0,0,0,.4), var(--lux-edge) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.7);
  backdrop-filter: blur(30px) saturate(1.7);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px) scale(.97);
  transform-origin: top center;
  transition: opacity .32s var(--lux-ease), transform .38s var(--lux-ease-back), visibility 0s linear .32s;
}
header .nav-group.open .nav-dropdown,
header .nav-group:hover .nav-dropdown,
header .nav-group:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(6px) scale(1);
  transition: opacity .3s var(--lux-ease), transform .42s var(--lux-ease-back), visibility 0s;
}
header .nav-group .nav-dropdown a {
  display: flex; align-items: center; gap: .6rem;
  padding: .62rem .8rem !important;
  border-radius: 10px !important;
  color: var(--lux-ink-2) !important;
  font-weight: 550;
  transition: background var(--lux-t-fast), color var(--lux-t-fast), padding-left var(--lux-t-fast);
  position: relative;
}
header .nav-group .nav-dropdown a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--lux-gold);
  opacity: 0; transform: scale(0);
  transition: opacity var(--lux-t-fast), transform .3s var(--lux-ease-back);
}
header .nav-group .nav-dropdown a:hover {
  background: linear-gradient(90deg, rgba(43,227,155,.12), rgba(43,227,155,.03)) !important;
  color: #fff !important;
  padding-left: 1rem !important;
}
header .nav-group .nav-dropdown a:hover::before { opacity: 1; transform: scale(1); }
header .nav-group .nav-dropdown a.active { color: var(--lux-gold-2) !important; }
header .nav-group .nav-dropdown a.active::before { opacity: 1; transform: scale(1); }

/* language switcher + burger */
.lang-btn, .burger {
  border-radius: 999px !important;
  border: 1px solid rgba(122,232,178,.18) !important;
  background: rgba(10, 26, 17, .5) !important;
  transition: border-color var(--lux-t-fast), box-shadow var(--lux-t-fast), background var(--lux-t-fast);
}
.lang-btn:hover, .burger:hover {
  border-color: rgba(226,185,92,.45) !important;
  box-shadow: 0 0 18px rgba(226,185,92,.15);
  background: rgba(14, 34, 22, .7) !important;
}
.lang-menu {
  border-radius: 14px !important;
  background: rgba(6, 17, 11, .97) !important;
  border: 1px solid rgba(122,232,178,.2) !important;
  box-shadow: var(--lux-shadow-3) !important;
  overflow: hidden;
}
.lang-menu button { transition: background var(--lux-t-fast), color var(--lux-t-fast), padding-left var(--lux-t-fast); }
.lang-menu button:hover { background: rgba(43,227,155,.1) !important; color: #fff; padding-left: 1.2rem; }

/* mobile slide-in menu: full glass */
.mobile-menu {
  background: linear-gradient(200deg, rgba(6, 18, 12, .97), rgba(3, 10, 7, .99)) !important;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  border-left: 1px solid rgba(122,232,178,.16) !important;
  box-shadow: -30px 0 80px rgba(0,0,0,.7) !important;
}
.mobile-menu .nav-links a {
  border-radius: 12px;
  padding: .85rem 1rem !important;
  font-size: 1.02rem;
  border: 1px solid transparent;
  transition: background var(--lux-t-fast), border-color var(--lux-t-fast), padding-left var(--lux-t-fast);
}
.mobile-menu .nav-links a:hover, .mobile-menu .nav-links a.active {
  background: rgba(43,227,155,.09);
  border-color: rgba(122,232,178,.2);
  padding-left: 1.3rem !important;
}

/* bottom nav (mobile): floating glass dock */
.bottom-nav {
  background: rgba(4, 13, 8, .9) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border-top: 1px solid rgba(122,232,178,.16) !important;
  box-shadow: 0 -18px 50px -20px rgba(0,0,0,.85);
}
.bottom-nav a { transition: color var(--lux-t-fast), transform var(--lux-t-fast); }
.bottom-nav a.active { color: var(--lux-gold-2) !important; }
.bottom-nav a:active { transform: scale(.92); }

/* ── 05 · BUTTONS ────────────────────────────────────────────────────────── */
.btn, .hero2-cta-btn {
  position: relative;
  overflow: hidden;
  border-radius: 14px !important;
  font-weight: 650;
  letter-spacing: .015em;
  transform: translateZ(0);
  transition: transform .3s var(--lux-ease-back), box-shadow .3s var(--lux-ease),
              border-color .3s ease, background .3s ease, color .3s ease, filter .3s ease;
}
/* light sweep on every primary action */
.btn::before, .hero2-cta-btn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.14) 48%, transparent 64%);
  transform: translateX(-130%) skewX(-8deg);
  transition: transform .75s var(--lux-ease);
}
.btn:hover::before, .hero2-cta-btn:hover::before { transform: translateX(130%) skewX(-8deg); }

.btn-primary, .btn-solid, .hero2-cta-btn.primary {
  background: linear-gradient(135deg, #17BE7B 0%, #0E9A62 55%, #0C7A50 100%) !important;
  border: 1px solid rgba(122,232,178,.5) !important;
  color: #04140C !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 12px 30px -10px rgba(23,190,123,.55), 0 3px 9px rgba(0,0,0,.4);
}
.btn-primary:hover, .btn-solid:hover, .hero2-cta-btn.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 20px 44px -12px rgba(23,190,123,.65), 0 0 30px rgba(43,227,155,.25), 0 5px 14px rgba(0,0,0,.45);
  filter: brightness(1.08);
}
.btn-primary:active, .btn-solid:active, .hero2-cta-btn:active { transform: translateY(-1px) scale(.97); transition-duration: .08s; }

.btn-gold {
  background: linear-gradient(135deg, #F2D48A 0%, #D9AE4E 48%, #B98F35 100%) !important;
  color: #241A05 !important;
  border: 1px solid rgba(242,212,138,.65) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 12px 30px -10px rgba(217,174,78,.55), 0 3px 9px rgba(0,0,0,.4);
}
.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 20px 44px -12px rgba(217,174,78,.7), 0 0 32px rgba(226,185,92,.3);
  filter: brightness(1.06);
}

.btn-ghost, .hero2-cta-btn.secondary, .hero2-cta-btn:not(.primary) {
  background: rgba(10, 26, 17, .5) !important;
  border: 1px solid rgba(122,232,178,.22) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover, .hero2-cta-btn.secondary:hover, .hero2-cta-btn:not(.primary):hover {
  border-color: rgba(226,185,92,.5) !important;
  background: rgba(16, 38, 25, .72) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -14px rgba(0,0,0,.7), 0 0 22px rgba(226,185,92,.12);
  color: #fff;
}
.btn-danger { box-shadow: 0 10px 26px -12px rgba(255,84,104,.5); }

/* ripple ink (spawned by lux.js) */
.lux-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 65%);
  transform: scale(0); opacity: .8;
  animation: lux-ripple .65s var(--lux-ease-out) forwards;
}
@keyframes lux-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ── 06 · CARDS / PANELS / GLASS ─────────────────────────────────────────── */
.cc-panel, .panel, .news-card, .pcard, .qa-card, .mini-resource-card,
.home-hub-card, .doc-card, .res-card, .bear-card, .contact-info-card,
.gallery-tile, .partner-chip, .kpi-card, .stat-card, .chart-box {
  border-radius: var(--lux-radius) !important;
  border: 1px solid rgba(110, 190, 148, .16) !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(10, 26, 17, .82), rgba(6, 16, 11, .9)) !important;
  box-shadow: var(--lux-shadow-1), var(--lux-edge) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  transition: transform .38s var(--lux-ease), box-shadow .38s var(--lux-ease), border-color .38s ease;
}
.cc-panel:hover, .panel:hover, .home-hub-card:hover, .partner-chip:hover,
.news-card:hover, .pcard:hover, .qa-card:hover, .doc-card:hover, .res-card:hover,
.bear-card:hover, .mini-resource-card:hover {
  border-color: rgba(122, 232, 178, .34) !important;
  box-shadow: var(--lux-shadow-2), 0 0 34px -6px rgba(43, 227, 155, .16), var(--lux-edge) !important;
}
.news-card:hover, .pcard:hover, .home-hub-card:hover, .qa-card:hover,
.doc-card:hover, .res-card:hover, .bear-card:hover, .partner-chip:hover { transform: translateY(-6px); }

/* animated gradient hairline on card hover (gold→emerald orbit) */
.news-card, .pcard, .home-hub-card, .partner-chip, .qa-card, .kpi-card, .stat-card { position: relative; }
.news-card::before, .pcard::before, .home-hub-card::before, .partner-chip::before,
.qa-card::before, .kpi-card::before, .stat-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--lux-orbit, 140deg),
    transparent 0%, rgba(43,227,155,.0) 18%, rgba(43,227,155,.55) 32%,
    rgba(226,185,92,.7) 50%, rgba(43,227,155,.55) 68%, transparent 82%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s ease;
  pointer-events: none; z-index: 2;
}
@property --lux-orbit { syntax: "<angle>"; initial-value: 140deg; inherits: false; }
.news-card:hover::before, .pcard:hover::before, .home-hub-card:hover::before,
.partner-chip:hover::before, .qa-card:hover::before {
  opacity: 1;
  animation: lux-orbit 3.2s linear infinite;
}
@keyframes lux-orbit { to { --lux-orbit: 500deg; } }

/* HUD corner brackets → gold */
.hud-c { border-color: rgba(226, 185, 92, .55) !important; }
.hud-frame { border-radius: var(--lux-radius-lg) !important; }

/* panel headers */
.cc-head {
  border-bottom: 1px solid rgba(110, 190, 148, .14) !important;
}
.cc-head-right { color: var(--lux-ink-3); }
.cc-dot.green { background: var(--cc-green); box-shadow: 0 0 10px rgba(61,224,138,.8); }
.cc-dot.amber { background: var(--lux-gold); box-shadow: 0 0 10px rgba(226,185,92,.8); }
.cc-dot.cyan  { background: var(--lux-jade); box-shadow: 0 0 10px rgba(53,217,184,.8); }

/* home hub cards: icon medallion + arrow slide */
.home-hub-card { overflow: hidden; }
.home-hub-ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: none;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(43,227,155,.16), rgba(226,185,92,.1));
  border: 1px solid rgba(122,232,178,.24);
  box-shadow: var(--lux-edge), 0 6px 16px -6px rgba(0,0,0,.6);
  font-size: 1.45rem;
  transition: transform .35s var(--lux-ease-back), box-shadow .35s ease;
}
.home-hub-card:hover .home-hub-ico {
  transform: scale(1.12) rotate(-5deg);
  box-shadow: var(--lux-edge), 0 10px 24px -8px rgba(0,0,0,.7), 0 0 22px rgba(43,227,155,.25);
}
.home-hub-arrow { transition: transform .35s var(--lux-ease-back), color .3s ease; color: var(--lux-ink-3); }
.home-hub-card:hover .home-hub-arrow { transform: translateX(6px); color: var(--lux-gold-2); }

/* metric tiles */
.hero2-metric, .mini-stat {
  border-radius: 16px !important;
  border: 1px solid rgba(110, 190, 148, .16) !important;
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,0) 40%),
              rgba(8, 22, 14, .66) !important;
  box-shadow: var(--lux-shadow-1), var(--lux-edge) !important;
  transition: transform .35s var(--lux-ease), border-color .35s ease, box-shadow .35s ease;
}
.hero2-metric:hover, .mini-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(226,185,92,.4) !important;
  box-shadow: var(--lux-shadow-2), 0 0 26px -4px rgba(226,185,92,.2), var(--lux-edge) !important;
}
.hero2-metric-val, .mini-stat-num {
  font-family: var(--f-display) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF7E2 0%, var(--lux-gold) 85%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  filter: drop-shadow(0 4px 14px rgba(226,185,92,.25));
}
.hero2-metric-lbl, .mini-stat-label { color: var(--lux-ink-3) !important; letter-spacing: .08em; }
.mini-stat-ico {
  color: var(--lux-emerald);
  background: rgba(43,227,155,.09);
  border-radius: 12px;
  border: 1px solid rgba(122,232,178,.2);
}

/* gallery preview strip */
.cinema-gallery img, .gallery-tile img { transition: transform .8s var(--lux-ease), filter .8s ease; }
.cinema-gallery a:hover img, .gallery-tile:hover img { transform: scale(1.07); filter: saturate(1.15) brightness(1.06); }

/* activity feed rows */
.activity-row, #activity-feed > * {
  border-radius: 12px;
  transition: background var(--lux-t-fast), transform var(--lux-t-fast), padding-left var(--lux-t-fast);
}
.activity-row:hover, #activity-feed > *:hover { background: rgba(43,227,155,.06); }

/* partner chips: numbered gold monogram */
.partner-chip span:first-child {
  font-family: var(--f-mono);
  color: var(--lux-gold) !important;
  border: 1px solid rgba(226,185,92,.34);
  border-radius: 999px;
  padding: .15rem .55rem;
  background: rgba(226,185,92,.07);
}

/* ── 07 · HERO ───────────────────────────────────────────────────────────── */
.hero2, .monster-hero { position: relative; }

/* animated light rays behind hero copy */
.lux-rays {
  position: absolute; inset: -8% -20%; z-index: -1; pointer-events: none;
  background:
    conic-gradient(from 190deg at 18% 12%, transparent 0deg, rgba(43,227,155,.07) 8deg, transparent 22deg),
    conic-gradient(from 205deg at 24% 4%, transparent 0deg, rgba(226,185,92,.06) 10deg, transparent 26deg),
    conic-gradient(from 175deg at 10% 20%, transparent 0deg, rgba(53,217,184,.05) 9deg, transparent 20deg);
  filter: blur(10px);
  animation: lux-rays-breathe 9s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
@keyframes lux-rays-breathe { from { opacity: .55; transform: translateY(0); } to { opacity: 1; transform: translateY(-14px); } }

.hero2-logo-ring {
  position: relative;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px rgba(226,185,92,.35), 0 0 34px rgba(226,185,92,.18), 0 12px 30px rgba(0,0,0,.55) !important;
}
.hero2-logo-ring::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px dashed rgba(226,185,92,.4);
  animation: lux-ring-spin 26s linear infinite;
}
@keyframes lux-ring-spin { to { transform: rotate(360deg); } }

.hero2-title, .monster-title {
  font-size: clamp(2.1rem, 4.6vw, 3.9rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.hero2-sub, .monster-sub { color: var(--lux-ink-2) !important; max-width: 56ch; }
.hero2-mission.monster-badge, .monster-badge {
  border-radius: 999px !important;
  border: 1px solid rgba(226,185,92,.32) !important;
  background: linear-gradient(90deg, rgba(226,185,92,.1), rgba(226,185,92,.02)) !important;
  box-shadow: var(--lux-edge);
}

/* monitoring panel: premium frame w/ inner glow */
.monitoring-panel {
  box-shadow: var(--lux-shadow-2), inset 0 0 60px rgba(43,227,155,.04), var(--lux-edge) !important;
}
.home-map-wrap { border-radius: 14px; overflow: hidden; }
#home-map { filter: saturate(1.05) contrast(1.04); }
.map-layer-btn {
  border-radius: 999px !important;
  border: 1px solid rgba(122,232,178,.22) !important;
  background: rgba(5, 14, 9, .8) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: all var(--lux-t-fast);
}
.map-layer-btn:hover { border-color: rgba(226,185,92,.5) !important; transform: translateY(-1px); }
.map-layer-btn.active {
  background: linear-gradient(135deg, #17BE7B, #0C7A50) !important;
  color: #04140C !important; font-weight: 700;
  border-color: rgba(122,232,178,.6) !important;
  box-shadow: 0 6px 18px -6px rgba(23,190,123,.6);
}
.home-map-foot, .home-panel-foot, .home-seeall {
  color: var(--lux-gold) !important;
  transition: color var(--lux-t-fast), letter-spacing var(--lux-t-fast);
}
.home-map-foot:hover, .home-panel-foot:hover, .home-seeall:hover {
  color: var(--lux-gold-2) !important; letter-spacing: .02em;
}

/* scroll cue */
.lux-scroll-cue {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: 26px; height: 42px; border-radius: 999px;
  border: 1.5px solid rgba(226,185,92,.4);
  display: none; pointer-events: none;
}
.lux-scroll-cue::before {
  content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px;
  border-radius: 4px; transform: translateX(-50%);
  background: var(--lux-gold);
  animation: lux-cue 1.8s var(--lux-ease) infinite;
}
@keyframes lux-cue { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 14px); } }

/* ── 08 · SECTION RHYTHM ─────────────────────────────────────────────────── */
.monster-section { margin-block: clamp(3.2rem, 7vw, 6rem) !important; }
.monster-section:first-of-type { margin-top: clamp(1.4rem, 3vw, 2.4rem) !important; }
.monster-head { margin-bottom: 1.4rem !important; }
.monster-container { max-width: min(1440px, 94vw) !important; }

/* reveal engine base states (lux.js drives .lux-in) */
.lux-reveal { opacity: 0; transform: translateY(34px); filter: blur(6px); will-change: opacity, transform, filter; }
.lux-reveal.lux-in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity .9s var(--lux-ease-out), transform .9s var(--lux-ease-out), filter .7s ease;
}
.lux-stagger > * { opacity: 0; transform: translateY(26px); }
.lux-stagger.lux-in > * {
  opacity: 1; transform: none;
  transition: opacity .8s var(--lux-ease-out), transform .8s var(--lux-ease-out);
  transition-delay: calc(var(--lux-i, 0) * 90ms);
}
/* no-JS / slow-JS safety: force reveal after 2.2s */
@keyframes lux-force-reveal { to { opacity: 1; transform: none; filter: none; } }
.lux-reveal, .lux-stagger > * { animation: lux-force-reveal .7s ease 2.2s forwards; }
.lux-reveal.lux-in, .lux-stagger.lux-in > * { animation: none; }

/* ethics banner: gold-trimmed marquee panel */
.ethics-preview-card {
  background:
    linear-gradient(120deg, rgba(226,185,92,.09), rgba(226,185,92,0) 42%),
    linear-gradient(180deg, rgba(10, 26, 17, .85), rgba(6, 16, 11, .92)) !important;
  border: 1px solid rgba(226,185,92,.26) !important;
}

/* footer social / generic icon buttons */
.icon-btn, .social-links a {
  transition: transform .3s var(--lux-ease-back), color var(--lux-t-fast), box-shadow var(--lux-t-fast);
}
.icon-btn:hover, .social-links a:hover { transform: translateY(-3px) scale(1.08); color: var(--lux-gold-2); }

/* ── 09 · FORMS / TABLES / BADGES / TOASTS / LOADERS ─────────────────────── */
.input, .select, textarea.input, select.select, input.input {
  border-radius: 12px !important;
  border: 1px solid rgba(110,190,148,.22) !important;
  background: rgba(5, 14, 9, .62) !important;
  transition: border-color var(--lux-t-fast), box-shadow var(--lux-t-fast), background var(--lux-t-fast);
}
.input:hover, .select:hover { border-color: rgba(122,232,178,.4) !important; }
.input:focus, .select:focus, textarea.input:focus {
  border-color: rgba(43,227,155,.65) !important;
  box-shadow: 0 0 0 3px rgba(43,227,155,.14), 0 0 24px -4px rgba(43,227,155,.25) !important;
  background: rgba(6, 18, 12, .8) !important;
  outline: none !important;
}
label { letter-spacing: .02em; }

.data-table th {
  color: var(--lux-gold) !important;
  letter-spacing: .1em; text-transform: uppercase; font-size: .68rem !important;
  border-bottom: 1px solid rgba(226,185,92,.22) !important;
}
.data-table tr { transition: background var(--lux-t-fast); }
.data-table tbody tr:hover { background: rgba(43,227,155,.05) !important; }
.table-wrap { border-radius: var(--lux-radius); border: 1px solid rgba(110,190,148,.14); }

.badge, .badge-count, .tag {
  border-radius: 999px !important;
  letter-spacing: .04em;
}
.badge-count { background: linear-gradient(135deg, #F2D48A, #D9AE4E) !important; color: #241A05 !important; font-weight: 800; box-shadow: 0 0 14px rgba(226,185,92,.4); }

.toast {
  border-radius: 14px !important;
  border: 1px solid rgba(122,232,178,.3) !important;
  background: rgba(6, 17, 11, .96) !important;
  box-shadow: var(--lux-shadow-3), 0 0 30px -8px rgba(43,227,155,.3) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* premium loader: twin orbit */
.spinner {
  border: 0 !important;
  width: 44px !important; height: 44px !important;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0 300deg, var(--lux-emerald) 355deg, transparent 360deg),
    conic-gradient(from 180deg, transparent 0 300deg, var(--lux-gold) 355deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: lux-spin 1s linear infinite !important;
}
@keyframes lux-spin { to { transform: rotate(360deg); } }

.empty-state, .empty-mini {
  border-radius: var(--lux-radius);
  border: 1px dashed rgba(110,190,148,.3) !important;
  color: var(--lux-ink-3);
}

/* lightbox */
.lightbox, .lb-backdrop { background: rgba(2, 7, 5, .92) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* ── 10 · FOOTER ─────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  border-top: 1px solid rgba(226,185,92,.18) !important;
  background:
    radial-gradient(900px 320px at 50% 0%, rgba(14,92,63,.18), transparent 70%),
    linear-gradient(180deg, rgba(4, 12, 8, .6), rgba(2, 7, 5, .96)) !important;
}
.site-footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,185,92,.65), transparent);
}
.site-footer a { transition: color var(--lux-t-fast), padding-left var(--lux-t-fast); }
.site-footer a:hover { color: var(--lux-gold-2) !important; }

/* ── 11 · PAGE TRANSITIONS & PRELOADER ───────────────────────────────────── */
#lux-veil {
  position: fixed; inset: 0; z-index: 99990; pointer-events: none;
  background: linear-gradient(160deg, #04100A, #030807);
  opacity: 0;
  transition: opacity .42s var(--lux-ease);
}
#lux-veil.on { opacity: 1; pointer-events: auto; }

#lux-loader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  background:
    radial-gradient(800px 500px at 50% 40%, rgba(14,92,63,.25), transparent 65%),
    linear-gradient(160deg, #04100A, #020705);
  transition: opacity .6s var(--lux-ease), visibility 0s linear .6s;
}
#lux-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
#lux-loader img {
  width: 74px; height: 74px; object-fit: contain; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(226,185,92,.5), 0 0 40px rgba(226,185,92,.3);
  animation: lux-loader-pulse 1.6s var(--lux-ease) infinite;
}
@keyframes lux-loader-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
#lux-loader .bar {
  width: min(220px, 60vw); height: 2px; border-radius: 2px; overflow: hidden;
  background: rgba(255,255,255,.08);
}
#lux-loader .bar i {
  display: block; height: 100%; width: 40%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lux-emerald), var(--lux-gold));
  animation: lux-loader-run 1.1s var(--lux-ease) infinite;
}
@keyframes lux-loader-run { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }
#lux-loader small {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--lux-gold);
}

/* ── 12 · RESPONSIVE & ACCESSIBILITY ─────────────────────────────────────── */
img, video, iframe, canvas { max-width: 100%; }
main { overflow-x: clip; }

@media (min-width: 1800px) {
  .monster-container, .container { max-width: 1520px !important; }
}
@media (max-width: 1024px) {
  .lux-rays { display: none; }
}
@media (max-width: 760px) {
  :root { --lux-radius: 14px; --lux-radius-lg: 18px; }
  .monster-section { margin-block: 2.6rem !important; }
  .hero2-title, .monster-title { font-size: clamp(1.7rem, 8vw, 2.4rem) !important; }
  .hero2-cta-btn { width: 100%; justify-content: center; }
  body { background-attachment: scroll; }
  body::before { display: none; } /* grain off on mobile: GPU friendly */
  .bottom-nav { padding-bottom: max(.4rem, env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .hero2-metrics, .monster-metrics { grid-template-columns: 1fr 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .lux-reveal, .lux-stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .lux-rays, .lux-scroll-cue, #lux-loader img { animation: none !important; }
  .hero2-logo-ring::after { animation: none !important; }
  .amber, .hero2-title .amber { animation: none !important; }
}
@media print {
  body::before, body::after, .pm-aurora, #pm-particles, .env-backdrop, .env-fog, #lux-veil, #lux-loader { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ── Dropdown display override ───────────────────────────────────────────────
   Legacy layers toggle display:none↔grid which kills animation. The LUX layer
   keeps the panel permanently in the layout (display:grid) and drives its
   visibility exclusively through opacity/visibility/transform — this is what
   makes the open/close motion possible AND keeps hover stable (the panel is
   always hoverable while fading out, so it never vanishes under the cursor). */
header .nav-group .nav-dropdown {
  display: grid !important;
  gap: .2rem !important;
}