/* style.css */
@font-face {
  font-family: 'Bebas Neue Cyrillic';
  src: url('../fonts/BebasNeueCyrillic.woff2') format('woff2'),
      url('../fonts/BebasNeueCyrillic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --font-title: "Bebas Neue Cyrillic", sans-serif;
  --font-base: "Manrope", sans-serif;

  --accent: #f23e33;
  --text: #111111;
  --muted: #808080;
  --bg: #ffffff;
  --bg-soft: #e7e7e7;

  --black: #0b0b0b;

  --radius: 28px;

  --container-max: 1600px;
  --container-pad: 24px;

  --gap-1: 12px;
  --gap-2: 18px;
  --gap-3: 28px;
  --gap-4: 46px;

  --line: rgba(17,17,17,.12);
}

/* 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; /* заливка помедленнее */
}

/* 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;
  }

  .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;
  }
}


/* 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;
}

/* HERO */
.hero{
  min-height: 90vh;
  background: var(--black);
  color: #fff;
  display:flex;
  align-items: stretch;
}
.hero__wrap{
  width: 100%;
  padding-top: 86px;
  padding-bottom: 40px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 90vh;
}
.hero__topline{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  height: 40px;
}
.hero__tag{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
  font-weight: 400;
  margin: 0;
}
.hero__title{
  display:flex;
  align-items:flex-start;
  gap: 18px;
  margin-top: 30px;
}
.hero__word{
  font-family: var(--font-base);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-size: 180px;
  line-height: .85;
}
.hero__sup{
  display:flex;
  align-items:flex-start;
  margin-top: 8px;
}
.hero__num{
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: .95;
}

/* bottom hero */
.hero__bottom{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-top: 40px;
}
.hero__cta{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .92;
}
.hero__cta:hover{ opacity: 1; }
.hero__scroll{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero__arrow{
  font-size: 18px;
  opacity: .9;
}

/* ABOUT */
.about{ padding-top: 90px; }

.about__layout{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: var(--gap-4);
  align-items: start;
  margin-top: 10px;
}

.about__photo{
  position: sticky;
  top: 110px;
}
/* about photo image */
.about__photo-img{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;

  border-radius: 22px;
}

.about__photo-inner{
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  background: var(--bg-soft);
  border: 1px solid rgba(17,17,17,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
}
.about__photo-text{
  font-family: var(--font-title);
  text-transform: uppercase;
  color: rgba(17,17,17,.35);
  font-size: 42px;
  letter-spacing: .08em;
}

/* handwritten greeting on photo */
.about__photo-hello{
  position: absolute;
  top: 20px;
  left: 18px;

  font-family: "Pacifico", "Comic Sans MS", cursive;
  font-size: 22px;
  line-height: 1.1;

  color: rgba(17,17,17,.85);

  transform: rotate(-4deg);
  pointer-events: none;
}


.about__title{
  font-size: 72px;
}

.about__lead{
  margin-top: 16px;
  max-width: 82ch;
  color: var(--muted);
  font-size: 18px;
}

.about__points{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  font-weight: 600;
}
.about__points li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 0;
}
.about__points li::before{
  content:"";
  width: 10px; height: 10px;
  border-radius: 10px;
  background: var(--accent);
  margin-top: 6px;
  flex: 0 0 10px;
}

.about__note{
  margin-top: 18px;
  color: var(--text);
  max-width: 82ch;
}

.about__cta{ margin-top: 18px; }

/* SERVICES */
.services__list{
  display:grid;
  gap: 26px;
  margin-top: 10px;
}

.service-card{
  background: #fff;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 22px;
  padding: 34px;
}

.service-card{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-4);
  align-items: start;
}

.service-card__title{
  font-family: var(--font-title);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 58px;
  line-height: .95;
  margin: 0 0 14px;
  letter-spacing: .01em;
}

.service-card__desc{
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 18px;
  max-width: 62ch;
}

.subttl{
  font-family: var(--font-title);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 34px;
  margin: 0 0 10px;
  letter-spacing: .01em;
}

.bullets{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 17px;
}
.bullets li{ margin: 10px 0; }
.bullets--tight li{ margin: 8px 0; }

.result{
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.result p{
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  max-width: 72ch;
}

.result__text{
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 17px;
  max-width: 72ch;
}


.services__note{
  margin-top: 18px;
  max-width: calc(50% - var(--gap-4)/2);
  margin-left: auto;
}

/* CTA */
.cta{
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  padding: 48px;
  overflow: hidden;
}
.cta__grid{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 46px;
  align-items: start;
}
.cta__title{
  font-family: var(--font-title);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 74px;
  line-height: .92;
  margin: 0 0 26px;
}
.cta__links{
  margin-top: 22px;
  color: rgba(255,255,255,.7);
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 34px;
  line-height: 1.05;
}
.cta__links a{
  display:block;
  margin: 10px 0;
  color: rgba(255,255,255,.55);
}
.cta__links a:hover{ color:#fff; text-decoration: none;}

.form__hint{
  margin: 0 0 18px;
  color: rgba(255,255,255,.9);
  font-size: 16px;
  max-width: 78ch;
}

.field{
  display:flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
}
.label{
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 18px;
  color: rgba(255,255,255,.6);
}
.input{
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.35);
  width: 100%;
}
.textarea {
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.35);
  width: 100%;
}
.input::placeholder{ color: rgba(255,255,255,.6); }

