/* Win2Partners — базовые стили и компоненты дизайн-системы.
   Перенос React-компонентов хэндоффа (project/components/**) на классы:
   Button, ArrowIcon, Wintime, ProductCard, TariffCard, Header, Footer. */

/* ---------- reset / base ---------- */
/* overflow-x ОБЯЗАТЕЛЬНО clip, а не hidden: hidden делает элемент scroll-контейнером
   и молча ломает position:sticky на закреплённом hero страницы Wintime. */
html{overflow-x:clip;scroll-behavior:auto}
body{margin:0;overflow-x:clip;background:var(--surface-page);color:var(--text-primary);
  font-family:var(--font-text);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%}
a{color:var(--accent-primary);text-decoration:none}
a,button,[role="button"],summary,label[for],select{cursor:pointer}
a[href=""],button:disabled,[aria-disabled="true"]{cursor:default}
:focus-visible{outline:2px solid var(--accent-primary);outline-offset:3px;border-radius:4px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Button (figma 1:72) ---------- */
.w2p-btn{position:relative;display:inline-flex;flex-direction:row;gap:4px;
  justify-content:center;align-items:center;flex-wrap:nowrap;width:fit-content;
  border:none;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;
  font-family:var(--font-text);font-weight:500;font-size:16px;line-height:1;
  letter-spacing:var(--ls-tight);color:var(--text-primary);white-space:nowrap;
  transition:opacity var(--duration-base) var(--ease-standard),
             background-color var(--duration-base) var(--ease-standard)}
.w2p-btn:hover{opacity:.8;color:var(--text-primary)}
.w2p-btn:disabled,.w2p-btn[aria-disabled="true"]{opacity:.4;cursor:default}
.w2p-btn--primary{padding:16px 24px;background:var(--accent-primary);box-shadow:none}
.w2p-btn--secondary{padding:12px 16px;background:transparent;box-shadow:var(--shadow-outline-button)}
/* Метка и шеврон не растягиваются: когда кнопке задают более высокий бокс
   (пилюля в шапке тянется на высоту хрома), растянутые дети прижимают контент вверх. */
.w2p-btn__chev{position:relative;width:12px;height:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.w2p-btn__chev svg{display:block}
.w2p-btn--block{width:100%;align-self:stretch}

/* ---------- ArrowIcon (figma 1:20) ---------- */
.w2p-arrow{width:20px;height:20px;overflow:hidden;border-radius:var(--radius-pill);
  background-color:var(--w2p-white-05);box-shadow:var(--shadow-card-border);
  display:flex;align-items:center;justify-content:center;position:relative;
  color:rgb(106,106,106);flex-shrink:0}
.w2p-arrow svg{width:34%;height:44%}
.w2p-arrow--left svg{transform:rotate(180deg)}

/* ---------- Wintime mark (figma 1:69) ---------- */
.w2p-token{width:10.567px;height:10.567px;overflow:hidden;flex-shrink:0;position:relative;
  border-radius:var(--radius-pill);color:var(--w2p-white);
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.2) 100%);
  box-shadow:var(--shadow-token-chip)}
.w2p-token svg{position:absolute;left:18.33%;top:29.17%;width:63.3%;height:41.7%}

/* ---------- ProductCard (figma 1:23) ---------- */
.w2p-pc{position:relative;width:100%;max-width:560px;min-height:93px;overflow:hidden;
  border-radius:var(--radius-card);background:var(--surface-card);
  -webkit-backdrop-filter:var(--blur-card);backdrop-filter:var(--blur-card);
  box-shadow:var(--shadow-card-border);display:flex;flex-direction:row;gap:40px;
  padding:0 20px 0 12px;align-items:center;flex-wrap:nowrap;text-decoration:none;
  transition:box-shadow var(--duration-base) var(--ease-standard)}
