:root {
  /* Typography tokens */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Official Brand Palette (Driven Directly by Mokash Logo) */
  --brand-gold: #D69B05;            /* Primary Architectural Gold (Logo roof) */
  --brand-gold-light: #F0B429;      /* Luminous Gold Accent */
  --brand-gold-warm: #E5AB1C;       /* Mid Warm Gold */
  --brand-gold-dark: #B88204;       /* Deep Gold */
  --brand-navy: #223057;            /* Secondary Brand Navy (MOKASH wordmark) */
  --brand-navy-deep: #16203B;       /* Deep Cadastral Navy */
  --brand-navy-surface: #0E172E;    /* Obsidian Navy Surface */
  --brand-white: #F4F7FF;           /* Soft Ice White */
  --brand-white-pure: #FFFFFF;      /* Pure Architectural White */
  
  /* Semantic Tokens */
  --color-primary: var(--brand-gold);
  --color-primary-light: var(--brand-gold-light);
  --color-primary-dark: var(--brand-gold-dark);
  --color-secondary: var(--brand-navy);
  --color-secondary-deep: var(--brand-navy-deep);
  --color-accent: var(--brand-navy);
  --color-bg: #FFFFFF;              /* Pristine Architectural White Canvas */
  --color-bg-card: rgba(34, 48, 87, 0.45); /* Secondary Brand Navy Tint */
  --color-bg-card-border: rgba(214, 155, 5, 0.28); /* Primary Gold Accent */
  --color-text-main: #121C38;
  --color-text-muted: #5B6A8A;
  /* Viewport Frame Tokens */
  --viewport-padding: clamp(8px, 1.2vw, 16px);
  --viewport-frame-bg: #FFFFFF;     /* Pristine White Frame Canvas */
  --hero-card-radius: clamp(16px, 1.8vw, 24px);
  --hero-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);

  /* Floating Pill Navigation Tokens */
  --nav-glass-bg: rgba(26, 36, 64, 0.65); /* Rich Navy Smoked Glass */
  --nav-glass-blur: 28px;
  --nav-glass-border: 1px solid rgba(214, 155, 5, 0.22);
  --nav-glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --nav-pill-radius: 9999px;
  --nav-cta-bg: #D69B05;
  --nav-cta-hover: #E5AB1C;
  --nav-cta-text: #121C38;

  /* Kinetic Typography Tokens */
  --font-hero-headline: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --hero-headline-spacing: -0.035em;
  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Luxury Editorial Typography Styles */
.font-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.text-editorial-sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.8;
  font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #070B14;
    --color-bg-card: rgba(14, 22, 40, 0.75);
    --color-text-main: #F8FAFC;
  }
}

/* Glassmorphism utilities */
.glass {
  background: var(--color-bg-card);
  border: 1px solid var(--color-bg-card-border);
  backdrop-filter: blur(12px);
  border-radius: 16px;
}

/* Button styles */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #E5AB1C 0%, #D69B05 100%);
  color: #121C38;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  box-shadow: 0 4px 20px rgba(214, 155, 5, 0.4);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(214, 155, 5, 0.65);
  background: linear-gradient(135deg, #F0B429 0%, #E5AB1C 100%);
  color: #0E172E;
}

/* Hero section */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  text-align: center;
  color: var(--color-text-main);
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 15%, rgba(214, 155, 5, 0.08), transparent 40%), radial-gradient(circle at 80% 85%, rgba(34, 48, 87, 0.25), transparent 50%);
  z-index: -1;
}

.hero-content h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 4rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: var(--color-text-main);
}

.hero-content p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.8;
  max-width: 680px;
  margin: 0 auto 2.5rem auto;
  color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  .hero-content h1 { font-size: 2rem; }
  .hero-content p { font-size: 1rem; }
}