:root {
      /* Palette */
      --ink: #04101f;
      --navy: #0b1f3a;
      --navy-lift: #102a47;
      --line: #1b3a5c;
      --gold: #d4af37;
      --gold-bright: #e8c96a;
      --gold-dim: rgba(212, 175, 55, 0.2);
      --paper: #f2f4f7;
      --muted: #8ca1b8;
      --alert: #c0392b;
      --serif:
          "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
          "Times New Roman", serif;
      --sans:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          Helvetica, Arial, sans-serif;

      /* Type */
      --display: "Spectral", Cambria, Georgia, serif;
      --body: "IBM Plex Sans", Calibri, system-ui, sans-serif;
      --data: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

      /* Scale */
      --step--1: clamp(0.78rem, 0.76rem + 0.12vw, 0.86rem);
      --step-0: clamp(0.98rem, 0.95rem + 0.18vw, 1.06rem);
      --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
      --step-2: clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem);
      --step-3: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
      --step-4: clamp(2.9rem, 1.9rem + 4.6vw, 6.2rem);
      --step-5: clamp(3.3rem, 1.1rem + 9.4vw, 8.6rem);

      /* Space */
      --gut: clamp(1.25rem, 4vw, 4rem);
      --sec: clamp(4.5rem, 9vw, 8.5rem);
      --max: 1200px;
  }

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

  html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
  }

  body {
      margin: 0;
      background: var(--ink);
      color: var(--paper);
      font-family: var(--body);
      font-size: var(--step-0);
      font-weight: 300;
      line-height: 1.65;
      letter-spacing: 0.005em;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
  }

  img {
      max-width: 100%;
      display: block;
  }

  a {
      color: inherit;
      text-decoration: none;
  }

  h1,
  h2,
  h3,
  h4 {
      font-family: var(--display);
      font-weight: 400;
      line-height: 1.08;
      margin: 0;
      letter-spacing: -0.015em;
  }

  p {
      margin: 0 0 1.1em;
  }

  :focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
      border-radius: 2px;
  }

  ::selection {
      background: var(--gold);
      color: var(--ink);
  }

  .wrap {
      max-width: var(--max);
      margin-inline: auto;
      padding-inline: var(--gut);
  }

  .section {
      padding-block: var(--sec);
      position: relative;
  }

  .section--lift {
      background: linear-gradient(180deg, var(--navy) 0%, #0a1c34 100%);
  }

  .section--edge {
      border-top: 1px solid var(--line);
  }

  /* --- Eyebrow: mono label + rule. Used to mark every major block. --- */
  .eyebrow {
      font-family: var(--data);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--gold);
      display: flex;
      align-items: center;
      gap: 0.9rem;
      margin-bottom: 1.6rem;
  }


  .eyebrow::after {
      content: "";
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, var(--gold-dim), transparent);
  }

  .lede {
      font-size: var(--step-1);
      font-weight: 300;
      color: #c7d5e3;
      max-width: 62ch;
      line-height: 1.5;
  }

  .note {
      font-family: var(--data);
      font-size: 0.7rem;
      letter-spacing: 0.06em;
      color: var(--muted);
  }

  /* wordmarks */
  .fin {
      font-family: var(--sans);
      font-weight: 800;
      letter-spacing: -0.02em;
  }

  .fin .g {
      color: var(--gold);
  }

  .fin .w {
      color: #fff;
  }

  .fin .t {
      color: var(--red);
  }

  .at {
      font-family: var(--sans);
      font-weight: 800;
      letter-spacing: 0.01em;
  }

  .at .r {
      color: var(--red);
  }

  .at .b {
      color: var(--blue);
  }

  .at .m {
      color: var(--mute);
      font-weight: 500;
  }

  /*============ MARQUEE ================*/

  .marquee {
      width: 100%;
      background: #071322;
      color: #fff;
      padding: 12px 0;
      border-top: 1px solid rgba(255, 255, 255, .08);
      border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .marquee-track {
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .marquee-track p {
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      font-size: 13px;
      letter-spacing: .5px;
      text-align: center;
  }

  .marquee-track p span {
      color: #3d7be0;
      font-weight: 600;
  }

  .marquee strong {
      color: #e05252;
      font-weight: 600;
  }

  /* ============================ NAV ============================ */
  .topbar {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 90;
      background: rgba(4, 16, 31, 0);
      backdrop-filter: blur(0px);
      border-bottom: 1px solid transparent;
      transition:
          background 0.4s,
          backdrop-filter 0.4s,
          border-color 0.4s;
  }

  .topbar.stuck {
      background: rgba(4, 16, 31, 0.86);
      backdrop-filter: blur(16px) saturate(140%);
      border-bottom-color: var(--line);
  }

  .topbar__in {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      height: 74px;
      /*margin-top: 50px;*/
      max-width: fit-content
  }

  .mark {
      display: flex;
      align-items: baseline;
      gap: 0.55rem;
      font-family: var(--display);
      font-size: 1.32rem;
      letter-spacing: -0.02em;
  }

  .mark b {
      font-weight: 600;
  }

  .mark .fin {
      color: #ffffff;
  }

  .mark .t {
      color: var(--gold);
  }

  .mark span {
      font-family: var(--data);
      font-size: 0.6rem;
      letter-spacing: 0.26em;
      color: var(--muted);
      text-transform: uppercase;
      transform: translateY(-2px);
  }

  .brand {
      display: flex;
      flex-direction: column;
      gap: 2px;
  }

  .brand .fin {
      font-size: 30px;
      line-height: 0.9;
  }

  .brand .tag {
      font-size: 8.5px;
      letter-spacing: 0.34em;
      color: var(--mute);
      text-transform: uppercase;
  }

  .navlinks {
      display: flex;
      gap: 1.9rem;
      align-items: center;
      font-size: 0.92rem;
      letter-spacing: 0.02em;
      color: #f0f2f3;
      font-weight: bold;
  }

  .navlinks a {
      position: relative;
      padding-block: 0.4rem;
      transition: color 0.25s;
  }

  .navlinks a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 1px;
      background: var(--gold);
      transition: width 0.3s;
  }

  .navlinks a:hover {
      color: var(--paper);
  }

  .navlinks a:hover::after {
      width: 100%;
  }

  .navtools {
      display: flex;
      align-items: center;
      gap: 0.85rem;
  }

  .progress {
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 1px;
      background: var(--gold);
      width: 0;
  }

  .menubtn {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      background: none;
      border: 1px solid var(--line);
      color: var(--paper);
      font-family: var(--data);
      font-size: 0.66rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 0.62rem 0.9rem;
      cursor: pointer;
      transition:
          border-color 0.25s,
          color 0.25s;
  }

  .menubtn:hover {
      border-color: var(--gold);
      color: var(--gold);
  }

  .menubtn i {
      display: block;
      width: 16px;
      height: 9px;
      border-top: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
  }

  /* Full menu overlay — holds the complete 18-item architecture */
  .overlay {
      position: fixed;
      inset: 0;
      z-index: 95;
      background: rgba(4, 16, 31, 0.97);
      backdrop-filter: blur(20px);
      opacity: 0;
      visibility: hidden;
      transition:
          opacity 0.35s,
          visibility 0.35s;
      overflow-y: auto;
  }

  .overlay.open {
      opacity: 1;
      visibility: visible;
  }

  .overlay__in {
      padding: 6rem var(--gut) 4rem;
      max-width: var(--max);
      margin-inline: auto;
  }

  .overlay__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 2.5rem 3rem;
      margin-top: 2.5rem;
  }

  .overlay h4 {
      font-family: var(--data);
      font-size: 0.66rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1rem;
      font-weight: 500;
  }

  .overlay ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 0.75rem;
  }

  .overlay ul a {
      font-family: var(--display);
      font-size: 1.22rem;
      color: #d6e2ee;
      transition:
          color 0.2s,
          transform 0.2s;
      display: inline-block;
  }

  .overlay ul a:hover {
      color: var(--gold);
      transform: translateX(4px);
  }

  .closebtn {
      position: absolute;
      top: 1.6rem;
      right: var(--gut);
      background: none;
      border: 0;
      color: var(--paper);
      font-family: var(--data);
      font-size: 0.68rem;
      letter-spacing: 0.2em;
      cursor: pointer;
      text-transform: uppercase;
  }

  /* ============================ BUTTONS ============================ */
  .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      font-family: var(--data);
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 1rem 1.6rem;
      border: 1px solid var(--gold);
      color: var(--gold);
      background: transparent;
      cursor: pointer;
      transition:
          background 0.3s,
          color 0.3s,
          box-shadow 0.3s;
      position: relative;
  }

  .btn:hover {
      background: var(--gold);
      color: var(--ink);
      box-shadow: 0 8px 30px -12px rgba(212, 175, 55, 0.7);
  }

  .btn--solid {
      background: var(--gold);
      color: var(--ink);
  }

  .btn--solid:hover {
      background: var(--gold-bright);
      border-color: var(--gold-bright);
  }

  .btn--ghost {
      border-color: var(--line);
      color: #c3d2e1;
  }

  .btn--ghost:hover {
      background: transparent;
      border-color: var(--paper);
      color: var(--paper);
      box-shadow: none;
  }

  .btn--sm {
      padding: 0.68rem 0.5rem;
      font-size: 0.64rem;
  }

  /* ============================ HERO ============================ */
  .hero {
      position: relative;
      /*padding: 78px 0 0;*/
      padding: 150px 0 0;
      overflow: hidden;
  }

  .hero-grid {
      position: absolute;
      inset: 0;
      background-image:
          linear-gradient(var(--line) 1px, transparent 1px),
          linear-gradient(90deg, var(--line) 1px, transparent 1px);
      background-size: 64px 64px;
      opacity: 0.16;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 30%,
              #000 30%,
              transparent 75%);
  }

  .hero__sky {
      position: absolute;
      inset: 0;
      z-index: 0;
  }

  .hero__sky svg {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 140%;
      height: auto;
      min-width: 1400px;
  }

  .hero-glow {
      position: absolute;
      width: 680px;
      height: 680px;
      border-radius: 50%;
      background: radial-gradient(circle,
              rgba(212, 160, 23, 0.1),
              transparent 62%);
      top: -220px;
      right: -160px;
      pointer-events: none;
  }

  .hero-in {
      position: relative;
      z-index: 2;
      max-width: var(--max);
      margin: 0 auto;
      padding: 60px;
  }

  .confbar {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      border: 1px solid var(--gold-dim);
      border-radius: 1px;
      padding: 6px 13px;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold-bright);
      margin-bottom: 34px;
  }

  .confbar .pulse {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--alert);
      box-shadow: 0 0 0 0 rgba(204, 32, 32, 0.6);
      animation: pulse 2.4s infinite;
  }

  @keyframes pulse {
      0% {
          box-shadow: 0 0 0 0 rgba(204, 32, 32, 0.55);
      }

      70% {
          box-shadow: 0 0 0 7px rgba(204, 32, 32, 0);
      }

      100% {
          box-shadow: 0 0 0 0 rgba(204, 32, 32, 0);
      }
  }

  .hero .fin-mega {
      /*font-family: var(--body);*/
      font-family: "Segoe UI";
      font-weight: 800;
      font-size: clamp(56px, 11vw, 128px);
      line-height: 0.92;
      letter-spacing: -0.03em;
      margin-bottom: 4px;
  }

  .hero .fin-mega .g {
      color: var(--gold);
  }

  .hero .fin-mega .w {
      color: #fff;
  }

  .hero .fin-mega .r {
      color: #cc2020;
  }

  .hero .ind {
      font-family: var(--display);
      font-style: italic;
      font-size: clamp(22px, 4vw, 40px);
      color: #c7d2e4;
      margin-bottom: 30px;
      font-weight: 500;
  }

  .hero h1 {
      font-family: var(--display);
      font-size: clamp(23px, 3.4vw, 34px);
      color: #fff;
      max-width: 780px;
      margin-bottom: 12px;
      line-height: 1.15;
      font-weight: 600;
      letter-spacing: -0.01em;
  }

  .hero .lede {
      font-size: clamp(14px, 1.9vw, 16px);
      color: var(--gold-bright);
      max-width: 680px;
      letter-spacing: 0.02em;
      margin-bottom: 40px;
      font-weight: 300;
  }

  .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 64px;
  }

  .btn-gold {
      background: var(--gold);
      color: var(--navy);
  }

  .btn-gold:hover {
      background: var(--gold-bright);
      transform: translateY(-1px);
  }

  .btn-line {
      border: 1px solid var(--line);
      color: #fff;
      background: transparent;
  }

  .btn-line:hover {
      border-color: var(--gold);
      color: var(--gold);
  }

  /* hero scarcity strip */
  .scarcity {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(15, 26, 46, 0.5), transparent);
  }

  .scarcity-in {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      max-width: var(--max);
      margin: 0 auto;
  }

  .scell {
      padding: 26px 28px;
      border-left: 1px solid var(--line);
  }

  .scell:first-child {
      border-left: none;
  }

  .scell .k {
      font-family: var(--display);
      font-size: 34px;
      color: #fff;
      line-height: 1;
  }

  .scell .k .u {
      color: var(--gold);
  }

  .scell .v {
      font-size: 12px;
      color: var(--muted);
      margin-top: 7px;
      letter-spacing: 0.02em;
  }

  @media (max-width: 860px) {
      .scarcity-in {
          grid-template-columns: repeat(2, 1fr);
      }

      .scell:nth-child(3) {
          border-left: none;
      }
  }

  @media (max-width: 480px) {
      .scarcity-in {
          grid-template-columns: 1fr;
      }

      .scell {
          border-left: none;
          border-top: 1px solid var(--line);
      }

      .scell:first-child {
          border-top: none;
      }
  }

  /* ============================ BAROMETER ============================ */
  .barometer {
      background: var(--navy);
      border-block: 1px solid var(--line);
  }

  .barometer__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }

  .stat {
      padding: 2.4rem 1.6rem;
      border-right: 1px solid var(--line);
      position: relative;
  }

  .stat:last-child {
      border-right: 0;
  }

  .stat__n {
      font-family: var(--display);
      font-size: clamp(1.9rem, 4vw, 2.9rem);
      color: var(--gold);
      line-height: 1;
      letter-spacing: -0.03em;
  }

  .stat__l {
      font-size: 0.82rem;
      color: #b4c6d6;
      margin-top: 0.6rem;
      line-height: 1.4;
  }

  .stat__s {
      font-family: var(--data);
      font-size: 0.6rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 0.5rem;
  }

  /* ============================ GENERIC GRID/CARD ============================ */
  .split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      gap: clamp(2.5rem, 6vw, 5.5rem);
      align-items: start;
  }

  .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
  }

  .card {
      background: var(--ink);
      padding: 2.1rem 1.8rem;
      transition: background 0.35s;
  }

  .card:hover {
      background: var(--navy);
  }

  .card h3 {
      font-size: 1.24rem;
      margin-bottom: 0.7rem;
  }

  .card p {
      font-size: 0.9rem;
      color: #a9bcce;
      margin: 0;
  }

  .card__k {
      font-family: var(--data);
      font-size: 0.62rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.1rem;
      display: block;
  }

  .glass {
      background: rgba(16, 42, 71, 0.45);
      backdrop-filter: blur(12px);
      border: 1px solid var(--line);
      padding: 2rem;
  }

  /* ============================ THE ROOM (SIGNATURE) ============================ */
  .room {
      background: radial-gradient(ellipse at 50% 0%,
              #0d2440 0%,
              var(--ink) 62%);
  }

  .roomstage {
      position: relative;
      margin-top: 3rem;
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
  }

  #seatmap {
      width: 100%;
      max-width: 760px;
      height: auto;
      overflow: visible;
  }

  .seat {
      transition:
          fill 0.5s ease,
          r 0.35s ease;
      cursor: default;
  }

  .seat--open {
      fill: rgba(140, 161, 184, 0.22);
  }

  .roomlegend {
      display: flex;
      flex-wrap: wrap;
      gap: 1.6rem;
      justify-content: center;
      margin-top: 2.2rem;
      font-family: var(--data);
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      color: #b4c6d6;
  }

  .roomlegend button {
      background: none;
      border: 0;
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.3rem;
      opacity: 0.55;
      transition: opacity 0.25s;
  }

  .roomlegend button.on {
      opacity: 1;
  }

  .roomlegend i {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      display: block;
  }

  .roomrules {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      margin-top: 3.5rem;
  }

  .rule {
      background: var(--ink);
      padding: 1.9rem 1.6rem;
  }

  .rule strong {
      display: block;
      font-family: var(--display);
      font-size: 1.1rem;
      font-weight: 400;
      color: var(--gold);
      margin-bottom: 0.55rem;
  }

  .rule span {
      font-size: 0.86rem;
      color: #a9bcce;
  }

  /* ============================ CHARTS ============================ */
  .chartblock {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2.5rem;
      margin-top: 3rem;
  }

  .chart {
      border: 1px solid var(--line);
      padding: 1.9rem;
      background: linear-gradient(180deg,
              rgba(16, 42, 71, 0.35),
              transparent);
  }

  .chart h3 {
      font-size: 1.06rem;
      margin-bottom: 0.35rem;
  }

  .chart .note {
      display: block;
      margin-bottom: 1.6rem;
  }

  .bars {
      display: grid;
      gap: 0.85rem;
  }

  .bar {
      display: grid;
      grid-template-columns: 120px 1fr auto;
      align-items: center;
      gap: 0.9rem;
      font-size: 0.82rem;
  }

  .bar__t {
      color: #b4c6d6;
      font-size: 0.78rem;
  }

  .bar__track {
      height: 7px;
      background: rgba(140, 161, 184, 0.14);
      position: relative;
      overflow: hidden;
  }

  .bar__fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: 0;
      background: linear-gradient(90deg, var(--gold), var(--gold-bright));
      transition: width 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .bar__v {
      font-family: var(--data);
      font-size: 0.74rem;
      color: var(--gold);
  }

  .cols {
      display: flex;
      align-items: flex-end;
      gap: 0.7rem;
      height: 180px;
      margin-top: 1rem;
  }

  .col {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      gap: 0.6rem;
      height: 100%;
  }

  .col__bar {
      width: 100%;
      background: linear-gradient(180deg,
              var(--gold-bright),
              rgba(212, 175, 55, 0.25));
      height: 0;
      transition: height 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .col__x {
      font-family: var(--data);
      font-size: 0.62rem;
      color: var(--muted);
      letter-spacing: 0.06em;
  }

  .col__v {
      font-family: var(--data);
      font-size: 0.68rem;
      color: var(--gold);
  }

  /* Kill chain */
  .chain {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      margin-top: 2.5rem;
  }

  .link {
      background: var(--ink);
      padding: 1.5rem 1.2rem;
      position: relative;
      transition: background 0.3s;
  }

  .link:hover {
      background: var(--navy-lift);
  }

  .link__n {
      font-family: var(--data);
      font-size: 0.62rem;
      color: var(--gold);
      letter-spacing: 0.2em;
      display: block;
      margin-bottom: 0.7rem;
  }

  .link strong {
      display: block;
      font-family: var(--display);
      font-size: 1.02rem;
      font-weight: 400;
      margin-bottom: 0.5rem;
  }

  .link span {
      font-size: 0.79rem;
      color: #9db1c5;
      display: block;
  }

  .link em {
      display: block;
      margin-top: 0.9rem;
      padding-top: 0.8rem;
      border-top: 1px solid var(--line);
      font-style: normal;
      font-family: var(--data);
      font-size: 0.66rem;
      color: var(--gold);
      letter-spacing: 0.04em;
  }

  /* ============================ INDEX (GATED) ============================ */
  .indexwrap {
      position: relative;
      border: 1px solid var(--line);
      margin-top: 3rem;
      overflow: hidden;
  }

  .indexgrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 1px;
      background: var(--line);
  }

  .idx {
      background: var(--navy);
      padding: 1.9rem 1.5rem;
  }

  .idx__s {
      font-family: var(--display);
      font-size: 2.4rem;
      color: var(--gold);
      line-height: 1;
  }

  .idx__s small {
      font-size: 0.9rem;
      color: var(--muted);
  }

  .idx__n {
      font-size: 0.86rem;
      color: #c0d0df;
      margin-top: 0.5rem;
  }

  .idx__m {
      height: 4px;
      background: rgba(140, 161, 184, 0.16);
      margin-top: 1rem;
      position: relative;
      overflow: hidden;
  }

  .idx__m i {
      position: absolute;
      inset: 0 auto 0 0;
      background: var(--gold);
      width: 0;
      transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .gate {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 1.1rem;
      padding: 2rem;
      background: linear-gradient(180deg,
              rgba(4, 16, 31, 0.55) 0%,
              rgba(4, 16, 31, 0.94) 55%);
      backdrop-filter: blur(7px);
  }

  .gate strong {
      font-family: var(--display);
      font-size: 1.5rem;
      font-weight: 400;
      max-width: 22ch;
  }

  .gate p {
      max-width: 46ch;
      font-size: 0.88rem;
      color: #b4c6d6;
      margin: 0;
  }

  /* ============================ ROADMAP 2045 ============================ */
  .phases {
      display: grid;
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      margin-top: 3rem;
  }

  .phase {
      background: var(--ink);
      padding: 2rem 1.9rem;
      display: grid;
      grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 1.3fr);
      gap: 1.8rem;
      align-items: start;
      transition: background 0.3s;
  }

  .phase--now {
      background: linear-gradient(90deg,
              rgba(212, 175, 55, 0.09),
              transparent 55%);
  }

  .phase__y {
      font-family: var(--data);
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      color: var(--gold);
  }

  .phase__y b {
      display: block;
      font-family: var(--display);
      font-size: 1.4rem;
      letter-spacing: -0.01em;
      color: var(--paper);
      font-weight: 400;
      margin-top: 0.4rem;
  }

  .phase__st {
      font-family: var(--data);
      font-size: 0.6rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 0.3rem 0.6rem;
      border: 1px solid var(--line);
      color: var(--muted);
      display: inline-block;
  }

  .phase--now .phase__st {
      border-color: var(--gold);
      color: var(--gold);
  }

  .phase p {
      font-size: 0.88rem;
      color: #a9bcce;
      margin: 0;
  }

  /* ============================ PEOPLE ============================ */
  .filters {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 2rem;
  }

  .filters button {
      background: none;
      border: 1px solid var(--line);
      color: #b4c6d6;
      font-family: var(--data);
      font-size: 0.64rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 0.55rem 0.9rem;
      cursor: pointer;
      transition: 0.25s;
  }

  .filters button.on,
  .filters button:hover {
      border-color: var(--gold);
      color: var(--gold);
  }

  .people {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
  }

  .person {
      border: 1px solid var(--line);
      background: var(--navy);
      transition:
          border-color 0.3s,
          transform 0.3s;
  }

  .person:hover {
      border-color: var(--gold-dim);
      transform: translateY(-3px);
  }

  .person__img {
      aspect-ratio: 4/5;
      background: linear-gradient(160deg, var(--navy-lift), #081827);
      display: grid;
      place-items: center;
      border-bottom: 1px solid var(--line);
  }

  .person__img span {
      font-family: var(--data);
      font-size: 0.58rem;
      letter-spacing: 0.16em;
      color: rgba(140, 161, 184, 0.5);
      text-transform: uppercase;
      text-align: center;
      padding: 1rem;
  }

  .person__b {
      padding: 1.15rem;
  }

  .person__b strong {
      display: block;
      font-family: var(--display);
      font-size: 1.02rem;
      font-weight: 400;
  }

  .person__b span {
      display: block;
      font-size: 0.78rem;
      color: var(--muted);
      margin-top: 0.3rem;
      line-height: 1.45;
  }

  /* ============================ TIERS ============================ */
  .tiers {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
      gap: 1.5rem;
      margin-top: 3rem;
  }

  .tier {
      border: 1px solid var(--line);
      padding: 2rem 1.8rem;
      display: flex;
      flex-direction: column;
      background: linear-gradient(180deg, rgba(16, 42, 71, 0.4), transparent);
  }

  .tier--lead {
      border-color: var(--gold);
      box-shadow: 0 24px 60px -40px rgba(212, 175, 55, 0.5);
  }

  .tier__k {
      font-family: var(--data);
      font-size: 0.62rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1rem;
  }

  .tier h3 {
      font-size: 1.42rem;
      margin-bottom: 0.6rem;
  }

  .tier__x {
      font-size: 0.85rem;
      color: #a9bcce;
      padding-bottom: 1.4rem;
      border-bottom: 1px solid var(--line);
      margin-bottom: 1.4rem;
  }

  .tier ul {
      list-style: none;
      margin: 0 0 1.8rem;
      padding: 0;
      display: grid;
      gap: 0.75rem;
      font-size: 0.85rem;
      color: #b4c6d6;
  }

  .tier li {
      display: grid;
      grid-template-columns: 14px 1fr;
      gap: 0.7rem;
      align-items: start;
  }

  .tier li::before {
      content: "";
      width: 5px;
      height: 5px;
      background: var(--gold);
      margin-top: 0.55rem;
  }

  .tier .btn {
      margin-top: auto;
      justify-content: center;
  }

  /* ============================ FORMS ============================ */
  .forms {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      margin-top: 3rem;
  }

  .formcol {
      background: var(--ink);
      padding: clamp(1.8rem, 3vw, 2.8rem);
  }

  .field {
      margin-bottom: 1.15rem;
  }

  .field label {
      display: block;
      font-family: var(--data);
      font-size: 0.62rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.5rem;
  }

  .field input,
  .field select,
  .field textarea {
      width: 100%;
      background: rgba(16, 42, 71, 0.4);
      border: 1px solid var(--line);
      color: var(--paper);
      font-family: var(--body);
      font-size: 0.92rem;
      padding: 0.85rem 0.9rem;
      transition:
          border-color 0.25s,
          background 0.25s;
  }

  option {
      color: #fff;
      background: #0b2038;
  }

  .report-form select {
      appearance: none;
      cursor: pointer;

      background:
          linear-gradient(45deg, transparent 50%, var(--gold) 50%),
          linear-gradient(135deg, var(--gold) 50%, transparent 50%),
          rgba(16, 42, 71, 0.4);

      background-position:
          calc(100% - 18px) calc(50% - 3px),
          calc(100% - 12px) calc(50% - 3px),
          center;

      background-size: 6px 6px, 6px 6px, 100%;
      background-repeat: no-repeat;

      padding-right: 42px;
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
      border-color: var(--gold);
      background: rgba(16, 42, 71, 0.7);
      outline: none;
  }

  .field textarea {
      min-height: 96px;
      resize: vertical;
  }

  .field.bad input,
  .field.bad select,
  .field.bad textarea {
      border-color: var(--alert);
  }

  .fin .r {
      color: var(--red);
  }

  .r {
      color: var(--red);
  }

  .field .err {
      display: none;
      font-family: var(--data);
      font-size: 0.64rem;
      color: var(--alert);
      margin-top: 0.4rem;
      letter-spacing: 0.04em;
  }

  .field.bad .err {
      display: block;
  }

  .two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
  }

  .formmsg {
      display: none;
      border: 1px solid var(--gold);
      background: rgba(212, 175, 55, 0.08);
      padding: 1rem;
      font-size: 0.86rem;
      margin-bottom: 1.2rem;
  }

  .formmsg.show {
      display: block;
  }

  /* ============================ FAQ / FOOTER ============================ */
  .faq {
      margin-top: 2.5rem;
      border-top: 1px solid var(--line);
  }

  .faq details {
      border-bottom: 1px solid var(--line);
  }

  .faq summary {
      cursor: pointer;
      padding: 1.35rem 0;
      font-family: var(--display);
      font-size: 1.08rem;
      list-style: none;
      display: flex;
      justify-content: space-between;
      gap: 1.5rem;
      align-items: center;
  }

  .faq summary::-webkit-details-marker {
      display: none;
  }

  .faq summary::after {
      content: "+";
      color: var(--gold);
      font-family: var(--data);
      font-size: 1.1rem;
  }

  .faq details[open] summary::after {
      content: "–";
  }

  .faq p {
      font-size: 0.9rem;
      color: #a9bcce;
      padding-bottom: 1.4rem;
      max-width: 74ch;
      margin: 0;
  }

  .footer {
      background: var(--navy);
      border-top: 1px solid var(--line);
      padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  }

  .footer__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit,
              minmax(140px, 1fr));
      gap: 2.5rem;
  }

  .footer h5 {
      font-family: var(--data);
      font-size: 0.62rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin: 0 0 1rem;
      font-weight: 500;
  }

  .footer ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 0.6rem;
      font-size: 0.84rem;
      color: #a9bcce;
  }

  .footer ul a:hover {
      color: var(--gold);
  }

  .organiser {
      margin-top: 1.8rem;
      padding-top: 1.6rem;
      border-top: 1px solid var(--line);
  }

  .organiser span {
      font-family: var(--data);
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      display: block;
      margin-bottom: 0.7rem;
  }

  .organiser b {
      font-family: var(--body);
      font-weight: 600;
      font-size: 1.15rem;
      letter-spacing: 0.02em;
  }

  .organiser b i {
      font-style: normal;
      color: #e05252;
  }

  .organiser b u {
      text-decoration: none;
      color: #3d7be0;
  }

  .chapters {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 0.9rem;
      margin-top: 1rem;
      font-family: var(--data);
      font-size: 0.66rem;
      letter-spacing: 0.1em;
      color: var(--muted);
  }

  .chapters s {
      text-decoration: none;
      color: var(--gold);
  }

  .legal {
      margin-top: 3rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--line);
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: space-between;
      font-family: var(--data);
      font-size: 0.64rem;
      letter-spacing: 0.08em;
      color: var(--muted);
  }

  /* ============================ MOTION ============================ */
  .rv {
      opacity: 0;
      transform: translateY(26px);
      transition:
          opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .rv.in {
      opacity: 1;
      transform: none;
  }

  .rv[data-d="1"] {
      transition-delay: 0.1s;
  }

  .rv[data-d="2"] {
      transition-delay: 0.2s;
  }

  .rv[data-d="3"] {
      transition-delay: 0.3s;
  }

  /* ============================ RESPONSIVE ============================ */
  @media (max-width: 980px) {
      .navlinks {
          display: none;
      }

      .split {
          grid-template-columns: 1fr;
      }

      .phase {
          grid-template-columns: 1fr;
          gap: 1rem;
      }
  }

  @media (max-width: 640px) {
      .hero__facts div {
          border-right: 0;
          border-bottom: 1px solid var(--line);
          width: 100%;
          margin-right: 0;
          padding-right: 0;
      }

      .hero__facts div:last-child {
          border-bottom: 0;
      }

      .stat {
          border-right: 0;
          border-bottom: 1px solid var(--line);
          padding: 1.9rem 1.4rem;
      }

      .bar {
          grid-template-columns: 96px 1fr auto;
          gap: 0.6rem;
      }

      .two {
          grid-template-columns: 1fr;
      }
  }

  @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.001ms !important;
      }

      html {
          scroll-behavior: auto;
      }

      .rv {
          opacity: 1;
          transform: none;
      }
  }


  /* ===========================================
   Sponsor Section
===========================================*/

  .sponsor-block {
      max-width: 950px;
  }

  .sponsor-title {
      font-size: var(--step-3);
      margin-bottom: 1.5rem;
  }

  .sponsor-text {
      max-width: 60ch;
  }

  /* Heading */

  .sponsor-logos::before {

      display: block;
      margin-bottom: 22px;
      font-family: var(--data);
      font-size: .72rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--gold);
  }

  /* Logo Grid */

  .sponsor-logos {
      margin-top: 70px;

      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
  }

  .sponsor-logo {
      height: 120px;

      display: flex;
      align-items: center;
      justify-content: center;

      border: 1px solid var(--line);
      /* background: rgba(16, 42, 71, .18); */
      background: #fff;
      transition: .35s ease;
  }

  .sponsor-logo:hover {
      border-color: var(--gold);
      /* background: rgba(16, 42, 71, .35); */
      background: #fff;
      transform: translateY(-5px);
  }


  /* Benefits */

  .sponsor-benefits {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-top: 65px;
  }

  .benefit-card {
      padding: 28px;
      border: 1px solid var(--line);
      background: rgba(16, 42, 71, .18);
      transition: .35s;
  }

  .benefit-card:hover {
      transform: translateY(-6px);
      border-color: var(--gold);
      background: rgba(16, 42, 71, .35);
  }

  .benefit-icon {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 42px;
      height: 42px;

      border: 1px solid rgba(212, 175, 55, .35);

      color: var(--gold);

      font-family: var(--data);
      font-size: .72rem;
      letter-spacing: .15em;

      margin-bottom: 20px;
  }

  .benefit-card h4 {
      font-size: 1.15rem;
      margin-bottom: 12px;
  }

  .benefit-card p {
      color: #aebfd0;
      font-size: .92rem;
      line-height: 1.7;
      margin: 0;
  }

  /* Responsive */

  @media (max-width:900px) {

      .sponsor-logos {
          grid-template-columns: repeat(2, 1fr);
      }

      .sponsor-benefits {
          grid-template-columns: 1fr;
      }

  }

  @media (max-width:600px) {

      .sponsor-logos {
          grid-template-columns: repeat(2, 1fr);
      }

      .sponsor-logo {
          height: 100px;
      }

  }

  /* ===============================
   REPORT MODAL
================================= */

  .report-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;

      display: flex;
      align-items: center;
      justify-content: center;

      opacity: 0;
      visibility: hidden;
      transition: .35s;
  }

  .report-modal.active {
      opacity: 1;
      visibility: visible;
  }

  .report-modal__backdrop {
      position: absolute;
      inset: 0;

      background: rgba(4, 16, 31, .72);
      backdrop-filter: blur(10px);
  }

  .report-modal__box {

      position: relative;
      width: min(92vw, 500px);

      padding: 42px;

      border: 1px solid var(--line);

      background:
          linear-gradient(180deg,
              rgba(16, 42, 71, .96),
              rgba(4, 16, 31, .98));

      box-shadow:
          0 30px 70px rgba(0, 0, 0, .45),
          inset 0 1px 0 rgba(255, 255, 255, .03);

      animation: modalIn .4s ease;
  }

  @keyframes modalIn {

      from {
          opacity: 0;
          transform: translateY(20px) scale(.96);
      }

      to {
          opacity: 1;
          transform: none;
      }

  }

  .report-modal__close {

      position: absolute;
      right: 18px;
      top: 14px;

      width: 38px;
      height: 38px;

      border: none;
      background: none;

      color: #c9d5e2;

      cursor: pointer;

      font-size: 28px;
      line-height: 1;

      transition: .3s;
  }

  .report-modal__close:hover {

      color: var(--gold);
      transform: rotate(90deg);

  }

  .report-modal__title {

      font-size: 2rem;
      margin-bottom: 14px;

  }

  .report-modal__text {

      color: #aebfd0;
      margin-bottom: 32px;
      line-height: 1.7;

  }

  .report-submit {

      width: 100%;
      justify-content: center;
      margin-top: 12px;

  }

  .report-form .field {

      margin-bottom: 20px;

  }

  .report-form input {

      height: 56px;

  }

  @media(max-width:600px) {

      .report-modal__box {

          padding: 30px 22px;

      }

      .report-modal__title {

          font-size: 1.6rem;

      }

  }

  /*==============================
WHY ATTEND CARDS
===============================*/

  .attend-grid {
      margin-top: 70px;

      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
  }

  .attend-card {
      display: flex;
      gap: 20px;
      align-items: flex-start;

      padding: 28px;

      background: rgba(16, 42, 71, .38);

      border: 1px solid var(--line);

      border-radius: 8px;

      transition: .35s ease;
  }

  .attend-card:hover {
      border-color: var(--gold);
      transform: translateY(-6px);
      background: rgba(16, 42, 71, .65);
  }

  .attend-card-full {
      grid-column: 1/-1;
  }

  .attend-number {

      width: 48px;
      height: 48px;

      border-radius: 8px;

      display: flex;
      align-items: center;
      justify-content: center;

      flex-shrink: 0;

      font-family: var(--data);
      font-size: 1.05rem;
      font-weight: 700;

      color: #fff;
  }

  .attend-number.gold {
      background: #d4af37;
      color: #04101f;
  }

  .attend-number.blue {
      background: #2e79ff;
  }

  .attend-number.red {
      background: #dc2f2f;
  }

  .attend-content h3 {
      margin: 0 0 12px;
      font-size: 1.45rem;
      line-height: 1.2;
      color: #fff;
  }

  .attend-content p {
      margin: 0;
      color: #b9c9d8;
      line-height: 1.75;
      font-size: .95rem;
  }

  /* Mobile */

  @media(max-width:900px) {

      .attend-grid {
          grid-template-columns: 1fr;
      }

      .attend-card-full {
          grid-column: auto;
      }

  }

  @media(max-width:600px) {

      .attend-card {
          padding: 22px;
          gap: 16px;
      }

      .attend-content h3 {
          font-size: 1.2rem;
      }

      .attend-number {
          width: 42px;
          height: 42px;
      }

  }

  /*==================================================
WHAT YOU TAKE HOME
===================================================*/

  .takeaway-box {

      margin-top: 40px;

      border: 1px solid var(--line);
      border-left: 5px solid var(--gold);

      border-radius: 8px;

      background: #0f1d34;

      padding: 34px 34px 30px;
  }

  .takeaway-heading {

      font-family: var(--data);

      font-weight: 700;

      font-size: .9rem;

      letter-spacing: .2em;

      text-transform: uppercase;

      color: var(--gold);

      margin-bottom: 28px;
  }

  .takeaway-grid {

      display: grid;

      grid-template-columns: repeat(2, 1fr);

      column-gap: 50px;

      row-gap: 24px;
  }

  .takeaway-item {

      display: flex;

      align-items: flex-start;

      gap: 14px;
  }

  .bullet {

      color: var(--gold);

      font-size: 18px;

      line-height: 1;

      margin-top: 3px;

      flex-shrink: 0;
  }

  .takeaway-item p {

      margin: 0;

      color: #c6d2df;

      font-size: 1rem;

      line-height: 1.7;
  }

  .takeaway-item strong {

      color: #fff;

      font-weight: 600;
  }



  /*==================================================
BOTTOM STATS
===================================================*/

  .attend-stats {

      margin-top: 28px;

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 18px;
  }

  .attend-stat {

      background: #0f1d34;

      border: 1px solid var(--line);

      border-radius: 8px;

      text-align: center;

      padding: 28px 20px;

      transition: .35s ease;
  }

  .attend-stat:hover {

      border-color: var(--gold);

      transform: translateY(-6px);
  }

  .attend-stat h3 {

      margin: 0;

      color: var(--gold);

      font-size: 2.3rem;

      font-family: var(--display);

      font-weight: 500;
  }

  .attend-stat span {

      display: block;

      margin-top: 10px;

      color: #a8b6c6;

      font-size: .92rem;

      line-height: 1.5;
  }



  /*==================================================
RESPONSIVE
===================================================*/

  @media(max-width:900px) {

      .takeaway-grid {

          grid-template-columns: 1fr;
      }

      .attend-stats {

          grid-template-columns: repeat(2, 1fr);
      }

  }

  @media(max-width:600px) {

      .takeaway-box {

          padding: 26px 22px;
      }

      .attend-stats {

          grid-template-columns: 1fr;
      }

  }


  /*=====================================
    Stats Section
=====================================*/

  .stats-section {
      margin-top: 45px;
  }

  .stats-grid {

      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;

  }

  .stat-box {

      background: #0d1b31;
      border: 1px solid #27446d;
      border-radius: 8px;

      padding: 30px 20px;

      text-align: center;

      transition: all .35s ease;
  }

  .stat-box:hover {

      transform: translateY(-6px);

      border-color: var(--gold);

      box-shadow: 0 12px 30px rgba(0, 0, 0, .25);

  }

  .stat-box h3 {

      margin: 0;

      font-family: var(--display);

      font-size: 2.4rem;

      font-weight: 500;

      color: var(--gold);

      line-height: 1;
  }

  .stat-box p {

      margin-top: 14px;
      margin-bottom: 0;

      color: #a7b6c7;

      font-size: .92rem;

      line-height: 1.5;

      font-weight: 400;
  }


  /*=====================================
Responsive
=====================================*/

  @media(max-width:900px) {

      .stats-grid {

          grid-template-columns: repeat(2, 1fr);

      }

  }

  @media(max-width:600px) {

      .stats-grid {

          grid-template-columns: 1fr;

      }

  }

  /* ===========================
THANK YOU OVERLAY
=========================== */

  .thankyou-overlay {
      position: fixed;
      inset: 0;
      background: rgba(4, 16, 31, .95);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: .4s;
      z-index: 99999;
  }

  .thankyou-overlay.show {
      opacity: 1;
      visibility: visible;
  }

  .thankyou-box {
      width: min(90%, 520px);
      background: #0f1d34;
      border: 1px solid var(--gold);
      padding: 50px 40px;
      text-align: center;
      border-radius: 10px;
      animation: popup .45s ease;
  }

  .checkmark {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--gold);
      color: #04101f;
      font-size: 42px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 25px;
  }

  .thankyou-box h2 {
      color: #fff;
      margin-bottom: 15px;
      font-size: 2rem;
  }

  .thankyou-box p {
      color: #c9d4df;
      line-height: 1.7;
      margin: 0;
  }

  @keyframes popup {
      from {
          transform: translateY(30px) scale(.9);
          opacity: 0;
      }

      to {
          transform: none;
          opacity: 1;
      }
  }

  .events-list {
      margin-top: 60px;
      display: flex;
      flex-direction: column;
      gap: 16px;
  }

  .event-card {

      display: grid;
      grid-template-columns: 80px 1fr auto;

      align-items: center;

      gap: 24px;

      padding: 20px 24px;

      border: 1px solid var(--line);

      background: rgba(16, 42, 71, .22);

      transition: .35s ease;
  }

  .event-card:hover {

      border-color: var(--gold);

      background: rgba(16, 42, 71, .55);

      transform: translateY(-4px);
  }

  .event-date {

      text-align: center;

      border-right: 1px solid var(--line);

      padding-right: 18px;
  }

  .event-date .month {

      display: block;

      font-family: var(--data);

      font-size: .72rem;

      letter-spacing: .18em;

      color: var(--gold);

      margin-bottom: 6px;
  }

  .event-date h3 {

      margin: 0;

      font-size: 2rem;

      line-height: 1;

      color: #fff;
  }

  .event-date small {

      color: #8fa2b7;

      font-size: .75rem;
  }

  .event-content h3 {

      margin: 0;

      font-size: 1.35rem;

      color: #fff;
  }

  .event-content h3 span {

      color: var(--gold);

      font-weight: 400;
  }

  .event-content p {

      margin: 8px 0 14px;

      color: #aab8c8;

      font-size: .92rem;

      line-height: 1.6;
  }

  .event-tags {

      display: flex;

      flex-wrap: wrap;

      gap: 8px;
  }

  .event-tags span {

      padding: 4px 10px;

      border: 1px solid var(--line);

      font-size: .72rem;

      color: #c4d0db;

      border-radius: 20px;
  }

  .event-status {

      padding: 8px 16px;

      border: 1px solid var(--line);

      font-family: var(--data);

      font-size: .68rem;

      letter-spacing: .12em;

      text-transform: uppercase;

      color: #b9c6d3;

      white-space: nowrap;
  }

  .event-status.open {

      border-color: var(--gold);

      color: var(--gold);
  }

  .event-status.planning {

      border-color: #48698d;

      color: #8fb4d9;
  }

  .event-card.active {

      border-color: var(--gold);

      box-shadow: 0 0 0 1px rgba(212, 175, 55, .15);
  }

  @media(max-width:768px) {

      .event-card {

          grid-template-columns: 1fr;

          gap: 18px;

          text-align: left;

      }

      .event-date {

          border: none;

          padding: 0;

          text-align: left;

          display: flex;

          align-items: center;

          gap: 16px;

      }

      .event-date h3 {

          font-size: 1.8rem;

      }

      .event-status {

          width: fit-content;

      }

  }

  /*==============================
EVENT META
===============================*/

  .event-meta {

      margin-top: 40px;

      padding: 26px 30px;

      border: 1px solid var(--line);

      background: rgba(16, 42, 71, .22);

  }

  .event-meta-top {

      display: flex;

      align-items: center;

      flex-wrap: wrap;

      gap: 28px;

      padding-bottom: 18px;

      border-bottom: 1px solid var(--line);

  }

  .meta-item {

      color: #c3d0dd;

      font-size: .95rem;

  }

  .meta-item strong {

      color: #fff;

      font-weight: 600;

      font-size: 1rem;

  }

  .event-tagline {

      margin: 18px 0;

      font-family: var(--display);

      font-style: normal;
      font-weight: 700;

      font-size: 1.05rem;

      letter-spacing: .22em;

      text-transform: uppercase;

      color: var(--gold);

  }

  .event-audience {

      display: flex;

      align-items: flex-start;

      gap: 18px;

  }

  .audience-label {

      font-family: var(--data);

      font-size: .72rem;

      letter-spacing: .18em;

      text-transform: uppercase;

      color: var(--muted);

      flex-shrink: 0;

      margin-top: 4px;

  }

  .audience-list {

      display: flex;

      flex-wrap: wrap;

      gap: 8px;
  }

  .audience-list span {

      position: relative;

      color: #d3dde7;

      font-size: .9rem;

      padding-right: 12px;

  }

  .audience-list span:not(:last-child)::after {

      content: "•";

      position: absolute;

      right: 2px;

      color: var(--gold);

  }

  @media(max-width:768px) {

      .event-meta {

          padding: 22px;

      }

      .event-meta-top {

          gap: 14px;

      }

      .event-audience {

          flex-direction: column;

          gap: 10px;

      }

      .event-tagline {

          font-size: .95rem;

          letter-spacing: .12em;

      }

  }

  /*=====================================
 WHITE AGENDA SECTION
======================================*/

  .agenda-section {
      background: #ffffff;
      color: #152235;
      padding: 120px 0;
  }

  .agenda-section .eyebrow {
      color: #b88a16;
  }

  .agenda-section .eyebrow::after {
      background: linear-gradient(90deg, #d7b04d, transparent);
  }

  .agenda-section h2 {
      color: #0d2138;
      font-weight: 500;
  }

  .agenda-section .lede {
      color: #5d6b79;
      max-width: 760px;
      font-size: 1.08rem;
      line-height: 1.8;
  }


  /*========================
 Meta Card
=========================*/

  .agenda-section .event-meta {

      margin: 70px 0 55px;

      border: 1px solid #dfe5eb;

      background: #fff;

      padding: 35px 40px;

  }

  .agenda-section .event-meta-top {

      display: flex;
      flex-wrap: wrap;
      gap: 30px;

      border-bottom: 1px solid #eceff3;

      padding-bottom: 20px;

      margin-bottom: 22px;

  }

  .agenda-section .meta-item {

      color: #687483;

      font-size: .95rem;

  }

  .agenda-section .meta-item strong {

      color: #0d2138;

  }

  .agenda-section .event-tagline {

      font-family: var(--data);

      letter-spacing: .32em;

      text-transform: uppercase;

      color: #c59b2f;

      font-size: .9rem;

      margin-bottom: 20px;

  }

  .agenda-section .event-audience {

      display: flex;

      flex-wrap: wrap;

      gap: 18px;

      align-items: center;

  }

  .agenda-section .audience-label {

      text-transform: uppercase;

      letter-spacing: .25em;

      color: #8a95a3;

      font-size: .72rem;

      font-family: var(--data);

  }

  .agenda-section .audience-list {

      display: flex;

      flex-wrap: wrap;

      gap: 18px;

  }

  .agenda-section .audience-list span {

      color: #52606d;

      position: relative;

  }

  .agenda-section .audience-list span:not(:last-child)::after {

      content: "•";

      color: #c59b2f;

      margin-left: 18px;

  }



  /*=========================
Agenda Cards
==========================*/

  .agenda-section .events-list {

      display: flex;

      flex-direction: column;

      gap: 18px;

  }

  .agenda-section .event-card {

      display: grid;

      grid-template-columns: 120px 1fr auto;

      align-items: center;

      gap: 28px;

      background: #fff;

      border: 1px solid #dde4eb;

      transition: .35s;

      padding: 28px 30px;

  }

  .agenda-section .event-card:hover {

      border-color: #c8a241;

      box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

      transform: translateY(-3px);

  }



  /* Left Time */

  .agenda-section .event-date {

      text-align: center;

      border-right: 1px solid #e6ebef;

      padding-right: 22px;

  }

  .agenda-section .event-date h3 {

      color: #12263c;

      font-size: 2rem;

      margin-bottom: 4px;

  }

  .agenda-section .event-date small {

      color: #8b97a5;

      font-family: var(--data);

  }



  /* Center */

  .agenda-section .event-content h3 {

      color: #13253b;

      font-size: 1.35rem;

      margin-bottom: 8px;

  }

  .agenda-section .event-content p {

      color: #677381;

      margin: 0;

      line-height: 1.7;

  }

  .agenda-section .event-content strong {

      color: #12263c;

  }



  /* Right Label */

  .agenda-section .event-status {

      min-width: 115px;

      text-align: center;

      border: 1px solid #d8b04d;

      color: #b78b17;

      padding: 11px 18px;

      font-size: .72rem;

      font-family: var(--data);

      text-transform: uppercase;

      letter-spacing: .18em;

  }



  /* Highlight Sessions */

  .agenda-section .event-card.active {

      border: 2px solid #d6ad45;

      background: #fffdf8;

  }

  .agenda-section .event-card.active:hover {

      box-shadow: 0 18px 45px rgba(212, 175, 55, .18);

  }


  /* Alternate Research / Panel */

  .agenda-section .event-status.planning {

      background: #faf7ef;

  }



  /*=========================
Responsive
==========================*/

  @media(max-width:900px) {

      .agenda-section .event-card {

          grid-template-columns: 90px 1fr;

      }

      .agenda-section .event-status {

          grid-column: 1/-1;

          justify-self: flex-start;

          margin-left: 110px;

          margin-top: 15px;

      }

  }

  @media(max-width:650px) {

      .agenda-section .event-meta {

          padding: 24px;

      }

      .agenda-section .event-meta-top {

          flex-direction: column;

          gap: 12px;

      }

      .agenda-section .event-card {

          grid-template-columns: 1fr;

          gap: 18px;

      }

      .agenda-section .event-date {

          border-right: none;

          border-bottom: 1px solid #ececec;

          padding: 0 0 15px;

          text-align: left;

      }

      .agenda-section .event-status {

          margin: 0;

      }

  }

  /* Hero Event Info */
  .hero-event-info {
      margin: -8px 0 42px;
  }

  .hero-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;

      font-size: 20px;
      font-weight: 500;
      color: #d7e2ee;
      line-height: 1.6;
  }

  .meta-icon {
      width: 28px;
      height: 28px;
      color: var(--gold);
      flex-shrink: 0;
  }

  .hero-meta span {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .hero-meta .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
  }

  /* ===========================
   Large Tablets (1024px)
=========================== */
  @media (max-width: 1024px) {
      .hero-event-info {
          margin: -6px 0 36px;
      }

      .hero-meta {
          font-size: 18px;
          gap: 14px;
      }

      .meta-icon {
          width: 24px;
          height: 24px;
      }
  }

  /* ===========================
   Tablets (768px)
=========================== */
  @media (max-width: 768px) {
      .hero-event-info {
          margin: 0 0 30px;
      }

      .hero-meta {
          font-size: 16px;
          gap: 12px;
          line-height: 1.5;
      }

      .meta-icon {
          width: 22px;
          height: 22px;
      }

      .hero-meta .dot {
          width: 5px;
          height: 5px;
      }
  }

  /* ===========================
   Mobile (576px)
=========================== */
  @media (max-width: 576px) {
      .hero-meta {
          /* flex-direction: column; */
          align-items: flex-start;
          gap: 12px;
          /* font-size: 15px; */
          flex-wrap: nowrap;
      }
  }

  /* ===========================
   Small Mobile (400px)
=========================== */
  @media (max-width: 400px) {
      .hero-meta {
          font-size: 14px;
          gap: 10px;
      }

      .meta-icon {
          width: 18px;
          height: 18px;
      }

      .hero-event-info {
          margin-bottom: 20px;
      }
  }