/* Компоненты: то, что повторилось дважды. Размеры текста – классами шкалы из base.css. */

/* --- кнопка --- */
.btn{position:relative;display:inline-flex;align-items:center;gap:var(--space-12);
  padding:var(--space-12) var(--space-24);border-radius:var(--radius-pill);
  background:var(--color-accent);color:var(--color-fg);overflow:hidden;isolation:isolate;
  transition:transform var(--dur-m) var(--ease-out),color var(--dur-m) var(--ease-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--color-fg);
  transform:translateX(-101%);transition:transform var(--dur-m) var(--ease-out)}
.btn:hover{transform:translateY(calc(var(--space-2) * -1));color:var(--color-ink)}
.btn:hover::before{transform:translateX(0)}
.btn:active{transform:translateY(0)}
.btn--l{padding:var(--space-16) var(--space-32)}
.btn--ghost{background:transparent;border:var(--hairline) solid var(--color-line)}
.btn--ghost::before{background:var(--color-fg)}
.btn--ink{background:var(--color-ink-on-sheet)}
.btn--ink::before{background:var(--color-accent)}
.btn--ink:hover{color:var(--color-fg)}

/* стрелка уезжает, на её место приходит вторая */
.btn__ico{position:relative;flex:0 0 auto;width:var(--icon);height:var(--icon);overflow:hidden}
.btn__ico svg{position:absolute;inset:0;width:var(--icon);height:var(--icon);
  transition:transform var(--dur-m) var(--ease-out)}
.btn__ico svg:nth-child(2){transform:translateX(-140%)}
.btn:hover .btn__ico svg:nth-child(1){transform:translateX(140%)}
.btn:hover .btn__ico svg:nth-child(2){transform:translateX(0)}

/* --- шапка --- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--head-h);
  display:flex;align-items:center;gap:var(--space-48);padding:0 var(--page-pad);
  transition:background var(--dur-m) var(--ease-out),backdrop-filter var(--dur-m) var(--ease-out)}
/* под шапку подъезжает контент: на прокрутке она получает подложку, иначе каша */
.site-head.is-scrolled{background:var(--color-head-dark);
  backdrop-filter:blur(var(--blur-head));-webkit-backdrop-filter:blur(var(--blur-head))}
.site-head.is-scrolled.is-on-sheet{background:var(--color-head-sheet)}
.site-head__logo img{height:var(--logo-h);width:auto}
.site-head__logo .is-on-sheet{display:none}
.site-head.is-on-sheet .is-on-dark{display:none}
.site-head.is-on-sheet .is-on-sheet{display:block}
.site-nav{display:flex;align-items:center;gap:var(--space-32);margin-left:auto}
.site-nav__link{position:relative;color:var(--color-fg);padding:var(--space-8) 0}
.site-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:var(--hairline);background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-m) var(--ease-out)}
.site-nav__link:hover::after{transform:scaleX(1)}
.site-head.is-on-sheet .site-nav__link{color:var(--color-ink-on-sheet)}

/* --- бургер и полноэкранное меню --- */
.burger{display:none;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);margin-left:auto;color:var(--color-fg)}
.burger svg{width:var(--space-24);height:auto}
.site-head.is-on-sheet .burger{color:var(--color-ink-on-sheet)}
.sheet-menu{position:fixed;inset:var(--head-h) 0 0 0;z-index:40;background:var(--color-ink-deep);
  display:flex;flex-direction:column;gap:var(--space-16);padding:var(--space-48) var(--page-pad);
  opacity:0;visibility:hidden;transform:translateY(calc(var(--space-12) * -1));
  transition:opacity var(--dur-s) var(--ease-out),transform var(--dur-s) var(--ease-out),visibility var(--dur-s)}
.sheet-menu a{color:var(--color-fg)}
body.is-menu-open .sheet-menu{opacity:1;visibility:visible;transform:none}

/* --- подпись-доказательство: жирная строка и дата под ней --- */
.proof{display:flex;flex-direction:column;gap:var(--space-2);
  padding-left:var(--space-24);border-left:var(--hairline) solid var(--color-line)}
.proof b{font-weight:var(--weight-bold);color:var(--color-fg)}
.on-sheet .proof{border-left-color:var(--color-line-on-sheet)}
.on-sheet .proof b{color:var(--color-ink-on-sheet)}

/* --- большое число с подписью --- */
.figure{display:flex;flex-direction:column;gap:var(--space-8)}
.figure--alarm .display-num{color:var(--color-alarm-soft)}
.on-sheet .figure--alarm .display-num{color:var(--color-alarm)}

/* --- строка списка с линией сверху --- */
.rule-item{display:flex;flex-direction:column;gap:var(--space-12);
  padding-top:var(--space-20);border-top:var(--hairline) solid var(--color-line)}
.on-sheet .rule-item{border-top-color:var(--color-line-on-sheet)}

/* --- сетка 12 колонок --- */
.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--gutter);width:100%}

@media (max-width:768px){
  .site-nav{display:none}
  .burger{display:flex}
  .grid{grid-template-columns:repeat(4,1fr);gap:var(--space-16)}
}

/* =======================================================================
   Навигация с подменю – структура повторяет действующий arivintx.com:
   Medical need / Science & Technology / About Us / Company.
   ======================================================================= */
