@font-face{
  font-family:'REM';
  src:url('fonts/REM.woff2') format('woff2-variations'),
      url('fonts/REM.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
/* Cyrillic is missing in REM, so the Russian version uses a matched face */
@font-face{
  font-family:'REM';
  src:url('fonts/REM-cyrillic.woff2') format('woff2');
  unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F;
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
:root{
  --navy:#0A0B18;
  --navy-2:#111428;
  --pink:#C41E4A;
  --pink-hover:#A81640;
  --pink-dim:rgba(196,30,74,.22);
  --ink:#FFFFFF;
  --bg:#0A0B18;
  --fg:#FFFFFF;
  --fg2:rgba(255,255,255,.72);
  --fg3:rgba(255,255,255,.45);
  --fg4:rgba(255,255,255,.3);
  --hover:rgba(255,255,255,.022);
  --card:rgba(13,15,31,.55);
  --line:rgba(255,255,255,.22);
  --panel:#0D0F1F;
  --mono:'REM',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --sans:'REM',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --h:88px;
}
html[data-mode="light"]{
  --panel:#F2F4F7;
  --ink:#0A0B18;
  --line:rgba(10,11,24,.18);
  --pink-dim:rgba(196,30,74,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--h) + 24px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--h);
  display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:stretch;
  border-bottom:1px solid var(--line);
  transition:background .45s ease,border-color .45s ease;
}
.header.on-panel{background:var(--panel)}
.cell{display:flex;align-items:center;justify-content:center;padding:0 30px}
.brand{border-right:1px solid var(--line);padding:0 34px}
.brand-link{display:block;line-height:0;transition:opacity .25s ease}
.brand-link:hover{opacity:.72}
.brand img{height:34px;width:auto;display:block}
.brand .logo-dark{display:none}
html[data-mode="light"] .logo-light{display:none}
html[data-mode="light"] .logo-dark{display:block}
.mid{justify-content:center}
.lang{border-left:1px solid var(--line);min-width:118px;position:relative}
.lang-current{
  background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);transition:color .2s ease;
}
.lang-current:hover{color:var(--pink)}
.lang-list{
  position:absolute;top:100%;left:-1px;right:-1px;
  border:1px solid var(--line);border-top:0;
  background:rgba(10,11,24,.9);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
}
/* the panel is dark by default and its links use var(--ink); in light mode that
   is dark-on-dark. This used to be scoped to .header.on-panel, which only
   applies while the menu overlay is open — so the dropdown was invisible in
   every normal state. Unconditional now. */
html[data-mode="light"] .lang-list{background:var(--panel)}
.lang.open .lang-list{opacity:1;visibility:visible;transform:none}
.lang-list a{
  padding:22px 10px;text-align:center;text-decoration:none;
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--line);transition:.2s ease;
}
.lang-list a:last-child{border-bottom:0}
.lang-list a:hover{background:var(--pink);color:var(--fg)}
.cta{border-left:1px solid var(--line);min-width:230px;gap:12px}

.mono{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);
}
.hbtn{background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:16px}
.hbtn .bar{display:block;width:38px;height:1px;background:var(--ink);transition:width .3s ease}
.hbtn:hover .bar{width:22px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--pink);display:inline-block}
a.mono{text-decoration:none}
a.mono:hover{color:var(--pink)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden}
.hero video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 58%;
}
.scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,6,14,.72) 0%,rgba(5,6,14,.25) 34%,rgba(5,6,14,.15) 60%,rgba(5,6,14,.82) 100%),
    linear-gradient(90deg,rgba(5,6,14,.55) 0%,rgba(5,6,14,0) 62%);
}
.hero-inner{
  position:relative;height:100%;
  padding:calc(var(--h) + 74px) 56px 46px;
  display:flex;flex-direction:column;justify-content:space-between;
}
h1{
  font-size:clamp(34px,4.5vw,76px);
  line-height:1.04;font-weight:500;letter-spacing:-.015em;
  text-transform:uppercase;
  max-width:16ch;
}
h1 span{display:block}
.sub{
  margin-top:28px;max-width:46ch;
  font-size:clamp(15px,1.25vw,19px);line-height:1.6;
  color:var(--fg2);
}
.lead-line{
  display:block;margin-bottom:6px;
  font-size:clamp(19px,1.7vw,26px);font-weight:500;letter-spacing:-.01em;
  color:var(--fg);
}
.hero-btns{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.btn{
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:16px 26px;display:inline-flex;align-items:center;gap:14px;
  border:1px solid rgba(255,255,255,.35);color:var(--fg);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
/* 2026-09-24: на наведение кнопка ещё и чуть подрастает */
.btn:hover{background:#fff;color:var(--navy);border-color:var(--fg);transform:scale(1.045)}
.btn:active{transform:scale(.99)}
.btn.primary{background:var(--pink);border-color:var(--pink)}
.btn.primary:hover{background:#fff;border-color:var(--fg);color:var(--navy)}

.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.scroll{display:flex;flex-direction:column;gap:14px;align-items:flex-start;color:var(--fg2)}
.scroll .arrow{font-size:19px;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}

.card{
  display:flex;align-items:stretch;gap:0;text-decoration:none;
  background:rgba(10,11,24,.78);backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.14);max-width:430px;transition:.3s ease;
}
.card:hover{background:rgba(10,11,24,.95)}
.card img{width:132px;height:96px;object-fit:cover;flex:none}
.card .txt{padding:18px 22px;display:flex;flex-direction:column;justify-content:center;gap:7px}
.card .kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--pink);text-transform:uppercase}
.card .title{font-size:15px;color:var(--fg);line-height:1.35}

/* ---------- corner-bracket hover ---------- */
.fact,.card,.hbtn,.cell.cta,.svc,.pillar,.step{position:relative}
.fact::after,.card::after,.hbtn::after,.cell.cta::after,.svc::after,.pillar::after,.step::after{
  content:'';position:absolute;inset:10px;pointer-events:none;
  opacity:0;transform:scale(.985);
  transition:opacity .28s ease,transform .28s ease;
  --c:var(--pink);--l:20px;--t:2px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--t) var(--l) no-repeat;
}
.fact:hover::after,.card:hover::after,.hbtn:hover::after,.cell.cta:hover::after,.svc:hover::after,.pillar:hover::after,.step:hover::after{
  opacity:1;transform:none;
}
.card::after{inset:6px}
.step::after{inset:14px}
.svc::after{inset:20px;--l:26px;z-index:2}
.pillar::after{inset:16px}
.hbtn::after{inset:-16px -24px}
.cell.cta::after{inset:14px 10px}

/* ---------- facts marquee ---------- */
.facts{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.facts::before,.facts::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.facts::before{left:0;background:linear-gradient(90deg,var(--bg),rgba(10,11,24,0))}
.facts::after{right:0;background:linear-gradient(270deg,var(--bg),rgba(10,11,24,0))}
.track{display:flex;width:max-content;animation:slide 38s linear infinite}
.facts:hover .track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fact{
  flex:none;width:360px;padding:52px 44px;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;gap:12px;
}
.fact .big{
  font-size:44px;line-height:1;font-weight:500;letter-spacing:-.02em;
  color:var(--fg4);transition:color .35s ease;
}
.fact .big em{font-style:normal;color:rgba(196,30,74,.5);transition:color .35s ease}
.fact .small{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.2);line-height:1.5;transition:color .35s ease;
}
.fact:hover .big{color:var(--fg)}
.fact:hover .big em{color:var(--pink)}
.fact:hover .small{color:var(--fg2)}
@media(prefers-reduced-motion:reduce){.track{animation:none}}

/* ---------- statement + services ---------- */
.statement{position:relative;padding:130px 56px 110px;border-bottom:1px solid var(--line)}
.brow{
  position:absolute;left:56px;top:138px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pink);
}
.lede{
  font-size:clamp(23px,2.5vw,40px);line-height:1.3;font-weight:400;letter-spacing:-.015em;
  max-width:1500px;text-indent:min(32%,430px);color:var(--fg);
}
.lede b{font-weight:500}
.lede .dim{color:var(--fg3)}

.services{display:grid;grid-template-columns:1fr 1fr}
.svc{
  position:relative;min-height:640px;overflow:hidden;text-decoration:none;
  display:flex;align-items:flex-end;
  border-right:1px solid var(--line);
}
.svc:last-child{border-right:0}
.svc img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
  filter:brightness(.88) saturate(.96) contrast(1.02);
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .6s ease;
}
.svc:hover img{transform:scale(1.09);filter:brightness(1) saturate(1) contrast(1.02)}
.svc::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,11,24,.14) 0%,rgba(10,11,24,.34) 45%,rgba(10,11,24,.88) 100%);
}
.svc-body{position:relative;z-index:2;padding:52px 48px;max-width:600px}
.svc-title{display:flex;align-items:center;gap:16px;font-size:clamp(22px,1.9vw,30px);font-weight:500;color:var(--fg)}
.svc-title svg{width:26px;height:26px;flex:none;stroke:var(--pink);fill:none;stroke-width:1.4}
.svc-text{margin-top:18px;font-size:16px;line-height:1.65;color:var(--fg2);min-height:5em}
.svc-link{
  margin-top:30px;display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg);transition:color .25s ease,gap .25s ease;
}
.svc:hover .svc-link{color:var(--pink);gap:20px}

/* ---------- process ---------- */
.process{padding:130px 0 0;border-bottom:1px solid var(--line)}
.proc-head{
  display:grid;grid-template-columns:1.05fr 1fr;gap:70px;
  padding:0 56px 76px;align-items:end;
}
.process .brow{position:static;display:block;margin-bottom:24px}
.proc-title{font-size:clamp(32px,3.6vw,58px);line-height:1.07;font-weight:500;letter-spacing:-.025em}
.proc-lead{font-size:clamp(16px,1.25vw,19px);line-height:1.7;color:var(--fg2)}
.steps-label{
  display:flex;align-items:center;gap:26px;padding:0 56px 22px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg3);
}
.steps-label::after{content:'';flex:1;height:1px;background:var(--line)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.step{
  position:relative;padding:46px 30px 54px;
  border-right:1px solid var(--line);transition:background-color .35s ease;
}
.step:last-child{border-right:0}
.step:hover{background-color:var(--hover)}
.step::before{
  content:'';position:absolute;top:-5px;left:30px;width:9px;height:9px;border-radius:50%;
  background:var(--pink);transition:transform .3s ease,box-shadow .3s ease;
}
.step:hover::before{transform:scale(1.5);box-shadow:0 0 14px rgba(196,30,74,.9)}
.step .snum{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  color:var(--fg4);transition:color .3s ease;
}
.step:hover .snum{color:var(--pink)}
.step h3{margin:20px 0 12px;font-size:clamp(18px,1.35vw,22px);font-weight:500;letter-spacing:-.01em;color:var(--fg)}
.step p{font-size:14.5px;line-height:1.65;color:var(--fg2)}

/* ---------- why / value proposition ---------- */
.why{padding:130px 0 0;border-bottom:1px solid var(--line)}
.why-head{
  display:grid;grid-template-columns:1.05fr 1fr;gap:70px;
  padding:0 56px 84px;align-items:end;
}
.why .brow{position:static;display:block;margin-bottom:24px}
.why-title{
  font-size:clamp(34px,4vw,64px);line-height:1.06;
  font-weight:500;letter-spacing:-.025em;
}
.why-lead{
  font-size:clamp(17px,1.35vw,21px);line-height:1.65;
  color:var(--fg2);max-width:58ch;
}
.why-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.pillar{
  position:relative;padding:54px 48px 62px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background-color .35s ease;
}
.pillar:nth-child(2n){border-right:0}
.pillar:nth-last-child(-n+2){border-bottom:0}
.pillar:hover{background-color:var(--hover)}
.pillar .num{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;
  color:var(--fg4);transition:color .3s ease;
}
.pillar:hover .num{color:var(--pink)}
.pillar h3{
  margin:24px 0 14px;font-size:clamp(20px,1.6vw,27px);
  font-weight:500;letter-spacing:-.015em;color:var(--fg);
}
.pillar p{font-size:16px;line-height:1.68;color:var(--fg2);max-width:46ch}

/* ---------- reach / globe ---------- */
.reach{
  display:grid;grid-template-columns:minmax(340px,36%) 1fr;gap:56px;
  padding:130px 56px 120px;border-bottom:1px solid var(--line);
}
.reach .brow{position:static;display:block;margin-bottom:24px}
.reach-title{
  font-size:clamp(32px,3.5vw,58px);line-height:1.08;font-weight:500;letter-spacing:-.025em;
}
.reach-title span{display:block}
.reach-title i{font-style:normal;color:inherit}
.reach-lead{margin-top:34px;font-size:16.5px;line-height:1.7;color:var(--fg2);max-width:44ch}

.rlabel{
  display:block;margin-top:44px;padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg4);
}
.regions{list-style:none;margin:0 0 40px}
.regions li{
  display:flex;align-items:center;gap:16px;padding:14px 4px;
  border-bottom:1px solid var(--line);cursor:default;
  color:var(--fg2);font-size:16.5px;transition:color .25s ease,padding-left .3s ease;
}
.regions li::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--pink);
  flex:none;transition:transform .3s ease,box-shadow .3s ease;
}
.regions li:hover{color:var(--fg);padding-left:12px}
.regions li:hover::before{transform:scale(1.5);box-shadow:0 0 12px rgba(196,30,74,.9)}
.regions li .rnote{
  margin-left:auto;flex:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg4);transition:color .25s ease;
}
.regions li:hover .rnote{color:var(--pink)}

