/* =========================================================================
   TCGScan: base tokens and landing page styles.
   Palette mirrors the app's red color set (Assets.xcassets/ColorSetRed):
   very dark red background, dark red surface, orange yellow accent,
   red tinted off white ink. The app uses SF Pro Rounded, so the site
   uses the system rounded face where the browser has one.
   ========================================================================= */

:root {
  --bg: #350000;
  --bg-glow: #661010;
  --surface: rgba(53, 0, 0, 0.86);
  --surface-strong: #260000;
  --ink: #FFF7F7;
  --ink-70: rgba(255, 247, 247, 0.74);
  --ink-50: rgba(255, 247, 247, 0.52);
  --ink-35: rgba(255, 247, 247, 0.36);
  --accent: #EE9400;
  --frost: rgba(255, 247, 247, 0.06);
  --frost-strong: rgba(255, 247, 247, 0.12);
  --display: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.25, 0.8, 0.35, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 0%, var(--bg-glow) 0%, var(--bg) 62%) fixed, var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--accent); }

/* ------------------------------ Landing ------------------------------- */
/* landing main: fill viewport height so the footer pins to the bottom */
.page-main { flex: 1 0 auto; }

.hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 40px;
  text-align: center;
}
.hero-icon {
  width: 104px;
  height: 104px;
  border-radius: 24px;
  box-shadow: 0 14px 44px rgba(238, 148, 0, 0.22);
}
.cards-showcase {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 24px 16px;
  text-align: center;
  overflow-x: clip;
}
.cards-showcase h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.15;
  margin: 0 0 18px;
}
/* A hand of the app's own made-up sample cards (the onboarding art), fanned out.
   The middle card sits inside orange scan corners, like the app icon, with the
   same $24.99 price the onboarding demo shows for it. */
.card-fan {
  --card-w: clamp(84px, 15vw, 150px);
  display: flex;
  justify-content: center;
  align-items: flex-end; /* no stretch: every card keeps its own 328x472 ratio */
  padding: 18px 0 34px;
}
.fan-card {
  position: relative;
  flex: 0 0 auto;
  width: var(--card-w);
  margin: 0 calc(var(--card-w) * -0.2);
  transform-origin: 50% 120%;
  transition: transform 0.35s var(--ease);
}
.fan-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 328 / 472;
  border-radius: calc(var(--card-w) * 0.06);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.fan-card:nth-child(1) { transform: rotate(-18deg) translateY(14px); z-index: 1; }
.fan-card:nth-child(2) { transform: rotate(-9deg) translateY(2px); z-index: 2; }
.fan-card:nth-child(3) { transform: translateY(-10px); z-index: 5; }
.fan-card:nth-child(4) { transform: rotate(9deg) translateY(2px); z-index: 2; }
.fan-card:nth-child(5) { transform: rotate(18deg) translateY(14px); z-index: 1; }
.fan-card.is-scanned::after {
  content: "";
  position: absolute;
  inset: calc(var(--card-w) * -0.09);
  pointer-events: none;
  --c: var(--accent);
  --l: calc(var(--card-w) * 0.2);
  --t: 4px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l) no-repeat;
}
.price-chip {
  position: absolute;
  left: 50%;
  bottom: calc(var(--card-w) * -0.16);
  transform: translateX(-50%);
  z-index: 6;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #2a0000;
  font-weight: 800;
  font-size: clamp(13px, 1.6vw, 16px);
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.08;
  margin: 28px 0 14px;
}
.hero .tagline {
  text-wrap: balance;
  max-width: 560px;
  margin: 0 auto 30px;
  color: var(--ink-70);
  font-size: 18px;
}
/* Apple's official badge, unmodified (developer.apple.com/app-store/marketing/guidelines):
   white variant because it is the only badge on a dark page; at least 40px tall; clear
   space of at least a quarter of its height; never animated or restyled. */
.store-badge {
  display: inline-block;
  margin: 14px;
  line-height: 0;
}
.store-badge img {
  display: block;
  height: 56px;
  width: auto;
}

.features {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 24px 64px;
  display: grid;
  gap: 18px;
}
@media (min-width: 720px) {
  .features { grid-template-columns: repeat(3, 1fr); }
}
.feature {
  padding: 24px 22px;
  border-radius: 18px;
  background: var(--frost);
  border: 1px solid rgba(255, 247, 247, 0.1);
  text-align: left;
}
.feature h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}
.feature p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-70);
}

.honest-note {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 72px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-50);
}