@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f7f7f7;
  --text-primary: #111111;
  --text-secondary: #6b6b6b;
  --surface: #ffffff;
  --surface-muted: #efefef;
  --accent-sky: #a8dae8;
  --accent-mint: #bfe7b0;
  --accent-sun: #f2db8a;
  --divider: #e6e6e6;
  --bar-dark: #0f0f0f;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 10% -10%, rgba(168, 218, 232, 0.45), transparent 45%),
    radial-gradient(circle at 90% -15%, rgba(191, 231, 176, 0.45), transparent 48%),
    var(--bg);
}

nav {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--divider);
  box-shadow: none !important;
}

h1,
h2,
h3,
h4 {
  letter-spacing: -0.02em;
}

p,
li,
label {
  color: var(--text-secondary);
}

.bg-bets-red {
  background: var(--bar-dark) !important;
}

.text-bets-red {
  color: #33606d !important;
}

.step-number {
  background: linear-gradient(135deg, #89c2d4, #bfe7b0) !important;
  color: var(--text-primary) !important;
}

button,
input,
textarea {
  font-family: 'Inter', sans-serif;
}

button.bg-bets-red,
a > button.bg-bets-red,
#download-link,
button[type='submit'].bg-bets-red {
  border-radius: 18px !important;
  background: var(--bar-dark) !important;
  color: var(--surface) !important;
  border: 1px solid var(--bar-dark) !important;
  box-shadow: 0 6px 16px rgba(17, 17, 17, 0.18);
}

button.bg-bets-red:hover,
a > button.bg-bets-red:hover,
#download-link:hover,
button[type='submit'].bg-bets-red:hover {
  transform: translateY(-1px);
  background: #252525 !important;
}

button.bg-white,
button[type='submit'].bg-white {
  border-radius: 18px !important;
  border: 1px solid var(--divider) !important;
  color: var(--text-primary) !important;
  background: var(--surface) !important;
}

input[type='email'] {
  border-radius: 18px !important;
  border: 1px solid var(--divider) !important;
  background: var(--surface) !important;
  color: var(--text-primary) !important;
}

#features,
#how-it-works,
#testimonials {
  background: transparent !important;
}

.feature-card,
.step-card,
.content-section,
.bg-white.p-8.rounded-2xl,
.bg-gray-50.p-6.rounded-xl,
.bg-gray-50.p-4.rounded-lg {
  background: var(--surface) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 24px !important;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
}

.feature-card:hover,
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(17, 17, 17, 0.09) !important;
}

.feature-card:nth-child(3n + 1),
.step-card:nth-child(3n + 1) {
  background: linear-gradient(180deg, rgba(168, 218, 232, 0.18) 0%, #fff 36%) !important;
}

.feature-card:nth-child(3n + 2),
.step-card:nth-child(3n + 2) {
  background: linear-gradient(180deg, rgba(191, 231, 176, 0.2) 0%, #fff 36%) !important;
}

.feature-card:nth-child(3n),
.step-card:nth-child(3n) {
  background: linear-gradient(180deg, rgba(242, 219, 138, 0.22) 0%, #fff 36%) !important;
}

.w-14.h-14.rounded-full.bg-bets-red.bg-opacity-10,
.w-20.h-20.rounded-full.bg-bets-red,
.w-10.h-10.rounded-full.bg-bets-red,
.w-24.h-24.mx-auto.bg-bets-red {
  background: var(--bar-dark) !important;
}

.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-gray-600,
.text-gray-500 {
  color: var(--text-secondary) !important;
}

h1.text-4xl,
h1.text-5xl,
h1.text-6xl,
h2.text-3xl,
h2.text-4xl,
h3.text-2xl,
h3.text-xl {
  color: var(--text-primary) !important;
}

.text-white {
  color: #ffffff !important;
}

#cta h1,
#cta h2,
#cta h3,
#cta h4,
section.bg-bets-red h1,
section.bg-bets-red h2,
section.bg-bets-red h3,
section.bg-bets-red h4,
#cta label,
section.bg-bets-red label {
  color: #ffffff !important;
}

#cta,
section.bg-bets-red {
  background: linear-gradient(130deg, #101010 0%, #1b1b1b 52%, #262626 100%) !important;
  border: 1px solid #222;
  border-radius: 28px;
  margin: 1.25rem;
}

#cta p,
section.bg-bets-red p {
  color: rgba(255, 255, 255, 0.82) !important;
}

footer {
  background: transparent !important;
}

footer > div {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 24px;
  padding: 1.5rem;
}

footer a {
  color: var(--text-secondary) !important;
}

footer a:hover {
  color: var(--text-primary) !important;
}

.phone-mockup {
  border-radius: 34px !important;
  border: 1px solid var(--divider);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.12) !important;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}

.invite-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.11);
}

@media (max-width: 768px) {
  #cta,
  section.bg-bets-red {
    margin: 0.8rem;
    border-radius: 22px;
  }

  footer > div {
    border-radius: 18px;
  }
}