:root {
  --bg: #000;
  --text: #fff;
  --muted: #a1a1a1;
  --border: #333;
  --brand: #E93B3B;
  --brand-2: #67E8F9;
  --glow: 0 0 24px rgba(233, 59, 59, 0.3);
}

body::before{
  content:"";
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(103,232,249,.07), transparent 60%),
    radial-gradient(800px 400px at -10% 20%, rgba(233,59,59,.08), transparent 60%),
    linear-gradient(transparent 0, rgba(255,255,255,.03) 1px),
    linear-gradient(90deg, transparent 0, rgba(255,255,255,.03) 1px);
  background-size: auto, auto, 100% 40px, 40px 100%;
  mix-blend-mode: screen;
}
body::after{
  content:"";
  position: fixed; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' type='fractalNoise'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/ filter%3E%3Crect filter='url(%23n)' opacity='.03' width='100%25' height='100%25'/%3E%3C/svg%3E");
  background-size: 300px 300px; opacity:.7;
}

.glass {
  background: rgba(16, 16, 16, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
}

.brand-gradient {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.text-gradient {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brand);
  color: white;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s;
}

.btn:hover {
  opacity: 0.9;
  box-shadow: var(--glow);
}

.chip {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.accent-ring { box-shadow: 0 0 0 8px rgba(233,59,59,.08); }

@keyframes floaty { from { transform: translateY(0) } to { transform: translateY(-6px)} }
.floaty { animation: floaty 3s ease-in-out infinite alternate; }

/* Gradient card styles */
.gradient-card {
  border-radius: 1rem;
  padding: 1px;
  background: linear-gradient(135deg, rgba(233, 59, 59, 0.4), rgba(103, 232, 249, 0.4));
  transition: all 0.3s ease;
}
.gradient-card:hover {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(233, 59, 59, 0.2);
}
.gradient-card-inner {
  background: #101010;
  padding: 1.5rem;
  border-radius: calc(1rem - 1px);
  height: 100%;
}

/* Typography scale */
:root{
  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.25rem;     /* 20px */
  --fs-2xl: 1.5rem;     /* 24px */
  --fs-3xl: 1.875rem;   /* 30px */
  --fs-4xl: 2.25rem;    /* 36px */
  --fs-5xl: 3rem;       /* 48px */
  --fs-6xl: 3.75rem;    /* 60px */
}
@media (min-width: 640px){ /* sm */
  :root{
    --fs-3xl: 2rem;     /* 32px */
    --fs-4xl: 2.5rem;    /* 40px */
    --fs-5xl: 3.25rem;   /* 52px */
    --fs-6xl: 4rem;      /* 64px */
  }
}
@media (min-width: 1024px){ /* lg */
  :root{
    --fs-4xl: 2.75rem;   /* 44px */
    --fs-5xl: 3.5rem;    /* 56px */
    --fs-6xl: 4.5rem;    /* 72px */
  }
}
.h1 { font-size: var(--fs-5xl); line-height: 1.05; letter-spacing: -0.01em; }
.h2 { font-size: var(--fs-3xl); line-height: 1.1; letter-spacing: -0.01em; }
.h3 { font-size: var(--fs-2xl); line-height: 1.2; }
.lead { font-size: var(--fs-lg); color: var(--muted); }
.small { font-size: var(--fs-sm); }
.caption { font-size: var(--fs-xs); color: var(--muted); }

/* Larger button variant */
.btn-lg { padding: 0.875rem 1.25rem; font-size: var(--fs-lg); }

/* Dark-mode friendly map styling */
.map-iframe { filter: invert(1) hue-rotate(180deg); border-radius: 1rem; }