@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
    --bg-dark: #080F1E;
    --bg-mid: #0D1B2E;
    --card-bg: #101F38;
    --gold: #C9A84C; /* Acts as premium construction yellow */
    --gold-light: #E8C97A;
    --gold-glow: rgba(201, 168, 76, 0.25);
    --gold-subtle: rgba(201, 168, 76, 0.08);
    --green: #4ECDC4;
    --text-main: #EAF0FF;
    --text-muted: #7A8BA6;
    --text-dim: #4A5568;
    --border: rgba(201, 168, 76, 0.12);
    --border-hover: rgba(201, 168, 76, 0.5);
    --shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.6);
    --radius: 14px;
    --radius-sm: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--bg-dark);
    background-image:
        radial-gradient(ellipse at 20% 10%, rgba(201,168,76,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(78,205,196,0.03) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: var(--text-main);
    font-family: 'DM Sans', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

h1,h2,h3,h4 { font-family: 'Playfair Display', serif; }
code,.mono { font-family: 'JetBrains Mono', monospace; }

/* ── NAV ── */
.main-nav {
    position: fixed; top:0; left:0; right:0; z-index:1000;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 4%; height:64px;
    background: rgba(8,15,30,0.92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}
.nav-logo { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:900; color:var(--text-main); text-decoration:none; letter-spacing:-1px; flex-shrink:0; }
.nav-logo .gold-dot { color:var(--gold); }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link { padding:7px 12px; color:var(--text-muted); text-decoration:none; font-weight:500; font-size:0.85rem; border-radius:6px; transition:all 0.2s; white-space:nowrap; }
.nav-link:hover,.nav-link.active { color:var(--text-main); background:var(--gold-subtle); }
.nav-link.active { color:var(--gold); }
.nav-contact-btn { padding:7px 15px; border:1px solid var(--border-hover); color:var(--gold) !important; border-radius:6px; font-weight:600; font-size:0.85rem; cursor:pointer; background:transparent; transition:all 0.2s; text-decoration:none; margin-left: 10px; }
.nav-contact-btn:hover { background:var(--gold-subtle); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--text-main); border-radius:2px; transition:0.3s; }

/* ── CARDS ── */
.executive-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); transition:all 0.3s cubic-bezier(0.25,0.8,0.25,1); }
.executive-card:hover { border-color:var(--border-hover); box-shadow:0 20px 60px -15px var(--gold-glow); transform:translateY(-4px); }

/* ── LAYOUT ── */
.page-wrapper { padding-top:64px; }
.section-title { text-align:center; font-size:clamp(1.6rem,3vw,2.2rem); color:var(--gold); margin-bottom:0.6rem; }
.section-subtitle { text-align:center; color:var(--text-muted); font-size:0.93rem; margin-bottom:3rem; }
.section-label { font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--green); letter-spacing:3px; text-transform:uppercase; text-align:center; margin-bottom:0.8rem; }

/* ── BUTTONS ── */
.btn-primary { display:inline-flex; align-items:center; gap:8px; padding:11px 24px; background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--bg-dark); text-decoration:none; border-radius:var(--radius-sm); font-weight:700; font-size:0.88rem; transition:all 0.2s; border:none; cursor:pointer; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 25px var(--gold-glow); }
.btn-outline { display:inline-flex; align-items:center; gap:8px; padding:11px 24px; border:1px solid var(--border-hover); color:var(--gold); text-decoration:none; border-radius:var(--radius-sm); font-weight:600; font-size:0.88rem; transition:all 0.2s; cursor:pointer; background:transparent; }
.btn-outline:hover { background:var(--gold-subtle); transform:translateY(-2px); }

/* ── SITE HERO ── */
.site-hero { min-height:90vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4rem 6% 2rem; position:relative; overflow:hidden; }
.site-hero::before { content:''; position:absolute; top:-30%; left:50%; width:700px; height:500px; transform:translateX(-50%); background:radial-gradient(ellipse,rgba(201,168,76,0.07) 0%,transparent 70%); pointer-events:none; }
.site-eyebrow { font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:var(--green); letter-spacing:3px; text-transform:uppercase; margin-bottom:1.5rem; }
.site-hero h1 { font-size:clamp(2.8rem,6vw,4.5rem); line-height:1.1; margin-bottom:1.2rem; color:var(--text-main); }
.site-hero h1 span { color:var(--gold); }
.site-hero-sub { font-size:1.05rem; color:var(--text-muted); max-width:650px; margin:0 auto 2.5rem; line-height:1.7; }
.site-hero-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:4rem; }