.ports{border:1px solid var(--line);padding:26px 6px 24px;position:relative}
.ports-title{
  position:absolute;top:-9px;left:22px;background:var(--bg);padding:0 10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);
}
.ports-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.port{
  text-align:center;padding:6px 10px;border-right:1px solid var(--line);cursor:default;
}
.port:last-child{border-right:0}
.port .pdot{
  width:7px;height:7px;border-radius:50%;background:var(--pink);margin:0 auto 12px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.port:hover .pdot{transform:scale(1.6);box-shadow:0 0 14px rgba(196,30,74,.9)}
.port .pname{font-size:17px;color:var(--fg);margin-bottom:5px}
.port .pcountry{font-size:13px;color:var(--fg3)}

.globe-wrap{position:relative;aspect-ratio:1/1;min-height:520px;touch-action:none}
#globe{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
#globe:active{cursor:grabbing}
.glabel{
  position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg);background:rgba(10,11,24,.72);border:1px solid var(--pink);
  padding:5px 9px;white-space:nowrap;opacity:0;transition:opacity .3s ease;
}
.glabel.hub{
  font-size:15px;letter-spacing:.1em;background:none;border:0;padding:0;
  text-shadow:0 0 16px rgba(10,11,24,.9);
}
.ghint{
  position:absolute;top:6%;right:2%;text-align:center;pointer-events:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg3);line-height:1.6;
}
.ghint svg{width:52px;height:52px;stroke:rgba(255,255,255,.35);fill:none;stroke-width:1.2;margin-bottom:10px}

/* ---------- padel club (social) ---------- */
.padel{padding:130px 56px 0;border-bottom:1px solid var(--line)}
.padel-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;padding-bottom:64px}
.padel-grid .brow{position:static;display:block;margin-bottom:22px}
.padel-title{font-size:clamp(30px,3.4vw,50px);line-height:1.12;font-weight:500;letter-spacing:-.02em;margin-bottom:26px;max-width:14ch}
.padel-text{font-size:16px;line-height:1.7;color:var(--fg2);margin-bottom:18px;max-width:52ch}
.padel-text.last{margin-bottom:32px}   /* same colour as the rest: this paragraph carries the point of the block */
.padel-ig{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg);transition:color .25s ease,gap .25s ease;
}
.padel-ig svg{width:20px;height:20px;stroke:var(--pink);fill:none;stroke-width:1.4;flex:none}
.padel-ig:hover{color:var(--pink);gap:18px}

.padel-media{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;min-height:460px}
.padel-media-main{position:relative;display:block;overflow:hidden;border:1px solid var(--line)}
.padel-media-main img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.padel-media-main:hover img{transform:scale(1.06)}
.padel-media-side{display:flex;flex-direction:column;gap:14px}
.padel-media-side a{position:relative;flex:1;display:block;overflow:hidden;min-height:110px;border:1px solid var(--line)}
.padel-media-side img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.padel-media-side a:hover img{animation:none;transform:scale(1.09)}

/* 2026-09-24: тихий «живой» зум внутри кадров коллажа Sky Padel.
   Разная длительность и отрицательная задержка — чтобы кадры не дышали в такт.
   Главный кадр на десктопе занят параллаксом, поэтому зум ему даём только там,
   где параллакса нет (телефоны, планшеты). */
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.14)}}
.padel-media-side a:nth-child(1) img{animation:kenburns 9s ease-in-out infinite alternate}
.padel-media-side a:nth-child(2) img{animation:kenburns 11s ease-in-out -4s infinite alternate}
.padel-media-side a:nth-child(3) img{animation:kenburns 13s ease-in-out -8s infinite alternate}
html:not(.has-parallax) .padel-media-main img{animation:kenburns 14s ease-in-out infinite alternate}
.padel-media-main:hover img{animation:none}
@media(prefers-reduced-motion:reduce){
  .padel-media-side img,.padel-media-main img{animation:none}
}
.padel-features{
  position:relative;overflow:hidden;
  margin-left:-56px;margin-right:-56px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.padel-features::before,.padel-features::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.padel-features::before{left:0;background:linear-gradient(90deg,var(--bg),rgba(10,11,24,0))}
.padel-features::after{right:0;background:linear-gradient(270deg,var(--bg),rgba(10,11,24,0))}
.padel-features-track{display:flex;width:max-content;animation:slide 32s linear infinite}
.padel-features:hover .padel-features-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.padel-features-track{animation:none}}
.pfeat{flex:none;display:flex;align-items:center;justify-content:center;text-align:center;padding:22px 46px;border-right:1px solid var(--line)}
.pfeat h4{
  font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.5;color:rgba(255,255,255,.2);margin:0;white-space:nowrap;
  transition:color .35s ease;
}
.pfeat:hover h4{color:var(--fg2)}

.padel-card{
  /* the strip keeps an 8px gutter under the tiles for its scrollbar, so a
     stretched card would end 8px lower than the photos next to it — this pulls
     its bottom edge back onto the same line */
  flex:1 1 260px;min-width:220px;margin-bottom:8px;
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:26px 28px;text-decoration:none;background:rgba(196,30,74,.07);
  border:1px solid var(--line);
  transition:background .25s ease,border-color .25s ease;
}
.padel-card:hover{background:rgba(196,30,74,.14);border-color:var(--pink)}
.padel-card-kicker{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);
}
.padel-card-title{font-size:14.5px;line-height:1.5;color:var(--fg2)}

.padel-feed{padding:44px 0 64px}
.padel-feed-label{
  display:flex;align-items:center;gap:22px;margin-bottom:24px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3);
}
.padel-feed-label::after{content:'';flex:1;height:1px;background:var(--line)}
.padel-feed-row{display:flex;align-items:stretch;gap:14px}
.padel-feed-scroll{position:relative;flex:0 1 auto;min-width:0;display:flex}
.padel-feed-strip{
  flex:0 1 auto;min-width:0;
  display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}

/* the strip scrolls sideways; these say so. Same edge-fade language as the two
   marquees, but toggled by scroll position so a fade never lies about there
   being more to see. */
.padel-feed-scroll::before,
.padel-feed-scroll::after{
  content:'';position:absolute;top:0;bottom:8px;width:58px;z-index:2;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
}
.padel-feed-scroll::before{left:0;background:linear-gradient(90deg,var(--bg),rgba(10,11,24,0))}
.padel-feed-scroll::after{right:0;background:linear-gradient(270deg,var(--bg),rgba(10,11,24,0))}
.padel-feed-scroll.has-left::before{opacity:1}
.padel-feed-scroll.has-right::after{opacity:1}

.pfeed-hint{
  position:absolute;right:8px;top:50%;margin-top:-21px;z-index:3;
  width:42px;height:42px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  background:rgba(13,15,31,.72);border:1px solid var(--line);backdrop-filter:blur(6px);
  pointer-events:none;opacity:0;transition:opacity .35s ease;
}
.pfeed-hint::after{
  content:'';width:9px;height:9px;margin-left:-3px;
  border-top:1.6px solid var(--fg);border-right:1.6px solid var(--fg);
  transform:rotate(45deg);
}
/* only where there is no mouse — on desktop the strip fits and nothing scrolls */
@media(hover:none),(pointer:coarse){ .pfeed-hint{display:flex} }
.padel-feed-scroll.has-right .pfeed-hint{opacity:1;animation:pfeed-nudge 2.4s ease-in-out infinite}
.padel-feed-scroll.touched .pfeed-hint{opacity:0;animation:none}
@keyframes pfeed-nudge{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){
  .padel-feed-scroll.has-right .pfeed-hint{animation:none}
}
.preel{
  /* tile width follows the viewport so the whole strip fits next to the card
     instead of the last tile being clipped; 150px is the design size */
  position:relative;flex:none;width:clamp(112px,calc(14vw - 66px),150px);aspect-ratio:9/16;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);overflow:hidden;text-decoration:none;
  background:linear-gradient(160deg,rgba(196,30,74,.18) 0%,rgba(10,11,24,.4) 45%,rgba(10,11,24,.96) 100%);
  transition:border-color .25s ease;
}
.preel:hover{border-color:var(--pink)}

/* below this the card no longer fits beside the strip — stack it so the tiles
   keep their full width instead of being cut off */
@media(max-width:1250px){
  .padel-feed-row{flex-direction:column}
  .padel-card{flex:none;width:auto;padding:22px 22px;margin-bottom:0}
  .preel{width:150px}
}
.preel::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,24,0) 42%,rgba(10,11,24,.82) 100%);
}
.preel-media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  background:#0a0b18;
}
.preel-play{
  position:relative;z-index:2;
  width:44px;height:44px;border-radius:50%;flex:none;
  border:1px solid rgba(255,255,255,.5);background:rgba(10,11,24,.35);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .25s ease,background .25s ease,opacity .4s ease,transform .4s ease;
}
.preel.is-playing .preel-play{opacity:0;transform:scale(.85)}
.preel:hover .preel-play{border-color:var(--pink);background:var(--pink)}
.preel-play svg{width:15px;height:15px;fill:var(--fg);margin-left:2px}
.preel-tag{
  position:absolute;left:11px;right:11px;bottom:11px;z-index:2;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--fg3);
}
.preel-more{
  background:linear-gradient(160deg,rgba(196,30,74,.32) 0%,rgba(10,11,24,.55) 45%,rgba(10,11,24,.96) 100%);
}
.preel-more::after{content:none}
.preel-more-txt{
  position:relative;z-index:2;text-align:center;padding:0 16px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;line-height:1.7;color:var(--fg);
}
.preel-more-txt span:last-child{display:block;margin-top:6px;color:var(--pink);font-size:16px}

