/* Есть способ — design system. Mobile-first; one system for all breakpoints (390 → 768 → 1024 → 1280). */

/* ---------- Fonts ---------- */
@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.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:Caveat;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/caveat-cyrillic-500.woff2) format("woff2");unicode-range:U+0401,U+0410-044F,U+0451}
@font-face{font-family:Caveat;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/caveat-latin-500.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0,U+00AB,U+00BB,U+2013,U+2014,U+2026,U+2192}

/* ---------- Tokens ---------- */
:root{
  color-scheme:light;
  --ink:#0b1238;
  --ink-2:#4f5773;
  --ink-3:#6b7288;
  --blue:#0b5cff;
  --blue-600:#0a4fe0;
  --blue-50:#eef3ff;
  --blue-100:#e1eaff;
  --violet:#8c6ef6;
  --violet-50:#f4f1fd;
  --green:#00a080;
  --green-50:#eaf7f3;
  --sky:#4a9afc;
  --sky-50:#edf5fe;
  --orange:#fc8048;
  --orange-50:#fdf3ec;
  --mint:#5adeba;
  --peach:#fcbaa0;
  --hand:#34418a;
  --bg:#fafcfe;
  --surface:#fff;
  --line:rgba(11,18,56,.08);
  --line-2:rgba(11,18,56,.14);
  --shadow-sm:0 2px 8px rgba(11,18,56,.04),0 6px 18px rgba(11,18,56,.05);
  --shadow:0 4px 12px rgba(11,18,56,.04),0 16px 36px rgba(11,18,56,.07);
  --shadow-lg:0 8px 20px rgba(11,18,56,.05),0 28px 60px rgba(11,18,56,.11);
  --r-xs:10px;--r-sm:14px;--r:20px;--r-lg:28px;--r-xl:36px;
  --container:1280px;
  --gutter:20px;
  --section:52px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:Manrope,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --hand-font:Caveat,"Segoe Print","Bradley Hand",cursive;
  --h1:clamp(34px,3.1vw + 19px,64px);
  --h2:clamp(27px,1.9vw + 16px,44px);
  --h3:clamp(17px,.35vw + 15.5px,20px);
  --lead:clamp(16px,.35vw + 14.6px,19px);
}
@media (min-width:768px){:root{--gutter:32px;--section:68px}}
@media (min-width:1280px){:root{--section:84px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
:where(ul,ol)[role=list]{list-style:none;padding:0}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:3px solid rgba(11,92,255,.5);outline-offset:3px;border-radius:6px}
::selection{background:var(--blue-100)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;transition:top .2s}
.skip-link:focus{top:12px}
.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section)*.7)}

