:root {
      --panel: rgba(255,255,255,.18);
      --panel-strong: rgba(255,255,255,.90);
      --text-dark: #16315e;
      --shadow: 0 20px 45px rgba(0,0,0,.22);
      --line: rgba(22,49,94,.18);
      --blue-top: #2257c6;
      --blue-mid: #8fb6ff;
      --blue-soft: #eef5ff;
      --footer: #AAC2F4;
      --accent-red: #cf1010;
      --accent-yellow: #ffd13f;
    }

    * { box-sizing: border-box; }

    html { min-height: 100%; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Segoe UI", Arial, Helvetica, sans-serif;
      color: #fff;
      background:
        radial-gradient(circle at top center, rgba(255,255,255,.38), transparent 34rem),
        linear-gradient(180deg, var(--blue-top) 0%, var(--blue-mid) 24%, var(--blue-soft) 52%, #b8d0ff 76%, #7fa6ef 100%);
    }

    .page {
      width: min(1040px, calc(100% - 24px));
      min-height: calc(100vh - 116px);
      margin: 0 auto;
      padding: clamp(18px, 4vw, 34px) 0 32px;
      display: grid;
      place-items: center;
    }

    .coming-card {
      width: 100%;
      overflow: hidden;
      border-radius: 34px;
      background: var(--panel-strong);
      color: var(--text-dark);
      border: 1px solid rgba(255,255,255,.72);
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
    }

    .card-header {
      position: relative;
      padding: clamp(22px, 4vw, 34px) clamp(20px, 5vw, 46px) clamp(18px, 3vw, 28px);
      background: linear-gradient(180deg, #173f8a, #0d2f70);
      color: #fff;
      text-align: center;
    }

    .card-header::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 7px;
      background: linear-gradient(90deg, var(--accent-red), var(--accent-yellow));
    }

    .eyebrow {
      margin: 0 0 10px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: clamp(.8rem, 1.4vw, .98rem);
      color: rgba(255,255,255,.82);
    }

    .event-date {
      margin: 0;
      font-size: clamp(1.9rem, 5vw, 3.4rem);
      line-height: .95;
      letter-spacing: -.055em;
      text-shadow: 0 4px 12px rgba(0,0,0,.25);
    }

    .card-body {
      padding: clamp(28px, 6vw, 58px) clamp(20px, 6vw, 64px) clamp(24px, 5vw, 46px);
      text-align: center;
    }

    .program-title {
      width: fit-content;
      max-width: 100%;
      margin: 0 auto 24px;
      padding: 12px 18px;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(180deg, #2b395b, #13213f);
      border: 2px solid rgba(255,255,255,.38);
      box-shadow: 0 9px 18px rgba(0,0,0,.15);
      font-size: clamp(1rem, 2vw, 1.25rem);
      font-weight: 850;
      line-height: 1.25;
    }

    .message {
      max-width: 760px;
      margin: 0 auto;
      font-size: clamp(1.25rem, 3.4vw, 2.35rem);
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: -.025em;
    }

    .subline {
      max-width: 720px;
      margin: 18px auto 0;
      color: rgba(22,49,94,.74);
      font-size: clamp(1rem, 2vw, 1.22rem);
      line-height: 1.55;
      font-weight: 650;
    }

    .event-list {
      max-width: 760px;
      margin: 0 auto;
      display: grid;
      gap: 20px;
      text-align: left;
    }

    .event-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 9px 20px rgba(22,49,94,.10);
    }

    .event-row {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
    }

    .event-row + .event-row { border-top: 1px solid var(--line); }

    .event-label {
      padding: 15px 18px;
      color: #fff;
      background: #2b395b;
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .event-value {
      margin: 0;
      padding: 15px 20px;
      color: var(--text-dark);
      font-size: 1.05rem;
      line-height: 1.5;
      font-weight: 700;
    }

    .event-value a { color: #1146ab; }

    .actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: clamp(26px, 5vw, 42px);
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 13px 22px;
      border-radius: 14px;
      text-decoration: none;
      color: #fff;
      background: linear-gradient(180deg, #1f6ef3, #1146ab);
      border: 2px solid rgba(255,255,255,.55);
      box-shadow: 0 12px 24px rgba(17,70,171,.32);
      font-weight: 850;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .button.secondary {
      color: var(--text-dark);
      background: rgba(255,255,255,.62);
      border-color: rgba(22,49,94,.24);
      box-shadow: 0 10px 20px rgba(22,49,94,.12);
    }

    .button.route {
      color: #fff;
      background: linear-gradient(180deg, #168447, #0b6534);
      box-shadow: 0 12px 24px rgba(11,101,52,.28);
    }

    .button:hover,
    .button:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 16px 28px rgba(17,70,171,.42);
      outline: none;
    }

    .button.secondary:hover,
    .button.secondary:focus-visible {
      background: #fff;
      box-shadow: 0 14px 24px rgba(22,49,94,.18);
    }

    .button.route:hover,
    .button.route:focus-visible {
      box-shadow: 0 16px 28px rgba(11,101,52,.38);
    }

    .site-footer {
      width: min(1040px, calc(100% - 24px));
      margin: 0 auto 24px;
      padding: 18px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      color: var(--text-dark);
      background: var(--footer);
      border: 1px solid rgba(255,255,255,.42);
      border-radius: 24px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
    }

    .site-footer__mark {
      display: inline-grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border-radius: 16px;
      color: #fff;
      background: linear-gradient(180deg, #173f8a, #0d2f70);
      border: 2px solid rgba(255,255,255,.5);
      font-weight: 950;
      box-shadow: 0 10px 18px rgba(0,0,0,.15);
    }

    .site-footer__title {
      font-size: clamp(1.05rem, 1.7vw, 1.35rem);
      font-weight: 700;
      white-space: nowrap;
    }

    .site-footer__link {
      color: var(--text-dark);
      font-size: 1rem;
      font-weight: 800;
      text-decoration: none;
      padding: 8px 12px;
      border-radius: 999px;
      transition: .18s ease;
      white-space: nowrap;
    }

    .site-footer__link:visited { color: var(--text-dark); }

    .site-footer__link:hover,
    .site-footer__link:focus-visible {
      color: #fff;
      background: #16315e;
      transform: translateY(-1px);
      outline: none;
    }

    @media (max-width: 680px) {
      .page {
        width: min(100% - 14px, 680px);
        min-height: calc(100vh - 150px);
        padding-top: 10px;
      }

      .coming-card { border-radius: 24px; }

      .card-header,
      .card-body { padding-left: 18px; padding-right: 18px; }

      .program-title { border-radius: 18px; }

      .button { width: 100%; }

      .event-row { grid-template-columns: 1fr; }

      .event-label { padding: 10px 16px; }

      .event-value { padding: 14px 16px; }

      .site-footer {
        width: min(100% - 14px, 1000px);
        gap: 12px;
        padding: 16px;
        border-radius: 20px;
      }

      .site-footer__title {
        width: 100%;
        text-align: center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
      }
    }