/* fotoelek.com: the one stylesheet of the site (user request 31, 2026-11-07).
   Source of truth: the approved mockup (Claude Design canvas TSgwYo17Mtb5LWZP75aenR). Every
   value comes from its inline styles; a comment says where and why something differs. Boxes keep
   the browser's content-box sizing, as in the mockup, so flex-basis wraps at the same widths. */

/* Inter 4.1 (rsms/inter), InterVariable.woff2 unchanged; SIL Open Font License 1.1, see
   /fonts/Inter-LICENSE.txt. Served from this site: no request goes to another host. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2?v=4.1") format("woff2");
}

:root {
  --petrol: #0F4C5C;
  --petrol-dark: #0A3340;
  --petrol-mid: #1B6F85;
  --petrol-light: #7FB3C4;
  --petrol-pale: #E3F0F3;
  --petrol-line: #B9D8E2;   /* outline buttons, light text on dark grounds */
  --petrol-wash: #F4F9FA;   /* light panels */
  --petrol-bowl: #0B3F4D;   /* the sieve's bowl */
  --amber: #E9A23B;
  --amber-pale: #FBEFD9;
  --amber-ink: #7A4B00;     /* "kopya" tags */
  /* Small amber text, darkened or lightened just enough for 4.5:1 (WCAG AA): the mockup's
     #C47A12 gives 3.3:1 on the light ground, the brand amber 4.4:1 on petrol. */
  --amber-text: #A0640E;
  --amber-on-petrol: #EBA748;
  --amber-hover: #F0B45E;
  --folder: #E9C98F;
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --text: #1C1F20;
  --text-2: #3E4447;
  --text-3: #5C6366;
  --line: #EEF1F2;
  --line-2: #E3E7E9;
  --line-3: #D9DEE0;
  --line-4: #F1F3F4;
  --screen: #111314;
  --font: Inter, "Segoe UI", system-ui, sans-serif;
  --focus: var(--petrol-mid);
  /* Theme-dependent roles (2026-11-08); the dark theme at the end of the file redefines them. */
  --ink: #1C1F20;            /* text on amber, both themes */
  --heading: var(--petrol-dark);
  --accent: var(--petrol);
  --accent-2: var(--petrol-mid);
  --tint: var(--petrol-pale);
  --wash: var(--petrol-wash);
  --amber-tint: var(--amber-pale);
  --card: #FFFFFF;
  color-scheme: light;
}

/* ---- Base ---- */

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

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

/* A column as tall as the window: on the short inner pages the footer stays at the bottom. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  /* The mockup loaded Inter from Google Fonts at its text optical size; keep that look. */
  font-optical-sizing: none;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

main { flex: 1 0 auto; }

h1, h2, h3, p, figure, blockquote { margin: 0; }

:where(a) { color: var(--accent); }
:where(a):hover { color: var(--heading); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.on-dark { --focus: var(--amber); }

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

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -200px;
  z-index: 10;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--petrol);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus { top: 12px; color: #FFFFFF; }

/* ---- Shared pieces ---- */

.inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
  display: flex;
  flex-direction: column;
}

.section-head {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-text);
}

.on-dark .eyebrow { color: var(--amber); }
.eyebrow--on-petrol,
.on-dark .eyebrow--on-petrol { color: var(--amber-on-petrol); }

.h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--heading);
}