/* ---------- Typography ---------- */
.h1{font-size:var(--h1);letter-spacing:-.035em;line-height:1.02}
.h2{font-size:var(--h2);letter-spacing:-.03em}
.h3{font-size:var(--h3);letter-spacing:-.015em;line-height:1.25}
.accent{color:var(--blue)}
.lead{font-size:var(--lead);line-height:1.55;color:var(--ink-2);font-weight:500}
.muted{color:var(--ink-2)}
.small{font-size:14px}
.eyebrow{justify-self:start;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);line-height:1.3}
.eyebrow--chip{padding:7px 14px;border-radius:999px;background:var(--blue-50);letter-spacing:.12em}
@media (max-width:767px){.eyebrow{padding:6px 12px;border-radius:999px;background:var(--blue-50);font-size:11px;letter-spacing:.12em}}
/* Homepage top zone: light powder-blue air (no green) → almost-white blue → site white by ~560px. */
body.page-home{background:
  linear-gradient(180deg,rgba(250,252,254,.18) 0,rgba(250,252,254,.3) 200px,var(--bg) 560px) no-repeat,
  radial-gradient(55% 420px at 88% 0,#e8f2ff,rgba(232,242,255,0) 100%) no-repeat 0 0/100% 560px,
  linear-gradient(112deg,#eff6ff 0,#f5f9ff 34%,#f2f1ff 62%,#fafcff 88%) no-repeat 0 0/100% 560px,
  var(--bg)}
.page-home .page-bg::before{background:radial-gradient(closest-side,rgba(120,170,250,.07),transparent),radial-gradient(closest-side at 30% 70%,rgba(160,150,245,.05),transparent)}
.page-home .page-bg::after{background:radial-gradient(closest-side,rgba(140,190,252,.06),transparent)}
@media (max-width:767px){body.page-home{background:linear-gradient(180deg,rgba(250,252,254,.45) 0,var(--bg) 460px) no-repeat,linear-gradient(112deg,#f3f8ff 0,#f7faff 50%,#fafcff 100%) no-repeat 0 0/100% 460px,var(--bg)}}
/* Homepage (desktop mockup): editorial label — light sky blue, wide tracking, no chip; mobile keeps the pale chip. */
.page-home{--hand:#4256bf}
/* Gradient label as in the mockup: violet-indigo → blue → sky/teal. Both ends keep ≥4.5:1 on the page and on the mobile chip. */
.page-home .eyebrow{font-weight:600;letter-spacing:.26em;margin-bottom:6px;color:#3f68d2;
  background-image:linear-gradient(90deg,#5a4fd8,#2a66d4 50%,#0b7299);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (max-width:767px){.page-home .eyebrow{font-size:10.5px;letter-spacing:.12em;margin-bottom:2px;
  background-image:linear-gradient(90deg,#5a4fd8,#2a66d4 50%,#0b7299),linear-gradient(var(--blue-50),var(--blue-50));-webkit-background-clip:text,padding-box;background-clip:text,padding-box}}
.prose{display:grid;gap:14px;color:var(--ink-2);font-size:17px;line-height:1.65;max-width:68ch}
.prose strong{color:var(--ink)}
.prose ul{padding-left:20px;display:grid;gap:6px}

/* Handwritten accent (max 3–4 per page) */
.note{font-family:var(--hand-font);font-weight:500;color:var(--hand);font-size:clamp(20px,1vw + 12px,26px);line-height:1.05;transform:rotate(var(--tilt,-6deg));pointer-events:none;user-select:none}
.note svg{color:var(--hand);opacity:.75}
.note--float{position:absolute;z-index:3}

/* ---------- Icons ---------- */
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.i--sm{width:16px;height:16px}
.i--lg{width:26px;height:26px}

/* ---------- Buttons ---------- */
.btn{--bh:52px;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--bh);padding:0 26px;border-radius:999px;border:1.5px solid transparent;font-weight:700;font-size:15.5px;line-height:1.2;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s,color .2s,border-color .2s;white-space:nowrap}
.btn .i{transition:transform .25s var(--ease)}
.btn:hover .i{transform:translateX(3px)}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(11,92,255,.26)}
.btn--primary:hover{background:var(--blue-600);box-shadow:0 12px 26px rgba(11,92,255,.32);transform:translateY(-1px)}
.btn--outline{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.page-home .btn--outline{border-color:rgba(11,92,255,.42)}
.btn--outline:hover{border-color:var(--blue);color:var(--blue)}
.btn--soft{background:var(--blue-50);color:var(--blue)}
.btn--soft:hover{background:var(--blue-100)}
.btn--lg{--bh:58px;padding:0 30px;font-size:16px}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
@media (max-width:767px){.btn{--bh:50px}.btn-row .btn{flex:1 1 100%}}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue)}
.link-arrow .i{transition:transform .25s var(--ease)}
.link-arrow:hover .i{transform:translateX(3px)}
.round-arrow{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--surface);color:var(--blue);box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),background-color .2s,color .2s}
.round-arrow .i{width:18px;height:18px}
.round-arrow--soft{background:var(--blue-50);box-shadow:none}

/* ---------- Chips / tags ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--blue-50);color:var(--blue);line-height:1.2;white-space:nowrap}
.tag--green{background:var(--green-50);color:#08775f}
.tag--violet{background:var(--violet-50);color:#6a4ee0}
.tag--orange{background:var(--orange-50);color:#c2521f}
.tag--muted{background:#eff1f6;color:var(--ink-2)}
.tags{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- Cards ---------- */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.card--pad{padding:22px}
@media (min-width:768px){.card--pad{padding:28px}}
.card--hover{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover){.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.card--hover:hover .round-arrow{background:var(--blue);color:#fff}}
.card-link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.icon-tile{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;flex:none;background:var(--tone-50,var(--blue-50));color:var(--tone,var(--blue))}
.icon-tile .i{width:24px;height:24px}
.icon-orb{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;flex:none;color:#fff;background:radial-gradient(120% 120% at 25% 20%,rgba(255,255,255,.35),transparent 45%),var(--tone,var(--blue));box-shadow:0 10px 22px -6px var(--tone,var(--blue))}
.icon-orb .i{width:28px;height:28px}
.tone-green{--tone:var(--green);--tone-50:var(--green-50);--tone-ink:#06735c}
.tone-violet{--tone:var(--violet);--tone-50:var(--violet-50);--tone-ink:#5b3fd6}
.tone-blue{--tone:var(--sky);--tone-50:var(--sky-50);--tone-ink:#1a64c7}
.tone-orange{--tone:var(--orange);--tone-50:var(--orange-50);--tone-ink:#b14814}
.tone-ink{--tone:var(--blue);--tone-50:var(--blue-50);--tone-ink:#0a4fe0}

/* Media frame ("polaroid") */
.frame{background:var(--surface);border-radius:var(--r);padding:8px;box-shadow:var(--shadow);border:1px solid var(--line)}
.frame__media{position:relative;overflow:hidden;border-radius:calc(var(--r) - 7px);aspect-ratio:4/3;background:var(--blue-50)}
.frame__media>img,.frame__media>svg{width:100%;height:100%;object-fit:cover}
.frame__body{padding:14px 10px 8px;display:grid;gap:6px}
.tilt{transform:rotate(var(--rot,0deg));transition:transform .45s var(--ease)}
@media (hover:hover){.tilt:hover{transform:rotate(0) translateY(-4px)}}
@media (max-width:767px){.tilt{--rot:0deg}}

/* ---------- Section heading ---------- */
.sec-head{display:grid;gap:14px;margin-bottom:32px}
.sec-head .sec-head{margin:0}
.sec-head .lead{max-width:56ch}
@media (min-width:1024px){
  .sec-head--split{grid-template-columns:1.1fr .9fr;align-items:end;gap:48px;margin-bottom:44px}
  .sec-head--split .lead{justify-self:end;max-width:44ch}
}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;transition:background-color .3s,box-shadow .3s,backdrop-filter .3s}
.site-header.is-scrolled{background:rgba(250,252,254,.82);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 var(--line)}
.site-header__bar{display:flex;align-items:center;gap:20px;height:68px}
@media (min-width:1024px){.site-header__bar{height:84px}}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.03em;white-space:nowrap}
.logo__dots{position:relative;width:30px;height:26px;flex:none}
.logo__dots i{position:absolute;border-radius:50%}
.logo__dots i:nth-child(1){width:15px;height:15px;left:0;top:1px;background:var(--blue)}
.logo__dots i:nth-child(2){width:12px;height:12px;left:14px;top:3px;background:var(--violet);opacity:.9}
.logo__dots i:nth-child(3){width:11px;height:11px;left:7px;top:14px;background:#7fb2ff}
@media (min-width:1024px){.logo{font-size:23px}}
.nav{display:none}
.site-header__cta{display:none}
@media (min-width:1024px){
  .nav{display:flex;gap:4px;margin-inline:auto}
  .nav a{padding:10px 14px;border-radius:999px;font-weight:600;font-size:15px;color:var(--ink);transition:background-color .2s,color .2s}
  .nav a:hover{background:var(--blue-50);color:var(--blue)}
  .nav a[aria-current=page]{color:var(--blue)}
  .site-header__cta{display:inline-flex;--bh:48px;padding:0 22px}
}
.burger{margin-left:auto;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;background:var(--surface);box-shadow:var(--shadow-sm);cursor:pointer}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
.burger[aria-expanded=true] span{transform:rotate(45deg);box-shadow:0 0 0 var(--ink),0 0 0 var(--ink)}
.burger[aria-expanded=true] span::after{content:"";display:block;width:18px;height:2px;background:var(--ink);transform:rotate(-90deg)}
@media (min-width:1024px){.burger{display:none}}
.mobile-nav{position:fixed;inset:68px 0 0;z-index:49;background:var(--bg);padding:24px var(--gutter) 40px;display:flex;flex-direction:column;gap:6px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .3s var(--ease),visibility 0s .3s}
.mobile-nav.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s var(--ease)}
.mobile-nav a:not(.btn){display:flex;justify-content:space-between;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);font-size:20px;font-weight:700;letter-spacing:-.02em}
.mobile-nav .btn{margin-top:20px}
@media (min-width:1024px){.mobile-nav{display:none}}
body.nav-open{overflow:hidden}

/* ---------- Page background ---------- */
.page-bg{position:absolute;inset:0 0 auto;height:1100px;z-index:-1;pointer-events:none;overflow:hidden}
.page-bg::before,.page-bg::after{content:"";position:absolute;border-radius:50%;filter:blur(10px)}
.page-bg::before{width:900px;height:700px;right:-220px;top:-160px;background:radial-gradient(closest-side,rgba(140,110,246,.16),transparent),radial-gradient(closest-side at 30% 70%,rgba(74,154,252,.14),transparent)}
.page-bg::after{width:620px;height:520px;left:-260px;top:340px;background:radial-gradient(closest-side,rgba(90,222,186,.10),transparent)}
main{position:relative;isolation:isolate}

/* ---------- Hero ---------- */
.hero{padding-top:18px;padding-bottom:12px}
.hero__grid{display:grid;gap:40px}
.hero__copy{position:relative;z-index:2;display:grid;gap:22px;align-content:start}
.hero__path{display:inline-flex;align-items:center;gap:10px;justify-self:start;padding:8px 16px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.7);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.hero__path .i{width:14px;height:14px;color:var(--blue)}
.hero .lead{max-width:40ch}
.trust{display:flex;flex-wrap:wrap;gap:12px 26px;padding:0;margin:6px 0 0;list-style:none}
.trust li{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink-2)}
.trust .i{width:18px;height:18px}
.hero__visual{position:relative;isolation:isolate;padding:24px 0 34px}
@media (min-width:1024px){
  .hero{padding-top:28px;padding-bottom:40px}
  .hero__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px;align-items:center}
  .hero__copy{gap:26px;padding-bottom:20px}
  .hero__visual{padding:40px 0 64px}
}
/* The photo box is exactly 4:3 like the hero-desktop asset (1600×1200), so object-fit never crops it.
   Inside the container: right edge matches the header/content edge; rounded on all sides; no bleed. */
.scene-wrap{position:relative;z-index:1;aspect-ratio:4/3}
@media (min-width:1024px){
  /* Desktop mockup: no frame. The whole 4:3 photo (never cropped or scaled) sits inside the content width, reaches
     under the end of the text column and dissolves into the page — strongly on the left (diagonal), softly on the
     other sides — so the person sits in the middle of the visual area instead of at the screen edge. */
  .scene-wrap{margin-left:-150px}
}
.scene{position:absolute;inset:0;border-radius:28px;overflow:hidden;background:#f1eefc;box-shadow:0 30px 70px -34px rgba(76,64,160,.32)}
@media (min-width:1024px){
  /* The photo enters the text area through clean diagonal cuts (as in the mockup), not a muddy fade:
     a slanted left edge plus a white glass facet over the lower-left corner; only the bottom and the far right
     get a short soft fade. */
  .scene{border-radius:0;background:none;box-shadow:none;clip-path:polygon(24% 0,100% 0,100% 100%,9% 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 94%,transparent),linear-gradient(180deg,transparent 0,#000 5%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,#000 94%,transparent),linear-gradient(180deg,transparent 0,#000 5%,#000 84%,transparent 100%);mask-composite:intersect}
  .scene-wrap::before,.scene-wrap::after{content:"";position:absolute;inset:0;pointer-events:none}
  .scene-wrap::before{z-index:1;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(234,242,255,.82));clip-path:polygon(9% 100%,31% 100%,17% 64%)}
  .scene-wrap::after{z-index:0;background:linear-gradient(180deg,rgba(218,235,255,.85),rgba(228,236,255,.5) 60%,rgba(234,242,255,0));clip-path:polygon(19% -4%,25.5% -4%,15% 72%,10% 72%)}
}
.scene__img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 55%}
.scene__lid{position:absolute;left:44%;top:57%;transform:translateX(-50%) rotate(-6deg);font-size:clamp(22px,1.6vw + 8px,34px);color:#5a6390;display:flex;align-items:flex-end;gap:6px;white-space:nowrap}
/* Mockup decor (desktop mockup is the source of truth). Z-order: background plane (hero::before) → ribbon → photo → cards → notes/arrows. */
.hero{position:relative;isolation:isolate;overflow-x:clip}
.hero::before{content:"";position:absolute;z-index:-1;top:-84px;right:0;width:min(62vw,960px);height:calc(100% + 84px);pointer-events:none;
  background:linear-gradient(160deg,rgba(232,242,255,.8),rgba(239,246,255,.6) 45%,rgba(245,249,255,.25));
  clip-path:polygon(34% 0,100% 0,100% 100%,12% 100%);
  -webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
.hero__ribbon{position:absolute;inset:0;z-index:2;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none}
.hero__ribbon-edge,.hero__ribbon-peach{fill:none;stroke-linecap:round}
.hero__ribbon-peach{opacity:.9}
.hero__ribbon-edge{fill:none}
.hero__arrow{position:absolute;z-index:4;fill:none;stroke:#7fa6e6;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.hero__arrow--idea{left:14.5%;top:12%;width:34px;height:60px}
.hero__note{left:-150px;top:60%;--tilt:-9deg;z-index:4;font-size:23px;line-height:1.08;display:flex;flex-direction:column;align-items:flex-start}
.hero__note svg{margin:0 0 2px 16px;opacity:.6}
.hero__note2{right:0;bottom:4px;--tilt:-5deg;z-index:4;font-size:22px;line-height:1.1;text-align:right}
@media (max-width:1279px){.hero__note2,.hero__arrow--idea{display:none}}
@media (max-width:1023px){.hero__arrow,.hero__note{display:none}.hero::before{width:100%;clip-path:none;opacity:.5}}
@media (max-width:1279px) and (min-width:1024px){
  .hero__note{left:34%;top:auto;bottom:-6px;font-size:21px;flex-direction:row;align-items:flex-start;gap:6px}
  .hero__note br{display:none}
  .hero__note svg{margin:0;transform:scaleY(-1) rotate(-20deg)}
}
@media (max-width:767px){
  /* Mobile: the same ribbon corner, lighter; no peach arc, weak background plane. */
  .hero__ribbon{opacity:.5}
  .hero__ribbon-peach{display:none}
  .hero::before{opacity:.3}
}
.float-card{position:absolute;z-index:3;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid rgba(233,236,248,.9);box-shadow:0 2px 6px rgba(11,18,56,.03),0 22px 44px -20px rgba(40,48,120,.22);font-size:14px;font-weight:700;line-height:1.25;animation:float 8s ease-in-out infinite;animation-delay:var(--delay,0s)}
/* Cards in % of the 4:3 photo (.scene-wrap), as in the mockup: «Идея» over the left edge,
   «Работа» top right and «AI» lower right, both overhanging the right edge, away from face, hands and laptop. */
.float-card--idea{left:19%;top:3%;--rot:-5deg;display:grid;gap:12px;width:148px;padding:18px 18px 20px;font-size:15px}
.float-card--idea .flow{font-size:15px;gap:5px}
.float-card--idea .bars{height:40px;gap:5px}
.float-card--idea .bars i{width:9px}
.float-card--work{right:-4%;top:-5%;--rot:-6deg;width:190px;padding:10px 10px 16px 14px;font-size:16px;--delay:-2s}
.float-card--work .float-card__img{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10;margin-bottom:12px}
.float-card--work .float-card__img img{width:100%;height:100%;object-fit:cover}
.float-card__pin{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink)}
.float-card__pin .i{width:15px;height:15px}
.float-card--ai{right:-5%;top:45%;--rot:-3deg;width:136px;display:grid;gap:10px;padding:16px 16px 18px;font-size:16px;--delay:-3s}
.float-card--ai img{width:74px;height:auto}
.float-card small{display:block;font-weight:600;color:var(--ink-2);font-size:14px}
.flow{display:grid;gap:3px;font-size:15px}
.flow span{display:flex;align-items:center;gap:6px}
.flow .i{width:14px;height:14px;color:var(--blue)}
.bars{display:flex;align-items:flex-end;gap:4px;height:34px}
.bars i{width:7px;border-radius:3px;background:linear-gradient(180deg,var(--violet),var(--blue))}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-7px) rotate(calc(var(--rot,0deg)*.7))}}
@media (min-width:1024px) and (max-width:1279px){
  .float-card--idea{width:118px;padding:13px 13px 15px;gap:8px;font-size:13px}
  .float-card--idea .flow{font-size:13px}
  .float-card--idea .bars{height:30px}
  .float-card--work{right:-3%;width:150px;font-size:13.5px}
  .float-card--ai{right:-3%;top:47%;width:116px;padding:12px;font-size:13.5px}
  .float-card--ai img{width:56px}
  .float-card small{font-size:12px}
}
@media (max-width:1023px) and (min-width:768px){.float-card--work{right:2%;top:-4%}.float-card--ai{right:2%}}
@media (max-width:767px){
  /* Mobile: clean photo, 2 small cards overhanging the left corners, away from the person. */
  .float-card--idea{left:-6px;top:-18px;width:auto;padding:9px 11px;gap:8px;font-size:13px}
  .float-card--idea .bars{height:22px}
  .float-card--idea .bars i{width:7px}
  .float-card--idea .flow{font-size:12px}
  .float-card--work{left:-8px;right:auto;top:auto;bottom:-30px;width:100px;padding:6px 6px 9px;font-size:11.5px}
  .float-card small{font-size:11.5px}
  .float-card--ai{display:none}
}

/* Before / after (static + interactive) */
.ba{position:relative;overflow:hidden;border-radius:inherit;aspect-ratio:inherit;height:100%;--pos:50%;touch-action:pan-y;user-select:none}
.ba__img{position:absolute;inset:0;width:100%;height:100%}
.ba__img svg,.ba__img img{width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 0 0 var(--pos))}
.ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(11,18,56,.06)}
.ba__handle{position:absolute;top:50%;left:var(--pos);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;box-shadow:var(--shadow)}
.ba__label{position:absolute;bottom:12px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.9);font-size:12.5px;font-weight:700;z-index:2}
.ba__label--before{left:12px}
.ba__label--after{right:12px;background:var(--ink);color:#fff}
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}
.ba__range:focus-visible+.ba__line+.ba__handle{outline:3px solid rgba(11,92,255,.55);outline-offset:3px}

/* ---------- Start (4 scenarios) ---------- */
.scenarios{display:grid;gap:14px}
.scenario{display:flex;flex-direction:column;gap:14px;padding:22px;min-height:100%;border-radius:var(--r-lg);background:linear-gradient(165deg,var(--tone-50) 0,#fff 78%);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.scenario__head{display:flex;align-items:center;gap:16px}
.scenario__body{color:var(--ink-2);font-size:15px}
.scenario__art{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;min-height:56px}
.mini-chips{display:flex;flex-wrap:wrap;gap:6px}
.mini-chips span{padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:700}
.mini-ba{display:flex;width:92px;height:56px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.mini-ba span{flex:1}
.mini-ba span:first-child{background:linear-gradient(180deg,#eceae6,#dcd9d3)}
.mini-ba span:last-child{background:linear-gradient(160deg,#ffd9c7,#e6dcff)}
.mini-seg{display:flex;padding:3px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:11.5px;font-weight:700}
.mini-seg span{padding:5px 9px;border-radius:999px;color:var(--ink-2)}
.mini-seg span:nth-child(2){background:var(--blue);color:#fff}
.mini-steps{display:flex;align-items:center;gap:6px}
.mini-steps i{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--orange);font:800 11px/18px var(--font);color:var(--orange);text-align:center;font-style:normal}
.mini-steps b{width:14px;height:2px;background:var(--peach)}
@media (min-width:1024px){
  .scenarios{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .scenario{padding:26px;gap:18px;min-height:292px}
}

/* ---------- Carousel ---------- */
.carousel{position:relative}
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:var(--item,84%);gap:var(--gap,14px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scroll-padding-inline:var(--gutter);padding:12px var(--gutter) 22px;margin:-12px calc(var(--gutter)*-1) -22px;scrollbar-width:none;list-style:none}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track>*{scroll-snap-align:start;min-width:0}
.carousel__controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}
.dots{display:flex;gap:8px;align-items:center}
.dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#cfd7ea;cursor:pointer;transition:width .3s var(--ease),background-color .3s}
.dots button[aria-current=true]{width:24px;background:var(--blue)}
.arrows{display:none;gap:10px}
.arrows button{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);cursor:pointer;transition:background-color .2s,color .2s,opacity .2s}
.arrows button:hover:not(:disabled){background:var(--blue);color:#fff}
.arrows button:disabled{opacity:.35;cursor:default}
@media (min-width:768px){.carousel__track{--item:46%}.arrows{display:flex}}
/* Mobile-only carousel: becomes a grid from tablet up */
@media (min-width:768px){
  .carousel--m .carousel__track{display:grid;grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  .carousel--m .carousel__controls{display:none}
}

/* ---------- Methods (editorial carousel) ---------- */
.methods{display:grid;gap:28px}
.methods__intro{display:grid;gap:18px;align-content:start;position:relative}
@media (min-width:1024px){
  .methods{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:48px;align-items:start}
  .methods__intro{padding-top:36px}
  .methods .carousel__track{--item:31.5%;--gap:22px}
}
.method-card{display:flex;flex-direction:column;height:100%}
.method-card .frame__media{aspect-ratio:5/4}
.method-card .frame__body{flex:1;align-content:start}
.method-card p{color:var(--ink-2);font-size:14.5px;line-height:1.5}
.method-card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px}
.methods .carousel__track>li:nth-child(3n+1) .tilt{--rot:-1.6deg}
.methods .carousel__track>li:nth-child(3n+2) .tilt{--rot:1.2deg}
.methods .carousel__track>li:nth-child(3n) .tilt{--rot:-.6deg}
.methods__note{right:0;top:-92px;--tilt:-6deg;display:flex;align-items:flex-start;gap:8px}
.methods__note svg{margin-top:4px;opacity:.6}
/* Mockup: smaller two-level heading, compact lead, blue outline button, 4 cards, arrows at the sides, dots centred. */
@media (min-width:1024px){
  .methods{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);gap:40px}
  .methods .h2{font-size:clamp(30px,1.4vw + 16px,38px);line-height:1.12;text-wrap:balance}
  .methods .lead{font-size:15px;max-width:34ch}
  .methods .btn--outline{color:var(--blue)}
  .methods .carousel__track{--item:calc((100% - 3*16px)/4);--gap:16px;margin-right:0;padding-right:0}
  .methods .carousel__controls{justify-content:center;margin-top:22px}
  .methods .arrows{position:absolute;left:-22px;right:-22px;top:40%;justify-content:space-between;pointer-events:none}
  .methods .arrows button{pointer-events:auto;width:44px;height:44px}
  .methods .method-card .frame__media{aspect-ratio:4/3}
  .methods .method-card .frame__body{padding:12px 8px 6px;gap:5px}
  .methods .method-card .h3{font-size:16px}
  .methods .method-card p{font-size:13.5px;line-height:1.45}
  .methods .method-card .tag{font-size:11px;padding:4px 9px}
  .methods .method-card .link-arrow{font-size:14px}
}
@media (min-width:1024px) and (max-width:1279px){.methods .carousel__track{--item:calc((100% - 2*16px)/3)}}

/* ---------- Try panel ---------- */
.panel{position:relative;border-radius:var(--r-xl);background:radial-gradient(70% 90% at 90% 10%,rgba(140,110,246,.16),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(74,154,252,.14),transparent 60%),linear-gradient(135deg,#f2f0ff,#eef4ff);border:1px solid rgba(140,110,246,.14);overflow:hidden}
.try{display:grid;gap:28px;padding:32px 20px}
.try__copy{display:grid;gap:18px;align-content:start}
.try__main{border-radius:var(--r-lg)}
.try__main .frame__media{aspect-ratio:4/3}
.try__side{--item:78%}
.try-card .frame__media{aspect-ratio:16/10}
.try-card__cap{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;font-size:14.5px;line-height:1.3}
@media (min-width:768px){.try{padding:48px}}
@media (min-width:1024px){
  .try{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;padding:64px;align-items:center}
  .try__visuals{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:center}
  .try__side .carousel__track{display:grid;grid-auto-flow:row;grid-auto-columns:auto;gap:22px;overflow:visible;margin:0;padding:0}
  .try__side .carousel__controls{display:none}
  .try__side li:nth-child(1) .tilt{--rot:2.5deg}
  .try__side li:nth-child(2) .tilt{--rot:-2deg}
  .try__main.tilt{--rot:-1.5deg}
}
.try__note{--tilt:-4deg;margin:6px 0 0 8px}
.textgen{display:grid;gap:8px;align-content:center;height:100%;padding:18px;background:linear-gradient(160deg,#fff,#f3f0ff)}
.textgen i{display:block;height:8px;border-radius:6px;background:#dfe4f2}
.textgen i:nth-child(2){width:86%}.textgen i:nth-child(3){width:64%}
.textgen b{justify-self:end;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;margin-top:4px}

/* ---------- Pay (client tasks) ---------- */
.pay{display:grid;gap:28px}
.pay__intro{display:grid;gap:16px;align-content:start}
.pay__grid{display:grid;gap:14px}
.task{display:grid;gap:14px;padding:22px}
.task__label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.task__problem{font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.3}
.task__offer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px dashed var(--line-2)}
.task__offer span{display:grid;gap:2px;font-size:13.5px;color:var(--ink-2)}
.task__offer strong{font-size:16px;color:var(--blue)}
@media (min-width:768px){.pay__grid{grid-template-columns:1fr 1fr;gap:20px}}
@media (min-width:1024px){.pay{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:56px}.pay__intro{position:sticky;top:120px}}

/* ---------- Route / timeline ---------- */
.route{position:relative;display:grid;gap:26px;padding:0;margin:0;list-style:none;--progress:0}
.route::before,.route::after{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;border-radius:2px}
.route::before{background:repeating-linear-gradient(180deg,#cfd7ea 0 6px,transparent 6px 12px)}
.route::after{background:linear-gradient(180deg,var(--blue),var(--violet),var(--mint));transform-origin:top;transform:scaleY(var(--progress));transition:transform .15s linear}
.step{position:relative;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;align-content:start}
.step__num{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tone);color:#fff;font-weight:800;font-size:16px;box-shadow:0 0 0 6px var(--bg),0 8px 18px -6px var(--tone)}
.step h3{margin-bottom:4px}
.step p{color:var(--ink-2);font-size:15px}
.step:nth-child(1){--tone:var(--blue)}.step:nth-child(2){--tone:var(--violet)}.step:nth-child(3){--tone:#2fc79d}.step:nth-child(4){--tone:#f59872}.step:nth-child(5){--tone:var(--sky)}
@media (min-width:1024px){
  .route{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
  .route::before,.route::after{left:22px;right:22px;top:21px;bottom:auto;width:auto;height:2px}
  .route::before{background:repeating-linear-gradient(90deg,#cfd7ea 0 6px,transparent 6px 12px)}
  .route::after{background:linear-gradient(90deg,var(--blue),var(--violet),var(--mint),var(--peach));transform-origin:left;transform:scaleX(var(--progress))}
  .step{grid-template-columns:1fr;gap:18px}
  .step__num{box-shadow:0 0 0 8px var(--bg),0 8px 18px -6px var(--tone)}
}

/* ---------- Tool picker ---------- */
.picker{display:grid;gap:22px}
.seg{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px var(--gutter);margin-inline:calc(var(--gutter)*-1)}
.seg::-webkit-scrollbar{display:none}
.seg button{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-weight:700;font-size:15px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}
.seg button:hover{border-color:var(--blue);color:var(--blue)}
.seg button[aria-selected=true]{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(11,92,255,.25)}
@media (min-width:768px){.seg{flex-wrap:wrap;overflow:visible;padding:0;margin:0}}
.pick{display:grid;gap:18px}
.pick[hidden]{display:none}
.tool-feature{display:grid;gap:16px;padding:24px;align-content:start}
.tool-feature__head{display:flex;align-items:center;gap:16px}
.mono{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;flex:none;font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--tone-ink,var(--blue));background:var(--tone-50,var(--blue-50))}
.mono--lg{width:64px;height:64px;font-size:22px;border-radius:18px}
/* Official AI brand logo (x-ai-logo): neutral white tile, logo never recoloured; --logo-scale only offsets built-in padding. */
.mono--logo{background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(11,18,56,.04)}
.mono--logo img{width:56%;height:56%;object-fit:contain;transform:scale(var(--logo-scale,1))}
.mono.mono--logo.mono--wordmark{width:auto;min-width:52px;padding:0 12px;justify-self:start;align-self:start}
/* Wordmarks: fixed optical height, width follows the official aspect ratio (capped for very wide marks). */
.mono--wordmark img{width:auto;height:calc(20px * var(--logo-scale,1));max-width:112px;object-fit:contain;transform:none}
.mono--lg.mono--wordmark img{height:calc(24px * var(--logo-scale,1));max-width:132px}
.tool-feature h3{font-size:24px}
.alt-list{--item:72%}
.alt{display:flex;align-items:center;gap:14px;padding:16px 18px}
.alt p{font-size:13.5px;color:var(--ink-2);line-height:1.4}
@media (min-width:1024px){
  .pick{grid-template-columns:1.3fr 1fr;gap:22px}
  .alt-list .carousel__track{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:14px}
  .alt-list .carousel__controls{display:none}
}

/* ---------- Tools ribbon ---------- */
.tools .carousel__track{--item:62%}
.tool-card{display:grid;gap:12px;padding:20px;height:100%;align-content:start}
.tool-card p{font-size:14px;color:var(--ink-2);line-height:1.45}
.tool-card__foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
@media (min-width:768px){.tools .carousel__track{--item:31%}}
@media (min-width:1024px){.tools--grid .carousel__track{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0;gap:18px}.tools--grid .carousel__controls{display:none}}

/* ---------- Guides ---------- */
.guides{display:grid;gap:14px}
.guide{display:grid;grid-template-columns:112px 1fr;gap:16px;padding:12px;align-items:center}
.guide__thumb{border-radius:14px;overflow:hidden;aspect-ratio:1/1;background:var(--blue-50)}
.guide__thumb svg,.guide__thumb img{width:100%;height:100%;object-fit:cover}
.guide__body{display:grid;gap:8px;align-content:start}
.guide__body p{font-size:14px;color:var(--ink-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:768px){.guide{grid-template-columns:180px 1fr;padding:14px;gap:22px}}
@media (min-width:1024px){
  .guides{grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto;gap:22px}
  .guide--lead{grid-row:span 2;grid-template-columns:1fr;align-content:start;padding:14px 14px 22px}
  .guide--lead .guide__thumb{aspect-ratio:16/10}
  .guide--lead .guide__body{padding:6px 12px 0}
  .guide--lead h3{font-size:24px}
}

/* ---------- Learning ---------- */
.learn{display:grid;gap:28px}
.learn__cards{display:grid;gap:14px}
.learn-card{display:flex;align-items:center;gap:16px;padding:20px}
.learn-card__text{display:grid;gap:2px;flex:1}
.learn-card__text span{font-size:14px;color:var(--ink-2)}
.disclosure{font-size:13px;color:var(--ink-3);max-width:62ch}
@media (min-width:1024px){.learn{grid-template-columns:1fr 1fr;gap:56px;align-items:center}.learn-card{padding:24px 26px}}

/* ---------- Final CTA ---------- */
.final{position:relative;display:grid;gap:18px;padding:36px 22px 150px;border-radius:var(--r-xl);overflow:hidden;background:radial-gradient(60% 90% at 100% 0,rgba(140,110,246,.22),transparent 60%),radial-gradient(60% 80% at 0 100%,rgba(90,222,186,.18),transparent 60%),linear-gradient(135deg,#efeaff,#eaf2ff)}
.final>*{position:relative;z-index:1;max-width:560px}
.final__leaves{position:absolute;right:-30px;bottom:-40px;width:260px;z-index:0;max-width:none}
.final__note{position:absolute;left:24px;bottom:28px;--tilt:-4deg}
@media (min-width:768px){.final{padding:64px 64px 72px}.final__leaves{width:360px;right:-20px;bottom:-60px}.final__note{left:auto;right:300px;bottom:40px}}

/* ---------- Footer ---------- */
.site-footer{margin-top:var(--section);padding:56px 0 32px;border-top:1px solid var(--line);background:#fff}
.footer__grid{display:grid;gap:32px}
.footer__about{display:grid;gap:14px;max-width:360px;color:var(--ink-2);font-size:14.5px}
.footer__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.footer__cols h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.footer__cols ul{display:grid;gap:10px;font-weight:600;font-size:15px}
.footer__cols a:hover{color:var(--blue)}
.footer__legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:8px;font-size:13px;color:var(--ink-3)}
@media (min-width:1024px){.footer__grid{grid-template-columns:1fr 2fr}.footer__cols{grid-template-columns:repeat(4,1fr)}}

/* ---------- Inner pages ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13.5px;font-weight:600;color:var(--ink-3);padding:0;margin:0 0 22px;list-style:none}
.crumbs a:hover{color:var(--blue)}
.crumbs li:not(:last-child)::after{content:"/";margin-left:6px;color:#b9c0d3}
.page-hero{padding-top:20px;padding-bottom:calc(var(--section)*.7)}
.page-hero__grid{display:grid;gap:36px}
.page-hero__copy{display:grid;gap:20px;align-content:start}
@media (min-width:1024px){.page-hero{padding-top:36px}.page-hero__grid{grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}}
.grid-cards{display:grid;gap:14px}
@media (min-width:768px){.grid-cards{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (min-width:1024px){.grid-cards--3{grid-template-columns:repeat(3,1fr)}.grid-cards--4{grid-template-columns:repeat(4,1fr)}}
.info-card{display:grid;gap:12px;padding:22px;align-content:start}
.info-card p{color:var(--ink-2);font-size:15px}
.split{display:grid;gap:28px}
@media (min-width:1024px){.split{grid-template-columns:.8fr 1.2fr;gap:56px}}
.checklist{display:grid;gap:12px;padding:0;margin:0;list-style:none}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.checklist .i{color:var(--green);margin-top:2px}
.soon{display:grid;gap:14px;padding:28px;border-radius:var(--r-lg);border:1.5px dashed rgba(11,92,255,.25);background:rgba(238,243,255,.6)}
.faq{display:grid;gap:12px;max-width:860px}
.faq details{border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font-weight:700;font-size:17px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{transition:transform .3s var(--ease);color:var(--blue)}
.faq details[open] summary .i{transform:rotate(45deg)}
.faq details>div{padding:0 22px 20px;color:var(--ink-2)}
.method-list{display:grid;gap:14px}
@media (min-width:768px){.method-list{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (min-width:1024px){.method-list{grid-template-columns:repeat(3,1fr)}}

/* ---------- Generator (Phase 1: UI states only) ---------- */
.gen{display:grid;gap:22px;padding:22px;border-radius:var(--r-xl)}
@media (min-width:768px){.gen{padding:36px}}
.gen__banner{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.gen__banner .i{color:var(--blue);margin-top:2px}
.gen__state{display:grid;gap:18px}
.gen__state[hidden]{display:none}
.drop{position:relative;display:grid;place-items:center;gap:12px;padding:36px 20px;text-align:center;border-radius:var(--r-lg);border:2px dashed rgba(11,92,255,.3);background:rgba(255,255,255,.75);transition:border-color .2s,background-color .2s}
.drop.is-over,.drop:hover{border-color:var(--blue);background:#fff}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.drop:focus-within{outline:3px solid rgba(11,92,255,.45);outline-offset:3px}
.progress{height:8px;border-radius:999px;background:#e3e8f5;overflow:hidden}
.progress i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--violet));transition:width .3s linear}
.gen__steps{display:grid;gap:10px;padding:0;margin:0;list-style:none}
.gen__steps li{display:flex;gap:10px;align-items:center;font-weight:600;color:var(--ink-3)}
.gen__steps li.is-done{color:var(--ink)}
.gen__steps li.is-done .i{color:var(--green)}
.gen__result{display:grid;gap:14px}
@media (min-width:768px){.gen__result{grid-template-columns:1fr 1fr}}
.gen__pic{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:#fff;box-shadow:var(--shadow-sm)}
.gen__pic img,.gen__pic svg{width:100%;height:100%;object-fit:cover}
.gen__pic figcaption{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:12.5px;font-weight:700}
.watermark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;background:repeating-linear-gradient(-30deg,transparent 0 70px,rgba(255,255,255,.12) 70px 72px)}
.watermark span{transform:rotate(-24deg);font-weight:800;font-size:26px;letter-spacing:.04em;color:rgba(255,255,255,.75);text-shadow:0 2px 12px rgba(11,18,56,.25)}
.lock{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:18px 20px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.price{font-size:28px;font-weight:800;letter-spacing:-.03em}
.states-switch{display:flex;flex-wrap:wrap;gap:6px;font-size:12px}
.states-switch button{padding:6px 10px;border-radius:999px;border:1px dashed var(--line-2);background:#fff;cursor:pointer}

/* ---------- Reveal & motion ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
  .float-card{animation:none}
}

/* ---------- Error pages ---------- */
.error-page{min-height:60vh;display:grid;place-items:center;text-align:center;padding-block:var(--section)}
.error-page__code{font-size:clamp(80px,14vw,160px);font-weight:800;letter-spacing:-.06em;line-height:1;background:linear-gradient(135deg,var(--blue),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.error-page .btn-row{justify-content:center}

/* ---------- Additions ---------- */
.play-badge{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:var(--shadow)}
.play-badge .i{width:22px;height:22px;margin-left:3px}
.media-video{position:absolute;inset:0;overflow:hidden}
.media-video>picture{display:block;width:100%;height:100%}
.media-video__poster,.media-video>img,.media-video>picture img,.media-video__video{width:100%;height:100%;object-fit:cover}
.media-video__video{position:absolute;inset:0;opacity:0;transition:opacity .2s ease}
.media-video.is-ready .media-video__video{opacity:1}
.media-video__toggle{position:absolute;right:10px;bottom:10px;z-index:3;width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--ink);box-shadow:var(--shadow-sm);cursor:pointer}
.media-video__toggle span{display:block;width:0;height:0;margin-left:2px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor}
.media-video.is-playing .media-video__toggle span{width:11px;height:13px;margin:0;border:0;background:linear-gradient(90deg,currentColor 0 36%,transparent 36% 64%,currentColor 64% 100%)}
.media-video__toggle:focus-visible{outline:3px solid rgba(11,92,255,.42);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.media-video__video{display:none}}
.scenario{position:relative}
@media (min-width:768px) and (max-width:1023px){.scenarios{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1023px){.methods__note{display:none}}
@media (max-width:519px){.hero__path{font-size:10px;letter-spacing:.06em;padding:7px 12px;gap:6px;white-space:nowrap}.trust{gap:10px 18px}.trust li{font-size:13px}}
@media (max-width:767px){.final__note{position:static;margin-top:8px}.final{padding-bottom:120px}}
.tool-card .mono,.alt .mono{width:48px;height:48px;font-size:17px}
.alt strong{font-size:16px}
.frame__media .ba{position:absolute;inset:0}
@media (max-width:767px){.btn{white-space:normal;text-align:center}.btn--lg{padding:0 22px}.try__copy,.try__visuals{min-width:0}}

/* ---------- Visual polish: tools, statement ---------- */
.tools2{display:grid;gap:18px}
.tools-tiles .carousel__track{--item:46%}
.tile{display:grid;gap:10px;align-content:start;height:100%;padding:22px 20px;border-radius:var(--r-lg);background:linear-gradient(170deg,var(--tone-50) 0,#fff 70%);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tile .mono{background:#fff;box-shadow:var(--shadow-sm)}
.tile__what{font-size:14px;color:var(--ink-2);line-height:1.45}
@media (hover:hover){.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}}
.tools-list{display:grid;gap:12px}
.tools-list .alt{justify-content:space-between}
.tools-list .alt>span:not(.mono):not(.round-arrow){flex:1}
@media (min-width:768px){.tools-tiles .carousel__track{--item:31%}}
@media (min-width:1024px){
  .tools2{grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
  .tools-tiles .carousel__track{display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr 1fr;overflow:visible;margin:0;padding:0;gap:18px}
  .tools-tiles .carousel__controls{display:none}
  .tools-tiles li:nth-child(even){margin-top:24px}
}
.statement{padding-block:calc(var(--section)*1.1)}
.statement__text{max-width:24ch;font-size:clamp(28px,2.6vw + 14px,54px);font-weight:800;letter-spacing:-.035em;line-height:1.1;text-wrap:balance}
.statement__caption{margin-top:20px;max-width:52ch;font-size:var(--lead);color:var(--ink-2);font-weight:500}
@media (min-width:1024px){.statement .container{padding-left:calc(var(--gutter) + 8.5%)}}


/* ==========================================================================
   Homepage — approved desktop mockup (scoped to .page-home so inner pages keep the base design system)
   ========================================================================== */
@media (min-width:1024px){
  /* Mockup rhythm: sections sit closer together than the base design system. */
  .page-home{--section:52px}
  .page-home .hero{padding-bottom:8px}
  .page-home .sec-head{margin-bottom:28px}
  .page-home .sec-head--split{margin-bottom:34px}
}

/* «С чего хотите начать?»: four equal tinted cards in one row, icon + title, text, round arrow; no chess offset, no mini art. */
#start .scenario{background:linear-gradient(165deg,var(--tone-50) 0,color-mix(in srgb,var(--tone-50) 45%,#fff) 100%);border-color:color-mix(in srgb,var(--tone-50) 40%,var(--line))}
#start .scenario__art{justify-content:flex-end;min-height:0}
@media (min-width:1024px){
  #start .scenario{min-height:236px;padding:26px 26px 22px}
}
@media (min-width:1280px){
  #start .icon-orb{width:72px;height:72px}
  #start .icon-orb .i{width:32px;height:32px}
  #start .scenario__body{font-size:15.5px}
}

/* «Попробуйте прежде, чем учиться»: a wide, low panel — copy, three tilted cards in a row, note on the right. */
.try__prism{display:none}
@media (min-width:1280px){
  .page-home .try{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:36px;padding:40px 236px 40px 48px;align-items:center}
  .page-home .try__copy{position:relative;gap:14px}
  .page-home .try .eyebrow{display:none}
  .page-home .try .h2{font-size:clamp(30px,1.4vw + 16px,38px);line-height:1.12}
  .page-home .try .lead{font-size:15px;max-width:34ch}
  .page-home .try__prism{display:block;position:absolute;right:-18px;top:44%;width:46px;height:46px;opacity:.8;transform:rotate(-12deg)}
  .page-home .try__visuals{grid-template-columns:1fr 2fr;gap:14px;align-items:stretch}
  .page-home .try__side .carousel__track{grid-auto-flow:column;grid-template-columns:1fr 1fr;gap:14px}
  .page-home .try__visuals .frame__media{aspect-ratio:1/1}
  .page-home .try-card__cap{font-size:13px;padding:10px 6px 4px}
  .page-home .try-card__cap .h3{font-size:13.5px!important}
  .page-home .try__main.tilt{--rot:-3deg}
  .page-home .try__side li:nth-child(1) .tilt{--rot:1.5deg}
  .page-home .try__side li:nth-child(2) .tilt{--rot:-2.5deg}
  .page-home .try__note{position:absolute;right:26px;top:56%;margin:0;transform:translateY(-50%) rotate(-8deg);max-width:170px;font-size:24px;line-height:1.1;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
}

/* «Как это работает» on the homepage: number + text side by side, arrows between the steps (no dashed line). */
@media (min-width:1280px){
  .page-home .route{gap:44px}
  .page-home .route::before,.page-home .route::after{display:none}
  .page-home .step{grid-template-columns:44px 1fr;gap:14px}
  .page-home .step__num{box-shadow:0 8px 18px -6px var(--tone);font-size:17px}
  .page-home .step:not(:last-child)::after{content:"";position:absolute;right:-36px;top:12px;width:24px;height:20px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none' stroke='%230b5cff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10h19M14 3l7 7-7 7'/%3E%3C/svg%3E")}
}

/* Final CTA note: arrow up-right after the text, as in the mockup. */
.final__note{display:flex;align-items:flex-end;gap:6px}
@media (min-width:1280px) and (max-width:1439px){.page-home .try{padding-right:214px}.page-home .try__note{right:18px;font-size:21px;max-width:156px}}
/* 1280–1439: little room outside the container — keep hero cards and the note inside the viewport. */
@media (min-width:1280px) and (max-width:1439px){.float-card--work{right:1%}.float-card--ai{right:0}.hero__note2{right:14px}}
/* Try block, main before/after card: the visual lead of the block; compact two-line caption. */
/* Try block: three cards of equal weight; captions compact (max two lines). */
.page-home .try__main .try-card__cap{font-size:13px;line-height:1.3;padding:10px 6px 4px;gap:8px}
.page-home .try__main .try-card__cap .round-arrow{width:32px;height:32px}
/* Narrow equal cards: the arrow link sits on the photo corner so the caption keeps two lines. */
@media (min-width:1024px){.page-home .try__main{position:relative}.page-home .try__main .try-card__cap .round-arrow{position:absolute;right:16px;top:16px;z-index:3;background:#fff;box-shadow:var(--shadow-sm)}}
.page-home .try__side .try-card__cap{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px}
/* 1024–1279: the handwritten note sits under the copy; the visuals span both rows (keeps the 2-column panel). */
@media (min-width:1024px) and (max-width:1279px){
  .page-home .try{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
  .page-home .try__visuals{grid-column:2;grid-row:1 / span 2;align-self:center;grid-template-columns:1fr 1fr}
  .page-home .try__visuals .frame__media{aspect-ratio:1/1}
  .page-home .try__note{grid-column:1;grid-row:2;margin:0 0 0 8px}
}
@media (max-width:1023px){.page-home .try__side .try-card__cap{font-size:13px}}

/* Homepage before/after: keep the original slider/card layout, but show 4:3 product images in full. */
.page-home .try__main .ba__img{background:#f5f7fb}
.page-home .try__main .ba__img img{object-fit:contain}