/* ==========================================================================
   Amoboba — landing
   Палитра: чёрный холст, белая типографика, оранжевый акцент бренда.
   Каждая секция несёт собственный цветовой характер продукта.
   ========================================================================== */

:root{
  --h: clamp(30px, 3.4vw, 40px);
  --pad: clamp(20px, 2.5vw, 32px);
  --head-h: calc(var(--h) + var(--pad) * 2);
  --tile: calc(var(--h) * 166 / 537);
  --ext: 0px;
  --phase: calc(var(--h) * 120 / 537);
  --ease: cubic-bezier(.22,.8,.24,1);
  --spring: cubic-bezier(.34,1.56,.5,1);

  --brand: #ff5e0e;
  --line: #1a1a1a;

  /* позиция курсора для световых эффектов (обновляется из JS) */
  --mx: 50vw;
  --my: 50vh;
  --glow: 0;
}

*{margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth}

[id]{scroll-margin-top:var(--head-h)}

body{
  background:#000; color:#fff;
  font-family:"Arimo", Arial, Helvetica, sans-serif;
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ================== ГЛОБАЛЬНЫЙ СВЕТ ЗА КУРСОРОМ ================== */
.spot{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(420px 420px at var(--mx) var(--my),
    rgba(255,255,255,.055), rgba(255,255,255,.018) 42%, transparent 68%);
  opacity:var(--glow);
  transition:opacity .6s var(--ease);
  mix-blend-mode:screen;
}

/* ================== ПОЛОСА ПРОГРЕССА ================== */
.progress{
  position:fixed; top:0; left:0; height:2px; z-index:60;
  width:100%; transform-origin:0 50%; transform:scaleX(var(--sp, 0));
  background:linear-gradient(90deg, #fff, var(--brand));
  pointer-events:none;
}

/* ================== ИНТРО ================== */
.intro{
  position:fixed; inset:0; z-index:100; background:#000;
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.intro svg{height:clamp(44px,7vw,86px); width:auto; display:block}
.intro .intro-mark{
  clip-path:inset(0 100% 0 0);
  animation:introWipe 1s var(--ease) .1s forwards;
}
@keyframes introWipe{to{clip-path:inset(0 0 0 0)}}
.intro.done{opacity:0; visibility:hidden}
body.loading{overflow:hidden}

/* ================== ШАПКА ================== */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:transform .45s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-head.stuck{
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}
.site-head.hide{transform:translateY(-105%)}

.top{
  position:relative; display:flex; align-items:center;
  padding:var(--pad);
}

.bars{
  position:absolute; inset:0; z-index:0;
  display:none; background:none; border:0; padding:0;
}
.top.open .bars{display:block; cursor:pointer}

.mark{
  position:relative; z-index:1; flex:none;
  background:none; border:0; padding:0; cursor:pointer;
  display:block; line-height:0; overflow:visible;
  transition:transform .4s var(--spring);
}
.mark:hover{transform:translateY(-2px)}
.mark svg{height:var(--h); width:auto; display:block; overflow:visible}
.mark:focus-visible{outline:1px solid #fff; outline-offset:3px}

.panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease)}
.panel > div{overflow:hidden}
.top.open + .panel{grid-template-rows:1fr}
.panel nav{padding:4px var(--pad) var(--pad); display:flex; flex-direction:column; align-items:flex-start}
.panel a{
  display:block; padding:10px 0;
  color:#fff; text-decoration:none;
  font-size:14px; font-weight:700; line-height:1;
  opacity:0; transform:translateY(-8px);
  transition:opacity .3s ease, transform .3s var(--ease), letter-spacing .3s var(--ease);
}
.top.open + .panel a{opacity:1; transform:none}
.top.open + .panel a:nth-child(1){transition-delay:.14s}
.top.open + .panel a:nth-child(2){transition-delay:.20s}
.panel a:hover{opacity:.6; letter-spacing:.06em}
.panel a:focus-visible{outline:1px solid #fff; outline-offset:4px}

/* ================== ГЕРОЙ ================== */
.hero{
  position:relative;z-index:2;min-height:100svh;overflow:hidden;display:flex;align-items:center;
  padding:calc(var(--head-h) + 24px) clamp(24px,4.5vw,70px) clamp(48px,6vh,70px);
  background:#050505;color:#f2f2f2;isolation:isolate;
}
.hero::before{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 38%,rgba(255,255,255,.035) 38.2%,transparent 38.5% 62%,rgba(255,255,255,.025) 62.2%,transparent 62.5%)}
.hero::after{content:"";position:absolute;left:clamp(24px,4.5vw,70px);right:clamp(24px,4.5vw,70px);bottom:clamp(28px,4vh,44px);height:1px;background:#333}
.hero-gpu{position:absolute;z-index:0;inset:0;width:100%;height:100%;display:block;opacity:.82;pointer-events:none}
.hero-paper{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,transparent 0 33%,rgba(255,255,255,.055) 33% calc(33% + 1px),transparent calc(33% + 1px) 66%,rgba(255,255,255,.055) 66% calc(66% + 1px),transparent calc(66% + 1px)),linear-gradient(180deg,transparent 0 18%,rgba(255,255,255,.045) 18% calc(18% + 1px),transparent calc(18% + 1px));pointer-events:none}
.hero-copy{position:relative;z-index:3;width:100%;transform:translateY(-3vh)}.hero-kicker{margin:0 0 clamp(22px,3vh,34px);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#9a9a9a}
.hero h1{position:relative;width:max-content;max-width:100%;margin:0;font-family:"Stack Sans Headline","Arial Black",Arial,sans-serif;font-size:clamp(70px,13.4vw,206px);line-height:.79;font-weight:700;letter-spacing:-.065em;color:#f4f4f4;text-transform:none;text-shadow:0 0 9px rgba(255,255,255,.24),0 0 32px rgba(255,255,255,.14),0 0 88px rgba(255,255,255,.07)}
.hero h1::after{content:attr(data-text);position:absolute;inset:0;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28);transform:translate(2px,1px);clip-path:polygon(0 55%,100% 55%,100% 56.4%,0 56.4%);opacity:.5;filter:drop-shadow(0 0 7px rgba(255,255,255,.14))}
.hero-bottom{display:grid;grid-template-columns:minmax(240px,1fr) auto;align-items:end;gap:32px;margin-top:clamp(30px,4.5vh,52px);padding-right:min(34vw,480px)}
.hero-lead{margin:0;font-size:clamp(20px,2.5vw,36px);line-height:1.05;font-weight:700;letter-spacing:0;color:#e4e4e4}.hero-action{display:inline-flex;align-items:center;gap:18px;padding:13px 0;color:#f0f0f0;text-decoration:none;border-bottom:1px solid #777;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;transition:transform .25s var(--spring),border-color .25s var(--ease)}.hero-action span{font-size:18px}.hero-action:hover{transform:translateX(5px);border-color:#fff}
.hero-mark{position:absolute;z-index:2;right:-3vw;bottom:-18%;height:44%;width:auto;opacity:.14}.hero-mark path{fill:#f0f0f0}
.hero-slashes{position:absolute;z-index:2;right:clamp(26px,6vw,92px);top:13%;width:clamp(90px,11vw,160px);height:clamp(74px,9vw,132px)}.hero-slashes i{position:absolute;top:0;bottom:0;width:22%;background:#f0f0f0;clip-path:polygon(35% 0,100% 0,65% 100%,0 100%)}.hero-slashes i:nth-child(1){left:0}.hero-slashes i:nth-child(2){left:31%}.hero-slashes i:nth-child(3){left:62%}
@media(max-width:760px){.hero{min-height:100svh;padding-top:120px;padding-bottom:72px;align-items:center}.hero-copy{transform:translateY(-2vh)}.hero h1{font-size:clamp(54px,21vw,84px);line-height:.82;letter-spacing:-.055em}.hero-bottom{grid-template-columns:1fr;align-items:start;gap:28px;margin-top:34px;padding-right:0}.hero-lead{font-size:clamp(20px,7vw,28px)}.hero-action{width:max-content}.hero-mark{height:26%;right:-18%;bottom:-3%;opacity:.1}.hero-slashes{right:24px;top:14%;width:82px;height:68px}.hero::after{bottom:24px}.hero-gpu{opacity:.68}}
/* ================== ВЫ МОЖЕТЕ НАС ЗНАТЬ ПО ================== */
.know{
  position:relative; z-index:2;
  padding:clamp(60px,12vh,140px) var(--pad) clamp(26px,4vh,44px);
  max-width:1100px;
}
.know h2{
  font-size:clamp(24px,4.4vw,58px); font-weight:700; line-height:1.05; letter-spacing:-.03em;
  color:#f2f2f2;
}
.know .w{
  display:inline-block;
  opacity:0; transform:translateY(28px) rotate(2deg);
  transition:opacity .7s var(--ease), transform .9s var(--spring);
  transition-delay:calc(var(--i) * 60ms);
}
.know.in .w{opacity:1; transform:none}

/* ---- сетка логотипов ---- */
.logos{
  position:relative; z-index:2;
  padding-bottom:clamp(60px,12vh,140px);
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  width:100%; overflow:hidden;
}
.lg{
  position:relative; isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  min-width:0; min-height:clamp(110px,14vh,170px); padding:20px;
  border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  text-decoration:none;
  opacity:0; transform:translateY(18px);
  transition:opacity .45s var(--ease), transform .45s var(--spring);
}
.logos.in .lg{opacity:.55; transform:none; transition-delay:calc(var(--i) * 80ms)}
.lg--static{pointer-events:none}
.lg:nth-child(2n){border-right:0}
/* световое пятно внутри плитки — идёт за курсором */
.lg::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(240px 240px at var(--lx,50%) var(--ly,50%),
    rgba(255,255,255,.10), transparent 70%);
  transition:opacity .35s var(--ease);
}
/* акцентная линия снизу */
.lg::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--acc, #fff), transparent);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .5s var(--ease);
}
.logos.in .lg:hover{opacity:1; transform:translateY(-3px); transition-delay:0s}
.lg:hover::before{opacity:1}
.lg:hover::after{transform:scaleX(1)}
.logos.in .lg:focus-visible{outline:1px solid #fff; outline-offset:-6px; opacity:1; transition-delay:0s}
.lg-inner{
  display:flex; align-items:center; justify-content:center; max-width:100%;
  transition:transform .35s var(--ease);
}
.lg:hover .lg-inner{transform:scale(1.05)}

.lg-name{
  font-family:"Arimo",Arial,sans-serif; font-weight:700; color:#fff;
  font-size:clamp(15px,2.1vw,30px); letter-spacing:-.01em;
  white-space:nowrap; text-align:center;
}
.kat-logo{height:clamp(22px,3vw,38px); width:auto; max-width:100%; display:block; overflow:visible}
.lg-img{max-height:clamp(30px,4.2vw,54px); width:auto; max-width:100%; display:block}
.lg-wd{
  display:flex; align-items:baseline; gap:.12em;
  font-family:"Outfit",Arial,sans-serif; font-weight:800; color:#fff;
  font-size:clamp(19px,2.6vw,34px); letter-spacing:-.01em; white-space:nowrap;
}
.lg-wd-digit{font:inherit; line-height:1}
.lg-wd img{height:.82em; width:auto; display:block; transform:translateY(.05em)}

.lg-ic{
  display:flex; align-items:center; gap:11px;
  background:#D3E3FD; border-radius:999px; padding:11px 20px 11px 16px;
  font-family:"Roboto",system-ui,sans-serif; font-weight:500; color:#0B57D0;
  font-size:clamp(13px,1.6vw,21px); white-space:nowrap; max-width:100%;
  transition:border-radius .5s var(--ease);
}
.lg:hover .lg-ic{border-radius:16px}
.lg-ic img{width:clamp(24px,2.4vw,32px); height:clamp(24px,2.4vw,32px); display:block}

@media (max-width:560px){
  .lg{min-height:96px; padding:16px 10px}
  .lg-name{font-size:16px}
  .lg-ic{font-size:13px; padding:8px 14px 8px 10px; gap:8px}
  .lg-ic img{width:20px; height:20px}
  .kat-logo{height:20px}
}

/* ================== ОБЩЕЕ ДЛЯ СЕКЦИЙ ================== */
.work{
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--pad); position:relative; overflow:hidden;
  z-index:2;
}
.project-description{
  position:relative; z-index:2;
  width:min(90vw,680px);
  font-size:clamp(15px,1.55vw,19px); line-height:1.58;
}

.visit{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:"Arimo",Arial,sans-serif; font-weight:700;
  font-size:clamp(12px,1.2vw,14px); letter-spacing:.02em;
  text-decoration:none; color:#fff;
  padding:clamp(11px,1.3vw,15px) clamp(18px,2vw,26px);
  border:1px solid rgba(255,255,255,.22); border-radius:999px;
  background:rgba(255,255,255,.04);
  transition:transform .3s var(--spring), background .3s var(--ease), border-color .3s var(--ease);
}
.visit svg{width:1em; height:1em; transition:transform .3s var(--ease)}
.visit:hover{transform:translateY(-3px); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.45)}
.visit:hover svg{transform:translate(3px,-3px)}

/* ================== MINLAND ================== */
.work--ml{
  background:radial-gradient(120% 90% at 50% 110%, #1b1204 0%, #000 62%);
  border-top:1px solid var(--line);
  flex-direction:column; gap:clamp(16px,2.8vh,30px);
  perspective:520px;
}
/* «пол» из пикселей, уходящий за горизонт */
.ml-floor{
  position:absolute; left:-50%; right:-50%; bottom:-14%; height:78%;
  z-index:0; pointer-events:none;
  transform:rotateX(74deg);
  transform-origin:50% 100%;
  background-image:
    linear-gradient(rgba(255,190,60,.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,190,60,.24) 1px, transparent 1px);
  background-size:64px 64px;
  animation:mlRun 2.4s linear infinite;
  /* гаснет и у горизонта, и у самого низа — чтобы не было жёсткого стыка секций */
  -webkit-mask-image:linear-gradient(to top, transparent 0%, #000 16%, rgba(0,0,0,.35) 48%, transparent 80%);
  mask-image:linear-gradient(to top, transparent 0%, #000 16%, rgba(0,0,0,.35) 48%, transparent 80%);
}
@keyframes mlRun{to{background-position:0 64px, 0 0}}
.ml-sun{
  position:absolute; left:50%; bottom:14%; width:min(60vw,540px); aspect-ratio:1;
  transform:translate(-50%, 40%);
  background:radial-gradient(circle, rgba(255,178,40,.30), rgba(255,120,20,.10) 45%, transparent 68%);
  filter:blur(18px); z-index:0; pointer-events:none;
  animation:mlBreath 8s ease-in-out infinite alternate;
}
@keyframes mlBreath{0%{opacity:.6; transform:translate(-50%,40%) scale(.94)}100%{opacity:1; transform:translate(-50%,40%) scale(1.07)}}
/* парящие «блоки» */
.ml-cubes{position:absolute; inset:0; z-index:1; pointer-events:none}
.ml-cubes i{
  position:absolute; display:block; width:var(--s); height:var(--s);
  background:linear-gradient(150deg, #ffd479, #e59b1c);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 18px 40px -18px rgba(255,150,20,.7);
  opacity:.0;
  animation:mlFloat var(--d) ease-in-out infinite alternate, mlFade .9s var(--ease) forwards;
  animation-delay:0s, var(--dl);
}
@keyframes mlFade{to{opacity:.85}}
@keyframes mlFloat{
  0%{transform:translateY(0) rotate(var(--r))}
  100%{transform:translateY(-26px) rotate(calc(var(--r) + 8deg))}
}
.ml-logo{
  position:relative; z-index:2;
  width:min(78vw,760px); height:auto; display:block;
  filter:drop-shadow(0 24px 60px rgba(255,150,20,.35));
  opacity:0; transform:translateY(34px) scale(.94);
  transition:opacity .9s var(--ease), transform 1.1s var(--spring);
}
.work--ml.in .ml-logo{opacity:1; transform:none}
.ml-description{
  max-width:720px; text-align:center; color:rgba(255,244,224,.78);
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease) .3s, transform .7s var(--ease) .3s;
}
.work--ml.in .ml-description{opacity:1; transform:none}
.work--ml .visit{
  position:relative; z-index:2;
  border-color:rgba(255,190,60,.35); background:rgba(255,160,30,.10);
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease) .45s, transform .7s var(--spring) .45s,
             background .3s var(--ease), border-color .3s var(--ease);
}
.work--ml.in .visit{opacity:1; transform:none}
.work--ml .visit:hover{background:rgba(255,160,30,.2); border-color:rgba(255,190,60,.7)}

/* ================== WARDEN3 ================== */
.work--wd{
  background:#020607;
  border-top:1px solid var(--line);
  padding:clamp(72px,9vw,120px) clamp(24px,7vw,104px);
}
.wd-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(77,255,218,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,255,218,.055) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(75% 78% at 50% 50%, #000 25%, transparent 82%);
  mask-image:radial-gradient(75% 78% at 50% 50%, #000 25%, transparent 82%);
}
.wd-scan{
  position:absolute; z-index:0; left:0; right:0; height:1px; top:12%;
  background:linear-gradient(90deg, transparent, rgba(77,255,218,.65), transparent);
  box-shadow:0 0 24px rgba(77,255,218,.4);
  animation:wdScan 5.8s ease-in-out infinite;
}
@keyframes wdScan{50%{top:88%; opacity:.42}}
.wd-shell{
  position:relative; z-index:1; width:min(100%,1180px);
  display:grid; grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr);
  align-items:center; gap:clamp(42px,7vw,100px);
}
.wd-visual{
  position:relative; width:min(38vw,420px); aspect-ratio:1; justify-self:center;
  display:grid; place-items:center;
}
.wd-visual::before{
  content:""; position:absolute; inset:7%; border:1px solid rgba(77,255,218,.12);
  transform:rotate(45deg); box-shadow:0 0 70px rgba(42,211,196,.08) inset;
}
.wd-orbit{position:absolute; border:1px solid rgba(77,255,218,.34); border-radius:50%}
.wd-orbit::before,.wd-orbit::after{
  content:""; position:absolute; width:8px; height:8px; background:#66ffe0;
  box-shadow:0 0 18px #2ad3c4;
}
.wd-orbit--outer{inset:4%; animation:wdRotate 16s linear infinite}
.wd-orbit--outer::before{left:15%; top:9%}
.wd-orbit--outer::after{right:8%; bottom:22%}
.wd-orbit--inner{inset:22%; border-style:dashed; animation:wdRotate 10s linear infinite reverse}
.wd-orbit--inner::before{left:-4px; top:50%}
.wd-orbit--inner::after{right:-4px; top:22%}
@keyframes wdRotate{to{transform:rotate(360deg)}}
.wd-core{
  position:relative; width:34%; aspect-ratio:1; transform:rotate(45deg);
  border:1px solid rgba(128,255,231,.7); background:rgba(11,53,52,.48);
  box-shadow:0 0 0 12px rgba(42,211,196,.04), 0 0 72px rgba(42,211,196,.28);
  display:grid; place-items:center;
}
.wd-core span{position:absolute; background:#8affea; box-shadow:0 0 16px rgba(77,255,218,.8)}
.wd-core span:nth-child(1){width:42%; height:4px}
.wd-core span:nth-child(2){width:4px; height:42%}
.wd-core span:nth-child(3){width:12px; height:12px}
.wd-status{
  position:absolute; left:50%; bottom:5%; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px; white-space:nowrap;
  color:rgba(207,255,246,.7); font:700 10px/1 "Roboto",sans-serif;
  text-transform:uppercase; letter-spacing:.18em;
}
.wd-status i{width:7px; height:7px; background:#5dffd9; box-shadow:0 0 12px #2ad3c4; animation:wdBlink 1.5s steps(2) infinite}
@keyframes wdBlink{50%{opacity:.25}}
.wd-content{display:flex; flex-direction:column; align-items:flex-start; gap:clamp(18px,2.4vh,28px)}
.wd-kicker{
  color:#5dffd9; font:700 11px/1 "Roboto",sans-serif;
  text-transform:uppercase; letter-spacing:.2em;
}
.wd-mark{
  position:relative;
  display:flex; align-items:baseline; gap:.1em;
  font-family:"Outfit",Arial,sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(58px,8vw,116px); line-height:.82; color:#eafffb;
  text-shadow:0 0 42px rgba(42,211,196,.28);
}
.wd-mark img{height:.78em; width:auto; display:block; transform:translateY(.04em); mix-blend-mode:screen}
.wd-mark .ch{
  display:inline-block; opacity:0; transform:translateY(.35em);
  transition:opacity .5s var(--ease), transform .7s var(--spring);
  transition-delay:calc(var(--i) * 55ms);
}
.work--wd.in .wd-mark .ch{opacity:1; transform:none}
.wd-description{width:min(100%,610px); color:rgba(225,255,249,.72)}
.wd-contact{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.wd-contact a{
  color:#06110f; background:#71ffe2; text-decoration:none; font-weight:700;
  padding:12px 16px; border-radius:4px; transition:background .25s var(--ease), transform .25s var(--ease);
}
.wd-contact a:hover{background:#b8fff1; transform:translateY(-2px)}
.wd-contact span{font-size:13px; color:rgba(225,255,249,.45)}
@media (max-width:780px){
  .wd-shell{grid-template-columns:1fr; gap:30px}
  .wd-visual{width:min(76vw,330px)}
  .wd-content{align-items:center; text-align:center}
  .wd-contact{justify-content:center}
}

/* ================== КАТАЛОЖКА ================== */
.work--kat{
  background:#000; border-top:1px solid var(--line);
  justify-content:flex-start; align-items:center;
  padding:clamp(28px,6vw,80px) clamp(24px,6vw,90px);
}
.kat-lines{
  position:absolute; inset:-30%; z-index:0; opacity:.4;
  background:repeating-linear-gradient(115deg,
    rgba(255,94,14,.05) 0 28px, rgba(255,255,255,0) 28px 92px);
  animation:lines 26s linear infinite;
}
@keyframes lines{to{transform:translate3d(-92px,196px,0)}}

.kat-inner{
  position:relative; z-index:2;
  width:100%; max-width:min(620px,52%);
  margin-right:auto;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(14px,1.8vw,22px);
}
.glass{
  position:relative; isolation:isolate;
  border-radius:clamp(22px,2.6vw,34px);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px) saturate(180%) brightness(1.1);
  backdrop-filter:url(#liquid) blur(6px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter:blur(6px) saturate(180%) brightness(1.1);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10),
    0 20px 50px -28px rgba(0,0,0,.9),
    0 50px 100px -60px rgba(0,0,0,.8);
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px;
  background:linear-gradient(150deg,
    rgba(255,255,255,.85) 0%,
    rgba(255,255,255,.10) 26%,
    rgba(255,255,255,.04) 60%,
    rgba(255,255,255,.55) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,.12), transparent 58%);
}
.kat-plate, .kat-body{
  background:rgba(20,20,20,.72);
  border-radius:clamp(20px,2.2vw,28px);
}
.kat-plate{position:relative; padding:clamp(14px,1.6vw,20px) clamp(16px,1.9vw,24px)}
.kat-logo--big{
  width:min(58vw,590px); max-width:100%; height:auto; display:block; overflow:visible; position:relative;
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform 1s var(--spring);
}
.work--kat.in .kat-logo--big{opacity:1; transform:none}
.kat-body{padding:clamp(14px,1.6vw,20px) clamp(16px,1.9vw,24px)}
.kat-body p{
  position:relative;
  font-family:"Unbounded",Arial,sans-serif; font-weight:400;
  font-size:clamp(13px,1.4vw,17px); line-height:1.5; letter-spacing:-.01em;
  color:#e8e8e8;
}
.kat-domains{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;
  font-family:"Arimo",Arial,sans-serif; font-weight:700; letter-spacing:0;
}
.kat-domains a{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  border-radius:999px; padding:7px 14px; color:var(--brand); font-size:clamp(11px,1.1vw,13px);
  text-decoration:none;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.kat-domains a:hover{background:rgba(255,94,14,.14); transform:translateY(-2px)}

.kat-btn{
  position:relative; display:inline-block; text-decoration:none;
  padding:clamp(12px,1.4vw,16px) clamp(20px,2.2vw,28px);
  border-radius:999px;
  font-family:"Unbounded",Arial,sans-serif; font-weight:800;
  font-size:clamp(12px,1.2vw,14px); letter-spacing:.01em;
  color:#fff;
  background:linear-gradient(140deg, rgba(255,94,14,.42), rgba(255,94,14,.20) 52%, rgba(255,110,30,.34));
}
.kat-btn::before{
  background:linear-gradient(150deg,
    rgba(255,140,70,.95) 0%,
    rgba(255,94,14,.30) 28%,
    rgba(255,94,14,.12) 62%,
    rgba(255,120,40,.85) 100%);
}
.kat-btn::after{
  background:
    linear-gradient(160deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(120% 80% at 14% 0%, rgba(255,120,40,.28), transparent 60%);
}
.kat-btn:hover{transform:translateY(-3px); filter:brightness(1.08)}
.work--kat.in .kat-body p{animation:katUp .8s var(--ease) .2s backwards}
.work--kat.in .kat-btn{animation:katUp .8s var(--ease) .32s backwards}
@keyframes katUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

.kat-plate, .kat-body, .kat-btn{
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), filter .3s var(--ease);
}
.kat-plate:hover, .kat-body:hover{transform:translateY(-4px)}

.kat-plate, .kat-btn{overflow:hidden}
.kat-plate .sheen, .kat-btn .sheen{
  position:absolute; top:-60%; bottom:-60%; width:38%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent);
  transform:translateX(-220%) rotate(6deg); pointer-events:none;
}
.work--kat.in .kat-plate .sheen{animation:sheen 4.6s var(--ease) 1.1s infinite}
.kat-btn:hover .sheen{animation:sheen 1.1s var(--ease)}
@keyframes sheen{
  0%{transform:translateX(-220%) rotate(6deg)}
  55%,100%{transform:translateX(420%) rotate(6deg)}
}

.kat-glow{
  position:absolute; z-index:0; left:-6%; top:50%; width:52%; height:56%;
  transform:translateY(-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(255,94,14,.20), transparent 68%);
  filter:blur(30px);
  animation:pulse 7s ease-in-out infinite alternate;
}
@keyframes pulse{
  0%{opacity:.5; transform:translateY(-50%) scale(.94)}
  100%{opacity:1; transform:translateY(-50%) scale(1.08)}
}

.kat-shot{
  position:absolute; z-index:1;
  right:-180px; top:50%;
  width:1100px; height:795px;
  transform-style:preserve-3d; will-change:transform;
  transform:translate3d(240px,-50%,0) perspective(2000px) rotateY(-24deg) rotateX(6deg) rotateZ(-2deg);
  opacity:0;
  transition:transform 1.4s var(--ease) .15s, opacity 1s var(--ease) .15s;
}
.work--kat.in .kat-shot{
  opacity:1;
  transform:translate3d(0,-50%,0) perspective(2000px) rotateY(-24deg) rotateX(6deg) rotateZ(-2deg);
}
.kat-shot img{width:100%; height:100%; object-fit:cover; display:block}
.kat-shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 22%, transparent 55%);
}

@media (max-width:900px){
  .kat-shot{right:-320px; width:900px; height:650px}
}
@media (max-width:760px){
  .kat-inner{max-width:100%}
  .kat-shot{opacity:.28 !important}
}

/* ================== INVESTCONNECT ================== */
.work--ic{
  background:#f8faff; color:#191c20; font-family:"Roboto",system-ui,sans-serif;
  padding:clamp(70px,9vw,124px) clamp(24px,6vw,92px);
}
.ic-blob{position:absolute; z-index:0; border-radius:50%; filter:blur(80px); opacity:.7}
.ic-blob.a{width:52vw; height:52vw; left:-16vw; top:-22vw; background:#d3e3fd; animation:blob 18s ease-in-out infinite alternate}
.ic-blob.b{width:44vw; height:44vw; right:-12vw; bottom:-18vw; background:#c2e7ff; animation:blob 22s ease-in-out infinite alternate-reverse}
@keyframes blob{0%{transform:translate(0,0)}100%{transform:translate(4vw,3vw)}}
.ic-stars{position:absolute; inset:0; z-index:0; pointer-events:none}
.ic-stars i{position:absolute; display:block; background:#4285f4; animation:icStar 5s ease-in-out infinite alternate}
.ic-stars i:nth-child(1){width:42px;height:42px;left:8%;top:18%;border-radius:50% 50% 16% 50%}
.ic-stars i:nth-child(2){width:28px;height:28px;right:12%;top:12%;background:#fbbc04;border-radius:50%}
.ic-stars i:nth-child(3){width:34px;height:34px;left:44%;bottom:8%;background:#34a853;border-radius:12px 50% 50% 50%}
.ic-stars i:nth-child(4){width:18px;height:18px;right:5%;bottom:32%;background:#ea4335;border-radius:50%}
.ic-stars i:nth-child(5){width:16px;height:48px;left:4%;bottom:22%;background:#a8c7fa;border-radius:999px}
@keyframes icStar{to{transform:translateY(-14px) rotate(18deg)}}
.ic-promo{
  position:relative; z-index:1; width:min(100%,1240px); margin:auto;
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(380px,1.05fr);
  align-items:center; gap:clamp(42px,7vw,110px);
}
.ic-copy{display:flex; flex-direction:column; align-items:flex-start; gap:clamp(20px,3vh,32px)}
.ic-brand{display:flex; align-items:center; gap:12px; color:#0b57d0; font-size:clamp(16px,1.8vw,22px); font-weight:700}
.ic-brand-mark{width:44px;height:44px;display:grid;place-items:center;background:#d3e3fd;border-radius:14px}
.ic-brand-mark img{width:58%;height:58%;display:block}
.ic-copy h2{font-size:clamp(46px,6.2vw,88px);line-height:.98;font-weight:700;color:#202124}
.ic-copy h2 span{color:#0b57d0}
.ic-description{
  width:min(100%,650px); color:#4a5666;
  opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease) .2s, transform .7s var(--ease) .2s;
}
.work--ic.in .ic-description{opacity:1; transform:none}
.ic-cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ic-cta{display:inline-flex;align-items:center;gap:12px;padding:15px 22px;border-radius:999px;background:#0b57d0;color:#fff;text-decoration:none;font-weight:700;transition:transform .3s var(--spring),background .3s var(--ease)}
.ic-cta:hover{transform:translateY(-3px);background:#0842a0}
.ic-cta span{font-size:18px}
.ic-caption{color:#657185;font-size:12px}
.ic-dashboard{
  position:relative; width:100%; min-height:500px; padding:clamp(28px,4vw,48px);
  border-radius:32px; background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 30px 90px rgba(32,72,130,.18); backdrop-filter:blur(22px);
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  opacity:0;transform:translateY(30px) rotate(2deg);transition:opacity .8s var(--ease),transform 1s var(--spring);
}
.work--ic.in .ic-dashboard{opacity:1;transform:none}
.ic-dashboard::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;aspect-ratio:1;background:#d3e3fd;border-radius:42% 58% 65% 35%;transform:rotate(28deg)}
.ic-dashboard-top,.ic-total,.ic-chart,.ic-models{position:relative;z-index:1}
.ic-dashboard-top{display:flex;justify-content:space-between;align-items:center;color:#5f6368;font-size:14px}
.ic-dashboard-top b{color:#137333;background:#ceead6;padding:8px 12px;border-radius:999px}
.ic-total{font-size:clamp(34px,4vw,58px);font-weight:700;color:#202124;margin-top:30px}
.ic-total small{display:block;font-size:12px;font-weight:500;color:#7a8494;margin-top:8px}
.ic-chart{width:100%;height:auto;display:block;margin:22px 0 16px}
.ic-chart .ic-line{
  fill:none; stroke:#0b57d0; stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  transition:stroke-dashoffset 2.2s var(--ease) .3s;
}
.ic-chart .ic-area{fill:url(#ic-fill);stroke:none}
.work--ic.in .ic-chart .ic-line{stroke-dashoffset:0}
.ic-chart .ic-dot{
  fill:#0b57d0; opacity:0;
  transition:opacity .4s var(--ease) 2.2s;
}
.work--ic.in .ic-chart .ic-dot{opacity:1; animation:icDot 2.4s ease-in-out 2.6s infinite}
@keyframes icDot{0%,100%{r:6}50%{r:9}}
.ic-models{display:flex;gap:10px;flex-wrap:wrap}
.ic-model{padding:10px 14px;border-radius:999px;font-size:13px;font-weight:700;background:#edf2fa;color:#3c4043}
.ic-model--claude{background:#f4e5d8;color:#7b4026}
.ic-model--gpt{background:#dff5eb;color:#12634d}
.ic-model--gemini{background:#e8e5ff;color:#4d45a8}
@media (max-width:880px){.ic-promo{grid-template-columns:1fr}.ic-copy{align-items:center;text-align:center}.ic-cta-row{justify-content:center}.ic-dashboard{min-height:420px}}


/* ================== ДОСТУПНОСТЬ ================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition-duration:.01ms !important}
  .spot{display:none}
  .know .w, .lg, .ic-description, .ic-dashboard{opacity:1 !important; transform:none !important; clip-path:none !important}
  .ic-chart path{stroke-dashoffset:0 !important}
  .kat-shot{opacity:1 !important}
}
/* на тач-устройствах световое пятно не нужно */
@media (hover:none){
  .spot{display:none}
}