.on-dark .h2 { color: #FFFFFF; }

.lead {
  font-size: 1.1875rem;
  color: var(--text-2);
}

.on-dark .lead { color: var(--petrol-line); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Buttons. The mockup had no hover state; a slightly darker or lighter ground is added. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-decoration: none;
}

.btn--sm {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 0.9375rem;
}

.btn--lg {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: 1.0625rem;
}

.btn--xl {
  min-height: 56px;
  padding: 0 28px;
  border-radius: 16px;
  font-size: 1.125rem;
  font-weight: 700;
}

.btn--primary { background: var(--petrol); color: #FFFFFF; }
.btn--primary:hover { background: var(--petrol-dark); color: #FFFFFF; }
.btn--raised { box-shadow: 0 8px 20px rgba(15, 76, 92, 0.25); }

.btn--outline {
  padding: 0 22px;
  border: 1.5px solid var(--petrol-line);
  color: var(--accent);
}

.btn--outline:hover {
  border-color: var(--petrol-light);
  background: var(--tint);
  color: var(--heading);
}

.btn--amber { background: var(--amber); color: var(--ink); }
.btn--amber:hover { background: var(--amber-hover); color: var(--ink); }

@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
}

/* The sieve's hoop: wire mesh drawn with two repeating gradients. */
.hoop {
  border-radius: 50%;
  border: 18px solid var(--petrol-light);
  box-sizing: border-box;
  background-color: var(--petrol-bowl);
  background-image:
    repeating-linear-gradient(0deg, rgba(127, 179, 196, 0.22) 0 2px, transparent 2px var(--mesh)),
    repeating-linear-gradient(90deg, rgba(127, 179, 196, 0.22) 0 2px, transparent 2px var(--mesh));
}

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

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
}

.brand img { width: 36px; height: 36px; display: block; }

.brand span {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px 22px;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  font-weight: 500;
}

.main-nav a {
  color: var(--text);
  text-decoration: none;
  padding: 10px 0;
}

.main-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Narrow screens: the logo and the button share the first row, the menu wraps below
   (the mockup let the button drop to a row of its own). */
@media (max-width: 860px) {
  .site-header__cta { order: 2; }
  .main-nav { order: 3; flex-basis: 100%; }
}

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

.hero { background: var(--bg); }

.hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 80px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.hero__text {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.pill {
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--tint);
  padding: 6px 12px;
  border-radius: 999px;
}

.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--heading);
}

.hero__lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 34rem;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--text-3);
}

.facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.facts li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--amber);
  display: inline-block;
}

.hero__art {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1.04;
}

/* What the sieve sifts out falls through and fades (the mockup's "elenir"). */
@keyframes sift {
  0% { transform: translateY(-14px); opacity: 0; }
  14% { opacity: 1; }
  62% { opacity: 1; }
  100% { transform: translateY(160px); opacity: 0; }
}

.falling {
  position: absolute;
  animation: sift 7.5s ease-in infinite;
}

@media (prefers-reduced-motion: reduce) {
  .falling { animation: none; }
}

.falling--1 { left: 6%; top: 1%; width: 21%; animation-delay: -1s; }
.falling--2 { left: 31%; top: -2%; width: 19%; animation-delay: -3.6s; }
.falling--3 { left: 56%; top: 3%; width: 13%; animation-delay: -5.4s; }
.falling--4 { right: 4%; top: 0; width: 19%; animation-delay: -2.2s; }

.falling__card { position: relative; }
.falling--1 .falling__card { transform: rotate(-9deg); }
.falling--2 .falling__card { transform: rotate(7deg); }
.falling--3 .falling__card { transform: rotate(-4deg); }
.falling--4 .falling__card { transform: rotate(10deg); }

.falling__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  border: 3px solid #FFFFFF;
  box-sizing: border-box;
}

.falling__photo--blurred { filter: blur(1.5px) grayscale(0.5); }
.falling__photo--faded { opacity: 0.8; }

.falling__label {
  position: absolute;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--text-3);
  padding: 2px 8px;
  border-radius: 999px;
}

.falling__label--left { left: -6px; top: -12px; }
.falling__label--right { right: -6px; top: -12px; }
.falling__label--below { left: -10px; bottom: -10px; white-space: nowrap; }

.screenshot {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line-3);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 6px;
  box-sizing: border-box;
}

.screenshot span {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--line-3);
}

.screenshot span:nth-child(2) { width: 70%; }
.screenshot span:nth-child(3) { height: 22px; border-radius: 4px; background: var(--line); }
.screenshot span:nth-child(4) { width: 50%; }

.hoop--hero {
  --mesh: 26px;
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 0;
  aspect-ratio: 1 / 1;
  box-shadow: 0 30px 60px rgba(10, 51, 64, 0.28);
}

.kept {
  position: absolute;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 6px solid #FFFFFF;
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
  display: block;
}

.kept--1 { left: 19%; bottom: 36%; width: 38%; transform: rotate(-7deg); }
.kept--2 { right: 17%; bottom: 31%; width: 36%; transform: rotate(6deg); }
.kept--3 { left: 32%; bottom: 10%; width: 35%; transform: rotate(-1.5deg); }

