/* FrameOne marketing site: small layer of custom styles on top of Tailwind CDN. */
:root {
  color-scheme: dark;
  --ink: #f5f5f2;
  --muted: #a6a69f;
  --line: rgba(255, 255, 255, 0.12);
  --paper: #10110f;
  --lime: #d4ff3f;
  --orange: #ff8c52;
}

html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); }

.grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-grid {
  background-image: linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.display { letter-spacing: -0.055em; line-height: .94; }
.eyebrow { letter-spacing: .18em; }
.hairline { border-color: var(--line); }
.text-muted { color: var(--muted); }
.text-lime { color: var(--lime); }
.bg-lime { background: var(--lime); color: #10110f; }
.bg-orange { background: var(--orange); }

.btn-primary { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(212,255,63,.16); background: #e0ff73; }
.btn-ghost { transition: border-color .2s ease, color .2s ease; }
.btn-ghost:hover { border-color: rgba(212,255,63,.7); color: var(--lime); }

.phone {
  aspect-ratio: 9 / 18.7;
  border: 7px solid #2a2b28;
  border-radius: 2.6rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 34px 90px rgba(0,0,0,.55);
  background: #1b1c19;
}
.phone-screen {
  background: radial-gradient(circle at 70% 25%, rgba(255,193,113,.4), transparent 30%), linear-gradient(145deg, #16393d, #a95d3d 48%, #e3bc8a);
}

.film-card { background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); border: 1px solid var(--line); }
.film-card:hover { border-color: rgba(212,255,63,.45); }
.feature-number { color: rgba(212,255,63,.45); }

/* Typography for legal pages; Tailwind CDN does not ship the typography plugin. */
.prose h2 { margin: 2.5rem 0 0.75rem; font-size: 1.25rem; line-height: 1.35; color: var(--ink); }
.prose p { margin: 1rem 0; }
.prose a { color: var(--lime); }

@media (max-width: 640px) {
  .display { letter-spacing: -0.045em; }
  .phone { max-width: 250px; }
}