/* =============================================================================
   FlicksForge — landing page styles
   Dark theme, matches the app. No framework, no build step.
   ============================================================================= */

:root {
  --bg-0: #0a0e1a;
  --bg-1: #0d1220;
  --bg-2: #141a2b;
  --bg-3: #1c2338;
  --line: #2a324b;
  --line-soft: rgba(120, 140, 180, 0.12);
  --text-0: #e8edf8;
  --text-1: #c7cfe0;
  --text-2: #98a3bb;
  --text-3: #6b7490;
  --accent-blue: #3d8bff;
  --accent-blue-bright: #5fa3ff;
  --accent-orange: #ff7a2d;
  --accent-orange-bright: #ff9855;
  --glow: 0 0 0 1px rgba(95, 163, 255, 0.2), 0 20px 60px -20px rgba(95, 163, 255, 0.25);
  --radius: 14px;
  --radius-sm: 10px;
  --max-w: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-blue); text-decoration: none; }
a:hover { color: var(--accent-blue-bright); }
h1, h2, h3, h4 { color: var(--text-0); line-height: 1.2; margin: 0 0 0.4em; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; background: var(--bg-2); padding: 0.1em 0.4em; border-radius: 4px; color: var(--accent-orange-bright); }

/* Subtle background gradient that doesn't overwhelm */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(61, 139, 255, 0.08), transparent 60%),
    radial-gradient(ellipse at 90% 10%, rgba(255, 122, 45, 0.06), transparent 55%);
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  backdrop-filter: saturate(140%) blur(14px);
  background: rgba(10, 14, 26, 0.7);
  border-bottom: 1px solid var(--line-soft);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--text-0);
  font-size: 17px;
}
.brand img { border-radius: 8px; }
.site-header nav {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 14px;
}
.site-header nav a { color: var(--text-2); }
.site-header nav a:hover { color: var(--text-0); }
.site-header nav .btn { color: #fff; }
@media (max-width: 720px) {
  .site-header nav a:not(.btn) { display: none; }
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn-lg { padding: 14px 22px; font-size: 16px; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-blue) 0%, #2d77f0 100%);
  box-shadow: 0 8px 28px -10px rgba(61, 139, 255, 0.7);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-blue-bright) 0%, #3d83f6 100%);
  color: #fff;
  transform: translateY(-1px);
}
.btn-ghost {
  color: var(--text-0);
  background: var(--bg-3);
  border-color: var(--line);
}
.btn-ghost:hover {
  background: var(--bg-2);
  border-color: var(--accent-blue);
  color: var(--text-0);
}
.btn-icon { font-size: 1.1em; line-height: 0; }

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

.hero {
  padding: clamp(48px, 8vw, 120px) var(--gutter) clamp(32px, 6vw, 72px);
  text-align: center;
}
.hero-inner {
  max-width: 860px;
  margin: 0 auto;
}
.hero-logo {
  width: clamp(110px, 16vw, 160px);
  height: auto;
  margin: 0 auto 24px;
  border-radius: 28px;
  box-shadow: var(--glow);
}
.hero h1 {
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #fff 0%, #a9b5d1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-tagline {
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--text-1);
  max-width: 640px;
  margin: 0 auto 36px;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-badges {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--text-3);
  font-size: 13px;
}

/* Founders-phase callout directly below the hero CTAs. A subtle warm-
   accent pill that says "time-sensitive" without being a spammy banner. */
.hero-founders-note {
  margin: 18px auto 0;
  max-width: 560px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--text-1);
  background: rgba(255, 122, 45, 0.08);
  border: 1px solid rgba(255, 122, 45, 0.25);
}
.hero-founders-note strong { color: var(--text-0); }
.hero-founders-link { color: var(--accent-orange-bright); }
.hero-founders-link:hover { color: var(--accent-orange); }

/* --- Demo --------------------------------------------------------------- */

.demo {
  padding: 0 var(--gutter) clamp(48px, 8vw, 100px);
}
.demo-frame {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
  aspect-ratio: 16 / 9;
}
.demo-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.demo-frame video { width: 100%; height: auto; display: block; }
.demo-frame--video { aspect-ratio: auto; }

