*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:       #0f0d0b;
      --surface:  #1c1814;
      --amber:    #f5a623;
      --cream:    #f5ead8;
      --muted:    #7a6a56;
      --trakteer: #e8384f;
      --kofi:     #29abe0;
      --radius:   18px;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--cream);
      font-family: 'DM Sans', sans-serif;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
      overflow-x: hidden;
    }

    /* ── noise grain overlay ── */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 0;
    }

    .page { position: relative; z-index: 1; width: 100%; max-width: 520px; }

    /* ── floating blobs ── */
    .blob {
      position: fixed;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.18;
      pointer-events: none;
      animation: drift 14s ease-in-out infinite alternate;
    }
    .blob-1 { width: 380px; height: 380px; background: var(--amber); top: -10%; left: -15%; animation-delay: 0s; }
    .blob-2 { width: 280px; height: 280px; background: var(--trakteer); bottom: 5%; right: -10%; animation-delay: -5s; }
    .blob-3 { width: 200px; height: 200px; background: var(--kofi); bottom: 30%; left: -5%; animation-delay: -9s; }
    @keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(30px, 20px) scale(1.08); } }

    /* ── card ── */
    .card {
      background: var(--surface);
      border: 1px solid rgba(245,166,35,.12);
      border-radius: 28px;
      padding: 3rem 2.5rem 2.5rem;
      text-align: center;
      box-shadow: 0 40px 80px rgba(0,0,0,.5);
      animation: rise .7s cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes rise { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:none; } }

    /* ── avatar ── */
    .avatar-wrap {
      width: 90px; height: 90px;
      margin: 0 auto 1.4rem;
      position: relative;
    }
    .avatar-ring {
      position: absolute; inset: -5px;
      border-radius: 50%;
      background: conic-gradient(var(--amber), var(--trakteer), var(--kofi), var(--amber));
      animation: spin 5s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .avatar {
      position: relative; z-index: 1;
      width: 90px; height: 90px;
      border-radius: 50%;
      background: var(--bg);
      display: flex; align-items: center; justify-content: center;
      font-size: 2.6rem;
      border: 3px solid var(--bg);
    }

    /* ── text ── */
    h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.8rem, 5vw, 2.4rem);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -.02em;
      color: var(--cream);
    }
    h1 em { font-style: italic; color: var(--amber); }

    .subtitle {
      margin-top: .8rem;
      font-size: .95rem;
      font-weight: 300;
      color: var(--muted);
      line-height: 1.6;
    }

    /* ── divider ── */
    .divider {
      width: 40px; height: 2px;
      background: linear-gradient(90deg, var(--amber), transparent);
      margin: 1.8rem auto;
    }

    /* ── buttons ── */
    .buttons { display: flex; flex-direction: column; gap: .9rem; }

    .btn {
      display: flex; align-items: center; justify-content: center; gap: .75rem;
      padding: 1rem 1.5rem;
      border-radius: var(--radius);
      font-family: 'DM Sans', sans-serif;
      font-size: 1rem; font-weight: 500;
      text-decoration: none;
      border: none; cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
      position: relative; overflow: hidden;
    }
    .btn::after {
      content: '';
      position: absolute; inset: 0;
      background: rgba(255,255,255,.08);
      opacity: 0;
      transition: opacity .18s;
    }
    .btn:hover::after { opacity: 1; }
    .btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.35); }
    .btn:active { transform: translateY(0); }

    .btn-trakteer {
      background: linear-gradient(135deg, #e8384f, #c0273b);
      color: #fff;
      box-shadow: 0 6px 20px rgba(232,56,79,.3);
    }
    .btn-kofi {
      background: linear-gradient(135deg, #29abe0, #1a8fc2);
      color: #fff;
      box-shadow: 0 6px 20px rgba(41,171,224,.3);
    }

    .btn-nowpayment {
      background: linear-gradient(135deg, #29e09f, #1fc28a);
      color: #fff;
      box-shadow: 0 6px 20px rgba(41,224,159,.3);
    }
    
    .btn-icon { font-size: 1.25rem; flex-shrink: 0; }

    .btn-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
    .btn-label { font-size: .7rem; opacity: .75; font-weight: 300; text-transform: uppercase; letter-spacing: .08em; }
    .btn-name  { font-size: 1rem; font-weight: 600; }

    .btn-arrow { margin-left: auto; opacity: .6; font-size: .85rem; transition: transform .18s; }
    .btn:hover .btn-arrow { transform: translateX(4px); opacity: 1; }

    /* ── footer note ── */
    .note {
      margin-top: 2rem;
      font-size: .78rem;
      color: var(--muted);
      line-height: 1.7;
    }
    .note span { color: var(--amber); }

    /* ── responsive tweak ── */
    @media (max-width: 400px) {
      .card { padding: 2rem 1.5rem 2rem; }
    }