/* ABRAMASHVILI - personal site
   Drafting paper: cool neutral ground, graphite ink, one deep blue.
   Hard grid, hairlines, square corners. Two inverted bands carry the rhythm. */
:root{
  /* colour */
  --bg:#f0f0f1; --bg-2:#f7f7f8; --bg-3:#e2e3e5;
  --ink:#14161a; --ink-2:#3c4149;
  --muted:#666c74;
  --line:rgba(20,22,26,.16); --line-soft:rgba(20,22,26,.06); --line-strong:rgba(20,22,26,.46);
  --accent:#1b4b73; --warn:#8a5a12; --bad:#9c3b2c;
  --dark:#14161a; --dark-2:#1c2026; --dark-ink:#eceef0; --dark-muted:#9aa0a8;
  --dark-line:rgba(236,238,240,.16);

  /* type */
  --display:'Unbounded','Noto Sans Georgian',system-ui,sans-serif;
  --body:'Golos Text','Noto Sans Georgian',system-ui,sans-serif;
  --mono:'JetBrains Mono','Noto Sans Georgian',ui-monospace,monospace;

  /* space: 4pt scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --wrap:1280px; --gut:clamp(20px,4vw,56px);
  --idx:clamp(56px,7vw,104px);
  --band:clamp(56px,9vh,112px);

  /* stacking */
  --z-guides:1; --z-content:2; --z-sticky:30; --z-menu:35; --z-top:40; --z-cursor:60;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--ink);color:var(--bg)}

