/* Base + typography */
@font-face{
  font-family: 'SF Pro Display';
  src: url('assets/SFPRODISPLAYREGULAR.OTF') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
:root{
  --bg1:#6a00ff; --bg2:#8a2eff;
  --card:#fff; --text:#0f0f14; --muted:#63636d;
  --radius:22px; --shadow:0 20px 60px rgba(0,0,0,.2);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:'SF Pro Display',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: linear-gradient(115deg, var(--bg1), var(--bg2), var(--bg1));
  background-size: 200% 200%;
  animation: bg-pan 18s ease-in-out infinite;
}
@keyframes bg-pan{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

/* Elegant intro */
#intro-overlay{position:fixed;inset:0;display:grid;place-items:center;background:#0f0f14;z-index:9999;animation:overlayFade 2.3s ease forwards}
#intro-logo{display:block;width:200px;height:auto;opacity:0;transform:scale(.9);animation:logoZoom 2.3s ease forwards;position:relative;overflow:hidden}
#intro-logo::after{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);animation:logoShine 1.6s ease .25s forwards}
@keyframes logoZoom{0%{opacity:0;transform:scale(.9)}20%{opacity:1}100%{opacity:0;transform:scale(1)}}
@keyframes logoShine{0%{left:-75%}60%{left:125%}100%{left:125%}}
@keyframes overlayFade{0%,80%{opacity:1}100%{opacity:0;visibility:hidden}}

/* Layout */
.header{display:flex;justify-content:center;padding:40px 16px 24px}
.logo{width:86px;height:auto;filter:drop-shadow(0 6px 22px rgba(0,0,0,.35))}
.grid{width:min(1100px,92%);margin:0 auto 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border-radius:var(--radius);padding:24px 22px 26px;box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease;cursor:pointer;position:relative;isolation:isolate;overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 80px rgba(0,0,0,.28)}
.badge{position:absolute;top:14px;left:14px;background:#0f0f14;color:#fff;font-size:12px;letter-spacing:.4px;padding:6px 10px;border-radius:999px}
.brand{display:flex;align-items:center;justify-content:center;min-height:110px;margin-top:8px}
.brand img{max-width:82%;height:auto}
.title{text-align:center;font-size:18px;line-height:1.25;margin:10px 0 4px;letter-spacing:.2px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.note{text-align:center;color:var(--muted);font-size:13px;margin:0 0 18px}
.cta{position:relative; overflow:hidden;display:block;text-align:center;text-decoration:none;background:#000;color:#fff;font-weight:600;padding:14px 16px;border-radius:12px;width:min(220px,80%);margin:0 auto;transition:transform .15s ease, opacity .15s ease, box-shadow .2s ease}
.cta:hover{transform:translateY(-2px);opacity:.92}

/* Gold CTA for MrPunter on card hover */
.card.mp:hover .cta{position:relative; overflow:hidden;
  background: linear-gradient(135deg,#F5E27A,#FFD166,#F4C542,#D7A300);
  color:#111; box-shadow:0 10px 24px rgba(212,170,0,.45);
}
.card.mp:hover .cta::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(120deg,transparent,rgba(255,255,255,.9),transparent);
  transform:translateX(-120%); animation:shine 1.6s ease-in-out infinite; mix-blend-mode:screen;
}
@keyframes shine{to{transform:translateX(120%)}}

.footer{width:min(900px,92%);margin:10px auto 50px;color:#e9e4ff;text-align:center;font-size:12px}

/* Money particles */
.money-particle{position:absolute;width:40px;height:40px;background:url('assets/money.png') no-repeat center/contain;pointer-events:none;opacity:0;animation:flyMoney 1.2s ease-out forwards;z-index:50}
@keyframes flyMoney{0%{transform:translate(0,0) scale(.5) rotate(0);opacity:1}80%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(1) rotate(var(--rot));opacity:0}}

/* Responsive */
@media (max-width:980px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid{grid-template-columns:1fr}.logo{width:72px}.card{padding:22px 18px 24px}}

/* Force uppercase text */
body, .badge, .title, .note, .cta, .footer, h1, h2, h3, h4, h5, h6, p, span {
  text-transform: uppercase;
}

.social-links{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-bottom:8px;
}
.social-links img{
  width:28px;
  height:28px;
  display:block;
  transition: transform .2s ease, opacity .2s ease;
}
.social-links img:hover{
  transform:scale(1.15);
  opacity:.85;
}
.contact-email{
  margin-top:6px;
  font-size:12px;
}
.contact-email a{
  color:#fff;
  text-decoration:none;
}
.contact-email a:hover{
  text-decoration:underline;
}