/* Reference composition: copy anchored independently of the enlarged reel. */
:root{--hero-gutter:5vw;--hero-top:23svh;--hero-text-leading:clamp(18px,1.4167vw,27.2px)}
.topbar{position:absolute;padding:22px var(--hero-gutter);background:none;backdrop-filter:none;pointer-events:none}
.topbar .brand,.topbar .nav{pointer-events:auto}
.topbar .nav{
  position:absolute;top:50svh;right:var(--hero-gutter);transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:stretch;gap:3px;
  width:124px;padding:6px;border:1px solid rgba(255,255,255,.16);border-radius:12px;
  background:rgba(9,9,13,.55);backdrop-filter:blur(16px);font-size:10px;letter-spacing:.06em;
}
.topbar .nav>a{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:9px 8px;border-radius:9px;opacity:1;color:#c8c9d4}
.topbar .nav>a::before{content:"↗";order:1;color:#8b93ff;font-size:13px}
.topbar .nav>a:hover,.topbar .nav>a:focus-visible{color:#fff;background:rgba(139,147,255,.12)}
.topbar .nav .language-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding-top:6px;margin-top:2px;border-top:1px solid rgba(255,255,255,.14)}
.topbar .nav .lang{display:grid;place-items:center;min-height:32px;border:1px solid transparent;border-radius:8px;opacity:1;color:#a9aabb}
.topbar .nav .lang.active{border-color:rgba(139,147,255,.45);background:rgba(111,121,255,.18);color:#e4e5ff}
.topbar .nav .lang:hover{background:rgba(255,255,255,.09);color:#fff}
.topbar :is(a,button):focus-visible{outline:2px solid #9da4ff;outline-offset:3px}
.motion-ready .topbar .nav a::after{display:none}
#hero{
  height:auto;
  min-height:max(650px,100svh);
  display:block;
  padding:var(--hero-top) var(--hero-gutter) 100px;
  background:#050505;
  isolation:isolate;
}
#hero .hero-media{
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  display:block;
}
#hero .hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 8.2vw,rgba(190,194,222,.035) 8.2vw calc(8.2vw + 1px),transparent calc(8.2vw + 2px));
  mask-image:radial-gradient(ellipse 35% 51% at 69% 51%,transparent 0 82%,#000 100%);
}
#hero .hero-media img{
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:translateX(19%);
  filter:none;
}
#hero .hero-media::after{
  z-index:3;
  background:
    radial-gradient(ellipse 4.7% 7% at 45% 60%,#050505 0 45%,rgba(5,5,5,.82) 72%,transparent 100%),
    radial-gradient(ellipse 2.3% 3.6% at 50% 15%,#050505 0 40%,rgba(5,5,5,.82) 72%,transparent 100%),
    radial-gradient(ellipse 7.2% 10.5% at 88% 17%,#050505 0 42%,rgba(5,5,5,.84) 72%,transparent 100%),
    radial-gradient(ellipse 13% 20% at 23% 76%,#050505 0 46%,rgba(5,5,5,.86) 72%,transparent 100%),
    radial-gradient(ellipse at 68% 49%,transparent 34%,rgba(5,5,5,.2) 61%,rgba(5,5,5,.5) 100%),
    linear-gradient(90deg,#050505 0%,rgba(5,5,5,.97) 18%,rgba(5,5,5,.85) 31%,rgba(5,5,5,.05) 59%,transparent 85%),
    linear-gradient(0deg,rgba(5,5,5,.96),transparent 28%);
}
#hero .hero-glow{display:none}
#hero .hero-copy{
  position:relative;
  inset:auto;
  align-self:auto;
  width:33.333%;
  max-width:620px;
  padding:0;
}
#hero .role{
  position:static;
  margin:0 0 14px;
  color:#afb1c1;
  font:400 clamp(9px,.625vw,12px)/var(--hero-text-leading) "IBM Plex Mono",monospace;
  letter-spacing:.08em;
}
#hero h1,html:lang(ru) #hero h1{
  margin:0;
  font-size:clamp(34px,4.3vw,64px);
  font-weight:500;
  line-height:1.1;
  letter-spacing:0;
  font-kerning:normal;
  color:#f2f2f0;
}
#hero h1>span,html:lang(ru) #hero h1>span{
  font-size:1em;
  font-weight:500;
  line-height:1.1;
  letter-spacing:inherit;
}
#hero h1>span:nth-child(3),html:lang(ru) #hero h1>span:nth-child(3){
  margin-top:.14em;
  font-size:1em;
  font-weight:400;
  line-height:1.1;
  letter-spacing:inherit;
  color:#6f79ff;
}
#hero .hero-description{
  max-width:34ch;
  margin:24px 0 0;
  color:#b3b4c2;
  font:400 clamp(12px,.8333vw,16px)/var(--hero-text-leading) "Manrope",sans-serif;
}
#hero .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px;width:max-content;max-width:calc(100% / 1.2);scale:1.2;transform-origin:left center}
#hero .hero-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:clamp(32px,2.396vw,46px);
  padding:clamp(8px,.6771vw,13px) clamp(12px,.9375vw,18px);
  border:1px solid #38383f;
  border-radius:20px;
  background:transparent;
  color:#e4e4ec;
  font:600 12px/1 "Manrope",sans-serif;
  transition:border-color .2s,background .2s;
}
#hero .hero-action-primary{border-color:#ececf3;background:#ececf3;color:#111116}
#hero .hero-action:hover{border-color:#8b93ff;background:rgba(139,147,255,.1)}
#hero .hero-action-primary:hover{background:#d8dbff}
@media(max-width:1100px){#hero .hero-action{font-size:11px}}
#hero .showreel{
  position:absolute;
  inset:calc(100% + 18px) auto auto 0;
  transform:none;
  grid-column:auto;
  justify-self:auto;
  display:block;
  align-items:center;
  gap:16px;
  width:min(23.4vw,432px,var(--hero-reel-fit-width,432px))!important;
  aspect-ratio:16 / 9;
  margin:0;
  padding:0;
  border:1px solid #38383f;
  border-radius:12px;
  overflow:hidden;
  background:transparent;
  box-shadow:none;
  text-align:left;
}
#hero .hero-reel-art{
  position:relative;
  display:block;
  flex:none;
  width:100%;
  height:100%;
  overflow:hidden;
  border:0;
  border-radius:0;
}
#hero .hero-reel-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,5,9,.95),rgba(5,5,9,.12) 65%);pointer-events:none}
#hero .showreel img{position:static;width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .2s}
#hero .hero-reel-play{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(5,5,9,.35);font-size:14px;color:#fff}
#hero .hero-reel-meta{position:absolute;z-index:2;left:16px;right:16px;bottom:13px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#eeeef6;font:400 11px/1.5 "IBM Plex Mono",monospace;letter-spacing:.08em}
#hero .hero-reel-meta strong{font:inherit;font-weight:500}
#hero .hero-reel-meta small{color:#9c9fad;font:inherit}
#hero .showreel:hover img{opacity:1}
#hero .hero-footer{
  position:absolute;
  z-index:4;
  left:5vw;
  right:5vw;
  bottom:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
  padding-top:18px;
  border-top:1px solid #282830;
  color:#9698a8;
  font:400 12px/1.6 "IBM Plex Mono",monospace;
  letter-spacing:.05em;
}
#hero .hero-availability{display:flex;align-items:center;gap:10px;margin:0}
#hero .hero-status-dot{flex:none;width:5px;height:5px;border-radius:50%;background:#8b93ff;box-shadow:0 0 14px rgba(111,121,255,.6)}
#hero .scroll{position:static;display:flex;align-items:center;gap:12px;max-width:none;font:inherit;letter-spacing:inherit;color:inherit;text-align:right}

