/* =====================================================================
   LANHORZ — PREMIUM FUTURISTIC THEME LAYER
   Luxury matt-black + metallic-gold fintech finish.
   Loaded last so it is the authoritative visual layer. Elevates the
   existing structure only: glass panels, hairline gold outlines, soft
   gold glow, metallic type. No layout/markup changes.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

:root {
  --lx-black: #050505;
  --lx-black-soft: #0b0a08;
  --lx-gold: #d4af52;          /* metallic gold */
  --lx-gold-bright: #f4dca0;   /* champagne highlight */
  --lx-gold-deep: #7c5418;     /* shadow gold */
  --lx-text: #f5f0e6;
  --lx-muted: #b3aa99;
  --lx-line: rgba(216, 175, 82, 0.30);
  --lx-line-strong: rgba(228, 190, 110, 0.55);
  --lx-glass: linear-gradient(157deg, rgba(24, 22, 17, 0.72), rgba(9, 9, 8, 0.62));
  --lx-metal: linear-gradient(180deg, #fbeec0 0%, #e6c878 32%, #c79a3c 60%, #9c6c22 100%);
  --lx-glow-sm: 0 0 16px rgba(224, 182, 92, 0.32);
  --lx-glow-md: 0 0 26px rgba(224, 182, 92, 0.34), 0 0 64px rgba(224, 182, 92, 0.12);
  --lx-display: 'Sora', 'Inter', system-ui, sans-serif;
}

/* ---------- Base canvas: global tech background (see lanhorz-global-background.css) ---------- */
body {
  background: transparent !important;
}

.site-app {
  background: transparent !important;
}

.site-app::before,
.site-app::after {
  display: none !important;
  content: none !important;
}

::selection { background: rgba(224, 182, 92, 0.26); color: #fff; }

/* ---------- Typography: elegant futuristic display ---------- */
.brand-lockup,
.footer-logo,
.section-title h1,
.home-hero h1,
.home-hero h2,
.account-hero h1,
.login-left h1,
.login-card h2,
.brain-banner h2,
.story-panel h2,
.panel-title h2,
.pricing-card strong {
  font-family: var(--lx-display) !important;
}

.section-title h1,
.account-hero h1 {
  background: linear-gradient(180deg, #fff6da 0%, #f0cf86 38%, #c79a3c 70%, #845516 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 6px 30px rgba(214, 168, 70, 0.20) !important;
}

.section-title p {
  color: var(--lx-gold-bright) !important;
  text-shadow: 0 0 18px rgba(224, 182, 92, 0.25);
}

/* ---------- Header: dark glass with hairline gold base glow ---------- */
.lux-header {
  background: linear-gradient(180deg, rgba(8, 8, 7, 0.86), rgba(5, 5, 4, 0.74)) !important;
  border-bottom: 1px solid var(--lx-line) !important;
  box-shadow: 0 1px 0 rgba(244, 220, 160, 0.14), 0 18px 50px rgba(0, 0, 0, 0.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
.brand-lockup { color: var(--lx-gold-bright) !important; letter-spacing: 0.32em !important; }
.brand-lockup img { filter: drop-shadow(0 0 14px rgba(224, 182, 92, 0.65)) !important; }
.desktop-nav button.active { color: var(--lx-gold-bright) !important; }

.header-cta {
  border: 1px solid var(--lx-line-strong) !important;
  color: var(--lx-gold-bright) !important;
  background: linear-gradient(180deg, rgba(224, 182, 92, 0.10), rgba(0, 0, 0, 0.2)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--lx-glow-sm) !important;
}
.header-cta:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--lx-glow-md) !important; }

/* ---------- Glass panels: hairline gold outline + soft glow + top sheen ---------- */
.icon-card,
.step-card,
.faq-card,
.support-card,
.contact-form,
.info-cards article,
.story-panel,
.story-card,
.story-split article,
.pricing-card,
.trust-strip,
.brain-banner,
.login-card,
.account-hero > div:first-child,
.account-balance-card,
.account-top-grid article,
.account-main-panel,
.account-side-panel,
.account-bottom-grid article {
  border: 1px solid var(--lx-line) !important;
  background:
    var(--lx-glass),
    radial-gradient(120% 80% at 50% 120%, rgba(214, 168, 70, 0.10), transparent 52%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.012),
    0 22px 54px rgba(0, 0, 0, 0.5),
    0 0 1px rgba(224, 182, 92, 0.4) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Subtle glass reflection sheen across the top of premium cards. */
.icon-card::before,
.pricing-card::before,
.support-card::before,
.contact-form::before,
.login-card::before,
.brain-banner::before,
.account-balance-card::before,
.account-main-panel::before,
.account-side-panel::before,
.account-top-grid article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
  pointer-events: none;
  opacity: 0.7;
}

/* Lift + intensify glow on interactive cards. */
.icon-card,
.pricing-card,
.support-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.icon-card:hover,
.pricing-card:hover,
.support-card:hover {
  transform: translateY(-3px);
  border-color: var(--lx-line-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 26px 60px rgba(0, 0, 0, 0.55),
    var(--lx-glow-md) !important;
}

/* ---------- Hex icons: refined metallic ring with glow ---------- */
.hex-icon {
  border: 1px solid var(--lx-line-strong) !important;
  color: var(--lx-gold-bright) !important;
  background:
    radial-gradient(circle, rgba(244, 220, 160, 0.18), transparent 66%),
    rgba(8, 8, 7, 0.5) !important;
  box-shadow: inset 0 0 18px rgba(224, 182, 92, 0.18), var(--lx-glow-sm) !important;
  text-shadow: 0 0 16px rgba(224, 182, 92, 0.55) !important;
}

/* ---------- Buttons: brushed metallic gold with sheen + glow ---------- */
.gold-button,
.send-button {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(244, 220, 160, 0.85) !important;
  background: var(--lx-metal) !important;
  color: #1a1206 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 6px rgba(120, 80, 20, 0.35),
    0 0 30px rgba(224, 182, 92, 0.28) !important;
}
.gold-button.ghost {
  background: rgba(8, 8, 7, 0.55) !important;
  color: var(--lx-gold-bright) !important;
  border-color: var(--lx-line-strong) !important;
  box-shadow: inset 0 0 0 1px rgba(224, 182, 92, 0.08), var(--lx-glow-sm) !important;
}
.gold-button::after,
.send-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.gold-button:hover::after,
.send-button:hover::after { left: 140%; }
.gold-button:hover,
.send-button:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 6px rgba(120, 80, 20, 0.35),
    var(--lx-glow-md) !important;
}

.biometric {
  border: 1px solid var(--lx-line-strong) !important;
  color: var(--lx-gold-bright) !important;
  background: rgba(8, 8, 7, 0.5) !important;
}
.biometric:hover { box-shadow: var(--lx-glow-sm) !important; }

/* ---------- Inputs: dark glass with gold focus glow ---------- */
.contact-form input,
.contact-form textarea,
.login-card input {
  border: 1px solid rgba(228, 190, 110, 0.24) !important;
  background: rgba(4, 4, 4, 0.55) !important;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.4) !important;
}
.contact-form input:focus,
.contact-form textarea:focus,
.login-card input:focus {
  border-color: var(--lx-gold-bright) !important;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.4), var(--lx-glow-md) !important;
}

