/* KK landing v2. Tokens and editorial elements follow the KK design system (KK-дизайн-система.html), unchanged. */

/* ---------- tokens ---------- */
.kk-land{font-variant-emoji:text;
  --paper:#EFEDEA;--ink:#313131;--mute:#ADADAD;--accent:#db6565;--accent-wash:rgba(219,101,101,.16);
  --druk:"KK Druk","DrukCyr-Heavy",Arial Narrow,sans-serif;
  --hel:"KK Helvetica","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(12px,1.4vw,24px);--margin:clamp(16px,4.4vw,72px);
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:96px;--s7:128px;--s8:200px;
  --fz-h2:clamp(2.125rem,5.4vw,5.5rem);
  --fz-h3:clamp(1.375rem,2.4vw,1.875rem);
  --fz-lede:clamp(1.1875rem,2.1vw,1.625rem);
  --fz-body:clamp(1.0625rem,1.6vw,1.3125rem);
  --fz-micro:clamp(1rem,1.3vw,1.1875rem);
  --fz-nano:clamp(.875rem,1vw,1rem);
  --fz-tech:clamp(.6875rem,.8vw,.8125rem);
  --ls-head:.03em;--ls-micro:.14em;
  --t-react:200ms;
  --e-enter:cubic-bezier(.16,1,.3,1);--e-scene:cubic-bezier(.65,0,.35,1);
  --line:rgba(49,49,49,.16);--soft:#6f6d6a;--tech:#8f8c88;
  color:var(--ink);font-family:var(--hel);font-size:var(--fz-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}

:root{
  /* liquid glass, copied from KK-DS-v2.1/tokens.css */
  --glass-1:rgba(239,237,234,.19);--glass-2:rgba(239,237,234,.55);
  --glass-1-dark:rgba(239,237,234,.09);--glass-2-dark:rgba(239,237,234,.62);
  --glass-blur-1:3px;--glass-blur-2:8px;
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 0 28px rgba(255,255,255,.28);
  --glass-edge-dark:inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 28px rgba(255,255,255,.10);
  --glass-shadow:0 24px 44px -22px rgba(30,30,30,.31);
  --r-panel:26px}

/* ---------- reset (zero specificity so design-system components win) ---------- */
:where(.kk-land *,.kk-land *::before,.kk-land *::after){box-sizing:border-box;margin:0;padding:0}
:where(.kk-land ul,.kk-land ol){list-style:none}
:where(.kk-land a){color:inherit;text-decoration:none}
:where(.kk-land img){display:block;max-width:100%;height:auto}
:where(.kk-land button,.kk-land input,.kk-land textarea){font:inherit;color:inherit}
:where(.kk-land button){background:none;border:0;border-radius:0;cursor:pointer;text-align:inherit}
.kk-land :focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.kk-land [class*="h1"],.kk-land [class*="h2"],.kk-land [class*="h3"]{font-synthesis:none}
.kk-land ::selection{background:var(--accent);color:var(--paper)}
.kk-land em{font-style:normal;color:var(--accent)}

/* ---------- dark scope ---------- */
.v-dark{--line:rgba(239,237,234,.16);--soft:rgba(239,237,234,.82);--tech:rgba(239,237,234,.66);--mute:rgba(239,237,234,.3);color:var(--paper)}
.v-dark .kk-btn{border-color:var(--paper);color:var(--paper)}
.v-dark .kk-btn__fill{background:var(--paper)}
.v-dark .kk-btn:hover,.v-dark .kk-btn:active{color:var(--ink)}

/* ---------- photo background ----------
   Every block carries its own blurred monochrome photo, pinned to the screen (position:fixed inside the block's box),
   plus optional slow accent blobs ("aura"). The box overlaps its neighbours by half the feather and fades in at its top,
   so blocks flow into each other while the browser scrolls everything itself: no per-frame script, no jump when the
   mobile toolbar hides (the photo is sized to the large viewport, lvh). Portrait photos sit on a landscape canvas,
   anchored right, hence the 66% position. Boxes far off screen drop their layers (v2.js, IntersectionObserver). */
.kk-land{--bg-f:40vh}
.v-sbg{position:absolute;left:0;right:0;top:calc(var(--bg-f) / -2);bottom:calc(var(--bg-f) / -2);z-index:-1;pointer-events:none;
  --bg-m:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.104) calc(var(--bg-f) * .2),rgba(0,0,0,.352) calc(var(--bg-f) * .4),rgba(0,0,0,.648) calc(var(--bg-f) * .6),rgba(0,0,0,.896) calc(var(--bg-f) * .8),#000 var(--bg-f));
  -webkit-mask-image:var(--bg-m);mask-image:var(--bg-m)}