.checks{
  margin-top: 14px;
  display:grid;
  gap: 12px;
}
.checkline{
  color: rgba(255,255,255,.9);
  font-size: 14px;
  line-height: 1.35;
}
.checkline label {
  display:flex; gap: 12px;
  align-items: center;
}
.checkline input{
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: #fff;
}
.checkline a{
  color: rgba(255,255,255,.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cta__actions{
  margin-top: 18px;
  display:flex; align-items:center; gap: 14px;
  flex-wrap: wrap;
}

.smallnote{ color: rgba(255,255,255,.75); font-size: 13px; }

/* 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){
  :root{ --container-pad: 20px; --container-max: 1400px; }
  .title-xl{ font-size: 72px; }
  .about__title{ font-size: 62px; }
  .about__layout{ grid-template-columns: 360px 1fr; }
  .service-card__title{ font-size: 50px; }
  .hero__word{ font-size: 140px; }
  .hero__num{ font-size: 36px; }
  .cta__title{ font-size: 62px; }
  .cta{ padding: 40px; }
  .cta__grid{ gap: 34px; }
}

@media (max-width: 980px){
  .about__layout{ grid-template-columns: 1fr; }
  .about__photo{ position: relative; top: auto; max-width: 420px; }
  .about__points{ grid-template-columns: 1fr; }
  .service-card{ grid-template-columns: 1fr; }
  .cta__grid{ grid-template-columns: 100%; }
  .hero__title{ flex-direction: column; gap: 14px; }
  .hero__sup{ margin-top: 0; }
  .services__note {max-width: 100%; padding: 0 34px;}
}

@media (max-width: 560px){
  .nav__links{ display: none; }
  :root{ --container-pad: 16px; --container-max: 1200px; }
  .section{ padding: 54px 0; }
  .title-xl{ font-size: 52px; }
  .about__title{ font-size: 48px; }
  .service-card{ padding: 24px; }
  .service-card__title{ font-size: 40px; }
  .cta__title{ font-size: 46px; }
  .cta__links{ font-size: 28px; }
  .cta{ padding: 26px; }
  .hero__word{ font-size: 92px; }
  .hero__num{ font-size: 28px; }
  .services__note {max-width: 100%; padding: 0 24px;}
}


/* ====== MOBILE 360px FIX ====== */
@media (max-width: 420px){

  /* контейнер */
  :root{
    --container-pad: 14px;
  }

  /* HERO */
  .hero__wrap{
    padding-top: 72px;
    padding-bottom: 28px;
  }

  .hero__title{
    gap: 8px;
    margin-top: 18px;
  }

  .hero__word{
    font-size: 64px;              /* было 92 */
    line-height: .95;
    letter-spacing: -0.02em;
    max-width: 100%;
    word-break: break-word;
  }

  .hero__num{
    font-size: 18px;              /* было 28 */
    letter-spacing: -0.01em;
  }

  .hero__bottom{
    padding-top: 24px;
  }

  .hero__cta{
    font-size: 11px;
    letter-spacing: .14em;
  }

  .hero__scroll{
    width: 38px;
    height: 38px;
  }

  /* BRAND */
  .brand__accent{
    font-size: 20px;
  }
  .brand__base{
    font-size: 12px;
    letter-spacing: .12em;
  }

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

  .about__title{
    font-size: 40px;
  }

  .service-card__title{
    font-size: 34px;
    line-height: .98;
  }

  .service__title{
    font-size: 48px;
  }

  .subttl{
    font-size: 26px;
  }

  /* TEXT */
  .about__lead,
  .service-card__desc,
  .result p,
  .form__hint{
    font-size: 15px;
  }

  /* LISTS */
  .about__points{
    gap: 8px;
  }

  .about__points li{
    padding: 6px 0;
  }

  .bullets{
    font-size: 15px;
  }

  /* CARDS */
  .service-card{
    padding: 20px;
  }

  /* CTA */
  .cta{
    padding: 22px;
  }

  .cta__title{
    font-size: 36px;
  }

  .cta__links{
    font-size: 22px;
  }

  /* BUTTON */
  .btn{
    /* padding: 14px 18px; */
    font-size: 14px;
  }

  .about__photo-hello{
    font-size: 18px;
    bottom: 16px;
    left: 25px;
  }

  .input {
    font-size: 16px;
  }
}



/* ===== Политика: стили для страницы/записи ===== */
.post-7.page.type-page {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 28px);
  line-height: 1.65;
  font-size: 16px;
  color: #121417;
  padding-top: 140px;
}

.post-7.page.type-page .nav {
  
}

/* Заголовки */
.post-7.page.type-page h1 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.post-7.page.type-page h2.wp-block-heading {
  margin: 26px 0 10px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Текст */
.post-7.page.type-page p {
  margin: 10px 0;
}

.post-7.page.type-page p + p {
  margin-top: 12px;
}

/* Ссылки (если появятся) */
.post-7.page.type-page a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.post-7.page.type-page a:hover {
  text-decoration-thickness: 2px;
}

/* Списки */
.post-7.page.type-page ul.wp-block-list {
  margin: 10px 0 14px;
  padding-left: 1.25em;
}

.post-7.page.type-page ul.wp-block-list li {
  margin: 6px 0;
}

.post-7.page.type-page ul.wp-block-list li strong {
  font-weight: 600;
}

/* Разделители */
.post-7.page.type-page hr.wp-block-separator {
  margin: 22px 0;
  border: 0;
  height: 1px;
  background: rgba(17, 24, 39, 0.12);
}

/* Чуть “карточный” вид для контента внутри <div> */
.post-7.page.type-page > div,
.post-7.page.type-page .entry-content,
.post-7.page.type-page > .wp-block-group,
.post-7.page.type-page > div:first-child {
  background: rgba(17, 24, 39, 0.03);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  padding: clamp(16px, 2.5vw, 22px);
}

/* Адаптив */
@media (max-width: 520px) {
  .post-7.page.type-page {
    font-size: 15px;
  }

  .post-7.page.type-page ul.wp-block-list {
    padding-left: 1.1em;
  }
}