/* Fakkerni website. Brand tokens from the app (indigo, paper, mint, marigold). */
:root {
  --bg: #f7f5ff;
  --bg2: #efedfb;
  --surface: #ffffff;
  --ink: #1e1b4b;
  --ink2: #4a4770;
  --ink3: #67648c;
  --line: #e4e1f5;
  --primary: #1e1b4b;
  --on-primary: #f7f5ff;
  --mint: #5ed3b4;
  --mint-ink: #0f7a60;
  --marigold: #ffb627;
  --hero: #1e1b4b;
  --hero-ink: #f7f5ff;
  --hero-ink2: #c9c6ea;
  --shadow: 0 24px 60px -20px rgba(30, 27, 75, 0.35);
  --radius: 24px;
  --glow-a: rgba(94, 211, 180, 0.5);
  --glow-b: rgba(185, 180, 255, 0.65);
  --card-shadow: 0 22px 44px -26px rgba(30, 27, 75, 0.4);
  --line-hover: color-mix(in srgb, var(--mint) 55%, var(--line));
  /* Motion: one ease for things arriving, one for slow loops. Distances drop to 0 under reduce motion. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-loop: cubic-bezier(0.37, 0, 0.63, 1);
  --t-press: 120ms;
  --t-hover: 220ms;
  --t-reveal: 700ms;
  --t-enter: 800ms;
  --lift-sm: -2px;
  --lift: -4px;
  --lift-lg: -6px;
  --nudge: 4px;
  --pop: 1.08;
  --press: 0.98;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0d0c1f;
    --bg2: #13122a;
    --surface: #18172f;
    --ink: #f7f5ff;
    --ink2: #c9c6ea;
    --ink3: #9a97c2;
    --line: #2e2a5e;
    --primary: #b9b4ff;
    --on-primary: #0d0c1f;
    --mint-ink: #5ed3b4;
    --hero: #18172f;
    --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
    --glow-a: rgba(94, 211, 180, 0.3);
    --glow-b: rgba(124, 112, 255, 0.45);
    --card-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.75);
  }
}
:root[data-theme='dark'] {
  --bg: #0d0c1f;
  --bg2: #13122a;
  --surface: #18172f;
  --ink: #f7f5ff;
  --ink2: #c9c6ea;
  --ink3: #9a97c2;
  --line: #2e2a5e;
  --primary: #b9b4ff;
  --on-primary: #0d0c1f;
  --mint-ink: #5ed3b4;
  --hero: #18172f;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --glow-a: rgba(94, 211, 180, 0.3);
  --glow-b: rgba(124, 112, 255, 0.45);
  --card-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.75);
}
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Alexandria', 'Segoe UI', system-ui, sans-serif;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ── Top bar ─────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar .container { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 36px; width: auto; }
.logo-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo-light { display: none !important; }
  :root:not([data-theme='light']) .logo-dark { display: block !important; }
}
:root[data-theme='dark'] .logo-light { display: none !important; }
:root[data-theme='dark'] .logo-dark { display: block !important; }

/* Light / dark switch */
.theme-toggle {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink2); cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .sun { display: none; }
  :root:not([data-theme='light']) .theme-toggle .moon { display: block; }
}
:root[data-theme='dark'] .theme-toggle .sun { display: none; }
:root[data-theme='dark'] .theme-toggle .moon { display: block; }
.links { display: flex; gap: 22px; margin-inline-start: auto; }
.links a { text-decoration: none; color: var(--ink2); font-weight: 500; font-size: 15px; }
.links a:hover { color: var(--ink); }
.lang-switch {
  text-decoration: none; font-weight: 500; font-size: 14px; color: var(--ink2);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
}
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 700; border-radius: 999px; padding: 12px 22px; font-size: 15px;
}
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); }
.btn-sm { padding: 8px 16px; font-size: 14px; box-shadow: none; }
.btn svg { width: 20px; height: 20px; }

