:root{
  --navy:#0a1e3f;
  --navy-2:#0e2a52;
  --navy-3:#132f5a;
  --gold:#f4b429;
  --gold-dark:#d99c1e;
  --forest:#0F4C3A;
  --forest-light:#176B52;
  --cream:#FDFBF7;
  --border:#e5e7eb;
  --muted:#6b7280;
  --ink:#1f2937;
}
*{box-sizing:border-box;margin:0;padding:0}

/* ===== LAYOUT ===== */
.layout{

  gap:24px;
  padding:24px 32px 60px;
  max-width:1440px;margin:0 auto;
  align-items:start;
}
@media(max-width:1024px){
  .layout{grid-template-columns:1fr;padding:20px 16px 40px}
}

/* ===== MAIN ===== */
.main{display:flex;flex-direction:column;gap:20px;min-width:0}

/* ===== HERO ===== */
.hero-card{
    position: relative;
    overflow: hidden;
    border-radius: 16px;
  min-height: 450px;
  padding: 120px 26px 20px;
    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(6,21,48,0.95) 0%,
            rgba(10,30,63,0.88) 45%,
            rgba(10,30,63,0.55) 70%,
            rgba(6,21,48,0.25) 100%
        ),
        url("../images/youth.ef80474f0a20.png") center center / cover no-repeat;
}
.hero-card::before{
  content:"";position:absolute;inset:0;

  background-size:44px 44px;opacity:.06;pointer-events:none;
}
.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 42%;gap:28px;align-items:center;
}
.hero-text h1{
  font-size:clamp(28px,3.4vw,44px);
  color:#fff;font-weight:700;line-height:1.05;margin-bottom:10px;
}
.hero-text .lead{
  color:rgba(255,255,255,.82);
  font-family:'Manrope',sans-serif;
  font-size:15px;max-width:520px;line-height:1.55;
  margin-bottom:26px;
}
.hero-feats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:560px;
}
.hero-feat{text-align:left}
.hero-feat .fi{
  width:52px;height:52px;border-radius:12px;
  background:rgba(244,180,41,.12);
  border:1px solid rgba(244,180,41,.35);
  display:grid;place-items:center;color:var(--gold);
  margin-bottom:10px;
}
.hero-feat h5{color:var(--gold);font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:700;margin-bottom:3px}
.hero-feat p{font-size:12px;color:rgba(255,255,255,.65);line-height:1.4}

.hero-img{
  position:relative;border-radius:14px;overflow:hidden;
  min-height:280px;
  background:linear-gradient(135deg,#1e3a8a,#4c1d95);
}
.hero-img::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(244,180,41,.25), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(139,92,246,.35), transparent 60%);
}
.hero-img img{
  position:relative;width:100%;height:100%;object-fit:cover;
  min-height:280px;
}
.deco-icons{
  position:absolute;top:14px;right:16px;display:flex;gap:10px;z-index:3;
  color:rgba(255,255,255,.4);
}
.deco-icons i{font-size:20px}

@media(max-width:900px){
  .hero-card{padding:90px 20px}
  .hero-inner{grid-template-columns:1fr}
  .hero-feats{grid-template-columns:repeat(2,1fr);max-width:100%}
  .hero-img{min-height:220px}
}

