/* ===== studio-fonts.css ===== */
/* Шрифты сайта: Unbounded (заголовки) и Onest (текст), SIL Open Font License. Файлы — с Google Fonts, хранятся локально. */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/unbounded-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/unbounded-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/unbounded-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/onest-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/onest-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/onest-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Запасные шрифты с размерами фирменных (Arial растянут под Unbounded и Onest): пока фирменные
   грузятся, текст уже стоит на своих местах, и при подмене строки не переносятся иначе (CLS, LCP).
   Коэффициенты — по ширине текстов первого экрана на странице, замер 08.10.2026. Жирные заголовки
   растягиваются сильнее, поэтому у Unbounded два начертания: до 550 — Arial, жирнее — Arial Bold.
   unicode-range — как у фирменных: символы, которых в них нет (стрелки →), берутся из системного шрифта, как раньше. */
@font-face{font-family:"Unbounded Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");font-weight:100 550;size-adjust:134.3%;ascent-override:74.5%;descent-override:18.6%;line-gap-override:0%;unicode-range:U+0000-00FF, U+0100-02FF, U+0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD}
@font-face{font-family:"Unbounded Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");font-weight:551 900;size-adjust:142%;ascent-override:70.4%;descent-override:17.6%;line-gap-override:0%;unicode-range:U+0000-00FF, U+0100-02FF, U+0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD}
@font-face{font-family:"Onest Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");size-adjust:104.3%;ascent-override:93%;descent-override:29.7%;line-gap-override:0%;unicode-range:U+0000-00FF, U+0100-02FF, U+0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD}

/* ===== studio-identity.css ===== */
/* Shared studio identity. Original page theme controls remain unchanged. */
.studio-home{color:inherit;text-decoration:none;flex-shrink:0}.studio-home:hover{opacity:.8}.studio-home:focus-visible{outline:3px solid #d33a1e;outline-offset:5px;border-radius:3px}
.studio-brand{display:inline-flex!important;flex-direction:column;gap:2px;white-space:normal!important;line-height:1.12;letter-spacing:-.015em;vertical-align:middle;text-align:left}
.studio-brand>span{display:block!important;font-size:inherit!important;white-space:nowrap}.studio-brand>span:first-child{font-size:.72em!important;font-weight:500;letter-spacing:.035em}.studio-brand>span:only-child{font-size:inherit!important;font-weight:600;letter-spacing:-.01em}
.topbar-name .studio-brand,.brand .studio-brand{font-size:14px}footer a{display:inline-block}footer{overflow-wrap:anywhere}
@media(max-width:600px){.topbar-name .studio-brand,.brand .studio-brand{font-size:12px}.studio-brand{max-width:180px}.topbar-in{gap:10px!important}.prototype-label{display:none}}

/* ===== studio-hero.css ===== */
/* Главная: плитки направлений под первым экраном и отступ портфолио.
   Первый экран и его кнопки описаны в studio-cinematic.css. */
.studio-hero .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-block:1px solid var(--rule);margin-top:38px}.studio-hero .tile{background:none;border:0;border-radius:0;box-shadow:none;padding:22px 18px}.studio-hero .tile+.tile{border-left:1px solid var(--rule)}
@media(max-width:600px){.studio-hero .tiles{grid-template-columns:1fr 1fr}.studio-hero .tile{padding:16px 10px}.studio-hero .tile:nth-child(3){border-left:0}.studio-hero .tile:nth-child(n+3){border-top:1px solid var(--rule)}}
.studio-proof{padding-top:70px}
@media(max-width:650px){.studio-proof{padding-top:45px}}

/* ===== studio-topbar.css ===== */
/* Главная: шапка в одну строку на компьютере, сворачивание до тесноты. Раньше — встроенный <style> в index.html. */
/* Studio navigation: keep desktop labels on one line, collapse before crowding. */
.studio-page .topbar-in{gap:20px}
.studio-page .topbar nav{gap:20px}
.studio-page .topbar nav a{font-size:15px;white-space:nowrap}
.studio-page .topbar .btn{font-size:15px;padding:12px 18px}
.studio-page .studio-brand{font-size:15px}
.studio-page{padding-top:76px}
.studio-page .topbar-in{min-height:76px;box-sizing:border-box}
.studio-page .topbar nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:10px}
body.studio-page .theme-toggle{top:88px}
@media (min-width:52rem) and (max-width:1199px){
 .studio-page .topbar nav{display:none}
 .studio-page .topbar .burger{display:flex;flex-shrink:0}
 .studio-page .topbar.nav-open nav{display:block;position:absolute;left:0;right:0;top:100%;margin:0;padding:8px 24px;background:var(--paper);border-bottom:1px solid var(--rule)}
 .studio-page .topbar.nav-open nav a{display:block;padding:12px 0;border-top:1px solid var(--rule)}
 .studio-page .topbar .btn{margin-left:auto}
}
@media(max-width:600px){.studio-page .topbar-in{gap:8px}.studio-page .topbar .btn{font-size:12px;padding:10px}.studio-page .studio-brand{font-size:12px}}

