/* ==========================================================================
   DESKTOP-STYLES.CSS (Global Variables, Reset, & Base Styles)
   ========================================================================== */

/* --- 1. THE DESIGN SYSTEM --- */
:root {
  /* Brand Fonts */
  --ff-main: 'Jost', sans-serif;
  --ff-headers: "Times New Roman", sans-serif;
  --ff-nav: 'Montserrat', sans-serif;
  --ff-accent: 'Playfair Display', serif;

  /* Font Sizes */
  --fs-hero: 4rem;
  --fs-hero-subtitle: 2.4rem; 
  --fs-h2: 3.2rem;     
  --fs-main: 1.6rem;
  --fs-body: 1.6rem; /* Added missing variable */   
  --fs-nav: 1.4rem;    
  --fs-small: 1.2rem;
  
  /* Font Weights */
  --fw-hero: 900;
  --fw-hero-subtitle: 500; 
  --fw-cta: 600; 

  /* Brand Colors */
  --signature-orange: #f8c25d;
  --bg-black: #000000;
  --bg-glass: rgba(10, 10, 10, 1);
  --fc-main: #f0f0f0;
  --fc-muted: #a6a6a6;
  --fc-accent-red: #ea5455;
  --glow-orange: 0 10px 30px rgba(248, 194, 93, 0.2);

  /* UI Accents */
  --shadow-dark: 0 10px 20px rgba(0, 0, 0, 0.3);
  --radius-subtle: 4px; 
  --radius-large: 15px;
  --transition-smooth: all 0.3s ease;

 /* Layout Constants */
  --header-height-desktop: 15.8rem; 
  --header-height-mobile: 12rem;    
  --hero-height-desktop: 40vh;
  --hero-height-mobile: 20vh;
  --container-width-desktop: 60%;
  --container-width-mobile: 90%;
  --max-width-desktop: 110rem;   
}

/* --- Global Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ==========================================================================
   MASTER RESPONSIVE SCALING SYSTEM
   ========================================================================== */
html {
  /* THE BASELINE (1rem = 10px) */
  font-size: 62.5%; 
  width: 100%;
  scroll-behavior: smooth;
}

/* 2. SCALE UP FOR 4K SCREENS (> 2000px) */
@media only screen and (min-width: 2000px) {
  html { font-size: 75%; } /* 1rem = 12px */
}

/* 3. LAPTOP SCALING (1024px - 1300px) */
@media only screen and (max-width: 1200px) {
  html { font-size: 56.25%; } /* 1rem = 9px */
}

/* 4. TABLET SCALING (768px - 1023px) */
@media only screen and (max-width: 900px) {
  html { font-size: 50%; } /* 1rem = 8px */
}

body {
  background-color: var(--bg-black);
  color: var(--fc-main);
  /* FIX: Was incorrectly set to var(--fs-main) */
  font-family: var(--ff-main); 
  font-size: var(--fs-body);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden; 
  width: 100%;
}

body img, body picture, body video, body canvas, body svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* UI Interactions */
input, textarea, button, select, a {
  -webkit-tap-highlight-color: transparent;
  font: inherit; 
}

/* --- LAYOUT UTILITIES --- */

.non-index-layout {
  padding-top: var(--header-height-desktop);
}

.container {
  display: grid;
  place-items: center;
  text-align: center;
  justify-content: center;
}

.content-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: var(--container-width-desktop);
  max-width: var(--max-width-desktop);
  margin: auto;
}

/* --- GLOBAL TEXT LAYOUTS --- */
.copy-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: auto; 
  text-align: center;
}

.copy-text {
  font-size: 1.8rem; 
  line-height: 1.6;
  margin: 2rem 0 2.5rem; 
}

.copy-text strong {
  color: var(--signature-orange);
  font-weight: 700;
}

.disclaimer {
  color: var(--fc-accent-red) !important;
  font-family: Georgia, 'Times New Roman', Times, serif !important;
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  margin-top: 3rem !important; 
  display: block;
  text-align: center;
}

/* --- GLOBAL DIVIDER --- */
.neon-divider {
  border: 0;
  height: 1px;
  margin: 2rem auto;
  width: 100%;
  max-width: 100rem; 
  background: linear-gradient(90deg, transparent, var(--signature-orange), transparent);
  opacity: 0.7;
  transform: scaleY(1.2);
}

/* --- THE UNIFIED HERO SYSTEM --- */
.hero-section {
  min-height: var(--hero-height-desktop);
  display: grid;         
  place-items: center;
  padding: 5rem 0;
}

.hero-title-index {
  font-family: var(--ff-headers);
  font-size: 6rem; 
  font-weight: var(--fw-hero);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 1px;
  max-width: 100rem;
  margin: 0 auto 1rem; 
}

.hero-title-non-index {
  font-family: var(--ff-headers);
  font-size: var(--fs-hero); 
  font-weight: var(--fw-hero);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 1px;
  max-width: 100rem;
  margin: 0 auto 1rem; 
}

.hero-title-glow {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    180deg, 
    #ffffff 0%, 
    #d9d9d8 10%, 
    var(--signature-orange) 60%, 
    #cfa145 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(.1rem .1rem 0.1rem var(--signature-orange));
}

/* Non-Hero Header Glow */
.header-glow {
  background: linear-gradient(180deg, #d9d9d8 0%, var(--signature-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: var(--glow-orange);
}

.hero-subtitle {
  display: block;
  font-size: var(--fs-hero-subtitle); 
  color: var(--signature-orange);
  font-weight: var(--fw-hero-subtitle);
  max-width: 70rem;
  text-transform: uppercase;
  letter-spacing: 0.4rem;
  margin-bottom: 2rem; /* FIX: Added missing semicolon */
}

.hero-lead {
  font-family: var(--ff-main);
  font-size: var(--fs-main);
  color: var(--fc-main);
  max-width: 70rem;
  margin: 2rem auto;
  line-height: 2;
}

.hero-lead strong {
  color: var(--signature-orange);
}

/* --- BACK TO TOP BUTTON --- */
#backToTop {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9000;
  width: auto;
  height: auto;
  background: none; 
  border: none;
  border-radius: 0;
  box-shadow: none; 
  color: #ccc; 
  font-size: 3.5rem; 
  cursor: pointer;
  text-shadow: 0 4px 10px rgba(0,0,0,0.5);
  opacity: 0; 
  pointer-events: none; 
  transition: opacity 0.4s ease, transform 0.3s ease, color 0.3s ease;
}

#backToTop:hover {
  background: none; 
  color: #fff; 
  transform: translateY(-8px) scale(1.1); 
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.4); 
}