/* ===== STATS ===== */
.stats-bar{
  background:#fff;border-radius:14px;
  padding:20px 24px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:16px;
  box-shadow:0 8px 24px -18px rgba(10,30,63,.35);
  border:1px solid #eef2f7;
}
.stat{display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:12px}
.stat-ic{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;font-size:18px;flex-shrink:0;
}
.stat.c1 .stat-ic{background:#eef2ff;color:#4f46e5}
.stat.c2 .stat-ic{background:#eff6ff;color:#2563eb}
.stat.c3 .stat-ic{background:#fef3c7;color:#d97706}
.stat.c4 .stat-ic{background:#dcfce7;color:#16a34a}
.stat.c5 .stat-ic{background:#e0f2fe;color:#0284c7}
.stat.c6 .stat-ic{background:#fee2e2;color:#dc2626}
.stat-num{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:22px;color:#0f172a;line-height:1.2;letter-spacing:0.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-lbl{font-size:12px;color:#64748b;margin-top:3px}
@media(max-width:1024px){.stats-bar{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.stats-bar{grid-template-columns:repeat(2,1fr);padding:16px}}

/* ===== TWO COL SECTION ===== */
.two-col{
  display:grid;grid-template-columns:1fr 340px;gap:20px;
}
@media(max-width:1100px){.two-col{grid-template-columns:1fr}}

.panel{
  background:#fff;border-radius:14px;padding:22px;
  border:1px solid #eef2f7;
  box-shadow:0 6px 20px -18px rgba(10,30,63,.3);
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
}
.panel-head h3{font-size:19px;color:#0f172a;font-weight:700}
.view-all{
  color:#2563eb;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:4px;
}
.view-all:hover{text-decoration:underline}

/* Opportunities */
.opp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.opp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.opp-grid{grid-template-columns:1fr}}
.opp-card{
  border:1px solid #e5e7eb;border-radius:12px;padding:18px 16px;
  text-align:center;display:flex;flex-direction:column;align-items:center;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  background:#fff;
}
.opp-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px -14px rgba(10,30,63,.25);border-color:#d1fae5}
.opp-ic{
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:12px;font-size:22px;
}
.opp-ic.g{background:#dcfce7;color:#16a34a}
.opp-ic.b{background:#dbeafe;color:#2563eb}
.opp-ic.p{background:#f3e8ff;color:#9333ea}
.opp-ic.y{background:#fef3c7;color:#ca8a04}
.opp-card h4{font-family:'Manrope',sans-serif;font-size:14.5px;font-weight:700;color:#0f172a;margin-bottom:6px}
.opp-card p{font-size:12px;color:#64748b;line-height:1.45;margin-bottom:14px;flex:1}
.opp-btn{
  background:#0e274c;color:#fff;padding:8px 16px;border-radius:8px;
  font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;
}
.opp-btn:hover{background:#f4b429}

/* Events sidebar */
.event-list{display:flex;flex-direction:column;gap:14px}
.event-item{
  display:flex;gap:12px;padding-bottom:14px;
  border-bottom:1px solid #f1f5f9;
}
.event-item:last-child{border-bottom:none;padding-bottom:0}
.event-img{
  width:78px;height:70px;border-radius:10px;object-fit:cover;flex-shrink:0;
}
.event-info{flex:1;min-width:0}
.event-info h5{font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:700;color:#0f172a;margin-bottom:6px;line-height:1.3}
.event-meta{font-size:12px;color:#64748b;display:flex;align-items:center;gap:5px;margin-bottom:3px}
.event-meta i{font-size:12px;color:#94a3b8;width:12px}
.event-tag{
  display:inline-block;padding:2px 8px;border-radius:6px;
  font-size:12px;font-weight:600;margin-top:6px;
}
.tag-hack{background:#dcfce7;color:#166534}
.tag-work{background:#dbeafe;color:#1e40af}
.tag-meet{background:#fef3c7;color:#854d0e}
.tag-chall{background:#fce7f3;color:#9d174d}

/* Featured innovations */
.inn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1200px){.inn-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.inn-grid{grid-template-columns:1fr}}
.inn-card{
  border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;
  transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;
}
.inn-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px -16px rgba(10,30,63,.3)}
.inn-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e2e8f0}
.inn-thumb img{width:100%;height:100%;object-fit:cover}
.inn-badge{
  position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:6px;
  font-size:12px;font-weight:700;color:#fff;
}
.bg-env{background:#16a34a}
.bg-edu{background:#8b5cf6}
.bg-hth{background:#0ea5e9}
.bg-agr{background:#84cc16}
.inn-body{padding:14px;display:flex;flex-direction:column;flex:1}
.inn-body h4{font-family:'Manrope',sans-serif;font-size:14px;font-weight:700;color:#0f172a;margin-bottom:5px;line-height:1.3}
.inn-body p{font-size:12px;color:#64748b;line-height:1.45;margin-bottom:10px;flex:1}
.inn-loc{font-size:12px;color:#64748b;display:flex;align-items:center;gap:5px;margin-bottom:10px}
.inn-loc i{color:#94a3b8}
.inn-foot{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid #f1f5f9}
.inn-votes{font-size:12px;color:#64748b;display:flex;align-items:center;gap:5px}
.inn-votes i{color:#16a34a}
.inn-status{padding:3px 8px;border-radius:6px;font-size:12px;font-weight:600}
.st-impl{background:#dcfce7;color:#166534}
.st-rev{background:#fef3c7;color:#854d0e}
.st-short{background:#dbeafe;color:#1e40af}

/* Innovators sidebar */
.innov-list{display:flex;flex-direction:column;gap:14px}
.innov-item{
  display:flex;align-items:center;gap:12px;padding-bottom:14px;
  border-bottom:1px solid #f1f5f9;
}
.innov-item:last-child{border-bottom:none;padding-bottom:0}
.rank{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;
  font-family:'Playfair Display',serif;font-weight:700;font-size:13px;
  color:#fff;position:relative;
}
.rank-1{background:linear-gradient(135deg,#fbbf24,#d97706)}
.rank-2{background:linear-gradient(135deg,#e5e7eb,#9ca3af);color:#374151}
.rank-3{background:linear-gradient(135deg,#f59e0b,#92400e)}
.rank-o{background:#f1f5f9;color:#64748b}
.innov-avatar{
  width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid #f1f5f9;
}
.innov-info{flex:1;min-width:0}
.innov-info h5{font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:700;color:#0f172a;margin-bottom:1px}
.innov-info .place{font-size:12px;color:#64748b;margin-bottom:2px}
.innov-info .ideas{font-size:12px;color:#94a3b8}

/* Resources */
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1024px){.res-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.res-grid{grid-template-columns:1fr}}
.res-card{
  border:1px solid #e5e7eb;border-radius:12px;padding:16px;background:#fff;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.res-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px -16px rgba(10,30,63,.25);border-color:#c7d2fe}
.res-ic{
  width:44px;height:44px;border-radius:10px;
  display:grid;place-items:center;margin-bottom:12px;font-size:18px;
}
.res-ic.g{background:#dcfce7;color:#16a34a}
.res-ic.b{background:#dbeafe;color:#2563eb}
.res-ic.o{background:#ffedd5;color:#ea580c}
.res-ic.p{background:#f3e8ff;color:#9333ea}
.res-card h4{font-family:'Manrope',sans-serif;font-size:14px;font-weight:700;color:#0f172a;margin-bottom:5px}
.res-card p{font-size:12px;color:#64748b;line-height:1.45;margin-bottom:12px}
.res-link{
  font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:4px;
}
.res-link.g{color:#16a34a}
.res-link.b{color:#2563eb}
.res-link.o{color:#ea580c}
.res-link.p{color:#9333ea}
.res-link:hover{text-decoration:underline}

/* CTA Banner */
.cta-banner{
  background:linear-gradient(90deg,#dcfce7,#f0fdf4);
  border-radius:14px;padding:24px 28px;
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;
  align-items:center;
  border:1px solid #bbf7d0;
}
.cta-illust{
  width:110px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.cta-illust svg{width:100%;height:auto}
.cta-text h3{font-family:'Playfair Display',serif;font-size:22px;color:#14532d;margin-bottom:6px}
.cta-text p{font-size:13.5px;color:#166534;margin-bottom:14px;max-width:520px;line-height:1.5}
.cta-submit{
  background:#0e274c;color:#fff;padding:11px 22px;border-radius:8px;
  font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:6px;
}
.cta-submit:hover{background:#15803d}
.cta-mini-stats{
  display:flex;gap:22px;flex-wrap:wrap;
}
.cta-mini{display:flex;align-items:center;gap:10px}
.cta-mini-ic{
  width:38px;height:38px;border-radius:10px;background:#fff;
  display:grid;place-items:center;color:#16a34a;font-size:16px;
  border:1px solid #bbf7d0;
}
.cta-mini-num{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:#14532d;line-height:1}
.cta-mini-lbl{font-size:12px;color:#166534;margin-top:2px}
@media(max-width:900px){
  .cta-banner{grid-template-columns:1fr;text-align:center;padding:22px 18px}
  .cta-illust{margin:0 auto}
  .cta-mini-stats{justify-content:center}
}