/* ---------- footer ---------- */
.footer{background:var(--bg);overflow:hidden}
.fgrid{display:grid;grid-template-columns:1.25fr 1fr 1.15fr 1fr}
.fcol{padding:64px 44px 58px;border-right:1px solid var(--line)}
.fcol:last-child{border-right:0}
.fcol h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg4);margin-bottom:26px;
}
.fcol img.flogo{height:32px;width:auto;display:block;margin-bottom:22px}
.fcol img.flogo-dark{display:none}
.fcol p{font-size:15px;line-height:1.7;color:var(--fg2);max-width:34ch}
.flist{list-style:none;display:flex;flex-direction:column;gap:14px}
.flist a,.fcol a.line{
  color:var(--fg2);text-decoration:none;font-size:15.5px;
  transition:color .22s ease,padding-left .28s ease;display:inline-block;
}
.flist a:hover,.fcol a.line:hover{color:var(--pink);padding-left:6px}
.flist .fsub a{font-size:14.5px;color:var(--fg3);padding-left:16px;position:relative}
.flist .fsub a::before{
  content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--pink);
}
.fcol .addr{font-size:15px;line-height:1.7;color:var(--fg2);margin-bottom:20px}
.fcol .hours{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--fg3);margin-top:20px;line-height:1.8}
.fsocial{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.fsocial a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--line);padding:13px 16px;text-decoration:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg2);transition:.24s ease;
}
.fsocial a:hover{border-color:var(--pink);background:var(--pink-dim);color:var(--fg)}

.fbar{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 44px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg4);
}
.fbar a{color:inherit;text-decoration:none;transition:color .22s ease}
.fbar a:hover{color:var(--pink)}
.fbar .fbar-right{display:flex;gap:26px;flex-wrap:wrap}

.fname{
  padding:34px 20px 22px;text-align:center;line-height:.82;pointer-events:none;
  font-weight:500;letter-spacing:-.035em;white-space:nowrap;
  user-select:none;
}
#fname{
  position:relative;display:inline-block;isolation:isolate;
  pointer-events:auto;cursor:default;
  color:transparent;
  /* outline scales with the wordmark, clamped so it stays a hairline on mobile */
  --fn-stroke:clamp(1.6px,.017em,4px);
  -webkit-text-stroke:var(--fn-stroke) rgba(255,255,255,.8);
  transition:-webkit-text-stroke-color .45s ease;
}
#fname::before,#fname::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;pointer-events:none;
}
#fname::after{
  color:transparent;-webkit-text-stroke:var(--fn-stroke) var(--pink);
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s cubic-bezier(.65,.02,.28,1);
}
/* letters are hollow: an opaque fill in the footer's own background colour is
   painted ON TOP of both strokes, so only the outer half of the outline shows
   and the font's internal contour seams (the joint inside "K") stay hidden */
#fname::before{
  z-index:2;-webkit-text-stroke:0;
  color:var(--bg);
}
#fname:hover::after{clip-path:inset(0 0 0 0)}

.fcredit{position:relative;z-index:1;padding:0 44px 34px}
.fcredit a{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg);transition:color .22s ease,gap .28s ease;
}
.fcredit a:hover{color:var(--pink);gap:17px}
.fcredit a span:last-child{font-size:13px;line-height:1;flex:none}

@media(max-width:1080px){
  .fgrid{grid-template-columns:1fr 1fr}
  .fcol{padding:40px 24px;border-bottom:1px solid var(--line)}
  .fcol:nth-child(2n){border-right:0}
  .fbar{padding:18px 24px}
  .fcredit{padding:0 24px 96px}  /* clears the fixed "manager online" FAB at the page bottom */
}
@media(max-width:640px){
  .fgrid{grid-template-columns:1fr}
  .fcol{border-right:0}
  .fbar{justify-content:flex-start;gap:12px}
}

/* ---------- mobile motion ----------
   there is no hover on touch, so scrolling drives the movement instead:
   slow parallax on the big photos, a progress rail through "how we work",
   and the globe touring its own routes (see site.js)                      */
.steps-rail{display:none}

/* JS writes transform on these four in BOTH layouts now (see "desktop motion"
   below) — a CSS transition on the same property would smear every frame; the
   3s hover zoom on .cband img is folded into the JS scale instead.
   The html.has-parallax prefix is not decoration: `.cband img` further down the
   file sets `transition:transform 3s`, and a bare selector here would lose to
   it on source order — every parallax frame then arrived 3 seconds late. */
html.has-parallax .hero video,
html.has-parallax .cband img,
html.has-parallax .cases-strip img,
html.has-parallax .padel-media-main img{
  transition:none;will-change:transform;
}

@media(max-width:1080px){
  /* globe tour: the lit region/port mirrors the desktop hover state */
  .regions li.is-lit{color:var(--fg);padding-left:12px}
  .regions li.is-lit::before{transform:scale(1.5);box-shadow:0 0 12px rgba(196,30,74,.9)}
  .regions li.is-lit .rnote{color:var(--pink)}
  .port.is-lit .pdot{transform:scale(1.6);box-shadow:0 0 14px rgba(196,30,74,.9)}

  /* how we work: rail runs through the step dots, fills as you scroll */
  .steps{position:relative}
  .steps-rail{
    display:block;position:absolute;left:28px;top:0;bottom:0;width:1px;
    background:var(--line);z-index:0;
  }
  .steps-rail i{
    position:absolute;left:0;top:0;width:100%;height:0;
    background:var(--pink);box-shadow:0 0 12px rgba(196,30,74,.75);
    transition:height .18s linear;
  }
  .steps .step{z-index:1;padding-left:48px}   /* clear of the rail and its dots (beats the shorthand below) */
  .step.is-active{background-color:var(--hover)}
  .step.is-active::before{transform:scale(1.6);box-shadow:0 0 16px rgba(196,30,74,.95)}
  .step.is-active::after{opacity:1;transform:none}
  .step.is-active .snum{color:var(--pink)}
}

@media(prefers-reduced-motion:reduce){
  .hero video,.cband img,.cases-strip img,.padel-media-main img{transform:none!important}
  .steps-rail{display:none}
}

/* ---------- desktop motion ----------
   the same idea as the mobile layer, tuned for a pointer screen: the big
   photos drift as they cross, the "how we work" rail runs along the top edge
   instead of down the side, buttons lean into the cursor and the flat cards
   carry a light under it. See site.js.                                     */
@media(min-width:1081px){
  .steps{position:relative}
  /* absolute, so it never claims a sixth cell in the 5-column grid */
  .steps-rail{
    display:block;position:absolute;left:0;right:0;top:-1px;height:1px;
    background:transparent;z-index:2;pointer-events:none;
  }
  .steps-rail i{
    position:absolute;left:0;top:0;height:100%;width:0;
    background:var(--pink);box-shadow:0 0 12px rgba(196,30,74,.75);
    transition:width .18s linear;
  }
  /* the step the rail has reached mirrors the hover state exactly */
  .step.is-active{background-color:var(--hover)}
  .step.is-active::before{transform:scale(1.5);box-shadow:0 0 14px rgba(196,30,74,.9)}
  .step.is-active::after{opacity:1;transform:none}
  .step.is-active .snum{color:var(--pink)}
}

/* a soft pink light follows the pointer across the flat cards. It is a
   background-IMAGE, which is why every hover rule above sets background-color. */
html.has-mag .step,
html.has-mag .pillar,
html.has-mag .ccard,
html.has-mag .pcell,
html.has-mag .mrow{
  background-image:radial-gradient(300px circle at var(--mx,50%) var(--my,-200%),
                   rgba(196,30,74,.15), rgba(196,30,74,0) 70%);
}

/* 2026-09-25: в режиме энергосбережения iPhone рисует поверх видео свою кнопку
   «play». Прячем её: видео и так стартует само, а если система не дала —
   по первому касанию экрана (см. site.js). */
.hero video::-webkit-media-controls,
.hero video::-webkit-media-controls-start-playback-button,
.hero video::-webkit-media-controls-panel{
  display:none !important;
  -webkit-appearance:none;
}
.hero video{pointer-events:none}

/* magnetic buttons: the transform is written every frame, so it must not be
   part of the button's own .25s transition or it would trail the cursor */
html.has-mag .btn{
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .3s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}

/* the marquees are handed over to JS so scrolling can push them */
.track.mq-js,.padel-features-track.mq-js{animation:none}

/* ---------- quote drawer ---------- */
.qveil{
  position:fixed;inset:0;z-index:70;background:rgba(3,4,10,.55);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.qveil.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:80;
  width:min(50vw,780px);min-width:min(100vw,460px);
  background:#0D0F1F;border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(101%);
  transition:transform .62s cubic-bezier(.7,0,.16,1);
}
.drawer.open{transform:none}
.dhead{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:30px 44px;border-bottom:1px solid var(--line);flex:none;
}
.dhead h2{font-size:clamp(20px,1.7vw,27px);font-weight:500;letter-spacing:-.015em}
.dhead .brow{position:static;display:block;margin-bottom:8px}
.dclose{
  background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);
}
.dclose .bar{width:30px;height:1px;background:#fff;transition:width .3s ease}
.dclose:hover{color:var(--pink)}
.dclose:hover .bar{width:18px;background:var(--pink)}

.dbody{overflow-y:auto;padding:34px 44px 44px;flex:1}
.fgroup{margin-bottom:34px}
.fgroup-title{
  display:block;padding-bottom:12px;margin-bottom:20px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg4);
}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.frow.one{grid-template-columns:1fr}
.field{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.field label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg3);
}
.field label em{font-style:normal;color:var(--pink)}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--fg);
  font-family:var(--sans);font-size:15px;padding:13px 15px;width:100%;
  transition:border-color .25s ease,background .25s ease;
}
.field textarea{resize:vertical;min-height:92px;line-height:1.55}
.field select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg3) 50%),
                   linear-gradient(135deg,var(--fg3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field select option{background:#0D0F1F;color:var(--fg)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--pink);background:rgba(196,30,74,.06);
}
.field input::placeholder,.field textarea::placeholder{color:var(--fg4)}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{
  display:block;padding:11px 17px;border:1px solid var(--line);cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg2);transition:.22s ease;
}
.chip span:hover{border-color:var(--fg3);color:var(--fg)}
.chip input:checked + span{background:var(--pink);border-color:var(--pink);color:var(--fg)}

.check{position:relative;display:flex;align-items:flex-start;gap:13px;cursor:pointer;margin-bottom:14px}
.check input{position:absolute;opacity:0;pointer-events:none}
.check .box{
  width:18px;height:18px;border:1px solid var(--line);flex:none;margin-top:1px;
  display:grid;place-items:center;transition:.22s ease;
}
.check .box::after{
  content:'';width:9px;height:5px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;
  transform:rotate(-45deg) scale(.4);opacity:0;transition:.22s ease;
}
.check input:checked + .box{background:var(--pink);border-color:var(--pink)}
.check input:checked + .box::after{opacity:1;transform:rotate(-45deg) scale(1)}
.check span.txt{font-size:14.5px;line-height:1.55;color:var(--fg2)}
.check:hover span.txt{color:var(--fg)}

.filebtn{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px dashed var(--line);padding:14px 16px;cursor:pointer;transition:.25s ease;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg2);
}
.filebtn:hover{border-color:var(--pink);color:var(--fg)}
.filebtn input{display:none}

.dsubmit{
  width:100%;border:0;cursor:pointer;background:var(--pink);color:var(--fg);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:19px 24px;display:flex;align-items:center;justify-content:center;gap:14px;
  transition:.25s ease;
}
.dsubmit:hover{background:#fff;color:var(--navy)}
.dnote{margin-top:16px;font-size:13px;line-height:1.6;color:var(--fg3)}

.dfoot{
  border-top:1px solid var(--line);padding:24px 44px;flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.dfoot .lbl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg3);
}
.dfoot a{color:var(--fg);text-decoration:none;font-size:15.5px;transition:color .2s ease}
.dfoot a:hover{color:var(--pink)}