/* the first block and the footer (same photo as the lead block above it) need no fade */
#v-hero>.v-sbg,.v-foot>.v-sbg{top:0;-webkit-mask-image:none;mask-image:none}
html.v-sbg-io .v-sbg:not(.is-near)>*{display:none}
.v-sbg>i,.v-sbg>.v-aura{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh}
.v-sbg>i{left:-4%;width:108%;background:66% 40%/cover no-repeat}
.v-sbg>i[data-k="desk-light"]{background-image:url(assets/bg/desk-light.jpg?v=2)}
.v-sbg>i[data-k="chair-dark"]{background-image:url(assets/bg/chair-dark.jpg)}
.v-sbg>i[data-k="face-light"]{background-image:url(assets/bg/face-light.jpg?v=2)}
.v-sbg>i[data-k="face-dark"]{background-image:url(assets/bg/face-dark.jpg)}
/* glossy highlight over the photo */
.v-sbg::after{content:"";position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;background:radial-gradient(120% 90% at 28% 12%,rgba(255,255,255,.2),rgba(255,255,255,0) 55%),radial-gradient(90% 70% at 85% 100%,rgba(255,255,255,.12),rgba(255,255,255,0) 60%)}
html.v-sbg-io .v-sbg:not(.is-near)::after{display:none}
/* hero: at the end of the zoom the ink letter dissolves into the dark photo of the next block (v2.js) */
.v-sbg__mix{opacity:0}
.v-aura{overflow:hidden}
.v-aura b{position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:multiply}
.v-aura b:nth-child(1){width:46vmax;height:46vmax;left:-12vmax;top:-10vmax;background:var(--accent);opacity:.34;animation:vDr1 34s ease-in-out infinite alternate}
.v-aura b:nth-child(2){width:34vmax;height:34vmax;left:18vw;top:30vh;background:#B94F4F;opacity:.26;animation:vDr2 41s ease-in-out infinite alternate}
.v-aura b:nth-child(3){width:30vmax;height:30vmax;right:-10vmax;bottom:-8vmax;background:#F1D9D4;opacity:.7;animation:vDr3 29s ease-in-out infinite alternate}
.v-aura--dk b{mix-blend-mode:screen}
.v-aura--dk b:nth-child(1){opacity:.28}.v-aura--dk b:nth-child(2){opacity:.22}.v-aura--dk b:nth-child(3){opacity:.12}
@keyframes vDr1{to{transform:translate(14vw,12vh) scale(1.15)}}
@keyframes vDr2{to{transform:translate(-10vw,-16vh) scale(.88)}}
@keyframes vDr3{to{transform:translate(-18vw,-10vh) scale(1.2)}}

/* secondary and muted text on the light photos: a step darker than on flat paper, so contrast stays where it was */
.kk-land>main>section:not(.v-dark){--soft:#44423f;--tech:#4a4844;--mute:#a29f9b}
/* case cards sit straight on the photo, no paper card behind them */
.kk-land .kk-case{background:transparent}
.kk-land .kk-case__niche{color:var(--tech)}

/* ---------- layout ---------- */
.v-w{position:relative;width:100%;max-width:1680px;margin-inline:auto;padding-inline:var(--margin)}
.v-sect{position:relative;padding-block:clamp(88px,13vh,168px)}
.v-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s5);align-items:start}
.v-side{grid-column:1/4;display:flex;flex-direction:column;gap:12px;padding-top:.5em}
.v-side__no{font:400 1rem/1 var(--druk);letter-spacing:.06em;color:var(--accent)}
.v-side__t{font:400 clamp(1.25rem,1.6vw,1.625rem)/.98 var(--druk);text-transform:uppercase;letter-spacing:.04em}
.v-side__d{max-width:26ch;font-size:var(--fz-nano);line-height:1.5;color:var(--soft)}
.v-main{grid-column:4/-1}

/* manual line breaks: every line starts on its own column (design system §03) */
.v-lines,.v-portal,.v-pain__big{container-type:inline-size;--cols:9}
.ln{display:block;padding-left:calc(var(--in,0) * (100cqw + var(--gutter)) / var(--cols));padding-block:.06em;margin-block:-.06em}
.ln[data-in="1"]{--in:1}.ln[data-in="2"]{--in:2}.ln[data-in="3"]{--in:3}.ln[data-in="4"]{--in:4}
.ln>span{display:inline-block}

/* ---------- type ---------- */
.v-h2{font:400 var(--fz-h2)/.88 var(--druk);text-transform:uppercase;letter-spacing:var(--ls-head)}
.v-lede{font-size:var(--fz-lede);line-height:1.4;max-width:40ch}
.v-body{font-size:var(--fz-body);line-height:1.55;max-width:56ch}
.v-mute{color:var(--mute)}
.v-tech{font-size:var(--fz-tech);line-height:1.5;text-transform:uppercase;letter-spacing:var(--ls-micro);color:var(--tech)}
.v-bigidx{font:300 clamp(4.5rem,10vw,10rem)/.8 var(--hel);letter-spacing:-.04em;color:var(--mute);opacity:.55}
.v-hidx{display:block;font:300 clamp(3rem,5.4vw,5.5rem)/.8 var(--hel);letter-spacing:-.04em;color:var(--mute)}

/* ---------- editorial markers (design system §09) ---------- */
.v-dot{position:relative;display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.v-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:vPing 2.4s var(--e-enter) infinite}
@keyframes vPing{0%{transform:scale(.4);opacity:.9}80%,100%{transform:scale(1.6);opacity:0}}
.v-callout{display:flex;align-items:center;gap:10px;font-size:var(--fz-tech);text-transform:uppercase;letter-spacing:var(--ls-micro);color:var(--tech)}
.v-callout--live{align-items:flex-start;text-transform:none;letter-spacing:0;font-size:var(--fz-body);color:var(--soft)}
.v-callout--live .v-dot{margin-top:.55em}
.v-round{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid currentColor;border-radius:50%;font-size:1rem;line-height:1;
  transition:background var(--t-react),color var(--t-react),border-color var(--t-react),transform 500ms var(--e-enter)}
.v-round--sm{width:32px;height:32px;font-size:.875rem}
.v-round--acc{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.v-round--light{border-color:rgba(239,237,234,.5)}
.v-round:not(.v-round--acc){background:var(--glass-1);-webkit-backdrop-filter:blur(var(--glass-blur-1));backdrop-filter:blur(var(--glass-blur-1));box-shadow:var(--glass-edge)}
.v-dark .v-round:not(.v-round--acc),.v-foot .v-round:not(.v-round--acc){background:var(--glass-1-dark);box-shadow:var(--glass-edge-dark)}
.v-form .v-round:not(.v-round--acc),.v-gal .v-round{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
a.v-round:hover,.v-pillbtn:hover .v-round{transform:rotate(45deg)}
.v-pillbtn{display:inline-flex;align-items:center;gap:10px;font-size:var(--fz-tech);text-transform:uppercase;letter-spacing:.12em;cursor:pointer}
.v-pillbtn>span:last-child{border:1px solid currentColor;border-radius:999px;padding:8px 14px;transition:background var(--t-react),color var(--t-react)}
.v-pillbtn:hover>span:last-child{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.v-dark .v-pillbtn:hover>span:last-child,.v-pillbtn--light:hover>span:last-child{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.v-reg{position:absolute;width:18px;height:18px;pointer-events:none;opacity:.5}
.v-reg::before,.v-reg::after{content:"";position:absolute;background:var(--ink)}
.v-reg::before{left:50%;top:0;bottom:0;width:1px}
.v-reg::after{top:50%;left:0;right:0;height:1px}
.v-reg--tl{top:32px;left:calc(var(--margin) - 9px)}
.v-reg--tr{top:32px;right:calc(var(--margin) - 9px)}
.v-reg--br{bottom:32px;right:calc(var(--margin) - 9px)}
.v-vlabel{position:absolute;left:calc(var(--margin) / 2 - .7em);top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);
  font-size:var(--fz-tech);text-transform:uppercase;letter-spacing:.2em;color:var(--tech);white-space:nowrap;pointer-events:none}
.v-vlabel--ink{color:var(--tech)}
.v-panel{position:relative;margin-top:clamp(64px,9vh,120px);padding:clamp(24px,3vw,48px);background:rgba(230,228,224,.6);border-radius:var(--r-panel)}
.v-panel.v-dark{background:rgba(49,49,49,.9)}
.v-panel.v-dark .kk-badge{border-color:rgba(239,237,234,.4)}
.v-panel__head{display:flex;align-items:center;gap:10px}
.v-cta-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding-bottom:12px;border-bottom:1px solid currentColor}
.v-cta-row__big{font:400 clamp(1.75rem,2.6vw,2.5rem)/1 var(--druk);text-transform:uppercase;letter-spacing:.03em;transition:color var(--t-react)}
.v-cta-row__big:hover{color:var(--accent)}
.v-cta-row__sub{flex:1;font-size:var(--fz-tech);text-transform:uppercase;letter-spacing:var(--ls-micro);color:var(--tech)}
.v-cta-row .v-round{align-self:center}
.v-cta-row__sub{order:3;flex-basis:100%}
.v-cta-row .v-round,.v-cta-row__go{order:2;margin-left:auto}
.v-cta-row__go{display:inline-flex;gap:8px;font-size:var(--fz-tech);text-transform:uppercase;letter-spacing:var(--ls-micro)}
.v-cta-row__go span{color:var(--accent);transition:transform var(--t-react) var(--e-enter)}
.v-cta-row__go:hover span{transform:translateX(6px)}

/* ---------- nav ---------- */
.v-nav{position:fixed;z-index:7000;top:0;left:0;right:0;pointer-events:none;transition:color 300ms;--nav-x:max(8px,calc(var(--margin) - 18px))}
.v-nav__in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:14px;padding-inline:calc(var(--nav-x) + 18px);pointer-events:auto}
/* logo: the red KK block is an image; the dots are drawn so the dark one follows the text colour on dark sections.
   Sizes are fractions of the block height, measured from the source logo */
.v-logo{--lh:34px;display:inline-flex;align-items:flex-end;height:var(--lh)}
.v-logo img{height:100%;width:auto}
.v-logo__dot{flex:none;width:calc(var(--lh)*.153);height:calc(var(--lh)*.153);margin:0 0 calc(var(--lh)*.023) calc(var(--lh)*.061);border-radius:50%;background:currentColor}
.v-logo__dot--acc{width:calc(var(--lh)*.09);height:calc(var(--lh)*.09);margin:0 0 calc(var(--lh)*.02) calc(var(--lh)*.084);background:#d64933}
.v-nav__links{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);font-size:var(--fz-tech);text-transform:uppercase;letter-spacing:.14em}
.v-nav__links a{position:relative;padding-block:6px}
.v-nav__links a:not(.v-nav__cta)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform 400ms var(--e-enter)}
.v-nav__links a:not(.v-nav__cta):hover::after{transform:scaleX(1);transform-origin:left}
.v-nav__cta{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--paper);transition:background var(--t-react)}
.v-nav__cta .v-dot{width:6px;height:6px}
.v-nav__cta:hover{background:var(--accent)}
.v-nav__cta:hover .v-dot{background:var(--paper)}
/* floating glass pill. Light: text glass (level 2), since headlines scroll under the links; dark: clear glass tint with a heavy blur, so paper headlines under the links melt */
.v-nav__bg{position:absolute;top:6px;bottom:6px;left:calc(max(0px,(100% - 1680px) / 2) + var(--nav-x));right:calc(max(0px,(100% - 1680px) / 2) + var(--nav-x));border-radius:999px;
  background:var(--glass-2);-webkit-backdrop-filter:blur(var(--glass-blur-2));backdrop-filter:blur(var(--glass-blur-2));box-shadow:var(--glass-edge),var(--glass-shadow);
  opacity:0;transition:opacity 400ms var(--e-enter),background 300ms,box-shadow 300ms}
.v-nav.is-scrolled .v-nav__bg{opacity:1}
.v-nav.is-dark{color:var(--paper)}
.v-nav.is-dark .v-nav__bg{background:var(--glass-1-dark);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--glass-edge-dark),var(--glass-shadow)}
.v-nav.is-dark .v-nav__cta{background:var(--paper);color:var(--ink)}
.v-nav.is-dark .v-nav__cta:hover{background:var(--accent);color:var(--paper)}
.v-progress{position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}