.w2p-pc:hover{box-shadow:var(--shadow-card-border-hover)}
.w2p-pc--static{cursor:default}
.w2p-pc-inner{position:relative;display:flex;flex-direction:row;gap:20px;
  align-items:flex-start;flex-wrap:nowrap;flex-grow:1;align-self:stretch}
.w2p-pc-media{position:relative;width:136.5px;overflow:hidden;flex-shrink:0;align-self:stretch}
.w2p-pc-media>span{position:absolute;inset:0;display:block;
  background-position:center;background-repeat:no-repeat;background-size:contain;
  transition:transform 420ms var(--ease-standard)}
.w2p-pc-media>span.is-cover{left:0;top:-1px;width:136px;height:100%;inset:auto;
  background-size:cover}
.w2p-pc:hover .w2p-pc-media>span{transform:scale(1.06)}
.w2p-pc-body{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 0;
  align-items:flex-start;flex-grow:1;align-self:stretch;width:100%}
.w2p-pc-text{display:contents}
.w2p-pc-title{align-self:stretch;font-weight:700;font-size:18px;line-height:1;
  letter-spacing:var(--ls-label);color:var(--text-primary);text-transform:uppercase;margin:0}
.w2p-pc-desc{align-self:stretch;font-weight:400;font-size:14px;line-height:1.2;
  color:var(--text-muted);white-space:pre-line;margin:0}

/* ---------- TariffCard (figma 1:79) ---------- */
.w2p-tc{position:relative;width:100%;overflow:hidden;border-radius:var(--radius-card);
  background:var(--surface-card-tall);
  -webkit-backdrop-filter:var(--blur-card);backdrop-filter:var(--blur-card);
  box-shadow:var(--shadow-card-border);display:flex;flex-direction:column;gap:32px;
  padding:24px;align-items:flex-start;
  transition:box-shadow var(--duration-base) var(--ease-standard)}
.w2p-tc:hover{box-shadow:var(--shadow-card-border-hover)}
.w2p-tc-head{display:flex;flex-direction:column;gap:16px;align-self:stretch}
.w2p-tc-title{display:flex;flex-direction:row;gap:12px;align-items:center;height:32px;align-self:stretch}
.w2p-tc-name{font-weight:700;font-size:32px;line-height:1;letter-spacing:var(--ls-label);
  color:var(--text-primary);text-transform:uppercase;white-space:nowrap;margin:0}
.w2p-tc-price{height:26px;border-radius:var(--radius-pill);background-color:var(--surface-tag);
  display:flex;align-items:center;justify-content:center;padding:2px 12px;
  font-weight:600;font-size:16px;line-height:100%;letter-spacing:var(--ls-tag);
  color:var(--text-primary);white-space:nowrap}
.w2p-tc-price--accent{background-color:var(--accent-primary)}
.w2p-tc-rule{height:0;box-shadow:var(--shadow-rule);align-self:stretch}
.w2p-tc-rows{display:flex;flex-direction:column;gap:16px;align-self:stretch}
.w2p-tc-row{display:flex;flex-direction:row;gap:4px;align-items:flex-start;align-self:stretch}
.w2p-tc-row--token{gap:6px}
.w2p-tc-lead{display:flex;flex-direction:row;gap:4px;align-items:center}
.w2p-tc-label{font-weight:400;font-size:14px;line-height:1.2;color:var(--text-muted);white-space:nowrap}
.w2p-tc-value{font-weight:600;font-size:14px;line-height:1.2;color:var(--text-primary);white-space:nowrap}

/* ---------- Header (figma 1:5) ---------- */
/* Шапка фиксирована на всю страницу и НЕ несёт фона над первым экраном —
   цвет страницы она принимает только когда hero прокручен. */
.w2p-header-fix{position:fixed;left:0;top:0;width:100%;z-index:50;
  background-color:transparent;transition:background-color 260ms var(--reveal-ease)}
