/* ============================================================
   MAIN.CSS  v8
   - 4-tier glass system with @supports fallbacks
   - New glass utilities: .glass-panel, .glass-chip, .glass-inset
   - FIX: load-bar/scroll-progress overlap (2px top 0 conflict)
   - FIX: mobile-cta-bar on inner pages (hero observer fallback)
   - New: MDB Accordion overrides, MDB Chip styles, floating orbs
   - allys.mu: ambient glow orbs, frosted stat cards, shimmer lines
   ============================================================ */
@import 'normalize.css';
@import 'components/header.css';
@import 'components/footer.css';
@import 'components/buttons.css';

/* ── DESIGN TOKENS ── */
:root {
  color-scheme: dark;
  --gold:              #c9a96e;
  --gold-light:        #e8d4a8;
  --gold-dark:         #a8823e;
  --gold-dim:          rgba(201,169,110,0.18);
  --gold-glow:         rgba(201,169,110,0.08);
  --dark:              #0a0a0f;
  --dark-2:            #111118;
  --dark-3:            #1a1a24;
  --dark-4:            #22222e;
  /* 4-tier glass system */
  --glass-1-bg:        rgba(255,255,255,0.038);
  --glass-1-border:    rgba(201,169,110,0.18);
  --glass-2-bg:        rgba(14,13,20,0.72);
  --glass-2-border:    rgba(255,255,255,0.11);
  --glass-3-bg:        rgba(255,255,255,0.055);
  --glass-3-border:    rgba(255,255,255,0.14);
  --glass-4-bg:        rgba(255,255,255,0.08);
  --glass-4-border:    rgba(255,255,255,0.20);
  /* Legacy aliases */
  --glass-bg:          var(--glass-1-bg);
  --glass-bg-hover:    rgba(255,255,255,0.065);
  --glass-border:      var(--glass-1-border);
  --glass-border-soft: rgba(255,255,255,0.10);
  --glass-blur:        blur(22px);
  --glass-blur-heavy:  blur(40px) saturate(1.8);
  --glass-blur-frosted:blur(48px) saturate(2.2) brightness(1.1);
  --glass-blur-ultra:  blur(64px) saturate(2.5) brightness(1.15);
  --text:              #e8e4dc;
  --text-dim:          rgba(232,228,220,0.55);
  --text-muted:        rgba(232,228,220,0.32);
  --success:           #3ecf8e;
  --success-bg:        rgba(62,207,142,0.08);
  --success-border:    rgba(62,207,142,0.22);
  --error:             #cf6e6e;
  --error-bg:          rgba(207,110,110,0.08);
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --space-xs: 0.4rem; --space-sm: 0.8rem;
  --space-md: 1.5rem; --space-lg: 3rem;
  --space-xl: 5rem;   --space-2xl: 7rem;
  --radius-sm: 2px; --radius-md: 6px; --radius-lg: 14px; --radius-full: 9999px;
  --shadow-sm:   0 4px 16px rgba(0,0,0,0.28);
  --shadow-md:   0 12px 32px rgba(0,0,0,0.42);
  --shadow-lg:   0 24px 64px rgba(0,0,0,0.58);
  --shadow-gold: 0 8px 32px rgba(201,169,110,0.15);
  --shadow-glass:0 8px 32px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.07) inset;
  --transition-fast: 0.18s ease;
  --transition-base: 0.32s ease;
  --transition-slow: 0.58s ease;
  --max-width:  1280px;
  --nav-height: 72px;
  --nav-height-scrolled: 60px;
  --fixed-ui-bottom: 1.8rem;
  --fixed-ui-bottom-mob: 5.8rem;
  --page-bg:           var(--dark);
  --page-bg-soft:      var(--dark-2);
  --surface:           var(--dark-2);
  --surface-raised:    var(--dark-3);
  --input-bg:          rgba(255,255,255,0.04);
  --input-bg-focus:    rgba(255,255,255,0.065);
  --input-border:      rgba(201,169,110,0.2);
  --nav-bg:            rgba(255,255,255,0.06);
  --nav-bg-scrolled:   rgba(255,255,255,0.10);
  --nav-drawer-bg:     rgba(6,5,12,0.97);
  --nav-link-color:    rgba(232,228,220,0.82);
  --footer-bg:         rgba(8,7,14,0.85);
  --footer-bg-glass:   rgba(8,7,14,0.72);
  --modal-backdrop:    rgba(0,0,0,0.72);
  --overlay-strong:    rgba(10,10,15,0.88);
  --overlay-mid:       rgba(10,10,15,0.42);
}

