/* JC Fashion — общие стили: токены, типографика, кнопки, шапка, подвал, 3D-кубики. Подключаются на всех страницах. */
:root{
  --ink:#191C1F;
  --paper:#fff;
  --mist:#F4F4F6;
  --mute:#5C6166;
  --line:rgba(25,28,31,.1);
  --blue:#494FDF;
  --blue-deep:#3A3FC4;
  --tint:#E9EAFB;
  --r-lg:32px; --r-md:24px; --r-sm:16px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:clamp(16px,3vw,40px);
  --nav-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 'Onest',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.container{width:min(1280px,100% - 2*var(--gutter));margin-inline:auto}
section[id]{scroll-margin-top:24px}

/* ——— type ——— */
.display{margin:0;font-weight:600;font-size:clamp(40px,min(5.6vw,10.5vh),84px);line-height:.98;letter-spacing:-.036em;text-wrap:balance}
.h-section{margin:0;font-weight:600;font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.034em;text-wrap:balance}
.lead{margin:0;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--mute);max-width:34em;text-wrap:pretty}

/* ——— buttons (pill, Revolut-style) ——— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 28px;border:0;border-radius:999px;font-weight:600;font-size:17px;line-height:1;letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s,transform .25s var(--ease),color .2s}
.btn:active{transform:scale(.97)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#30353a}
.btn--soft{background:rgba(25,28,31,.07);color:var(--ink)}
.btn--soft:hover{background:rgba(25,28,31,.12)}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-deep)}
.btn--sm{height:44px;padding:0 20px;font-size:15px}

/* ——— nav ——— */
.nav{position:fixed;top:12px;left:12px;right:12px;z-index:50;height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 10px 0 28px;border-radius:999px;background:rgba(255,255,255,0);box-shadow:0 0 0 1px transparent;transition:background-color .3s,box-shadow .3s}
.nav.is-scrolled{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 8px 32px -12px rgba(25,28,31,.25),0 0 0 1px var(--line)}
.nav__logo img{height:28px;width:auto}
.nav__links{display:flex;gap:6px}
.nav__links a{padding:10px 16px;border-radius:999px;font-weight:500;font-size:16px;text-decoration:none;transition:background-color .2s}
.nav__links a:hover,.nav__links a[aria-current="page"]{background:rgba(25,28,31,.07)}
.nav__cta{display:flex;gap:8px}

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

/* ——— 3D-сцены из CSS-кубиков ——— */
.spin{position:relative;width:0;height:0;transform-style:preserve-3d;scale:1.22;translate:0 6px;animation:swing 9s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotateY(-16deg)}to{transform:rotateY(16deg)}}
.obj{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:rotateX(calc(-20deg + var(--py,0)*-8deg)) rotateY(calc(var(--px,0)*22deg));transition:transform .35s var(--ease)}

