:root{
      --ink:#151515;
      --muted:#5b5b5b;
      --card:#ffffff;
      --stroke:#1d1d1d;
      --shadow:#0000001f;
      --pill:#ffffff;
      --pill2:#f5f5f5;
      --lav:#e9c8ff;
      --mint:#bff2df;
      --sky:#bfe9ff;
      --lem:#f3f099;
      --pink:#ffd0e8;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--ink);
      background: linear-gradient(180deg, #d8f7ff 0%, #f7f4ff 35%, #ffeef6 68%, #f2ffe6 100%);
    }
    a{color:inherit}
    .wrap{
      max-width: 820px;
      margin: 0 auto;
      padding: 18px 14px 32px;
    }

    /* top bar */
    .top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:14px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
    }
    .logo{
      width:42px;height:42px;
      border-radius:14px;
      background: var(--card);
      border:2px solid var(--stroke);
      box-shadow: 4px 4px 0 rgba(0,0,0,.10);
      display:grid;
      place-items:center;
      overflow:hidden;
    }
    .logo img{width:100%;height:100%;object-fit:cover}
    .brand h1{
      font-family:Anton, Impact, sans-serif;
      font-size:22px;
      line-height:1;
      letter-spacing:.5px;
      margin:0;
      text-transform:uppercase;
    }
    .brand .sub{
      margin:0;
      font-size:12px;
      color:var(--muted);
      font-weight:600;
    }
    .chipset{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .chip{
      padding:8px 10px;
      border-radius:999px;
      background: var(--pill);
      border:2px solid var(--stroke);
      box-shadow: 3px 3px 0 rgba(0,0,0,.10);
      font-size:12px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.4px;
      white-space:nowrap;
    }
    .chip.lav{background:var(--lav)}
    .chip.mint{background:var(--mint)}
    .chip.lem{background:var(--lem)}

    /* hero card */
    .card{
      background: var(--card);
      border:2px solid var(--stroke);
      border-radius:26px;
      box-shadow: 8px 8px 0 rgba(0,0,0,.10);
      padding:18px;
    }
    .hero{
      display:grid;
      gap:12px;
      margin-bottom:14px;
    }
    .heroTitle{
      font-family:Anton, Impact, sans-serif;
      font-size:40px;
      line-height:1;
      margin:0;
      text-transform:uppercase;
      letter-spacing:1px;
    }
    .heroP{
      margin:0;
      color:var(--muted);
      font-weight:600;
      font-size:14px;
      line-height:1.45;
    }
    .ctaRow{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
      margin-top:6px;
    }

    /* buttons */
    .btnx{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      width:100%;
      text-decoration:none;
      padding:16px 14px;
      border-radius:999px;
      border:2px solid var(--stroke);
      box-shadow: 6px 6px 0 rgba(0,0,0,.12);
      font-weight:900;
      letter-spacing:.3px;
      text-transform:uppercase;
      font-size:13px;
      background:var(--pill);
      transition: transform .08s ease, box-shadow .08s ease;
      touch-action: manipulation;
    }
    .btnx:active{transform: translate(2px,2px); box-shadow: 4px 4px 0 rgba(0,0,0,.12);}
    .btnx.primary{background:var(--mint)}
    .btnx.secondary{background:var(--lem)}
    .btnx.ghost{background:var(--pill2)}
    .btnx .ico{width:18px;height:18px;display:inline-block}

    /* social */
    .social{
      display:flex;
      gap:10px;
      justify-content:center;
      align-items:center;
      margin: 14px 0 4px;
      flex-wrap:wrap;
    }
    .soc{
      width:46px;height:46px;
      border-radius:999px;
      background: var(--pill);
      border:2px solid var(--stroke);
      box-shadow: 4px 4px 0 rgba(0,0,0,.10);
      display:grid;
      place-items:center;
      text-decoration:none;
    }
    .soc svg{width:22px;height:22px}

    /* sections */
    .section{
      margin-top:14px;
      display:grid;
      gap:10px;
    }
    .sectionTitle{
      font-family:Anton, Impact, sans-serif;
      margin:0;
      font-size:22px;
      text-transform:uppercase;
      letter-spacing:.6px;
    }
    .sectionNote{
      margin:0;
      color:var(--muted);
      font-weight:600;
      font-size:13px;
      line-height:1.45;
    }

    /* linktree list */
    .list{
      display:grid;
      gap:10px;
      margin-top:6px;
    }

    /* steps */
    .steps{
      display:grid;
      gap:10px;
    }
    .step{
      background: #fff;
      border:2px solid var(--stroke);
      border-radius:22px;
      box-shadow: 6px 6px 0 rgba(0,0,0,.10);
      padding:14px;
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .badge{
      flex:0 0 auto;
      width:40px;height:40px;
      border-radius:14px;
      border:2px solid var(--stroke);
      display:grid;
      place-items:center;
      font-weight:900;
      background: var(--sky);
      box-shadow: 3px 3px 0 rgba(0,0,0,.10);
    }
    .step h3{
      margin:0 0 4px;
      font-size:14px;
      text-transform:uppercase;
      letter-spacing:.4px;
      font-weight:900;
    }
    .step p{
      margin:0;
      color:var(--muted);
      font-weight:600;
      font-size:13px;
      line-height:1.45;
    }

    /* bottom CTA */
    .final{
      margin-top:16px;
      background: linear-gradient(90deg, var(--lav) 0%, var(--pink) 45%, var(--mint) 100%);
      border:2px solid var(--stroke);
      border-radius:26px;
      box-shadow: 8px 8px 0 rgba(0,0,0,.12);
      padding:16px;
      display:grid;
      gap:10px;
      text-align:center;
    }
    .final h2{
      margin:0;
      font-family:Anton, Impact, sans-serif;
      font-size:26px;
      text-transform:uppercase;
      letter-spacing:.8px;
      line-height:1.05;
    }
    .final p{
      margin:0;
      color:#1a1a1a;
      font-weight:800;
      font-size:13px;
      line-height:1.35;
    }

    footer{
      margin-top:18px;
      text-align:center;
      color:rgba(0,0,0,.55);
      font-weight:700;
      font-size:12px;
      padding: 6px 0 0;
    }
    footer a{color:inherit}

    /* small desktop tweak */
    @media (min-width: 760px){
      .ctaRow{grid-template-columns: 1fr 1fr;}
      .heroTitle{font-size:52px}
    }