/* ─── Huron brand tokens ────────────────────────────────────────────────────
   Source: https://brandhub.huronconsultinggroup.com/design-system
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Aubergine — primary brand colour */
  --color-aubergine-800: #370022;
  --color-aubergine-700: #512934;
  --color-aubergine-600: #5d013a;

  /* Guava — action / CTA colour */
  --color-guava-500:     #ff3d5a;
  --color-guava-600:     #db354d;
  --color-guava-700:     #d62440;

  /* Butterscotch — emphasis on dark backgrounds */
  --color-butterscotch-500: #e8b923;

  /* Mint — highlights and accents on dark backgrounds */
  --color-mint-300:      #bcffec;
  --color-mint-500:      #70cdb3;

  /* Ecru / Stone — light neutrals */
  --color-ecru-50:       #f7f6f4;
  --color-ecru-100:      #ebe9e4;
  --color-stone-50:      #f2f0eb;

  /* Typography */
  --font-title: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:  'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-aubergine-800);
  color: var(--color-ecru-100);
}

/* ─── Page shell ────────────────────────────────────────────────────────── */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ─── Hero section ──────────────────────────────────────────────────────── */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px 120px;
  position: relative;
  overflow: hidden;
}

/* Subtle radial glow behind the content */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 55% at 50% 42%,
    rgba(219, 53, 77, 0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 10;
  max-width: 640px;
}

/* Wordmark above the headline */
.hero__shorthand-logo {
  display: block;
  width: 200px;
  height: auto;
  margin: 0 auto 36px;
}

/* Headline — Bricolage Grotesque Regular, white on dark */
.hero__headline {
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 24px;
}

/* Accent word in Bold per brand typography hierarchy */
.hero__headline strong {
  font-weight: 700;
}

/* Body copy — Roboto Regular, Stone-50 on dark */
.hero__body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-stone-50);
  margin: 0 0 48px;
}

/* CTA group */
.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Primary CTA — Guava-600, reserved for buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background-color: var(--color-guava-600);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--color-guava-700);
  box-shadow: 0 10px 28px rgba(214, 36, 64, 0.35);
  transform: translateY(-2px);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-guava-500);
  outline-offset: 3px;
}

/* Secondary / ghost button */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background-color: transparent;
  color: var(--color-ecru-50);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  border: 1px solid rgba(247, 246, 244, 0.35);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn-secondary:hover {
  background-color: rgba(247, 246, 244, 0.08);
  border-color: rgba(247, 246, 244, 0.6);
  transform: translateY(-2px);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--color-mint-500);
  outline-offset: 3px;
}

/* ─── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  padding: 24px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.site-footer__text {
  font-size: 0.75rem;
  color: rgba(235, 233, 228, 0.4);
  font-weight: 400;
}

.site-footer__dot {
  color: rgba(235, 233, 228, 0.2);
}

@media (max-width: 480px) {
  .hero        { padding: 60px 20px 80px; }
  .site-footer { padding: 20px; }
}