/* UGC Talent Agency — UGCFly-close rebuild v2 */
:root{
  --font-display:"Urbanist",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --bg:#fff;--bg-card:#f6f9ff;--bg-soft:#eef4fe;--bg-blue:#eaf1fd;--bg-dark:#0a1a33;
  --blue:#3983f4;--blue-dark:#2563c7;--blue-light:#6ba3f7;
  --blue-tint:rgba(57,131,244,.08);--blue-tint-strong:rgba(57,131,244,.14);
  --text:#0a1a33;--text-muted:#5c6b82;--text-subtle:#8a95a8;
  --border:rgba(57,131,244,.14);--border-dark:rgba(57,131,244,.35);
  --max:1240px;--radius:20px;--radius-lg:28px;--radius-pill:999px;
  --section:120px 48px;--section-m:80px 20px;
  --shadow-blue:0 12px 28px rgba(57,131,244,.3);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer}
.container{width:min(100% - 40px,var(--max));margin-inline:auto}
.label{display:inline-block;font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.label::before{content:"✢ "}

/* NAV */
.nav{position:fixed;inset:0 0 auto;z-index:100;padding:14px 0;transition:.3s background,.3s box-shadow,.3s backdrop-filter}
.nav.scrolled{background:rgba(255,255,255,.88);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--border)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav__brand img{height:34px;width:auto}
.nav__links{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav__links a{font-size:14.5px;font-weight:500;color:var(--text-muted);transition:color .2s}
.nav__links a:hover{color:var(--text)}
/* Contact Us — always blue button (nav link color must NOT override) */
.nav__cta,
a.btn.btn--primary.nav__cta,
.nav a.btn--primary{
  background:var(--blue)!important;
  color:#fff!important;
  border:1px solid var(--blue)!important;
  box-shadow:var(--shadow-blue);
  flex-shrink:0;
  margin-left:12px;
}
.nav__cta:hover,
a.btn.btn--primary.nav__cta:hover,
.nav a.btn--primary:hover{
  background:var(--blue-dark)!important;
  border-color:var(--blue-dark)!important;
  color:#fff!important;
}
.nav__toggle{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--border);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__toggle span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px}

/* BTN */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:14px;font-family:var(--font-display);font-weight:700;font-size:15px;transition:.2s;white-space:nowrap;border:1px solid transparent}
.btn--primary{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:var(--shadow-blue)}
.btn--primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border-dark)}
.btn--ghost:hover{background:var(--blue-tint)}
.btn--white{background:#fff;color:var(--blue-dark)}
.btn--sm{height:40px;padding:0 16px;font-size:14px;border-radius:12px}

/* HERO — UGCFly layout: clear center, orbit behind, side floats only */
.hero{position:relative;padding:120px 0 0;overflow:hidden;background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 62%);min-height:100vh}
.hero__orbit{position:absolute;top:40px;left:50%;transform:translateX(-50%);width:min(120vw,1500px);aspect-ratio:1;pointer-events:none;z-index:0;opacity:.55;
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 0%,#000 28%,transparent 62%);
  mask-image:radial-gradient(circle at 50% 42%,#000 0%,#000 28%,transparent 62%)}
.hero__orbit-ring{position:absolute;inset:0;animation:orbit-spin 56s linear infinite}
.hero__orbit-arm{position:absolute;top:0;left:50%;width:0;height:50%;transform-origin:0 100%;transform:rotate(calc(var(--i)*(1turn / var(--n))))}
.hero__orbit-logo{position:absolute;top:-28px;left:50%;width:58px;height:58px;border-radius:16px;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 10px 28px rgba(10,24,60,.12);border:1px solid var(--border);
  transform:translateX(-50%) rotate(calc(var(--i)*(-1turn / var(--n))));animation:orbit-counter 56s linear infinite}
.hero__orbit-logo img{width:100%;height:100%;object-fit:cover}
.hero__orbit-logo--brand{padding:0;background:#fff}
.hero__orbit-logo--brand svg{display:block}
@keyframes orbit-spin{to{transform:rotate(1turn)}}
@keyframes orbit-counter{from{transform:translateX(-50%) rotate(calc(var(--i)*(-1turn / var(--n))))}to{transform:translateX(-50%) rotate(calc(var(--i)*(-1turn / var(--n)) - 1turn))}}

.hero__inner{position:relative;z-index:3;text-align:center;padding:8px 0 28px;max-width:720px;margin:0 auto}
.hero__copy{position:relative;z-index:3}
.hero__pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-pill);background:rgba(255,255,255,.92);border:1px solid var(--border);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:22px;box-shadow:0 6px 20px rgba(57,131,244,.08)}
.hero__pill-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--blue-tint-strong);animation:pulse-dot 2.4s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 4px var(--blue-tint-strong)}50%{box-shadow:0 0 0 8px rgba(57,131,244,.12)}}
.hero__title{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,7vw,80px);line-height:1.02;letter-spacing:-.03em;max-width:920px;margin:0 auto 16px}
.hero__title strong{display:block;background:linear-gradient(135deg,var(--blue),var(--blue-dark));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__title em{display:block;font-style:italic;font-weight:600;color:var(--blue)}
.hero__sub{font-size:clamp(16px,2vw,20px);color:var(--text-muted);max-width:520px;margin:0 auto 24px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:22px}
.hero__ctas .btn{transition:transform .25s var(--ease),box-shadow .25s,background .2s}
.hero__ctas .btn:hover{transform:translateY(-2px)}
.hero__platforms{margin:0 auto 12px;max-width:560px}
.hero__platforms-label{text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:500;color:var(--text-muted);margin-bottom:10px}
.hero__platforms-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hero__platforms-track{display:flex;width:max-content;animation:row-scroll 22s linear infinite}
.hero__platforms-track:hover{animation-play-state:paused}
.hero__platforms-group{display:flex;align-items:center;gap:10px;padding-right:10px;flex-shrink:0}
.hero__platform{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.hero__stats{display:inline-grid;grid-template-columns:repeat(3,auto);gap:12px 36px;margin:28px auto 20px;padding:16px 28px;background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 32px rgba(15,40,90,.08)}
.hero__stat{text-align:center}
.hero__stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--blue-dark)}
.hero__stat span{font-size:12.5px;color:var(--text-muted)}

