/* UniFix selling site. palette-source: brand (product src/styles.css: --bg #0f0f0f graphite, --gold #f0a500).
   Type: Manrope (self-hosted, SIL OFL 1.1). Tokens → docs/project/DESIGN.md. */
@layer tokens, base, layout, hero;

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/manrope-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/manrope-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/manrope-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; }
/* metric-matched fallback so the swap does not shift the headline */
/* size-adjust measured 2026-10-03 against the Cyrillic headlines and body copy (Manrope/Arial width ratio 1.014 regular,
   1.012 bold); a separate bold face, because a synthesised bold Arial wraps headlines differently and shifts layout */
@font-face { font-family: 'Manrope Fallback'; font-weight: 400 600; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'); size-adjust: 101.4%; ascent-override: 102%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback'; font-weight: 700 800; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'); size-adjust: 101.2%; ascent-override: 102%; descent-override: 29%; line-gap-override: 0%; }

@layer tokens {
  :root {
    color-scheme: dark;
    --canvas: oklch(0.145 0.004 75);       /* warm graphite, darker than the product so the card reads as an object */
    --canvas-2: oklch(0.175 0.005 75);
    --ink: oklch(0.95 0.006 85);
    --ink-soft: oklch(0.72 0.01 80);
    --line: oklch(1 0 0 / 0.12);
    --accent: #f0a500;                      /* product --gold */
    --accent-hi: oklch(0.86 0.15 80);
    --on-accent: oklch(0.2 0.03 70);
    --font: 'Manrope', 'Manrope Fallback', sans-serif;
    --container: 80rem;
    --container-wide: 85rem;
    --gutter: 2rem;
    --bar-h: 4.5rem;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --z-sticky: 10;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  /* one fluid root (UniLab landing system): 16px at 1440×900, ≈19px at 1920×1080, ≈26px at 2560×1440, capped by the
     viewport height; everything below is in rem, so the whole page — product windows included — scales together */
  html { font-size: clamp(16px, min(1.1111vw, 1.7778svh), 26px); scroll-padding-top: var(--bar-h); -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 1rem/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
  a { color: inherit; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  p { margin: 0; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: .1875rem; border-radius: .375rem; }
}

@layer layout {
  .wrap { inline-size: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .bar { position: relative; z-index: var(--z-sticky); display: flex; align-items: center; gap: 2.5rem; block-size: var(--bar-h); font-size: 1rem; }
  .brand { display: flex; align-items: center; gap: .625rem; text-decoration: none; padding-block: .5rem; }
  .brand .logo { display: block; block-size: 1.5rem; inline-size: auto; }
  .nav { display: flex; gap: 2rem; margin-inline-start: auto; color: var(--ink-soft); }
  .nav a, .login { text-decoration: none; padding-block: .75rem; }
  .login { font-weight: 700; color: var(--ink); }
  .menu { display: none; }
  @media (hover: hover) and (pointer: fine) {
    .nav a:hover { color: var(--ink); }
  }
}

@layer hero {
  .hero { position: relative; isolation: isolate; overflow: clip; background: var(--canvas); min-block-size: calc(100svh - var(--bar-h));
    display: grid; grid-template-rows: minmax(0, 1fr) auto; --app-h: clamp(34rem, 100svh - var(--bar-h) - 13rem, 52rem); }
  /* the story stage (box set by hero.js): fades out on all four edges, never touches the viewport edge */
  .stage { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    mask-image: linear-gradient(90deg, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent),
      linear-gradient(180deg, transparent, #000 2.5rem, #000 calc(100% - 3.5rem), transparent);
    mask-composite: intersect; }
  /* the stage takes no box until hero.js has placed it, so placing it is not a layout shift */
  .stage:not(.placed) { display: none; }
  .gl, .gl canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }

  .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); gap: 2.5rem;
    align-items: center; padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
  .copy { position: relative; z-index: 3; display: grid; gap: 1.25rem; justify-items: start; }
  .badge { font-size: 1rem; font-weight: 700; color: var(--accent); padding: .3125rem .875rem; border-radius: 999px;
    border: 1px solid oklch(0.78 0.16 75 / 0.45); background: oklch(0.78 0.16 75 / 0.08); }
  h1 { margin: 0; font-weight: 800; font-size: 4rem; line-height: 1.02; letter-spacing: -0.05em; text-wrap: balance; }
  .sub { font-size: 1.25rem; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; max-inline-size: 36rem; }
  .w-only { display: none; }
  @media (min-width: 1800px) and (min-height: 1000px) { .ui-row.w-only { display: grid; } .ui-card.w-only { display: block; } }
  .sub-short { display: none; }
  @media (max-width: 480px) { .sub-long { display: none; } .sub-short { display: block; } }
  .actions { display: grid; justify-items: start; gap: .875rem; margin-block-start: .5rem; }
  .cta { display: inline-flex; align-items: center; justify-content: center; min-block-size: 3.5rem; padding: 0 1.75rem; border-radius: .75rem;
    background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 1.0625rem; text-decoration: none; white-space: nowrap;
    transition: background-color .18s var(--ease-out), transform .18s var(--ease-out); }
  .cta:focus-visible { outline: 2px solid var(--ink); outline-offset: .1875rem; }
  .demo { font-weight: 700; font-size: 1.0625rem; text-decoration: underline; text-decoration-color: oklch(1 0 0 / 0.35); text-underline-offset: .3em; padding-block: .5rem; white-space: nowrap; }
  .note { order: 1; font-size: 1rem; color: var(--ink-soft); }
  .demo { order: 2; }

  /* the hero object: the deal card and its chat as live HTML in the product's own tokens (src/styles.css,
     src/task-form.css). Text stays vector-crisp at any width; the chat panel overlaps the card's edge. */
  .slot { position: relative; z-index: 1; min-inline-size: 0; }
  .object { --p-bg: #121212; --p-surface: #161616; --p-elev: #1c1c1c; --p-border: rgba(255,255,255,.075); --p-border-strong: rgba(255,255,255,.13);
    --p-text: #e1e1e1; --p-muted: #9a9a9a; --p-green: #65c492; --p-red: #ee8287; --p-chat: #1a1712;
    position: relative; padding-block-end: 1.5rem; color: var(--p-text); font: 400 .875rem/1.4 Inter, 'Public Sans', var(--font);
    letter-spacing: 0; transform-style: preserve-3d; }
  .object.tilting { transform: perspective(100rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  /* the whole UniFix window: side menu (src/App.vue::nav), top bar, open deal, deal chat */
  .app { display: grid; grid-template-columns: var(--side, 11.5rem) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); block-size: var(--app-h, 40rem);
    border: 1px solid var(--p-border-strong); border-radius: .875rem; overflow: hidden; background: var(--p-bg);
    box-shadow: 0 .875rem 2.125rem -1.125rem oklch(0 0 0 / .9); }
  .app { position: relative; }
  .app-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transform: translateX(-110%);
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.05) 46%, rgba(255,255,255,.085) 50%, rgba(255,255,255,.05) 54%, transparent 70%); }
  .app-side { display: flex; flex-direction: column; gap: .875rem; padding: .875rem .625rem; background: #131313; border-inline-end: 1px solid var(--p-border); min-inline-size: 0; }
  .app-brand { display: flex; align-items: center; gap: .5rem; padding: 2px .5rem .375rem; font-size: .9375rem; font-weight: 700; color: #f1f1f1; }
  .app-brand img { inline-size: 1.25rem; block-size: auto; }
  .app-nav { display: grid; gap: 2px; }
  .app-nav-item { display: flex; align-items: center; gap: .625rem; min-block-size: 2rem; padding: 0 .5rem; border-radius: .4375rem; font-size: .75rem; color: #a5a5a5; white-space: nowrap; }
  .app-nav-item.is-active { background: #232323; color: var(--p-text); }
  .app-main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-inline-size: 0; }
  .app-top { display: flex; align-items: center; gap: .875rem; min-block-size: 2.875rem; padding: 0 1rem; background: #121212; border-block-end: 1px solid var(--p-border); font-size: .75rem; color: var(--p-muted); }
  .app-crumb { display: flex; gap: .625rem; white-space: nowrap; }
  .app-crumb b { font-weight: 500; color: #cfcfcf; }
  .app-search { display: flex; align-items: center; gap: .375rem; margin-inline-start: auto; padding: .3125rem .625rem; border: 1px solid var(--p-border); border-radius: .5rem; white-space: nowrap; }
  .app-top-tools { display: flex; align-items: center; gap: .75rem; margin-inline-start: .375rem; }
  .app-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-block-size: 0; }
  .ui-deal { container-type: inline-size; padding: 1rem; min-block-size: 0; overflow: hidden;
    mask-image: linear-gradient(180deg, #000 calc(100% - 2.5rem), transparent); }
  .ui-kicker { font-size: .75rem; color: var(--p-muted); }
  .ui-title { margin: 2px 0 .75rem; font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; }
  .ui-card { margin-block-start: .625rem; padding: 2px .875rem; border: 1px solid var(--p-border); border-radius: .625rem; background: var(--p-surface); }
  .ui-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: .625rem; min-block-size: 2.75rem; padding-block: .375rem; }
  .ui-row + .ui-row { border-block-start: 1px solid var(--p-border); }
  .ui-row-top { align-items: start; }
  .ui-row-top > .ui-label { padding-block-start: 2px; }
  .ui-label { font-size: .8125rem; font-weight: 500; color: var(--p-muted); }
  .ui-person { display: flex; align-items: center; gap: .5rem; min-inline-size: 0; }
  .ui-lines { display: grid; min-inline-size: 0; }
  .ui-name { font-weight: 600; }
  .ui-meta { font-size: .75rem; color: var(--p-muted); }
  .ui-amount { font-size: 1.25rem; font-weight: 650; }
  .ui-value { display: inline-flex; align-items: center; gap: .5rem; }
  .ui-dot { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--p-muted); }
  .ui-stack { display: grid; justify-items: start; gap: .5rem; }
  .ui-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .625rem; border-radius: 999px; background: var(--p-elev); border: 1px solid var(--p-border); font-size: .8125rem; }
  .ui-list { display: grid; gap: .5rem; }
  .ui-item { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; align-items: start; gap: .5rem; font-size: .8125rem; }
  .ui-item small { font-size: .75rem; color: var(--p-muted); white-space: nowrap; }
  .ui-item b { font-weight: 650; white-space: nowrap; }
  .ui-item .plus { color: var(--p-green); }
  .ui-item .minus { color: var(--p-red); }
  .ico { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; margin-block-start: 1px; }
  .ui-ava { display: inline-grid; place-items: center; flex: none; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; font-size: .75rem; font-weight: 700; color: #fff; }
  .ui-ava.sm { inline-size: 1.25rem; block-size: 1.25rem; font-size: .75rem; }
  .ava-client { background: #4a5568; }
  .ava-owner { background: #23728b; }
  .ui-chat { display: flex; flex-direction: column; min-block-size: 0; overflow: hidden; background: var(--p-chat); border-inline-start: 1px solid var(--p-border); }
  .ui-chat-head { display: flex; align-items: center; gap: .625rem; padding: .75rem .875rem; background: var(--p-surface); border-block-end: 1px solid var(--p-border); }
  .ui-faces { display: flex; }
  .ui-faces .ui-ava + .ui-ava { margin-inline-start: -.1875rem; box-shadow: 0 0 0 2px var(--p-surface); }
  .ui-icon-btn { margin-inline-start: auto; color: var(--p-muted); display: inline-grid; place-items: center; }
  .ui-chat-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .625rem .875rem; border-block-end: 1px solid var(--p-border); font-size: .8125rem; background: var(--p-surface); }
  .ui-state { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; }
  .ui-half { inline-size: .75rem; block-size: .75rem; border-radius: 50%; border: 2px solid var(--p-muted); background: linear-gradient(90deg, var(--p-muted) 50%, transparent 50%); }
  .ui-outline { display: inline-flex; align-items: center; gap: .375rem; margin-inline-start: auto; padding: .3125rem .625rem; border: 1px solid var(--p-border-strong); border-radius: .5rem; font-weight: 600; }
  .ui-chat-body { flex: 1; min-block-size: 0; overflow: hidden; mask-image: linear-gradient(180deg, transparent, #000 3rem); display: grid; align-content: end; gap: .875rem; padding: .75rem .875rem;
    background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 1rem 1rem; }
  .ui-day { justify-self: center; padding: .1875rem .625rem; border-radius: 999px; background: var(--p-elev); font-size: .75rem; color: var(--p-muted); }
  .ui-msg { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .625rem; }
  .ui-author { font-size: .8125rem; font-weight: 650; }
  .ui-text { margin-block: 2px .25rem; }
  .ui-composer { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; background: var(--p-surface); border-block-start: 1px solid var(--p-border); }
  .ui-input { flex: 1; padding: .5rem .75rem; border: 1px solid var(--p-border-strong); border-radius: .5rem; color: var(--p-muted); font-size: .8125rem; }
  .object.lit .app { border-color: rgba(255,255,255,.24); }
  @container (max-width: 22rem) { .ui-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
  /* story tail (classes set per frame by hero.js): typing → the bubble springs in from its own place → the task's
     check draws its stroke. Transitions, not keyframes, so a replay retargets instead of restarting. */
  .ui-new { display: grid; opacity: 0; transform: translateY(.625rem) scale(.97); transform-origin: 0 100%;
    transition: opacity .28s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.34, 1.36, .64, 1); }
  .ui-chat-body { position: relative; }
  .ui-typing { position: absolute; inset-inline-start: .875rem; inset-block-end: 1rem; margin: 0; display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--p-muted); opacity: 0; transition: opacity .2s var(--ease-out); }
  .ui-dots { display: inline-flex; gap: .1875rem; }
  .ui-dots i { inline-size: .3125rem; block-size: .3125rem; border-radius: 50%; background: var(--p-muted); }
  /* Owner 2026-10-03: the dots move only while «печатает» is shown, never in a loop after the story. */
  @media (prefers-reduced-motion: no-preference) { .object.s-typing:not(.s-msg) .ui-dots i { animation: typing 1.1s infinite cubic-bezier(.45, 0, .55, 1); } }
  .ui-dots i:nth-child(2) { animation-delay: .17s; } .ui-dots i:nth-child(3) { animation-delay: .34s; }
  @keyframes typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-.1875rem); } }
  .tick { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset .38s cubic-bezier(.65, 0, .35, 1); }
  .ui-task1 > span { transition: color .3s var(--ease-out); }
  .object.s-typing .ui-typing { opacity: 1; }
  .object.s-msg .ui-typing { opacity: 0; }
  .object.s-msg .ui-new, .object.final .ui-new { opacity: 1; transform: none; }
  .object.final .ui-typing { display: none; }
  .object.s-done .tick, .object.final .tick { stroke-dashoffset: 0; }
  .object.s-done .ui-task1 > span, .object.final .ui-task1 > span { color: var(--p-muted); text-decoration: line-through; }
  /* landing shadow: a separate layer, so only its opacity animates; at rest it breathes slowly (light only, no text) */
  .object { isolation: isolate; }
  .app-lift { position: absolute; inset: 2% 3% 6%; z-index: -1; border-radius: 1.125rem; pointer-events: none;
    box-shadow: 0 3.125rem 7.5rem -1.875rem oklch(0 0 0 / .95), 0 0 0 1px oklch(1 0 0 / .03); opacity: .55; }
  .object.final .app-lift { animation: breathe 7s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
  @keyframes breathe { from { opacity: .45; } to { opacity: .7; } }
  .ui-history .ui-log { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; font-size: .8125rem; color: #c9c9c9; }
  .ui-log small { font-size: .75rem; color: var(--p-muted); white-space: nowrap; }
  .replay { position: absolute; z-index: 2; inset-block-end: 0; inset-inline-end: 0; transform: translateY(50%); background: var(--canvas); display: inline-flex; align-items: center; gap: .375rem;
    min-block-size: 2.25rem; padding: 0 .75rem; font: 600 .875rem var(--font); color: var(--ink-soft);
    border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
  .replay[hidden] { display: none; }
  .int-move { color: var(--ink); font-weight: 600; }
  .integrations { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.75rem;
    padding-block: 1.25rem 1.5rem; border-block-start: 1px solid var(--line); font-size: 1rem; color: var(--ink-soft); }
  .int-list { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; font-weight: 700; color: oklch(0.8 0.005 80); letter-spacing: .01em; }
  .int-all { margin-inline-start: auto; padding-block: .25rem; margin-block: -.25rem; text-decoration: underline; text-decoration-color: oklch(1 0 0 / 0.3); text-underline-offset: .3em; }
  /* hover lives in this layer: an earlier layer would lose to the base .cta rule above */
  @media (hover: hover) and (pointer: fine) {
    .cta:hover { background: var(--accent-hi); }
    .demo:hover, .int-all:hover { text-decoration-color: var(--ink); }
    .replay:hover { color: var(--ink); border-color: oklch(1 0 0 / 0.3); }
  }

  /* 768–1199: text on top, card wider than the column, cut by the right edge with the fade */
  @media (max-width: 1199px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
    .hero { --app-h: 36rem; --side: 3.25rem; }
    .app-nav-text, .app-brand .app-nav-text { display: none; }
    .app-nav-item, .app-brand { justify-content: center; padding-inline: 0; }
    .slot { inline-size: 100%; }
  }

  /* <768: one cropped frame of the final card as a poster, no WebGL, everything left-aligned */
  @media (max-width: 767px) {
    :root { --gutter: 1rem; --bar-h: 3.5rem; }
    .bar { gap: 1rem; }
    .nav { display: none; }
    .login { margin-inline-start: auto; }
    .menu { display: block; position: relative; }
    .menu summary { list-style: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; cursor: pointer; border-radius: .75rem; }
    .menu summary::-webkit-details-marker { display: none; }
    .menu-panel { position: absolute; inset-inline-end: 0; inset-block-start: 3rem; display: grid; min-inline-size: 12rem; padding: .5rem;
      background: var(--canvas-2); border: 1px solid var(--line); border-radius: .875rem; }
    .menu:not([open]) .menu-panel { display: none; }
    .menu-panel a { padding: .75rem 1rem; text-decoration: none; }
    .hero { min-block-size: 0; }
    .stage { display: none; }
    .hero-grid { gap: 2rem; padding-block: 1.25rem 3rem; }
    .copy { gap: 1rem; }
    h1 { font-size: clamp(2.5rem, 10vw, 2.75rem); line-height: 1.04; letter-spacing: -0.045em; }
    .sub { font-size: 1rem; }
    .actions { inline-size: 100%; gap: .75rem; margin-block-start: .25rem; }
    .cta { inline-size: 100%; white-space: normal; font-size: 1rem; }
    .hero-grid { gap: 1.5rem; }
    .d-only { display: none !important; }
    .ui-row { grid-template-columns: minmax(0, 1fr); gap: .25rem; padding-block: .625rem; }
    .hero { --app-h: auto; --side: 2.75rem; }
    .app-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    .ui-deal { mask-image: none; }
    .ui-chat { border-inline-start: 0; border-block-start: 1px solid var(--p-border); }
    .app-side { padding-inline: .25rem; }
    .int-all { margin-inline-start: 0; }
    .object { padding-block-end: 0; }
    .replay { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-dots i, .object.final .app-lift { animation: none; }
    .ui-new, .tick, .cta, .ui-typing, .ui-task1 > span { transition: none; }
  }
  @media (forced-colors: active) {
    .cta { border: 2px solid ButtonText; }
    .app { border-color: CanvasText; box-shadow: none; }
  }
}