/* ---------- 00 hero portal ---------- */
.v-hero{position:relative}
.v-hero__pin{position:relative;height:100vh;height:100dvh;min-height:640px;overflow:hidden}
.v-hero__in{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;row-gap:var(--s3);padding-top:clamp(76px,10vh,104px);padding-bottom:clamp(16px,3vh,32px)}
.v-hero__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.v-avatar{grid-column:1/3;position:relative;width:clamp(104px,9.4vw,156px);aspect-ratio:1}
.v-avatar img{position:absolute;inset:17%;width:66%;height:66%;border-radius:50%;object-fit:cover;object-position:50% 22%}
.v-avatar__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.v-avatar__ring text{font:400 15.5px/1 var(--druk);letter-spacing:.34em;fill:var(--ink);text-transform:uppercase}
.v-avatar__dot{position:absolute;right:13%;bottom:13%;width:12%;height:12%;border-radius:50%;background:var(--accent);border:2px solid var(--paper)}
.v-hero__meta1{grid-column:4/7;padding-top:6px}
.v-hero__meta2{grid-column:10/-1;text-align:right;padding-top:6px}
.v-portal{position:relative;align-self:center;--cols:12;font:400 clamp(2.6rem,8.6vw,10rem)/.86 var(--druk);text-transform:uppercase;letter-spacing:.012em;
  transform-origin:50% 50%;white-space:nowrap}
.v-portal .ln{overflow:hidden}
.v-portal.is-open .ln{overflow:visible}
.v-hero__bot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s3);align-items:end}
.v-hero__lede{grid-column:1/5;font-size:var(--fz-micro);line-height:1.45;max-width:40ch}
.v-hero__cta{grid-column:6/9}
.v-hero__facts{grid-column:10/-1;display:flex;flex-direction:column}
.v-hero__facts div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-block:7px;border-top:1px solid var(--line)}
.v-hero__facts div:last-child{border-bottom:1px solid var(--line)}
.v-hero__facts dt{font-size:var(--fz-tech);text-transform:uppercase;letter-spacing:var(--ls-micro);color:var(--tech)}
.v-hero__facts dd{font:400 clamp(.9375rem,1.2vw,1.125rem)/1.1 var(--druk);text-transform:uppercase;letter-spacing:.04em;text-align:right}
.v-hero__scroll{grid-column:1/-1;grid-row:2}
.v-hero__scroll i{display:inline-block;font-style:normal;color:var(--accent);animation:vCue 1.8s var(--e-scene) infinite}
@keyframes vCue{0%,100%{transform:translateY(-2px);opacity:.4}50%{transform:translateY(4px);opacity:1}}

/* ---------- 01 pain (dark) ---------- */
.v-pain{padding-top:clamp(120px,18vh,220px)}
.v-pain__big{--cols:12;font:400 clamp(2.4rem,6.6vw,7.25rem)/.88 var(--druk);text-transform:uppercase;letter-spacing:.02em}
.v-pain__big .w{color:rgba(239,237,234,var(--o,.16))}
.v-pain__big .role{color:var(--accent);background:linear-gradient(var(--paper),var(--paper)) no-repeat 0 54%/calc(var(--strike,0)*100%) .07em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.v-pain__cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s5);margin-top:clamp(64px,10vh,128px);align-items:start}
.v-pain__left{grid-column:1/6;display:flex;flex-direction:column;gap:var(--s3)}
.v-pain__day{font-size:var(--fz-lede);line-height:1.45;color:var(--soft)}
.v-pain__loop{display:flex;flex-wrap:wrap;gap:8px}
.v-pain__loop span{border:1px solid rgba(239,237,234,.28);border-radius:999px;padding:9px 14px;font-size:var(--fz-nano);letter-spacing:.04em}
.v-pain__loop .is-loop{border-color:var(--accent);color:var(--accent)}
.v-pain__take{grid-column:8/-1;margin-top:clamp(0px,8vw,120px);display:flex;flex-direction:column;gap:var(--s3);padding-left:var(--s4);border-left:1px solid rgba(239,237,234,.2)}
.v-pain__claim{font:400 clamp(1.5rem,2.6vw,2.5rem)/1 var(--druk);text-transform:uppercase;letter-spacing:.03em}
.v-pain__answer{font-size:var(--fz-lede);line-height:1.4;color:var(--soft)}

/* ---------- 02 recognition ---------- */
.v-rec{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:var(--s2)}
.v-rec__item{display:grid;grid-template-columns:minmax(0,4rem) minmax(0,1fr);column-gap:var(--s3);padding-block:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.v-rec__item:nth-child(odd){grid-column:4/11}
.v-rec__item:nth-child(even){grid-column:6/-1}
.v-rec__no{font:300 clamp(1.75rem,2.4vw,2.5rem)/.9 var(--hel);letter-spacing:-.03em;color:var(--mute);transition:color var(--t-react)}
.v-rec__item:hover .v-rec__no{color:var(--accent)}
.v-rec__item h3{font:400 clamp(1.5rem,2.5vw,2.375rem)/.98 var(--druk);text-transform:uppercase;letter-spacing:.03em}
.v-rec__item p{margin-top:12px;max-width:52ch;font-size:var(--fz-body);line-height:1.55;color:var(--soft)}
.v-rec__item--quote{background:var(--accent-wash);padding-inline:var(--s3);border-top-color:transparent}
.v-rec__item--quote h3{color:var(--accent);margin-top:12px}
.v-rec__item--quote .v-callout{color:var(--accent)}

/* ---------- 03 marshrut (dark) ---------- */
.v-mr{overflow-x:clip}
.v-mr__head{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s4);align-items:end}
.v-mr__badges{grid-column:1/8;display:flex;flex-wrap:wrap;gap:10px}
.v-mr__badges .kk-badge{border-color:rgba(239,237,234,.4);background:var(--glass-1-dark);-webkit-backdrop-filter:blur(var(--glass-blur-1));backdrop-filter:blur(var(--glass-blur-1));box-shadow:var(--glass-edge-dark)}
.v-mr__badges .kk-badge--acc{background:var(--accent);border-color:var(--accent);color:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.v-mr__tech{grid-column:9/-1;text-align:right}
.v-mr__idx{position:absolute;right:0;top:12%;pointer-events:none}
.v-mr__title{grid-column:1/10;--cols:9;font-size:clamp(2.5rem,6.4vw,6.75rem);line-height:.86}
.v-mr__intro{grid-column:1/6;font-size:var(--fz-lede);line-height:1.42;color:var(--soft)}
.v-bubbles{grid-column:7/-1;position:relative;display:flex;align-items:flex-end;justify-content:flex-end;min-height:clamp(220px,22vw,320px)}
.v-bubble{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:50%;text-align:center;flex:none}
.v-bubble b{font:400 clamp(2.5rem,4.6vw,4.75rem)/.85 var(--druk);letter-spacing:.01em}
.v-bubble>span{font-size:var(--fz-tech);text-transform:uppercase;letter-spacing:.12em;line-height:1.3;max-width:14ch}
.v-bubble--light{width:clamp(160px,16vw,240px);aspect-ratio:1;background:var(--glass-1-dark);border:1px solid rgba(239,237,234,.2);-webkit-backdrop-filter:blur(var(--glass-blur-1));backdrop-filter:blur(var(--glass-blur-1));box-shadow:var(--glass-edge-dark);margin-right:-4%;z-index:1}
.v-bubble--dark{width:clamp(200px,20vw,300px);aspect-ratio:1;background:var(--accent);color:var(--paper);z-index:2}
.v-bubbles__note{position:absolute;left:0;bottom:0;max-width:22ch}

.v-mr__scene{position:relative;margin-top:clamp(56px,9vh,112px)}
.v-mr__pin{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;min-height:100dvh;padding-block:clamp(72px,10vh,110px) var(--s4)}
.v-mr__steps{grid-column:1/5;position:relative;align-self:center}
.v-mr__counter{display:flex;align-items:baseline;gap:10px;font:400 1.25rem/1 var(--druk);letter-spacing:.04em;color:rgba(239,237,234,.45);margin-bottom:var(--s3)}
.v-mr__counter b{font:300 3rem/1 var(--hel);letter-spacing:-.04em;color:var(--paper)}
.v-mr__bar{position:relative;height:1px;background:rgba(239,237,234,.2);margin-bottom:var(--s3)}
.v-mr__bar i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0));transition:transform 600ms var(--e-enter)}
.v-mr__step{padding-block:16px;border-top:1px solid rgba(239,237,234,.12);cursor:pointer;transition:opacity 500ms var(--e-enter)}
.v-mr__step:last-child{border-bottom:1px solid rgba(239,237,234,.12)}
.v-mr__step h3{display:flex;align-items:baseline;gap:14px;font:400 clamp(1.25rem,1.9vw,1.75rem)/1 var(--druk);text-transform:uppercase;letter-spacing:.04em;transition:color var(--t-react),transform 500ms var(--e-enter)}
.v-mr__step.is-on h3{transform:translateX(10px)}
.v-mr__step h3 small{font:400 .75em/1 var(--druk);color:var(--accent)}
.v-mr__step p{display:grid;grid-template-rows:0fr;overflow:hidden;color:var(--soft);font-size:var(--fz-micro);line-height:1.5;transition:grid-template-rows 600ms var(--e-enter),margin 600ms var(--e-enter)}
.v-mr__step p>span{min-height:0;max-width:40ch}
.v-mr__step figure{display:none}
.v-mr.is-js .v-mr__step{opacity:.36}
.v-mr.is-js .v-mr__step:hover{opacity:.7}
.v-mr.is-js .v-mr__step.is-on{opacity:1}
.v-mr__step.is-on p,.v-mr:not(.is-js) .v-mr__step p{grid-template-rows:1fr;margin-top:12px}
.v-mr__stage{grid-column:5/-1;position:relative;aspect-ratio:16/10.6;perspective:1800px}
.v-mr__stagecap{position:absolute;right:0;top:-32px}
.v-laptop{position:absolute;left:4%;right:0;top:0;transform-style:preserve-3d}
.v-laptop__lid{position:relative;padding:1.4% 1.4% 1.9%;border-radius:14px 14px 4px 4px;background:linear-gradient(#1c1c1c,#141414);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 60px 120px -40px rgba(0,0,0,.8)}
.v-laptop__lid::before{content:"";position:absolute;top:.6%;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#2c2c2c}
.v-laptop__base{height:14px;margin:0 -6%;border-radius:0 0 18px 18px;background:linear-gradient(#3a3a3a,#1d1d1d);box-shadow:0 30px 50px -20px rgba(0,0,0,.7)}
.v-laptop__base::after{content:"";display:block;width:16%;height:5px;margin:0 auto;border-radius:0 0 8px 8px;background:#121212}
.v-screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b0b0b;border-radius:3px}
.v-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.06);clip-path:inset(0 0 100% 0);
  transition:opacity 500ms var(--e-enter),transform 1200ms var(--e-enter),clip-path 900ms var(--e-scene)}
.v-screen img.is-on{opacity:1;transform:none;clip-path:inset(0 0 0 0);z-index:1}
.v-phone{position:absolute;right:-2%;bottom:-6%;width:22%;aspect-ratio:1170/2532;padding:2.2%;border-radius:22px;background:#111;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 80px -24px rgba(0,0,0,.85);transition:transform 900ms var(--e-enter),opacity 600ms var(--e-enter);z-index:3}
.v-phone.is-off{transform:translate3d(30%,12%,0) rotate(6deg);opacity:0}
.v-phone__screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:15px;background:#0b0b0b}
.v-phone__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity 600ms var(--e-enter)}
.v-phone__screen img.is-on{opacity:1}
.v-mr__glow{position:absolute;inset:-10% -10% -20% 10%;background:radial-gradient(closest-side,rgba(160,190,120,.14),transparent 70%);pointer-events:none;z-index:-1}
.v-mr__foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s3);align-items:center;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(239,237,234,.16)}
.v-mr__footq{grid-column:3/8;font-size:var(--fz-lede);line-height:1.4}
.v-mr__acts{grid-column:8/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);justify-content:flex-end}
.v-mr__demo{grid-column:3/-1;margin-top:var(--s3)}