.feature-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; max-width:1100px; width:100%; }
.feature-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; text-align:left; text-decoration:none; color:inherit; transition:all 0.3s ease; position:relative; overflow:hidden; }
.feature-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--green)); opacity:0; transition:opacity 0.3s; }
.feature-card:hover { border-color:var(--border-hover); transform:translateY(-6px); box-shadow:0 20px 50px -15px var(--gold-glow); }
.feature-card:hover::after { opacity:1; }
.fc-icon { font-size:2.5rem; margin-bottom:1rem; display:block; }
.fc-title { font-size:1.25rem; margin-bottom:0.6rem; color: var(--gold); }
.fc-desc { font-size:0.9rem; color:var(--text-muted); line-height:1.6; }

/* ── DETAILS / ABOUT ── */
.about-section { padding:5rem 6%; }
.details-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:30px; }
.details-grid .executive-card { padding:3rem; }
.details-grid ul { list-style:none; margin-top:1.5rem; }
.details-grid li { margin-bottom:16px; position:relative; padding-left:22px; color:var(--text-muted); font-size:0.95rem; line-height:1.5; }
.details-grid li::before { content:'▹'; position:absolute; left:0; color:var(--gold); }
.director-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.5rem; }
.director-badge { background: var(--gold-subtle); border: 1px solid var(--border); color: var(--text-main); padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; }

/* ── TRACKERS / PROJECTS ── */
.trackers-section { padding:5rem 8%; }
.tracker-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.tracker-card { padding:2.5rem 2rem; text-align:center; position: relative; }
.tracker-card .icon { font-size:2.5rem; margin-bottom:12px; display:block; }
.stipend-base { color:var(--text-dim) !important; font-size:0.8rem !important; }
.premium-card { border:1px solid var(--border-hover) !important; box-shadow: 0 0 30px rgba(201, 168, 76, 0.1); }
.gold-text { color:var(--gold); }
.fc-badge { display:inline-flex; align-items:center; font-family:'JetBrains Mono',monospace; font-size:0.65rem; padding:4px 10px; border-radius:20px; margin-bottom:0.8rem; letter-spacing:0.5px; text-transform:uppercase; }
.badge-live { background:rgba(78,205,196,0.1); color:var(--green); border:1px solid rgba(78,205,196,0.3); }
.badge-free { background:rgba(201,168,76,0.1); color:var(--gold); border:1px solid rgba(201,168,76,0.3); }

/* ── REGISTRATIONS / NICHE GRID ── */
.journey-section { padding:5rem 8%; }
.niche-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-bottom:3rem; }
.niche-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; text-align:center; transition:all 0.25s; }
.niche-card:hover { border-color:var(--gold); transform:translateY(-3px); box-shadow: 0 10px 20px var(--gold-subtle); }
.niche-name { font-family:'DM Sans',sans-serif; font-weight:700; font-size:1rem; margin-bottom:0.8rem; display: block; color: var(--text-main); }

/* ── FOOTER ── */
footer { text-align:center; padding:4rem 2rem 2rem; margin-top:3rem; color:var(--text-dim); font-size:0.85rem; border-top:1px solid var(--border); background:#060b17; }

/* ── ANIMATIONS ── */
.slide-up { opacity:0; transform:translateY(30px); transition:all 0.7s cubic-bezier(0.4,0,0.2,1); }
.slide-up.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
    .main-nav { padding:0 4%; }
    .nav-links { position:fixed; top:64px; left:0; right:0; background:var(--bg-dark); border-bottom:1px solid var(--border); flex-direction:column; padding:1.5rem; gap:10px; display:none; z-index:999; }
    .nav-links.open { display:flex; }
    .hamburger { display:flex; }
    .nav-contact-btn { margin-left: 0; width: 100%; text-align: center; margin-top: 10px; }
    .site-hero h1 { font-size:clamp(2.2rem,8vw,3.5rem); }
    .feature-cards { grid-template-columns:1fr; }
    .details-grid { grid-template-columns:1fr; }
    .niche-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
    .niche-grid { grid-template-columns:1fr; }
}