/* ============================================================
   BECEMA concept-3 · v3 polish layer
   пространство · градиенты · тени · переходы · фотонасыщенность
   ============================================================ */

:root{
  --accent2:#FF8A50;
  --grad-hot:linear-gradient(135deg,#FF5A1F 0%,#FF8A50 100%);
  --grad-cool:linear-gradient(135deg,#5FA8FF 0%,#8FD0FF 100%);
  --ease-out:cubic-bezier(.22,.61,.21,1);
  --shadow-photo:0 30px 70px -28px rgba(8,10,14,.45),0 8px 24px -12px rgba(8,10,14,.25);
  --shadow-card:0 24px 60px -30px rgba(8,10,14,.38),0 4px 16px -8px rgba(8,10,14,.18);
}

/* ---------- ПРОСТРАНСТВО ---------- */
.sec{padding-block:clamp(130px,14vw,215px)}
.shead{margin-bottom:clamp(60px,7vw,104px)}
.pillars,.tasks,.serv,.news-grid,.people-grid,.proj-grid{gap:clamp(18px,2vw,28px)}
.lead{line-height:1.65}

/* ---------- ГРАДИЕНТЫ ФОНОВ ---------- */
.sec:not(.light){
  background-image:
    radial-gradient(1100px 560px at 88% -8%,rgba(255,90,31,.08),transparent 62%),
    radial-gradient(900px 520px at -12% 108%,rgba(95,140,220,.06),transparent 60%);
}
.light{
  background-image:
    radial-gradient(1000px 480px at 90% -6%,rgba(255,90,31,.05),transparent 60%),
    linear-gradient(180deg,#FBFBF9 0%,#F4F4F1 100%);
}
.hero-bg::after{
  background:linear-gradient(180deg,rgba(10,10,10,.42) 0%,rgba(10,10,10,.18) 42%,#0A0A0A 96%);
}

/* ---------- ГРАДИЕНТНЫЕ АКЦЕНТЫ ---------- */
h1 em,h2 em{background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stats-band .sb b{
  background:linear-gradient(180deg,#FFFFFF 20%,#FFB48F 130%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.stats-band .sb em{color:var(--accent)}
.tl-fill{background:linear-gradient(180deg,var(--accent),var(--accent2))}
.dir{border-image:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.04)) 1}
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.scroll-progress,.progress-bar{background:var(--grad-hot)!important}
.ghostword{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.fgiant{opacity:.05}
::selection{background:var(--accent);color:#fff}

/* ---------- КНОПКИ ---------- */
.btn{position:relative;overflow:hidden;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background .3s,border-color .3s}
.btn-solid{background:var(--grad-hot);border:none;box-shadow:0 12px 32px -10px rgba(255,90,31,.55)}
.btn-solid:hover{transform:translateY(-3px);box-shadow:0 20px 44px -12px rgba(255,90,31,.65)}
.btn-line:hover{transform:translateY(-3px);border-color:var(--accent);color:var(--accent)}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .7s var(--ease-out);pointer-events:none;
}
.btn:hover::after{transform:translateX(120%)}
.link-a{display:inline-flex;align-items:center;gap:10px;transition:color .3s}
.link-a .arr,.dir .arr{display:inline-block;transition:transform .45s var(--ease-out)}
.link-a:hover .arr,.dir:hover .arr{transform:translate(4px,-4px)}
.link-a:hover{color:var(--accent)}

/* ---------- ТЕНИ И ПОДЪЁМ КАРТОЧЕК ---------- */
.clip{border-radius:var(--r);box-shadow:var(--shadow-photo)}
.ph,.dthumb,.cycle-ph,.videoph,.mapmock,.who-img{overflow:hidden;border-radius:var(--r)}
.pcard,.pillar,.task,.scard,.ncard,.person,.proj{
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .4s;
}
.pcard:hover,.ncard:hover{transform:translateY(-8px)}
.pillar:hover,.task:hover,.scard:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.proj .ph{box-shadow:none}
.pcard .ph{box-shadow:var(--shadow-photo)}
.person .ph,.proj .ph{border-radius:var(--r)}

/* ---------- ПЕРЕХОДЫ ФОТО ---------- */
.ph img,.dthumb img,.who-img img,.bento img,.pthumb img,.gitem img{
  transition:transform 1s var(--ease-out),filter .6s;
  will-change:transform;
}
.pcard:hover .ph img,.dir:hover .dthumb img,.ncard:hover .ph img,
.person:hover .ph img,.bento figure:hover img,.gitem:hover img,
.pillar:hover .pthumb img{transform:scale(1.06)}
.videoph .play{transition:transform .4s var(--ease-out),background .3s}
.videoph:hover .play{transform:scale(1.12)}

/* ---------- REVEAL ПЛАВНЕЕ ---------- */
[data-reveal]{transition-timing-function:var(--ease-out)}
[data-reveal="blur"]{filter:blur(14px)}

/* ---------- THUMB В PILLAR (Full Cycle) ---------- */
.pillar{overflow:hidden}
.pillar .pthumb{height:170px;border-radius:calc(var(--r) - 8px);overflow:hidden;margin-bottom:26px}
.pillar .pthumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- GALEREE-STRIP (Custom) ---------- */
.gwrap{position:relative}
.gstrip{
  display:flex;gap:clamp(14px,1.6vw,22px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:18px;cursor:grab;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;
}
.gstrip::-webkit-scrollbar{height:6px}
.gstrip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
.gitem{flex:0 0 clamp(250px,27vw,400px);scroll-snap-align:start}
.gitem figure{margin:0;overflow:hidden;border-radius:var(--r);box-shadow:var(--shadow-photo)}
.gitem img{width:100%;height:clamp(200px,22vw,300px);object-fit:cover;display:block}
.gcap{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}

/* ---------- DUO ---------- */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(48px,6vw,84px)}
.duo figure{margin:0;overflow:hidden;border-radius:var(--r);box-shadow:var(--shadow-photo)}
.duo img{width:100%;height:clamp(240px,34vw,460px);object-fit:cover;display:block}
.duo-wide{display:block;margin-top:clamp(48px,6vw,84px)}
.duo-wide img{width:100%;height:clamp(280px,44vw,560px);object-fit:cover;display:block}

/* ---------- BENTO МОЗАИКА «ЗАВОД В КАДРЕ» ---------- */
.bento-sec{padding-bottom:clamp(90px,10vw,150px)}
.bento{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(140px,16vw);gap:clamp(12px,1.4vw,20px);
}
.bento figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);box-shadow:var(--shadow-photo)}
.bento img{width:100%;height:100%;object-fit:cover;display:block}
.b-big{grid-column:span 2;grid-row:span 2}
.b-wide{grid-column:span 2}
.b-tall{grid-row:span 2}
.bento figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:38px 18px 14px;font-family:var(--mono,ui-monospace,monospace);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(5,7,10,.72));
  opacity:0;transform:translateY(8px);transition:.5s var(--ease-out);
}
.bento figure:hover figcaption{opacity:1;transform:none}

/* ---------- PEOPLE 4-КОЛ ---------- */
.people-grid{grid-template-columns:repeat(4,1fr)}

/* ---------- HERO МЕТА ЗЕРНО ---------- */
.hm b{letter-spacing:-.01em}

/* ---------- COMPANY SECTION ---------- */
.company-section{padding-top:clamp(100px,12vw,180px);padding-bottom:clamp(120px,14vw,200px)}
.company-section .shead{margin-bottom:clamp(60px,8vw,120px)}

.company-hero{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,100px);align-items:center;margin-bottom:clamp(80px,10vw,160px)}
.company-hero-text{max-width:600px}
.company-hero-text h2{line-height:1.05;margin-bottom:clamp(30px,4vw,50px)}
.company-hero-lead{margin-top:clamp(20px,3vw,40px)}
.company-hero-lead p{font-size:clamp(17px,1.6vw,20px);line-height:1.7;color:var(--gray);max-width:500px}

.company-hero-img{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.5}
.company-hero-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.company-hero-img:hover img{transform:scale(1.04)}
.company-hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,10,10,.3));pointer-events:none}

