/* ==========================================================================
   Exact Match Base Styles
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

   :root {
       /* Deep dark blue background from image */
       --bg-color: #0f141e;
       --surface-color: rgba(255, 255, 255, 0.03);
       --border-color: rgba(255, 255, 255, 0.08);
       
       /* Text Colors */
       --text-main: #e2e8f0;
       --text-muted: #94a3b8;
       --accent-color: #cda25e; /* Exact gold tone */
       --accent-hover: #e0b875;
       
       /* Typography */
       --font-body: 'Inter', sans-serif;
       --font-heading: 'Playfair Display', serif;
       
       /* Effects */
       --transition: all 0.3s ease;
   }
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   body {
       font-family: var(--font-body);
       background-color: var(--bg-color);
       color: var(--text-main);
       line-height: 1.5;
       overflow-x: hidden;
       /* Very subtle radial glow matching the image top left */
       background-image: radial-gradient(circle at 10% 10%, rgba(205, 162, 94, 0.05) 0%, transparent 40%);
   }
   
   a {
       text-decoration: none;
       color: inherit;
       transition: var(--transition);
   }
   
   ul {
       list-style: none;
   }
   
   h1, h2, h3, h4, h5, h6 {
       font-family: var(--font-heading);
       font-weight: 500;
       line-height: 1.2;
   }
   
   .container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 0 5%;
   }
   
   /* Typography Helpers */
   .text-accent {
       color: var(--accent-color);
   }
   .text-muted {
       color: var(--text-muted);
   }
   
   /* Buttons */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 0.6rem 1.2rem;
       border-radius: 4px;
       font-size: 0.85rem;
       font-family: var(--font-body);
       cursor: pointer;
       transition: var(--transition);
       border: 1px solid transparent;
       gap: 0.5rem;
   }
   
   .btn-primary {
       background-color: var(--accent-color);
       color: #111;
       font-weight: 500;
   }
   
   .btn-primary:hover {
       background-color: var(--accent-hover);
   }
   
   .btn-outline {
       background-color: transparent;
       border-color: var(--border-color);
       color: var(--text-main);
   }
   
   .btn-outline:hover {
       border-color: var(--accent-color);
       color: var(--accent-color);
   }
   
   /* Header */
   .site-header {
       position: absolute; /* Not fixed, flush with top in design */
       top: 0;
       left: 0;
       width: 100%;
       padding: 1.5rem 0;
       z-index: 1000;
       background: transparent;
   }
   
   .header-inner {
       display: flex;
       align-items: center;
       justify-content: space-between;
       border-bottom: 1px solid rgba(255,255,255,0.05);
       padding-bottom: 1.5rem;
   }
   
   .logo {
       font-family: var(--font-heading);
       font-size: 1.6rem;
       color: var(--text-main);
       display: flex;
       flex-direction: column;
       line-height: 1;
   }
   
   .logo span {
       font-family: var(--font-body);
       font-size: 0.6rem;
       letter-spacing: 0.4em;
       text-transform: uppercase;
       color: var(--text-muted);
       margin-top: 0.3rem;
   }
   
   .main-nav ul {
       display: flex;
       gap: 2.5rem;
   }
   
   .main-nav a {
       font-size: 0.85rem;
       color: var(--text-main);
   }
   
   .main-nav a:hover,
   .main-nav a.active {
       color: var(--accent-color);
   }
   
   .header-actions {
       display: flex;
       align-items: center;
       gap: 2rem;
   }
   
   .social-icons {
       display: flex;
       gap: 1.5rem;
   }
   
   .social-icons a {
       color: var(--text-muted);
       font-size: 1rem;
   }
   
   .social-icons a:hover {
       color: var(--text-main);
   }
   
   /* Footer */
   .site-footer {
       border-top: 1px solid var(--border-color);
       padding: 2rem 0;
       margin-top: 4rem;
   }
   
   .footer-inner {
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 0.8rem;
       color: var(--text-muted);
   }
   
   .footer-links {
       display: flex;
       gap: 3rem;
   }
   
   .footer-links a:hover {
       color: var(--text-main);
   }

   /* ==========================================================================
      Global Responsive Design
      ========================================================================== */
   
   @media (max-width: 1200px) {
       .container { padding: 0 2rem; }
   }
   
   @media (max-width: 992px) {
       .header-inner { flex-direction: column; gap: 1rem; padding-bottom: 1rem; }
       .main-nav ul { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
       .header-actions { margin-top: 1rem; }
       .site-header { padding: 1rem 0; position: relative; } /* Push content down natively */
   }
   
   @media (max-width: 768px) {
       .site-header { padding: 0.5rem 0; }
       .header-inner { flex-direction: column; gap: 0.5rem; padding-bottom: 0.5rem; }
       .logo { font-size: 1.3rem; }
       .main-nav { width: 100%; }
       .main-nav ul { 
           flex-wrap: wrap; 
           justify-content: center; 
           gap: 0.4rem 1rem;
           padding-bottom: 0;
       }
       .main-nav a { font-size: 0.85rem; }
       .header-actions { flex-direction: row; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0; }
       .social-icons { gap: 1rem; }
       .header-actions .btn { display: none; }
       .footer-inner { flex-direction: column; gap: 1.5rem; text-align: center; }
       .footer-links { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
   }