:root[data-theme="light"] {
  color-scheme: light;
  --gold:              #9a6d25;
  --gold-light:        #c59a52;
  --gold-dark:         #765018;
  --gold-dim:          rgba(154,109,37,0.18);
  --gold-glow:         rgba(154,109,37,0.08);
  --dark:              #fbf8f1;
  --dark-2:            #f4efe6;
  --dark-3:            #ebe3d5;
  --dark-4:            #ded2bf;
  --glass-1-bg:        rgba(255,255,255,0.58);
  --glass-1-border:    rgba(94,71,35,0.18);
  --glass-2-bg:        rgba(255,252,246,0.78);
  --glass-2-border:    rgba(94,71,35,0.14);
  --glass-3-bg:        rgba(255,255,255,0.66);
  --glass-3-border:    rgba(94,71,35,0.15);
  --glass-4-bg:        rgba(255,255,255,0.74);
  --glass-4-border:    rgba(94,71,35,0.20);
  --glass-bg-hover:    rgba(154,109,37,0.08);
  --glass-border-soft: rgba(94,71,35,0.12);
  --text:              #201b16;
  --text-dim:          rgba(32,27,22,0.66);
  --text-muted:        rgba(32,27,22,0.42);
  --success:           #20764d;
  --success-bg:        rgba(32,118,77,0.08);
  --success-border:    rgba(32,118,77,0.22);
  --error:             #a64040;
  --error-bg:          rgba(166,64,64,0.08);
  --shadow-sm:         0 4px 16px rgba(74,54,26,0.10);
  --shadow-md:         0 12px 32px rgba(74,54,26,0.14);
  --shadow-lg:         0 24px 64px rgba(74,54,26,0.18);
  --shadow-gold:       0 8px 32px rgba(154,109,37,0.14);
  --shadow-glass:      0 8px 32px rgba(74,54,26,0.12), 0 1px 0 rgba(255,255,255,0.55) inset;
  --page-bg:           #fbf8f1;
  --page-bg-soft:      #f4efe6;
  --surface:           #fffaf2;
  --surface-raised:    #ffffff;
  --input-bg:          rgba(255,255,255,0.72);
  --input-bg-focus:    rgba(255,255,255,0.92);
  --input-border:      rgba(154,109,37,0.22);
  --nav-bg:            rgba(255,252,246,0.72);
  --nav-bg-scrolled:   rgba(255,252,246,0.88);
  --nav-drawer-bg:     rgba(255,252,246,0.97);
  --nav-link-color:    rgba(32,27,22,0.76);
  --footer-bg:         rgba(244,239,230,0.92);
  --footer-bg-glass:   rgba(244,239,230,0.82);
  --modal-backdrop:    rgba(32,27,22,0.34);
  --overlay-strong:    rgba(22,18,14,0.56);
  --overlay-mid:       rgba(22,18,14,0.22);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
  }
}

/* ── BASE ── */
* { -webkit-tap-highlight-color: transparent; /* M-7 FIX: remove blue flash on iOS tap */ }
html { scroll-behavior: smooth; overflow-y: scroll; }
@supports (scrollbar-gutter: stable) { html { overflow-y: auto; scrollbar-gutter: stable; } }
body { background-color: var(--page-bg); color: var(--text); font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.6; overflow-x: hidden; transition: background-color var(--transition-base), color var(--transition-base); }

