:root{
    --navy:#16233f;
    --ink:#0f1830;
    --pink:#e6266b;
    --pink-deep:#c01356;
    --pink-soft:#ffe1ec;
    --cream:#fff7f2;
    --paper:#ffffff;
    --line:#f0d9e2;
    --muted:#6b7385;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:"Nunito",system-ui,sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 20px}
  a{color:inherit}

  /* ---------- decorative paw ---------- */
  .paw{width:26px;height:26px;display:inline-block;vertical-align:middle;opacity:.9}

  /* ---------- hero ---------- */
  header.hero{
    position:relative;
    padding:54px 0 40px;
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:44px;
    align-items:center;
  }
  .photo-frame{
    position:relative;
    border-radius:26px;
    padding:10px;
    background:linear-gradient(150deg,var(--pink),#ff7ab0);
    box-shadow:0 22px 48px -22px rgba(230,38,107,.55);
  }
  .photo-frame img{
    display:block;width:100%;height:auto;
    border-radius:18px;
    object-fit:cover;
  }
  .badge{
    position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
    background:var(--navy);color:#fff;
    font-weight:800;font-size:.82rem;letter-spacing:.04em;
    padding:9px 18px;border-radius:999px;white-space:nowrap;
    box-shadow:0 10px 24px -10px rgba(22,35,63,.7);
  }
  .badge span{color:#ff9ac2}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-weight:800;text-transform:uppercase;letter-spacing:.14em;
    font-size:.78rem;color:var(--pink-deep);
    background:var(--pink-soft);
    padding:6px 14px;border-radius:999px;
  }
  h1{
    font-family:"Anton",sans-serif;
    font-weight:400;
    color:var(--navy);
    letter-spacing:.01em;
    line-height:.94;
    margin:16px 0 4px;
    font-size:clamp(3rem,9vw,5.4rem);
    text-transform:uppercase;
  }
  h1 em{font-style:normal;color:var(--pink)}
  .lead{font-size:1.12rem;max-width:44ch;color:#33405c;margin:6px 0 14px}
  .lead b{color:var(--navy)}
  .script{
    font-family:"Caveat",cursive;
    font-size:1.55rem;color:var(--pink-deep);
    line-height:1.15;margin:2px 0 22px;
  }
  .chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
  .chip{
    background:var(--paper);border:1.5px solid var(--line);
    border-radius:14px;padding:10px 14px;font-size:.92rem;
    display:flex;flex-direction:column;line-height:1.2;
  }
  .chip small{color:var(--muted);font-weight:700;text-transform:uppercase;font-size:.66rem;letter-spacing:.08em}
  .chip strong{color:var(--navy);font-size:1.02rem}
  .cta-row{display:flex;flex-wrap:wrap;gap:12px}
  .btn{
    border:none;cursor:pointer;font-family:inherit;font-weight:800;
    font-size:1rem;padding:14px 24px;border-radius:14px;
    text-decoration:none;display:inline-flex;align-items:center;gap:9px;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary{background:var(--pink);color:#fff;box-shadow:0 14px 26px -12px rgba(230,38,107,.7)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 30px -12px rgba(230,38,107,.75)}
  .btn-ghost{background:var(--navy);color:#fff}
  .btn-ghost:hover{transform:translateY(-2px)}

  /* ---------- progress ---------- */
  .progress-sec{padding:8px 0 10px}
  .progress-card{
    background:var(--navy);color:#fff;border-radius:24px;
    padding:30px 34px;
    display:grid;grid-template-columns:1fr auto;gap:22px 40px;align-items:center;
  }
  .goal-amount{font-family:"Anton",sans-serif;font-size:2.9rem;line-height:1;color:#fff}
  .goal-amount span{color:#ff9ac2;font-size:1.4rem}
  .goal-label{color:#b9c2d8;font-weight:700;font-size:.9rem;margin-top:4px}
  .bar{height:16px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:16px}
  .bar-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#ff5fa0,var(--pink));transition:width 1.4s cubic-bezier(.22,1,.36,1)}
  .stat-tiles{display:flex;gap:14px}
  .tile{background:rgba(255,255,255,.08);border-radius:16px;padding:14px 18px;text-align:center;min-width:92px}
  .tile b{display:block;font-family:"Anton",sans-serif;font-size:1.9rem;line-height:1}
  .tile small{color:#b9c2d8;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
  .tile.free b{color:#8affc0}

  /* ---------- section heading ---------- */
  section{padding:44px 0}
  .sec-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:8px}
  h2{font-family:"Anton",sans-serif;font-weight:400;color:var(--navy);text-transform:uppercase;letter-spacing:.02em;font-size:2rem;margin:0}
  .sec-sub{color:var(--muted);margin:2px 0 0;font-weight:600}

  /* ---------- grid controls ---------- */
  .controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:18px 0 20px}
  .segment{display:inline-flex;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:4px}
  .segment button{
    border:none;background:none;font-family:inherit;font-weight:800;cursor:pointer;
    padding:8px 16px;border-radius:9px;color:var(--muted);font-size:.9rem;
  }
  .segment button.active{background:var(--pink);color:#fff}
  .legend{display:flex;gap:16px;font-size:.85rem;color:var(--muted);font-weight:700;flex-wrap:wrap}
  .legend i{width:14px;height:14px;border-radius:5px;display:inline-block;vertical-align:-2px;margin-right:6px}
  .legend .l-free{background:#fff;border:2px solid var(--pink)}
  .legend .l-taken{background:var(--navy)}

  /* ---------- number grid ---------- */
  .numbers{
    display:grid;
    grid-template-columns:repeat(10,1fr);
    gap:8px;
  }
  .num{
    position:relative;aspect-ratio:1/1;border-radius:12px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-weight:800;border:2px solid var(--pink);background:#fff;color:var(--navy);
    cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
    font-size:clamp(.72rem,1.6vw,1.02rem);padding:2px;
  }
  .num:hover{transform:translateY(-3px);box-shadow:0 10px 18px -8px rgba(230,38,107,.5);background:var(--pink-soft)}
  .num.taken{
    background:var(--navy);border-color:var(--navy);color:#fff;cursor:default;
  }
  .num.taken:hover{transform:none;box-shadow:none}
  .num .who{
    font-size:.5rem;font-weight:700;color:#ff9ac2;line-height:1;margin-top:3px;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px;text-transform:uppercase;letter-spacing:.02em;
  }
  .numbers.only-free .num.taken{display:none}

  /* ---------- steps ---------- */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
  .step{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:24px 22px}
  .step .n{font-family:"Anton",sans-serif;color:var(--pink);font-size:1.6rem;line-height:1}
  .step h3{margin:8px 0 6px;color:var(--navy);font-size:1.12rem}
  .step p{margin:0;color:#4a5468;font-size:.96rem}
  .step .bizum{color:var(--pink-deep);font-weight:800;letter-spacing:.02em}

  /* ---------- footer ---------- */
  footer{background:var(--navy);color:#fff;padding:50px 0 30px;margin-top:20px}
  .foot-script{font-family:"Caveat",cursive;font-size:1.9rem;color:#ff9ac2;text-align:center;max-width:22ch;margin:0 auto 30px;line-height:1.15}
  .foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
  .bizum-box{background:rgba(255,255,255,.06);border-radius:18px;padding:22px 26px}
  .bizum-box small{color:#b9c2d8;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}
  .bizum-box .num-big{font-family:"Anton",sans-serif;font-size:2.2rem;letter-spacing:.03em;margin-top:4px}
  .foot-links{display:flex;flex-direction:column;gap:12px}
  .foot-links a{display:inline-flex;align-items:center;gap:10px;font-weight:800;text-decoration:none}
  .sponsor{margin-top:26px;text-align:center;color:#9aa5bd;font-size:.86rem}
  .sponsor b{color:#fff}
  .fineprint{text-align:center;color:#7f8aa5;font-size:.8rem;margin-top:22px}

  /* ---------- modal ---------- */
  .overlay{
    position:fixed;inset:0;background:rgba(15,24,48,.6);backdrop-filter:blur(3px);
    display:none;align-items:center;justify-content:center;padding:20px;z-index:50;
  }
  .overlay.open{display:flex}
  .modal{
    background:#fff;border-radius:22px;max-width:400px;width:100%;padding:30px 28px;
    text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
    animation:pop .25s ease;
  }
  @keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
  .modal .picked{font-family:"Anton",sans-serif;font-size:3.4rem;color:var(--pink);line-height:1}
  .modal h3{margin:6px 0 4px;color:var(--navy)}
  .modal p{color:#4a5468;margin:8px 0 18px}
  .modal .bizum-num{font-family:"Anton",sans-serif;font-size:1.6rem;color:var(--navy);letter-spacing:.03em}
  .modal-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
  .close-x{position:absolute;top:16px;right:20px;background:none;border:none;font-size:1.6rem;color:#9aa5bd;cursor:pointer;line-height:1}
  .modal-wrap{position:relative}
  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:12px;font-weight:700;opacity:0;transition:.3s;z-index:60}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* ---------- responsive ---------- */
  @media(max-width:820px){
    .hero-grid{grid-template-columns:1fr;gap:34px}
    .photo-frame{max-width:280px;margin:0 auto}
    .progress-card{grid-template-columns:1fr}
    .stat-tiles{justify-content:flex-start}
    .steps{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
  }
  @media(max-width:560px){
    .numbers{grid-template-columns:repeat(5,1fr);gap:7px}
    h1{font-size:clamp(2.6rem,15vw,3.6rem)}
  }
  @media(prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  }