/* кубик: якорь в центре основания, поэтому растёт и падает от «пола» */
.cube{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:translate3d(var(--x,0),var(--y,0),var(--z,0)) rotateY(var(--ry,0deg))}
.cube .grow{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;transform-style:preserve-3d;transition:transform 1.1s var(--ease) calc(var(--i,0)*.09s),translate 1.1s var(--ease) calc(var(--i,0)*.09s)}
.cube .in{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:translateY(calc(var(--h)/-2))}
.cube i{position:absolute;display:block;backface-visibility:hidden}
.cube .f,.cube .b{left:calc(var(--w)/-2);top:calc(var(--h)/-2);width:var(--w);height:var(--h)}
.cube .f{transform:translateZ(calc(var(--d)/2));background:var(--c)}
.cube .b{transform:rotateY(180deg) translateZ(calc(var(--d)/2));background:var(--c)}
.cube .r,.cube .l{left:calc(var(--d)/-2);top:calc(var(--h)/-2);width:var(--d);height:var(--h)}
.cube .r{transform:rotateY(90deg) translateZ(calc(var(--w)/2));background:color-mix(in srgb,var(--c) 72%,#000)}
.cube .l{transform:rotateY(-90deg) translateZ(calc(var(--w)/2));background:color-mix(in srgb,var(--c) 72%,#000)}
.cube .t,.cube .u{left:calc(var(--w)/-2);top:calc(var(--d)/-2);width:var(--w);height:var(--d)}
.cube .t{transform:rotateX(90deg) translateZ(calc(var(--h)/2));background:color-mix(in srgb,var(--c) 80%,#fff)}
.cube .u{transform:rotateX(-90deg) translateZ(calc(var(--h)/2));background:color-mix(in srgb,var(--c) 55%,#000)}
.cube.lab .f::after{content:"";position:absolute;left:14%;bottom:20%;width:30%;height:16%;border-radius:2px;background:rgba(255,255,255,.9)}
.cube .f[data-t]::after{content:attr(data-t);position:absolute;inset:0;padding-top:var(--tp,0px);display:grid;place-items:center;font:700 calc(var(--h)*.55)/1 'Onest',system-ui,sans-serif;letter-spacing:-.04em;color:var(--tc,#fff)}
.cube .t .lg{position:absolute;left:50%;top:50%;width:88%;height:88%;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none}
.cube .t .lg--inv{filter:brightness(0) invert(1)}
.cube .f::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 55%)}

/* фигурки клиентов: слои с разной глубиной */
.pp{--c2:#d5d7ff;position:absolute;left:0;top:0;width:70px;height:92px;margin:-46px 0 0 -35px;transform:translate3d(var(--x),var(--y),var(--z)) scale(var(--s));transition:translate 1s var(--ease) calc(var(--i)*.1s),opacity .6s calc(var(--i)*.1s)}
.pp b{position:absolute;display:block}
.pp .hd{left:17px;top:0;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff,var(--c2) 72%);box-shadow:0 10px 16px -6px rgba(16,18,100,.5)}
.pp .bd{left:0;bottom:0;width:70px;height:50px;border-radius:35px 35px 12px 12px;background:radial-gradient(120% 110% at 30% 8%,#fff,var(--c2) 78%);box-shadow:0 16px 22px -10px rgba(16,18,100,.55)}

/* состояния до появления в экране */
/* конвейер */
.mv .grow{transform:translateX(calc((var(--i) - 1)*64px));animation:belt 5.4s linear infinite;animation-delay:calc(var(--i)*-1.8s)}
@keyframes belt{0%{transform:translateX(-100px) scale(.2)}12%{transform:translateX(-78px) scale(1)}88%{transform:translateX(78px) scale(1)}100%{transform:translateX(100px) scale(.2)}}

/* ——— footer ——— */
.footer{padding-block:clamp(40px,6vw,80px) 32px}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.footer__grid h4{margin:0 0 10px;font-weight:600;font-size:15px;color:var(--mute)}
.footer__grid p,.footer__grid a{margin:0;font-size:18px;line-height:1.5;text-decoration:none;display:block}
.footer__grid a:hover{color:var(--blue)}
.footer__brand img{height:32px;width:auto;margin-bottom:16px}
.footer__brand p{max-width:20em;color:var(--mute);font-size:16px}
.footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--mute);font-size:14px}
.footer__legal a{text-decoration:underline;text-underline-offset:3px}

/* ——— responsive (общее) ——— */
@media (max-width:1039px){ .nav__links{display:none} }
@media (max-width:1100px){ .footer__grid{grid-template-columns:1fr 1fr} }
@media (max-width:899px){
  :root{--nav-h:68px}
  .nav{padding:0 8px 0 20px}
  .nav__logo img{height:22px}
  .footer__grid{grid-template-columns:1fr}
}
@media (max-width:420px){ .nav__cta .btn--soft{display:none} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .spin,.mv .grow{animation:none}
}