/* ─────────────────────────────────────────────
    Campaign Design Tokens
    Confirmed from Figma node 4272:1360
───────────────────────────────────────────── */
:root {
  --font-primary:  'Noto Sans', system-ui, -apple-system, sans-serif;
  --font-timer:    'Orbitron', monospace;

  --color-red:     #e1251b;
  --color-text:    #fcfcfc;
  --color-text-alt: #f5faff;
  --color-bg:      #1a0a2e;
  --color-bg-dark: #0d0618;
  --color-timer-bg: #1a1a1a;

  --frame-width:   393px;
  --hero-height:   491px;
}

/* ─────────────────────────────────────────────
    Reset
───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────────
    Base
───────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  min-height: 100vh;
}

img {
  display: block;
  max-width: 100%;
}

/* ─────────────────────────────────────────────
    Page — centers the phone frame on desktop
───────────────────────────────────────────── */
.page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  background-color: var(--color-bg-dark);
  background-image: url('assets/bg.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ─────────────────────────────────────────────
    Phone Frame — the 393px content container
───────────────────────────────────────────── */
.phone-frame {
  position: relative;
  width: 100%;
  max-width: var(--frame-width);
  min-height: 1021px;
  overflow: hidden;
  background-color: var(--color-bg);
  /* Fallback gradient if bg image fails to load */
  background-image: linear-gradient(180deg, #1e0c35 0%, #2a0d3e 50%, #1a0828 100%);
}

/* ─────────────────────────────────────────────
    Background Image — full-page decorative layer
    REPLACE src with production CDN URL
───────────────────────────────────────────── */
.bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  z-index: 0;
}

/* ─────────────────────────────────────────────
    Logo Header — fixed at top of the frame
───────────────────────────────────────────── */
.logo-header {
  position: absolute;
  top: 27px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: 156px;
  height: 42px;
}

.logo-header img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ─────────────────────────────────────────────
    Hero Section — 491px tall image + overlaid text
───────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: var(--hero-height);
  z-index: 1;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ─────────────────────────────────────────────
    Body Content — below the hero
───────────────────────────────────────────── */
.body-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 34px 48px;
  margin-top: 23px; /* 29px × 0.8 — reduced by 20% */
}

.thanks-text {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 1.125rem;   /* 18px */
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
  max-width: 264px;
}

/* ─────────────────────────────────────────────
    Campaign Highlights Card
───────────────────────────────────────────── */
.highlights-card {
  width: 100%;
  max-width: 326px;
  border: 2px solid var(--color-red);
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.68); /* 0.75 × 0.9 — reduced by 10% */
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  overflow: hidden;
}

.card-title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.25rem;    /* 20px */
  line-height: 1.2;
  color: var(--color-text-alt);
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────
    Metrics Layout
───────────────────────────────────────────── */
.metrics {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

.metric-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.metric-row--centered {
  justify-content: center;
}

/* Individual metric block */
.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.metric-icon {
  height: 40px;
  width: auto;
  object-fit: contain;
  object-position: bottom;
}

.metric-value {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.75rem;    /* 28px */
  line-height: 1;
  color: var(--color-text);
  text-align: center;
  white-space: nowrap;
}

.metric-label {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 1rem;       /* 16px */
  line-height: 1;
  color: var(--color-text);
  text-align: center;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
    Timer Badge (scoreboard style)
───────────────────────────────────────────── */
.timer-badge {
  background-color: var(--color-timer-bg);
  border-radius: 5.76px;
  padding: 4.8px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.timer-inner {
  border: 0.48px solid #ffffff;
  border-radius: 3.84px;
  padding: 3.2px 5.76px;
  font-family: var(--font-timer);
  font-weight: 700;
  font-size: 19.2px;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────
    Responsive — very small phones (< 393px)
───────────────────────────────────────────── */
@media (max-width: 392px) {
  .phone-frame {
    max-width: 100%;
    min-height: 100vh;
  }

  .hero-headline {
    font-size: 1.75rem;
  }

  .highlights-card {
    max-width: 100%;
  }

  .body-content {
    padding: 24px 20px 40px;
  }
}

/* ─────────────────────────────────────────────
    Responsive — desktop (≥ 768px)
    Background stretches full viewport width;
    content stays centered at 393px
───────────────────────────────────────────── */
@media (min-width: 768px) {
  .page {
    align-items: flex-start;
  }

  .phone-frame {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  .hero {
    max-width: 393px;
    margin: 0 auto;
  }

  .body-content {
    max-width: 393px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ─────────────────────────────────────────────
    Accessibility — reduced motion
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}