/* ============================================================
   OOOH CLUB — Global Premium Theme (Deep Black × Champagne Gold)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Palette */
  --black:        #0A0A0A;   /* deep black background */
  --black-soft:   #141414;   /* card surfaces */
  --black-border: #262626;
  --gold:         #D4AF37;   /* metallic gold */
  --gold-light:   #F1E5AC;   /* champagne */
  --gold-dark:    #8C7326;
  --platinum:     #E5E4E2;
  --text:         #EDEDED;
  --text-dim:     #9A9A9A;

  /* Type */
  --font-display: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; }

.gold          { color: var(--gold); }
.gold-gradient {
  background: linear-gradient(120deg, var(--gold-dark), var(--gold) 40%, var(--gold-light) 55%, var(--gold) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Buttons */
.btn {
  display: inline-block; padding: 14px 34px; border-radius: 2px;
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: all .3s ease; border: none;
}
.btn-gold  { background: linear-gradient(120deg, var(--gold-dark), var(--gold), var(--gold-light)); color: #0A0A0A; }
.btn-gold:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 8px 30px rgba(212,175,55,.25); }
.btn-ghost { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.btn-ghost:hover { background: rgba(212,175,55,.08); }

/* Cards & forms */
.card {
  background: var(--black-soft); border: 1px solid var(--black-border);
  border-radius: 10px; padding: 28px;
}
label { display:block; font-size: 12px; letter-spacing:.12em; text-transform: uppercase; color: var(--text-dim); margin: 18px 0 6px; }
input, select, textarea {
  width: 100%; padding: 13px 15px; background: #101010; color: var(--text);
  border: 1px solid var(--black-border); border-radius: 4px;
  font-family: var(--font-body); font-size: 15px; outline: none; transition: border .25s;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
textarea { min-height: 96px; resize: vertical; }

.divider { height:1px; background: linear-gradient(90deg, transparent, var(--gold-dark), transparent); margin: 34px 0; }

/* ===================== DIGITAL ID CARD ===================== */
.id-card {
  position: relative; overflow: hidden; border-radius: 18px; padding: 30px;
  max-width: 400px; margin: 0 auto; border: 1px solid;
  background: linear-gradient(145deg, #161616 0%, #0C0C0C 60%);
}
.id-card::after {         /* subtle sheen */
  content:''; position:absolute; top:-60%; left:-30%; width:60%; height:220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.045), transparent);
  transform: rotate(18deg);
}
.id-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid; flex-shrink: 0; }
.id-tier  { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; }
.id-badge { padding: 7px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.14);
            background: rgba(255,255,255,.05); white-space: nowrap; }

/* Tier themes — instantly recognisable at the door */
.id-card::before { content:''; position:absolute; top:0; left:0; right:0; height:7px; z-index:2; }

.tier-standard::before { background: linear-gradient(90deg,#2E2E2E,#6B7280,#2E2E2E); }
.tier-standard { border-color:#3A3A3A; }
.tier-standard .id-tier, .tier-standard .id-accent { color:#9CA3AF; }
.tier-standard .id-photo { border-color:#9CA3AF; }

.tier-premium::before { background: linear-gradient(90deg,#8C7326,#D4AF37,#F1E5AC,#D4AF37,#8C7326); }
.tier-premium { border:2px solid #D4AF37; box-shadow: 0 0 55px rgba(212,175,55,.30); }
.tier-premium .id-badge.id-tier { background: linear-gradient(120deg,#8C7326,#D4AF37,#F1E5AC); color:#0A0A0A; border:none; font-weight:700; }
.tier-premium .id-accent { color:#D4AF37; }
.tier-premium .id-photo { border:3px solid #D4AF37; }

.tier-platinum::before { background: linear-gradient(90deg,#8E8E8E,#E5E4E2,#FFFFFF,#E5E4E2,#8E8E8E); }
.tier-platinum { border:2px solid #E5E4E2; box-shadow: 0 0 55px rgba(229,228,226,.32); background: linear-gradient(145deg,#1B1D22 0%,#0C0C0E 60%); }
.tier-platinum .id-badge.id-tier { background: linear-gradient(120deg,#9BA0A8,#E5E4E2,#FFFFFF); color:#0A0A0A; border:none; font-weight:700; }
.tier-platinum .id-accent { color:#E5E4E2; }
.tier-platinum .id-photo { border:3px solid #E5E4E2; }

.tier-founders::before { background: linear-gradient(90deg,#B8860B,#F1E5AC,#FFD700,#F1E5AC,#B8860B); }
.tier-founders { border:2px solid #B8860B; box-shadow: 0 0 75px rgba(212,175,55,.45); background: linear-gradient(145deg,#261C06 0%,#0D0A04 60%); }
.tier-founders .id-badge.id-tier { background: linear-gradient(120deg,#B8860B,#FFD700,#F1E5AC); color:#0A0A0A; border:none; font-weight:700; }
.tier-founders .id-accent { color:#F1E5AC; }
.tier-founders .id-photo { border:3px solid #F1E5AC; }

/* Layout helpers */
.container { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.center { text-align: center; }
.muted { color: var(--text-dim); }
@media (max-width: 640px) { .btn { width: 100%; text-align: center; } }