:root{
    --sky-top:#2619fe;
    --sky-mid:#2d4af9;
    --sky-low:#3989f7;
    --neon:#46eb78;
    --neon-dim:#2fbf5c;
    --ink:#0a0a14;
    --foam:#ffffff;
    --navy:#0e165c;
    --navy-rim:#080c3c;
    --lav:#cfc8f6;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:"Space Grotesk",system-ui,sans-serif;
    color:var(--ink);
    background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 45%,var(--sky-low) 82%);
    background-color:var(--sky-top);
    background-attachment:fixed;
    overflow-x:hidden;
    min-height:100vh;
  }

  /* ---------- floating stuff ---------- */
  .layer{position:fixed;inset:0;pointer-events:none;overflow:hidden}
  .coin{
    position:absolute;width:var(--s);height:calc(var(--s)*.52);
    background:var(--navy);border:3px solid var(--ink);border-radius:50%;
    box-shadow:0 calc(var(--s)*.16) 0 -1px var(--navy-rim),0 calc(var(--s)*.16) 0 2px var(--ink);
    transform:rotate(var(--r));
    animation:bob var(--d) ease-in-out infinite alternate;
  }
  @keyframes bob{
    from{transform:translateY(0) rotate(var(--r))}
    to{transform:translateY(-22px) rotate(calc(var(--r) + 14deg))}
  }
  .bubble{
    position:absolute;bottom:-20px;width:var(--s);height:var(--s);border-radius:50%;
    border:2px solid var(--c);opacity:.9;
    animation:rise var(--d) linear infinite;animation-delay:var(--delay);
  }
  @keyframes rise{
    0%{transform:translate(0,0);opacity:0}
    10%{opacity:.9}
    100%{transform:translate(var(--drift),-105vh);opacity:0}
  }
  .swirl{
    position:absolute;width:var(--w);height:calc(var(--w)*.34);
    border:3px solid var(--neon);border-radius:50%;
    border-left-color:transparent;border-bottom-color:transparent;
    animation:spin 6s ease-in-out infinite alternate;
  }
  @keyframes spin{from{transform:rotate(-8deg) scaleX(1)}to{transform:rotate(10deg) scaleX(1.15)}}

  /* ---------- waves ---------- */
  .waves{position:fixed;left:0;right:0;bottom:0;height:150px;pointer-events:none;z-index:1}
  .waves svg{position:absolute;bottom:0;left:0;width:200%;height:100%}
  .w1{animation:slide 14s linear infinite}
  .w2{animation:slide 9s linear infinite reverse;bottom:-18px !important;opacity:.95}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- layout ---------- */
  main{
    position:relative;z-index:2;
    min-height:calc(100vh - 30px);
    display:grid;grid-template-columns:1.05fr 1fr;align-items:center;
    max-width:1280px;margin:0 auto;padding:32px 32px 150px;gap:24px;
  }
  .art{
    position:relative;align-self:end;
    -webkit-mask-image:radial-gradient(ellipse 70% 68% at 46% 50%,#000 38%,transparent 72%);
            mask-image:radial-gradient(ellipse 70% 68% at 46% 50%,#000 38%,transparent 72%);
  }
  .art img{display:block;width:100%;max-width:640px;height:auto;animation:surf 3.2s ease-in-out infinite alternate}
  @keyframes surf{from{transform:translateY(0) rotate(-.6deg)}to{transform:translateY(-12px) rotate(.6deg)}}

  .gate{display:flex;flex-direction:column;align-items:center;text-align:center}

  .logo{
    font-family:"Luckiest Guy","Arial Black",sans-serif;
    font-size:clamp(64px,10vw,132px);line-height:.9;letter-spacing:2px;
    color:#fff;
    -webkit-text-stroke:5px var(--ink);paint-order:stroke fill;
    text-shadow:7px 7px 0 var(--neon),7px 7px 0 var(--ink),9px 9px 0 var(--ink);
    transform:rotate(-4deg);
    animation:wobble 4s ease-in-out infinite alternate;
  }
  @keyframes wobble{from{transform:rotate(-4deg)}to{transform:rotate(-2deg) translateY(-4px)}}

  .tag{
    margin-top:14px;
    font-family:"Luckiest Guy","Arial Black",sans-serif;font-size:clamp(20px,2.4vw,28px);
    color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;
    text-shadow:3px 3px 0 var(--ink);letter-spacing:1px;transform:rotate(-4deg);
  }

  .card{
    margin-top:34px;width:100%;max-width:470px;
    background:#fff;border:4px solid var(--ink);border-radius:22px;
    box-shadow:10px 10px 0 var(--neon),10px 10px 0 4px var(--ink);
    padding:26px 24px 24px;
    position:relative;
  }
  .card h2{
    font-family:"Luckiest Guy","Arial Black",sans-serif;font-weight:400;
    font-size:30px;letter-spacing:1px;
  }
  .card p.sub{margin-top:4px;font-weight:500;color:#3a3f52}

  .key{display:flex;gap:8px;justify-content:center;margin:20px 0 18px}
  .key input{
    width:46px;height:58px;
    border:3px solid var(--ink);border-radius:10px;background:#f3f1ff;
    font-family:"Luckiest Guy","Arial Black",sans-serif;font-size:28px;text-align:center;
    color:var(--ink);text-transform:uppercase;outline:none;
    box-shadow:0 4px 0 var(--ink);
    transition:transform .08s,background .15s,box-shadow .08s;
    caret-color:var(--neon-dim);
  }
  .key input:focus{background:#fff;transform:translateY(-3px);box-shadow:0 7px 0 var(--ink),0 0 0 4px var(--neon)}
  .key input.filled{background:var(--lav)}
  .key .dash{align-self:center;font-family:"Luckiest Guy",sans-serif;font-size:26px}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
    font-family:"Luckiest Guy","Arial Black",sans-serif;font-size:24px;letter-spacing:1.5px;
    background:var(--neon);color:var(--ink);
    border:4px solid var(--ink);border-radius:999px;padding:14px 20px 10px;cursor:pointer;
    box-shadow:0 6px 0 var(--ink);
    transition:transform .08s,box-shadow .08s,filter .15s;
  }
  .btn:hover{filter:brightness(1.06)}
  .btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
  .btn[disabled]{background:#c9d2cc;cursor:not-allowed}

  .msg{min-height:24px;margin-top:12px;font-weight:700}
  .msg.bad{color:#e0245e}
  .msg.good{color:var(--neon-dim)}
  .shake{animation:shake .4s}
  @keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

  .hr{height:3px;background:var(--ink);border-radius:3px;margin:20px 0 16px;opacity:.12}
  .leak{font-weight:700}
  .socials{display:flex;gap:12px;justify-content:center;margin-top:12px}
  .socials a{
    width:52px;height:52px;display:grid;place-items:center;border-radius:14px;
    background:var(--sky-top);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);
    transition:transform .1s,box-shadow .1s;
  }
  .socials a:hover{transform:translateY(-3px) rotate(-4deg);box-shadow:0 7px 0 var(--ink)}
  .socials svg{width:22px;height:22px;fill:#fff}

  .badge{
    position:absolute;top:-22px;right:18px;
    font-family:"Luckiest Guy",sans-serif;font-size:16px;letter-spacing:1px;
    background:#ffd23f;border:3px solid var(--ink);border-radius:999px;padding:6px 14px 3px;
    transform:rotate(6deg);box-shadow:0 4px 0 var(--ink);
  }
  .badge .k{display:inline-block;animation:jiggle 1.6s ease-in-out infinite}
  @keyframes jiggle{0%,100%{transform:rotate(0)}50%{transform:rotate(-18deg)}}

  footer{position:relative;z-index:3;margin-top:-44px;padding:0 16px 14px;text-align:center;
    font-family:"Luckiest Guy",sans-serif;letter-spacing:1px;font-size:14px;color:var(--ink);opacity:.75}

  /* ---------- phones ---------- */
  @media (max-width:900px){
    main{grid-template-columns:1fr;padding:20px 16px 140px;gap:0}
    .art{order:-1;max-width:420px;margin:0 auto -30px;width:100%}
    .card{padding:22px 16px 20px}
    .key{gap:5px}
    .key input{width:calc((100% - 5px*8 - 14px)/8);min-width:0;height:52px;font-size:24px}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none !important}}

/* ---------- shared extras ---------- */
.btn-alt{margin-top:12px;background:#fff;text-decoration:none;font-size:20px}
.small{margin-top:10px;font-size:13px;font-weight:700;color:#3a3f52}
.socials-row{display:flex;gap:10px;justify-content:center;margin-top:14px}

/* ---------- what's inside (Shipd-style preview) ---------- */
.inside{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:30px 24px 190px;text-align:center}
.inside-title{
  font-family:"Luckiest Guy","Arial Black",sans-serif;font-weight:400;font-size:clamp(36px,5.5vw,64px);letter-spacing:1px;
  color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--neon),5px 5px 0 var(--ink),7px 7px 0 var(--ink);
  transform:rotate(-2deg)}
.inside-sub{margin:14px auto 0;max-width:620px;font-weight:700;color:#fff;font-size:17px;text-shadow:0 2px 0 rgba(10,10,20,.35)}
.tabs{display:inline-flex;gap:8px;margin:26px 0 16px;background:#fff;border:4px solid var(--ink);border-radius:999px;padding:6px;box-shadow:0 5px 0 var(--ink)}
.tab{font-family:"Luckiest Guy",sans-serif;font-size:17px;letter-spacing:1px;border:0;background:transparent;border-radius:999px;padding:10px 18px 7px;cursor:pointer;color:var(--ink)}
.tab.on{background:var(--neon);box-shadow:inset 0 0 0 3px var(--ink)}
.window{background:#fff;border:4px solid var(--ink);border-radius:20px;overflow:hidden;text-align:left;
  box-shadow:12px 12px 0 var(--neon),12px 12px 0 4px var(--ink)}
.win-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--ink);color:#c9c6e8}
.win-bar span{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.win-bar span:nth-child(2){background:#febc2e}.win-bar span:nth-child(3){background:#28c840}
.win-bar em{flex:1;text-align:center;font-style:normal;font-size:13px;font-weight:700;margin-right:50px}
.pane{display:none;padding:22px}
.pane.show{display:block}

.task-list{display:grid;gap:10px}
.task{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;border:3px solid var(--ink);border-radius:14px;padding:12px 14px;background:#f3f1ff}
.task b{display:block;font-size:16px}.task small{font-weight:600;color:#5b6074}
.task strong{font-family:"Luckiest Guy",sans-serif;font-weight:400;font-size:22px;letter-spacing:.5px;color:var(--neon-dim);-webkit-text-stroke:1px var(--ink)}
.task.boost{background:#fff6d1}
.tg{display:inline-block;font-family:"Luckiest Guy",sans-serif;font-size:13px;letter-spacing:1px;padding:4px 10px 2px;border:2px solid var(--ink);border-radius:999px;white-space:nowrap}
.tg.daily{background:#d9e6ff}.tg.bonus{background:#ffe3b3}.tg.set{background:#e3d9ff}.tg.boost,.tg.gold{background:#ffd23f}.tg.lock{background:#eee}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.tier{border:3px solid var(--ink);border-radius:14px;padding:12px;text-align:center;background:#fff;box-shadow:0 4px 0 var(--ink)}
.tier b{display:block;font-family:"Luckiest Guy",sans-serif;font-weight:400;font-size:20px;letter-spacing:1px}
.tier span{font-size:13px;font-weight:700;color:#5b6074}
.tier strong{display:block;font-family:"Luckiest Guy",sans-serif;font-weight:400;font-size:30px;color:var(--sky-top)}
.tier.gold{background:#fff6d1}

.board{width:100%;border-collapse:separate;border-spacing:0 6px;font-weight:700}
.board th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:#6a6f86;text-align:left;padding:0 10px}
.board td{background:#f3f1ff;padding:11px 10px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.board td:first-child{border-left:3px solid var(--ink);border-radius:12px 0 0 12px}
.board td:last-child{border-right:3px solid var(--ink);border-radius:0 12px 12px 0}
.board .r{text-align:right}
.board td.r{font-family:"Luckiest Guy",sans-serif;font-weight:400;font-size:19px;letter-spacing:.5px}
.board tr.you td{background:#fff;border-style:dashed;color:#6a6f86}
.board.small td{padding:8px 10px;font-size:14px}

.pay-grid{display:grid;grid-template-columns:1fr 260px;gap:16px}
.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.box{border:3px solid var(--ink);border-radius:14px;padding:12px 14px;background:#f3f1ff}
.box small{display:block;font-weight:700;color:#5b6074;font-size:13px}
.box b{display:block;font-family:"Luckiest Guy",sans-serif;font-weight:400;font-size:32px;letter-spacing:.5px}
.box b.mono{font-family:"Space Grotesk",monospace;font-weight:700;font-size:26px}
.box em{font-style:normal;font-size:12px;font-weight:600;color:#5b6074}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.chips span{border:2px solid var(--ink);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:700;background:#fff}
.pool{border:3px solid var(--ink);border-radius:16px;padding:16px;background:var(--ink);color:#fff;box-shadow:0 5px 0 var(--neon-dim)}
.pool small{display:block;font-weight:700;letter-spacing:.8px;font-size:12px;color:var(--neon)}
.pool b{display:block;font-family:"Luckiest Guy",sans-serif;font-weight:400;font-size:30px;letter-spacing:.5px;margin-top:6px}
.pool span{display:block;font-weight:700;color:#c9c6e8;margin-bottom:12px}
.pool .btn{font-size:16px;padding:10px 12px 7px}
.pool.alt{margin-top:12px;background:#fff6d1;color:var(--ink);box-shadow:0 5px 0 var(--ink)}
.pool.alt small{color:#8a6a00}.pool.alt span{color:#5b6074;margin:0}
.fine{margin:26px auto 0;max-width:640px;font-size:13px;font-weight:700;color:#fff;background:rgba(10,10,20,.72);border-radius:12px;padding:10px 14px}
.btn.cta{display:inline-flex;width:auto;margin-top:16px;padding:14px 34px 10px;text-decoration:none}

@media (max-width:760px){
  .inside{padding:20px 16px 170px}
  .tab{font-size:14px;padding:9px 11px 6px}
  .pane{padding:14px}
  .task{grid-template-columns:1fr auto;gap:8px}
  .task .tg{display:none}
  .tiers{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr}
  .board th:nth-child(3),.board td:nth-child(3){display:none}
  .win-bar em{margin-right:0;font-size:11px}
}