.shell{max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
main{position:relative;z-index:var(--z-content)}
section[id]{scroll-margin-top:72px}

/* ---------- top bar ---------- */
/* no bar: separate tiles float over the page, the name in the middle */
.top{position:fixed;inset:0 0 auto 0;z-index:var(--z-top);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:20px;background:transparent;border:0;pointer-events:none;color:var(--ink)}
.top .top__nav,.top .top__lang,.top .top__right{gap:5px}
.top>*{pointer-events:auto}
.top__name{justify-self:center;display:inline-flex;align-items:center;height:40px;padding:0 12px;border-radius:2px;border:1px solid rgba(20,22,26,.1);
  background:rgba(240,240,241,.84);font:700 15px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:inherit;
  transition:color .3s,background .3s,border-color .3s}
.top--dark .top__name,body.menu-open .top__name{background:transparent;border-color:transparent}
.top__nav{display:flex;gap:6px}
.top__nav--l{justify-self:start}
.top__right{justify-self:end;display:flex;align-items:center;gap:6px}
/* the tile */
.top__nav a,.top__lang button,.top__burger{display:inline-flex;align-items:center;justify-content:center;height:40px;min-width:40px;padding:0 13px;
  border:1px solid rgba(20,22,26,.1);border-radius:2px;background:rgba(240,240,241,.84);color:var(--ink);
  font:700 10.5px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:background .3s cubic-bezier(.5,1,.89,1),color .3s cubic-bezier(.5,1,.89,1),border-color .3s cubic-bezier(.5,1,.89,1)}
.top__nav a:hover,.top__lang button:hover,.top__burger:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.top__nav a.is-active{box-shadow:inset 0 -2px 0 currentColor}
.top__lang{display:flex;gap:6px}
.top__lang button{padding:0;width:36px;min-width:36px}
.top__lang button.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* over dark blocks: dark glass */
.top--dark{color:#eceef0}
.top--dark .top__nav a,.top--dark .top__lang button,.top--dark .top__burger{background:rgba(20,22,26,.34);color:#eceef0;border-color:rgba(236,238,240,.14)}
.top--dark .top__nav a:hover,.top--dark .top__lang button:hover,.top--dark .top__burger:hover{background:#eceef0;color:#14161a;border-color:#eceef0}
.top--dark .top__lang button.is-on{background:#eceef0;color:#14161a;border-color:#eceef0}
.top__burger{display:none;position:relative;width:40px;padding:0}
.top__burger i{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;top:15px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),top .3s cubic-bezier(.22,1,.36,1)}
.top__burger i+i{top:23px}
.top__burger[aria-expanded="true"] i{top:19px;transform:rotate(45deg)}
.top__burger[aria-expanded="true"] i+i{transform:rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--dark);color:var(--dark-ink);
  display:flex;flex-direction:column;justify-content:center;padding:88px var(--gut) var(--s7)}
.mmenu a{font:700 clamp(28px,8vw,40px)/1.35 var(--display);letter-spacing:-.035em;
  padding:var(--s2) 0;border-bottom:1px solid var(--dark-line)}
.mmenu a:active{color:var(--accent)}
.mmenu[hidden]{display:none!important}
body.menu-open{overflow:hidden}
body.menu-open .top{color:#eceef0}
body.menu-open .top__lang button,body.menu-open .top__burger{background:rgba(20,22,26,.34);color:#eceef0;border-color:rgba(236,238,240,.2)}
body.menu-open .top__lang button.is-on{background:#eceef0;color:#14161a}

@media (max-width:900px){.top{grid-template-columns:1fr auto}.top__nav{display:none}.top__name{justify-self:start}.top__burger{display:inline-flex}}
.top--compact{grid-template-columns:1fr auto;gap:var(--s4)}.top--compact .top__nav{display:none}.top--compact .top__name{justify-self:start}.top--compact .top__burger{display:inline-flex}
@media (max-width:420px){.top{padding:14px}.top__lang button{width:34px;min-width:34px;height:36px}.top__burger{height:36px;width:36px;min-width:36px}}
@media (min-width:901px){.mmenu{display:none!important}}

/* ---------- hero: the wind tunnel ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;color:#eceef0;
  border-bottom:1px solid rgba(236,238,240,.14);
  background:
    repeating-linear-gradient(to right, rgba(236,238,240,.045) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(to bottom, rgba(236,238,240,.045) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(to right, rgba(143,182,217,.09) 0 1px, transparent 1px 460px),
    #0c0e11}
.hero::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 45%, rgba(12,14,17,0) 45%, rgba(12,14,17,.6) 100%)}
.hero__flow{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:block;pointer-events:none}
.hero__portrait{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:min(86vh,86svh);width:auto;max-width:100vw;z-index:2;
  user-select:none;-webkit-user-drag:none;pointer-events:none}
.hero__bw{height:100%;width:auto;max-width:none;filter:grayscale(1) contrast(1.14) brightness(.94)}
.hero__meta{position:absolute;top:calc(57px + var(--s5));left:var(--gut);right:var(--gut);z-index:5;display:flex;justify-content:space-between;gap:var(--s4);
  font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#9aa0a8;pointer-events:none}
.hero__copy{position:absolute;z-index:5;left:var(--gut);bottom:calc(11vh + 118px);max-width:380px;display:flex;flex-direction:column;gap:var(--s4)}
.hero__claim{margin:0;font:500 clamp(16px,1.3vw,19px)/1.5 var(--body);color:#d5d9df;text-wrap:pretty}
.hero__name{position:absolute;left:0;right:0;bottom:-.085em;margin:0;z-index:5;text-align:center;font:900 100px/1 var(--display);letter-spacing:-.035em;color:#eceef0;
  pointer-events:none;white-space:nowrap;opacity:.94}
.hero__rail{position:absolute;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;
  gap:var(--s3);padding:var(--s4) 9px;border:1px solid rgba(236,238,240,.42);color:#eceef0;
  font:700 10px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;background:rgba(14,16,20,.22);
  transition:background .35s,color .35s,border-color .35s}
.hero__rail span{opacity:.6}
.hero__rail>b{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:700;letter-spacing:.08em}
.hero__rail i{font-style:normal;font-size:14px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.hero__rail--l{left:var(--gut)} .hero__rail--r{right:var(--gut)}
/* the big numbers are the buttons: an outlined ghost upside-down at rest; under the cursor it flips
   upright, fills, the caption opens, the other one steps back, the portrait and the name drift away */
.hero__big{position:absolute;top:50%;z-index:6;display:flex;align-items:center;gap:var(--s6);transform:translateY(-50%);
  color:#eceef0;text-decoration:none;transition:opacity .6s}
.hero__big--l{left:var(--gut)} .hero__big--r{right:var(--gut)}
.hero__big-n{display:block;font:900 clamp(120px,14vw,230px)/1 var(--display);letter-spacing:-.06em;
  color:rgba(236,238,240,.16);transform:rotate(0deg) scale(.92);transform-origin:center;user-select:none;
  transition:color .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.hero__big-t{display:flex;flex-direction:column;align-items:center;gap:var(--s3);opacity:.75;transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1)}
.hero__big-t b{writing-mode:vertical-rl;transform:rotate(180deg);font:700 13px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  transition:letter-spacing .6s cubic-bezier(.22,1,.36,1)}
.hero__big-t i{font-style:normal;font-size:16px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
/* the flat turn from the reference: the number spins in the plane as it grows and lights up; left clockwise, right the other way */
.hero__big:hover .hero__big-n,.hero.is-l .hero__big--l .hero__big-n,.hero.is-r .hero__big--r .hero__big-n{color:#eceef0;transform:scale(1.15)}
.hero__big--l:hover .hero__big-n,.hero.is-l .hero__big--l .hero__big-n{animation:turnL .9s cubic-bezier(.25,.8,.25,1) both}
.hero__big--r:hover .hero__big-n,.hero.is-r .hero__big--r .hero__big-n{animation:turnR .9s cubic-bezier(.25,.8,.25,1) both}
@keyframes turnL{from{transform:rotate(0deg) scale(.92)}to{transform:rotate(360deg) scale(1.15)}}
@keyframes turnR{from{transform:rotate(0deg) scale(.92)}to{transform:rotate(-360deg) scale(1.15)}}
.hero__big:hover .hero__big-t{opacity:1} .hero__big:hover .hero__big-t b{letter-spacing:.3em}
.hero__big--l:hover .hero__big-t i{transform:translateX(5px)} .hero__big--r:hover .hero__big-t i{transform:translateY(5px)}
.hero__big--l:hover .hero__big-t{transform:translateX(-10px)} .hero__big--r:hover .hero__big-t{transform:translateX(10px)}   /* the caption steps aside as the number grows */
.hero.is-l .hero__big--r,.hero.is-r .hero__big--l{opacity:.3}
.hero__portrait,.hero__name{transition:transform 2s cubic-bezier(.16,1,.3,1)}
.hero.is-l .hero__portrait{transform:translateX(calc(-50% + 12vw))} .hero.is-l .hero__name{transform:translateX(12vw)}
.hero.is-r .hero__portrait{transform:translateX(calc(-50% - 12vw))} .hero.is-r .hero__name{transform:translateX(-12vw)}
@media (max-width:700px){.hero__big{display:none}}
@media (prefers-reduced-motion:reduce){
  .hero__big,.hero__big-n,.hero__big-t,.hero__big-t b,.hero__big-t i,.hero__portrait,.hero__name{transition:none}
  .hero.is-l .hero__portrait,.hero.is-r .hero__portrait{transform:translateX(-50%)} .hero.is-l .hero__name,.hero.is-r .hero__name{transform:none}
}
.hero__rail--l:hover i{transform:translateY(5px)} .hero__rail--r:hover i{transform:translateY(5px)}
.hero__actions{display:none;flex-wrap:wrap;gap:var(--s3)}
.hero__actions .btn--ghost{color:#eceef0;border-color:rgba(236,238,240,.5)}
.hero__actions .btn--ghost:hover{color:#f4f5f6;border-color:var(--accent)}
@media (max-width:700px){.hero__rail{display:none} .hero__actions{display:flex}}
@media (min-width:701px){.hero__copy{display:none}}   /* the desktop hero keeps only the rails */
.hero__name span{display:inline-block}
.hero__name span span{display:inline-block;text-align:center;overflow:hidden;cursor:default;pointer-events:auto;transition:color .25s}
.hero__name span span.is-spin{color:inherit}
@media (max-width:700px){
  .hero{min-height:540px}
  .hero__side b{font-size:10px} .hero__side span{padding:4px 5px}
  .hero__portrait{height:auto;width:min(104vw,68vh)} .hero__bw{width:100%;height:auto}
  .hero__meta{font-size:9px;letter-spacing:.08em}
  .hero__copy{left:var(--gut);right:var(--gut);top:calc(57px + 40px);bottom:auto;max-width:none;gap:var(--s3)}
  .hero__actions{flex-direction:column;align-items:flex-start}
  .hero__claim{font-size:15px}
}

/* ---------- 01 sites ---------- */
.sites{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:var(--s7);align-items:start}
.sites__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sites__item{border-bottom:1px solid var(--line)}
.sites__item a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:var(--s4);align-items:baseline;
  padding:var(--s5) var(--s3);transition:background .3s cubic-bezier(.22,1,.36,1),color .3s}
.sites__item small{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--muted);transition:color .3s}
.sites__item b{font:700 clamp(17px,1.5vw,21px)/1.2 var(--display);letter-spacing:-.03em;display:block}
.sites__item p{margin:var(--s2) 0 0;color:var(--muted);font-size:15px;line-height:1.5;max-width:48ch;transition:color .3s}
.sites__item em{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.06em;color:var(--muted);transition:color .3s}
@media (min-width:1001px){
  .sites__item a:hover,.sites__item.is-on a{background:var(--dark);color:var(--dark-ink)}
  .sites__item a:hover small,.sites__item.is-on a small{color:#8ab4dd}
  .sites__item a:hover p,.sites__item.is-on a p,
  .sites__item a:hover em,.sites__item.is-on a em{color:var(--dark-muted)}
}
.sites__mob{display:none}
.sites__preview{position:sticky;top:104px}
.sites__frame{aspect-ratio:16/10;background:var(--dark);overflow:hidden;border:1px solid var(--line-strong)}
.sites__frame img{width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .22s}
.sites__frame img.is-fading{opacity:0}
.sites__cap{margin:var(--s3) 0 0;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:1000px){
  .sites{grid-template-columns:minmax(0,1fr)}
  .sites__preview{display:none}
  .sites__mob{display:block;aspect-ratio:16/10;object-fit:cover;object-position:top;margin:0 0 var(--s4);grid-column:1/-1;border:1px solid var(--line)}
  .sites__item a{grid-template-columns:34px minmax(0,1fr);padding-inline:var(--s2)}
  .sites__item em{display:none}
}

/* ---------- 02 tools: the inverted band ---------- */
.calc{background:var(--dark);color:var(--dark-ink);padding-block:var(--s8);margin:0 0 var(--s7);position:relative;overflow:hidden}
.calc__in{position:relative;z-index:1}
.calc__in{display:grid;gap:var(--s7)}
.calc__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.calc__field{display:flex;flex-direction:column;gap:var(--s3);
  font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dark-muted)}
.calc__field input{font:600 clamp(24px,3vw,34px)/1.1 var(--display);letter-spacing:-.03em;
  background:transparent;border:0;border-bottom:1px solid rgba(236,238,240,.3);color:var(--dark-ink);
  padding:var(--s2) 0;width:100%;outline:none;-moz-appearance:textfield;transition:border-color .2s}
.calc__field input::-webkit-outer-spin-button,.calc__field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc__field input:focus{border-color:#8ab4dd}
.calc__out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);
  border-top:1px solid rgba(236,238,240,.2);padding-top:var(--s6)}
.calc__stat{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.calc__stat b{overflow:hidden;text-overflow:clip;white-space:nowrap}
.calc__stat b{font:700 clamp(30px,4vw,52px)/1 var(--display);letter-spacing:-.04em;color:#8ab4dd}
.calc__stat b.is-warn{color:#d8a349}
.calc__stat b.is-bad{color:#d4776a}
.calc__stat span{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dark-muted)}
.calc__trace{margin:0;padding-top:var(--s6);border-top:1px solid rgba(236,238,240,.12);
  font:400 12px/2 var(--mono);letter-spacing:.02em;color:rgba(236,238,240,.4);
  white-space:pre-wrap;overflow-wrap:anywhere}
.calc__trace i{font-style:normal;color:rgba(236,238,240,.24)}
.calc__trace b{font-weight:400;color:#8ab4dd}
.calc__trace u{text-decoration:none;color:rgba(236,238,240,.72)}
.calc__trace .caret{color:#8ab4dd;animation:caret 1.1s steps(1) infinite}
@keyframes caret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.calc__trace .caret{animation:none}}
@media (max-width:760px){.calc{padding-block:var(--s7)}.calc__row,.calc__out{grid-template-columns:minmax(0,1fr);gap:var(--s5)}.calc__trace{font-size:11px;line-height:1.9}}

/* ---------- link rows ---------- */
.links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.links li{border-bottom:1px solid var(--line)}
.links a,.links__static{display:grid;grid-template-columns:minmax(130px,190px) minmax(0,1fr) auto;gap:var(--s4);
  padding:var(--s4) var(--s3);align-items:baseline;transition:background .3s cubic-bezier(.22,1,.36,1),color .3s}
.links b{font:600 16px/1.35 var(--display);letter-spacing:-.025em}
.links span{color:var(--muted);font-size:15px;transition:color .3s}
.links a::after{content:"\2192";font:500 14px/1 var(--mono);justify-self:end;color:var(--muted);
  transition:color .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.links a:hover{background:var(--dark);color:var(--dark-ink)}
.links a:hover span{color:var(--dark-muted)}
.links a:hover::after{color:#8ab4dd;transform:translateX(4px)}
.links__static{color:var(--ink-2)}
@media (max-width:760px){.links a,.links__static{grid-template-columns:minmax(0,1fr);gap:var(--s1)}.links a::after{display:none}}

/* ---------- 03 game ---------- */
.game{display:block;background:var(--dark);border:1px solid var(--line-strong)}
.game__video{width:100%;aspect-ratio:16/9;object-fit:cover}
.game__meta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding:var(--s4);border-top:1px solid var(--dark-line);color:var(--dark-ink)}
.game__meta b{font:700 20px/1 var(--display);letter-spacing:-.03em}
.game__meta span{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8ab4dd;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.game:hover .game__meta span{transform:translateX(5px)}

/* ---------- 04 bots ---------- */
.chat{max-width:560px;background:var(--bg-2);border:1px solid var(--line-strong);margin:0 0 var(--s7)}
.chat__head{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.chat__head i{width:9px;height:9px;background:var(--accent)}
.chat__head b{font-weight:600}
.chat__head span{color:var(--muted)}
.chat__log{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);min-height:290px}
.msg{max-width:82%;padding:var(--s3) var(--s4);font-size:15px;line-height:1.45;
  opacity:0;transform:translateY(6px);animation:msg .32s cubic-bezier(.22,1,.36,1) forwards}
.msg--me{align-self:flex-end;background:var(--dark);color:var(--dark-ink)}
.msg--bot{align-self:flex-start;background:transparent;border:1px solid var(--line);color:var(--ink-2)}
.msg--img{padding:var(--s2);border:1px solid var(--line)}
.msg--img div{display:grid;grid-template-columns:repeat(3,62px);gap:var(--s1)}
.msg--img span{aspect-ratio:1;background:linear-gradient(140deg,#c3c7cb,#9aa3ad 55%,#6f7b87);position:relative;overflow:hidden}
.msg--img span.is-wm::after{content:"AGENCY";position:absolute;inset:auto 3px 3px auto;
  font:700 8px var(--mono);color:#fff;background:rgba(20,22,26,.5);padding:1px 3px}
.msg--typing{display:flex;gap:var(--s1);padding:var(--s4)}
.msg--typing i{width:5px;height:5px;background:var(--muted);animation:dot 1s infinite}
.msg--typing i:nth-child(2){animation-delay:.15s}
.msg--typing i:nth-child(3){animation-delay:.3s}
@keyframes msg{to{opacity:1;transform:none}}
@keyframes dot{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ---------- 05 video & brand ---------- */
.brand{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto auto;gap:var(--s5)}
.brand figure{margin:0}
.brand__doc{grid-row:1/3;display:flex;flex-direction:column}
.brand__doc img{width:100%;flex:1;object-fit:cover;object-position:top;border:1px solid var(--line-strong);max-height:660px}
.brand__tv video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--dark);border:1px solid var(--line-strong)}
.brand figcaption{margin-top:var(--s3);font:500 11px/1.5 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){.brand{grid-template-columns:minmax(0,1fr)}.brand__doc{grid-row:auto}.brand__doc img{max-height:460px}}

/* ---------- 06 about ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,290px);gap:var(--s7);align-items:start}
.about__text p{margin:0 0 var(--s5);font-size:clamp(18px,1.7vw,23px);line-height:1.5;max-width:52ch}
.about__text p:last-child{margin-bottom:0;color:var(--ink-2)}
.about__photo{margin:0;border:1px solid var(--line-strong);background:var(--bg-3)}
.about__photo img{width:100%;filter:grayscale(1) contrast(1.08)}
@media (max-width:860px){.about{grid-template-columns:minmax(0,1fr);gap:var(--s6)}.about__photo{max-width:250px}}

/* ---------- Georgian ----------
   Unbounded / Golos Text / JetBrains Mono ship no Georgian glyphs, so Georgian
   falls through to Noto Sans Georgian, which runs optically lighter and narrower
   at the same nominal weight. Every Georgian step is graded up to compensate. */
html[lang="ka"] .sec__title,
html[lang="ka"] .contact__title,
html[lang="ka"] .sites__item b,
html[lang="ka"] .game__meta b,
html[lang="ka"] .calc__stat b,
html[lang="ka"] .mmenu a{font-weight:900}
html[lang="ka"] .intro__line,
html[lang="ka"] .links b,
html[lang="ka"] .contact__links,
html[lang="ka"] .calc__field input,
html[lang="ka"] .chat__head b{font-weight:800}
html[lang="ka"] .sec__lead,
html[lang="ka"] .about__text p,
html[lang="ka"] .sites__item p,
html[lang="ka"] .links span,
html[lang="ka"] .msg{font-weight:500}
html[lang="ka"] .top__name,
html[lang="ka"] .top__nav,
html[lang="ka"] .sec__meta,
html[lang="ka"] .sec__idx,
html[lang="ka"] .hero__meta,
html[lang="ka"] .hero__side,
html[lang="ka"] .sites__cap,
html[lang="ka"] .intro__sub,
html[lang="ka"] .brand figcaption,
html[lang="ka"] .calc__field,
html[lang="ka"] .calc__stat span,
html[lang="ka"] .game__meta span,
html[lang="ka"] .chat__head,
html[lang="ka"] .contact__foot{font-weight:600}
html[lang="ka"] .sec__title,
html[lang="ka"] .intro__line,
html[lang="ka"] .contact__title,
html[lang="ka"] .mmenu a,
html[lang="ka"] .sites__item b,
html[lang="ka"] .links b,
html[lang="ka"] .game__meta b,
html[lang="ka"] .calc__stat b,
html[lang="ka"] .contact__links{letter-spacing:-.015em}
html[lang="ka"] .sec__title,
html[lang="ka"] .contact__title{line-height:1.12}
html[lang="ka"] .intro__line{line-height:1.22}
html[lang="ka"] .calc__stat b{line-height:1.14}
html[lang="ka"] .top__nav,
html[lang="ka"] .top__name,
html[lang="ka"] .sec__meta,
html[lang="ka"] .sec__idx,
html[lang="ka"] .hero__meta,
html[lang="ka"] .sites__item small,
html[lang="ka"] .sites__item em,
html[lang="ka"] .sites__cap,
html[lang="ka"] .intro__sub,
html[lang="ka"] .brand figcaption,
html[lang="ka"] .calc__field,
html[lang="ka"] .calc__stat span,
html[lang="ka"] .game__meta span,
html[lang="ka"] .chat__head,
html[lang="ka"] .contact__foot{letter-spacing:.05em}
html[lang="ka"] .hero__side{letter-spacing:.08em}

/* ---------- section pattern ---------- */
.sec{position:relative;padding-block:0 var(--band);border-top:1px solid var(--line-strong)}
.sec__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--s4) var(--s5);
  padding:var(--s5) 0 var(--s7) calc(var(--idx) + var(--s5))}
.sec__idx{grid-column:1/-1;justify-self:start;font:500 11px/1 var(--mono);letter-spacing:.18em;color:var(--muted)}   /* only the 404 code is left */
.sec__title{margin:0;font:700 clamp(32px,4.4vw,56px)/1 var(--display);letter-spacing:-.04em}
.sec__meta{margin:0;justify-self:end;text-align:right;font:500 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sec__body{display:grid;grid-template-columns:var(--idx) minmax(0,1fr);gap:0 var(--s5)}
.sec__body>*{grid-column:2}
.sec__lead{margin:0 0 var(--s7);font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:62ch;color:var(--ink-2)}
/* page heads carry the biggest type on the page: nothing below may outrank them */
.phead .sec__title{font-size:clamp(44px,8vw,120px);letter-spacing:-.05em;line-height:.95}
.phead .sec__head{align-items:end}
@media (max-width:900px){
  :root{--idx:0px}
  .sec__head{grid-template-columns:minmax(0,1fr);gap:var(--s2);padding:var(--s5) 0 var(--s6)}
  .sec__idx{grid-column:1/-1}
  .sec__meta{justify-self:start;text-align:left;padding-bottom:2px}
  .sec__title{overflow-wrap:anywhere}
  .sec__body{grid-template-columns:minmax(0,1fr)}
}
/* titles rise out of a mask, page heads on load, sections on scroll */
.phead .sec__title{clip-path:inset(-4% 0 -12% 0);animation:titleIn 1s .05s cubic-bezier(.22,1,.36,1) both}
.phead .sec__idx,.phead .sec__meta{animation:fadeIn .7s .45s both}
.phead .sec__lead,.phead .phead__price,.phead .crumbs{animation:fadeUp .8s .5s cubic-bezier(.22,1,.36,1) both}
.sec:not(.phead) .sec__title{clip-path:inset(0 0 100% 0);transform:translateY(.35em);transition:clip-path .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.sec.is-in .sec__title{clip-path:inset(-4% 0 -12% 0);transform:none}
@keyframes titleIn{from{clip-path:inset(0 0 100% 0);transform:translateY(.35em)}to{clip-path:inset(-4% 0 -12% 0);transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .phead .sec__title,.phead .sec__idx,.phead .sec__meta,.phead .sec__lead,.phead .phead__price,.phead .crumbs{animation:none}
  .sec:not(.phead) .sec__title{clip-path:none;transform:none;transition:none}
}

/* ---------- motion ---------- */
.sec::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.sec.is-in::before{transform:scaleX(1)}
.sec__head{opacity:.001;transform:translateY(12px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.sec.is-in .sec__head{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sec::before{transform:scaleX(1);transition:none}
  .sec__head{opacity:1;transform:none;transition:none}
  .msg{animation:none;opacity:1;transform:none}
}

/* ---------- buttons ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;
  border:1px solid var(--ink);background:var(--ink);color:var(--bg);
  font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:color .3s,border-color .3s,transform .18s cubic-bezier(.22,1,.36,1)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.btn:hover::before{transform:none}
.btn:hover{color:#f4f5f6;border-color:var(--accent)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{color:#f4f5f6}
.btn--light{background:var(--dark-ink);border-color:var(--dark-ink);color:var(--dark)}
.btn--light:hover{color:#f4f5f6;border-color:var(--accent)}
/* the arrow loop: works anywhere an <i class="ar"> sits inside a link or a button */
.ar{--dx:115%;--dy:0%;position:relative;display:inline-block;width:1.3em;height:1.2em;overflow:hidden;
  font-style:normal;vertical-align:-.2em}
.ar[data-g="↓"]{--dx:0%;--dy:115%}
.ar b{position:absolute;left:0;top:0;width:100%;text-align:center;writing-mode:horizontal-tb;font-weight:inherit;transition:transform .42s cubic-bezier(.65,0,.35,1)}
.ar b+b{transform:translate(calc(var(--dx) * -1), calc(var(--dy) * -1))}
:is(a,button):hover .ar b{transform:translate(var(--dx), var(--dy))}
:is(a,button):hover .ar b+b{transform:none}
@media (prefers-reduced-motion:reduce){.ar b{transition:none} .ar b+b{display:none}}
.btn--big{padding:16px 24px;font-size:13px}

/* ---------- page header ---------- */
.phead{padding-block:calc(57px + var(--s7)) var(--s6)}
.phead .sec__head{padding-top:0}
.phead .sec__lead{margin-bottom:0}
.sec__title--s{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em}
.crumbs{margin:0 0 var(--s5);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.sec--list{border-top:0;padding-top:var(--s5)}
.sec--calc{border-top:0;padding-top:var(--s4)}
.sec--for{border-top:1px solid var(--line)}

/* ---------- directions (home) ---------- */
.dirs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.dirs li{border-bottom:1px solid var(--line)}
.dirs a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:var(--s2) var(--s4);align-items:baseline;padding:var(--s5) var(--s3);
  transition:background .3s cubic-bezier(.22,1,.36,1),color .3s}
.dirs small{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--muted);grid-row:span 2}
.dirs b{font:700 clamp(20px,2.1vw,27px)/1.15 var(--display);letter-spacing:-.035em}
.dirs p{margin:0;grid-column:2;color:var(--muted);font-size:15px;line-height:1.5;max-width:52ch;transition:color .3s}
.dirs i{font-style:normal;font:500 14px/1 var(--mono);color:var(--muted);grid-row:span 2;transition:color .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.dirs a:hover{background:var(--dark);color:var(--dark-ink)}
.dirs a:hover p{color:var(--dark-muted)} .dirs a:hover i{color:#8ab4dd;transform:translateX(4px)} .dirs a:hover small{color:#8ab4dd}

/* ---------- steps (process, principles) ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6) var(--s5);border-top:1px solid var(--line);padding-top:var(--s6)}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps li{display:flex;flex-direction:column;gap:var(--s3)}
.steps small{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--muted)}
.steps b{font:700 clamp(18px,1.6vw,22px)/1.2 var(--display);letter-spacing:-.03em}
.steps p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55;text-wrap:pretty}
@media (max-width:900px){.steps,.steps--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps,.steps--3{grid-template-columns:minmax(0,1fr)}}

/* ---------- case cards (home) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.card{display:flex;flex-direction:column;gap:var(--s3);color:inherit}
.card__img{display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line-strong);background:var(--dark)}
.card__img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.card:hover .card__img img{transform:scale(1.03)}
.card__body{display:flex;flex-direction:column;gap:4px}
.card__body b{font:700 18px/1.2 var(--display);letter-spacing:-.03em}
.card__body span{color:var(--muted);font-size:14px;line-height:1.45}
.card__body i{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-top:6px;transition:color .2s}
.card:hover .card__body i{color:var(--accent)}
.more{margin:var(--s6) 0 0}
@media (max-width:900px){.cards{grid-template-columns:minmax(0,1fr)}}
.sites__go{display:block;margin-top:var(--s2);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:color .3s}
.sites__item a:hover .sites__go,.sites__item.is-on a .sites__go{color:#8ab4dd}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s5) var(--s2);
  font:600 clamp(17px,1.5vw,20px)/1.3 var(--display);letter-spacing:-.025em;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:12px;height:12px;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;background:currentColor;left:0;top:5px;width:12px;height:1.5px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq summary:hover{color:var(--accent)}
.faq p{margin:0;padding:0 var(--s2) var(--s5);color:var(--ink-2);font-size:16px;line-height:1.6;max-width:66ch}
.faq details[open] p{animation:faq-in .35s cubic-bezier(.22,1,.36,1)}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- "good for" lists ---------- */
.for{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);border-top:1px solid var(--line);padding-top:var(--s6)}
.for li{display:flex;flex-direction:column;gap:var(--s3)}
.for small{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--muted)}
.for p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
@media (max-width:760px){.for{grid-template-columns:minmax(0,1fr)}}

/* ---------- cta band ---------- */
.cta{background:var(--dark);color:var(--dark-ink);padding-block:clamp(var(--s8),11vh,var(--s10))}
.cta__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5) var(--s7);align-items:end}
.cta__title{margin:0;grid-column:1;font:900 clamp(30px,5.2vw,72px)/1.02 var(--display);letter-spacing:-.045em;max-width:16ch}
.cta__sub{margin:0;grid-column:1;color:var(--dark-muted);font-size:clamp(15px,1.3vw,18px);line-height:1.55;max-width:52ch}
.cta__in .btn{grid-column:2;grid-row:1/3;align-self:end}
@media (max-width:760px){.cta__in{grid-template-columns:minmax(0,1fr)}.cta__in .btn{grid-column:1;grid-row:auto;justify-self:start}}

/* ---------- case page ---------- */
.phead--case{padding-bottom:var(--s5)}
.sec--case{border-top:0;padding-top:0}
.case__shot{margin:0 0 var(--s7);border:1px solid var(--line-strong);background:var(--dark);overflow:hidden}
.case__shot img{width:100%;display:block}
.case__grid{display:grid;grid-template-columns:1.35fr 1fr .8fr;gap:var(--s7) var(--s7)}
@media (max-width:900px){.case__grid{grid-template-columns:minmax(0,1fr)}}
.case__block{display:flex;flex-direction:column;gap:var(--s3)}
.case__h{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.case__block p{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--ink);text-wrap:pretty}
.case__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.case__list li{padding:var(--s3) 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--ink-2)}
.case__list li:last-child{border-bottom:1px solid var(--line)}
.case__facts dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s5);font-size:15px}
.case__facts dt{font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.case__facts dd{margin:0;color:var(--ink)}
.case__facts a{border-bottom:1px solid var(--line-strong)}
.case__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s8) 0 var(--s7)}
.case__next{margin:0;padding-top:var(--s5);border-top:1px solid var(--line);font:500 12px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.case__next a{color:var(--ink);border-bottom:1px solid var(--line-strong)}
@media (max-width:760px){.case__grid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}}

/* ---------- contact page ---------- */
.contact__ref{margin:var(--s5) 0 0;display:inline-flex;gap:8px;align-items:baseline;padding:8px 12px;border:1px solid var(--line-strong);font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink)}
.contact__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s6) 0 var(--s4)}
.contact__addr{margin:0;font:500 13px/1.6 var(--mono);letter-spacing:.04em;color:var(--muted)}
.contact__addr a{border-bottom:1px solid var(--line)}
.contact__addr a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- footer ---------- */
.foot{background:var(--dark);color:var(--dark-ink);border-top:1px solid var(--dark-line)}
.foot__in{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:var(--s7) var(--s9);padding-block:var(--s8) var(--s7)}
.foot__col{display:flex;flex-direction:column;gap:var(--s2)}
.foot__col a{color:var(--dark-muted);font:400 15px/1.6 var(--body);transition:color .2s}
.foot__col a:hover{color:var(--dark-ink)}
.foot__h{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dark-ink);margin-bottom:var(--s2)}
.foot__col--wide{justify-self:end;text-align:right;align-items:flex-end}
.foot__name{font:700 clamp(22px,2.2vw,30px)/1.1 var(--display);letter-spacing:-.035em}
.foot__note{font:500 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dark-muted)}
.foot__cta{margin-top:var(--s3)}
.foot__bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);padding-block:var(--s5);border-top:1px solid var(--dark-line);
  font:400 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dark-muted)}
.foot__egg{color:var(--dark-muted);transition:color .2s}
.foot__egg:hover{color:#8ab4dd}
@media (max-width:760px){.foot__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7) var(--s5)}.foot__col--wide{grid-column:1/-1;justify-self:start;text-align:left;align-items:flex-start}}
@media (max-width:440px){.foot__in{grid-template-columns:minmax(0,1fr)}}
.foot__col{min-width:0}.foot__col a{overflow-wrap:anywhere}

/* ---------- page transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .16s ease both}
::view-transition-new(root){animation:vt-in .28s cubic-bezier(.22,1,.36,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html.js main{animation:page-in .42s cubic-bezier(.22,1,.36,1) both}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html.is-leaving main{opacity:0;transform:translateY(-6px);transition:opacity .14s ease,transform .14s ease}
/* staggered rows once a section is on screen (only when JS is there to trigger it) */
html.js .sec :is(.dirs li,.steps li,.cards .card,.for li,.faq details,.sites__item,.links li){
  opacity:.001;transform:translateY(10px);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
html.js .sec.is-in :is(.dirs li,.steps li,.cards .card,.for li,.faq details,.sites__item,.links li){opacity:1;transform:none}
.sec.is-in :is(.dirs li,.steps li,.cards .card,.for li,.faq details,.sites__item,.links li):nth-child(2){transition-delay:.06s}
.sec.is-in :is(.dirs li,.steps li,.cards .card,.for li,.faq details,.sites__item,.links li):nth-child(3){transition-delay:.12s}
.sec.is-in :is(.dirs li,.steps li,.cards .card,.for li,.faq details,.sites__item,.links li):nth-child(4){transition-delay:.18s}
.sec.is-in :is(.dirs li,.steps li,.cards .card,.for li,.faq details,.sites__item,.links li):nth-child(5){transition-delay:.24s}
.sec.is-in :is(.dirs li,.steps li,.cards .card,.for li,.faq details,.sites__item,.links li):nth-child(6){transition-delay:.30s}
.phead .sec__head,.cta__in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  html.js main{animation:none}
  html.js .sec :is(.dirs li,.steps li,.cards .card,.for li,.faq details,.sites__item,.links li){opacity:1;transform:none;transition:none}
  .btn,.btn i,.card__img img{transition:none}
  .faq details[open] p{animation:none}
}

/* ---------- prices ---------- */
.prices{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.prices li{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:var(--s2) var(--s5);align-items:baseline;padding:var(--s5) var(--s3);border-bottom:1px solid var(--line)}
.prices small{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
.prices b{font:700 clamp(18px,1.9vw,24px)/1.15 var(--display);letter-spacing:-.03em;display:block}
.prices li>div p{margin:var(--s2) 0 0;color:var(--muted);font-size:15px;line-height:1.5;max-width:52ch}
.prices__t,.prices__p{display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right;white-space:nowrap}
.prices__t i,.prices__p i{font-style:normal;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.prices__t em{font-style:normal;font:500 14px/1 var(--mono);color:var(--ink-2)}
.prices__p em{font-style:normal;font:700 clamp(18px,1.8vw,24px)/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.prices__p u{text-decoration:none;font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--muted)}
.prices__note{margin:var(--s5) 0 0;font-size:14px;line-height:1.55;color:var(--muted);max-width:66ch}
.phead__price{margin:var(--s4) 0 0;font:500 12px/1.7 var(--mono);letter-spacing:.06em;color:var(--muted)}
.phead__price b{font-weight:500;color:var(--ink)}
.phead__price a{color:var(--ink);border-bottom:1px solid var(--line-strong)}
@media (max-width:760px){
  .prices li{grid-template-columns:34px minmax(0,1fr);padding-inline:var(--s2)}
  .prices__t,.prices__p{grid-column:2;flex-direction:row;justify-content:space-between;align-items:baseline;text-align:left}
}
html.js .sec :is(.prices li){opacity:.001;transform:translateY(10px);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
html.js .sec.is-in :is(.prices li){opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .sec :is(.prices li){opacity:1;transform:none;transition:none}}

/* ---------- 01 what I do: four full-height panes ---------- */
.panes-sec{padding-block:0 var(--s9)}
.panes{list-style:none;margin:0;padding:0;display:flex;height:100svh;min-height:560px;
  background:var(--dark);color:var(--dark-ink);border-block:1px solid var(--dark-line)}
.pane{flex:1 1 0;min-width:0;position:relative;transition:flex-grow .75s cubic-bezier(.22,1,.36,1)}
.pane+.pane{border-left:1px solid var(--dark-line)}
.panes:hover .pane{flex-grow:.86}
.pane:hover{flex-grow:2.3}
.pane>a{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;padding:var(--s6) var(--s5);color:inherit}
.pane>a::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 24%,rgba(20,22,26,.86) 74%,var(--dark) 100%)}
.pane__code{position:absolute;left:0;right:0;top:0;z-index:0;padding:var(--s5) var(--s5) 0;
  font:400 11px/1.9 var(--mono);white-space:pre;color:#eceef0;opacity:.07;pointer-events:none;
  transition:opacity .5s;animation:paneScroll 26s linear infinite;animation-play-state:paused}
.pane:hover .pane__code{opacity:.32;animation-play-state:running}
@keyframes paneScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.pane__b{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.pane__b small{font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--dark-muted);transition:color .3s}
.pane__b>b{font:700 clamp(21px,2.3vw,33px)/1.1 var(--display);letter-spacing:-.035em;text-wrap:balance}
.pane__b p{margin:0;max-width:34ch;color:var(--dark-muted);font-size:15px;line-height:1.5;
  opacity:0;transform:translateY(10px);transition:opacity .45s,transform .55s cubic-bezier(.22,1,.36,1)}
.pane__b .ar{color:#8ab4dd;opacity:0;transform:translateY(8px);transition:opacity .45s .06s,transform .55s .06s cubic-bezier(.22,1,.36,1)}
.pane:hover .pane__b p,.pane:hover .pane__b .ar{opacity:1;transform:none}
.pane:hover .pane__b small{color:#8ab4dd}
.pane::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;background:#8ab4dd;
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.pane:hover::after{transform:none}
@media (max-width:860px){
  .panes{flex-direction:column;height:auto;min-height:0}
  .pane{flex:none;min-height:44svh}
  .pane+.pane{border-left:0;border-top:1px solid var(--dark-line)}
  .panes:hover .pane,.pane:hover{flex-grow:0}
  .pane__b p,.pane__b .ar{opacity:1;transform:none}
  .pane__code{opacity:.12}
}
@media (prefers-reduced-motion:reduce){
  .pane,.pane__code,.pane__b p,.pane__b .ar,.pane::after{transition:none;animation:none}
  .pane__b p,.pane__b .ar{opacity:1;transform:none}
}
html[lang="ka"] .pane__b>b{font-weight:900}

/* ---------- 01 showcase: the sites, live, inside a laptop ---------- */
.show{position:relative;overflow:hidden;isolation:isolate}
.show__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.ascii{position:absolute;left:50%;top:0;transform:translateX(-50%);margin:0;font:400 10px/1 var(--mono);white-space:pre;
  color:var(--ink);opacity:0;transition:opacity 2.8s ease;user-select:none}
.ascii.is-on{opacity:.12}
.show__grid{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:var(--s8);align-items:start;margin-top:var(--s7)}
/* the laptop */
.mac{position:relative;z-index:1}
.mac::before{content:"";position:absolute;inset:-14% -10% -6%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--bg) 58%,rgba(240,240,241,.75) 78%,transparent 100%)}
.mac__photo{position:relative;z-index:3;line-height:0}
.mac__img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.30))}
/* the glass is at 11.49% / 6.47% / 76.85% x 77.8%; the screen also covers most of the black bezel, so the rim reads thin */
.mac__screen{position:absolute;left:10.25%;top:3.9%;width:79.3%;height:82.6%;border-radius:1.4% / 2.2%;background:#0b0c0e;overflow:hidden;border-radius:2px;container-type:inline-size}
.mac__shot{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .6s;pointer-events:none}
.mac__shot.is-gone{opacity:0}
.mac__frame{position:absolute;inset:0;z-index:1;--k:1}
.mac__frame iframe{position:absolute;left:0;top:0;border:0;background:#fff;width:1280px;height:800px;transform-origin:0 0;transform:scale(var(--k))}
.mac__frame.is-native iframe{height:100%}
.mac__frame.is-native iframe{width:100%;height:100%;transform:none}
.mac__preview{position:absolute;inset:0;z-index:3;overflow:auto;background:#fff;overscroll-behavior:contain;scrollbar-width:thin}
.mac__preview[hidden]{display:none}
.mac__preview img{display:block;width:100%;height:auto}
.mac__badge,.mac__load{position:absolute;z-index:4;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:#eceef0;background:rgba(20,22,26,.86);padding:7px 9px}
.mac__badge{right:10px;top:10px} .mac__load{left:50%;bottom:12px;transform:translateX(-50%);white-space:nowrap}
.mac__badge[hidden],.mac__load[hidden]{display:none}
.mac__stone{display:block;width:62%;margin:-1.2% auto 0;
  filter:grayscale(1) contrast(1.04) brightness(.96)}
/* the switcher */
.show__panel{display:flex;flex-direction:column;gap:var(--s4)}
.show__tabs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.show__tab{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px var(--s3);align-items:start;width:100%;text-align:left;
  padding:var(--s3) var(--s2);border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;
  font:inherit;transition:background .25s,color .25s}
.show__tab small{grid-row:span 2;font:500 10px/1.7 var(--mono);letter-spacing:.14em;color:var(--muted)}
.show__tab b{font:700 15px/1.25 var(--display);letter-spacing:-.02em}
.show__tab span{font-size:13px;line-height:1.4;color:var(--muted)}
.show__tab:hover{background:rgba(20,22,26,.06)}
.show__tab.is-on{background:var(--ink);color:var(--bg)}
.show__tab.is-on small,.show__tab.is-on span{color:rgba(240,240,241,.72)}
.show__actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.show__note,.show__hint{margin:0;font:500 11px/1.6 var(--mono);letter-spacing:.05em;color:var(--muted)}
.show__note[hidden]{display:none}
html.js .sec :is(.show__tab){opacity:.001;transform:translateY(8px);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
html.js .sec.is-in :is(.show__tab){opacity:1;transform:none}
@media (max-width:1100px){
  .show__grid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .show__tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s2);border-top:0}
  .show__tab{border:1px solid var(--line)}
}
@media (max-width:700px){
  .show__bg .ascii+.ascii{display:none} .ascii{top:0;transform:translateX(-50%)} .ascii.is-on{opacity:.1}
  .mac{margin-inline:calc(var(--gut) * -1 + 8px)}                 /* a bigger screen on the phone */
  .mac__img{display:none}                                          /* the phone shows the screen alone, framed like a tablet */
  .mac__screen{position:relative;left:auto;top:auto;width:auto;height:auto;aspect-ratio:3/4;border:6px solid #1a1c20;border-radius:10px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
  .mac__stone{width:60%;max-height:26vh}
  .show__hint{display:none}
}
@media (prefers-reduced-motion:reduce){.ascii{transition:none} html.js .sec :is(.show__tab){opacity:1;transform:none;transition:none}}

/* ---------- the desktop inside the screen ---------- */
.os{position:absolute;inset:0;background:#0b0c0e;color:#eceef0;overflow:hidden;font-family:var(--mono)}
.os{background:radial-gradient(120% 90% at 50% 30%,#23262c 0,#111317 55%,#08090b 100%)}
.os::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(236,238,240,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(236,238,240,.06) 1px,transparent 1px);background-size:6cqw 6cqw}
.os__wall{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;white-space:pre;line-height:1;color:#eceef0;opacity:.13;
  pointer-events:none;user-select:none}
.os__bar{position:absolute;left:0;right:0;top:0;z-index:3;height:3.2cqw;min-height:15px;display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5cqw;background:rgba(28,30,34,.78);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);
  font:500 clamp(6px,1.28cqw,13px)/1 -apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;color:#f2f3f5}
.os__bar-l{display:flex;align-items:center;gap:1.7cqw;min-width:0}
.os__bar-l b{font-weight:700}
.os__apple{display:inline-flex} .os__apple svg{width:1.35cqw;height:1.35cqw;min-width:7px;min-height:7px;fill:#f2f3f5}
.os__menus{display:flex;gap:1.7cqw;color:rgba(242,243,245,.92);white-space:nowrap}
.os__bar-r{display:flex;align-items:center;gap:1.4cqw;white-space:nowrap}
.os__bar-r i{display:inline-flex} .os__bar-r svg{width:1.5cqw;height:1.5cqw;min-width:8px;min-height:8px;fill:none;stroke:#f2f3f5;stroke-width:1.8;stroke-linecap:round}
.os__batt svg{width:2.4cqw;height:1.3cqw}
.os__icons{position:absolute;right:1.8%;top:6.5%;z-index:2;display:grid;grid-template-columns:repeat(2,auto);gap:1.4cqw 1cqw}
.os__icon{display:flex;flex-direction:column;align-items:center;gap:.8cqw;width:11.5cqw;padding:.7cqw .4cqw;border:0;border-radius:.8cqw;
  background:transparent;color:#eceef0;cursor:pointer;font:inherit;transition:background .2s}
.os__icon:hover{background:rgba(236,238,240,.08)}
.os__icon i,.os__dock-i{display:grid;place-items:center;width:6.6cqw;height:6.6cqw;border-radius:1.5cqw;color:#eceef0;font-style:normal;
  background:linear-gradient(180deg,#2b2f36,#14171b);border:1px solid rgba(236,238,240,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  font:700 clamp(8px,2.3cqw,20px)/1 var(--display);letter-spacing:-.04em}
.os__icon span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 clamp(6px,1.15cqw,12px)/1.3 -apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.os__icon.is-on i{outline:1px solid #8ab4dd;outline-offset:1px}
.os__dock{position:absolute;left:50%;bottom:1.8%;z-index:3;transform:translateX(-50%);display:flex;gap:1cqw;padding:.9cqw;border-radius:2cqw;
  background:rgba(20,22,26,.72);backdrop-filter:blur(8px);border:1px solid rgba(236,238,240,.14)}
.os__dock-i{position:relative;width:5.4cqw;height:5.4cqw;border-radius:1.2cqw;font-size:clamp(7px,1.9cqw,16px);cursor:pointer;transition:transform .2s}
.os__dock-home svg{width:55%;height:55%;fill:none;stroke:#eceef0;stroke-width:1.8;stroke-linecap:round}
.os__dock-sep{width:1px;align-self:stretch;margin:.4cqw .3cqw;background:rgba(236,238,240,.2)}
.os__dock-i:hover{transform:translateY(-.6cqw)}
.os__dock-i.is-on::after{content:"";position:absolute;left:50%;bottom:-.75cqw;width:.5cqw;height:.5cqw;min-width:3px;min-height:3px;border-radius:50%;background:#eceef0;transform:translateX(-50%)}
.os__win{position:absolute;left:6%;top:8%;width:76%;height:80%;z-index:4;display:flex;flex-direction:column;overflow:hidden;
  background:#0f1114;border:1px solid rgba(255,255,255,.14);border-radius:1.1cqw;box-shadow:0 3cqw 7cqw -2cqw rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.6)}
.os__win[hidden]{display:none}
.os__win.is-max{left:0!important;top:3.2cqw!important;width:100%!important;height:calc(100% - 3.2cqw)!important;border-radius:0;border:0}
.os__title{flex:none;display:flex;align-items:center;gap:1.1cqw;height:4.6cqw;min-height:20px;padding:0 1.1cqw;
  background:linear-gradient(#2c2f35,#24272b);border-bottom:1px solid rgba(0,0,0,.65);cursor:grab;user-select:none;touch-action:none}
.os.is-drag .os__title{cursor:grabbing}
.os__lights{display:flex;gap:.75cqw;margin-right:.4cqw}
.os__lights>*{width:1.3cqw;height:1.3cqw;min-width:6px;min-height:6px;border-radius:50%;border:0;padding:0;background:#5a5e66}
.os__close{background:#ff5f57!important;cursor:pointer} .os__min{background:#febc2e!important;cursor:pointer} .os__max{background:#28c840!important;cursor:pointer}
.os__win.is-min{transform:scale(.15) translateY(260%);opacity:0;transition:transform .28s ease-in,opacity .26s ease-in}
.os__win.is-back{transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .25s}
.os__nav,.os__tools{display:flex;gap:.5cqw}
.os__nb{display:grid;place-items:center;width:2.5cqw;height:2.5cqw;min-width:12px;min-height:12px;padding:0;border:0;border-radius:.5cqw;
  background:transparent;color:rgba(242,243,245,.85);cursor:pointer;transition:background .2s}
.os__nb:hover{background:rgba(255,255,255,.1)} .os__nb[disabled]{opacity:.3;cursor:default}
.os__nb svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.os__url{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:.6cqw;height:3cqw;min-height:14px;border-radius:.7cqw;
  background:rgba(255,255,255,.08);font:500 clamp(6px,1.15cqw,12px)/1 -apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;color:rgba(242,243,245,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os__url i{display:inline-flex} .os__url i svg{width:1.1cqw;height:1.1cqw;min-width:6px;min-height:6px;fill:none;stroke:currentColor;stroke-width:2}
.os__grip{position:absolute;right:0;bottom:0;z-index:6;width:2.4cqw;height:2.4cqw;min-width:12px;min-height:12px;cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 55%,rgba(255,255,255,.45) 55%,rgba(255,255,255,.45) 62%,transparent 62%,transparent 75%,rgba(255,255,255,.45) 75%,rgba(255,255,255,.45) 82%,transparent 82%);touch-action:none}
.os__win.is-max .os__grip{display:none}
.os.is-drag .os__body{pointer-events:none}
.os__body{position:relative;flex:1;min-height:0;background:#fff;overflow:hidden}
@media (max-width:700px){
  .os__icons{left:4%;right:4%;top:9%;grid-template-columns:repeat(3,1fr);gap:2cqw 1cqw} .os__icon{width:auto}
  .os__icon i{width:12cqw;height:12cqw;border-radius:2.6cqw} .os__icon span{font-size:clamp(7px,2.4cqw,11px)}
  .os__bar{height:6%;font-size:clamp(7px,2.2cqw,11px)} .os__menus{display:none} .os__bar-r i{display:none}
  .os__grip,.os__nav{display:none}
  .os__dock{gap:1.6cqw;padding:1.4cqw;border-radius:3cqw} .os__dock-i{width:9cqw;height:9cqw;border-radius:2cqw;font-size:clamp(8px,3.4cqw,14px)}
  .os__win,.os__win.is-max{left:0!important;top:6%!important;width:100%!important;height:94%!important;border:0;border-radius:0}
  .os__title{height:8cqw;gap:2cqw} .os__lights>*{width:2.4cqw;height:2.4cqw} .os__url{height:5.6cqw;font-size:clamp(7px,2.2cqw,11px)} .os__max{display:none} .os__nb{width:5cqw;height:5cqw}
}

/* ---------- showcase: the scene appears, the screen powers on, the window opens ---------- */
html.js .show .mac{opacity:.001;transform:translateY(26px) scale(.985);transition:opacity .9s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}
html.js .show.is-in .mac{opacity:1;transform:none}
.os::after{content:"";position:absolute;inset:0;z-index:9;background:#000;opacity:1;transition:opacity .55s ease .15s}
.os.is-boot::after{opacity:0;pointer-events:none}
.os.is-off .os__bar,.os.is-off .os__icons,.os.is-off .os__dock{opacity:0}
.os.is-boot .os__bar{animation:barIn .5s .3s cubic-bezier(.22,1,.36,1) both}
.os.is-boot .os__icon{animation:popIn .45s cubic-bezier(.22,1,.36,1) both}
.os.is-boot .os__icon:nth-child(2){animation-delay:.42s} .os.is-boot .os__icon:nth-child(3){animation-delay:.5s} .os.is-boot .os__icon:nth-child(4){animation-delay:.58s}
.os.is-boot .os__icon:nth-child(5){animation-delay:.66s} .os.is-boot .os__icon:nth-child(6){animation-delay:.74s} .os.is-boot .os__icon:nth-child(1){animation-delay:.34s}
.os.is-boot .os__dock{animation:dockIn .55s .55s cubic-bezier(.22,1,.36,1) both}
.os__win.is-open{animation:winIn .5s cubic-bezier(.22,1,.36,1)}
.os__body{transition:opacity .35s}
.os.is-switch .os__body{opacity:.25}
@keyframes barIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes dockIn{from{opacity:0;transform:translate(-50%,120%)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes winIn{from{opacity:0;transform:scale(.96) translateY(1.5cqw)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html.js .show .mac{opacity:1;transform:none;transition:none}
  .os::after{display:none} .os.is-off .os__bar,.os.is-off .os__icons,.os.is-off .os__dock{opacity:1}
  .os.is-boot .os__bar,.os.is-boot .os__icon,.os.is-boot .os__dock,.os__win.is-open{animation:none}
}

/* ---------- tools: the payback chart ---------- */
.calc__chart{position:relative;padding-top:var(--s5)}
.calc__bars{position:relative;display:flex;align-items:flex-end;gap:5px;height:120px;border-bottom:1px solid rgba(236,238,240,.18)}
.calc__bars i{flex:1;min-width:0;height:0;background:rgba(138,180,221,.28);border-top:2px solid rgba(138,180,221,.55);
  transition:height .6s cubic-bezier(.22,1,.36,1),background .3s;position:relative}
.calc__bars i.is-pb{background:#8ab4dd;border-top-color:#eceef0}
.calc__bars i.is-pb::after{content:attr(data-y);position:absolute;left:50%;top:-22px;transform:translateX(-50%);font:500 10px/1 var(--mono);letter-spacing:.1em;color:#eceef0;white-space:nowrap}
.calc__bars i::before{content:attr(data-n);position:absolute;left:0;right:0;bottom:-18px;text-align:center;font:400 9px/1 var(--mono);color:rgba(236,238,240,.35)}
.calc__line{position:absolute;left:0;right:0;top:var(--s5);border-top:1px dashed rgba(236,238,240,.35);pointer-events:none}
.calc__line span{position:absolute;right:0;top:-16px;font:500 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(236,238,240,.5)}
.calc__cap{margin:var(--s6) 0 0;font:500 11px/1.5 var(--mono);letter-spacing:.08em;color:var(--dark-muted);max-width:70ch}
.calc__stat b{transition:color .3s}
@media (max-width:700px){.calc__bars{height:90px;gap:3px} .calc__bars i::before{display:none}}

/* ---------- bots: scenarios ---------- */
.chat{max-width:620px}
.chat__scen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.chat__scenT{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:var(--s2)}
.chat__chip{border:1px solid var(--line-strong);background:transparent;color:var(--ink);padding:7px 10px;font:500 11px/1 var(--mono);letter-spacing:.06em;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.chat__chip:hover{border-color:var(--ink)}
.chat__chip.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chat__head span{font:500 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.chat__foot{padding:var(--s3) var(--s4);border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.msg--proc{align-self:flex-start;width:min(78%,300px);padding:var(--s3) var(--s4);border:1px solid var(--line);background:var(--bg-2)}
.msg--proc small{display:block;font:500 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.msg--proc i{display:block;height:3px;background:var(--line)}
.msg--proc i::after{content:"";display:block;height:100%;width:0;background:var(--ink);animation:procBar var(--dur,1.4s) cubic-bezier(.4,0,.2,1) forwards}
@keyframes procBar{to{width:100%}}
.msg--card{align-self:flex-start;border:1px solid var(--ink);padding:var(--s3) var(--s4);background:var(--bg);display:grid;gap:4px}
.msg--card b{font:700 15px/1.2 var(--display);letter-spacing:-.02em}
.msg--card span{font:500 12px/1.5 var(--mono);color:var(--ink-2)}
.msg--card em{font:500 10px/1.4 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.msg--img span.is-ok::after{content:"✓";position:absolute;inset:auto 4px 3px auto;font:700 11px/1 var(--mono);color:#fff}

/* ---------- cases: the reveal and the tour ---------- */
html.js .case__shot{clip-path:inset(0 0 100% 0);animation:shotIn 1.1s .2s cubic-bezier(.22,1,.36,1) forwards}
html.js .case__shot img{transform:scale(1.06);animation:shotZoom 1.6s .2s cubic-bezier(.22,1,.36,1) forwards}
@keyframes shotIn{to{clip-path:inset(0)}}
@keyframes shotZoom{to{transform:none}}
.tour{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr) minmax(0,1fr);gap:var(--s6);margin:0 0 var(--s8);align-items:start}
.tour__p{display:flex;flex-direction:column;gap:var(--s3);opacity:.001;transform:translateY(18px);transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.tour.is-in .tour__p{opacity:1;transform:none}
.tour.is-in .tour__p:nth-child(2){transition-delay:.18s} .tour.is-in .tour__p:nth-child(3){transition-delay:.36s}
.tour__l{display:flex;align-items:baseline;gap:var(--s3);font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.tour__l small{font:500 10px/1;letter-spacing:.16em;color:var(--muted)}
.tour__frame{border:1px solid var(--line-strong);background:#fff;overflow:hidden;border-radius:6px}
.tour__bar{display:flex;align-items:center;gap:5px;height:22px;padding:0 8px;background:#e7e8ea;border-bottom:1px solid var(--line-strong)}
.tour__bar b{width:7px;height:7px;border-radius:50%;background:#c4c7cb}
.tour__bar span{flex:1;margin-left:6px;height:12px;border-radius:3px;background:#fff;font:500 8px/12px var(--mono);letter-spacing:.06em;color:var(--muted);text-align:center;overflow:hidden;white-space:nowrap}
.tour__scroll{container-type:size;height:360px;overflow:hidden;background:#fff}
.tour__scroll img{display:block;width:100%;height:auto;animation:tourScroll 16s linear infinite alternate;animation-play-state:paused}
.tour.is-in .tour__scroll img{animation-play-state:running}
@keyframes tourScroll{from{transform:translateY(0)}to{transform:translateY(calc(-100% + 100cqh))}}
.tour__phone{position:relative;width:min(100%,190px);margin:0 auto;padding:7px;border-radius:32px;background:#111316;border:1px solid #2a2d33;box-shadow:inset 0 0 0 1px #000,0 20px 40px -22px rgba(0,0,0,.5)}
.tour__phone i{position:absolute;left:50%;top:15px;width:34%;height:19px;border-radius:12px;background:#000;transform:translateX(-50%);z-index:2}   /* the island */
.tour__phone .tour__scroll{height:360px;border-radius:26px}
.tour__fx{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.tour__fx li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink-2)}
.tour__fx small{font:500 10px/1.8 var(--mono);letter-spacing:.14em;color:var(--muted)}
@media (max-width:900px){.tour{grid-template-columns:minmax(0,1fr)} .tour__scroll,.tour__phone .tour__scroll{height:300px}}
@media (prefers-reduced-motion:reduce){html.js .case__shot,html.js .case__shot img{animation:none;clip-path:none;transform:none} .tour__p{opacity:1;transform:none;transition:none} .tour__scroll img{animation:none}}

/* ---------- services: a demo in every pane ---------- */
.pane__demo{position:absolute;left:var(--s5);right:var(--s5);top:12%;height:44%;z-index:2;display:block;opacity:0;transform:translateY(8px);
  transition:opacity .45s .1s,transform .55s .1s cubic-bezier(.22,1,.36,1);pointer-events:none}
.pane:hover .pane__demo{opacity:1;transform:none}
.pane:hover .pane__code{opacity:.12}
/* sites: a page assembling itself */
.wire{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:12% 34% 26% 12%;gap:5%;}
.wire .w{display:block;background:rgba(236,238,240,.16);border:1px solid rgba(236,238,240,.3);opacity:0;transform:scaleX(.6);transform-origin:left;border-radius:2px}
.wire .w1{grid-column:1/-1} .wire .w2{grid-column:1/-1;background:rgba(236,238,240,.26)} .wire .w6{grid-column:1/-1;grid-row:4}
.pane.is-play .wire .w{animation:wireIn .5s cubic-bezier(.22,1,.36,1) forwards}
.pane.is-play .wire .w2{animation-delay:.15s} .pane.is-play .wire .w3{animation-delay:.3s} .pane.is-play .wire .w4{animation-delay:.4s}
.pane.is-play .wire .w5{animation-delay:.5s} .pane.is-play .wire .w6{animation-delay:.65s} .pane.is-play .wire .w7{display:none}
@keyframes wireIn{to{opacity:1;transform:none}}
/* tools: a number counting and bars growing */
.mini{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s3)}
.mini__num{font:700 clamp(28px,3.4vw,52px)/1 var(--display);letter-spacing:-.04em;color:#8ab4dd}
.mini__bars{display:flex;align-items:flex-end;gap:6px;height:46%;border-bottom:1px solid rgba(236,238,240,.2)}
.mini__bars i{flex:1;height:0;background:rgba(138,180,221,.35);border-top:2px solid #8ab4dd;transition:height .7s cubic-bezier(.22,1,.36,1)}
.pane.is-play .mini__bars i{height:calc(var(--h) * 100%)}
.pane.is-play .mini__bars i:nth-child(2){transition-delay:.08s} .pane.is-play .mini__bars i:nth-child(3){transition-delay:.16s}
.pane.is-play .mini__bars i:nth-child(4){transition-delay:.24s} .pane.is-play .mini__bars i:nth-child(5){transition-delay:.32s} .pane.is-play .mini__bars i:nth-child(6){transition-delay:.4s}
/* bots: a dialogue */
.talk{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.talk__b{display:block;max-width:86%;padding:8px 10px;font:500 12px/1.4 var(--body);font-style:normal;opacity:0;transform:translateY(8px)}
.talk__b--me{align-self:flex-end;background:#eceef0;color:#14161a}
.talk__b--bot{align-self:flex-start;border:1px solid rgba(236,238,240,.35);color:#eceef0}
.talk__t{display:flex;gap:4px;align-self:flex-start;padding:8px 10px;opacity:0}
.talk__t b{width:5px;height:5px;background:rgba(236,238,240,.7);animation:dot 1s infinite}
.talk__t b:nth-child(2){animation-delay:.15s} .talk__t b:nth-child(3){animation-delay:.3s}
.pane.is-play .talk__b--me:first-child{animation:fadeUp .4s .1s forwards}
.pane.is-play .talk__t{animation:talkT 1.1s .5s forwards}
.pane.is-play .talk__b--bot{animation:fadeUp .4s 1.5s forwards}
.pane.is-play .talk__b--me:last-child{animation:fadeUp .4s 2.3s forwards}
@keyframes talkT{0%{opacity:0}15%{opacity:1}85%{opacity:1}100%{opacity:0;height:0;padding:0}}
/* brand: the loop */
.pane__demo--brand video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);border:1px solid rgba(236,238,240,.2)}
@media (max-width:860px){
  .pane__demo{opacity:1;transform:none;top:10%;height:40%}
}
@media (prefers-reduced-motion:reduce){
  .pane__demo{opacity:1;transform:none;transition:none}
  .pane.is-play .wire .w,.pane.is-play .talk__b,.pane.is-play .talk__t{animation:none;opacity:1;transform:none}
  .pane.is-play .mini__bars i{transition:none}
}

/* ---------- selected work: a filmstrip that pans as you scroll ---------- */
.hstrip{position:relative;background:var(--dark);color:var(--dark-ink);border-block:1px solid var(--dark-line);padding:0}
.hstrip__pin{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:center}
.hstrip__head{position:absolute;left:var(--gut);right:var(--gut);top:calc(57px + var(--s6));z-index:3;
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);pointer-events:none}
.hstrip__head .sec__title{color:var(--dark-ink)}
.hstrip__count{display:flex;align-items:baseline;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dark-muted)}
.hstrip__count b{font:700 clamp(20px,2vw,30px)/1 var(--display);letter-spacing:-.03em;color:var(--dark-ink)}
.hstrip__track{display:flex;align-items:center;gap:5vw;padding-left:16vw;padding-right:8vw;will-change:transform}
.hitem{position:relative;flex:none;width:min(58vw,860px)}
.hitem__n{position:absolute;left:-2vw;top:-14%;z-index:0;font:900 clamp(90px,15vw,240px)/1 var(--display);letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(236,238,240,.34);pointer-events:none;
  transform:scale(var(--kn,.55));transform-origin:0 100%;transition:color .4s,-webkit-text-stroke-color .4s}
.hitem__card{position:relative;z-index:1;display:block;color:inherit;
  transform:scale(var(--k,.86));transform-origin:50% 60%;transition:transform .18s linear}
.hitem__img{display:block;overflow:hidden;border:1px solid rgba(236,238,240,.18);background:#0d0f12}
.hitem__img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;
  filter:grayscale(1) contrast(1.06) brightness(calc(.55 + var(--k,.86) * .5));transform:scale(calc(1.06 - var(--k,.86) * .06));transition:filter .18s linear,transform .3s}
.hitem__b{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) var(--s5);padding-top:var(--s4)}
.hitem__b b{font:700 clamp(22px,2.6vw,38px)/1.05 var(--display);letter-spacing:-.04em}
.hitem__b>span{color:var(--dark-muted);font-size:15px}
.hitem__go{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#eceef0;font-style:normal;opacity:0;transition:opacity .3s}
.hitem.is-on .hitem__go{opacity:1}
.hitem.is-on .hitem__n{color:rgba(236,238,240,.13);-webkit-text-stroke-color:rgba(236,238,240,.55)}
.hitem__card:hover .hitem__img{border-color:rgba(236,238,240,.5)}
.hitem--end{width:min(26vw,340px);display:flex;align-items:center;justify-content:center}
.hitem__all{display:inline-flex;align-items:center;gap:10px;padding:18px 26px;border:1px solid rgba(236,238,240,.45);
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#eceef0;transition:background .3s,color .3s}
.hitem__all:hover{background:#eceef0;color:var(--dark)}
.hstrip__foot{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--s6);z-index:3;display:flex;align-items:center;gap:var(--s5);pointer-events:none}
.hstrip__hint{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dark-muted);white-space:nowrap}
.hstrip__bar{flex:1;height:1px;background:rgba(236,238,240,.22);position:relative}
.hstrip__bar i{position:absolute;left:0;top:-1px;height:3px;width:0;background:#eceef0;transition:width .12s linear}
@media (max-width:700px),(hover:none){
  .hstrip{height:auto!important}
  .hstrip__pin{position:static;height:auto;min-height:0;display:block;padding-block:var(--s7) var(--s8)}
  .hstrip__head{position:static;flex-wrap:wrap;gap:var(--s3);padding-bottom:var(--s6);pointer-events:auto}
  .hstrip__head .sec__title{flex:1 1 100%}
  .hstrip__track{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s5);
    padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hstrip__track::-webkit-scrollbar{display:none}
  .hitem{width:80vw;scroll-snap-align:center}
  .hitem__card{transform:none}
  .hitem__img img{filter:grayscale(1) contrast(1.06);transform:none}
  .hitem__go{opacity:1} .hitem__n{opacity:.5;left:0;top:-9%}
  .hitem--end{width:60vw}
  .hstrip__foot{position:static;padding-top:var(--s5)}
}
@media (prefers-reduced-motion:reduce){
  .hstrip{height:auto!important}
  .hstrip__pin{position:static;height:auto;display:block;padding-block:var(--s7)}
  .hstrip__track{transform:none!important;overflow-x:auto;padding-inline:var(--gut);gap:var(--s5)}
  .hitem__card{transform:none;transition:none} .hitem__img img{filter:grayscale(1);transform:none}
  .hitem__go{opacity:1}
}