/* Grain + ambient glow */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
}
/* Ambient gold glow — allys.mu style deep background warmth */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 20% 80%, rgba(201,169,110,0.025) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 80% 20%, rgba(201,169,110,0.018) 0%, transparent 50%);
}
body > * { position: relative; z-index: 1; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-serif); font-weight: 300; line-height: 1.1; color: var(--text); margin: 0; }
h1 { font-size: clamp(2.8rem,7vw,5.5rem); }
h2 { font-size: clamp(1.9rem,4vw,3.2rem); }
h3 { font-size: clamp(1.2rem,2vw,1.7rem); }
h4 { font-size: 1.15rem; }
p  { font-size: 0.9rem; line-height: 1.75; color: var(--text-dim); margin: 0; }
a  { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--gold); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-sm); }
em { font-style: italic; color: var(--gold); }
strong { font-weight: 500; }
img, video { max-width: 100%; display: block; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* ── LAYOUT ── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); }
.section   { padding: var(--space-2xl) var(--space-lg); position: relative; z-index: 1; }
.section--dark   { background: var(--dark); }
.section--dark-2 { background: var(--dark-2); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); }

/* ── SECTION LABELS ── */
.section-label { display: block; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; }
.section-title { font-family: var(--font-serif); font-size: clamp(1.9rem,4vw,3.2rem); font-weight: 300; line-height: 1.12; }
.divider-gold  { width: 48px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin: 1.4rem 0; border: none; }
.divider-gold--center { margin-left: auto; margin-right: auto; background: var(--gold); }
.section-divider { height: 1px; border: none; background: linear-gradient(90deg, transparent 0%, var(--gold-dim) 20%, rgba(255,255,255,0.10) 50%, var(--gold-dim) 80%, transparent 100%); margin: 0; }

/* ── GLASS SYSTEM — 4 tiers + utilities ── */

/* Tier 1: subtle card */
.glass-card { background: var(--glass-1-bg); border: 1px solid var(--glass-1-border); border-radius: var(--radius-md); }
@supports (backdrop-filter: blur(1px)) {
  .glass-card { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
}

/* Tier 2: elevated floating panel */
.glass-card--elevated { background: var(--glass-2-bg); border: 1px solid var(--glass-2-border); border-radius: var(--radius-md); box-shadow: var(--shadow-glass); }
@supports (backdrop-filter: blur(1px)) {
  .glass-card--elevated { background: rgba(12,11,18,0.62); backdrop-filter: var(--glass-blur-heavy); -webkit-backdrop-filter: var(--glass-blur-heavy); }
}

/* Tier 3: frosted light */
.glass-frosted { background: var(--glass-3-bg); border: 1px solid var(--glass-3-border); border-radius: var(--radius-md); }
@supports (backdrop-filter: blur(1px)) {
  .glass-frosted { background: rgba(255,255,255,0.038); backdrop-filter: var(--glass-blur-frosted); -webkit-backdrop-filter: var(--glass-blur-frosted); }
}

/* Tier 4: maximum glass — for hero elements, modal-like panels */
.glass-ultra { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-lg); box-shadow: var(--shadow-glass), 0 0 40px rgba(201,169,110,0.04); }
@supports (backdrop-filter: blur(1px)) {
  .glass-ultra { background: rgba(255,255,255,0.045); backdrop-filter: var(--glass-blur-ultra); -webkit-backdrop-filter: var(--glass-blur-ultra); }
}

