/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #0f0922 #e9e6f7 #0f0d17 #6d3df5 #9d75f8 #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #0f0d17;
  --surface: #27252e;
  --surface-2: #1b1923;
  --border: #312f37;
  --border-strong: #57565d;
  --ink: #e9e6f7;
  --muted: #928f9d;
  --accent: #6d3df5;
  --accent-hover: #835af7;
  --accent-ink: #ffffff;
  --accent-text: #9d75f8;
  --accent-strong: #9774f9;
  --accent-soft: #241848;
  --accent-border: #39237b;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #10261f;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #331c14;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #341018;
  --danger-strong: #d16969;}

/* ====================================================================
 * app.css — Reelforge. A dark, futuristic marketing page for an AI bulk
 * video generator. Retunes the system for a sharper, more confident
 * character, then writes the sections design.css has no opinion about:
 * the hero glow, the fanned video-card art, the render showcase, the
 * pricing cards and the closing band.
 * ==================================================================== */

:root {
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 26px;
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 22%, transparent);
  --shadow-raised:
    0 24px 60px -20px color-mix(in srgb, var(--accent) 55%, transparent),
    0 10px 28px -10px color-mix(in srgb, var(--ink) 45%, transparent);
}

html,
body {
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

#waitlist,
#how,
#features,
#pricing,
#faq {
  scroll-margin-top: 84px;
}

/* ---- Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  padding: var(--s-11) var(--s-6) var(--s-9);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero > * + * {
  margin-top: var(--s-10);
}

.hero-glow {
  position: absolute;
  inset: -30% -10% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 22% 8%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 65%),
    radial-gradient(40% 34% at 82% 18%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 68%),
    radial-gradient(60% 46% at 50% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%);
  filter: blur(6px);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-inner > * + * {
  margin-top: var(--s-5);
}

.hero-title {
  font-size: clamp(2.1rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: var(--track-tight);
  line-height: 1.05;
  color: var(--ink);
}

.hero-sub {
  font-size: var(--t-lg);
  color: var(--muted);
  max-width: 58ch;
}

.hero-note {
  margin-top: calc(var(--s-2) * -1);
}

.waitlist-form .input-group {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}

.waitlist-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 500;
}
.waitlist-note-ok { color: var(--success-strong); }
.waitlist-note-err { color: var(--danger-strong); }

.hero-stats {
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-top: var(--s-3);
}

/* ---- Fanned video-card art ---------------------------------------------- */

.hero-art {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  max-width: 880px;
  margin-inline: auto;
}

.reel-card {
  position: relative;
  width: 108px;
  height: 68px;
  flex: 0 0 auto;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--accent) 55%, var(--surface)),
    color-mix(in srgb, var(--accent) 14%, var(--surface-2))
  );
  border: 1px solid var(--accent-border);
  box-shadow: var(--shadow-raised);
  transition: transform var(--dur-2) var(--ease);
}
.hero-art .reel-card:hover { transform: translateY(-6px) scale(1.03); }
.hero-art .reel-card:nth-child(1) { transform: translateY(-14px) rotate(-3deg); }
.hero-art .reel-card:nth-child(2) { transform: translateY(8px) rotate(2deg); }
.hero-art .reel-card:nth-child(3) { transform: translateY(-6px) rotate(1deg); }
.hero-art .reel-card:nth-child(4) { transform: translateY(10px) rotate(-2deg); }
.hero-art .reel-card:nth-child(5) { transform: translateY(-12px) rotate(3deg); }
.hero-art .reel-card:nth-child(6) { transform: translateY(4px) rotate(-1deg); }

.reel-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--accent-ink);
  opacity: 0.9;
}
.reel-dur {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: var(--t-xs);
  color: var(--accent-ink);
  opacity: 0.85;
}

/* ---- Trust strip --------------------------------------------------------- */

.trust-strip {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.content-page {
  padding-top: var(--s-4);
}

/* ---- Section heads -------------------------------------------------------- */

.section-head {
  max-width: 620px;
  margin: 0 auto var(--s-8);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.section-head > * + * {
  margin-top: var(--s-2);
}
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--accent-text);
}
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.section-sub {
  color: var(--muted);
}

/* ---- Feature + step cards -------------------------------------------------- */

.feature-card,
.step-card {
  padding: var(--s-6);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.feature-card:hover,
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-raised);
}
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-4);
}

.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.step-badge {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--muted);
}
.step-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Render showcase -------------------------------------------------------- */

.render-panel {
  padding: var(--s-7);
}
.render-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--s-3);
}
.render-grid .reel-card {
  width: 100%;
  height: 64px;
  transform: none;
}
.render-grid .reel-card:hover {
  transform: translateY(-3px);
}

/* ---- Pricing -------------------------------------------------------------- */

.plan-card {
  position: relative;
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
}
.plan-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-raised);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
}
.plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.plan-amount {
  font-size: var(--t-4xl);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: var(--track-tight);
}
.plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.plan-list > * + * {
  margin-top: var(--s-3);
}
.plan-list li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink);
}

/* ---- Testimonials ------------------------------------------------------------ */

.testimonial-card {
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
}
.quote-mark {
  width: 26px;
  height: 26px;
  color: var(--accent-border);
  margin-bottom: var(--s-3);
}
.testimonial-quote {
  font-size: var(--t-lg);
  color: var(--ink);
  flex: 1;
}

/* ---- Closing CTA band ---------------------------------------------------- */

.cta-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: var(--s-9);
  padding: var(--s-11) var(--s-6);
}
.cta-band-inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta-band-inner > * + * {
  margin-top: var(--s-5);
}
.cta-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: var(--track-tight);
}
.cta-sub {
  opacity: 0.92;
  max-width: 46ch;
}
.cta-form {
  width: 100%;
}
.cta-band .waitlist-note-ok,
.cta-band .waitlist-note-err {
  color: inherit;
}

/* ---- Footer ---------------------------------------------------------------- */

.site-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: var(--s-9);
  padding: var(--s-9) var(--s-6) var(--s-8);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.site-footer > * + * {
  margin-top: var(--s-2);
}
.footer-brand { justify-content: center; }
.footer-tagline { max-width: 40ch; }
.footer-links {
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-2);
}
.footer-links a {
  color: var(--muted);
  font-size: var(--t-sm);
  text-decoration: none;
}
.footer-links a:hover { color: var(--ink); }

/* ---- Small screens ---------------------------------------------------------- */

@media (max-width: 640px) {
  .hero { padding: var(--s-9) var(--s-4); gap: var(--s-8); }
  .hero-art { gap: var(--s-2); }
  .reel-card { width: 78px; height: 52px; }
  .reel-dur { font-size: var(--t-xs); right: 6px; bottom: 4px; }
  .hero-stats { gap: var(--s-5); }
  .trust-strip { padding: var(--s-4); }
  .cta-band, .hero, .site-footer, .trust-strip { padding-left: var(--s-4); padding-right: var(--s-4); }
  .waitlist-form .input-group {
    flex-direction: column;
    align-items: stretch;
  }
  .waitlist-form .input-group > * + * {
    margin-top: var(--s-2);
  }
  .waitlist-form .btn {
    width: 100%;
    justify-content: center;
  }
}