/* Fonts from our own server (no third-party requests): Onest, Unbounded, JetBrains Mono —
   SIL Open Font License 1.1, see fonts/OFL.txt. Variable fonts split by script like Google Fonts
   serves them, so a page loads only the scripts it shows. */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jetbrains-mono-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jetbrains-mono-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/onest-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/onest-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/onest-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/onest-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/unbounded-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/unbounded-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/unbounded-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/unbounded-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Kreo Studio site — "Chrome Y3K", the launcher's look: pearl paper, frosted white cards with big
   radii, pill buttons, electric blue with a glow and a holographic sheen. */
:root {
  --paper: #e6e9ee;
  --card: #f7f8fa;
  --white: #fff;
  --ink: #0f1220;
  --ink2: #4a5164;
  --muted: #6a7184;
  --line: #d4d9e1;
  --line-strong: #c3c9d3;
  --blue: #2e46ff;
  --blue-soft: #e3e7ff;
  --lilac: #9fb0ff;
  --live: #18b866;
  --red: #d6342c;
  --holo: linear-gradient(115deg, #dfe4ec 0%, #f7d6ff 18%, #c9f1ff 34%, #e9ffd8 50%, #ffe6cf 66%, #d9dcff 82%, #dfe4ec 100%);
  --display: "Unbounded", "Onest", system-ui, sans-serif;
  --body: "Onest", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --r-xl: 36px;
  --r-lg: 28px;
  --shadow: 0 24px 60px -24px rgba(15, 18, 32, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 17px/1.55 var(--body);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Orbits and a holographic glow behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax -20vmax auto auto;
  width: 70vmax;
  height: 70vmax;
  background:
    radial-gradient(circle at 50% 50%, rgba(46, 70, 255, .18), transparent 55%),
    radial-gradient(circle at 30% 60%, rgba(247, 214, 255, .7), transparent 45%),
    radial-gradient(circle at 65% 35%, rgba(201, 241, 255, .8), transparent 45%);
  filter: blur(20px);
  z-index: -2;
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  right: -18vmax;
  top: -14vmax;
  width: 64vmax;
  height: 64vmax;
  border-radius: 50%;
  border: 1px solid rgba(15, 18, 32, .08);
  box-shadow: 0 0 0 9vmax rgba(255, 255, 255, 0), inset 0 0 0 9vmax rgba(255, 255, 255, .0);
  outline: 1px dashed rgba(15, 18, 32, .08);
  outline-offset: 9vmax;
  z-index: -1;
  pointer-events: none;
}
a { color: var(--blue); }
::selection { background: var(--blue); color: #fff; }

.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* ---- top bar ------------------------------------------------------------------------------- */
.bar {
  position: sticky;
  top: 14px;
  z-index: 20;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 10px 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid #fff;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px -12px rgba(15, 18, 32, .25);
}
.logo { display: flex; align-items: center; gap: 10px; font: 700 19px var(--body); letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.logo b { color: var(--blue); font-weight: 700; }
.mark { width: 34px; height: 34px; flex: none; margin: -3px -4px -3px -6px; }
.bar nav { display: flex; gap: 4px; margin-left: auto; }
.bar nav a { color: var(--ink2); text-decoration: none; font-size: 15px; padding: 8px 14px; border-radius: 999px; }
.bar nav a:hover, .bar nav a[aria-current="page"] { background: var(--paper); color: var(--ink); }

/* ---- buttons ------------------------------------------------------------------------------- */
.pill {
  --h: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: var(--h); padding: 0 8px 0 26px;
  border-radius: 999px; border: 0; cursor: pointer;
  font: 600 16px var(--body); text-decoration: none; white-space: nowrap;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s;
}
.pill:hover { transform: translateY(-2px); }
.pill:active { transform: none; }
.pill.blue { background: var(--blue); color: #fff; box-shadow: 0 16px 34px -12px rgba(46, 70, 255, .75); }
.pill.blue:hover { box-shadow: 0 20px 40px -12px rgba(46, 70, 255, .9); }
.pill.blue .arrow { width: calc(var(--h) - 14px); height: calc(var(--h) - 14px); border-radius: 50%; background: rgba(255, 255, 255, .18); display: grid; place-items: center; transition: transform .18s; }
.pill.blue:hover .arrow { transform: translateX(3px); }
.pill.white { background: #fff; color: var(--ink); padding: 0 26px; box-shadow: 0 8px 22px -10px rgba(15, 18, 32, .3); }
.pill.ink { background: var(--ink); color: #fff; padding: 0 26px; }
.pill.small { --h: 44px; font-size: 15px; padding-left: 20px; }
.pill.small:not(.blue) { padding: 0 20px; }
.pill[disabled] { opacity: .5; cursor: progress; transform: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 16px; border-radius: 999px; background: #fff;
  font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.kicker { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.035em; margin: 0; }
h1 { font-size: clamp(30px, 5.4vw, 78px); line-height: 1; }
h2 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.02; }
h3 { font-size: 22px; letter-spacing: -.02em; line-height: 1.15; }
.accent { color: var(--blue); }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink2); max-width: 34em; }

/* ---- hero ---------------------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; padding: 72px 0 40px; }
.hero > div:first-child { container-type: inline-size; }
/* Each line is ~9.4 em wide: sized by its column, never by the window, so it can't run under the card. */
.hero h1 { margin: 22px 0 22px; font-size: clamp(28px, 10.2cqi, 80px); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero .meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 14px; }
.hero .meta span::before { content: "✓"; color: var(--live); margin-right: 7px; font-weight: 700; }

/* The ticket: a frosted card inside a moving holographic border. */
.ticket {
  position: relative; padding: 3px; border-radius: var(--r-xl);
  background: var(--holo); background-size: 300% 100%;
  animation: sheen 9s linear infinite;
  box-shadow: 0 40px 80px -30px rgba(15, 18, 32, .35);
}
@keyframes sheen { to { background-position: -300% 0; } }
.ticket > .in { border-radius: calc(var(--r-xl) - 3px); background: var(--card); padding: 22px; }

/* ---- the showcase: one scene per AI feature --------------------------------------------------
   Every element's resting style is the finished result; the keyframes start from "before" and run
   only while the scene is on (`.demo.on`), so switching back replays it and reduced motion shows
   the results. */
.sc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; height: 16px; white-space: nowrap; }
.sc-head .kicker { overflow: hidden; text-overflow: ellipsis; }
.status { display: inline-flex; align-items: center; gap: 8px; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--blue); white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 2s infinite; }
.status.done { color: var(--live); }
.stage { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #1c2030; isolation: isolate; }
.demo { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; }
.demo.on { opacity: 1; visibility: visible; }
.demo > div, .demo .zoom, .demo .scene { position: absolute; inset: 0; }
.scene {
  background:
    radial-gradient(120% 70% at 70% 0%, #8fa2ff 0%, transparent 60%),
    linear-gradient(170deg, transparent 38%, #f0715f 38.5%, #f6966b 46%, transparent 46.5%),
    linear-gradient(160deg, transparent 50%, #1f5d3a 50.5%, #3f8d4c 70%, #c6e85a 100%),
    linear-gradient(180deg, #6e86ff 0%, #b2a3ff 40%, #ffd1b8 60%);
}
.demo .tag {
  position: absolute; top: 14px; z-index: 5; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.demo .tag.l { left: 14px; }
.demo .tag.r { right: 14px; background: var(--blue); color: #fff; }
.demo.on .tag.r { animation: pop .45s 2.3s cubic-bezier(.2, .8, .2, 1.3) both; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.85); } }
/* Marching ants: a selection being made. */
.demo .sel {
  border-radius: 8px; opacity: 0;
  background:
    linear-gradient(90deg, #fff 50%, #0f1220 0) repeat-x 0 0 / 14px 2px,
    linear-gradient(90deg, #fff 50%, #0f1220 0) repeat-x 0 100% / 14px 2px,
    linear-gradient(0deg, #fff 50%, #0f1220 0) repeat-y 0 0 / 2px 14px,
    linear-gradient(0deg, #fff 50%, #0f1220 0) repeat-y 100% 0 / 2px 14px;
  animation: ants .7s linear infinite;
}
@keyframes ants { to { background-position: 14px 0, -14px 100%, 0 -14px, 100% 14px; } }
/* A prompt being typed. */
.demo .prompt {
  inset: auto 14px 14px 14px; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .94);
  font: 500 12.5px var(--mono); color: var(--ink); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
}
.demo .prompt::before { content: "✦"; color: var(--blue); }
.demo .prompt span { display: inline-block; overflow: hidden; white-space: nowrap; width: calc(var(--n) * 1ch); border-right: 2px solid transparent; }
.demo.on .prompt span { animation: type 1.3s .3s steps(var(--n)) both, caret .5s step-end 4 .3s; }
@keyframes type { from { width: 0; } }
@keyframes caret { 50% { border-color: var(--blue); } }

/* Expand canvas: the frame of the original, the new sides painted in. */
.d-expand .orig { position: absolute; inset: 0 22%; outline: 2px solid #fff; outline-offset: -2px; box-shadow: 0 0 0 999px rgba(15, 18, 32, 0); }
.demo.on .orig { animation: reveal 3s .2s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes reveal { 0%, 25% { box-shadow: 0 0 0 999px rgba(15, 18, 32, .85); } 75%, 100% { box-shadow: 0 0 0 999px rgba(15, 18, 32, 0); } }
.d-expand .gen { background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%) no-repeat; background-size: 250% 100%; mix-blend-mode: overlay; opacity: 0; }
.demo.on .gen { animation: sweep 1.6s .9s ease-in-out both; }
@keyframes sweep { 0% { opacity: 0; background-position: 130% 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }

/* Generative fill: a selection in the sky, the prompt, a balloon. */
.d-fill .sel { inset: 8% 10% auto auto; width: 34%; height: 46%; }
.demo.on.d-fill .sel { animation: ants .7s linear infinite, sel 3.2s .1s both; }
@keyframes sel { 0% { opacity: 0; transform: scale(.6); } 12%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.balloon { inset: 14% 19% auto auto !important; width: 15%; aspect-ratio: 1 / 1.45; }
.balloon::before {
  content: ""; position: absolute; inset: 0 0 26% 0; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 45%), repeating-linear-gradient(90deg, #ff6b4a 0 20%, #fff2e6 20% 40%, #2e46ff 40% 60%, #fff2e6 60% 80%);
  box-shadow: inset -6px -8px 14px rgba(0, 0, 0, .25);
}
.balloon::after { content: ""; position: absolute; left: 38%; right: 38%; bottom: 0; height: 13%; border-radius: 2px 2px 4px 4px; background: #7a4a2a; }
.balloon i { position: absolute; left: 30%; right: 30%; top: 70%; bottom: 12%; border-left: 1px solid rgba(60, 40, 30, .8); border-right: 1px solid rgba(60, 40, 30, .8); }
.demo.on .balloon { animation: appear 1s 2s cubic-bezier(.2, .8, .2, 1) both, float 3s 3s ease-in-out infinite; }
@keyframes appear { from { opacity: 0; transform: scale(.4) translateY(20%); filter: blur(10px); } }
@keyframes float { 50% { transform: translateY(-5%); } }
.d-fill .spark { inset: 12% 14% auto auto !important; width: 26%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(159, 176, 255, .5) 30%, transparent 62%); opacity: 0; }
.demo.on .spark { animation: burst 1s 1.9s ease-out both; }
@keyframes burst { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }

/* Remove object: a pole is selected and goes. */
.d-obj .thing { inset: auto auto 6% 61% !important; width: 2.6%; height: 64%; background: linear-gradient(90deg, #3a3236, #1b1719); border-radius: 2px; opacity: 0; }
.d-obj .thing::before { content: ""; position: absolute; top: 7%; left: -320%; width: 740%; height: 3.5%; background: #2a2427; border-radius: 2px; }
.d-obj .thing i { position: absolute; top: 3%; left: -300%; width: 700%; height: 4%; background: radial-gradient(circle, #c9d2e0 30%, transparent 32%) 0 0 / 33.3% 100% repeat-x; }
.demo.on .thing { animation: vanish 3s .2s both; }
@keyframes vanish { 0%, 50% { opacity: 1; filter: none; } 72%, 100% { opacity: 0; filter: blur(6px); } }
.d-obj .sel { inset: auto auto 3% 54% !important; width: 17%; height: 72%; }
.demo.on.d-obj .sel { animation: ants .7s linear infinite, sel 2.9s .3s both; }

/* Remove background: a scan, the background goes, the person stays over transparency. */
.checker { background: conic-gradient(#d9dde5 25%, #fff 0 50%, #d9dde5 0 75%, #fff 0) 0 0 / 22px 22px; }
.d-bg .scene { opacity: 0; }
.demo.on.d-bg .scene { animation: fadeout 1s 1.7s both; }
@keyframes fadeout { from { opacity: 1; } }
.scan { height: 18%; inset: 0 0 auto 0 !important; background: linear-gradient(180deg, transparent, rgba(159, 176, 255, .75), transparent); opacity: 0; }
.demo.on .scan { animation: scan 1.4s .2s ease-in-out both; }
@keyframes scan { 0% { opacity: 0; transform: translateY(-100%); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(560%); } }
.person { inset: auto auto 0 50% !important; width: 40%; height: 76%; transform: translateX(-50%); filter: drop-shadow(0 12px 18px rgba(15, 18, 32, .35)); }
.person::before { content: ""; position: absolute; top: 0; left: 28%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 120%, transparent 55%, #2b1d18 56%) , radial-gradient(circle at 42% 38%, #ffd9c2, #d99a78 72%); }
.person::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 54%; border-radius: 50% 50% 8px 8px / 62% 62% 8px 8px; background: radial-gradient(circle at 50% -10%, #f2c9b0 0 14%, transparent 15%), linear-gradient(160deg, #3d55ff, #1a238f); }
.demo.on .person { animation: outline 1.4s .2s both; }
@keyframes outline { 0%, 100% { filter: drop-shadow(0 12px 18px rgba(15, 18, 32, .35)); } 50% { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #9fb0ff); } }

/* Upscale: low resolution, a beam passes, the detail is sharp. */
.d-up .zoom { transform: scale(1.7); transform-origin: 62% 46%; }
.lowres { clip-path: inset(0 0 0 100%); }
.lowres .zoom { filter: blur(4px) saturate(.9); }
.lowres .grid { position: absolute; inset: 0; background: linear-gradient(rgba(15, 18, 32, .22) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(15, 18, 32, .22) 1px, transparent 1px) 0 0 / 16px 16px; }
.demo.on .lowres { animation: wipe 1.8s .8s cubic-bezier(.6, 0, .3, 1) both; }
@keyframes wipe { from { clip-path: inset(0 0 0 0); } }
.beam { inset: 0 auto 0 100% !important; width: 3px; background: #fff; box-shadow: 0 0 16px 4px rgba(159, 176, 255, .9); opacity: 0; }
.demo.on .beam { animation: beam 1.8s .8s cubic-bezier(.6, 0, .3, 1) both; }
@keyframes beam { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.d-up .tag.l { transition: none; }

/* Text to image: noise, a prompt, the picture develops. */
.noise { background: #2a2d3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.night { background: linear-gradient(180deg, #0b1030 0%, #262252 55%, #3b2a3a 100%); }
.night .glow { position: absolute; inset: auto -10% -20% -10%; height: 60%; background: radial-gradient(ellipse at 50% 30%, rgba(255, 170, 80, .55), transparent 65%); }
.night .cafe { position: absolute; left: 14%; right: 14%; bottom: 0; height: 50%; background: #151628; border-radius: 10px 10px 0 0; }
.night .cafe::before { content: ""; position: absolute; inset: 26% 9% 22%; border-radius: 6px; background: linear-gradient(90deg, #ffb35c 0 30%, transparent 0 35%, #ffd27a 0 65%, transparent 0 70%, #ffa94d 0); box-shadow: 0 0 40px 6px rgba(255, 170, 80, .45); }
.night .cafe::after { content: ""; position: absolute; top: 7%; left: 5%; right: 5%; height: 11%; border-radius: 6px; background: repeating-linear-gradient(90deg, #d6342c 0 10%, #fff2e6 0 20%); }
.night .rain { position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 22px, rgba(200, 215, 255, .16) 22px 23px); background-size: 140% 140%; animation: rain .5s linear infinite; }
@keyframes rain { to { background-position: -20px 60px; } }
.d-t2i .prompt { inset: 14px 14px auto 14px; }
.demo.on .night { animation: develop 1.6s 1.7s ease-out both; }
@keyframes develop { from { opacity: 0; filter: blur(18px) saturate(0); transform: scale(1.06); } }

/* Auto enhance: before | after. */
.dull { filter: saturate(.4) brightness(.8) contrast(.85); }
.vivid { clip-path: inset(0 0 0 50%); }
.vivid .scene { filter: saturate(1.3) contrast(1.06); }
.divider { inset: 0 auto 0 50% !important; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .3); }
.divider::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 600 13px var(--body); color: var(--ink); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.demo.on .vivid { animation: compare 3.2s .3s cubic-bezier(.6, 0, .3, 1) both; }
.demo.on .divider { animation: divider 3.2s .3s cubic-bezier(.6, 0, .3, 1) both; }
@keyframes compare { 0% { clip-path: inset(0 0 0 100%); } 45% { clip-path: inset(0 0 0 6%); } 100% { clip-path: inset(0 0 0 50%); } }
@keyframes divider { 0% { left: 100%; } 45% { left: 6%; } 100% { left: 50%; } }

/* The feature switch: icons; the current one shows its name and the time to the next. */
.sc-tabs { display: flex; gap: 6px; margin-top: 16px; min-width: 0; height: 38px; }
.sc-tabs button {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0;
  height: 38px; padding: 0 11px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--paper); color: var(--ink2); font: 600 13px var(--body);
  transition: background .25s, color .25s, gap .3s, padding .3s;
}
.sc-tabs svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-tabs span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s ease; }
.sc-tabs button:hover { background: #fff; color: var(--ink); }
.sc-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; gap: 8px; padding: 0 15px 0 12px; }
.sc-tabs button[aria-selected="true"] span { max-width: 120px; }
.sc-tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sc-tabs i { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--lilac); transform: scaleX(0); transform-origin: left; }
.sc-tabs button[aria-selected="true"] i { animation: progress var(--dur, 5s) linear forwards; }
.showcase:hover .sc-tabs i { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }

.ticket .row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; gap: 12px; }
.ticket .row .credits { font: 600 30px var(--display); letter-spacing: -.04em; color: var(--blue); }
.ticket .row .credits small { font: 400 13px var(--body); color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.live { display: inline-flex; align-items: center; gap: 8px; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--live); }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(24, 184, 102, .5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(24, 184, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(24, 184, 102, 0); } }

/* ---- sections ------------------------------------------------------------------------------ */
section { padding: 72px 0; scroll-margin-top: 70px; }
.head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 36px; flex-wrap: wrap; }
.head .lead { margin: 14px 0 0; }

.panel { background: rgba(255, 255, 255, .8); border: 1px solid #fff; border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.grid { display: grid; gap: 16px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.feature h3 { margin: 16px 0 8px; }
.feature p { margin: 0; color: var(--ink2); font-size: 15.5px; }
.icon { width: 46px; height: 46px; border-radius: 15px; background: var(--paper); display: grid; place-items: center; color: var(--blue); }
.icon svg { width: 22px; height: 22px; }

/* AI: a dark slab with the price list as a receipt. */
.ai { background: var(--ink); color: #fff; border-radius: 44px; padding: clamp(28px, 5vw, 64px); position: relative; overflow: hidden; }
.ai::before { content: ""; position: absolute; inset: auto -10% -60% 40%; height: 120%; background: radial-gradient(circle, rgba(46, 70, 255, .55), transparent 60%); filter: blur(30px); }
.ai > * { position: relative; }
.ai .kicker { color: var(--lilac); }
.ai h2 { margin: 14px 0 16px; }
.ai h2 .accent { color: var(--lilac); }
.ai .lead { color: #c3c8d6; }
.ai-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.receipt { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 26px; padding: 8px 24px; }
.receipt li { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px dashed rgba(255, 255, 255, .16); }
.receipt li:last-child { border-bottom: 0; }
.receipt ul { margin: 0; padding: 0; }
.receipt b { font-weight: 600; }
.receipt span { grid-column: 1; color: #9aa1b4; font-size: 14px; }
.receipt .cost { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 500 13px var(--mono); color: #fff; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); white-space: nowrap; }
.receipt .cost.free { background: rgba(24, 184, 102, .18); color: #6ee7a8; }
.ai .note { margin-top: 26px; color: #9aa1b4; font-size: 14.5px; }

/* ---- pricing ------------------------------------------------------------------------------- */
.switch { display: inline-flex; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 8px 20px -12px rgba(15, 18, 32, .3); }
.switch button { border: 0; background: none; cursor: pointer; padding: 10px 20px; border-radius: 999px; font: 600 15px var(--body); color: var(--ink2); }
.switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.switch em { font-style: normal; font: 500 11px var(--mono); color: var(--live); margin-left: 6px; }
.switch button[aria-pressed="true"] em { color: #6ee7a8; }
.plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan { display: flex; flex-direction: column; gap: 14px; }
.plan .price { font: 600 clamp(34px, 3.4vw, 44px) var(--display); letter-spacing: -.05em; line-height: 1; white-space: nowrap; }
.plan .price small { font: 400 15px var(--body); letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.plan .per { color: var(--muted); font-size: 14px; min-height: 1.5em; }
.plan ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 9px; color: var(--ink2); font-size: 15.5px; }
.plan li::before { content: "✓"; color: var(--blue); font-weight: 700; margin-right: 10px; }
.plan li.no { color: var(--muted); }
.plan li.no::before { content: "—"; color: var(--line-strong); }
.plan .pill { margin-top: auto; width: 100%; justify-content: space-between; }
.plan .pill.white { justify-content: center; }
.plan.featured { padding: 3px; background: var(--holo); background-size: 300% 100%; animation: sheen 9s linear infinite; border: 0; }
.plan.featured > .in { background: var(--card); border-radius: calc(var(--r-lg) - 3px); padding: 25px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.badge { margin: -6px 0; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: var(--blue-soft); padding: 6px 11px; border-radius: 999px; }
.packs { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.packs .kicker { margin-right: 6px; }
.packs span { font-size: 15px; color: var(--ink2); }
.packs b { color: var(--ink); }

/* ---- steps and FAQ ------------------------------------------------------------------------- */
.steps { grid-template-columns: repeat(3, 1fr); counter-reset: step; }
.step { position: relative; padding-top: 70px; }
.step::before { counter-increment: step; content: "0" counter(step); position: absolute; top: 22px; left: 28px; font: 600 34px var(--display); letter-spacing: -.04em; color: var(--blue); }
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; color: var(--ink2); font-size: 15.5px; }
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: rgba(255, 255, 255, .8); border: 1px solid #fff; border-radius: 22px; padding: 4px 24px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; font-weight: 600; font-size: 17px; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--display); color: var(--blue); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary::-webkit-details-marker { display: none; }
.faq p { margin: 0 0 18px; color: var(--ink2); }

/* ---- footer -------------------------------------------------------------------------------- */
footer { padding: 40px 0 56px; color: var(--muted); font-size: 14px; }
footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line-strong); padding-top: 28px; }
footer a { color: var(--ink2); text-decoration: none; }
footer a:hover { color: var(--blue); }
footer .links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.req { font: 400 12.5px/1.7 var(--mono); color: var(--muted); }

/* ---- checkout dialog ----------------------------------------------------------------------- */
dialog { border: 0; padding: 0; border-radius: var(--r-xl); width: min(460px, calc(100% - 32px)); background: transparent; }
dialog::backdrop { background: rgba(15, 18, 32, .45); backdrop-filter: blur(6px); }
dialog .ticket > .in { padding: 30px; }
dialog h3 { font-size: 26px; margin: 10px 0 4px; }
dialog .sum { color: var(--ink2); margin: 0 0 20px; }
.field { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 20px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.field:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.field label { font: 500 11px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.field input { flex: 1; border: 0; outline: 0; background: none; font: 500 16px var(--body); color: var(--ink); min-width: 0; }
.renew { margin: 14px 0 0; }
.renew summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font: 500 14px var(--body); color: var(--blue); }
.renew summary::-webkit-details-marker { display: none; }
.renew summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.renew[open] summary::before { content: "−"; }
.renew .field { margin-top: 10px; }
.renew .field input { font: 500 14px var(--mono); letter-spacing: .02em; }
.quote { margin: 8px 4px 0; min-height: 1.4em; font-size: 14px; color: var(--ink2); }
.quote.good { color: #12915a; }
.quote.bad { color: var(--red); }
.occ { border: 0; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.occ legend { width: 100%; margin-bottom: 8px; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.occ legend span { text-transform: none; letter-spacing: 0; opacity: .7; }
.occ label { cursor: pointer; }
.occ input { position: absolute; opacity: 0; pointer-events: none; }
.occ label span { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 14px var(--body); color: var(--ink); }
.occ input:checked + span { box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue); }
.occ input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.agree { display: flex; gap: 10px; align-items: flex-start; margin: 16px 4px; font-size: 14px; color: var(--ink2); }
.agree input { margin-top: 3px; accent-color: var(--blue); width: 16px; height: 16px; }
.err { color: var(--red); font-size: 14px; min-height: 1.4em; margin: 0 4px 10px; }
dialog .pill { width: 100%; justify-content: space-between; }
.x { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--paper); cursor: pointer; font-size: 18px; color: var(--ink2); }

/* ---- documents (оферта, политика) ---------------------------------------------------------- */
.doc { max-width: 860px; margin: 40px auto 0; }
.doc .panel { padding: clamp(24px, 5vw, 56px); }
.doc h1 { font-size: clamp(30px, 4.4vw, 48px); margin: 18px 0 8px; }
.doc h2 { font-size: 22px; letter-spacing: -.02em; margin: 34px 0 10px; }
.doc p, .doc li { color: var(--ink2); font-size: 16px; }
.doc ol, .doc ul { padding-left: 22px; }
.doc .date { color: var(--muted); font: 400 13px var(--mono); }
.todo { background: #fff4d6; color: #7a5200; border-radius: 6px; padding: 0 5px; font-weight: 500; }

/* ---- the studio: app icons, the launcher in the hero, the app catalogue ------------------------ */
.app-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #fff; box-shadow: 0 10px 22px -10px rgba(15, 18, 32, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.app-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-ico.photo { background: linear-gradient(140deg, #6f7dff, #2e46ff 55%, #1b2bb8); }
.app-ico.light { background: linear-gradient(140deg, #ffc36b, #f0715f 55%, #c4407a); }
.app-ico.lg { width: 60px; height: 60px; border-radius: 19px; }
.app-ico.lg svg { width: 28px; height: 28px; }
.app-ico.sm { width: 30px; height: 30px; border-radius: 10px; box-shadow: none; }
.app-ico.sm svg { width: 16px; height: 16px; }

/* The launcher as a ticket: the apps of one subscription, each ready to start. */
.lm-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; white-space: nowrap; }
.lm-head .kicker { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lm-apps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lm-app { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.lm-app .t { flex: 1; min-width: 0; }
.lm-app b { display: block; font: 600 18px/1.2 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.lm-app .t span { display: block; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-app .go { height: 38px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 13px var(--body); display: inline-flex; align-items: center; flex: none; }
.lm-track { position: relative; height: 12px; border-radius: 999px; background: var(--paper); overflow: hidden; margin-top: 10px; }
.lm-track i { position: absolute; inset: 0 22% 0 0; border-radius: 999px; background: var(--blue); box-shadow: 0 0 14px rgba(46, 70, 255, .45); overflow: hidden; }
.lm-track i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) no-repeat; background-size: 200% 100%; animation: shine 2.8s linear infinite; }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.lm-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.perf { border: 0; border-top: 2px dashed var(--line-strong); margin: 18px 0 14px; }

/* The catalogue: one big card per app. */
.apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-card { display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.app-card .shot { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #1c2030; }
.app-card .shot > .scene { position: absolute; inset: 0; }
.app-card .who { display: flex; align-items: center; gap: 14px; padding: 0 6px; }
.app-card h3 { font-size: 28px; }
.app-card .who .kicker { display: block; margin-top: 4px; }
.app-card p { margin: 0; padding: 0 6px; color: var(--ink2); font-size: 15.5px; }
.ticks { list-style: none; margin: 0; padding: 0 6px; display: grid; gap: 8px; color: var(--ink2); font-size: 15px; }
.ticks li::before { content: "✓"; color: var(--blue); font-weight: 700; margin-right: 10px; }
.app-card .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 0 0 6px; }
.from { font: 600 26px var(--display); letter-spacing: -.04em; white-space: nowrap; }
.from small { font: 400 14px var(--body); letter-spacing: 0; color: var(--muted); margin-left: 4px; }
/* Kreo Photo's shot: a layer being masked. Kreo Light's: a film strip of one shoot. */
.shot .ants { position: absolute; inset: 16% 18% 22% 46%; border-radius: 8px;
  background: linear-gradient(90deg, #fff 50%, #0f1220 0) repeat-x 0 0 / 14px 2px, linear-gradient(90deg, #fff 50%, #0f1220 0) repeat-x 0 100% / 14px 2px, linear-gradient(0deg, #fff 50%, #0f1220 0) repeat-y 0 0 / 2px 14px, linear-gradient(0deg, #fff 50%, #0f1220 0) repeat-y 100% 0 / 2px 14px;
  animation: ants .7s linear infinite; }
.shot .layers { position: absolute; left: 12px; top: 12px; bottom: 12px; width: 31%; display: grid; align-content: start; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(15, 18, 32, .55); backdrop-filter: blur(8px); }
.shot .layers i { height: 18px; border-radius: 6px; background: rgba(255, 255, 255, .16); }
.shot .layers i:first-child { background: var(--blue); }
.shot .strip { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 6px; border-radius: 12px; background: rgba(15, 18, 32, .55); backdrop-filter: blur(8px); }
.shot .strip i { position: relative; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; }
.shot .strip i:first-child { outline: 2px solid #fff; outline-offset: 1px; }
.shot .strip .scene, .lr-strip .scene { position: absolute; inset: 0; filter: hue-rotate(var(--h, 0deg)); }

/* ---- Kreo Light's develop view: one photo, its sliders, the shoot taking the same look ------ */
.lr-stage { position: relative; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; background: #1c2030; isolation: isolate; }
.lr-stage .scene { position: absolute; inset: 0; filter: saturate(1.25) contrast(1.06) brightness(1.04); animation: lr-develop 10s ease-in-out infinite; }
@keyframes lr-develop { 0%, 6% { filter: saturate(.45) brightness(.78) contrast(.85); } 32%, 90% { filter: saturate(1.25) contrast(1.06) brightness(1.04); } 100% { filter: saturate(.45) brightness(.78) contrast(.85); } }
.lr-stage .tag { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .9); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.lr-hist { position: absolute; right: 14px; top: 14px; width: 30%; height: 18%; border-radius: 10px; background: rgba(15, 18, 32, .5); backdrop-filter: blur(6px); overflow: hidden; }
.lr-hist::before { content: ""; position: absolute; inset: 22% 6% 0; background: linear-gradient(90deg, rgba(110, 134, 255, .9), rgba(255, 209, 184, .9), rgba(198, 232, 90, .9)); clip-path: polygon(0 100%, 8% 70%, 20% 40%, 32% 55%, 46% 18%, 60% 35%, 72% 12%, 86% 48%, 100% 100%); }
.lr-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 12px; }
.lr-strip i { position: relative; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: #1c2030; filter: saturate(1.25) contrast(1.06) brightness(1.04); animation: lr-sync 10s ease-in-out infinite; animation-delay: calc(var(--i) * .22s); }
.lr-strip i:first-child { outline: 2px solid var(--blue); outline-offset: 1px; }
.lr-strip i::after { content: "✓"; position: absolute; right: 4px; bottom: 3px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; background: var(--live); color: #fff; font: 700 9px/1 var(--body); animation: lr-check 10s ease-in-out infinite; animation-delay: inherit; }
@keyframes lr-sync { 0%, 44% { filter: saturate(.45) brightness(.78) contrast(.85); } 52%, 92% { filter: saturate(1.25) contrast(1.06) brightness(1.04); } 100% { filter: saturate(.45) brightness(.78) contrast(.85); } }
@keyframes lr-check { 0%, 48% { opacity: 0; transform: scale(.4); } 54%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.lr-sliders { display: grid; gap: 10px; margin-top: 16px; }
.sl { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 4.2em; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink2); }
.sl em { font: 500 12px var(--mono); font-style: normal; color: var(--ink); text-align: right; }
.sl i { position: relative; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--g1, #c3c9d3), var(--g2, #c3c9d3)); }
.sl b { position: absolute; top: 50%; left: var(--to); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--blue), 0 4px 10px rgba(15, 18, 32, .25); animation: lr-knob 10s ease-in-out infinite; }
@keyframes lr-knob { 0%, 6% { left: var(--from); } 32%, 90% { left: var(--to); } 100% { left: var(--from); } }

/* ---- pricing: the Photo plan across the row, the apps one by one below ----------------------- */
.bundle { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px 40px; align-items: center; }
.bundle h3 { font-size: clamp(23px, 3vw, 34px); margin-top: 10px; }
.bundle .incl { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.chip { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 600 14px var(--body); color: var(--ink); }
.chip.ai { padding-left: 14px; color: var(--blue); }
.bundle .buy { display: flex; flex-direction: column; gap: 12px; }
.plan.featured > .in.bundle { display: grid; }
.group-h { display: flex; align-items: center; gap: 12px; margin: 44px 0 18px; }
.group-h h3 { font-size: 22px; }
.group-h .kicker { margin-left: auto; }
.plan.soon .price { color: var(--muted); }
.plan.soon .price .todo { font: 600 .62em var(--display); letter-spacing: -.02em; padding: 2px 8px; }
.pill.off, .pill.off[disabled] { cursor: not-allowed; opacity: .55; }
.pill.off:hover { transform: none; }
.light-solo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.light-solo .plan ul { margin-bottom: 0; }
.alt { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

/* ---- a workflow as numbered steps on the dark slab ------------------------------------------ */
.receipt .n { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 600 22px var(--display); color: var(--lilac); letter-spacing: -.03em; }

/* ---- the closed beta: the application form (/beta) ------------------------------------------ */
.beta-hero { padding-bottom: 8px; }
.beta-hero h1 { font-size: clamp(30px, 9.4cqi, 76px); }
.beta-steps { list-style: none; margin: 0; padding: 0; counter-reset: bstep; display: grid; gap: 10px; }
.beta-steps li { counter-increment: bstep; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 14px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.beta-steps li::before { content: "0" counter(bstep); grid-row: 1 / span 2; align-self: center; font: 600 22px var(--display); letter-spacing: -.04em; color: var(--blue); }
.beta-steps b { font: 600 16px/1.3 var(--display); letter-spacing: -.02em; }
.beta-steps span { color: var(--muted); font-size: 14px; }
.beta #apply { padding-top: 40px; }
.beta-form { padding: clamp(20px, 4.4vw, 48px); max-width: 920px; margin: 0 auto; }
.beta-form form { display: grid; gap: 8px; }
.beta [hidden] { display: none !important; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.part { border: 0; margin: 0 0 18px; padding: 0; display: grid; gap: 22px; min-width: 0; }
.part + .part { border-top: 2px dashed var(--line-strong); padding-top: 30px; }
.part legend { float: left; width: 100%; display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; font: 600 clamp(22px, 2.6vw, 28px)/1.15 var(--display); letter-spacing: -.03em; }
.part legend em { font: 500 12px var(--mono); font-style: normal; letter-spacing: .08em; color: var(--blue); background: var(--blue-soft); padding: 5px 10px; border-radius: 999px; }
.part legend + * { clear: both; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.q { min-width: 0; }
.q-l { display: block; margin: 0 0 10px; font-weight: 600; font-size: 16px; color: var(--ink); }
.q-l i, .fine i, .agree i { font-style: normal; color: var(--blue); }
.q-l span { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 4px; }
.inp { display: block; width: 100%; height: 52px; padding: 0 18px; border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 16px var(--body); color: var(--ink); outline: 0; transition: box-shadow .15s; -webkit-appearance: none; appearance: none; }
textarea.inp { height: auto; min-height: 104px; padding: 14px 18px; line-height: 1.5; resize: vertical; }
.inp::placeholder { color: #9aa1b4; font-weight: 400; }
.inp:focus { box-shadow: inset 0 0 0 2px var(--blue); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 15px var(--body); color: var(--ink); transition: box-shadow .15s, color .15s, background .15s; user-select: none; }
.chips label:hover span { box-shadow: inset 0 0 0 1px var(--line-strong); }
.chips input[type="checkbox"] + span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--line-strong); flex: none; }
.chips input[type="checkbox"]:checked + span::before { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m3.5 7.2 2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
.chips input:checked + span { box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue); background: #f5f7ff; }
.chips input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.q-err { display: none; margin: 8px 4px 0; color: var(--red); font-size: 14px; }
.q.bad .q-err { display: block; }
.q.bad .inp { box-shadow: inset 0 0 0 2px var(--red); }
.q.bad .chips span { box-shadow: inset 0 0 0 1px rgba(214, 52, 44, .55); }
.q.bad .chips input:checked + span { box-shadow: inset 0 0 0 2px var(--blue); }
.q.bad .agree { color: var(--red); }
.q.other { margin-top: -8px; }
.warn { margin: 12px 0 0; padding: 12px 16px; border-radius: 16px; background: #fff4d6; color: #6b4a00; font-size: 14.5px; line-height: 1.5; }
.beta-form .agree { margin: 0; font-size: 15px; }
.beta-form .agree input { flex: none; }
.terms { margin: 8px 0 0 26px; padding: 12px 16px; border-radius: 16px; background: var(--paper); color: var(--ink2); font-size: 14px; line-height: 1.5; }
.beta-form .err { margin: 4px 4px 2px; }
.beta-form form > .pill { justify-self: start; min-width: min(320px, 100%); justify-content: space-between; }
.fine { margin: 6px 4px 0; font-size: 13px; color: var(--muted); }
.thanks { text-align: center; padding: clamp(16px, 5vw, 48px) 0; outline: 0; }
.thanks .tick { width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; background: var(--live); color: #fff; font: 700 34px/1 var(--body); box-shadow: 0 18px 40px -14px rgba(24, 184, 102, .7); }
.thanks h2 { margin-bottom: 12px; }
.thanks .lead { margin: 0 auto; }
.thanks .updated { color: var(--muted); font-size: 15px; margin: 14px 0 0; }
.thanks .warn { max-width: 34em; margin: 18px auto 0; text-align: left; }
.thanks .pill { margin-top: 28px; }
/* The last screen: the personal link to the bot, its QR code for a computer. */
.tg-get { display: flex; align-items: center; justify-content: center; gap: 28px 40px; flex-wrap: wrap; margin: 26px auto 0; max-width: 760px; text-align: left; }
.tg-go { flex: 1 1 320px; min-width: 0; display: grid; gap: 14px; }
.tg-go .pill { justify-self: start; margin: 0; min-width: min(340px, 100%); justify-content: space-between; }
.tg-how { margin: 0; padding-left: 20px; color: var(--ink2); font-size: 15px; display: grid; gap: 4px; }
.tg-go .fine { margin: 0; }
.tg-qr { flex: none; margin: 0; padding: 14px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.tg-qr #tg-qr { width: 188px; height: 188px; }
.tg-qr svg { display: block; width: 100%; height: 100%; }
.tg-qr figcaption { margin-top: 8px; max-width: 188px; font-size: 13px; color: var(--muted); }
#tg-intel .pill { margin-top: 18px; max-width: 100%; }
.tg-go .pill, #tg-intel .pill { box-sizing: border-box; }
@media (hover: none), (max-width: 680px) { .tg-qr { display: none; } .tg-go .pill { justify-self: stretch; } }
/* The home page's invitation. */
.beta-cta { display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; padding: 22px 26px; }
.beta-cta .t { flex: 1 1 340px; min-width: 0; }
.beta-cta h3 { margin: 10px 0 6px; font-size: clamp(20px, 2.2vw, 26px); }
.beta-cta p { margin: 0; color: var(--ink2); font-size: 15.5px; }
#beta-invite { padding: 8px 0 0; }

/* ---- entrance ------------------------------------------------------------------------------ */
.rise { opacity: 0; transform: translateY(18px); animation: rise .9s cubic-bezier(.2, .8, .2, 1) forwards; }
.d1 { animation-delay: .08s; } .d2 { animation-delay: .16s; } .d3 { animation-delay: .24s; } .d4 { animation-delay: .32s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise { opacity: 1; transform: none; }
}

/* ---- small screens ------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero, .ai-grid, .bundle { grid-template-columns: minmax(0, 1fr); }
  .g3, .plans, .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .sc-tabs { gap: 5px; justify-content: space-between; }
  .sc-tabs button, .sc-tabs button[aria-selected="true"] { height: 34px; padding: 0 9px; gap: 0; }
  .sc-tabs button[aria-selected="true"] span { max-width: 0; }
  /* The menu goes under the logo, as a row that scrolls sideways if it must. */
  .bar { flex-wrap: wrap; row-gap: 6px; border-radius: 28px; }
  .bar nav { order: 3; flex: 1 1 100%; margin: 0 -4px; overflow-x: auto; scrollbar-width: none; }
  .bar nav::-webkit-scrollbar { display: none; }
  .bar nav a { flex: none; padding: 7px 12px; font-size: 14px; }
  .bar .pill { margin-left: auto; }
  .g3, .plans, .plans.two, .steps, .apps, .light-solo { grid-template-columns: 1fr; }
  .group-h { flex-wrap: wrap; }
  .group-h .kicker { margin-left: 0; flex-basis: 100%; }
  .app-card { padding: 16px; }
  .lm-app { gap: 12px; padding: 12px; }
  .lm-app b { font-size: 16px; }
  .bundle h3 br { display: none; }
  .lm-app .go { height: 34px; padding: 0 12px; font-size: 12.5px; }
  .hero { padding-top: 40px; }
  section { padding: 52px 0; }
  .hero .actions .pill { flex: 1 1 100%; justify-content: space-between; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .beta-form form > .pill { justify-self: stretch; }
  .chips span { font-size: 14.5px; padding: 8px 14px; }
  .terms { margin-left: 0; }
  .beta-cta { padding: 20px; }
  .beta-cta .pill { flex: 1 1 100%; justify-content: space-between; }
  /* «Политика конфиденциальности»: one long word wider than a phone. */
  .doc h1 { font-size: clamp(22px, 7vw, 30px); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
}