/* Semi-opaque overlay (for CTAs over images) */
.glass-overlay { background: rgba(10,10,18,0.52); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); box-shadow: var(--shadow-glass); }
@supports (backdrop-filter: blur(1px)) {
  .glass-overlay { background: rgba(10,10,18,0.42); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
}

/* ── THEME TOGGLE ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-width: 42px;
  min-height: 38px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  touch-action: manipulation;
}
.theme-toggle:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--gold-glow);
  transform: translateY(-1px);
}
.theme-toggle i { font-size: 0.82rem; }
.theme-toggle--floating {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 1002;
  background: var(--nav-bg-scrolled);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .portal-nav,
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .tab-bar {
  background: var(--nav-bg-scrolled) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .sidebar {
  border-right-color: var(--glass-border) !important;
  box-shadow: var(--shadow-sm);
}
:root[data-theme="light"] .menu-toggle,
:root[data-theme="light"] #toast,
:root[data-theme="light"] .modal,
:root[data-theme="light"] .modal-box,
:root[data-theme="light"] .nav-account-menu,
:root[data-theme="light"] .chat-bubble {
  background: var(--surface) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .glass-card--elevated,
:root[data-theme="light"] .glass-frosted,
:root[data-theme="light"] .glass-ultra,
:root[data-theme="light"] .glass-panel,
:root[data-theme="light"] .glass-overlay,
:root[data-theme="light"] .card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .plan-tile,
:root[data-theme="light"] .product-chip,
:root[data-theme="light"] .key-box {
  background: var(--glass-2-bg) !important;
  border-color: var(--glass-2-border) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .glass-chip,
:root[data-theme="light"] .badge-revoked,
:root[data-theme="light"] .fp-pill {
  background: rgba(32,27,22,0.055) !important;
  border-color: var(--glass-border) !important;
}
:root[data-theme="light"] .glass-inset,
:root[data-theme="light"] .plan-tile,
:root[data-theme="light"] .message-item:hover,
:root[data-theme="light"] .message-item.active,
:root[data-theme="light"] tr:hover td,
:root[data-theme="light"] .data-table tr:hover td {
  background: rgba(32,27,22,0.045) !important;
}
:root[data-theme="light"] .modal-overlay {
  background: var(--modal-backdrop) !important;
}
:root[data-theme="light"] .modal-box {
  box-shadow: var(--shadow-lg) !important;
}
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-auth,
:root[data-theme="light"] .newsletter-btn,
:root[data-theme="light"] .chat-trigger,
:root[data-theme="light"] .badge.badge-gold,
:root[data-theme="light"] .blog-filter-btn.active,
:root[data-theme="light"] .work-tag,
:root[data-theme="light"] .project-tag.data,
:root[data-theme="light"] .toast,
:root[data-theme="light"] #unread-badge {
  color: #17120c !important;
}
:root[data-theme="light"] td,
:root[data-theme="light"] .data-table td,
:root[data-theme="light"] .message-item,
:root[data-theme="light"] .audit-entry {
  border-color: var(--glass-border-soft) !important;
}
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .field-input,
:root[data-theme="light"] .search-input,
:root[data-theme="light"] .filter-select {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] .field-input:focus,
:root[data-theme="light"] .search-input:focus,
:root[data-theme="light"] .filter-select:focus {
  background: var(--input-bg-focus) !important;
  border-color: var(--gold) !important;
}
:root[data-theme="light"] .skeleton,
:root[data-theme="light"] .img-loading,
:root[data-theme="light"] .glass-inset {
  background: rgba(32,27,22,0.06) !important;
}
:root[data-theme="light"] .hero-bg-overlay {
  background: linear-gradient(160deg, rgba(22,18,14,0.58) 0%, rgba(22,18,14,0.20) 48%, rgba(22,18,14,0.62) 100%) !important;
}
:root[data-theme="light"] .cta-bg {
  background-color: var(--dark-3) !important;
  background-image:
    linear-gradient(rgba(22,18,14,0.42), rgba(22,18,14,0.42)),
    url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1800&q=75') !important;
}
:root[data-theme="light"] .hero-stats-bar,
:root[data-theme="light"] .process-strip,
:root[data-theme="light"] .ticker-wrap {
  background: var(--page-bg-soft) !important;
}
:root[data-theme="light"] .ticker-wrap::before { background: linear-gradient(to right, var(--page-bg-soft), transparent); }
:root[data-theme="light"] .ticker-wrap::after { background: linear-gradient(to left, var(--page-bg-soft), transparent); }

/* Glass panel — full-width frosted section background */
.glass-panel {
  background: rgba(255,255,255,0.025);
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
@supports (backdrop-filter: blur(1px)) {
  .glass-panel { backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); }
}

/* Glass chip — inline tag/pill */
.glass-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.75rem; border-radius: var(--radius-full);
  font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
}
@supports (backdrop-filter: blur(1px)) {
  .glass-chip { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
.glass-chip--gold { color: var(--gold); background: rgba(201,169,110,0.09); border-color: var(--gold-dim); }

/* Glass inset — depressed inner surface */
.glass-inset { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-sm); }
@supports (backdrop-filter: blur(1px)) {
  .glass-inset { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.72s ease, transform 0.72s ease; /* C-9 FIX: will-change removed from static rule — added dynamically by JS just before animation */ }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 0.10s; }
.reveal[data-delay="2"] { transition-delay: 0.20s; }
.reveal[data-delay="3"] { transition-delay: 0.30s; }
.reveal[data-delay="4"] { transition-delay: 0.40s; }
.reveal[data-delay="5"] { transition-delay: 0.50s; }
.reveal[data-delay="6"] { transition-delay: 0.60s; }

/* ── GRADIENT TEXT ── */
.text-gradient { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── GOLD SHIMMER BORDER ── */
.gold-shimmer { position: relative; overflow: hidden; }
.gold-shimmer::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(201,169,110,0.22), transparent); animation: goldShimmer 3s ease-in-out infinite; pointer-events: none; z-index: 2; }
@keyframes goldShimmer { 0% { left: -100%; } 55%, 100% { left: 100%; } }


