/* ProSpace — Luxury / Refined Theme (Dark, low-saturation)
   Direction: midnight graphite + warm brass accents. Soft contrast, premium materials.
   Goal: dark background + light text with *matched* surfaces so nothing washes out.
*/

:root{
  /* Backgrounds */
  --lux-bg: #0d1012;          /* midnight graphite */
  --lux-bg-2: #0a0c0e;        /* deeper */
  --lux-surface: rgba(255,255,255,.06);
  --lux-surface-2: rgba(255,255,255,.085);
  --lux-border: rgba(255,255,255,.12);

  /* Text */
  --lux-ink: rgba(255,255,255,.92);
  --lux-ink-2: rgba(255,255,255,.84);
  --lux-muted: rgba(255,255,255,.68);
  --lux-dim: rgba(255,255,255,.52);

  /* Accents (low-saturation brass) */
  --lux-brass: #c2a25f;
  --lux-brass-2: #ead9b0;
  --lux-forest: #1f4a3f;

  /* Radius & shadow */
  --lux-radius-lg: 24px;
  --lux-radius-md: 16px;
  --lux-radius-sm: 12px;
  --lux-shadow-sm: 0 10px 22px rgba(0,0,0,.35);
  --lux-shadow: 0 26px 80px rgba(0,0,0,.55);

  /* Typography */
  --lux-font-display: "Fraunces", ui-serif, Georgia, serif;
  --lux-font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --lux-ease: cubic-bezier(.2,.9,.2,1);
}

html, body { height: 100%; }

body.lux{
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(194,162,95,.16), transparent 60%),
    radial-gradient(900px 600px at 88% 6%, rgba(31,74,63,.12), transparent 62%),
    linear-gradient(180deg, var(--lux-bg), var(--lux-bg-2));
  color: var(--lux-ink);
  font-family: var(--lux-font-body);
  letter-spacing: .15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Legacy main.css sets <main> background white. Override so sections are readable. */
body.lux main{ background: transparent !important; }

/* Typography */
body.lux h1, body.lux h2, body.lux h3, body.lux h4, body.lux .headline{
  font-family: var(--lux-font-display);
  color: var(--lux-ink);
  letter-spacing: .01em;
}

body.lux p,
body.lux li,
body.lux small,
body.lux .muted,
body.lux .text-muted{
  color: var(--lux-muted) !important;
}

body.lux a{ color: inherit; text-decoration: none; }
body.lux a:hover{ color: var(--lux-ink); }

.container-xl{ max-width: 1200px; }

/* Accessibility */
.skip-link{
  position:absolute;
  left: 12px;
  top: 12px;
  transform: translateY(-200%);
  background: #fff;
  color: #000;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 9999;
  box-shadow: var(--lux-shadow-sm);
}
.skip-link:focus{ transform: translateY(0); }

/* Nav */
.lux-nav{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(13,16,18,.62);
  border-bottom: 1px solid rgba(255,255,255,.08);
  /* Reduce blur for a cleaner, more premium nav */
  backdrop-filter: blur(8px) saturate(130%);
}

.brand-wordmark{
  font-family: var(--lux-font-display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  color: rgba(255,255,255,.70);
}

.nav-link{
  color: rgba(255,255,255,.78) !important;
  font-weight: 650;
  padding: .65rem .85rem !important;
  border-radius: 999px;
  transition: background .35s var(--lux-ease), color .35s var(--lux-ease), transform .35s var(--lux-ease);
}
.nav-link:hover,
.nav-link:focus{
  color: #fff !important;
  background: rgba(255,255,255,.07);
}

/* Sections */
section{ padding: 88px 0; background: transparent; position: relative; }
@media (max-width: 768px){ section{ padding: 72px 0; } }

/* Subtle dark texture + gentle gradient for content sections (adds depth without noise) */
.lux-section{
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(194,162,95,.10), transparent 62%),
    radial-gradient(800px 480px at 84% 6%, rgba(31,74,63,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
}
.lux-section::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: url("../image/noise-1.svg");
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

/* Cards */
.lux-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--lux-radius-lg);
  box-shadow: var(--lux-shadow);
}

.lux-kicker{
  color: rgba(194,162,95,.96);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
}

/* Hero */
.lux-hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.lux-hero .hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  /* unify tone + keep premium contrast */
  filter: saturate(.86) contrast(1.08) brightness(.70);
}

.lux-hero .hero-shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(194,162,95,.18), transparent 60%),
    linear-gradient(180deg, rgba(10,12,14,.72), rgba(10,12,14,.26) 55%, rgba(10,12,14,.82));
}

.lux-hero .hero-inner{
  position: relative;
  padding: clamp(78px, 10vh, 132px) 0;
}

