/* HERO */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-mid) 55%,var(--navy-lt) 100%);padding:90px 24px 110px;position:relative;overflow:hidden;text-align:center}
.hero-circle{position:absolute;border-radius:50%;pointer-events:none}
.hero-c1{width:500px;height:500px;top:-120px;right:-120px;background:radial-gradient(circle,rgba(201,168,76,.10) 0%,transparent 70%)}
.hero-c2{width:350px;height:350px;bottom:-80px;left:-80px;background:radial-gradient(circle,rgba(201,168,76,.07) 0%,transparent 70%)}
.hero-inner{max-width:780px;margin:0 auto;position:relative;z-index:1;animation:fadeUp .6s ease forwards}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(201,168,76,.14);border:1px solid rgba(201,168,76,.30);border-radius:24px;padding:7px 18px;color:var(--gold-lt);font-size:13px;font-weight:500;letter-spacing:.4px;margin-bottom:26px}
.hero-title{color:var(--white);font-size:clamp(2rem,5.5vw,3.6rem);font-weight:800;margin-bottom:22px;line-height:1.12}
.hero-hl{color:var(--gold-lt)}
.hero-desc{color:rgba(255,255,255,.62);font-size:18px;line-height:1.72;margin:0 auto 44px;max-width:560px}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* STATS BAR */
.stats-bar{background:var(--gold);padding:22px 24px}
.stats-inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.stat-item{text-align:center;padding:0 16px;border-right:1px solid rgba(10,22,40,.15);display:flex;flex-direction:column;align-items:center}
.stat-item:last-child{border-right:none}
.stat-num{font-family:'Playfair Display',serif;font-size:28px;font-weight:800;color:var(--navy);line-height:1}
.stat-lbl{font-size:13px;color:rgba(10,22,40,.60);font-weight:500;margin-top:3px}

/* CERT CARDS */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.cert-card{background:var(--white);border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow);padding:26px;transition:transform .22s,box-shadow .22s}
.cert-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.cert-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.cert-icon{font-size:30px}
.cert-fee{font-family:'DM Mono',monospace;font-size:17px;font-weight:600}
.cert-fee.free{color:var(--green)}
.cert-fee.paid{color:var(--navy)}
.cert-name{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:5px}
.cert-desc{font-size:13.5px;color:var(--muted);line-height:1.6}

/* HOW IT WORKS */
.how-section{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-mid) 100%);padding:80px 24px}
.how-section h2{color:#fff;text-align:center;margin-bottom:48px}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px;max-width:960px;margin:0 auto}
.step-card{text-align:center}
.step-icon{width:64px;height:64px;border-radius:50%;background:rgba(201,168,76,.12);border:2px solid rgba(201,168,76,.35);margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:26px;transition:transform .2s}
.step-card:hover .step-icon{transform:scale(1.08)}
.step-num{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px}
.step-card h3{color:#fff;font-size:18px;font-weight:700;margin-bottom:8px}
.step-card p{color:rgba(255,255,255,.50);font-size:13.5px;line-height:1.65}

/* ANNOUNCEMENTS */
.ann-list{display:flex;flex-direction:column;gap:14px}
.ann-card{background:var(--white);border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);padding:20px 24px;display:flex;gap:16px;align-items:flex-start;animation:fadeUp .4s ease forwards}
.ann-icon{font-size:22px;min-width:36px;text-align:center;padding-top:2px}
.ann-title{font-size:15.5px;font-weight:700;color:var(--navy);margin-bottom:5px}
.ann-body{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:4px}
.ann-date{font-size:12px;font-family:'DM Mono',monospace;color:var(--muted)}
.ann-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}


.nav-logo {
    width: 60px; /* size of the circle */
    height: 60px;
    border-radius: 50%; /* makes it circular */
    background-image: url('../assets/img/logo.png'); /* correct path from home.css */
    background-size: cover; /* fills the circle */
    background-position: center; /* centers the image */
    object-fit: cover; /* fills the circle */
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}

@media(max-width:700px){
  .stats-inner{grid-template-columns:repeat(2,1fr);gap:14px}
  .stat-item{border-right:none;border-bottom:1px solid rgba(10,22,40,.12);padding-bottom:14px}
  .hero-title{font-size:2rem}
  .hero-desc{font-size:16px}
  

}