.stage__badge {
  position: absolute;
  right: 0;
  bottom: 6%;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--amber);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* ---- Story ---- */

.story {
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.inner--story { gap: 56px; }

.story__body {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}

.timeline {
  flex: 1 1 440px;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding-block: 0;
  padding-inline: 30px 0;
  border-inline-start: 2px solid var(--tint);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.timeline li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: -39px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: var(--card);
  border: 3px solid var(--petrol-light);
  box-sizing: border-box;
}

.timeline .timeline__today::before {
  inset-inline-start: -41px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--amber);
  border: 0;
}

.timeline__year {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-2);
}

.timeline__today .timeline__year { color: var(--amber-text); }

.timeline h3 { font-size: 1.25rem; font-weight: 700; }
.timeline p { color: var(--text-2); }
.timeline b { color: var(--text); }

.story__side {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.window {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-3);
  background: var(--card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.window__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--line);
  font-size: 0.8125rem;
  color: var(--text-3);
}

.window__bar::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: var(--line-3);
  display: inline-block;
}

.files {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.files li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--line-4);
}

.files__icon {
  width: 18px;
  height: 14px;
  border-radius: 2px;
  background: var(--petrol-line);
  flex: 0 0 auto;
}

.files__icon--screenshot { background: var(--line-3); }
.files__icon--folder { background: var(--folder); }

.files__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.files__meta { color: var(--text-3); }

.tag {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
}

.tag--copy { color: var(--amber-ink); background: var(--amber-tint); }
.tag--muted { color: var(--text-2); background: var(--line); }

.through {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-2);
}

.through img { width: 28px; height: 28px; display: block; }

.sorted {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--petrol-line);
  background: var(--wash);
}

.sorted__path {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--heading);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--tint);
  padding: 3px 9px;
  border-radius: 999px;
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.sorted__note { font-size: 0.8125rem; color: var(--text-2); }

.callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 24px;
  border-radius: 24px;
  background: var(--amber-tint);
  text-align: center;
}

.callout__big {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--heading);
}

.callout__small { font-size: 1.125rem; color: var(--text-2); }

/* ---- How it works ---- */

.steps-section { background: var(--bg); }
.inner--steps { gap: 44px; }

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line-2);
}

.step h3 { font-size: 1.5rem; font-weight: 800; color: var(--heading); }
.step p { color: var(--text-2); }

.drop {
  height: 150px;
  border-radius: 14px;
  border: 2px dashed var(--petrol-light);
  background: var(--wash);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* flex-wrap added: the three sources fit a 390 px phone only just. */
.drop__sources {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.drop__sources span {
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--card);
  border: 1px solid var(--line-3);
  padding: 4px 9px;
  border-radius: 8px;
}

.drop__label { font-size: 0.9375rem; font-weight: 700; color: var(--accent); }

.progress {
  height: 150px;
  border-radius: 14px;
  background: var(--petrol);
  padding: 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  color: var(--petrol-pale);
  font-size: 0.8125rem;
}

.progress__head { display: flex; justify-content: space-between; }
.progress__head b { color: #FFFFFF; }

.progress__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--petrol-mid);
  overflow: hidden;
}

.progress__bar span {
  display: block;
  width: 68%;
  height: 100%;
  background: var(--amber);
}

.progress__list { display: flex; flex-direction: column; gap: 4px; }

.search {
  height: 150px;
  border-radius: 14px;
  background: var(--wash);
  border: 1px solid var(--line-2);
  padding: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search__box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--card);
  border: 1.5px solid var(--petrol-light);
  font-size: 0.875rem;
}

.search__box::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 5px;
  border: 2px solid var(--petrol-mid);
  display: inline-block;
}

/* The two picture grids fill what the box leaves (one row, minmax(0, 1fr)), so wide cards no
   longer push the pictures a few pixels out of the panel. */
.search__grid,
.phrase__grid {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
  flex: 1;
  min-height: 0;
}

.search__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.search__grid img,
.phrase__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* ---- The sieve ---- */

.sieve-section {
  background: var(--petrol-dark);
  color: var(--petrol-pale);
}

