/* === Charge global variables === */
:root {
    --primary:   #CC5500;   /* burnt orange */
    --secondary: #000000;   /* black */
    --tertiary:  #FFD700;   /* gold */
    --gray-100:  #f7f7f7;
    --gray-300:  #e2e2e2;
    --radius:    8px;
    font-family: "Inter", system-ui, sans-serif;
  }
  
  /* === Basic reset === */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  
  body {
    background: var(--gray-100);
    color: var(--secondary);
    line-height: 1.5;
  }
  
  /* === Navigation === */
  .navbar {
    background: #fff;
    border-bottom: 1px solid var(--gray-300);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
  }
  
  .navbar .logo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
  }
  
  /* === Landing hero === */
  .hero {
    max-width: 680px;
    margin: 4rem auto;
    text-align: center;
    padding: 0 1rem;
  }
  
  .hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--primary);
  }
  
  .hero p {
    margin-bottom: 2rem;
    color: #444;
  }
  
  .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }
  
  .btn {
    display: inline-block;
    padding: 0.9rem 1.8rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease;
  }
  
  .btn.pri {
    background: var(--primary);
    color: #fff;
  }
  
  .btn.pri:hover { transform: translateY(-2px); }
  
  .btn.sec {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
  }
  
  .btn.sec:hover { transform: translateY(-2px); }
  
  /* Footer */
  footer {
    text-align: center;
    padding: 2rem 0;
    font-size: 0.85rem;
    color: #666;
  }

  /* ANY button element */
button.btn { border:none; cursor:pointer; }
button.btn:active { transform:translateY(1px); }

/* ============================================================
   Global variables & reset
   ============================================================ */
   :root{
    --primary:#CC5500;--secondary:#000;--tertiary:#FFD700;
    --gray-100:#f7f7f7;--gray-300:#e2e2e2;--radius:8px;
    font-family:"Inter",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{background:var(--gray-100);color:var(--secondary);line-height:1.5;}
  
  /* ============================================================
     UNIVERSAL NAVBAR  (used by nav.php everywhere)
     ============================================================ */
  .navbar{display:flex;align-items:center;gap:2rem;background:#fff;
          padding:0 1.5rem;height:64px;border-bottom:1px solid var(--gray-300);}
  .logo{font-size:1.4rem;font-weight:700;color:var(--primary);}
  .search-box{position:relative;margin-left:auto;max-width:230px;}
  .search-box input{width:100%;padding:.5rem .6rem;border:1px solid #ccc;
                    border-radius:6px;font-size:.9rem;}
  #searchDrop{position:absolute;top:2.25rem;left:0;right:0;background:#fff;
              border:1px solid #ddd;border-top:none;border-radius:0 0 6px 6px;
              list-style:none;margin:0;padding:0;max-height:240px;overflow-y:auto;
              display:none;z-index:1000;}
  #searchDrop li{padding:.45rem .6rem;border-bottom:1px solid #eee;cursor:pointer;}
  #searchDrop li:hover{background:var(--gray-100);}
  .nav-user{display:flex;align-items:center;gap:1rem;margin-left:1.5rem;}
  .nav-user span{font-size:.9rem;}
  
  /* ============================================================
     Buttons
     ============================================================ */
  .btn{display:inline-block;border-radius:var(--radius);font-weight:600;
       text-decoration:none;cursor:pointer;transition:transform .15s ease;}
  .btn.pri{background:var(--primary);color:#fff;padding:.6rem 1.2rem;}
  .btn.sec{background:#fff;color:var(--primary);border:2px solid var(--primary);
           padding:.55rem 1.15rem;}
  .btn:hover{transform:translateY(-2px);}
  button.btn{border:none;}
  button.btn:active{transform:translateY(1px);}
  
  /* ============================================================
     (The rest of your page-specific styles stay as-is)
     ============================================================ */