/* ---------- 04 what disappears ---------- */
.v-gone{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.v-gone__col--off{grid-column:1/7}
.v-gone__col--on{grid-column:8/-1;margin-top:clamp(0px,12vw,200px)}
.v-gone__label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:var(--s2);border-bottom:1px solid currentColor;font-size:var(--fz-tech);text-transform:uppercase;letter-spacing:var(--ls-micro)}
.v-gone__label b{font:300 2rem/1 var(--hel);letter-spacing:-.03em;color:var(--accent)}
.v-gone__row{padding-block:var(--s3);border-bottom:1px solid var(--line)}
.v-gone__row h3{position:relative;display:inline-block;font:400 clamp(1.5rem,2.6vw,2.25rem)/1 var(--druk);text-transform:uppercase;letter-spacing:.03em}
.v-gone__row p{margin-top:10px;font-size:var(--fz-micro);line-height:1.55;color:var(--soft);max-width:46ch}
.v-gone__col--off h3::after{content:"";position:absolute;left:-3%;right:-3%;top:50%;height:3px;background:var(--accent);transform:scaleX(var(--strike,1));transform-origin:left}
.v-gone__col--on .v-gone__row h3::before{content:"+";display:inline-block;margin-right:.35em;color:var(--accent);transition:transform 500ms var(--e-enter)}
.v-gone__col--on .v-gone__row:hover h3::before{transform:rotate(90deg)}
.v-niches{margin-top:clamp(88px,12vh,160px);padding-block:var(--s4);border-block:1px solid currentColor;overflow:hidden}
.v-niches__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-bottom:var(--s4)}
.v-niches__in .v-tech{grid-column:1/4}
.v-niches__t{grid-column:4/10;font-size:var(--fz-lede);line-height:1.4}
.v-marquee{display:flex;width:max-content;animation:vMarq 38s linear infinite}
.v-marquee span{font:400 clamp(2.25rem,5.4vw,5rem)/1 var(--druk);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;padding-right:.5em}
.v-marquee span::after{content:"·";padding-left:.5em;color:var(--accent);-webkit-text-stroke:0}
.v-marquee span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--ink)}
.v-niches:hover .v-marquee{animation-play-state:paused}
@keyframes vMarq{to{transform:translateX(-50%)}}
/* motion on: the row is driven from v2.js as a horizontal wheel, solid names, the one nearest the centre in accent */
.v-marquee.is-js{animation:none;align-items:flex-start}
.v-marquee.is-js span{padding-inline:.25em;color:var(--mute);-webkit-text-stroke:0;transform-origin:50% 0;transition:color 350ms}
.v-marquee.is-js span::after{content:none}
.v-marquee.is-js span.is-near{color:var(--ink)}
.v-marquee.is-js span.is-on{color:var(--accent)}
.v-dark .v-marquee.is-js span.is-near{color:var(--paper)}
.v-dark .v-marquee span:nth-child(even){-webkit-text-stroke-color:var(--paper)}

/* ---------- 05 formats wheel ---------- */
.v-fmt__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.v-fmt__side{grid-column:1/6}
.v-fmt__sticky{position:sticky;top:clamp(96px,14vh,140px);display:flex;flex-direction:column;gap:12px}
.v-fmt__sticky .v-side__t{font-size:clamp(1.75rem,2.8vw,2.75rem);line-height:.92}
.v-fmt__navwrap{position:relative;margin-top:var(--s4);padding-left:28px}
.v-fmt__rail{position:absolute;left:6px;top:6px;bottom:6px;width:1px}
.v-fmt__track{position:absolute;inset:0;background:var(--line)}
.v-fmt__fill{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(var(--p,0))}
.v-fmt__nav li{position:relative;cursor:pointer;display:flex;align-items:baseline;gap:10px;padding-block:9px;font:400 clamp(.9375rem,1.1vw,1.125rem)/1.15 var(--druk);text-transform:uppercase;letter-spacing:.04em;color:var(--mute);transition:color 300ms}
.v-fmt__nav li b{font-weight:400;min-width:1.4em}
.v-fmt__nav li small{font:400 var(--fz-tech)/1 var(--hel);letter-spacing:.1em;color:var(--tech)}
.v-fmt__nav li::before{content:"";position:absolute;left:-26px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;border:1px solid var(--mute);background:var(--paper);transition:background 300ms,border-color 300ms,transform 400ms var(--e-enter)}
.v-fmt__nav li.is-on{color:var(--accent)}
.v-fmt__nav li.is-on::before{background:var(--accent);border-color:var(--accent);transform:scale(1.3)}
.v-fmt__nav li.is-past{color:var(--ink)}
.v-fmt__nav li.is-past::before{border-color:var(--ink);background:var(--ink)}
.v-fmt__count{margin-top:var(--s3)}
.v-fmt__count b{font-weight:400;color:var(--ink)}
.v-fmt__list{grid-column:7/-1;counter-reset:fmt;padding-block:28vh}
.v-fmt__list li{counter-increment:fmt;position:relative;display:flex;align-items:baseline;gap:18px;padding-block:.14em;
  font:400 clamp(1.875rem,3.6vw,3.75rem)/1 var(--druk);text-transform:uppercase;letter-spacing:.025em;color:var(--mute);
  transform-origin:left center;transition:color 350ms}
.v-fmt__list li::before{content:counter(fmt,decimal-leading-zero);flex:none;width:2.2rem;font:400 var(--fz-tech)/1 var(--hel);letter-spacing:.1em;color:var(--tech)}
.v-fmt__list li::after{content:"";position:absolute;left:-18px;top:18%;bottom:18%;width:3px;background:var(--accent);transform:scaleY(0);transition:transform 400ms var(--e-enter)}
.v-fmt__list li.is-near{color:var(--ink)}
.v-fmt__list li.is-on{color:var(--accent)}
.v-fmt__list li.is-on::after{transform:scaleY(1)}
.v-fmt__list li.is-on::before{color:var(--accent)}
.v-fmt:not(.is-js) .v-fmt__list li{color:var(--ink)}