.inner--sieve { gap: 44px; }

.sieve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}

.sieve__out {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sieve__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--petrol-light);
}

.sieve__title--kept { color: var(--amber); }

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

.sieve__list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.sieve__list b { color: #FFFFFF; }
.sieve__list span { font-size: 0.9375rem; color: var(--petrol-line); }

.sieve__figure {
  flex: 0 1 300px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.hoop--small {
  --mesh: 22px;
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
}

.hoop--small img {
  position: absolute;
  left: 22%;
  top: 26%;
  width: 56%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 5px solid #FFFFFF;
  border-radius: 5px;
  box-sizing: border-box;
  transform: rotate(-6deg);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  display: block;
}

.sieve__kept {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sieve__big {
  font-size: 1.375rem;
  line-height: 1.4;
  font-weight: 600;
  color: #FFFFFF;
}

.sieve__note { color: var(--petrol-line); }

.stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid rgba(127, 179, 196, 0.35);
}

.stats__label { font-size: 0.9375rem; color: var(--petrol-line); }

.stats__number {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
}

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

.features-section { background: var(--bg); }
.inner--features { gap: 40px; }

.growth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  padding: 36px;
  border-radius: 24px;
  background: var(--petrol);
}

.growth__text {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.growth h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #FFFFFF;
}

.growth h3 + p { font-size: 1.0625rem; color: var(--petrol-pale); }

.growth__faces {
  flex: 2 1 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.growth__faces li { display: flex; flex-direction: column; gap: 4px; }

.growth__faces img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.growth__faces span {
  font-size: 0.75rem;
  color: var(--petrol-line);
  text-align: center;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line-2);
}

.feature h3 { font-size: 1.25rem; font-weight: 700; }
.feature p { color: var(--text-2); }

.feature__art {
  height: 132px;
  border-radius: 12px;
}

.faces {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--wash);
}

.faces > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.faces img {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.faces span { font-size: 0.6875rem; font-weight: 600; }

.faces .faces__new {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  border: 2px dashed var(--petrol-light);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--accent-2);
}

.faces .faces__hint { color: var(--text-3); }

