@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700;800;900&display=swap");


:root{
  --r-modal: 22px;
  --r-7: 7px;
}
:root{
  --bg:#0b0f17;
  --text:#e8eefc;
  --muted:#b7b0d0;
  --line:rgba(255,255,255,.10);

  --purple-900:#3c1a78;
  --purple-800:#4c1d95;
  --purple-700:#5b21b6;
  --purple-600:#6d28d9;
  --purple-500:#7c3aed;
  --purple-400:#8b5cf6;

  --card-bg: rgba(59,39,92,.85);
  --radius: 18px;
}

/* pequenos */
.cc-pay{ border-radius: var(--r-7); }
.minebit-pay-ico{ border-radius: var(--r-7); }
.minebit-badge{ border-radius: var(--r-7); }
.promo-copy{ border-radius: var(--r-7); }
/* grandes */
.minebit{ border-radius: var(--r-modal); }
.minebit-card{ border-radius: 18px; }
.minebit-left{ border-radius: 18px; }
.minebit-left-item{ border-radius: 14px; }
.minebit-bonus-card{ border-radius: 14px; }
.minebit-pay-card{ border-radius: 14px; }
.minebit-cta{ border-radius: 16px; }


*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Rubik",system-ui,-apple-system,Segoe UI,Roboto; overflow-x:hidden;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

body{
  font-family: 'Rubik', sans-serif;
  background: linear-gradient(120deg, #1a1f38, #2a3170);
  background-size: 400% 400%;
  animation: bgGradient 20s ease infinite;
  color: white;
  min-height: 100vh;
  overflow-x: hidden;
}

@keyframes bgGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* esconder scrollbars (como no tiagocouto) */
*{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{display:none}

/* layout */
.container{max-width:1100px;margin:0 auto;padding:22px}

/* topbar em glass (como .jralha-sidebar) */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(29,10,50,.95);
  border-bottom: 1px solid rgba(139,92,246,.30);
  overflow:hidden;
}
.brand{font-weight:900;letter-spacing:.2px}
.top-actions{display:flex;gap:10px;align-items:center}

/* inputs */
.input,.textarea,.select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}
.textarea{min-height:90px; resize:vertical}
.muted{color:rgba(232,238,252,.70)}
.error{padding:12px;border:1px solid rgba(255,77,109,.25); background:rgba(255,77,109,.08); border-radius:12px}

/* classes “iguais” às que vi no zip (vascolara) */
.jralha-card{
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: #3b275cd9;
  border: 1px solid rgba(139,92,246,.40);
  position: relative;
  overflow: hidden;
}
.jralha-card::before{
  content:"";
  pointer-events:none;
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(168,85,247,.10) 0, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(147,51,234,.10) 0, transparent 50%);
}

.jralha-button-primary{
  color:#fff;
  background: linear-gradient(90deg, #8b5cf6, #7c3aed 50%, #6d28d9);
  position:relative;
  overflow:hidden;
  border:none;
}
.jralha-button-primary:hover{
  background: linear-gradient(90deg, #7c3aed, #6d28d9 50%, #5b21b6);
  box-shadow: 0 0 20px rgba(139,92,246,.40);
}

/* overlay spiderweb animada (igual ao tiagocouto) */
.spiderweb-bg{
  opacity:.15;
  pointer-events:none;
  z-index:0;

  background-image:
    radial-gradient(circle at 1px 1px, rgba(139,92,246,.40) 1px, transparent 0),
    linear-gradient(transparent, transparent 23%, rgba(139,92,246,.08), rgba(139,92,246,.08), transparent 26%, transparent 73%, rgba(139,92,246,.08), rgba(139,92,246,.08), transparent 76%),
    linear-gradient(90deg, transparent 24%, rgba(139,92,246,.08), rgba(139,92,246,.08), transparent 27%, transparent 74%, rgba(139,92,246,.08), rgba(139,92,246,.08), transparent 77%, transparent);

  background-size:50px 50px,50px 50px,50px 50px;
  animation: patternMove 20s linear infinite;
  position:fixed;
  top:0; right:0; bottom:0; left:0;
}

@keyframes patternMove{
  0%{ background-position:0 0,0 0,0 0; }
  100%{ background-position:50px 50px,50px 50px,50px 50px; }
}
/* =========================
   SCROLL HINT (SCROLL FOR MORE)
========================= */
.scroll-hint{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 999;

  display: none;

  align-items: center;
  gap: 8px;                 /* 👈 seta mais perto do texto */
  padding: 10px 16px;

  border-radius: 999px;

  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);

  color: rgba(232,238,252,.82);
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 11px;
  text-transform: uppercase;

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.scroll-hint.show{
  display: inline-flex;
  opacity: 1;
  pointer-events: auto;
}

.scroll-hint.hide{
  opacity: 0;
  pointer-events: none;
}

.scroll-hint-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 14px;
  height: 14px;

  font-size: 14px;
  line-height: 1;
  opacity: .9;

  /* REMOVE isto */
  transform: translateY(1px);

  /* E mete isto */
  position: relative;
  top: -7px;

  animation: scrollHintBounce 1.2s ease-in-out infinite;
}



@keyframes scrollHintBounce{
  0%,100%{ transform: translateY(0); opacity: .75; }
  50%{ transform: translateY(4px); opacity: 1; }
}

/* no mobile sobe um pouco para não bater no UI */
@media (max-width: 640px){
  .scroll-hint{ bottom: 14px; }
}