.lux-hero h1{
  font-size: clamp(2.25rem, 4.4vw, 3.8rem);
  line-height: 1.03;
  margin-bottom: 14px;
}

.lux-hero .hero-lead{
  max-width: 68ch;
  color: rgba(255,255,255,.76);
  font-size: 1.05rem;
}

/* Hero panel: ensure contrast matched to dark */
.hero-panel{
  background: rgba(13,16,18,.62);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--lux-radius-lg);
  padding: 26px 26px;
  box-shadow: var(--lux-shadow);
  backdrop-filter: blur(12px) saturate(130%);
}
@media (min-width: 992px){ .hero-panel{ padding: 34px 34px; } }

/* Stats */
.lux-stat{
  border-radius: var(--lux-radius-md);
  padding: 18px 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(14,16,18,.42);
  /* Cleaner glass: lighter shadow, less haze */
  box-shadow: 0 10px 28px rgba(0,0,0,.32);
  backdrop-filter: blur(6px) saturate(120%);
}
.lux-stat b{
  font-family: var(--lux-font-display);
  font-size: 22px;
  color: rgba(255,255,255,.96);
  letter-spacing: .01em;
}
.lux-stat span{
  color: rgba(255,255,255,.72);
  font-size: 13px;
}

/* Buttons — material-like transitions */
.btn-lux, .btn-ghost{
  border-radius: 999px;
  padding: .86rem 1.25rem;
  font-weight: 750;
  letter-spacing: .015em;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform .45s var(--lux-ease),
    box-shadow .45s var(--lux-ease),
    background .45s var(--lux-ease),
    border-color .45s var(--lux-ease),
    color .45s var(--lux-ease);
}

.btn-lux{
  border: 1px solid rgba(194,162,95,.55);
  background: linear-gradient(180deg, rgba(234,217,176,.28), rgba(194,162,95,.14));
  color: #fff;
  box-shadow: 0 18px 48px rgba(0,0,0,.42);
}

.btn-ghost{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  box-shadow: var(--lux-shadow-sm);
}

/* Subtle sheen on hover */
.btn-lux::after,
.btn-ghost::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(-60%) rotate(6deg);
  opacity: 0;
  transition: transform .75s var(--lux-ease), opacity .65s var(--lux-ease);
}

.btn-lux:hover,
.btn-ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 30px 85px rgba(0,0,0,.55);
}
.btn-lux:hover{ border-color: rgba(234,217,176,.42); }
.btn-ghost:hover{ background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.20); }

.btn-lux:hover::after,
.btn-ghost:hover::after{
  opacity: .9;
  transform: translateX(60%) rotate(6deg);
}

.btn-lux:active,
.btn-ghost:active{
  transform: translateY(0px);
  box-shadow: var(--lux-shadow-sm);
}

/* Forms */
.lux-form label{ color: rgba(255,255,255,.78); font-weight: 750; font-size: 13px; letter-spacing:.02em; }
.lux-input{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: .92rem 1rem;
  outline: none;
  transition: box-shadow .45s var(--lux-ease), border-color .45s var(--lux-ease), background .45s var(--lux-ease);
}
.lux-input::placeholder{ color: rgba(255,255,255,.45); }
.lux-input:focus{ border-color: rgba(194,162,95,.55); box-shadow: 0 0 0 5px rgba(194,162,95,.16); background: rgba(255,255,255,.085); }

/* Scroll reveal (fade-in) */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.2s var(--lux-ease), transform 1.2s var(--lux-ease);
  will-change: opacity, transform;
}
.reveal.is-inview{ opacity: 1; transform: translateY(0); }

.reduced-motion .reveal{ transition: none; opacity: 1; transform: none; }

/* Form messages */
.message{
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
}
.message.success{
  border-color: rgba(54, 196, 143, .35);
  background: rgba(54, 196, 143, .10);
}
.message.error{
  border-color: rgba(255, 107, 107, .38);
  background: rgba(255, 107, 107, .10);
}

/* Footer */
.lux-footer{
  padding: 72px 0 30px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.footer-grid{ display:grid; gap:28px; grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 992px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{ font-family: var(--lux-font-display); font-size: 20px; letter-spacing:.12em; text-transform: uppercase; }
.footer-title{ font-weight: 850; letter-spacing:.14em; text-transform: uppercase; font-size: 12px; color: rgba(255,255,255,.78); margin-bottom: 12px; }
.footer-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer-muted{ color: rgba(255,255,255,.62); }
.footer-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.pill{ border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); padding: 8px 12px; border-radius: 999px; font-weight: 750; font-size: 12px; color: rgba(255,255,255,.78); }
.footer-bottom{ display:flex; justify-content:space-between; gap:18px; padding-top:24px; margin-top:24px; border-top:1px solid rgba(255,255,255,.10); }
@media (max-width: 768px){ .footer-bottom{ flex-direction:column; } }