/* Keep the footer labels anchored and bring the divider 14px closer to them. */
@media(min-width:701px){
  #hero .hero-footer{bottom:14px;padding-top:18px}
}

@media(min-width:701px) and (max-width:980px){
  #hero .hero-copy{width:40%}
  #hero .hero-media img{transform:translateX(22%)}
  #hero .hero-description{font-size:15px}
  #hero{--hero-text-leading:25.5px}
  #hero .showreel{width:min(28.8vw,var(--hero-reel-fit-width,432px))!important}
}
@media(min-width:701px) and (max-height:650px){
  #hero{min-height:760px}
}
@media(max-width:700px){
  :root{--hero-gutter:6vw;--hero-text-leading:23.8px}
  .topbar{padding:18px var(--hero-gutter);background:none}
  .topbar .brand{max-width:none;font-size:10px}
  .topbar .nav{top:205px;width:112px;gap:3px;font-size:10px;letter-spacing:.04em;padding:6px;border-radius:12px}
  .topbar .nav>a{min-height:36px;padding:9px 6px}
  #hero{display:block;min-height:max(850px,100svh);padding:358px 6vw 26px}
  #hero .hero-media{height:410px}
  #hero .hero-media img{transform:none;object-position:center 35%}
  #hero .hero-media::before{mask-image:radial-gradient(ellipse 38% 53% at 50% 53%,transparent 0 84%,#000 100%)}
  #hero .hero-media::after{background:
    radial-gradient(ellipse 5% 7% at 3% 60%,#050505 0 45%,rgba(5,5,5,.82) 72%,transparent 100%),
    radial-gradient(ellipse 3% 4.5% at 14% 20%,#050505 0 40%,rgba(5,5,5,.82) 72%,transparent 100%),
    radial-gradient(ellipse 8% 11% at 88% 21%,#050505 0 42%,rgba(5,5,5,.84) 72%,transparent 100%),
    radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(5,5,5,.18) 62%,rgba(5,5,5,.4) 100%),
    linear-gradient(0deg,#050505 0%,rgba(5,5,5,.96) 8%,rgba(5,5,5,.35) 24%,transparent 48%),
    linear-gradient(180deg,rgba(5,5,5,.3),transparent 28%)}
  #hero .hero-copy{width:100%;max-width:none;inset:auto}
  #hero .role{font-size:11px;line-height:var(--hero-text-leading);margin-bottom:17px}
  #hero h1,html:lang(ru) #hero h1{font-size:clamp(27px,7.1vw,44px)}
  #hero .hero-description{font-size:14px;margin-top:20px;max-width:35ch}
  #hero .hero-actions{margin-top:24px;gap:10px}
  #hero .hero-action{gap:12px;padding:12px 15px;min-height:46px;font-size:10px}
  #hero .showreel{position:relative;inset:auto;width:90%!important;max-width:360px;margin-top:24px}
  #hero .hero-footer{position:relative;inset:auto;margin-top:36px;gap:16px}
  #hero .scroll{text-align:left}
}
@media(pointer:coarse){
  .topbar .nav a,.topbar .lang{display:flex;align-items:center;min-height:32px}
}
@media(max-width:360px){#hero .hero-action{font-size:9px}}