/* ===== studio-portfolio.css ===== */
.portfolio-tabs{display:flex;gap:12px;margin:32px 0;flex-wrap:wrap}.portfolio-tabs button,.compare-switch button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:50px;padding:13px 22px;cursor:pointer}.portfolio-tabs [aria-selected=true],.compare-switch [aria-pressed=true]{background:#242829;color:#fff;border-color:#bd825b}.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.portfolio-card{padding:0;text-align:left;border:1px solid var(--rule);border-radius:16px;background:var(--paper);color:var(--ink);overflow:hidden;cursor:pointer;font:inherit;transition:transform .2s,border-color .2s}.portfolio-card:hover{transform:translateY(-4px);border-color:#ad7954}.portfolio-card img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block}.portfolio-card-copy{display:flex;flex-direction:column;padding:24px;gap:15px}.portfolio-card-copy small{font:10px monospace;letter-spacing:1px;color:var(--ink-soft)}.portfolio-card-copy strong{font-size:23px;line-height:1.25}.portfolio-card-copy>span{font-size:14px;line-height:1.6;color:var(--ink-soft)}.portfolio-card-copy b{font-size:13px}.portfolio-wordmark{aspect-ratio:16/10;display:grid;place-content:center;background:linear-gradient(135deg,#303638,#101415);color:#d5b99d;font:16px/2 monospace}.portfolio-dialog{margin:0;padding:0;border:0;width:100vw;max-width:none;height:100dvh;max-height:none;background:var(--paper);color:var(--ink)}.portfolio-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}.portfolio-toolbar,.portfolio-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px clamp(16px,4vw,64px);background:var(--paper);border-bottom:1px solid var(--rule)}.portfolio-toolbar>span{font:12px monospace;text-transform:uppercase;letter-spacing:1px}.portfolio-dialog button{font:inherit;cursor:pointer;min-height:44px}.portfolio-toolbar button,.portfolio-footer button{border:1px solid var(--rule);border-radius:8px;color:var(--ink);background:transparent;padding:10px 18px}.portfolio-toolbar button:hover,.portfolio-footer button:hover{border-color:#b8845c}.portfolio-footer{position:relative;z-index:3;border-top:1px solid var(--rule);border-bottom:0;padding-bottom:max(16px,env(safe-area-inset-bottom));box-shadow:0 -12px 30px rgba(16,18,24,.08)}.portfolio-footer button{font-weight:750}.portfolio-footer #portfolio-next{background:#242829;color:#fff;border-color:#242829}.portfolio-footer #portfolio-next:hover{background:#111415;border-color:#b8845c}.portfolio-footer>span{font:11px monospace;letter-spacing:.06em;color:var(--ink-soft);text-align:center}.portfolio-scroll{overflow:auto;overscroll-behavior:contain;padding:clamp(20px,4vw,60px)}.portfolio-heading{max-width:1050px;margin:0 auto 35px}.portfolio-heading h2{font-size:clamp(28px,4vw,54px);line-height:1.1;margin:16px 0 24px}.portfolio-heading>p{white-space:pre-line;line-height:1.65;color:var(--ink-soft)}#portfolio-count{font:12px monospace;color:#9d6945}.case-picture{max-width:1500px;margin:0 auto}.case-picture img{width:100%;display:block;border:1px solid var(--rule);border-radius:12px}.compare-section{margin:0 auto 45px;padding:0;max-width:1800px;border:0}.compare-section h3{margin:0 0 16px;font-size:18px}.compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.compare-pair figure{min-width:0;margin:0}.compare-pair figcaption{font-size:13px;padding:12px 0;color:var(--ink-soft)}.compare-pair img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:8px}.compare-switch{display:none}.portfolio-card:focus-visible,.portfolio-dialog button:focus-visible,.portfolio-tabs button:focus-visible{outline:3px solid #bc8459;outline-offset:3px}
@media(max-width:1000px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.portfolio-grid{grid-template-columns:1fr}.portfolio-tabs{gap:8px}.portfolio-tabs button{font-size:13px;padding:12px 15px}.portfolio-toolbar>span{font-size:10px;letter-spacing:0}.portfolio-toolbar button{font-size:13px;white-space:nowrap}.portfolio-footer{gap:8px;padding:10px 12px max(10px,env(safe-area-inset-bottom))}.portfolio-footer>span{display:block;font-size:9px;line-height:1.25}.portfolio-footer button{flex:1 1 0;font-size:12px;padding:10px 8px}.compare-pair{display:block}.compare-switch{display:flex;gap:8px;margin-bottom:15px}.compare-switch button{padding:9px 16px;font-size:14px}.compare-pair[data-mode=after] [data-side=before],.compare-pair[data-mode=before] [data-side=after]{display:none}.portfolio-scroll{padding:22px 16px}.portfolio-card-copy{padding:20px}}
@media(prefers-reduced-motion:reduce){.portfolio-card{transition:none}}
.portfolio-card[hidden],.portfolio-more[hidden]{display:none}.portfolio-more{display:block;margin:30px auto 0;padding:14px 28px;min-height:48px;border:1px solid #b8835c;border-radius:10px;background:#242829;color:#fff;font:inherit;cursor:pointer}.portfolio-more:hover{background:#363b3d}.portfolio-more:focus-visible{outline:3px solid #b8835c;outline-offset:4px}

/* ===== studio-wide.css ===== */
/* Studio-only spacious layout; other site sections keep their own scale. */
.studio-page .studio-home{display:flex;align-items:center;gap:12px;flex-shrink:0;overflow:visible}
.studio-page .studio-logo{display:block;width:72px;height:54px;object-fit:contain;flex:none}
@media(max-width:650px){.studio-page .studio-home{gap:7px}.studio-page .studio-logo{width:44px;height:36px}}
@media(max-width:380px){.studio-page .studio-home .studio-brand{font-size:11px}.studio-page .studio-logo{width:36px;height:30px}.studio-page .topbar-in{padding-inline:12px}}
.studio-page{--wrap:1680px;font-size:18px}
.studio-page .wrap,.studio-page .topbar-in{max-width:1680px;padding-inline:clamp(20px,4vw,72px)}
.studio-page .lead{font-size:clamp(20px,1.5vw,26px);max-width:850px;line-height:1.55}
.studio-page .topbar nav a{font-size:17px}
.studio-page .studio-brand{font-size:18px}
.studio-page .tile b{font-size:20px}.studio-page .tile span{font-size:16px;line-height:1.5}
.studio-page .fact span,.studio-page .svc p,.studio-page .svc-extra,.studio-page .step p,.studio-page .faq-body p{font-size:18px;line-height:1.65}
.studio-page .portfolio-card-copy>span{font-size:17px}.studio-page .portfolio-card-copy b{font-size:16px}
.studio-page .portfolio-card-copy small{font-size:12px}.studio-page .portfolio-card-copy strong{font-size:26px}
@media(max-width:1199px){.studio-page .studio-brand{font-size:16px}}
@media(max-width:650px){
.studio-page .wrap,.studio-page .topbar-in{padding-inline:18px}
.studio-page .studio-brand{font-size:12px}
.studio-page .tile b{font-size:17px}.studio-page .tile span{font-size:14px}
.studio-page .portfolio-card-copy strong{font-size:24px}
}

/* ===== studio-motion.css ===== */
/* Depth is decorative: text, navigation and interaction targets stay stable. */
.studio-page .studio-hero{position:relative;isolation:isolate}
.studio-page .studio-hero:before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-70px -4vw 0;background:radial-gradient(ellipse at 85% 20%,#b3805520,transparent 48%),linear-gradient(125deg,transparent 50%,#ac957b0b 50.1%,transparent 72%)}
.studio-page .portfolio-card{position:relative;transform:perspective(1000px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg));transition:transform .25s,box-shadow .25s}
.studio-page .portfolio-card:hover{box-shadow:0 20px 40px #24282918}
.studio-page .portfolio-card img{transition:transform .6s;transform-origin:center}
.studio-page .portfolio-card:hover img{transform:scale(1.035)}
.motion-reveal{transition:opacity .7s,translate .9s cubic-bezier(.2,.65,.3,1)}
.motion-reveal.motion-pending{opacity:0;translate:0 35px}
@media(prefers-reduced-motion:reduce){.studio-page .portfolio-card{transform:none!important;animation:none!important}.motion-reveal{opacity:1!important;translate:none!important;transition:none!important}.studio-page .portfolio-card img{transform:none!important;transition:none}}

/* ===== studio-cinematic.css ===== */
/* One continuous visual environment for the studio homepage. The canvas is
   decorative; content, controls and document flow remain normal HTML. */
body.cinematic-page{
  --paper:#080a0f;--paper-card:rgba(16,19,26,.78);--ink:#f6f3ee;
  --ink-soft:#b9b8bd;--ink-faint:#8f929a;--rule:rgba(255,255,255,.13);
  --rule-soft:rgba(255,255,255,.08);--accent:#ff6a3d;--accent-deep:#ff8967;
  --accent-soft:rgba(238,82,39,.14);--tint:rgba(12,15,23,.6);
  --card-border:rgba(255,255,255,.13);
  --card-shadow:0 18px 55px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.05);
  --card-shadow-lift:0 28px 80px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.1);
  background:#080a0f;color:#f6f3ee;color-scheme:dark;
}
:root[data-theme="light"] body.cinematic-page{
  --paper:#eef0f3;--paper-card:rgba(255,255,255,.72);--ink:#10131a;
  --ink-soft:#494f5b;--ink-faint:#6d7280;--rule:rgba(21,27,40,.14);
  --rule-soft:rgba(21,27,40,.08);--accent:#ca391d;--accent-deep:#a82c13;
  --accent-soft:rgba(211,58,30,.1);--tint:rgba(243,245,248,.62);
  --card-border:rgba(30,38,52,.12);
  --card-shadow:0 20px 60px rgba(28,35,52,.1),inset 0 1px rgba(255,255,255,.8);
  --card-shadow-lift:0 30px 80px rgba(28,35,52,.16),inset 0 1px #fff;
  background:#eef0f3;color:#10131a;color-scheme:light;
}
#cinematic-scene{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;display:block;background:radial-gradient(circle at 72% 34%,rgba(78,55,174,.18),transparent 42%),radial-gradient(circle at 75% 68%,rgba(164,57,77,.1),transparent 45%),linear-gradient(135deg,#07090f,#0a0b14 52%,#120a11)}
:root[data-theme="light"] #cinematic-scene{background:radial-gradient(circle at 72% 34%,rgba(105,91,203,.13),transparent 42%),radial-gradient(circle at 75% 68%,rgba(214,91,70,.08),transparent 45%),linear-gradient(135deg,#f2f4f7,#ebeff6 52%,#f6edeb)}
.cinematic-page>.wrap{position:relative;z-index:1}
.cinematic-page:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,7,11,.2),transparent 24% 76%,rgba(5,7,11,.16)),radial-gradient(ellipse at center,transparent 35%,rgba(3,4,8,.24));mix-blend-mode:multiply}
:root[data-theme="light"] .cinematic-page:before{background:radial-gradient(ellipse at center,transparent 45%,rgba(84,91,110,.1));mix-blend-mode:normal}

