*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --orange:       #B35000;
      --orange-dark:  #9E4800;
      --orange-light: #FEF3EC;
      --charcoal:     #111111;
      --slate:        #1B2A3B;
      --slate-2:      #243446;
      --white:        #FFFFFF;
      --off-white:    #FAFAF8;
      --warm-gray:    #F3F0EB;
      --border:       #E6E1D9;
      --text-primary: #111111;
      --text-body:    #3A3530;
      --text-muted:   #6B6560;
      --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --max-w: 1160px;
      --r:    8px;
      --r-lg: 16px;
      --sh-sm: 0 1px 4px rgba(0,0,0,0.07);
      --sh-md: 0 4px 20px rgba(0,0,0,0.09);
      --sh-lg: 0 12px 40px rgba(0,0,0,0.12);
      /* Digital ID accent */
      --id-blue:      #1A4F8A;
      --id-blue-dark: #133D6B;
      --id-blue-lt:   #EBF2FB;
      --green:        #166534;
      --green-lt:     #DCFCE7;
      --green-bg:     #15803D;
    }

    body { font-family: var(--font); background: var(--off-white); color: var(--text-primary); -webkit-font-smoothing: antialiased; }

    /* ── HERO ── */
    .hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(160deg, #0b1926 0%, #111111 45%, #0f1e30 100%);
      color: #fff;
      padding: 4.5rem 3rem 4rem;
    }
.hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(26,79,138,0.45) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 15% 70%, rgba(191,87,0,0.12) 0%, transparent 60%);
    }
    .hero-grid {
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .hero-inner {
      max-width: var(--max-w); margin: 0 auto;
      position: relative; z-index: 2;
      display: flex; gap: 4rem; align-items: flex-start;
    }
    .hero-left { flex: 1; }
    .hero-right { flex: 0 0 340px; }

    .project-badge {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: rgba(21,128,61,0.2); border: 1px solid rgba(21,128,61,0.45);
      color: #86efac; padding: 0.3rem 0.85rem; border-radius: 20px;
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      margin-bottom: 1.25rem;
    }
    .project-badge-dot {
      width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.85); }
    }

    .hero h1 {
      font-size: 2.75rem; font-weight: 800; color: #fff;
      line-height: 1.1; letter-spacing: -0.03em;
      margin-bottom: 0.75rem;
    }
    .hero h1 em { color: #7CB9E8; font-style: normal; }
    .hero-sub {
      font-size: 1.05rem; color: rgba(255,255,255,0.65);
      line-height: 1.6; max-width: 560px; margin-bottom: 2rem;
    }

    .hero-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: var(--orange); color: #fff;
      padding: 0.7rem 1.4rem; border-radius: 6px;
      font-size: 0.88rem; font-weight: 600; text-decoration: none;
      transition: all 0.2s;
    }
    .btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); }
    .btn-ghost {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85);
      border: 1px solid rgba(255,255,255,0.2);
      padding: 0.7rem 1.4rem; border-radius: 6px;
      font-size: 0.88rem; font-weight: 500; text-decoration: none;
      transition: all 0.2s;
    }
    .btn-ghost:hover { background: rgba(255,255,255,0.14); color: #fff; }

    /* Stats card (right column) */
    .hero-stats-card {
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--r-lg); padding: 1.5rem;
      backdrop-filter: blur(8px);
    }
    .hero-stats-card h3 {
      font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.4);
      letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.25rem;
    }
    .hero-stat-row {
      display: flex; align-items: baseline; justify-content: space-between;
      padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .hero-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
    .hero-stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.55); }
    .hero-stat-val { font-size: 0.92rem; font-weight: 700; color: #fff; }
    .hero-stat-val.accent { color: #7CB9E8; }
    .hero-stat-val.orange { color: #F5A461; }

    /* ── TIMELINE PROGRESS ── */
    .timeline-band {
      background: var(--white); border-bottom: 1px solid var(--border);
      padding: 2rem 0;
    }
    .container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }
    .timeline-band .container {
      display: flex; flex-direction: column; gap: 1rem;
    }
    .timeline-label {
      font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .timeline-track {
      display: flex; gap: 0; position: relative;
    }
    .timeline-track::before {
      content: ''; position: absolute; top: 20px; left: 0; right: 0; height: 3px;
      background: var(--border); z-index: 0;
    }
    .tl-step {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      position: relative; z-index: 1;
    }
    .tl-dot {
      width: 40px; height: 40px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.78rem; font-weight: 700; margin-bottom: 0.6rem;
      border: 3px solid var(--border); background: var(--white);
      color: var(--text-muted);
    }
    .tl-step.done .tl-dot {
      background: var(--green-bg); border-color: var(--green-bg); color: #fff;
    }
    .tl-step.active .tl-dot {
      background: var(--id-blue); border-color: var(--id-blue); color: #fff;
      box-shadow: 0 0 0 4px rgba(26,79,138,0.2);
      animation: ring 2s ease-in-out infinite;
    }
    @keyframes ring {
      0%, 100% { box-shadow: 0 0 0 4px rgba(26,79,138,0.2); }
      50% { box-shadow: 0 0 0 8px rgba(26,79,138,0.08); }
    }
    .tl-step-title { font-size: 0.8rem; font-weight: 600; color: var(--text-body); text-align: center; }
    .tl-step-date { font-size: 0.7rem; color: var(--text-muted); text-align: center; }
    .tl-step.done .tl-step-title { color: var(--green); }
    .tl-step.active .tl-step-title { color: var(--id-blue); font-weight: 700; }

    /* ── SECTIONS ── */
    .section { padding: 4rem 0; }
    .section-alt { background: var(--white); }
    .section-dark { background: var(--slate); padding: 4rem 0; }
    .section-blue { background: var(--id-blue); padding: 4rem 0; }

    .section-eyebrow {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--orange); margin-bottom: 0.5rem;
    }
    .section-title {
      font-size: 1.9rem; font-weight: 800; color: var(--text-primary);
      letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.75rem;
    }
    .section-sub { font-size: 1rem; color: var(--text-muted); line-height: 1.6; max-width: 600px; }
    .section-header { margin-bottom: 2.5rem; }

    /* ── PHASE CARDS ── */
    .phases-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
    .phase-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 1.75rem;
      position: relative; overflow: hidden;
      box-shadow: var(--sh-sm);
    }
    .phase-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    }
    .phase-card.ph1::before { background: var(--orange); }
    .phase-card.ph2::before { background: var(--id-blue); }
    .phase-card.ph3::before { background: var(--slate); }
    .phase-card.active-phase {
      border-color: var(--id-blue);
      box-shadow: 0 0 0 2px rgba(26,79,138,0.15), var(--sh-md);
    }

    .phase-num {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      margin-bottom: 0.4rem;
    }
    .phase-card.ph1 .phase-num { color: var(--orange); }
    .phase-card.ph2 .phase-num { color: var(--id-blue); }
    .phase-card.ph3 .phase-num { color: var(--text-muted); }

    .phase-period {
      font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
      background: var(--warm-gray); border-radius: 4px;
      padding: 0.2rem 0.5rem; display: inline-block; margin-bottom: 0.75rem;
    }
    .phase-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }
    .phase-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1rem; }
    .phase-benefit {
      font-size: 0.8rem; color: var(--text-body); font-style: italic;
      border-left: 3px solid var(--border); padding-left: 0.75rem;
    }

    .active-badge {
      display: inline-flex; align-items: center; gap: 0.35rem;
      background: rgba(26,79,138,0.1); color: var(--id-blue);
      border: 1px solid rgba(26,79,138,0.2);
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0.2rem 0.6rem; border-radius: 20px; margin-bottom: 0.5rem;
    }

    /* ── WHAT'S INCLUDED ── */
    .scope-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
    .scope-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 1.5rem;
      display: flex; gap: 1rem; align-items: flex-start;
    }
    .scope-icon {
      width: 44px; height: 44px; border-radius: var(--r); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.25rem;
      background: var(--id-blue-lt); color: var(--id-blue);
    }
    .scope-card h4 { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.3rem; }
    .scope-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
    .scope-card .scope-detail { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.4rem; }

    /* ── INVESTMENT ── */
    .investment-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-bottom: 2rem; }
    .inv-card {
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--r-lg); padding: 1.5rem; text-align: center;
    }
    .inv-year { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.72); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; }
    .inv-amount { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 0.25rem; }
    .inv-amount span { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,0.5); }
    .inv-note { font-size: 0.78rem; color: rgba(255,255,255,0.72); }

    .inv-breakdown {
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--r-lg); padding: 1.5rem;
    }
    .inv-breakdown h4 { font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.65); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; }
    .inv-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.88rem;
    }
    .inv-row:last-child { border-bottom: none; }
    .inv-row-label { color: rgba(255,255,255,0.7); }
    .inv-row-val { color: #fff; font-weight: 600; }
    .inv-row.total .inv-row-label { color: rgba(255,255,255,0.9); font-weight: 700; }
    .inv-row.total .inv-row-val { color: #7CB9E8; font-size: 1rem; }

    /* ── WHY IT MATTERS ── */
    .why-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
    .why-card {
      border-radius: var(--r-lg); padding: 1.5rem;
      border-left: 4px solid;
    }
    .why-card:nth-child(1) { border-color: var(--orange); background: var(--orange-light); }
    .why-card:nth-child(2) { border-color: var(--id-blue); background: var(--id-blue-lt); }
    .why-card:nth-child(3) { border-color: #166534; background: var(--green-lt); }
    .why-card:nth-child(4) { border-color: #7C3AED; background: #F5F3FF; }
    .why-card h4 { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.4rem; }
    .why-card p { font-size: 0.85rem; color: var(--text-body); line-height: 1.55; }

    /* ── PEER INSTITUTIONS ── */
    .peer-band {
      background: var(--warm-gray); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      padding: 1.75rem 0;
    }
    .peer-inner {
      max-width: var(--max-w); margin: 0 auto; padding: 0 2rem;
      display: flex; align-items: center; gap: 3rem;
    }
    .peer-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
    .peer-list { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; }
    .peer-item { font-size: 0.82rem; color: var(--text-body); font-weight: 500; }
    .peer-year { font-size: 0.7rem; color: var(--text-muted); margin-left: 0.3rem; }

    /* ── GOVERNANCE ── */
    .gov-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
    .gov-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 1.5rem;
      text-align: center;
      box-shadow: var(--sh-sm);
    }
    .gov-avatar {
      width: 64px; height: 64px; border-radius: 50%;
      background: var(--id-blue); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; font-weight: 700; margin: 0 auto 1rem;
    }
    .gov-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.2rem; }
    .gov-title { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 0.75rem; }
    .gov-role-badge {
      display: inline-block; font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase;
      background: var(--id-blue-lt); color: var(--id-blue);
      border: 1px solid rgba(26,79,138,0.2);
      padding: 0.2rem 0.65rem; border-radius: 20px;
    }

    /* ── RISK ── */
    .risk-band {
      background: var(--white); padding: 2.5rem 0;
      border-top: 1px solid var(--border);
    }
    .risk-inner {
      max-width: var(--max-w); margin: 0 auto; padding: 0 2rem;
      display: flex; gap: 3rem; align-items: center;
    }
    .risk-badge-wrap { flex-shrink: 0; text-align: center; }
    .risk-badge {
      display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
      width: 100px; height: 100px; border-radius: 50%;
      background: var(--green-lt); border: 3px solid #86efac;
      color: var(--green); font-size: 0.78rem; font-weight: 800;
      letter-spacing: 0.05em; text-transform: uppercase;
      line-height: 1.2;
    }
    .risk-badge .risk-score { font-size: 1.5rem; display: block; }
    .risk-copy h4 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }
    .risk-copy p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }
    .risk-bullets { margin-top: 0.75rem; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
    .risk-bullets li { font-size: 0.85rem; color: var(--text-body); display: flex; gap: 0.5rem; }
    .risk-bullets li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; }

    /* ── CALLOUT BAND ── */
    .callout-band { background: var(--orange); padding: 3rem 0; }
    .callout-inner {
      max-width: var(--max-w); margin: 0 auto; padding: 0 2rem;
      display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    }
    .callout-text h2 { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 0.35rem; }
    .callout-text p { font-size: 0.95rem; color: #fff; }
    .callout-actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
    .btn-white {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: #fff; color: var(--orange);
      padding: 0.7rem 1.4rem; border-radius: 6px;
      font-size: 0.88rem; font-weight: 700; text-decoration: none;
      transition: all 0.2s;
    }
    .btn-white:hover { background: rgba(255,255,255,0.9); transform: translateY(-1px); }
    .btn-outline-white {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: transparent; color: #fff;
      border: 2px solid rgba(255,255,255,0.5);
      padding: 0.7rem 1.4rem; border-radius: 6px;
      font-size: 0.88rem; font-weight: 600; text-decoration: none;
      transition: all 0.2s;
    }
    .btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

    /* ── FAQ ── */
    .faq-list { display: flex; flex-direction: column; gap: 1rem; }
    .faq-item {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 1.5rem;
    }
    .faq-q { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }
    .faq-a { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }

    @media (max-width: 900px) {
      .hero-inner { flex-direction: column; }
      .hero-right { flex: none; width: 100%; }
      .phases-grid, .scope-grid, .investment-grid, .why-grid, .gov-grid { grid-template-columns: 1fr; }
    }