/* Deflat web. Brand kit A - Curve (26. 10. 2026): cool graphite surfaces like the icon's tile, one orange accent for actions, teal for log,
   the brand gradient only inside the curve. Type is the system face (SF on Apple devices) like the app;
   section labels are monospaced, like a camera report sheet. */

:root {
  color-scheme: dark;
  --bg: #0a0c0f;
  --surface: #15181d;
  --surface-2: #23272d;
  --line: rgba(255, 255, 255, 0.09);
  --text: #f5f5f7;
  --muted: rgba(235, 235, 245, 0.62);
  --faint: rgba(235, 235, 245, 0.38);
  --accent: #f0a63b;
  --log: #5eb3ba;
  --cyan: #04bbd8;
  --pale: #eee7a0;
  --orange: #ff5037;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img, svg { display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .mark { width: 30px; height: 30px; border-radius: 7px; }
.brand .wm { height: 15px; width: auto; color: var(--text); }
.top nav { display: flex; gap: 22px; font-size: 14px; color: var(--muted); }
.top nav a { text-decoration: none; }
.top nav a:hover { color: var(--text); }

/* Opening: statement left, the curve right */
.open { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px; align-items: center; padding: 56px 0 72px; }
.slate { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.slate b { color: var(--cyan); font-weight: 500; }
.slate i { color: var(--accent); font-style: normal; }
h1 {
  font: 700 clamp(44px, 7.4vw, 92px)/0.98 var(--display);
  letter-spacing: -0.035em;
  margin: 22px 0 26px;
}
h1 .soft { color: var(--faint); }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--muted); max-width: 33em; margin: 0 0 34px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px;
  border-radius: 25px; background: var(--accent); color: #1a1205; font-weight: 600; font-size: 16px;
  text-decoration: none; transition: transform 160ms ease, background 160ms ease;
}
.btn:hover { background: #f5b453; }
.btn:active { transform: scale(0.98); }
.btn[aria-disabled="true"] { background: var(--surface-2); color: var(--muted); cursor: default; }
.meta { font-size: 14px; color: var(--faint); }

.curve { width: 100%; max-width: 440px; justify-self: end; aspect-ratio: 1; color: rgba(255, 255, 255, 0.34); }

/* Before / after */
.compare { position: relative; margin: 0 0 18px; border-radius: 22px; overflow: hidden; background: var(--surface);
  aspect-ratio: 21 / 9; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.compare svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare .log { filter: saturate(0.28) contrast(0.6) brightness(1.06); }
.compare .graded { clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); }
.compare .bar { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.35); pointer-events: none; }
.compare .tag { position: absolute; bottom: 14px; font: 600 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: rgba(0, 0, 0, 0.45); padding: 7px 10px; border-radius: 999px; pointer-events: none; }
.compare .tag.l { left: 14px; }
.compare .tag.r { right: 14px; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.caption { font-size: 14px; color: var(--faint); margin: 0 0 96px; }

/* Numbered sections */
section.part { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 64px 0; border-top: 1px solid var(--line); }
.part > .slate { padding-top: 10px; }
h2 { font: 700 clamp(30px, 3.6vw, 44px)/1.08 var(--display); letter-spacing: -0.025em; margin: 0 0 18px; }
.part p { margin: 0 0 16px; color: var(--muted); max-width: 40em; }
.part p strong { color: var(--text); font-weight: 600; }

.steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border-radius: 18px; overflow: hidden; }
.steps li { background: var(--bg); padding: 22px 22px 26px; }
.steps li span { display: block; font: 500 12px/1 var(--mono); color: var(--accent); margin-bottom: 18px; }
.steps li b { display: block; font-size: 18px; margin-bottom: 6px; }
.steps li p { font-size: 15px; margin: 0; }

.formats { list-style: none; padding: 0; margin: 24px 0 0; columns: 2; column-gap: 40px; }
.formats li { break-inside: avoid; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.formats li span { font-family: var(--mono); font-size: 13px; color: var(--faint); white-space: nowrap; }

.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.tier { background: var(--surface); border-radius: 22px; padding: 26px 26px 22px; }
.tier h3 { margin: 0 0 4px; font-size: 20px; }
.tier .note { font-size: 14px; color: var(--faint); margin: 0 0 14px; }
.tier ul { margin: 0; padding: 0; list-style: none; }
.tier li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.tier li:first-child { border-top: 0; }
.tier.pro h3 { color: var(--accent); }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 26px; }
.facts b { display: block; color: var(--text); margin-bottom: 4px; }
.facts p { font-size: 15px; }

details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; font-weight: 600; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font: 400 22px/1 var(--sans); color: var(--faint); transition: transform 200ms ease; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0 0 18px; }
.fine { font-size: 14px; color: var(--muted); padding-left: 18px; margin: 12px 0 0; }
.fine li { margin: 0 0 8px; }

footer { border-top: 1px solid var(--line); padding: 40px 0 56px; margin-top: 24px; font-size: 13px; color: var(--faint); }
footer .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; }
footer .wm { height: 14px; width: auto; color: var(--muted); margin-bottom: 14px; }
footer p { margin: 0 0 6px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* Long text pages (privacy) */
.doc { max-width: 720px; padding-top: 32px; padding-bottom: 40px; }
.doc h1 { font-size: clamp(38px, 5vw, 56px); margin: 18px 0 18px; }
.doc h2 { font-size: 22px; margin: 40px 0 10px; letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--muted); }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--text); }
.doc .lang-sep { border: 0; border-top: 1px solid var(--line); margin: 72px 0 0; }

@media (max-width: 860px) {
  .open { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .curve { justify-self: start; max-width: 200px; order: -1; }
  section.part { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 52px 0; }
  .formats li span { white-space: normal; text-align: right; }
  .steps, .facts { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .formats { columns: 1; }
  .compare { aspect-ratio: 4 / 3; }
  .top nav a:not(.lang) { display: none; }
}