/* Hero floats — full vertical of hero (above gallery), scattered */
.hero__floats{
  position:absolute;
  top:90px; /* under sticky nav */
  left:0;right:0;
  bottom:300px; /* above gallery — taller zone so % positions move visibly */
  min-height:520px;
  pointer-events:none;z-index:4;overflow:visible;
}
.hero__float{
  position:absolute;border-radius:20px;overflow:hidden;
  box-shadow:0 18px 40px rgba(15,40,90,.16);
  border:2px solid rgba(255,255,255,.95);
  /* smooth float — only translate3d in keyframes (no static transform fight) */
  animation:hero-float 8s ease-in-out infinite;
  background:#fff;
  backface-visibility:hidden;
  -webkit-font-smoothing:subpixel-antialiased;
}
.hero__float img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.hero__float--money{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:14px 16px;width:132px;
  background:linear-gradient(145deg,#0b1f3f 0%,#1a4a9e 55%,#2563c7 100%);
  color:#fff;border-color:rgba(255,255,255,.22);
}
.hero__float--money strong{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.03em;line-height:1;color:#7dffb2}
.hero__float--money em{font-style:normal;font-size:12px;opacity:.75}
.hero__money-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.hero__float--money-sm{width:118px}
.hero__float--money-sm strong{font-size:22px}
.hero__float--tag{
  display:inline-flex;align-items:center;padding:10px 14px;width:auto;
  font-family:var(--font-display);font-weight:700;font-size:13px;
  background:#fff;color:var(--text);white-space:nowrap;
}
/*
 * Vertical scatter across whole floats area (0% = top under nav, 100% = above gallery)
 * Left column / right column staggered so nothing piles in one band
 */
/* 1-я картинка (верх слева) */
.hero__float--a{top:2%;left:max(12px,calc(50% - 620px));width:108px;aspect-ratio:3/4;--dy:8px;--rot:-8deg;animation-delay:0s;z-index:4}
/* Paid this week — между 1-й и 2-й картинкой слева */
.hero__float--b{
  top:28% !important;
  left:max(36px,calc(50% - 500px)) !important;
  bottom:auto !important;
  --dy:8px;--rot:5deg;animation-delay:.35s;z-index:6;
}
.hero__float--c{top:4%;right:max(14px,calc(50% - 600px));width:112px;aspect-ratio:3/4;--dy:8px;--rot:7deg;animation-delay:.2s}
.hero__float--d{top:28%;right:max(12px,calc(50% - 480px));--dy:7px;--rot:-4deg;animation-delay:.7s}
/* 2-я картинка (ниже плашки) */
.hero__float--e{top:40%;left:max(16px,calc(50% - 640px));width:100px;aspect-ratio:3/4;--dy:8px;--rot:6deg;animation-delay:1s;z-index:4}
.hero__float--f{top:46%;right:max(20px,calc(50% - 560px));--dy:7px;--rot:-6deg;animation-delay:.55s}
.hero__float--g{top:62%;left:max(32px,calc(50% - 540px));width:96px;aspect-ratio:3/4;--dy:8px;--rot:-10deg;animation-delay:1.15s}
.hero__float--i{top:68%;right:max(36px,calc(50% - 500px));width:96px;aspect-ratio:3/4;--dy:7px;--rot:9deg;animation-delay:1.3s}
.hero__float--j{top:82%;right:max(18px,calc(50% - 620px));--dy:6px;--rot:-3deg;animation-delay:.85s}
/* GPU-friendly: rotate + translate in one composite layer */
@keyframes hero-float{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}
  50%{transform:translate3d(0,calc(var(--dy,8px) * -1),0) rotate(var(--rot,0deg))}
}
/* slightly taller hero content so vertical spread has room */
.hero__inner{padding-bottom:48px;min-height:auto}

/* photo marquee (no video = no stutter) */
.gallery{position:relative;z-index:5;margin-top:12px;isolation:isolate}
.gallery__viewport{width:100%;overflow:hidden;height:420px;padding-top:24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.gallery__track{display:flex;width:max-content;height:100%;gap:14px;animation:gallery-scroll 55s linear infinite;align-items:flex-end;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
/* no hover-pause — it caused jerky restarts */
.gallery__group{display:flex;gap:14px;flex-shrink:0;height:100%;align-items:flex-end}
.gallery__item{position:relative;width:clamp(190px,20vw,280px);height:88%;border-radius:24px 24px 0 0;overflow:hidden;background:var(--bg-card);flex-shrink:0;border:1px solid var(--border);box-shadow:0 16px 40px rgba(10,24,60,.1)}
.gallery__item:nth-child(odd){height:100%}
.gallery__item:nth-child(3n){height:80%}
.gallery__item video,.gallery__item img{width:100%;height:100%;object-fit:cover;background:#0a0f18;display:block}
.gallery__item video{
  transform:translateZ(0);
  backface-visibility:hidden;
  pointer-events:none;
}
@keyframes gallery-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 7px),0,0)}}
@keyframes row-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes fade-up{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes rise-in{from{opacity:0;filter:blur(6px);transform:translate3d(0,36px,0)}to{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}}

/* MARQUEE */
.marquee{padding:22px 0;background:var(--blue);overflow:hidden}
.marquee__track{display:flex;gap:40px;width:max-content;animation:marquee 36s linear infinite;font-family:var(--font-display);font-weight:600;font-size:clamp(18px,2.5vw,26px)}
.marquee__item{display:inline-flex;align-items:center;gap:40px;color:rgba(255,255,255,.95);white-space:nowrap}
.marquee__star{animation:spin 10s linear infinite;color:rgba(255,255,255,.7);font-size:22px}
@keyframes marquee{from{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}

/* SECTIONS */
.section{padding:var(--section)}
.section--soft{background:var(--bg-soft)}
.section--dark{background:var(--bg-dark);color:#fff}
.section__head{max-width:680px;margin-bottom:56px}
.section__head--center{margin-inline:auto;text-align:center}
.section__title{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4.5vw,52px);line-height:1.08;letter-spacing:-.03em;margin-bottom:16px}
.section__title .word{transition:opacity .1s linear}
.section__title em{font-style:italic;color:var(--blue)}
.section--dark .section__title em{color:var(--blue-light)}
.section__sub{font-size:17px;color:var(--text-muted);line-height:1.6}
.section--dark .section__sub{color:rgba(255,255,255,.7)}

/* ABOUT — fan layout: faces open, little overlap on faces */
.about__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.about__visual{
  position:relative;min-height:540px;
  border-radius:var(--radius-lg);
  background:radial-gradient(circle at 50% 45%,#eaf1fd 0%,var(--bg-card) 70%);
  border:1px solid var(--border);
  overflow:hidden;
  padding:8px;
}
.about__float{
  position:absolute;border-radius:18px;overflow:hidden;
  box-shadow:0 16px 40px rgba(10,24,60,.16);
  border:2px solid #fff;
  /* static pose — no float anim (was causing photo "swap" feel) */
  animation:none;
  background:#111;
  --sx:1;
  transform:rotate(var(--rot,0deg)) scaleX(var(--sx,1));
  backface-visibility:hidden;
}
/* crop toward face (upper third), not phone / hands at bottom */
.about__float img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 16%;
  display:block;
}
/* LEFT TOP — face higher in the crop */
.about__float--1 img{object-position:center top;object-fit:cover}
.about__float--2 img{object-position:center 14%}
/* scatter: bottom pair raised; center card highest z + mid height */
.about__float--1{top:2%;left:3%;width:42%;aspect-ratio:3/4;--rot:-8deg;z-index:2}
.about__float--2{top:6%;right:2%;width:40%;aspect-ratio:3/4;--rot:9deg;animation-delay:.4s;z-index:3}
/* две нижние — подняты + зеркало через --sx (без transform на img) */
.about__float--3{top:34%;left:4%;width:38%;aspect-ratio:3/4;--rot:6deg;--sx:-1;animation-delay:.85s;z-index:3}
.about__float--4{top:38%;right:4%;width:40%;aspect-ratio:3/4;--rot:-7deg;--sx:-1;animation-delay:1.15s;z-index:3;bottom:auto}
/* посередине — выше всех (z-index) */
.about__float--5{
  top:28%;left:32%;width:36%;aspect-ratio:3/4;--rot:3deg;
  animation-delay:.65s;z-index:10;
}
/* one composite transform: flip + rotate + float */
@keyframes float-card{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--rot,0deg)) scaleX(var(--sx,1))}
  50%{transform:translate3d(0,-6px,0) rotate(var(--rot,0deg)) scaleX(var(--sx,1))}
}
.about__body p{color:var(--text-muted);margin-bottom:14px;font-size:16px}
.about__body p strong{color:var(--text);font-weight:600}
.about__meta{margin-top:24px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:var(--radius-pill);background:var(--blue-tint);border:1px solid var(--border);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
@media(max-width:900px){
  .about__visual{min-height:440px}
  .about__float--1{top:2%;left:2%;width:46%}
  .about__float--2{top:6%;right:2%;width:44%}
  .about__float--3{top:36%;left:2%;width:42%}
  .about__float--4{top:40%;right:2%;width:44%;bottom:auto}
  .about__float--5{top:30%;left:30%;width:40%;z-index:10}
}

/* HOW / PILLARS — original horizontal flow (title + card + arrows) */ .pillars{padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(48px,6vw,80px)} .pillars__head{text-align:center;max-width:820px;margin:0 auto} .pillars__title{ font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.05; font-size:clamp(2.4rem,4.2vw,3.7rem);margin:0 0 16px;color:var(--text); } .pillars__title-line{display:block} .pillars__title-line--strong{ background:linear-gradient(110deg,var(--blue) 0%,var(--blue-dark) 55%,#1d4ed8 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .pillars__sub{margin:0 auto;max-width:520px} .pillars-flow{ display:grid; grid-template-columns:1fr 72px 1fr 72px 1fr; align-items:start; gap:0 8px; width:min(1040px,100%); margin:clamp(40px,5.5vw,72px) auto 0; } .pillar-step{text-align:center;display:flex;flex-direction:column;align-items:center} .pillar-step__num{ width:44px;height:44px;border-radius:14px;margin-bottom:14px; display:grid;place-items:center; font-family:var(--font-display);font-weight:800;font-size:15px; color:var(--blue);background:var(--blue-tint);border:1px solid var(--border); } .pillar-step h3{ margin:0 0 10px; font-family:var(--font-display);font-weight:800;letter-spacing:-.02em; font-size:clamp(1.15rem,1.5vw,1.55rem);color:var(--text);line-height:1.2; } .pillar-step__copy{ margin:0 0 20px;max-width:240px; font-size:14px;line-height:1.5;color:var(--text-muted); } .pillar-card{ display:flex;justify-content:center;align-items:center; width:100%;max-width:240px; } .pillar-card img{ width:min(220px,100%);height:auto; border-radius:24px; box-shadow:0 18px 40px rgba(10,24,60,.12),0 0 0 1px var(--border); background:var(--bg-card); transition:transform .35s var(--ease),box-shadow .35s; } .pillar-step:hover .pillar-card img{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(57,131,244,.18),0 0 0 1px rgba(57,131,244,.2); } .flow-arrow{ position:relative;display:block;align-self:center; width:56px;height:3px;margin:88px auto 0; background:linear-gradient(90deg,var(--blue-light),var(--blue)); border-radius:var(--radius-pill); } .flow-arrow::after{ content:"";position:absolute;top:50%;right:-1px; width:11px;height:11px; border-top:3px solid var(--blue);border-right:3px solid var(--blue); transform:translateY(-50%) rotate(45deg); } /* legacy step styles (if used elsewhere) */ .how__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start} .steps{display:flex;flex-direction:column;gap:18px} .step{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:20px;border-radius:var(--radius);background:#fff;border:1px solid var(--border)} .step__n{width:48px;height:48px;border-radius:14px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;font-family:var(--font-display);font-weight:800} .step h3{font-family:var(--font-display);font-size:18px;margin-bottom:4px} .step p{font-size:14px;color:var(--text-muted)} /* PLATFORM mock */
.platform__stage{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:#fff;box-shadow:0 20px 50px rgba(10,24,60,.08)}
.platform__titlebar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f3f6fb;border-bottom:1px solid var(--border)}
.platform__dot{width:10px;height:10px;border-radius:50%}
.platform__dot--r{background:#ff5f57}.platform__dot--y{background:#febc2e}.platform__dot--g{background:#28c840}
.platform__url{margin-left:12px;font-size:12px;color:var(--text-muted);background:#fff;border:1px solid var(--border);border-radius:8px;padding:4px 10px}
.platform__shot{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;background:var(--bg-soft)}
.platform__shot video,.platform__shot img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;background:#000;display:block}
.platform__shot video{pointer-events:none}

/* SHOWCASE */
.showcase__head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:40px}
.showcase__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.showcase__video{position:relative;border-radius:20px;overflow:hidden;background:var(--bg-dark);aspect-ratio:9/16;border:1px solid var(--border)}
.showcase__video{cursor:pointer}
.showcase__video video{width:100%;height:100%;object-fit:cover;background:#0a0f18;transform:translateZ(0);pointer-events:none}
.showcase__video::after{
  content:"▶";position:absolute;inset:auto 12px 12px auto;z-index:2;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,26,51,.55);color:#fff;font-size:12px;
  opacity:.85;transition:opacity .2s;pointer-events:none;
}
.showcase__video:hover::after,.showcase__video.is-playing::after{opacity:0}
.showcase__video:nth-child(2){margin-top:28px}
.showcase__video:nth-child(4){margin-top:44px}

/* USE CASES */
.usecases__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.usecase{padding:28px;border-radius:var(--radius);background:#fff;border:1px solid var(--border);transition:transform .25s var(--ease),box-shadow .25s}
.usecase:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(57,131,244,.12)}
.usecase__tag{font-size:12px;font-weight:600;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.usecase h3{font-family:var(--font-display);font-size:22px;margin-bottom:8px;letter-spacing:-.02em}
.usecase p{font-size:14px;color:var(--text-muted)}

/* FEATURES */
.features__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{padding:28px;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--border)}
.feature__icon{width:44px;height:44px;border-radius:12px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;font-size:20px;margin-bottom:14px}
.feature h3{font-family:var(--font-display);font-size:18px;margin-bottom:8px}
.feature p{font-size:14px;color:var(--text-muted)}

/* FEEDBACK wall */
.feedback__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feedback__card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--bg-card);transition:transform .25s var(--ease)}
.feedback__card:hover{transform:translateY(-6px)}
.feedback__card img{width:100%;height:auto}

/* Creators — unique grid, NO looping duplicates */
.creators-wall{overflow:visible;padding:12px 16px 28px}
.creators-wall__track{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;width:min(1000px,100%);margin:0 auto;max-width:100%;animation:none}
.creators-wall--grid .creators-wall__track{animation:none;width:min(1000px,100%)}
.creators-wall__item{width:120px;height:154px;border-radius:18px;overflow:hidden;flex-shrink:0;border:1px solid var(--border);background:#000;box-shadow:0 10px 24px rgba(10,24,60,.1);transition:transform .3s var(--ease)}
.creators-wall__item:hover{transform:translateY(-6px)}
.creators-wall__item video,.creators-wall__item img{width:100%;height:100%;object-fit:cover}
@media(max-width:640px){
  .creators-wall__item{width:96px;height:124px}
}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq__item{border-bottom:1px solid var(--border)}
.faq__q{width:100%;text-align:left;padding:20px 0;display:flex;justify-content:space-between;gap:16px;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--text)}
.faq__q span{color:var(--blue);font-size:22px;line-height:1}
.faq__a{display:none;padding:0 0 18px;color:var(--text-muted);font-size:15px}
.faq__item.open .faq__a{display:block}
.faq__item.open .faq__q span{transform:rotate(45deg)}

/* CTA */
.cta{padding:80px 48px 120px}
.cta__box{position:relative;max-width:var(--max);margin:0 auto;background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;border-radius:var(--radius-lg);padding:72px 56px;display:grid;grid-template-columns:1.4fr auto;gap:40px;align-items:center;overflow:hidden;isolation:isolate}
.cta__box::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.18),transparent 45%);z-index:-1}
.cta__title{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:-.03em;margin:0 0 14px}
.cta__copy{opacity:.9;max-width:520px;margin-bottom:24px}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px}
.cta__note{margin-top:14px;font-size:13px;opacity:.75}
.cta__chips{display:flex;flex-direction:column;gap:12px;min-width:220px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:600;transition:background .2s}
.chip:hover{background:rgba(255,255,255,.24)}
.chip svg{width:20px;height:20px;flex-shrink:0}