.site-nav__group{position:relative;display:flex;align-items:center}
.site-nav__top{display:inline-flex;align-items:center;gap:var(--space-8);
  color:var(--color-fg);padding:var(--space-8) 0}
.site-head.is-on-sheet .site-nav__top{color:var(--color-ink-on-sheet)}
.site-nav__top svg{width:var(--space-12);height:var(--space-12);
  transition:transform var(--dur-s) var(--ease-out)}
.site-nav__group:hover .site-nav__top svg,
.site-nav__group:focus-within .site-nav__top svg{transform:rotate(180deg)}

.site-nav__drop{position:absolute;top:100%;left:calc(var(--space-20) * -1);
  width:var(--menu-w);display:flex;flex-direction:column;
  padding:var(--space-12) 0;background:var(--color-ink-deep);
  border:var(--hairline) solid var(--color-line-soft);border-radius:var(--radius-s);
  opacity:0;visibility:hidden;transform:translateY(calc(var(--space-8) * -1));
  transition:opacity var(--dur-s) var(--ease-out),transform var(--dur-s) var(--ease-out),visibility var(--dur-s)}
.site-head.is-on-sheet .site-nav__drop{background:var(--color-sheet-pure);
  border-color:var(--color-line-on-sheet)}
.site-nav__group:hover .site-nav__drop,
.site-nav__group:focus-within .site-nav__drop{opacity:1;visibility:visible;transform:translateY(0)}
.site-nav__drop a{padding:var(--space-8) var(--space-20);color:var(--color-fg-muted);
  transition:color var(--dur-s) var(--ease-out),background var(--dur-s) var(--ease-out)}
.site-nav__drop a:hover{color:var(--color-fg);background:var(--color-hover-dark)}
.site-head.is-on-sheet .site-nav__drop a{color:var(--color-ink-on-sheet-muted)}
.site-head.is-on-sheet .site-nav__drop a:hover{color:var(--color-ink-on-sheet);
  background:var(--color-sheet)}

/* мобильное меню: группа и её пункты */
.sheet-menu__group{display:flex;flex-direction:column;gap:var(--space-8)}
.sheet-menu__sub{display:flex;flex-direction:column;gap:var(--space-4);
  padding-left:var(--space-16)}
.sheet-menu__sub a{color:var(--color-fg-muted)}

/* =======================================================================
   Окно с информацией (команда)
   ======================================================================= */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;
  align-items:center;justify-content:center;padding:var(--page-pad);
  opacity:0;visibility:hidden;transition:opacity var(--dur-m) var(--ease-out),visibility var(--dur-m)}
.modal.is-open{opacity:1;visibility:visible}
.modal__veil{position:absolute;inset:0;background:var(--veil-82);backdrop-filter:blur(var(--blur-veil))}
.modal__card{position:relative;z-index:2;width:100%;max-width:var(--modal-w);
  max-height:100%;overflow-y:auto;display:grid;grid-template-columns:1fr 2fr;
  gap:var(--space-40);padding:var(--space-40);background:var(--color-sheet-pure);
  border-radius:var(--radius-s);transform:translateY(var(--space-24)) scale(.98);
  transition:transform var(--dur-m) var(--ease-out)}
.modal.is-open .modal__card{transform:none}
.modal__shot{width:100%;aspect-ratio:1;overflow:hidden;background:var(--color-sheet-deep)}
.modal__shot img{width:100%;height:100%;object-fit:cover}
.modal__body{display:flex;flex-direction:column;gap:var(--space-16)}
.modal__close{position:absolute;top:var(--space-16);right:var(--space-16);z-index:3;
  width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);color:var(--color-ink-on-sheet);
  transition:background var(--dur-s) var(--ease-out)}
.modal__close:hover{background:var(--color-sheet)}
.modal__close svg{width:var(--space-20);height:var(--space-20)}

/* =======================================================================
   Форма
   ======================================================================= */
.field{display:flex;flex-direction:column;gap:var(--space-8)}
.field input,.field textarea{width:100%;padding:var(--space-12) var(--space-16);
  color:var(--color-fg);background:var(--color-ink-soft);
  border:var(--hairline) solid var(--color-line);border-radius:var(--radius-s);
  transition:border-color var(--dur-s) var(--ease-out)}
.on-sheet .field input,.on-sheet .field textarea{color:var(--color-ink-on-sheet);
  background:var(--color-sheet-pure);border-color:var(--color-line-on-sheet)}
.field input{height:var(--field-h)}
.field textarea{min-height:calc(var(--field-h) * 2);resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--color-accent)}
.field input::placeholder,.field textarea::placeholder{color:var(--color-fg-dim)}
.on-sheet .field input::placeholder,.on-sheet .field textarea::placeholder{color:var(--color-ink-on-sheet-dim)}

.check{display:flex;align-items:flex-start;gap:var(--space-12);cursor:pointer}
.check input{flex:0 0 auto;width:var(--space-20);height:var(--space-20);
  margin-top:var(--space-2);accent-color:var(--color-accent)}

@media (max-width:768px){
  .site-nav__group{display:none}
  .modal{padding:var(--space-16)}
  .modal__card{grid-template-columns:1fr;gap:var(--space-20);padding:var(--space-24)}
  .modal__shot{max-width:var(--shape)}
}