:root{
      --bg1: #e63946;
      --bg2: #071128;
      --accent1: #ffb14a;
      --accent2: #ff6a3d;
      --muted: rgba(255,255,255,0.85);
      --glass: rgba(255,255,255,0.06);
      --radius: 14px;
      --gap: 14px;
      font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    }

    /* full-screen single-frame layout */
    html,body{
      height:100%;
      margin:0;
    }
    body{
      background: linear-gradient(135deg,var(--bg1) 0%, var(--bg2) 100%);
      color:var(--muted);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden; /* no scrolling — single screen */
    }

    .card{
      width:100%;
      max-width:980px;
      height:88vh; /* keep inside viewport leaving small gap */
      padding:28px;
      border-radius:18px;
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      box-shadow: 0 20px 60px rgba(2,6,23,0.65), inset 0 1px 0 rgba(255,255,255,0.02);
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:22px;
      box-sizing:border-box;
      border: 1px solid rgba(255,255,255,0.03);
    }

    /* headline */
    .headline{
      text-align:center;
      line-height:1.03;
      user-select:none;
    }
    .headline h1{
      margin:0;
      font-size: clamp(28px, 6.2vw, 56px);
      letter-spacing:1px;
      color: #fff;
      font-weight:800;
      text-shadow: 0 6px 30px rgba(0,0,0,0.6);
    }
    .headline .sub{
      display:block;
      margin-top:6px;
      font-size: clamp(14px, 1.8vw, 20px);
      color: rgba(255,255,255,0.92);
      font-weight:700;
      letter-spacing:0.6px;
    }
    .headline .tiny{
      margin-top:4px;
      color: rgba(255,255,255,0.75);
      font-size: clamp(12px,1.4vw,14px);
      font-weight:600;
    }

    /* anchor buttons */
    .actions{
      display:flex;
      gap:var(--gap);
      width:100%;
      max-width:720px;
      justify-content:center;
      align-items:center;
      flex-wrap:wrap;
    }

    .btn {
      -webkit-tap-highlight-color: transparent;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      padding:14px 20px;
      min-width:240px;
      border-radius:12px;
      font-weight:800;
      font-size:16px;
      box-sizing:border-box;
      border: none;
      cursor:pointer;
      transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
      box-shadow: 0 10px 30px rgba(2,6,23,0.45);
      color:#08101a;
    }

    .btn:active{ transform: translateY(1px); }
    .btn:focus{ outline: 3px solid rgba(255,177,74,0.18); outline-offset:4px; }

    .deposit {
      background: linear-gradient(90deg,var(--accent1),var(--accent2));
    }
    .withdraw {
      background: linear-gradient(90deg,#34d399,#10b981);
      color:#021009;
    }
    .support {
      background: linear-gradient(90deg,#8b5cf6,#06b6d4);
      color:#fff;
      box-shadow: 0 10px 30px rgba(11,17,50,0.55);
    }

    /* helper text below */
    .note {
      font-size:13px;
      color: rgba(255,255,255,0.86);
      text-align:center;
      margin-top:6px;
    }
    .pill {
      display:inline-block;
      background: #fff3c4;
      color: #3b2d00;
      padding:6px 10px;
      border-radius:999px;
      font-weight:800;
      margin-left:8px;
      font-size:13px;
    }

    /* responsive adjustments */
    @media (max-width:780px){
      .btn { min-width:200px; padding:12px 14px; font-size:15px; }
      .card { padding:18px; height:94vh; border-radius:12px; }
    }

    @media (max-width:480px){
      .actions { gap:12px; }
      .btn { width:100%; min-width:0; }
      .headline h1{ font-size: clamp(22px, 7.6vw, 38px); }
    }