@layer reset, tokens, base, layout, components, sdg, motion;

@layer tokens {
  :root {
    --bg: #ffffff;
    --bg-soft: #fff7fb;
    --ink: #1a1a1a;
    --muted: #4a4a4a;
    --line: #ffd6e0;
    --white: #ffffff;
    --red: #E5243B;
    --gold: #DDA63A;
    --green: #4C9F38;
    --blue: #26BDE2;
    --orange: #FD6925;
    --pink: #DD1367;
    --radius: 1.15rem;
    --max: 1180px;
    --narrow: 760px;
    --sans: "Noto Sans Bengali", "Source Sans 3", Arial, sans-serif;
    --display: "Noto Sans Bengali", "Source Sans 3", Arial, sans-serif;
    --mono: "Noto Sans Bengali", "Source Sans 3", Arial, sans-serif;
    --shadow: 0 16px 40px rgba(229, 36, 59, 0.12);
    --ring: 0 0 0 4px color-mix(in oklab, #E5243B 22%, transparent);
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; }
  button, input, select, textarea { font: inherit; }
}

@layer base {
  body {
    color: var(--ink);
    background:
      radial-gradient(900px 480px at 0% -10%, color-mix(in oklab, #E5243B 22%, white), transparent 58%),
      radial-gradient(800px 420px at 100% 0%, color-mix(in oklab, #26BDE2 22%, white), transparent 52%),
      radial-gradient(700px 380px at 50% 8%, color-mix(in oklab, #FCC30B 16%, white), transparent 50%),
      var(--bg);
    font-family: var(--sans);
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 400;
  }
  h1, h2, .h2 {
    font-family: var(--sans);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0 0 0.8rem;
  }
  h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
  h2, .h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
  h3 {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: 0;
    margin: 0 0 0.4rem;
  }
}

@layer layout {
  .skip {
    position: absolute;
    left: -999px;
  }
  .skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 80;
    background: #fff;
    padding: 0.4rem 0.7rem;
  }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
  .section { padding: 5rem 0; }
  .section-tight { padding: 3.2rem 0; }
  .narrow { max-width: var(--narrow); }
  .lede { color: var(--muted); font-size: 1.08rem; margin: 0 0 1.6rem; max-width: 42rem; }
  .grid-2, .grid-3, .grid-4 {
    display: grid;
    gap: 1rem;
  }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2.2rem;
    align-items: center;
  }
}

@layer components {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklab, white 82%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #E5243B, #FCC30B, #26BDE2, #4C9F38, #DD1367) 1;
  }
  .nav-wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
  }
  .brand {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  .brand-logo {
    display: block;
    height: 52px;
    width: auto;
    max-width: 200px;
  }
  .footer-logo {
    display: block;
    height: 56px;
    width: auto;
    max-width: 220px;
    margin-bottom: 0.7rem;
  }
  .nav {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-left: auto;
  }
  .nav a {
    text-decoration: none;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.94rem;
  }
  .nav a:hover, .nav a.is-on { color: var(--red); }
  .nav-tools { display: flex; align-items: center; gap: 0.65rem; }
  .lang-switch { display: inline-flex; gap: 0.2rem; }
  .lang {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 0.28rem 0.55rem;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
  }
  .lang[aria-pressed="true"] {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    padding: 0.82rem 1.2rem;
    font-weight: 700;
    background: linear-gradient(90deg, #E5243B, #FD6925);
    color: #fff;
    box-shadow: 0 10px 24px rgba(229, 36, 59, 0.28);
  }
  .btn:hover { transform: translateY(-1px); }

  .founders-band {
    background: linear-gradient(180deg, #fff7fb, #ffffff);
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
  .founder-wrap {
    position: relative;
    margin-top: 1.1rem;
    text-align: center;
  }
  .founder-stage {
    position: relative;
    overflow: hidden;
    padding-top: 4px;
    transition: max-height 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .founder-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.55rem;
    align-items: stretch;
  }
  .founder-veil {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5.2rem;
    background: linear-gradient(180deg, rgba(255,247,251,0) 0%, rgba(255,255,255,0.08) 35%, rgba(255,247,251,0.55) 72%, rgba(255,255,255,0.92) 100%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
  }
  .founder-wrap.is-open .founder-veil {
    opacity: 0;
  }
  .founder.is-peek {
    filter: blur(2px);
    opacity: 0.62;
    pointer-events: none;
    transform: translateY(8px) scale(0.985);
  }
  .founder-wrap.is-open .founder.is-peek {
    animation: founder-rise 0.68s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--reveal-delay, 0ms);
  }
  @keyframes founder-rise {
    from {
      filter: blur(4px);
      opacity: 0.28;
      transform: translateY(26px) scale(0.96);
    }
    to {
      filter: blur(0);
      opacity: 1;
      transform: none;
    }
  }
  .founder-more {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: -2.15rem auto 0;
    padding: 0.52rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
    transition: margin 0.55s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .founder-more:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(229, 36, 59, 0.14);
  }
  .founder-more svg {
    width: 16px;
    height: 16px;
    transition: transform 0.35s ease;
  }
  .founder-wrap.is-open .founder-more {
    margin-top: 1.15rem;
  }
  .founder-wrap.is-open .founder-more svg {
    transform: rotate(180deg);
  }
  .founder {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0.55rem 0.4rem 0.65rem;
    border-radius: 0.8rem;
    border: 1px solid var(--line);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .founder:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(229, 36, 59, 0.1);
  }
  .founder-seat {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 0.35rem;
  }
  .founder-photo,
  .founder-placeholder {
    flex: none;
    width: 64px;
    height: 64px;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    margin-bottom: 0.4rem;
  }
  .founder h3 {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.25;
  }
  .founder p {
    margin: 0.08rem 0 0.35rem;
    color: var(--muted);
    font-size: 0.68rem;
  }
  .founder-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .founder-links a {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff5f6;
    color: #1a1a1a;
  }
  .founder-links a:hover { background: var(--red); color: #fff; }
  .founder-links svg { width: 11px; height: 11px; display: block; }
  .founder.is-open {
    border-style: dashed;
    background: #fafafa;
    color: var(--ink);
  }
  .founder-placeholder {
    background: #eef3f7;
    display: grid;
    place-items: center;
  }
  .founder-placeholder img {
    width: 28px;
    height: 28px;
    opacity: 0.4;
  }
  .founder.is-open strong {
    font-size: 0.72rem;
    font-weight: 700;
  }
  .founder-apply {
    margin-top: 0.28rem;
    font-size: 0.66rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #E5243B, #FD6925);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
  }
  .btn-ghost, .btn-line {
    background: #fff;
    color: var(--red);
    border: 2px solid #E5243B;
    box-shadow: none;
  }
  .menu-btn {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    font-weight: 700;
  }

  .hero {
    padding: 5.2rem 1.25rem 3.2rem;
  }
  .hero-inner { max-width: var(--max); margin: 0 auto; }
  .kicker, .sec-kicker {
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 0.85rem;
  }
  .hero-lead {
    max-width: 40rem;
    color: var(--muted);
    font-size: 1.15rem;
    margin: 0 0 1.8rem;
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

  .start-paths {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.3rem;
  }
  .start-path {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 1.4rem 1.3rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    text-decoration: none;
    color: inherit;
    min-height: 16.5rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .start-path:nth-child(1) { border-top: 6px solid #E5243B; }
  .start-path:nth-child(2) { border-top: 6px solid #FCC30B; }
  .start-path:nth-child(3) { border-top: 6px solid #26BDE2; }
  .start-path:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }
  .start-path-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 0.45rem;
  }
  .start-path:nth-child(2) .start-path-kicker { color: #9a6b00; }
  .start-path:nth-child(3) .start-path-kicker { color: #0A97D9; }
  .start-path strong {
    font-size: 1.35rem;
    line-height: 1.25;
  }
  .start-path p {
    margin: 0.45rem 0 0;
    color: var(--muted);
    flex: 1;
  }

  .start-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .start-steps li {
    margin: 0;
    padding: 1.2rem 1.2rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
  }
  .start-steps li span {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    margin-bottom: 0.7rem;
    border-radius: 50%;
    background: #E5243B;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
  }
  .start-steps strong { display: block; margin-bottom: 0.3rem; }
  .start-steps p { margin: 0; color: var(--muted); }

  .found-bar {
    margin: 1.2rem 0 1.5rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 0.95rem;
    background: linear-gradient(135deg, #fff5f6, #eefcff);
    color: var(--muted);
  }
  .found-bar p { margin: 0; }
  .found-bar b { color: var(--ink); }

  .rainbow {
    height: 14px;
    background: linear-gradient(90deg,
      #E5243B, #DDA63A, #4C9F38, #C5192D, #FF3A21, #26BDE2, #FCC30B,
      #A21942, #FD6925, #DD1367, #FD9D24, #BF8B2E, #3F7E44, #0A97D9,
      #56C02B, #00689D, #19486A, #E5243B);
  }

  .card, .path-step, .money, .table-wrap, .alert {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .card {
    padding: 1.25rem 1.25rem 1.3rem;
    border-top: 6px solid var(--red);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .grid-3 .card:nth-child(1) { border-top-color: #E5243B; background: #fff5f6; }
  .grid-3 .card:nth-child(2) { border-top-color: #FCC30B; background: #fffbeb; }
  .grid-3 .card:nth-child(3) { border-top-color: #26BDE2; background: #f0fbff; }
  .grid-2 .card:nth-child(1) { border-top-color: #E5243B; background: #fff5f6; }
  .grid-2 .card:nth-child(2) { border-top-color: #4C9F38; background: #f3fbf0; }
  .grid-2 .card:nth-child(3) { border-top-color: #FD6925; background: #fff6f0; }
  .grid-2 .card:nth-child(4) { border-top-color: #26BDE2; background: #f0fbff; }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }
  .card .num {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--red);
  }
  .card p { margin: 0.3rem 0 0; color: var(--muted); }

  .soft-band, .moss-band {
    background:
      linear-gradient(90deg, #fff0f3, #fff8e6, #eefcff);
  }
  .moss-band { color: inherit; }
  .moss-band .lede, .moss-band .card p { color: var(--muted); }
  .moss-band .card { background: #fff; border-color: var(--line); color: inherit; }
  .moss-band .sec-kicker { color: var(--muted); }

  .path {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
  }
  .path-step { padding: 1rem; border-top: 6px solid #E5243B; }
  .path-step:nth-child(1) { border-top-color: #E5243B; background: #fff5f6; }
  .path-step:nth-child(2) { border-top-color: #FD6925; background: #fff6f0; }
  .path-step:nth-child(3) { border-top-color: #FCC30B; background: #fffbeb; }
  .path-step:nth-child(4) { border-top-color: #26BDE2; background: #f0fbff; }
  .path-step:nth-child(5) { border-top-color: #4C9F38; background: #f3fbf0; }
  .path-step strong { display: block; font-family: var(--sans); font-weight: 700; }
  .path-step span { color: var(--muted); font-size: 0.92rem; }

  .money {
    padding: 1.3rem 1.4rem;
    font-family: var(--sans);
    line-height: 1.7;
    background: linear-gradient(135deg, #fff5f6, #eefcff);
    border: 2px solid #26BDE2;
  }
  .money b { color: var(--ink); }

  .page-hero {
    padding: 4rem 1.25rem 1.6rem;
    background: transparent;
    color: inherit;
  }
  .page-hero h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
  .page-hero p { color: var(--muted); max-width: 40rem; margin: 0; }

  .table-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; }
  th, td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); }
  th {
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 700;
    background: #fff0f3;
    color: var(--red);
  }
  .vote-yes { color: #15803d; font-weight: 800; }
  .vote-no { color: #e11d48; font-weight: 800; }

  .trust-copy h2 {
    font-size: 1.25rem;
    margin: 1.8rem 0 0.45rem;
  }
  .trust-copy h2:first-child { margin-top: 0; }
  .trust-copy .lede { margin: 0; max-width: 40rem; }

  .charter { counter-reset: art; }
  .article { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
  .article h2 { font-size: 1.4rem; }
  .article h2::before {
    counter-increment: art;
    content: counter(art, decimal-leading-zero) "  ";
    color: #E5243B;
    font-family: var(--sans);
    font-size: 0.85rem;
  }

  .choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 48rem;
  }
  .choice-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 1.45rem 1.35rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    background: #fff;
    text-decoration: none;
    color: inherit;
    min-height: 13.5rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .choice-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(229, 36, 59, 0.12);
  }
  .choice-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 0.45rem;
  }
  .choice-card strong {
    font-size: 1.35rem;
    line-height: 1.25;
  }
  .choice-card p {
    margin: 0.45rem 0 0;
    color: var(--muted);
    flex: 1;
  }
  .choice-go {
    margin-top: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #E5243B, #FD6925);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.88rem;
  }
  .form { display: grid; gap: 0.9rem; max-width: 36rem; }
  .form-eoi { max-width: 48rem; }
  .form-eoi h2 {
    margin: 1.4rem 0 0;
    font-size: 1.15rem;
  }
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
  }
  .eoi-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin: 0 0 1.6rem;
  }
  .eoi-facts article {
    margin: 0;
    padding: 1rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: #fff;
  }
  .eoi-facts strong { display: block; margin-bottom: 0.25rem; }
  .eoi-facts p { margin: 0; color: var(--muted); font-size: 0.9rem; }
  .form-hint { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.82rem; font-weight: 400; }
  .sdg-picks {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .sdg-picks legend { font-weight: 700; padding: 0; }
  .sdg-pick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.8rem;
    margin-top: 0.55rem;
  }
  .sdg-pick, .tick {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 500;
    margin: 0;
  }
  .sdg-pick input, .tick input {
    width: auto;
    margin-top: 0.25rem;
    accent-color: #E5243B;
  }
  .tick a { color: var(--red); }
  label { font-weight: 700; display: block; margin-bottom: 0.3rem; }
  input, select, textarea {
    width: 100%;
    padding: 0.8rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: #fff;
  }
  input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: var(--ring);
    border-color: #2563eb;
  }
  textarea { min-height: 8rem; }
  .hp {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
  }
  .form-note { color: var(--muted); font-size: 0.9rem; }
  .alert { padding: 0.9rem 1rem; }
  .alert-ok { border-color: #86efac; background: #f0fdf4; }
  .alert-err { border-color: #fda4af; background: #fff1f2; }

  .footer {
    background: linear-gradient(180deg, #fff7fb, #eefcff);
    color: var(--muted);
    padding: 3.2rem 1.25rem 2rem;
    border-top: 6px solid transparent;
    border-image: linear-gradient(90deg, #E5243B, #FCC30B, #26BDE2, #4C9F38) 1;
  }
  .footer a { text-decoration: none; color: var(--red); }
  .footer a:hover { text-decoration: underline; }
  .footer strong {
    color: var(--red);
    font-family: var(--sans);
    font-size: 1.25rem;
  }
  .footer-grid {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr 1fr;
    gap: 2rem;
    align-items: start;
  }
  .footer-brand p {
    margin: 0;
    max-width: 28rem;
    font-size: 0.92rem;
    line-height: 1.55;
  }
  .footer-label {
    margin: 0;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
  }
  .footer ul { list-style: none; margin: 0.45rem 0 0; padding: 0; }
  .footer li { margin: 0.28rem 0; }
  .footer li a { font-weight: 600; font-size: 0.94rem; }
  .footer-end {
    max-width: var(--max);
    margin: 2rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--red);
  }
  .un-note {
    max-width: var(--max);
    margin: 0.7rem auto 0;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--muted);
    font-weight: 400;
  }
  .un-note a { text-decoration: underline; }

  .gov-lanes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.4rem;
  }
  .gov-lane {
    margin: 0;
    padding: 1.45rem 1.4rem 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
  }
  .gov-lane-ops {
    background: linear-gradient(180deg, #fff5f6, #fff);
    border-top: 6px solid #E5243B;
  }
  .gov-lane-rules {
    background: linear-gradient(180deg, #f0fbff, #fff);
    border-top: 6px solid #26BDE2;
  }
  .gov-lane-kicker {
    margin: 0 0 0.45rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
  }
  .gov-lane-rules .gov-lane-kicker { color: #0A97D9; }
  .gov-lane h3 { font-size: 1.35rem; margin-bottom: 0.45rem; }
  .gov-lane-lead {
    margin: 0 0 1.15rem;
    color: var(--muted);
    max-width: 34rem;
  }
  .gov-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
  }
  .gov-steps li {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: 0.85rem;
    align-items: start;
    position: relative;
    padding: 0.85rem 0;
  }
  .gov-steps li + li {
    border-top: 1px dashed color-mix(in oklab, var(--line) 80%, transparent);
  }
  .gov-steps li span {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #E5243B;
    color: #E5243B;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
  }
  .gov-lane-rules .gov-steps li span {
    border-color: #26BDE2;
    color: #0A97D9;
  }
  .gov-steps strong { display: block; font-size: 1.02rem; }
  .gov-steps em {
    display: block;
    margin-top: 0.15rem;
    font-style: normal;
    color: var(--muted);
    font-size: 0.92rem;
  }

  .gov-bodies {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.4rem;
  }
  .gov-body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
  }
  .gov-body:nth-child(1) .gov-body-top { background: #fff5f6; border-bottom: 3px solid #E5243B; }
  .gov-body:nth-child(2) .gov-body-top { background: #f0fbff; border-bottom: 3px solid #26BDE2; }
  .gov-body-top { padding: 1.15rem 1.2rem 1rem; }
  .gov-body-tag {
    margin: 0 0 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
  }
  .gov-body:nth-child(2) .gov-body-tag { color: #0A97D9; }
  .gov-body h3 { margin: 0; }
  .gov-body dl {
    margin: 0;
    padding: 0.35rem 0;
  }
  .gov-body dl > div {
    display: grid;
    grid-template-columns: 5.2rem 1fr;
    gap: 0.6rem;
    padding: 0.7rem 1.2rem;
  }
  .gov-body dl > div + div { border-top: 1px solid #fff0f3; }
  .gov-body dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--red);
    padding-top: 0.15rem;
  }
  .gov-body:nth-child(2) dt { color: #0A97D9; }
  .gov-body dd { margin: 0; color: var(--muted); }

  .gov-decide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.4rem;
  }
  .gov-decide-col {
    margin: 0;
    padding: 1.3rem 1.35rem 1.2rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
  }
  .gov-decide-col:first-child { border-top: 6px solid #E5243B; }
  .gov-decide-col:last-child { border-top: 6px solid #4C9F38; }
  .gov-decide-tag {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
  }
  .gov-decide-col:last-child .gov-decide-tag { color: #3F7E44; }
  .gov-decide-col h3 { margin-bottom: 0.7rem; }
  .gov-decide-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .gov-decide-col li {
    position: relative;
    padding: 0.42rem 0 0.42rem 1.45rem;
    color: var(--muted);
    border-top: 1px solid #fff0f3;
  }
  .gov-decide-col li:first-child { border-top: 0; }
  .gov-decide-col li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.78rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #E5243B;
  }
  .gov-decide-col:last-child li::before { background: #4C9F38; }
  .gov-rule {
    margin: 1.2rem 0 0;
    padding: 1.05rem 1.2rem;
    border-radius: 0.95rem;
    border: 2px solid #26BDE2;
    background: linear-gradient(135deg, #fff5f6, #eefcff);
    color: var(--muted);
  }
  .gov-rule strong {
    display: block;
    color: var(--ink);
    margin-bottom: 0.2rem;
  }

  .gov-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.4rem;
    align-items: start;
  }
  .gov-tier,
  .gov-junior {
    margin: 0;
    padding: 1.25rem 1.25rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
  }
  .gov-tier:nth-child(1) { border-top: 6px solid #E5243B; }
  .gov-tier:nth-child(2) { border-top: 6px solid #4C9F38; }
  .gov-tier:nth-child(3) { border-top: 6px solid #26BDE2; }
  .gov-tier-kicker {
    margin: 0 0 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
  }
  .gov-tier:nth-child(2) .gov-tier-kicker { color: #3F7E44; }
  .gov-tier:nth-child(3) .gov-tier-kicker { color: #0A97D9; }
  .gov-tier h3,
  .gov-junior h3 { margin: 0 0 0.85rem; }
  .gov-tier dl,
  .gov-junior dl {
    margin: 0;
    padding: 0;
  }
  .gov-tier dl > div,
  .gov-junior dl > div {
    display: grid;
    grid-template-columns: 5.4rem 1fr;
    gap: 0.55rem;
    padding: 0.55rem 0;
    border-top: 1px solid #fff0f3;
  }
  .gov-tier dt,
  .gov-junior dt {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--red);
    padding-top: 0.12rem;
  }
  .gov-tier:nth-child(2) dt { color: #3F7E44; }
  .gov-tier:nth-child(3) dt { color: #0A97D9; }
  .gov-tier dd,
  .gov-junior dd { margin: 0; color: var(--muted); }
  .gov-pos-label {
    margin: 1rem 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .gov-pos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .gov-pos li {
    margin: 0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: #fff5f6;
    border: 1px solid var(--line);
    font-size: 0.86rem;
    font-weight: 700;
  }
  .gov-tier:nth-child(2) .gov-pos li { background: #f3fbf0; }
  .gov-tier:nth-child(3) .gov-pos li { background: #f0fbff; }
  .gov-pos-found li { background: #f3fbf0; }
  .gov-tier-note {
    margin: 0.95rem 0 0;
    color: var(--muted);
    font-size: 0.92rem;
  }
  .gov-junior {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 1.2rem;
    align-items: start;
    margin-top: 1rem;
    border-top: 6px solid #FD6925;
  }
  .gov-junior .gov-tier-kicker { color: #FD6925; }
  .gov-junior dt { color: #FD6925; }

  .gov-levels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
  }
  .gov-levels li {
    display: grid;
    grid-template-columns: 7.2rem 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
  }
  .gov-levels li:nth-child(1) { border-left: 6px solid #26BDE2; }
  .gov-levels li:nth-child(2) { border-left: 6px solid #4C9F38; }
  .gov-levels li:nth-child(3) { border-left: 6px solid #E5243B; }
  .gov-levels li:nth-child(4) { border-left: 6px solid #FD6925; }
  .gov-levels li > span {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
  }
  .gov-levels li:nth-child(1) > span { color: #0A97D9; }
  .gov-levels li:nth-child(2) > span { color: #3F7E44; }
  .gov-levels li:nth-child(4) > span { color: #FD6925; }
  .gov-levels strong { display: block; }
  .gov-levels p { margin: 0.2rem 0 0; color: var(--muted); }

  .gov-succession {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .gov-succession li {
    position: relative;
    margin: 0;
    padding: 1.2rem 1.2rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
  }
  .gov-succession li span {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    margin-bottom: 0.7rem;
    border-radius: 50%;
    background: #E5243B;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
  }
  .gov-succession strong { display: block; margin-bottom: 0.3rem; }
  .gov-succession p { margin: 0; color: var(--muted); }
}

@layer sdg {
  .sdg-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; flex-wrap: wrap; }
  .head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
  }
  .sdg-grid,
  .sdg-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.85rem;
    margin-top: 1.6rem;
    padding: 0.4rem 0.2rem 1.2rem;
  }
  .sdg-cards { grid-template-columns: repeat(4, 1fr); }
  .sdg-flip {
    --c: #111;
    --d: 1;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    aspect-ratio: 1;
    perspective: 1100px;
    transform-style: preserve-3d;
    animation: sdg-fade 0.45s ease both;
    animation-delay: calc(var(--d) * 28ms);
    z-index: 1;
  }
  .sdg-flip-inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.28, 1);
    border-radius: 0.85rem;
    box-shadow: 0 12px 28px color-mix(in oklab, var(--c) 28%, transparent);
  }
  .sdg-face {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 0.85rem;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.65s cubic-bezier(0.22, 0.8, 0.28, 1), opacity 0.25s ease;
  }
  .sdg-front {
    background: var(--c);
    z-index: 2;
  }
  .sdg-official {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .sdg-back {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.85rem 0.8rem;
    background: var(--c);
    color: #fff;
    text-align: left;
    transform: rotateY(180deg);
    opacity: 0;
    z-index: 1;
  }
  .sdg-back-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    opacity: 0.85;
  }
  .sdg-back-title {
    font-weight: 700;
    font-size: clamp(0.82rem, 1.15vw, 1.05rem);
    line-height: 1.25;
  }
  .sdg-back-text {
    font-size: clamp(0.74rem, 0.95vw, 0.92rem);
    line-height: 1.45;
    opacity: 0.94;
  }
  .sdg-flip:hover,
  .sdg-flip:focus-visible,
  .sdg-flip.is-flipped {
    z-index: 6;
    outline: none;
  }
  .sdg-flip:hover .sdg-flip-inner,
  .sdg-flip:focus-visible .sdg-flip-inner,
  .sdg-flip.is-flipped .sdg-flip-inner {
    transform: translateY(-8px) scale(1.14);
    box-shadow: 0 22px 40px color-mix(in oklab, var(--c) 42%, transparent);
  }
  .sdg-flip:hover .sdg-front,
  .sdg-flip:focus-visible .sdg-front,
  .sdg-flip.is-flipped .sdg-front {
    transform: rotateY(180deg);
    opacity: 0;
  }
  .sdg-flip:hover .sdg-back,
  .sdg-flip:focus-visible .sdg-back,
  .sdg-flip.is-flipped .sdg-back {
    transform: rotateY(0deg);
    opacity: 1;
    z-index: 3;
  }
}

@layer motion {
  @view-transition { navigation: auto; }
  @keyframes sdg-in {
    from { opacity: 0.4; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: none; }
  }
  @keyframes sdg-fade {
    from { opacity: 0.35; }
    to { opacity: 1; }
  }
  @keyframes shine {
    to { transform: translateX(380%) skewX(-18deg); }
  }
  @keyframes ico-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
  @keyframes ico-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.18) rotate(-6deg); }
    100% { transform: scale(1); }
  }
  @keyframes panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes rainbow-move {
    to { background-position: 200% 0; }
  }
  .rainbow {
    background-size: 200% 100%;
    animation: rainbow-move 8s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .sdg-flip, .sdg-flip-inner, .rainbow { animation: none; transition: none; }
    .sdg-flip:hover, .sdg-flip:focus-visible, .sdg-flip.is-flipped { transform: none; }
    .sdg-flip:hover .sdg-flip-inner,
    .sdg-flip:focus-visible .sdg-flip-inner,
    .sdg-flip.is-flipped .sdg-flip-inner { transform: none; }
    .sdg-flip:hover .sdg-front,
    .sdg-flip:focus-visible .sdg-front,
    .sdg-flip.is-flipped .sdg-front { display: none; }
    .sdg-flip:hover .sdg-back,
    .sdg-flip:focus-visible .sdg-back,
    .sdg-flip.is-flipped .sdg-back { transform: none; }
    .founder-stage, .founder-more, .founder-veil { transition: none; }
    .founder-wrap.is-open .founder.is-peek { animation: none; filter: none; opacity: 1; transform: none; }
  }
}

@media (max-width: 1100px) {
  .founder-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 980px) {
  .sdg-grid { grid-template-columns: repeat(3, 1fr); }
  .sdg-cards { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-4, .path, .split { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .gov-lanes, .gov-bodies, .gov-decide, .gov-succession, .gov-tiers { grid-template-columns: 1fr 1fr; }
  .gov-junior { grid-template-columns: 1fr; gap: 0.4rem; }
  .start-paths, .start-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .brand-logo { height: 42px; }
  .menu-btn { display: block; }
  .nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.25rem 1.2rem;
  }
  .nav.open { display: flex; }
  .nav-tools { margin-left: auto; }
  .founder-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid, .eoi-facts, .sdg-pick-grid, .choice-grid { grid-template-columns: 1fr; }
  .sdg-grid, .sdg-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }
  .sdg-back { padding: 0.55rem 0.5rem; gap: 0.18rem; }
  .sdg-back-kicker { font-size: 0.62rem; }
  .sdg-back-title { font-size: 0.78rem; }
  .sdg-back-text { font-size: 0.66rem; line-height: 1.35; }
  .sdg-flip:hover .sdg-flip-inner,
  .sdg-flip:focus-visible .sdg-flip-inner,
  .sdg-flip.is-flipped .sdg-flip-inner {
    transform: translateY(-4px) scale(1.05);
  }
  .grid-2, .grid-3, .grid-4, .path, .split { grid-template-columns: 1fr; }
  .footer { padding: 1.7rem 1.25rem 1.35rem; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem 1.15rem;
  }
  .footer-brand,
  .footer-join { grid-column: 1 / -1; }
  .footer-join ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1rem 1rem;
  }
  .footer-logo { height: 44px; margin-bottom: 0.5rem; }
  .footer-end { margin-top: 1.2rem; }
  .gov-lanes, .gov-bodies, .gov-decide, .gov-succession, .gov-tiers { grid-template-columns: 1fr; }
  .gov-levels li { grid-template-columns: 1fr; gap: 0.35rem; }
  .start-paths, .start-steps { grid-template-columns: 1fr; }
}