:root{
  --bg:#FBFBFD;
  --ink:#0B0B0F;
  --muted:#6E6E76;
  --line:#E8E8ED;
  --card:#FFFFFF;
  --indigo:#4F46E5;
  --cyan:#06B6D4;
  --violet:#8B5CF6;
  --grad:linear-gradient(100deg,var(--indigo),var(--violet) 45%,var(--cyan));
  --radius:28px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Golos Text',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Inter Tight',-apple-system,sans-serif}
.mono{font-family:'JetBrains Mono',monospace}
a{color:inherit;text-decoration:none}
::selection{background:rgba(79,70,229,.18)}

/* ---------- utilities ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--grad)}

/* scroll-reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- navigation ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .4s,box-shadow .4s,backdrop-filter .4s;
}
nav.scrolled{
  background:rgba(251,251,253,.72);
  backdrop-filter:saturate(1.8) blur(20px);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);
  box-shadow:0 1px 0 var(--line);
}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:0 28px;height:64px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{font-family:'Inter Tight';font-weight:800;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.logo-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px rgba(99,102,241,.55);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.nav-links{display:flex;gap:34px;font-size:14.5px;color:var(--muted)}
.nav-links a{transition:color .25s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  font-size:14px;font-weight:600;padding:9px 20px;border-radius:100px;
  background:var(--ink);color:#fff;transition:transform .35s var(--ease),box-shadow .35s;
}
.nav-cta:hover{transform:scale(1.05);box-shadow:0 8px 24px rgba(11,11,15,.22)}
@media(max-width:820px){.nav-links{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;overflow:hidden;padding-bottom:120px;
}
.hero-content{position:relative;z-index:2;width:100%;padding:130px 0 0}

/* ---- "We build" + giant rotating word (Avista-style) ---- */
.we-build{
  max-width:1180px;margin:0 auto;padding:0 28px;text-align:left;
  font-family:'Inter Tight';font-weight:600;font-size:clamp(20px,2.6vw,30px);
  letter-spacing:-.02em;display:flex;align-items:center;gap:16px;
  opacity:0;animation:fadeUp 1.1s var(--ease) .2s forwards;
}
.we-build::before{content:"";width:44px;height:3px;border-radius:3px;background:var(--grad);flex:none}
.we-build .avail{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:7px 14px;background:rgba(255,255,255,.7);
}
.we-build .avail::before{content:"";width:7px;height:7px;border-radius:50%;background:#28C840;box-shadow:0 0 8px rgba(40,200,64,.7);animation:pulse 2s ease-in-out infinite}
@media(max-width:560px){.we-build .avail{display:none}}

.word-stage{
  position:relative;width:100%;height:clamp(96px,17.5vw,255px);margin-top:6px;
  opacity:0;animation:fadeUp 1.2s var(--ease) .4s forwards;
  transform:translate3d(var(--wxp,0px), var(--wyp,0px), 0);
  will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 97%);
  mask-image:linear-gradient(180deg,#000 62%,transparent 97%);
}
.word{
  position:absolute;left:50%;top:50%;white-space:nowrap;
  font-family:'Inter Tight';font-weight:800;line-height:1;
  /* паддинги расширяют зону заливки: последняя буква при отрицательном
     трекинге выходит за текстовый блок, и без запаса её срезало */
  padding:0 .09em;
  font-size:clamp(88px,16.5vw,242px);letter-spacing:-.055em;
  background:linear-gradient(105deg,
    #A9A9BE 0%, #C6CCE6 18%, #9F9FB6 38%,
    #CDE0EA 55%, #A9A9BE 72%, #C9C9DE 88%, #A9A9BE 100%);
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 9s linear infinite;
  backface-visibility:hidden;-webkit-font-smoothing:antialiased;
  opacity:0;filter:blur(16px);
  transform:translate(-50%,-42%);
  transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);
  pointer-events:none;
}
@keyframes shimmer{from{background-position:0% 0}to{background-position:230% 0}}
.word.grad{
  background:linear-gradient(105deg,var(--indigo),var(--violet) 30%,var(--cyan) 55%,var(--violet) 75%,var(--indigo));
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:shimmer 5s linear infinite;
}
@media(prefers-reduced-motion:reduce){.word{animation:none}}
.word.active{opacity:1;filter:blur(0);transform:translate(-50%,-50%)}
.word.leaving{opacity:0;filter:blur(12px);transform:translate(-50%,-60%)}

.hero p.sub{
  position:relative;z-index:2;max-width:560px;margin:clamp(-40px,-2.6vw,-8px) auto 0;padding:0 28px;font-size:clamp(17px,2vw,21px);color:var(--muted);
  opacity:0;animation:fadeUp 1.2s var(--ease) .55s forwards;
}

/* ---- floating mockup: tilt + parallax layers ---- */
.stage{
  --mx:0; --my:0; --tilt:14deg;
  position:relative;z-index:2;width:min(900px,92%);margin:58px auto 0;
  perspective:1700px;
  opacity:0;animation:fadeUp 1.3s var(--ease) .95s forwards;
}
.tilt{
  position:relative;transform-style:preserve-3d;
  transform:rotateX(calc(var(--tilt) + var(--my)*7deg)) rotateY(calc(var(--mx)*10deg));
  transition:transform .12s linear;
  will-change:transform;
}
.stage .glow{
  position:absolute;inset:-14% -8%;z-index:0;filter:blur(80px);opacity:.4;pointer-events:none;
  background:
    radial-gradient(42% 46% at 28% 38%, rgba(79,70,229,.6), transparent 70%),
    radial-gradient(38% 42% at 74% 62%, rgba(6,182,212,.5), transparent 70%);
  transform:translateZ(-60px);
  animation:glowShift 9s ease-in-out infinite alternate;
}
@keyframes glowShift{from{transform:translateZ(-60px) scale(1)}to{transform:translateZ(-60px) scale(1.1) rotate(4deg)}}

/* chat window */
.chat{
  position:relative;z-index:1;text-align:left;
  background:rgba(255,255,255,.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.9);border-radius:24px;
  box-shadow:0 60px 120px -30px rgba(30,30,70,.28), 0 2px 0 rgba(255,255,255,.9) inset;
  transform:translateZ(40px) translate3d(calc(var(--mx)*-8px), calc(var(--my)*-8px), 40px);
  overflow:hidden;
}
.chat-bar{
  display:flex;align-items:center;gap:12px;padding:15px 20px;
  border-bottom:1px solid var(--line);
}
.chat-bar .dots{display:flex;gap:7px}
.chat-bar .dots i{width:11px;height:11px;border-radius:50%}
.chat-bar .dots i:nth-child(1){background:#FF5F57}
.chat-bar .dots i:nth-child(2){background:#FEBC2E}
.chat-bar .dots i:nth-child(3){background:#28C840}
.chat-title{font-size:13px;color:var(--muted);font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:8px}
.dot-live{width:7px;height:7px;border-radius:50%;background:#28C840;box-shadow:0 0 8px rgba(40,200,64,.7);animation:pulse 2s ease-in-out infinite}
.chat-body{padding:26px 26px 8px;display:flex;flex-direction:column;gap:16px;min-height:238px}
.msg{max-width:78%;padding:13px 18px;border-radius:20px;font-size:15px;line-height:1.55}
.msg.user{
  align-self:flex-end;color:#fff;border-bottom-right-radius:6px;
  background:linear-gradient(120deg,var(--indigo),var(--violet));
  box-shadow:0 10px 26px -10px rgba(79,70,229,.5);
}
.msg.ai{
  align-self:flex-start;background:#F2F2F7;color:var(--ink);border-bottom-left-radius:6px;
}
.msg.ai .src{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:4px 10px;border-radius:100px;
  background:#fff;border:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
}
.typing{display:inline-flex;gap:5px;padding:4px 0}
.typing i{width:7px;height:7px;border-radius:50%;background:#B0B0BC;animation:tp 1.2s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
.chat-input{
  margin:10px 20px 20px;display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:100px;padding:12px 20px;background:#fff;
  color:#A7A7B2;font-size:14.5px;
}
.chat-input .send{
  margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-size:14px;flex:none;
}

/* n8n-style flow card */
.flow{
  position:absolute;z-index:2;right:-46px;bottom:-42px;width:300px;text-align:left;
  background:rgba(255,255,255,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.95);border-radius:20px;padding:18px 20px 16px;
  box-shadow:0 40px 90px -25px rgba(30,30,70,.32);
  transform:translateZ(95px) translate3d(calc(var(--mx)*-20px), calc(var(--my)*-20px), 95px);
  animation:bob 6s ease-in-out infinite;
}
@keyframes bob{0%,100%{margin-bottom:0}50%{margin-bottom:12px}}
.flow .f-head{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-bottom:14px}
.flow .f-head b{color:#28C840;font-weight:500}
.nodes{display:flex;align-items:center;justify-content:space-between}
.node{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.node .nb{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:#F5F5FA;border:1px solid var(--line);
}
.node .nb svg{width:20px;height:20px;stroke:url(#gstroke);fill:none;stroke-width:1.8}
.node.hot .nb{background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(6,182,212,.12));border-color:rgba(79,70,229,.3)}
.wire{flex:1;height:2px;margin:0 8px 22px;position:relative;overflow:hidden;border-radius:2px;background:var(--line)}
.wire::after{
  content:"";position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--indigo),var(--cyan),transparent);
  animation:wire 1.8s linear infinite;
}
@keyframes wire{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* floating chips */
.chip{
  position:absolute;z-index:3;font-family:'JetBrains Mono',monospace;font-size:12px;
  padding:8px 15px;border-radius:100px;background:rgba(255,255,255,.9);
  border:1px solid var(--line);color:var(--ink);white-space:nowrap;
  box-shadow:0 16px 40px -12px rgba(30,30,70,.25);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:inline-flex;align-items:center;gap:8px;
  transform:translateZ(120px) translate3d(calc(var(--mx)*-30px), calc(var(--my)*-30px), 120px);
  animation:bob 5s ease-in-out infinite;
}
.chip.c1{top:-18px;left:-52px;animation-delay:.6s}
.chip.c2{top:96px;right:-64px;animation-delay:1.4s}
/* мини-карта статусов процессов */
.status{
  position:absolute;z-index:2;left:-52px;bottom:-30px;width:252px;text-align:left;
  background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.95);border-radius:18px;padding:15px 18px;
  box-shadow:0 34px 80px -24px rgba(30,30,70,.3);
  transform:translateZ(85px) translate3d(calc(var(--mx)*-16px), calc(var(--my)*-16px), 85px);
  animation:bob 7s ease-in-out infinite;animation-delay:.8s;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.9;color:var(--muted);
}
.status .st-head{display:flex;justify-content:space-between;font-size:10.5px;color:#A0A0B0;margin-bottom:8px;letter-spacing:.06em}
.status .st-head b{color:#28C840;font-weight:500}
.status .ln{opacity:0;transform:translateY(4px);transition:all .5s var(--ease);display:block}
.status .ln.show{opacity:1;transform:none}
.status .ok{color:#1FA84F}.status .run{color:var(--indigo)}
@media(max-width:860px){.status{left:-8px;bottom:-44px;width:220px}}
@media(max-width:560px){.status{display:none}}
.chip .ok{color:#28C840}
@media(max-width:560px){.flow{display:none}.chip{display:none}.stage{--tilt:9deg}.word{font-size:clamp(54px,15vw,242px)}}
.hero-actions{
  display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap;
  opacity:0;animation:fadeUp 1.2s var(--ease) .75s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:100px;font-weight:600;font-size:16px;
  transition:transform .4s var(--ease),box-shadow .4s;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px rgba(11,11,15,.25)}
.btn-ghost{color:var(--ink);border:1px solid var(--line);background:rgba(255,255,255,.6);backdrop-filter:blur(8px)}
.btn-ghost:hover{transform:translateY(-3px);border-color:#cfcfda}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:22px 0;background:#fff;
}
.marquee-track{display:flex;gap:64px;width:max-content;animation:mq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--muted);
  display:flex;align-items:center;gap:64px;white-space:nowrap;
}
.marquee-track b{color:var(--ink);font-weight:500}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:150px 0}
.sec-head{max-width:760px;margin-bottom:80px}
.sec-head h2{font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.08;margin-top:18px}
.sec-head p{margin-top:22px;color:var(--muted);font-size:19px;max-width:600px}

/* services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:920px){.services{grid-template-columns:1fr}}
.card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:42px 36px 46px;overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s,border-color .55s;
}
.card:hover{transform:translateY(-10px);box-shadow:0 30px 70px -20px rgba(30,30,60,.18);border-color:transparent}
.card::before{ /* gradient edge on hover */
  content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;
  background:var(--grad);opacity:0;transition:opacity .55s;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.card:hover::before{opacity:1}
.card .glyph{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin-bottom:30px;
  background:linear-gradient(135deg,rgba(79,70,229,.09),rgba(6,182,212,.09));
  transition:transform .55s var(--ease);
}
.card:hover .glyph{transform:scale(1.08) rotate(-4deg)}
.card .glyph svg{width:26px;height:26px;stroke:url(#gstroke)}
.card h3{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.card p{color:var(--muted);font-size:16px}
.card ul{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:10px}
.card li{font-size:14.5px;color:var(--muted);display:flex;gap:10px;align-items:baseline}
.card li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--grad);flex:none;transform:translateY(-2px)}
.card{display:flex;flex-direction:column}
.card ul{flex:1}
.card .meta{
  display:flex;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;color:var(--muted);
}
.card .meta b{display:block;font-family:'Inter Tight';font-size:19px;font-weight:800;
  letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.card .more{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:20px;
  padding:13px;border:1.5px solid var(--line);border-radius:100px;
  font-family:'Inter Tight';font-weight:600;font-size:14.5px;color:var(--ink);
  transition:all .4s var(--ease);
}
.card .more .arr{transition:transform .35s var(--ease)}
.card .more:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.card .more:hover .arr{transform:translateX(5px)}

/* local AI — dark accent block */
.local{
  background:#0B0B0F;color:#F5F5F7;border-radius:44px;position:relative;overflow:hidden;
  padding:110px 0;
}
.local .aurora{
  position:absolute;inset:-40%;pointer-events:none;filter:blur(90px);opacity:.5;
  background:
    radial-gradient(38% 30% at 24% 30%, rgba(79,70,229,.55), transparent 70%),
    radial-gradient(30% 26% at 78% 66%, rgba(6,182,212,.4), transparent 70%),
    radial-gradient(26% 22% at 60% 20%, rgba(139,92,246,.4), transparent 70%);
  animation:aurora 16s ease-in-out infinite alternate;
}
@keyframes aurora{from{transform:rotate(0) scale(1)}to{transform:rotate(10deg) scale(1.15)}}
.local .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
@media(max-width:920px){.local .wrap{grid-template-columns:1fr}}
.local .eyebrow{color:#9A9AA6}
.local h2{font-size:clamp(32px,4.4vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin-top:18px}
.local p{color:#B9B9C4;margin-top:22px;font-size:18px;max-width:520px}
.term{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:22px;
  font-family:'JetBrains Mono',monospace;font-size:13.5px;line-height:1.9;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
}
.term-bar{display:flex;gap:7px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#3A3A44}
.term-body{padding:22px 24px;color:#C9C9D4;min-height:220px}
.term .p1{color:#7DD3FC}.term .p2{color:#A5B4FC}.term .ok{color:#6EE7B7}
.cursor{display:inline-block;width:8px;height:16px;background:#6EE7B7;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.local-stats{display:flex;gap:48px;margin-top:44px;flex-wrap:wrap}
.local-stats .n{font-family:'Inter Tight';font-size:38px;font-weight:800;letter-spacing:-.03em}
.local-stats .l{font-size:13px;color:#8A8A96;margin-top:4px}

/* work / portfolio tiles */
.work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.tile{grid-column:span 3;position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  transition:transform .55s var(--ease),box-shadow .55s;
}
.tile.wide{grid-column:span 4}
.tile.narrow{grid-column:span 2}
@media(max-width:920px){.tile,.tile.wide,.tile.narrow{grid-column:span 6}}
.tile:hover{transform:translateY(-8px);box-shadow:0 34px 80px -28px rgba(30,30,60,.22)}
.shot{position:relative;aspect-ratio:16/9.6;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.tile:hover .shot .inner{transform:scale(1.045) translateY(-4px)}
.shot .inner{transition:transform .8s var(--ease);width:100%;height:100%;position:relative}
.tile-foot{display:flex;align-items:center;gap:12px;padding:20px 24px}
.tile-foot b{font-family:'Inter Tight';font-size:17px;font-weight:700;letter-spacing:-.015em}
.tile-foot span{font-size:13px;color:var(--muted)}
.tile-foot .go{
  margin-left:auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:15px;color:var(--muted);
  transition:all .45s var(--ease);
}
.tile:hover .go{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(-45deg)}
/* нарисованные CSS-превью */
.sv{position:absolute;border-radius:12px}
.shot-shop{background:linear-gradient(160deg,#EEF0FB,#E4F4F8)}
.shot-shop .sv.bar{top:7%;left:6%;right:6%;height:9%;background:#fff;border-radius:100px;box-shadow:0 6px 18px rgba(30,30,70,.08)}
.shot-shop .sv.p1,.shot-shop .sv.p2,.shot-shop .sv.p3{top:26%;width:26.5%;height:66%;background:#fff;box-shadow:0 14px 30px rgba(30,30,70,.1)}
.shot-shop .sv.p1{left:6%}.shot-shop .sv.p2{left:36.75%}.shot-shop .sv.p3{left:67.5%}
.shot-shop .sv.p1::before,.shot-shop .sv.p2::before,.shot-shop .sv.p3::before{
  content:"";position:absolute;top:8%;left:8%;right:8%;height:52%;border-radius:9px;
  background:linear-gradient(135deg,rgba(79,70,229,.16),rgba(6,182,212,.16));}
.shot-shop .sv.p1::after,.shot-shop .sv.p2::after,.shot-shop .sv.p3::after{
  content:"";position:absolute;bottom:12%;left:8%;width:56%;height:7%;border-radius:100px;background:#E4E4EE}
.shot-clinic{background:linear-gradient(150deg,#101018,#1A1A2C)}
.shot-clinic .sv.m1{top:14%;left:8%;width:56%;height:17%;background:rgba(255,255,255,.09)}
.shot-clinic .sv.m2{top:37%;right:8%;width:62%;height:17%;background:linear-gradient(120deg,var(--indigo),var(--violet));opacity:.9}
.shot-clinic .sv.m3{top:60%;left:8%;width:48%;height:17%;background:rgba(255,255,255,.09)}
.shot-clinic .sv.pill{bottom:8%;left:8%;width:34%;height:9%;border-radius:100px;background:rgba(110,231,183,.14);border:1px solid rgba(110,231,183,.3)}
.shot-flow{background:linear-gradient(150deg,#F2F1FC,#EAF7F5)}
.shot-flow .sv.n{width:15%;aspect-ratio:1;border-radius:16px;background:#fff;box-shadow:0 12px 26px rgba(30,30,70,.1)}
.shot-flow .sv.n1{top:20%;left:10%}.shot-flow .sv.n2{top:52%;left:42%}.shot-flow .sv.n3{top:20%;left:74%}
.shot-flow .sv.w{height:2px;background:var(--grad);border-radius:2px;overflow:visible}
.shot-flow .sv.w1{top:38%;left:22%;width:24%;transform:rotate(24deg)}
.shot-flow .sv.w2{top:48%;left:54%;width:24%;transform:rotate(-24deg)}
.shot-site{background:linear-gradient(160deg,#F6F5FA,#EDF2FA)}
.shot-site .sv.h{top:12%;left:8%;width:60%;height:13%;border-radius:9px;background:linear-gradient(100deg,#2A2A38,#4A4A60)}
.shot-site .sv.h::after{content:"";position:absolute;left:0;top:130%;width:42%;height:70%;border-radius:9px;background:linear-gradient(100deg,var(--indigo),var(--cyan));opacity:.85}
.shot-site .sv.t1{top:58%;left:8%;width:84%;height:6%;border-radius:100px;background:#E2E2EC}
.shot-site .sv.t2{top:70%;left:8%;width:66%;height:6%;border-radius:100px;background:#E9E9F1}
.shot-site .sv.t3{top:82%;left:8%;width:30%;height:8%;border-radius:100px;background:#111119}

/* reviews — one big quote slider */
.voices{
  background:var(--card);border:1px solid var(--line);border-radius:44px;
  padding:clamp(30px,4vw,52px) clamp(26px,4.5vw,68px);position:relative;
}
.voices-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:clamp(16px,2.4vw,28px)}
.voices-top h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.08;margin-top:16px}
.q-nav{display:flex;gap:12px;flex:none;margin-top:8px}
.q-btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;font-size:18px;color:var(--ink);cursor:pointer;
  transition:all .4s var(--ease);
}
.q-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:scale(1.07)}
.q-stack{display:grid}
.q-slide{
  grid-area:1/1;opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.q-slide.on{opacity:1;transform:none;pointer-events:auto}
.q-slide blockquote{
  font-family:'Inter Tight';font-weight:700;letter-spacing:-.025em;line-height:1.34;
  font-size:clamp(18px,2.3vw,28px);max-width:23em;
}
.q-slide .hl{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.q-who{display:flex;align-items:center;gap:14px;margin-top:22px}
.q-who .ava{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:#fff;font-family:'Inter Tight';font-weight:700;font-size:16px;
  background:linear-gradient(135deg,var(--indigo),var(--violet));
}
.q-who b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.q-who span{font-size:13.5px;color:var(--muted)}
.q-dots{display:flex;gap:10px;margin-top:26px}
.q-dot{width:34px;height:4px;border-radius:4px;background:var(--line);border:0;cursor:pointer;padding:0;transition:all .5s var(--ease)}
.q-dot.on{width:58px;background:var(--grad)}
@media(max-width:700px){.voices-top{flex-direction:column}.q-nav{order:2}}

/* CTA */
.cta{
  text-align:center;position:relative;overflow:hidden;border-radius:44px;background:#fff;
  border:1px solid var(--line);padding:120px 28px;
}
.cta h2{font-size:clamp(36px,5.4vw,68px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.cta p{color:var(--muted);margin:24px auto 44px;max-width:480px;font-size:19px}
/* переливающаяся подложка, стекающаяся к кнопке */
.cta .flux{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.cta .flux i{
  position:absolute;left:50%;top:74%;width:420px;height:420px;margin:-210px;
  border-radius:50%;filter:blur(64px);opacity:0;
  animation:flux var(--d,6s) ease-in infinite;animation-delay:var(--dl,0s);
}
.cta .flux i:nth-child(1){--sx:-46vw;--sy:-260px;--d:5.5s;--dl:0s;background:radial-gradient(circle,rgba(79,70,229,.7),transparent 70%)}
.cta .flux i:nth-child(2){--sx:46vw;--sy:-200px;--d:6.2s;--dl:.9s;background:radial-gradient(circle,rgba(6,182,212,.65),transparent 70%)}
.cta .flux i:nth-child(3){--sx:-38vw;--sy:160px;--d:6.8s;--dl:1.9s;background:radial-gradient(circle,rgba(139,92,246,.65),transparent 70%)}
.cta .flux i:nth-child(4){--sx:40vw;--sy:180px;--d:5.8s;--dl:2.8s;background:radial-gradient(circle,rgba(79,70,229,.6),transparent 70%)}
.cta .flux i:nth-child(5){--sx:0vw;--sy:-340px;--d:7.2s;--dl:3.7s;background:radial-gradient(circle,rgba(6,182,212,.55),transparent 70%)}
.cta .flux i:nth-child(6){--sx:-24vw;--sy:-320px;--d:6.4s;--dl:4.6s;background:radial-gradient(circle,rgba(139,92,246,.55),transparent 70%)}
@keyframes flux{
  0%{transform:translate(var(--sx),var(--sy)) scale(1.1);opacity:0}
  12%{opacity:.75}
  70%{opacity:.45}
  100%{transform:translate(0,0) scale(.18);opacity:0}
}
/* мягкое дыхание всего фона панели */
.cta::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;
  background:linear-gradient(115deg,rgba(79,70,229,.06),rgba(6,182,212,.05) 40%,rgba(139,92,246,.06) 70%,rgba(79,70,229,.06));
  background-size:300% 300%;animation:ctaShift 14s ease-in-out infinite alternate;
}
@keyframes ctaShift{from{background-position:0% 50%}to{background-position:100% 50%}}
/* свечение, в которое «вливаются» блики */
.cta .btn-primary{position:relative;z-index:1}
.cta .btn-primary::before{
  content:"";position:absolute;inset:-20px;border-radius:100px;z-index:-1;
  background:var(--grad);filter:blur(30px);opacity:.4;
  animation:btnPulse 2.2s ease-in-out infinite;
}
@keyframes btnPulse{0%,100%{opacity:.3;transform:scale(.92)}50%{opacity:.62;transform:scale(1.1)}}
/* пробегающая по кнопке градиентная волна */
.cta .btn-primary{overflow:hidden}
.cta .btn-primary::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);animation:sheen 2.6s ease-in-out infinite;
}
@keyframes sheen{0%,55%{left:-60%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.cta .flux i{animation:none;opacity:.22;transform:translate(0,0) scale(.6)}}

/* footer */
footer{padding:56px 0 44px;color:var(--muted);font-size:14px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot .links{display:flex;gap:26px}
.foot a:hover{color:var(--ink)}





/* ===== превью «видео-фабрика»: мини-n8n с живым прогоном ===== */
.tile.full{grid-column:span 6}
.shot-vf{background:linear-gradient(150deg,#0B0B13,#12121F)}
.vf *{position:absolute;box-sizing:border-box}
/* верхняя панель n8n */
.vf-top{left:0;right:0;top:0;height:13%;display:flex;align-items:center;justify-content:space-between;
  padding:0 3%;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.vf-brand{position:relative;display:flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:#B9B9CE;letter-spacing:.04em}
.vf-brand i{position:relative;width:20px;height:20px;border-radius:6px;background:#EA4B35;
  display:grid;place-items:center;font-style:normal;font-weight:700;font-size:10px;color:#fff}
.vf-run{position:relative;display:flex;align-items:center;gap:7px;
  background:#EA4B35;color:#fff;border-radius:8px;padding:6px 14px;
  font-family:'Inter Tight';font-weight:600;font-size:11.5px;transition:transform .2s}
.vf-run.press{transform:scale(.92);filter:brightness(1.2)}
/* сетка-фон холста */
.vf-canvas{left:0;right:0;top:13%;bottom:12%;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:14px 14px}

/* связи */
.gw{left:0;top:0;width:100%;height:100%;overflow:visible}
.gw path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.6;vector-effect:non-scaling-stroke;transition:stroke .3s}
.gw path.on{stroke:url(#vfg);stroke-dasharray:6 8;animation:vfWmove .55s linear infinite}
.gw path.loop{stroke-dasharray:3 5}
.gw path.loop.on{stroke:#F59E0B;animation-direction:reverse}
@keyframes vfWmove{to{stroke-dashoffset:-14}}
/* узлы n8n */
.gn{transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;width:auto}
.gn b{position:relative;width:36px;height:36px;border-radius:10px;background:#191928;
  border:1.5px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:all .35s}
.gn b svg{width:16px;height:16px;stroke:#A9A9C4;fill:none;stroke-width:1.8;transition:stroke .3s}
.gn.live b{border-color:#818CF8;background:#1E1E36;box-shadow:0 0 16px rgba(99,102,241,.55)}
.gn.live b svg{stroke:#C7D2FE}
.gn.live b::after{content:"";position:absolute;inset:-6px;border-radius:13px;
  border:2px solid transparent;border-top-color:#818CF8;animation:vfSpin .65s linear infinite}
.gn.done b{border-color:#34D399;background:rgba(52,211,153,.1)}
.gn.done b svg{stroke:#6EE7B7}
.gn.done b::before{content:"✓";position:absolute;top:-7px;right:-7px;width:15px;height:15px;border-radius:50%;
  background:#22C55E;color:#fff;font-size:9px;display:grid;place-items:center;font-family:'Inter Tight'}
.gn span{position:relative;font-family:'JetBrains Mono',monospace;font-size:9px;color:#8F8FA8;white-space:nowrap}
.gn .cnt{top:-9px;left:calc(50% + 12px);background:#4F46E5;color:#fff;border-radius:100px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;padding:2px 6px;white-space:nowrap;
  opacity:0;transform:translateY(4px);transition:all .35s}
.gn .cnt.show{opacity:1;transform:none}
@keyframes vfSpin{to{transform:rotate(360deg)}}
/* лента выдачи: конвейер готовых видео */
.vf-graph{left:2%;top:4%;width:64%;height:92%}
.vf-out{right:2.5%;top:5%;width:26.5%;height:90%;border-radius:12px;overflow:hidden;
  background:#07070D;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.vf-out-h{left:0;right:0;top:0;height:12%;display:flex;align-items:center;justify-content:space-between;
  padding:0 8%;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);
  font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#9A9AB2;letter-spacing:.06em}
.vf-out-h b{color:#6EE7B7;font-weight:500}
/* 3D-аккордеон карточек: новые выскакивают спереди */
.vf-feed{left:5%;right:3%;top:15%;bottom:5%;perspective:640px}
.rframe{position:absolute;left:0;top:24%;width:66%;height:52%;border-radius:10px;overflow:hidden;
  background:#0A0A12;border:1px solid rgba(255,255,255,.14);
  transform-origin:left center;box-shadow:-14px 16px 30px rgba(0,0,0,.55);
  transition:transform .5s var(--ease),opacity .5s,filter .5s}
.rframe.senter{transform:translateX(-34%) rotateY(-48deg) scale(1.12);opacity:0}
.rframe.s0{transform:translateX(0) rotateY(-16deg) scale(1);z-index:7;filter:brightness(1)}
.rframe.s1{transform:translateX(24%) rotateY(-16deg) scale(.92);z-index:6;filter:brightness(.82)}
.rframe.s2{transform:translateX(44%) rotateY(-16deg) scale(.85);z-index:5;filter:brightness(.66)}
.rframe.s3{transform:translateX(60%) rotateY(-16deg) scale(.79);z-index:4;filter:brightness(.52)}
.rframe.s4{transform:translateX(73%) rotateY(-16deg) scale(.74);z-index:3;filter:brightness(.4)}
.rframe.sout{transform:translateX(84%) rotateY(-16deg) scale(.7);z-index:2;opacity:0;filter:brightness(.3)}
/* «приземление» готового видео */
.rframe.pop{animation:vfPop .5s var(--ease)}
@keyframes vfPop{0%{filter:brightness(1.6)}45%{transform:translateX(0) rotateY(-16deg) scale(1.06)}100%{transform:translateX(0) rotateY(-16deg) scale(1)}}
.rframe .art{position:absolute;inset:0;opacity:0;transition:opacity .7s,filter .7s;filter:blur(8px) hue-rotate(var(--h,0deg))}
.rframe.playing .art{opacity:1;filter:blur(0) hue-rotate(var(--h,0deg))}
.rframe .art i{position:absolute;border-radius:50%}
.rframe .art .b1{width:90%;height:120%;left:-25%;top:-30%;filter:blur(12px);
  background:radial-gradient(circle,rgba(79,70,229,.85),transparent 65%);
  animation:vfB1 6s ease-in-out infinite alternate;animation-delay:var(--d1,0s)}
.rframe .art .b2{width:85%;height:115%;right:-22%;bottom:-25%;filter:blur(12px);
  background:radial-gradient(circle,rgba(6,182,212,.75),transparent 65%);
  animation:vfB2 7s ease-in-out infinite alternate;animation-delay:var(--d2,0s)}
@keyframes vfB1{to{transform:translate(30%,24%) scale(1.3)}}
@keyframes vfB2{to{transform:translate(-28%,-20%) scale(1.2)}}
.rframe .art .wave{left:-25%;right:-25%;bottom:8%;height:40%;border-radius:50%;filter:blur(4px);
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.6),rgba(6,182,212,.6),transparent);
  animation:vfWave 4s ease-in-out infinite alternate;animation-delay:var(--d1,0s)}
@keyframes vfWave{from{transform:translateX(-9%) rotate(-3deg)}to{transform:translateX(9%) rotate(3deg)}}
/* ===== мини-сцены «видео»: природа ===== */
.rframe .art{background:#0A0A12}
/* закат в горах */
.sc-sun{background:linear-gradient(180deg,#F9C978 0%,#F2825E 55%,#6E4E9E 100%)}
.sc-sun .sun{position:absolute;left:24%;top:12%;width:24%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#FFF3C4,#FFCE6B);box-shadow:0 0 20px 6px rgba(255,220,140,.7);
  animation:vfSunset 9s ease-in-out infinite alternate}
@keyframes vfSunset{to{transform:translateY(120%)}}
.sc-sun .mt{position:absolute;bottom:-2%;width:70%;height:55%;background:#3A2B58;
  clip-path:polygon(0 100%,28% 18%,55% 100%)}
.sc-sun .mt.m2{left:38%;height:44%;background:#2C2046;
  clip-path:polygon(0 100%,45% 10%,100% 100%)}
.sc-sun .bd{position:absolute;top:22%;left:70%;animation:vfBird 8s linear infinite}
.sc-sun .bd.b2{top:32%;left:84%;animation-duration:11s;animation-delay:-4s;transform:scale(.7)}
@keyframes vfBird{from{transform:translateX(30%)}to{transform:translateX(-420%)}}
/* море */
.sc-sea{background:linear-gradient(180deg,#8FD0EA 52%,#2E7DA6 52%)}
.sc-sea .sun2{position:absolute;right:10%;top:10%;width:16%;aspect-ratio:1;border-radius:50%;
  background:#FFF3C4;box-shadow:0 0 14px 4px rgba(255,240,190,.8)}
.sc-sea .wv{position:absolute;left:-30%;right:-30%;height:18%;border-radius:50%;
  background:rgba(255,255,255,.35);filter:blur(1px)}
.sc-sea .wv.v1{bottom:26%;animation:vfWv 4s ease-in-out infinite alternate}
.sc-sea .wv.v2{bottom:10%;background:rgba(255,255,255,.22);animation:vfWv 5.5s ease-in-out infinite alternate-reverse}
@keyframes vfWv{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.sc-sea .bt{position:absolute;left:26%;bottom:40%;width:14%;height:16%;
  animation:vfBoat 4.5s ease-in-out infinite alternate}
@keyframes vfBoat{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(14%) rotate(3deg)}}
.sc-sea .bt::before{content:"";position:absolute;bottom:0;left:0;right:0;height:34%;
  background:#7A4B2B;border-radius:0 0 40% 40%}
.sc-sea .bt::after{content:"";position:absolute;bottom:34%;left:22%;
  border-left:14px solid transparent;border-bottom:16px solid #F5F0E6}
/* лес в сумерках: туман и светлячки */
.sc-forest{background:linear-gradient(180deg,#28455C 0%,#173B33 60%,#0E2B23 100%)}
.sc-forest .tr{position:absolute;bottom:0;background:#0B241C;
  clip-path:polygon(50% 0,78% 45%,68% 45%,92% 100%,8% 100%,32% 45%,22% 45%)}
.sc-forest .tr.t1{left:4%;width:22%;height:74%}
.sc-forest .tr.t2{left:26%;width:18%;height:56%;background:#0F2E24}
.sc-forest .tr.t3{left:48%;width:24%;height:82%}
.sc-forest .tr.t4{left:74%;width:19%;height:60%;background:#0F2E24}
.sc-forest .mist{position:absolute;left:-30%;right:-30%;bottom:18%;height:22%;border-radius:50%;
  background:rgba(214,230,238,.28);filter:blur(6px);
  animation:vfMist 9s ease-in-out infinite alternate}
@keyframes vfMist{from{transform:translateX(-7%)}to{transform:translateX(7%)}}
.sc-forest .ff{position:absolute;left:30%;top:46%;width:3px;height:3px;border-radius:50%;background:#FFE79A;
  box-shadow:34px -14px 0 #FFE79A,70px 6px 0 rgba(255,231,154,.8),105px -20px 0 #FFE79A,
             140px 2px 0 rgba(255,231,154,.7);
  animation:vfFf 2.6s ease-in-out infinite alternate}
@keyframes vfFf{from{opacity:.25;transform:translateY(0)}to{opacity:1;transform:translateY(-8px)}}
/* северное сияние над холмами */
.sc-aurora{background:linear-gradient(180deg,#060B22,#0E1638 70%,#101C2E 100%)}
.sc-aurora .st{position:absolute;top:10%;left:10%;width:2px;height:2px;border-radius:50%;background:#fff;
  box-shadow:28px 12px 0 #fff,62px 3px 0 rgba(255,255,255,.65),98px 16px 0 #fff,
             134px 6px 0 rgba(255,255,255,.75),168px 1px 0 #fff,198px 12px 0 rgba(255,255,255,.6);
  animation:vfTwinkle 2.4s steps(2) infinite}
@keyframes vfTwinkle{50%{opacity:.4}}
.sc-aurora .ar{position:absolute;left:-14%;right:-14%;top:6%;height:46%;filter:blur(8px);opacity:.85;
  background:linear-gradient(100deg,transparent,rgba(52,211,153,.55) 30%,rgba(129,140,248,.5) 55%,rgba(6,182,212,.45) 75%,transparent);
  border-radius:50%;
  animation:vfAur 7s ease-in-out infinite alternate}
@keyframes vfAur{from{transform:translateX(-6%) skewX(-8deg) scaleY(1)}to{transform:translateX(6%) skewX(8deg) scaleY(1.25)}}
.sc-aurora .hl{position:absolute;bottom:-4%;left:-6%;width:70%;height:34%;border-radius:50%;background:#0A1424}
.sc-aurora .hl.h2{left:44%;width:72%;height:28%;background:#0D1A2C}
/* луга: холмы и облака */
.sc-meadow{background:linear-gradient(180deg,#9BD1F0,#D8ECF8 60%)}
.sc-meadow .sun3{position:absolute;left:14%;top:12%;width:18%;aspect-ratio:1;border-radius:50%;
  background:#FFF0B8;box-shadow:0 0 16px 5px rgba(255,238,170,.8)}
.sc-meadow .cl{position:absolute;background:#fff;border-radius:50%;filter:blur(3px);opacity:.95;
  animation:vfClMove linear infinite}
.sc-meadow .cl.c1{width:30%;height:22%;top:12%;animation-duration:13s}
.sc-meadow .cl.c2{width:20%;height:16%;top:34%;animation-duration:18s;animation-delay:-8s;opacity:.8}
@keyframes vfClMove{from{left:105%}to{left:-40%}}
.sc-meadow .gh{position:absolute;bottom:-16%;left:-14%;width:82%;height:52%;border-radius:50%;background:#6FBF6A}
.sc-meadow .gh.g2{left:42%;width:86%;height:44%;background:#5AAE57}
.sc-meadow .fl{position:absolute;bottom:26%;left:24%;width:4px;height:4px;border-radius:50%;background:#F7D154;
  box-shadow:30px 6px 0 #F0899B,64px -2px 0 #F7D154,96px 8px 0 #F0899B;
  animation:vfFlSway 3s ease-in-out infinite alternate}
@keyframes vfFlSway{to{transform:translateX(3px)}}
/* состояние рендера у верхнего кадра */
.rframe .noise{position:absolute;inset:0;opacity:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),
             repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 5px);
  animation:vfNoiseJit .22s steps(3) infinite}
.rframe.rendering .noise{opacity:.5}
@keyframes vfNoiseJit{50%{transform:translate(1px,-1px)}}
.rframe .scan{position:absolute;left:0;right:0;height:26%;top:-30%;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(129,140,248,.45),rgba(6,182,212,.6),transparent)}
.rframe.rendering .scan{opacity:1;animation:vfScan 1.4s linear infinite}
@keyframes vfScan{to{top:108%}}
.rframe .pct{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:#A5B4FC}
.rframe.rendering .pct{opacity:1}
.rframe .dur{position:absolute;right:5%;bottom:8%;background:rgba(0,0,0,.55);border-radius:5px;
  padding:2px 6px;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:#E4E4F0;
  opacity:0;transition:opacity .4s}
.rframe.playing .dur{opacity:1}
.rframe .ply{position:absolute;left:6%;bottom:8%;width:0;height:0;opacity:0;transition:opacity .4s;
  border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.rframe.playing .ply{opacity:.95}
.rframe .okc{position:absolute;right:5%;top:8%;background:rgba(34,197,94,.2);border:1px solid rgba(110,231,183,.5);
  color:#6EE7B7;border-radius:100px;padding:1px 7px;font-family:'JetBrains Mono',monospace;font-size:8.5px;
  opacity:0;transform:translateY(-4px);transition:all .4s}
.rframe.saved .okc{opacity:1;transform:none}
/* нижний живой лог */
.vf-log{left:0;right:0;bottom:0;height:12%;display:flex;align-items:center;padding:0 3%;
  background:rgba(0,0,0,.35);border-top:1px solid rgba(255,255,255,.07);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#9C9CB4;white-space:nowrap;overflow:hidden}
.vf-log .ok{color:#34D399}.vf-log .run{color:#818CF8}.vf-log .warn{color:#F59E0B}
@media(max-width:700px){.gn span{display:none}.vf-log{font-size:9px}}
@media(prefers-reduced-motion:reduce){
  .vf *::after,.vf *::before,.vf-art *,.vf-noise,.vf-scan{animation:none!important}
}

/* ===== плитка IMS-ZERT: коллаж-аккордеон из фрагментов с 4 сторон ===== */
.shot-ims{background:
  radial-gradient(rgba(18,32,58,.06) 1px,transparent 1px),
  linear-gradient(150deg,#DFE7F2,#EDF2F8);
  background-size:16px 16px,auto}
.ims-fr{position:absolute;--T:20s;box-sizing:border-box}
.ims-fr *{box-sizing:border-box;margin:0}
.ims-mut{color:#5C6B84}
.ims-grd{background:linear-gradient(120deg,#2FBF9A,#4C8DF6);-webkit-background-clip:text;background-clip:text;color:transparent}
/* лёгкое парение собранных фрагментов */
.ims-fl{width:100%;height:100%;animation:imsBob 5s ease-in-out infinite alternate}
@keyframes imsBob{to{transform:translateY(-6px)}}
/* --- фрагмент 1: десктоп-браузер, влетает слева --- */
.fr-desk{left:5%;top:9%;width:52%;height:66%;z-index:2;animation:frDesk var(--T) ease-in-out infinite}
@keyframes frDesk{0%,3%{transform:translateX(-130%) rotate(-6deg);opacity:0}
  10%,88%{transform:none;opacity:1}96%,100%{transform:translateX(-130%) rotate(-6deg);opacity:0}}
.fr-desk .win{width:100%;height:100%;background:#F7F9FC;border-radius:11px;overflow:hidden;
  box-shadow:0 26px 60px rgba(18,32,58,.3);border:1px solid #E3E8F0;display:flex;flex-direction:column}
.win-bar{flex:none;display:flex;align-items:center;gap:5px;padding:7px 10px;background:#fff;border-bottom:1px solid #E9EDF4}
.win-bar i{width:7px;height:7px;border-radius:50%}
.win-bar i:nth-child(1){background:#FF5F57}.win-bar i:nth-child(2){background:#FEBC2E}.win-bar i:nth-child(3){background:#28C840}
.win-bar em{font-style:normal;margin:0 auto;font-family:'JetBrains Mono',monospace;font-size:7px;color:#8494AC;
  background:#F0F3F9;border-radius:100px;padding:2px 10px}
.desk-body{flex:1;padding:9% 7%;background:linear-gradient(180deg,#fff,#EFF4FA)}
.ims-kick{font-family:'JetBrains Mono',monospace;font-size:6.5px;letter-spacing:.12em;color:#1D8F72;margin-bottom:6px}
.ims-h1{font-family:'Inter Tight';font-weight:800;font-size:15px;line-height:1.12;letter-spacing:-.02em;color:#12203A}
.ims-sub{font-size:7.5px;line-height:1.5;margin-top:6px}
.ims-btns{display:flex;gap:6px;margin-top:9px}
.ims-btns span{padding:5px 10px;border-radius:100px;font-family:'Inter Tight';font-weight:600;font-size:7.5px}
.ims-btns .b1{background:#12203A;color:#fff}
.ims-btns .b2{border:1px solid #C6D0E0;background:#fff;color:#12203A}
.desk-stats{display:flex;gap:14px;margin-top:11px}
.desk-stats b{font-family:'Inter Tight';font-weight:800;font-size:13px;display:block}
.desk-stats small{font-size:6px;color:#5C6B84}
/* --- фрагмент 2: телефон, влетает снизу-справа --- */
.fr-mob{right:6%;top:14%;width:19%;z-index:4;animation:frMob var(--T) ease-in-out infinite}
@keyframes frMob{0%,9%{transform:translate(60%,130%) rotate(10deg);opacity:0}
  17%,86%{transform:none;opacity:1}94%,100%{transform:translate(60%,130%) rotate(10deg);opacity:0}}
.fr-mob .ph{width:100%;aspect-ratio:9/19.3;background:#fff;border-radius:16px;border:2px solid #12203A;
  box-shadow:0 26px 55px rgba(18,32,58,.32);overflow:hidden;position:relative;padding:9% 7%}
.ph::before{content:"";position:absolute;top:3%;left:32%;right:32%;height:3.5%;border-radius:100px;background:#12203A}
.ph .ims-logo{margin:14% auto 8%;width:22px;height:22px}
.ph .ml{height:6px;border-radius:5px;background:#12203A;margin:0 auto 4px}
.ph .ml.m1{width:92%}.ph .ml.m2{width:64%}
.ph .ml.acc{width:78%;background:linear-gradient(120deg,#2FBF9A,#4C8DF6)}
.ph .mchip{margin-top:8%;border:1px solid #E3E8F0;border-radius:8px;padding:5px 7px;font-size:6px;color:#42506A}
.ph .mchip b{font-family:'Inter Tight';font-size:8px;color:#12203A;display:block}
.ph .mbtn{margin-top:9%;height:16px;border-radius:100px;background:linear-gradient(120deg,#2FBF9A,#4C8DF6);
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Inter Tight';font-weight:600;font-size:6.5px}
.ims-logo{width:24px;height:24px;border-radius:7px;background:#0E1930;color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Inter Tight';font-weight:800;font-size:8.5px}
/* --- фрагмент 3: сертификат, падает сверху --- */
.fr-cert{right:25%;top:5%;width:19%;z-index:5;animation:frCert var(--T) ease-in-out infinite}
@keyframes frCert{0%,15%{transform:translateY(-140%) rotate(9deg);opacity:0}
  23%,84%{transform:rotate(-4deg);opacity:1}92%,100%{transform:translateY(-140%) rotate(9deg);opacity:0}}
.fr-cert .crt{background:#fff;border:1px solid #E3E8F0;border-radius:11px;padding:10px 11px;
  box-shadow:0 18px 40px rgba(18,32,58,.22)}
.ims-seal{width:24px;height:24px;border-radius:50%;margin-bottom:6px;
  background:conic-gradient(#2FBF9A,#4C8DF6,#2FBF9A);
  -webkit-mask:radial-gradient(farthest-side,transparent 50%,#000 52%);
  mask:radial-gradient(farthest-side,transparent 50%,#000 52%)}
.fr-cert b{display:block;font-family:'Inter Tight';font-size:8px;color:#12203A;letter-spacing:.06em}
.fr-cert small{display:block;font-size:6.4px;color:#5C6B84;margin-top:2px}
.ims-chip{display:inline-block;margin-top:6px;padding:3px 8px;border-radius:100px;
  font-family:'JetBrains Mono',monospace;font-size:6px;color:#1D8F72;background:#E4F7F1;border:1px solid #BDEBDD}
/* --- фрагмент 4: тёмная карта цифр, влетает справа --- */
.fr-dark{left:31%;bottom:5%;width:33%;z-index:6;animation:frDark var(--T) ease-in-out infinite}
@keyframes frDark{0%,21%{transform:translateX(160%);opacity:0}
  29%,82%{transform:none;opacity:1}90%,100%{transform:translateX(160%);opacity:0}}
.fr-dark .dk{background:#0D1728;border-radius:12px;padding:11px 13px;box-shadow:0 22px 50px rgba(10,18,32,.5)}
.ims-tag{display:inline-block;padding:2.5px 9px;border-radius:100px;background:#16233A;
  font-family:'JetBrains Mono',monospace;font-size:5.5px;letter-spacing:.12em;color:#7FD6BE;margin-bottom:7px}
.dk-row{display:flex;gap:12px}
.dk-row b{font-family:'Inter Tight';font-weight:800;font-size:16px;letter-spacing:-.02em;display:block;
  background:linear-gradient(120deg,#5B8DEF,#3AC6A8);-webkit-background-clip:text;background-clip:text;color:transparent}
.dk-row small{font-size:5.8px;line-height:1.35;color:#8FA3C4;display:block;margin-top:2px}
/* --- фрагмент 5: шаги, выезжают снизу-слева --- */
.fr-steps{left:4%;bottom:6%;width:22%;z-index:3;animation:frSteps var(--T) ease-in-out infinite}
@keyframes frSteps{0%,27%{transform:translateY(150%) rotate(-5deg);opacity:0}
  35%,80%{transform:none;opacity:1}88%,100%{transform:translateY(150%) rotate(-5deg);opacity:0}}
.fr-steps .stp{background:#fff;border:1px solid #E3E8F0;border-radius:10px;padding:8px 10px;
  box-shadow:0 16px 36px rgba(18,32,58,.18)}
.stp div{display:flex;gap:7px;align-items:baseline;padding:3px 0}
.stp div+div{border-top:1px solid #EEF1F7}
.stp i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:5.5px;color:#1D8F72;letter-spacing:.08em;flex:none}
.stp b{font-family:'Inter Tight';font-size:7px;color:#12203A}
/* --- фрагмент 6: чип реестра, выскакивает сверху-справа --- */
.fr-reg{right:5%;top:5%;z-index:7;animation:frReg var(--T) ease-in-out infinite}
@keyframes frReg{0%,33%{transform:translateY(-160%) scale(.7);opacity:0}
  40%,78%{transform:none;opacity:1}86%,100%{transform:translateY(-160%) scale(.7);opacity:0}}
.fr-reg span{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #CBEFD6;
  border-radius:100px;padding:5px 11px;font-family:'JetBrains Mono',monospace;font-size:6.5px;color:#1D8F72;
  box-shadow:0 12px 28px rgba(18,32,58,.16)}
/* --- фрагмент 7: ISO-карточка, влетает слева-снизу --- */
.fr-iso{left:26%;top:6%;width:20%;z-index:1;animation:frIso var(--T) ease-in-out infinite}
@keyframes frIso{0%,38%{transform:translate(-90%,-120%) rotate(-8deg);opacity:0}
  46%,76%{transform:rotate(2deg);opacity:1}84%,100%{transform:translate(-90%,-120%) rotate(-8deg);opacity:0}}
.fr-iso .iso{background:#fff;border:1px solid #E3E8F0;border-radius:10px;padding:8px 10px;
  display:flex;gap:8px;align-items:center;box-shadow:0 14px 30px rgba(18,32,58,.16)}
.fr-iso b{font-family:'Inter Tight';font-weight:800;font-size:13px}
.fr-iso div div{font-size:6.8px;color:#42506A;line-height:1.3}
.fr-iso small{display:block;font-size:5.8px;color:#8494AC}

/* --- заполнение низа десктопа: ISO-пилюли --- */
.desk-body{display:flex;flex-direction:column}
.desk-iso{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:9px}
.desk-iso span{border:1px solid #E3E8F0;background:#fff;border-radius:100px;padding:3px 8px;
  font-family:'JetBrains Mono',monospace;font-size:5.8px;color:#42506A}
.desk-iso span.hot{color:#1D8F72;background:#E4F7F1;border-color:#BDEBDD}
/* --- заполнение низа телефона: новость + таббар --- */
.ph{display:flex;flex-direction:column}
.ph .mnews{margin-top:auto;font-size:5.6px;line-height:1.4;color:#5C6B84;border-top:1px solid #EEF1F7;padding-top:5px}
.ph .mnews b{display:block;font-family:'JetBrains Mono',monospace;font-size:5px;letter-spacing:.1em;color:#1D8F72}
.ph .tabbar{flex:none;margin-top:6px;height:14px;border-radius:100px;background:#F0F3F9;
  display:flex;justify-content:space-around;align-items:center}
.ph .tabbar i{width:5px;height:5px;border-radius:50%;background:#B9C4D6}
.ph .tabbar i:nth-child(2){background:linear-gradient(120deg,#2FBF9A,#4C8DF6);width:6px;height:6px}
/* --- фрагмент 8: мини-график аудитов, верхний левый угол --- */
.fr-chart{left:2%;top:4%;width:15%;z-index:5;animation:frChart var(--T) ease-in-out infinite}
@keyframes frChart{0%,40%{transform:translate(-120%,-60%) rotate(-7deg);opacity:0}
  47%,74%{transform:rotate(-2deg);opacity:1}82%,100%{transform:translate(-120%,-60%) rotate(-7deg);opacity:0}}
.fr-chart .cht{background:#fff;border:1px solid #E3E8F0;border-radius:10px;padding:8px 10px;
  box-shadow:0 14px 32px rgba(18,32,58,.18)}
.fr-chart small{display:block;font-size:5.6px;color:#5C6B84;margin-bottom:5px}
.cht-bars{display:flex;gap:4px;align-items:flex-end;height:26px}
.cht-bars i{flex:1;border-radius:3px 3px 0 0;background:#DCE4F0;animation:chtGrow 2.6s ease-in-out infinite alternate}
.cht-bars i:nth-child(1){height:35%}.cht-bars i:nth-child(2){height:52%;animation-delay:.3s}
.cht-bars i:nth-child(3){height:66%;animation-delay:.6s}
.cht-bars i:nth-child(4){height:88%;animation-delay:.9s;background:linear-gradient(180deg,#4C8DF6,#2FBF9A)}
@keyframes chtGrow{to{transform:scaleY(1.12);transform-origin:bottom}}
/* --- фрагмент 9: новость, между десктопом и телефоном --- */
.fr-news{left:58%;top:37%;width:19%;z-index:3;animation:frNews var(--T) ease-in-out infinite}
@keyframes frNews{0%,44%{transform:translateX(170%);opacity:0}
  51%,72%{transform:none;opacity:1}80%,100%{transform:translateX(170%);opacity:0}}
.fr-news .nws{background:#fff;border:1px solid #E3E8F0;border-radius:10px;padding:8px 10px;
  box-shadow:0 14px 32px rgba(18,32,58,.18);font-size:6.6px;line-height:1.4;color:#42506A}
.fr-news i{font-style:normal;display:inline-block;font-family:'JetBrains Mono',monospace;font-size:5.2px;
  letter-spacing:.1em;color:#fff;background:linear-gradient(120deg,#2FBF9A,#4C8DF6);
  border-radius:100px;padding:1.5px 7px;margin-bottom:4px}
.fr-news b{color:#12203A}
/* --- фрагмент 10: офис, нижний правый угол --- */
.fr-off{left:66%;bottom:3%;width:23%;z-index:7;animation:frOff var(--T) ease-in-out infinite}
@keyframes frOff{0%,48%{transform:translateY(160%) rotate(6deg);opacity:0}
  55%,70%{transform:none;opacity:1}78%,100%{transform:translateY(160%) rotate(6deg);opacity:0}}
.fr-off .off{background:#fff;border:1px solid #E3E8F0;border-radius:10px;padding:7px 10px;
  box-shadow:0 16px 36px rgba(18,32,58,.2);font-size:6.2px;color:#42506A;display:flex;gap:7px;align-items:center}
.fr-off .pin{width:16px;height:16px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:#E4F7F1;color:#1D8F72;font-size:7px}
.fr-off b{display:block;font-family:'Inter Tight';font-size:7px;color:#12203A}


/* --- фрагмент 11: проверка сертификата в реестре --- */
.fr-vfy{left:23%;top:38%;width:30%;z-index:8;animation:frVfy var(--T) ease-in-out infinite}
@keyframes frVfy{0%,52%{transform:translate(-40%,60%) scale(.9);opacity:0}
  59%,72%{transform:none;opacity:1}80%,100%{transform:translate(-40%,60%) scale(.9);opacity:0}}
.fr-vfy .vfy{background:#fff;border:1px solid #E3E8F0;border-radius:12px;padding:9px 11px;
  box-shadow:0 18px 40px rgba(18,32,58,.22)}
.vfy-crumb{display:inline-flex;align-items:center;gap:5px;border:1px solid #E3E8F0;border-radius:100px;
  padding:2.5px 8px;font-family:'JetBrains Mono',monospace;font-size:5.4px;color:#42506A}
.vfy-crumb i{width:4px;height:4px;border-radius:50%;background:#4C8DF6;font-style:normal}
.vfy-h{font-family:'Inter Tight';font-weight:800;font-size:11px;letter-spacing:-.025em;color:#12203A;margin-top:5px}
.vfy-h span{background:linear-gradient(120deg,#4C8DF6,#2FBF9A);-webkit-background-clip:text;background-clip:text;color:transparent}
.vfy-form{display:flex;gap:5px;align-items:center;margin-top:7px;background:#F6F8FC;border:1px solid #E3E8F0;
  border-radius:100px;padding:3px 3px 3px 9px}
.vfy-in{flex:1;font-family:'Golos Text';font-size:6px;color:#8494AC;white-space:nowrap;overflow:hidden;
  border-right:1.2px solid #4C8DF6;animation:vfyType var(--T) linear infinite}
@keyframes vfyType{0%,58%{max-width:0}64%,72%{max-width:100%}80%,100%{max-width:100%}}
.vfy-btn{background:#3B5BF6;color:#fff;border-radius:100px;padding:3.5px 10px;
  font-family:'Inter Tight';font-weight:600;font-size:6px;flex:none}
.vfy-st{display:flex;gap:4px;align-items:center;margin-top:7px;flex-wrap:wrap}
.vfy-pill{border-radius:100px;padding:2px 7px;font-family:'JetBrains Mono',monospace;font-size:5px;letter-spacing:.06em;
  display:inline-flex;align-items:center;line-height:1}
.vfy-pill.ok{color:#1D8F72;background:#E4F7F1;border:1px solid #BDEBDD;
  animation:vfyOk var(--T) ease-in-out infinite}
/* печать заканчивается на 64% цикла — сразу после неё реестр «отвечает» */
@keyframes vfyOk{0%,64%{background:#E4F7F1;color:#1D8F72;box-shadow:none;transform:none}
  68%,74%{background:#22C55E;color:#fff;border-color:#22C55E;
    box-shadow:0 0 0 3px rgba(34,197,94,.18);transform:scale(1.06)}
  78%,100%{background:#E4F7F1;color:#1D8F72;box-shadow:none;transform:none}}
.vfy-pill.no{color:#B4552D;background:#FDECEC;border:1px solid #F5C9C9}
.vfy-pill.rm{color:#5C6B84;background:#F0F3F8;border:1px solid #E3E8F0}
.vfy-note{font-size:5px;color:#9AA7BC;margin-top:5px}


/* ===== плитка Costely: коллаж фрагментов продукта с 4 сторон ===== */
.shot-cst{background:
  radial-gradient(rgba(24,38,66,.06) 1px,transparent 1px),
  linear-gradient(150deg,#E3EBF6,#EFF4FA);
  background-size:16px 16px,auto}
.cst-fr{position:absolute;--T:20s;box-sizing:border-box}
.cst-fr *{box-sizing:border-box;margin:0}
.cst-grd{background:linear-gradient(120deg,#2FBF9A,#4C8DF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.cst-card{background:#fff;border:1px solid #E2E8F2;border-radius:12px;box-shadow:0 20px 48px rgba(24,38,66,.18)}
.cst-mark{font-family:'JetBrains Mono',monospace;font-size:5.6px;color:#8494AC}
/* --- 1. главная карта пары: слева --- */
.fr-c-main{left:4%;top:8%;width:46%;z-index:2;animation:fcMain var(--T) ease-in-out infinite}
@keyframes fcMain{0%,3%{transform:translateX(-130%) rotate(-5deg);opacity:0}
  10%,88%{transform:none;opacity:1}96%,100%{transform:translateX(-130%) rotate(-5deg);opacity:0}}
.fr-c-main .cst-card{padding:6% 7%}
.cst-vs{display:flex;align-items:center;gap:7px;font-family:'Inter Tight';font-weight:800;
  font-size:12.5px;letter-spacing:-.02em;color:#12203A}
.cst-vs i{font-style:normal;width:13px;height:13px;border-radius:50%;flex:none}
.cst-vs .fa{background:linear-gradient(135deg,#F6C445,#E88B3A)}
.cst-vs .fb{background:linear-gradient(135deg,#4C8DF6,#2FBF9A)}
.cst-vs em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:7px;color:#8494AC}
.cst-sent{font-size:9px;line-height:1.5;color:#42506A;margin-top:7px}
.cst-sent b{font-weight:700}
.cst-fact{display:inline-block;margin-top:7px;border-radius:100px;padding:3.5px 10px;color:#fff;
  font-family:'Inter Tight';font-weight:600;font-size:7.5px;
  background:linear-gradient(120deg,#4C8DF6,#2FBF9A)}
.cst-scale{position:relative;height:8px;display:flex;gap:3px;margin:16px 0 5px}
.cst-scale i{flex:1;border-radius:100px;background:#E7EBF3;animation:cstBand 3.2s ease-in-out infinite alternate}
.cst-scale i:nth-child(1){--bandc:#7ED9A0;animation-delay:0s}
.cst-scale i:nth-child(2){--bandc:#A8DFA4;animation-delay:.2s}
.cst-scale i:nth-child(3){--bandc:#F2C14E;animation-delay:.4s}
.cst-scale i:nth-child(4){--bandc:#EE8A5A;animation-delay:.6s}
.cst-scale i:nth-child(5){--bandc:#E06A4E;animation-delay:.8s}
@keyframes cstBand{0%,25%{background:#E7EBF3}70%,100%{background:var(--bandc)}}
.cst-chip{position:absolute;top:-13px;font-family:'JetBrains Mono',monospace;font-size:6.5px;
  background:#12203A;color:#fff;border-radius:100px;padding:2px 7px;white-space:nowrap;
  animation:cstChipA 6s var(--ease) infinite alternate}
.cst-chip.b{top:auto;bottom:-13px;background:#fff;color:#12203A;border:1px solid #E2E8F2;animation-name:cstChipB}
@keyframes cstChipA{0%,15%{left:34%}60%,100%{left:58%}}
@keyframes cstChipB{0%,15%{left:30%}60%,100%{left:9%}}
.cst-rankline{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:6px;color:#9AA7BC}
/* --- 2. зарплаты по профессиям: справа --- */
.fr-c-jobs{right:3.5%;top:7%;width:31%;z-index:4;animation:fcJobs var(--T) ease-in-out infinite}
@keyframes fcJobs{0%,8%{transform:translateX(150%);opacity:0}
  15%,86%{transform:none;opacity:1}94%,100%{transform:translateX(150%);opacity:0}}
.fr-c-jobs .cst-card{padding:7% 8%}
.cst-h{font-family:'Inter Tight';font-weight:800;font-size:8.5px;letter-spacing:-.01em;color:#12203A;margin-bottom:6px}
.cst-h small{font-weight:400;color:#8494AC;font-size:6px;display:block;margin-top:1px}
.cst-jrow{display:grid;grid-template-columns:38% 1fr 16%;gap:5%;align-items:center;padding:3.5px 0}
.cst-jrow+.cst-jrow{border-top:1px solid #F0F3F8}
.cst-jrow b{font-family:'Inter Tight';font-size:6.8px;font-weight:600;color:#12203A}
.cst-bar{position:relative;height:5.5px;border-radius:100px;background:#EEF2F8;overflow:hidden}
.cst-bar i{position:absolute;inset:0 auto 0 0;border-radius:100px;width:0;
  background:linear-gradient(90deg,#4C8DF6,#2FBF9A);animation:cstBar 3.4s ease-in-out infinite alternate}
.cst-jrow:nth-child(2) .cst-bar i{--w:78%}.cst-jrow:nth-child(3) .cst-bar i{--w:52%;animation-delay:.3s}
.cst-jrow:nth-child(4) .cst-bar i{--w:64%;animation-delay:.6s}
@keyframes cstBar{0%,15%{width:8%}65%,100%{width:var(--w,50%)}}
.cst-dif{justify-self:end;font-family:'JetBrains Mono',monospace;font-size:6.5px;border-radius:100px;padding:1.5px 6px}
.cst-dif.g{color:#1D8F72;background:#E4F7F1;border:1px solid #BDEBDD}
.cst-dif.r{color:#B4552D;background:#FDEFE7;border:1px solid #F2D4C0}
/* --- 3. корзина продуктов: сверху, между --- */
.fr-c-food{left:36%;top:2.5%;width:26%;z-index:5;animation:fcFood var(--T) ease-in-out infinite}
@keyframes fcFood{0%,13%{transform:translateY(-150%) rotate(6deg);opacity:0}
  20%,84%{transform:rotate(-2deg);opacity:1}92%,100%{transform:translateY(-150%) rotate(6deg);opacity:0}}
.fr-c-food .cst-card{padding:6% 8%}
.cst-frow{display:flex;justify-content:space-between;align-items:baseline;font-size:6.8px;color:#42506A;padding:3px 0}
.cst-frow+.cst-frow{border-top:1px solid #F0F3F8}
.cst-frow b{font-family:'JetBrains Mono',monospace;font-size:7px;color:#12203A}
.cst-egg{width:5px;height:5px;border-radius:50%;background:#EE8A5A;display:inline-block;margin-left:4px;
  animation:cstPulse 1.6s ease-in-out infinite}
@keyframes cstPulse{50%{transform:scale(1.6);opacity:.5}}
/* --- 4. энергия EIA: снизу по центру --- */
.fr-c-energy{left:29%;bottom:3.5%;width:33%;z-index:6;animation:fcEnergy var(--T) ease-in-out infinite}
@keyframes fcEnergy{0%,18%{transform:translateY(160%);opacity:0}
  25%,82%{transform:none;opacity:1}90%,100%{transform:translateY(160%);opacity:0}}
.fr-c-energy .cst-card{padding:5.5% 7%}
.cst-erow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:baseline;padding:3px 0;font-size:6.8px;color:#42506A}
.cst-erow+.cst-erow{border-top:1px solid #F0F3F8}
.cst-erow b{font-family:'JetBrains Mono',monospace;font-size:7.5px;color:#12203A}
/* --- 5. пикер сравнения: снизу-слева --- */
.fr-c-pick{left:3%;bottom:4%;width:24%;z-index:5;animation:fcPick var(--T) ease-in-out infinite}
@keyframes fcPick{0%,23%{transform:translate(-60%,120%) rotate(-6deg);opacity:0}
  30%,80%{transform:none;opacity:1}88%,100%{transform:translate(-60%,120%) rotate(-6deg);opacity:0}}
.fr-c-pick .cst-card{padding:7% 8%}
.cst-sel{border:1px solid #E2E8F2;border-radius:8px;background:#F6F8FC;padding:5px 8px;
  display:flex;justify-content:space-between;font-size:7px;color:#12203A;margin-bottom:5px}
.cst-sel span:last-child{color:#8494AC}
.cst-go{border-radius:100px;background:#12203A;color:#fff;text-align:center;padding:5.5px;
  font-family:'Inter Tight';font-weight:600;font-size:7px;position:relative;overflow:hidden}
.cst-go::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-18deg);animation:sheen 2.4s ease-in-out infinite}
/* --- 6. похожие штаты: справа-снизу --- */
.fr-c-sim{right:3%;bottom:5%;width:27%;z-index:4;animation:fcSim var(--T) ease-in-out infinite}
@keyframes fcSim{0%,28%{transform:translateX(150%) rotate(5deg);opacity:0}
  35%,78%{transform:none;opacity:1}86%,100%{transform:translateX(150%) rotate(5deg);opacity:0}}
.fr-c-sim .cst-card{padding:6% 8%}
.cst-srow{display:flex;justify-content:space-between;font-size:6.8px;color:#42506A;padding:2.5px 0}
.cst-srow b{color:#12203A;font-weight:600}
.cst-srow span{font-family:'JetBrains Mono',monospace;font-size:6.3px;color:#1D8F72}
.cst-srow span.r{color:#B4552D}
/* --- 7-9. чипы: ранг, мир, девиз --- */
.fr-c-rank{left:52%;top:40%;z-index:7;animation:fcRank var(--T) ease-in-out infinite}
@keyframes fcRank{0%,33%{transform:translateY(-140%) scale(.7);opacity:0}
  39%,76%{transform:none;opacity:1}84%,100%{transform:translateY(-140%) scale(.7);opacity:0}}
.fr-c-world{left:5%;top:3.5%;z-index:7;animation:fcWorld var(--T) ease-in-out infinite}
@keyframes fcWorld{0%,37%{transform:translateX(-140%) scale(.75);opacity:0}
  43%,74%{transform:none;opacity:1}82%,100%{transform:translateX(-140%) scale(.75);opacity:0}}
.fr-c-motto{left:38%;bottom:1%;z-index:8;animation:fcMotto var(--T) ease-in-out infinite}
@keyframes fcMotto{0%,41%{transform:translateY(150%);opacity:0}
  47%,72%{transform:none;opacity:1}80%,100%{transform:translateY(150%);opacity:0}}
.cst-pill{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #E2E8F2;
  border-radius:100px;padding:4.5px 11px;font-family:'JetBrains Mono',monospace;font-size:6.8px;color:#12203A;
  box-shadow:0 12px 28px rgba(24,38,66,.16);white-space:nowrap}
.cst-pill.dark{background:#12203A;color:#fff;border-color:#12203A;font-family:'Inter Tight';
  font-weight:600;font-size:7.5px;letter-spacing:.01em}
.cst-pill .dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(120deg,#4C8DF6,#2FBF9A);flex:none}

/* ===== плитка Costely Countries: хиро-пикер + визард переезда ===== */
/* шоты растягиваются на высоту ряда — пустых низов больше нет */
/* плитки НЕ растягиваются сеткой — высота = пропорция превью + подпись */
.work-grid{align-items:start}
/* узкая плитка вдвое уже широкой, поэтому её превью выше по пропорции */
.shot-cw{aspect-ratio:16/19.6}
.shot-cw{background:
  radial-gradient(rgba(24,38,66,.05) 1px,transparent 1px),
  linear-gradient(160deg,#E8F1FB,#F2F7FC);
  background-size:16px 16px,auto}
.cw-fr{position:absolute;--T:16s;box-sizing:border-box}
.cw-fr *{box-sizing:border-box;margin:0}
.cw-card{background:#fff;border:1px solid #E4EAF2;border-radius:14px;box-shadow:0 18px 44px rgba(24,38,66,.16)}
.cw-blue{color:#2E90FA}
/* --- заголовок --- */
.cw-head{left:7%;top:4%;right:7%;z-index:3;text-align:center;animation:cwHead var(--T) ease-in-out infinite}
@keyframes cwHead{0%,3%{transform:translateY(-140%);opacity:0}9%,90%{transform:none;opacity:1}97%,100%{transform:translateY(-140%);opacity:0}}
.cw-rel{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #E4EAF2;border-radius:100px;
  padding:3px 10px;font-family:'JetBrains Mono',monospace;font-size:6px;letter-spacing:.1em;color:#5C6B84}
.cw-rel i{width:5px;height:5px;border-radius:50%;background:#4ADE80;font-style:normal}
.cw-h1{font-family:'Inter Tight';font-weight:800;font-size:14.5px;letter-spacing:-.03em;line-height:1.1;color:#12203A;margin-top:6px}
/* --- карта пикера --- */
.cw-pick{left:5%;top:22%;right:5%;z-index:2;animation:cwPick var(--T) ease-in-out infinite}
@keyframes cwPick{0%,6%{transform:translateX(-130%);opacity:0}13%,88%{transform:none;opacity:1}95%,100%{transform:translateX(-130%);opacity:0}}
.cw-pick .cw-card{padding:7% 7% 6%}
.cw-lab{font-family:'JetBrains Mono',monospace;font-size:5.6px;letter-spacing:.1em;color:#9AA7BC;margin-bottom:3px}
.cw-selrow{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.cw-sel{border:1px solid #E4EAF2;border-radius:9px;background:#F4F6FA;padding:6px 8px;
  display:flex;justify-content:space-between;align-items:center;font-family:'Inter Tight';
  font-weight:600;font-size:7.5px;color:#12203A}
.cw-sel span:last-child{color:#9AA7BC;font-weight:400}
.cw-swap{width:18px;height:18px;border-radius:50%;background:#2E90FA;color:#fff;flex:none;
  /* выравниваю по низу строки и приподнимаю на половину разницы — центр круга совпадает с центром селекта */
  align-self:end;margin-bottom:2px;
  display:flex;align-items:center;justify-content:center;font-size:8px;
  box-shadow:0 6px 14px rgba(46,144,250,.4);animation:cwSwap 4s var(--ease) infinite}
@keyframes cwSwap{0%,55%{transform:rotate(0)}70%,100%{transform:rotate(180deg)}}
.cw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}
.cw-stat{border:1px solid #EDF1F7;border-radius:9px;padding:5px 6px}
.cw-stat i{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:4.8px;letter-spacing:.08em;color:#9AA7BC}
.cw-stat b{display:block;font-family:'Inter Tight';font-weight:800;font-size:10.5px;letter-spacing:-.02em;color:#2E90FA;margin-top:2px}
.cw-stat b.g{color:#16A34A}
.cw-stat small{display:block;font-size:4.8px;color:#8494AC;margin-top:1px}
.cw-budget{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:7px;border-top:1px solid #EDF1F7;
  font-size:6.5px;color:#42506A}
.cw-budget b{font-family:'JetBrains Mono',monospace;background:#F4F6FA;border-radius:6px;padding:3px 7px;font-size:7px;color:#12203A}
.cw-budget em{font-style:normal;font-family:'JetBrains Mono',monospace;color:#16A34A;font-weight:700;font-size:7.5px}
.cw-btn{margin-top:8px;border-radius:100px;background:#2E90FA;color:#fff;text-align:center;padding:6.5px;
  font-family:'Inter Tight';font-weight:600;font-size:7.5px;position:relative;overflow:hidden;
  box-shadow:0 10px 22px rgba(46,144,250,.35)}
.cw-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);animation:sheen 2.6s ease-in-out infinite}
/* --- нижний слот: визард → тайлы сравнения --- */
.cw-bot{left:5%;bottom:3%;right:5%;z-index:4;animation:cwWiz var(--T) ease-in-out infinite}
@keyframes cwWiz{0%,11%{transform:translateY(140%) rotate(3deg);opacity:0}
  18%,86%{transform:rotate(-1deg);opacity:1}93%,100%{transform:translateY(140%) rotate(3deg);opacity:0}}
.cw-slot{position:relative}
/* визард виден до 52% цикла, затем уступает место тайлам */
.cw-wizc{animation:cwWizGo var(--T) linear infinite}
@keyframes cwWizGo{0%,52%{opacity:1;transform:none}
  57%,95%{opacity:0;transform:translateY(-12px) scale(.97)}
  98%,100%{opacity:1;transform:none}}
.cw-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;
  animation:cwTilesGo var(--T) linear infinite}
@keyframes cwTilesGo{0%,53%{opacity:0;transform:translateY(14px) scale(.97)}
  59%,90%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(14px) scale(.97)}}
.cw-wizc{padding:6% 7%}
.cw-kick{font-family:'JetBrains Mono',monospace;font-size:5.4px;letter-spacing:.12em;color:#9AA7BC}
.cw-kick b{color:#2E90FA;font-weight:500}
.cw-h2{font-family:'Inter Tight';font-weight:800;font-size:9.5px;letter-spacing:-.02em;color:#12203A;margin-top:3px}
.cw-h2 u{text-decoration:none;box-shadow:inset 0 -3px 0 rgba(46,144,250,.3)}
.cw-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px}
.cw-fld{border:1px solid #E4EAF2;border-radius:7px;background:#fff;padding:4px 6px;font-size:6px;color:#12203A}
.cw-fld i{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:4.4px;letter-spacing:.06em;color:#9AA7BC}
.cw-langs{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.cw-lng{border:1px solid #E4EAF2;border-radius:100px;padding:2.5px 7px;
  font-family:'JetBrains Mono',monospace;font-size:5px;letter-spacing:.06em;color:#5C6B84}
/* ровно три языка «прокликиваются» до ухода карточки */
.cw-lng.k{animation:cwLng var(--T) linear infinite}
.cw-lng.k1{animation-delay:3.4s}.cw-lng.k2{animation-delay:4.9s}.cw-lng.k3{animation-delay:6.4s}
@keyframes cwLng{0%{background:#fff;color:#5C6B84;border-color:#E4EAF2}
  1.5%,7%{background:#2E90FA;color:#fff;border-color:#2E90FA}
  9%,100%{background:#fff;color:#5C6B84;border-color:#E4EAF2}}
.cw-go{margin-top:7px;display:inline-block;border-radius:100px;background:#2E90FA;color:#fff;
  padding:5px 13px;font-family:'Inter Tight';font-weight:600;font-size:6.5px;
  box-shadow:0 8px 18px rgba(46,144,250,.35)}
.cw-disc{font-size:4.8px;color:#9AA7BC;margin-top:5px}
.cw-disc u{color:#2E90FA;text-decoration:none}
/* --- три тайла сравнения: точная копия --- */
.ct{background:#fff;border:1px solid #E4EAF2;border-radius:11px;padding:6px 7px;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 10px 24px rgba(24,38,66,.1)}
.ct-h{display:flex;justify-content:space-between;align-items:center;gap:4px}
.ct-h b{font-family:'Inter Tight';font-weight:800;font-size:6.4px;letter-spacing:-.01em;color:#12203A;white-space:nowrap}
.ct-h b span{font-weight:400;color:#9AA7BC;font-size:4.4px}
.ct-bdg{border-radius:100px;padding:1.5px 5px;color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:3.9px;white-space:nowrap;flex:none}
.ct-bdg.bb{background:#3B9DF8}.ct-bdg.bv{background:#A78BFA}.ct-bdg.bg{background:#34D399}
.ct-v{font-family:'Inter Tight';font-weight:700;font-size:5.6px;line-height:1.3;color:#12203A;margin-top:3px}
.ct-v em{font-style:normal;color:#16A34A}
.ct-sc{margin-top:4px;display:flex;flex-direction:column;align-items:center;gap:2px}
.ct-cap{font-family:'JetBrains Mono',monospace;font-size:3.8px;color:#9AA7BC}
.ct-chip{border-radius:6px;padding:1.5px 6px;font-family:'Inter Tight';font-weight:700;font-size:6px;color:#fff;
  animation:ctChip var(--T) ease-in-out infinite}
.ct-chip.cb{background:linear-gradient(135deg,#3B82F6,#5FA8FA)}
.ct-chip.cv{background:linear-gradient(135deg,#8B5CF6,#A78BFA)}
.ct-chip.cg{background:linear-gradient(135deg,#10B981,#34D399)}
@keyframes ctChip{0%,56%{transform:translateY(4px);opacity:0}62%,90%{transform:none;opacity:1}95%,100%{opacity:0}}
.ct-bands{position:relative;display:flex;gap:2px;width:100%;height:5px;margin:1px 0}
.ct-bands i{flex:1;border-radius:100px;background:#E7EBF3;animation:ctBand var(--T) ease-in-out infinite}
.ct-bands i:nth-child(1){animation-delay:.1s}.ct-bands i:nth-child(2){animation-delay:.2s}
.ct-bands i:nth-child(3){animation-delay:.3s}.ct-bands i:nth-child(4){animation-delay:.4s}
.ct-bands i:nth-child(5){animation-delay:.5s}
@keyframes ctBand{0%,57%{background:#E7EBF3}64%,90%{background:var(--bc,#E7EBF3)}95%,100%{background:#E7EBF3}}
/* точки штатов на шкале */
.ct-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;
  border:1.5px solid #fff;box-shadow:0 1px 3px rgba(24,38,66,.4);
  animation:ctDot var(--T) ease-in-out infinite}
/* центрирование внутри keyframes — иначе анимация перетирает transform и точка съезжает */
@keyframes ctDot{0%,56%{transform:translate(-50%,-50%) translateY(4px);opacity:0}
  62%,90%{transform:translate(-50%,-50%);opacity:1}95%,100%{opacity:0}}
/* пилюли не стопкой: верхняя левее, нижняя правее */
.ct-sc>:nth-child(1),.ct-sc>:nth-child(2){align-self:flex-start;margin-left:12%}
.ct-sc>:nth-child(4),.ct-sc>:nth-child(5){align-self:flex-end;margin-right:12%}
.ct-dot.n{background:#1E293B}
.ct-dot.a{background:#3B9DF8}
/* подпись-легенда и пилюля источника */
.ct-note{margin-top:4px;border-top:1px solid #F0F3F8;padding-top:3px;
  font-family:'Golos Text';font-size:3.9px;color:#9AA7BC;line-height:1.4}
.ct-src{margin-top:2px;display:flex}
.ct-pill{border:1px solid #E4EAF2;border-radius:100px;padding:1px 5px;
  font-family:'JetBrains Mono',monospace;font-size:3.6px;letter-spacing:.06em;color:#8494AC;white-space:nowrap}


/* ===== плитки Tiersi (coming soon) и «ваш проект» ===== */
.shot-ti{background:linear-gradient(160deg,#F7F8FC,#EFF2F8)}
.ti *{box-sizing:border-box;margin:0}
/* шапка сайта */
.ti-nav{position:absolute;left:0;right:0;top:0;height:13%;display:flex;align-items:center;gap:7px;
  padding:0 5%;background:#fff;border-bottom:1px solid #ECEFF5}
.ti-logo{display:flex;align-items:center;gap:5px;font-family:'Inter Tight';font-weight:800;
  font-size:9px;color:#12203A;letter-spacing:-.02em}
.ti-logo i{width:7px;height:7px;border-radius:50%;background:#4C8DF6;font-style:normal}
.ti-beta{border:1px solid #E3E8F0;border-radius:100px;padding:1px 6px;
  font-family:'JetBrains Mono',monospace;font-size:5px;color:#8494AC}
.ti-links{margin-left:auto;display:flex;gap:9px;font-size:6px;color:#5C6B84}
.ti-cta{background:#3B82F6;color:#fff;border-radius:100px;padding:3.5px 9px;
  font-family:'Inter Tight';font-weight:600;font-size:6px}
/* левая колонка */
.ti-left{position:absolute;left:5%;top:22%;width:40%}
.ti-kick{font-family:'JetBrains Mono',monospace;font-size:5.4px;letter-spacing:.14em;color:#9AA7BC}
.ti-h1{font-family:'Inter Tight';font-weight:800;font-size:14px;line-height:1.12;letter-spacing:-.035em;
  color:#12203A;margin-top:5px}
.ti-h1 span{background:linear-gradient(120deg,#8B5CF6,#3B82F6);-webkit-background-clip:text;background-clip:text;color:transparent}
.ti-sub{font-size:6.2px;line-height:1.55;color:#5C6B84;margin-top:6px}
.ti-btns{display:flex;gap:5px;margin-top:8px}
.ti-btns span{border-radius:100px;padding:0 10px;height:15px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  font-family:'Inter Tight';font-weight:600;font-size:6.2px}
.ti-btns .p{background:#3B82F6;color:#fff;position:relative;overflow:hidden}
.ti-btns .p::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);animation:sheen 3s ease-in-out infinite}
.ti-btns .s{border:1px solid #DDE3EC;background:#fff;color:#12203A}
.ti-free{font-size:5.4px;color:#9AA7BC;margin-top:6px}
/* лист резюме */
.ti-doc{position:absolute;right:6%;top:19%;width:40%;background:#fff;border-radius:8px;
  border:1px solid #E9EDF3;box-shadow:0 20px 44px rgba(24,38,66,.18);padding:5.5% 6%;
  animation:tiFloat 6s ease-in-out infinite alternate}
@keyframes tiFloat{to{transform:translateY(-6px)}}
.ti-doc::before,.ti-doc::after{content:"";position:absolute;inset:6px -5px -6px 5px;border-radius:8px;
  background:#fff;border:1px solid #EDF1F6;z-index:-1}
.ti-doc::after{inset:12px -10px -12px 10px;opacity:.6}
.ti-nm{font-family:'Inter Tight';font-weight:800;font-size:8px;color:#12203A;letter-spacing:-.01em}
.ti-ro{font-size:5.2px;color:#8494AC;margin-top:1px}
.ti-sec{font-family:'JetBrains Mono',monospace;font-size:4.4px;letter-spacing:.14em;color:#9AA7BC;margin-top:6px}
.ti-l{height:2.6px;border-radius:4px;background:#E7EBF2;margin-top:3px;width:0;
  animation:tiLine 5s ease-in-out infinite alternate}
.ti-l.w9{--w:94%}.ti-l.w8{--w:86%;animation-delay:.15s}.ti-l.w6{--w:64%;animation-delay:.3s}
.ti-l.w7{--w:76%;animation-delay:.45s}
@keyframes tiLine{0%,10%{width:0}55%,100%{width:var(--w,80%)}}
.ti-job{display:flex;justify-content:space-between;align-items:baseline;margin-top:5px}
.ti-job b{font-family:'Inter Tight';font-size:5.4px;color:#12203A;font-weight:600}
.ti-job span{font-family:'JetBrains Mono',monospace;font-size:4.4px;color:#9AA7BC}
/* плавающие карточки */
.ti-ats{position:absolute;right:3%;top:26%;background:#fff;border:1.5px solid #34D399;border-radius:9px;
  padding:5px 9px;box-shadow:0 14px 30px rgba(24,38,66,.16);
  animation:tiAts 5s ease-in-out infinite}
.ti-ats b{display:block;font-family:'Inter Tight';font-weight:700;font-size:7px;color:#0F9D6E}
.ti-ats small{display:block;font-size:5px;color:#5C6B84;margin-top:1px}
@keyframes tiAts{0%,12%{opacity:0;transform:translate(10px,6px) scale(.94)}
  22%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translate(10px,6px) scale(.94)}}
.ti-size{position:absolute;left:42%;top:33%;background:#fff;border:1px solid #EAEEF4;border-radius:9px;
  padding:5px 9px;box-shadow:0 14px 30px rgba(24,38,66,.16);
  animation:tiSize 5s ease-in-out infinite}
.ti-size b{display:block;font-family:'Inter Tight';font-weight:700;font-size:6.4px;color:#12203A}
.ti-size small{display:block;font-size:5px;color:#8494AC;margin-top:1px}
@keyframes tiSize{0%,28%{opacity:0;transform:translateY(8px)}
  38%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(8px)}}
.tile-foot span.ti-soon,.ti-soon{display:inline-flex;align-items:center;vertical-align:middle;margin-left:10px;
  background:var(--ink);color:#fff;border-radius:100px;padding:6px 16px;line-height:1;
  font-family:'Inter Tight',sans-serif;font-weight:600;font-size:13px;letter-spacing:.01em;
  white-space:nowrap;box-shadow:0 8px 24px rgba(11,11,15,.22);
  animation:tiPulse 2.8s ease-in-out infinite}
@keyframes tiPulse{50%{transform:translateY(-2px)}}
@media(max-width:640px){.ti-left{width:46%}.ti-h1{font-size:11px}.ti-size{display:none}}
/* --- нижняя часть плитки Tiersi: редактор и экспорт --- */
.ti-edit{position:absolute;left:5%;bottom:20%;width:36%;background:#fff;border:1px solid #E9EDF3;
  border-radius:9px;padding:6px 7px;box-shadow:0 14px 30px rgba(24,38,66,.14);
  animation:tiEdit 5s ease-in-out infinite}
@keyframes tiEdit{0%,18%{opacity:0;transform:translateY(10px)}
  28%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(10px)}}
.ti-edit .lab{font-family:'JetBrains Mono',monospace;font-size:4.2px;letter-spacing:.14em;color:#9AA7BC}
.ti-fld{border:1px solid #E4E9F1;border-radius:5px;background:#F7F9FC;padding:3px 5px;margin-top:2.5px;
  font-size:5px;color:#12203A;white-space:nowrap;overflow:hidden}
.ti-fld.typing{border-color:#3B82F6;background:#fff}
.ti-fld.typing b{display:inline-block;overflow:hidden;white-space:nowrap;font-weight:400;
  border-right:1px solid #3B82F6;width:0;
  animation:tiFieldType 5s steps(24) infinite, tiCaret .8s steps(1) infinite}
@keyframes tiFieldType{0%,30%{width:0}62%,100%{width:100%}}
@keyframes tiCaret{50%{border-color:transparent}}
.ti-row2{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
/* полоса экспорта */
.ti-exp{position:absolute;left:44%;right:5%;bottom:5%;display:flex;gap:4px;justify-content:center;
  animation:tiExp 5s ease-in-out infinite}
@keyframes tiExp{0%,34%{opacity:0;transform:translateY(8px)}
  44%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(8px)}}
.ti-exp span{background:#3B82F6;color:#fff;border-radius:100px;padding:3px 8px;
  font-family:'Inter Tight';font-weight:600;font-size:5.4px;white-space:nowrap}
.ti-exp span:nth-child(2){background:#2563EB}
.ti-exp span:nth-child(3){background:#1D4ED8}
.ti-exp span:nth-child(4){background:#1E40AF}
@media(max-width:640px){.ti-edit{display:none}}
/* --- нижний правый угол Tiersi: разбор резюме роботом --- */
.ti-parse{position:absolute;right:5%;bottom:17%;width:32%;background:#fff;border:1px solid #E9EDF3;
  border-radius:9px;padding:6px 8px;box-shadow:0 14px 30px rgba(24,38,66,.14);
  animation:tiParse 5s ease-in-out infinite}
@keyframes tiParse{0%,26%{opacity:0;transform:translateY(10px)}
  36%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(10px)}}
.ti-parse .h{display:flex;align-items:center;justify-content:space-between;gap:5px}
.ti-parse .h b{font-family:'Inter Tight';font-weight:700;font-size:6px;color:#12203A}
.ti-parse .h i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:4.6px;color:#0F9D6E;
  background:#E4F7F1;border:1px solid #BDEBDD;border-radius:100px;padding:1px 5px}
.ti-chk{display:flex;align-items:center;gap:4px;margin-top:3.5px;font-size:5px;color:#42506A}
.ti-chk::before{content:"✓";width:8px;height:8px;border-radius:50%;background:#22C55E;color:#fff;
  font-size:4.6px;display:flex;align-items:center;justify-content:center;flex:none;
  opacity:0;transform:scale(.5);animation:tiTick 5s ease-in-out infinite}
.ti-chk:nth-of-type(2)::before{animation-delay:.35s}
.ti-chk:nth-of-type(3)::before{animation-delay:.7s}
.ti-chk:nth-of-type(4)::before{animation-delay:1.05s}
@keyframes tiTick{0%,32%{opacity:0;transform:scale(.5)}42%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
@media(max-width:640px){.ti-parse{display:none}}
/* --- логотип Tiersi в круге, нижний левый угол превью --- */
.ti-mark{position:absolute;left:7%;bottom:1.5%;width:17%;aspect-ratio:1;border-radius:50%;
  background:#fff;border:1px solid #E9EDF3;box-shadow:0 14px 30px rgba(24,38,66,.16);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  animation:tiMark 5s ease-in-out infinite}
@keyframes tiMark{0%,40%{opacity:0;transform:scale(.7)}
  50%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.7)}}
.ti-mark img{width:62%;height:62%;object-fit:contain;display:block}
@media(max-width:640px){.ti-mark{display:none}}
/* --- «ваш проект» --- */
.shot-yp{background:linear-gradient(150deg,#F4F4FA,#FAFAFE)}
.yp{position:absolute;inset:9%;border:2px dashed #D3D6E6;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  transition:border-color .5s}
.tile:hover .yp{border-color:#8B5CF6}
.yp-plus{width:52px;height:52px;border-radius:50%;background:var(--grad);position:relative;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:300;line-height:1;
  box-shadow:0 16px 34px -8px rgba(79,70,229,.5);animation:ypPulse 3s ease-in-out infinite}
@keyframes ypPulse{50%{transform:scale(1.08)}}
.yp-plus::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(139,92,246,.35);
  animation:ypRing 3s ease-out infinite}
@keyframes ypRing{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.yp b{font-family:'Inter Tight';font-weight:800;font-size:clamp(15px,1.7vw,20px);letter-spacing:-.02em;color:var(--ink)}
.yp span{font-size:12.5px;color:var(--muted);text-align:center;max-width:78%}
.yp-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#C7CBE0;animation:ypDrift 7s ease-in-out infinite alternate}
.yp-dot.d1{left:16%;top:24%}.yp-dot.d2{right:19%;top:34%;animation-delay:-2s}
.yp-dot.d3{left:26%;bottom:22%;animation-delay:-4s}.yp-dot.d4{right:22%;bottom:28%;animation-delay:-1s}
@keyframes ypDrift{to{transform:translate(6px,-8px)}}

/* ===== fix pack ===== */
/* 1) стрелки в круглых кнопках строго по центру */
.q-btn{padding:0;line-height:1;display:flex;align-items:center;justify-content:center}
.tile-foot .go,.card .glyph{line-height:1}
/* 2) отступы внутри тёмного блока */
.local>.wrap{padding-left:clamp(30px,5vw,76px);padding-right:clamp(30px,5vw,76px)}
/* 6) на подстраницах подзаголовок не наезжает на слово */
.page-hero .sub{margin-top:20px}
/* ===== модальное окно заявки ===== */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.modal.open{opacity:1;pointer-events:auto}
.modal-back{position:absolute;inset:0;background:rgba(11,11,15,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal-card{
  position:relative;width:min(560px,100%);max-height:92svh;overflow:auto;
  background:#fff;border-radius:30px;padding:clamp(28px,4vw,44px);
  box-shadow:0 60px 140px -30px rgba(11,11,25,.5);
  transform:translateY(26px) scale(.97);transition:transform .5s var(--ease);
}
.modal.open .modal-card{transform:none}
.modal-x{
  position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:#fff;cursor:pointer;font-size:15px;color:var(--muted);
  display:flex;align-items:center;justify-content:center;padding:0;line-height:1;
  transition:all .35s var(--ease);
}
.modal-x:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(90deg)}
.m-title{font-family:'Inter Tight';font-weight:800;font-size:clamp(26px,3.4vw,34px);
  letter-spacing:-.03em;line-height:1.15;text-align:center;margin-bottom:28px}
.m-title a{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  border-bottom:2px solid var(--indigo)}
.m-step{display:flex;flex-direction:column;gap:14px}
.m-in{
  width:100%;border:1.5px solid var(--line);border-radius:18px;background:#F5F5F8;
  padding:16px 20px;font-family:'Golos Text';font-size:15.5px;color:var(--ink);
  outline:none;transition:all .3s;resize:vertical;
}
.m-in::placeholder{color:#9C9CA8}
.m-in:focus{border-color:var(--indigo);background:#fff;box-shadow:0 0 0 4px rgba(79,70,229,.1)}
.m-in.err{border-color:#EF4444;box-shadow:0 0 0 4px rgba(239,68,68,.08)}
.m-file{
  display:flex;align-items:center;gap:10px;border:1.5px dashed var(--line);border-radius:100px;
  padding:14px 22px;cursor:pointer;color:var(--muted);font-size:15px;transition:all .3s;
}
.m-file:hover{border-color:var(--indigo);color:var(--ink)}
.m-cta{
  width:100%;border:0;border-radius:100px;background:var(--ink);color:#fff;cursor:pointer;
  padding:17px;font-family:'Inter Tight';font-weight:600;font-size:16px;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .35s var(--ease),box-shadow .35s;position:relative;overflow:hidden;
}
.m-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(11,11,15,.28)}
.m-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);animation:sheen 2.8s ease-in-out infinite}
.m-agree{display:flex;gap:10px;align-items:center;justify-content:center;font-size:13.5px;color:var(--muted)}
.m-agree a{text-decoration:underline}
.m-agree input{accent-color:var(--indigo);width:17px;height:17px}
.m-q{font-family:'Inter Tight';font-weight:600;font-size:15px;margin-top:6px}
.m-chips{display:flex;gap:10px;flex-wrap:wrap}
.m-chips button{
  border:1.5px solid var(--line);background:#fff;border-radius:100px;padding:10px 20px;
  font-family:'Golos Text';font-size:14.5px;color:var(--ink);cursor:pointer;transition:all .3s;
}
.m-chips button:hover{border-color:#B9B9CC}
.m-chips button.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.m-note{text-align:center;font-size:13.5px;color:#1FA84F;min-height:18px}
.m-steps{display:flex;gap:22px;justify-content:center;margin-top:26px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;color:#B4B4C2}
.m-steps span{padding-bottom:6px;border-bottom:2px solid transparent}
.m-steps span.on{color:var(--ink);border-color:var(--ink)}

/* ===== компактный тёмный блок: код выше, цифры-карточки в ряд ===== */
.local{padding:clamp(46px,6vw,70px) 0}
.local h2{margin-top:14px}
.local p{margin-top:16px}
.local .wrap{align-items:start;gap:clamp(34px,5vw,58px)}
.local .term{margin-top:4px}
.local .stats-row{display:block;margin-top:clamp(24px,3.5vw,38px)}
.local-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:0}
.local-stats>div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  border-radius:20px;padding:24px 26px;transition:border-color .4s,transform .4s var(--ease)}
.local-stats>div:hover{border-color:rgba(129,140,248,.5);transform:translateY(-4px)}
.local-stats .n{font-size:clamp(32px,4vw,46px)}
.local-stats .l{font-size:16.5px;color:#C6C6D4;margin-top:8px;line-height:1.45}
@media(max-width:640px){.local-stats{grid-template-columns:1fr}}

/* стрелки в кружках: одинаковый размер, ровный центр, единая позиция */
.tile-foot{align-items:center}
.tile-foot .go{flex:none;margin-left:auto;width:38px;height:38px;box-sizing:border-box;
  /* глиф стрелки в шрифте сидит выше базовой линии — компенсирую отступом, не transform:
     transform занят ховером (rotate -45deg) */
  padding:2px 0 0;
  display:flex;align-items:center;justify-content:center;line-height:1;font-size:15px}
.work-grid .tile .tile-foot{min-height:86px}

/* ===== эффектное появление заголовков секций ===== */
.sec-head .eyebrow{opacity:0;letter-spacing:.34em;transition:opacity .9s var(--ease),letter-spacing 1.1s var(--ease)}
.sec-head.in .eyebrow{opacity:1;letter-spacing:.14em}
.sec-head .eyebrow::before{width:0;transition:width .9s var(--ease) .2s}
.sec-head.in .eyebrow::before{width:22px}
.sec-head h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.sec-head h2 .wi{display:inline-block;transform:translateY(118%) rotate(6deg);transform-origin:left bottom;
  transition:transform .95s var(--ease);transition-delay:calc(.09s * var(--i,0))}
.sec-head.in h2 .wi{transform:none}
.sec-head h2 .wi.gw{background:var(--grad);background-size:240% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:transform .95s var(--ease),background-position 1.4s var(--ease);
  transition-delay:calc(.09s * var(--i,0)),calc(.09s * var(--i,0) + .55s)}
.sec-head.in h2 .wi.gw{background-position:0 0}
.sec-head p{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s}
.sec-head.in p{opacity:1;transform:none}

/* ===== узкие экраны (≤560px): анти-наложения ===== */
/* 1. шапка ленты видео: подписи больше не наезжают друг на друга */
.vf-out-h{gap:8px;padding:0 6%}
.vf-out-h span,.vf-out-h b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== модалка заявки: единая форма (стиль коммерческого запроса) ===== */
.modal-card{max-width:660px;width:calc(100% - 32px);padding:34px 34px 30px;border-radius:28px;
  background:#fff;box-shadow:0 40px 120px -30px rgba(20,20,50,.4);max-height:min(92vh,860px);
  overflow-y:auto;overscroll-behavior:contain;
  /* тонкий скролл вместо системного — иначе полоса рисуется поверх скруглённого угла */
  scrollbar-width:thin;scrollbar-color:rgba(20,20,50,.18) transparent}
.modal-card::-webkit-scrollbar{width:6px}
.modal-card::-webkit-scrollbar-track{background:transparent;margin:18px 0}
.modal-card::-webkit-scrollbar-thumb{background:rgba(20,20,50,.18);border-radius:100px}
.modal-card::-webkit-scrollbar-thumb:hover{background:rgba(20,20,50,.3)}
.modal-x{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;
  border:0;background:#F2F3F8;color:var(--ink);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
  transition:background .3s,transform .4s var(--ease)}
.modal-x:hover{background:#E6E8F0;transform:rotate(90deg)}
.m-badge{display:inline-flex;align-items:center;gap:7px;background:#EEEDFC;color:#4F46E5;
  border-radius:100px;padding:7px 14px;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.14em}
.m-title{font-family:'Inter Tight';font-weight:800;font-size:clamp(26px,3.4vw,34px);
  letter-spacing:-.035em;line-height:1.08;margin-top:14px;color:var(--ink)}
.m-lead{color:var(--muted);font-size:15.5px;margin-top:10px}
.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.m-grid .full{grid-column:1 / -1}
.m-lab{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  color:var(--muted);margin-bottom:7px}
.m-in{width:100%;border:1.5px solid var(--line);border-radius:14px;background:#F7F7FA;
  padding:14px 16px;font-family:'Golos Text';font-size:15.5px;color:var(--ink);outline:none;
  transition:border-color .3s,background .3s,box-shadow .3s}
.m-in::placeholder{color:#A7A7B2}
.m-in:focus{border-color:var(--indigo);background:#fff;box-shadow:0 0 0 4px rgba(79,70,229,.1)}
.m-in.err{border-color:#EF4444;background:#FEF4F4}
select.m-in{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6E76' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
textarea.m-in{resize:vertical;min-height:120px;line-height:1.55}
.m-file{display:flex;align-items:center;gap:9px;margin-top:14px;border:1.5px dashed var(--line);
  border-radius:14px;padding:13px 16px;font-size:14.5px;color:var(--muted);cursor:pointer;
  transition:border-color .3s,color .3s}
.m-file:hover{border-color:var(--indigo);color:var(--ink)}
.m-cta{width:100%;margin-top:20px;border:0;border-radius:100px;padding:17px;cursor:pointer;
  background:var(--grad);color:#fff;font-family:'Inter Tight';font-weight:600;font-size:16.5px;
  position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.m-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(79,70,229,.55)}
.m-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-18deg);animation:sheen 2.8s ease-in-out infinite}
.m-agree{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:13px;color:var(--muted)}
.m-agree input{margin-top:2px;accent-color:var(--indigo)}
.m-note{margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#1D8F72;min-height:16px}

/* ===== реальные ролики в ленте конвейера ===== */
.rframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s,filter .7s;filter:blur(8px)}
.rframe.playing video{opacity:1;filter:none}
.rframe.rendering video{opacity:.12;filter:blur(10px) grayscale(.4)}

/* доигравший ролик: стоп-кадр без индикатора воспроизведения */
.rframe.done-clip .ply{opacity:0}

/* чередование ширин: узкие плитки выше по пропорции, чтобы ряд был ровным */
.shot-ti{aspect-ratio:16/19.6}
.shot-yp{aspect-ratio:16/9.6}

/* цвет и размер бейджа не должны перебиваться общим правилом .tile-foot span */
.tile-foot span.ti-soon{color:#fff;font-size:13px}

/* ===== выпадающее меню услуг ===== */
.has-drop{position:relative}
.drop-t{display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:color .25s}
.drop-t::after{content:"";width:5px;height:5px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);
  transition:transform .3s var(--ease)}
.has-drop:hover .drop-t,.has-drop:focus-within .drop-t{color:var(--ink)}
.has-drop:hover .drop-t::after,.has-drop:focus-within .drop-t::after{transform:rotate(225deg) translateY(-2px)}
.drop{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);margin-top:12px;
  min-width:250px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;
  box-shadow:0 28px 70px -22px rgba(20,20,50,.28);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  z-index:60}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.drop a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;
  color:var(--ink);font-size:14.5px;transition:background .25s}
.drop a:hover{background:#F4F4F8}
.drop a small{font-size:12px;color:var(--muted)}
@media(max-width:820px){.has-drop{display:none}}


/* ===== из websites.html ===== */

:root{
  --bg:#FBFBFD;
  --ink:#0B0B0F;
  --muted:#6E6E76;
  --line:#E8E8ED;
  --card:#FFFFFF;
  --indigo:#4F46E5;
  --cyan:#06B6D4;
  --violet:#8B5CF6;
  --grad:linear-gradient(100deg,var(--indigo),var(--violet) 45%,var(--cyan));
  --radius:28px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Golos Text',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Inter Tight',-apple-system,sans-serif}
.mono{font-family:'JetBrains Mono',monospace}
a{color:inherit;text-decoration:none}
::selection{background:rgba(79,70,229,.18)}

/* ---------- utilities ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--grad)}

/* scroll-reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- navigation ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .4s,box-shadow .4s,backdrop-filter .4s;
}
nav.scrolled{
  background:rgba(251,251,253,.72);
  backdrop-filter:saturate(1.8) blur(20px);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);
  box-shadow:0 1px 0 var(--line);
}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:0 28px;height:64px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{font-family:'Inter Tight';font-weight:800;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.logo-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px rgba(99,102,241,.55);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.nav-links{display:flex;gap:34px;font-size:14.5px;color:var(--muted)}
.nav-links a{transition:color .25s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  font-size:14px;font-weight:600;padding:9px 20px;border-radius:100px;
  background:var(--ink);color:#fff;transition:transform .35s var(--ease),box-shadow .35s;
}
.nav-cta:hover{transform:scale(1.05);box-shadow:0 8px 24px rgba(11,11,15,.22)}
@media(max-width:820px){.nav-links{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;overflow:hidden;padding-bottom:120px;
}
.hero-content{position:relative;z-index:2;width:100%;padding:130px 0 0}

/* ---- "We build" + giant rotating word (Avista-style) ---- */
.we-build{
  max-width:1180px;margin:0 auto;padding:0 28px;text-align:left;
  font-family:'Inter Tight';font-weight:600;font-size:clamp(20px,2.6vw,30px);
  letter-spacing:-.02em;display:flex;align-items:center;gap:16px;
  opacity:0;animation:fadeUp 1.1s var(--ease) .2s forwards;
}
.we-build::before{content:"";width:44px;height:3px;border-radius:3px;background:var(--grad);flex:none}
.we-build .avail{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:7px 14px;background:rgba(255,255,255,.7);
}
.we-build .avail::before{content:"";width:7px;height:7px;border-radius:50%;background:#28C840;box-shadow:0 0 8px rgba(40,200,64,.7);animation:pulse 2s ease-in-out infinite}
@media(max-width:560px){.we-build .avail{display:none}}

.word-stage{
  position:relative;width:100%;height:clamp(96px,17.5vw,255px);margin-top:6px;
  opacity:0;animation:fadeUp 1.2s var(--ease) .4s forwards;
  transform:translate3d(var(--wxp,0px), var(--wyp,0px), 0);
  will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 97%);
  mask-image:linear-gradient(180deg,#000 62%,transparent 97%);
}
.word{
  position:absolute;left:50%;top:50%;white-space:nowrap;
  font-family:'Inter Tight';font-weight:800;line-height:1;
  /* паддинги расширяют зону заливки: последняя буква при отрицательном
     трекинге выходит за текстовый блок, и без запаса её срезало */
  padding:0 .09em;
  font-size:clamp(88px,16.5vw,242px);letter-spacing:-.055em;
  background:linear-gradient(105deg,
    #A9A9BE 0%, #C6CCE6 18%, #9F9FB6 38%,
    #CDE0EA 55%, #A9A9BE 72%, #C9C9DE 88%, #A9A9BE 100%);
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 9s linear infinite;
  backface-visibility:hidden;-webkit-font-smoothing:antialiased;
  opacity:0;filter:blur(16px);
  transform:translate(-50%,-42%);
  transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);
  pointer-events:none;
}
@keyframes shimmer{from{background-position:0% 0}to{background-position:230% 0}}
.word.grad{
  background:linear-gradient(105deg,var(--indigo),var(--violet) 30%,var(--cyan) 55%,var(--violet) 75%,var(--indigo));
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:shimmer 5s linear infinite;
}
@media(prefers-reduced-motion:reduce){.word{animation:none}}
.word.active{opacity:1;filter:blur(0);transform:translate(-50%,-50%)}
.word.leaving{opacity:0;filter:blur(12px);transform:translate(-50%,-60%)}

.hero p.sub{
  position:relative;z-index:2;max-width:560px;margin:clamp(-40px,-2.6vw,-8px) auto 0;padding:0 28px;font-size:clamp(17px,2vw,21px);color:var(--muted);
  opacity:0;animation:fadeUp 1.2s var(--ease) .55s forwards;
}

/* ---- floating mockup: tilt + parallax layers ---- */
.stage{
  --mx:0; --my:0; --tilt:14deg;
  position:relative;z-index:2;width:min(900px,92%);margin:58px auto 0;
  perspective:1700px;
  opacity:0;animation:fadeUp 1.3s var(--ease) .95s forwards;
}
.tilt{
  position:relative;transform-style:preserve-3d;
  transform:rotateX(calc(var(--tilt) + var(--my)*7deg)) rotateY(calc(var(--mx)*10deg));
  transition:transform .12s linear;
  will-change:transform;
}
.stage .glow{
  position:absolute;inset:-14% -8%;z-index:0;filter:blur(80px);opacity:.4;pointer-events:none;
  background:
    radial-gradient(42% 46% at 28% 38%, rgba(79,70,229,.6), transparent 70%),
    radial-gradient(38% 42% at 74% 62%, rgba(6,182,212,.5), transparent 70%);
  transform:translateZ(-60px);
  animation:glowShift 9s ease-in-out infinite alternate;
}
@keyframes glowShift{from{transform:translateZ(-60px) scale(1)}to{transform:translateZ(-60px) scale(1.1) rotate(4deg)}}

/* chat window */
.chat{
  position:relative;z-index:1;text-align:left;
  background:rgba(255,255,255,.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.9);border-radius:24px;
  box-shadow:0 60px 120px -30px rgba(30,30,70,.28), 0 2px 0 rgba(255,255,255,.9) inset;
  transform:translateZ(40px) translate3d(calc(var(--mx)*-8px), calc(var(--my)*-8px), 40px);
  overflow:hidden;
}
.chat-bar{
  display:flex;align-items:center;gap:12px;padding:15px 20px;
  border-bottom:1px solid var(--line);
}
.chat-bar .dots{display:flex;gap:7px}
.chat-bar .dots i{width:11px;height:11px;border-radius:50%}
.chat-bar .dots i:nth-child(1){background:#FF5F57}
.chat-bar .dots i:nth-child(2){background:#FEBC2E}
.chat-bar .dots i:nth-child(3){background:#28C840}
.chat-title{font-size:13px;color:var(--muted);font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:8px}
.dot-live{width:7px;height:7px;border-radius:50%;background:#28C840;box-shadow:0 0 8px rgba(40,200,64,.7);animation:pulse 2s ease-in-out infinite}
.chat-body{padding:26px 26px 8px;display:flex;flex-direction:column;gap:16px;min-height:238px}
.msg{max-width:78%;padding:13px 18px;border-radius:20px;font-size:15px;line-height:1.55}
.msg.user{
  align-self:flex-end;color:#fff;border-bottom-right-radius:6px;
  background:linear-gradient(120deg,var(--indigo),var(--violet));
  box-shadow:0 10px 26px -10px rgba(79,70,229,.5);
}
.msg.ai{
  align-self:flex-start;background:#F2F2F7;color:var(--ink);border-bottom-left-radius:6px;
}
.msg.ai .src{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:4px 10px;border-radius:100px;
  background:#fff;border:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
}
.typing{display:inline-flex;gap:5px;padding:4px 0}
.typing i{width:7px;height:7px;border-radius:50%;background:#B0B0BC;animation:tp 1.2s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
.chat-input{
  margin:10px 20px 20px;display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:100px;padding:12px 20px;background:#fff;
  color:#A7A7B2;font-size:14.5px;
}
.chat-input .send{
  margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-size:14px;flex:none;
}

/* n8n-style flow card */
.flow{
  position:absolute;z-index:2;right:-46px;bottom:-42px;width:300px;text-align:left;
  background:rgba(255,255,255,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.95);border-radius:20px;padding:18px 20px 16px;
  box-shadow:0 40px 90px -25px rgba(30,30,70,.32);
  transform:translateZ(95px) translate3d(calc(var(--mx)*-20px), calc(var(--my)*-20px), 95px);
  animation:bob 6s ease-in-out infinite;
}
@keyframes bob{0%,100%{margin-bottom:0}50%{margin-bottom:12px}}
.flow .f-head{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-bottom:14px}
.flow .f-head b{color:#28C840;font-weight:500}
.nodes{display:flex;align-items:center;justify-content:space-between}
.node{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.node .nb{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:#F5F5FA;border:1px solid var(--line);
}
.node .nb svg{width:20px;height:20px;stroke:url(#gstroke);fill:none;stroke-width:1.8}
.node.hot .nb{background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(6,182,212,.12));border-color:rgba(79,70,229,.3)}
.wire{flex:1;height:2px;margin:0 8px 22px;position:relative;overflow:hidden;border-radius:2px;background:var(--line)}
.wire::after{
  content:"";position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--indigo),var(--cyan),transparent);
  animation:wire 1.8s linear infinite;
}
@keyframes wire{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* floating chips */
.chip{
  position:absolute;z-index:3;font-family:'JetBrains Mono',monospace;font-size:12px;
  padding:8px 15px;border-radius:100px;background:rgba(255,255,255,.9);
  border:1px solid var(--line);color:var(--ink);white-space:nowrap;
  box-shadow:0 16px 40px -12px rgba(30,30,70,.25);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:inline-flex;align-items:center;gap:8px;
  transform:translateZ(120px) translate3d(calc(var(--mx)*-30px), calc(var(--my)*-30px), 120px);
  animation:bob 5s ease-in-out infinite;
}
.chip.c1{top:-18px;left:-52px;animation-delay:.6s}
.chip.c2{top:96px;right:-64px;animation-delay:1.4s}
.chip .ok{color:#28C840}
@media(max-width:860px){
  .flow{right:-8px;bottom:-56px;width:250px}
  .chip.c1{left:-6px}.chip.c2{right:-6px;top:auto;bottom:120px;display:none}
}
@media(max-width:560px){.flow{display:none}.chip{display:none}.stage{--tilt:9deg}.word{font-size:clamp(54px,15vw,242px)}}
.hero-actions{
  display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap;
  opacity:0;animation:fadeUp 1.2s var(--ease) .75s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:100px;font-weight:600;font-size:16px;
  transition:transform .4s var(--ease),box-shadow .4s;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px rgba(11,11,15,.25)}
.btn-ghost{color:var(--ink);border:1px solid var(--line);background:rgba(255,255,255,.6);backdrop-filter:blur(8px)}
.btn-ghost:hover{transform:translateY(-3px);border-color:#cfcfda}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:22px 0;background:#fff;
}
.marquee-track{display:flex;gap:64px;width:max-content;animation:mq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--muted);
  display:flex;align-items:center;gap:64px;white-space:nowrap;
}
.marquee-track b{color:var(--ink);font-weight:500}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:150px 0}
.sec-head{max-width:760px;margin-bottom:80px}
.sec-head h2{font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.08;margin-top:18px}
.sec-head p{margin-top:22px;color:var(--muted);font-size:19px;max-width:600px}

/* services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:920px){.services{grid-template-columns:1fr}}
.card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:42px 36px 46px;overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s,border-color .55s;
}
.card:hover{transform:translateY(-10px);box-shadow:0 30px 70px -20px rgba(30,30,60,.18);border-color:transparent}
.card::before{ /* gradient edge on hover */
  content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;
  background:var(--grad);opacity:0;transition:opacity .55s;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.card:hover::before{opacity:1}
.card .glyph{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin-bottom:30px;
  background:linear-gradient(135deg,rgba(79,70,229,.09),rgba(6,182,212,.09));
  transition:transform .55s var(--ease);
}
.card:hover .glyph{transform:scale(1.08) rotate(-4deg)}
.card .glyph svg{width:26px;height:26px;stroke:url(#gstroke)}
.card h3{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.card p{color:var(--muted);font-size:16px}
.card ul{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:10px}
.card li{font-size:14.5px;color:var(--muted);display:flex;gap:10px;align-items:baseline}
.card li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--grad);flex:none;transform:translateY(-2px)}

/* local AI — dark accent block */
.local{
  background:#0B0B0F;color:#F5F5F7;border-radius:44px;position:relative;overflow:hidden;
  padding:110px 0;
}
.local .aurora{
  position:absolute;inset:-40%;pointer-events:none;filter:blur(90px);opacity:.5;
  background:
    radial-gradient(38% 30% at 24% 30%, rgba(79,70,229,.55), transparent 70%),
    radial-gradient(30% 26% at 78% 66%, rgba(6,182,212,.4), transparent 70%),
    radial-gradient(26% 22% at 60% 20%, rgba(139,92,246,.4), transparent 70%);
  animation:aurora 16s ease-in-out infinite alternate;
}
@keyframes aurora{from{transform:rotate(0) scale(1)}to{transform:rotate(10deg) scale(1.15)}}
.local .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
@media(max-width:920px){.local .wrap{grid-template-columns:1fr}}
.local .eyebrow{color:#9A9AA6}
.local h2{font-size:clamp(32px,4.4vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin-top:18px}
.local p{color:#B9B9C4;margin-top:22px;font-size:18px;max-width:520px}
.term{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:22px;
  font-family:'JetBrains Mono',monospace;font-size:13.5px;line-height:1.9;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
}
.term-bar{display:flex;gap:7px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#3A3A44}
.term-body{padding:22px 24px;color:#C9C9D4;min-height:220px}
.term .p1{color:#7DD3FC}.term .p2{color:#A5B4FC}.term .ok{color:#6EE7B7}
.cursor{display:inline-block;width:8px;height:16px;background:#6EE7B7;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.local-stats .n{font-family:'Inter Tight';font-size:38px;font-weight:800;letter-spacing:-.03em}
.local-stats .l{font-size:13px;color:#8A8A96;margin-top:4px}

/* work / portfolio tiles */
.work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.tile{grid-column:span 3;position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  transition:transform .55s var(--ease),box-shadow .55s;
}
.tile.wide{grid-column:span 4}
.tile.narrow{grid-column:span 2}
@media(max-width:920px){.tile,.tile.wide,.tile.narrow{grid-column:span 6}}
.tile:hover{transform:translateY(-8px);box-shadow:0 34px 80px -28px rgba(30,30,60,.22)}
.shot{position:relative;aspect-ratio:16/9.6;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.tile:hover .shot .inner{transform:scale(1.045) translateY(-4px)}
.shot .inner{transition:transform .8s var(--ease);width:100%;height:100%;position:relative}
.tile-foot{display:flex;align-items:center;gap:12px;padding:20px 24px}
.tile-foot b{font-family:'Inter Tight';font-size:17px;font-weight:700;letter-spacing:-.015em}
.tile-foot span{font-size:13px;color:var(--muted)}
.tile-foot .go{
  margin-left:auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:15px;color:var(--muted);
  transition:all .45s var(--ease);
}
.tile:hover .go{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(-45deg)}
/* нарисованные CSS-превью */
.sv{position:absolute;border-radius:12px}
.shot-shop{background:linear-gradient(160deg,#EEF0FB,#E4F4F8)}
.shot-shop .sv.bar{top:7%;left:6%;right:6%;height:9%;background:#fff;border-radius:100px;box-shadow:0 6px 18px rgba(30,30,70,.08)}
.shot-shop .sv.p1,.shot-shop .sv.p2,.shot-shop .sv.p3{top:26%;width:26.5%;height:66%;background:#fff;box-shadow:0 14px 30px rgba(30,30,70,.1)}
.shot-shop .sv.p1{left:6%}.shot-shop .sv.p2{left:36.75%}.shot-shop .sv.p3{left:67.5%}
.shot-shop .sv.p1::before,.shot-shop .sv.p2::before,.shot-shop .sv.p3::before{
  content:"";position:absolute;top:8%;left:8%;right:8%;height:52%;border-radius:9px;
  background:linear-gradient(135deg,rgba(79,70,229,.16),rgba(6,182,212,.16));}
.shot-shop .sv.p1::after,.shot-shop .sv.p2::after,.shot-shop .sv.p3::after{
  content:"";position:absolute;bottom:12%;left:8%;width:56%;height:7%;border-radius:100px;background:#E4E4EE}
.shot-clinic{background:linear-gradient(150deg,#101018,#1A1A2C)}
.shot-clinic .sv.m1{top:14%;left:8%;width:56%;height:17%;background:rgba(255,255,255,.09)}
.shot-clinic .sv.m2{top:37%;right:8%;width:62%;height:17%;background:linear-gradient(120deg,var(--indigo),var(--violet));opacity:.9}
.shot-clinic .sv.m3{top:60%;left:8%;width:48%;height:17%;background:rgba(255,255,255,.09)}
.shot-clinic .sv.pill{bottom:8%;left:8%;width:34%;height:9%;border-radius:100px;background:rgba(110,231,183,.14);border:1px solid rgba(110,231,183,.3)}
.shot-flow{background:linear-gradient(150deg,#F2F1FC,#EAF7F5)}
.shot-flow .sv.n{width:15%;aspect-ratio:1;border-radius:16px;background:#fff;box-shadow:0 12px 26px rgba(30,30,70,.1)}
.shot-flow .sv.n1{top:20%;left:10%}.shot-flow .sv.n2{top:52%;left:42%}.shot-flow .sv.n3{top:20%;left:74%}
.shot-flow .sv.w{height:2px;background:var(--grad);border-radius:2px;overflow:visible}
.shot-flow .sv.w1{top:38%;left:22%;width:24%;transform:rotate(24deg)}
.shot-flow .sv.w2{top:48%;left:54%;width:24%;transform:rotate(-24deg)}
.shot-site{background:linear-gradient(160deg,#F6F5FA,#EDF2FA)}
.shot-site .sv.h{top:12%;left:8%;width:60%;height:13%;border-radius:9px;background:linear-gradient(100deg,#2A2A38,#4A4A60)}
.shot-site .sv.h::after{content:"";position:absolute;left:0;top:130%;width:42%;height:70%;border-radius:9px;background:linear-gradient(100deg,var(--indigo),var(--cyan));opacity:.85}
.shot-site .sv.t1{top:58%;left:8%;width:84%;height:6%;border-radius:100px;background:#E2E2EC}
.shot-site .sv.t2{top:70%;left:8%;width:66%;height:6%;border-radius:100px;background:#E9E9F1}
.shot-site .sv.t3{top:82%;left:8%;width:30%;height:8%;border-radius:100px;background:#111119}

/* reviews — one big quote slider */
.voices{
  background:var(--card);border:1px solid var(--line);border-radius:44px;
  padding:clamp(30px,4vw,52px) clamp(26px,4.5vw,68px);position:relative;
}
.voices-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:clamp(16px,2.4vw,28px)}
.voices-top h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.08;margin-top:16px}
.q-nav{display:flex;gap:12px;flex:none;margin-top:8px}
.q-btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;font-size:18px;color:var(--ink);cursor:pointer;
  transition:all .4s var(--ease);
}
.q-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:scale(1.07)}
.q-stack{display:grid}
.q-slide{
  grid-area:1/1;opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.q-slide.on{opacity:1;transform:none;pointer-events:auto}
.q-slide blockquote{
  font-family:'Inter Tight';font-weight:700;letter-spacing:-.025em;line-height:1.34;
  font-size:clamp(18px,2.3vw,28px);max-width:23em;
}
.q-slide .hl{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.q-who{display:flex;align-items:center;gap:14px;margin-top:22px}
.q-who .ava{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:#fff;font-family:'Inter Tight';font-weight:700;font-size:16px;
  background:linear-gradient(135deg,var(--indigo),var(--violet));
}
.q-who b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.q-who span{font-size:13.5px;color:var(--muted)}
.q-dots{display:flex;gap:10px;margin-top:26px}
.q-dot{width:34px;height:4px;border-radius:4px;background:var(--line);border:0;cursor:pointer;padding:0;transition:all .5s var(--ease)}
.q-dot.on{width:58px;background:var(--grad)}
@media(max-width:700px){.voices-top{flex-direction:column}.q-nav{order:2}}

/* CTA */
.cta{
  text-align:center;position:relative;overflow:hidden;border-radius:44px;background:#fff;
  border:1px solid var(--line);padding:120px 28px;
}
.cta h2{font-size:clamp(36px,5.4vw,68px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.cta p{color:var(--muted);margin:24px auto 44px;max-width:480px;font-size:19px}
/* переливающаяся подложка, стекающаяся к кнопке */
.cta .flux{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.cta .flux i{
  position:absolute;left:50%;top:74%;width:420px;height:420px;margin:-210px;
  border-radius:50%;filter:blur(64px);opacity:0;
  animation:flux var(--d,6s) ease-in infinite;animation-delay:var(--dl,0s);
}
.cta .flux i:nth-child(1){--sx:-46vw;--sy:-260px;--d:5.5s;--dl:0s;background:radial-gradient(circle,rgba(79,70,229,.7),transparent 70%)}
.cta .flux i:nth-child(2){--sx:46vw;--sy:-200px;--d:6.2s;--dl:.9s;background:radial-gradient(circle,rgba(6,182,212,.65),transparent 70%)}
.cta .flux i:nth-child(3){--sx:-38vw;--sy:160px;--d:6.8s;--dl:1.9s;background:radial-gradient(circle,rgba(139,92,246,.65),transparent 70%)}
.cta .flux i:nth-child(4){--sx:40vw;--sy:180px;--d:5.8s;--dl:2.8s;background:radial-gradient(circle,rgba(79,70,229,.6),transparent 70%)}
.cta .flux i:nth-child(5){--sx:0vw;--sy:-340px;--d:7.2s;--dl:3.7s;background:radial-gradient(circle,rgba(6,182,212,.55),transparent 70%)}
.cta .flux i:nth-child(6){--sx:-24vw;--sy:-320px;--d:6.4s;--dl:4.6s;background:radial-gradient(circle,rgba(139,92,246,.55),transparent 70%)}
@keyframes flux{
  0%{transform:translate(var(--sx),var(--sy)) scale(1.1);opacity:0}
  12%{opacity:.75}
  70%{opacity:.45}
  100%{transform:translate(0,0) scale(.18);opacity:0}
}
/* мягкое дыхание всего фона панели */
.cta::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;
  background:linear-gradient(115deg,rgba(79,70,229,.06),rgba(6,182,212,.05) 40%,rgba(139,92,246,.06) 70%,rgba(79,70,229,.06));
  background-size:300% 300%;animation:ctaShift 14s ease-in-out infinite alternate;
}
@keyframes ctaShift{from{background-position:0% 50%}to{background-position:100% 50%}}
/* свечение, в которое «вливаются» блики */
.cta .btn-primary{position:relative;z-index:1}
.cta .btn-primary::before{
  content:"";position:absolute;inset:-20px;border-radius:100px;z-index:-1;
  background:var(--grad);filter:blur(30px);opacity:.4;
  animation:btnPulse 2.2s ease-in-out infinite;
}
@keyframes btnPulse{0%,100%{opacity:.3;transform:scale(.92)}50%{opacity:.62;transform:scale(1.1)}}
/* footer */
footer{padding:56px 0 44px;color:var(--muted);font-size:14px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot .links{display:flex;gap:26px}
.foot a:hover{color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ===== подстраницы ===== */
.nav-links a.on{color:var(--ink);font-weight:600}
.page-hero{min-height:auto;padding-bottom:90px}
.page-hero .sub{margin-top:clamp(-34px,-2.2vw,-6px)}
/* ===== браузерный мокап: живой процесс сборки сайта ===== */
.browser-wrap{position:relative;width:min(940px,94%);margin:54px auto 0;
  opacity:0;animation:fadeUp 1.2s var(--ease) .8s forwards}
.build-steps{
  display:flex;justify-content:center;gap:clamp(10px,2vw,26px);margin-bottom:22px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
}
.bs{color:#B4B4C2;display:inline-flex;align-items:center;gap:8px;transition:color .5s}
.bs::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .5s,box-shadow .5s}
.bs.on{color:var(--ink)}
.bs.on::before{background:var(--grad);box-shadow:0 0 10px rgba(99,102,241,.6)}
.bs.done{color:#8A8A98}
.bs.done::before{background:#28C840}
.browser{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;text-align:left;
  box-shadow:0 50px 110px -30px rgba(30,30,70,.25)}
.b-bar{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line)}
.b-url{flex:1;max-width:300px;margin:0 auto;background:#F2F2F7;border-radius:100px;padding:6px 16px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted);text-align:center;transition:all .6s}
.b-url.live{background:#E9FBEF;color:#1FA84F}
.build-body{display:grid;grid-template-columns:250px 1fr;min-height:352px}
@media(max-width:760px){.build-body{grid-template-columns:1fr}.code-pane{display:none}}
/* панель кода слева */
.code-pane{
  background:#0E0E15;padding:18px 18px;overflow:hidden;position:relative;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.95;
}
.code-pane::after{content:"";position:absolute;inset:auto 0 0 0;height:46px;
  background:linear-gradient(transparent,#0E0E15)}
.code-pane .cl{color:#8A8AA0;white-space:nowrap;opacity:0;transform:translateY(6px);transition:all .4s var(--ease)}
.code-pane .cl.show{opacity:1;transform:none}
.code-pane .k{color:#A5B4FC}.code-pane .s{color:#7DD3FC}.code-pane .g{color:#6EE7B7}
/* вьюпорт справа */
.view-pane{position:relative;padding:22px;display:flex;flex-direction:column;gap:14px;background:#FCFCFE}
/* терминал-оверлей фазы scaffold */
.b-term{
  position:absolute;inset:0;z-index:5;background:#FCFCFE;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:13.5px;color:var(--muted);text-align:left;
  transition:opacity .6s var(--ease);line-height:2.1;
}
.b-term.hide{opacity:0;pointer-events:none}
.b-term .p1{color:var(--indigo)}.b-term .ok{color:#1FA84F}
/* строящиеся элементы */
.w-el{position:relative;border-radius:10px;opacity:0;transform:scale(.96);
  border:1.5px dashed transparent;transition:all .6s var(--ease)}
.w-el.show{opacity:1;transform:none;border-color:#C9C9DA;background:rgba(244,244,249,.5)}
.w-el .tag{
  position:absolute;top:-9px;left:12px;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.06em;color:#A0A0B0;background:#FCFCFE;padding:0 7px;
  opacity:0;transition:opacity .4s .2s;
}
.w-el.show .tag{opacity:1}
.w-el.styled{border-style:solid;border-color:var(--line);background:#fff;box-shadow:0 8px 22px rgba(30,30,70,.06)}
.w-el.styled .tag{opacity:0}
.el-head{height:34px;display:flex;align-items:center;gap:8px;padding:0 14px}
.el-head i{border-radius:100px;background:#E4E4EE;opacity:0;transition:opacity .5s}
.el-head i:nth-child(1){width:56px;height:8px}
.el-head i:nth-child(2){width:34px;height:7px;margin-left:auto}
.el-head i:nth-child(3){width:34px;height:7px}
.w-el.styled .el-head i{opacity:1}
.el-hero{height:118px;overflow:hidden}
.w-el.styled.el-hero{background:linear-gradient(120deg,rgba(79,70,229,.14),rgba(139,92,246,.1),rgba(6,182,212,.14));
  background-size:200% 100%;animation:shimmer 8s linear infinite;border-color:transparent}
.el-hero .h-line{position:absolute;left:18px;border-radius:100px;background:rgba(11,11,15,.85);
  width:0;height:14px;transition:width .7s var(--ease)}
.el-hero .h1l{top:26px}.el-hero .h2l{top:50px}
.el-hero .h-btn{position:absolute;left:18px;top:76px;width:88px;height:24px;border-radius:100px;
  background:var(--grad);opacity:0;transform:scale(.6);transition:all .5s var(--ease)}
.el-hero.content .h1l{width:46%}.el-hero.content .h2l{width:30%}
.el-hero.content .h-btn{opacity:1;transform:none}
.el-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border:none!important;background:none!important;box-shadow:none!important;padding:0}
.el-card{position:relative;height:96px;border-radius:10px;opacity:0;transform:scale(.94);
  border:1.5px dashed #C9C9DA;background:rgba(244,244,249,.5);transition:all .55s var(--ease)}
.el-card.show{opacity:1;transform:none}
.el-card.styled{border:1px solid var(--line);background:#fff;box-shadow:0 8px 22px rgba(30,30,70,.06)}
.el-card .img{position:absolute;top:9px;left:9px;right:9px;height:46px;border-radius:7px;
  background:linear-gradient(135deg,rgba(79,70,229,.18),rgba(6,182,212,.18));
  opacity:0;transform:scale(.7);transition:all .45s var(--ease)}
.el-card .txt{position:absolute;bottom:12px;left:9px;width:55%;height:7px;border-radius:100px;background:#E4E4EE;
  opacity:0;transition:opacity .4s .15s}
.el-card.filled .img{opacity:1;transform:none}
.el-card.filled .txt{opacity:1}
/* фейковый курсор */
.fcur{
  position:absolute;z-index:8;width:20px;height:20px;left:60%;top:110%;
  transition:left .8s var(--ease),top .8s var(--ease);pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));
}
.fcur svg{width:100%;height:100%}
.fcur .ring{position:absolute;left:-8px;top:-8px;width:36px;height:36px;border-radius:50%;
  border:2px solid var(--indigo);opacity:0;transform:scale(.4)}
.fcur.click .ring{animation:clickring .5s ease-out}
@keyframes clickring{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}
/* метрики и деплой */
.b-score{
  position:absolute;right:16px;top:16px;z-index:6;display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--line);border-radius:100px;padding:7px 14px 7px 8px;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink);
  box-shadow:0 12px 30px -8px rgba(30,30,70,.18);
  opacity:0;transform:translateY(-8px);transition:all .5s var(--ease);
}
.b-score.show{opacity:1;transform:none}
.b-score .ring2{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#28C840 calc(var(--sc,0)*1%),#E8E8ED 0);transition:--sc 1s}
.b-score .ring2 i{width:18px;height:18px;border-radius:50%;background:#fff}
.b-toast{
  position:absolute;left:50%;bottom:16px;transform:translate(-50%,16px);z-index:7;
  background:#0B0B0F;color:#fff;border-radius:100px;padding:10px 20px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;display:flex;gap:9px;align-items:center;
  opacity:0;transition:all .5s var(--ease);white-space:nowrap;
}
.b-toast.show{opacity:1;transform:translate(-50%,0)}
.b-toast .ok{color:#6EE7B7}
/* искры при деплое */
.spark{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--grad);z-index:7;
  opacity:0;pointer-events:none}
.spark.go{animation:spark 1s ease-out forwards}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
.browser-wrap .chip{animation:bob 5s ease-in-out infinite;transform:none}
.browser-wrap .chip.b1{top:32px;right:-30px}
.browser-wrap .chip.b2{bottom:-16px;left:-34px;animation-delay:1.2s}
@media(max-width:700px){.browser-wrap .chip{display:none}}
/* крупная схема (automation) */
.flow-big{width:min(880px,92%);margin:54px auto 0;background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:38px 34px 30px;text-align:left;
  box-shadow:0 50px 110px -30px rgba(30,30,70,.22);
  opacity:0;animation:fadeUp 1.2s var(--ease) .8s forwards}
.flow-big .f-head{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;
  font-size:12px;color:var(--muted);margin-bottom:26px}
.flow-big .f-head b{color:#28C840;font-weight:500}
.flow-big .nodes{display:flex;align-items:center;justify-content:space-between}
.flow-big .node{font-size:13px}
.flow-big .node .nb{width:64px;height:64px;border-radius:18px}
.flow-big .node .nb svg{width:26px;height:26px}
.flow-big .wire{margin:0 10px 24px}
.flow-big .runlog{margin-top:26px;border-top:1px solid var(--line);padding-top:16px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:2;color:var(--muted)}
.flow-big .runlog .ok{color:#1FA84F}
/* чек-лист «в каждый проект входит» */
.band{background:var(--card);border:1px solid var(--line);border-radius:44px;
  padding:clamp(36px,5vw,64px) clamp(28px,5vw,72px)}
.band h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;letter-spacing:-.03em;margin-top:16px}
.checks{list-style:none;margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:16px 44px}
@media(max-width:700px){.checks{grid-template-columns:1fr}}
.checks li{display:flex;gap:14px;align-items:baseline;font-size:16px;color:var(--ink)}
.checks li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad);flex:none;transform:translateY(-2px)}
.checks li span{color:var(--muted);font-size:14px}
/* FAQ */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:24px 4px;font-family:'Inter Tight';font-weight:600;font-size:18px;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Inter Tight';font-weight:400;font-size:26px;color:var(--muted);
  transition:transform .35s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 4px 26px;max-width:640px;font-size:16px}


/* превью: поиск по документам (local ai) */
.shot-docs{background:linear-gradient(150deg,#101018,#171728)}
.shot-docs .sv.q{top:11%;left:8%;width:64%;height:14%;border-radius:100px;
  background:linear-gradient(120deg,var(--indigo),var(--violet));opacity:.9}
.shot-docs .sv.d1,.shot-docs .sv.d2,.shot-docs .sv.d3{left:8%;height:11%;background:rgba(255,255,255,.08)}
.shot-docs .sv.d1{top:34%;width:80%}
.shot-docs .sv.d2{top:50%;width:70%}
.shot-docs .sv.d3{top:66%;width:76%}
.shot-docs .sv.hlt{top:50%;left:30%;width:26%;height:11%;border-radius:8px;
  background:rgba(110,231,183,.2);border:1px solid rgba(110,231,183,.45)}
.shot-docs .sv.cite{bottom:7%;left:8%;width:42%;height:10%;border-radius:100px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
/* превью: бот поддержки (automation) */
.shot-bot{background:linear-gradient(150deg,#F1F2FC,#EAF6F4)}
.shot-bot .sv.b1{top:10%;left:7%;width:52%;height:15%;background:#fff;box-shadow:0 8px 20px rgba(30,30,70,.08)}
.shot-bot .sv.b2{top:31%;right:7%;width:58%;height:15%;background:linear-gradient(120deg,var(--indigo),var(--cyan));opacity:.88}
.shot-bot .sv.b3{top:52%;left:7%;width:46%;height:15%;background:#fff;box-shadow:0 8px 20px rgba(30,30,70,.08)}
.shot-bot .sv.stamp{bottom:8%;right:7%;width:36%;height:12%;border-radius:100px;
  background:#E9FBEF;border:1px solid #CBEFD6}

/* ===== плитка IMS-ZERT: коллаж-аккордеон из фрагментов с 4 сторон ===== */
.shot-ims{background:
  radial-gradient(rgba(18,32,58,.06) 1px,transparent 1px),
  linear-gradient(150deg,#DFE7F2,#EDF2F8);
  background-size:16px 16px,auto}
.ims-fr{position:absolute;--T:20s;box-sizing:border-box}
.ims-fr *{box-sizing:border-box;margin:0}
.ims-mut{color:#5C6B84}
.ims-grd{background:linear-gradient(120deg,#2FBF9A,#4C8DF6);-webkit-background-clip:text;background-clip:text;color:transparent}
/* лёгкое парение собранных фрагментов */
.ims-fl{width:100%;height:100%;animation:imsBob 5s ease-in-out infinite alternate}
@keyframes imsBob{to{transform:translateY(-6px)}}
/* --- фрагмент 1: десктоп-браузер, влетает слева --- */
.fr-desk{left:5%;top:9%;width:52%;height:66%;z-index:2;animation:frDesk var(--T) ease-in-out infinite}
@keyframes frDesk{0%,3%{transform:translateX(-130%) rotate(-6deg);opacity:0}
  10%,88%{transform:none;opacity:1}96%,100%{transform:translateX(-130%) rotate(-6deg);opacity:0}}
.fr-desk .win{width:100%;height:100%;background:#F7F9FC;border-radius:11px;overflow:hidden;
  box-shadow:0 26px 60px rgba(18,32,58,.3);border:1px solid #E3E8F0;display:flex;flex-direction:column}
.win-bar{flex:none;display:flex;align-items:center;gap:5px;padding:7px 10px;background:#fff;border-bottom:1px solid #E9EDF4}
.win-bar i{width:7px;height:7px;border-radius:50%}
.win-bar i:nth-child(1){background:#FF5F57}.win-bar i:nth-child(2){background:#FEBC2E}.win-bar i:nth-child(3){background:#28C840}
.win-bar em{font-style:normal;margin:0 auto;font-family:'JetBrains Mono',monospace;font-size:7px;color:#8494AC;
  background:#F0F3F9;border-radius:100px;padding:2px 10px}
.desk-body{flex:1;padding:9% 7%;background:linear-gradient(180deg,#fff,#EFF4FA)}
.ims-kick{font-family:'JetBrains Mono',monospace;font-size:6.5px;letter-spacing:.12em;color:#1D8F72;margin-bottom:6px}
.ims-h1{font-family:'Inter Tight';font-weight:800;font-size:15px;line-height:1.12;letter-spacing:-.02em;color:#12203A}
.ims-sub{font-size:7.5px;line-height:1.5;margin-top:6px}
.ims-btns{display:flex;gap:6px;margin-top:9px}
.ims-btns span{padding:5px 10px;border-radius:100px;font-family:'Inter Tight';font-weight:600;font-size:7.5px}
.ims-btns .b1{background:#12203A;color:#fff}
.ims-btns .b2{border:1px solid #C6D0E0;background:#fff;color:#12203A}
.desk-stats{display:flex;gap:14px;margin-top:11px}
.desk-stats b{font-family:'Inter Tight';font-weight:800;font-size:13px;display:block}
.desk-stats small{font-size:6px;color:#5C6B84}
/* --- фрагмент 2: телефон, влетает снизу-справа --- */
.fr-mob{right:6%;top:14%;width:19%;z-index:4;animation:frMob var(--T) ease-in-out infinite}
@keyframes frMob{0%,9%{transform:translate(60%,130%) rotate(10deg);opacity:0}
  17%,86%{transform:none;opacity:1}94%,100%{transform:translate(60%,130%) rotate(10deg);opacity:0}}
.fr-mob .ph{width:100%;aspect-ratio:9/19.3;background:#fff;border-radius:16px;border:2px solid #12203A;
  box-shadow:0 26px 55px rgba(18,32,58,.32);overflow:hidden;position:relative;padding:9% 7%}
.ph::before{content:"";position:absolute;top:3%;left:32%;right:32%;height:3.5%;border-radius:100px;background:#12203A}
.ph .ims-logo{margin:14% auto 8%;width:22px;height:22px}
.ph .ml{height:6px;border-radius:5px;background:#12203A;margin:0 auto 4px}
.ph .ml.m1{width:92%}.ph .ml.m2{width:64%}
.ph .ml.acc{width:78%;background:linear-gradient(120deg,#2FBF9A,#4C8DF6)}
.ph .mchip{margin-top:8%;border:1px solid #E3E8F0;border-radius:8px;padding:5px 7px;font-size:6px;color:#42506A}
.ph .mchip b{font-family:'Inter Tight';font-size:8px;color:#12203A;display:block}
.ph .mbtn{margin-top:9%;height:16px;border-radius:100px;background:linear-gradient(120deg,#2FBF9A,#4C8DF6);
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Inter Tight';font-weight:600;font-size:6.5px}
.ims-logo{width:24px;height:24px;border-radius:7px;background:#0E1930;color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Inter Tight';font-weight:800;font-size:8.5px}
/* --- фрагмент 3: сертификат, падает сверху --- */
.fr-cert{right:25%;top:5%;width:19%;z-index:5;animation:frCert var(--T) ease-in-out infinite}
@keyframes frCert{0%,15%{transform:translateY(-140%) rotate(9deg);opacity:0}
  23%,84%{transform:rotate(-4deg);opacity:1}92%,100%{transform:translateY(-140%) rotate(9deg);opacity:0}}
.fr-cert .crt{background:#fff;border:1px solid #E3E8F0;border-radius:11px;padding:10px 11px;
  box-shadow:0 18px 40px rgba(18,32,58,.22)}
.ims-seal{width:24px;height:24px;border-radius:50%;margin-bottom:6px;
  background:conic-gradient(#2FBF9A,#4C8DF6,#2FBF9A);
  -webkit-mask:radial-gradient(farthest-side,transparent 50%,#000 52%);
  mask:radial-gradient(farthest-side,transparent 50%,#000 52%)}
.fr-cert b{display:block;font-family:'Inter Tight';font-size:8px;color:#12203A;letter-spacing:.06em}
.fr-cert small{display:block;font-size:6.4px;color:#5C6B84;margin-top:2px}
.ims-chip{display:inline-block;margin-top:6px;padding:3px 8px;border-radius:100px;
  font-family:'JetBrains Mono',monospace;font-size:6px;color:#1D8F72;background:#E4F7F1;border:1px solid #BDEBDD}
/* --- фрагмент 4: тёмная карта цифр, влетает справа --- */
.fr-dark{left:31%;bottom:5%;width:33%;z-index:6;animation:frDark var(--T) ease-in-out infinite}
@keyframes frDark{0%,21%{transform:translateX(160%);opacity:0}
  29%,82%{transform:none;opacity:1}90%,100%{transform:translateX(160%);opacity:0}}
.fr-dark .dk{background:#0D1728;border-radius:12px;padding:11px 13px;box-shadow:0 22px 50px rgba(10,18,32,.5)}
.ims-tag{display:inline-block;padding:2.5px 9px;border-radius:100px;background:#16233A;
  font-family:'JetBrains Mono',monospace;font-size:5.5px;letter-spacing:.12em;color:#7FD6BE;margin-bottom:7px}
.dk-row{display:flex;gap:12px}
.dk-row b{font-family:'Inter Tight';font-weight:800;font-size:16px;letter-spacing:-.02em;display:block;
  background:linear-gradient(120deg,#5B8DEF,#3AC6A8);-webkit-background-clip:text;background-clip:text;color:transparent}
.dk-row small{font-size:5.8px;line-height:1.35;color:#8FA3C4;display:block;margin-top:2px}
/* --- фрагмент 5: шаги, выезжают снизу-слева --- */
.fr-steps{left:4%;bottom:6%;width:22%;z-index:3;animation:frSteps var(--T) ease-in-out infinite}
@keyframes frSteps{0%,27%{transform:translateY(150%) rotate(-5deg);opacity:0}
  35%,80%{transform:none;opacity:1}88%,100%{transform:translateY(150%) rotate(-5deg);opacity:0}}
.fr-steps .stp{background:#fff;border:1px solid #E3E8F0;border-radius:10px;padding:8px 10px;
  box-shadow:0 16px 36px rgba(18,32,58,.18)}
.stp div{display:flex;gap:7px;align-items:baseline;padding:3px 0}
.stp div+div{border-top:1px solid #EEF1F7}
.stp i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:5.5px;color:#1D8F72;letter-spacing:.08em;flex:none}
.stp b{font-family:'Inter Tight';font-size:7px;color:#12203A}
/* --- фрагмент 6: чип реестра, выскакивает сверху-справа --- */
.fr-reg{right:5%;top:5%;z-index:7;animation:frReg var(--T) ease-in-out infinite}
@keyframes frReg{0%,33%{transform:translateY(-160%) scale(.7);opacity:0}
  40%,78%{transform:none;opacity:1}86%,100%{transform:translateY(-160%) scale(.7);opacity:0}}
.fr-reg span{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #CBEFD6;
  border-radius:100px;padding:5px 11px;font-family:'JetBrains Mono',monospace;font-size:6.5px;color:#1D8F72;
  box-shadow:0 12px 28px rgba(18,32,58,.16)}
/* --- фрагмент 7: ISO-карточка, влетает слева-снизу --- */
.fr-iso{left:26%;top:6%;width:20%;z-index:1;animation:frIso var(--T) ease-in-out infinite}
@keyframes frIso{0%,38%{transform:translate(-90%,-120%) rotate(-8deg);opacity:0}
  46%,76%{transform:rotate(2deg);opacity:1}84%,100%{transform:translate(-90%,-120%) rotate(-8deg);opacity:0}}
.fr-iso .iso{background:#fff;border:1px solid #E3E8F0;border-radius:10px;padding:8px 10px;
  display:flex;gap:8px;align-items:center;box-shadow:0 14px 30px rgba(18,32,58,.16)}
.fr-iso b{font-family:'Inter Tight';font-weight:800;font-size:13px}
.fr-iso div div{font-size:6.8px;color:#42506A;line-height:1.3}
.fr-iso small{display:block;font-size:5.8px;color:#8494AC}
@media(prefers-reduced-motion:reduce){
  .ims-fr,.ims-fl{animation:none!important;opacity:1!important;transform:none!important}
}

/* --- заполнение низа десктопа: ISO-пилюли --- */
.desk-body{display:flex;flex-direction:column}
.desk-iso{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:9px}
.desk-iso span{border:1px solid #E3E8F0;background:#fff;border-radius:100px;padding:3px 8px;
  font-family:'JetBrains Mono',monospace;font-size:5.8px;color:#42506A}
.desk-iso span.hot{color:#1D8F72;background:#E4F7F1;border-color:#BDEBDD}
/* --- заполнение низа телефона: новость + таббар --- */
.ph{display:flex;flex-direction:column}
.ph .mnews{margin-top:auto;font-size:5.6px;line-height:1.4;color:#5C6B84;border-top:1px solid #EEF1F7;padding-top:5px}
.ph .mnews b{display:block;font-family:'JetBrains Mono',monospace;font-size:5px;letter-spacing:.1em;color:#1D8F72}
.ph .tabbar{flex:none;margin-top:6px;height:14px;border-radius:100px;background:#F0F3F9;
  display:flex;justify-content:space-around;align-items:center}
.ph .tabbar i{width:5px;height:5px;border-radius:50%;background:#B9C4D6}
.ph .tabbar i:nth-child(2){background:linear-gradient(120deg,#2FBF9A,#4C8DF6);width:6px;height:6px}
/* --- фрагмент 8: мини-график аудитов, верхний левый угол --- */
.fr-chart{left:2%;top:4%;width:15%;z-index:5;animation:frChart var(--T) ease-in-out infinite}
@keyframes frChart{0%,40%{transform:translate(-120%,-60%) rotate(-7deg);opacity:0}
  47%,74%{transform:rotate(-2deg);opacity:1}82%,100%{transform:translate(-120%,-60%) rotate(-7deg);opacity:0}}
.fr-chart .cht{background:#fff;border:1px solid #E3E8F0;border-radius:10px;padding:8px 10px;
  box-shadow:0 14px 32px rgba(18,32,58,.18)}
.fr-chart small{display:block;font-size:5.6px;color:#5C6B84;margin-bottom:5px}
.cht-bars{display:flex;gap:4px;align-items:flex-end;height:26px}
.cht-bars i{flex:1;border-radius:3px 3px 0 0;background:#DCE4F0;animation:chtGrow 2.6s ease-in-out infinite alternate}
.cht-bars i:nth-child(1){height:35%}.cht-bars i:nth-child(2){height:52%;animation-delay:.3s}
.cht-bars i:nth-child(3){height:66%;animation-delay:.6s}
.cht-bars i:nth-child(4){height:88%;animation-delay:.9s;background:linear-gradient(180deg,#4C8DF6,#2FBF9A)}
@keyframes chtGrow{to{transform:scaleY(1.12);transform-origin:bottom}}
/* --- фрагмент 9: новость, между десктопом и телефоном --- */
.fr-news{left:58%;top:37%;width:19%;z-index:3;animation:frNews var(--T) ease-in-out infinite}
@keyframes frNews{0%,44%{transform:translateX(170%);opacity:0}
  51%,72%{transform:none;opacity:1}80%,100%{transform:translateX(170%);opacity:0}}
.fr-news .nws{background:#fff;border:1px solid #E3E8F0;border-radius:10px;padding:8px 10px;
  box-shadow:0 14px 32px rgba(18,32,58,.18);font-size:6.6px;line-height:1.4;color:#42506A}
.fr-news i{font-style:normal;display:inline-block;font-family:'JetBrains Mono',monospace;font-size:5.2px;
  letter-spacing:.1em;color:#fff;background:linear-gradient(120deg,#2FBF9A,#4C8DF6);
  border-radius:100px;padding:1.5px 7px;margin-bottom:4px}
.fr-news b{color:#12203A}
/* --- фрагмент 10: офис, нижний правый угол --- */
.fr-off{left:66%;bottom:3%;width:23%;z-index:7;animation:frOff var(--T) ease-in-out infinite}
@keyframes frOff{0%,48%{transform:translateY(160%) rotate(6deg);opacity:0}
  55%,70%{transform:none;opacity:1}78%,100%{transform:translateY(160%) rotate(6deg);opacity:0}}
.fr-off .off{background:#fff;border:1px solid #E3E8F0;border-radius:10px;padding:7px 10px;
  box-shadow:0 16px 36px rgba(18,32,58,.2);font-size:6.2px;color:#42506A;display:flex;gap:7px;align-items:center}
.fr-off .pin{width:16px;height:16px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:#E4F7F1;color:#1D8F72;font-size:7px}
.fr-off b{display:block;font-family:'Inter Tight';font-size:7px;color:#12203A}


/* --- фрагмент 11: проверка сертификата в реестре --- */
.fr-vfy{left:23%;top:38%;width:30%;z-index:8;animation:frVfy var(--T) ease-in-out infinite}
@keyframes frVfy{0%,52%{transform:translate(-40%,60%) scale(.9);opacity:0}
  59%,72%{transform:none;opacity:1}80%,100%{transform:translate(-40%,60%) scale(.9);opacity:0}}
.fr-vfy .vfy{background:#fff;border:1px solid #E3E8F0;border-radius:12px;padding:9px 11px;
  box-shadow:0 18px 40px rgba(18,32,58,.22)}
.vfy-crumb{display:inline-flex;align-items:center;gap:5px;border:1px solid #E3E8F0;border-radius:100px;
  padding:2.5px 8px;font-family:'JetBrains Mono',monospace;font-size:5.4px;color:#42506A}
.vfy-crumb i{width:4px;height:4px;border-radius:50%;background:#4C8DF6;font-style:normal}
.vfy-h{font-family:'Inter Tight';font-weight:800;font-size:11px;letter-spacing:-.025em;color:#12203A;margin-top:5px}
.vfy-h span{background:linear-gradient(120deg,#4C8DF6,#2FBF9A);-webkit-background-clip:text;background-clip:text;color:transparent}
.vfy-form{display:flex;gap:5px;align-items:center;margin-top:7px;background:#F6F8FC;border:1px solid #E3E8F0;
  border-radius:100px;padding:3px 3px 3px 9px}
.vfy-in{flex:1;font-family:'Golos Text';font-size:6px;color:#8494AC;white-space:nowrap;overflow:hidden;
  border-right:1.2px solid #4C8DF6;animation:vfyType var(--T) linear infinite}
@keyframes vfyType{0%,58%{max-width:0}64%,72%{max-width:100%}80%,100%{max-width:100%}}
.vfy-btn{background:#3B5BF6;color:#fff;border-radius:100px;padding:3.5px 10px;
  font-family:'Inter Tight';font-weight:600;font-size:6px;flex:none}
.vfy-st{display:flex;gap:4px;align-items:center;margin-top:7px;flex-wrap:wrap}
.vfy-pill{border-radius:100px;padding:2px 7px;font-family:'JetBrains Mono',monospace;font-size:5px;letter-spacing:.06em;
  display:inline-flex;align-items:center;line-height:1}
.vfy-pill.ok{color:#1D8F72;background:#E4F7F1;border:1px solid #BDEBDD;
  animation:vfyOk var(--T) ease-in-out infinite}
/* печать заканчивается на 64% цикла — сразу после неё реестр «отвечает» */
@keyframes vfyOk{0%,64%{background:#E4F7F1;color:#1D8F72;box-shadow:none;transform:none}
  68%,74%{background:#22C55E;color:#fff;border-color:#22C55E;
    box-shadow:0 0 0 3px rgba(34,197,94,.18);transform:scale(1.06)}
  78%,100%{background:#E4F7F1;color:#1D8F72;box-shadow:none;transform:none}}
.vfy-pill.no{color:#B4552D;background:#FDECEC;border:1px solid #F5C9C9}
.vfy-pill.rm{color:#5C6B84;background:#F0F3F8;border:1px solid #E3E8F0}
.vfy-note{font-size:5px;color:#9AA7BC;margin-top:5px}
/* ===== плитка Costely: коллаж фрагментов продукта с 4 сторон ===== */
.shot-cst{background:
  radial-gradient(rgba(24,38,66,.06) 1px,transparent 1px),
  linear-gradient(150deg,#E3EBF6,#EFF4FA);
  background-size:16px 16px,auto}
.cst-fr{position:absolute;--T:20s;box-sizing:border-box}
.cst-fr *{box-sizing:border-box;margin:0}
.cst-grd{background:linear-gradient(120deg,#2FBF9A,#4C8DF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.cst-card{background:#fff;border:1px solid #E2E8F2;border-radius:12px;box-shadow:0 20px 48px rgba(24,38,66,.18)}
.cst-mark{font-family:'JetBrains Mono',monospace;font-size:5.6px;color:#8494AC}
/* --- 1. главная карта пары: слева --- */
.fr-c-main{left:4%;top:8%;width:46%;z-index:2;animation:fcMain var(--T) ease-in-out infinite}
@keyframes fcMain{0%,3%{transform:translateX(-130%) rotate(-5deg);opacity:0}
  10%,88%{transform:none;opacity:1}96%,100%{transform:translateX(-130%) rotate(-5deg);opacity:0}}
.fr-c-main .cst-card{padding:6% 7%}
.cst-vs{display:flex;align-items:center;gap:7px;font-family:'Inter Tight';font-weight:800;
  font-size:12.5px;letter-spacing:-.02em;color:#12203A}
.cst-vs i{font-style:normal;width:13px;height:13px;border-radius:50%;flex:none}
.cst-vs .fa{background:linear-gradient(135deg,#F6C445,#E88B3A)}
.cst-vs .fb{background:linear-gradient(135deg,#4C8DF6,#2FBF9A)}
.cst-vs em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:7px;color:#8494AC}
.cst-sent{font-size:9px;line-height:1.5;color:#42506A;margin-top:7px}
.cst-sent b{font-weight:700}
.cst-fact{display:inline-block;margin-top:7px;border-radius:100px;padding:3.5px 10px;color:#fff;
  font-family:'Inter Tight';font-weight:600;font-size:7.5px;
  background:linear-gradient(120deg,#4C8DF6,#2FBF9A)}
.cst-scale{position:relative;height:8px;display:flex;gap:3px;margin:16px 0 5px}
.cst-scale i{flex:1;border-radius:100px;background:#E7EBF3;animation:cstBand 3.2s ease-in-out infinite alternate}
.cst-scale i:nth-child(1){--bandc:#7ED9A0;animation-delay:0s}
.cst-scale i:nth-child(2){--bandc:#A8DFA4;animation-delay:.2s}
.cst-scale i:nth-child(3){--bandc:#F2C14E;animation-delay:.4s}
.cst-scale i:nth-child(4){--bandc:#EE8A5A;animation-delay:.6s}
.cst-scale i:nth-child(5){--bandc:#E06A4E;animation-delay:.8s}
@keyframes cstBand{0%,25%{background:#E7EBF3}70%,100%{background:var(--bandc)}}
.cst-chip{position:absolute;top:-13px;font-family:'JetBrains Mono',monospace;font-size:6.5px;
  background:#12203A;color:#fff;border-radius:100px;padding:2px 7px;white-space:nowrap;
  animation:cstChipA 6s var(--ease) infinite alternate}
.cst-chip.b{top:auto;bottom:-13px;background:#fff;color:#12203A;border:1px solid #E2E8F2;animation-name:cstChipB}
@keyframes cstChipA{0%,15%{left:34%}60%,100%{left:58%}}
@keyframes cstChipB{0%,15%{left:30%}60%,100%{left:9%}}
.cst-rankline{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:6px;color:#9AA7BC}
/* --- 2. зарплаты по профессиям: справа --- */
.fr-c-jobs{right:3.5%;top:7%;width:31%;z-index:4;animation:fcJobs var(--T) ease-in-out infinite}
@keyframes fcJobs{0%,8%{transform:translateX(150%);opacity:0}
  15%,86%{transform:none;opacity:1}94%,100%{transform:translateX(150%);opacity:0}}
.fr-c-jobs .cst-card{padding:7% 8%}
.cst-h{font-family:'Inter Tight';font-weight:800;font-size:8.5px;letter-spacing:-.01em;color:#12203A;margin-bottom:6px}
.cst-h small{font-weight:400;color:#8494AC;font-size:6px;display:block;margin-top:1px}
.cst-jrow{display:grid;grid-template-columns:38% 1fr 16%;gap:5%;align-items:center;padding:3.5px 0}
.cst-jrow+.cst-jrow{border-top:1px solid #F0F3F8}
.cst-jrow b{font-family:'Inter Tight';font-size:6.8px;font-weight:600;color:#12203A}
.cst-bar{position:relative;height:5.5px;border-radius:100px;background:#EEF2F8;overflow:hidden}
.cst-bar i{position:absolute;inset:0 auto 0 0;border-radius:100px;width:0;
  background:linear-gradient(90deg,#4C8DF6,#2FBF9A);animation:cstBar 3.4s ease-in-out infinite alternate}
.cst-jrow:nth-child(2) .cst-bar i{--w:78%}.cst-jrow:nth-child(3) .cst-bar i{--w:52%;animation-delay:.3s}
.cst-jrow:nth-child(4) .cst-bar i{--w:64%;animation-delay:.6s}
@keyframes cstBar{0%,15%{width:8%}65%,100%{width:var(--w,50%)}}
.cst-dif{justify-self:end;font-family:'JetBrains Mono',monospace;font-size:6.5px;border-radius:100px;padding:1.5px 6px}
.cst-dif.g{color:#1D8F72;background:#E4F7F1;border:1px solid #BDEBDD}
.cst-dif.r{color:#B4552D;background:#FDEFE7;border:1px solid #F2D4C0}
/* --- 3. корзина продуктов: сверху, между --- */
.fr-c-food{left:36%;top:2.5%;width:26%;z-index:5;animation:fcFood var(--T) ease-in-out infinite}
@keyframes fcFood{0%,13%{transform:translateY(-150%) rotate(6deg);opacity:0}
  20%,84%{transform:rotate(-2deg);opacity:1}92%,100%{transform:translateY(-150%) rotate(6deg);opacity:0}}
.fr-c-food .cst-card{padding:6% 8%}
.cst-frow{display:flex;justify-content:space-between;align-items:baseline;font-size:6.8px;color:#42506A;padding:3px 0}
.cst-frow+.cst-frow{border-top:1px solid #F0F3F8}
.cst-frow b{font-family:'JetBrains Mono',monospace;font-size:7px;color:#12203A}
.cst-egg{width:5px;height:5px;border-radius:50%;background:#EE8A5A;display:inline-block;margin-left:4px;
  animation:cstPulse 1.6s ease-in-out infinite}
@keyframes cstPulse{50%{transform:scale(1.6);opacity:.5}}
/* --- 4. энергия EIA: снизу по центру --- */
.fr-c-energy{left:29%;bottom:3.5%;width:33%;z-index:6;animation:fcEnergy var(--T) ease-in-out infinite}
@keyframes fcEnergy{0%,18%{transform:translateY(160%);opacity:0}
  25%,82%{transform:none;opacity:1}90%,100%{transform:translateY(160%);opacity:0}}
.fr-c-energy .cst-card{padding:5.5% 7%}
.cst-erow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:baseline;padding:3px 0;font-size:6.8px;color:#42506A}
.cst-erow+.cst-erow{border-top:1px solid #F0F3F8}
.cst-erow b{font-family:'JetBrains Mono',monospace;font-size:7.5px;color:#12203A}
/* --- 5. пикер сравнения: снизу-слева --- */
.fr-c-pick{left:3%;bottom:4%;width:24%;z-index:5;animation:fcPick var(--T) ease-in-out infinite}
@keyframes fcPick{0%,23%{transform:translate(-60%,120%) rotate(-6deg);opacity:0}
  30%,80%{transform:none;opacity:1}88%,100%{transform:translate(-60%,120%) rotate(-6deg);opacity:0}}
.fr-c-pick .cst-card{padding:7% 8%}
.cst-sel{border:1px solid #E2E8F2;border-radius:8px;background:#F6F8FC;padding:5px 8px;
  display:flex;justify-content:space-between;font-size:7px;color:#12203A;margin-bottom:5px}
.cst-sel span:last-child{color:#8494AC}
.cst-go{border-radius:100px;background:#12203A;color:#fff;text-align:center;padding:5.5px;
  font-family:'Inter Tight';font-weight:600;font-size:7px;position:relative;overflow:hidden}
.cst-go::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-18deg);animation:sheen 2.4s ease-in-out infinite}
/* --- 6. похожие штаты: справа-снизу --- */
.fr-c-sim{right:3%;bottom:5%;width:27%;z-index:4;animation:fcSim var(--T) ease-in-out infinite}
@keyframes fcSim{0%,28%{transform:translateX(150%) rotate(5deg);opacity:0}
  35%,78%{transform:none;opacity:1}86%,100%{transform:translateX(150%) rotate(5deg);opacity:0}}
.fr-c-sim .cst-card{padding:6% 8%}
.cst-srow{display:flex;justify-content:space-between;font-size:6.8px;color:#42506A;padding:2.5px 0}
.cst-srow b{color:#12203A;font-weight:600}
.cst-srow span{font-family:'JetBrains Mono',monospace;font-size:6.3px;color:#1D8F72}
.cst-srow span.r{color:#B4552D}
/* --- 7-9. чипы: ранг, мир, девиз --- */
.fr-c-rank{left:52%;top:40%;z-index:7;animation:fcRank var(--T) ease-in-out infinite}
@keyframes fcRank{0%,33%{transform:translateY(-140%) scale(.7);opacity:0}
  39%,76%{transform:none;opacity:1}84%,100%{transform:translateY(-140%) scale(.7);opacity:0}}
.fr-c-world{left:5%;top:3.5%;z-index:7;animation:fcWorld var(--T) ease-in-out infinite}
@keyframes fcWorld{0%,37%{transform:translateX(-140%) scale(.75);opacity:0}
  43%,74%{transform:none;opacity:1}82%,100%{transform:translateX(-140%) scale(.75);opacity:0}}
.fr-c-motto{left:38%;bottom:1%;z-index:8;animation:fcMotto var(--T) ease-in-out infinite}
@keyframes fcMotto{0%,41%{transform:translateY(150%);opacity:0}
  47%,72%{transform:none;opacity:1}80%,100%{transform:translateY(150%);opacity:0}}
.cst-pill{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #E2E8F2;
  border-radius:100px;padding:4.5px 11px;font-family:'JetBrains Mono',monospace;font-size:6.8px;color:#12203A;
  box-shadow:0 12px 28px rgba(24,38,66,.16);white-space:nowrap}
.cst-pill.dark{background:#12203A;color:#fff;border-color:#12203A;font-family:'Inter Tight';
  font-weight:600;font-size:7.5px;letter-spacing:.01em}
.cst-pill .dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(120deg,#4C8DF6,#2FBF9A);flex:none}
@media(max-width:640px){
  .shot-cst{aspect-ratio:16/12}
  .fr-c-food,.fr-c-pick,.fr-c-sim,.fr-c-rank,.fr-c-world{display:none}
  .fr-c-main{left:3%;top:5%;width:60%}
  .fr-c-jobs{right:3%;top:8%;width:34%}
  .fr-c-energy{left:3%;bottom:3%;width:60%}
  .fr-c-motto{left:auto;right:3%;bottom:4%}
}
@media(prefers-reduced-motion:reduce){
  .cst-fr,.cst-fr .ims-fl,.cst-scale i,.cst-bar i,.cst-chip,.cst-go::after,.cst-egg{animation:none!important;opacity:1!important;transform:none!important}
  .cst-bar i{width:var(--w,50%)}
  .cst-scale i{background:var(--bandc,#E7EBF3)}
}

/* узкая плитка вдвое уже широкой, поэтому её превью выше по пропорции */
.shot-cw{aspect-ratio:16/19.6}
.shot-cw{background:
  radial-gradient(rgba(24,38,66,.05) 1px,transparent 1px),
  linear-gradient(160deg,#E8F1FB,#F2F7FC);
  background-size:16px 16px,auto}
.cw-fr{position:absolute;--T:16s;box-sizing:border-box}
.cw-fr *{box-sizing:border-box;margin:0}
.cw-card{background:#fff;border:1px solid #E4EAF2;border-radius:14px;box-shadow:0 18px 44px rgba(24,38,66,.16)}
.cw-blue{color:#2E90FA}
/* --- заголовок --- */
.cw-head{left:7%;top:4%;right:7%;z-index:3;text-align:center;animation:cwHead var(--T) ease-in-out infinite}
@keyframes cwHead{0%,3%{transform:translateY(-140%);opacity:0}9%,90%{transform:none;opacity:1}97%,100%{transform:translateY(-140%);opacity:0}}
.cw-rel{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #E4EAF2;border-radius:100px;
  padding:3px 10px;font-family:'JetBrains Mono',monospace;font-size:6px;letter-spacing:.1em;color:#5C6B84}
.cw-rel i{width:5px;height:5px;border-radius:50%;background:#4ADE80;font-style:normal}
.cw-h1{font-family:'Inter Tight';font-weight:800;font-size:14.5px;letter-spacing:-.03em;line-height:1.1;color:#12203A;margin-top:6px}
/* --- карта пикера --- */
.cw-pick{left:5%;top:22%;right:5%;z-index:2;animation:cwPick var(--T) ease-in-out infinite}
@keyframes cwPick{0%,6%{transform:translateX(-130%);opacity:0}13%,88%{transform:none;opacity:1}95%,100%{transform:translateX(-130%);opacity:0}}
.cw-pick .cw-card{padding:7% 7% 6%}
.cw-lab{font-family:'JetBrains Mono',monospace;font-size:5.6px;letter-spacing:.1em;color:#9AA7BC;margin-bottom:3px}
.cw-selrow{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.cw-sel{border:1px solid #E4EAF2;border-radius:9px;background:#F4F6FA;padding:6px 8px;
  display:flex;justify-content:space-between;align-items:center;font-family:'Inter Tight';
  font-weight:600;font-size:7.5px;color:#12203A}
.cw-sel span:last-child{color:#9AA7BC;font-weight:400}
.cw-swap{width:18px;height:18px;border-radius:50%;background:#2E90FA;color:#fff;flex:none;
  /* выравниваю по низу строки и приподнимаю на половину разницы — центр круга совпадает с центром селекта */
  align-self:end;margin-bottom:2px;
  display:flex;align-items:center;justify-content:center;font-size:8px;
  box-shadow:0 6px 14px rgba(46,144,250,.4);animation:cwSwap 4s var(--ease) infinite}
@keyframes cwSwap{0%,55%{transform:rotate(0)}70%,100%{transform:rotate(180deg)}}
.cw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}
.cw-stat{border:1px solid #EDF1F7;border-radius:9px;padding:5px 6px}
.cw-stat i{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:4.8px;letter-spacing:.08em;color:#9AA7BC}
.cw-stat b{display:block;font-family:'Inter Tight';font-weight:800;font-size:10.5px;letter-spacing:-.02em;color:#2E90FA;margin-top:2px}
.cw-stat b.g{color:#16A34A}
.cw-stat small{display:block;font-size:4.8px;color:#8494AC;margin-top:1px}
.cw-budget{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:7px;border-top:1px solid #EDF1F7;
  font-size:6.5px;color:#42506A}
.cw-budget b{font-family:'JetBrains Mono',monospace;background:#F4F6FA;border-radius:6px;padding:3px 7px;font-size:7px;color:#12203A}
.cw-budget em{font-style:normal;font-family:'JetBrains Mono',monospace;color:#16A34A;font-weight:700;font-size:7.5px}
.cw-btn{margin-top:8px;border-radius:100px;background:#2E90FA;color:#fff;text-align:center;padding:6.5px;
  font-family:'Inter Tight';font-weight:600;font-size:7.5px;position:relative;overflow:hidden;
  box-shadow:0 10px 22px rgba(46,144,250,.35)}
.cw-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);animation:sheen 2.6s ease-in-out infinite}
/* --- нижний слот: визард → тайлы сравнения --- */
.cw-bot{left:5%;bottom:3%;right:5%;z-index:4;animation:cwWiz var(--T) ease-in-out infinite}
@keyframes cwWiz{0%,11%{transform:translateY(140%) rotate(3deg);opacity:0}
  18%,86%{transform:rotate(-1deg);opacity:1}93%,100%{transform:translateY(140%) rotate(3deg);opacity:0}}
.cw-slot{position:relative}
/* визард виден до 52% цикла, затем уступает место тайлам */
.cw-wizc{animation:cwWizGo var(--T) linear infinite}
@keyframes cwWizGo{0%,52%{opacity:1;transform:none}
  57%,95%{opacity:0;transform:translateY(-12px) scale(.97)}
  98%,100%{opacity:1;transform:none}}
.cw-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;
  animation:cwTilesGo var(--T) linear infinite}
@keyframes cwTilesGo{0%,53%{opacity:0;transform:translateY(14px) scale(.97)}
  59%,90%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(14px) scale(.97)}}
.cw-wizc{padding:6% 7%}
.cw-kick{font-family:'JetBrains Mono',monospace;font-size:5.4px;letter-spacing:.12em;color:#9AA7BC}
.cw-kick b{color:#2E90FA;font-weight:500}
.cw-h2{font-family:'Inter Tight';font-weight:800;font-size:9.5px;letter-spacing:-.02em;color:#12203A;margin-top:3px}
.cw-h2 u{text-decoration:none;box-shadow:inset 0 -3px 0 rgba(46,144,250,.3)}
.cw-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px}
.cw-fld{border:1px solid #E4EAF2;border-radius:7px;background:#fff;padding:4px 6px;font-size:6px;color:#12203A}
.cw-fld i{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:4.4px;letter-spacing:.06em;color:#9AA7BC}
.cw-langs{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.cw-lng{border:1px solid #E4EAF2;border-radius:100px;padding:2.5px 7px;
  font-family:'JetBrains Mono',monospace;font-size:5px;letter-spacing:.06em;color:#5C6B84}
/* ровно три языка «прокликиваются» до ухода карточки */
.cw-lng.k{animation:cwLng var(--T) linear infinite}
.cw-lng.k1{animation-delay:3.4s}.cw-lng.k2{animation-delay:4.9s}.cw-lng.k3{animation-delay:6.4s}
@keyframes cwLng{0%{background:#fff;color:#5C6B84;border-color:#E4EAF2}
  1.5%,7%{background:#2E90FA;color:#fff;border-color:#2E90FA}
  9%,100%{background:#fff;color:#5C6B84;border-color:#E4EAF2}}
.cw-go{margin-top:7px;display:inline-block;border-radius:100px;background:#2E90FA;color:#fff;
  padding:5px 13px;font-family:'Inter Tight';font-weight:600;font-size:6.5px;
  box-shadow:0 8px 18px rgba(46,144,250,.35)}
.cw-disc{font-size:4.8px;color:#9AA7BC;margin-top:5px}
.cw-disc u{color:#2E90FA;text-decoration:none}
/* --- три тайла сравнения: точная копия --- */
.ct{background:#fff;border:1px solid #E4EAF2;border-radius:11px;padding:6px 7px;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 10px 24px rgba(24,38,66,.1)}
.ct-h{display:flex;justify-content:space-between;align-items:center;gap:4px}
.ct-h b{font-family:'Inter Tight';font-weight:800;font-size:6.4px;letter-spacing:-.01em;color:#12203A;white-space:nowrap}
.ct-h b span{font-weight:400;color:#9AA7BC;font-size:4.4px}
.ct-bdg{border-radius:100px;padding:1.5px 5px;color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:3.9px;white-space:nowrap;flex:none}
.ct-bdg.bb{background:#3B9DF8}.ct-bdg.bv{background:#A78BFA}.ct-bdg.bg{background:#34D399}
.ct-v{font-family:'Inter Tight';font-weight:700;font-size:5.6px;line-height:1.3;color:#12203A;margin-top:3px}
.ct-v em{font-style:normal;color:#16A34A}
.ct-sc{margin-top:4px;display:flex;flex-direction:column;align-items:center;gap:2px}
.ct-cap{font-family:'JetBrains Mono',monospace;font-size:3.8px;color:#9AA7BC}
.ct-chip{border-radius:6px;padding:1.5px 6px;font-family:'Inter Tight';font-weight:700;font-size:6px;color:#fff;
  animation:ctChip var(--T) ease-in-out infinite}
.ct-chip.cb{background:linear-gradient(135deg,#3B82F6,#5FA8FA)}
.ct-chip.cv{background:linear-gradient(135deg,#8B5CF6,#A78BFA)}
.ct-chip.cg{background:linear-gradient(135deg,#10B981,#34D399)}
@keyframes ctChip{0%,56%{transform:translateY(4px);opacity:0}62%,90%{transform:none;opacity:1}95%,100%{opacity:0}}
.ct-bands{position:relative;display:flex;gap:2px;width:100%;height:5px;margin:1px 0}
.ct-bands i{flex:1;border-radius:100px;background:#E7EBF3;animation:ctBand var(--T) ease-in-out infinite}
.ct-bands i:nth-child(1){animation-delay:.1s}.ct-bands i:nth-child(2){animation-delay:.2s}
.ct-bands i:nth-child(3){animation-delay:.3s}.ct-bands i:nth-child(4){animation-delay:.4s}
.ct-bands i:nth-child(5){animation-delay:.5s}
@keyframes ctBand{0%,57%{background:#E7EBF3}64%,90%{background:var(--bc,#E7EBF3)}95%,100%{background:#E7EBF3}}
/* точки штатов на шкале */
.ct-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;
  border:1.5px solid #fff;box-shadow:0 1px 3px rgba(24,38,66,.4);
  animation:ctDot var(--T) ease-in-out infinite}
/* пилюли не стопкой: верхняя левее, нижняя правее */
.ct-sc>:nth-child(1),.ct-sc>:nth-child(2){align-self:flex-start;margin-left:12%}
.ct-sc>:nth-child(4),.ct-sc>:nth-child(5){align-self:flex-end;margin-right:12%}
.ct-dot.n{background:#1E293B}
.ct-dot.a{background:#3B9DF8}
/* подпись-легенда и пилюля источника */
.ct-note{margin-top:4px;border-top:1px solid #F0F3F8;padding-top:3px;
  font-family:'Golos Text';font-size:3.9px;color:#9AA7BC;line-height:1.4}
.ct-src{margin-top:2px;display:flex}
.ct-pill{border:1px solid #E4EAF2;border-radius:100px;padding:1px 5px;
  font-family:'JetBrains Mono',monospace;font-size:3.6px;letter-spacing:.06em;color:#8494AC;white-space:nowrap}
@media(max-width:640px){
  .shot-cw{aspect-ratio:16/13}
  .cw-h1{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .cw-fr,.cw-swap,.cw-btn::after,.cw-lng{animation:none!important;opacity:1!important;transform:none!important}
}

/* 1) стрелки в круглых кнопках строго по центру */
.q-btn{padding:0;line-height:1;display:flex;align-items:center;justify-content:center}
.tile-foot .go,.card .glyph{line-height:1}
/* 2) отступы внутри тёмного блока */
.local>.wrap{padding-left:clamp(30px,5vw,76px);padding-right:clamp(30px,5vw,76px)}
/* ===== модальное окно заявки ===== */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.modal.open{opacity:1;pointer-events:auto}
.modal-back{position:absolute;inset:0;background:rgba(11,11,15,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal-card{
  position:relative;width:min(560px,100%);max-height:92svh;overflow:auto;
  background:#fff;border-radius:30px;padding:clamp(28px,4vw,44px);
  box-shadow:0 60px 140px -30px rgba(11,11,25,.5);
  transform:translateY(26px) scale(.97);transition:transform .5s var(--ease);
}
.modal.open .modal-card{transform:none}
.modal-x{
  position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:#fff;cursor:pointer;font-size:15px;color:var(--muted);
  display:flex;align-items:center;justify-content:center;padding:0;line-height:1;
  transition:all .35s var(--ease);
}
.modal-x:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(90deg)}
.m-title{font-family:'Inter Tight';font-weight:800;font-size:clamp(26px,3.4vw,34px);
  letter-spacing:-.03em;line-height:1.15;text-align:center;margin-bottom:28px}
.m-title a{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  border-bottom:2px solid var(--indigo)}
.m-step{display:flex;flex-direction:column;gap:14px}
.m-in{
  width:100%;border:1.5px solid var(--line);border-radius:18px;background:#F5F5F8;
  padding:16px 20px;font-family:'Golos Text';font-size:15.5px;color:var(--ink);
  outline:none;transition:all .3s;resize:vertical;
}
.m-in::placeholder{color:#9C9CA8}
.m-in:focus{border-color:var(--indigo);background:#fff;box-shadow:0 0 0 4px rgba(79,70,229,.1)}
.m-in.err{border-color:#EF4444;box-shadow:0 0 0 4px rgba(239,68,68,.08)}
.m-file{
  display:flex;align-items:center;gap:10px;border:1.5px dashed var(--line);border-radius:100px;
  padding:14px 22px;cursor:pointer;color:var(--muted);font-size:15px;transition:all .3s;
}
.m-file:hover{border-color:var(--indigo);color:var(--ink)}
.m-cta{
  width:100%;border:0;border-radius:100px;background:var(--ink);color:#fff;cursor:pointer;
  padding:17px;font-family:'Inter Tight';font-weight:600;font-size:16px;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .35s var(--ease),box-shadow .35s;position:relative;overflow:hidden;
}
.m-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(11,11,15,.28)}
.m-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);animation:sheen 2.8s ease-in-out infinite}
.m-agree{display:flex;gap:10px;align-items:center;justify-content:center;font-size:13.5px;color:var(--muted)}
.m-agree a{text-decoration:underline}
.m-agree input{accent-color:var(--indigo);width:17px;height:17px}
.m-q{font-family:'Inter Tight';font-weight:600;font-size:15px;margin-top:6px}
.m-chips{display:flex;gap:10px;flex-wrap:wrap}
.m-chips button{
  border:1.5px solid var(--line);background:#fff;border-radius:100px;padding:10px 20px;
  font-family:'Golos Text';font-size:14.5px;color:var(--ink);cursor:pointer;transition:all .3s;
}
.m-chips button:hover{border-color:#B9B9CC}
.m-chips button.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.m-note{text-align:center;font-size:13.5px;color:#1FA84F;min-height:18px}
.m-steps{display:flex;gap:22px;justify-content:center;margin-top:26px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;color:#B4B4C2}
.m-steps span{padding-bottom:6px;border-bottom:2px solid transparent}
.m-steps span.on{color:var(--ink);border-color:var(--ink)}

/* стрелки в кружках: одинаковый размер, ровный центр, единая позиция */
.tile-foot{align-items:center}
.tile-foot .go{flex:none;margin-left:auto;width:38px;height:38px;box-sizing:border-box;
  /* глиф стрелки в шрифте сидит выше базовой линии — компенсирую отступом, не transform:
     transform занят ховером (rotate -45deg) */
  padding:2px 0 0;
  display:flex;align-items:center;justify-content:center;line-height:1;font-size:15px}
.work-grid .tile .tile-foot{min-height:86px}

/* ===== эффектное появление заголовков секций ===== */
.sec-head .eyebrow{opacity:0;letter-spacing:.34em;transition:opacity .9s var(--ease),letter-spacing 1.1s var(--ease)}
.sec-head.in .eyebrow{opacity:1;letter-spacing:.14em}
.sec-head .eyebrow::before{width:0;transition:width .9s var(--ease) .2s}
.sec-head.in .eyebrow::before{width:22px}
.sec-head h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.sec-head h2 .wi{display:inline-block;transform:translateY(118%) rotate(6deg);transform-origin:left bottom;
  transition:transform .95s var(--ease);transition-delay:calc(.09s * var(--i,0))}
.sec-head.in h2 .wi{transform:none}
.sec-head h2 .wi.gw{background:var(--grad);background-size:240% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:transform .95s var(--ease),background-position 1.4s var(--ease);
  transition-delay:calc(.09s * var(--i,0)),calc(.09s * var(--i,0) + .55s)}
.sec-head.in h2 .wi.gw{background-position:0 0}
.sec-head p{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s}
.sec-head.in p{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .sec-head .eyebrow,.sec-head h2 .wi,.sec-head p{transition:none;opacity:1;transform:none;letter-spacing:.14em}
  .sec-head h2 .wi.gw{background-position:0 0}
}

/* 1. шапка ленты видео: подписи больше не наезжают друг на друга */
.vf-out-h{gap:8px;padding:0 6%}
.vf-out-h span,.vf-out-h b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){
  .vf-out-h b{display:none}
  /* 2. плитка видео-фабрики: на узком экране только граф во всю ширину, лента видео скрыта */
  .vf-out{display:none}
  /* растягиваю схему по горизонтали, чтобы узлы дошли до правого края;
     сами узлы и бейджи контр-масштабирую, иначе иконки поплывут */
  /* расчёт: холст ≈280px, узел 30px → центр крайнего узла (87%) не дальше 265px.
     при left3%/right1% предел растяжения ≈1.08, берём 1.06 с запасом */
  .vf-graph{left:3%;right:1%;width:auto;top:6%;height:88%;
    transform:scaleX(1.06);transform-origin:left center}
  .gn{transform:translate(-50%,-50%) scaleX(.943)}
  .gn b{width:30px;height:30px;border-radius:9px}
  .gn b svg{width:14px;height:14px}
  /* бейджи — строго над узлом, а не сбоку: иначе наезжают на соседей */
  .gn .cnt{font-size:7.5px;padding:1.5px 5px;left:50%;top:-15px;transform:translateX(-50%)}
  .gn .cnt.show{transform:translateX(-50%)}
  .vf-top{height:16%;padding:0 5%}
  .vf-brand{font-size:8.5px;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vf-run{font-size:9px;padding:5px 9px;flex:none}
  .vf-log{height:14%;font-size:8px;padding:0 5%}
  /* 3. ссылка «Explore …»: стрелка не наезжает на текст */
  .more{padding:12px 16px;gap:8px;text-align:left;justify-content:space-between}
  .more .arr{flex:none}
  /* 4. кнопка с адресом почты: не вылезает за карточку */
  .cta .btn,.btn{max-width:100%;padding:13px 18px;font-size:13.5px}
  /* адрес почты не рвём посередине слова — он помещается целиком */
  .cta .btn{white-space:nowrap;word-break:normal;text-align:center}
}

/* ===== выпадающее меню услуг ===== */
.has-drop{position:relative}
.drop-t{display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:color .25s}
.drop-t::after{content:"";width:5px;height:5px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);
  transition:transform .3s var(--ease)}
.has-drop:hover .drop-t,.has-drop:focus-within .drop-t{color:var(--ink)}
.has-drop:hover .drop-t::after,.has-drop:focus-within .drop-t::after{transform:rotate(225deg) translateY(-2px)}
.drop{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);margin-top:12px;
  min-width:250px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;
  box-shadow:0 28px 70px -22px rgba(20,20,50,.28);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  z-index:60}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.drop a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;
  color:var(--ink);font-size:14.5px;transition:background .25s}
.drop a:hover{background:#F4F4F8}
.drop a small{font-size:12px;color:var(--muted)}
@media(max-width:820px){.has-drop{display:none}}


/* ===== из local-ai.html ===== */

/* браузерный мокап (websites) */
.browser-wrap{position:relative;width:min(880px,92%);margin:54px auto 0;
  opacity:0;animation:fadeUp 1.2s var(--ease) .8s forwards}
.browser{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;text-align:left;
  box-shadow:0 50px 110px -30px rgba(30,30,70,.25)}
.b-bar{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line)}
.b-url{flex:1;max-width:300px;margin:0 auto;background:#F2F2F7;border-radius:100px;padding:6px 16px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted);text-align:center}
.b-body{padding:26px;display:grid;gap:16px}
.b-hero{height:150px;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(79,70,229,.14),rgba(139,92,246,.1),rgba(6,182,212,.14));
  background-size:200% 100%;animation:shimmer 8s linear infinite}
.b-hero i{position:absolute;left:26px;border-radius:100px;background:rgba(11,11,15,.85)}
.b-hero i:nth-child(1){top:44px;width:38%;height:16px}
.b-hero i:nth-child(2){top:72px;width:26%;height:16px}
.b-hero i:nth-child(3){top:104px;width:96px;height:26px;background:var(--grad)}
.b-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.b-card{height:88px;border-radius:12px;background:#F7F7FB;border:1px solid var(--line)}
.browser-wrap .chip{animation:bob 5s ease-in-out infinite;transform:none}
.browser-wrap .chip.b1{top:-16px;right:-30px}
.browser-wrap .chip.b2{bottom:-16px;left:-34px;animation-delay:1.2s}
@media(max-width:700px){.browser-wrap .chip{display:none}}

/* ===== из automation.html ===== */

/* слайды воркфлоу */
.flow-slides{display:grid;min-height:330px}
.flow-slide{grid-area:1/1;opacity:0;transform:translateX(26px);pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.flow-slide.on{opacity:1;transform:none;pointer-events:auto}
.flow-dots{display:flex;gap:10px;margin-top:22px;justify-content:center}
.flow-dots .q-dot{width:30px}
.flow-dots .q-dot.on{width:52px}
/* многоуровневые схемы */
.flow-slide .node .nb{width:52px;height:52px;border-radius:15px}
.flow-slide .node .nb svg{width:22px;height:22px}
.flow-slide .node{font-size:12px;gap:6px}
.lvl{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center}
.lvl.one{grid-template-columns:1fr}
.node .out{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.04em;
  color:var(--muted);background:#F5F5FA;border:1px solid var(--line);
  border-radius:100px;padding:3px 9px;margin-top:2px;
}
.node.hot .out{color:#1FA84F;background:#E9FBEF;border-color:#CBEFD6}
/* svg-связи: сходящиеся и расходящиеся потоки */
.brg{display:block;width:100%;height:38px;overflow:visible}
.brg path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.brg .rail{stroke:#E7E7F0}
.brg .pulse{stroke:url(#wg);stroke-dasharray:12 150;animation:flowdash 1.7s linear infinite}
.brg .pulse.d2{animation-delay:.55s}
.brg .pulse.d3{animation-delay:1.1s}
@keyframes flowdash{to{stroke-dashoffset:-162}}
@media(prefers-reduced-motion:reduce){.brg .pulse{animation:none;stroke-dasharray:none;opacity:.35}}
.lvl.two{grid-template-columns:1fr 1fr}
.brg .loopback{stroke:#F59E0B;stroke-dasharray:5 7;animation:loopdash 1.4s linear infinite reverse}
@keyframes loopdash{to{stroke-dashoffset:-120}}
.node.fin .nb{background:#E9FBEF;border-color:#CBEFD6}
.node.fin .nb svg{stroke:#1FA84F}
/* ===== превью «видео-фабрика»: мини-n8n с живым прогоном ===== */
.tile.full{grid-column:span 6}
.shot-vf{background:linear-gradient(150deg,#0B0B13,#12121F)}
.vf *{position:absolute;box-sizing:border-box}
/* верхняя панель n8n */
.vf-top{left:0;right:0;top:0;height:13%;display:flex;align-items:center;justify-content:space-between;
  padding:0 3%;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.vf-brand{position:relative;display:flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:#B9B9CE;letter-spacing:.04em}
.vf-brand i{position:relative;width:20px;height:20px;border-radius:6px;background:#EA4B35;
  display:grid;place-items:center;font-style:normal;font-weight:700;font-size:10px;color:#fff}
.vf-run{position:relative;display:flex;align-items:center;gap:7px;
  background:#EA4B35;color:#fff;border-radius:8px;padding:6px 14px;
  font-family:'Inter Tight';font-weight:600;font-size:11.5px;transition:transform .2s}
.vf-run.press{transform:scale(.92);filter:brightness(1.2)}
/* сетка-фон холста */
.vf-canvas{left:0;right:0;top:13%;bottom:12%;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:14px 14px}

/* связи */
.gw{left:0;top:0;width:100%;height:100%;overflow:visible}
.gw path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.6;vector-effect:non-scaling-stroke;transition:stroke .3s}
.gw path.on{stroke:url(#vfg);stroke-dasharray:6 8;animation:vfWmove .55s linear infinite}
.gw path.loop{stroke-dasharray:3 5}
.gw path.loop.on{stroke:#F59E0B;animation-direction:reverse}
@keyframes vfWmove{to{stroke-dashoffset:-14}}
/* узлы n8n */
.gn{transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;width:auto}
.gn b{position:relative;width:36px;height:36px;border-radius:10px;background:#191928;
  border:1.5px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:all .35s}
.gn b svg{width:16px;height:16px;stroke:#A9A9C4;fill:none;stroke-width:1.8;transition:stroke .3s}
.gn.live b{border-color:#818CF8;background:#1E1E36;box-shadow:0 0 16px rgba(99,102,241,.55)}
.gn.live b svg{stroke:#C7D2FE}
.gn.live b::after{content:"";position:absolute;inset:-6px;border-radius:13px;
  border:2px solid transparent;border-top-color:#818CF8;animation:vfSpin .65s linear infinite}
.gn.done b{border-color:#34D399;background:rgba(52,211,153,.1)}
.gn.done b svg{stroke:#6EE7B7}
.gn.done b::before{content:"✓";position:absolute;top:-7px;right:-7px;width:15px;height:15px;border-radius:50%;
  background:#22C55E;color:#fff;font-size:9px;display:grid;place-items:center;font-family:'Inter Tight'}
.gn span{position:relative;font-family:'JetBrains Mono',monospace;font-size:9px;color:#8F8FA8;white-space:nowrap}
.gn .cnt{top:-9px;left:calc(50% + 12px);background:#4F46E5;color:#fff;border-radius:100px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;padding:2px 6px;white-space:nowrap;
  opacity:0;transform:translateY(4px);transition:all .35s}
.gn .cnt.show{opacity:1;transform:none}
@keyframes vfSpin{to{transform:rotate(360deg)}}
/* 3D-аккордеон карточек: новые выскакивают спереди */
.vf-feed{left:5%;right:3%;top:15%;bottom:5%;perspective:640px}
.rframe{position:absolute;left:0;top:24%;width:66%;height:52%;border-radius:10px;overflow:hidden;
  background:#0A0A12;border:1px solid rgba(255,255,255,.14);
  transform-origin:left center;box-shadow:-14px 16px 30px rgba(0,0,0,.55);
  transition:transform .5s var(--ease),opacity .5s,filter .5s}
.rframe.senter{transform:translateX(-34%) rotateY(-48deg) scale(1.12);opacity:0}
.rframe.s0{transform:translateX(0) rotateY(-16deg) scale(1);z-index:7;filter:brightness(1)}
.rframe.s1{transform:translateX(24%) rotateY(-16deg) scale(.92);z-index:6;filter:brightness(.82)}
.rframe.s2{transform:translateX(44%) rotateY(-16deg) scale(.85);z-index:5;filter:brightness(.66)}
.rframe.s3{transform:translateX(60%) rotateY(-16deg) scale(.79);z-index:4;filter:brightness(.52)}
.rframe.s4{transform:translateX(73%) rotateY(-16deg) scale(.74);z-index:3;filter:brightness(.4)}
.rframe.sout{transform:translateX(84%) rotateY(-16deg) scale(.7);z-index:2;opacity:0;filter:brightness(.3)}
/* «приземление» готового видео */
.rframe.pop{animation:vfPop .5s var(--ease)}
@keyframes vfPop{0%{filter:brightness(1.6)}45%{transform:translateX(0) rotateY(-16deg) scale(1.06)}100%{transform:translateX(0) rotateY(-16deg) scale(1)}}
.rframe .art{position:absolute;inset:0;opacity:0;transition:opacity .7s,filter .7s;filter:blur(8px) hue-rotate(var(--h,0deg))}
.rframe.playing .art{opacity:1;filter:blur(0) hue-rotate(var(--h,0deg))}
.rframe .art i{position:absolute;border-radius:50%}
.rframe .art .b1{width:90%;height:120%;left:-25%;top:-30%;filter:blur(12px);
  background:radial-gradient(circle,rgba(79,70,229,.85),transparent 65%);
  animation:vfB1 6s ease-in-out infinite alternate;animation-delay:var(--d1,0s)}
.rframe .art .b2{width:85%;height:115%;right:-22%;bottom:-25%;filter:blur(12px);
  background:radial-gradient(circle,rgba(6,182,212,.75),transparent 65%);
  animation:vfB2 7s ease-in-out infinite alternate;animation-delay:var(--d2,0s)}
@keyframes vfB1{to{transform:translate(30%,24%) scale(1.3)}}
@keyframes vfB2{to{transform:translate(-28%,-20%) scale(1.2)}}
.rframe .art .wave{left:-25%;right:-25%;bottom:8%;height:40%;border-radius:50%;filter:blur(4px);
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.6),rgba(6,182,212,.6),transparent);
  animation:vfWave 4s ease-in-out infinite alternate;animation-delay:var(--d1,0s)}
@keyframes vfWave{from{transform:translateX(-9%) rotate(-3deg)}to{transform:translateX(9%) rotate(3deg)}}
/* закат в горах */
.sc-sun{background:linear-gradient(180deg,#F9C978 0%,#F2825E 55%,#6E4E9E 100%)}
.sc-sun .sun{position:absolute;left:24%;top:12%;width:24%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#FFF3C4,#FFCE6B);box-shadow:0 0 20px 6px rgba(255,220,140,.7);
  animation:vfSunset 9s ease-in-out infinite alternate}
@keyframes vfSunset{to{transform:translateY(120%)}}
.sc-sun .mt{position:absolute;bottom:-2%;width:70%;height:55%;background:#3A2B58;
  clip-path:polygon(0 100%,28% 18%,55% 100%)}
.sc-sun .mt.m2{left:38%;height:44%;background:#2C2046;
  clip-path:polygon(0 100%,45% 10%,100% 100%)}
.sc-sun .bd{position:absolute;top:22%;left:70%;animation:vfBird 8s linear infinite}
.sc-sun .bd.b2{top:32%;left:84%;animation-duration:11s;animation-delay:-4s;transform:scale(.7)}
@keyframes vfBird{from{transform:translateX(30%)}to{transform:translateX(-420%)}}
/* море */
.sc-sea{background:linear-gradient(180deg,#8FD0EA 52%,#2E7DA6 52%)}
.sc-sea .sun2{position:absolute;right:10%;top:10%;width:16%;aspect-ratio:1;border-radius:50%;
  background:#FFF3C4;box-shadow:0 0 14px 4px rgba(255,240,190,.8)}
.sc-sea .wv{position:absolute;left:-30%;right:-30%;height:18%;border-radius:50%;
  background:rgba(255,255,255,.35);filter:blur(1px)}
.sc-sea .wv.v1{bottom:26%;animation:vfWv 4s ease-in-out infinite alternate}
.sc-sea .wv.v2{bottom:10%;background:rgba(255,255,255,.22);animation:vfWv 5.5s ease-in-out infinite alternate-reverse}
@keyframes vfWv{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.sc-sea .bt{position:absolute;left:26%;bottom:40%;width:14%;height:16%;
  animation:vfBoat 4.5s ease-in-out infinite alternate}
@keyframes vfBoat{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(14%) rotate(3deg)}}
.sc-sea .bt::before{content:"";position:absolute;bottom:0;left:0;right:0;height:34%;
  background:#7A4B2B;border-radius:0 0 40% 40%}
.sc-sea .bt::after{content:"";position:absolute;bottom:34%;left:22%;
  border-left:14px solid transparent;border-bottom:16px solid #F5F0E6}
/* лес в сумерках: туман и светлячки */
.sc-forest{background:linear-gradient(180deg,#28455C 0%,#173B33 60%,#0E2B23 100%)}
.sc-forest .tr{position:absolute;bottom:0;background:#0B241C;
  clip-path:polygon(50% 0,78% 45%,68% 45%,92% 100%,8% 100%,32% 45%,22% 45%)}
.sc-forest .tr.t1{left:4%;width:22%;height:74%}
.sc-forest .tr.t2{left:26%;width:18%;height:56%;background:#0F2E24}
.sc-forest .tr.t3{left:48%;width:24%;height:82%}
.sc-forest .tr.t4{left:74%;width:19%;height:60%;background:#0F2E24}
.sc-forest .mist{position:absolute;left:-30%;right:-30%;bottom:18%;height:22%;border-radius:50%;
  background:rgba(214,230,238,.28);filter:blur(6px);
  animation:vfMist 9s ease-in-out infinite alternate}
@keyframes vfMist{from{transform:translateX(-7%)}to{transform:translateX(7%)}}
.sc-forest .ff{position:absolute;left:30%;top:46%;width:3px;height:3px;border-radius:50%;background:#FFE79A;
  box-shadow:34px -14px 0 #FFE79A,70px 6px 0 rgba(255,231,154,.8),105px -20px 0 #FFE79A,
             140px 2px 0 rgba(255,231,154,.7);
  animation:vfFf 2.6s ease-in-out infinite alternate}
@keyframes vfFf{from{opacity:.25;transform:translateY(0)}to{opacity:1;transform:translateY(-8px)}}
/* северное сияние над холмами */
.sc-aurora{background:linear-gradient(180deg,#060B22,#0E1638 70%,#101C2E 100%)}
.sc-aurora .st{position:absolute;top:10%;left:10%;width:2px;height:2px;border-radius:50%;background:#fff;
  box-shadow:28px 12px 0 #fff,62px 3px 0 rgba(255,255,255,.65),98px 16px 0 #fff,
             134px 6px 0 rgba(255,255,255,.75),168px 1px 0 #fff,198px 12px 0 rgba(255,255,255,.6);
  animation:vfTwinkle 2.4s steps(2) infinite}
@keyframes vfTwinkle{50%{opacity:.4}}
.sc-aurora .ar{position:absolute;left:-14%;right:-14%;top:6%;height:46%;filter:blur(8px);opacity:.85;
  background:linear-gradient(100deg,transparent,rgba(52,211,153,.55) 30%,rgba(129,140,248,.5) 55%,rgba(6,182,212,.45) 75%,transparent);
  border-radius:50%;
  animation:vfAur 7s ease-in-out infinite alternate}
@keyframes vfAur{from{transform:translateX(-6%) skewX(-8deg) scaleY(1)}to{transform:translateX(6%) skewX(8deg) scaleY(1.25)}}
.sc-aurora .hl{position:absolute;bottom:-4%;left:-6%;width:70%;height:34%;border-radius:50%;background:#0A1424}
.sc-aurora .hl.h2{left:44%;width:72%;height:28%;background:#0D1A2C}
/* луга: холмы и облака */
.sc-meadow{background:linear-gradient(180deg,#9BD1F0,#D8ECF8 60%)}
.sc-meadow .sun3{position:absolute;left:14%;top:12%;width:18%;aspect-ratio:1;border-radius:50%;
  background:#FFF0B8;box-shadow:0 0 16px 5px rgba(255,238,170,.8)}
.sc-meadow .cl{position:absolute;background:#fff;border-radius:50%;filter:blur(3px);opacity:.95;
  animation:vfClMove linear infinite}
.sc-meadow .cl.c1{width:30%;height:22%;top:12%;animation-duration:13s}
.sc-meadow .cl.c2{width:20%;height:16%;top:34%;animation-duration:18s;animation-delay:-8s;opacity:.8}
@keyframes vfClMove{from{left:105%}to{left:-40%}}
.sc-meadow .gh{position:absolute;bottom:-16%;left:-14%;width:82%;height:52%;border-radius:50%;background:#6FBF6A}
.sc-meadow .gh.g2{left:42%;width:86%;height:44%;background:#5AAE57}
.sc-meadow .fl{position:absolute;bottom:26%;left:24%;width:4px;height:4px;border-radius:50%;background:#F7D154;
  box-shadow:30px 6px 0 #F0899B,64px -2px 0 #F7D154,96px 8px 0 #F0899B;
  animation:vfFlSway 3s ease-in-out infinite alternate}
@keyframes vfFlSway{to{transform:translateX(3px)}}
/* состояние рендера у верхнего кадра */
.rframe .noise{position:absolute;inset:0;opacity:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),
             repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 5px);
  animation:vfNoiseJit .22s steps(3) infinite}
.rframe.rendering .noise{opacity:.5}
@keyframes vfNoiseJit{50%{transform:translate(1px,-1px)}}
.rframe .scan{position:absolute;left:0;right:0;height:26%;top:-30%;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(129,140,248,.45),rgba(6,182,212,.6),transparent)}
.rframe.rendering .scan{opacity:1;animation:vfScan 1.4s linear infinite}
@keyframes vfScan{to{top:108%}}
.rframe .pct{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:#A5B4FC}
.rframe.rendering .pct{opacity:1}
.rframe .dur{position:absolute;right:5%;bottom:8%;background:rgba(0,0,0,.55);border-radius:5px;
  padding:2px 6px;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:#E4E4F0;
  opacity:0;transition:opacity .4s}
.rframe.playing .dur{opacity:1}
.rframe .ply{position:absolute;left:6%;bottom:8%;width:0;height:0;opacity:0;transition:opacity .4s;
  border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.rframe.playing .ply{opacity:.95}
.rframe .okc{position:absolute;right:5%;top:8%;background:rgba(34,197,94,.2);border:1px solid rgba(110,231,183,.5);
  color:#6EE7B7;border-radius:100px;padding:1px 7px;font-family:'JetBrains Mono',monospace;font-size:8.5px;
  opacity:0;transform:translateY(-4px);transition:all .4s}
.rframe.saved .okc{opacity:1;transform:none}
/* ===== реальные ролики в ленте конвейера ===== */
.rframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s,filter .7s;filter:blur(8px)}
.rframe.playing video{opacity:1;filter:none}
.rframe.rendering video{opacity:.12;filter:blur(10px) grayscale(.4)}

/* доигравший ролик: стоп-кадр без индикатора воспроизведения */
.rframe.done-clip .ply{opacity:0}


/* ===== из case-video-factory.html ===== */

/* ===== страница кейса ===== */
.case-hero{min-height:auto;padding:150px 0 70px}
.case-hero .wrap{text-align:left}
.case-kicker{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.case-kicker .k-tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:100px;
  padding:6px 14px;background:#fff}
.case-hero h1{font-size:clamp(38px,5.6vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1.04}
.case-hero .lead{max-width:640px;margin-top:22px;font-size:19px;color:var(--muted)}
/* большая многоуровневая схема с живым прогоном */
.pipe{width:min(760px,94%);margin:64px auto 0;background:#fff;border:1px solid var(--line);
  border-radius:26px;padding:38px clamp(22px,4vw,46px) 26px;text-align:left;
  box-shadow:0 50px 110px -30px rgba(30,30,70,.22)}
.pipe .f-head{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;
  font-size:12px;color:var(--muted);margin-bottom:28px}
.pipe .f-head b{color:#28C840;font-weight:500}
.pipe .node{font-size:12px;gap:6px}
.pipe .node .nb{width:54px;height:54px;border-radius:15px;transition:all .45s var(--ease);position:relative}
.pipe .node .nb svg{width:22px;height:22px}
.pipe .node.live .nb{border-color:var(--indigo);background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(6,182,212,.12));
  box-shadow:0 0 0 5px rgba(79,70,229,.12),0 10px 26px -6px rgba(79,70,229,.35)}
.pipe .node.done .nb{border-color:#CBEFD6;background:#E9FBEF}
.pipe .node.done .nb::after{content:"✓";position:absolute;top:-7px;right:-7px;width:18px;height:18px;
  border-radius:50%;background:#28C840;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center}
.pipe .node .st{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--indigo);min-height:13px}
.pipe .lvl,.pipe .lvl.two,.pipe .lvl.one{margin:0}
/* цикл Wait ↔ Get Status */
.loop-row{display:grid;grid-template-columns:1fr 96px 1fr;align-items:start;justify-items:center}
.cycle{width:96px;height:56px;margin-top:14px}
.cycle path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.cycle .rail{stroke:#E7E7F0}
.cycle .fwd{stroke:url(#wg);stroke-dasharray:10 90;animation:flowdash 1.5s linear infinite}
.cycle .back{stroke:#F59E0B;stroke-dasharray:5 7;animation:loopdash 1.3s linear infinite reverse}
.pipe .runlog{margin-top:30px;border-top:1px solid var(--line);padding-top:16px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:2;color:var(--muted);min-height:96px}
.pipe .runlog .ok{color:#1FA84F}.pipe .runlog .run{color:var(--indigo)}.pipe .runlog .warn{color:#F59E0B}
/* подробные шаги */
.case-steps{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.case-steps{grid-template-columns:1fr}}
.cstep{border:1px solid var(--line);border-radius:22px;background:#fff;padding:28px 28px 26px;
  transition:transform .5s var(--ease),box-shadow .5s}
.cstep:hover{transform:translateY(-5px);box-shadow:0 22px 54px -20px rgba(30,30,60,.16)}
.cstep .cn{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cstep h3{font-family:'Inter Tight';font-size:19px;font-weight:700;letter-spacing:-.015em;margin:10px 0 8px}
.cstep p{font-size:15px;color:var(--muted)}
.stack-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.stack-row span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:7px 15px;background:#fff}


/* ===== из apps.html ===== */

/* ===== плитки Tiersi (coming soon) и «ваш проект» ===== */
.shot-ti{background:linear-gradient(160deg,#F7F8FC,#EFF2F8)}
.ti *{box-sizing:border-box;margin:0}
/* шапка сайта */
.ti-nav{position:absolute;left:0;right:0;top:0;height:13%;display:flex;align-items:center;gap:7px;
  padding:0 5%;background:#fff;border-bottom:1px solid #ECEFF5}
.ti-logo{display:flex;align-items:center;gap:5px;font-family:'Inter Tight';font-weight:800;
  font-size:9px;color:#12203A;letter-spacing:-.02em}
.ti-logo i{width:7px;height:7px;border-radius:50%;background:#4C8DF6;font-style:normal}
.ti-beta{border:1px solid #E3E8F0;border-radius:100px;padding:1px 6px;
  font-family:'JetBrains Mono',monospace;font-size:5px;color:#8494AC}
.ti-links{margin-left:auto;display:flex;gap:9px;font-size:6px;color:#5C6B84}
.ti-cta{background:#3B82F6;color:#fff;border-radius:100px;padding:3.5px 9px;
  font-family:'Inter Tight';font-weight:600;font-size:6px}
/* левая колонка */
.ti-left{position:absolute;left:5%;top:22%;width:40%}
.ti-kick{font-family:'JetBrains Mono',monospace;font-size:5.4px;letter-spacing:.14em;color:#9AA7BC}
.ti-h1{font-family:'Inter Tight';font-weight:800;font-size:14px;line-height:1.12;letter-spacing:-.035em;
  color:#12203A;margin-top:5px}
.ti-h1 span{background:linear-gradient(120deg,#8B5CF6,#3B82F6);-webkit-background-clip:text;background-clip:text;color:transparent}
.ti-sub{font-size:6.2px;line-height:1.55;color:#5C6B84;margin-top:6px}
.ti-btns{display:flex;gap:5px;margin-top:8px}
.ti-btns span{border-radius:100px;padding:0 10px;height:15px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  font-family:'Inter Tight';font-weight:600;font-size:6.2px}
.ti-btns .p{background:#3B82F6;color:#fff;position:relative;overflow:hidden}
.ti-btns .p::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);animation:sheen 3s ease-in-out infinite}
.ti-btns .s{border:1px solid #DDE3EC;background:#fff;color:#12203A}
.ti-free{font-size:5.4px;color:#9AA7BC;margin-top:6px}
/* лист резюме */
.ti-doc{position:absolute;right:6%;top:19%;width:40%;background:#fff;border-radius:8px;
  border:1px solid #E9EDF3;box-shadow:0 20px 44px rgba(24,38,66,.18);padding:5.5% 6%;
  animation:tiFloat 6s ease-in-out infinite alternate}
@keyframes tiFloat{to{transform:translateY(-6px)}}
.ti-doc::before,.ti-doc::after{content:"";position:absolute;inset:6px -5px -6px 5px;border-radius:8px;
  background:#fff;border:1px solid #EDF1F6;z-index:-1}
.ti-doc::after{inset:12px -10px -12px 10px;opacity:.6}
.ti-nm{font-family:'Inter Tight';font-weight:800;font-size:8px;color:#12203A;letter-spacing:-.01em}
.ti-ro{font-size:5.2px;color:#8494AC;margin-top:1px}
.ti-sec{font-family:'JetBrains Mono',monospace;font-size:4.4px;letter-spacing:.14em;color:#9AA7BC;margin-top:6px}
.ti-l{height:2.6px;border-radius:4px;background:#E7EBF2;margin-top:3px;width:0;
  animation:tiLine 5s ease-in-out infinite alternate}
.ti-l.w9{--w:94%}.ti-l.w8{--w:86%;animation-delay:.15s}.ti-l.w6{--w:64%;animation-delay:.3s}
.ti-l.w7{--w:76%;animation-delay:.45s}
@keyframes tiLine{0%,10%{width:0}55%,100%{width:var(--w,80%)}}
.ti-job{display:flex;justify-content:space-between;align-items:baseline;margin-top:5px}
.ti-job b{font-family:'Inter Tight';font-size:5.4px;color:#12203A;font-weight:600}
.ti-job span{font-family:'JetBrains Mono',monospace;font-size:4.4px;color:#9AA7BC}
/* плавающие карточки */
.ti-ats{position:absolute;right:3%;top:26%;background:#fff;border:1.5px solid #34D399;border-radius:9px;
  padding:5px 9px;box-shadow:0 14px 30px rgba(24,38,66,.16);
  animation:tiAts 5s ease-in-out infinite}
.ti-ats b{display:block;font-family:'Inter Tight';font-weight:700;font-size:7px;color:#0F9D6E}
.ti-ats small{display:block;font-size:5px;color:#5C6B84;margin-top:1px}
@keyframes tiAts{0%,12%{opacity:0;transform:translate(10px,6px) scale(.94)}
  22%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translate(10px,6px) scale(.94)}}
.ti-size{position:absolute;left:42%;top:33%;background:#fff;border:1px solid #EAEEF4;border-radius:9px;
  padding:5px 9px;box-shadow:0 14px 30px rgba(24,38,66,.16);
  animation:tiSize 5s ease-in-out infinite}
.ti-size b{display:block;font-family:'Inter Tight';font-weight:700;font-size:6.4px;color:#12203A}
.ti-size small{display:block;font-size:5px;color:#8494AC;margin-top:1px}
@keyframes tiSize{0%,28%{opacity:0;transform:translateY(8px)}
  38%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(8px)}}
.tile-foot span.ti-soon,.ti-soon{display:inline-flex;align-items:center;vertical-align:middle;margin-left:10px;
  background:var(--ink);color:#fff;border-radius:100px;padding:6px 16px;line-height:1;
  font-family:'Inter Tight',sans-serif;font-weight:600;font-size:13px;letter-spacing:.01em;
  white-space:nowrap;box-shadow:0 8px 24px rgba(11,11,15,.22);
  animation:tiPulse 2.8s ease-in-out infinite}
@keyframes tiPulse{50%{transform:translateY(-2px)}}
@media(max-width:640px){.ti-left{width:46%}.ti-h1{font-size:11px}.ti-size{display:none}}
@media(prefers-reduced-motion:reduce){
  .ti-doc,.ti-l,.ti-ats,.ti-size,.ti-soon,.ti-btns .p::after{animation:none!important;opacity:1!important;transform:none!important}
  .ti-l{width:var(--w,80%)}
}
/* --- нижняя часть плитки Tiersi: редактор и экспорт --- */
.ti-edit{position:absolute;left:5%;bottom:20%;width:36%;background:#fff;border:1px solid #E9EDF3;
  border-radius:9px;padding:6px 7px;box-shadow:0 14px 30px rgba(24,38,66,.14);
  animation:tiEdit 5s ease-in-out infinite}
@keyframes tiEdit{0%,18%{opacity:0;transform:translateY(10px)}
  28%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(10px)}}
.ti-edit .lab{font-family:'JetBrains Mono',monospace;font-size:4.2px;letter-spacing:.14em;color:#9AA7BC}
.ti-fld{border:1px solid #E4E9F1;border-radius:5px;background:#F7F9FC;padding:3px 5px;margin-top:2.5px;
  font-size:5px;color:#12203A;white-space:nowrap;overflow:hidden}
.ti-fld.typing{border-color:#3B82F6;background:#fff}
.ti-fld.typing b{display:inline-block;overflow:hidden;white-space:nowrap;font-weight:400;
  border-right:1px solid #3B82F6;width:0;
  animation:tiFieldType 5s steps(24) infinite, tiCaret .8s steps(1) infinite}
@keyframes tiFieldType{0%,30%{width:0}62%,100%{width:100%}}
@keyframes tiCaret{50%{border-color:transparent}}
.ti-row2{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
/* полоса экспорта */
.ti-exp{position:absolute;left:44%;right:5%;bottom:5%;display:flex;gap:4px;justify-content:center;
  animation:tiExp 5s ease-in-out infinite}
@keyframes tiExp{0%,34%{opacity:0;transform:translateY(8px)}
  44%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(8px)}}
.ti-exp span{background:#3B82F6;color:#fff;border-radius:100px;padding:3px 8px;
  font-family:'Inter Tight';font-weight:600;font-size:5.4px;white-space:nowrap}
.ti-exp span:nth-child(2){background:#2563EB}
.ti-exp span:nth-child(3){background:#1D4ED8}
.ti-exp span:nth-child(4){background:#1E40AF}
@media(max-width:640px){.ti-edit{display:none}}
/* --- нижний правый угол Tiersi: разбор резюме роботом --- */
.ti-parse{position:absolute;right:5%;bottom:17%;width:32%;background:#fff;border:1px solid #E9EDF3;
  border-radius:9px;padding:6px 8px;box-shadow:0 14px 30px rgba(24,38,66,.14);
  animation:tiParse 5s ease-in-out infinite}
@keyframes tiParse{0%,26%{opacity:0;transform:translateY(10px)}
  36%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(10px)}}
.ti-parse .h{display:flex;align-items:center;justify-content:space-between;gap:5px}
.ti-parse .h b{font-family:'Inter Tight';font-weight:700;font-size:6px;color:#12203A}
.ti-parse .h i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:4.6px;color:#0F9D6E;
  background:#E4F7F1;border:1px solid #BDEBDD;border-radius:100px;padding:1px 5px}
.ti-chk{display:flex;align-items:center;gap:4px;margin-top:3.5px;font-size:5px;color:#42506A}
.ti-chk::before{content:"✓";width:8px;height:8px;border-radius:50%;background:#22C55E;color:#fff;
  font-size:4.6px;display:flex;align-items:center;justify-content:center;flex:none;
  opacity:0;transform:scale(.5);animation:tiTick 5s ease-in-out infinite}
.ti-chk:nth-of-type(2)::before{animation-delay:.35s}
.ti-chk:nth-of-type(3)::before{animation-delay:.7s}
.ti-chk:nth-of-type(4)::before{animation-delay:1.05s}
@keyframes tiTick{0%,32%{opacity:0;transform:scale(.5)}42%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
@media(max-width:640px){.ti-parse{display:none}}
/* --- «ваш проект» --- */
.shot-yp{background:linear-gradient(150deg,#F4F4FA,#FAFAFE)}
.yp{position:absolute;inset:9%;border:2px dashed #D3D6E6;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  transition:border-color .5s}
.tile:hover .yp{border-color:#8B5CF6}
.yp-plus{width:52px;height:52px;border-radius:50%;background:var(--grad);position:relative;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:300;line-height:1;
  box-shadow:0 16px 34px -8px rgba(79,70,229,.5);animation:ypPulse 3s ease-in-out infinite}
@keyframes ypPulse{50%{transform:scale(1.08)}}
.yp-plus::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(139,92,246,.35);
  animation:ypRing 3s ease-out infinite}
@keyframes ypRing{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.yp b{font-family:'Inter Tight';font-weight:800;font-size:clamp(15px,1.7vw,20px);letter-spacing:-.02em;color:var(--ink)}
.yp span{font-size:12.5px;color:var(--muted);text-align:center;max-width:78%}
.yp-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#C7CBE0;animation:ypDrift 7s ease-in-out infinite alternate}
.yp-dot.d1{left:16%;top:24%}.yp-dot.d2{right:19%;top:34%;animation-delay:-2s}
.yp-dot.d3{left:26%;bottom:22%;animation-delay:-4s}.yp-dot.d4{right:22%;bottom:28%;animation-delay:-1s}
@keyframes ypDrift{to{transform:translate(6px,-8px)}}


/* ===== страница Apps: телефон с живым приложением ===== */
.app-stage{position:relative;display:flex;justify-content:center;align-items:center;gap:clamp(20px,4vw,60px);
  padding:10px 0 20px;perspective:1200px}
.phone{position:relative;width:clamp(210px,20vw,268px);aspect-ratio:9/19.3;border-radius:38px;
  background:#0B0B12;border:8px solid #14141C;box-shadow:0 40px 90px -30px rgba(20,20,50,.55);
  overflow:hidden;flex:none;transition:transform .8s var(--ease)}
.phone::before{content:"";position:absolute;top:9px;left:34%;right:34%;height:16px;border-radius:100px;
  background:#14141C;z-index:5}
.phone.left{transform:rotateY(16deg) translateZ(-40px) scale(.9);opacity:.9}
.phone.right{transform:rotateY(-16deg) translateZ(-40px) scale(.9);opacity:.9}
.scr{position:absolute;inset:0;background:#F7F7FB;display:flex;flex-direction:column}
.scr-top{flex:none;height:9%;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 16px 6px;font-family:'JetBrains Mono',monospace;font-size:9px;color:#8A8A99}
.scr-body{flex:1;padding:14px 16px;overflow:hidden;position:relative}
.scr-h{font-family:'Inter Tight';font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.scr-sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.a-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 13px;margin-top:11px;
  box-shadow:0 10px 26px -14px rgba(20,20,50,.22);opacity:0;transform:translateY(12px);
  animation:aIn .7s var(--ease) forwards}
.a-card:nth-of-type(1){animation-delay:.15s}.a-card:nth-of-type(2){animation-delay:.35s}
.a-card:nth-of-type(3){animation-delay:.55s}
@keyframes aIn{to{opacity:1;transform:none}}
.a-row{display:flex;align-items:center;gap:9px}
.a-ico{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:13px}
.a-row b{font-family:'Inter Tight';font-size:12.5px;font-weight:600;display:block;color:var(--ink)}
.a-row small{font-size:10.5px;color:var(--muted)}
.a-bar{height:6px;border-radius:100px;background:#EEEEF4;margin-top:9px;overflow:hidden}
.a-bar i{display:block;height:100%;border-radius:100px;background:var(--grad);width:0;
  animation:aFill 3.4s ease-in-out infinite alternate}
.a-card:nth-of-type(2) .a-bar i{--w:72%}
@keyframes aFill{0%,15%{width:8%}70%,100%{width:var(--w,58%)}}
.a-chip{display:inline-flex;align-items:center;gap:5px;background:#EEEDFC;color:#4F46E5;border-radius:100px;
  padding:4px 10px;font-family:'JetBrains Mono',monospace;font-size:9px;margin-top:10px}
.a-tab{flex:none;height:9%;display:flex;align-items:center;justify-content:space-around;
  background:#fff;border-top:1px solid var(--line)}
.a-tab i{width:8px;height:8px;border-radius:50%;background:#D5D5DE}
.a-tab i.on{background:var(--indigo);width:10px;height:10px;box-shadow:0 0 0 5px rgba(79,70,229,.12)}
/* уведомление, всплывающее над экраном */
.a-push{position:absolute;left:8%;right:8%;top:12%;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;padding:9px 11px;
  box-shadow:0 16px 34px -12px rgba(20,20,50,.3);z-index:4;
  animation:aPush 7s ease-in-out infinite}
.a-push b{font-family:'Inter Tight';font-size:11.5px;display:block;color:var(--ink)}
.a-push small{font-size:10px;color:var(--muted)}
@keyframes aPush{0%,55%{opacity:0;transform:translateY(-14px)}
  62%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-14px)}}
@media(max-width:900px){.phone.left,.phone.right{display:none}}

/* компактные отступы между секциями на странице Apps */
.page-apps section{padding:clamp(52px,6vw,78px) 0}
.page-apps #faq{padding-top:clamp(40px,4.5vw,58px);padding-bottom:clamp(40px,4.5vw,58px)}
.page-apps #faq .sec-head{margin-bottom:clamp(18px,2vw,26px)}
.page-apps .faq{max-width:900px}
/* телефоны реагируют на курсор */
.app-stage{transform-style:preserve-3d}
.phone{will-change:transform}
.app-stage.tilt .phone{transition:transform .35s var(--ease)}
/* живые детали внутри экранов */
.a-live{display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;
  font-size:9.5px;color:#1D8F72;background:#E4F7F1;border:1px solid #BDEBDD;border-radius:100px;padding:2px 8px}
.a-live i{width:5px;height:5px;border-radius:50%;background:#22C55E;animation:aPulse 1.6s ease-in-out infinite}
@keyframes aPulse{50%{transform:scale(1.5);opacity:.45}}
.a-badge{position:absolute;top:9px;right:9px;min-width:16px;height:16px;border-radius:100px;
  background:#EF4444;color:#fff;font-family:'Inter Tight';font-weight:700;font-size:9.5px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
  animation:aBadge 5s ease-in-out infinite}
@keyframes aBadge{0%,30%{transform:scale(0);opacity:0}38%,88%{transform:none;opacity:1}96%,100%{transform:scale(0);opacity:0}}
.a-map{position:relative;height:52px;border-radius:12px;margin-top:10px;overflow:hidden;
  background:linear-gradient(160deg,#E8EEF8,#F3F6FB)}
.a-map::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(24,38,66,.06) 0 1px,transparent 1px 14px),
             repeating-linear-gradient(0deg,rgba(24,38,66,.06) 0 1px,transparent 1px 14px)}
.a-map i{position:absolute;left:24%;top:52%;width:9px;height:9px;border-radius:50%;background:var(--indigo);
  box-shadow:0 0 0 0 rgba(79,70,229,.5);animation:aPing 2.4s ease-out infinite}
@keyframes aPing{0%{box-shadow:0 0 0 0 rgba(79,70,229,.45)}100%{box-shadow:0 0 0 16px rgba(79,70,229,0)}}
.a-map em{position:absolute;right:8%;bottom:12%;font-style:normal;font-family:'JetBrains Mono',monospace;
  font-size:8.5px;color:#5C6B84}
.a-mini{display:flex;gap:5px;margin-top:9px}
.a-mini i{flex:1;height:26px;border-radius:6px;background:#EDEFF6;position:relative;overflow:hidden}
.a-mini i::after{content:"";position:absolute;left:0;right:0;bottom:0;background:var(--grad);
  height:0;animation:aBarUp 3.6s ease-in-out infinite alternate}
.a-mini i:nth-child(1)::after{--h:46%}.a-mini i:nth-child(2)::after{--h:72%;animation-delay:.2s}
.a-mini i:nth-child(3)::after{--h:38%;animation-delay:.4s}.a-mini i:nth-child(4)::after{--h:84%;animation-delay:.6s}
@keyframes aBarUp{0%,12%{height:6%}70%,100%{height:var(--h,50%)}}
@media(max-width:900px){
  .phone.left,.phone.right{display:block;transform:none;opacity:1}
  .app-stage{flex-wrap:wrap;gap:14px}
  .phone{width:clamp(150px,42vw,190px)}
  .phone.right{display:none}
}
@media(max-width:560px){.phone.left{display:none}}

/* экраны телефонов заполняются целиком */
.scr-body{display:flex;flex-direction:column;gap:9px;padding:12px 14px 10px}
.scr-body .a-card{margin-top:0}
.scr-body .a-card:last-of-type{margin-bottom:0}
.scr-body .sp{flex:1 1 auto;min-height:0}
.a-map{height:auto;flex:1 1 auto;min-height:70px}
.a-list{flex:1 1 auto;display:flex;flex-direction:column;gap:9px;min-height:0}

/* --- экран 1: сканер --- */
.a-cam{position:relative;flex:1 1 auto;min-height:120px;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,#1A1A24,#2A2A38)}
.a-cam::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px)}
.a-frame{position:absolute;left:16%;right:16%;top:22%;bottom:22%;border-radius:10px}
.a-frame span{position:absolute;width:16px;height:16px;border:2.5px solid #6EE7B7}
.a-frame span:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.a-frame span:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.a-frame span:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 6px}
.a-frame span:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 6px 0}
.a-scanline{position:absolute;left:16%;right:16%;height:2px;background:linear-gradient(90deg,transparent,#6EE7B7,transparent);
  box-shadow:0 0 14px rgba(110,231,183,.8);animation:aScan 2.6s ease-in-out infinite}
@keyframes aScan{0%,100%{top:24%}50%{top:74%}}
.a-code{position:absolute;left:0;right:0;bottom:8%;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:9px;color:#8FE9C6;
  animation:aCode 5.2s ease-in-out infinite}
@keyframes aCode{0%,42%{opacity:0}52%,88%{opacity:1}96%,100%{opacity:0}}
.a-scan-res{display:flex;align-items:center;gap:8px;background:#E4F7F1;border:1px solid #BDEBDD;
  border-radius:12px;padding:9px 11px;animation:aRes 5.2s ease-in-out infinite}
.a-scan-res b{font-family:'Inter Tight';font-size:12px;color:#12203A;display:block}
.a-scan-res small{font-size:10.5px;color:#1D8F72}
@keyframes aRes{0%,50%{opacity:0;transform:translateY(8px)}60%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
/* --- экран 3: аналитика --- */
.a-kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a-kpi div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 10px}
.a-kpi b{display:block;font-family:'Inter Tight';font-weight:800;font-size:17px;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.a-kpi small{font-size:9.5px;color:var(--muted)}
.a-chart{flex:1 1 auto;min-height:96px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:10px 11px;display:flex;flex-direction:column}
.a-chart .t{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);letter-spacing:.06em}
.a-cols{flex:1;display:flex;align-items:flex-end;gap:6px;margin-top:8px}
.a-cols i{flex:1;border-radius:5px 5px 0 0;background:var(--grad);height:10%;
  animation:aCol 3.8s ease-in-out infinite alternate}
.a-cols i:nth-child(1){--h:42%}.a-cols i:nth-child(2){--h:66%;animation-delay:.15s}
.a-cols i:nth-child(3){--h:38%;animation-delay:.3s}.a-cols i:nth-child(4){--h:82%;animation-delay:.45s}
.a-cols i:nth-child(5){--h:58%;animation-delay:.6s}.a-cols i:nth-child(6){--h:94%;animation-delay:.75s}
@keyframes aCol{0%,12%{height:8%}70%,100%{height:var(--h,50%)}}
.a-donut{position:relative;width:56px;height:56px;border-radius:50%;flex:none;margin:0 auto;
  background:conic-gradient(var(--indigo) 0 var(--p,72%),#EDEFF6 var(--p,72%) 100%);
  animation:aDonut 4.4s ease-in-out infinite alternate}
@keyframes aDonut{from{--p:18%}to{--p:72%}}
@property --p{syntax:'<percentage>';initial-value:18%;inherits:false}
.a-donut::after{content:"72%";position:absolute;inset:9px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter Tight';font-weight:700;font-size:11px;color:var(--ink)}
/* --- экран 2: подпись --- */
.a-sign{background:#fff;border:1px dashed var(--line);border-radius:12px;height:52px;position:relative;overflow:hidden}
.a-sign svg{position:absolute;inset:0;width:100%;height:100%}
.a-sign path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:260;stroke-dashoffset:260;animation:aSign 5s ease-in-out infinite}
@keyframes aSign{0%,20%{stroke-dashoffset:260}55%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:260}}
.a-sign em{position:absolute;left:10px;bottom:6px;font-style:normal;font-family:'JetBrains Mono',monospace;
  font-size:8px;color:#A7A7B8}

/* итог сканирования: карточка объекта и запись в журнал */
.a-cam{min-height:96px;flex:0 0 auto;height:34%;transition:opacity .5s}
.a-res-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 11px;
  animation:aRes2 6s ease-in-out infinite}
.a-res-card .hd{display:flex;align-items:center;gap:8px}
.a-res-card .hd b{font-family:'Inter Tight';font-size:12px;color:var(--ink);display:block;line-height:1.2}
.a-res-card .hd small{font-size:10px;color:var(--muted)}
.a-ok{margin-left:auto;flex:none;font-family:'JetBrains Mono',monospace;font-size:9px;color:#1D8F72;
  background:#E4F7F1;border:1px solid #BDEBDD;border-radius:100px;padding:2px 7px}
.a-kv{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);
  padding:5px 0;border-top:1px solid #F0F1F6;margin-top:7px}
.a-kv b{color:var(--ink);font-weight:600;font-family:'JetBrains Mono',monospace;font-size:9.5px}
@keyframes aRes2{0%,48%{opacity:0;transform:translateY(10px)}
  58%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(10px)}}
.a-logged{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:9px;
  color:#4F46E5;background:#EEEDFC;border-radius:100px;padding:4px 9px;align-self:flex-start;
  animation:aLogged 6s ease-in-out infinite}
@keyframes aLogged{0%,68%{opacity:0;transform:translateY(6px)}76%,92%{opacity:1;transform:none}98%,100%{opacity:0}}

/* после распознавания камера уступает место зелёной галочке */
.a-cam{animation:aCamOut 6s ease-in-out infinite}
@keyframes aCamOut{0%,42%{opacity:1}50%,90%{opacity:0}97%,100%{opacity:1}}
.a-scan-wrap{position:relative;flex:0 0 auto;height:34%;min-height:96px}
.a-scan-wrap .a-cam{position:absolute;inset:0;height:auto;min-height:0}
.a-done{position:absolute;inset:0;border-radius:14px;background:#E9FBF3;border:1px solid #BDEBDD;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  opacity:0;animation:aDone 6s ease-in-out infinite}
@keyframes aDone{0%,44%{opacity:0;transform:scale(.94)}52%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:scale(.94)}}
.a-done .tick{width:42px;height:42px;border-radius:50%;background:#22C55E;display:grid;place-items:center;
  box-shadow:0 8px 20px -6px rgba(34,197,94,.6)}
.a-done .tick svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;
  animation:aTick 6s ease-in-out infinite}
@keyframes aTick{0%,46%{stroke-dashoffset:26}56%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:26}}
.a-done b{font-family:'Inter Tight';font-size:12px;color:#0F7A55}

/* цифры в тёмных блоках всегда в строку — правило идёт последним, чтобы
   его не перебила старая копия при сборке темы */
.local-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:0}
@media(max-width:640px){.local-stats{grid-template-columns:1fr}}

/* плитка «ваш проект»: пропорция и рамка — правило идёт последним */
.shot-yp{aspect-ratio:16/9.6;background:linear-gradient(150deg,#F4F4FA,#FAFAFE)}
.yp{position:absolute;inset:9%;border:2px dashed #D3D6E6;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  transition:border-color .5s}
.tile:hover .yp{border-color:#8B5CF6}

/* логотип Tiersi в круге — правило идёт последним */
.ti-mark{border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #E9EDF3}
.ti-mark img{width:62%;height:62%;object-fit:contain;display:block}
@media(max-width:640px){.ti-mark{display:none}}

/* подпись клиента — правило идёт последним */
.a-sign{background:#fff;border:1px dashed var(--line);border-radius:12px;height:52px;position:relative;overflow:hidden}
.a-sign svg{position:absolute;inset:0;width:100%;height:100%}
.a-sign path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:260;stroke-dashoffset:260;animation:aSign 5s ease-in-out infinite}
@keyframes aSign{0%,20%{stroke-dashoffset:260}55%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:260}}

/* ряд цифр — своя строка на всю ширину тёмного блока
   (селектор с .local обязателен: иначе двухколоночная сетка блока перебивает) */
.local .wrap.stats-row{display:block;grid-template-columns:none}
.local .wrap.stats-row .local-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:0}
@media(max-width:640px){.local .wrap.stats-row .local-stats{grid-template-columns:1fr}}

/* ===== живой терминал Local AI ===== */
#termLocal{height:300px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.85}
#termLocal .ln{animation:tlIn .25s var(--ease)}
@keyframes tlIn{from{opacity:0;transform:translateY(6px)}}
#termLocal .req{color:#A5B4FC}
#termLocal .ok{color:#6EE7B7}
#termLocal .rag{color:#7DD3FC}
#termLocal .warn{color:#FBBF24}
#termLocal .dim{color:#6B6B7B}
#termLocal .cmd{color:#F5F5F7}
.term-stats{display:flex;gap:18px;padding:10px 24px 0;font-family:'JetBrains Mono',monospace;
  font-size:11.5px;color:#8A8A9B;border-top:1px solid rgba(255,255,255,.07);margin-top:10px;flex-wrap:wrap}
.term-stats b{color:#6EE7B7;font-weight:500}
.term-stats i{font-style:normal;width:6px;height:6px;border-radius:50%;background:#22C55E;display:inline-block;
  margin-right:6px;animation:tlPulse 1.4s ease-in-out infinite}
@keyframes tlPulse{50%{transform:scale(1.6);opacity:.4}}


/* ===== адаптив: блоки перенесены сюда из середины файла.
   Причина: ниже по файлу идут повторные базовые правила (сборка из двух
   исходных страниц), которые перебивали эти медиазапросы по порядку следования. ===== */
@media(max-width:860px){
  .flow{right:-8px;bottom:-56px;width:250px}
  .chip.c1{left:-6px}.chip.c2{right:-6px;top:auto;bottom:120px;display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
@media(prefers-reduced-motion:reduce){
  .ims-fr,.ims-fl{animation:none!important;opacity:1!important;transform:none!important}
}
/* --- мобильная раскладка коллажа: меньше фрагментов, но во весь холст --- */
@media(max-width:640px){
  .shot-ims{aspect-ratio:16/12}
  /* оставляю 5 ключевых фрагментов и растягиваю их на всю площадь */
  .fr-steps,.fr-news,.fr-chart,.fr-off,.fr-iso{display:none}
  .fr-desk{left:3%;top:6%;width:64%;height:62%}
  .ims-h1{font-size:12px}
  .desk-body{padding:7% 6%}
  .fr-mob{right:3%;top:9%;width:26%}
  .fr-cert{left:44%;top:2%;width:30%}
  .fr-dark{left:3%;bottom:3%;width:64%}
  .dk-row{gap:9px}
  .dk-row b{font-size:13px}
  .fr-reg{right:3%;top:2%}
}
@media(max-width:640px){
  .shot-cst{aspect-ratio:16/12}
  .fr-c-food,.fr-c-pick,.fr-c-sim,.fr-c-rank,.fr-c-world{display:none}
  .fr-c-main{left:3%;top:5%;width:60%}
  .fr-c-jobs{right:3%;top:8%;width:34%}
  .fr-c-energy{left:3%;bottom:3%;width:60%}
  .fr-c-motto{left:auto;right:3%;bottom:4%}
}
@media(prefers-reduced-motion:reduce){
  .cst-fr,.cst-fr .ims-fl,.cst-scale i,.cst-bar i,.cst-chip,.cst-go::after,.cst-egg{animation:none!important;opacity:1!important;transform:none!important}
  .cst-bar i{width:var(--w,50%)}
  .cst-scale i{background:var(--bandc,#E7EBF3)}
}
@media(max-width:640px){
  .shot-cw{aspect-ratio:16/13}
  .cw-h1{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .cw-fr,.cw-swap,.cw-btn::after,.cw-lng{animation:none!important;opacity:1!important;transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .ti-doc,.ti-l,.ti-ats,.ti-size,.ti-soon,.ti-btns .p::after{animation:none!important;opacity:1!important;transform:none!important}
  .ti-l{width:var(--w,80%)}
}
@media(prefers-reduced-motion:reduce){
  .sec-head .eyebrow,.sec-head h2 .wi,.sec-head p{transition:none;opacity:1;transform:none;letter-spacing:.14em}
  .sec-head h2 .wi.gw{background-position:0 0}
}
@media(max-width:560px){
  .vf-out-h b{display:none}
  /* 2. плитка видео-фабрики: на узком экране только граф во всю ширину, лента видео скрыта */
  .vf-out{display:none}
  /* растягиваю схему по горизонтали, чтобы узлы дошли до правого края;
     сами узлы и бейджи контр-масштабирую, иначе иконки поплывут */
  /* расчёт: холст ≈280px, узел 30px → центр крайнего узла (87%) не дальше 265px.
     при left3%/right1% предел растяжения ≈1.08, берём 1.06 с запасом */
  .vf-graph{left:3%;right:1%;width:auto;top:6%;height:88%;
    transform:scaleX(1.06);transform-origin:left center}
  .gn{transform:translate(-50%,-50%) scaleX(.943)}
  .gn b{width:30px;height:30px;border-radius:9px}
  .gn b svg{width:14px;height:14px}
  /* бейджи — строго над узлом, а не сбоку: иначе наезжают на соседей */
  .gn .cnt{font-size:7.5px;padding:1.5px 5px;left:50%;top:-15px;transform:translateX(-50%)}
  .gn .cnt.show{transform:translateX(-50%)}
  .vf-top{height:16%;padding:0 5%}
  .vf-brand{font-size:8.5px;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vf-run{font-size:9px;padding:5px 9px;flex:none}
  .vf-log{height:14%;font-size:8px;padding:0 5%}
  /* 3. ссылка «Explore …»: стрелка не наезжает на текст */
  .more{padding:12px 16px;gap:8px;text-align:left;justify-content:space-between}
  .more .arr{flex:none}
  /* 4. кнопка с адресом почты: не вылезает за карточку */
  .cta .btn,.btn{max-width:100%;padding:13px 18px;font-size:13.5px}
  /* адрес почты не рвём посередине слова — он помещается целиком */
  .cta .btn{white-space:nowrap;word-break:normal;text-align:center}
}
@media(max-width:640px){
  .modal-card{padding:26px 20px 24px;border-radius:22px}
  .m-grid{grid-template-columns:1fr;gap:12px}
  .m-title{font-size:24px}
  .m-lead{font-size:14.5px}
}

/* подпись под отзывом: имя и должность плотнее, без наследуемых 1.65 */
.q-who b{line-height:1.2}
.q-who span{line-height:1.25}

/* конец страницы на узких экранах: меньше воздуха между отзывами и блоком CTA */
@media(max-width:700px){
  #reviews{padding-bottom:60px}
}

/* мок-карточки плитки IMS: длинные слова переносятся внутри карточки,
   а не вылезают за её правый край на узких экранах */
.fr-cert .crt{overflow-wrap:anywhere}
.dk-row>div{min-width:0}
.dk-row small{overflow-wrap:anywhere}

/* пропорции плиток портфолио — правило идёт последним, чтобы его не перебили
   поздние копии фоновых правил при сборке темы */
.shot-ti{aspect-ratio:16/19.6;background:linear-gradient(160deg,#F7F8FC,#EFF2F8)}
.shot-cw{aspect-ratio:16/19.6}
.shot-yp{aspect-ratio:16/9.6;background:linear-gradient(150deg,#F4F4FA,#FAFAFE)}
.shot-ims{aspect-ratio:16/9.6}
@media(max-width:640px){
  .shot-ti{aspect-ratio:16/16}
  .shot-cw{aspect-ratio:16/13}
  .shot-ims{aspect-ratio:16/12}
}

/* ===== шапка на узких экранах: всегда с фоном, кнопка не вылезает ===== */
@media(max-width:820px){
  nav{background:rgba(251,251,253,.94);
    backdrop-filter:saturate(1.8) blur(18px);-webkit-backdrop-filter:saturate(1.8) blur(18px);
    box-shadow:0 1px 0 var(--line)}
  .nav-inner{padding:0 16px;height:58px;gap:10px}
  .logo{font-size:17px}
  .nav-cta{flex:none;white-space:nowrap;font-size:12.5px;padding:8px 14px}
}
@media(max-width:400px){
  .nav-inner{padding:0 22px;height:54px}
  .logo{font-size:15.5px;gap:7px}
  .logo-dot{width:9px;height:9px}
  .nav-cta{font-size:11.5px;padding:7px 11px}
}

/* ===== мобильное меню ===== */
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;
  background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;
  padding:0;transition:background .3s,border-color .3s}
.burger span{display:block;width:16px;height:1.8px;border-radius:2px;background:var(--ink);
  transition:transform .35s var(--ease),opacity .25s}
.burger.open span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
.mnav{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);z-index:70;background:#fff;
  box-shadow:-24px 0 70px -30px rgba(20,20,50,.4);padding:88px 24px 28px;
  transform:translateX(100%);transition:transform .45s var(--ease);overflow-y:auto}
.mnav.open{transform:none}
.mnav-back{position:fixed;inset:0;z-index:65;background:rgba(15,15,30,.35);opacity:0;visibility:hidden;
  transition:opacity .4s,visibility .4s}
.mnav-back.open{opacity:1;visibility:visible}
.mnav h4{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--muted);
  margin:0 0 10px}
.mnav a{display:block;padding:12px 0;font-family:'Inter Tight';font-weight:600;font-size:19px;
  letter-spacing:-.02em;color:var(--ink);border-bottom:1px solid var(--line)}
.mnav a small{display:block;font-family:'Golos Text';font-weight:400;font-size:13px;color:var(--muted);margin-top:3px}
.mnav .grp{margin-bottom:22px}
.mnav .m-cta{display:block;margin-top:22px;text-align:center;background:var(--ink);color:#fff;
  border-radius:100px;padding:15px;font-family:'Inter Tight';font-weight:600;font-size:16px;border:0}
@media(max-width:820px){.burger{display:flex}}
@media(min-width:821px){.mnav,.mnav-back{display:none}}

/* левая колонка и лист резюме включаются в общий цикл плитки Tiersi */
.ti-left{animation:tiPart 5s ease-in-out infinite}
@keyframes tiPart{0%,4%{opacity:0;transform:translateY(10px)}
  12%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(10px)}}
.ti-doc{animation:tiFloat 6s ease-in-out infinite alternate, tiFade 5s ease-in-out infinite}
@keyframes tiFade{0%,6%{opacity:0}14%,86%{opacity:1}94%,100%{opacity:0}}

/* ===== Tiersi: фрагменты влетают с разных сторон (как в IMS), цикл 16s ===== */
.ti{--T:16s}
.ti-nav{animation:tiNavIn var(--T) ease-in-out infinite}
@keyframes tiNavIn{0%,2%{transform:translateY(-130%);opacity:0}
  8%,88%{transform:none;opacity:1}96%,100%{transform:translateY(-130%);opacity:0}}
/* левая колонка — слева */
.ti-left{animation:tiLeftIn var(--T) ease-in-out infinite}
@keyframes tiLeftIn{0%,6%{transform:translateX(-140%);opacity:0}
  13%,86%{transform:none;opacity:1}94%,100%{transform:translateX(-140%);opacity:0}}
/* лист резюме — справа, с поворотом */
.ti-doc{animation:tiDocIn var(--T) ease-in-out infinite}
@keyframes tiDocIn{0%,10%{transform:translateX(150%) rotate(6deg);opacity:0}
  18%,84%{transform:translateY(-4px);opacity:1}92%,100%{transform:translateX(150%) rotate(6deg);opacity:0}}
/* карточка ATS — сверху */
.ti-ats{animation:tiAtsIn var(--T) ease-in-out infinite}
@keyframes tiAtsIn{0%,16%{transform:translateY(-150%) scale(.9);opacity:0}
  23%,82%{transform:none;opacity:1}90%,100%{transform:translateY(-150%) scale(.9);opacity:0}}
/* формат страницы — слева-сверху */
.ti-size{animation:tiSizeIn var(--T) ease-in-out infinite}
@keyframes tiSizeIn{0%,21%{transform:translate(-120%,-40%) scale(.9);opacity:0}
  28%,80%{transform:none;opacity:1}88%,100%{transform:translate(-120%,-40%) scale(.9);opacity:0}}
/* редактор — снизу-слева */
.ti-edit{animation:tiEditIn var(--T) ease-in-out infinite}
@keyframes tiEditIn{0%,26%{transform:translate(-70%,120%) rotate(-5deg);opacity:0}
  33%,78%{transform:none;opacity:1}86%,100%{transform:translate(-70%,120%) rotate(-5deg);opacity:0}}
/* проверка разбора — справа-снизу */
.ti-parse{animation:tiParseIn var(--T) ease-in-out infinite}
@keyframes tiParseIn{0%,31%{transform:translate(150%,40%);opacity:0}
  38%,76%{transform:none;opacity:1}84%,100%{transform:translate(150%,40%);opacity:0}}
/* логотип в круге — снизу */
.ti-mark{animation:tiMarkIn var(--T) ease-in-out infinite}
@keyframes tiMarkIn{0%,36%{transform:translateY(160%) scale(.7);opacity:0}
  43%,74%{transform:none;opacity:1}82%,100%{transform:translateY(160%) scale(.7);opacity:0}}
/* кнопки экспорта — снизу-справа */
.ti-exp{animation:tiExpIn var(--T) ease-in-out infinite}
@keyframes tiExpIn{0%,41%{transform:translate(60%,140%);opacity:0}
  48%,72%{transform:none;opacity:1}80%,100%{transform:translate(60%,140%);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .ti-nav,.ti-left,.ti-doc,.ti-ats,.ti-size,.ti-edit,.ti-parse,.ti-mark,.ti-exp{
    animation:none!important;opacity:1!important;transform:none!important}
}

/* кнопка в шапке превью Tiersi: текст по центру капсулы */
.ti-nav .ti-cta{display:inline-flex;align-items:center;justify-content:center;
  height:15px;padding:0 10px;line-height:1}
.ti-nav .ti-beta{display:inline-flex;align-items:center;line-height:1;height:11px;padding:0 6px}
.ti-nav .ti-links span{line-height:1}

/* аватар отзыва: загруженное фото вместо инициалов */
.q-who .ava-img{padding:0;overflow:hidden}
.q-who .ava-img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* цитата отзыва — на всю ширину блока */
.q-slide blockquote{max-width:none}

/* ===== мобильные исправления: круг, подвал, горизонтальный сдвиг ===== */
/* панель меню за экраном не должна расширять страницу */
html,body{overflow-x:hidden}
.mnav{visibility:hidden}
.mnav.open{visibility:visible}
/* круг с плюсом остаётся кругом на любом экране */
.yp-plus{flex:none;aspect-ratio:1;width:52px;height:52px}
@media(max-width:520px){.yp-plus{width:44px;height:44px;font-size:22px}}
/* ссылки подвала не рвутся посередине названия */
.foot .links{display:flex;flex-wrap:wrap;gap:10px 18px}
.foot .links a{white-space:nowrap}
@media(max-width:640px){
  .foot{flex-direction:column;align-items:flex-start;gap:16px;text-align:left}
  .foot .links{gap:8px 14px}
}
/* шапка: логотип, кнопка и бургер всегда помещаются */
@media(max-width:820px){
  .nav-inner{flex-wrap:nowrap;min-width:0}
  .logo{min-width:0;overflow:visible;white-space:nowrap}
  .logo-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-cta{margin-left:auto}
  .burger{flex:none;margin-left:10px}
}
@media(max-width:420px){
  .nav-cta{font-size:11px;padding:7px 10px}
  .burger{width:36px;height:36px}
}

/* кнопка закрытия внутри мобильной панели */
.mnav-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;
  border:0;background:#F2F3F8;color:var(--ink);font-size:15px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,transform .4s var(--ease)}
.mnav-close:hover{background:#E6E8F0;transform:rotate(90deg)}


/* ===== мобильный hero (≤640px): слова-стикеры + чат-карточка из-под сгиба =====
   Десктоп не затронут: все правила внутри медиазапроса и идут последними в файле. */
@media(max-width:640px){
  .hero{padding-bottom:0;min-height:0}
  .hero-content{padding-top:92px}

  /* "We build" — крупный заголовок, короткая градиентная чёрточка */
  .we-build{font-weight:800;font-size:40px;letter-spacing:-.04em;gap:12px;padding:0 22px}
  .we-build::before{width:26px}

  /* сцена слов: обычный блок без маски и параллакса */
  .word-stage{
    height:244px;margin:10px 0 0;padding:0 22px;
    -webkit-mask-image:none;mask-image:none;
    transform:none !important;will-change:auto;
  }

  /* каждое слово — наклейка; сброс "гигантского" стиля (текст-градиент, blur, translate) */
  .word,.word.active,.word.leaving,.word.grad{
    left:auto;top:auto;right:auto;
    opacity:1;filter:none;pointer-events:none;
    /* !important: main.js (fitWords) может оставить inline font-size от десктопной раскладки */
    font-size:26px !important;letter-spacing:-.025em;line-height:1;
    padding:11px 16px;border-radius:14px;
    background:#fff;color:var(--ink);
    -webkit-background-clip:border-box;background-clip:border-box;
    border:0;
    box-shadow:0 10px 26px rgba(35,35,59,.14);
    animation:none;
    --s:1;
    transform:rotate(var(--r,0deg)) scale(var(--s));
    /* растёт от своего края внутрь экрана, а не за его границу */
    transform-origin:var(--o,0 50%);
    transition:transform .6s var(--ease),box-shadow .6s var(--ease),
               background-color .6s var(--ease),color .6s var(--ease);
  }

  /* раскладка наклеек (порядок как в разметке: Websites, Apps, Automations, Local AI, Advantage) */
  .word:nth-child(1){left:22px;top:6px;--r:-6deg;--o:0 50%}
  .word:nth-child(2){right:26px;top:22px;--r:5deg;--o:100% 50%;background:var(--ink);color:#fff;border-color:var(--ink)}
  .word:nth-child(3){left:38px;top:80px;--r:3deg;--o:0 50%}
  .word:nth-child(4){right:30px;top:126px;--r:-3deg;--o:100% 50%}
  .word:nth-child(5){left:52px;top:170px;--r:-4deg;--o:0 50%}

  /* активное слово — градиентная наклейка, крупнее (масштаб, не размер шрифта) и поверх остальных */
  .word.active,.word.grad.active,.word:nth-child(2).active{
    --s:1.3;z-index:2;
    background:var(--grad);color:#fff;border-color:transparent;
    box-shadow:0 18px 40px rgba(99,102,241,.45);
  }

  /* подзаголовок и кнопки — по левому краю, как заголовок */
  .hero p.sub{margin:14px 0 0;padding:0 22px;text-align:left;font-size:16px}
  .hero-actions{justify-content:flex-start;padding:0 22px;margin-top:22px;gap:10px}

  /* чат-карточка: без 3D-наклона, слегка повёрнута и уходит под сгиб секции */
  .stage{width:calc(100% - 12px);margin:28px 0 -64px 12px;perspective:none;animation-delay:.8s}
  .tilt{transform:rotate(-3deg) !important;transform-style:flat}
  .chat{transform:none;border-radius:20px;box-shadow:0 -14px 40px rgba(35,35,59,.16),0 24px 50px -20px rgba(30,30,70,.25)}
  .stage .glow{inset:-10% -6%;opacity:.35}
  .flow,.chip{display:none}
}


/* ===== услуги: колода карточек с живыми мокапами (v1.4.0) =====
   Разметка: .services.deck > .deck-slot.reveal > .card[data-mk]. Слот несёт reveal-анимацию
   и абсолютное позиционирование, карточка — наклон/подъём, чтобы transform'ы не конфликтовали. */

/* --- живой мокап наверху карточки --- */
.card .mk{position:relative;height:104px;border-radius:16px;background:#F3F4F9;padding:14px 16px;margin-bottom:26px;overflow:hidden}
.mk-dots{display:flex;gap:5px}
.mk-dots i{width:8px;height:8px;border-radius:50%;background:#FF5F56}
.mk-dots i:nth-child(2){background:#FFBD2E}.mk-dots i:nth-child(3){background:#27C93F}
.mk-sk{height:9px;border-radius:5px;background:var(--ink);margin-top:12px;width:62%;animation:mkSk 3.4s var(--ease) infinite}
.mk-sk2{height:6px;background:#D4D5E2;margin-top:8px;width:40%;animation-delay:.25s}
@keyframes mkSk{0%{width:0}40%{width:var(--w,62%)}100%{width:var(--w,62%)}}
.mk-sk1{--w:62%}.mk-sk2{--w:40%}
.mk-cta{display:inline-block;margin-top:10px;height:16px;width:54px;border-radius:8px;background:var(--grad)}
@property --mkg{syntax:"<percentage>";inherits:false;initial-value:98%}
.mk-gauge{position:absolute;right:14px;top:14px;width:72px;height:72px;border-radius:50%;
  background:conic-gradient(#16A34A var(--mkg),#E3E4EE 0);display:grid;place-items:center;
  animation:mkGauge 3.4s ease-out infinite}
.mk-gauge b{width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-family:'Inter Tight';font-weight:800;font-size:17px;color:#16A34A}
@keyframes mkGauge{0%{--mkg:0%}55%{--mkg:98%}100%{--mkg:98%}}

.mk-bar{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px}
.mk-bar i{width:7px;height:7px;border-radius:50%;background:#28C840;box-shadow:0 0 8px rgba(40,200,64,.7)}
.mk-type{font-size:12px;color:var(--ink);background:#fff;border-radius:10px;padding:7px 10px;margin-top:10px;
  max-width:100%;white-space:nowrap;overflow:hidden;border-right:2px solid var(--indigo);
  animation:mkType 5s steps(46) infinite}
@keyframes mkType{0%{width:0}62%{width:100%}100%{width:100%}}
.mk-typing{margin-top:8px}
.mk-typing i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#B2B4C4;margin-right:4px;animation:mkBlink 1.2s infinite}
.mk-typing i:nth-child(2){animation-delay:.2s}.mk-typing i:nth-child(3){animation-delay:.4s}
@keyframes mkBlink{0%,80%,100%{opacity:.3}40%{opacity:1}}

.mk-auto{display:flex;align-items:center;gap:8px;padding-top:40px}
.mk-run{position:absolute;right:16px;top:14px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#16A34A}
.mk-node{width:44px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;flex:none}
.mk-node svg{width:18px;height:18px;fill:none;stroke:var(--indigo);stroke-width:1.8}
.mk-node.hot{border-color:var(--indigo);background:#EEEFFB;animation:mkPulse 1.8s infinite}
@keyframes mkPulse{0%{box-shadow:0 0 0 0 rgba(99,102,241,.5)}70%{box-shadow:0 0 0 10px rgba(99,102,241,0)}100%{box-shadow:0 0 0 0 rgba(99,102,241,0)}}
.mk-wire{flex:1;height:2px;background:#E2E3EE;position:relative;overflow:hidden}
.mk-wire::after{content:"";position:absolute;left:-30%;top:0;width:30%;height:100%;background:linear-gradient(90deg,transparent,var(--indigo),transparent);animation:mkRun 1.6s linear infinite}
@keyframes mkRun{to{left:100%}}

/* --- состояние "наверху" (.card.up) = hover: рамка, иконка, список, метрики, кнопка --- */
.card li{transition:color .4s,transform .4s}
.card.up li,.card:hover li{color:var(--ink);transform:translateX(3px)}
.card.up li:nth-child(2),.card:hover li:nth-child(2){transition-delay:.06s}
.card.up li:nth-child(3),.card:hover li:nth-child(3){transition-delay:.12s}
.card.up li:nth-child(4),.card:hover li:nth-child(4){transition-delay:.18s}
.card.up::before{opacity:1}
.card.up .glyph,.card:hover .glyph{animation:mkFloat 2.4s ease-in-out infinite}
@keyframes mkFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-6deg)}}
.card .more{transition:background .35s,color .35s,border-color .35s}
.card.up .more{background:var(--ink);color:#fff;border-color:var(--ink)}

/* --- индикатор перебора --- */
.deck-dots{display:flex;justify-content:center;gap:8px;margin-top:28px}
.deck-dots i{width:34px;height:4px;border-radius:2px;background:#E2E3EE;overflow:hidden;position:relative}
.deck-dots i.on::after{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--indigo),var(--cyan));animation:deckProg 4s linear forwards}
@keyframes deckProg{from{width:0}to{width:100%}}

/* --- колода: только на широких экранах, где было три колонки --- */
@media(min-width:921px){
  .services.deck{display:block;position:relative;height:var(--deck-h,720px);
    /* пятна за колодой */
    background:none}
  .services.deck::before,.services.deck::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
    filter:blur(70px);opacity:.38;pointer-events:none;z-index:0;background:var(--grad)}
  .services.deck::before{left:-120px;top:-80px;animation:deckBlob 10s ease-in-out infinite alternate}
  .services.deck::after{right:-140px;top:140px;opacity:.26;animation:deckBlob 13s ease-in-out infinite alternate-reverse}
  @keyframes deckBlob{from{transform:translate(0,0)}to{transform:translate(220px,-70px) scale(1.25)}}
  .deck-slot{position:absolute;top:24px;width:42%;z-index:1}
  .deck-slot:nth-child(1){left:2%}
  .deck-slot:nth-child(2){left:29%;z-index:2}
  .deck-slot:nth-child(3){left:56%}
  /* геометрия и типографика как в согласованном макете: компактная карточка,
     иконка в одну строку с заголовком, мокап 80px, метрики градиентом */
  .deck-slot .card{padding:16px 18px 18px;border-radius:22px}
  .deck-slot .card .mk{height:80px;margin-bottom:14px;padding:10px 12px;border-radius:14px}
  .deck-slot .card .glyph{width:38px;height:38px;margin:0 10px 0 0;float:left}
  .deck-slot .card h3{font-size:18px;line-height:38px;margin-bottom:0}
  .deck-slot .card h3::after{content:"";display:block;clear:both}
  .deck-slot .card p{font-size:13px;line-height:1.5;margin-top:10px;clear:both}
  .deck-slot .card ul{margin-top:10px;gap:5px}
  .deck-slot .card li{font-size:12.5px}
  .deck-slot .card .meta{margin-top:12px;padding-top:10px;font-size:10px;gap:14px}
  .deck-slot .card .meta b{font-size:15px}
  .deck-slot .card .more{margin-top:12px;padding:10px 14px;font-size:12.5px}
  .deck-slot .card .mk-gauge{width:56px;height:56px;right:10px;top:10px}
  .deck-slot .card .mk-gauge b{width:42px;height:42px;font-size:13px}
  .deck-slot .card .mk-sk{height:8px;margin-top:10px}
  .deck-slot .card .mk-sk2{height:5px;margin-top:6px}
  .deck-slot .card .mk-cta{height:14px;width:48px;margin-top:8px}
  .deck-slot .card .mk-bar{font-size:10px}
  .deck-slot .card .mk-type{font-size:11px;padding:6px 8px;margin-top:8px}
  .deck-slot .card .mk-auto{padding-top:32px}
  .deck-slot .card .mk-node{width:38px;height:28px}
  .deck-slot .card .mk-node svg{width:15px;height:15px}
  /* пятна сзади — мягче и ниже шапки */
  .services.deck::before,.services.deck::after{width:360px;height:360px;opacity:.22;filter:blur(80px)}
  .services.deck::before{left:-80px;top:40px}
  .services.deck::after{opacity:.16;top:200px}
  .deck-slot .card{box-shadow:0 18px 44px rgba(35,35,59,.14);cursor:pointer;
    transition:transform .55s var(--ease),box-shadow .55s,border-color .55s}
  .deck-slot:nth-child(1) .card{transform:rotate(-5deg)}
  .deck-slot:nth-child(2) .card{transform:rotate(2deg)}
  .deck-slot:nth-child(3) .card{transform:rotate(6deg)}
  .deck-slot .card:hover,.deck-slot .card.up{transform:rotate(0) translateY(-16px) scale(1.03);
    box-shadow:0 36px 70px rgba(99,102,241,.3);border-color:transparent}
  .deck-slot:has(.card.up),.deck-slot:has(.card:hover){z-index:6}
}
@media(max-width:920px){
  .deck-dots{display:none}
  .card .mk{height:96px}
  /* сетка не должна растягиваться под содержимое мокапов (nowrap-текст печати) */
  .services.deck{max-width:100%;grid-template-columns:minmax(0,1fr);overflow:hidden}
  .deck-slot,.deck-slot .card{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
  .deck-slot{overflow:visible}   /* hidden обрезал тень карточки по прямоугольнику слота — серые острые углы */
  .deck-slot .card .mk{width:100%}
  .mk-type{position:relative;display:block;width:0;max-width:100%}
}
.card .mk{contain:inline-size}
.mk-type{max-width:100%}
@media(prefers-reduced-motion:reduce){
  .mk-sk,.mk-gauge,.mk-type,.mk-typing i,.mk-node.hot,.mk-wire::after,.card.up .glyph,.card:hover .glyph,
  .services.deck::before,.services.deck::after,.deck-dots i.on::after{animation:none}
  .mk-type{width:100%}
}

/* ===== карточки услуг без рамок: ни обводки, ни градиентной кромки при подъёме ===== */
.services.deck .card{border:0}
.services.deck .card::before{display:none}

/* ===== Local AI: переливающийся "Your data.", живой монитор вместо терминала, плитки с бликом (v1.5.0) ===== */
.local h2 .grad-text{
  background:linear-gradient(100deg,#6366F1 0%,#8B5CF6 25%,#38BDF8 50%,#8B5CF6 75%,#6366F1 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:laiShimmer 4s linear infinite}
@keyframes laiShimmer{to{background-position:250% 0}}

/* монитор */
.term.mon{font-size:12.5px;line-height:1.6}
.term-tag{margin-left:auto;font-size:11px;color:#6B6B7B;letter-spacing:.02em}
.mon-body{padding:18px 24px 20px;min-height:0}
.mon-row{display:flex;align-items:center;gap:12px;margin:8px 0}
.mon-lab{color:#8A8A9B;width:82px;flex:none}
.mon-model{color:#A5B4FC}
.mon-val{color:#7DD3FC;width:64px;text-align:right;margin-left:auto;flex:none}
.mon-ok{color:#6EE7B7}
.mon-bar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.mon-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--grad);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.mon-big{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.mon-big b{font-family:'Inter Tight';font-weight:800;font-size:26px;letter-spacing:-.03em;color:#fff;min-width:44px}
.mon-req{margin-left:auto;color:#8A8A9B;font-size:11.5px}
.mon-req b{font:inherit;font-weight:600;color:#fff;min-width:0}
.mon-spark{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:12px}
.mon-spark i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(#38BDF8,#6366F1);transform-origin:bottom;animation:laiSpark 1.8s ease-in-out infinite}
@keyframes laiSpark{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

/* плитки: бегущий градиентный блик по кромке + мягкий отсвет по стеклу */
@property --laiA{syntax:"<angle>";inherits:false;initial-value:0deg}
.local-stats>div{position:relative;overflow:hidden}
.local-stats>div::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--laiA),transparent 62%,#6366F1 78%,#38BDF8 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:laiSweep 5s linear infinite}
.local-stats>div:nth-child(2)::before{animation-delay:-1.7s}
.local-stats>div:nth-child(3)::before{animation-delay:-3.4s}
@keyframes laiSweep{to{--laiA:360deg}}
.local-stats>div::after{content:"";position:absolute;left:-40%;top:0;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);transform:skewX(-20deg);
  animation:laiSheen 5s ease-in-out infinite}
.local-stats>div:nth-child(2)::after{animation-delay:1.7s}
.local-stats>div:nth-child(3)::after{animation-delay:3.4s}
@keyframes laiSheen{0%,60%{left:-40%}100%{left:130%}}
.local-stats>div>*{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){
  .local h2 .grad-text,.mon-spark i,.local-stats>div::before,.local-stats>div::after{animation:none}
  .local-stats>div::before{display:none}
}

/* Local AI: блок компактнее по высоте (внутренние отступы 110px → 72px, на мобиле 56px) */
.local{padding:72px 0}
@media(max-width:640px){.local{padding:56px 0}}

/* ===== v1.6.0 — мобильный блок услуг: свайп-колода (≤920px) ===== */
@media(max-width:920px){
  .services.deck{display:block;position:relative;height:var(--deck-h,660px);overflow:visible;padding-bottom:0}
  .deck-slot{position:absolute;left:12px;right:12px;top:32px;width:auto;
    transform-origin:top center;
    transition:transform .55s var(--ease),opacity .55s var(--ease),filter .55s var(--ease)}
  /* карточки под верхней спрятаны полностью — никаких торчащих углов сверху и снизу */
  .deck-slot.p0{transform:none;z-index:3;opacity:1}
  .deck-slot.p1,.deck-slot.p2{transform:none;opacity:0;z-index:1;pointer-events:none}
  .deck-slot.p1{z-index:2}
  .deck-slot.out{transform:translateX(-120%) rotate(-14deg);opacity:0;z-index:4}
  .deck-slot .card{box-shadow:none;cursor:grab;touch-action:pan-y}
  .deck-slot.p1 .card,.deck-slot.p2 .card{pointer-events:none}
  .deck-dots{display:flex;margin-top:18px}
  .deck-dots i.on::after{animation:none;width:100%}
  .deck-hint{display:block;text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-top:10px}
}
@media(min-width:921px){.deck-hint{display:none}}


/* ===== v1.7.0 — Local AI: калькулятор Cloud vs Local вместо монитора ===== */
.local > .wrap.calc-head{display:block;padding-bottom:0}
.local > .wrap.calc{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-top:28px}
.calc-left p{max-width:440px}
.calc-range{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.1);margin:44px 0 0;cursor:pointer;touch-action:none;outline:none}
.calc-range:focus-visible{box-shadow:0 0 0 3px rgba(99,102,241,.45)}
.calc-range i{position:absolute;left:0;top:0;height:100%;width:var(--w,45%);border-radius:3px;background:var(--grad);pointer-events:none}
.calc-range b{position:absolute;top:50%;left:var(--w,45%);width:22px;height:22px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgba(99,102,241,.3),0 8px 20px rgba(0,0,0,.4);pointer-events:none;transition:box-shadow .2s}
.calc-range:active b{box-shadow:0 0 0 9px rgba(99,102,241,.35),0 8px 20px rgba(0,0,0,.4)}
.calc-range em{position:absolute;left:var(--w,45%);top:-30px;transform:translateX(-50%);font-style:normal;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:#A5B4FC;white-space:nowrap;pointer-events:none}
.calc-scale{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;color:#6B6B7B;margin-top:10px}
.calc-bill{display:flex;gap:16px}
.calc-box{flex:1;border-radius:18px;padding:22px 24px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.04);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);position:relative;overflow:hidden}
.calc-box small{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#8A8A9B}
.calc-box b{display:block;font-family:'Inter Tight';font-weight:800;font-size:44px;letter-spacing:-.04em;line-height:1;margin-top:12px;font-variant-numeric:tabular-nums}
.calc-box span{display:block;font-size:12.5px;color:#9A9AAB;margin-top:8px;line-height:1.5}
.calc-box.cloud b{color:#F87171}
.calc-box.cloud::after{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;background:radial-gradient(closest-side,rgba(239,68,68,.22),transparent);pointer-events:none}
.calc-box.local-box{border-color:rgba(99,102,241,.35);box-shadow:0 0 0 1px rgba(99,102,241,.15),0 20px 50px -20px rgba(99,102,241,.5)}
@media(max-width:900px){
  .local > .wrap.calc{grid-template-columns:1fr;gap:28px}
}
.calc-chips{display:none}
/* мобильный калькулятор: две цифры в строку, обещания чипами, ползунок внизу экрана под большой палец */
@media(max-width:640px){
  .local{display:flex;flex-direction:column;min-height:92svh;padding:48px 0 26px}
  .local > .wrap.calc-head{padding:0 22px}
  .local > .wrap.calc{flex:1;display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto minmax(36px,1fr) auto auto;gap:0 12px;padding:16px 22px 0}
  .calc-left,.calc-bill{display:contents}
  .calc-left p{grid-column:1/3;grid-row:1;margin:0;max-width:none}
  /* .calc-box.local-box в базовых правилах имеет больший вес — гасим рамку и свечение явно */
  .calc-box,.calc-box.cloud,.calc-box.local-box{
    grid-row:2;background:none;border:0;padding:0;border-radius:0;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;margin-top:26px;min-width:0}
  .calc-box::after{display:none}
  .calc-box.cloud{grid-column:1}
  .calc-box.local-box{grid-column:2;text-align:right}
  .calc-box small{font-size:10px}
  .calc-box small::after{content:" / MO"}
  /* сумма подстраивается под ширину экрана, чтобы колонки не наезжали друг на друга */
  .calc-box b{font-size:clamp(26px,9vw,40px);margin-top:8px;white-space:nowrap;letter-spacing:-.045em}
  .calc-box span{display:none}
  .calc-chips{grid-column:1/3;grid-row:3;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
  .calc-chips i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#C9CBE0;
    padding:6px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.12);display:inline-flex;align-items:center;gap:6px}
  .calc-chips i::before{content:"";width:5px;height:5px;border-radius:50%;background:#22C55E;box-shadow:0 0 6px rgba(34,197,94,.7)}
  .calc-range{grid-column:1/3;grid-row:5;margin:34px 0 0;align-self:end}
  .calc-range b{width:26px;height:26px}
  .calc-scale{grid-column:1/3;grid-row:6}
}

/* мобильная колода: без теней над и под карточкой */
@media(max-width:920px){
  .deck-slot .card,.deck-slot .card:hover,.deck-slot .card.up{box-shadow:none}
}

/* терминал результатов на странице кейса — статичный лог */
.kdp-term{font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.9;color:#D5D7E2;padding:18px 24px}
.kdp-term .term-ok{color:#28C840;margin-right:8px}
.kdp-term .term-warn{color:#F59E0B;margin-right:8px}
@media(max-width:640px){
  .shot-kdp{padding:14px 14px 0}
  .kdp-flow{font-size:9px;gap:4px}
  .kdp-chip{font-size:9px;left:14px;bottom:12px}
  .kdp-term{font-size:11px;padding:14px 16px}
}

/* ===== v1.8.1 — KDP case: карта всех нод и карточки по каждой ===== */
.pipe.nodemap{width:min(1080px,94%);padding:32px clamp(22px,4vw,40px) 22px}
.nc-stage{margin:44px 0 16px}
.nc-stage:first-of-type{margin-top:0}
.nc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ncard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 22px 24px;transition:transform .45s var(--ease),box-shadow .45s}
.ncard:hover{transform:translateY(-4px);box-shadow:0 26px 60px -28px rgba(30,30,70,.25)}
.nc-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.nc-i{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.nc-t{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:8px;background:#F1F1F6;color:var(--muted)}
.nc-t.t-model{background:#EEEFFB;color:var(--indigo)}
.nc-t.t-http{background:#E6F6FD;color:#0284C7}
.nc-t.t-if,.nc-t.t-loop{background:#FFF4DE;color:#B45309}
.nc-t.t-trigger{background:#E8F9EE;color:#15803D}
.ncard h4{font-family:'Inter Tight';font-weight:700;font-size:18px;letter-spacing:-.02em;margin:0 0 8px}
.ncard p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
@media(max-width:920px){.nc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .nc-grid{grid-template-columns:1fr}
  .pipe.nodemap{padding:22px 16px 16px}
}

/* ===== v1.8.3 — KDP case: схема в стиле кейса видеофабрики, шире под 33 ноды ===== */
.pipe .node.warn .nb{border-color:#F59E0B;background:#FFF1D6;box-shadow:0 0 0 4px rgba(245,158,11,.18)}


/* ===== v1.9.0 — плитка KDP Book Factory: живой прогон + три обложки веером ===== */
.shot-kdp{aspect-ratio:16/6.6;background:linear-gradient(180deg,#F7F7FB,#EEEFF6);padding:26px 30px}
.shot-kdp::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#D8D9E4 1px,transparent 1px);background-size:20px 20px;opacity:.7;pointer-events:none}
.shot-kdp .inner{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;align-items:center;position:relative}
.kdp-glow{position:absolute;right:-90px;top:-110px;width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(139,92,246,.28),rgba(56,189,248,.12) 60%,transparent)}
.kdp-left{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
.kdp-flow{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#6B6B7B}
.kdp-flow span{padding:5px 9px;border-radius:9px;background:#fff;border:1px solid #E3E4EE;white-space:nowrap;transition:all .4s var(--ease)}
.kdp-flow span.done{color:var(--ink);border-color:#CBEFD6;background:#F0FBF4}
.kdp-flow span.on{border-color:var(--indigo);color:var(--indigo);background:#EEEFFB;box-shadow:0 0 0 4px rgba(99,102,241,.14)}
.kdp-flow i{flex:1;height:2px;background:#DADBE6;min-width:6px;position:relative;overflow:hidden}
.kdp-flow i::after{content:"";position:absolute;left:-40%;top:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--indigo),transparent);animation:mkRun 1.6s linear infinite}
/* терминал: шапка + бегущий поток процессов */
.kdp-log{background:var(--ink);border-radius:16px;overflow:hidden;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#D5D7E2;box-shadow:0 24px 50px -24px rgba(11,11,20,.7)}
.kdp-log-head{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:10.5px;color:#8A8A9B}
.kdp-log-head b{font-weight:500;color:#28C840}
.kdp-log-body{height:132px;padding:8px 14px 10px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;line-height:1.75}
.kdp-log-body div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);animation:kdpLine .35s var(--ease) forwards}
.kdp-log-body b{font-weight:500;margin-right:7px;color:#28C840}
.kdp-log-body b.r{color:#7DD3FC}.kdp-log-body b.w{color:#F59E0B}.kdp-log-body b.m{color:#A5B4FC}
.kdp-log-body u{text-decoration:none;color:#6B6B7B;margin-right:8px}
@keyframes kdpLine{to{opacity:1;transform:none}}
/* цифры — плитками */
.kdp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kdp-stats > div{background:#fff;border:1px solid #E3E4EE;border-radius:14px;padding:12px 14px;box-shadow:0 10px 24px -16px rgba(30,30,70,.25)}
.kdp-stats b{display:block;font-family:'Inter Tight';font-weight:800;font-size:26px;letter-spacing:-.04em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kdp-stats span{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;color:#6B6B7B;margin-top:5px}
/* веер обложек */
.kdp-fan{position:relative;height:100%;min-height:270px}
.kdp-cov{position:absolute;width:38%;aspect-ratio:6/9;border-radius:5px 10px 10px 5px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.06);
  box-shadow:0 30px 50px -22px rgba(30,30,70,.55),inset 7px 0 12px -9px rgba(0,0,0,.18);transform-origin:bottom center;transition:transform .9s var(--ease)}
.kdp-cov .top{height:44%;padding:9% 8% 0;position:relative;overflow:hidden}
.kdp-cov .mot{position:absolute;right:-12%;bottom:-12%;width:52%;aspect-ratio:1;border-radius:22%;background:#fff;opacity:.2}
.kdp-cov b{display:block;font-family:'Inter Tight';font-weight:800;font-size:clamp(11px,1.2vw,17px);line-height:1;letter-spacing:-.03em;position:relative;color:var(--ink)}
.kdp-cov b em{font-style:normal;display:block}
.kdp-cov .band{font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.04em;color:#fff;background:var(--ink);padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kdp-cov .meth{font-size:8px;color:#5B5B66;padding:7% 8% 0;line-height:1.35}
.kdp-cov .ic{display:flex;gap:4px;padding:6% 8% 0}
.kdp-cov .ic i{width:13px;height:13px;border-radius:4px;background:#F3F3F8;border:1px solid #E3E4EE}
.kdp-cov .bd{position:absolute;right:7%;bottom:6%;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:7.5px;line-height:1;color:#fff;text-align:center}
.kdp-cov.c1{left:0;bottom:-10%;transform:rotate(-12deg) translateY(30px)}
.kdp-cov.c1 .top{background:linear-gradient(160deg,#DFF5E6,#BFE9CC)}.kdp-cov.c1 .bd{background:#15803D}.kdp-cov.c1 b em{color:#15803D}
.kdp-cov.c2{left:50%;margin-left:-19%;bottom:-3%;z-index:2;transform:translateY(30px)}
.kdp-cov.c2 .top{background:linear-gradient(160deg,#E6E7FF,#C7C9F5)}.kdp-cov.c2 .bd{background:var(--indigo)}
.kdp-cov.c2 b em{background:linear-gradient(100deg,#6366F1,#38BDF8);-webkit-background-clip:text;background-clip:text;color:transparent}
.kdp-cov.c3{right:0;bottom:-10%;transform:rotate(11deg) translateY(30px)}
.kdp-cov.c3 .top{background:linear-gradient(160deg,#FFE9DA,#F9CDAF)}.kdp-cov.c3 .bd{background:#C2410C}.kdp-cov.c3 b em{color:#C2410C}
.kdp-fan.up .kdp-cov.c1{transform:rotate(-12deg)}.kdp-fan.up .kdp-cov.c2{transform:none}.kdp-fan.up .kdp-cov.c3{transform:rotate(11deg)}
.kdp-stamp{position:absolute;right:2%;top:4%;z-index:4;border:2.5px solid #16A34A;color:#16A34A;font-family:'Inter Tight';font-weight:800;font-size:13px;padding:4px 9px;border-radius:5px;letter-spacing:.08em;
  background:rgba(255,255,255,.75);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transform:rotate(-10deg) scale(1.6);transition:all .35s cubic-bezier(.2,1.4,.4,1)}
.kdp-stamp.in{opacity:1;transform:rotate(-10deg) scale(1)}
.tile.kdp-tile:hover .shot .inner{transform:none}
@media(max-width:920px){
  .shot-kdp{aspect-ratio:auto;padding:20px 20px 0}
  .shot-kdp .inner{grid-template-columns:1fr;gap:18px}
  .kdp-fan{min-height:230px;margin-top:6px}
  .kdp-cov{width:40%}
}
@media(max-width:640px){
  .shot-kdp{padding:16px 16px 0}
  .kdp-flow{font-size:10px;gap:4px}.kdp-flow span{padding:4px 7px}
  .kdp-log-body{height:110px;font-size:10.5px}
  .kdp-stats{gap:8px}.kdp-stats > div{padding:10px 12px}.kdp-stats b{font-size:22px}
  .kdp-fan{min-height:200px}
  .kdp-cov{width:44%}.kdp-cov .meth{display:none}
  .kdp-stamp{font-size:11px}
}

/* ===== v1.9.1 — передняя книга открывается и листается (CSS 3D) ===== */
.kdp-fan{perspective:1400px}
.kdp-cov.c2.kdp-book{overflow:visible;background:none;border:0;box-shadow:none;transform-style:preserve-3d}
.kdp-book > *{position:absolute;inset:0;border-radius:5px 10px 10px 5px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kdp-base{background:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:0 30px 50px -22px rgba(30,30,70,.55);overflow:hidden;transform:translateZ(-1px)}
/* страницы: лицо (правая) и оборот (левая после переворота) */
.kdp-page{transform-origin:left center;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.3,.7,.2,1);backface-visibility:visible;border-radius:0}
.kdp-page .pf{border-radius:0 6px 6px 0;border:1px solid #ECEDF3;box-shadow:inset 6px 0 10px -8px rgba(0,0,0,.14)}
.kdp-page .pb{transform:rotateY(180deg);border-radius:6px 0 0 6px;border:1px solid #ECEDF3;box-shadow:inset -6px 0 10px -8px rgba(0,0,0,.14)}
.kdp-page .pf,.kdp-page .pb{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* обложка: лицо и внутренняя сторона */
.kdp-face{transform-origin:left center;transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.3,.7,.2,1);transform:translateZ(4px);backface-visibility:visible;border-radius:0;z-index:5}
.kdp-face .cf,.kdp-face .cb{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:5px 10px 10px 5px;overflow:hidden}
.kdp-face .cf{background:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:inset 7px 0 12px -9px rgba(0,0,0,.18)}
.kdp-face .cb{transform:rotateY(180deg);background:linear-gradient(90deg,#F4F1EA,#FBFAF6);border:1px solid #E8E4DA;border-radius:10px 5px 5px 10px;box-shadow:inset -8px 0 14px -10px rgba(0,0,0,.22)}
/* при открытии книга чуть отъезжает вправо, чтобы разворот уместился в кадре */
.kdp-book{transition:transform .9s var(--ease),margin-left 1.2s var(--ease)}
.kdp-fan.up .kdp-book.open{margin-left:-2%;transform:none}
@media(prefers-reduced-motion:reduce){.kdp-book.open .kdp-face,.kdp-page.flip{transition:none}}

/* ===== v1.9.2 — страницы логбука по формуле Jeppesen, порядок слоёв при перелистывании, плитки цифр ===== */
.kdp-page .pf,.kdp-page .pb,.kdp-base .lb-page{position:absolute;inset:0;background:#fff;overflow:hidden}
.lb-page{position:absolute;inset:0;padding:9% 7% 8%;font-family:'JetBrains Mono',monospace;color:#3A3A46}
.lb-h{font-size:6px;letter-spacing:.1em;color:#6B6B7B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid #C9CAD8;padding-bottom:3px}
.lb-cols{display:flex;margin-top:5px;border:1px solid #C9CAD8;border-bottom:0;background:#F4F4F8}
.lb-cols span{flex:var(--w) 1 0;font-size:4.2px;line-height:1.15;padding:3px 2px;border-right:1px solid #C9CAD8;color:#5B5B66;text-transform:uppercase;overflow:hidden;min-width:0}
.lb-cols span:last-child{border-right:0}
.lb-rows{height:calc(var(--n) * 8px);border:1px solid #C9CAD8;background:repeating-linear-gradient(180deg,transparent 0 7px,#DCDDE7 7px 8px)}
.lb-tot{border:1px solid #C9CAD8;border-top:0}
.lb-tot span{display:block;font-size:4.2px;letter-spacing:.06em;padding:2px 3px;border-bottom:1px solid #DCDDE7;color:#5B5B66;background:#FAFAFC}
.lb-tot span:last-child{border-bottom:0}
.lb-foot{position:absolute;left:7%;right:7%;bottom:5%;font-size:5px;color:#9A9AAB;text-align:center}
.lb-list{margin:6px 0 0;padding:0 0 0 9px;font-size:5.2px;line-height:1.55;color:#3A3A46}
.lb-list li{margin:0 0 2px;padding-left:1px}
.lb-def{display:grid;grid-template-columns:auto 1fr;gap:2px 5px;margin-top:6px;font-size:5px;line-height:1.35}
.lb-def b{font-weight:600;color:var(--ink)}
.lb-boxes{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.lb-boxes > div{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.lb-boxes small{width:100%;font-size:4.6px;letter-spacing:.06em;color:#5B5B66}
.lb-boxes i{width:9px;height:9px;border:1px solid #C9CAD8;border-radius:2px}
.lb-line{flex:1;height:0;border-bottom:1px solid #C9CAD8;margin-top:6px}
/* слои: translateZ до поворота = "к зрителю" в системе книги; перевёрнутые страницы ложатся друг на друга слева */
.kdp-page.p1{transform:translateZ(3px)}.kdp-page.p2{transform:translateZ(2px)}.kdp-page.p3{transform:translateZ(1px)}
.kdp-page.p1.flip{transform:translateZ(1px) rotateY(-172deg)}
.kdp-page.p2.flip{transform:translateZ(2px) rotateY(-174deg)}
.kdp-page.p3.flip{transform:translateZ(3px) rotateY(-176deg)}
.kdp-book.open .kdp-face{transform:translateZ(-2px) rotateY(-168deg)}
.kdp-base{z-index:0}
/* плитки цифр */
.kdp-stats > div{position:relative;padding:12px 14px 12px 16px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.kdp-stats > div::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--grad)}
.kdp-stats > div:hover{transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(30,30,70,.35)}
.kdp-stats small{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;color:#8A8A9B}
.kdp-stats b{margin-top:6px}
.kdp-stats span{margin-top:3px}
.kdp-dots{display:grid;grid-template-columns:repeat(11,1fr);gap:3px;margin-top:9px}
.kdp-dots i{display:block;aspect-ratio:1;border-radius:2px;background:#E3E4EE;transform:scale(.6);opacity:.5;transition:all .3s}
.kdp-dots i.on{transform:none;opacity:1;background:#C9CAD8}
.kdp-dots i.on.m{background:var(--indigo)}
.kdp-pips{display:flex;gap:4px;margin-top:9px;flex-wrap:wrap}
.kdp-pips i,.kdp-tags i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:8.5px;padding:3px 6px;border-radius:7px;border:1px solid #E3E4EE;color:#8A8A9B;background:#FAFAFC;white-space:nowrap}
.kdp-pips i.w{border-color:#F5D08A;color:#B45309;background:#FFF7E6}
.kdp-pips i.g{border-color:#CBEFD6;color:#15803D;background:#F0FBF4}
.kdp-tags{display:flex;gap:4px;margin-top:9px;flex-wrap:wrap}
.kdp-tags i{color:var(--ink)}
@media(max-width:640px){
  .kdp-dots{grid-template-columns:repeat(11,1fr)}
  .kdp-pips i,.kdp-tags i{font-size:7.5px;padding:2px 5px}
  .kdp-stats small{font-size:8px}
}

/* ===== v1.9.3 — цифры в плитке KDP: три плавающие наклейки ===== */
.kdp-stats.kdp-stickers{display:flex;gap:12px;align-items:flex-end;padding:6px 0 4px;grid-template-columns:none}
.kdp-stickers .sk{display:inline-flex;align-items:baseline;gap:9px;padding:11px 16px;border-radius:14px;background:#fff;border:0;
  box-shadow:0 14px 30px -12px rgba(30,30,70,.38);transform-origin:center;animation:kdpFloat 5s ease-in-out infinite}
.kdp-stickers .sk::before{display:none}
.kdp-stickers .sk:hover{transform:none;box-shadow:0 14px 30px -12px rgba(30,30,70,.38)}
.kdp-stickers .sk b{margin:0;font-family:'Inter Tight';font-weight:800;font-size:30px;letter-spacing:-.045em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kdp-stickers .sk span{margin:0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.02em;color:var(--muted)}
.kdp-stickers .sk.a{--r:-4deg}
.kdp-stickers .sk.b{--r:2deg;animation-delay:-1.7s;background:var(--ink)}
.kdp-stickers .sk.b b{background:none;-webkit-text-fill-color:#fff;color:#fff}
.kdp-stickers .sk.b span{color:#C9CBE0}
.kdp-stickers .sk.c{--r:-2deg;animation-delay:-3.4s;background:var(--grad);box-shadow:0 16px 34px -12px rgba(99,102,241,.55)}
.kdp-stickers .sk.c b{background:none;-webkit-text-fill-color:#fff;color:#fff}
.kdp-stickers .sk.c span{color:#E0E7FF}
@keyframes kdpFloat{0%,100%{transform:rotate(var(--r)) translateY(0)}50%{transform:rotate(calc(var(--r) + 1.5deg)) translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.kdp-stickers .sk{animation:none;transform:rotate(var(--r))}}
@media(max-width:640px){
  .kdp-stats.kdp-stickers{gap:8px;flex-wrap:wrap}
  .kdp-stickers .sk{padding:9px 12px;gap:7px}
  .kdp-stickers .sk b{font-size:24px}.kdp-stickers .sk span{font-size:10px}
}

/* ===== v1.9.4 — наклейки без плавания (как в макете), левая сторона разворота и заполнение страниц ===== */
.kdp-stickers .sk{animation:none;transform:rotate(var(--r));padding:10px 14px;gap:8px}
.kdp-stickers .sk b{font-size:28px}
.kdp-stickers .sk span{font-size:10px}
.kdp-stickers .sk.a{--r:-4deg}.kdp-stickers .sk.b{--r:2deg}.kdp-stickers .sk.c{--r:-2deg}
/* левая стопка: страница слева от корешка, видна только у открытой книги, содержимое подставляет JS */
.kdp-lstack{position:absolute;top:0;bottom:0;left:auto;right:100%;width:100%;background:#fff;border-radius:10px 5px 5px 10px;border:1px solid #ECEDF3;
  box-shadow:inset -8px 0 12px -9px rgba(0,0,0,.16),0 30px 50px -22px rgba(30,30,70,.45);opacity:0;transition:opacity .35s;transform:translateZ(0)}
.kdp-book.open .kdp-lstack{opacity:1;transition-delay:.75s}
/* когда обложка легла налево, она больше не нужна — иначе её изнанка накрывает левую страницу */
.kdp-book.opened .kdp-face{opacity:0;transition:opacity .25s}
.lb-title{margin-top:14%}
.lb-title b{display:block;font-family:'Inter Tight';font-weight:800;font-size:11px;letter-spacing:-.02em;color:var(--ink)}
.lb-title span{display:block;font-size:6px;line-height:1.4;color:#6B6B7B;margin-top:4px}
.kdp-lstack .lb-page{position:absolute;inset:0}
/* страницы логбука заполняют высоту целиком */
.lb-page{display:flex;flex-direction:column}
.lb-rows{flex:1;height:auto;min-height:40px}
/* заполненные страницы: настоящие строки записей вместо пустой линовки */
.lb-body{flex:1;display:flex;flex-direction:column;border:1px solid #C9CAD8;border-top:0;min-height:0;overflow:hidden}
.lb-r{flex:1;display:flex;min-height:0;border-bottom:1px solid #DCDDE7}
.lb-r:last-child{border-bottom:0}
.lb-r span{flex:var(--w) 1 0;min-width:0;padding:0 2px;font-family:'JetBrains Mono',monospace;font-size:4.2px;line-height:1;
  display:flex;align-items:center;border-right:1px solid #E7E8F0;color:#2F2F3A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-r span:last-child{border-right:0;color:#5B5B66}
.lb-tot span{display:flex;justify-content:space-between;gap:6px}
/* .kdp-cov b задаёт крупный шрифт обложки — внутри страниц он не нужен */
.lb-page b{font-size:inherit;line-height:inherit;letter-spacing:normal}
.lb-tot b{font-weight:600;color:var(--ink)}
.lb-title b{font-size:11px;line-height:1.05;letter-spacing:-.02em}
/* перевёрнутая страница уступает место левой странице разворота — иначе видно две копии */
.kdp-page.landed{opacity:0}
.lb-boxes i{display:grid;place-items:center;font-size:6px;line-height:1;font-style:normal}
.lb-boxes i.on{background:#F0FBF4;border-color:#BFE9CC;color:#15803D}
.lb-boxes em{font-style:normal;font-size:4.4px;color:#9A9AAB;margin-left:auto}
.lb-list{display:flex;flex-direction:column;justify-content:space-between}
.lb-list,.lb-def,.lb-boxes{flex:1}
.lb-foot{position:static;margin-top:6px}
/* мобильный разворот работает ровно так же, как десктопный: отдельная левая
   страница + скрытая обложка + скрытые перевёрнутые страницы. Чтобы две страницы
   поместились в плитку, при открытии книга ужимается и встаёт правой половиной по центру. */
@media(max-width:920px){
  /* книга НЕ уменьшается: она просто отъезжает вправо, освобождая место левой странице
     (книга 50–88% ширины блока, левая страница 12–50%) */
  .kdp-fan.up .kdp-book.open{width:38%;margin-left:0}
  .kdp-lstack{box-shadow:inset -6px 0 10px -8px rgba(0,0,0,.16),0 22px 40px -20px rgba(30,30,70,.4)}
  .lb-page{padding:8% 6% 6%}
}


/* ===== v2.1.1 — производительность на мобильном =====
   235 бесконечных анимаций, 54 размытия и 24 backdrop-filter одновременно
   заставляют телефон перерисовывать почти весь документ каждый кадр. */
@media(max-width:820px){
  /* браузер не рисует то, что за экраном, и останавливает анимации внутри */
  /* колода услуг сюда не входит: её высоту JS меряет по самой высокой карточке,
     а пропущенная отрисовка даёт неверный offsetHeight — карточка вылезала на соседний блок */
  /* content-visibility:auto включает paint-containment, а он обрезает содержимое по
     ПРЯМОУГОЛЬНИКУ, игнорируя border-radius — отсюда серые острые углы у всех плиток.
     Оставляем только для блоков без скруглённого содержимого. */
  .pipe,.ncard{content-visibility:auto;contain-intrinsic-size:1px 560px}
  /* пока блок не появился на экране, его анимации стоят */
  .reveal:not(.in) *,.reveal:not(.in)::before,.reveal:not(.in)::after{animation-play-state:paused !important}
  /* размытия — самая дорогая операция на телефоне: уменьшаем радиусы */
  .aurora,.kdp-glow,.glow,.flux i,.blob{filter:blur(28px) !important}
  .shot .glow,.stage .glow{filter:blur(22px) !important}
  /* стекло оставляем только у шапки, остальным хватает полупрозрачного фона */
  .calc-box,.mk,.kdp-log,.term,.stat,.glass{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  nav.scrolled{backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
  /* тяжёлые декоративные слои не нужны на маленьком экране */
  .services.deck::before,.services.deck::after{display:none}
  .word{will-change:auto}
}
@media(max-width:640px){
  /* бегущие блики по кромкам и мерцания — заметны только вблизи, на телефоне выключены */
  .local-stats>div::before,.local-stats>div::after,.mon-spark i,.kdp-flow i::after,.mk-wire::after{animation:none !important}
  .local-stats>div::before{display:none}
}

/* вкладка не на экране — всё замирает */
html.wc-hidden *,html.wc-hidden *::before,html.wc-hidden *::after{animation-play-state:paused !important}

/* ===== v2.2.0 — мобильная колода услуг: веер в перспективе, карточки белая / чёрная / градиент ===== */
@media(max-width:920px){
  .services.deck{perspective:1100px;transform-style:preserve-3d;overflow:visible;padding-top:10px}
  .deck-slot{transform-origin:top center;transition:transform .8s var(--ease),filter .8s var(--ease),opacity .4s var(--ease)}
  .deck-slot.p0{transform:none;z-index:3;opacity:1;filter:none}
  /* перспектива сжимает шаг: чем глубже карточка, тем меньше видимый отступ,
     поэтому смещение растёт нелинейно — на экране шаги получаются одинаковыми */
  /* перспектива УМЕНЬШАЕТ карточку (origin сверху), поэтому её низ поднимается:
     при сдвиге 38/88px нижний край задней карточки оказывался выше верхней и она пропадала.
     Сдвиг подобран так, чтобы из-под верхней выглядывало по ~20px каждой. */
  .deck-slot.p1{transform:translateY(74px) translateZ(-120px) rotateX(4deg);z-index:2;opacity:1;filter:none}
  .deck-slot.p2{transform:translateY(138px) translateZ(-240px) rotateX(8deg);z-index:1;opacity:1;filter:none}
  /* углы карточек в глубине сохраняем: скругление и обрезка на самой карточке */
  .deck-slot.p1 .card,.deck-slot.p2 .card{border-radius:20px;overflow:hidden;backface-visibility:hidden}
  /* верхняя карточка уходит вглубь стопки, а не улетает вбок */
  .deck-slot.out{transform:translateY(200px) translateZ(-370px) rotateX(12deg);opacity:0;z-index:0}
  .deck-slot.p1 .card,.deck-slot.p2 .card{pointer-events:none}
  .deck-slot .card{box-shadow:0 30px 60px -26px rgba(30,30,70,.5);border:1px solid #ECEDF3}
  /* тёмная карточка — Local AI */
  .deck-slot:nth-child(2) .card{background:var(--ink);color:#fff;border-color:#2A2B38}
  .deck-slot:nth-child(2) .card h3,.deck-slot:nth-child(2) .card li{color:#fff}
  .deck-slot:nth-child(2) .card p{color:#B9BAC6}
  .deck-slot:nth-child(2) .card li::before{background:#A5B4FC}
  .deck-slot:nth-child(2) .card .mk{background:#15151C}
  .deck-slot:nth-child(2) .card .mk-sk{background:#fff}.deck-slot:nth-child(2) .card .mk-sk2{background:#3B3C4A}
  .deck-slot:nth-child(2) .card .mk-type{background:#1C1D2A;color:#fff}
  .deck-slot:nth-child(2) .card .mk-bar{color:#9CA3AF}
  .deck-slot:nth-child(2) .card .glyph{background:#1C1D3A}.deck-slot:nth-child(2) .card .glyph svg{stroke:#A5B4FC}
  .deck-slot:nth-child(2) .card .meta{border-top-color:rgba(255,255,255,.12);color:#9CA3AF}
  .deck-slot:nth-child(2) .card .more{background:#fff;color:var(--ink);border-color:#fff}
  /* градиентная карточка — Automation */
  .deck-slot:nth-child(3) .card{background:linear-gradient(150deg,#6366F1,#8B5CF6 60%,#38BDF8);color:#fff;border:0}
  .deck-slot:nth-child(3) .card h3,.deck-slot:nth-child(3) .card li{color:#fff}
  .deck-slot:nth-child(3) .card p{color:#E0E7FF}
  .deck-slot:nth-child(3) .card li::before{background:#fff}
  .deck-slot:nth-child(3) .card .mk{background:rgba(255,255,255,.16)}
  .deck-slot:nth-child(3) .card .mk-node{background:rgba(255,255,255,.92);border-color:transparent}
  .deck-slot:nth-child(3) .card .mk-node.hot{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.35)}
  .deck-slot:nth-child(3) .card .mk-wire{background:rgba(255,255,255,.45)}
  .deck-slot:nth-child(3) .card .mk-wire::after{background:linear-gradient(90deg,transparent,#fff,transparent)}
  .deck-slot:nth-child(3) .card .mk-run{color:#fff}
  .deck-slot:nth-child(3) .card .glyph{background:rgba(255,255,255,.2)}.deck-slot:nth-child(3) .card .glyph svg{stroke:#fff}
  .deck-slot:nth-child(3) .card .meta{border-top-color:rgba(255,255,255,.28);color:#E0E7FF}
  .deck-slot:nth-child(3) .card .meta b{background:none;-webkit-text-fill-color:#fff;color:#fff}
  .deck-slot:nth-child(3) .card .more{background:#fff;color:var(--ink);border-color:#fff}
  .deck-slot:nth-child(3) .card.up .more{background:#fff;color:var(--ink)}
  .deck-hint{display:none}
}

/* ===== v2.2.1 — мобильная карточка услуги точно по макету веера ===== */
@media(max-width:920px){
  .deck-slot .card{padding:14px 14px 16px;border-radius:20px}
  /* мокап: 74px, шапка в одну строку, печать не вылезает */
  .deck-slot .card .mk{height:74px;margin-bottom:12px;padding:9px 11px;border-radius:12px}
  .deck-slot .card .mk-bar{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .deck-slot .card .mk-bar i{display:inline-block;vertical-align:middle;margin-right:6px}
  .deck-slot .card .mk-type{font-size:10.5px;padding:5px 8px;margin-top:7px;max-width:100%;box-sizing:border-box}
  .deck-slot .card .mk-typing{margin-top:6px}
  .deck-slot .card .mk-gauge{width:46px;height:46px;right:9px;top:9px}
  .deck-slot .card .mk-gauge b{width:34px;height:34px;font-size:11px}
  .deck-slot .card .mk-sk{height:6px;margin-top:8px}.deck-slot .card .mk-sk2{height:4px;margin-top:5px}
  .deck-slot .card .mk-cta{height:14px;width:48px;margin-top:8px}
  .deck-slot .card .mk-auto{padding-top:30px;gap:6px}
  .deck-slot .card .mk-node{width:40px;height:30px;border-radius:9px}
  .deck-slot .card .mk-node svg{width:14px;height:14px}
  .deck-slot .card .mk-run{font-size:9px;right:11px;top:8px}
  /* иконка в одну строку с заголовком, как в макете */
  .deck-slot .card .glyph{width:34px;height:34px;border-radius:10px;margin:0 9px 0 0;float:left}
  .deck-slot .card .glyph svg{width:16px;height:16px}
  .deck-slot .card h3{font-size:18px;line-height:34px;margin-bottom:0}
  .deck-slot .card h3::after{content:"";display:block;clear:both}
  .deck-slot .card p{font-size:12.5px;line-height:1.45;margin-top:8px;clear:both}
  .deck-slot .card ul{margin-top:8px;gap:4px}
  .deck-slot .card li{font-size:12px}
  .deck-slot .card .meta{margin-top:10px;padding-top:9px;font-size:9.5px;gap:14px}
  .deck-slot .card .meta b{font-size:15px}
  .deck-slot .card .more{margin-top:10px;padding:9px 12px;font-size:12px;border-radius:20px}
}

/* ===== v2.3.0 — мобильный Local AI: гонка «накопленный счёт облака против сервера» ===== */
.calc-race{display:none}
@media(max-width:640px){
  /* две крупные цифры уступают место дорожкам */
  .calc-box{display:none !important}
  /* в макете под дорожками сразу ползунок — чипы там не участвовали */
  .calc-chips{display:none}
  .calc-race{grid-column:1/3;grid-row:3;display:block;margin-top:20px}
  .race-lane{margin-top:14px}
  .race-lane:first-child{margin-top:0}
  .race-name{display:flex;justify-content:space-between;align-items:baseline;
    font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;color:#8A8A9B;margin-bottom:7px}
  .race-name b{color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
  .race-track{position:relative;height:28px;border-radius:14px;background:#15151C;border:1px solid #26262F;overflow:visible}
  .race-track .fill{position:absolute;left:0;top:0;height:100%;border-radius:14px;transition:width .45s var(--ease)}
  .race-track .fill.cloud{background:linear-gradient(90deg,#7F1D1D,#EF4444);box-shadow:0 0 26px -8px rgba(239,68,68,.7)}
  .race-track .fill.srv{background:linear-gradient(90deg,#4F46E5,#6366F1)}
  .race-track .car{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;
    transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(255,255,255,.18);transition:left .45s var(--ease)}
  .race-track .flag{position:absolute;top:-3px;width:2px;height:34px;
    background:repeating-linear-gradient(#fff 0 4px,#0B0B0F 4px 8px);transition:left .45s var(--ease)}
  .race-track .flag em{position:absolute;left:6px;top:5px;font-style:normal;font-family:'JetBrains Mono',monospace;
    font-size:8.5px;color:#fff;background:#0B0B0F;border:1px solid #2A2B38;border-radius:6px;padding:2px 6px;white-space:nowrap}
  .race-months{display:grid;grid-template-columns:repeat(12,1fr);margin-top:8px;
    font-family:'JetBrains Mono',monospace;font-size:8px;color:#6B6B7B;text-align:center}
  .race-win{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(34,197,94,.08);
    border:1px solid #1F3B2A;font-size:11.5px;line-height:1.5;color:#D1FAE5}
  .race-win b{display:block;font-family:'Inter Tight';font-weight:800;font-size:22px;letter-spacing:-.03em;color:#22C55E;margin-bottom:3px}
  .race-win.late b{color:#F59E0B}
  .race-win.late{background:rgba(245,158,11,.08);border-color:#4A360F;color:#FDE9C8}
}

/* ===== v2.3.1 — мобильная производительность: тяжёлые эффекты только у верхней карточки ===== */
@media(max-width:920px){
  /* карточки в глубине не должны анимировать мокапы и градиенты */
  .deck-slot.p1 *,.deck-slot.p2 *,.deck-slot.out *{animation:none !important;transition:none !important}
  /* размытая тень у трёх карточек сразу — самая дорогая отрисовка в блоке */
  /* белая карточка в глубине сливалась со светлым фоном страницы: тонируем её
     и возвращаем заметный край, пока она лежит под чёрной и градиентной */
  .deck-slot.p1 .card,.deck-slot.p2 .card{box-shadow:0 16px 26px -14px rgba(30,30,70,.55);border-color:#D5D6E3}
  /* мерцания и бегущие блики оставляем только там, где их видно */
  .deck-slot:not(.p0) .mk-wire::after,.deck-slot:not(.p0) .mk-type,.deck-slot:not(.p0) .mk-sk,
  .deck-slot:not(.p0) .mk-gauge,.deck-slot:not(.p0) .mk-node.hot,.deck-slot:not(.p0) .mk-typing i{animation:none !important}
}
@media(max-width:640px){
  /* перелив заголовка, свечения и стеклянные подложки — по одному кадру в секунду вместо шестидесяти */
  .local h2 .grad-text{animation-duration:8s}
  .aurora{animation:none;opacity:.5}
  .calc-box,.race-track .fill.cloud{box-shadow:none !important}
  /* фоновые пятна секций на телефоне не нужны */
}

/* ===== v2.3.5 — мобильная гонка точно по макету: заголовок «Cloud bill vs one server.», без абзаца,
   болид заканчивается на краю красной полосы ===== */
.calc-h2-race{display:none}
@media(max-width:640px){
  .local > .wrap.calc-head h2:not(.calc-h2-race){display:none}
  .calc-h2-race{display:block}
  .calc-left p{display:none}
  .local > .wrap.calc{padding-top:12px}
  .calc-race{margin-top:4px}
  .race-name{font-size:9px}
  .race-track{height:26px;border-radius:13px}
  .race-track .fill{border-radius:13px}
  /* белая точка внутри полосы: правый край точки = правый край заливки */
  .race-track .car{width:16px;height:16px;transform:translate(calc(-100% - 4px),-50%)}
  .race-months{font-size:7.5px}
  .race-win{margin-top:16px}
  .calc-range{margin-top:52px}
}

/* ===== v2.3.8 — гонка: текст по левому краю, дорожки заезжают при появлении блока ===== */
@media(max-width:640px){
  /* шапка и дорожки живут в разных .wrap, у них расходились отступы — выравниваем обе
     по одному краю и убираем любое центрирование внутри */
  .local > .wrap.calc-head,.local > .wrap.calc{padding-left:22px;padding-right:22px;max-width:none;margin:0}
  .local > .wrap.calc-head,.local > .wrap.calc,.calc-h2-race,.calc-left,.calc-race,
  .race-win,.race-name,.race-months,.calc-scale,.local .eyebrow{text-align:left}
  .local > .wrap.calc{justify-items:start}
  .calc-h2-race,.local .eyebrow{margin-left:0;margin-right:auto;max-width:100%}
  .race-months{text-align:center}
  .race-win{padding-left:16px}
}
/* дорожки стартуют с нуля и доезжают, когда блок появился в экране */
.calc-race .fill{width:0}
.calc-race.armed .fill{transition:width 1.1s var(--ease)}

/* ===== v2.4.1 — равные кромки: карточки колоды одной высоты ===== */
@media(max-width:920px){
  .deck-slot{height:var(--card-h,auto)}
  .deck-slot .card{height:100%;display:flex;flex-direction:column;box-sizing:border-box}
  .deck-slot .card .more{margin-top:auto}      /* кнопка прижата к низу карточки */
}

/* ===== v2.4.2 — индикатор ниже стопки: карточки в глубине занимают место под колодой ===== */
@media(max-width:920px){
  /* .services.deck имеет фиксированную высоту --deck-h, а карточки в глубине
     выступают ниже неё — индикатор оказывался поверх них */
  .deck-dots{position:relative;z-index:5;margin-top:46px;clear:both}
}

/* ===== v2.4.3 — ползунок калькулятора: увеличенная зона касания и приоритет над соседями ===== */
.calc-range{position:relative;z-index:4}
.calc-range::before{content:"";position:absolute;left:0;right:0;top:-22px;bottom:-22px}   /* зона под палец 50px */
.calc-race{pointer-events:none}          /* декоративные дорожки не перехватывают касание */
@media(max-width:640px){
  .calc-range{margin-top:34px;height:8px;border-radius:4px}
  .calc-range b{width:30px;height:30px}
  .calc-range::before{top:-26px;bottom:-26px}
}

/* ===== v2.5.0 — ползунок калькулятора на нативном input[type=range] =====
   Самодельный ползунок на pointer-событиях не тянулся на части мобильных браузеров;
   нативный элемент перетаскивается везде и доступен с клавиатуры и скринридера. */
.calc-range{position:relative;height:auto;background:none;margin:44px 0 0;padding:0;overflow:visible;touch-action:auto}
.calc-range::before{display:none}
.calc-range i,.calc-range b{display:none}
.calc-range em{position:absolute;left:var(--w,45%);top:-30px;transform:translateX(-50%);font-style:normal;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:#A5B4FC;white-space:nowrap;pointer-events:none}
.calc-range input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:34px;margin:0;
  background:transparent;cursor:pointer;touch-action:pan-y}
.calc-range input[type=range]:focus{outline:none}
.calc-range input[type=range]:focus-visible::-webkit-slider-runnable-track{box-shadow:0 0 0 3px rgba(99,102,241,.45)}
.calc-range input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;
  background:linear-gradient(90deg,#6366F1,#38BDF8) 0/var(--w,45%) 100% no-repeat,rgba(255,255,255,.12)}
.calc-range input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:rgba(255,255,255,.12)}
.calc-range input[type=range]::-moz-range-progress{height:8px;border-radius:4px;background:linear-gradient(90deg,#6366F1,#38BDF8)}
.calc-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;
  margin-top:-10px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 0 0 6px rgba(99,102,241,.3),0 8px 20px rgba(0,0,0,.4)}
.calc-range input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 0 0 6px rgba(99,102,241,.3),0 8px 20px rgba(0,0,0,.4)}
.calc-range input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(99,102,241,.35),0 8px 20px rgba(0,0,0,.4)}
@media(max-width:640px){
  .calc-range{margin-top:30px}
  .calc-range input[type=range]{height:40px}
}

/* ===== v2.5.1 — подсказка, что ползунок тянется: ручка пульсирует, пока его не трогали ===== */
@keyframes calcHint{
  0%,100%{box-shadow:0 0 0 6px rgba(99,102,241,.30),0 8px 20px rgba(0,0,0,.4)}
  50%{box-shadow:0 0 0 13px rgba(99,102,241,.14),0 8px 20px rgba(0,0,0,.4)}
}
@keyframes calcNudge{0%,100%{transform:translateX(0)}30%{transform:translateX(5px)}60%{transform:translateX(-3px)}}
.calc-range input[type=range]::-webkit-slider-thumb{animation:calcHint 2.2s ease-in-out infinite}
.calc-range input[type=range]::-moz-range-thumb{animation:calcHint 2.2s ease-in-out infinite}
/* тронули — подсказка больше не нужна */
.calc-range.used input[type=range]::-webkit-slider-thumb,
.calc-range.used input[type=range]::-moz-range-thumb{animation:none}
.calc-range em{animation:calcNudge 2.2s ease-in-out infinite}
.calc-range.used em{animation:none}
.calc-range em::after{content:" · drag";color:#6B6B7B}
.calc-range.used em::after{content:""}
@media(prefers-reduced-motion:reduce){
  .calc-range input[type=range]::-webkit-slider-thumb,.calc-range input[type=range]::-moz-range-thumb,.calc-range em{animation:none}
}

/* ===== v2.5.2 — скругление тёмного блока меньше; ползунок во всю ширину ===== */
.local{border-radius:28px}
@media(max-width:640px){
  .local{border-radius:22px}
  /* ползунок лежит в сетке из двух колонок — без span он занимал одну */
  .calc-range{grid-column:1 / -1 !important;width:100%;justify-self:stretch}
  .calc-range input[type=range]{width:100%;min-width:0}
  .calc-scale{grid-column:1 / -1 !important;width:100%}
}

/* ===== v2.5.4 — первый экран на мобильном: ровно по макету наклеек =====
   Раскладка, размеры, отступы и перелив активной наклейки — значения из макета. */
@media(max-width:640px){
  /* сцена во всю ширину экрана; наклейки позиционируются от её края теми же 22px,
     что и отступ у «We build» (padding сцены на absolute-детей не влияет) */
  .hero .word-stage{height:228px;margin:10px 0 0;padding:0;width:auto;left:auto;transform:none !important}
  .word,.word.active,.word.leaving,.word.grad{
    font-size:26px !important;padding:11px 16px;border-radius:14px;letter-spacing:-.02em;
    box-shadow:0 10px 26px rgba(35,35,59,.16)}
  /* позиции из макета */
  .word:nth-child(1){left:22px;right:auto;top:12px;--r:-6deg;--o:0 50%}
  .word:nth-child(2){right:26px;left:auto;top:22px;--r:5deg;--o:100% 50%}
  .word:nth-child(3){left:38px;right:auto;top:74px;--r:3deg;--o:0 50%}
  .word:nth-child(4){right:30px;left:auto;top:124px;--r:-3deg;--o:100% 50%}
  .word:nth-child(5){left:52px;right:auto;top:158px;--r:-4deg;--o:0 50%}
  /* активная: крупнее (34/26 ≈ 1.3) и переливается, как на десктопе */
  .word.active,.word.grad.active,.word:nth-child(2).active{
    --s:1.3;z-index:2;color:#fff;border-color:transparent;
    background:linear-gradient(100deg,#6366F1 0%,#8B5CF6 25%,#38BDF8 50%,#8B5CF6 75%,#6366F1 100%);
    background-size:250% 100%;
    animation:stkShimmer 3.2s linear infinite;
    box-shadow:0 18px 40px rgba(99,102,241,.45)}
  @keyframes stkShimmer{to{background-position:250% 0}}
}
@media(prefers-reduced-motion:reduce){.word.active{animation:none !important}}

/* ===== v2.5.5 — текст в наклейках оптически по центру =====
   При line-height:1 у Inter Tight буквы сидят выше центра (место под нижние выносы
   остаётся снизу) — компенсируем: строка чуть выше и паддинг сверху на 2px больше. */
@media(max-width:640px){
  /* центрируем по x-height: у Inter Tight строчные занимают ~52% кегля, поэтому
     низ строки тяжелее — верхний паддинг МЕНЬШЕ нижнего, а не больше */
  .word,.word.active,.word.leaving,.word.grad{
    display:inline-flex;align-items:center;line-height:1;padding:9px 16px 13px}
}

/* ===== v2.5.8 — чёрная лента обложки ровно на стыке цветного верха и белого низа =====
   ВАЖНО: .kdp-cov позиционируется абсолютно внутри веера — переопределять его position нельзя. */
.kdp-cov .top{height:44%;padding:9% 8% 0;position:relative;overflow:hidden}
.kdp-cov .band{
  /* лента центрируется по линии 44% — половина её высоты выше стыка, половина ниже */
  position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);
  height:18px;display:flex;align-items:center;               /* текст по центру по высоте */
  padding:0 8px;line-height:1;z-index:2}
@media(max-width:640px){
  .kdp-cov .band{height:16px;font-size:7px}
  /* лента внутри 3D-книги (лицо обложки) — тот же стык 44% */
  .kdp-face .cf .band{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);
    height:16px;display:flex;align-items:center;padding:0 8px;line-height:1;font-size:7px;z-index:2}
  .kdp-face .cf{position:relative}
}
/* та же лента на планшете: у веера и книги общий стык */
@media(max-width:920px){
  .kdp-face .cf{position:relative}
  .kdp-face .cf .band{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);
    height:18px;display:flex;align-items:center;padding:0 8px;line-height:1;z-index:2}
}

/* ===== v2.6.0 — «Your project»: круг не упирается в пунктирную рамку =====
   У .yp-plus есть кольцо ::after с отступом −10px, из-за него круг визуально шире
   и на узком экране почти касался рамки сверху. */
/* воздух нужен только СВЕРХУ — между пунктирной рамкой и пульсирующим кольцом круга.
   Снизу и между кругом и подписью всё остаётся как было. */
.yp{padding:0}
.yp-plus{margin-top:0}
@media(max-width:640px){
  .yp{padding:0;gap:10px}
  .yp-plus{margin-top:18px}
}

/* ===== v2.6.1 — воздух между метриками и кнопкой в карточке услуги (мобильный) ===== */
@media(max-width:920px){
  .deck-slot .card .more{margin-top:18px}
  .deck-slot .card .meta{padding-bottom:2px}
}

/* ===== v2.6.4 — IMS: кнопки в мокапе браузера не обрезаются, под ними появляется воздух ===== */
@media(max-width:640px){
  /* окно было ровно по контенту, последняя строка кнопок упиралась в нижний край */
  .fr-desk{height:68%}
  .desk-body{padding:7% 6% 9%;justify-content:flex-start}
  .ims-btns{margin-top:11px;flex-wrap:wrap;row-gap:5px}
  .ims-btns span{white-space:nowrap}
}

/* ===== v2.6.6 — раскрытая книга не наезжает на соседние обложки =====
   Разворот шире одной обложки, поэтому на время чтения боковые книги уходят. */
.kdp-fan.reading .kdp-cov.c1,.kdp-fan.reading .kdp-cov.c3{
  opacity:0;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.kdp-fan.reading .kdp-cov.c1{transform:rotate(-12deg) translateX(-14%)}
.kdp-fan.reading .kdp-cov.c3{transform:rotate(11deg) translateX(14%)}
.kdp-cov.c1,.kdp-cov.c3{transition:transform .9s var(--ease),opacity .45s var(--ease)}
@media(max-width:920px){
  /* штамп не должен висеть над разворотом */
  .kdp-fan.reading .kdp-stamp{opacity:0;transition:opacity .3s}
}

/* ===== v2.6.7 — чёрная лента не просвечивает сквозь раскрытую обложку =====
   У ленты собственный transform + z-index, поэтому она рисуется отдельным слоем
   и backface-visibility родителя её не скрывал: при повороте обложки лента
   проступала зеркально на кремовом форзаце. */
.kdp-face .cf .band{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* мобильные правила выше задают ленте position/transform внутри @media и перебивают
   visibility по порядку — убираем её из потока целиком, на всех ширинах */
.kdp-book.open .band,
.kdp-book.opened .band,
.kdp-fan.reading .kdp-book .band{display:none !important}

/* ===== v2.8.0 — мобильная плитка KDP: полка обложек вместо раскрывающейся книги =====
   Книга на телефоне не раскрывается: нет 3D-поворотов, ленты и наложения на соседей. */
@media(max-width:920px){
  /* полка: три обложки в ряд, средняя приподнята */
  .shot-kdp .kdp-fan{position:relative;display:flex;align-items:flex-end;gap:9px;
    height:auto;padding:26px 0 0;perspective:none;transform:none}
  .shot-kdp .kdp-cov{position:static;flex:1 1 0;width:auto;min-width:0;aspect-ratio:6/9;
    transform:none !important;animation:kdpFloat 5s ease-in-out infinite;
    box-shadow:0 20px 34px -18px rgba(30,30,70,.5)}
  .shot-kdp .kdp-cov.c2{animation-name:kdpFloatUp;z-index:3}
  .shot-kdp .kdp-cov.c3{animation-delay:-3.2s}
  .shot-kdp .kdp-cov.c1{animation-delay:-1.6s}
  @keyframes kdpFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
  @keyframes kdpFloatUp{0%,100%{translate:0 -12px}50%{translate:0 -22px}}
  /* книга больше не книга: страницы, форзац и левая страница не участвуют */
  .shot-kdp .kdp-page,.shot-kdp .kdp-lstack,.shot-kdp .kdp-base{display:none}
  /* обложка книги должна заполнять свою карточку целиком — иначе её верх (44% высоты)
     считается от нулевой высоты и обложка схлопывается */
  .shot-kdp .kdp-cov.c2.kdp-book{position:relative;overflow:hidden;border-radius:5px 10px 10px 5px;
    transform-style:flat;perspective:none;
    /* десктопные смещения книги (left:50%, margin-left, bottom) при relative сдвигали её на соседа */
    left:0;right:auto;top:auto;bottom:auto;margin:0}
  .shot-kdp .kdp-face{position:absolute;inset:0;transform:none !important;opacity:1 !important;
    transform-style:flat;transition:none}
  .shot-kdp .kdp-face .cb{display:none}
  .shot-kdp .kdp-face .cf{position:absolute;inset:0;transform:none;backface-visibility:visible;
    border-radius:0;border:0;box-shadow:none}
  .shot-kdp .kdp-book .band{display:block !important}   /* лента снова обычная подпись обложки */
  /* полка под книгами */
  .shot-kdp .kdp-fan::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:5px;
    border-radius:3px;background:linear-gradient(90deg,#E2E3EE,#CFD1E0);
    box-shadow:0 10px 20px -12px rgba(30,30,70,.5)}
  .shot-kdp .kdp-stamp{top:6px;right:6px}
}
@media(prefers-reduced-motion:reduce){
  .shot-kdp .kdp-cov{animation:none !important}
}

/* ===== v2.8.2 — мобильная плитка KDP ровно по макету «Полка» =====
   Сцена: штамп в углу → три обложки на полке (средняя приподнята, все покачиваются)
   → полка → наклейки-цифры. Без ленты стадий и терминала. */
@media(max-width:920px){
  .shot-kdp{padding:14px 14px 18px}
  .shot-kdp .inner{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .shot-kdp .kdp-fan{order:1;margin:0;padding:18px 0 0;gap:10px;height:186px}
  .shot-kdp .kdp-left{order:2;gap:0;margin-top:22px}
  .shot-kdp .kdp-flow,.shot-kdp .kdp-log{display:none}
  .shot-kdp .kdp-stickers{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;margin:0}
  .shot-kdp .kdp-stickers .sk{padding:7px 10px;font-size:16px;border-radius:12px;gap:5px}
  .shot-kdp .kdp-stickers .sk span{font-size:8px}
  /* обложки как в макете: цветной верх с названием, серая моно-подпись, кружок страниц */
  .shot-kdp .kdp-cov{border-radius:5px 9px 9px 5px;box-shadow:0 18px 34px -18px rgba(30,30,70,.45)}
  .shot-kdp .kdp-cov .top{height:auto;padding:10px 9px 8px}
  .shot-kdp .kdp-cov .top b{font-size:13px;line-height:1.05}
  .shot-kdp .kdp-cov .top .mot{display:none}
  .shot-kdp .kdp-cov .band,.shot-kdp .kdp-face .cf .band{
    position:static !important;transform:none !important;height:auto;display:block !important;
    background:none;color:#5B5B66;font-size:6.5px;letter-spacing:0;padding:0 9px 9px;line-height:1.4;
    white-space:normal;overflow:visible;text-overflow:clip;z-index:auto}
  .shot-kdp .kdp-cov .meth,.shot-kdp .kdp-cov .ic{display:none}
  .shot-kdp .kdp-cov .bd{width:22px;height:22px;font-size:6px;right:7px;bottom:7px}
  /* средняя приподнята на 10px, как в макете; покачивание сохраняем */
  @keyframes kdpFloatUp{0%,100%{translate:0 -10px}50%{translate:0 -18px}}
  .shot-kdp .kdp-fan::after{bottom:-10px}
  /* штамп в макете виден всегда, а не только в момент «audit passed» из лога */
  .shot-kdp .kdp-stamp{top:0;right:0;opacity:1 !important;transform:rotate(9deg) scale(1) !important;transition:none}
}

/* ===== v2.8.5 — мобильная полка ровно по макету: три простые обложки .mcv,
   десктопные обложки и книга на телефоне скрыты целиком ===== */
.kdp-shelf{display:none}
@media(max-width:920px){
  .shot-kdp .kdp-cov{display:none !important}
  .shot-kdp .kdp-shelf{display:flex;gap:10px;align-items:flex-end;height:186px;padding-top:18px}
  .mcv{flex:1 1 0;min-width:0;aspect-ratio:6/9;border-radius:5px 9px 9px 5px;background:#fff;
    border:1px solid rgba(0,0,0,.06);box-shadow:0 18px 34px -18px rgba(30,30,70,.45);
    overflow:hidden;position:relative;animation:kdpFloat 5s ease-in-out infinite}
  .mcv.g2{animation-name:kdpFloatUp;z-index:2}
  .mcv.g1{animation-delay:-1.6s}.mcv.g3{animation-delay:-3.2s}
  .mcv .t{padding:10px 9px 8px;font-family:'Inter Tight';font-weight:800;font-size:13px;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
  .mcv .t em{font-style:normal;display:block}
  .mcv .m{font-family:'JetBrains Mono',monospace;font-size:6.5px;color:#5B5B66;padding:8px 9px 0;line-height:1.4}
  .mcv .pp{position:absolute;right:7px;bottom:7px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
    font-family:'JetBrains Mono',monospace;font-size:6px;line-height:1;text-align:center;color:#fff}
  .mcv.g1 .t{background:linear-gradient(160deg,#DFF5E6,#BFE9CC)}.mcv.g1 .t em{color:#15803D}.mcv.g1 .pp{background:#15803D}
  .mcv.g2 .t{background:linear-gradient(160deg,#E6E7FF,#C7C9F5)}.mcv.g2 .t em{color:#6366F1}.mcv.g2 .pp{background:#6366F1}
  .mcv.g3 .t{background:linear-gradient(160deg,#FFE9DA,#F9CDAF)}.mcv.g3 .t em{color:#C2410C}.mcv.g3 .pp{background:#C2410C}
  /* полка под обложками */
  .shot-kdp .kdp-fan{display:block;height:auto;padding:0;perspective:none;transform:none;position:relative}
  .shot-kdp .kdp-fan::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:6px;border-radius:3px;
    background:linear-gradient(90deg,#E2E3EE,#CFD1E0);box-shadow:0 10px 20px -12px rgba(30,30,70,.5)}
  /* наклейки как в макете: 16px, в ряд с переносом */
  .shot-kdp .kdp-stickers .sk b{font-size:16px}
  .shot-kdp .kdp-stickers .sk span{font-size:8px}
  .shot-kdp .kdp-left{margin-top:32px}
}

/* ===== v2.8.6 — фон мобильной полки как в макете: светлая точечная сетка без сине-фиолетового свечения ===== */
@media(max-width:920px){
  /* точечную сетку уже рисует .shot-kdp::before — второй слой не нужен */
  .shot-kdp{background:#FBFBFD;background-image:none}
  .shot-kdp::before{background-size:18px 18px;opacity:1;background-image:radial-gradient(#DCDDE8 1px,transparent 1px)}
  .shot-kdp .kdp-glow{display:none}
}

/* ===== v2.9.0 — первый экран страниц услуг: «одно большое число», светлый фон ===== */
.svc-hero{min-height:auto;padding:150px 0 70px;background:var(--bg);position:relative;overflow:hidden}
.svc-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(#DCDDE8 1px,transparent 1px);background-size:22px 22px;opacity:.55}
.svc-hero::after{content:"";position:absolute;right:-160px;top:-140px;width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(99,102,241,.16),transparent 70%)}
.svc-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:36px 48px;align-items:start}
.svc-copy .eyebrow{color:var(--indigo)}
.svc-copy .eyebrow::before{content:"";width:22px;height:2px;border-radius:1px;background:var(--grad)}
.svc-h1{font-family:'Inter Tight';font-weight:800;font-size:clamp(40px,5.2vw,68px);letter-spacing:-.045em;line-height:.98;margin:18px 0 0;color:var(--ink)}
.svc-lead{margin-top:18px !important;max-width:460px;font-size:clamp(15px,1.3vw,18px)}
.svc-num{text-align:right;padding-top:6px}
.svc-num b{display:block;font-family:'Inter Tight';font-weight:800;font-size:clamp(96px,14vw,168px);letter-spacing:-.08em;line-height:.85;color:var(--ink);font-variant-numeric:tabular-nums}
.svc-num b span{display:inline-block;opacity:0;animation:svcKin .7s cubic-bezier(.2,.8,.2,1) forwards}
.svc-num.in b span{animation-play-state:running}
@keyframes svcKin{from{opacity:0;transform:translateY(22px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.svc-num small{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--indigo);margin-top:14px}
.svc-tiles{grid-column:1/-1;list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.svc-tiles li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 14px 34px -26px rgba(30,30,70,.35)}
.svc-tiles b{display:block;font-family:'Inter Tight';font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.svc-tiles span{display:block;font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:6px}
@media(max-width:920px){
  .svc-hero{padding:112px 0 48px}
  .svc-grid{grid-template-columns:1fr;gap:26px}
  .svc-num{text-align:left;padding-top:0}
  .svc-num b{font-size:clamp(84px,26vw,120px)}
  .svc-tiles{grid-template-columns:1fr;gap:10px}
}
@media(prefers-reduced-motion:reduce){.svc-num b span{animation:none;opacity:1}}

/* ===== v2.9.1 — первый экран услуги на телефоне: число + наклейки, плитки полосой, кнопки внизу ===== */
.svc-stk,.svc-rail-dots{display:none}
@media(max-width:640px){
  .svc-hero{min-height:100svh;padding:104px 0 96px;display:flex;flex-direction:column}
  .svc-grid{display:flex;flex-direction:column;gap:0;flex:1}
  .svc-copy .eyebrow{font-size:9px}
  .svc-h1{font-size:34px;margin-top:10px}
  /* число со стикерами справа */
  .svc-num{order:2;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;
    align-items:end;margin-top:12px;min-height:112px;text-align:left;position:relative}
  .svc-num b{grid-column:1;grid-row:1;font-size:92px;letter-spacing:-.08em}
  .svc-num small{grid-column:1;grid-row:2;margin-top:8px;font-size:8.5px;max-width:none}
  .svc-stk{display:block;grid-column:2;grid-row:1/3;position:relative;min-height:112px}
  .svc-stk .sk{position:absolute;right:0;display:inline-flex;gap:4px;align-items:baseline;padding:6px 9px;border-radius:10px;
    font-family:'Inter Tight';font-weight:800;font-size:12px;letter-spacing:-.02em;white-space:nowrap;
    box-shadow:0 10px 22px -10px rgba(30,30,70,.35);transform:rotate(var(--r));animation:svcFl 5s ease-in-out infinite}
  .svc-stk .sk small{font-family:'JetBrains Mono',monospace;font-size:7.5px;font-weight:400;letter-spacing:0;margin:0}
  .svc-stk .sk.d{top:-6px;right:8px;--r:5deg;background:var(--ink);color:#fff}.svc-stk .sk.d small{color:#C9CBE0}
  .svc-stk .sk.g{top:36px;right:0;--r:-3deg;animation-delay:-1.7s;background:linear-gradient(120deg,#6366F1,#8B5CF6 60%,#38BDF8);color:#fff}.svc-stk .sk.g small{color:#E0E7FF}
  .svc-stk .sk.w{top:78px;right:14px;--r:2deg;animation-delay:-3.4s;background:#fff;color:var(--ink)}.svc-stk .sk.w small{color:#5B5B66}
  @keyframes svcFl{50%{transform:rotate(calc(var(--r) + 1.5deg)) translateY(-5px)}}
  /* лид после числа */
  .svc-copy{display:contents}
  .svc-copy .eyebrow{order:0}.svc-h1{order:1}
  .svc-lead{order:3;margin-top:12px !important;font-size:12.5px}
  /* плитки — горизонтальная полоса со свайпом */
  .svc-tiles{order:4;display:flex;grid-template-columns:none;gap:8px;margin:14px -22px 0;padding:0 22px;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .svc-tiles::-webkit-scrollbar{display:none}
  .svc-tiles li{flex:0 0 76%;scroll-snap-align:start;padding:12px 13px}
  .svc-tiles b{font-size:13px}.svc-tiles span{font-size:11px;margin-top:4px}
  .svc-rail-dots{order:5;display:flex;gap:4px;margin-top:10px}
  .svc-rail-dots i{width:5px;height:5px;border-radius:50%;background:#DCDDE8;transition:all .3s}
  .svc-rail-dots i.on{width:14px;border-radius:3px;background:var(--grad)}
  /* кнопки во всю ширину у нижнего края первого экрана */
  .hero-actions{order:6;margin-top:auto;padding-top:20px;display:flex;gap:8px}
  .svc-hero .hero-actions .btn{flex:1;justify-content:center;padding:13px 10px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.svc-stk .sk{animation:none}}

/* ===== v2.9.2 — мобильный первый экран услуг: наклейки в своей колонке, кнопки в одну строку ===== */
@media(max-width:640px){
  /* колонка под наклейки фиксированной ширины — раньше она схлопывалась и наклейки ложились на число */
  .svc-num{grid-template-columns:minmax(0,1fr) 124px;column-gap:10px}
  .svc-num b{font-size:clamp(64px,22vw,86px);min-width:0;overflow:visible}
  .svc-stk{min-height:118px}
  .svc-stk .sk.d{right:6px}
  .svc-stk .sk.g{right:0}
  .svc-stk .sk.w{right:10px}
  /* кнопки: без переноса текста */
  .svc-hero .hero-actions .btn{white-space:nowrap;padding:13px 8px;font-size:12.5px;gap:6px}
  .svc-hero .hero-actions .btn .arr{margin-left:0}
}

/* ===== v2.9.3 — мобильный первый экран услуг: единый левый край, плитки крупнее ===== */
@media(max-width:640px){
  .svc-hero .wrap{padding-left:22px;padding-right:22px;max-width:none;margin:0}
  .svc-hero .eyebrow,.svc-h1,.svc-num,.svc-lead,.svc-rail-dots{margin-left:0;margin-right:0;text-align:left}
  .svc-tiles{margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}
  .svc-tiles li{flex:0 0 86%;padding:16px 16px 18px;border-radius:16px}
  .svc-tiles b{font-size:15px}
  .svc-tiles span{font-size:12.5px;line-height:1.5;margin-top:6px}
  .svc-hero .hero-actions{justify-content:stretch;margin-left:0;margin-right:0;width:100%}
  .svc-hero .hero-actions .btn{flex:1 1 0}
}

/* ===== v2.9.4 — первый экран услуги наследовал мобильные правила главного hero
   (.hero p.sub и .hero-actions получали свои 22px поверх поля контейнера) ===== */
@media(max-width:640px){
  .svc-hero p.sub,.svc-hero .hero-actions{padding-left:0 !important;padding-right:0 !important}
  .svc-hero .hero-actions{margin-left:0 !important;margin-right:0 !important;justify-content:stretch}
  .svc-hero,.svc-hero .wrap,.svc-hero .svc-copy,.svc-hero h1,.svc-hero .eyebrow{text-align:left}
  .svc-hero .wrap{padding-left:22px !important;padding-right:22px !important}
}

/* ===== v2.9.5 — первый экран услуги: жёстко один левый край 22px для лида, плиток и кнопок ===== */
@media(max-width:640px){
  .svc-hero .svc-lead{padding:0 !important;margin-left:0 !important;margin-right:0 !important;max-width:none !important}
  .svc-hero .svc-tiles{margin-left:-22px !important;margin-right:-22px !important;padding-left:22px !important;padding-right:22px !important}
  .svc-hero .hero-actions{padding:20px 0 0 !important;margin:auto 0 0 !important;width:100% !important;justify-content:stretch !important}
  .svc-hero .hero-actions .btn{flex:1 1 0 !important;margin:0 !important}
}

/* ===== v2.9.6 — плитки первого экрана услуги ещё крупнее ===== */
@media(max-width:640px){
  .svc-hero .svc-tiles li{flex:0 0 92%;padding:20px 20px 22px;border-radius:18px}
  .svc-hero .svc-tiles b{font-size:17px}
  .svc-hero .svc-tiles span{font-size:14px;line-height:1.5;margin-top:8px}
}

/* ===== v2.9.8 — «Verify a certificate» шире на мобильном: узкая колонка ломала строки ===== */
@media(max-width:640px){
  .fr-vfy{left:20%;width:42%}
  .fr-vfy .vfy{padding:10px 12px}
  .fr-vfy .vfy b{white-space:nowrap}
}

/* ===== v2.9.9 — пятна CTA стекаются точно в кнопку с почтой =====
   Точка схода задаётся переменной --flux-y: JS ставит её на центр кнопки,
   до этого работает запасное значение. */
.cta{--flux-y:74%}
.cta .flux i{top:var(--flux-y)}
/* в конце пути пятно сжимается до размера кнопки и гаснет уже внутри неё */
@keyframes flux{
  0%{transform:translate(var(--sx),var(--sy)) scale(1.1);opacity:0}
  12%{opacity:.75}
  70%{opacity:.45}
  88%{transform:translate(0,0) scale(.22);opacity:.5}
  100%{transform:translate(0,0) scale(.08);opacity:0}
}
/* короткий отклик самой кнопки на «поглощение» */
.cta .btn-primary{position:relative;z-index:1}
.cta .btn-primary::before{content:"";position:absolute;inset:-6px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(closest-side,rgba(99,102,241,.55),transparent 70%);opacity:0;
  animation:ctaSip 5.5s ease-in-out infinite}
@keyframes ctaSip{0%,70%{opacity:0}86%{opacity:.85}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.cta .btn-primary::before{animation:none}}

/* ===== v3.0.0 — первый экран услуг: больше поле слева, крупнее наклейки у числа ===== */
@media(max-width:640px){
  .svc-hero .wrap{padding-left:28px !important;padding-right:24px !important}
  .svc-hero .svc-tiles{margin-left:-28px !important;margin-right:-24px !important;
    padding-left:28px !important;padding-right:24px !important}
  /* наклейки справа от числа крупнее */
  .svc-num{grid-template-columns:minmax(0,1fr) 148px}
  .svc-stk{min-height:132px}
  .svc-stk .sk{padding:8px 12px;font-size:15px;border-radius:12px;gap:5px}
  .svc-stk .sk small{font-size:9px}
  .svc-stk .sk.g{top:44px}
  .svc-stk .sk.w{top:92px}
}

/* ===== v3.0.1 — полоса плиток: первая начинается от поля, ничего не срезается слева =====
   scroll-padding держит прилипание с учётом поля, а вынос компенсируется вставками
   по краям вместо padding: при прокрутке контейнера padding-left «съедался». */
@media(max-width:640px){
  .svc-hero .svc-tiles{padding-left:0 !important;padding-right:0 !important;
    scroll-padding-left:28px;scroll-padding-right:24px}
  .svc-hero .svc-tiles::before{content:"";flex:0 0 28px}
  .svc-hero .svc-tiles::after{content:"";flex:0 0 24px}
}

/* ===== v3.0.2 — плитка целиком в кадре: ширина по экрану минус оба поля ===== */
@media(max-width:640px){
  .svc-hero .svc-tiles li{flex:0 0 calc(100vw - 52px);max-width:calc(100vw - 52px)}
}