/* ==== 38-report.css ==== */
/* ---------- REPORT CARD (.rep-, 2026-10-01 subscription round): the product itself. A lit white app window on the dark
   „Кино“ stage with the one illustrative number set of a fictional business (report.html). Card only: the scene around it
   owns the heading. Include it inside a .scn-stage; it plays with the scene (.sq + .play from 12-stage.js), the numbers count up
   through [data-count] (10-motion.js) and the bars grow when the scene starts. ---------- */
.rep-dash{--rep-bar:44px;position:relative;container-type:inline-size;display:grid;gap:14px;width:100%;max-width:640px;margin-inline:auto;
  padding:calc(var(--rep-bar) + clamp(16px,2vw,24px)) clamp(16px,2vw,24px) clamp(16px,2vw,24px);border-radius:28px;overflow:hidden;
  background:#fff;color:var(--ink);text-align:left;box-shadow:0 2px 6px rgba(0,0,0,.1),0 44px 90px -40px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.14)}
/* the app bar: three dots and the window name, like the other windows on the stage */
.rep-dash::before{content:"Отчет";position:absolute;left:0;right:0;top:0;height:var(--rep-bar);display:grid;place-items:center;
  font:600 14px/1 var(--f);letter-spacing:.02em;color:var(--muted);border-bottom:1px solid var(--line);
  background:radial-gradient(circle 5px at 22px 50%,#D8DCE8 98%,transparent) no-repeat,radial-gradient(circle 5px at 40px 50%,#D8DCE8 98%,transparent) no-repeat,
    radial-gradient(circle 5px at 58px 50%,#D8DCE8 98%,transparent) no-repeat,#F5F6FB}
html[lang=en] .rep-dash::before{content:"Report"}
.rep-top{display:flex;align-items:center;gap:12px;min-width:0}
.rep-logo{width:46px;height:46px;flex:none}
.rep-top p{min-width:0}
.rep-top p b{display:block;font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.rep-top p small{display:block;margin-top:2px;font-size:15px;color:var(--muted)}
.rep-from{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:var(--mist);font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.rep-from i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--cobalt);color:#fff;font-style:normal;font-size:14px;font-weight:600}

/* KPIs: 2×2 on a narrow card, one row of four on a wide one */
.rep-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rep-kpi{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px;border-radius:18px;background:var(--mist)}
.rep-kpi span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--cobalt);margin-bottom:8px}
.rep-kpi span .ic{width:19px;height:19px}
.rep-kpi small{font-size:15px;line-height:1.3;color:var(--muted)}
.rep-kpi b{margin-top:auto;padding-top:6px;font-size:clamp(28px,2.4vw,36px);font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.rep-kpi.is-main{background:var(--cobalt);color:#fff}
.rep-kpi.is-main span{background:rgba(255,255,255,.16);color:#fff}
.rep-kpi.is-main small{color:rgba(255,255,255,.88)}

.rep-row{display:grid;grid-template-columns:1fr;gap:10px}
.rep-chart,.rep-learn,.rep-next{padding:16px;border-radius:18px;background:var(--mist);box-shadow:inset 0 0 0 1px rgba(11,18,51,.045),inset 0 1px 0 #fff}
.rep-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px}
.rep-h b{font-size:16px;font-weight:600;line-height:1.3}
.rep-h small{font-size:15px;color:var(--muted);white-space:nowrap}
.rep-bars{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:32px;
  background:repeating-linear-gradient(to top,transparent 0 29px,rgba(83,103,162,.1) 29px 30px);border-bottom:1px solid rgba(83,103,162,.14)}
.rep-bars i{position:relative;flex:1;height:calc(var(--h) * 100%);border-radius:8px 8px 3px 3px;background:#C5CCF6;transform-origin:50% 100%}
.rep-bars i.is-top{background:var(--cobalt)}
.rep-bars em{position:absolute;left:50%;top:-23px;translate:-50% 0;font-style:normal;font-size:14px;font-weight:600;line-height:1;color:var(--muted)}
.rep-bars i.is-top em{color:var(--cobalt)}
.rep-days{display:flex;gap:8px;margin-top:8px}
.rep-days span{flex:1;text-align:center;font-size:14px;color:var(--muted)}

/* „what worked“: two winner tiles (channel, day), each with a small cup */
.rep-learn{display:flex;flex-direction:column}
.rep-learn .rep-h{margin-bottom:2px}
.rep-win{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 12px 10px 10px;border-radius:14px;background:#fff}
.rep-win-i{position:relative;width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--cobalt-tint);color:var(--cobalt)}
.rep-win-i>.ic{width:21px;height:21px}
.rep-win p{flex:1;min-width:0}
.rep-win b{display:block;font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.rep-win small{display:block;margin-top:3px;font-size:14px;line-height:1.25;color:var(--muted);white-space:nowrap}
/* the cup badge on the tile's corner */
.rep-cup{position:absolute;right:-7px;top:-7px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#E3F6EC;color:#127A4B;box-shadow:0 0 0 2px #fff}
.rep-cup .ic{width:14px;height:14px;stroke-width:2.2}

/* next month: our tasks + the one button the owner taps */
.rep-next-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rep-next-h .rep-h b{white-space:nowrap}
.rep-ok{position:relative;display:inline-grid;flex:none;font-size:15px;font-weight:600;line-height:1}
.rep-ok-a,.rep-ok-b{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 18px;border-radius:999px;color:#fff;white-space:nowrap}
.rep-ok-a{background:var(--cobalt);opacity:0}
.rep-ok-b{background:#127A4B;box-shadow:0 10px 22px -10px rgba(18,122,75,.8)}
.rep-ok-b .ic{width:17px;height:17px;stroke-width:3}
.rep-tap{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(11,18,51,.22);opacity:0;pointer-events:none}
.rep-next ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rep-next li{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;font-size:15px;font-weight:500}
.rep-next li i{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--cobalt-tint);color:var(--cobalt)}
.rep-next li .ic{width:15px;height:15px}

/* the honesty caption under the card, on the dark stage */
.rep-cap{margin:22px auto 0;max-width:640px;text-align:center;font-size:16px;line-height:1.45;color:var(--on-3);text-wrap:balance}

@container (min-width:560px){
  .rep-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rep-row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .rep-kpi b{font-size:clamp(26px,5.4cqi,34px)}
}
@container (max-width:380px){
  .rep-from{font-size:0;gap:0;padding:4px}
  .rep-top p b{font-size:17px}
  .rep-kpi{padding:12px}
  .rep-kpi b{font-size:28px}
  .rep-bars{gap:6px}
  .rep-days{gap:6px}
  /* 2026-10-06: on a 360 phone the one-line „Следващия месец“ + the button were wider than the card, so the whole grid grew
     and the card clipped every row on the right; the title may wrap here instead */
  .rep-next-h .rep-h b{white-space:normal}
}

/* the bars grow once the scene plays; a calm glow on the best day while the card is on screen (38-report.js sets .is-live) */
@media (prefers-reduced-motion:no-preference){
  html.js .rep-bars i{transform:scaleY(.04);transition:transform 1s var(--ease);transition-delay:calc(var(--d0,0s) + .7s + var(--b,0) * 90ms)}
  html.js .play .rep-bars i{transform:none}
  html.js .rep-dash.is-live .rep-bars i.is-top{animation:repGlow 4s ease-in-out 2s infinite}
  /* one time, after the numbers: a tap, then „Одобрете“ turns into „Одобрено“ (without JS or motion the approved state just shows) */
  html.js .rep-ok-a{opacity:1}
  html.js .rep-ok-b{opacity:0}
  html.js .play .rep-tap{animation:repTap .7s ease-out both;animation-delay:calc(var(--d0,0s) + 3.2s)}
  html.js .play .rep-ok-a{animation:repOff .3s ease both;animation-delay:calc(var(--d0,0s) + 3.45s)}
  html.js .play .rep-ok-b{animation:repOn .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--d0,0s) + 3.45s)}
}
@keyframes repGlow{0%,100%{box-shadow:0 0 0 0 rgba(35,53,255,0)}50%{box-shadow:0 0 0 6px rgba(35,53,255,.14)}}
@keyframes repTap{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:scale(1.9)}}
@keyframes repOff{from{opacity:1}to{opacity:0;transform:scale(.92)}}
@keyframes repOn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* ---------- light theme (2026-10-19) ----------
   The card is already a white app window; on the light page it gets the daylight shadow and a hairline instead of the night glow. */
:root[data-theme="light"] .rep-dash{box-shadow:0 0 0 1px rgba(11,18,51,.07),0 2px 6px rgba(11,18,51,.05),0 50px 100px -44px rgba(11,18,51,.42)}
:root[data-theme="light"] .rep-dash::before{background:radial-gradient(circle 5px at 22px 50%,#D3D8E6 98%,transparent) no-repeat,radial-gradient(circle 5px at 40px 50%,#D3D8E6 98%,transparent) no-repeat,
    radial-gradient(circle 5px at 58px 50%,#D3D8E6 98%,transparent) no-repeat,#F7F8FC}
:root[data-theme="light"] .rep-kpi:not(.is-main),:root[data-theme="light"] :is(.rep-chart,.rep-learn,.rep-next){background:#F2F4FA}
:root[data-theme="light"] .rep-from{background:#F2F4FA}

/* ==== 61-proekti.css ==== */
/* ---------- PROEKTI „Кино“ (.pr-) : the poster wall sub-hero (board D-28), then three scenes on the shared stage:
   #pr-live (the 4 live client sites: laptop + phone screening room), #pr-con (the 5 flagship concepts: a coverflow of screens)
   and #pr-gal (all 12 concepts: filter + lit thumbnails). Sequencing comes from 04-stage.css (.sq in [data-play] groups).
   The one loop per scene is the auto-advance of the room (progress bar per tab), gated by .live; clips are handled by 61-proekti.js.
   Honesty: live = green dot „На живо“ + the real domain; concept = hollow ring „Концепция“, on every item and in every state. ---------- */

/* ---------- device mockups (page-local names, so nothing collides with the home mockups) ---------- */
.pr-phone{position:relative;background:#0A0D1F;border-radius:17%/7.9%;padding:3.6%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),0 34px 60px -24px rgba(0,0,30,.75)}
.pr-ph-view{position:relative;aspect-ratio:9/19.5;overflow:hidden;border-radius:14%/6.5%;background:#000}
.pr-ph-view::before{content:'';position:absolute;z-index:3;top:2.6%;left:50%;width:30%;height:3.2%;translate:-50% 0;border-radius:99px;background:#000}
.pr-ph-view::after,.pr-lap-view::after,.pr-cs-scr::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 34%)}
.pr-ph-view img,.pr-lap-view img{width:100%;height:auto}
.pr-lap{position:relative}
.pr-lap-screen{position:relative;background:#0A0D1F;border-radius:18px 18px 4px 4px;padding:1.5% 1.5% 2.2%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 0 1px rgba(255,255,255,.05),0 50px 90px -40px rgba(0,0,30,.85)}
.pr-lap-view{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:0 0 5px 5px;background:#000}
.pr-lap-base{position:relative;height:clamp(9px,1.3vw,16px);margin-inline:-6.5%;background:linear-gradient(180deg,#EEF0F6 0%,#C7CCDA 45%,#8E95AB 100%);border-radius:2px 2px 18px 18px/2px 2px 14px 14px;box-shadow:0 26px 40px -14px rgba(0,0,30,.6)}
.pr-lap-base::before{content:'';position:absolute;left:50%;top:0;width:15%;height:38%;translate:-50% 0;background:#B3B9CA;border-radius:0 0 10px 10px}

/* browser address bar: the real domain, with the lock of a secure site */
.pr-url{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#171B31;border-radius:6px 6px 0 0}
.pr-url i{width:8px;height:8px;flex:none;border-radius:50%;background:#3B4263}
.pr-url span{flex:1;display:flex;align-items:center;gap:6px;min-width:0;height:20px;margin:0 8% 0 5%;padding-left:12px;border-radius:99px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.86);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden}
.pr-url span b{font-weight:500}
.pr-url svg{width:12px;height:12px;flex:none;fill:none;stroke:#34D27B;stroke-width:2.6;stroke-linecap:round}

/* ---------- poster sub-hero (board D-28): a tilted wall of the live client sites and the concepts ----------
   .pr-plane is one big sheet in perspective. Its columns (.d desktop screens, .p phones) drift up or down at their own pace (--t is
   one set; 61-proekti.js clones each set twice and adds .go), and they follow the scroll at their own speed (--ps from JS x --k).
   The pointer tilts the sheet (--px/--py, 20-sub.js) and lights the screens under it (.lit). A dim layer and a soft pool under the
   title keep it readable; the wall fades out under the header and into the stage. Reduced motion or no JS: one still set. */
.pr-hero{--dw:clamp(250px,24vw,470px);--pw:clamp(116px,11.2vw,216px);--g:clamp(14px,1.5vw,28px)}
.pr-hero .ph-title{--ph-tw:14ch;align-self:center;margin-top:0}
.pr-hero .ph-title::before{content:'';position:absolute;z-index:-1;inset:-46% -22%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,8,44,.9),rgba(5,8,44,.68) 46%,rgba(5,8,44,0))}
.pr-wall{position:absolute;inset:calc(-1 * var(--hdr)) 0 0;overflow:hidden;perspective:1500px;perspective-origin:50% 36%;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,.25),#000 calc(var(--hdr) + 4%),#000 68%,transparent 97%);
  mask-image:linear-gradient(rgba(0,0,0,.25),#000 calc(var(--hdr) + 4%),#000 68%,transparent 97%)}
.pr-plane{position:absolute;left:50%;top:50%;z-index:0;display:flex;align-items:flex-start;gap:var(--g);height:170%;
  transform:translate(-50%,-50%) rotateX(calc(24deg - var(--py) * 3deg)) rotateY(calc(var(--px) * 3deg)) rotateZ(-13deg)}
.pr-col{flex:none;width:var(--pw);height:100%;translate:0 calc(var(--ps,0px) * var(--k))}
.pr-col.d{width:var(--dw)}
.pr-trk{display:flex;flex-direction:column}
.pr-set{display:flex;flex-direction:column;gap:var(--g);padding-bottom:var(--g)}
.pr-set>i{position:relative;display:block;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 34px 60px -30px rgba(0,0,24,.95)}
.pr-set img{width:100%;height:auto;object-fit:cover;object-position:top}
.pr-col.d .pr-set>i{padding-top:clamp(10px,1vw,18px);border-radius:clamp(8px,.75vw,14px);
  background:radial-gradient(circle at 12px 50%,#3B4263 2.6px,transparent 3.2px) 0 0/100% clamp(10px,1vw,18px) no-repeat,
    radial-gradient(circle at 22px 50%,#3B4263 2.6px,transparent 3.2px) 0 0/100% clamp(10px,1vw,18px) no-repeat,#151A36}
.pr-col.d img{aspect-ratio:16/10}
.pr-col.p .pr-set>i{padding:4.2%;border-radius:17%/8%;background:#0A0D1F}
.pr-col.p img{aspect-ratio:9/19.5;border-radius:13%/6%}
/* the dim: an even veil (::before) that hands over to a veil with a hole under the pointer (::after) while it is over the hero */
.pr-wall::before,.pr-wall::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .9s var(--ease)}
.pr-wall::before{background:radial-gradient(ellipse 72% 72% at 50% 48%,rgba(6,9,48,.32),rgba(6,9,48,.5) 55%,rgba(6,9,48,.84))}
.pr-wall::after{opacity:0;background:radial-gradient(circle min(30vw,460px) at calc(50% + var(--px) * 50%) calc(50% + var(--py) * 46%),rgba(6,9,48,0),rgba(6,9,48,.3) 45%,rgba(6,9,48,.8))}
.pr-wall.lit::before{opacity:0}
.pr-wall.lit::after{opacity:1}
/* the one control: hold the drift (WCAG 2.2.2) */
.pr-pp{position:relative;z-index:3;align-self:end;justify-self:start;display:grid;place-items:center;width:48px;height:48px;
  margin:0 0 clamp(20px,4vh,40px) max(var(--gut),calc((100% - 1240px) / 2));padding:0;border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(10,14,52,.55);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background-color .25s,box-shadow .25s}
.pr-pp:hover{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.pr-pp .ic{width:18px;height:18px;stroke-width:2.4}
.pr-i-play,.pr-pp[aria-pressed="true"] .pr-i-pause{display:none}
.pr-pp[aria-pressed="true"] .pr-i-play{display:block}
html:not(.js) .pr-pp{display:none}
@media (prefers-reduced-motion:no-preference){
  html.js .pr-col{animation:prColIn 1.5s var(--ease) calc(var(--i) * 40ms) both}
  .pr-wall.go .pr-trk{translate:0 -16.667%}
  .pr-wall.go .up .pr-trk{animation:prUp var(--t) linear infinite}
  .pr-wall.go .dn .pr-trk{animation:prDn var(--t) linear infinite}
  .ph-off .pr-wall.go .pr-trk,.pr-wall.go.hold .pr-trk{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){.pr-pp{display:none}}
@keyframes prColIn{from{opacity:0;transform:translateY(calc(var(--k) * -70vh))}}
@keyframes prUp{to{transform:translateY(-33.333%)}}
@keyframes prDn{from{transform:translateY(-33.333%)}}

/* ---------- the rooms (shared by #pr-live and #pr-con) ---------- */
.pr-sc{overflow-x:clip} /* the site's light and the side screens may spill past the viewport edge */
.pr-sc .scn-head{margin-bottom:clamp(30px,3.4vw,52px)}
/* each site brings its own light onto the stage: two stacked layers, JS paints the new colour on the hidden one and they crossfade
   with opacity only (no colour transition, so the big gradient is painted once per change, never per frame) */
.pr-glow{position:absolute;inset:-20% -16% -16%;pointer-events:none}
.pr-gl{position:absolute;inset:0;border-radius:50%;--c:transparent;opacity:0;transition:opacity 1.4s var(--ease);
  background:radial-gradient(closest-side,var(--c) 0%,color-mix(in srgb,var(--c) 62%,transparent) 48%,color-mix(in srgb,var(--c) 22%,transparent) 74%,transparent 100%)}
.pr-gl.on{opacity:1}
html.js .play .pr-glow.sq{animation-duration:1.8s}
.pr-vf{position:absolute;inset:0;pointer-events:none;--c:rgba(255,255,255,.42);--k:30px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--k) 2px,linear-gradient(var(--c),var(--c)) 0 0/2px var(--k),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--k) 2px,linear-gradient(var(--c),var(--c)) 100% 0/2px var(--k),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--k) 2px,linear-gradient(var(--c),var(--c)) 0 100%/2px var(--k),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--k) 2px,linear-gradient(var(--c),var(--c)) 100% 100%/2px var(--k);
  background-repeat:no-repeat}

/* stills crossfade; the one clip fades in over its still once it really plays */
.pr-still{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.pr-lap-view .pr-still,.pr-ph-view .pr-still{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .8s var(--ease)}
.pr-lap-view .pr-still.on,.pr-ph-view .pr-still.on{opacity:1}
.pr-vid{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:top;background:transparent;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.pr-vid.on{opacity:1}
.pr-rviz>.pr-vid,.pr-cf>.pr-vid{display:none} /* parked until JS moves it into the chosen screen */

/* tabs: progress bar, name, badge + branch, the link */
.pr-tabs{display:flex;flex-direction:column;gap:6px}
.pr-t{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:4px 0 8px}
.pr-tb{display:flex;flex-direction:column;align-items:flex-start;gap:9px;width:100%;min-height:48px;padding:14px 0 6px;text-align:left;color:inherit;cursor:pointer;background:none;border:0;font:inherit}
.pr-tb:focus-visible{outline-offset:4px;border-radius:12px}
.pr-bar{position:relative;display:block;width:100%;height:3px;margin-bottom:8px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
.pr-bar b{position:absolute;inset:0;border-radius:inherit;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.pr-t.done .pr-bar b{transform:none;background:rgba(255,255,255,.5)}
.pr-t.cur .pr-bar b{animation:prBar var(--t,9.4s) linear forwards;animation-play-state:paused}
.pr-room.run.live:not(.hold) .pr-t.cur .pr-bar b{animation-play-state:running}
@keyframes prBar{from{transform:scaleX(0)}to{transform:none}}
.pr-tn{font-size:clamp(22px,1.9vw,28px);line-height:1.1;font-weight:600;letter-spacing:-.03em;color:var(--on);transition:color .4s}
.pr-tm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pr-br{font-size:16px;line-height:1.3;color:var(--on-3);transition:color .4s}
.pr-t:not(.cur) .pr-tn{color:rgba(255,255,255,.6)}
.pr-t:not(.cur) .pr-tb:hover .pr-tn{color:#fff}
.pr-t.cur .pr-br{color:var(--on-2)}
/* the honesty badge: live = filled green dot, concept = hollow ring; the words say it too */
.pr-bd{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px 0 8px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap}
.pr-bd::before{content:'';width:8px;height:8px;flex:none;border-radius:50%}
.pr-bd.live{background:rgba(52,210,123,.14);color:#BDF5D5}
.pr-bd.live::before{background:#34D27B}
.pr-bd.cpt{background:rgba(201,210,255,.1);color:#DDE2FF;box-shadow:inset 0 0 0 1px rgba(201,210,255,.3)}
.pr-bd.cpt::before{box-shadow:inset 0 0 0 2px #C9D2FF}
/* live tabs: the laptop tag already says „На живо“; the per-tab badge stays for screen readers only */
#pr-live .pr-tb .pr-bd.live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pr-go{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;font-size:16px;font-weight:600;color:#C9D2FF;text-decoration:underline;text-decoration-color:rgba(201,210,255,.35);text-underline-offset:5px;transition:color .3s,text-decoration-color .3s}
.pr-go:hover{color:#fff;text-decoration-color:#fff}
.pr-go .ic{width:17px;height:17px;transition:transform .3s var(--ease)}
.pr-go:hover .ic{transform:translate(2px,-2px)}
.pr-t:not(.cur) .pr-go{color:rgba(201,210,255,.7)}

/* ---------- #pr-live: laptop + phone, tabs at the side ---------- */
.pr-room{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(40px,5vw,84px);align-items:center}
.pr-rviz{position:relative;aspect-ratio:1.42}
.pr-rviz .pr-lap{position:absolute;left:3%;top:4%;width:83%}
.pr-rviz .pr-phone{position:absolute;z-index:3;right:0;bottom:9%;width:21%}
/* the tag under the laptop repeats what is on screen: live dot, „На живо“, the domain */
.pr-tag{position:absolute;z-index:4;left:6%;bottom:0;display:inline-flex;align-items:center;gap:10px;max-width:70%;padding:11px 18px 11px 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:600;line-height:1.1;white-space:nowrap;box-shadow:0 20px 40px -16px rgba(0,0,40,.55)}
.scene .pr-tag{color:var(--ink)}
.pr-tag i{width:9px;height:9px;flex:none;border-radius:50%;background:#34D27B;box-shadow:0 0 0 4px rgba(52,210,123,.22)}
.pr-tag span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-weight:500}

/* ---------- #pr-con: a coverflow of screens, tabs in a row underneath ---------- */
.pr-cfr{grid-template-columns:minmax(0,1fr);gap:clamp(36px,4vw,56px)}
.pr-cf{position:relative;touch-action:pan-y}
.pr-cf-row{position:relative;width:min(60%,720px);margin-inline:auto}
.pr-cs{position:absolute;inset:0 0 auto;z-index:calc(10 - var(--a,0));--a:max(var(--p),calc(var(--p) * -1));
  transform:translateX(calc(var(--p) * 74%)) scale(calc(1 - var(--a) * .2));opacity:calc(1 - var(--a) * .34);
  transition:transform .95s var(--ease),opacity .95s var(--ease);cursor:pointer}
.pr-cs.on{position:relative;cursor:default}
.pr-cs.warp{transition:none;opacity:0}
.pr-cs-dev{position:relative;background:#0A0D1F;border-radius:16px;padding:0 0 1.2%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 60px 100px -46px rgba(0,0,30,.95)}
.pr-cs:not(.on) .pr-cs-dev{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 60px -30px rgba(0,0,30,.8)}
.pr-cs-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#171B31;border-radius:16px 16px 0 0}
.pr-cs-bar i{width:8px;height:8px;flex:none;border-radius:50%;background:#3B4263}
.pr-cs-bar span{display:flex;align-items:center;gap:7px;height:20px;margin:0 auto;padding:0 14px 0 10px;border-radius:99px;background:rgba(255,255,255,.08);color:#fff;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.pr-cs-bar span::before{content:'';width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px #C9D2FF}
.pr-cs-scr{position:relative;aspect-ratio:16/10;margin:0 1.2%;overflow:hidden;border-radius:0 0 6px 6px;background:#000}
.pr-cs-scr picture{display:contents}
.pr-cs-scr .pr-still{position:absolute;inset:0}
.pr-cs-bd{display:none}
/* the side screens dim so the chosen one owns the light */
.pr-cs:not(.on) .pr-cs-scr::after{background:rgba(6,9,40,.38)}
.pr-cs:not(.on):hover{opacity:calc(1 - var(--a) * .24)}
.pr-cfr .pr-tabs{flex-direction:row;gap:clamp(16px,2vw,28px)}
.pr-cfr .pr-t{flex:1 1 0;min-width:0}
.pr-cfr .pr-tn{font-size:clamp(20px,1.6vw,24px)}
/* desktop: a slightly smaller coverflow and a tighter head, so the names show together with the screens (1440x900 too) */
@media (min-width:1001px){
  #pr-con .scn-head{margin-bottom:clamp(24px,2.2vw,34px)}
  .pr-cfr{gap:clamp(28px,2.6vw,40px)}
  .pr-cf-row{width:min(56%,660px)}
}
/* with the chapter rail on the left (≥1280), the side screens stay clear of it: their reach shrinks with the viewport,
   the next pair dims further and the far pair steps out, so the rail reads on the dark stage */
@media (min-width:1280px){
  .pr-cs{transform:translateX(calc(var(--p) * min(74%, 50vw - 330px))) scale(calc(1 - var(--a) * .2));opacity:calc(1 - var(--a) * .45)}
  .pr-cs:not(.on):hover{opacity:calc(1 - var(--a) * .3)}
  .pr-cs.far,.pr-cs.far:hover{opacity:0;pointer-events:none}
}

@media (prefers-reduced-motion:reduce){
  .pr-still,.pr-vid,.pr-cs,.pr-gl,.pr-cs-bd{transition:none!important}
  .pr-t.cur .pr-bar b{animation:none;transform:none}
}

/* ---------- #pr-gal: 12 concepts, filter by branch, lit thumbnails ---------- */
.pr-fbar{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0 auto clamp(40px,4.5vw,64px)}
.pr-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pr-chip{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 22px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);font-size:16px;font-weight:600;color:var(--on-2);white-space:nowrap;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .3s,color .3s,border-color .3s,transform .35s var(--ease)}
.pr-chip:has(.pr-ci){padding-left:16px}
.pr-chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.pr-chip:focus-visible{border-radius:999px;outline-color:#fff}
.pr-chip:active{transform:scale(.97)}
.pr-chip[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 16px 34px -18px rgba(0,0,0,.7)}
.pr-ci{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:#9FAEFF}
.pr-chip[aria-pressed="true"] .pr-ci{color:var(--cobalt)}
.pr-count{font-size:16px;font-weight:500;color:var(--on-3)}

.pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px}
.pr-g[hidden]{display:none}
.pr-gc{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;color:var(--on)}
.pr-gc:focus-visible{border-radius:28px;outline-offset:6px}
.pr-gstage{grid-column:1/-1;position:relative;display:block;aspect-ratio:4/3;border-radius:28px;overflow:hidden;
  --pa:.28;background:radial-gradient(ellipse 70% 60% at 45% 25%,rgba(143,160,255,var(--pa)),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid var(--hair);box-shadow:0 40px 80px -40px rgba(0,0,0,.7);transition:transform .6s var(--ease),box-shadow .6s var(--ease),--pa .6s var(--ease)}
@property --pa{syntax:'<number>';inherits:false;initial-value:.28}
.pr-gwin{position:absolute;left:7%;top:12%;width:78%;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(11,18,51,.08),0 22px 40px -18px rgba(11,18,51,.45);transition:translate .6s var(--ease)}
.pr-gwin::before{content:'';display:block;height:clamp(12px,1.25vw,18px);background:radial-gradient(circle at 10px 50%,#D5D9E4 2.6px,transparent 3.2px),radial-gradient(circle at 20px 50%,#D5D9E4 2.6px,transparent 3.2px),radial-gradient(circle at 30px 50%,#D5D9E4 2.6px,transparent 3.2px),#EEF0F6;border-bottom:1px solid var(--line)}
.pr-gwin img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.pr-gph{position:absolute;right:6%;top:30%;width:21%;padding:2.2%;background:#0A0D1F;border-radius:16%/7.4%;box-shadow:0 24px 40px -18px rgba(0,0,30,.6);transition:translate .6s var(--ease)}
.pr-gph img{width:100%;aspect-ratio:9/19.5;object-fit:cover;object-position:top;border-radius:13%/6%}
/* every thumbnail says what it is */
.pr-gbd{position:absolute;z-index:2;left:5%;bottom:6%;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 9px;border-radius:999px;background:rgba(10,13,40,.78);box-shadow:inset 0 0 0 1px rgba(201,210,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#DDE2FF;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.pr-gbd::before{content:'';width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px #C9D2FF}
.pr-gc:hover .pr-gstage,.pr-gc:focus-visible .pr-gstage{--pa:.4;transform:translateY(-6px);box-shadow:0 50px 90px -40px rgba(0,0,0,.85)}
.pr-gc:hover .pr-gwin{translate:0 -4px}
.pr-gc:hover .pr-gph{translate:0 -12px}
.pr-gt{display:flex;flex-direction:column;gap:5px;min-width:0;padding-left:6px}
.pr-gt b{font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--on)}
/* the new-tab cue shows only when the tile is pointed at */
.pr-gt b::after{content:'\2197' / '';display:inline-block;margin-left:8px;font-weight:500;color:#AEB9FF;opacity:0;transform:translate(-4px,2px);transition:opacity .3s,transform .4s var(--ease)}
.pr-gc:hover .pr-gt b::after,.pr-gc:focus-visible .pr-gt b::after{opacity:1;transform:none}
.pr-gt span{font-size:16px;line-height:1.3;color:var(--on-3)}
.pr-gal .scn-foot{margin-top:clamp(56px,6vw,88px)}
/* „Започнете“ over the quiet audit link (the audit stays the lighter second path) */
#pr-gal .scn-foot{flex-direction:column;align-items:center}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .pr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 22px}
  /* the rooms stack: visual first, then the tabs as a swipeable strip */
  .pr-room{grid-template-columns:minmax(0,1fr);gap:34px}
  .pr-tabs,.pr-cfr .pr-tabs{position:relative;flex-direction:row;gap:14px;margin-inline:calc(var(--gut,20px) * -1);padding:0 var(--gut,20px) 6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut,20px);scrollbar-width:none}
  .pr-tabs::-webkit-scrollbar{display:none}
  .pr-t,.pr-cfr .pr-t{flex:0 0 min(42%,300px);scroll-snap-align:start;padding:2px 16px 8px;border-radius:20px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair)}
  .pr-t.cur{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
  .pr-cf-row{width:min(72%,620px)}
}
@media (max-width:1000px){.pr-hero{--dw:31vw;--pw:14.5vw;--g:2vw}}
/* phones on their side: three concepts per row, so the gallery is not seven screens of scrolling */
@media (orientation:landscape) and (max-height:500px){
  .pr-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 16px}
  .pr-gt b{font-size:17px}
  .pr-gt span{font-size:14px}
}
@media (max-width:760px){
  .pr-hero{--dw:50vw;--pw:23.5vw;--g:3.2vw}
  .pr-col:first-child,.pr-col:last-child{display:none}
  .pr-hero .ph-title{--ph-tw:9ch}
}
/* phones: one big phone plays the -mob clip; the laptop and the browser chrome step aside */
@media (max-width:720px){
  .pr-rviz{aspect-ratio:auto;display:flex;justify-content:center;padding:14px 0 70px}
  .pr-rviz .pr-lap{display:none}
  .pr-rviz .pr-phone{position:relative;right:auto;bottom:auto;width:min(52vw,212px)}
  .pr-vf{--k:20px}
  .pr-tag{left:50%;translate:-50% 0;max-width:calc(100% - 8px)}
  .pr-t,.pr-cfr .pr-t{flex-basis:min(76%,290px)}
  .pr-tn,.pr-cfr .pr-tn{font-size:22px}
  .pr-tb{gap:7px;padding-top:12px}
  .pr-bar{margin-bottom:5px}
  .pr-t{padding-bottom:4px}

  .pr-cf{padding:6px 0 4px}
  .pr-cf-row{width:min(52vw,212px)}
  .pr-cs{transform:translateX(calc(var(--p) * 88%)) scale(calc(1 - var(--a) * .18))}
  .pr-cs-dev{border-radius:17%/7.9%;padding:3.6%}
  .pr-cs-bar{display:none}
  .pr-cs-scr{aspect-ratio:9/19.5;margin:0;border-radius:14%/6.5%}
  .pr-cs-scr::before{content:'';position:absolute;z-index:3;top:2.6%;left:50%;width:30%;height:3.2%;translate:-50% 0;border-radius:99px;background:#000}
  .pr-cs-bd{position:absolute;z-index:4;left:50%;bottom:-18px;translate:-50% 0;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 11px;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap;box-shadow:0 16px 30px -12px rgba(0,0,40,.6)}
  .pr-cs-bd::before{content:'';width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--cobalt)}
  .pr-cs-bd{transition:opacity .5s var(--ease)}
  .pr-cs:not(.on) .pr-cs-bd{opacity:0} /* the side phones are cut by the viewport edge: only the chosen one wears the pill */
  .pr-cfr{gap:44px}
}
@media (max-width:620px){
  .pr-fbar{gap:14px}
  .pr-filter{gap:8px}
  .pr-chip,.pr-chip:has(.pr-ci){flex:1 1 auto;justify-content:center;min-height:46px;padding:0 13px;font-size:15px}
  .pr-ci{display:none}
  .pr-count{font-size:15px;color:var(--on-2)}
  .pr-grid{gap:28px 14px}
  .pr-gc{gap:12px}
  .pr-gc:focus-visible{border-radius:18px}
  .pr-gstage{border-radius:18px}
  /* on a phone the tiny phone overlay only adds clutter: the browser preview fills the stage instead */
  .pr-gph{display:none}
  .pr-gwin{left:6%;top:9%;width:88%;border-radius:6px}
  .pr-gbd{left:6%;bottom:7%;height:26px;padding:0 10px 0 8px;gap:6px;font-size:13px;letter-spacing:.02em}
  .pr-gbd::before{width:7px;height:7px}
  .pr-gt{padding-left:2px;gap:3px}
  .pr-gt b{font-size:16px}
  .pr-gt span{font-size:14px;color:var(--on-2)}
}

/* ---------- light theme (2026-10-19) ----------
   The wall becomes a gallery of white-framed screens under a daylight veil (phones keep their dark glass), the rooms read in
   ink with cobalt progress and links, the devices cast soft ink shadows, the side screens fade into white instead of navy. */
:root[data-theme="light"] .pr-hero .ph-title::before{background:radial-gradient(closest-side,rgba(245,247,252,.94),rgba(245,247,252,.74) 46%,rgba(245,247,252,0))}
:root[data-theme="light"] .pr-wall::before{background:radial-gradient(ellipse 72% 72% at 50% 48%,rgba(245,247,252,.22),rgba(245,247,252,.42) 55%,rgba(245,247,252,.82))}
:root[data-theme="light"] .pr-wall::after{background:radial-gradient(circle min(30vw,460px) at calc(50% + var(--px) * 50%) calc(50% + var(--py) * 46%),rgba(245,247,252,0),rgba(245,247,252,.26) 45%,rgba(245,247,252,.78))}
:root[data-theme="light"] .pr-set>i{box-shadow:0 0 0 1px rgba(11,18,51,.08),0 30px 56px -30px rgba(11,18,51,.42)}
:root[data-theme="light"] .pr-col.d .pr-set>i{
  background:radial-gradient(circle at 12px 50%,#CDD2E0 2.6px,transparent 3.2px) 0 0/100% clamp(10px,1vw,18px) no-repeat,
    radial-gradient(circle at 22px 50%,#CDD2E0 2.6px,transparent 3.2px) 0 0/100% clamp(10px,1vw,18px) no-repeat,#fff}
:root[data-theme="light"] .pr-pp{color:var(--lt-ink);background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1.5px var(--lt-hair-2),0 10px 24px -14px rgba(11,18,51,.4)}
:root[data-theme="light"] .pr-pp:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--lt-ink),0 10px 24px -14px rgba(11,18,51,.4)}

/* devices: dark by nature, lighter shadows on the white stage */
:root[data-theme="light"] .pr-phone{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),0 34px 60px -26px rgba(11,18,51,.5)}
:root[data-theme="light"] .pr-lap-screen{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 0 1px rgba(11,18,51,.08),0 50px 90px -44px rgba(11,18,51,.55)}
:root[data-theme="light"] .pr-lap-base{box-shadow:0 22px 36px -16px rgba(11,18,51,.35)}
:root[data-theme="light"] .pr-cs-dev{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 60px 100px -50px rgba(11,18,51,.6)}
:root[data-theme="light"] .pr-cs:not(.on) .pr-cs-dev{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 60px -32px rgba(11,18,51,.45)}
:root[data-theme="light"] .pr-cs:not(.on) .pr-cs-scr::after{background:rgba(245,247,252,.42)}
:root[data-theme="light"] .pr-tag{box-shadow:0 0 0 1px var(--lt-hair),0 18px 36px -18px rgba(11,18,51,.4)}
:root[data-theme="light"] .pr-glow{opacity:.7}
:root[data-theme="light"] .pr-vf{--c:rgba(35,53,255,.4)}

/* tabs */
:root[data-theme="light"] .pr-bar{background:rgba(11,18,51,.1)}
:root[data-theme="light"] .pr-bar b{background:var(--cobalt)}
:root[data-theme="light"] .pr-t.done .pr-bar b{background:rgba(35,53,255,.4)}
:root[data-theme="light"] .pr-t:not(.cur) .pr-tn{color:var(--lt-muted)}
:root[data-theme="light"] .pr-t:not(.cur) .pr-tb:hover .pr-tn{color:var(--lt-ink)}
:root[data-theme="light"] .pr-bd.live{background:rgba(18,122,75,.1);color:#0B6A3F}
:root[data-theme="light"] .pr-bd.live::before{background:#1FA463}
:root[data-theme="light"] .pr-bd.cpt{background:rgba(35,53,255,.07);color:#1B2AE0;box-shadow:inset 0 0 0 1px rgba(35,53,255,.28)}
:root[data-theme="light"] .pr-bd.cpt::before{box-shadow:inset 0 0 0 2px var(--cobalt)}
:root[data-theme="light"] .pr-go{color:var(--cobalt);text-decoration-color:rgba(35,53,255,.35)}
:root[data-theme="light"] .pr-go:hover{color:#1B2AE0;text-decoration-color:#1B2AE0}
:root[data-theme="light"] .pr-t:not(.cur) .pr-go{color:var(--lt-muted);text-decoration-color:rgba(82,90,120,.3)}
:root[data-theme="light"] .pr-tb:focus-visible{outline-color:var(--cobalt)}
@media (max-width:1000px){
  :root[data-theme="light"] :is(.pr-t,.pr-cfr .pr-t){background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--lt-hair);-webkit-backdrop-filter:var(--lt-blur);backdrop-filter:var(--lt-blur)}
  :root[data-theme="light"] .pr-t.cur{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(35,53,255,.35),0 14px 30px -18px rgba(11,18,51,.35)}
}
@media (max-width:720px){
  :root[data-theme="light"] .pr-cs-bd{box-shadow:0 0 0 1px var(--lt-hair),0 14px 28px -12px rgba(11,18,51,.4)}
}

/* gallery: white glass chips (the chosen one cobalt), frosted stages with a cobalt light, soft shadows */
:root[data-theme="light"] .pr-chip{background:rgba(255,255,255,.72);border-color:var(--lt-hair);color:var(--lt-body)}
:root[data-theme="light"] .pr-chip:hover{background:#fff;border-color:var(--lt-hair-2);color:var(--lt-ink)}
:root[data-theme="light"] .pr-chip:focus-visible{outline-color:var(--cobalt)}
:root[data-theme="light"] .pr-chip[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:#fff;box-shadow:0 14px 30px -14px rgba(35,53,255,.6)}
:root[data-theme="light"] .pr-ci{color:var(--cobalt)}
:root[data-theme="light"] .pr-chip[aria-pressed="true"] .pr-ci{color:#fff}
:root[data-theme="light"] .pr-gstage{--pa:.2;background:radial-gradient(ellipse 70% 60% at 45% 25%,rgba(91,107,255,var(--pa)),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.9),rgba(238,241,250,.78));
  border-color:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px var(--lt-hair),0 1px 2px rgba(11,18,51,.05),0 36px 70px -40px rgba(11,18,51,.4)}
:root[data-theme="light"] :is(.pr-gc:hover,.pr-gc:focus-visible) .pr-gstage{--pa:.32;box-shadow:inset 0 0 0 1px rgba(35,53,255,.22),0 2px 6px rgba(11,18,51,.06),0 48px 90px -40px rgba(35,53,255,.45)}
:root[data-theme="light"] .pr-gwin{box-shadow:0 0 0 1px rgba(11,18,51,.06),0 22px 40px -20px rgba(11,18,51,.4)}
:root[data-theme="light"] .pr-gph{box-shadow:0 22px 40px -20px rgba(11,18,51,.45)}
:root[data-theme="light"] .pr-gbd{background:#fff;color:#1B2AE0;box-shadow:inset 0 0 0 1px rgba(35,53,255,.22),0 8px 18px -10px rgba(11,18,51,.4)}
:root[data-theme="light"] .pr-gbd::before{box-shadow:inset 0 0 0 2px var(--cobalt)}
:root[data-theme="light"] .pr-gt b::after{color:var(--cobalt)}
:root[data-theme="light"] .pr-gc:focus-visible{outline-color:var(--cobalt)}
/* the quiet audit link under the gallery (.ct-alt is white for the cobalt contact card) */
:root[data-theme="light"] .pr-gal .ct-alt a{color:var(--lt-ink);text-decoration-color:rgba(11,18,51,.3)}
:root[data-theme="light"] .pr-gal .ct-alt a:hover{text-decoration-color:var(--cobalt)}

/* ==== 62-uslugi.css ==== */
/* ---------- USLUGI (.us-) „Кино“ 2026-09-27: the orbit sub-hero, then 8 scenes on the shared dark stage (the last one is the monthly report card) (04-stage.css).
   Each scene: copy | ONE visual about a fictional business that plays as a tiny story (.sq sequence), one calm loop
   while the scene is on screen (.scene.live), the full service list in one collapsed <details>. Contract: _tools/CINEMA-BRIEF.md ---------- */
.us-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- hero: the 8 areas orbit the WhiteWays mark ---------- */

/* ---------- scene frame: copy .84fr | visual 1.16fr (the visual takes ~58 % of the grid; the copy column holds the longest first line at 56px) ---------- */
.us-sc{padding-bottom:64px}
.us-sc .scn-split{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
/* 2026-10-06 alternation by position, not per scene (no .rev in the markup): the 1st scene (Google, the wide frame) holds its
   copy on the left, so every even .us-sc puts the copy right and every odd one left. Any reorder keeps the zig-zag. */
@media (min-width:901px){
  .us-sc:nth-child(even of .us-sc)>.scn-split{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}
  .us-sc:nth-child(even of .us-sc)>.scn-split>.scn-head{order:2}
}
/* 2026-10-01 minimal round: the plan note is a row of tokens, no sentence. ✓ chip = the plan that includes the scene's service,
   an icon chip = one extra part of it (its name is in sr-only + title and in the „Какво правим тук“ list), a price chip = the add-on */
.us-plan{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px;padding-top:24px;border-top:1px solid var(--hair)}
.us-chip{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 7px;border-radius:999px;background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font-size:16px;font-weight:600;line-height:1;color:#fff;white-space:nowrap;transition:background-color .25s,box-shadow .25s}
.us-chip .ic{width:32px;height:32px;flex:none;padding:7px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;stroke-width:2.2}
.us-chip.is-in .ic{background:#fff;color:var(--cobalt);stroke-width:3}
.us-chip a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px;transition:text-decoration-color .25s}
.us-chip a:hover{text-decoration-color:#fff}
/* a price chip holds its link inside: the whole pill is the tap area */
span.us-chip:has(>a){position:relative}
span.us-chip>a::after{content:"";position:absolute;inset:0;border-radius:999px}
span.us-chip:has(>a:hover){background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
span.us-chip>a:focus-visible{outline:none}
span.us-chip:has(>a:focus-visible){outline:2px solid #fff;outline-offset:3px}
.us-chip>i{font-style:normal;font-size:14px;font-weight:500;color:var(--on-3)}
.us-chip .us-price{font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
a.us-chip:hover{background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}

/* the full service list: a quiet „+“ link under the plan note; it opens as a dark glass panel in the head column */
.us-more{position:relative;z-index:20;margin-top:14px}
.us-more summary{list-style:none;display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:17px;font-weight:600;line-height:1.3;color:var(--on-2);cursor:pointer;transition:color .25s}
.us-more summary::-webkit-details-marker{display:none}
.us-more summary .ic{width:28px;height:28px;flex:none;padding:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);stroke-width:2.4;transition:transform .35s var(--ease),background-color .25s}
.us-more summary:hover{color:#fff}
.us-more summary:hover .ic{background:rgba(255,255,255,.1)}
.us-more[open] summary{color:#fff}
.us-more[open] summary .ic{transform:rotate(45deg)}
.us-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin-top:10px;padding:12px 26px;border-radius:24px;
  background:linear-gradient(160deg,rgba(18,24,92,.97),rgba(8,12,52,.97));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 44px 100px -30px rgba(0,0,0,.85)}
.us-list li{display:flex;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid rgba(255,255,255,.07);font-size:16px;line-height:1.35;color:var(--on-2)}
.us-list .ic{width:20px;height:20px;flex:none;color:#C9D2FF}
/* critic C 2026-10-07: the open list grows the head column (it used to float over the next scene and, at 1024, its own visual);
   one column where the head column is narrow */
@media (min-width:901px) and (max-width:1279px){.us-list{grid-template-columns:1fr}}

/* the one visual: a lit stage area with a soft spotlight; drawn line art sits behind the lit objects */
.us-vis{position:relative;isolation:isolate;width:100%;aspect-ratio:64/56}
.us-vis::before{content:"";position:absolute;z-index:-2;inset:4% 0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(168,184,255,.24),rgba(168,184,255,.07) 62%,transparent)}
.us-art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible}
.us-art .sq,.us-map .sq,.us-wires .sq{transform-box:fill-box;transform-origin:center}
/* drawn connectors between the lit objects (paths measured by 62-uslugi.js), one style: 2.5px round #C9D2FF + a white stop */
.us-wires{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible;pointer-events:none}
.us-wire{fill:none;stroke:#C9D2FF;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.us-wire-dot{fill:#fff;stroke:#8FA0FF;stroke-width:3}
html.js .play .us-wire.sq-draw{animation-duration:1.1s}
.us-w-m{display:none}
/* lit objects (white = where the eye lands), glass for the secondary parts */
.us-browser,.us-prod,.us-gcard,.us-post,.us-fcard,.us-chat,.us-cal,.us-kit,.us-toast,.us-route li.is-end{background:#fff;color:var(--ink);
  box-shadow:0 2px 6px rgba(0,0,0,.1),0 44px 90px -40px rgba(0,0,0,.75)}
.us-toast{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;padding:12px 20px 12px 12px;border-radius:20px}
.us-toast i{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--cobalt);color:#fff}
.us-toast i.is-y{background:#E4E8FF;color:var(--cobalt)} /* 2026-10-01 QA: was yellow, a 2nd yellow next to the header CTA */
.us-toast i .ic{width:21px;height:21px;stroke-width:2}
.us-toast b{display:block;font-size:16px;font-weight:600;line-height:1.25;white-space:nowrap}
.us-toast small{display:block;margin-top:2px;font-size:14px;line-height:1.3;color:var(--muted);white-space:nowrap}
.us-glogo{display:block;width:44px;height:44px;flex:none}

/* scene numbers = page order since 2026-10-06 (01 google, 02 web, 03 ai, 04 auto, 05 shop, 06 ads, 07 brand, 08 report) */
/* 02 web: the bistro site in the browser, the phone, the road from under the phone to the booking */
.us-browser{position:absolute;left:19%;right:0;top:8%;border-radius:20px;overflow:hidden}
.us-bbar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#F5F6FB;border-bottom:1px solid var(--line)}
.us-bbar i{width:10px;height:10px;border-radius:50%;background:#D8DCE8}
.us-bbar span{margin-inline:auto;translate:-15px 0;padding:5px 16px;border-radius:8px;background:#fff;border:1px solid var(--line);font-size:13px;line-height:1;color:var(--muted)}
.us-bview{aspect-ratio:16/10.2;overflow:hidden;background:#F6EFE3}
.us-bview img{display:block;width:100%;height:auto}
.us-phone{position:absolute;z-index:2;left:0;top:40%;width:21%;padding:6px;border-radius:32px;background:#0A0D1F;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 40px 70px -26px rgba(0,0,0,.8)}
.us-phone-v{aspect-ratio:9/19.5;overflow:hidden;border-radius:26px;background:#000}
.us-phone-v img{display:block;width:100%;height:auto}
.us-t-book{right:3%;bottom:4%}
/* the call the heading promises: a wordless green call badge ringing on the phone's corner */
.us-ring{position:absolute;z-index:4;left:calc(21% - 34px);top:calc(40% - 24px);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#127A4B;color:#fff;box-shadow:0 0 0 7px rgba(31,164,99,.28),0 0 0 15px rgba(31,164,99,.12),0 18px 34px -12px rgba(0,0,0,.7)}
.us-ring .ic{width:24px;height:24px;stroke-width:2.2}

/* 05 shop: the product tile (a drawn bottle on cream), then the order walks its drawn route */
.us-v-shop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(48px,5vw,72px);align-items:center;aspect-ratio:auto;min-height:clamp(480px,42vw,590px);padding-inline:1%}
.us-prod{padding:12px 12px 16px;border-radius:28px;rotate:-2deg}
.us-prod-img{aspect-ratio:1/1.18;border-radius:18px;overflow:hidden;background:#F6EFE3}
.us-prod-img svg{display:block;width:100%;height:100%}
.us-prod-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:14px 6px 0}
.us-prod-row small{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#C25B38}
.us-prod-row b{display:block;margin-top:3px;font-size:17px;font-weight:600;line-height:1.25}
.us-prod-row p>span{display:block;margin-top:4px;font-size:19px;font-weight:700}
.us-cartbtn{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--cobalt);color:#fff;box-shadow:0 12px 24px -10px rgba(35,53,255,.7)}
.us-cartbtn .ic{width:20px;height:20px}
.us-route{position:relative}
.us-route ol{position:relative;display:grid;gap:22px}
.us-route li{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:10px 20px 10px 10px;border-radius:22px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--hair)}
.us-route li i{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:color-mix(in srgb,var(--st-base),#fff 16%)}
.us-route li i .ic{width:20px;height:20px}
.us-route li p{flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.us-route li.is-end p{display:block}
.us-route li b{display:block;font-size:16px;font-weight:600;line-height:1.25;color:#fff;white-space:nowrap}
.us-route li small{display:block;font-size:14px;line-height:1.3;color:var(--on-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.us-route li.is-end{box-shadow:0 2px 6px rgba(0,0,0,.1),0 44px 90px -40px rgba(0,0,0,.75)}
.us-route li.is-end i,html.js .us-route li i{background:var(--cobalt)}
.us-route li.is-end b{color:var(--ink)}
.us-route li.is-end small{color:var(--muted)}
.us-rail{position:absolute;z-index:0;left:31px;top:33px;width:4px;height:calc(100% - 66px);overflow:visible}
.us-rail line{fill:none;stroke-linecap:round}
.us-rail .b{stroke:rgba(255,255,255,.3);stroke-width:2;stroke-dasharray:5 7}
.us-rail .r{stroke:#C9D2FF;stroke-width:2.5}
html.js .play .us-rail .r.sq-draw{animation-duration:1.1s}

/* 01 google, the wide frame: the night map fills the width, the copy sits on it as a glass card */
/* the first scene follows the hero's destination closely (H, 2026-10-06): its top padding + the hero's bottom padding
   (62-uslugi-hero.css) = ~140px of air at 1440, ~85px at 390 */
.us-sc-wide{padding-top:clamp(44px,5.2vw,76px)}
.us-wide{position:relative}
.us-v-google{aspect-ratio:16/10}
.us-map{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible;
  -webkit-mask-image:radial-gradient(ellipse 56% 56% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 56% 56% at 50% 50%,#000 58%,transparent 100%)}
.us-streets path{fill:none;stroke:rgba(201,210,255,.13);stroke-width:26;stroke-linecap:round}
.us-streets path.sm{stroke:rgba(201,210,255,.08);stroke-width:12}
.us-river{fill:none;stroke:rgba(31,168,238,.12);stroke-width:22;stroke-linecap:round}
.us-dots-m circle{fill:rgba(201,210,255,.4)}
.us-route-g{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
html.js .play .us-route-g.sq-draw{animation-duration:1.1s}
.us-you circle:first-child{fill:rgba(143,160,255,.3)}
.us-you circle:last-child{fill:#8FA0FF;stroke:#fff;stroke-width:3}
.us-pin-b path{fill:#fff}
.us-pin-b circle{fill:var(--cobalt)}
.us-pin-r{fill:rgba(255,255,255,.16);transform-box:fill-box;transform-origin:center}
.us-gcard{position:absolute;z-index:3;left:0;bottom:5%;width:min(390px,62%);padding:14px;border-radius:28px}
.us-gq{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;background:var(--mist);font-size:16px;color:var(--ink-2)}
.us-gq .ic{width:18px;height:18px;color:var(--cobalt)}
.us-gres{display:flex;align-items:center;gap:12px;padding:16px 6px 14px}
.us-gres b{display:block;font-size:18px;font-weight:600;line-height:1.25}
.us-gres small{display:block;font-size:14px;font-weight:500;color:#127A4B}
.us-gacts{display:flex;gap:6px}
.us-gacts span{flex:1;display:inline-flex;padding:0 10px;align-items:center;justify-content:center;gap:6px;min-height:40px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--cobalt)}
.us-gacts .ic{width:16px;height:16px}
@media (max-width:380px){.us-gacts{gap:4px}.us-gacts span{padding:0 7px;gap:4px;font-size:13px}}
.us-t-ai{right:1%;top:5%}
@media (min-width:1101px){
  .us-v-google{aspect-ratio:1240/640;min-height:600px}
  /* soft on all four sides: the map dissolves into the stage instead of ending in a cut */
  .us-v-google .us-map{-webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 36%,#000 90%,transparent),linear-gradient(transparent,#000 15%,#000 85%,transparent);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 2%,#000 36%,#000 90%,transparent),linear-gradient(transparent,#000 15%,#000 85%,transparent);mask-composite:intersect}
  .us-v-google::before{inset:0 0 0 30%}
  /* 2026-10-06 one skeleton: the glass card's text column is as wide as a split heading column (~485px at 1440), and the heading
     and the chip row use the split scenes' size and gaps (no own overrides) */
  .us-wide-h{position:absolute;z-index:5;left:0;top:50%;translate:0 -50%;width:min(580px,47%);margin:0;padding:38px 40px 26px;border-radius:28px;
    background:linear-gradient(160deg,rgba(20,28,104,.62),rgba(6,10,46,.5));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 90px -40px rgba(0,0,0,.7);
    -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
  .us-v-google .us-gcard{left:50%;bottom:7%;width:380px}
  .us-v-google .us-t-ai{right:2%;top:7%}
}
@media (max-width:1100px){.us-wide-h{margin-bottom:40px}}
/* the wide frame's heading = the split heading size (mirrors 04-stage.css `.scn-split>.scn-head .scn-title`) */
@media (min-width:901px){.us-wide-h .scn-title{font-size:clamp(36px,3.8vw,56px)}}

/* 06 ads: the sponsored post, a drawn line from its button to the campaign card, the bars narrow to the bookings */
/* a diagonal pair on the same height as the other visuals: the post high on the left, the campaign low on the right, the wire joins them level */
.us-v-ads{display:grid;grid-template-columns:minmax(0,310fr) minmax(0,340fr);gap:clamp(40px,4vw,56px);align-items:center;aspect-ratio:auto;min-height:clamp(480px,42vw,590px);padding:0 1%}
.us-post{align-self:start;margin-top:3%;border-radius:28px;overflow:hidden;rotate:-2deg}
.us-post-h{display:flex;align-items:center;gap:10px;padding:14px 16px}
.us-post-h .us-glogo{width:38px;height:38px}
.us-post-h b{display:block;font-size:16px;font-weight:600;line-height:1.2}
.us-post-h small{display:block;font-size:13px;line-height:1.3;color:var(--muted)}
.us-post-img{aspect-ratio:4/3.6;overflow:hidden}
.us-post-img{background:#F6EFE3}
.us-post-img img{display:block;width:100%;height:100%;object-fit:cover}
.us-post-f{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px 16px;font-size:16px;font-weight:600}
.us-post-f em{font-style:normal;font-size:14px;font-weight:600;color:#fff;background:var(--cobalt);padding:9px 14px;border-radius:12px}
.us-fcard{align-self:end;margin-bottom:3%;padding:24px 24px 28px;border-radius:28px}
.us-fun-h{display:grid;gap:4px;padding:0 0 16px;border-bottom:1px solid var(--line)}
.us-fun-h b{font-size:18px;font-weight:600;line-height:1.25}
.us-fun-h small{font-size:14px;line-height:1.3;color:var(--muted)}
.us-fb{position:relative;padding-top:18px}
.us-fb p{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.us-fb span{font-size:16px;font-weight:500;color:var(--muted)}
.us-fb b{font-size:40px;font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.us-fb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;border-radius:6px;background:var(--mist)}
.us-fb>i{position:relative;z-index:1;display:block;width:var(--w);height:12px;margin-top:10px;border-radius:6px;background:#AEB9FF}
/* each funnel row: a small icon chip; the bookings row ends with a green tick (the number that counts) */
.us-fb p{align-items:center}
.us-fb span{display:inline-flex;align-items:center;gap:10px}
.us-fb-i{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--cobalt-tint);color:#5A67C9}
.us-fb-i .ic{width:16px;height:16px;stroke-width:2.2}
.us-fb.is-main .us-fb-i{background:var(--cobalt);color:#fff}
.us-fb-ok{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:#127A4B;color:#fff}
.us-fb-ok .ic{width:15px;height:15px;stroke-width:3}
.us-fb.is-main span{font-weight:600;color:var(--ink)}
.us-fb.is-main b{color:var(--cobalt)}
.us-fb.is-main>i{background:var(--cobalt)}
html.js .play .us-fb>i.sq-gx{animation-duration:1.1s}

/* 03 ai: the moon, the chat that types and answers, the saved booking */
.us-v-ai{display:grid;place-items:center;aspect-ratio:auto;min-height:clamp(480px,42vw,590px)}
.us-chat-w{position:relative;width:min(calc(100% - 48px),540px)}
/* the night cue: a thin crescent and two stars just above the 23:41 in the chat header */
.us-night{position:absolute;z-index:-1;right:-44px;top:-86px;width:150px;height:110px;overflow:visible}
.us-night .sq{transform-box:fill-box;transform-origin:center}
.us-moon{fill:rgba(201,210,255,.06);stroke:#C9D2FF;stroke-width:2;stroke-linejoin:round}
.us-stars circle{fill:#fff}
.us-chat{width:100%;border-radius:28px;overflow:hidden}
.us-chat-h{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.us-chat-h .us-glogo{width:42px;height:42px}
.us-chat-h b{display:block;font-size:17px;font-weight:600;line-height:1.2}
.us-chat-h small{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.us-chat-h small i{width:7px;height:7px;border-radius:50%;background:#1FA463}
.us-chat-h>span{margin-left:auto;font-size:14px;font-weight:600;color:var(--muted)}
.us-chat-b{display:grid;gap:10px;padding:18px}
.us-msg{position:relative;max-width:84%;padding:12px 16px;border-radius:20px;font-size:17px;line-height:1.4}
.us-msg.me{justify-self:end;background:var(--cobalt);color:#fff;border-bottom-right-radius:6px}
.us-msg.ai{justify-self:start;background:var(--mist);color:var(--ink);border-bottom-left-radius:6px}
.us-tx{display:block}
.us-dots{position:absolute;left:15px;top:50%;display:flex;gap:5px;translate:0 -50%;opacity:0}
.us-dots i{width:7px;height:7px;border-radius:50%;background:#8A91AD}
html.js .us-msg.ai .us-dots{opacity:1}
html.js .us-msg.ai .us-tx{opacity:0}
html.js .play .us-msg.ai .us-tx{animation:usIn .3s ease both;animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap) + .45s)}
html.js .play .us-msg.ai .us-dots{animation:usOut .2s ease both;animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap) + .4s)}
html.js .play .us-dots i{animation:usDot .8s ease-in-out 2}
html.js .play .us-dots i:nth-child(2){animation-delay:.12s}
html.js .play .us-dots i:nth-child(3){animation-delay:.24s}
.us-chat-in{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 14px 14px;padding:6px 6px 6px 16px;border-radius:999px;background:var(--mist);font-size:14px;color:var(--muted)}
.us-chat-in i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--cobalt);color:#fff}
.us-chat-in .ic{width:16px;height:16px}
.us-t-done{right:-44px;bottom:-72px}
.us-t-done i{background:#1FA463}

/* 04 auto: booking → calendar → reminder along one drawn line; a wire drops from the calendar stop into the new 19:30 row,
   then the line runs on to the reminder stop and a second wire carries it down to the toast */
.us-v-auto{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:34px;aspect-ratio:auto;min-height:clamp(480px,42vw,590px);padding:0 4% 40px}
.us-flow{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.us-flow-l{position:absolute;left:16.67%;width:66.66%;top:31px;height:4px;overflow:visible}
.us-flow-l line{fill:none;stroke-linecap:round}
.us-flow-l .b{stroke:rgba(255,255,255,.3);stroke-width:2;stroke-dasharray:5 7}
.us-flow-l .r{stroke:#C9D2FF;stroke-width:2.5}
html.js .play .us-flow-l .r.sq-draw{animation-duration:.6s}
.us-wires-top{z-index:3}
html.js .play .us-v-auto .us-wire.sq-draw{animation-duration:.7s}
.us-node{position:relative;z-index:1;display:grid;justify-items:center;gap:12px}
.us-node i{width:66px;height:66px;border-radius:22px;display:grid;place-items:center;color:#fff;background:color-mix(in srgb,var(--st-base),#fff 15%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.us-node.is-on i{background:#fff;color:var(--cobalt);box-shadow:0 24px 44px -18px rgba(0,0,0,.7)}
.us-node .ic{width:27px;height:27px}
.us-node small{max-width:100%;font-size:15px;font-weight:600;text-align:center;color:var(--on-2)}
.us-cal{justify-self:start;width:68%;padding:20px;border-radius:28px}
.us-cal-h{display:flex;align-items:baseline;gap:12px;padding:0 4px}
.us-cal-h b{font-size:18px;font-weight:600}
.us-cal-h small{font-size:14px;color:var(--muted)}
.us-cal ul{display:grid;gap:8px;margin-top:14px}
.us-cal li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:52px;padding:0 14px;border-radius:16px;background:var(--mist);font-size:16px;font-weight:500}
.us-cal time{font-size:15px;font-weight:700;color:var(--cobalt);font-variant-numeric:tabular-nums}
.us-cal li span{white-space:nowrap}
.us-cal em{font-style:normal;font-size:13px;font-weight:600;padding:5px 10px;border-radius:999px;background:#fff;color:var(--muted)}
.us-cal li.is-new{background:var(--cobalt-tint);box-shadow:inset 0 0 0 1.5px rgba(35,53,255,.35)}
.us-cal li.is-new em{background:var(--cobalt);color:#fff}
.us-t-rem{right:4%;bottom:0}

/* 07 brand: a diagonal cascade, kit top left, menu in the middle, reel on the right; drawn lines carry the kit to both */
.us-kit{position:absolute;z-index:3;left:0;top:1%;width:46%;padding:20px;border-radius:28px}
.us-kit-logo{display:flex;align-items:center;gap:12px}
.us-kit-logo svg{width:54px;height:54px;flex:none}
.us-kit-logo b{display:block;font:600 clamp(22px,2.3vw,28px)/1 Georgia,"Times New Roman",serif;white-space:nowrap;color:#1E3A2E;font-feature-settings:"locl" 0}
.us-kit-logo small{display:block;margin-top:6px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C25B38}
.us-sw{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.us-sw li{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--muted)}
.us-sw i{width:30px;height:30px;flex:none;border-radius:10px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(11,18,51,.1)}
.us-kit-type{display:flex;align-items:center;gap:14px;padding-top:14px;border-top:1px solid var(--line)}
.us-kit-type b{font:600 40px/1 Georgia,"Times New Roman",serif;color:#1E3A2E;font-feature-settings:"locl" 0}
.us-kit-type span{font-size:14px;line-height:1.3;color:var(--muted)}
.us-menu{position:absolute;z-index:2;left:20%;top:58%;width:38%;padding:20px 22px 18px;border-radius:22px;background:#FFFCF6;color:#1E3A2E;rotate:-1.5deg;
  box-shadow:0 2px 6px rgba(0,0,0,.1),0 44px 90px -40px rgba(0,0,0,.75)}
.us-menu-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1.5px solid rgba(30,58,46,.14);font:600 26px/1 Georgia,"Times New Roman",serif;font-feature-settings:"locl" 0}
.us-menu-h small{font:600 13px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:#C25B38}
.us-menu ul{display:grid;gap:9px;margin-top:13px}
.us-menu li{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:500;line-height:1.25}
.us-menu li::after{content:"";order:1;flex:1;border-bottom:1.5px dotted rgba(30,58,46,.3);translate:0 -3px}
.us-menu li b{order:2;font-weight:700;white-space:nowrap}
.us-menu-sw{display:flex;gap:6px;margin-top:14px}
.us-menu-sw i{width:22px;height:8px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(30,58,46,.12)}
.us-reel{position:absolute;z-index:1;right:8px;top:12%;height:78%;aspect-ratio:9/16;border-radius:30px;overflow:hidden;rotate:2deg;background:#1E3A2E;
  box-shadow:0 2px 6px rgba(0,0,0,.1),0 44px 90px -40px rgba(0,0,0,.75)}
.us-reel img{display:block;width:100%;height:100%;object-fit:cover}
.us-reel-logo{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border-radius:999px;background:rgba(246,239,227,.95);font:600 15px/1 Georgia,"Times New Roman",serif;color:#1E3A2E;font-feature-settings:"locl" 0}
.us-reel-logo svg{width:26px;height:26px}
.us-reel-play{position:absolute;left:50%;top:44%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;display:grid;place-items:center;background:#C25B38;color:#F6EFE3;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.us-reel-play .ic{width:24px;height:24px}
.us-reel-sub{position:absolute;left:12px;right:12px;bottom:32px;padding:8px 10px;border-radius:12px;background:#1E3A2E;text-align:center;font-size:15px;font-weight:600;line-height:1.2;color:#F6EFE3}
.us-reel-bar{position:absolute;left:16px;right:16px;bottom:16px;height:4px;border-radius:4px;background:rgba(246,239,227,.45);overflow:hidden}
.us-reel-bar i{display:block;width:100%;height:100%;border-radius:4px;background:#E6AE4C;transform-origin:left;transform:scaleX(.38)}

/* 08 report, the finale: the monthly report card (38-report.css) under the shared soft spotlight (kept inside the column: no overflow at 390) */
.us-v-rep{aspect-ratio:auto;padding-block:8px}
.us-v-rep::before{inset:-6% 0}

/* ---------- loops: one calm loop per scene, only while the scene is on screen ---------- */
@media (prefers-reduced-motion:no-preference){

  html.js .us-sc.live .us-bview img{animation:usPage 16s cubic-bezier(.65,0,.35,1) infinite}
  html.js .us-sc.live .us-prod{animation:usFloat 7s ease-in-out infinite alternate}
  html.js .play .us-route li i{animation:usLit .5s ease both;animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap) + .5s)}
  html.js .us-sc.live .us-pin-r{animation:usPing 4s ease-out 2.4s infinite}
  html.js .us-sc.live .us-post-img img{animation:usZoom 16s ease-in-out infinite alternate}
  html.js .us-sc.live .us-reel-bar i{animation:usBar 9s linear infinite}
  html.js .us-more[open] .us-list{animation:usDrop .4s var(--ease)}
}
/* two holds on real section tops of us-bistro-tall (1000×2500): the hero at 0, the menu („Готвим със сезона“ + 4 dishes) at 617px */
@keyframes usPage{0%,40%{transform:translateY(0)}50%,90%{transform:translateY(-24.7%)}100%{transform:translateY(0)}}
@keyframes usLit{from{background-color:color-mix(in srgb,var(--st-base),#fff 16%)}to{background-color:var(--cobalt)}}
@keyframes usFloat{from{transform:translateY(-5px)}to{transform:translateY(6px)}}
@keyframes usPing{0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(2)}}
@keyframes usZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes usBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes usIn{from{opacity:0}to{opacity:1}}
@keyframes usOut{from{opacity:1}to{opacity:0}}
@keyframes usDot{0%,60%,100%{transform:none}30%{transform:translateY(-4px)}}
@keyframes usDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html.js .us-msg.ai .us-tx{opacity:1!important;animation:none!important}
  html.js .us-msg.ai .us-dots{display:none}
}

/* ---------- responsive ---------- */
@media (max-width:1100px) and (min-width:901px){
  .us-sc .scn-split{gap:40px}
  .us-v-shop{grid-template-columns:minmax(0,1fr) minmax(0,240px);gap:44px}
  .us-route li p{display:block}
  .us-v-ads{gap:36px}
  .us-fcard{padding:20px 18px 22px}
  .us-fb b{font-size:30px}
  .us-fb span{font-size:15px}
  .us-toast{padding:10px 14px 10px 10px}
  .us-v-brand{aspect-ratio:1/1.04}
  .us-kit{width:52%;padding:16px}
  .us-sw{margin:12px 0;gap:8px}
  .us-menu{width:45%;left:11%;top:60%;padding:16px 16px 14px} /* ends left of the reel, no overlap */
  .us-menu-h{font-size:22px}
  .us-menu li{font-size:14px}
  .us-reel{top:14%;height:70%}
  .us-post-f{padding:12px 12px 14px;font-size:14px}
  .us-post-f span{white-space:nowrap}
  .us-post-f em{padding:8px 10px;font-size:13px}
  .us-prod-row b{font-size:15px}
}
@media (max-width:900px){
  .us-sc .scn-split{grid-template-columns:minmax(0,1fr)}
  .us-vis{max-width:680px;margin-inline:auto}
}
@media (max-width:600px){

  .us-sc{padding-bottom:40px}
  .us-sc .scn-title{font-size:clamp(36px,10vw,44px)}
  .us-plan{margin-top:24px;padding-top:20px;gap:8px}
  .us-chip{min-height:44px;font-size:15px;padding-right:16px}
  .us-more summary{font-size:16px}
  .us-list{grid-template-columns:1fr;padding:6px 20px;border-radius:22px}
  .us-toast{padding:10px 14px 10px 10px;gap:10px}
  .us-toast i{width:38px;height:38px;border-radius:12px}
  .us-toast b{font-size:15px}
  .us-toast small{font-size:13px}

  /* web on a phone: one device and one result (the browser would repeat the same page at a tiny scale) */
  .us-v-web{aspect-ratio:auto;padding-bottom:30px}
  .us-browser{display:none}
  .us-phone{position:relative;left:auto;top:auto;width:60%;margin-inline:auto;padding:5px;border-radius:30px}
  .us-phone-v{border-radius:25px}
  .us-t-book{right:0;bottom:0}
  .us-ring{left:calc(80% - 34px);top:-20px;width:50px;height:50px}

  .us-v-shop,.us-v-ads{grid-template-columns:minmax(0,1fr);min-height:0;gap:22px;padding-inline:0}
  .us-prod{display:flex;align-items:center;gap:14px;padding:10px;border-radius:24px;rotate:0deg}
  .us-prod-img{width:96px;flex:none;aspect-ratio:1;border-radius:16px}
  .us-prod-row{flex:1;padding:0 4px 0 0}
  /* compact route: 3 stops, 44px rows, label and time on one line */
  .us-route ol{gap:10px}
  .us-route .us-r-opt{display:none}
  .us-route li{gap:12px;min-height:44px;padding:6px 16px 6px 6px;border-radius:18px}
  .us-route li i{width:32px;height:32px}
  .us-route li i .ic{width:16px;height:16px}
  .us-route li p{display:flex;flex:1;align-items:baseline;justify-content:space-between;gap:10px}
  .us-route li small{font-size:13px;white-space:nowrap}
  .us-rail{left:20px;top:22px;height:calc(100% - 44px)}

  .us-v-google{display:grid;grid-template-columns:minmax(0,1fr);aspect-ratio:auto}
  .us-map{position:relative;inset:auto;height:auto;aspect-ratio:64/56;
    -webkit-mask-image:radial-gradient(ellipse 58% 56% at 50% 46%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 58% 56% at 50% 46%,#000 55%,transparent 100%)}
  .us-gcard{position:relative;left:auto;bottom:auto;width:100%;max-width:100%;box-sizing:border-box;margin-top:-84px;border-radius:24px}
  .us-t-ai{display:none}

  /* ads on a phone: the post becomes one compact row (dish | name + button), a straight 40px wire drops from its button to the campaign */
  .us-v-ads{gap:40px}
  .us-post{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-areas:"img h" "img f";align-items:center;align-self:auto;margin:0;rotate:0deg;border-radius:24px}
  .us-post-img{grid-area:img;aspect-ratio:1;margin:10px 0 10px 10px;border-radius:16px}
  .us-post-h{grid-area:h;align-self:end;padding:12px 14px 0}
  .us-post-h .us-glogo{display:none}
  .us-post-f{grid-area:f;align-self:start;flex-wrap:wrap;gap:8px 10px;padding:8px 12px 12px 14px;font-size:15px}
  .us-post-f span{white-space:nowrap}
  .us-post-f em{padding:8px 12px}
  .us-fcard{align-self:auto;margin:0;padding:20px}
  .us-fb b{font-size:34px}
  .us-w-d{display:none}
  .us-w-m{display:inline}

  .us-v-ai{min-height:0;padding:64px 0 44px}
  .us-chat-w{width:100%}
  .us-chat-b{padding:14px}
  .us-msg{font-size:15px}
  .us-t-done{right:0;bottom:-44px}
  .us-night{right:0;top:-76px;width:120px;height:88px}

  .us-v-auto{min-height:0;gap:26px;padding:0 0 64px}
  .us-node i{width:56px;height:56px;border-radius:18px}
  .us-node .ic{width:24px;height:24px}
  .us-flow-l{top:26px}
  .us-cal{width:100%;padding:14px;border-radius:24px}
  .us-cal-h{justify-content:space-between}
  .us-cal li{gap:10px;padding:0 12px;font-size:15px}
  .us-t-rem{right:0;bottom:0}

  /* brand on a phone (2026-10-06): the kit and the reel side by side (the kit card as tall as the reel), the menu under them as
     one wide card; a straight wire drops from the kit to the menu, like the ads wire. The 2deg reel stays inside the gutter. */
  .us-v-brand{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"kit reel" "menu menu";gap:40px 22px;align-items:stretch;aspect-ratio:auto;padding-block:8px}
  .us-kit,.us-reel,.us-menu{position:relative;left:auto;right:auto;top:auto;width:auto}
  .us-kit{grid-area:kit;display:flex;flex-direction:column;justify-content:space-between;padding:14px;border-radius:22px}
  .us-menu{grid-area:menu;margin-inline:4px;padding:16px 18px 14px;border-radius:20px;rotate:-1deg}
  .us-menu-h{font-size:22px;padding-bottom:10px}
  .us-menu ul{margin-top:11px;gap:8px}
  .us-menu-sw{margin-top:12px}
  .us-kit-logo{gap:8px}
  .us-kit-logo{min-width:0}
  .us-kit-logo p{min-width:0}
  .us-kit-logo svg{width:32px;height:32px}
  .us-kit-logo b{font-size:20px;line-height:1.05;white-space:normal}
  .us-kit-logo small{letter-spacing:0;text-transform:none;font-size:13px;white-space:nowrap}
  .us-sw{grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}
  .us-sw li{font-size:0;gap:0}
  .us-sw i{width:100%;height:28px}
  .us-kit-type b{font-size:28px}
  .us-kit-type span{font-size:13px}
  .us-reel{grid-area:reel;align-self:center;justify-self:start;height:auto;width:calc(100% - 8px);border-radius:22px}
  .us-reel-logo{left:8px;top:8px;gap:0;padding:3px;font-size:0} /* the mark only: the name sits on the kit next to it */
  .us-reel-logo svg{width:22px;height:22px}
  .us-reel-sub{left:8px;right:8px;bottom:24px;padding:6px 6px;font-size:13px}
  .us-reel-bar{left:10px;right:10px;bottom:10px}
  .us-reel-play{width:46px;height:46px;margin:-23px 0 0 -23px}
}
/* the narrowest phones: the map card's three actions drop their icons, the calendar rows let the name wrap */
@media (max-width:360px){
  .us-gacts .ic{display:none}
  .us-cal li{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:6px 10px}
  .us-cal li span{white-space:normal;line-height:1.2}
}
@media (max-width:340px){
  .us-node small{font-size:14px}
}

/* ---------- light theme (2026-10-19) ----------
   The same eight stories on the daylight stage: the lit objects stay white and get the gallery shadow, the glass parts become
   white glass, the drawn lines and the night map turn cobalt, the node that is „on“ is lit cobalt instead of white. */
:root[data-theme="light"] .us-chip{background:rgba(255,255,255,.78);box-shadow:inset 0 0 0 1px var(--lt-hair),0 8px 20px -14px rgba(11,18,51,.3);color:var(--lt-ink);
  -webkit-backdrop-filter:var(--lt-blur);backdrop-filter:var(--lt-blur)}
:root[data-theme="light"] .us-chip .ic{background:var(--cobalt-tint);color:var(--cobalt)}
:root[data-theme="light"] .us-chip.is-in .ic{background:var(--cobalt);color:#fff}
:root[data-theme="light"] .us-chip a{color:var(--lt-ink);text-decoration-color:rgba(11,18,51,.3)}
:root[data-theme="light"] .us-chip a:hover{text-decoration-color:var(--cobalt)}
:root[data-theme="light"] :is(a.us-chip:hover,span.us-chip:has(>a:hover)){background:#fff;box-shadow:inset 0 0 0 1px rgba(35,53,255,.35),0 10px 22px -14px rgba(35,53,255,.45)}
:root[data-theme="light"] span.us-chip:has(>a:focus-visible){outline-color:var(--cobalt)}
:root[data-theme="light"] .us-more summary .ic{box-shadow:inset 0 0 0 1.5px var(--lt-hair-2);color:var(--lt-ink)}
:root[data-theme="light"] :is(.us-more summary:hover,.us-more[open] summary){color:var(--lt-ink)}
:root[data-theme="light"] .us-more summary:hover .ic{background:var(--cobalt-tint);box-shadow:inset 0 0 0 1.5px rgba(35,53,255,.35);color:var(--cobalt)}
:root[data-theme="light"] .us-list{background:rgba(255,255,255,.97);box-shadow:inset 0 0 0 1px var(--lt-hair),var(--lt-sh-2)}
:root[data-theme="light"] .us-list li{border-bottom-color:var(--lt-hair);color:var(--lt-body)}
:root[data-theme="light"] .us-list .ic{color:var(--cobalt)}

/* the spotlight and the drawn lines */
:root[data-theme="light"] .us-vis::before{background:radial-gradient(closest-side,rgba(91,107,255,.16),rgba(91,107,255,.05) 62%,transparent)}
:root[data-theme="light"] .us-wire{stroke:#8C99FF}
:root[data-theme="light"] .us-wire-dot{fill:#fff;stroke:var(--cobalt)}
:root[data-theme="light"] :is(.us-browser,.us-prod,.us-gcard,.us-post,.us-fcard,.us-chat,.us-cal,.us-kit,.us-toast,.us-route li.is-end,.us-menu,.us-reel){
  box-shadow:0 0 0 1px rgba(11,18,51,.06),0 2px 6px rgba(11,18,51,.06),0 40px 80px -40px rgba(11,18,51,.42)}
:root[data-theme="light"] .us-phone{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 36px 64px -28px rgba(11,18,51,.5)}
:root[data-theme="light"] .us-ring{box-shadow:0 0 0 7px rgba(31,164,99,.2),0 0 0 15px rgba(31,164,99,.08),0 18px 34px -12px rgba(11,18,51,.4)}

/* shop route: white glass stops, ink names, a cobalt rail */
:root[data-theme="light"] .us-route li{background:rgba(255,255,255,.74);box-shadow:inset 0 0 0 1px var(--lt-hair),0 10px 26px -18px rgba(11,18,51,.32);
  -webkit-backdrop-filter:var(--lt-blur);backdrop-filter:var(--lt-blur)}
:root[data-theme="light"] .us-route li b{color:var(--lt-ink)}
:root[data-theme="light"]:not(.js) .us-route li:not(.is-end) i{background:#7D8AFF}
:root[data-theme="light"] :is(.us-rail,.us-flow-l) .b{stroke:rgba(11,18,51,.22)}
:root[data-theme="light"] :is(.us-rail,.us-flow-l) .r{stroke:var(--cobalt)}
@keyframes usLitL{from{background-color:#C9D0FF}to{background-color:var(--cobalt)}}
@media (prefers-reduced-motion:no-preference){
  :root[data-theme="light"].js .play .us-route li i{animation-name:usLitL}
}

/* auto flow: white nodes with a cobalt mark, the calendar node lit cobalt */
:root[data-theme="light"] .us-node i{background:#fff;color:var(--cobalt);box-shadow:inset 0 0 0 1px var(--lt-hair),0 14px 30px -16px rgba(11,18,51,.35)}
:root[data-theme="light"] .us-node.is-on i{background:var(--cobalt);color:#fff;box-shadow:0 0 0 6px rgba(35,53,255,.12),0 20px 40px -16px rgba(35,53,255,.6)}

/* google: the night map becomes a daylight street plan in cobalt ink; the copy card is white glass */
:root[data-theme="light"] .us-streets path{stroke:rgba(35,53,255,.08)}
:root[data-theme="light"] .us-streets path.sm{stroke:rgba(35,53,255,.06)}
:root[data-theme="light"] .us-river{stroke:rgba(31,140,238,.14)}
:root[data-theme="light"] .us-dots-m circle{fill:rgba(35,53,255,.28)}
:root[data-theme="light"] .us-route-g{stroke:var(--cobalt)}
:root[data-theme="light"] .us-you circle:first-child{fill:rgba(35,53,255,.16)}
:root[data-theme="light"] .us-you circle:last-child{fill:var(--cobalt)}
:root[data-theme="light"] .us-pin-b path{fill:#fff;filter:drop-shadow(0 6px 10px rgba(11,18,51,.3))}
:root[data-theme="light"] .us-pin-r{fill:rgba(35,53,255,.14)}
@media (min-width:1101px){
  :root[data-theme="light"] .us-wide-h{background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.68));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px var(--lt-hair),0 40px 90px -44px rgba(11,18,51,.4)}
}

/* ai: the night cue in cobalt ink */
:root[data-theme="light"] .us-moon{fill:rgba(35,53,255,.06);stroke:var(--cobalt)}
:root[data-theme="light"] .us-stars circle{fill:#7D8AFF}

/* ==== 65-za-nas.css ==== */
/* ---------- ЗА НАС (za-nas.html) · prefix .zn- · „Кино“ round 2026-09-27 ----------
   Poster hero (orbits, D-28) + four scenes on the shared dark stage (04-stage.css):
   01 #zn-why cobalt · 02 #zn-principles indigo · 03 #zn-founder night · 05 #zn-faq violet
   (04 #zn-nofit was removed 2026-10-01, archived in _archive/2026-10-01-subscription/b4-chrome/removed/) */
.zn-hero :focus-visible{outline-color:#fff}
.zn-av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;font-style:normal;font-weight:700;font-size:19px;line-height:1;color:#fff;background:linear-gradient(150deg,#3A4BFF,#1420B5)}
.zn-price{font-weight:600;color:var(--ink);background:linear-gradient(transparent 56%,var(--yellow) 56%);padding:0 3px;border-radius:2px;white-space:nowrap}
/* a promise, not a price: a periwinkle marker instead of the yellow one (yellow is for prices and the main action) */
.zn-nofee{font-weight:600;color:var(--ink);background:linear-gradient(transparent 56%,#C9D2FF 56%);padding:0 3px;border-radius:2px;white-space:nowrap}

/* ---------- poster hero (board D-28, 2026-10-15): all eight services orbit one core, the team ----------
   One CSS 3D scene (.zn-sys: perspective + preserve-3d all the way down, so the browser sorts depth): the core stands upright,
   three tilted rings carry the tiles, and a tile on the far side of a ring passes behind the core, on the near side in front.
   Each tile is turned back to face the screen: ring rotateX(tilt) > .zn-rot rotateZ(pointer) > .zn-arm rotateZ(--a) > .zn-sat
   (the ring's edge) > .zn-face rotateZ(-a) > .zn-flat rotateZ(-pointer) rotateX(-tilt). Nothing between .zn-sys and a tile may
   take opacity, filter or overflow (it would flatten the scene).
   Perf (P-04): the tilt is computed on each reader (.zn-ring, .zn-flat) from its own non-inherited --py, never as an inherited
   var on .zn-sys, so a pointer frame restyles only those elements (all are in PH_PXY, 20-sub.js).
   Motion: the rings spin in once (3 s, then still: WCAG 2.2.2), then a fine pointer turns them (--px/--py from 20-sub.js).
   Reduced motion: the same still frame. Phones use their own angles (--am). At rest no tile sits behind the core, on a screen
   edge or under the assistant button (angles found with a small layout search, 2026-10-15). */
/* the halo lies behind the whole scene (in the scene it would be a plane that greys the tiles behind it) */
.zn-orb{--S:min(1360px,94vw,(min(100svh,1080px) - var(--hdr))*1.42);pointer-events:none}
.zn-orb::before{content:"";position:absolute;left:50%;top:var(--cy,52%);width:calc(var(--S)*.46);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(120,138,255,.62),rgba(60,80,255,.24) 38%,rgba(35,53,255,.08) 62%,transparent)}
.zn-sys{position:absolute;left:50%;top:var(--cy,52%);width:var(--S);height:var(--S);
  translate:-50% -50%;perspective:1300px;perspective-origin:50% 35%;transform-style:preserve-3d;
  transform:translate3d(calc(var(--px)*-16px),calc(var(--py)*-8px),0)}
.zn-core{--cs:calc(var(--S)*.105);position:absolute;left:50%;top:50%;width:var(--cs);height:var(--cs);margin:calc(var(--cs)/-2) 0 0 calc(var(--cs)/-2);transform:translateZ(0)}
/* a thin ring around the mark: light, not a card */
.zn-core::after{content:"";position:absolute;inset:-22%;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42),0 0 0 10px rgba(255,255,255,.05)}
.zn-mk{position:relative;display:block;width:100%;height:100%;border-radius:28%;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 24px 60px -16px rgba(0,0,40,.9),0 0 80px 10px rgba(90,110,255,.55)}
.zn-ring{--R:calc(var(--S)*var(--rk));position:absolute;left:50%;top:50%;width:calc(var(--R)*2);height:calc(var(--R)*2);margin:calc(var(--R)*-1) 0 0 calc(var(--R)*-1);
  border-radius:50%;transform-style:preserve-3d;transform:rotateX(calc(var(--tilt,71deg) + var(--py)*5deg))}
.zn-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(201,210,255,.42)}
.zn-r1{--rk:.24;--k:34deg;--spin:250deg}
.zn-r2{--rk:.345;--k:-26deg;--spin:-210deg}
.zn-r3{--rk:.465;--k:20deg;--spin:170deg}
/* the inner disc glows like a lit floor; the middle ring is the site's road: white dashes */
.zn-r1::after{content:"";position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(closest-side,rgba(70,92,255,.34),rgba(35,53,255,.1) 60%,transparent)}
.zn-r2::before{border:2px dashed rgba(255,255,255,.5)}
.zn-r3::before{border-color:rgba(201,210,255,.26)}
.zn-rot,.zn-arm{position:absolute;inset:0;transform-style:preserve-3d}
.zn-rot{transform:rotateZ(calc(var(--k)*var(--px)))}
.zn-arm{--a:var(--a0);transform:rotateZ(var(--a))}
.zn-sat{position:absolute;left:50%;top:0;width:0;height:0;transform-style:preserve-3d}
.zn-face,.zn-flat{position:absolute;left:0;top:0;transform-style:preserve-3d}
.zn-face{transform:rotateZ(calc(-1*var(--a)))}
.zn-flat{transform:rotateZ(calc(-1*var(--k)*var(--px))) rotateX(calc(-1*(var(--tilt,71deg) + var(--py)*5deg)))}
/* the tile box holds the label too (a label hanging out of its box gets cut in the 3D layer) */
.zn-tile{--ts:clamp(50px,4.9vw,70px);position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:10px;width:max-content;translate:-50% calc(var(--ts)/-2)}
.zn-tile i{display:grid;place-items:center;width:var(--ts);height:var(--ts);border-radius:29%;background:#fff;color:var(--cobalt);box-shadow:0 0 0 1px rgba(255,255,255,.6),0 18px 34px -10px rgba(3,6,60,.75)}
.zn-tile .ic{width:44%;height:44%;stroke-width:1.9}
.zn-tile b{padding:6px 12px;border-radius:999px;background:rgba(7,11,82,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
  font-size:15px;font-weight:600;line-height:1.1;letter-spacing:-.005em;color:#fff;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  html.js .zn-arm{animation:znSpinA 3s cubic-bezier(.16,1,.3,1) .15s both}
  html.js .zn-face{animation:znSpinF 3s cubic-bezier(.16,1,.3,1) .15s both}
  html.js .zn-ring{animation:znRing 1.6s var(--ease) both}
  html.js .zn-r2{animation-delay:.08s}
  html.js .zn-r3{animation-delay:.16s}
  html.js .zn-core{animation:znCore 1.3s var(--ease) both}
}
@keyframes znSpinA{from{transform:rotateZ(calc(var(--a) - var(--spin)))}}
@keyframes znSpinF{from{transform:rotateZ(calc(var(--spin) - var(--a)))}}
@keyframes znRing{from{scale:.72}}
@keyframes znCore{from{scale:.5}}
/* phones and portrait tablets: a steeper tilt, so the rings use the tall screen */
@media (max-width:760px),(orientation:portrait) and (max-width:1100px){
  .zn-orb{--S:min(190vw,740px,(100svh - var(--hdr))*.96);--cy:50%;--tilt:42deg}
  .zn-arm{--a:var(--am)}
  .zn-r1{--rk:.16}
  .zn-r2{--rk:.26}
  .zn-r3{--rk:.38}
  .zn-tile{--ts:clamp(46px,7vw,58px)}
  .zn-tile{gap:7px}
  .zn-tile b{padding:4px 9px;font-size:13px}
}
/* small phones: the three-line H1 reaches deeper, so the orbit is a little smaller and sits lower (the top tile cleared the
   last title line by nothing at 320) */
@media (max-width:360px){
  .zn-orb{--S:min(174vw,(100svh - var(--hdr))*.9);--cy:56%}
}

/* ======================= 01 · five paper bills, struck, one plan card lands ======================= */
/* sequence (from the moment the visual enters the screen): bills slide in 0.1–0.8 s, strike 1.6 s + k·0.08 s,
   2.0 s the five bills collapse into one tight pile that slides toward the card and dims (the pile as a group, so overlaps stay solid),
   the plan card pops 2.1 s in front of the pile's edge, checks 2.3–2.5 s; one loop: 6 s shimmer on the price */
.zn-why .scn-split{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
.zn-bl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,2.4vw,36px)}
.zn-bl-st{position:relative;height:calc(4 * var(--bo) + var(--bh));--bo:64px;--bh:104px;--bt:40px;--bx:110px}
.zn-bill{position:absolute;left:0;right:0;top:calc(var(--k) * var(--bo));height:var(--bh);display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:16px;
  background:#E9ECFA;color:var(--ink);rotate:var(--r,0deg);box-shadow:0 -12px 26px -16px rgba(4,8,50,.55),0 22px 40px -26px rgba(0,0,0,.6)}
.zn-bill-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:#fff;color:var(--cobalt)}
.zn-bill-ic .ic{width:21px;height:21px;stroke-width:2}
.zn-bill b{flex:1;min-width:0;padding-top:9px;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ink, not cobalt: the pile dims to .55 (znDim), and ink on the white pill keeps AA after the dim */
.zn-bill-sum{flex:none;margin-top:6px;padding:6px 10px;border-radius:999px;font-size:14px;font-weight:600;line-height:1.2;color:var(--ink);background:#fff}
.zn-bill-x{position:absolute;left:62px;right:96px;top:31px;height:3px;border-radius:3px;background:#0B1233;transform-origin:0 50%}
.zn-bl-one{position:relative;z-index:2;width:100%;max-width:340px;justify-self:end;padding:26px 26px 28px;border:0;color:var(--ink)}
.zn-bl-k{margin-bottom:16px;font:600 15px/1.2 var(--f);letter-spacing:0;text-transform:none;color:var(--cobalt)}
.zn-bl-who{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.zn-bl-who b{display:block;font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.zn-bl-who span{display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.35;color:var(--muted);text-wrap:balance}
.zn-bl-plan{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 0 20px}
.zn-bl-plan span{font-size:15px;font-weight:500;color:var(--muted)}
.zn-bl-plan b{position:relative;display:inline-block;overflow:hidden;font-size:30px;line-height:1.1;letter-spacing:-.03em}
.zn-bl-plan b::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%)}
.zn-bl-ones{display:grid;gap:11px}
.zn-bl-ones li{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.zn-bl-ones i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--cobalt);color:#fff}
.zn-bl-ones .ic{width:14px;height:14px;stroke-width:3}
@keyframes znStrike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* collapse: each bill moves from top k·bo to a pile with k·bt offsets, centred where the stack was, then shifts toward the card */
@keyframes znStack{to{translate:var(--bx) calc((2 - var(--k)) * (var(--bo) - var(--bt)));scale:.9}}
@keyframes znDim{to{opacity:.55}}
@keyframes znShine{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
html.js .zn-bill-x{transform:scaleX(0)}
html.js .zn-bl.play .zn-bill-x{animation:znStrike .4s var(--ease) calc(1.6s + var(--k) * .08s) both}
html.js .zn-bl.play .zn-bill.sq{animation-name:sqL,znStack;animation-duration:.8s,.7s;animation-timing-function:var(--ease),var(--ease);animation-fill-mode:both,forwards;
  animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap)),2s}
html.js .zn-bl.play .zn-bl-st{animation:znDim .7s var(--ease) 2s forwards}
html.js .zn-bl.play.live .zn-bl-plan b::after{animation:znShine 6s ease-in-out 3.2s infinite}

@media (max-width:1100px){
  .zn-why .scn-split{grid-template-columns:1fr;gap:48px}
  .zn-bl{width:100%;max-width:760px}
}
@media (max-width:760px){
  .zn-bl{grid-template-columns:1fr;gap:34px;width:100%;max-width:380px;margin-inline:auto}
  .zn-bl{gap:0}
  .zn-bl-st{--bo:44px;--bh:64px;--bt:44px;--bx:0px}
  .zn-bill{padding:12px 14px;align-items:center}
  .zn-bill b{padding-top:0}
  .zn-bill-sum{margin-top:0}
  .zn-bill-x{top:31px}
  /* phones keep the bills apart (bt = bo, the pile only shrinks), so every struck name stays readable; the card overlaps the last bill a little */
  .zn-bl-one{justify-self:stretch;max-width:none;margin-top:-14px;padding:22px 22px 24px}
  .zn-bl-who{display:none}
  .zn-bl-plan{padding-top:4px}
}

/* ======================= 02 · six rules, six drawn medallions ======================= */
.zn-defs{position:absolute;width:0;height:0;overflow:hidden}
.zn-pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,5vw,72px) clamp(24px,3vw,48px);max-width:1000px;margin-inline:auto}
.zn-md{display:grid;justify-items:center;align-content:start;gap:22px;text-align:center}
.zn-md svg{display:block;width:clamp(112px,9vw,128px);height:auto;overflow:visible}
.zn-pr-row{position:relative}
.zn-pr-line{display:none}
.zn-md svg .sq:not(.sq-draw){transform-box:fill-box;transform-origin:50% 50%}
.zn-md svg .sq-gy{transform-origin:50% 100%}
.zn-md-disc{fill:url(#zn-md-g)}
.zn-md-ring{stroke:#C9D2FF;stroke-opacity:.55;stroke-width:1.5}
.zn-md-t{font:700 30px/1 var(--f);fill:#2335FF}
.zn-md-n{font:700 16px/1 var(--f);fill:#fff}
.zn-md-ok circle{fill:#2335FF}
.zn-md-ok path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.zn-md p{max-width:14ch;min-height:2lh;font-size:clamp(19px,1.45vw,21px);font-weight:600;line-height:1.25;letter-spacing:-.02em;color:#fff;text-wrap:balance}
@media (min-width:1200px){
  .zn-pr{padding-bottom:clamp(40px,5vw,72px)}
  .zn-pr-grid{position:relative;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;max-width:none}
  .zn-pr .scn-head{margin-bottom:64px}
  .zn-pr .scn-foot{margin-top:56px}
  .zn-md svg{width:156px}
  /* one hairline from the first disc centre to the last, drawn left→right in 1.6 s (linear), so it reaches disc i at d0 + 2i·gap = its pop */
  .zn-pr-line{display:block;position:absolute;left:calc((100% - 120px) / 12);top:76px;width:calc(100% * 5 / 6 + 20px);height:4px;overflow:visible}
  html.js .play .zn-pr-line .sq-draw{animation-duration:1.6s;animation-timing-function:linear}
}
@media (max-width:760px){
  .zn-pr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 14px}
  .zn-md{gap:16px}
  .zn-md svg{width:112px}
  .zn-md p{font-size:18px}
}

/* ======================= 03 · the founder: „Н“ monogram + one chat ======================= */
.zn-fd-act{margin-top:34px}
.zn-fd-act .btn{gap:12px}
.zn-fd-act .btn:hover .ic{transform:none}
.zn-fd-vis{position:relative;width:100%;max-width:640px;margin-left:auto;container-type:inline-size}
.zn-fd-mono{position:absolute;left:0;top:0;width:50cqw;aspect-ratio:1;container-type:inline-size}
.zn-fd-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.zn-fd-disc{position:absolute;inset:17%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 24%,#6070FF 0%,#2335FF 42%,#111B9C 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 50px 100px -36px rgba(35,53,255,.95)}
.zn-fd-disc span{font-size:33cqw;font-weight:600;line-height:1;color:#fff;transform:translateY(-2%);text-shadow:0 20px 40px rgba(7,11,82,.35)}
.zn-fd-orbit{position:absolute;inset:0;animation:znSpin 96s linear infinite paused}
.zn-fd-orb{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(42cqw) rotate(calc(-1*var(--a)))}
.zn-fd-cr{position:absolute;left:-26px;top:-26px;width:52px;height:52px;animation:znSpin 96s linear infinite reverse paused}
.zn-fd-cr i{display:grid;place-items:center;width:100%;height:100%;border-radius:16px;background:#fff;color:var(--cobalt);box-shadow:0 16px 30px -12px rgba(0,0,0,.6)}
.zn-fd-cr .ic{width:23px;height:23px;stroke-width:2}
@keyframes znSpin{to{rotate:360deg}}
.zn-fd.live .zn-fd-orbit,.zn-fd.live .zn-fd-cr{animation-play-state:running}
.zn-fd-chat{position:relative;z-index:1;width:53cqw;margin:48cqw 0 0 auto;padding:0;overflow:hidden;border:0;color:var(--ink)}
.zn-fd-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.zn-fd-h .zn-av{width:42px;height:42px;font-size:17px}
.zn-fd-h b{display:block;font-size:16px;font-weight:600;line-height:1.3}
.zn-fd-h span{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.35;color:var(--muted);text-wrap:balance}
.zn-fd-on{width:8px;height:8px;border-radius:50%;flex:none;background:#1FA463;box-shadow:0 0 0 3px rgba(31,164,99,.18)}
.zn-fd-body{display:grid;gap:12px;padding:18px 16px 18px;background:linear-gradient(180deg,#F5F6FC,#fff)}
.zn-fd-m{max-width:88%;padding:10px 14px 7px;border-radius:18px;font-size:16px;line-height:1.4;text-wrap:pretty}
.zn-fd-m.in{justify-self:start;border-bottom-left-radius:6px;background:#fff;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.zn-fd-m.out{justify-self:end;border-bottom-right-radius:6px;background:var(--cobalt);color:#fff;box-shadow:0 18px 34px -20px rgba(35,53,255,.9)}
.zn-fd-m time{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;font-size:13px;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--muted)}
.zn-fd-m.out time{color:rgba(255,255,255,.8)}
/* 1 · our album: three flat photos of the autumn menu (one big, two stacked), one caption */
.zn-fd-att{max-width:78%;padding:6px 6px 7px}
.zn-fd-pics{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:4px;aspect-ratio:16/10;border-radius:13px;overflow:hidden}
.zn-fd-pic{display:block;width:100%;height:100%}
.zn-fd-pic.p1{grid-row:1/3}
.zn-fd-cap{padding:8px 8px 0;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.zn-fd-att time{padding-right:8px}
/* 2 · your one tap: a big approve bubble with a tick, read ticks under it, one soft ring when it lands */
.zn-fd-ok{position:relative;padding:12px 16px 8px 12px;border-radius:22px;border-bottom-right-radius:6px}
.zn-fd-ok p{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.zn-fd-okic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:#fff;color:var(--cobalt);font-style:normal}
.zn-fd-okic .ic{width:16px;height:16px;stroke-width:3}
.zn-fd-read{width:18px;height:10px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zn-fd-ok::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--cobalt);opacity:0;pointer-events:none}
/* 3 · our answer: live, with the two places it went */
.zn-fd-live{padding:11px 12px 7px 14px}
.zn-fd-done{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.zn-fd-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#1FA463;box-shadow:0 0 0 3px rgba(31,164,99,.18)}
.zn-fd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.zn-fd-chips i{display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 9px;border-radius:999px;background:var(--cobalt-tint);color:var(--cobalt);font-style:normal;font-size:14px;font-weight:600;line-height:1.2}
.zn-fd-chips .ic{width:15px;height:15px;stroke-width:2.2}
.zn-fd-chips .ck{width:14px;height:14px;stroke-width:3;color:#1FA463}
.zn-fd-slot{position:relative;display:grid}
.zn-fd-type{position:absolute;left:0;top:0;display:flex;gap:5px;padding:14px 16px;border-radius:18px 18px 18px 6px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);opacity:0}
.zn-fd-type i{width:7px;height:7px;border-radius:50%;background:var(--cobalt)}
@keyframes znType{0%{opacity:0;transform:translateY(6px)}18%,82%{opacity:1;transform:none}100%{opacity:0}}
@keyframes znDot{0%,100%{transform:none;opacity:.45}50%{transform:translateY(-4px);opacity:1}}
@keyframes znTap{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.14,1.4)}}
@media (prefers-reduced-motion:no-preference){
  html.js .zn-fd.play .zn-fd-ok::after{animation:znTap .9s var(--ease) 2.25s both}
  html.js .zn-fd.play .zn-fd-type{animation:znType 1.15s var(--ease) 2.35s both}
  html.js .zn-fd.play .zn-fd-type i{animation:znDot .56s ease-in-out 2.45s 2}
  html.js .zn-fd.play .zn-fd-type i:nth-child(2){animation-delay:2.55s}
  html.js .zn-fd.play .zn-fd-type i:nth-child(3){animation-delay:2.65s}
}
/* the cluster sits 32px lower: orbit top in line with the kicker, chat bottom in the button zone (the 46px gap between them is kept) */
@media (min-width:761px){.zn-fd-mono{top:32px}.zn-fd-chat{margin-top:calc(48cqw + 32px)}}
@media (max-width:900px){.zn-fd-vis{max-width:620px;margin-inline:auto}}
/* stacked: heading, then the visual, then the button (the head box dissolves so its two children can be ordered around the visual) */
@media (max-width:900px){.zn-fd .scn-split{display:flex;flex-direction:column;align-items:stretch}.zn-fd .scn-head{display:contents}.zn-fd-act{order:3;margin-top:8px}}
@media (max-width:760px){
  .zn-fd-act .btn{width:100%}
  .zn-fd-vis{max-width:420px}
  .zn-fd-mono{position:relative;width:280px;max-width:78cqw;margin-inline:auto}
  .zn-fd-orb:nth-child(4){display:none}
  .zn-fd-chat{width:100%;margin:28px 0 0}
  .zn-fd-cr{left:-22px;top:-22px;width:44px;height:44px}
  .zn-fd-cr i{border-radius:14px}
  .zn-fd-cr .ic{width:20px;height:20px}
}

/* ======================= 05 · FAQ on one glass panel ======================= */
.zn-fq-list{max-width:880px;margin-inline:auto;padding:8px}
.zn-qa{border-top:1px solid var(--hair);border-radius:20px;transition:background-color .3s}
.zn-qa:first-child,.zn-qa[open],.zn-qa[open]+.zn-qa{border-top-color:transparent}
.zn-qa[open]{background:rgba(255,255,255,.06)}
.zn-qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:18px 18px 18px 26px;list-style:none;cursor:pointer;border-radius:20px;
  font-size:clamp(18px,1.4vw,21px);font-weight:600;line-height:1.3;letter-spacing:-.015em;color:#fff}
.zn-qa summary::-webkit-details-marker{display:none}
.zn-qa summary:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.zn-qa-ic{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .35s var(--ease),background-color .3s}
.zn-qa-ic::before,.zn-qa-ic::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:#fff;transition:background-color .3s}
.zn-qa-ic::after{transform:rotate(90deg)}
.zn-qa summary:hover .zn-qa-ic{background:rgba(255,255,255,.18)}
.zn-qa[open] .zn-qa-ic{transform:rotate(45deg);background:#fff}
.zn-qa[open] .zn-qa-ic::before,.zn-qa[open] .zn-qa-ic::after{background:var(--cobalt)}
.zn-qa p{max-width:64ch;padding:0 26px 24px;font-size:17px;line-height:1.6;color:var(--on-2)}
.zn-qa p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@supports (interpolate-size:allow-keywords){
  .zn-fq-list{interpolate-size:allow-keywords}
  .zn-qa::details-content{height:0;overflow:clip;transition:height .4s var(--ease),content-visibility .4s allow-discrete}
  .zn-qa[open]::details-content{height:auto}
}
@media (max-width:760px){
  .zn-fq-list{padding:4px}
  .zn-qa summary{min-height:64px;padding:16px 12px 16px 18px;gap:14px}
  .zn-qa p{padding:0 18px 20px}
}

/* reduced motion: final composition (the .sq system is handled by 04-stage.css) */
@media (prefers-reduced-motion:reduce){
  .zn-fd-orbit,.zn-fd-cr,.zn-bl-plan b::after{animation:none!important}
  html.js .zn-bill-x,html.js .play .zn-bill-x{transform:none;animation:none}
  html.js .zn-bl-st{opacity:.55}
  html.js .zn-bill.sq{translate:var(--bx) calc((2 - var(--k)) * (var(--bo) - var(--bt)));scale:.9}
}

/* ---------- light theme (2026-10-19) ----------
   Daylight za-nas: the orbit is cobalt line work on the light stage (white tiles on a soft daylight shadow, white name pills),
   the bills are paper, the medallion lines and the FAQ read in ink. The poster keeps its 3D rules: no filter/opacity added. */
:root[data-theme="light"] .zn-hero :focus-visible{outline-color:var(--cobalt)}
:root[data-theme="light"] .zn-orb::before{background:radial-gradient(closest-side,rgba(91,107,255,.36),rgba(35,53,255,.12) 42%,rgba(35,53,255,.04) 64%,transparent)}
:root[data-theme="light"] .zn-core::after{box-shadow:inset 0 0 0 1.5px rgba(35,53,255,.26),0 0 0 10px rgba(255,255,255,.55)}
:root[data-theme="light"] .zn-mk{box-shadow:0 0 0 2px #fff,0 24px 48px -18px rgba(11,18,51,.45),0 0 72px 6px rgba(91,107,255,.34)}
:root[data-theme="light"] .zn-ring::before{border-color:rgba(35,53,255,.24)}
:root[data-theme="light"] .zn-r1::after{background:radial-gradient(closest-side,rgba(91,107,255,.2),rgba(35,53,255,.05) 60%,transparent)}
:root[data-theme="light"] .zn-r2::before{border:2px dashed rgba(35,53,255,.36)}
:root[data-theme="light"] .zn-r3::before{border-color:rgba(35,53,255,.16)}
:root[data-theme="light"] .zn-tile i{box-shadow:inset 0 0 0 1px var(--lt-hair),0 1px 2px rgba(11,18,51,.06),0 14px 28px -14px rgba(11,18,51,.34)}
:root[data-theme="light"] .zn-tile b{background:#fff;color:var(--lt-ink);box-shadow:inset 0 0 0 1px var(--lt-hair),0 6px 14px -8px rgba(11,18,51,.28)}
/* 01 · paper bills on daylight */
:root[data-theme="light"] .zn-bill{background:#fff;box-shadow:inset 0 0 0 1px var(--lt-hair),0 -10px 22px -18px rgba(11,18,51,.3),0 18px 34px -24px rgba(11,18,51,.42)}
:root[data-theme="light"] .zn-bill-ic,:root[data-theme="light"] .zn-bill-sum{background:var(--lt-well)}
:root[data-theme="light"] .zn-bl-one{box-shadow:inset 0 0 0 1px var(--lt-hair),var(--lt-sh-2)}
/* 02 · the medallions: ink lines, a cobalt hairline */
:root[data-theme="light"] .zn-md p{color:var(--lt-ink)}
:root[data-theme="light"] .zn-md-ring{stroke:#2335FF;stroke-opacity:.2}
:root[data-theme="light"] .zn-pr-line path{stroke:#2335FF;stroke-opacity:.24}
/* 03 · the founder: daylight shadows */
:root[data-theme="light"] .zn-fd-disc{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 44px 90px -40px rgba(35,53,255,.7)}
:root[data-theme="light"] .zn-fd-cr i{box-shadow:inset 0 0 0 1px var(--lt-hair),0 14px 26px -14px rgba(11,18,51,.38)}
:root[data-theme="light"] .zn-fd-chat{box-shadow:inset 0 0 0 1px var(--lt-hair),var(--lt-sh-2)}
/* 05 · FAQ: ink questions, a cobalt plus that turns into a filled cobalt cross */
:root[data-theme="light"] .zn-qa[open]{background:rgba(35,53,255,.045)}
:root[data-theme="light"] .zn-qa summary{color:var(--lt-ink)}
:root[data-theme="light"] .zn-qa summary:focus-visible{outline-color:var(--cobalt)}
:root[data-theme="light"] .zn-qa-ic{background:rgba(35,53,255,.07);box-shadow:inset 0 0 0 1px rgba(35,53,255,.18)}
:root[data-theme="light"] .zn-qa-ic::before,:root[data-theme="light"] .zn-qa-ic::after{background:var(--cobalt)}
:root[data-theme="light"] .zn-qa summary:hover .zn-qa-ic{background:rgba(35,53,255,.13)}
:root[data-theme="light"] .zn-qa[open] .zn-qa-ic{background:var(--cobalt);box-shadow:0 8px 18px -8px rgba(35,53,255,.7)}
:root[data-theme="light"] .zn-qa[open] .zn-qa-ic::before,:root[data-theme="light"] .zn-qa[open] .zn-qa-ic::after{background:#fff}
:root[data-theme="light"] .zn-qa p a{color:var(--cobalt-2);text-decoration-color:rgba(35,53,255,.4)}

/* ==== 68-sait-za-restorant.css ==== */
/* ==== sait-za-restorant (industry page prototype, SEO round 2026-10-21) ====
   The page reuses the proekti wall (61-proekti.css), the uslugi chips and lists (62-uslugi.css), the report card (38-report.css)
   and the za-nas FAQ (65-za-nas.css); the build pulls those files in through the classes. Only the page-own bits live here. */
.rs-hero .ph-title{--ph-tw:17ch}
.rs-shot{max-width:640px;margin-inline:auto;width:100%}
.rs-shot .pr-gstage{display:block}
@media (max-width:767px){.rs-shot{max-width:520px}}
/* city page (izrabotka-na-sait-vratsa): the 4 live sites as a 2x2 gallery of proekti cards */
.pr-grid.rs-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(28px,4vw,48px);padding:0;list-style:none}
@media (max-width:600px){.pr-grid.rs-grid{grid-template-columns:minmax(0,1fr)}}