/* ── LOAD BAR — FIX: use top:2px so it doesn't clash with scroll-progress ── */
#load-bar {
  position: fixed; top: 2px; left: 0; height: 2px; width: 0%; z-index: 10000; pointer-events: none;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  box-shadow: 0 0 12px rgba(201,169,110,0.6);
}

/* ── SCROLL PROGRESS — slightly different hue to distinguish from load bar ── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), rgba(201,169,110,0.4));
  transition: none; /* C-H FIX: no transition — avoids visible lag on mobile fast-scroll */
}

/* ── PAGE TRANSITION ── */
.page-transition-overlay { position: fixed; inset: 0; background: var(--dark); z-index: 9998; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
#transition-spinner { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; pointer-events: none; }
.spinner-ring { width: 44px; height: 44px; border: 2px solid rgba(201,169,110,0.2); border-top-color: var(--gold); border-radius: 50%; animation: spinRing 0.7s linear infinite; }
@keyframes spinRing { to { transform: rotate(360deg); } }

/* ── BACK TO TOP ── */
#back-to-top {
  position: fixed; bottom: var(--fixed-ui-bottom); right: 1.8rem;
  width: 44px; height: 44px;
  background: rgba(12,11,18,0.88); border: 1px solid var(--glass-1-border); border-radius: var(--radius-sm);
  color: var(--gold); font-size: 0.85rem; display: flex; align-items: center; justify-content: center; cursor: pointer;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--transition-base), transform var(--transition-base), border-color var(--transition-fast), background var(--transition-fast);
  z-index: 996; pointer-events: none;
}
#back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#back-to-top:hover   { border-color: var(--gold); background: rgba(201,169,110,0.10); }

