/* [wellspin-site] scale. 1440 is the design width; below it everything scales
   with the window (the site's rule, src/app/v6/v6.css --vu). Above it:
   - the bottom bar (--ub) grows exactly like the site's footer strip, at 0.35
     of the window's rate (×1.12 at 1920, ×1.27 at 2560);
   - the content (--u) grows slower (Дима: «скейлинг для контента сделать
     меньше»): --u-grow, PLACEHOLDER dial, 0.15 → ×1.05 at 1920, ×1.12 at 2560.
   Every size is N × --u (or --ub); 1px hairlines stay 1px. */
:root{--u-grow:.15;--u:calc(100vw / 1440);--ub:var(--u);--barh:calc(var(--ub)*44)}
@media (min-width:1441px){:root{
  --u:calc(1px + (100vw - 1440px) * var(--u-grow) / 1440);
  --ub:calc(1px + (100vw - 1440px) * .35 / 1440);
}}
:root{
  --fg:#fff; --mute:rgba(255,255,255,.5); --blue:#657df5;
  --font:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,Menlo,monospace;
  --ind:calc(var(--u)*22); /* the invisible line: "## " = 3 spaces = marker + gap */
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:#000;color:var(--fg);font:calc(var(--u)*13)/calc(var(--u)*20) var(--font);letter-spacing:calc(var(--u)*-.39);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,dl,dd,ul,figure{margin:0;padding:0;font:inherit}
ul{list-style:none}
.up{text-transform:uppercase}
.bg{position:fixed;inset:0 0 var(--barh);z-index:-1;pointer-events:none;will-change:transform;
  background:linear-gradient(180deg,rgba(0,0,0,.322) 46.1%,rgba(0,53,111,.322) 100%)} /* viewport top to footer; figma .29 / .9 to offset the scanlines */

.av{width:calc(var(--u)*600);margin-left:max(calc(var(--u)*16),calc(50% - calc(var(--u)*302)));padding:calc(var(--u)*20) 0 calc(var(--u)*92)}

/* top band */
.band{display:flex;gap:calc(var(--u)*8);text-transform:uppercase}
.band span{white-space:nowrap;width:calc(var(--u)*142);flex:none}
.band i{height:calc(var(--u)*10);margin-top:calc(var(--u)*5);border-top:1px solid var(--blue)}
.band i:first-child{width:calc(var(--u)*223);flex:none;border-right:1px solid var(--blue)}
.band i:last-child{flex:1;border-left:1px solid var(--blue)}

/* ASCII logo */
.logo-box{margin:calc(var(--u)*16) 0 0;width:calc(var(--u)*600);height:calc(var(--u)*160);overflow:hidden;position:relative;contain:strict;will-change:transform}
.ascii{margin:0;width:600px;font-family:var(--font);white-space:pre;transform-origin:0 0} /* drawn at 600 × 160 design px, scaled by ascii.js */
.ascii .r{display:block}
.ascii [data-t]::before{content:attr(data-t)} /* on screen, but not in the page text */

/* tabs: transparent in place; solid only when stuck (the page gradient is ~#000 at the viewport top) */
.tabs{position:sticky;top:0;z-index:4;display:flex;align-items:flex-end;height:calc(var(--u)*38);margin-top:calc(var(--u)*13);padding-top:calc(var(--u)*8)}
.tabs.stuck{background:#000}
.seg{height:1px;background:var(--blue)}
.tab{position:relative;display:block;height:calc(var(--u)*30);padding-top:calc(var(--u)*5);text-align:center;text-transform:uppercase}
.tab::before{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid var(--blue);border-radius:calc(var(--u)*6) calc(var(--u)*6) 0 0}
.tab[aria-current="true"]::before{border-bottom-color:transparent}

/* sections */
main section{scroll-margin-top:calc(var(--u)*58)}
.first{margin-top:calc(var(--u)*28)}
section + section{margin-top:calc(var(--u)*34)}
.h{display:flex;gap:calc(var(--u)*10);text-transform:uppercase;white-space:nowrap}
.h b{font-weight:inherit;color:var(--blue)}
.h i{flex:1;height:calc(var(--u)*10);margin-top:calc(var(--u)*5);border-top:1px solid var(--blue);border-left:1px solid var(--blue)}
.h0{white-space:pre;text-transform:uppercase}
.h0 + .p{margin-top:calc(var(--u)*16)}
.h + .p,.h + .list,.h + .q{margin-top:calc(var(--u)*20)}
.p{white-space:pre-wrap}
.caps{text-transform:uppercase}
.p + .list,.p + .facts{margin-top:calc(var(--u)*24)}
.caps + .list{margin-top:calc(var(--u)*20)}

/* marker column */
.mk{flex:none;width:calc(var(--u)*11);margin-right:calc(var(--u)*11);color:var(--blue);font-style:normal;font-family:"Zapf Dingbats","Apple Symbols",var(--font)}
.mk.w{color:#fff;font-family:Menlo,var(--font)}
.mk.go{font-family:"Zapf Dingbats","Apple Symbols",var(--font)}
.ln{display:flex}

/* facts */
.facts{display:grid;gap:calc(var(--u)*8)}
.facts > div{display:flex}
.facts > div:first-child{min-height:calc(var(--u)*21)}
.facts dt{display:flex;width:calc(var(--u)*191);flex:none;text-transform:uppercase}
.facts dd{flex:1}

/* lists */
.item + .item{margin-top:calc(var(--u)*20)}
.b{margin:calc(var(--u)*8) 0 0 var(--ind);width:calc(var(--u)*577)}
.svc .b{width:calc(var(--u)*556)}
.tight li + li{margin-top:calc(var(--u)*8)}

/* quotes */
.q{width:calc(var(--u)*601)}
.q + .q{margin-top:calc(var(--u)*20)}
.q p + p{margin-top:calc(var(--u)*4)}
.q .ln{margin-top:calc(var(--u)*8)}

/* pricing packages */
.pkg{width:calc(var(--u)*599)}
.pkg .top{display:flex;justify-content:space-between}
.pkg .top em{font-style:normal;color:var(--mute)}
.dash{display:block;margin:calc(var(--u)*19) 0 calc(var(--u)*20)}

/* closing double line + links */
.dbl{height:calc(var(--u)*9);margin:calc(var(--u)*39) 0 calc(var(--u)*28);border:solid var(--blue);border-width:1px 0}

/* bottom bar — [wellspin-site] the site footers' strip (v6-pages.css .v6-df-ask, 938:29727):
   44 tall, the column edge + 24 on both sides, 13/20 Plex Mono 400 caps, 18 × 24
   icon cells 8 apart, the 94 × 32 switch, all on the site's scale (--ub); the
   ground is #000 here, not the site strip's white .06 (Дима, 2026-11-06) */
.bar{
  --edge:max(0px,(100% - var(--ub)*1440) / 2);
  position:fixed;left:0;right:0;bottom:0;height:var(--barh);
  background:#000;color:#fff; /* Дима: «нижняя полоса должна быть #000» */
  font-size:calc(var(--ub)*13);line-height:calc(var(--ub)*20);letter-spacing:calc(var(--ub)*-.39);
  text-transform:uppercase;white-space:nowrap;z-index:30;will-change:transform; /* above every effect: part of the site, not of the screen */
}
.ask{position:absolute;left:calc(var(--edge) + var(--ub)*24);top:calc(var(--ub)*10);display:flex;align-items:center;gap:calc(var(--ub)*8)}
.ask > :first-child{margin-right:calc(var(--ub)*2)}
.ask .dim{opacity:.3}
.ask .ico{position:relative;width:calc(var(--ub)*18);height:calc(var(--ub)*24);cursor:pointer}
.ask .ico img{position:absolute}
/* «human» pressed: each label and icon changes colour as the sweep reaches it (--sweep-d, page.js) */
.ask > *,.ask .ico img,.mode,.mode .m{transition:color 140ms linear var(--sweep-d,0ms),background-color 140ms linear var(--sweep-d,0ms),filter 140ms linear var(--sweep-d,0ms),opacity 320ms cubic-bezier(.2,.8,.2,1),text-shadow .15s}
#askGpt img{left:5.68%;top:16.67%;width:88.93%;height:66.1%}
#askClaude img{left:0;top:0;width:100%;height:100%}
#askGrok img{left:-5.16%;top:11.29%;width:107.54%;height:77.43%}
.copy{text-transform:uppercase}
.mode{position:absolute;right:calc(var(--edge) + var(--ub)*24);top:calc(var(--ub)*6);width:calc(var(--ub)*94);height:calc(var(--ub)*32);border-radius:calc(var(--ub)*4);background:rgba(255,255,255,.06)}
.mode .m{position:absolute;text-decoration:none}
/* each label is its whole half of the switch (a tap anywhere on it counts); the padding keeps the word where it was */
.mode .m{top:0;height:100%;box-sizing:border-box;padding-top:calc(var(--ub)*6)}
.mode a.m{left:0;width:calc(var(--ub)*54);padding-left:calc(var(--ub)*9);opacity:.6}
.mode a.m:hover{opacity:1}
.mode .m.on{left:calc(var(--ub)*54);right:0;padding-left:calc(var(--ub)*12)}
/* the knob is its own element so it can slide back to «human» (52 wide there) */
.knob{position:absolute;left:calc(var(--ub)*56);top:calc(var(--ub)*2);width:calc(var(--ub)*36);height:calc(var(--ub)*28);border-radius:calc(var(--ub)*2);background:#000;
  transition:left 320ms cubic-bezier(.2,.8,.2,1),width 320ms cubic-bezier(.2,.8,.2,1),background-color 140ms linear var(--sweep-d,0ms)}
/* [wellspin-site] «human» pressed (page.js): the knob slides back; the wave
   from the switch lays the strip colour of the page we go back to (a layer
   page.js adds) and turns each label as its front crosses it (--sweep-d) —
   .light: the home footer's strip (v6.css .v6-end-ask: black type and icons,
   #121212 switch labels, white knob); .dark: the dark footer's (v6-pages.css
   .v6-df-ask), which only moves the knob. PLACEHOLDER timings */
.bar.to-human .knob{left:calc(var(--ub)*2);width:calc(var(--ub)*52)}
.bar.to-human .mode a.m{opacity:1}
.bar.to-human .mode .m.on{opacity:.6}
.bar.to-human a:hover{text-shadow:none} /* the page we land on has no glow under the pointer */
.bar.light{color:#000}
.bar.light .mode .m{color:#121212}
.bar.light .ico img{filter:invert(1)}
.bar.light .mode{background:rgba(0,0,0,.06)}
.bar.light .knob{background:#fff}
@media (prefers-reduced-motion:reduce){.ask > *,.ask .ico img,.mode,.mode .m,.knob{transition:none}}

/* logo tones: the exact stroke colour for the bright one, same hue at lower alpha for the field */
.ascii .k0{color:rgba(101,125,245,.22)}.ascii .k1{color:rgba(101,125,245,.5)}
.ascii .k2{color:rgba(101,125,245,.75)}.ascii .k3{color:#657df5}

/* CRT: static overlay on its own layer, clicks pass through */
.crt{position:fixed;inset:0 0 var(--barh);z-index:20;pointer-events:none;border-radius:calc(var(--u)*18);will-change:transform;
  box-shadow:0 0 0 calc(var(--u)*40) #000;
  background:
    linear-gradient(90deg,rgba(0,0,0,.55),transparent calc(var(--u)*150),transparent calc(100% - calc(var(--u)*150)),rgba(0,0,0,.55)),
    repeating-linear-gradient(180deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px)} /* no vignette at the bottom: it would eat the gradient */

/* faintest glow on everything: no offset, blur 1/2/3, in the element's own colour */
:root{
  --g:18%;
  --g-text:0 0 1px color-mix(in srgb,currentColor var(--g),transparent),0 0 calc(var(--u)*2) color-mix(in srgb,currentColor var(--g),transparent),0 0 calc(var(--u)*3) color-mix(in srgb,currentColor var(--g),transparent);
  --g-line:drop-shadow(0 0 1px color-mix(in srgb,var(--blue) var(--g),transparent)) drop-shadow(0 0 calc(var(--u)*2) color-mix(in srgb,var(--blue) var(--g),transparent)) drop-shadow(0 0 calc(var(--u)*3) color-mix(in srgb,var(--blue) var(--g),transparent));
  --hover:0 0 calc(var(--u)*2) currentColor,0 0 calc(var(--u)*6) color-mix(in srgb,currentColor 85%,transparent),0 0 calc(var(--u)*12) color-mix(in srgb,currentColor 55%,transparent);
}
main{text-shadow:var(--g-text)}
.ascii{text-shadow:0 0 2px color-mix(in srgb,currentColor calc(var(--g)*1.5),transparent)} /* one layer: redrawn 15 times a second */
.band i,.seg,.tab::before,.h i,.dbl{filter:var(--g-line)} /* not box-shadow: it would outline the undrawn sides */
.dash{filter:drop-shadow(0 0 calc(var(--u)*2) color-mix(in srgb,#fff var(--g),transparent))}

/* hover = a small glow, nothing else changes */
a,button,.ask img,.mk.go,.tab::before{transition:text-shadow .15s,filter .15s}
a:hover,button:hover,.ln:has(a:hover) .mk.go{text-shadow:var(--hover)}
.tab:hover::before{filter:drop-shadow(0 0 calc(var(--u)*3) var(--blue)) drop-shadow(0 0 calc(var(--u)*8) color-mix(in srgb,var(--blue) 85%,transparent)) drop-shadow(0 0 calc(var(--u)*16) color-mix(in srgb,var(--blue) 50%,transparent))}
.ask .ico:hover img{filter:drop-shadow(0 0 calc(var(--ub)*2) #fff) drop-shadow(0 0 calc(var(--ub)*6) rgba(255,255,255,.7)) drop-shadow(0 0 calc(var(--ub)*12) rgba(255,255,255,.4))}

/* IBM Plex Mono, self-hosted. Medium has the same advance width as Regular, so nothing reflows */
@font-face{font-family:"IBM Plex Mono Fallback";src:local(Arial);ascent-override:76.16%;descent-override:20.43%;line-gap-override:0%;size-adjust:134.59%}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-latin.woff2) format("woff2");
  unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-latin-ext.woff2) format("woff2");
  unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-latin.woff2) format("woff2");
  unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-latin-ext.woff2) format("woff2");
  unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Medium: titles and buttons only */
:is(.h0,.h,h3,.facts dt,.pkg .top>span,a,button){font-weight:500}
.bar.bar :is(a,button,.m){font-weight:400} /* the strip is all Regular, as on the site */
h3 em{font-weight:400}

/* screen intro */
.intro-wait main{opacity:0} /* not visibility: that would drop the text from innerText */
.intro{position:fixed;inset:0;width:100%;height:100%;z-index:15;pointer-events:none}
.intro[hidden]{display:none}

/* for agents block */
.agents{--blue:#f56565;
  --g-line:drop-shadow(0 0 1px color-mix(in srgb,var(--blue) var(--g),transparent)) drop-shadow(0 0 calc(var(--u)*2) color-mix(in srgb,var(--blue) var(--g),transparent)) drop-shadow(0 0 calc(var(--u)*3) color-mix(in srgb,var(--blue) var(--g),transparent))}
.agents .dbl{margin-top:0}
/* readable for agents and screen readers, invisible and not laid out for sighted visitors */
.agent-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);text-shadow:none}

/* [wellspin-site] lenis/dist/lenis.css 1.3.26, as the home page loads it (globals.css) */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

/* [wellspin-site] PHONES (below 768, Дима 2026-11-06). The landing's mobile
   frames (Figma 1196:16020…1198:17746) are 430 wide with 12 px gutters, and
   their type is one point under desktop (13 → 12); the AI page follows:
   - --s = one mobile design px (430 frame), everything scales with the window
     from 320 up to the breakpoint;
   - --u = the desktop design px × 12/13, so every desktop size (font 13/20,
     the "## " indent, gaps) shrinks by one point's ratio and keeps its
     proportions — the indent is still the width of "## ";
   - the column fills the window between the 12 px gutters;
   - the bottom bar is the landing's mobile strip (1198:17781): two rows,
     84 tall — «Ask ai about us:» left, the icons + copy prompt right, the
     switch the full column wide below, knob = half; ground #000 as on desktop. */
@media (max-width:767px){
  :root{--s:calc(100vw / 430);--u:calc(var(--s) * 12 / 13);--ub:var(--s);--barh:calc(var(--s)*84)}
  .av{width:auto;margin:0 calc(var(--s)*12);padding-bottom:calc(var(--barh) + var(--u)*48)}
  .band i:first-child{flex:1;width:auto}
  .band span{width:auto}
  .logo-box{width:100%;height:auto;aspect-ratio:600/160}
  .tabs .seg:first-child{flex:1;width:auto!important}
  .b,.svc .b,.q,.pkg{width:auto}
  .dash{width:100%!important}
  .facts dt{width:calc(var(--u)*150)}
  .h{white-space:normal}
  .h span{flex:none;max-width:calc(100% - var(--u)*20)}
  .crt{border-radius:calc(var(--s)*12);
    background:
      linear-gradient(90deg,rgba(0,0,0,.45),transparent calc(var(--s)*40),transparent calc(100% - calc(var(--s)*40)),rgba(0,0,0,.45)),
      repeating-linear-gradient(180deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px)}

  .bar{font-size:calc(var(--s)*12);line-height:calc(var(--s)*20);letter-spacing:calc(var(--s)*-.36)}
  .ask{left:calc(var(--s)*12);right:calc(var(--s)*12);top:calc(var(--s)*11);height:calc(var(--s)*21.333);gap:calc(var(--s)*6)}
  .ask > :first-child{margin-right:auto;line-height:calc(var(--s)*18)}
  .ask .dim:not(:first-child){font-size:calc(var(--s)*13);letter-spacing:calc(var(--s)*-.39)}
  .ask .ico{width:calc(var(--s)*16);height:calc(var(--s)*21.333)}
  .copy{line-height:calc(var(--s)*18)}
  .mode{left:calc(var(--s)*12);right:calc(var(--s)*12);top:calc(var(--s)*44);width:auto;height:calc(var(--s)*32);border-radius:calc(var(--s)*4)}
  .mode .m{top:0;width:50%;padding:calc(var(--s)*6) 0 0;text-align:center}
  .mode a.m,.mode .m.on{width:50%;padding-left:0}
  .mode a.m{left:0}
  .mode .m.on{left:50%;right:auto}
  .knob{left:50%;top:calc(var(--s)*2);width:calc(50% - var(--s)*2);height:calc(var(--s)*28);border-radius:calc(var(--s)*2)}
  .bar.to-human .knob{left:calc(var(--s)*2);width:calc(50% - var(--s)*2)}
  /* iPhone Safari 26 paints a solid band under its top bar while a pinned
   * full-width box's LAYOUT touches the screen's top (the site's
   * v6-safari.css): the two full-screen layers sit 6 px down in layout and are
   * translated back — Safari does not read transforms */
  .bg,.crt{margin-top:6px;translate:0 -6px}
}