.dsuccess{display:none;padding:80px 44px;text-align:center}
.dsuccess.on{display:block}
.dsuccess .mark{
  width:64px;height:64px;border:1px solid var(--pink);border-radius:50%;
  display:grid;place-items:center;margin:0 auto 28px;
}
.dsuccess .mark::after{
  content:'';width:20px;height:11px;border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);
  transform:rotate(-45deg);margin-top:-6px;
}
.dsuccess h3{font-size:26px;font-weight:500;margin-bottom:14px}
.dsuccess p{font-size:15.5px;line-height:1.65;color:var(--fg2);max-width:42ch;margin:0 auto}

@media(max-width:900px){
  .drawer{width:100vw;min-width:0}
  .dhead,.dfoot{padding:22px 24px}
  .dbody{padding:26px 24px 36px}
  .frow{grid-template-columns:1fr}
}

/* ---------- menu overlay ---------- */
.overlay{
  position:fixed;left:0;right:0;top:0;z-index:50;
  background:var(--panel);
  padding:calc(var(--h) + clamp(22px,3.4vh,56px)) 56px clamp(22px,3.4vh,54px);
  border-bottom:1px solid var(--line);
  transform:translateY(-102%);
  transition:transform .62s cubic-bezier(.7,0,.16,1);
  max-height:100vh;
  max-height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.overlay.open{transform:translateY(0)}
.overlay-grid{display:grid;grid-template-columns:340px 1fr 380px;column-gap:60px;row-gap:0;align-items:start}
.shot{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
nav ul{list-style:none;display:flex;flex-direction:column;gap:clamp(12px,2.2vh,26px)}
nav a{
  text-decoration:none;color:var(--ink);
  font-family:var(--mono);font-size:clamp(17px,2.6vh,26px);letter-spacing:0;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:16px;transition:color .2s ease,transform .35s ease;
}
nav a:hover{color:var(--pink);transform:translateX(8px)}
nav .sub-item a{font-size:clamp(13px,1.9vh,19px);opacity:.86}
nav .sub-item{margin-left:clamp(14px,2.2vh,26px)}
nav .sub-item::marker{content:''}
.bullet{width:6px;height:6px;border-radius:50%;background:var(--pink);flex:none}

.side{display:flex;flex-direction:column;gap:12px}
.side a{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 20px;text-decoration:none;
  background:var(--pink-dim);color:var(--ink);
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  transition:.25s ease;
}
.side a:hover{background:var(--pink);color:var(--fg)}
.side a.lead{background:var(--pink);color:var(--fg)}
.side a.lead:hover{filter:brightness(1.12)}
.mode{
  grid-column:2/4;margin-top:clamp(18px,3.4vh,44px);
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 22px;background:var(--ink);color:var(--panel);
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  border:0;cursor:pointer;width:100%;
}
.veil{
  position:fixed;inset:0;z-index:40;background:rgba(3,4,10,.6);
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.veil.on{opacity:1;pointer-events:auto}

/* ---------- entrance ---------- */
.rise{opacity:0;transform:translateY(26px);animation:rise .95s cubic-bezier(.2,.7,.2,1) forwards}
.rise:nth-child(2){animation-delay:.12s}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.18s}.d2{animation-delay:.3s}.d3{animation-delay:.44s}

@media(max-width:1080px){
  .overlay-grid{grid-template-columns:1fr}
  .shot{display:none}
  .mode{grid-column:1}
  .cta{min-width:auto;padding:0 20px}
  .brand{padding:0 20px}
  .hero-inner{padding:calc(var(--h) + 40px) 24px 30px}
  .overlay{padding:calc(var(--h) + 36px) 24px 36px}
  .card{max-width:100%}
  .statement{padding:80px 24px 70px}
  .brow{position:static;display:block;margin-bottom:20px;left:auto;top:auto}
  .lede{text-indent:0}
  .services{grid-template-columns:1fr}
  .process{padding-top:80px}
  .proc-head{grid-template-columns:1fr;gap:26px;padding:0 24px 48px}
  .steps-label{padding:0 24px 18px}
  .steps{grid-template-columns:1fr}
  .step{padding:34px 24px 38px;border-right:0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .step::before{left:24px}
  .why{padding-top:80px}
  .why-head{grid-template-columns:1fr;gap:28px;padding:0 24px 54px}
  .why-grid{grid-template-columns:1fr}
  .reach{grid-template-columns:1fr;gap:40px;padding:80px 24px 90px}
  .globe-wrap{min-height:380px}
  .ghint{display:none}
  .pillar{padding:38px 24px 42px;border-right:0}
  .pillar:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .pillar:last-child{border-bottom:0}
  .svc{min-height:520px;border-right:0;border-bottom:1px solid var(--line)}
  .svc-body{padding:36px 24px}
  .svc-text{min-height:0}
  .padel{padding:80px 24px 0}
  .padel-grid{grid-template-columns:1fr;gap:36px;padding-bottom:44px}
  .padel-title{max-width:100%}
  .padel-media{grid-template-columns:1fr;min-height:0}
  /* Height comes from the photo's own proportion, never a fixed px value: the
     width here tracks the viewport, so a pinned height made the box ratio drift
     (main 1.22 at 390 -> 2.57 at 768) and object-fit:cover ate the difference. */
  .padel-media-main{min-height:0;aspect-ratio:1320/1200}
  .padel-media-side{flex-direction:row}
  .padel-media-side a{min-height:0;flex:1 1 0;aspect-ratio:4/3}
  .padel-features::before,.padel-features::after{width:44px}
  .padel-features-track{animation-duration:22s}
  .padel-features{margin-left:-24px;margin-right:-24px}
  .pfeat{width:auto;padding:18px 26px}
  .pfeat h4{font-size:13px}
  .padel-card{flex:none;width:auto;padding:22px 22px}
  .padel-feed{padding:36px 0 54px}
  .padel-feed-row{flex-direction:column}
  .preel{width:118px}
  .lang{min-width:74px;padding:0 16px}
  .lang-list a{padding:18px 8px}
}
@media(max-width:640px){
  :root{--h:72px}
  .cell{padding:0 14px;white-space:nowrap}
  .mono,.lang-current{font-size:11px;letter-spacing:.1em}
  .brand{padding:0 14px}
  .brand img{height:26px}
  .lang{min-width:56px}
  .cta{min-width:auto;gap:8px}
  .fact{width:270px;padding:38px 28px}
  .fact .big{font-size:34px}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .card img{width:96px;height:76px}
  nav a{font-size:20px}
}

/* mobile menu (2026-09-22): smaller type, theme toggle right under the list,
   LinkedIn + Instagram side by side — the whole panel fits a phone screen */
@media(max-width:1080px){
  .overlay{padding:calc(var(--h) + 22px) 24px 26px}
  .overlay-grid{display:flex;flex-direction:column;align-items:stretch}
  .overlay-grid nav{order:1}
  .overlay-grid .mode{order:2;margin-top:22px;padding:14px 18px}
  .overlay-grid .side{order:3;margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .overlay-grid .side a{padding:13px 16px;font-size:12px}
  .overlay-grid .side a.lead{grid-column:1/-1}
  nav ul{gap:clamp(9px,1.7vh,16px)}
  nav a{font-size:clamp(15px,2.3vh,19px)}
  nav .sub-item a{font-size:clamp(12px,1.8vh,15px)}
  nav .sub-item{margin-left:14px}
}


/* ---------- inner pages ---------- */
.phero{
  position:relative;min-height:64vh;display:flex;align-items:flex-end;
  overflow:hidden;border-bottom:1px solid var(--line);
}
.phero img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.94) saturate(.98) contrast(1.02);
}
.phero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,11,24,.12) 0%,rgba(10,11,24,.28) 45%,rgba(10,11,24,.74) 100%),
             linear-gradient(90deg,rgba(10,11,24,.6) 0%,rgba(10,11,24,.24) 48%,rgba(10,11,24,0) 82%);
}
.phero-inner{position:relative;z-index:2;padding:calc(var(--h) + 96px) 56px 70px;max-width:1180px}
.phero .brow{position:static;display:block;margin-bottom:22px}
.phero h1{
  font-size:clamp(34px,4.4vw,70px);line-height:1.06;letter-spacing:-.025em;
  font-weight:500;text-transform:none;max-width:20ch;
}
.phero .plead{
  margin-top:28px;font-size:clamp(16px,1.3vw,20px);line-height:1.7;
  color:var(--fg2);max-width:66ch;
}
.crumbs{
  /* 2026-09-25: одна строка и посветлее — на телефоне цепочка переносилась и терялась */
  display:flex;gap:10px;align-items:center;margin-bottom:22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg2);
  flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.crumbs::-webkit-scrollbar{display:none}
.crumbs > *{flex:none;white-space:nowrap}
.crumbs span:not([data-i18n]){color:var(--fg4)}   /* разделители «/» */
.crumbs span[data-i18n]{color:var(--fg)}          /* текущая страница */
.crumbs a{color:inherit;text-decoration:none;transition:color .2s ease}
.crumbs a:hover{color:var(--pink)}
@media(max-width:640px){
  .crumbs{font-size:10px;letter-spacing:.1em;gap:8px}
}

.psec{padding:120px 0 0;border-bottom:1px solid var(--line)}
.psec-label{
  display:flex;align-items:center;gap:26px;padding:0 56px 26px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg3);
}
.psec-label::after{content:'';flex:1;height:1px;background:var(--line)}
.plist{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.pcell{
  position:relative;padding:48px 40px 56px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background-color .35s ease;
}
.pcell:nth-child(3n){border-right:0}
.pcell:nth-child(n+4){border-bottom:0}
.pcell:hover{background-color:var(--hover)}
.pcell .pnum{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  color:var(--fg4);transition:color .3s ease;
}
.pcell:hover .pnum{color:var(--pink)}
.pcell h3{margin:20px 0 12px;font-size:clamp(18px,1.4vw,23px);font-weight:500;letter-spacing:-.012em;color:var(--fg)}
.pcell p{font-size:15px;line-height:1.66;color:var(--fg2)}
.pcell.cta{display:flex;flex-direction:column;justify-content:center;gap:22px;background:rgba(196,30,74,.07)}
.pcell.cta h3{margin:0;font-size:clamp(19px,1.5vw,25px)}
.pcell.cta .btn{align-self:flex-start}

.pclaim{padding:120px 56px;border-bottom:1px solid var(--line)}
.pclaim h2{font-size:clamp(28px,3.2vw,52px);line-height:1.1;letter-spacing:-.025em;font-weight:500;max-width:20ch}
.pclaim p{margin-top:28px;font-size:clamp(16px,1.3vw,20px);line-height:1.7;color:var(--fg2);max-width:70ch}

/* ---------- legal pages (privacy / terms) ---------- */
.legal{padding:100px 56px 130px}
.legal-inner{max-width:820px;margin:0 auto}
.legal-updated{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg3);margin-bottom:48px;padding-bottom:28px;border-bottom:1px solid var(--line);
}
.legal-body h2{
  font-size:clamp(19px,1.6vw,24px);font-weight:500;letter-spacing:-.012em;color:var(--fg);
  margin:44px 0 14px;
}
.legal-body h2:first-child{margin-top:0}
.legal-body p{font-size:15.5px;line-height:1.75;color:var(--fg2)}
.legal-body a{color:var(--pink);text-decoration:none;border-bottom:1px solid rgba(196,30,74,.35);transition:border-color .2s ease}
.legal-body a:hover{border-color:var(--pink)}

