/* ====================
       Design Tokens
    ==================== */
    :root {
      /* Brand palette (navy / sand‑gold / soft gray) */
      --bg: #0b1220;
      --card: #131a2a;
      --text: #f8fafc;
      --muted: #94a3b8;
      --primary: #9F8363; /* sand‑gold accent */
      --primary-contrast: #111827;
      --ring: rgba(159,131,99,.5);
      --ok: #22c55e;
      --warn: #f59e0b;
      --danger: #ef4444;
      --shadow: 0 10px 30px rgba(0,0,0,.25);
      --radius: 16px;
    }
    :root.light {
      --bg: #ffffff;
      --card: #f6f7f9;
      --text: #0b1220;
      --muted: #475569;
      --primary: #9F8363; /* keep brand accent in light */
      --primary-contrast: #fdfaf7;
      --ring: rgba(159,131,99,.35);
      --shadow: 0 8px 24px rgba(0,0,0,.08);
    }

    /* ====================
       Base Styles
    ==================== */
    html, body { 
        height: 100%;
     }

    body {
      margin: 0; 
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
      background: var(--bg); 
      color: var(--text); 
      line-height: 1.55;
      -webkit-font-smoothing: antialiased; 
      -moz-osx-font-smoothing: grayscale;
      scroll-behavior: smooth;
    }

    a { 
        color: inherit; 
        text-decoration: none; 
    }

    img { 
        max-width: 100%; 
        height: auto; 
        display: block; 
        border-radius: 12px;
     }
    .container { 
        width: min(1120px, 92vw); 
        margin: 0 auto; 
    }

    /* Utility */
    .btn { 
        display:inline-flex; 
        gap:.5rem; 
        align-items:center; 
        border-radius: 999px; 
        padding:.8rem 1.1rem; 
        font-weight:600; 
        border:1px solid transparent; 
        box-shadow: var(--shadow); 
    }

    .btn.primary {
        background: var(--primary); 
        color: var(--primary-contrast); 
    }

    .btn.ghost { 
        background: transparent; 
        border-color: rgba(255,255,255,.2); 
        color: var(--text); 
    }
    :root.light .btn.ghost {
         border-color: rgba(0,0,0,.15);
    }

    .btn:focus-visible { 
        outline: none; 
        box-shadow: 0 0 0 4px var(--ring); 
    }
    .pill { 
        display:inline-block; 
        padding:.25rem .65rem; 
        border-radius:999px; 
        background: rgba(159,131,99,.18); 
        color: #f3e7d7; 
        font-size:.8rem; 
    }
    :root.light .pill { 
        color:#3b2d1e; 
    }

    /* ====================
       Header / Nav
    ==================== */
    header.site-header { 
        position: sticky; 
        top:0; 
        z-index: 50;
        backdrop-filter: saturate(140%) blur(6px); 
        border-bottom: 1px solid rgba(255,255,255,.08); 
    }

    :root.light header.site-header {
        border-bottom-color: rgba(0,0,0,.06); 
    }
    .nav { 
        display:flex; 
        align-items:center; 
        justify-content:space-between; 
        padding:.75rem 0; 
    }
    .brand { 
        display:flex; 
        gap:.6rem; 
        align-items:center; 
        font-weight: 800; 
        letter-spacing:.2px; 
    }

    .brand .logo { 
        width:36px; 
        height:36px; 
        border-radius:12px; 
        background: linear-gradient(135deg, var(--primary) 0%, #c8b299 100%); 
        display:grid; 
        place-items:center; 
        color: var(--primary-contrast); 
        font-weight:900; 
        box-shadow: var(--shadow); 
    }

    .nav ul { 
        list-style:none; 
        display:flex; 
        gap:1.1rem; 
        padding:0; 
        margin:0; 
    }

    .nav a { 
        opacity:.9; 
    }

    .nav a:hover { 
        opacity:1; 
        text-decoration: underline; 
        text-underline-offset: 4px; 
    }

    .theme-toggle { 
        border:1px solid rgba(255,255,255,.2); 
        background:transparent; color:inherit; 
        border-radius:10px; 
        padding:.45rem .6rem; 
        cursor:pointer; 
    }

    :root.light .theme-toggle { 
        border-color: rgba(0,0,0,.2); 
    }

    /* ====================
       Hero
    ==================== */
    .hero { 
        position: relative; 
        padding: clamp(3rem, 8vw, 7rem) 0 4rem; 
    }
    .hero-grid { 
        display:grid; 
        grid-template-columns: 1.1fr .9fr; 
        gap: clamp(1.2rem, 3vw, 2rem); 
        align-items: center; 
    }

    .hero h1 { 
        font-size: clamp(2rem, 4.8vw, 3.4rem); 
        line-height: 1.05; 
        margin: 0 0 .6rem; 
    }

    .hero p.lead { 
        font-size: clamp(1rem, 2.1vw, 1.25rem); 
        color: var(--muted); 
        margin: 0 0 1.3rem; 
    }

    .cta-row { 
        display:flex; 
        gap:.75rem; 
        flex-wrap: wrap; 
    }

    .hero-media { 
        position: relative; 
    }

    .hero-media .frame { 
        border-radius: 20px; 
        overflow: hidden; 
        box-shadow: var(--shadow); 
        background: var(--card); 
        padding: .65rem; 
    }

    .wave { 
        position:absolute; 
        inset-inline:0; 
        bottom:-1px; 
        height: 110px; 
        pointer-events:none; 
    }

    .wave svg { 
        width:100%; 
        height:100%; 
        display:block; 
    }

    /* Media gallery */
.media-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.media-card{background:var(--card); border-radius:var(--radius); padding:.75rem; box-shadow:var(--shadow)}
.media-aspect{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:12px;}
.media-aspect img, .media-aspect video{width:100%; height:100%; object-fit:cover}
.media-card figcaption{color:var(--muted); font-size:.95rem; margin-top:.5rem}


    /* ====================
       Services
    ==================== */
    section { 
        padding: 4rem 0; 
    }

    h2.section-title { 
        font-size: clamp(1.4rem, 3vw, 2rem); 
        margin: 0 0 .8rem; 
    }

    p.section-intro { 
        color: var(--muted); 
        margin: 0 0 1.4rem; 
    }

    .grid { 
        display:grid; 
        grid-template-columns: repeat(12, 1fr); 
        gap: 1rem; 
    }

    .card { 
        grid-column: span 4; 
        background: var(--card); 
        border:1px solid rgba(255,255,255,.06); 
        border-radius: var(--radius); 
        padding: 1rem; 
        box-shadow: var(--shadow); 
        transition: transform .2s ease, box-shadow .2s ease; 
    }

    :root.light .card { 
        border-color: rgba(0,0,0,.05); 
    }

    .card:hover { 
        transform: translateY(-2px); 
        box-shadow: 0 14px 36px rgba(0,0,0,.28); 
    }

    .card h3 { 
        margin:.2rem 0 .4rem; 
        font-size:1.05rem; 
    }

    .card p {
         margin:0; 
         color: var(--muted); 
    }

    .icon { 
        width: 34px; 
        height:34px; 
        border-radius:10px; 
        background: rgba(159,131,99,.18); 
        display:grid; 
        place-items:center; 
        font-size: 18px; 
    }

    :root.light .icon {
        background: rgba(159,131,99,.15); 
    }

    /* ====================
       Impact Stats
    ==================== */
    .stats { 
        display:grid; 
        grid-template-columns: repeat(4,1fr); 
        gap:1rem; 
        margin-top:1rem; 
    }

    .stat { 
        background: var(--card); 
        border:1px solid rgba(255,255,255,.08);
         border-radius: var(--radius); 
         padding:1rem; 
         text-align:center; 
    }

    .stat strong { 
        font-size:1.6rem; 
        display:block; 
    }

    :root.light .stat { 
        border-color: rgba(0,0,0,.06); 
    }

    /* Timeline */
    .timeline { 
        border-left:2px solid rgba(159,131,99,.35); 
        margin-left:.5rem; 
        padding-left:1rem; 
    }
    .timeline .item { 
        margin: .8rem 0; 
    }

    .timeline .item h4 { 
        margin:.2rem 0; 
    }
    .timeline .item p { 
        margin:.1rem 0; 
        color: var(--muted); 
    }

    /* Testimonials */
    .quotes { 
        display:grid; 
        grid-template-columns: repeat(3,1fr); 
        gap:1rem; 
    }
    .quote { 
        background: var(--card); 
        border:1px solid rgba(255,255,255,.08); 
        border-radius: var(--radius); 
        padding:1rem; 
        font-style: italic; 
    }

    /* Partners */
    .partners { 
        display:grid; 
        grid-template-columns: repeat(6,1fr); 
        gap:.8rem; 
        align-items:center; 
    }

    .partner { 
        background: var(--card); 
        border:1px solid rgba(255,255,255,.06); 
        border-radius:12px; 
        height:56px; display:grid; 
        place-items:center; 
        font-size:.95rem; 
        color: var(--muted); 
    }

    /* Contact */
    form { 
        display:grid; 
        gap:.8rem; 
        margin-top:.6rem; 
    }

    input, textarea, select { 
        width:100%; 
        padding:.8rem; 
        border-radius: 12px; 
        background: #0e1527; 
        border:1px solid rgba(255,255,255,.12); 
        color: var(--text); 
    }

    :root.light input, :root.light textarea, :root.light select { 
        background:#ffffff; 
        border-color: rgba(0,0,0,.12); 
        color: #0b1220; 
    }

    label { 
        font-weight:600; 
        font-size:.95rem; 
    }

    /* Footer */
    footer { 
        padding:1rem 0; 
        border-top:1px solid rgba(255,255,255,.08); 
        color: var(--muted); 
    }

    :root.light footer { 
        border-top-color: rgba(0,0,0,.08); 
    }

    .footer-socials .social-container{ 
    display:flex; 
    gap:12px; 
    flex-wrap:wrap;
}

.footer-row{
  display:flex; 
  justify-content:space-between; 
  align-items:flex-start;
  gap:40px; 
  flex-wrap:wrap; 
  margin-bottom:20px;
}

.footer-socials i{
  font-size:1.1rem; 
  width:18px; 
  height:18px; 
  display:inline-flex;
  align-items:center; 
  justify-content:center; 
  border-radius:50%;
}

/* Bottom strip */
.footer-bottom{
  text-align:center; 
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:16px; 
  color:#a6b0c3;
  font-size:.9rem;
}

#facebook{ 
  background:#4267B2; 
  color:#fff; 
  border-radius:50px; 
  padding:10px; 
  font-size:1rem;
}

