:root {
  --bg: #FAF6EC;

  --ink: #1F1815;
  --ink-soft: #5A4F48;
  --ink-faint: #A6998D;

  --coral: #E55D4D;
  --coral-deep: #C84538;
  --coral-soft: #F4D8CF;

  --sans: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body { height: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga', 'ss01';
  position: relative;
  overflow-x: hidden;
}

/* — Ambient: single warm vignette + real grain ——————————— */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% -10%, rgba(255, 220, 180, 0.45), transparent 65%),
    radial-gradient(50% 50% at 50% 110%, rgba(229, 93, 77, 0.05), transparent 70%);
}

/* SVG fractal noise — gives the cream the feel of pressed paper */
.grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.14 0 0 0 0 0.10 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 300px 300px;
  mix-blend-mode: multiply;
  opacity: 0.32;
}

/* A second, larger-scale grain for depth (clouds, not dots) */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' stitchTiles='stitch' seed='2'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.38 0 0 0 0 0.22 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23c)'/></svg>");
  background-size: 800px 800px;
  mix-blend-mode: multiply;
  opacity: 0.25;
}

/* — Stage ——————————————————————————————————— */
.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

/* — Card dissolves into the page (no bg, no border, no shadow) — */
.card {
  width: 100%;
  max-width: 30rem;
  text-align: center;
  animation: rise 1.1s var(--ease) both;
  position: relative;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* — Mark ——————————————————————————————————— */
.mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 2.25rem;
  filter: drop-shadow(0 14px 28px rgba(190, 70, 55, 0.18));
}

.mark svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 18px;
}

.mark-heart {
  transform-origin: 36px 40.75px;
  transform-box: fill-box;
  animation: heartbeat 3.6s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 35%, 100% { transform: scale(1); }
  8%            { transform: scale(1.04); }
  16%           { transform: scale(1); }
  22%           { transform: scale(1.025); }
  30%           { transform: scale(1); }
}

/* — Wordmark ——————————————————————————————— */
.wordmark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-variation-settings: 'opsz' 72, 'wdth' 100;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.wordmark span {
  color: var(--coral);
  font-weight: 700;
}

/* — Lede ———————————————————————————————————— */
.lede {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 24rem;
  margin: 0 auto 2.25rem;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* — Badge ——————————————————————————————————— */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(200, 69, 56, 0.18);
  border-radius: 999px;
  color: var(--coral-deep);
  font-size: 0.825rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.badge-dot {
  position: relative;
  width: 8px;
  height: 8px;
  display: inline-block;
}

.badge-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--coral);
}

.badge-dot-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--coral);
  opacity: 0.7;
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0;   }
}

.badge-text {
  position: relative;
  top: -0.5px;
}

/* — Responsive ———————————————————————————— */
@media (max-width: 480px) {
  .stage { padding: 2rem 1.25rem; }
  .mark { width: 56px; height: 56px; margin-bottom: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .mark-heart, .badge-dot-pulse {
    animation: none;
  }
}