/* The header floats above the scene instead of cutting it with an opaque bar. */
.cinematic-page .topbar{background:rgba(7,9,14,.68);border-color:rgba(255,255,255,.1);box-shadow:0 14px 42px rgba(0,0,0,.18);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%)}
:root[data-theme="light"] .cinematic-page .topbar{background:rgba(248,249,251,.72);border-color:rgba(30,38,52,.1);box-shadow:0 14px 42px rgba(30,38,52,.09)}
.cinematic-page .services-panel{background:rgba(11,14,20,.94);border-color:rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.5);backdrop-filter:blur(28px)}
:root[data-theme="light"] .cinematic-page .services-panel{background:rgba(251,252,253,.95);border-color:rgba(30,38,52,.12);box-shadow:0 30px 80px rgba(30,38,52,.16)}
.cinematic-page .theme-toggle{background:rgba(12,15,21,.7);border-color:rgba(255,255,255,.15);backdrop-filter:blur(18px);box-shadow:0 12px 38px rgba(0,0,0,.22)}
:root[data-theme="light"] .cinematic-page .theme-toggle{background:rgba(255,255,255,.75);border-color:rgba(30,38,52,.13);box-shadow:0 12px 38px rgba(30,38,52,.12)}

/* Every section stays permeable to the same moving scene. Local veils preserve
   text contrast without turning the visual into a sequence of separate blocks. */
.cinematic-page section{position:relative;border-color:var(--rule)}
.cinematic-page section:not(.band):after{content:"";position:absolute;z-index:-1;pointer-events:none;inset:4% -5vw;background:radial-gradient(ellipse at 24% 45%,rgba(7,9,14,.74),transparent 62%)}
:root[data-theme="light"] .cinematic-page section:not(.band):after{background:radial-gradient(ellipse at 24% 45%,rgba(246,247,250,.78),transparent 64%)}
.cinematic-page .band:before{background:linear-gradient(120deg,rgba(10,13,20,.76),rgba(14,12,22,.54) 54%,rgba(22,12,18,.62));border-block:1px solid rgba(255,255,255,.08)}
:root[data-theme="light"] .cinematic-page .band:before{background:linear-gradient(120deg,rgba(244,246,249,.72),rgba(235,239,245,.52) 54%,rgba(247,235,232,.57));border-color:rgba(30,38,52,.08)}
/* First screen: one centred statement over the shared particle scene. The
   soft veil behind the text keeps contrast while particles orbit around it. */
.cinematic-page .studio-hero{padding-top:0!important}
.cinematic-page .studio-hero:before{inset:-76px -50vw 0;background:radial-gradient(ellipse 44% 34% at 50% 40%,rgba(7,9,15,.66),transparent 72%),radial-gradient(circle at 50% 28%,rgba(112,76,255,.09),transparent 36%)}
:root[data-theme="light"] .cinematic-page .studio-hero:before{background:radial-gradient(ellipse 44% 34% at 50% 40%,rgba(243,245,248,.78),transparent 72%)}
.cinematic-page .hero-first{min-height:calc(100svh - 76px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(32px,5vh,64px) 0 clamp(96px,15vh,150px)}
.cinematic-page .studio-hero h1{max-width:none;margin:0;font-size:clamp(2rem,4.7vw,4.1rem);font-weight:600;line-height:1.1;letter-spacing:-.035em;text-shadow:0 3px 28px rgba(0,0,0,.25)}
.cinematic-page .studio-hero h1 .hero-title-main{display:block;color:var(--ink)}
.cinematic-page .studio-hero h1 .hero-title-scope{display:block;margin-top:.6em;font-size:max(17px,.44em);font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--accent)}
.cinematic-page .studio-hero .lead{max-width:34rem;margin:26px auto 0;color:var(--ink-soft);font-size:clamp(17px,1.35vw,20px);line-height:1.55;text-wrap:balance}
.cinematic-page .studio-hero .cta-row{justify-content:center;gap:14px;margin-top:34px;padding-top:0}
:root[data-theme="light"] .cinematic-page .studio-hero h1{text-shadow:none}

/* Кнопка первого экрана — общая .vh-btn (site-chrome.css). «Притяжение»: частицы сцены кружат вокруг неё (studio-cinematic.js). */

/* Header: Telegram on the first screen; the orange button collapses while the
   hero button is visible (body.hero-cta-visible, studio-navigation.js). */