/* FOOTER */
.footer{padding:40px 0 48px;border-top:1px solid var(--border)}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.footer__brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--text-muted);font-size:14px}
.footer__brand img{height:28px}
.footer__copy{font-size:13px;color:var(--text-subtle)}
.footer__links{display:flex;gap:18px;font-size:13px;color:var(--text-muted)}

/* RESPONSIVE */
@media (max-width:1024px){
  .about__grid,.how__grid,.showcase__head,.cta__box{grid-template-columns:1fr}
  .showcase__grid{grid-template-columns:repeat(3,1fr)}
  .showcase__video:nth-child(n){margin-top:0}
  .usecases__grid,.features__grid{grid-template-columns:1fr 1fr}
  .feedback__grid{grid-template-columns:1fr 1fr}
  .platform__shot{grid-template-columns:repeat(3,1fr)}
  .cta__chips{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:900px){
  .hero__orbit{display:none}
  .nav__links{display:none;position:absolute;top:calc(100% + 8px);left:20px;right:20px;flex-direction:column;align-items:stretch;gap:0;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:0 16px 40px rgba(10,24,60,.12)}
  .nav__links.open{display:flex}
  .nav__links a{padding:12px 14px;border-radius:10px}
  .nav__toggle{display:inline-flex}
  .gallery__viewport{height:340px}
  .section{padding:var(--section-m)}
  .cta{padding:40px 20px 80px}
  .cta__box{padding:40px 24px}
}
@media (max-width:640px){
  .hero__stats{grid-template-columns:1fr;width:100%}
  .showcase__grid,.usecases__grid,.features__grid,.feedback__grid,.platform__shot{grid-template-columns:1fr 1fr}
  .about__visual{min-height:360px}
}
@media (prefers-reduced-motion:reduce){
  .hero__orbit-ring,.hero__orbit-logo,.gallery__track,.marquee__track,.marquee__star,.about__float,.hero__platforms-track,.creators-wall__track,.hero__float,.hero__pill-dot{animation:none!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
}


@media (max-width:1024px){.pillars-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;width:100%;max-width:900px}.flow-arrow{display:none}.pillar-step__copy{max-width:200px;font-size:13px}.pillar-card img{width:min(180px,100%)}}
@media (max-width:640px){.pillars-flow{grid-template-columns:1fr;width:min(320px,100%);gap:8px;justify-items:center}.flow-arrow{display:block;width:3px;height:40px;margin:4px auto;background:linear-gradient(180deg,var(--blue-light),var(--blue))}.flow-arrow::after{top:auto;right:50%;bottom:-2px;transform:translateX(50%) rotate(135deg)}.pillar-step__copy{max-width:280px}.pillar-card img{width:min(220px,88vw)}}


/* (hero floats + hero inner defined above — UGCFly clean layout) */

.contact-chip{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:14px;font-weight:700;font-family:var(--font-display);border:0;transition:transform .2s}
.contact-chip:hover{transform:translateY(-2px)}
.contact-chip svg{width:20px;height:20px}
.contact-chip--whatsapp{background:linear-gradient(180deg,#2fe076,#1fbe5d);color:#053016}
.contact-chip--telegram{background:linear-gradient(180deg,#3db6f5,#229ed9);color:#fff}
.contact-chip--email{background:#fff;color:#0b1f3f}
.cta__glow{display:none}
.cta__side{display:flex;flex-direction:column;gap:12px;min-width:180px}
.cta__stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:16px 18px}
.cta__stat b{display:block;font-family:var(--font-display);font-size:28px;color:#7dffb2}
.cta__stat span{font-size:12px;opacity:.8}
.cta__label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:8px}
.cta__content{position:relative;z-index:1}

/* Who we are polaroid collage (ПРАВКИ green checks) */
.about__visual--collage{min-height:620px;background:transparent;border:0;overflow:visible;box-shadow:none}
.about-collage{position:relative;width:min(100%,402px);height:620px;margin:0 auto;overflow:visible}
.about-collage__image{position:absolute;z-index:2;border-radius:24px;object-fit:cover;width:200px;height:auto;box-shadow:0 16px 40px rgba(57,131,244,.15);background:#cfcfd1}
.about-collage__image--1{left:10px;top:0;z-index:3}
.about-collage__image--2{left:220px;top:-15%;z-index:2}
.about-collage__image--3{left:220px;top:37%;z-index:3}
.about-collage__image--4{left:10px;bottom:0;z-index:2}
.about-collage__image--5{left:220px;bottom:-15%;z-index:4}
.about-collage__arrow{position:absolute;left:-10px;bottom:-20px;z-index:1;width:470px;max-width:none;height:auto;pointer-events:none;opacity:.85}
.platform__shot{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px}
.platform__shot img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px}
.creators-wall__item img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
  .about-collage{width:286px;height:500px}
  .about-collage__image--1{left:7px;top:55px;width:115px;height:155px}
  .about-collage__image--2{left:156px;top:-17px;width:118px;height:162px}
  .about-collage__image--3{left:155px;top:236px;width:118px;height:110px}
  .about-collage__image--4{left:6px;top:317px;bottom:auto;width:118px;height:162px}
  .about-collage__image--5{left:158px;top:396px;bottom:auto;width:118px;height:162px}
  .about-collage__arrow{left:50px;width:300px}
}

/* ===== PERF + missing tokens (optimized full design) ===== */
.section--navy{background:linear-gradient(145deg,#0b1f3f,#1a4a9e);color:#fff}
.section--navy .label,.label--light{color:#9ec5ff}
.section__title--light,.section--navy .section__title{color:#fff}
.section--navy .feature{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14)}
.section--navy .feature h3{color:#fff}
.section--navy .feature p{color:rgba(255,255,255,.75)}
.feedback__quote{border-radius:var(--radius);padding:22px;background:linear-gradient(145deg,#0b1f3f,#1a4a9e);color:#fff}
.feedback__stars{color:#7dffb2;margin-bottom:8px}
.feedback__quote p{margin:0 0 12px;font-size:15px;line-height:1.5}
.feedback__quote footer{font-size:12px;opacity:.85}
.feedback__quote footer b{color:#fff}

.section,.cta,.footer{content-visibility:auto;contain-intrinsic-size:1px 900px}
.hero{content-visibility:visible}

.gallery__track,.marquee__track,.hero__platforms-track,.creators-wall__track,.hero__orbit-ring,.hero__float{
  will-change:transform;
}

/* UGCFly-style scroll reveal */
/* soft reveal — no blur (blur caused card jank) */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal][data-reveal-delay="40"]{--d:40ms}
[data-reveal][data-reveal-delay="60"]{--d:60ms}
[data-reveal][data-reveal-delay="80"]{--d:80ms}
[data-reveal][data-reveal-delay="100"]{--d:100ms}
[data-reveal][data-reveal-delay="120"]{--d:120ms}
[data-reveal][data-reveal-delay="160"]{--d:160ms}
[data-reveal].is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}
.section__title .word{display:inline-block}

.usecase,.feature,.feedback__card,.showcase__video{
  transition:box-shadow .25s var(--ease);
}
.usecase:hover,.feature:hover,.feedback__card:hover{box-shadow:0 12px 28px rgba(57,131,244,.14)}
.showcase__video:hover{box-shadow:0 16px 36px rgba(10,24,60,.16)}

/* hide side floats only on narrow screens where they collide */
@media (max-width:1100px){
  .hero__floats{display:none}
}
@media (max-width:900px){
  .hero__orbit{opacity:.22}
  .gallery__viewport{height:300px}
}
@media (pointer:coarse){
  .hero__orbit-ring,.hero__orbit-logo{animation-duration:80s}
  .gallery__track{animation-duration:70s}
  .marquee__track{animation-duration:48s}
  .creators-wall__track{animation-duration:55s}
}


/* pause ONLY marquee tracks off-screen — not float cards (pause caused jerks) */
.is-paused.gallery__track,
.is-paused.marquee__track,
.is-paused.hero__platforms-track,
.is-paused.hero__orbit-ring{
  animation-play-state:paused !important;
}

/* ===== PERF OPT 2026 ===== */
/* paint isolation — keeps design, skips offscreen work */
.section,.cta,.footer,.marquee,.pillars{content-visibility:auto;contain-intrinsic-size:auto 700px}
.hero{content-visibility:visible;contain:layout style}
.nav{contain:layout style}
.gallery__item,.creators-wall__item,.showcase__video,.about__float,.hero__float,.feedback__card,.pillar-card{
  contain:layout style paint;
}
/* only animate transform/opacity (already) — limit will-change to active tracks */
.gallery__track,.marquee__track,.hero__platforms-track,.hero__orbit-ring{will-change:transform}
/* will-change only on tracks */
/* media defaults */
img,video{max-width:100%;height:auto}
video{background:#0a0f18}
/* reduce continuous GPU pressure a bit without killing motion */
@media (prefers-reduced-motion:no-preference){
  .gallery__track{animation-duration:55s}
}
/* stop hover-pause of gallery from reflow storms */
.gallery__track{backface-visibility:hidden}