/* ---------- 06 why now ---------- */
.v-now{grid-column:4/-1;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(48px,6vw,88px);margin-top:var(--s3)}
.v-now__item{grid-column:1/5;border-top:1px solid var(--line);padding-top:var(--s3)}
.v-now__item:nth-child(2){grid-column:6/-1;margin-top:clamp(0px,8vw,120px)}
.v-now__item:nth-child(3){grid-column:2/6}
.v-now__item:nth-child(4){grid-column:6/-1;margin-top:clamp(0px,8vw,120px)}
.v-now__item .v-hidx{margin-bottom:var(--s3);transition:color 400ms}
.v-now__item:hover .v-hidx{color:var(--accent)}
.v-now__item h3{font:400 clamp(1.5rem,2.3vw,2.125rem)/1 var(--druk);text-transform:uppercase;letter-spacing:.03em}
.v-now__item p{margin-top:14px;font-size:var(--fz-body);line-height:1.55;color:var(--soft);max-width:44ch}

/* ---------- 07 cases ---------- */
.v-cases .kk-pills{margin-top:var(--s4)}
.v-cases .kk-rail{margin-top:var(--s5)}

/* ---------- 08 why me ---------- */
.v-me__ai{grid-column:4/10}
.v-layers{grid-column:10/-1;align-self:end}
.v-layers li{display:flex;align-items:baseline;gap:14px;padding-block:13px;border-top:1px solid var(--line);font:400 clamp(1.0625rem,1.5vw,1.375rem)/1 var(--druk);text-transform:uppercase;letter-spacing:.04em;transition:color var(--t-react),padding 400ms var(--e-enter)}
.v-layers li:last-child{border-bottom:1px solid var(--line)}
.v-layers li span{font:400 var(--fz-tech)/1 var(--hel);letter-spacing:.12em;color:var(--accent)}
.v-layers li:hover{padding-left:10px;color:var(--accent)}
.v-chain{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s4);margin-top:clamp(80px,11vh,140px);padding-top:var(--s4);border-top:1px solid currentColor}
.v-chain__col{grid-column:1/7;display:flex;flex-direction:column;gap:var(--s3)}
.v-chain__col--me{grid-column:8/-1}
.v-chain__row{display:flex;flex-wrap:wrap;align-items:center;row-gap:12px}
.v-chain__row .kk-badge{padding:12px 18px;background:var(--paper)}
.v-chain__row .v-link{width:clamp(14px,2.4vw,40px);height:1px;background:var(--ink);transform-origin:left}
.v-chain--broken .v-link{background:repeating-linear-gradient(90deg,var(--ink) 0 4px,transparent 4px 8px)}
.v-chain--broken .kk-badge{color:#7a7a7a;border-color:#b8b6b2}
.v-chain__one{display:flex;flex-wrap:wrap;gap:10px}
.v-chain__one .kk-badge{padding:12px 20px;gap:14px;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.v-chain__one .kk-badge i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.v-chain__col>p:last-child{font-size:var(--fz-micro);line-height:1.55;max-width:48ch;color:var(--soft)}
.v-roles{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:var(--s3)}
.v-role{grid-column:span 4;padding-top:var(--s3);border-top:1px solid var(--line)}
.v-role:nth-child(2){margin-top:var(--s4)}
.v-role:nth-child(3){margin-top:var(--s5)}
.v-role b{display:block;font:400 clamp(1.25rem,1.8vw,1.625rem)/1 var(--druk);text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:10px}
.v-role p{font-size:var(--fz-micro);line-height:1.55;max-width:34ch}
.v-counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--s4)}
.v-counter{padding:0 var(--s3)}
.v-counter:first-child{padding-left:0}
.v-counter+.v-counter{border-left:1px solid var(--line)}
.v-counter b{display:block;font:400 clamp(3.25rem,7vw,7rem)/.85 var(--druk);letter-spacing:.01em}
.v-counter>span{display:block;margin-top:var(--s2);font-size:var(--fz-tech);text-transform:uppercase;letter-spacing:.12em;line-height:1.45;color:var(--tech);max-width:24ch}
.v-panel__cv{margin-top:var(--s4)}

/* ---------- 09 three touches ---------- */
.v-tl{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:var(--s6)}
.v-tl__line{position:absolute;left:0;right:0;top:27px;height:1px;background:var(--line)}
.v-tl__line i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,1))}
.v-tl__step{position:relative;grid-column:span 4;padding-right:var(--s3)}
.v-tl__dot{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid var(--ink);font:400 1.25rem/1 var(--druk);letter-spacing:.04em;transition:background 400ms,color 400ms,border-color 400ms}
.v-tl__step.is-on .v-tl__dot{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.v-tl__step h3{margin-top:var(--s3);font:400 clamp(1.25rem,1.8vw,1.625rem)/1 var(--druk);text-transform:uppercase;letter-spacing:.05em}
.v-tl__step p{margin-top:12px;font-size:var(--fz-micro);line-height:1.55;max-width:36ch}
.v-touch__foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s3);align-items:end;margin-top:var(--s6)}
.v-touch__foot .v-callout{grid-column:1/4;align-self:start}
.v-touch__text{grid-column:4/9;font-size:var(--fz-body);line-height:1.5}
.v-touch__foot .v-cta-row{grid-column:10/-1}

/* ---------- 10 price ---------- */
.v-price{grid-column:4/8;display:flex;flex-direction:column;gap:12px;position:sticky;top:120px}
.v-price__num{font:400 clamp(2.25rem,3.8vw,3.75rem)/.9 var(--druk);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;padding-bottom:var(--s2);border-bottom:1px solid currentColor}
.v-price__txt{font-size:var(--fz-micro);line-height:1.55;color:var(--soft);max-width:38ch}
.v-terms{grid-column:8/-1}
.v-term{display:grid;grid-template-columns:minmax(0,3rem) minmax(0,1fr);column-gap:var(--s3);padding-block:var(--s3);border-top:1px solid var(--line)}
.v-term:last-child{border-bottom:1px solid var(--line)}
.v-term>span{font:300 1.5rem/1 var(--hel);letter-spacing:-.03em;color:var(--accent)}
.v-term h3{font:400 clamp(1.25rem,1.8vw,1.625rem)/1 var(--druk);text-transform:uppercase;letter-spacing:.04em}
.v-term p{margin-top:10px;font-size:var(--fz-micro);line-height:1.55;color:var(--soft);max-width:50ch}
.v-term--hl{background:var(--ink);color:var(--paper);padding-inline:var(--s3);border-top-color:transparent;--soft:rgba(239,237,234,.75)}

/* ---------- 11 guarantees ---------- */
.v-gua__main{grid-column:4/9;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5);min-height:480px;padding:clamp(24px,3vw,44px);background:rgba(49,49,49,.9);border-radius:var(--r-panel);color:var(--paper);overflow:hidden}
.v-gua__main .kk-badge{border-color:rgba(239,237,234,.4)}
.v-gua__idx{position:absolute;right:clamp(20px,2.4vw,36px);top:clamp(20px,2.4vw,36px);color:rgba(239,237,234,.25);opacity:1;font-size:clamp(3.5rem,6vw,6rem)}
.v-gua__num{display:block;font:400 clamp(5rem,10vw,9.5rem)/.78 var(--druk);color:var(--accent)}
.v-gua__main h3{margin-top:10px;font:400 clamp(1.75rem,3vw,2.75rem)/.95 var(--druk);text-transform:uppercase;letter-spacing:.03em}
.v-gua__main p{margin-top:var(--s3);font-size:var(--fz-body);line-height:1.5;color:rgba(239,237,234,.8);max-width:40ch}
.v-gua__list{grid-column:9/-1;margin-top:var(--s6)}
.v-gua__item{padding-block:var(--s3);border-top:1px solid var(--line)}
.v-gua__item span{font:300 1.5rem/1 var(--hel);letter-spacing:-.03em;color:var(--accent)}
.v-gua__item h3{margin-top:12px;font:400 clamp(1.125rem,1.6vw,1.5rem)/1 var(--druk);text-transform:uppercase;letter-spacing:.04em}
.v-gua__item p{margin-top:10px;font-size:var(--fz-micro);line-height:1.55;color:var(--soft)}

/* ---------- 12 not for ---------- */
.v-not-sect{padding-top:0}
.v-not ul{margin-top:var(--s5);margin-left:calc((100% + var(--gutter)) / 9 * 3)}
.v-not li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s2);padding-block:18px;border-top:1px solid var(--line);font-size:var(--fz-body);line-height:1.5}
.v-not li:last-child{border-bottom:1px solid var(--line)}
.v-not li::before{content:"";width:16px;height:16px;margin-top:.35em;background:linear-gradient(45deg,transparent 45%,var(--accent) 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,var(--accent) 45% 55%,transparent 55%);transition:transform 400ms var(--e-enter)}
.v-not li:hover::before{transform:rotate(90deg)}