@media(max-width:1080px){
  .phero-inner{padding:calc(var(--h) + 60px) 24px 44px}
  .psec{padding-top:70px}
  .psec-label{padding:0 24px 20px}
  .plist{grid-template-columns:1fr}
  .pcell{padding:34px 24px 40px;border-right:0}
  .pcell:nth-child(n+4){border-bottom:1px solid var(--line)}
  .pcell:last-child{border-bottom:0}
  .pclaim{padding:70px 24px}
  .legal{padding:60px 24px 80px}
}

/* ---------- legal modal (privacy / terms, on click) ---------- */
.lveil{
  position:fixed;inset:0;z-index:90;background:rgba(3,4,10,.6);
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.lveil.on{opacity:1;pointer-events:auto}
.lmodal{
  position:fixed;top:50%;left:50%;z-index:91;
  width:min(640px,92vw);max-height:min(78vh,720px);
  background:#fff;color:#0A0B14;
  display:flex;flex-direction:column;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transform:translate(-50%,-50%) scale(.97);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.lmodal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.lmodal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:28px 34px 0;flex:none;
}
.lmodal-head h2{font-size:clamp(19px,2vw,23px);font-weight:500;letter-spacing:-.015em;color:#0A0B14;margin:0}
.lmodal-close{
  background:none;border:0;cursor:pointer;flex:none;padding:2px;margin:-2px -2px 0 0;
  color:#0A0B14;opacity:.45;transition:opacity .2s ease;
}
.lmodal-close:hover{opacity:1}
.lmodal-close svg{display:block;width:18px;height:18px}
.lmodal-updated{
  padding:12px 34px 20px;margin:0;border-bottom:1px solid rgba(10,11,20,.12);flex:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,11,20,.45);
}
.lmodal-body{overflow-y:auto;padding:22px 34px 36px;flex:1}
.lmodal-body h2{font-size:15px;font-weight:600;letter-spacing:-.005em;color:#0A0B14;margin:24px 0 8px}
.lmodal-body h2:first-child{margin-top:0}
.lmodal-body p{font-size:14px;line-height:1.68;color:rgba(10,11,20,.76);margin:0}
.lmodal-body a{color:#C41E4A;text-decoration:underline;text-underline-offset:2px}

@media(max-width:640px){
  .lmodal{
    top:0;left:0;right:0;bottom:0;width:100%;max-height:100%;
    transform:none;
  }
  .lmodal.open{transform:none}
  .lmodal-head{padding:24px 22px 0}
  .lmodal-updated{padding:12px 22px 18px}
  .lmodal-body{padding:20px 22px 32px}
}

/* ---------- transport modes ---------- */
.modes{border-top:1px solid var(--line)}
.mrow{
  position:relative;display:grid;grid-template-columns:400px 1fr;gap:0;
  border-bottom:1px solid var(--line);transition:background-color .35s ease;
}
.mrow:last-child{border-bottom:0}
.mrow:hover{background-color:var(--hover)}
.mrow figure{position:relative;overflow:hidden;min-height:270px;border-right:1px solid var(--line)}
.mrow figure img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.62) saturate(.8);transform:scale(1.02);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .5s ease;
}
.mrow:hover figure img{transform:scale(1.08);filter:brightness(.74) saturate(.9)}
.mbody{padding:44px 48px 46px;display:flex;flex-direction:column;justify-content:center}
.mnum{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--fg4);transition:color .3s ease}
.mrow:hover .mnum{color:var(--pink)}
.mbody h3{margin:16px 0 12px;font-size:clamp(20px,1.7vw,28px);font-weight:500;letter-spacing:-.015em;color:var(--fg)}
.mbody p{font-size:15.5px;line-height:1.66;color:var(--fg2);max-width:62ch}
.mtags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.mtags span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg2);border:1px solid var(--line);padding:8px 12px;
  transition:.25s ease;
}
.mrow:hover .mtags span{border-color:rgba(196,30,74,.5);color:rgba(255,255,255,.85)}
@media(max-width:900px){
  .mrow{grid-template-columns:1fr}
  .mrow figure{min-height:220px;border-right:0;border-bottom:1px solid var(--line)}
  .mbody{padding:30px 24px 34px}
}

.fcol a[aria-label]{display:inline-block;line-height:0;transition:opacity .25s ease}
.fcol a[aria-label]:hover{opacity:.72}

/* ---------- closing CTA band ---------- */
.cband{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cband img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:brightness(.82) saturate(.92) contrast(1.02);transform:scale(1.02);
  transition:transform 3s cubic-bezier(.2,.7,.2,1);
}
.cband:hover img{transform:scale(1.06)}
.cband::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(10,11,24,.9) 0%,rgba(10,11,24,.66) 34%,rgba(10,11,24,.2) 68%,rgba(10,11,24,.04) 100%),
             linear-gradient(180deg,rgba(10,11,24,.28) 0%,rgba(10,11,24,.06) 45%,rgba(10,11,24,.6) 100%);
}
.cband-inner{position:relative;z-index:2;padding:110px 56px 116px;max-width:1000px}
.cband .brow{position:static;display:block;margin-bottom:22px}
.cband h2{font-size:clamp(30px,3.6vw,58px);line-height:1.08;letter-spacing:-.025em;font-weight:500;max-width:17ch}
.cband p{margin-top:22px;font-size:clamp(15px,1.25vw,19px);line-height:1.7;color:var(--fg2);max-width:52ch}
.cband-actions{margin-top:38px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.cband-actions .tel{
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg);text-decoration:none;border-bottom:1px solid var(--fg4);padding-bottom:4px;
  transition:.25s ease;
}
.cband-actions .tel:hover{color:var(--pink);border-color:var(--pink)}
@media(max-width:900px){
  .cband-inner{padding:70px 24px 76px}
  .cband::before{background:linear-gradient(180deg,rgba(10,11,24,.66),rgba(10,11,24,.86))}
}

/* ---------- masked line reveal (brows + headings) ----------
   the element itself becomes the mask; .mrv-i is the text that slides up
   out of it. Multi-line headings get one .mrv-ln mask per rendered line. */
.mrv,.mrv-ln{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.mrv-ln{display:block}
/* measuring spans must stay inline — a global `h1 span{display:block}` rule
   would otherwise put every word on its own "line" */
.mrv-w{display:inline}
.mrv-i{
  display:block;transform:translateY(115%);
  transition:transform 1s cubic-bezier(.19,1,.22,1);
  will-change:transform;
}
.mrv.in .mrv-i,.mrv-lines.in .mrv-i{transform:none}
.mrv-instant .mrv-i{transition:none}
@media(prefers-reduced-motion:reduce){
  .mrv-i{transform:none;transition:none}
}

/* ---------- scroll reveals ---------- */
.reveal{
  opacity:0;transform:translateY(44px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- custom cursor ---------- */
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor label,
html.has-cursor .svc,
html.has-cursor .mrow,
html.has-cursor #globe{cursor:none}
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select{cursor:auto}

.cur,.cur-dot{
  position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  transform:translate3d(-100px,-100px,0);will-change:transform;
}
/* the visual square lives in a child, so position and shape never fight */
.cur i{
  display:block;width:22px;height:22px;margin:-11px 0 0 -11px;
  border:1px solid var(--fg3);
  transition:width .28s ease,height .28s ease,margin .28s ease,
             border-color .28s ease,background .28s ease,transform .35s ease;
}
.cur-dot{
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 10px rgba(196,30,74,.9);
  transition:opacity .25s ease;
}

.cur.is-link i{
  width:48px;height:48px;margin:-24px 0 0 -24px;border-color:transparent;
  --c:var(--pink);--l:12px;--t:2px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--t) var(--l) no-repeat;
}
.cur.is-drag i{
  width:46px;height:46px;margin:-23px 0 0 -23px;transform:rotate(45deg);
  border-color:rgba(196,30,74,.9);background:rgba(196,30,74,.12);
}
.cur.is-down i{transform:scale(.8) rotate(var(--r,0deg))}
.cur.is-drag.is-down i{transform:scale(.85) rotate(45deg)}
.cur.is-hidden,.cur-dot.is-hidden,.cur-dot.is-link{opacity:0}

@media(hover:none),(pointer:coarse){ .cur,.cur-dot{display:none} }
@media(prefers-reduced-motion:reduce){ .cur,.cur-dot{display:none} }

/* ---------- cases page ---------- */
.case{border-bottom:1px solid var(--line)}
.case:last-of-type{border-bottom:0}
.case-head{padding:96px 56px 40px;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:end}
.case-kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pink);display:block;margin-bottom:20px;
}
.case-head h2{font-size:clamp(26px,2.9vw,46px);line-height:1.1;letter-spacing:-.025em;font-weight:500}
.case-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.case-stat{padding:26px 20px 28px;border-right:1px solid var(--line)}
.case-stat:last-child{border-right:0}
.case-stat b{display:block;font-size:clamp(22px,2vw,32px);font-weight:500;letter-spacing:-.02em;color:var(--fg)}
.case-stat span{
  display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg3);
}
.case-photo{position:relative;height:clamp(280px,38vw,520px);overflow:hidden;border-top:1px solid var(--line)}
.case-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(.86) saturate(.95);
}
.case-photo::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,11,24,.25),rgba(10,11,24,.6));
}
.case-body{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.case-story{padding:56px 48px 60px;border-right:1px solid var(--line)}
.case-block{margin-bottom:30px}
.case-block:last-child{margin-bottom:0}
.case-block h3{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg3);margin-bottom:12px;font-weight:400;
}
.case-block p{font-size:15.5px;line-height:1.7;color:var(--fg2)}
.case-specs{padding:56px 48px 60px}
.spec-title{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pink);margin:0 0 16px;
}
.spec-title + table{margin-bottom:40px}
.case-specs table{width:100%;border-collapse:collapse;font-size:14.5px}
.case-specs td{
  padding:12px 0;border-bottom:1px solid var(--line);color:var(--fg2);vertical-align:top;
}
.case-specs tr:last-child td{border-bottom:0}
.case-specs td:first-child{color:var(--fg3);width:46%;padding-right:20px}
.case-specs td:last-child{text-align:right;color:var(--fg)}
.case-specs table.legs td:first-child{width:auto;color:var(--fg2)}
.case-specs table.legs td:last-child{width:26%;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}

/* ---------- case teaser cards ---------- */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.ccard{
  position:relative;display:block;text-decoration:none;padding:44px 40px 48px;
  border-right:1px solid var(--line);transition:background-color .35s ease;
}
.ccard:last-child{border-right:0}
.ccard:hover{background-color:var(--hover)}
.ccard h3{margin:18px 0 22px;font-size:clamp(19px,1.5vw,25px);font-weight:500;letter-spacing:-.015em;color:var(--fg);min-height:2.4em}
.ccard-figs{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:26px}
.ccard-figs div b{display:block;font-size:20px;font-weight:500;color:var(--fg)}
.ccard-figs div span{
  display:block;margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg3);
}
.ccard-link{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);
  transition:color .25s ease,gap .25s ease;
}
.ccard:hover .ccard-link{color:var(--pink);gap:20px}

@media(max-width:1080px){
  .case-head{grid-template-columns:1fr;gap:24px;padding:60px 24px 30px}
  .case-body{grid-template-columns:1fr}
  .case-story{border-right:0;border-bottom:1px solid var(--line);padding:36px 24px 40px}
  .case-specs{padding:36px 24px 44px}
  .ccards{grid-template-columns:1fr}
  .ccard{border-right:0;border-bottom:1px solid var(--line);padding:34px 24px 38px}
  .ccard:last-child{border-bottom:0}
  .ccard h3{min-height:0}
  .case-stats{grid-template-columns:1fr}
  .case-stat{border-right:0;border-bottom:1px solid var(--line)}
}

