/* ===============================
   CSS VARIABLES
================================ */
:root {
    --primary-color: #2171ff;
    --primary-glow: rgba(33, 113, 255, 0.35);
    --text-main: #eaeaea;
    --text-muted: #b9c3d6;
  }
  
  /* ===============================
     GLOBAL
  ================================ */
  body {
    background: linear-gradient(135deg, #0a0f1c, #0d1426);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    line-height: 1.8;
  }
  
  /* ===============================
     NAVBAR (GLASS)
  ================================ */
  .glass-navbar {
    background: rgba(15, 20, 40, 0.45);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  
  .navbar-brand span {
    color: var(--primary-color);
    font-size: 1.2rem;
  }
  
  .nav-logo {
    height: 36px;
  }
  
  /* ===============================
     HERO
  ================================ */
  .terms-hero {
    padding: 150px 20px 90px;
    text-align: center;
  }
  
  .main-title {
    font-size: 3.3rem;
    font-weight: 800;
    color: var(--primary-color);
    text-shadow: 0 0 25px var(--primary-glow);
  }
  
  .subtitle {
    font-size: 1.3rem;
    color: var(--text-muted);
  }
  
  /* ===============================
     CONTENT
  ================================ */
  .terms-content {
    padding: 40px 0 90px;
  }
  
  .terms-card {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(12px);
    border-radius: 26px;
    padding: 55px;
    box-shadow:
      0 30px 80px rgba(0,0,0,0.55),
      inset 0 0 0 1px rgba(255,255,255,0.05);
  }
  
  .terms-card h2 {
    color: var(--primary-color);
    margin-bottom: 10px;
    text-shadow: 0 0 15px var(--primary-glow);
  }
  
  .last-updated {
    font-size: 0.9rem;
    color: #9aa6c4;
    margin-bottom: 35px;
  }
  
  .terms-card h3 {
    margin-top: 40px;
    color: #9bbcff;
    font-size: 1.45rem;
  }
  
  .terms-card p {
    color: #d7def2;
    font-size: 0.96rem;
  }
  
  /* ===============================
     DIVIDER
  ================================ */
  hr {
    border-color: rgba(255,255,255,0.12);
    margin: 35px 0;
  }
  
  /* ===============================
     LINKS (IF ANY)
  ================================ */
  a {
    color: var(--primary-color);
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  /* ===============================
     RESPONSIVE
  ================================ */
  @media (max-width: 768px) {
    .terms-card {
      padding: 35px 22px;
    }
  
    .main-title {
      font-size: 2.5rem;
    }
  }