.feature__map {
  width: 100%;
  height: 132px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.phrase {
  background: var(--wash);
  padding: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phrase__box {
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--card);
  border: 1.5px solid var(--petrol-light);
  font-size: 0.8125rem;
}

.phrase__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.memory {
  position: relative;
  overflow: hidden;
}

.memory img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.memory span {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #FFFFFF;
  background: rgba(10, 51, 64, 0.7);
  padding: 5px 10px;
  border-radius: 8px;
}

.enhance {
  display: flex;
  gap: 4px;
  overflow: hidden;
}

.enhance img {
  flex: 1;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  display: block;
}

.enhance__before { filter: blur(2px) contrast(0.85); }
.enhance__after { filter: contrast(1.08) saturate(1.1); }

.tv {
  background: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tv__screen {
  width: 70%;
  padding: 6px;
  background: var(--screen);
  border-radius: 6px;
}

.tv__screen img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.features-note { font-size: 1rem; color: var(--text-3); }

/* ---- Privacy (the program) ---- */

.privacy {
  background: var(--petrol-dark);
  color: var(--petrol-pale);
}

.inner--privacy {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.privacy__text {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.privacy__table {
  flex: 1 1 520px;
  min-width: 0;
  overflow-x: auto;
}

.compare {
  width: 100%;
  min-width: 460px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}

.compare thead th,
.compare thead td {
  text-align: start;
  padding: 12px 14px;
  font-weight: 600;
  color: var(--petrol-line);
}

.compare thead .compare__us {
  color: var(--ink);
  background: var(--amber);
  font-weight: 700;
  border-radius: 12px 12px 0 0;
}

.compare tbody th,
.compare tbody td {
  text-align: start;
  padding: 14px;
  border-top: 1px solid rgba(127, 179, 196, 0.25);
}

.compare tbody th { color: #FFFFFF; font-weight: 600; }
.compare tbody td { color: var(--petrol-line); }

.compare tbody .compare__us {
  background: rgba(233, 162, 59, 0.12);
  color: #FFFFFF;
  font-weight: 600;
}

.compare tbody tr:last-child .compare__us { border-radius: 0 0 12px 12px; }

/* ---- Founder's note ---- */

.founder { background: var(--surface); }

.inner--founder {
  max-width: 860px;
  padding: 88px 24px;
  gap: 18px;
}

.founder__note {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.founder blockquote {
  padding: 32px 34px;
  border-radius: 20px;
  background: var(--wash);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: clamp(1.1875rem, 2vw, 1.5rem);
  line-height: 1.55;
  color: var(--heading);
}

.founder figcaption { font-size: 1rem; color: var(--text-3); }

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

.pricing-section { background: var(--bg); }
.inner--pricing { gap: 40px; }

.plans {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}

.plan {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--line-2);
}

.plan--featured {
  border: 2px solid var(--amber);
  box-shadow: 0 16px 40px rgba(15, 76, 92, 0.12);
}

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.plan__name { font-size: 1.125rem; font-weight: 700; }

.plan__draft {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-2);
  background: var(--line);
  padding: 4px 10px;
  border-radius: 999px;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.plan__amount {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--heading);
}

.plan__unit { color: var(--text-3); }

.plan__founder {
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  background: var(--amber-tint);
  padding: 6px 12px;
  border-radius: 10px;
}

.plan__list {
  margin: 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-2);
}

.plan__action { margin-top: auto; }

/* ---- Questions ---- */

.faq {
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.inner--faq { max-width: 860px; gap: 28px; }

.faq__list { display: flex; flex-direction: column; }

/* The mockup's spacing (18 px above and below each question) is split between the details and
   the summary, so the whole question row is a 44 px target. A small chevron is added. */
.faq details {
  border-top: 1px solid var(--line-2);
  padding: 10px 0;
}

.faq details:last-child { border-bottom: 1px solid var(--line-2); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 28px;
  padding: 8px 0;
  font-size: 1.125rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 0 6px 5px 0;
  border-right: 2px solid var(--accent-2);
  border-bottom: 2px solid var(--accent-2);
  transform: rotate(45deg);
}

.faq details[open] > summary::after {
  margin-bottom: -5px;
  transform: rotate(-135deg);
}

.faq details p {
  margin: 2px 0 8px;
  color: var(--text-2);
}

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

.download { background: var(--petrol); }

.inner--download {
  max-width: 900px;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.download__mark { width: 64px; height: 64px; display: block; }

.download h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #FFFFFF;
}

.download__requirements { font-size: 0.9375rem; color: var(--petrol-line); }

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

.site-footer {
  background: var(--petrol-dark);
  color: var(--petrol-line);
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.site-footer__brand img { width: 28px; height: 28px; display: block; }
.site-footer__name { font-weight: 700; color: #FFFFFF; }
.site-footer__slogan { font-size: 0.875rem; }

.site-footer__meta,
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  font-size: 0.875rem;
}

/* 11 px instead of 10 px: a 44 px target at this font size. */
.site-footer__nav a {
  color: var(--petrol-line);
  text-decoration: none;
  padding: 11px 0;
}

.site-footer__nav a:hover {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer__copy { padding: 10px 0; }

/* ---- Inner pages: download / licence "coming soon", privacy notice, errors ---- */

.page { background: var(--bg); }

.inner--page {
  max-width: 860px;
  padding: 88px 24px 104px;
  gap: 20px;
}

.page__mark { width: 64px; height: 64px; display: block; }

.page h1 {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--heading);
}

.page__lead {
  max-width: 40rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--text-2);
}

.page__requirements { font-size: 0.9375rem; color: var(--text-3); }
.page .actions { margin-top: 8px; }

.page__lead a,
.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose {
  max-width: 44rem;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.prose section { display: flex; flex-direction: column; gap: 8px; }

.prose h2 {
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--heading);
}

.prose p { font-size: 1.0625rem; color: var(--text-2); }
.prose .prose__updated { font-size: 0.9375rem; color: var(--text-3); }

/* ---- Phones ---- */

@media (max-width: 560px) {
  /* Eight portraits of 28 px would be too small to read: two rows of four. */
  .growth__faces { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }

  /* The comparison fits the screen instead of scrolling sideways. */
  .compare { min-width: 0; font-size: 0.875rem; }
  .compare thead th,
  .compare thead td,
  .compare tbody th,
  .compare tbody td { padding: 10px; }

  .founder blockquote { padding: 24px 22px; }
}

/* ---- Header tools: language menu and theme switch (2026-11-08) ---- */

.site-header__tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lang-menu { position: relative; }

.lang-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  list-style: none;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-2);
}

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

.lang-menu summary:hover,
.lang-menu[open] summary {
  background: var(--tint);
  color: var(--accent);
}

/* Two columns: eleven names stay short enough for a phone screen. */
.lang-menu__list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: 260px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line-3);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

.lang-menu__list a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.9375rem;
  color: var(--text);
  text-decoration: none;
}