/* ── Hero ────────────────────────────────────────────── */
.hero { padding: 72px 0 56px; overflow: hidden; }
.hero .container { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500;
  color: var(--ink2); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
h1 { font-size: clamp(36px, 5.4vw, 58px); line-height: 1.1; margin: 20px 0 16px; letter-spacing: -0.01em; }
[dir='rtl'] h1 { line-height: 1.3; letter-spacing: 0; }
.lead { font-size: clamp(17px, 2vw, 19px); color: var(--ink2); max-width: 560px; margin: 0 0 28px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.meta { margin-top: 14px; font-size: 14px; color: var(--ink3); }
.phones { position: relative; height: 560px; }
.phone {
  position: absolute; width: 250px; border-radius: 38px; padding: 9px;
  background: #0b0a1a; box-shadow: var(--shadow);
}
.phone img { border-radius: 30px; }
.phone.front { inset-inline-start: 18%; top: 0; z-index: 2; }
.phone.back { inset-inline-start: 50%; top: 56px; transform: rotate(6deg); opacity: 0.96; }
[dir='rtl'] .phone.back { transform: rotate(-6deg); }

/* ── Trust strip ─────────────────────────────────────── */
.trust { border-block: 1px solid var(--line); background: var(--bg2); }
.trust ul {
  list-style: none; margin: 0; padding: 18px 0; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 12px 36px;
}
.trust li { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-weight: 500; font-size: 15px; }
.trust svg { width: 18px; height: 18px; color: var(--mint-ink); }

/* ── Sections ────────────────────────────────────────── */
section.block { padding: 88px 0; }
.section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 38px); line-height: 1.2; margin: 0 0 12px; }
.section-head p { color: var(--ink2); margin: 0; font-size: 17px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
}
.feature .icon {
  width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
  background: var(--bg2); color: var(--ink); margin-bottom: 16px;
}
.feature .icon svg { width: 24px; height: 24px; }
.feature h3 { margin: 0 0 6px; font-size: 18px; }
.feature p { margin: 0; color: var(--ink2); font-size: 15px; }

/* ── Gallery ─────────────────────────────────────────── */
.gallery-bar { display: flex; justify-content: center; margin-bottom: 28px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 4px; background: var(--surface); }
.seg button {
  font: inherit; font-size: 14px; font-weight: 500; border: 0; background: transparent; color: var(--ink2);
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
}
.seg button[aria-pressed='true'] { background: var(--primary); color: var(--on-primary); }
.gallery { display: flex; gap: 20px; overflow-x: auto; padding: 8px 4px 20px; scroll-snap-type: x mandatory; }
.gallery figure { margin: 0; flex: 0 0 220px; scroll-snap-align: start; text-align: center; }
.gallery .phone { position: static; width: 220px; padding: 7px; border-radius: 32px; }
.gallery .phone img { border-radius: 26px; }
.gallery figcaption { margin-top: 12px; font-weight: 500; color: var(--ink2); font-size: 15px; }

/* ── Install ─────────────────────────────────────────── */
.install { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.download-card {
  background: var(--hero); color: var(--hero-ink); border-radius: 32px; padding: 32px; box-shadow: var(--shadow);
}
.download-card h3 { margin: 0 0 4px; font-size: 24px; }
.download-card p { color: var(--hero-ink2); margin: 0 0 20px; }
.download-card .btn-primary { background: var(--hero-ink); color: var(--hero); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 18px; }
.facts div { background: rgba(247, 245, 255, 0.08); border-radius: 16px; padding: 12px 14px; }
.facts dt { font-size: 12px; color: var(--hero-ink2); }
.facts dd { margin: 2px 0 0; font-weight: 700; }
.checksum { font-size: 12px; color: var(--hero-ink2); word-break: break-all; }
.checksum code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.steps li {
  counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 18px 20px 18px 64px; position: relative;
}
[dir='rtl'] .steps li { padding: 18px 64px 18px 20px; }
.steps li::before {
  content: counter(step); position: absolute; inset-inline-start: 18px; top: 18px; width: 30px; height: 30px;
  border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary);
  font-weight: 700; font-size: 14px;
}
.steps h4 { margin: 0 0 4px; font-size: 16px; }
.steps p { margin: 0; color: var(--ink2); font-size: 15px; }
.note {
  margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--bg2);
  color: var(--ink2); font-size: 14px; border: 1px solid var(--line);
}

/* ── Privacy band ────────────────────────────────────── */
.privacy-band {
  background: var(--surface); border: 1px solid var(--line); border-radius: 32px; padding: 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
}
.privacy-band h2 { font-size: clamp(26px, 3.2vw, 34px); margin: 0 0 12px; line-height: 1.2; }
.privacy-band p { color: var(--ink2); margin: 0 0 20px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink2); }
.checks svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--mint-ink); margin-top: 2px; }

