/* KIBI landing — golden-hour illustration (moonlit at night), condensed serif
   headings (Oranienbaum, has Cyrillic) and Golos Text, the app's own typeface.
   Theme: <html data-theme="light|dark">, set before paint by the inline head
   script (saved choice or the system setting) and by the footer switch. */

:root {
  color-scheme: light;
  --bg: #fff;
  --bg-rgb: 255, 255, 255;
  --surface: #fff;
  --ink: #2A2421;
  --ink-2: #5A504A;
  --muted: #918780;
  --line: #ECE8E4;
  --card: #F6F4F1;
  --hover: rgba(0, 0, 0, .04);
  --rule: #DDD6D0;
  --rule-2: #CFC6BF;
  --statement: #A0968F;
  --tick: #DCD5CF;
  --track: #ECE6E1;
  --chip-on: #FFF8F3;
  --accent: #B4471B;
  --orange: #F2690F;
  --hero-ink: #2A2421;
  --hero-ink-2: #4C413B;
  --hero-ink-3: #5E534C;
  --nav-bg: rgba(255, 255, 255, .82);
  --shadow: rgba(40, 20, 10, .4);
  --display: "Oranienbaum", "Times New Roman", serif;
  --text: "Golos Text", -apple-system, "Segoe UI", sans-serif;
  --max: 1080px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #140F0D;
  --bg-rgb: 20, 15, 13;
  --surface: #2A211D;
  --ink: #F3EAE2;
  --ink-2: #CDBFB5;
  --muted: #9A8D84;
  --line: #2E2522;
  --card: #1F1713;
  --hover: rgba(255, 255, 255, .07);
  --rule: #3A2F2A;
  --rule-2: #4A3D36;
  --statement: #8E8178;
  --tick: #3E322C;
  --track: #2F2521;
  --chip-on: #3A251B;
  --accent: #E2804F;
  --hero-ink: #F7EFE7;
  --hero-ink-2: #DED1C7;
  --hero-ink-3: #C4B6AC;
  --nav-bg: rgba(28, 21, 26, .62);
  --shadow: rgba(0, 0, 0, .6);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, dl, dd, dt { margin: 0; padding: 0; }
ol { list-style: none; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.head { text-align: center; max-width: 620px; margin: 0 auto 44px; padding: 0 20px; }
.head h2 { font: 400 clamp(40px, 5vw, 60px)/1 var(--display); letter-spacing: -0.01em; }
.head p { margin-top: 14px; color: var(--muted); font-size: 15px; }

/* ---------- store badge ---------- */
.store { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px 9px 14px; background: #17110E; color: #fff; text-decoration: none; border-radius: 12px; transition: transform .25s ease, background .2s; }
.store:hover { background: #000; transform: translateY(-1px); }
.store svg { width: 22px; height: 22px; fill: #fff; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.store small { font-size: 10.5px; opacity: .8; }
.store b { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
[data-theme="dark"] .store { background: #F7EFE7; color: #17110E; }
[data-theme="dark"] .store:hover { background: #fff; }
[data-theme="dark"] .store svg { fill: #17110E; }

/* ---------- hero ---------- */
.hero { position: relative; margin: 12px; border-radius: 28px; overflow: hidden; isolation: isolate; min-height: 780px; height: calc(100svh - 24px); max-height: 1000px; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Hero painting (also behind the final call to action): CSS backgrounds, so each
   theme downloads only its own picture. */
.hero-bg, .final-bg { position: absolute; inset: 0; z-index: -2; background: url(art/hero-2k.webp) center 70% / cover no-repeat; }
[data-theme="dark"] .hero-bg, [data-theme="dark"] .final-bg { background-image: url(art/hero-night-2k.webp); }
@media (max-width: 700px) {
  .hero-bg, .final-bg { background-image: url(art/hero-1k.webp); }
  [data-theme="dark"] .hero-bg, [data-theme="dark"] .final-bg { background-image: url(art/hero-night-1k.webp); }
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--bg-rgb), 0) 66%, rgba(var(--bg-rgb), .6) 86%, var(--bg) 98%); }

.nav-wrap { position: relative; z-index: 5; margin-top: 18px; }
.nav { display: flex; align-items: center; gap: 2px; padding: 5px; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 14px; box-shadow: 0 6px 24px -12px rgba(80, 40, 20, .35); font-size: 13px; }
.brand { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; background: var(--surface); border-radius: 10px; text-decoration: none; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.brand img { border-radius: 6px; }
.nav-link { padding: 6px 11px; border-radius: 9px; text-decoration: none; color: var(--ink-2); }
.nav-link:hover { color: var(--ink); background: var(--hover); }

.hero-copy { position: relative; z-index: 2; margin-top: clamp(40px, 8vh, 84px); padding: 0 20px; }
.hero h1 { font: 400 clamp(56px, 8vw, 104px)/.92 var(--display); letter-spacing: -0.012em; color: var(--hero-ink); text-wrap: balance; }
.hero h1 span { display: block; }
.hero-sub { margin: 22px auto 0; max-width: 470px; color: var(--hero-ink-2); font-size: 16px; text-wrap: pretty; }
.hero-cta { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-note { font-size: 12.5px; color: var(--hero-ink-3); }

.hero-phone { position: absolute; left: 50%; bottom: 0; translate: -50% 0; z-index: 1; width: clamp(230px, 22vw, 300px); height: clamp(250px, 32vh, 330px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 98%); mask-image: linear-gradient(180deg, #000 45%, transparent 98%); }
.hero-phone img { filter: drop-shadow(0 20px 30px rgba(80, 40, 10, .25)); }

/* ---------- statement ---------- */
.statement { max-width: 760px; margin: 0 auto; padding: 72px 20px 24px; text-align: center; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 40px; }
.ornament i { width: 64px; height: 1px; background: var(--rule); position: relative; }
.ornament i::before { content: ""; position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--rule); }
.ornament i:first-child::before { left: -14px; }
.ornament i:last-child::before { right: -14px; }
.ornament b { width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid var(--rule-2); }
.statement-text { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.38; color: var(--statement); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 52px; }
.stats div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 10px; }
.stats div + div { border-left: 1px solid var(--line); }
.stats dd { font: 400 clamp(40px, 4.4vw, 52px)/1 var(--display); color: var(--accent); }
.stats dt { font-size: 14px; color: var(--ink-2); }

/* ---------- features ---------- */
.features { padding: 96px 20px 40px; }
.bento { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card { position: relative; min-height: 340px; padding: 22px 24px; background: var(--card); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.card h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.card > p { margin-top: 6px; font-size: 13.5px; color: var(--muted); max-width: 340px; }
.card-art { width: min(250px, 60%); margin: auto auto 0; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover .card-art { transform: translateY(-6px) rotate(-1.5deg); }

.reader { margin: auto; width: min(290px, 100%); padding: 20px; background: var(--surface); border-radius: 18px; box-shadow: 0 14px 34px -22px var(--shadow); }
.swatches { display: flex; justify-content: space-between; padding: 0 8px; }
.sw { width: 24px; height: 24px; border-radius: 50%; position: relative; border: 1px solid var(--line); }
.sw.on::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--accent); }
.s-white { background: #fff; } .s-sepia { background: #F3E5CB; } .s-gray { background: #6A6A6F; } .s-dark { background: #161412; }
.slider { position: relative; height: 5px; margin: 20px 8px; border-radius: 5px; background: linear-gradient(90deg, #F3E5CB, var(--accent) 65%, #2A1A12); }
.slider span { position: absolute; left: 62%; top: 50%; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
.fonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.f { display: flex; flex-direction: column; align-items: center; padding: 9px 2px; border-radius: 12px; border: 1px solid var(--line); }
.f.on { border-color: var(--accent); background: var(--chip-on); }
.f b { font-size: 21px; font-weight: 400; }
.f small { font-size: 10.5px; color: var(--muted); }
.f-book b { font-family: var(--display); } .f-charter b { font-family: Charter, "Iowan Old Style", Georgia, serif; } .f-georgia b { font-family: Georgia, serif; }

.goal { position: relative; margin: auto auto 6px; width: min(280px, 100%); }
.goal svg { width: 100%; overflow: visible; }
.ticks line { stroke: var(--tick); stroke-width: 1; }
.g-track, .g-bar { fill: none; stroke-width: 10; stroke-linecap: round; }
.g-track { stroke: var(--track); }
.g-bar { stroke: var(--accent); stroke-dasharray: 302; stroke-dashoffset: 302; transition: stroke-dashoffset 1.8s cubic-bezier(.3,.6,.2,1) .2s; }
.goal.in .g-bar { stroke-dashoffset: 60; }
.goal-read { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; }
.goal-read b { display: block; font: 400 46px/1 var(--display); }
.goal-read small { font-size: 12px; color: var(--muted); }

/* Generated art sits on a near-white field: multiply drops the white, and a soft
   radial mask hides the faint edge of the square so only the object shows. */
.card-art, .coll img { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
/* Night versions are painted on the dark card colour; "lighten" drops that field
   the same way "multiply" drops white. Hidden copies are lazy, so never fetched. */
.art-dark, [data-theme="dark"] .art-light { display: none; }
[data-theme="dark"] .art-dark { display: block; mix-blend-mode: lighten; }

/* ---------- journey ---------- */
.journey { padding: 48px 12px; }
.journey-inner { max-width: calc(var(--max) + 120px); margin: 0 auto; padding: 72px 20px 0; border-radius: 32px; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 0%, #FDF1EA, transparent 70%), linear-gradient(180deg, #FBF6F3 0%, #FCE8DD 100%); }
[data-theme="dark"] .journey-inner { background: radial-gradient(80% 60% at 50% 0%, #2B1E19, transparent 70%), linear-gradient(180deg, #1A1311 0%, #2C1B14 100%); }
.steps { display: flex; justify-content: center; align-items: flex-end; gap: 18px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.step-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.step-label i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 11px/1 var(--text); font-style: normal; }
[data-theme="dark"] .step-label i { color: var(--bg); }
.shot { width: 228px; height: 330px; padding: 8px 8px 0; background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: 0 24px 50px -28px rgba(90, 40, 10, .45); overflow: hidden; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.shot img { border-radius: 16px 16px 0 0; }
.s1 { transform: rotate(-5deg) translateY(16px); }
.s3 { transform: rotate(5deg) translateY(16px); }
.s2 .shot { height: 360px; }
.step:hover .shot { transform: translateY(-8px); }

/* ---------- collections ---------- */
.collections { padding: 88px 20px 40px; }
.coll-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.coll { display: flex; flex-direction: column; padding: 22px 22px 20px; background: var(--card); border-radius: 22px; min-height: 380px; }
.coll h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.coll img { width: 62%; margin: 18px auto 16px; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.coll:hover img { transform: translateY(-6px) scale(1.02); }
.coll p { font-size: 13px; color: var(--muted); margin-top: auto; }
.tag { margin-top: 14px; align-self: flex-start; font-size: 12px; color: var(--ink-2); padding: 3px 10px; border: 1px dashed var(--rule-2); border-radius: 999px; }

/* ---------- faq ---------- */
.faq { padding: 88px 20px 40px; }
.qa { max-width: 720px; margin: 0 auto; border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; position: relative; padding: 18px 36px 18px 0; font-size: 16.5px; font-weight: 500; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font-size: 22px; font-weight: 300; color: var(--accent); transition: rotate .25s; }
.qa details[open] summary::after { rotate: 45deg; }
.qa details p { padding: 0 0 18px; color: var(--ink-2); font-size: 15px; max-width: 640px; }

/* ---------- final ---------- */
.final { position: relative; margin: 72px 12px 12px; border-radius: 28px; overflow: hidden; isolation: isolate; padding: 110px 20px; text-align: center; }
.final-bg { background-position: center 35%; }
.final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,250,246,.15), rgba(255,250,246,.35)); }
[data-theme="dark"] .final::after { background: linear-gradient(180deg, rgba(20,15,13,.15), rgba(20,15,13,.4)); }
.final h2 { font: 400 clamp(44px, 6vw, 76px)/.95 var(--display); max-width: 760px; margin: 0 auto; text-wrap: balance; color: var(--hero-ink); }
.final p { margin: 16px 0 26px; color: var(--hero-ink-2); }

/* ---------- footer ---------- */
.footer { padding: 30px 20px 34px; font-size: 13.5px; color: var(--muted); }
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.footer .brand { box-shadow: none; padding: 0; background: none; color: var(--ink); font-size: 15px; }
.footer-controls { display: flex; align-items: center; gap: 10px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding-top: 18px; }
.footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer nav a { text-decoration: none; }
.footer nav a:hover { color: var(--ink); text-decoration: underline; }
.footer svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px 0 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); font-size: 13.5px; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { color: var(--ink); background: var(--hover); }
.lang .chev { width: 14px; height: 14px; transition: rotate .2s; }
.lang[open] .chev { rotate: 180deg; }
.lang-menu { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 10; display: flex; flex-direction: column; min-width: 160px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -18px var(--shadow); }
.lang-menu a { padding: 7px 10px; border-radius: 8px; text-decoration: none; font-size: 14px; color: var(--ink); }
.lang-menu a:hover, .lang-menu a[aria-current] { background: var(--card); }

.theme { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; }
.theme button { display: grid; place-items: center; width: 32px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; transition: color .2s, background .2s; }
.theme button:hover { color: var(--ink); }
.theme button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
[data-theme="dark"] .theme button[aria-pressed="true"] { background: var(--surface); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .nav-link { display: none; }
  .bento, .coll-grid { grid-template-columns: 1fr 1fr; }
  .shot { width: 180px; height: 270px; }
  .s2 .shot { height: 300px; }
}
@media (max-width: 640px) {
  .hero { margin: 8px; border-radius: 22px; min-height: 0; height: auto; max-height: none; }
  .hero h1 { font-size: clamp(44px, 13vw, 58px); }
  .hero-phone { position: relative; left: auto; bottom: auto; translate: none; margin: 30px auto 0; width: 230px; height: 270px; }
  .hero-sub { font-size: 15px; }
  .stats { grid-template-columns: 1fr; gap: 24px; }
  .stats div + div { border-left: 0; }
  .bento, .coll-grid { grid-template-columns: 1fr; }
  .card { min-height: 320px; }
  .journey { padding: 40px 8px; }
  .journey-inner { padding-top: 56px; }
  .steps { overflow-x: auto; justify-content: flex-start; padding: 0 20px; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .s1, .s3 { transform: none; }
  .shot { width: 200px; height: 290px; }
  .s2 .shot { height: 290px; }
  .final { margin: 56px 8px 8px; border-radius: 22px; padding: 84px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- legal pages ---------- */
.legal-bar { max-width: 720px; margin: 0 auto; padding: 20px 20px 0; }
.legal-bar .brand { background: none; box-shadow: none; padding: 0; color: var(--ink); font-size: 15px; }
.legal { max-width: 720px; margin: 0 auto; padding: 40px 20px 72px; }
.legal h1 { font: 400 clamp(40px, 6vw, 60px)/1.02 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.legal-updated { margin-top: 14px; font-size: 14px; color: var(--muted); }
.legal-body { margin-top: 32px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.legal-body > * + * { margin-top: 14px; }
.legal-body h2 { margin-top: 38px; font: 400 clamp(26px, 3.4vw, 32px)/1.15 var(--display); color: var(--ink); text-wrap: balance; }
.legal-body h3 { margin-top: 26px; font: 600 17px/1.35 var(--text); color: var(--ink); }
.legal-body h2 + *, .legal-body h3 + * { margin-top: 10px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body ul, .legal-body ol { margin: 14px 0 0; padding-left: 1.3em; list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li + li { margin-top: 8px; }
.legal-body li::marker { color: var(--accent); }
.legal-body a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-body a:hover { text-decoration-thickness: 2px; }
.footer nav a[aria-current="page"] { color: var(--ink); }