/* utils.css
 * Global base styles and reusable site-wide components/utilities.
 * Requires vars.css.
 */

/* base */
*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* a{ color: inherit; text-decoration: none; } */

.container{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* helpers */
.section{ padding: 70px 0; }
.section--soft{ background: var(--bg-soft); }

.kicker{
  display:flex; align-items:center; gap: 10px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .02em;
  margin-bottom: 18px;
}
.kicker::before{
  content:"";
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 999px;
  flex: 0 0 9px;
}

.title-xl{
  font-family: var(--font-title);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 86px;
  line-height: .92;
  letter-spacing: .01em;
  margin: 0;
}

.muted{ color: var(--muted); }


/* BUTTONS: base (no hover assumptions) */
.btn{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 16px 56px 16px 22px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.16);
  background: #fff;

  font-weight: 600;
  user-select: none;

  transition: color .22s ease;
}

/* fill from dot position */
.btn::before{
  content:"";
  position: absolute;
  right: 22px;
  top: 50%;

  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);

  transform: translateY(-50%) scale(0);
  transform-origin: center;

  z-index: -1;
  transition: transform .55s ease; /* заливка помедленнее */
}

a.btn {
  text-decoration: none;
}
/* dot (always on top) */
.btn__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);

  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);

  z-index: 2;
  transition: background-color .18s ease;
  transition-delay: 0s;
}

/* focus (можно оставить для клавиатуры на десктопе/ноуте) */
.btn:focus-visible{
  color: #fff;
}
.btn:focus-visible::before{
  transform: translateY(-50%) scale(90);
}
.btn:focus-visible .btn__dot{
  background: #fff;
  transition-delay: .32s;
}

/* HOVER ONLY on devices that actually support hover */
@media (hover: hover) and (pointer: fine){
  .btn:hover{
    color: #fff;
    /* transform: none; */
    box-shadow: none;
  }
  a.btn:hover {
    text-decoration: none;
  }

  .btn:hover::before{
    transform: translateY(-50%) scale(90);
  }

  /* dot turns white near the end of fill */
  .btn:hover .btn__dot{
    background: #fff;
    transition-delay: .32s;
  }

  /* when leaving hover: no delay */
  .btn:not(:hover) .btn__dot{
    transition-delay: 0s;
  }
}

/* MOBILE: explicitly neutralize hover “stuck” states on touch */
@media (hover: none) and (pointer: coarse){
  .btn:focus-visible{
    /* на мобильных обычно не нужно */
    color: inherit;
  }
  .btn:focus-visible::before{
    transform: translateY(-50%) scale(0);
  }
  .btn:focus-visible .btn__dot{
    background: var(--accent);
    transition-delay: 0s;
  }
}

/* CTA-версия */
.btn.btn--cta{
  border: 1px solid #fff;
  background: #fff;
  color: #111;
}

/* hover для CTA тоже только на hover-устройствах */
@media (hover: hover) and (pointer: fine){
  .btn.btn--cta:hover{
    color: #fff;
    border: 1px solid #fff;
  }
}

/* Clean button */

.btn.btn--clean {
  justify-content: center;
  gap: 0;

  padding: 0;

  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;

  font-weight: inherit;

  overflow: visible;
  isolation: auto;

  box-shadow: none;

  transition:
    color .2s ease,
    opacity .2s ease;
}

.btn.btn--clean::before {
  display: none;
}

.btn.btn--clean:hover,
.btn.btn--clean:focus-visible {
  color: inherit;
  background: transparent;
  border-color: transparent;

  /* transform: none; */
  box-shadow: none;
}

a.btn.btn--clean {
  text-decoration: none;
}


/* Icons */

.icon {
  --icon: none;
  --size: var(--icon-size);
  --gap: var(--icon-gap);

  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  color: inherit;
}

.icon::before,
.icon::after {
  display: none;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;

  background-color: currentColor;

  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  transition:
    background-color var(--transition),
    transform var(--transition);
}

.icon::after {
  content: "";
  display: block;
}

.icon--pre::before {
  content: "";
  display: block;
}

.icon--pre::after {
  display: none;
}

.icon--only {
  gap: 0;
  line-height: 0;
}

.icon--sm {
  --size: 12px;
}

.icon--md {
  --size: 20px;
}

.icon--lg {
  --size: 24px;
}

.icon--arrow-right {
  --icon: var(--arrow-right-icon);
}

.icon--arrow-top-right {
  --icon: var(--arrow-top-right-icon);
}

.icon--minus {
  --icon: var(--minus-icon);
}

.icon--plus {
  --icon: var(--plus-icon);
}

.icon--close {
  --icon: var(--close-icon);
}

.icon--chevron-left {
  --icon: var(--chevron-left-icon);
}

.icon--chevron-right {
  --icon: var(--chevron-right-icon);
}

.icon--telegram {
  --icon: var(--telegram-icon);
}

.icon--whatsapp {
  --icon: var(--whatsapp-icon);
}

.icon--email {
  --icon: var(--email-icon);
}


.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(100%) !important;
}

.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* header */
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(11,11,11,.35);
  backdrop-filter: blur(10px);
}
.nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 18px 0;
  color: rgba(255,255,255,.95);
  font-size: 14px;
  letter-spacing: .02em;
}

/* brand */
.brand{
  display:flex;
  align-items:center;
}
.brand:hover {
  text-decoration: none;
}
.brand__text{
  display: inline-flex;
  align-items: flex-start;   /* ключевой момент */
  gap: 6px;
  text-transform: uppercase;
}

.brand__accent{
  font-family: var(--font-title);
  font-size: 24px;
  letter-spacing: .02em;
  line-height: 1;
}

.brand__base{
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .9;
  line-height: 1;
  position: relative;
  top: 2px;
}

.nav__links{
  display:flex;
  align-items:center;
  gap: 18px;
  color: rgba(255,255,255,.75);
  font-weight: 600;
}
.nav__links a{
  padding: 8px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
}
.nav__links a:hover{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
}

.nav__menu{
  font-weight: 800;
  text-transform: uppercase;
  opacity: .95;
  letter-spacing: .10em;
  font-size: 12px;
}

/* footer */
.footer{
  padding: 26px 0 46px;
  color: var(--muted);
  font-size: 14px;
}
.footer__grid{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
  border-top: 1px solid rgba(17,17,17,.10);
  padding-top: 18px;
  flex-wrap: wrap;
}

/* responsive */
@media (max-width: 1200px) {
  .title-xl {
    font-size: 72px;
  }
}

@media (max-width: 560px) {
  .nav__links {
    display: none;
  }

  .section {
    padding: 54px 0;
  }

  .title-xl {
    font-size: 52px;
  }
}

@media (max-width: 420px) {
  .brand__accent {
    font-size: 20px;
  }

  .brand__base {
    font-size: 12px;
    letter-spacing: .12em;
  }

  .title-xl {
    font-size: 42px;
    line-height: .95;
  }

  .btn {
    font-size: 14px;
  }
}



/* =========================================
   Custom scrollbar
========================================= */

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color:
    var(--scrollbar-thumb, rgb(0 0 0 / 40%))
    var(--scrollbar-track, transparent);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background:
    var(--scrollbar-track, transparent);

  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background:
    var(--scrollbar-thumb, rgb(0 0 0 / 40%));

  border-radius: 4px;

  transition:
    background-color var(--transition);
}

.custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background:
    var(--scrollbar-thumb-hover, rgb(0 0 0 / 60%));
}

.custom-scrollbar::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.grecaptcha-badge {
  visibility: hidden !important;
}