/* ---------- cases banner strip on the home page ---------- */
.cases-strip{position:relative;height:clamp(150px,17vw,240px);overflow:hidden;border-top:1px solid var(--line)}
.cases-strip img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 78%;z-index:0;
  filter:brightness(1.08) saturate(1.05);
  /* 2026-09-24: медленная панорама внутри полосы. Двигаем object-position,
     а не transform: transform у этой картинки занят параллаксом из site.js. */
  animation:stripPan 13s ease-in-out infinite alternate;
}
@keyframes stripPan{from{object-position:center 60%}to{object-position:center 96%}}
@media(prefers-reduced-motion:reduce){ .cases-strip img{animation:none} }
.cases-strip::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,11,24,.08),rgba(10,11,24,.38));
}
#cases .psec-label{color:var(--pink)}

/* ---------- floating operator button ---------- */
.fab{
  position:fixed;right:28px;bottom:28px;z-index:90;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;
}
.fab.show{opacity:.58;transform:none;pointer-events:auto}
.fab.show:hover,.fab.show.open{opacity:1}
.fab.hide{opacity:0;transform:translateY(14px);pointer-events:none}

.fab-btn{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  background:rgba(13,15,31,.55);backdrop-filter:blur(10px);
  border:1px solid var(--line);padding:14px 20px 14px 18px;
  color:var(--fg);font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .25s ease,background .25s ease;
}
.fab-btn:hover{border-color:var(--pink);background:rgba(13,15,31,.96)}
.fab-btn .live{position:relative;width:9px;height:9px;flex:none}
.fab-btn .live i{
  position:absolute;inset:0;border-radius:50%;background:#2fd07a;
  box-shadow:0 0 10px rgba(47,208,122,.9);
}
.fab-btn .live i::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(47,208,122,.7);animation:live 2.2s ease-out infinite;
}
@keyframes live{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.fab-btn .txt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1}
.fab-btn .txt b{font-weight:500;letter-spacing:.12em}
.fab-btn .txt span{font-size:10px;letter-spacing:.1em;color:var(--fg3)}
.fab-btn .chev{font-size:13px;color:var(--fg2);transition:transform .3s ease}
.fab.open .fab-btn .chev{transform:rotate(180deg)}

.fab-list{
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.fab.open .fab-list{opacity:1;visibility:visible;transform:none}
.fab-list a{
  display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:236px;
  background:rgba(13,15,31,.94);backdrop-filter:blur(10px);
  border:1px solid var(--line);padding:13px 18px;text-decoration:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg2);transition:.24s ease;
}
.fab-list a:hover{border-color:var(--pink);color:var(--fg);background:var(--pink-dim)}
.fab-list a.lead{background:var(--pink);border-color:var(--pink);color:var(--fg)}
.fab-list a.lead:hover{filter:brightness(1.12)}

@media(max-width:640px){
  .fab{right:16px;bottom:16px}
  .fab-btn{padding:12px 16px}
  .fab-btn .txt span{display:none}
  .fab-list a{min-width:210px}
}
@media(prefers-reduced-motion:reduce){
  .fab-btn .live i::after{animation:none}
}

/* ---------- back to top ---------- */
.totop{
  position:fixed;left:28px;bottom:28px;z-index:90;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--fg);
  background:rgba(13,15,31,.55);backdrop-filter:blur(10px);
  border:1px solid var(--line);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease,border-color .25s ease,background .25s ease;
}
.totop.show{opacity:.58;transform:none;pointer-events:auto}
.totop.show:hover,.totop.show:focus-visible{opacity:1;border-color:var(--pink);background:rgba(13,15,31,.96)}
.totop:focus-visible{outline:none}
.totop svg{width:16px;height:16px;display:block;transition:transform .3s ease}
.totop.show:hover svg,.totop.show:focus-visible svg{transform:translateY(-3px)}

.totop.show:active{opacity:1;border-color:var(--pink)}

/* no hover on touch, so the idle state carries a little more weight there */
@media(hover:none),(pointer:coarse){
  .totop.show{opacity:.82}
}
@media(max-width:640px){
  .totop{left:16px;bottom:16px;width:42px;height:42px}
  .totop svg{width:15px;height:15px}
}
@media(prefers-reduced-motion:reduce){
  .totop.show:hover svg,.totop.show:focus-visible svg{transform:none}
}