/* ── FAQ ─────────────────────────────────────────────── */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 4px 20px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--ink3); font-weight: 400; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { margin: 0 0 16px; color: var(--ink2); }

/* ── Footer ──────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 36px 0 48px; margin-top: 40px; }
footer .container { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
footer img { height: 30px; width: auto; }
footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
footer a { color: var(--ink2); text-decoration: none; font-size: 14px; }
footer a:hover { color: var(--ink); }
footer small { color: var(--ink3); width: 100%; }

/* ── Policy page ─────────────────────────────────────── */
.policy { max-width: 780px; margin: 0 auto; padding: 56px 20px 24px; }
.policy h1 { font-size: clamp(32px, 4.6vw, 44px); margin-top: 0; }
.policy h2 { font-size: 22px; margin: 36px 0 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.policy p, .policy li { color: var(--ink2); }
.policy a { color: var(--primary); }
.policy code { font-size: 0.92em; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .hero .container, .install, .privacy-band { grid-template-columns: 1fr; }
  .phones { height: 480px; max-width: 420px; margin: 0 auto; width: 100%; }
  .phone { width: 210px; }
  .features { grid-template-columns: 1fr 1fr; }
  .links { display: none; }
  .topbar .lang-switch { margin-inline-start: auto; }
  .topbar .container { gap: 12px; }
}
@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  section.block { padding: 64px 0; }
  .hero { padding-top: 48px; }
  .privacy-band { padding: 28px 22px; }
  .topbar .btn-sm { display: none; }
}

/* Release line under the hero button, and What's new in the download card */
.release-line { margin-top: 6px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; color: var(--ink3); }
.release-line a { color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; }
.whats-new { background: rgba(247, 245, 255, 0.08); border-radius: 16px; padding: 14px 16px; margin: 0 0 14px; }
.whats-new h4 { margin: 0 0 8px; font-size: 15px; }
.whats-new ul { margin: 0; padding-inline-start: 20px; color: var(--hero-ink2); font-size: 14px; line-height: 1.6; }
.whats-new li + li { margin-top: 4px; }
.download-card .all-versions { margin: 0 0 14px; font-size: 14px; }
.download-card .all-versions a { color: var(--hero-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Motion ──────────────────────────────────────────── */
/* Hover and press states run on every device; anything that travels or loops sits behind
   prefers-reduced-motion. Entrances and reveals move on `translate`, hover on `transform`,
   so the two never fight (and the back phone keeps its tilt). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root { --lift-sm: 0px; --lift: 0px; --lift-lg: 0px; --nudge: 0px; --pop: 1; --press: 1; }
}

/* Soft glow behind the phones (drawn for the light and dark themes, mirrored for RTL) */
.phones { isolation: isolate; }
.phones::before {
  content: ''; position: absolute; z-index: -1; inset-block: -6% -8%; inset-inline: -8% -14%;
  background:
    radial-gradient(closest-side at 40% 42%, var(--glow-a), transparent),
    radial-gradient(closest-side at 66% 62%, var(--glow-b), transparent);
  filter: blur(48px); pointer-events: none;
}
[dir='rtl'] .phones::before { transform: scaleX(-1); }
.eyebrow .dot { position: relative; }
.eyebrow .dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--mint); opacity: 0; }

