:root {
      --ink: #171b20;
      --muted: #5f6670;
      --gold: #f3bf16;
      --gold-deep: #dca800;
      --gold-soft: #fff8dc;
      --coral: #ff4d50;
      --coral-dark: #ec3f42;
      --line: #e7e8ea;
      --soft: #f7f8fa;
      --shadow: 0 18px 50px rgba(21, 27, 32, .10);
      --radius: 22px;
      --max: 1240px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 90% 6%, rgba(243,191,22,.12), transparent 27rem),
        radial-gradient(circle at 8% 86%, rgba(255,77,80,.07), transparent 24rem),
        #fff;
      line-height: 1.55;
    }

    a {
      color: inherit;
    }

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

    .topline {
      height: 5px;
      background: linear-gradient(90deg, var(--gold) 0 68%, var(--ink) 68% 100%);
    }

    .site-header {
      max-width: var(--max);
      margin: 0 auto;
      padding: 24px 24px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand img {
      width: 166px;
      max-width: 48vw;
      display: block;
    }

    .page {
      max-width: var(--max);
      margin: 0 auto;
      padding: 28px 24px 68px;
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr);
      gap: 52px;
      align-items: start;
    }

    .hero-media {
      width: 100%;
      margin: 0 0 22px;
      border-radius: 18px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 7px 12px;
      border: 1px solid rgba(243,191,22,.55);
      background: var(--gold-soft);
      border-radius: 999px;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: .02em;
      margin-bottom: 18px;
    }

    .eyebrow-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 0 4px rgba(243,191,22,.18);
    }

    h1 {
      margin: 0;
      font-size: clamp(2.25rem, 5vw, 4.55rem);
      line-height: .98;
      letter-spacing: -.045em;
      max-width: 780px;
    }
	
    h2 {
      margin: 0 0 10px;
      font-size: clamp(1.35rem, 2.8vw, 2rem);
      line-height: 1.1;
      letter-spacing: -.035em;
      max-width: 700px;
    }

    .lead {
      margin: 26px 0 0;
      font-size: clamp(1.08rem, 1.9vw, 1.34rem);
      color: #313740;
      max-width: 760px;
    }

    .points {
      margin: 34px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 15px;
    }

    .points li {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 13px;
      align-items: start;
      font-size: 1.22rem;
    }

    .check {
      width: 24px;
      height: 24px;
      margin-top: 1px;
      border-radius: 50%;
      background: var(--gold-soft);
      border: 1px solid rgba(243,191,22,.6);
      display: inline-grid;
      place-items: center;
      font-weight: 900;
      color: #8f6b00;
      font-size: 14px;
    }

    .form-card {
      position: sticky;
      top: 22px;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(8px);
      border: 1px solid #ece9dc;
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .form-head {
      padding: 28px 28px 23px;
      background:
        linear-gradient(135deg, rgba(243,191,22,.16), rgba(255,255,255,.92) 70%);
      border-bottom: 1px solid #eee8cf;
    }

    .form-head h2 {
      margin: 0 0 16px;
      font-size: 1.45rem;
      line-height: 1.15;
    }

    .date-box {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 15px 16px;
      background: #fff;
      border: 1px solid #eadb98;
      border-radius: 15px;
      box-shadow: 0 8px 22px rgba(37, 30, 0, .05);
    }

    .calendar {
      width: 43px;
      height: 43px;
      flex: 0 0 43px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: var(--gold);
    }

    .calendar svg {
      width: 22px;
      height: 22px;
    }

    .date-main {
      font-weight: 900;
      font-size: 1.04rem;
      line-height: 1.25;
      white-space: pre-line;
    }

    .date-meta {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
      font-size: .93rem;
      color: #4f5660;
    }

    .date-meta strong {
      color: var(--ink);
    }

    .form-body {
      padding: 26px 28px 30px;
    }

    .form-body h3 {
      margin: 0 0 5px;
      font-size: 1.2rem;
    }

    .form-intro {
      margin: 0 0 20px;
      color: var(--muted);
      font-size: .96rem;
    }

    .field {
      margin: 0 0 15px;
    }

    label {
      display: block;
      margin-bottom: 7px;
      font-weight: 800;
      font-size: .93rem;
    }

    input {
      width: 100%;
      min-height: 52px;
      border: 1px solid #d9dde2;
      border-radius: 13px;
      padding: 0 15px;
      font: inherit;
      color: var(--ink);
      outline: none;
      transition: border-color .18s ease, box-shadow .18s ease;
      background: #fff;
    }

    input:focus {
      border-color: var(--gold-deep);
      box-shadow: 0 0 0 4px rgba(243,191,22,.17);
    }

    .cta {
      position: relative;
      width: 100%;
      border: 0;
      min-height: 64px;
      border-radius: 16px;
      padding: 0 20px;
      margin-top: 8px;
      cursor: pointer;
      background: linear-gradient(135deg, #ff5b5e, var(--coral) 45%, var(--coral-dark));
      color: #fff;
      font: inherit;
      font-size: 1.22rem;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
      overflow: hidden;
      box-shadow:
        0 12px 28px rgba(255, 77, 80, .38),
        0 0 0 0 rgba(255, 77, 80, .45);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      animation: ctaPulse 2.2s ease-in-out infinite;
    }

    .cta::after {
      content: "";
      position: absolute;
      top: 0;
      left: -80%;
      width: 55%;
      height: 100%;
      background: linear-gradient(110deg, transparent, rgba(255,255,255,.45), transparent);
      transform: skewX(-22deg);
      animation: ctaShine 3.2s ease-in-out infinite;
      pointer-events: none;
    }

    .cta:hover {
      transform: translateY(-2px) scale(1.025);
      box-shadow:
        0 18px 38px rgba(255, 77, 80, .45),
        0 0 0 6px rgba(255, 77, 80, .18);
      background: linear-gradient(135deg, #ff676a, var(--coral-dark));
      animation: none;
    }

    .cta:active {
      transform: translateY(0) scale(.98);
    }

    @keyframes ctaPulse {
      0%, 100% {
        box-shadow:
          0 12px 28px rgba(255, 77, 80, .38),
          0 0 0 0 rgba(255, 77, 80, .45);
      }
      50% {
        box-shadow:
          0 12px 28px rgba(255, 77, 80, .38),
          0 0 0 12px rgba(255, 77, 80, 0);
      }
    }

    @keyframes ctaShine {
      0% { left: -80%; }
      55%, 100% { left: 130%; }
    }

    .note {
      margin: 12px 0 0;
      text-align: center;
      color: var(--muted);
      font-size: .88rem;
      font-style: italic;
    }

    .status {
      display: none;
      margin-top: 14px;
      padding: 12px 13px;
      border-radius: 12px;
      font-size: .9rem;
      line-height: 1.4;
    }

    .status.show {
      display: block;
    }

    .status.error {
      background: #fff0f0;
      border: 1px solid #ffc8c8;
      color: #9f2727;
    }

    .status.ok {
      background: #effbf3;
      border: 1px solid #bfe9cc;
      color: #1f7541;
    }

    .divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, #dedfe2 15%, #dedfe2 85%, transparent);
      margin: 60px 0 44px;
    }

    .closing {
      text-align: center;
      max-width: 850px;
      margin: 0 auto;
    }

    .closing h2 {
      margin: 0;
      font-size: clamp(1.55rem, 3vw, 2.25rem);
      letter-spacing: -.025em;
    }

    .steps {
      margin: 16px auto 0;
      font-size: clamp(1.04rem, 2vw, 1.22rem);
      font-weight: 900;
      letter-spacing: .01em;
    }

    .steps span {
      color: var(--gold-deep);
      padding: 0 .28em;
    }

    .legal {
      max-width: 940px;
      margin: 44px auto 0;
      padding: 20px 22px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: var(--soft);
      color: #545b64;
      font-size: .9rem;
    }

    .legal strong {
      color: var(--ink);
    }

    footer {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 24px 32px;
    }

    .footer-line {
      height: 1px;
      background: var(--line);
      margin-bottom: 20px;
    }

    .footer-row {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
      color: #747a82;
      font-size: .82rem;
    }

    .footer-logo {
      width: 124px;
      opacity: .86;
    }

    @media (max-width: 900px) {
      .page {
        padding-top: 18px;
      }

      .hero {
        grid-template-columns: 1fr;
        gap: 36px;
      }

      .form-card {
        position: static;
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
      }

      h1 {
        font-size: clamp(2.2rem, 10vw, 3.8rem);
      }
    }

    @media (max-width: 600px) {
      .site-header {
        padding: 20px 18px 8px;
      }

      .page {
        padding: 18px 18px 50px;
      }

      .hero {
        gap: 30px;
      }

      .eyebrow {
        font-size: 12px;
      }

      h1 {
        line-height: 1.02;
      }

      .lead {
        margin-top: 20px;
      }

      .points {
        margin-top: 26px;
        gap: 14px;
      }

      .form-head,
      .form-body {
        padding-left: 20px;
        padding-right: 20px;
      }

      .date-box {
        align-items: flex-start;
      }

      .date-main {
        font-size: .99rem;
      }

      .divider {
        margin: 46px 0 34px;
      }

      .steps {
        line-height: 1.9;
      }

      .footer-row {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .cta,
      .cta::after {
        animation: none !important;
      }
    }