/* ---------- 13 lead (dark) ---------- */
.v-lead{position:relative;padding-block:clamp(104px,15vh,190px)}
.v-lead__h{--cols:12;font-size:clamp(2.5rem,6.4vw,6.75rem);line-height:.86}
.v-lead__facts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:var(--s5)}
.v-lead__facts div{grid-column:span 3;padding-top:var(--s3);border-top:1px solid rgba(239,237,234,.3)}
.v-lead__facts div:first-child{grid-column:4/7}
.v-lead__facts b{display:block;font:400 clamp(2.25rem,4.2vw,4.25rem)/.85 var(--druk);letter-spacing:.02em;text-transform:uppercase}
.v-lead__facts div>span{display:block;margin-top:12px;font-size:var(--fz-tech);text-transform:uppercase;letter-spacing:.12em;color:var(--tech)}
.v-lead__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s5);margin-top:var(--s6);align-items:start}
.v-lead__copy{grid-column:1/6;display:flex;flex-direction:column;gap:var(--s3);color:var(--soft)}
.v-lead__copy .v-lede{color:var(--paper)}
.v-lead__copy strong{color:var(--paper);font-weight:500;background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/100% 1px;padding-bottom:1px}
.v-form{grid-column:7/-1;position:relative;border-radius:var(--r-panel);display:flex;flex-direction:column;gap:var(--s3);padding:clamp(24px,3vw,48px);background:var(--paper);color:var(--ink);--line:rgba(49,49,49,.16);--soft:#6f6d6a;--tech:#8f8c88}
.v-field{display:flex;flex-direction:column;gap:8px}
.v-field label{font-size:var(--fz-tech);text-transform:uppercase;letter-spacing:.14em}
.v-field label em{color:var(--tech);text-transform:none;letter-spacing:0}
.v-field input,.v-field textarea{width:100%;min-height:56px;padding:14px 0;border:0;border-bottom:1px solid var(--ink);background:transparent;border-radius:0;font-size:var(--fz-body);line-height:1.4;transition:border-color var(--t-react)}
.v-field textarea{min-height:96px;resize:vertical}
.v-field input::placeholder,.v-field textarea::placeholder{color:#9b9995}
.v-field input:focus,.v-field textarea:focus{outline:none;border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.v-submit{width:100%;justify-content:space-between;min-height:60px;background:var(--ink);color:var(--paper)}
.v-submit .kk-btn__fill{background:var(--accent)}
.v-submit:hover{color:var(--paper)}
.v-tg__t{font-size:var(--fz-body);line-height:1.5;max-width:40ch}
.v-tg__chips{display:flex;flex-wrap:wrap;gap:10px}
.v-tg__chips .kk-pill{white-space:normal;text-align:left;line-height:1.2}
.v-tg__note{font-size:.9375rem;line-height:1.45;color:var(--soft)}

/* ---------- motion: kinetic type, stacked scenes, cursor ---------- */
.v-wd{display:inline-block;white-space:nowrap}
.v-ch{display:inline-block}
/* case images drift with GSAP on scroll; a CSS transition on the same transform makes them lag */
html.v-motion .kk-case__media img{transition:none}
.v-kin .v-wd{overflow:hidden;padding-block:.08em;margin-block:-.08em;vertical-align:top}
.v-cur{position:fixed;inset:0 auto auto 0;z-index:9900;pointer-events:none}
.v-cur__ring{position:absolute;left:0;top:0;width:0;height:0}
.v-cur__in{position:absolute;left:-48px;top:-48px;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:#db6565;transform:scale(0);transition:transform 350ms cubic-bezier(.22,1,.36,1)}
.v-cur.is-on .v-cur__in{transform:scale(1)}
.v-cur__t{font:500 .6875rem/1 "KK Helvetica","Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#EFEDEA;white-space:nowrap}
html.v-cur-on .kk-case,html.v-cur-on .kk-case *{cursor:none}

/* ---------- cookie banner ---------- */
.v-ck{position:fixed;z-index:9400;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));margin:0 auto;max-width:880px;display:flex;align-items:center;gap:20px 28px;padding:18px 20px;border-radius:var(--r-panel);background:var(--glass-2);-webkit-backdrop-filter:blur(var(--glass-blur-2));backdrop-filter:blur(var(--glass-blur-2));color:#313131;font:400 .875rem/1.45 var(--hel);box-shadow:var(--glass-edge),var(--glass-shadow);transform:translateY(0);opacity:1;transition:transform 500ms var(--e-enter),opacity 300ms}
.v-ck[hidden]{display:none}
.v-ck.is-out{transform:translateY(140%);opacity:0}
.v-ck__t{flex:1;min-width:0;color:#313131}
.v-ck__t b{font-weight:500}
.v-ck__t a{border-bottom:1px solid var(--accent)}
.v-ck__btns{display:flex;flex-wrap:wrap;gap:8px;flex:none}
.v-ck__b{min-height:44px;padding:12px 16px;border:1px solid rgba(49,49,49,.4);border-radius:999px;color:#313131;font-size:var(--fz-tech);text-transform:uppercase;letter-spacing:.12em;line-height:1;white-space:nowrap;transition:background var(--t-react),border-color var(--t-react),color var(--t-react)}
.v-ck__b:hover{border-color:#313131}
.v-ck__b--main{background:var(--accent);border-color:var(--accent);color:#EFEDEA}
.v-ck__b--main:hover{background:#313131;border-color:#313131;color:#EFEDEA}
.v-ck__b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:760px){.v-ck{left:12px;right:12px;top:50%;bottom:auto;flex-direction:column;align-items:stretch;gap:12px;padding:16px;font-size:.8125rem;line-height:1.4;transform:translateY(-50%);box-shadow:0 0 0 100vmax rgba(20,20,20,.45),var(--glass-edge),var(--glass-shadow)}.v-ck.is-out{transform:translateY(-40%);opacity:0}.v-ck__b{flex:1 1 auto;min-height:44px;padding:10px 12px}}

/* ---------- toast ---------- */
.v-toast{position:fixed;z-index:9500;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);padding:14px 20px 14px 14px;border-radius:999px;background:var(--glass-2-dark);-webkit-backdrop-filter:blur(var(--glass-blur-2));backdrop-filter:blur(var(--glass-blur-2));color:#313131;font:400 .9375rem/1.4 var(--hel);box-shadow:var(--glass-edge),var(--glass-shadow);transform:translate(-50%,140%);opacity:0;transition:transform 500ms var(--e-enter),opacity 300ms;pointer-events:none}
.v-toast.is-on{transform:translate(-50%,0);opacity:1}
.v-toast i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#EFEDEA;display:grid;place-items:center}
.v-toast i svg{width:14px;height:14px}

/* ---------- gallery (Marshrut screens) ---------- */
.v-gal{position:fixed;inset:0;z-index:9000;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(20,20,20,.97);color:var(--paper);opacity:0;transition:opacity 400ms var(--e-enter)}
.v-gal[hidden]{display:none}
.v-gal.is-open{opacity:1}
.v-gal__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s3) var(--margin)}
.v-gal__count{font:300 1.5rem/1 var(--hel);letter-spacing:-.02em}
.v-gal__count b{color:var(--accent);font-weight:300}
.v-gal__stage{position:relative;display:grid;place-items:center;padding:0 var(--margin);min-height:0}
.v-gal__stage img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 40px 100px -24px rgba(0,0,0,.8)}
.v-gal__bot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--margin) calc(var(--s3) + env(safe-area-inset-bottom))}
.v-gal__cap{font-size:var(--fz-micro);line-height:1.4;max-width:60ch}
.v-gal__nav{display:flex;gap:10px}
.v-gal .v-round{width:48px;height:48px;border-color:rgba(239,237,234,.45)}
.v-gal .v-round:hover{background:var(--paper);color:var(--ink)}
.v-gal__close:hover{transform:rotate(90deg)}

/* ---------- footer ---------- */
.v-foot{position:relative;color:var(--paper);padding-top:clamp(80px,11vh,140px);overflow:hidden;--line:rgba(239,237,234,.14);--tech:rgba(239,237,234,.66)}
.v-foot__cta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s4);align-items:end;padding:clamp(24px,3vw,48px);background:var(--paper);color:var(--ink);--tech:#8f8c88;--mute:#ADADAD}
.v-foot__big{grid-column:1/8;font:400 clamp(2.5rem,6vw,6rem)/.88 var(--druk);text-transform:uppercase;letter-spacing:.02em}
.v-foot__ctaside{grid-column:9/-1;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);text-align:right}
.v-foot__ctaside .v-pillbtn:hover>span:last-child{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.v-foot__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s5);padding-block:var(--s6) var(--s5)}
.v-foot__brand{grid-column:1/4;display:flex;flex-direction:column;gap:var(--s2)}
.v-foot__logo{--lh:56px}
.v-foot__col{grid-column:span 2}
.v-foot__col--wide{grid-column:4/8}
.v-foot__col h4{margin-bottom:var(--s3);font:400 var(--fz-tech)/1 var(--hel);text-transform:uppercase;letter-spacing:.14em;color:var(--tech)}
.v-foot__col h4 b{font:400 1rem/1 var(--druk);color:var(--accent);margin-right:8px;letter-spacing:.04em}
.v-foot__col li+li{margin-top:12px}
.v-foot__col a{font-size:var(--fz-micro);line-height:1.35;border-bottom:1px solid transparent;transition:border-color var(--t-react),color var(--t-react)}
.v-foot__col a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.v-foot__col p{font-size:var(--fz-micro);line-height:1.5;color:rgba(239,237,234,.82)}
.v-foot__wm{font:400 clamp(4.5rem,17.5vw,19rem)/.8 var(--druk);letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px rgba(239,237,234,.16);user-select:none;white-space:nowrap;transform:translateY(6%)}
.v-foot__bot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3);padding-block:var(--s3);border-top:1px solid var(--line);font-size:.8125rem;line-height:1.5;color:rgba(239,237,234,.5)}
.v-foot__bot p{max-width:62ch}
.v-foot__up{display:inline-flex;align-items:center;gap:10px;color:var(--paper);text-transform:uppercase;letter-spacing:.14em;font-size:var(--fz-tech)}
.v-foot__up span{width:40px;height:40px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;transition:transform 400ms var(--e-enter),background var(--t-react),color var(--t-react)}
.v-foot__up:hover span{background:var(--paper);color:var(--ink);transform:translateY(-3px)}