.lang-menu__list a:hover { background: var(--tint); color: var(--accent); }
.lang-menu__list a[aria-current] { font-weight: 700; color: var(--accent); }

.theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--text-2);
}

.theme-switch:hover { background: var(--tint); color: var(--accent); }

/* The switch leads away from the theme in use: the moon in light, the sun in dark. */
.theme-switch--to-light { display: none; }

@media (max-width: 860px) {
  .site-header__tools { order: 2; }
}

@media (max-width: 480px) {
  .lang-menu__current { display: none; }
  .site-header__inner { padding-inline: 16px; }
}

/* ---- Scripts the Inter font does not cover: the system's fonts (no outside request) ---- */

html:lang(ar) { --font: "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif; }
html:lang(zh) { --font: Inter, "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif; }
html:lang(ja) { --font: Inter, "Yu Gothic UI", Meiryo, "Hiragino Sans", "Noto Sans CJK JP", system-ui, sans-serif; }
html:lang(hi) { --font: Inter, "Nirmala UI", "Noto Sans Devanagari", system-ui, sans-serif; }

/* Tight Latin letter-spacing and line-height clip these scripts' marks. */
html:is(:lang(ar), :lang(zh), :lang(ja), :lang(hi)) :is(h1, h2, h3, .h2, .callout__big, .hero h1) {
  letter-spacing: normal;
  line-height: 1.3;
}

/* Right to left: file names stay left-to-right text. */
[dir="rtl"] .files__name { direction: ltr; text-align: end; unicode-bidi: isolate; }

/* ---- Dark theme (2026-11-08): the browser's choice, or ?theme=dark ---- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1214;
    --surface: #11181A;
    --card: #172124;
    --text: #E6ECED;
    --text-2: #B3BEC1;
    --text-3: #8D999D;
    --line: #1D272A;
    --line-2: #263236;
    --line-3: #334247;
    --line-4: #1A2326;
    --heading: #E8F3F6;
    --accent: #8ACBDC;
    --accent-2: #74BACD;
    --tint: #16333A;
    --wash: #122429;
    --amber-tint: #33270F;
    --amber-ink: #F2C36F;
    --amber-text: #EBA748;
    --focus: #8ACBDC;
    color-scheme: dark;
  }

  :root:not([data-theme="light"]) .theme-switch--to-dark { display: none; }
  :root:not([data-theme="light"]) .theme-switch--to-light { display: inline-flex; }
  :root:not([data-theme="light"]) :is(.btn--outline, .sorted) { border-color: #3F6B78; }
}

:root[data-theme="dark"] {
  --bg: #0D1214;
  --surface: #11181A;
  --card: #172124;
  --text: #E6ECED;
  --text-2: #B3BEC1;
  --text-3: #8D999D;
  --line: #1D272A;
  --line-2: #263236;
  --line-3: #334247;
  --line-4: #1A2326;
  --heading: #E8F3F6;
  --accent: #8ACBDC;
  --accent-2: #74BACD;
  --tint: #16333A;
  --wash: #122429;
  --amber-tint: #33270F;
  --amber-ink: #F2C36F;
  --amber-text: #EBA748;
  --focus: #8ACBDC;
  color-scheme: dark;
}

:root[data-theme="dark"] .theme-switch--to-dark { display: none; }
:root[data-theme="dark"] .theme-switch--to-light { display: inline-flex; }
:root[data-theme="dark"] :is(.btn--outline, .sorted) { border-color: #3F6B78; }