/* Unmute overlay button --------------------------------------------------- */
.demo-unmute {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font: 500 14px/1 inherit;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.3s ease, transform 0.15s ease, background 0.15s ease;
  z-index: 2;
}
.demo-unmute:hover {
  background: var(--accent-orange, #ff6b1a);
  transform: scale(1.05);
}
.demo-unmute:focus-visible {
  outline: 2px solid var(--accent-orange, #ff6b1a);
  outline-offset: 2px;
}
.demo-unmute-icon {
  flex: 0 0 auto;
}
/* Icon toggle — show "off" icon when muted, "on" icon when audible */
.demo-unmute .demo-unmute-icon--on { display: none; }
.demo-unmute:not(.is-muted) .demo-unmute-icon--off { display: none; }
.demo-unmute:not(.is-muted) .demo-unmute-icon--on { display: inline-block; }
@media (max-width: 480px) {
  .demo-unmute-label { display: none; }
  .demo-unmute { padding: 10px; }
}
.demo-placeholder {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-2);
  text-align: center;
  padding: 20px;
}
.demo-play {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue) 0%, #2d77f0 100%);
  color: #fff;
  font-size: 32px;
  line-height: 80px;
  box-shadow: 0 20px 50px -10px rgba(61, 139, 255, 0.5);
}
.demo-placeholder-note {
  font-size: 12px;
  color: var(--text-3);
  margin: 0;
}

/* --- Generic section heads --------------------------------------------- */

.section-head {
  max-width: var(--max-w);
  margin: 0 auto 44px;
  padding: 0 var(--gutter);
  text-align: center;
}
.section-head.narrow { max-width: 760px; }
.section-head h2 {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lede {
  font-size: 17px;
  color: var(--text-1);
  max-width: 640px;
  margin: 0 auto;
}

/* --- Features grid ------------------------------------------------------ */

.features {
  padding: clamp(48px, 8vw, 100px) 0;
  background: linear-gradient(180deg, transparent, rgba(20, 26, 43, 0.5), transparent);
}
.feature-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.feature-card {
  padding: 24px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border 0.2s ease, transform 0.2s ease;
}
.feature-card:hover {
  border-color: rgba(95, 163, 255, 0.4);
  transform: translateY(-2px);
}
.feature-icon {
  font-size: 28px;
  margin-bottom: 12px;
  line-height: 1;
}
.feature-card h3 {
  font-size: 17px;
  margin-bottom: 8px;
}
.feature-card p {
  color: var(--text-2);
  font-size: 14.5px;
  margin: 0;
}

/* --- From iFlicks ------------------------------------------------------- */

.from-iflicks {
  padding: clamp(48px, 8vw, 100px) var(--gutter);
}
.compare {
  max-width: var(--max-w);
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.compare-col {
  padding: 24px 28px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.compare-col h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 14px;
  font-weight: 600;
}
.compare-col ul {
  padding-left: 18px;
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
}
.compare-col ul li { margin-bottom: 8px; }
.compare-col ul li::marker { color: var(--accent-orange); }

/* --- Screenshots -------------------------------------------------------- */

.screenshots {
  padding: clamp(48px, 8vw, 100px) 0;
  background: linear-gradient(180deg, transparent, rgba(20, 26, 43, 0.5), transparent);
}
.shot-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.shot {
  margin: 0;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.shot-wide { grid-column: span 2; }
@media (max-width: 720px) { .shot-wide { grid-column: span 1; } }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-2);
}
.shot figcaption {
  font-size: 13px;
  color: var(--text-3);
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
}
.shot-placeholder {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--text-3);
  font-size: 14px;
  text-align: center;
  background: repeating-linear-gradient(
    45deg,
    rgba(40, 50, 70, 0.3),
    rgba(40, 50, 70, 0.3) 12px,
    rgba(40, 50, 70, 0.5) 12px,
    rgba(40, 50, 70, 0.5) 24px
  );
}

/* --- Download band ------------------------------------------------------ */