/* ---------- motion pre-states (only while JS motion runs) ---------- */
html.v-motion [data-r]{opacity:0;transform:translate3d(0,32px,0)}
html.v-motion [data-r="fade"]{transform:none}
html.v-motion [data-hr]{opacity:0}
html.v-motion .v-portal .ln>span{transform:translate3d(0,110%,0)}
html.v-motion .v-avatar{opacity:0}

/* ---------- tablet ---------- */
@media (max-width:1099px){
  .v-nav__links a:not(.v-nav__cta){display:none}
  .v-vlabel{display:none}
  .v-side{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;column-gap:var(--s3);align-items:baseline}
  .v-side__d{grid-column:2}
  .v-main{grid-column:1/-1}
  .v-lines{--cols:12}
  .v-hero__meta1{grid-column:4/9}
  .v-hero__lede{grid-column:1/7}
  .v-hero__cta{grid-column:1/7;grid-row:2}
  .v-hero__facts{grid-column:8/-1;grid-row:1/3}
  .v-hero__scroll{grid-row:3}
  .v-pain__left{grid-column:1/-1}
  .v-pain__take{grid-column:3/-1;margin-top:0}
  .v-rec__item:nth-child(odd){grid-column:1/10}
  .v-rec__item:nth-child(even){grid-column:3/-1}
  .v-mr__title,.v-mr__intro{grid-column:1/-1}
  .v-bubbles{grid-column:1/-1;justify-content:flex-start;padding-left:30%}
  .v-fmt__list{grid-column:6/-1}
  .v-now{grid-column:1/-1}
  .v-me__ai{grid-column:1/8}
  .v-layers{grid-column:8/-1}
  .v-price{grid-column:1/6}
  .v-terms{grid-column:6/-1}
  .v-gua__main{grid-column:1/7}
  .v-gua__list{grid-column:7/-1;margin-top:0}
  .v-not ul{margin-left:0}
  .v-lead__copy,.v-form{grid-column:1/-1}
  .v-lead__facts div:first-child{grid-column:1/5}
  .v-lead__facts div{grid-column:span 4}
  .v-touch__foot .v-callout,.v-touch__text{grid-column:1/-1}
  .v-touch__foot .v-cta-row{grid-column:1/8}
  .v-foot__brand{grid-column:1/-1}
  .v-foot__col,.v-foot__col--wide{grid-column:span 6}
  .v-mr__footq,.v-mr__acts,.v-mr__demo{grid-column:1/-1;justify-content:flex-start}
}

