/* ===== InDaClub — Futuristic Dark UI ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Bebas+Neue&display=swap');

*{box-sizing:border-box}
:root{
  --bg:#06070a;
  --surface:#0c0f14;
  --surface-2:#11151c;
  --border:#1d2330;
  --brand:#7a6cff;
  --brand-2:#38bdf8;
  --text:#e7e7ea;
  --muted:#9aa3b2;
  --ring:rgba(122,108,255,.45);
}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(60% 60% at 50% 40%, #0a0c12, #05060a);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial;
  letter-spacing:.15px;
  overflow-x:hidden;
}
/* Animated background aura */
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  background: radial-gradient(40% 40% at 20% 10%, rgba(122,108,255,.12), transparent 60%),
              radial-gradient(35% 35% at 80% 20%, rgba(56,189,248,.10), transparent 60%),
              radial-gradient(30% 30% at 50% 90%, rgba(122,108,255,.08), transparent 60%);
  filter: blur(40px) saturate(120%);
  z-index:-1;
  animation: aura 18s ease-in-out infinite alternate;
}
@keyframes aura{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(0,-2%,0) scale(1.05)}
}

a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 24px}

.hero{
  min-height:72vh;
  display:grid;place-items:center;
  text-align:center;
}
h1{
  font-family:"Bebas Neue", Inter, sans-serif;
  font-size:72px; letter-spacing:2px; margin:0 0 8px;
  line-height:.95;
  background: linear-gradient(90deg, #fff, #bfc5ff 35%, #7a6cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p{
  font-size:18px;
  color:var(--muted);
  margin:0 0 26px;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  height:44px; padding:0 18px;
  border:1px solid var(--border);
  border-radius:14px;
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  transition:.25s ease;
  position:relative;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus{outline:2px solid var(--ring); outline-offset:2px}
.btn.primary{
  border-color:transparent;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow:0 10px 30px rgba(122,108,255,.25);
}
.btn.ghost{border-color:#222;color:#dfe3ee}

.badge{
  display:inline-block;
  font-size:12px;
  color:#c9cdfa;
  border:1px solid var(--border);
  padding:6px 10px; border-radius:999px;
  background:rgba(122,108,255,.06);
  margin-bottom:14px;
}

/* Cards */
.card{
  background: rgba(16,19,27,.66);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}

/* Sections */
section.how{margin:60px 0}
.grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(12, 1fr);
}
.col-4{grid-column: span 4}
.col-6{grid-column: span 6}
.col-12{grid-column: span 12}
@media (max-width:900px){
  .col-4,.col-6{grid-column: span 12}
  h1{font-size:52px}
}

/* Feature list */
.feature{display:flex;gap:14px;align-items:flex-start}
.icon{
  width:36px;height:36px;flex:0 0 36px;
  display:grid;place-items:center;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(122,108,255,.24), rgba(122,108,255,.10));
  border:1px solid var(--border);
}

/* Tables */
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid var(--border)}
th{color:#cdd3df;text-align:left;font-weight:600}

/* Forms */
input,select{
  width:100%; height:42px; padding:10px 12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border); border-radius:12px;
  color:var(--text);
}
label{display:block;margin:8px 0 6px;font-size:14px;color:#cdd3df}
form .row{display:grid;gap:14px;grid-template-columns:repeat(12,1fr)}
form .row > div{grid-column:span 6}
@media (max-width:900px){ form .row > div{grid-column:span 12} }

/* Footer */
footer{opacity:.75;text-align:center;padding:32px 0;border-top:1px solid var(--border);margin-top:60px}

/* Small entrance animation */
.reveal{opacity:0;transform:translateY(8px);animation:reveal .6s ease forwards}
@keyframes reveal{to{opacity:1;transform:none}}