/* BlurCam marketing site — shared styles.
   System font stack on purpose: zero network cost, and it renders in the
   same face as the app itself on every visitor's device. */

:root {
  --bg: #0a0a0b;
  --bg-raised: #141416;
  --bg-card: #18181b;
  --border: #26262a;
  --text: #f5f5f7;
  --text-dim: #a1a1a8;
  --text-faint: #6b6b72;
  --accent: #f4501e;
  --accent-bright: #ff5a2b;
  --accent-dim: #7a2a12;
  --green: #34c759;
  --radius: 14px;
  --radius-lg: 22px;
  --max-width: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
  /* Aspect ratio always follows the file, never the width/height attributes.
     Those attributes exist to reserve layout space and avoid content shift,
     but if one ever drifts out of sync with the actual image the picture
     would render stretched — this makes that impossible. */
  height: auto;
}

a {
  color: var(--accent-bright);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

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

header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.brand:hover {
  text-decoration: none;
}

nav.links {
  display: flex;
  align-items: center;
  gap: 28px;
}

nav.links a {
  color: var(--text-dim);
  font-size: 0.94rem;
  font-weight: 500;
}

nav.links a:hover {
  color: var(--text);
  text-decoration: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(244, 80, 30, 0.55);
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-ghost {
  background: var(--bg-raised);
  color: var(--text);
  border-color: var(--border);
}

/* Pre-launch state. A <span>, not a disabled <a> — there is nowhere to go
   yet, and a link that goes nowhere is worse than a label that says so.
   Swap these back to real App Store links on release day. */
.btn-soon {
  background: var(--bg-raised);
  color: var(--text-dim);
  border-color: var(--border);
  cursor: default;
}

.btn-soon .badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #04210c;
  background: var(--green);
  padding: 3px 8px;
  border-radius: 999px;
}

.btn-ghost:hover {
  border-color: #3a3a40;
}

.nav .btn {
  padding: 9px 18px;
  font-size: 0.9rem;
}

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

.hero {
  padding: 84px 0 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(
    ellipse at center,
    rgba(244, 80, 30, 0.22),
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}

.hero .content {
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 22px;
}

.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18);
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4.1rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

h1 .accent {
  color: var(--accent-bright);
}

.lede {
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: var(--text-dim);
  max-width: 640px;
  margin: 0 auto 36px;
}

.cta-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.cta-note {
  font-size: 0.86rem;
  color: var(--text-faint);
}

.hero-shot {
  margin-top: 56px;
  position: relative;
}

.hero-shot img {
  max-width: 300px;
  margin: 0 auto;
  border-radius: 40px;
  box-shadow: 0 40px 90px -30px rgba(244, 80, 30, 0.35),
    0 20px 60px -20px rgba(0, 0, 0, 0.6);
}

/* ---------- Sections ---------- */

section {
  padding: 88px 0;
}

section.tight {
  padding: 56px 0;
}

.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
}

.section-head .kicker {
  color: var(--accent-bright);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}

.section-head p {
  color: var(--text-dim);
  font-size: 1.05rem;
  margin: 0;
}

/* Feature grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.card .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--accent-bright), var(--accent-dim));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 1.3rem;
}

.card h3 {
  font-size: 1.08rem;
  margin: 0 0 8px;
  font-weight: 700;
}

.card p {
  color: var(--text-dim);
  font-size: 0.94rem;
  margin: 0;
}

/* Alternating showcase rows */

.showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.showcase.reverse .showcase-media {
  order: 2;
}

.showcase-media img {
  max-width: 260px;
  margin: 0 auto;
  border-radius: 32px;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.55);
}

.showcase-text h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.showcase-text p {
  color: var(--text-dim);
  font-size: 1.02rem;
  margin: 0 0 20px;
}

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-dim);
  font-size: 0.96rem;
}

.check-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(52, 199, 89, 0.15);
  border: 1px solid rgba(52, 199, 89, 0.4);
  position: relative;
}

.check-list li::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: translate(15px, -14px) rotate(45deg);
}

/* Style chips (blur styles strip) */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.chip {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-dim);
}

/* Pricing */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.price-card.highlight {
  border-color: var(--accent);
  background: linear-gradient(180deg, #1c130d, var(--bg-card) 40%);
  position: relative;
}

.price-card.highlight::before {
  content: "Free";
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--green);
  color: #04210c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.price-card h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.price-card .sub {
  color: var(--text-faint);
  font-size: 0.86rem;
  margin-bottom: 18px;
}

.price {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.price span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-faint);
}

.price-card ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.price-card ul li {
  padding-left: 20px;
  position: relative;
}

.price-card ul li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--text-faint);
}

.pricing-note {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.86rem;
  max-width: 560px;
  margin: 32px auto 0;
}

/* Callout banner */

.callout {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
}

.callout h2 {
  margin-bottom: 12px;
}

.callout p {
  color: var(--text-dim);
  max-width: 520px;
  margin: 0 auto 28px;
}

/* FAQ */

details.faq {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

details.faq summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

details.faq summary::-webkit-details-marker {
  display: none;
}

details.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--text-faint);
  font-weight: 400;
  flex: 0 0 auto;
}

details.faq[open] summary::after {
  content: "\2212";
}

details.faq .a {
  color: var(--text-dim);
  margin-top: 14px;
  font-size: 0.96rem;
  line-height: 1.6;
}

/* ---------- Legal / long-form content pages ---------- */

.legal {
  padding: 56px 0 100px;
}

.legal .header {
  margin-bottom: 44px;
}