.company-features{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-bottom:clamp(60px,8vw,120px)}
.company-feature{padding:clamp(24px,3vw,40px);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);transition:all .4s var(--ease-out)}
.company-feature:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);transform:translateY(-4px)}
.company-feature-icon{width:64px;height:64px;border-radius:50%;overflow:hidden;margin-bottom:clamp(16px,2vw,24px)}
.company-feature-icon img{width:100%;height:100%;object-fit:cover}
.company-feature h3{font-size:clamp(18px,1.6vw,22px);font-weight:700;margin-bottom:clamp(10px,1.2vw,16px);letter-spacing:-.01em}
.company-feature p{font-size:clamp(14px,1.2vw,16px);line-height:1.6;color:var(--gray);max-width:280px}

.company-copy{max-width:700px;margin:0 auto;text-align:center}
.company-copy p{font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:var(--gray);margin-bottom:clamp(16px,2vw,24px)}
.company-copy p:last-child{margin-bottom:0;color:var(--accent);font-weight:500}

/* ---------- MOBILE ---------- */
@media(max-width:960px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(120px,38vw)}
  .people-grid{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr}
  .company-hero{grid-template-columns:1fr;gap:clamp(30px,5vw,60px)}
  .company-hero-img{order:-1}
  .company-features{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .btn::after{display:none}
  *{transition-duration:.01ms!important}
}