:root {
    --navy: #0d1f4c;
    --green: #2bb24c;
    --green-deep: #1f9e3f;
    --green-soft: #59c66d;
    --bg: #ffffff;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }

  .stage {
    min-height: 100vh;
    place-items: center;
    padding: 48px 24px;
  }

  /* The whole celebratory unit */
  .celebrate {
    position: relative;
    width: min(960px, 100%);
    text-align: center;
    padding: 40px 60px 24px;
  }

  /* Tablet/mobile: tighten side padding so headline + rays have room */
  @media (max-width: 1024px) {
    .celebrate { padding: 32px 32px 20px; }
  }
  @media (max-width: 640px) {
    .celebrate { padding: 24px 16px 16px; }
    .burst.left  { left: calc(50% - 38px); top: calc(22% - 38px); }
    .burst.right { right: calc(50% - 38px); top: calc(22% - 38px); }
  }

  /* Phones (\u2264480px): pull rays in tight to the smaller "Match", shrink fan further */
  @media (max-width: 480px) {
    .burst.left  { left: calc(50% - 52px); top: calc(22% - 32px); }
    .burst.right { right: calc(50% - 52px); top: calc(22% - 32px); }
    .burst.left  .ray:nth-child(1) { --dx:   0px; --dy:   0px; height: 13px; }
    .burst.left  .ray:nth-child(2) { --dx:  -5px; --dy:   6px; height: 10px; }
    .burst.left  .ray:nth-child(3) { --dx: -10px; --dy:  12px; height:  8px; }
    .burst.right .ray:nth-child(1) { --dx:   0px; --dy:   0px; height: 13px; }
    .burst.right .ray:nth-child(2) { --dx:   5px; --dy:   6px; height: 10px; }
    .burst.right .ray:nth-child(3) { --dx:  10px; --dy:  12px; height:  8px; }
  }

  /* Small phones (\u2264375px): tightest fit */
  @media (max-width: 375px) {
    .burst.left  { left: calc(50% - 46px); top: calc(22% - 26px); }
    .burst.right { right: calc(50% - 46px); top: calc(22% - 26px); }
    .burst.left  .ray:nth-child(1) { height: 11px; }
    .burst.left  .ray:nth-child(2) { --dx:  -4px; --dy:   5px; height:  9px; }
    .burst.left  .ray:nth-child(3) { --dx:  -8px; --dy:  10px; height:  7px; }
    .burst.right .ray:nth-child(1) { height: 11px; }
    .burst.right .ray:nth-child(2) { --dx:   4px; --dy:   5px; height:  9px; }
    .burst.right .ray:nth-child(3) { --dx:   8px; --dy:  10px; height:  7px; }
  }

  /* ---------- Headline ---------- */
  .headline {
    position: relative;
    display: inline-block;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin: 0;
  }

  .headline .line1 {
    display: block;
    color: var(--navy);
    font-size: clamp(20px, 4.5vw, 36px);
  }

  .headline .line2 {
    display: block;
    color: var(--green);
    font-size: clamp(26px, 5.6vw, 44px);
    margin-top: -0.05em;
  }

  /* Bang */
  .headline .bang { color: var(--green); }

  /* ---------- Subheadline ---------- */
  .sub {
    margin: 18px 0 0;
    font-weight: 800;
    line-height: 1.25;
    font-size: clamp(15px, 2.2vw, 24px);
  }
  .sub .top { color: var(--navy); display: block; }
  .sub .bot { color: #d41c1c; display: block; }

  /* ---------- Intro paragraph ---------- */
  .intro {
    margin: 20px auto 0;
    max-width: 540px;
    font-size: clamp(12px, 1.25vw, 14px);
    line-height: 1.55;
    color: #525266;
    font-weight: 500;
    text-align: center;
    text-wrap: balance;
  }
  .intro strong { color: var(--navy); font-weight: 800; }

  /* ---------- Info box ---------- */
  .info-box {
    margin: 36px auto 0;
    max-width: 540px;
    background: #efe9fb;
    border-radius: 10px;
    padding: 18px 26px;
    font-size: clamp(13px, 1.3vw, 15px);
    line-height: 1.55;
    color: #1a1a2e;
    font-weight: 500;
    text-align: center;
  }
  .info-box strong { font-weight: 800; color: var(--navy); }

  /* ---------- CTA button ---------- */
  .cta {
    margin: 26px auto 0;
    display: inline-block;
    background: var(--cta-background-color, #d41c1c);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 16px 44px;
    font-size: clamp(13px, 1.3vw, 15px);
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 0 1px 8px -1px var(--cta-background-color, #d41c1c);
    font-family: inherit;
    opacity: 0;
    transition: .3s all;
    animation: 
    rise 600ms ease-out 0.6s forwards, 
    pulseborder 1.5s infinite 1.2s;
  
    -webkit-animation: 
    rise 600ms ease-out 0.6s forwards, 
    pulseborder 1.5s infinite 1.2s;
  }
  .cta:hover {  color: #fff; }

  @keyframes pulseborder {
    0% {
        transform: scale(.9)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 30px rgba(0,0,0,0)
    }

    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 rgb(255 255 255 / 0%)
    }
}

@-webkit-keyframes pulseborder {
    0% {
        transform: scale(.9)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 30px rgba(0,0,0,0)
    }

    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 rgb(255 255 255 / 0%)
    }
}

  /* ---------- Hint ---------- */
  .hint {
    margin: 22px auto 0;
    max-width: 560px;
    font-size: clamp(11px, 1.1vw, 13px);
    line-height: 1.5;
    color: #2a2a3a;
    font-weight: 500;
  }

  /* ---------- Check badge ---------- */
  .badge-wrap {
    position: relative;
    display: inline-flex;
    justify-content: center;
    margin-bottom: 8px;
    width: 100%;
  }

  .badge {
    width: clamp(32px, 4vw, 48px);
    height: clamp(32px, 4vw, 48px);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, var(--green-soft), var(--green) 60%, var(--green-deep));
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(43,178,76,0.28);
    position: relative;
    z-index: 2;
    animation: pop 700ms cubic-bezier(.2,1.4,.4,1) both;
  }

  .badge svg {
    width: 56%;
    height: 56%;
    stroke: #fff;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: draw 500ms ease-out 350ms forwards;
  }

  /* ---------- Sparkles flanking the badge ---------- */
  .spark {
    position: absolute;
    color: var(--green);
    width: 22px;
    height: 22px;
    z-index: 1;
    animation: twinkle 1.8s ease-in-out infinite;
  }
  .spark.s1 { left: calc(50% - 46px); top: 8px;  width: 10px; height: 10px; animation-delay: .1s; }
  .spark.s2 { left: calc(50% + 36px); top: 4px;  width: 8px;  height: 8px;  animation-delay: .5s; }
  .spark.s3 { left: calc(50% + 50px); top: 22px; width: 12px; height: 12px; animation-delay: .9s; }

  /* ---------- Burst rays (left + right of headline) ---------- */
  /* Each .burst is an anchor point; rays radiate outward from origin. */
  .burst {
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  /* Anchor rays to the headline center so they hug "Match" at any size.
     Half-width of "Match" (~52px at current scale) + ~14px gap. */
  .burst.left  { left: calc(50% - 60px); top: calc(22% - 50px); transform: translate(-100%, -50%); }
  .burst.right { right: calc(50% - 60px); top: calc(22% - 50px); transform: translate(100%, -50%); }

  .ray {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(2px, 0.4vw, 3px);
    height: clamp(14px, 2.5vw, 20px);
    background: var(--green);
    border-radius: 2px;
    transform-origin: 50% 100%;
    opacity: 0;
    /* Each ray sets --rot, --dx, --dy; --dx/--dy place the inner tip on a 45° diagonal
       BEFORE rotation; --rot then orients the ray around that point. */
    transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scaleY(0);
    animation: rayBurst 700ms cubic-bezier(.22, 1, .36, 1) both;
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

  /* LEFT side — desktop fixed values; mobile override below */
  .burst.left  .ray:nth-child(1) { --rot:  -45deg; --dx:    0px; --dy:    0px;  height: clamp(18px, 3vw, 24px);   animation-delay: .00s; }
  .burst.left  .ray:nth-child(2) { --rot:  -82deg; --dx:   -8px; --dy:  11.5px; height: clamp(13px, 2.2vw, 17px); animation-delay: .15s; }
  .burst.left  .ray:nth-child(3) { --rot:  -90deg; --dx:  -16px; --dy:   23px;  height: clamp(10px, 1.7vw, 13px); animation-delay: .30s; }

  /* RIGHT side — mirrored */
  .burst.right .ray:nth-child(1) { --rot:   45deg; --dx:    0px; --dy:    0px;  height: clamp(18px, 3vw, 24px);   animation-delay: .00s; }
  .burst.right .ray:nth-child(2) { --rot:   82deg; --dx:    8px; --dy:  11.5px; height: clamp(13px, 2.2vw, 17px); animation-delay: .15s; }
  .burst.right .ray:nth-child(3) { --rot:   90deg; --dx:   16px; --dy:   23px;  height: clamp(10px, 1.7vw, 13px); animation-delay: .30s; }

  /* Mobile (≤768px): tighter, smaller fan tuned for small screens */
  @media (max-width: 768px) {
    .burst.left  .ray:nth-child(1) { --dx:   0px; --dy:   0px; height: 16px; }
    .burst.left  .ray:nth-child(2) { --dx:  -6px; --dy:   8px; height: 12px; }
    .burst.left  .ray:nth-child(3) { --dx: -12px; --dy:  16px; height:  9px; }
    .burst.right .ray:nth-child(1) { --dx:   0px; --dy:   0px; height: 16px; }
    .burst.right .ray:nth-child(2) { --dx:   6px; --dy:   8px; height: 12px; }
    .burst.right .ray:nth-child(3) { --dx:  12px; --dy:  16px; height:  9px; }
    .ray { width: 2px; }
  }

  /* ---------- Side-cannon confetti (one-shot) ---------- */
  .confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }
  .confetti i {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 16px;
    border-radius: 2px;
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
    animation: shoot 1800ms cubic-bezier(.15,.65,.4,1) forwards;
    will-change: transform, opacity;
  }
  .confetti i.left  { left: 30%; }
  .confetti i.right { right: 30%; }

  /* ---------- Animations ---------- */
  @keyframes pop {
    0%   { transform: scale(0);   opacity: 0; }
    70%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
  }
  @keyframes draw {
    to { stroke-dashoffset: 0; }
  }
  @keyframes twinkle {
    0%, 100% { transform: scale(0.7); opacity: 0.5; }
    50%      { transform: scale(1.1); opacity: 1; }
  }
  @keyframes rayBurst {
    0%   { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scaleY(0); }
    40%  { opacity: 1; }
    100% { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scaleY(1); }
  }
  @keyframes rayPulse {
    0%   { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(calc(var(--off, -22px) + 6px)) scale(0.6); }
    40%  { opacity: 1; transform: rotate(var(--rot, 0deg)) translateY(var(--off, -22px))            scale(1); }
    70%  { opacity: 1; transform: rotate(var(--rot, 0deg)) translateY(calc(var(--off, -22px) - 4px)) scale(1.05); }
    100% { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(calc(var(--off, -22px) - 10px)) scale(1.1); }
  }
  @keyframes rayIn {
    0%   { opacity: 0; }
    60%  { opacity: 1; }
    100% { opacity: 1; }
  }
  @keyframes shoot {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    60%  { opacity: 1; }
    100% { transform: translate3d(var(--tx, 200px), var(--ty, -60px), 0) rotate(var(--rot, 540deg)); opacity: 0; }
  }

  /* Reveal */
  .reveal { opacity: 0; transform: translateY(8px); animation: rise 600ms ease-out forwards; }
  .reveal.d1 { animation-delay: .15s; }
  .reveal.d2 { animation-delay: .35s; }
  .reveal.d3 { animation-delay: .6s;  }
  @keyframes rise {
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal, .badge, .badge svg, .burst .ray, .confetti i { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  }