/* ---------- light theme ---------- */
html[data-mode="light"]{
  --bg:#F2F3F6;
  --panel:#FFFFFF;
  --ink:#0A0B18;
  --fg:#0A0B18;
  --fg2:rgba(10,11,24,.7);
  --fg3:rgba(10,11,24,.5);
  --fg4:rgba(10,11,24,.36);
  --line:rgba(10,11,24,.14);
  --hover:rgba(10,11,24,.03);
  --card:rgba(255,255,255,.85);
  --pink-dim:rgba(196,30,74,.09);
}
/* media blocks keep the dark treatment: white text sits on photos and video */
html[data-mode="light"] .hero,
html[data-mode="light"] .svc,
html[data-mode="light"] .phero,
html[data-mode="light"] .cband,
html[data-mode="light"] .cases-strip,
html[data-mode="light"] .case-photo,
html[data-mode="light"] .mrow figure,
html[data-mode="light"] .reach,
html[data-mode="light"] .drawer{
  --fg:#FFFFFF;
  --fg2:rgba(255,255,255,.72);
  --fg3:rgba(255,255,255,.45);
  --fg4:rgba(255,255,255,.3);
  --line:rgba(255,255,255,.22);
  --ink:#FFFFFF;
  --card:rgba(13,15,31,.55);
  color:#fff;
}
/* the globe needs its dark sky, so that band stays dark in both themes */
html[data-mode="light"] .reach{background:#0A0B18;border-bottom-color:rgba(255,255,255,.22)}
html[data-mode="light"] .drawer{background:#0D0F1F}

html[data-mode="light"] body{color:var(--fg)}
html[data-mode="light"] .header{background:rgba(242,243,246,.9);backdrop-filter:blur(10px)}
html[data-mode="light"] .hero .header,
html[data-mode="light"] .phero + *{}
html[data-mode="light"] .btn{border-color:rgba(10,11,24,.3);color:var(--fg)}
html[data-mode="light"] .btn:hover{background:var(--fg);color:#fff;border-color:var(--fg)}
html[data-mode="light"] .btn.primary{background:var(--pink);border-color:var(--pink);color:#fff}
html[data-mode="light"] .btn.primary:hover{background:#0A0B18;border-color:#0A0B18;color:#fff}
html[data-mode="light"] .hero .btn{border-color:rgba(255,255,255,.35);color:#fff}
html[data-mode="light"] .hero .btn:hover{background:#fff;color:#0A0B18;border-color:#fff}
html[data-mode="light"] .phero .btn{border-color:rgba(255,255,255,.35);color:#fff}
html[data-mode="light"] .phero .btn:hover{background:#fff;color:#0A0B18;border-color:#fff}
html[data-mode="light"] .cband .btn.primary,
html[data-mode="light"] .phero .btn.primary,
html[data-mode="light"] .hero .btn.primary{background:var(--pink);border-color:var(--pink);color:#fff}
html[data-mode="light"] #fname{-webkit-text-stroke-color:rgba(10,11,24,.62)}
html[data-mode="light"] .fsocial a{background:rgba(10,11,24,.02)}
html[data-mode="light"] .pcell.cta{background:rgba(196,30,74,.07)}
html[data-mode="light"] .cur i{border-color:rgba(10,11,24,.45)}
html[data-mode="light"] .fab-btn,
html[data-mode="light"] .fab-list a{background:rgba(255,255,255,.72);color:var(--fg)}
html[data-mode="light"] .fab-btn:hover,
html[data-mode="light"] .fab-list a:hover{background:rgba(255,255,255,.97)}
html[data-mode="light"] .fab-list a.lead{background:var(--pink);color:#fff}
html[data-mode="light"] .totop{background:rgba(255,255,255,.72);color:var(--fg)}
html[data-mode="light"] .totop.show:hover,
html[data-mode="light"] .totop.show:focus-visible{background:rgba(255,255,255,.97)}
html[data-mode="light"] .qveil{background:rgba(120,124,140,.45)}
html[data-mode="light"] .veil{background:rgba(120,124,140,.45)}
html[data-mode="light"] .mtags span{border-color:var(--line)}
html[data-mode="light"] .field input,
html[data-mode="light"] .field select,
html[data-mode="light"] .field textarea{background:rgba(255,255,255,.04)}

html[data-mode="light"] .fcol img.flogo-light{display:none}
html[data-mode="light"] .fcol img.flogo-dark{display:block}

/* остатки жёстко заданного белого — только для светлой темы */
html[data-mode="light"] .fact .big{color:rgba(10,11,24,.28)}
html[data-mode="light"] .fact .small{color:rgba(10,11,24,.34)}
html[data-mode="light"] .fact:hover .big{color:var(--fg)}
html[data-mode="light"] .fact:hover .small{color:rgba(10,11,24,.62)}
html[data-mode="light"] .mrow:hover .mtags span{color:rgba(10,11,24,.85)}
html[data-mode="light"] .card{border-color:rgba(255,255,255,.14)}
html[data-mode="light"] .facts::before{background:linear-gradient(90deg,var(--bg),rgba(242,243,246,0))}
html[data-mode="light"] .facts::after{background:linear-gradient(270deg,var(--bg),rgba(242,243,246,0))}
html[data-mode="light"] .padel-feed-scroll::before{background:linear-gradient(90deg,var(--bg),rgba(242,243,246,0))}
html[data-mode="light"] .padel-feed-scroll::after{background:linear-gradient(270deg,var(--bg),rgba(242,243,246,0))}
html[data-mode="light"] .pfeed-hint{background:rgba(255,255,255,.82)}

/* the padel marquee is the same faint-text pattern as .facts and was missed:
   its text and its edge fades were both hardcoded to the dark theme */
html[data-mode="light"] .pfeat h4{color:rgba(10,11,24,.34)}
html[data-mode="light"] .padel-features::before{background:linear-gradient(90deg,var(--bg),rgba(242,243,246,0))}
html[data-mode="light"] .padel-features::after{background:linear-gradient(270deg,var(--bg),rgba(242,243,246,0))}

/* white on pink, like .btn.primary — var(--fg) is near-black in light mode */
html[data-mode="light"] .lang-list a:hover{color:#fff}
html[data-mode="light"] .side a:hover,
html[data-mode="light"] .side a.lead{color:#fff}

/* ---------- страницы услуг, о компании и контактов ---------- */
.ccards.hub .ccard{border-bottom:1px solid var(--line)}
.ccards.hub .ccard:nth-child(3n){border-right:0}
.ccards.hub .ccard:nth-child(n+4){border-bottom:0}
.ccards.hub .ccard h3{min-height:0;margin-bottom:26px}
a.mrow{text-decoration:none;color:inherit}
.mgo{margin-top:22px}
a.mrow:hover .ccard-link{color:var(--pink);gap:20px}
.case-stats.four{grid-template-columns:repeat(4,1fr)}
.ptext{padding:110px 56px;border-bottom:1px solid var(--line)}
.ptext p{max-width:78ch;font-size:clamp(15px,1.15vw,17.5px);line-height:1.8;color:var(--fg2)}
.ptext p + p{margin-top:24px}
.cinfo{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.cbox{padding:44px 40px 48px;border-right:1px solid var(--line)}
.cbox:last-child{border-right:0}
.cbox h3{margin:0 0 16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);font-weight:400}
.cbox p{font-size:16px;line-height:1.65;color:var(--fg)}
.cbox a{display:inline-block;margin-top:14px;font-size:15px;line-height:1.65;color:var(--fg);text-decoration:none;transition:color .2s ease}
.cbox a:hover{color:var(--pink)}
@media(max-width:1080px){
  .ccards.hub .ccard:nth-child(n+4){border-bottom:1px solid var(--line)}
  .ccards.hub .ccard:last-child{border-bottom:0}
  .case-stats.four{grid-template-columns:repeat(2,1fr)}
  .case-stats.four .case-stat{border-bottom:1px solid var(--line)}
  .case-stats.four .case-stat:nth-child(2n){border-right:0}
  .case-stats.four .case-stat:nth-child(n+3){border-bottom:0}
  .ptext{padding:60px 24px}
  .cinfo{grid-template-columns:1fr}
  .cbox{border-right:0;border-bottom:1px solid var(--line);padding:34px 24px 38px}
  .cbox:last-child{border-bottom:0}
}

/* ---------- частые вопросы ---------- */
.faq{padding:130px 0 0;border-bottom:1px solid var(--line)}
.faq-head{
  display:grid;grid-template-columns:1.05fr 1fr;gap:70px;
  padding:0 56px 84px;align-items:end;
}
.faq .brow{position:static;display:block;margin-bottom:24px}
.faq-title{
  font-size:clamp(34px,4vw,64px);line-height:1.06;
  font-weight:500;letter-spacing:-.025em;
}
.faq-lead{
  font-size:clamp(17px,1.35vw,21px);line-height:1.65;
  color:var(--fg2);max-width:58ch;
}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:0}
.faq-item summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:44px;
  padding:34px 56px;cursor:pointer;list-style:none;
  transition:background-color .35s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background-color:var(--hover)}
.faq-q{
  font-size:clamp(18px,1.5vw,25px);line-height:1.35;
  font-weight:500;letter-spacing:-.015em;color:var(--fg);max-width:62ch;
  transition:color .3s ease;
}
.faq-item summary:hover .faq-q{color:var(--pink)}
.faq-mark{position:relative;flex:0 0 auto;width:18px;height:18px;margin-top:9px}
.faq-mark::before,.faq-mark::after{
  content:"";position:absolute;background:var(--fg3);
  transition:transform .35s cubic-bezier(.19,1,.22,1),background-color .3s ease;
}
.faq-mark::before{left:0;top:8px;width:18px;height:2px}
.faq-mark::after{left:8px;top:0;width:2px;height:18px}
.faq-item[open] .faq-mark::after{transform:scaleY(0)}
.faq-item summary:hover .faq-mark::before,
.faq-item summary:hover .faq-mark::after,
.faq-item[open] .faq-mark::before{background:var(--pink)}
.faq-a{padding:2px 56px 40px;max-width:82ch}
.faq-a p{font-size:clamp(15px,1.15vw,17.5px);line-height:1.8;color:var(--fg2)}

@media(max-width:1080px){
  .faq{padding:86px 0 0}
  .faq-head{grid-template-columns:1fr;gap:26px;padding:0 24px 48px}
  .faq-item summary{padding:26px 24px;gap:24px}
  .faq-a{padding:0 24px 30px}
}

/* ---------- страница Sky Padel (sky-padel.html) + короткий анонс на главной ---------- */
.padel-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.spd-hero .hero-btns{margin-top:38px}
.spd-pillars .pcell:nth-child(n){border-bottom:0}
.spd-gal{padding:130px 0 0;border-bottom:1px solid var(--line)}
.spd-gal-head{display:grid;grid-template-columns:1.05fr 1fr;gap:70px;padding:0 56px 64px;align-items:end}
.spd-gal .brow{position:static;display:block;margin-bottom:24px}
.spd-gal-title{font-size:clamp(30px,3.4vw,54px);line-height:1.08;font-weight:500;letter-spacing:-.025em;max-width:16ch}
.spd-gal-text{font-size:clamp(16px,1.3vw,20px);line-height:1.7;color:var(--fg2);max-width:56ch}
.spd-gal{container-type:inline-size}
/* порядок фото в sky-padel.html подобран так, чтобы 4 колонки заполнились без дыр (8 рядов: Jibo 2×2 первым, Second Cup 2×2 в 3–4 ряду, коридор 2×1 в 7-м);
   меняешь фото — меняй на фото той же формы, иначе появится дырка.
   ровная сетка: горизонтальное фото = 1 клетка, вертикальное = 2 по высоте, большое = 2×2.
   Высота ряда считается от ширины колонки, поэтому низ сетки ровный на любой ширине */
.pgal{
  --cols:4;--gap:14px;--pad:56px;
  display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap);
  grid-auto-rows:calc((100cqw - 2*var(--pad) - (var(--cols) - 1)*var(--gap)) / var(--cols) * .667);
  padding:0 var(--pad) 90px;
}
.pgal-item{
  display:block;position:relative;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);cursor:zoom-in;
  transition:border-color .3s ease;
}
.pgal-item.tall{grid-row:span 2}
.pgal-item.big{grid-row:span 2;grid-column:span 2}
.pgal-item.wide{grid-column:span 2}
.pgal-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .5s ease;filter:brightness(.94)}
.pgal-item:hover{border-color:var(--pink)}
.pgal-item:hover img{transform:scale(1.05);filter:brightness(1.02)}
.spd-feed{padding-top:0}
.spd-feed .padel-feed{padding-top:70px}

/* лайтбокс галереи */
.lbox{
  position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;
  background:rgba(3,4,10,.94);opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.lbox.open{opacity:1;pointer-events:auto}
.lbox img{max-width:min(92vw,1280px);max-height:86vh;width:auto;height:auto;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.lbox button{
  position:absolute;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:background-color .25s ease,border-color .25s ease;
}
.lbox button:hover{background:var(--pink);border-color:var(--pink)}
.lbox button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.lbox-close{top:22px;right:22px}
.lbox-prev{left:22px;top:50%;margin-top:-26px}
.lbox-next{right:22px;top:50%;margin-top:-26px}
.lbox-count{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:rgba(255,255,255,.7);
}

@media(max-width:1080px){
  .spd-pillars .pcell:nth-child(n){border-bottom:1px solid var(--line)}
  .spd-pillars .pcell:last-child{border-bottom:0}
  .spd-gal{padding-top:80px}
  .spd-gal-head{grid-template-columns:1fr;gap:24px;padding:0 24px 40px}
  .pgal{--cols:3;--gap:10px;--pad:24px;padding-bottom:60px;grid-auto-flow:dense}
  .spd-feed .padel-feed{padding-top:50px}
}
@media(max-width:640px){
  .pgal{--cols:2}
  .lbox-prev,.lbox-next{top:auto;bottom:18px;margin-top:0}
  .lbox-prev{left:18px}.lbox-next{right:18px}
  .lbox-close{top:14px;right:14px}
  .lbox button{width:46px;height:46px}
}

/* блок «инициатива основателя» на странице Sky Padel: коллаж из трёх фото + текст */
.spd-founder{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:80px;align-items:center;
  padding:120px 56px;border-bottom:1px solid var(--line);
}
.spd-founder-media{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:clamp(480px,46vw,680px)}
.spd-founder-media > div{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.spd-fm-main{grid-row:span 2}
.spd-founder-media img{position:absolute;inset:-9% 0;width:100%;height:118%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.spd-founder-media > div:hover img{transform:scale(1.05)}
.spd-fm-main img{object-position:50% 24%}
.spd-fm-side:nth-child(2) img{object-position:50% 42%}
.spd-fm-side:nth-child(3) img{object-position:62% 45%}
.spd-founder-body > p{font-size:clamp(15px,1.15vw,17.5px);line-height:1.8;color:var(--fg2);max-width:58ch}
.spd-founder-body > p + p{margin-top:24px}
.spd-founder-body > p.spd-founder-lead{font-size:clamp(19px,1.6vw,26px);line-height:1.55;color:var(--fg);letter-spacing:-.01em}
@media(max-width:1080px){
  .spd-founder{grid-template-columns:1fr;gap:56px;padding:70px 24px}
  /* телефон: портрет на всю ширину, под ним две широкие фото */
  .spd-founder-media{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:none;gap:10px}
  .spd-fm-main{grid-row:auto;grid-column:span 2;aspect-ratio:4/5}
  .spd-fm-side{grid-column:span 2;aspect-ratio:16/9}
}

/* премиальный хиро-баннер страницы Sky Padel: ракетка слева, текст справа, на весь экран */
.spd-hero{min-height:100vh;min-height:100svh;align-items:flex-end;justify-content:flex-end}
.spd-hero img{object-position:30% 55%;filter:brightness(.9) contrast(1.06) saturate(1.05);animation:spdZoom 16s cubic-bezier(.45,0,.55,1) infinite alternate;transform-origin:32% 62%;will-change:transform}
/* 2026-10-01: зум сделан заметнее (было 1→1.08 за 22 с — глаз не ловил), но всё так же медленный и плавный */
@keyframes spdZoom{from{transform:scale(1.02)}to{transform:scale(1.2)}}
@media(prefers-reduced-motion:reduce){.spd-hero img{animation:none}}
.spd-hero::before{
  background:
    linear-gradient(270deg,rgba(10,11,24,.92) 0%,rgba(10,11,24,.72) 30%,rgba(10,11,24,.18) 58%,rgba(10,11,24,0) 72%),
    linear-gradient(180deg,rgba(10,11,24,.55) 0%,rgba(10,11,24,0) 22%,rgba(10,11,24,0) 70%,rgba(10,11,24,.7) 100%);
}
.spd-hero .phero-inner{position:static;max-width:600px;margin-left:auto;padding:calc(var(--h) + 96px) 64px 110px 0}
.spd-hero .phero-inner > *{position:relative;z-index:2}
.spd-hero .crumbs{position:absolute;top:calc(var(--h) + 34px);left:56px;z-index:2;margin:0}
.spd-hero .brow{position:relative;top:auto;left:auto;right:auto;display:flex;align-items:center;gap:16px;margin-bottom:26px}
.spd-hero .brow::before{content:'';width:42px;height:1px;background:var(--pink);flex:none}
.spd-hero h1{font-size:clamp(46px,6vw,104px);line-height:.98;letter-spacing:-.035em;max-width:none}
.spd-hero .plead{font-size:clamp(16px,1.2vw,19px);max-width:44ch}
.spd-hero-meta{
  position:absolute;left:56px;bottom:44px;z-index:2;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg2);
}
@media(max-width:1080px){
  /* телефон: фото с ракеткой сверху отдельной картинкой, текст ниже на тёмном — ракетку не закрываем */
  .spd-hero{display:block;min-height:0}
  .spd-hero img{inset:0 0 auto 0;height:clamp(420px,62vw,640px);object-position:24% 62%}
  .spd-hero::before{
    bottom:auto;height:clamp(420px,62vw,640px);
    background:linear-gradient(180deg,rgba(10,11,24,.55) 0%,rgba(10,11,24,0) 22%,rgba(10,11,24,0) 55%,rgba(10,11,24,1) 100%);
  }
  .spd-hero{background:#0A0B18}
  .spd-hero .phero-inner{max-width:none;margin:0;padding:calc(clamp(420px,62vw,640px) - 70px) 24px 84px}
  .spd-hero .crumbs{left:24px;top:calc(var(--h) + 22px)}
  .spd-hero h1{font-size:clamp(42px,11vw,72px)}
  .spd-hero-meta{left:24px;bottom:30px;font-size:10px;letter-spacing:.14em}
}

/* строка «в клубе»: 6 кортов, академия, кафе, магазин + часы и телефон */
.spd-stats .case-stat{padding:40px 40px 42px}
.spd-stats .case-stat b{font-size:clamp(28px,2.8vw,46px);line-height:1.05}
.spd-stats .case-stat span{display:block;margin-top:12px}
.spd-hours{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px 56px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);
}
.spd-hours > span{display:flex;align-items:center;gap:12px}
.spd-hours a{color:var(--fg);text-decoration:none;letter-spacing:.1em;transition:color .2s ease}
.spd-hours a:hover{color:var(--pink)}
.spd-stats + .spd-hours + .plist{border-top:1px solid var(--line)}
@media(max-width:1080px){
  .spd-stats .case-stat{padding:26px 24px 28px}
  .spd-hours{padding:18px 24px;font-size:11px}
}

/* ---------- spd-anim: движение на странице Sky Padel ---------- */
/* карточки «в клубе»: фото внутри карточки медленно «дышит» по кругу, на ховере приближается сильнее */
.spd-stats .case-stat{position:relative;overflow:hidden;min-height:clamp(220px,19vw,300px);display:flex;align-items:flex-end;padding:0;isolation:isolate}
.spd-stat-bg{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:brightness(.62) saturate(.95);
  animation:spdBreathe 14s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.spd-stats .case-stat:nth-child(2) .spd-stat-bg{animation-duration:16s;animation-delay:-5s}
.spd-stats .case-stat:nth-child(3) .spd-stat-bg{animation-duration:13s;animation-delay:-9s}
.spd-stats .case-stat:nth-child(4) .spd-stat-bg{animation-duration:15s;animation-delay:-3s}
@keyframes spdBreathe{from{transform:scale(1.02)}to{transform:scale(1.16)}}
.spd-stats .case-stat::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,11,24,.1) 0%,rgba(10,11,24,.35) 45%,rgba(10,11,24,.88) 100%);
}
.spd-stat-txt{padding:40px 36px 36px;width:100%}
.spd-stats .case-stat b{color:#fff}
.spd-stats .case-stat span{color:rgba(255,255,255,.78)}
/* ховер: отдельное свойство scale складывается с «дыханием», поэтому круг не прерывается и не дёргается */
.spd-stat-bg{scale:1;transition:scale 1.4s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.spd-stats .case-stat:hover .spd-stat-bg{scale:1.12;filter:brightness(.8) saturate(1.05)}
/* ряд карточек выезжает волной */
.spd-stats.spd-anim .case-stat{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.spd-stats.spd-anim.in .case-stat{opacity:1;transform:none}
.spd-stats.spd-anim .case-stat:nth-child(2){transition-delay:.1s}
.spd-stats.spd-anim .case-stat:nth-child(3){transition-delay:.2s}
.spd-stats.spd-anim .case-stat:nth-child(4){transition-delay:.3s}

/* блок инициативы: фото выезжают слева по очереди (текст справа — строками, см. masked line reveal в site.js) */
.spd-founder-media.spd-anim > div{opacity:0;transform:translateX(-80px);clip-path:inset(0 100% 0 0);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1),clip-path 1.2s cubic-bezier(.7,0,.2,1)}
.spd-founder-media.spd-anim > div img{transform:scale(1.18);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.spd-founder-media.spd-anim.in > div{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.spd-founder-media.spd-anim.in > div img{transform:none}
.spd-founder-media.spd-anim.in > div:hover img{transform:scale(1.05)}
.spd-founder-media.spd-anim > div:nth-child(2),.spd-founder-media.spd-anim > div:nth-child(2) img{transition-delay:.18s}
.spd-founder-media.spd-anim > div:nth-child(3),.spd-founder-media.spd-anim > div:nth-child(3) img{transition-delay:.34s}
.spd-founder-body > p.mrv-lines .mrv-i{transition-duration:1s}

/* галерея: плитка поднимается, фото внутри «оседает» из приближения */
.pgal-item.spd-anim{opacity:0;transform:translateY(50px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),border-color .3s ease}
.pgal-item.spd-anim img{transform:scale(1.22);transition:transform 1.6s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.pgal-item.spd-anim.in{opacity:1;transform:none}
.pgal-item.spd-anim.in img{transform:none}
.pgal-item.spd-anim.in:hover img{transform:scale(1.07);transition-delay:0s!important}
/* подпись-подсказка на ховере: тонкая рамка «открыть» */
.pgal-item::after{
  content:'';position:absolute;inset:14px;border:1px solid rgba(255,255,255,.0);
  transition:border-color .45s ease,inset .45s cubic-bezier(.2,.7,.2,1);pointer-events:none;
}
.pgal-item:hover::after{inset:10px;border-color:rgba(255,255,255,.45)}

@media(max-width:1080px){
  .spd-stats .case-stat{min-height:190px}
  .spd-stat-txt{padding:24px 20px 22px}
  .spd-founder-media.spd-anim > div{transform:translateX(-40px)}
}
@media(prefers-reduced-motion:reduce){
  .spd-hero img,.spd-stat-bg{animation:none}
  .spd-anim,.spd-anim > div,.spd-anim img,.spd-stats.spd-anim .case-stat{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}

/* ---------- параллакс на странице Sky Padel (2026-10-01) ----------
   JS двигает только свойство translate — оно складывается с transform-анимациями появления */
.spd-pillars .pcell{position:relative;overflow:hidden}
.spd-pnum-ghost{
  position:absolute;right:-6px;bottom:-34px;z-index:0;pointer-events:none;
  font-size:clamp(120px,12vw,190px);font-weight:600;line-height:1;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);
}
.spd-pillars .pcell > :not(.spd-pnum-ghost){position:relative;z-index:1}
.spd-pillars .pcell:hover .spd-pnum-ghost{-webkit-text-stroke-color:rgba(196,30,74,.35);transition:-webkit-text-stroke-color .5s ease}
html[data-mode="light"] .spd-pnum-ghost{-webkit-text-stroke-color:rgba(10,11,24,.09)}

@media(max-width:1080px){
  /* карточки «корты / турниры / сообщество»: складываются стопкой при прокрутке */
  .spd-pillars{border-top:0;padding:0 16px 24px;display:block}
  .spd-pillars .pcell{
    position:sticky;top:calc(var(--h) + 14px);
    margin-bottom:14px;padding:30px 24px 34px;min-height:230px;
    background:var(--panel);border:1px solid var(--line)!important;
    box-shadow:0 -14px 40px rgba(3,4,10,.55);
    transform-origin:50% 0;
  }
  .spd-pillars .pcell:nth-child(2){top:calc(var(--h) + 28px)}
  .spd-pillars .pcell:nth-child(3){top:calc(var(--h) + 42px);margin-bottom:0}
  .spd-pillars .pcell .pnum{color:var(--pink)}
  .spd-pnum-ghost{font-size:150px;bottom:-40px}

  /* блок инициативы: портрет во всю ширину, две фото «наплывают» на его низ */
  .spd-founder-media{grid-template-columns:1fr 1fr;gap:10px}
  .spd-fm-main{grid-column:span 2;aspect-ratio:4/5}
  .spd-founder-media .spd-fm-side{grid-column:auto!important;aspect-ratio:4/5!important;margin-top:-26%;z-index:2;
    box-shadow:0 18px 40px rgba(3,4,10,.6);border-color:rgba(255,255,255,.28)}
  .spd-founder-media .spd-fm-side:nth-child(2){margin-left:14px}
  .spd-founder-media .spd-fm-side:nth-child(3){margin-right:14px;margin-top:-14%}
  .spd-fm-side:nth-child(2) img{object-position:48% 50%}
  .spd-fm-side:nth-child(3) img{object-position:66% 50%}
}

/* блок инициативы: подпись сверху и итоговая строка снизу (2026-10-01) */
.spd-founder-body .brow{position:static;display:flex;align-items:center;gap:16px;margin-bottom:28px}
.spd-founder-body .brow::before{content:'';width:42px;height:1px;background:var(--pink);flex:none}
.spd-founder-body > p.spd-founder-note{
  margin-top:32px;padding-top:26px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;line-height:1.8;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);
}
@media(max-width:1080px){ .spd-founder-body > p.spd-founder-note{font-size:11px;letter-spacing:.1em} }

/* галерея свёрнута наполовину + кнопка «Показать ещё» (2026-10-01) */
.pgal-wrap{position:relative;padding-bottom:90px}
.pgal-wrap .pgal{position:relative;padding-bottom:0;transition:max-height 1.1s cubic-bezier(.65,0,.25,1)}
.pgal-wrap.is-collapsible .pgal{overflow:hidden}
.pgal-wrap.is-collapsible:not(.open) .pgal::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:min(260px,45%);pointer-events:none;z-index:3;
  background:linear-gradient(180deg,rgba(10,11,24,0) 0%,var(--bg) 92%);
}
html[data-mode="light"] .pgal-wrap.is-collapsible:not(.open) .pgal::after{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--bg) 92%)}
.pgal-more{display:none;justify-content:center;padding-top:34px;position:relative;z-index:5}
.pgal-wrap.is-collapsible .pgal-more{display:flex}
.pgal-wrap.is-collapsible:not(.open) .pgal-more{margin-top:-60px}
.pgal-more .btn{cursor:pointer;background:transparent;-webkit-appearance:none;appearance:none;border-radius:0;min-width:240px;justify-content:center}
.pgal-more .btn:hover{background:#fff}
.pgal-more-ico{display:inline-block;transition:transform .4s ease}
.pgal-wrap.open .pgal-more-ico{transform:rotate(180deg)}
@media(max-width:1080px){
  .pgal-wrap{padding-bottom:60px}
  .pgal-more{padding-top:26px}
}

/* блок инициативы: второй абзац — акцентная «плашка» (2026-10-01) */
.spd-founder-body > p[data-i18n="padel.lead2"]{
  position:relative;margin-top:30px;padding:26px 28px 28px 30px;
  border-left:2px solid var(--pink);
  background:linear-gradient(90deg,rgba(196,30,74,.12) 0%,rgba(196,30,74,.04) 55%,rgba(196,30,74,0) 100%);
  font-size:clamp(16px,1.25vw,19px);line-height:1.75;color:var(--fg);letter-spacing:-.003em;
}
.spd-founder-body > p[data-i18n="padel.lead2"]::before{
  content:'';position:absolute;left:-2px;top:0;width:2px;height:38%;
  background:linear-gradient(180deg,#fff,var(--pink));opacity:.85;
}
html[data-mode="light"] .spd-founder-body > p[data-i18n="padel.lead2"]{background:linear-gradient(90deg,rgba(196,30,74,.08) 0%,rgba(196,30,74,0) 100%)}
@media(max-width:1080px){
  .spd-founder-body > p[data-i18n="padel.lead2"]{padding:22px 20px 24px 22px;font-size:16px}
}

/* 2026-10-01: главная, блок падела — все фото коллажа медленно зумятся.
   Большое фото на десктопе двигает параллакс через transform, поэтому зум идёт
   отдельным свойством scale — они перемножаются и не мешают друг другу. */
@keyframes kenScale{from{scale:1}to{scale:1.12}}
html.has-parallax .padel-media-main img{animation:kenScale 14s cubic-bezier(.45,0,.55,1) infinite alternate}
.padel-media-main:hover img{animation-play-state:paused}
@keyframes kenburns2{from{transform:scale(1)}to{transform:scale(1.2)}}
.padel-media-side a:nth-child(1) img{animation-name:kenburns2}
.padel-media-side a:nth-child(2) img{animation-name:kenburns2}
.padel-media-side a:nth-child(3) img{animation-name:kenburns2}
html:not(.has-parallax) .padel-media-main img{animation-name:kenburns2}
@media(prefers-reduced-motion:reduce){html.has-parallax .padel-media-main img{animation:none}}

/* форма: подсказка вместо загрузки файла + скрытая ловушка для ботов (Web3Forms, 2026-10-06) */
.fhint{margin-top:4px;font-size:13px;line-height:1.6;color:var(--fg3)}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}