/* Hover, focus and press */
.btn, .feature, .steps li, .gallery .phone {
  transition:
    transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out),
    border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out),
    scale var(--t-press) var(--ease-out);
}
.btn svg, .feature .icon, .checks svg { transition: translate var(--t-hover) var(--ease-out), scale var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out); }
.steps li::before, .seg button, .faq details, .checks li, .lang-switch, .theme-toggle, .links a, footer a {
  transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
:where(a, button, summary):focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(var(--lift-sm)); }
  .btn-primary:hover { box-shadow: 0 28px 60px -18px rgba(30, 27, 75, 0.45); }
  .btn:hover svg { translate: 0 2px; }
  .btn-ghost:hover { border-color: var(--line-hover); background-color: var(--surface); }
  .lang-switch:hover, .theme-toggle:hover { border-color: var(--line-hover); color: var(--ink); }

  .feature:hover { transform: translateY(var(--lift)); box-shadow: var(--card-shadow); border-color: var(--line-hover); }
  .feature:hover .icon { background-color: color-mix(in srgb, var(--mint) 24%, var(--bg2)); color: var(--mint-ink); scale: var(--pop); }

  .gallery figure:hover .phone { transform: translateY(var(--lift-lg)); }
  .seg button:not([aria-pressed='true']):hover { color: var(--ink); }

  .steps li:hover { transform: translateX(var(--nudge)); border-color: var(--line-hover); }
  [dir='rtl'] .steps li:hover { transform: translateX(calc(var(--nudge) * -1)); }
  .steps li:hover::before { background-color: var(--mint); color: #1e1b4b; }

  .checks li:hover { color: var(--ink); }
  .checks li:hover svg { scale: var(--pop); }
  .faq details:hover { border-color: var(--line-hover); }
}
/* Phones and tablets: no hover, so a short press instead */
@media (hover: none) {
  .btn:active, .feature:active, .steps li:active, .gallery .phone:active { scale: var(--press); }
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* Hero entrance: text rises in 80ms apart, then the phones; the glow breathes and the phones float */
  .hero .eyebrow, .hero h1, .hero .lead, .hero .cta, .hero .meta, .hero .release-line, .trust ul {
    animation: rise var(--t-enter) var(--ease-out) var(--d, 0ms) both;
  }
  .hero .eyebrow { --d: 100ms; }
  .hero h1 { --d: 180ms; }
  .hero .lead { --d: 260ms; }
  .hero .cta { --d: 340ms; }
  .hero .meta { --d: 420ms; }
  .hero .release-line { --d: 460ms; }
  .trust ul { --d: 560ms; }
  .eyebrow .dot::after { animation: ping 2.4s var(--ease-out) 1.2s infinite; }
  .phones::before { animation: glow-in 1400ms var(--ease-out) 200ms both, breathe 8s var(--ease-loop) 1600ms infinite alternate; }
  .phone.front {
    --rise: 28px; --float: -10px;
    animation: rise-phone 1000ms var(--ease-out) 300ms both, float 6s var(--ease-loop) 1300ms infinite alternate;
  }
  .phone.back {
    --rise: 40px; --float: -7px;
    animation: rise-phone 1000ms var(--ease-out) 450ms both, float 7.5s var(--ease-loop) 1450ms infinite alternate;
  }

  /* Scroll reveal: items fade up once; items arriving together are staggered 70ms apart (see the page script) */
  .motion [data-reveal]:not(.is-in) { opacity: 0; }
  .motion [data-reveal].is-in { animation: reveal var(--t-reveal) var(--ease-out) calc(var(--i, 0) * 70ms) both; }

  .faq details[open] p { animation: faq-open 320ms var(--ease-out); }
}
@keyframes rise { from { opacity: 0; translate: 0 14px; } }
@keyframes rise-phone { from { opacity: 0; translate: 0 var(--rise); } }
@keyframes float { from { translate: 0 0; } to { translate: 0 var(--float); } }
@keyframes glow-in { from { opacity: 0; scale: 0.9; } }
@keyframes breathe { from { opacity: 1; scale: 1; } to { opacity: 0.7; scale: 1.05; } }
@keyframes ping { 0% { opacity: 0.6; scale: 1; } 80%, 100% { opacity: 0; scale: 3; } }
@keyframes reveal { from { opacity: 0; translate: 0 18px; } }
@keyframes faq-open { from { opacity: 0; translate: 0 -4px; } }

/* Theme switch: the page cross-fades while the sun spins and shrinks away and the moon spins in (and
   back). Built on View Transitions (see the footer script). Other browsers fade the colours and spin the
   new icon in; reduce motion swaps at once. The gallery Light / Dark buttons use the same cross-fade. */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 450ms;
  animation-timing-function: var(--ease-loop);
}
.theme-switching .theme-toggle span { view-transition-name: theme-icon; }
::view-transition-group(theme-icon) { animation-duration: 500ms; }
::view-transition-old(theme-icon) { animation: icon-out 260ms cubic-bezier(0.55, 0, 1, 0.45) both; }
::view-transition-new(theme-icon) { animation: icon-in 340ms var(--ease-out) 160ms both; }
@keyframes icon-out { to { opacity: 0; rotate: 90deg; scale: 0; } }
@keyframes icon-in { from { opacity: 0; rotate: -90deg; scale: 0; } }
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after {
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), border-color 300ms var(--ease-out) !important;
}
@supports not (view-transition-name: none) {
  @media (prefers-reduced-motion: no-preference) {
    .theme-switching .theme-toggle span { animation: icon-in 340ms var(--ease-out); }
  }
}