.download {
  padding: clamp(60px, 10vw, 120px) var(--gutter);
  text-align: center;
  background:
    radial-gradient(ellipse at center, rgba(61, 139, 255, 0.15), transparent 60%);
}
.download-inner { max-width: 620px; margin: 0 auto; }
.download-inner h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 16px;
}
.download-inner .btn { margin: 16px 0 18px; }
.download-sub {
  color: var(--text-3);
  font-size: 13px;
  margin: 4px 0;
}

/* --- Founders' list email capture -------------------------------------- */

.founders-form {
  margin: 32px auto 0;
  max-width: 480px;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--bg-1);
  border: 1px solid var(--line);
  text-align: center;
}
.founders-form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.founders-form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.founders-form-row input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-0);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  transition: border 0.15s ease, box-shadow 0.15s ease;
}
.founders-form-row input[type="email"]::placeholder { color: var(--text-3); }
.founders-form-row input[type="email"]:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(61, 139, 255, 0.15);
}
.founders-form-row .btn {
  margin: 0;
  flex-shrink: 0;
}
.founders-form-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-3);
}
.founders-success-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-0);
  letter-spacing: 0.01em;
}

/* --- FAQ ---------------------------------------------------------------- */

.faq {
  padding: clamp(48px, 8vw, 100px) var(--gutter);
}
.faq-list {
  max-width: 760px;
  margin: 0 auto;
}
details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  margin-bottom: 10px;
  padding: 4px 18px;
  transition: background 0.15s ease, border 0.15s ease;
}
details[open] { background: var(--bg-2); border-color: rgba(95, 163, 255, 0.3); }
details summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-weight: 500;
  color: var(--text-0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: '+';
  font-size: 22px;
  color: var(--text-3);
  line-height: 0.8;
  transition: transform 0.15s ease;
}
details[open] summary::after {
  content: '−';
}
details p {
  color: var(--text-1);
  font-size: 15px;
  margin: 0 0 14px;
}

/* --- Long-form doc pages (privacy policy, etc) ------------------------- */

.doc {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(48px, 6vw, 80px);
  color: var(--text-1);
  font-size: 16px;
  line-height: 1.7;
}
.doc h1 {
  font-size: clamp(30px, 4vw, 44px);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.doc h2 {
  font-size: 22px;
  margin: 40px 0 14px;
  letter-spacing: -0.01em;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc h3 {
  font-size: 17px;
  color: var(--text-0);
  margin: 22px 0 10px;
}
.doc p {
  margin: 0 0 16px;
  color: var(--text-1);
}
.doc ul, .doc ol {
  padding-left: 22px;
  margin: 0 0 18px;
  color: var(--text-1);
}
.doc ul li, .doc ol li { margin-bottom: 8px; }
.doc ul li::marker { color: var(--accent-orange); }
.doc code {
  background: var(--bg-2);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
  color: var(--accent-orange-bright);
}
.doc a { color: var(--accent-blue); }
.doc a:hover { color: var(--accent-blue-bright); }
.doc em { color: var(--text-0); font-style: italic; }
.doc strong { color: var(--text-0); }

.doc-meta {
  color: var(--text-3);
  font-size: 14px;
  margin: 0 0 32px;
}
.doc .lede {
  font-size: 17px;
  color: var(--text-1);
  padding: 16px 20px;
  border-left: 3px solid var(--accent-blue);
  background: rgba(61, 139, 255, 0.05);
  border-radius: 0 8px 8px 0;
  margin: 0 0 28px;
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 24px;
  font-size: 14.5px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.doc-table th,
.doc-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table th {
  background: var(--bg-2);
  color: var(--text-0);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.doc-footer-link {
  margin-top: 40px;
  font-size: 14px;
  color: var(--text-3);
}

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

.site-footer {
  padding: 56px var(--gutter) 40px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-3);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-0);
  font-weight: 600;
}
.footer-brand img { border-radius: 6px; }
.footer-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
}
.footer-nav a { color: var(--text-2); }
.footer-nav a:hover { color: var(--text-0); }
.footer-legal p {
  font-size: 12px;
  margin: 6px 0;
}
.footer-credits { color: var(--text-3); }
.footer-credits a { color: var(--text-2); }