#instagram{ 
  background:linear-gradient(180deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bf4); color:#fff; 
  border-radius:50px; 
  padding:10px; 
  font-size:1rem;
}

#X{ 
  background:#020618; 
  color:#fff; 
  border-radius:50px; 
  padding:10px; 
  font-size:1rem;
}

#youtube{ 
  background:#FF0000; 
  color:#fff; 
  border-radius:50px; 
  padding:10px; 
  font-size:1rem;
}

#linkedin{ 
  background:#4f5bf4; 
  color:#fff; 
  border-radius:50px; 
  padding:10px; 
  font-size:1rem;
}

#github{ 
  background:#000; 
  color:#fff; 
  border-radius:50px; 
  padding:10px; 
  font-size:1rem;
}

.site-footer{ 
  padding:28px 0; 
  background:#0b1220; 
  border-top:1px solid rgba(255,255,255,.1); 
  margin-top:48px; 
}

.footer-container{ 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:16px; 
  flex-wrap:wrap; 
}

.foot__inner p{ 
  margin:4px 0; 
  color:#fff; 
}

.socials .social-container{ 
  display:flex; 
  gap:12px;
}

    /* Responsive */
    @media (max-width: 980px) {
      .hero-grid { grid-template-columns: 1fr; }
      .grid .card { grid-column: span 6; }
      .stats { grid-template-columns: repeat(2,1fr); }
      .quotes { grid-template-columns: 1fr; }
      .partners { grid-template-columns: repeat(3,1fr); }
    }
    @media (max-width: 640px) {
      .grid .card { grid-column: span 12; }
      .stats { grid-template-columns: 1fr 1fr; }
      .partners { grid-template-columns: repeat(2,1fr); }
    }