/* ---------- Marshrut: stacked layout below desktop ---------- */
@media (max-width:899px){
  .v-mr__pin{display:block;min-height:0;padding-block:0}
  .v-mr__stage,.v-mr__counter,.v-mr__bar{display:none}
  .v-mr.is-js .v-mr__step{opacity:1}
  .v-mr__step{padding-block:var(--s4);cursor:default}
  .v-mr__step.is-on h3{transform:none}
  .v-mr__step p{grid-template-rows:1fr;margin-top:12px}
  .v-mr__step figure{display:block;margin-top:var(--s3);overflow:hidden;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .v-mr__step figure img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
}

/* ---------- phone ---------- */
@media (max-width:767px){
  .kk-land{--fz-body:1.125rem;--fz-lede:1.25rem;--fz-micro:1.0625rem;--fz-nano:.875rem;--fz-h2:clamp(2.125rem,10vw,3rem);--s5:44px;--s6:64px}
  .v-grid{row-gap:var(--s4)}
  .v-grid>*,.v-mr__head>*,.v-pain__cols>*,.v-gone>*,.v-now>*,.v-rec>*,.v-chain>*,.v-roles>*,.v-lead__grid>*,.v-foot__top>*,.v-foot__cta>*,.v-mr__foot>*,.v-touch__foot>*,.v-niches__in>*,.v-fmt__grid>*{grid-column:1/-1!important;margin-top:0!important}
  .v-lines,.v-pain__big,.v-portal{--cols:6}
  .ln[data-in="2"],.ln[data-in="3"],.ln[data-in="4"]{--in:1}
  .v-nav__logo{--lh:30px}
  .v-nav__cta{min-height:40px;padding:0 14px}
  .v-hero__pin{height:100svh;min-height:480px}
  .v-hero__in{padding-top:72px;row-gap:var(--s2);padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .v-avatar{grid-column:1/5;width:96px}
  .v-hero__meta1{grid-column:5/-1!important;font-size:.625rem}
  .v-hero__meta2{display:none}
  .v-portal{font-size:clamp(2.25rem,11.4vw,3.5rem);white-space:normal}
  .v-hero__bot{row-gap:var(--s2)}
  .v-hero__lede{font-size:1rem}
  .v-hero__cta,.v-hero__facts,.v-hero__lede{grid-column:1/-1!important;grid-row:auto!important}
  .v-hero__facts dd{font-size:.9375rem}
  .v-hero__scroll{display:none}
  .v-cta-row__big{font-size:1.75rem}
  .v-pain__big{font-size:clamp(2.125rem,10vw,3rem)}
  .v-pain__take{padding-left:var(--s3)}
  .v-rec__item{grid-template-columns:minmax(0,2.75rem) minmax(0,1fr);column-gap:var(--s2)}
  .v-rec__item:nth-child(even){margin-left:var(--s4)!important}
  .v-rec__item--quote{padding-inline:var(--s2)}
  .v-mr__tech{text-align:left}
  .v-mr__idx{display:none}
  .v-bubbles{padding-left:0;min-height:0;justify-content:flex-start;flex-wrap:wrap}
  .v-bubble--light{width:150px;margin-right:-18px}
  .v-bubble--dark{width:180px}
  .v-bubbles__note{position:static;margin-top:var(--s2);width:100%}
  .v-gone__col--on{margin-top:var(--s5)!important}
  .v-fmt__side{position:sticky;top:76px;z-index:2;align-self:start}
  .v-fmt__sticky{position:relative;top:auto;background:var(--glass-2);-webkit-backdrop-filter:blur(var(--glass-blur-2));backdrop-filter:blur(var(--glass-blur-2));box-shadow:var(--glass-edge),var(--glass-shadow);border-radius:var(--r-panel);padding:12px 18px;margin-inline:calc(8px - var(--margin))}
  .v-fmt__sticky .v-side__no,.v-fmt__sticky .v-side__d{display:none}
  .v-side__d{grid-column:1/-1;max-width:40ch}
  .v-chain__row{gap:10px 8px}
  .v-chain__row .v-link{display:none}
  .v-fmt__sticky .v-side__t{font-size:1.25rem}
  .v-fmt__sticky .v-side__t br{display:none}
  .v-fmt__navwrap{margin-top:8px;padding-left:0;padding-right:64px}
  .v-fmt__rail{display:none}
  .v-fmt__nav li{display:none}
  .v-fmt__nav li.is-on{display:flex}
  .v-fmt__nav li::before{display:none}
  .v-fmt__count{position:absolute;right:18px;bottom:14px;margin:0}
  .v-fmt__list{padding-block:12vh 20vh}
  .v-fmt__list li{font-size:clamp(1.625rem,8vw,2.25rem);gap:10px}
  .v-fmt__list li::before{width:1.6rem}
  .v-fmt__list li::after{left:-10px}
  .v-now__item{grid-column:1/-1!important}
  .v-roles{row-gap:var(--s3)}
  .v-counters{grid-template-columns:1fr 1fr;row-gap:var(--s4)}
  .v-counter{padding:0 var(--s2)}
  .v-counter:nth-child(odd){padding-left:0;border-left:0}
  .v-tl{grid-template-columns:1fr;row-gap:var(--s4)}
  .v-tl__line{left:27px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .v-tl__line i{transform-origin:top;transform:scaleY(var(--p,1))}
  .v-tl__step{grid-column:1/-1;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:var(--s3)}
  .v-tl__step h3{margin-top:12px}
  .v-tl__step p{grid-column:2}
  .v-price{position:static}
  .v-term{grid-template-columns:minmax(0,2.25rem) minmax(0,1fr);column-gap:var(--s2)}
  .v-term--hl{padding-inline:var(--s2)}
  .v-gua__main{min-height:380px}
  .v-lead__facts{grid-template-columns:1fr}
  .v-lead__facts div,.v-lead__facts div:first-child{grid-column:1/-1;padding:14px 0;display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:0;border-bottom:1px solid rgba(239,237,234,.16)}
  .v-lead__facts b{font-size:2.25rem}
  .v-lead__facts div>span{margin-top:0;text-align:right}
  .v-form{margin-inline:calc(-1*var(--margin));padding:var(--s4) var(--margin)}
  .v-foot__ctaside{align-items:flex-start;text-align:left}
  .v-foot__col,.v-foot__col--wide{grid-column:1/-1!important}
  .v-gal__bot{flex-direction:column;align-items:flex-start}
  .v-cases .kk-pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1*var(--margin));padding-inline:var(--margin)}
  .v-cases .kk-pills::-webkit-scrollbar{display:none}
  .v-reg{display:none}
}

/* short mobile viewport (Safari's toolbars fully expanded): tighten the hero so nothing overlaps */
@media (max-width:767px) and (max-height:680px){
  .v-hero__in{padding-top:52px;row-gap:10px}
  .v-avatar{width:64px}
  .v-hero__bot{row-gap:10px}
  .v-hero__facts div{padding-block:4px}
  .v-hero__lede{font-size:.9375rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .kk-land *,.kk-land *::before,.kk-land *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .v-aura b{animation:none}
  .v-marquee{animation:none;flex-wrap:wrap;width:auto}
  .v-marquee span[aria-hidden]{display:none}
}

/* case sheet: link to the live project, shown only when the case has one */
.kk-cm__site{align-self:flex-start;display:inline-flex;align-items:center;min-height:48px;gap:12px;margin-top:var(--s3);border-bottom:1px solid currentColor;padding-bottom:4px;font-size:var(--fz-micro);font-weight:500;color:var(--ink);text-transform:uppercase;letter-spacing:.1em;line-height:1.3;text-decoration:none;transition:color var(--t-react)}
.kk-cm__site[hidden]{display:none}
.kk-cm__site .kk-arrow{color:var(--accent);transition:transform var(--t-react) var(--e-enter)}
.kk-cm__site:hover{color:var(--accent)}
.kk-cm__site:hover .kk-arrow{transform:translate(3px,-3px)}

/* case card preview: the whole picture is always visible, whatever its proportions,
   inside a padded frame with a thin dark outline on its real edges */
.kk-case__media{display:flex;align-items:center;justify-content:center;padding:clamp(18px,7%,28px)}
.kk-case__media img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;outline:1px solid var(--ink);outline-offset:0}

/* ---------- device frames: flagship (Space Black) ---------- */
.v-laptop__lid{padding:1.5% 1.5% 2%;border-radius:18px 18px 6px 6px;background:linear-gradient(#2b2c2e,#1a1b1c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22),0 80px 120px -50px rgba(0,0,0,.9)}
.v-laptop__lid::before{display:none}
.v-laptop__notch{position:absolute;top:1.5%;left:50%;width:14%;height:2.6%;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#050505;z-index:3}
.v-laptop__notch::after{content:"";position:absolute;left:50%;top:30%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:radial-gradient(#2a3b55 30%,#0a0a0a 70%)}
.v-screen{border-radius:6px;box-shadow:0 0 0 2px #050505}
.v-screen::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 28%,transparent 45%);pointer-events:none}
.v-laptop__hinge{height:6px;margin:0 2%;background:linear-gradient(#0d0d0e,#2a2b2d)}
.v-laptop__base{height:18px;margin:0 -7%;border-radius:2px 2px 22px 22px;background:linear-gradient(#4a4b4e 0%,#2c2d2f 35%,#18191a 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 30px 40px -20px rgba(0,0,0,.8)}
.v-laptop__base::after{width:15%;height:7px;border-radius:0 0 10px 10px;background:#151617}
.v-phone{padding:1%;border-radius:34px;background:linear-gradient(135deg,#55575a,#26272a 40%,#3c3e41 70%,#1b1c1e);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 50px 80px -30px rgba(0,0,0,.95)}
.v-phone__btn{position:absolute;left:-3px;width:3px;border-radius:2px;background:#3a3c3f}
.v-phone__btn:nth-child(1){top:20%;height:5%}.v-phone__btn:nth-child(2){top:28%;height:9%}.v-phone__btn:nth-child(3){top:39%;height:9%}
.v-phone__screen{border-radius:28px;background:#000}
.v-phone__screen::before{content:"";position:absolute;top:2.2%;left:50%;width:32%;height:3.6%;transform:translateX(-50%);border-radius:20px;background:#000;z-index:3}
.v-phone__screen::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 40%);pointer-events:none}

/* ---------- device frames: case cards (tilted Space Black laptop) ---------- */
.kk-case__media{display:flex;align-items:center;justify-content:center;padding:0;perspective:1400px}
.kk-dev{width:82%;margin-left:4%;transform:rotateY(-16deg) rotateX(4deg);transform-style:preserve-3d;transition:transform 500ms var(--e-enter)}
.kk-case:hover .kk-dev{transform:rotateY(-10deg) rotateX(3deg) scale(1.03)}
.kk-dev__lid{position:relative;padding:2.4% 2.4% 3%;border-radius:10px 10px 4px 4px;background:linear-gradient(#2b2c2e,#1a1b1c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22)}
.kk-dev__notch{position:absolute;top:2.4%;left:50%;width:14%;height:4%;transform:translateX(-50%);border-radius:0 0 5px 5px;background:#050505;z-index:2}
.kk-dev__scr{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#0b0b0b;box-shadow:0 0 0 1px #050505}
.kk-dev__scr::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 28%,transparent 45%);pointer-events:none}
.kk-case__media .kk-dev__scr img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:top;outline:0;transform:none}
.kk-case:hover .kk-case__media img{transform:none}
.kk-dev__hinge{height:3px;margin:0 2%;background:linear-gradient(#0d0d0e,#2a2b2d)}
.kk-dev__base{position:relative;height:9px;margin:0 -7%;border-radius:1px 1px 12px 12px;background:linear-gradient(#4a4b4e,#18191a);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 22px 28px -12px rgba(0,0,0,.55)}
.kk-dev__base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:4px;margin-left:-7.5%;border-radius:0 0 6px 6px;background:#151617}

.kk-case__media{background:transparent;overflow:visible}
.kk-case__body{border-top:0}
.kk-dev{width:78%;margin-left:0;margin-right:14%}
.kk-ph{position:absolute;right:7%;bottom:9%;width:19%;aspect-ratio:1170/2532;padding:1.6%;border-radius:14px;background:linear-gradient(135deg,#55575a,#26272a 40%,#3c3e41 70%,#1b1c1e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),-10px 24px 30px -12px rgba(0,0,0,.6);transform:rotateY(-10deg) rotateZ(-4deg);transition:transform 500ms var(--e-enter);z-index:2}
.kk-case:hover .kk-ph{transform:rotateY(-6deg) rotateZ(-2deg) translateY(-3%)}
.kk-ph__scr{position:relative;width:100%;height:100%;overflow:hidden;border-radius:11px;background:#000}
.kk-ph__scr::before{content:"";position:absolute;top:3%;left:50%;width:34%;height:4%;transform:translateX(-50%);border-radius:10px;background:#000;z-index:2}
.kk-case__media .kk-ph__scr img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:top center;outline:0;transform:none}
.kk-case__media .kk-ph__scr img{position:absolute;inset:0}
.kk-case__media .kk-ph__scr .kk-ph__bg{object-fit:cover;object-position:center;filter:blur(8px) brightness(.7);transform:scale(1.2)}
.kk-case__media .kk-ph__scr .kk-ph__fit{object-fit:contain;object-position:center}