.cinematic-page .topbar-tg{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;margin-left:auto;min-height:44px;color:var(--ink-soft);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .2s}
.cinematic-page .topbar-tg svg{width:20px;height:20px;fill:currentColor;flex:none}
.cinematic-page .topbar-tg:hover{color:var(--accent)}
.cinematic-page .topbar-tg:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.cinematic-page .topbar .topbar-cta{margin-left:0;max-width:16rem;overflow:hidden;visibility:visible;transition:max-width .45s cubic-bezier(.2,.7,.2,1),padding .45s cubic-bezier(.2,.7,.2,1),margin .45s cubic-bezier(.2,.7,.2,1),opacity .3s,transform .3s}
.cinematic-page.hero-cta-visible .topbar .topbar-cta{max-width:0;padding-inline:0;margin-left:-20px;border-width:0;opacity:0;transform:translateY(-6px);box-shadow:none;pointer-events:none;visibility:hidden;transition:max-width .45s cubic-bezier(.2,.7,.2,1),padding .45s cubic-bezier(.2,.7,.2,1),margin .45s cubic-bezier(.2,.7,.2,1),opacity .3s,transform .3s,visibility 0s linear .45s}
@media(min-width:1200px){.cinematic-page .topbar-tg{margin-left:0}}
@media(max-width:900px){.cinematic-page .topbar-tg-text{display:none}}
/* Phones: the icon and the button take turns instead of squeezing the name */
@media(max-width:600px){
  .cinematic-page.hero-cta-visible .topbar .topbar-cta{margin-left:-10px}
  .cinematic-page:not(.hero-cta-visible) .topbar-tg{display:none}
  .cinematic-page:not(.hero-cta-visible) .topbar .topbar-cta{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.cinematic-page .topbar .topbar-cta{transition:none}}

.cinematic-page .card-surface,.cinematic-page .svc,.cinematic-page .portfolio-card,.cinematic-page .brief,.cinematic-page .contact,.cinematic-page .ai-strip,.cinematic-page .faq{
  background:linear-gradient(145deg,rgba(25,29,38,.94),rgba(10,13,19,.91));
  border-color:rgba(255,255,255,.13);box-shadow:var(--card-shadow);
}
:root[data-theme="light"] .cinematic-page .card-surface,
:root[data-theme="light"] .cinematic-page .svc,
:root[data-theme="light"] .cinematic-page .portfolio-card,
:root[data-theme="light"] .cinematic-page .brief,
:root[data-theme="light"] .cinematic-page .contact,
:root[data-theme="light"] .cinematic-page .ai-strip,
:root[data-theme="light"] .cinematic-page .faq{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(244,246,249,.91));border-color:rgba(30,38,52,.12)}
.cinematic-page .faq details{margin:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.cinematic-page .faq details+details{border-top:1px solid var(--rule)}
.cinematic-page .tile:hover,.cinematic-page .svc:hover,.cinematic-page .portfolio-card:hover{border-color:rgba(255,116,76,.38);box-shadow:0 28px 85px rgba(0,0,0,.32),0 0 0 1px rgba(255,108,65,.12),inset 0 1px rgba(255,255,255,.1)}
:root[data-theme="light"] .cinematic-page .tile:hover,:root[data-theme="light"] .cinematic-page .svc:hover,:root[data-theme="light"] .cinematic-page .portfolio-card:hover{box-shadow:0 28px 80px rgba(34,43,62,.16),0 0 0 1px rgba(211,58,30,.08)}
.cinematic-page .portfolio-card img{filter:saturate(.92) contrast(1.03)}
.cinematic-page .portfolio-tabs button{background:rgba(11,14,20,.58);border-color:rgba(255,255,255,.12);color:var(--ink-soft);backdrop-filter:blur(12px)}
:root[data-theme="light"] .cinematic-page .portfolio-tabs button{background:rgba(255,255,255,.55);border-color:rgba(30,38,52,.12)}
.cinematic-page .portfolio-tabs button[aria-selected="true"]{background:linear-gradient(120deg,#292018,#141820);color:#fff;border-color:rgba(255,145,99,.45);box-shadow:0 12px 36px rgba(0,0,0,.22)}

/* The moving background is now the page transition. Do not leave content
   transparent while legacy entrance observers are waiting after anchor jumps. */
.cinematic-page .reveal:not(.is-in){opacity:1;transform:none}
.cinematic-page .motion-reveal.motion-pending{opacity:1;translate:0}

.cinematic-page .about-plain{isolation:isolate}
.cinematic-page .portrait{border:1px solid rgba(255,255,255,.2);box-shadow:0 20px 55px rgba(0,0,0,.28)}
.cinematic-page .svc-group{border-color:rgba(255,255,255,.13)}
:root[data-theme="light"] .cinematic-page .svc-group{border-color:rgba(30,38,52,.13)}
.cinematic-page .process-panel{background:linear-gradient(145deg,rgba(14,17,24,.96),rgba(8,10,15,.93));border:1px solid rgba(255,255,255,.14);box-shadow:0 35px 100px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.06)}
:root[data-theme="light"] .cinematic-page .process-panel{background:linear-gradient(145deg,rgba(27,31,39,.94),rgba(10,13,19,.92));box-shadow:0 35px 100px rgba(34,43,62,.2)}
.cinematic-page .band-cta{color:var(--ink)}
.cinematic-page .band-cta h2,.cinematic-page .band-cta .eyebrow,.cinematic-page .band-cta .lead{color:inherit}
.cinematic-page .band-cta .brief{color:var(--ink)}
.cinematic-page footer{position:relative;border-color:var(--rule)}

/* Soft scroll marker: it belongs to the environment and carries no content. */
.cinematic-rail{position:fixed;z-index:2;right:18px;top:50%;width:1px;height:26vh;translate:0 -50%;background:linear-gradient(transparent,rgba(255,255,255,.2),transparent);pointer-events:none}
.cinematic-rail i{position:absolute;left:-2px;top:calc(var(--page-progress,0)*100%);width:5px;height:5px;border-radius:50%;background:#ff7c54;box-shadow:0 0 15px #ff6a3d,0 0 34px rgba(126,103,255,.7);translate:0 -50%}
:root[data-theme="light"] .cinematic-rail{background:linear-gradient(transparent,rgba(20,27,42,.2),transparent)}

@media(max-width:760px){
  .cinematic-page .hero-first{padding:28px 0 104px}
  .cinematic-page .studio-hero h1{font-size:clamp(1.85rem,8.2vw,2.6rem)}
  .cinematic-page .studio-hero .cta-row{flex-direction:column;align-items:center;width:100%;max-width:340px;margin-inline:auto}
  .cinematic-page section:not(.band):after{inset:2% -20px}
  .cinematic-rail{right:7px;height:20vh;opacity:.65}
}
@media(prefers-reduced-motion:reduce){#cinematic-scene{opacity:.76}.cinematic-rail{display:none}}

/* ===== studio-terms.css ===== */
/* «Условия работы». Без класса .is-scene (нет скрипта или включено «уменьшить
   движение») блок — обычный список с кадрами ролика. С .is-scene — закреплённая
   сцена: ролик идёт вместе с прокруткой, условия проявляются по одному. */
.terms-scene{position:relative;padding:clamp(56px,8vw,110px) 0}
.cinematic-page .terms-scene:after{display:none}
.terms-scene h2{font-size:clamp(26px,3vw,40px);margin:0 0 32px}
.terms-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.terms-item{display:flex;align-items:center;gap:20px;padding:18px;border:1px solid var(--rule);border-radius:18px;background:var(--paper-card)}
.terms-still{width:112px;height:112px;flex:none;border-radius:14px;background:#000}
.terms-item h3{font-size:clamp(18px,1.6vw,22px);margin:0 0 6px}
.terms-item p{color:var(--ink-soft);font-size:16px;line-height:1.5}
.terms-progress,.terms-visual{display:none}
@media(max-width:700px){.terms-items{grid-template-columns:1fr}}

/* Сцена */
.terms-scene.is-scene{height:460svh;padding:0}
.is-scene .terms-sticky{position:sticky;top:76px;height:calc(100svh - 76px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,80px)}
.is-scene .terms-copy{position:relative;z-index:1;min-width:0}
.is-scene h2{font-size:clamp(15px,1.2vw,18px);font-weight:500;letter-spacing:0;color:var(--ink-soft);margin:0 0 clamp(20px,4vh,44px)}
.is-scene .terms-items{grid-template-columns:1fr;gap:0}
.is-scene .terms-item{grid-area:1/1;display:block;padding:0;border:0;border-radius:0;background:none;--v:0;opacity:var(--v);filter:blur(calc((1 - var(--v)) * 16px));transform:translateY(calc((1 - var(--v)) * 18px));will-change:opacity,filter,transform}
.is-scene .terms-still{display:none}
.is-scene .terms-item h3{font-size:clamp(34px,4.4vw,68px);line-height:1.05;letter-spacing:-.035em;margin:0 0 18px}
.is-scene .terms-item p{max-width:24ch;font-size:clamp(18px,1.5vw,23px);line-height:1.5}
.is-scene .terms-progress{display:flex;gap:10px;margin-top:clamp(28px,6vh,56px)}
.terms-progress i{position:relative;width:48px;height:3px;border-radius:2px;background:var(--rule);overflow:hidden}
.terms-progress i:after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--f,0));transform-origin:left}
.is-scene .terms-visual{display:grid;place-items:center;min-width:0;--terms-bg:#0c0b13}
:root[data-theme="light"] .is-scene .terms-visual{--terms-bg:#0c0f15}
/* Края кадра растворяются в фоне: чёрное поле ролика не читается как квадрат,
   заодно прячется угол с водяным знаком генератора */
.terms-canvas{display:block;width:min(560px,40vw,calc(100svh - 170px));height:auto;aspect-ratio:1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent),linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent),linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);mask-composite:intersect}

/* Пока сцена на экране, частицы фона отходят на второй план */
#cinematic-scene{transition:opacity .6s ease}
body.terms-active #cinematic-scene{opacity:.28}

/* Светлая тема: медь теряется на светлом фоне, поэтому сцена стоит на тёмной панели */
:root[data-theme="light"] .is-scene .terms-sticky{top:92px;height:calc(100svh - 108px);padding:0 clamp(24px,4vw,64px);border-radius:28px;background:linear-gradient(145deg,#171b23,#07090e);box-shadow:0 35px 100px rgba(34,43,62,.2);--ink:#f6f3ee;--ink-soft:#b9b8bd;--rule:rgba(255,255,255,.14);color:#f6f3ee}

@media(max-width:760px){
  .terms-scene.is-scene{height:420svh}
  .is-scene .terms-sticky{grid-template-columns:1fr;align-content:center;justify-items:center;gap:16px;text-align:center}
  .is-scene .terms-copy{display:contents}
  .is-scene h2{order:0;margin:0}
  .is-scene .terms-visual{order:1}
  .is-scene .terms-items{order:2;width:100%}
  .is-scene .terms-progress{order:3;margin-top:4px}
  .is-scene .terms-item p{margin-inline:auto}
  .is-scene .terms-item h3{font-size:clamp(28px,8vw,40px);margin-bottom:10px}
  .is-scene .terms-item p{font-size:17px}
  .terms-canvas{width:min(80vw,40svh)}
  :root[data-theme="light"] .is-scene .terms-sticky{padding:0 20px}
}

/* ===== studio-services.css ===== */
/* «Что делает студия»: главы направлений идут одна за другой (studio-services.js).
   Навигация закреплена под шапкой. На компьютере мини-сцена закреплена справа
   и меняется вместе с главой, на телефоне сцена стоит над своей главой.
   Без скрипта — обычная колонка, сцены показаны в итоговом состоянии. */
.svc-story{position:relative;padding:clamp(64px,9vw,120px) 0 clamp(48px,7vw,96px);--svc-top:76px;--svc-nav-h:64px}
.cinematic-page .svc-story:after{display:none}
.svc-heading{margin:0 0 18px}

/* ---------- Навигация по направлениям ---------- */
.svc-nav{position:sticky;top:var(--svc-top);z-index:6;display:flex;align-items:center;gap:8px;padding:12px 0;margin-bottom:clamp(28px,4vw,52px)}
.svc-nav:before{content:"";position:absolute;inset:0 -50vw;z-index:-1;background:rgba(8,10,15,.8);border-bottom:1px solid var(--rule);backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);opacity:0;transition:opacity .3s}
.svc-nav.is-stuck:before{opacity:1}
:root[data-theme="light"] .svc-nav:before{background:rgba(243,245,248,.86)}
.svc-nav a{flex:none;padding:10px 16px;border-radius:999px;border:1px solid var(--rule);background:rgba(10,12,18,.42);color:var(--ink-soft);font-size:15px;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;transition:color .2s,border-color .2s,background .3s}
.svc-nav a:hover{color:var(--ink);border-color:rgba(255,138,92,.5)}
.svc-nav a[aria-current="true"]{background:var(--vh-ice-fill);border-color:#e2f2ff;color:#fff;box-shadow:var(--vh-ice-glow)}
.svc-nav a:focus-visible{outline:3px solid var(--vh-ice);outline-offset:3px}
:root[data-theme="light"] .svc-nav a:not([aria-current="true"]){background:rgba(255,255,255,.6)}
/* Короткие названия видны на узких экранах; полные остаются для программ чтения */
.svc-nav .full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.svc-nav-label{display:none}
@media(min-width:1200px){
  .svc-nav .full{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
  .svc-nav .short{display:none}
  /* Заголовок блока переезжает в закреплённую строку, когда большой уходит вверх */
  .svc-nav-label{display:block;flex:none;max-width:0;margin-right:0;overflow:hidden;white-space:nowrap;opacity:0;font:600 15px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);transition:max-width .45s cubic-bezier(.2,.7,.2,1),margin .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
  .svc-nav.is-titled .svc-nav-label{max-width:240px;margin-right:16px;opacity:1}
}

/* ---------- Главы ---------- */
.svc-body{display:grid;grid-template-columns:minmax(0,1fr)}
.svc-chapters{min-width:0}
.svc-chapter{position:relative;padding-bottom:clamp(56px,8vw,96px);scroll-margin-top:calc(var(--svc-top) + var(--svc-nav-h) + 16px)}
.svc-chapter:last-of-type{padding-bottom:0}
.svc-chapter-head{position:relative}
.svc-fx{position:absolute;left:-40px;top:-80px;width:calc(100% + 80px);height:calc(100% + 120px);pointer-events:none;z-index:2}
.svc-title{font-size:clamp(34px,3.9vw,58px);line-height:1.06;letter-spacing:-.035em;margin:0 0 14px;transition:opacity .35s}
.svc-title.is-forming{opacity:0;transition:none}
.svc-promise{font-size:clamp(18px,1.45vw,22px);line-height:1.5;color:var(--ink-soft);margin:0 0 26px;max-width:32ch}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.svc-list li{display:grid;gap:4px;padding:15px 0;border-bottom:1px solid var(--rule);outline:none}
.svc-list b{font-size:clamp(18px,1.35vw,21px);font-weight:600;color:var(--ink);transition:color .2s}
.svc-list span{color:var(--ink-soft);font-size:16px;line-height:1.5}
.svc-list li:focus-visible b{color:var(--accent)}
/* С мышью описание раскрывается при наведении или фокусе; на телефоне видно сразу */
@media (hover:hover) and (pointer:fine){
  .svc-list li{cursor:default}
  .svc-list span{display:block;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease}
  .svc-list li:hover span,.svc-list li:focus-visible span{max-height:10em;opacity:1}
  .svc-list li:hover b{color:var(--accent)}
}
/* Строки-ссылки на страницы услуг: название, цена со стрелкой, описание */
.svc-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:4px;color:inherit;text-decoration:none;outline:none}
.svc-links a span{grid-column:1/-1}
.svc-links em{font-style:normal;font-size:15px;color:var(--ink-soft);white-space:nowrap;align-self:center;font-variant-numeric:tabular-nums}
.svc-links em i{font-style:normal;display:inline-block;margin-left:10px;color:var(--accent);transition:transform .25s}
.svc-links li:hover em i{transform:translateX(4px)}
.svc-links a:focus-visible b{color:var(--accent)}
.svc-links a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
@media (hover:hover) and (pointer:fine){
  .svc-links li{cursor:pointer}
  .svc-links a:focus-visible span{max-height:10em;opacity:1}
}
@media (prefers-reduced-motion:reduce){.svc-links em i{transition:none}}
.svc-addons{margin:22px 0 0;color:var(--ink-soft);font-size:15px;line-height:1.7}
.svc-addons span{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
/* Кнопка сразу под последней главой, компактная и в одну строку */
.svc-cta{margin-top:40px}

/* Появление текста главы при прокрутке: из размытия, лесенкой */
.svc-story.motion .svc-reveal{opacity:0;filter:blur(8px);transform:translateY(12px);transition:opacity .55s ease,filter .55s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.svc-story.motion .svc-reveal.is-in{opacity:1;filter:none;transform:none}

/* ---------- Компьютер: сцена закреплена справа ---------- */
.svc-stage-desk{display:none}
@media(min-width:901px){
  .svc-story.js .svc-body{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:start}
  .svc-story.js .svc-chapter:not(:last-of-type){min-height:min(78svh,720px)}
  .svc-story.js .svc-demo-slot{display:none}
  .svc-story.js .svc-stage-desk{display:block;position:sticky;top:calc(var(--svc-top) + var(--svc-nav-h) + 24px);height:min(480px,calc(100svh - var(--svc-top) - var(--svc-nav-h) - 48px))}
  .svc-stage-desk .demo{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
  .svc-stage-desk .demo.is-active{opacity:1;visibility:visible;transition:opacity .5s}
}

/* ---------- Мини-сцены ---------- */
.svc-demo-slot{position:relative;margin:0 0 24px}
.demo{position:relative;display:grid;place-items:center;min-height:320px}
.svc-story.js .demo [data-s]{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.svc-story.js .demo.s1 [data-s="1"],.svc-story.js .demo.s2 [data-s="2"],.svc-story.js .demo.s3 [data-s="3"],.svc-story.js .demo.s4 [data-s="4"],.svc-story.js .demo.s5 [data-s="5"],.svc-story.js .demo.s6 [data-s="6"],.svc-story.js .demo.s7 [data-s="7"]{opacity:1;transform:none}
.svc-story.js .demo.out [data-s]{opacity:0;transform:translateY(-6px);transition-duration:.5s}
.dm-toast{position:absolute;right:4%;bottom:8%;padding:11px 15px;border-radius:12px;background:#f6f3ee;color:#0b0d12;font-size:13px;font-weight:600;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.dm-toast:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px}
.dm-msg{margin:0;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.4;max-width:82%}
.dm-msg.bot{background:#232834;color:#e9e6e0;border-top-left-radius:4px}
.dm-msg.me{background:var(--vh-ice-fill);border:1px solid #e2f2ff;box-shadow:var(--vh-ice-glow);color:#fff;margin-left:auto;border-top-right-radius:4px;font-weight:600}

/* Сайты: страница собирается по блокам */
.dm-browser{width:min(100%,500px);aspect-ratio:1.22;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#171b23,#0b0d12);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.dm-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.dm-bar i{width:8px;height:8px;border-radius:50%;background:#3a3f4a}
.dm-bar span{margin-left:12px;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.05);color:#8f929a;font-size:11px}
.dm-page{flex:1;display:grid;gap:12px;align-content:start;padding:18px 20px}
.dm-nav{display:flex;align-items:center;gap:8px}
.dm-nav b{width:42px;height:10px;border-radius:3px;background:var(--accent)}
.dm-nav i{width:26px;height:6px;border-radius:3px;background:#3a3f4a}
.dm-nav i:first-of-type{margin-left:auto}
.dm-h1{height:16px;width:78%;border-radius:4px;background:#e9e6e0}
.dm-h1.short{width:52%;margin-top:-4px}
.dm-p{height:7px;width:64%;border-radius:4px;background:#50555f}
.dm-btn{width:max-content;padding:8px 13px;border-radius:8px;background:#16181c;border:1px solid #b9e0ff;box-shadow:0 6px 18px -8px rgba(120,185,255,.7);color:#f6f3ee;font-size:11px;font-weight:600}
.dm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dm-cards i{height:58px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.dm-form{display:flex;align-items:center;gap:8px}
.dm-form i{flex:1;height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.14)}
.dm-form b{padding:6px 10px;border-radius:6px;background:#2a2e36;color:#f6f3ee;font-size:11px}

/* Боты: запись в чате */
.dm-phone{width:min(100%,290px);border-radius:30px;padding:10px;background:#0b0d12;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.dm-chat-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:20px 20px 6px 6px;background:#171b23}
.dm-chat-head i{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#8277ff)}
.dm-chat-head b{display:block;color:#f6f3ee;font-size:13px}
.dm-chat-head small{color:#7fd19b;font-size:11px}
.dm-chat{display:grid;gap:10px;align-content:start;min-height:280px;padding:14px 10px}
.dm-chips{display:flex;flex-wrap:wrap;gap:6px}
.dm-chips span{padding:7px 10px;border-radius:9px;border:1px solid rgba(255,255,255,.18);color:#e9e6e0;font-size:12px;transition:background .3s,color .3s,border-color .3s}
.demo.s3 .dm-chips .pick,.svc-story:not(.js) .dm-chips .pick{background:var(--vh-ice-fill);border-color:#e2f2ff;color:#fff;box-shadow:var(--vh-ice-glow)}

/* Кабинеты и CRM: новая заявка и смена статуса */
.dm-app{width:min(100%,500px);aspect-ratio:1.3;display:grid;grid-template-columns:52px minmax(0,1fr);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#171b23,#0b0d12);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.dm-side{display:grid;align-content:start;justify-items:center;gap:16px;padding:16px 0;border-right:1px solid rgba(255,255,255,.08)}
.dm-side b{width:22px;height:22px;border-radius:7px;background:var(--accent)}
.dm-side i{width:18px;height:6px;border-radius:3px;background:#3a3f4a}
.dm-main{display:grid;gap:12px;align-content:start;padding:16px;min-width:0}
.dm-head{display:flex;align-items:center;gap:10px}
.dm-head b{margin-right:auto;color:#f6f3ee;font-size:15px}
.dm-head span{padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.05);text-align:right}
.dm-head i{display:block;font-style:normal;color:#8f929a;font-size:10px}
.dm-head strong{color:#f6f3ee;font-size:15px}
.dm-rows{display:grid;gap:6px}
.dm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.04);color:#e9e6e0;font-size:12px}
.svc-story.js .dm-row.dm-new{max-height:0;padding-block:0;overflow:hidden;transition:max-height .5s,padding .5s,opacity .45s,transform .5s}
.dm-row.dm-new{background:rgba(255,106,61,.12);border:1px solid rgba(255,106,61,.35)}
.svc-story.js .demo.s2 .dm-row.dm-new{max-height:44px;padding-block:9px}
.svc-story.js .demo.out .dm-row.dm-new{max-height:0;padding-block:0}
.dm-status{position:relative;display:inline-grid;font-style:normal}
.dm-status i{grid-area:1/1;padding:3px 8px;border-radius:999px;font-style:normal;font-size:11px;font-weight:600;transition:opacity .3s}
.st-new{background:rgba(255,106,61,.2);color:#ffb08f}
.st-work{background:rgba(130,119,255,.2);color:#c2bcff}
.st-done{background:rgba(127,209,155,.18);color:#9fe3b6}
.dm-new .st-work,.dm-new .st-done{opacity:0}
.demo.s3 .dm-new .st-new{opacity:0}.demo.s3 .dm-new .st-work{opacity:1}
.demo.s4 .dm-new .st-work{opacity:0}.demo.s4 .dm-new .st-done{opacity:1}
.dm-chart{display:flex;align-items:flex-end;gap:7px;height:84px;padding-top:6px}
.dm-chart i{flex:1;height:100%;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,var(--accent),rgba(255,106,61,.25));transform:scaleY(var(--h));transform-origin:bottom;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.svc-story.js .dm-chart i{transform:scaleY(.08)}
.svc-story.js .demo.s1 .dm-chart i{transform:scaleY(var(--h))}
.svc-story.js .demo.out .dm-chart i{transform:scaleY(.08)}

/* Автоматизация и ИИ: заявка проходит по цепочке, ассистент отвечает */
.demo[data-demo="auto"]{align-content:center;gap:34px}
.dm-flow{display:flex;align-items:center;width:min(100%,500px)}
.dm-node{flex:none;padding:12px 14px;border-radius:12px;background:#171b23;border:1px solid rgba(255,255,255,.14);color:#e9e6e0;font-size:13px;font-weight:600;text-align:center;transition:border-color .4s,box-shadow .4s,opacity .45s,transform .5s}
.dm-link{position:relative;flex:1;height:2px;margin:0 6px;background:rgba(255,255,255,.14)}
.dm-link i{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);opacity:0}
.demo.s2 .link-a i{animation:dm-travel .8s ease-in-out forwards}
.demo.s3 .link-b i{animation:dm-travel .8s ease-in-out forwards}
@keyframes dm-travel{0%{left:0;opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
.demo.s2 .node-b,.demo.s3 .node-c{border-color:#e2f2ff;box-shadow:var(--vh-ice-glow)}
.dm-ai{display:grid;gap:10px;width:min(100%,400px)}
.dm-ai small{color:#8f929a;font-size:12px}
.dm-typing{display:flex;gap:4px;width:max-content}
.dm-typing i{width:6px;height:6px;border-radius:50%;background:#8f929a;animation:dm-dots 1s infinite}
.dm-typing i:nth-child(2){animation-delay:.15s}.dm-typing i:nth-child(3){animation-delay:.3s}
@keyframes dm-dots{0%,100%{opacity:.3}50%{opacity:1}}
.demo.s6 .dm-typing,.svc-story:not(.js) .dm-typing{display:none}

/* ---------- Телефон ---------- */
@media(max-width:900px){
  .dm-browser,.dm-app{width:min(100%,420px)}
}
@media(max-width:600px){
  .svc-nav{gap:6px;padding:10px 0}
  .svc-nav a{padding:9px 14px;font-size:14px}
  .svc-fx{left:-16px;width:calc(100% + 32px)}
  .demo{min-height:0}
  .demo[data-demo="auto"]{gap:24px;padding:12px 0}
  .dm-browser,.dm-app{aspect-ratio:auto}
  .dm-page{gap:10px;padding:14px}
  .dm-cards i{height:40px}
  .dm-chart{height:64px}
  .dm-chat{min-height:230px}
  .dm-node{padding:9px 8px;font-size:11px}
  .dm-toast{font-size:12px;right:0;bottom:4%}
}
@media(prefers-reduced-motion:reduce){
  .svc-stage-desk .demo,.demo [data-s],.dm-chart i,.dm-row.dm-new,.dm-status i,.svc-nav-label{transition:none!important}
  .dm-typing i{animation:none}
}

/* ===== studio-about.css ===== */
/* Блок «Разработка с пониманием экономики бизнеса» (studio-about.js).
   Блок закрепляется, и пока крутишь, текст печатается на месте. Если текст выше
   экрана, он плавно подтягивается вверх за курсором, сам блок стоит.
   Компьютер: текст слева, портрет закреплён справа. Телефон: портрет над текстом. */
.about-scene{--about-top:76px;--photo-h:min(520px,calc(100svh - var(--about-top) - 96px))}
.about-eyebrow{margin:0 0 14px}
.about-title{margin:0 0 24px}
.about-scene .about-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:40rem}
.about-scene .about-grid p:last-child:nth-child(odd){grid-column:auto;max-width:none}

/* ---------- Портрет: целиком, края растворяются в фоне ---------- */
.about-photo{position:relative;isolation:isolate;margin:0 auto 32px;width:min(74%,300px);aspect-ratio:900/1352}
/* Тёмный ореол цвета фона снимка: страница плавно темнеет к портрету, чёрное поле не читается прямоугольником */
.about-photo:before{content:"";position:absolute;z-index:-1;inset:-12% -22% -8%;background:radial-gradient(ellipse 56% 54% at 50% 48%,rgba(4,4,4,.9) 45%,rgba(4,4,4,.45) 66%,transparent 80%);filter:blur(22px);pointer-events:none}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 64%,transparent 97%),linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent,#000 8%,#000 64%,transparent 97%),linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-composite:intersect}
/* Светлая тема: фото в тёмной скруглённой карточке; скругление на снимке, чтобы не обрезать цифры */
:root[data-theme="light"] .about-photo:before{display:none}
:root[data-theme="light"] .about-photo img{-webkit-mask-image:none;mask-image:none;border-radius:22px;background:#040404;box-shadow:0 30px 70px rgba(28,35,52,.18)}

/* Факты поверх портрета */
.about-facts{position:absolute;left:-14%;right:-14%;bottom:5%;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.about-fact{display:block;padding:12px 14px 14px;border-radius:16px;background:rgba(12,14,20,.74);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.35);color:#c9c8cc;font-size:13px;line-height:1.35}
.about-fact b{display:block;margin-bottom:5px;font:600 28px/1 var(--display);letter-spacing:-.02em;color:#f6f3ee}

/* ---------- Кнопка связи ---------- */
.about-contact{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:13px 20px;border-radius:12px;border:1px solid var(--rule);background:rgba(10,12,18,.42);color:var(--ink);font-size:16px;font-weight:600;text-decoration:none;transition:border-color .2s,opacity .5s,transform .5s}
.about-contact svg{width:20px;height:20px;flex:none;fill:var(--accent)}
.about-contact:hover{border-color:var(--accent)}
.about-contact:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
:root[data-theme="light"] .about-contact{background:rgba(255,255,255,.6)}

/* ---------- Закреплённая рамка с текстом ---------- */
.about-scene.is-pinned .about-track{height:var(--about-track-h)}
.about-scene.is-pinned .about-pin{position:sticky;top:calc(var(--about-top) + 16px);height:calc(100svh - var(--about-top) - 32px);overflow:hidden;display:flex;flex-direction:column;justify-content:center}
/* Текст выше рамки: начинается сверху, края рамки мягко гаснут */
.about-scene.is-pinned .about-pin.is-tall{justify-content:flex-start;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(180deg,transparent,#000 22px,#000 calc(100% - 28px),transparent)}
.about-copy{flex:none;padding-block:6px 10px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
/* Кнопка появляется, когда текст допечатан */
.about-scene.is-pinned .about-contact{opacity:0;transform:translateY(8px);pointer-events:none}
.about-scene.is-pinned.is-done .about-contact{opacity:1;transform:none;pointer-events:auto}

/* ---------- Компьютер: текст слева, портрет справа, оба стоят на месте ---------- */
@media(min-width:1024px){
  .about-scene{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"track photo" "ai ai";column-gap:clamp(48px,6vw,104px)}
  .about-track{grid-area:track;min-width:0}
  .about-scene > .ai-strip{grid-area:ai}
  .about-photo{grid-area:photo;align-self:start;margin:0;width:auto;height:var(--photo-h);min-height:360px;position:sticky;top:calc(var(--about-top) + 16px + (100svh - var(--about-top) - 32px - var(--photo-h)) / 2)}
  .about-facts{left:-48px;right:auto;bottom:10%;grid-template-columns:1fr;gap:12px}
  .about-fact{max-width:230px;padding:14px 18px 16px;font-size:14px}
  .about-fact b{font-size:clamp(30px,2.6vw,40px)}
}

/* ---------- Печать текста ---------- */
/* Ещё не напечатанные буквы невидимы, но занимают своё место — блок не прыгает */
.tw-ch{opacity:0;transition:opacity .12s}
.tw-ch.on{opacity:1}
/* Только что напечатанная буква на миг вспыхивает медью */
.tw-ch.fresh{animation:tw-fresh .9s ease-out}
@keyframes tw-fresh{from{color:var(--accent);text-shadow:0 0 12px rgba(255,106,61,.55)}}
.tw-ch.caret{position:relative}
.tw-ch.caret:after{content:"";position:absolute;right:-3px;top:.12em;bottom:.04em;width:2px;border-radius:1px;background:var(--accent);box-shadow:0 0 8px rgba(255,106,61,.7);animation:tw-blink 1s steps(1) infinite}
@keyframes tw-blink{50%{opacity:0}}
/* Цельная копия абзаца для программ чтения с экрана */
.tw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ===== studio-navigation.css ===== */
.studio-page .topbar{z-index:80}
@media(min-width:1200px){
 .studio-page .topbar nav{align-items:center}
 .studio-page .topbar nav>a{display:flex;align-items:center;min-height:44px;line-height:1.4}
 .studio-page .services-toggle{line-height:1.4}
}
.studio-page .services-disclosure{position:relative}
.studio-page .services-toggle{display:flex;align-items:center;gap:9px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:17px;cursor:pointer}
.services-toggle>span{transition:transform .2s;color:#b7794c}
.services-toggle[aria-expanded="true"]>span{transform:rotate(180deg)}
.studio-page .services-panel{position:absolute;top:calc(100% + 15px);right:-220px;width:720px;max-width:calc(100vw - 48px);display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:18px;border:1px solid var(--rule);border-top:2px solid #b7794c;border-radius:18px;background:var(--paper);box-shadow:0 24px 70px #0002}
.studio-page .services-panel[hidden]{display:none}
.studio-page .topbar nav .services-panel a{display:flex;align-items:flex-start;gap:14px;padding:18px;border:0;border-radius:10px;white-space:normal;text-decoration:none;color:var(--ink);transition:background .2s}
.studio-page .services-panel a:hover,.studio-page .services-panel a:focus-visible{background:#b7794c12}
.services-panel strong{display:block;font-size:17px;line-height:1.3;font-weight:650}
.services-panel small{display:block;margin-top:7px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.service-symbol{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid #b7794c55;border-radius:9px;color:#b7794c;font-size:24px}
.services-toggle:focus-visible,.services-panel a:focus-visible{outline:2px solid #b7794c;outline-offset:4px}
@media(max-width:1199px){
 .studio-page .topbar.nav-open nav{max-height:calc(100dvh - 76px);overflow-y:auto;padding:14px 24px 24px}
 .studio-page .services-toggle{width:100%;justify-content:space-between;min-height:50px;font-size:18px}
 .studio-page .services-panel{position:static;width:auto;max-width:none;margin:4px 0 18px;padding:8px;box-shadow:none;border-radius:12px}
 .studio-page .topbar.nav-open nav>a{display:block;padding:16px 0;border-top:1px solid var(--rule);font-size:18px}
}
@media(max-width:600px){
 .studio-page .services-panel{grid-template-columns:1fr}
 .studio-page .topbar nav .services-panel a{padding:12px 8px;gap:12px}
 .services-panel strong{font-size:16px}.services-panel small{font-size:13px}
 .studio-page .topbar .btn-tail{display:none}
}
@media(max-width:359px){.studio-page .studio-home .studio-brand{font-size:10px}.studio-page .studio-logo{width:30px}.studio-page .topbar-in{padding-inline:8px;gap:6px!important}.studio-page .topbar .btn{padding-inline:8px}}