/* ── TICKER ── */
.ticker-wrap { overflow: hidden; background: var(--dark-2); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); padding: 0.85rem 0; position: relative; z-index: 1; }
.ticker-wrap::before, .ticker-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.ticker-wrap::before { left: 0; background: linear-gradient(to right, var(--dark-2), transparent); }
.ticker-wrap::after  { right: 0; background: linear-gradient(to left,  var(--dark-2), transparent); }
.ticker-track { display: flex; width: max-content; will-change: transform; animation: ticker 36s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0 2rem; font-size: 0.67rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; transition: color var(--transition-fast); }
.ticker-item:hover { color: var(--gold); }
.ticker-item i { color: var(--gold); font-size: 0.82rem; }
.ticker-sep    { color: rgba(201,169,110,0.22); font-size: 0.9rem; align-self: center; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── COOKIE TOAST ── */
#cookie-toast { position: fixed; bottom: max(1.5rem, calc(1.5rem + env(safe-area-inset-bottom, 0px))); left: 50%; transform: translateX(-50%) translateY(120px); z-index: 9000; max-width: 660px; width: calc(100% - 3rem); opacity: 0; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease; pointer-events: none; }
#cookie-toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.cookie-inner  { padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cookie-text   { flex: 1; min-width: 180px; font-size: 0.78rem; color: var(--text-dim); line-height: 1.6; }
.cookie-text a { color: var(--gold); border-bottom: 1px solid var(--gold-dim); }
.cookie-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ── CHAT WIDGET ── */
#chat-widget { position: fixed; bottom: var(--fixed-ui-bottom); left: 1.8rem; z-index: 997; }
.chat-trigger { width: 52px; height: 52px; background: var(--gold); border-radius: 50%; border: none; color: var(--dark); font-size: 1.15rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(201,169,110,0.40); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.chat-trigger:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(201,169,110,0.52); }
.chat-trigger .icon-open, .chat-trigger .icon-close { pointer-events: none; }
.chat-trigger .icon-close { display: none; }
.chat-bubble { position: absolute; bottom: 64px; left: 0; width: 285px; padding: 1.4rem 1.6rem; border-radius: var(--radius-md); opacity: 0; transform: translateY(10px) scale(0.94); pointer-events: none; transition: opacity var(--transition-base), transform var(--transition-base); transform-origin: bottom left; box-shadow: var(--shadow-glass); }
.chat-bubble.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chat-bubble h4 { font-family: var(--font-serif); font-size: 1rem; font-weight: 400; margin-bottom: 0.3rem; color: var(--text); }
.chat-bubble p  { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 1rem; line-height: 1.55; }

/* ── MOBILE CTA BAR ── */
#mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  #mobile-cta-bar { display: flex; align-items: center; justify-content: space-between; position: fixed; bottom: 0; left: 0; right: 0; z-index: 995; background: var(--nav-drawer-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid var(--glass-border); padding: 0.85rem 1.2rem; padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px)); /* M-5 FIX: iPhone home indicator */ gap: 0.8rem; transform: translateY(100%); opacity: 0; transition: transform 0.38s ease, opacity 0.38s ease; pointer-events: none; }
  #mobile-cta-bar.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .mobile-cta-text { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; flex: 1; }
  .mobile-cta-text strong { color: var(--text); display: block; }
  #back-to-top  { bottom: var(--fixed-ui-bottom-mob); right: 1.2rem; }
  #chat-widget  { bottom: var(--fixed-ui-bottom-mob); left: 1.2rem; }
  #cookie-toast { bottom: 5.5rem; }
}

/* ── NEWSLETTER FEEDBACK ── */
.newsletter-feedback { font-size: 0.72rem; margin-top: 0.4rem; display: none; align-items: center; gap: 0.4rem; }
.newsletter-feedback.success { display: flex; color: var(--success); }
.newsletter-feedback.error   { display: flex; color: var(--error); }

/* ── IMAGE SKELETON ── */
.img-loading { position: relative; overflow: hidden; background: var(--dark-3); }
.img-loading img { opacity: 0; transition: opacity 0.5s ease; }
.img-loaded  img { opacity: 1; }
.img-loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--dark-3) 0%, rgba(255,255,255,0.055) 50%, var(--dark-3) 100%); background-size: 200% 100%; animation: shimmerSkeleton 1.6s ease-in-out infinite; }
.img-loaded::after { display: none; }
@keyframes shimmerSkeleton { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }

/* ── MDB BADGE OVERRIDES ── */
.badge.badge-gold { background: var(--gold) !important; color: var(--dark) !important; border-radius: var(--radius-sm) !important; font-family: var(--font-sans) !important; font-size: 0.58rem !important; font-weight: 400 !important; letter-spacing: 0.08em !important; padding: 0.3em 0.72em !important; text-transform: uppercase !important; border: none !important; box-shadow: 0 2px 8px rgba(201,169,110,0.25) !important; }
.badge.badge-glass { background: transparent !important; color: var(--gold) !important; border: 1px solid var(--gold-dim) !important; border-radius: var(--radius-full) !important; font-family: var(--font-sans) !important; font-size: 0.58rem !important; font-weight: 400 !important; letter-spacing: 0.08em !important; padding: 0.3em 0.72em !important; text-transform: uppercase !important; }

/* ── MDB LIGHTBOX ── */
.lightbox-backdrop  { background: rgba(5,5,10,0.96) !important; }
.lightbox-gallery-loader { border-top-color: var(--gold) !important; }
.lightbox-arrow-left, .lightbox-arrow-right { color: var(--gold) !important; border-color: var(--glass-border) !important; background: rgba(10,10,18,0.8) !important; }
.lightbox-close-btn { color: var(--gold) !important; }
.lightbox-caption   { font-family: var(--font-sans) !important; color: var(--text-dim) !important; font-size: 0.82rem !important; }

/* ── MDB TABS ── */
.nav-tabs { border-bottom-color: var(--glass-border) !important; gap: 0.25rem; }
.nav-tabs .nav-link { font-family: var(--font-sans) !important; font-size: 0.72rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--text-dim) !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important; border-color: var(--glass-border) !important; background: transparent !important; padding: 0.7rem 1.4rem !important; transition: color var(--transition-fast), background var(--transition-fast) !important; }
.nav-tabs .nav-link:hover { color: var(--gold) !important; background: var(--glass-bg) !important; }
.nav-tabs .nav-link.active { color: var(--gold) !important; background: rgba(201,169,110,0.08) !important; border-bottom-color: transparent !important; border-top-color: var(--gold) !important; }

/* ── MDB ACCORDION ── */
.accordion-item { background: var(--glass-1-bg) !important; border-color: var(--glass-border) !important; border-radius: var(--radius-md) !important; margin-bottom: 0.5rem !important; overflow: hidden; }
.accordion-button { background: transparent !important; color: var(--text) !important; font-family: var(--font-sans) !important; font-size: 0.82rem !important; letter-spacing: 0.05em !important; padding: 1.1rem 1.4rem !important; box-shadow: none !important; }
.accordion-button:not(.collapsed) { color: var(--gold) !important; background: rgba(201,169,110,0.05) !important; }
.accordion-button::after { filter: invert(0.7) sepia(1) saturate(2) hue-rotate(5deg) !important; }
.accordion-body { font-size: 0.85rem; color: var(--text-dim); line-height: 1.75; padding: 0.5rem 1.4rem 1.4rem !important; background: rgba(201,169,110,0.02) !important; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--page-bg-soft); }
::-webkit-scrollbar-thumb { background: var(--dark-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,169,110,0.4); }
::selection { background: rgba(201,169,110,0.25); color: var(--gold-light); }

/* ── SKIP NAVIGATION (accessibility) ── */
.skip-nav {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  z-index: -1;
}
.skip-nav:focus {
  position: fixed;
  top: 1rem; left: 1rem;
  width: auto; height: auto;
  padding: 0.6rem 1.2rem;
  background: var(--gold);
  color: var(--dark);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  z-index: 10001;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}


/* ── KEYFRAMES ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes scrollPulse { 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
  .page-transition-overlay { display: none; }
  #scroll-progress, #load-bar { transition: none; }
  .spinner-ring { animation: none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  :root { --space-lg: 1.5rem; --space-xl: 3rem; --space-2xl: 5rem; }
  .container { padding: 0 var(--space-md); }
}