.legal .header .kicker {
  color: var(--accent-bright);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

.legal .updated {
  color: var(--text-faint);
  font-size: 0.9rem;
  margin-top: 8px;
}

.legal .body {
  max-width: 760px;
}

.legal .body h2 {
  font-size: 1.35rem;
  margin: 44px 0 14px;
}

.legal .body h2:first-child {
  margin-top: 0;
}

.legal .body p {
  color: var(--text-dim);
  font-size: 1rem;
  margin: 0 0 16px;
}

.legal .body ul,
.legal .body ol {
  color: var(--text-dim);
  font-size: 1rem;
  padding-left: 22px;
  margin: 0 0 16px;
}

.legal .body li {
  margin-bottom: 8px;
}

.legal .body strong {
  color: var(--text);
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 0.92rem;
}

.legal th,
.legal td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}

.legal th {
  color: var(--text);
  font-weight: 650;
}

.callout-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 20px;
  font-size: 0.94rem;
  color: var(--text-dim);
}

.toc {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 40px;
}

.toc div {
  font-weight: 700;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  font-size: 0.92rem;
}

.toc a {
  color: var(--text-dim);
}

.toc a:hover {
  color: var(--accent-bright);
}

/* ---------- Support page ---------- */

.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 56px;
}

.support-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
}

.support-card h3 {
  font-size: 1rem;
  margin: 0 0 8px;
}

.support-card p {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 0 0 14px;
}

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

footer.site {
  border-top: 1px solid var(--border);
  padding: 56px 0 40px;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand {
  max-width: 320px;
}

.footer-brand .brand {
  margin-bottom: 12px;
}

.footer-brand p {
  color: var(--text-faint);
  font-size: 0.88rem;
}

.footer-cols {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.footer-col div.title {
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 14px;
}

.footer-col a {
  display: block;
  color: var(--text-dim);
  font-size: 0.92rem;
  margin-bottom: 10px;
}

.footer-col a:hover {
  color: var(--text);
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.84rem;
}

/* ---------- Utility ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Parked above the viewport, not beside it. `left: -9999px` is the usual
   trick and it is wrong in right-to-left: the browser counts that offset as
   real width, so every RTL page scrolled ~10000px sideways. Moving it
   vertically hides it just as well in both directions. */
.skip-link {
  position: absolute;
  inset-inline-start: 0;
  top: -100px;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  z-index: 100;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

@media (max-width: 760px) {
  nav.links {
    display: none;
  }

  .showcase,
  .showcase.reverse .showcase-media {
    grid-template-columns: 1fr;
    order: unset;
  }

  .showcase {
    display: flex;
    flex-direction: column-reverse;
    gap: 32px;
  }

  section {
    padding: 60px 0;
  }

  .toc ol {
    columns: 1;
  }
}

/* ---------- Language picker ---------- */

/* Sits in the footer of every localized page. A reader who lands on the wrong
   language should be one tap from the right one, and search engines need the
   pages to reference each other or they treat 24 translations of the same
   page as duplicates and pick one arbitrarily. */
.lang-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 28px;
  margin-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
}

.lang-picker a {
  color: var(--text-faint);
}

.lang-picker a:hover {
  color: var(--text);
  text-decoration: none;
}

.lang-current {
  color: var(--accent-bright);
  font-weight: 600;
}

/* Right-to-left. Only the writing direction changes — the layout is already
   symmetric, so nothing else needs mirroring. */
[dir="rtl"] .check-list li::after {
  transform: translate(-15px, -14px) rotate(45deg);
}

/* ---------- Official App Store badge ---------- */

.appstore-badge {
  display: inline-block;
  line-height: 0;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.appstore-badge img {
  height: 54px;
  width: auto;
}

.appstore-badge:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.15);
}

.appstore-badge.small img {
  height: 40px;
}

/* ---------- Motion ----------
   Everything is opt-in via .reveal and gated behind prefers-reduced-motion.
   The observer adds .in; with JS disabled the fallback at the bottom keeps
   content visible, so nothing depends on script to be readable. */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.reveal.d2 { transition-delay: 0.1s; }
.reveal.d3 { transition-delay: 0.2s; }
.reveal.d4 { transition-delay: 0.3s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.hero .eyebrow { animation: hero-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero h1 { animation: hero-in 0.7s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero .lede { animation: hero-in 0.7s 0.16s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero .cta-row, .hero .cta-note { animation: hero-in 0.7s 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero .hero-shot { animation: hero-in 0.9s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Ambient glow behind the phone. Pure decoration, so it sits in a pseudo
   element and never touches layout. */
.hero-shot {
  position: relative;
}

.hero-shot::before {
  content: "";
  position: absolute;
  inset: 6% -12% -4% -12%;
  background: radial-gradient(ellipse 60% 55% at 50% 42%,
    rgba(244, 80, 30, 0.22), transparent 70%);
  filter: blur(12px);
  z-index: -1;
  animation: glow-breathe 7s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.card,
.price-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: #3a3a40;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .eyebrow, .hero h1, .hero .lede, .hero .cta-row, .hero .cta-note,
  .hero .hero-shot { animation: none; }
  .hero-shot::before { animation: none; }
  .card, .price-card, .appstore-badge { transition: none; }
}

/* ---------- Feedback & rating ---------- */

.feedback-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}

.feedback-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.feedback-card:hover {
  transform: translateY(-4px);
  border-color: #3a3a40;
}

.feedback-card .icon {
  font-size: 1.7rem;
  line-height: 1;
}

.feedback-card h3 {
  margin: 0;
  font-size: 1.15rem;
}

.feedback-card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
  flex-grow: 1;
}

.feedback-card .stars {
  color: #ffb400;
  font-size: 1.1rem;
  letter-spacing: 3px;
}

.feedback-card textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.95rem;
  padding: 12px 14px;
}

.feedback-card textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Trial line on the highlighted plan card. */
.price-card .sub.trial {
  color: var(--green);
  font-weight: 600;
  margin-top: 4px;
}