.w2p-header-fix.is-solid{background-color:var(--surface-page)}
.w2p-header{position:relative;width:100%;height:clamp(78px,5.4vw,108px);
  background:var(--surface-chrome);
  -webkit-backdrop-filter:var(--blur-chrome);backdrop-filter:var(--blur-chrome);
  display:flex;flex-direction:row;padding:clamp(19px,1.39vw,27px) var(--site-gutter,40px);
  justify-content:space-between;align-items:center}
.w2p-header--transparent{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.w2p-lockup{display:inline-flex;cursor:pointer;text-decoration:none}
.w2p-lockup img{height:clamp(18px,1.74vw,34px);width:auto;display:block}
.w2p-lang{position:relative;align-self:stretch;display:flex}
.w2p-lang>.w2p-btn{align-self:stretch}
.w2p-lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:140px;z-index:20;
  border-radius:13px;overflow:hidden;padding:4px;background:var(--surface-card);
  -webkit-backdrop-filter:var(--blur-card);backdrop-filter:var(--blur-card);
  box-shadow:var(--shadow-card-border);display:flex;flex-direction:column;gap:2px}
.w2p-lang-menu[hidden]{display:none}
.w2p-lang-menu button{border:none;background:transparent;border-radius:10px;padding:10px 12px;
  text-align:left;cursor:pointer;font-family:var(--font-text);font-weight:500;font-size:16px;
  letter-spacing:var(--ls-tight);color:var(--text-muted);
  transition:color var(--duration-fast) var(--ease-standard),
             background var(--duration-fast) var(--ease-standard)}
.w2p-lang-menu button:hover{color:var(--text-primary)}
.w2p-lang-menu button[aria-current="true"]{background:var(--w2p-white-05);color:var(--text-primary)}

/* ---------- Footer (figma 1:31) ---------- */
.w2p-footer{position:relative;width:100%;background:var(--surface-footer);
  display:flex;flex-direction:column;gap:16px;
  padding:clamp(40px,4.17vw,84px) var(--site-gutter,40px);
  justify-content:center;align-items:center}
.w2p-footer-grid{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;
  gap:clamp(28px,4.17vw,84px);align-items:flex-start;align-self:stretch}
.w2p-footer-brand{display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;flex-grow:1;min-width:240px;gap:24px;align-self:stretch}
.w2p-footer-brand>div{display:flex;flex-direction:column;gap:12px;align-items:flex-start;align-self:stretch}
.w2p-footer-brand img{height:25px;width:auto;display:block}
.w2p-footer-tagline{font-weight:400;font-size:14px;line-height:1.2;color:var(--text-muted)}
.w2p-footer-legal{font-weight:400;font-size:12px;line-height:1.2;color:var(--text-muted);
  white-space:nowrap;text-decoration:none}
.w2p-footer-col{position:relative;width:210px;flex-shrink:0;display:flex;flex-direction:column;
  gap:clamp(28px,4.17vw,60px);justify-content:center;align-items:flex-start}
.w2p-footer-col>div{display:flex;flex-direction:column;gap:16px;align-self:stretch}
.w2p-footer-col ul{display:flex;flex-direction:column;gap:16px;align-self:stretch;
  list-style:none;margin:0;padding:0}
.w2p-footer-h{font-weight:700;font-size:14px;line-height:1;letter-spacing:var(--ls-label);
  color:var(--text-primary);text-transform:uppercase}
.w2p-footer-col a{font-weight:400;font-size:14px;line-height:1.2;color:var(--text-muted);
  text-decoration:none;transition:color var(--duration-base) var(--ease-standard)}
.w2p-footer-col a:hover{color:var(--text-primary)}
.w2p-footer-social{position:relative;width:210px;display:flex;flex-direction:column;gap:16px;
  justify-content:center;align-items:flex-start;flex-shrink:0}
.w2p-footer-social a{display:flex;align-items:center;justify-content:center;
  width:33.333px;height:33.333px;border-radius:var(--radius-pill);overflow:hidden;
  transition:opacity var(--duration-base) var(--ease-standard)}
.w2p-footer-social a:hover{opacity:.8}