/* ---------- Trust strip / dividers: thin gold ---------- */
.trust-strip { border: 1px solid var(--lx-line) !important; }
.trust-strip div { border-right-color: rgba(224, 182, 92, 0.22) !important; }
.trust-strip span,
.brain-banner > span { text-shadow: var(--lx-glow-sm) !important; color: var(--lx-gold-bright) !important; }

/* ---------- About page panels (kept consistent with the system) ---------- */
.story-card,
.story-split {
  display: grid;
  gap: 34px;
  border-radius: 14px;
  padding: clamp(24px, 3vw, 40px);
  margin: 18px 0;
  align-items: center;
}
.story-card { grid-template-columns: 0.9fr 1.3fr; }
.story-split { grid-template-columns: 1.3fr 0.9fr; }
.story-card h2,
.story-split h2 {
  margin: 0 0 18px;
  color: var(--lx-gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(24px, 3vw, 32px);
}
.story-card h2 b,
.story-split h2 b {
  border: 1px solid var(--lx-line-strong);
  border-radius: 8px;
  padding: 4px 12px;
  margin-right: 14px;
  color: var(--lx-gold-bright);
}
.story-card h3 { color: var(--lx-gold-bright); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 18px; }
.story-card strong, .story-split strong { color: var(--lx-gold-bright); }
.image-panel {
  min-height: 280px;
  border: 1px solid var(--lx-line);
  border-radius: 12px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  color: var(--lx-gold-bright);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  background:
    radial-gradient(circle at 70% 24%, rgba(224, 182, 92, 0.22), transparent 30%),
    linear-gradient(140deg, rgba(20, 18, 14, 0.85), rgba(0, 0, 0, 0.92)),
    repeating-linear-gradient(90deg, rgba(224, 182, 92, 0.14) 0 1px, transparent 1px 56px);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), var(--lx-glow-sm);
}
.image-panel span { font-size: clamp(34px, 5vw, 54px); color: var(--lx-gold-bright); text-shadow: var(--lx-glow-md); }
.mission-orbit {
  border: 1px solid var(--lx-line) !important;
  background: radial-gradient(circle, rgba(224, 182, 92, 0.16), transparent 62%) !important;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.6), var(--lx-glow-sm) !important;
}
.mission-orbit span { color: var(--lx-gold-bright) !important; font-family: var(--lx-display); letter-spacing: 0.3em; }

/* ---------- Dashboard polish ---------- */
.account-balance-card strong { font-family: var(--lx-display) !important; }
.account-top-grid strong,
.pot-row strong,
.account-bottom-grid h3,
.panel-title span,
.account-eyebrow { color: var(--lx-gold-bright) !important; }
.pot-row i {
  background: linear-gradient(90deg, #7c5418, #f4dca0) !important;
  box-shadow: 0 0 18px rgba(244, 220, 160, 0.4) !important;
}

/* ---------- Footer ---------- */
.footer-logo { color: var(--lx-gold-bright) !important; }
.footer h4 { color: var(--lx-gold-bright) !important; }
.socials span, .store-buttons span {
  border-color: var(--lx-line) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.socials span:hover, .store-buttons span:hover {
  border-color: var(--lx-line-strong) !important;
  box-shadow: var(--lx-glow-sm) !important;
}

/* ---------- Custom scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(224, 182, 92, 0.45) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #060606; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c79a3c, #7c5418);
  border-radius: 20px;
  border: 2px solid #060606;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f4dca0, #c79a3c); }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gold-button::after,
  .send-button::after,
  .icon-card,
  .pricing-card,
  .support-card { transition: none !important; }
}