/* UL Studio redesign polish */
/* Не трогает админку, формы и серверную логику */

:root {
  --ul-bg: #fbfaf8;
  --ul-bg-2: #f5efe8;
  --ul-text: #171018;
  --ul-muted: #6f6672;
  --ul-brown: #b18a6d;
  --ul-brown-dark: #7b5642;
  --ul-line: rgba(126, 88, 65, .18);
  --ul-card: rgba(255, 255, 255, .82);
  --ul-shadow: 0 24px 70px rgba(70, 45, 30, .10);
  --ul-radius: 24px;
}

html {
  scroll-behavior: smooth;
}

body:not(.admin):not([class*="admin"]) {
  margin: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(177, 138, 109, .16), transparent 32rem),
    radial-gradient(circle at 12% 34%, rgba(177, 138, 109, .09), transparent 26rem),
    linear-gradient(180deg, #fffdfb 0%, #fbfaf8 45%, #ffffff 100%);
  color: var(--ul-text);
  text-rendering: optimizeLegibility;
}

body:not(.admin):not([class*="admin"]) * {
  box-sizing: border-box;
}

body:not(.admin):not([class*="admin"]) img,
body:not(.admin):not([class*="admin"]) video {
  max-width: 100%;
  height: auto;
}

body:not(.admin):not([class*="admin"]) h1,
body:not(.admin):not([class*="admin"]) h2,
body:not(.admin):not([class*="admin"]) h3 {
  color: var(--ul-text);
  letter-spacing: -0.045em;
  line-height: .98;
}

body:not(.admin):not([class*="admin"]) h1 {
  max-width: 660px;
  font-size: clamp(46px, 6.2vw, 86px) !important;
}

body:not(.admin):not([class*="admin"]) h2 {
  font-size: clamp(34px, 4.6vw, 62px) !important;
}

body:not(.admin):not([class*="admin"]) h3 {
  font-size: clamp(22px, 2vw, 32px);
}

body:not(.admin):not([class*="admin"]) p {
  color: var(--ul-muted);
  line-height: 1.62;
}

/* Шапка */
body:not(.admin):not([class*="admin"]) header,
body:not(.admin):not([class*="admin"]) .header,
body:not(.admin):not([class*="admin"]) .navbar,
body:not(.admin):not([class*="admin"]) nav {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body:not(.admin):not([class*="admin"]) header img,
body:not(.admin):not([class*="admin"]) .header img,
body:not(.admin):not([class*="admin"]) .navbar img {
  border-radius: 18px;
}

/* Нормальные отступы секций */
body:not(.admin):not([class*="admin"]) section {
  padding-top: clamp(62px, 7vw, 96px) !important;
  padding-bottom: clamp(62px, 7vw, 96px) !important;
}

/* Первый экран */
body:not(.admin):not([class*="admin"]) #lead,
body:not(.admin):not([class*="admin"]) .hero,
body:not(.admin):not([class*="admin"]) .lead,
body:not(.admin):not([class*="admin"]) [class*="hero"] {
  min-height: auto !important;
  padding-top: clamp(70px, 7vw, 115px) !important;
  padding-bottom: clamp(52px, 6vw, 82px) !important;
}

body:not(.admin):not([class*="admin"]) #lead {
  position: relative;
  overflow: hidden;
}

body:not(.admin):not([class*="admin"]) #lead::before {
  content: "";
  position: absolute;
  right: 7%;
  top: 18%;
  width: min(620px, 42vw);
  height: min(620px, 42vw);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(177, 138, 109, .18), transparent 66%);
  pointer-events: none;
  z-index: -1;
}

/* Бейджи */
body:not(.admin):not([class*="admin"]) .badge,
body:not(.admin):not([class*="admin"]) .tag,
body:not(.admin):not([class*="admin"]) [class*="badge"],
body:not(.admin):not([class*="admin"]) [class*="tag"] {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid var(--ul-line);
  background: rgba(255,255,255,.76);
  color: var(--ul-brown-dark);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Кнопки */
body:not(.admin):not([class*="admin"]) button,
body:not(.admin):not([class*="admin"]) .btn,
body:not(.admin):not([class*="admin"]) .button,
body:not(.admin):not([class*="admin"]) a[class*="btn"],
body:not(.admin):not([class*="admin"]) a[class*="button"] {
  border-radius: 16px !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

body:not(.admin):not([class*="admin"]) button:hover,
body:not(.admin):not([class*="admin"]) .btn:hover,
body:not(.admin):not([class*="admin"]) .button:hover,
body:not(.admin):not([class*="admin"]) a[class*="btn"]:hover,
body:not(.admin):not([class*="admin"]) a[class*="button"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(126, 88, 65, .18);
}

/* Карточки */
body:not(.admin):not([class*="admin"]) .card,
body:not(.admin):not([class*="admin"]) .service,
body:not(.admin):not([class*="admin"]) .services-card,
body:not(.admin):not([class*="admin"]) .portfolio-card,
body:not(.admin):not([class*="admin"]) .project-card,
body:not(.admin):not([class*="admin"]) .price-card,
body:not(.admin):not([class*="admin"]) .pricing-card,
body:not(.admin):not([class*="admin"]) .review,
body:not(.admin):not([class*="admin"]) .faq-item,
body:not(.admin):not([class*="admin"]) article {
  border: 1px solid var(--ul-line);
  border-radius: var(--ul-radius);
  background: var(--ul-card);
  box-shadow: var(--ul-shadow);
  overflow: hidden;
}

body:not(.admin):not([class*="admin"]) .card:hover,
body:not(.admin):not([class*="admin"]) .service:hover,
body:not(.admin):not([class*="admin"]) .services-card:hover,
body:not(.admin):not([class*="admin"]) .portfolio-card:hover,
body:not(.admin):not([class*="admin"]) .project-card:hover,
body:not(.admin):not([class*="admin"]) .price-card:hover,
body:not(.admin):not([class*="admin"]) .pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 86px rgba(70, 45, 30, .15);
}

/* Услуги: плотнее, как на скрине, но без кирпичной стены */
body:not(.admin):not([class*="admin"]) .services,
body:not(.admin):not([class*="admin"]) [id*="services"],
body:not(.admin):not([class*="admin"]) [class*="services"] {
  position: relative;
}

body:not(.admin):not([class*="admin"]) .services-grid,
body:not(.admin):not([class*="admin"]) .service-grid,
body:not(.admin):not([class*="admin"]) [class*="services-grid"],
body:not(.admin):not([class*="admin"]) [class*="service-grid"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

body:not(.admin):not([class*="admin"]) .service,
body:not(.admin):not([class*="admin"]) .services-card,
body:not(.admin):not([class*="admin"]) [class*="service-card"] {
  min-height: auto !important;
}

body:not(.admin):not([class*="admin"]) .service img,
body:not(.admin):not([class*="admin"]) .services-card img,
body:not(.admin):not([class*="admin"]) [class*="service-card"] img {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  border-radius: 18px;
}

/* Портфолио: мини-кейсы, но аккуратнее */
body:not(.admin):not([class*="admin"]) .portfolio-grid,
body:not(.admin):not([class*="admin"]) .projects-grid,
body:not(.admin):not([class*="admin"]) [class*="portfolio-grid"],
body:not(.admin):not([class*="admin"]) [class*="projects-grid"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

body:not(.admin):not([class*="admin"]) .portfolio-card,
body:not(.admin):not([class*="admin"]) .project-card,
body:not(.admin):not([class*="admin"]) [class*="portfolio-card"],
body:not(.admin):not([class*="admin"]) [class*="project-card"] {
  min-height: auto !important;
}

body:not(.admin):not([class*="admin"]) .portfolio-card img,
body:not(.admin):not([class*="admin"]) .project-card img,
body:not(.admin):not([class*="admin"]) [class*="portfolio-card"] img,
body:not(.admin):not([class*="admin"]) [class*="project-card"] img {
  width: 100%;
  max-height: 230px;
  object-fit: cover;
  border-radius: 0;
}

/* Формы */
body:not(.admin):not([class*="admin"]) input,
body:not(.admin):not([class*="admin"]) textarea,
body:not(.admin):not([class*="admin"]) select {
  border-radius: 16px !important;
  border: 1px solid var(--ul-line) !important;
  background: rgba(255, 255, 255, .9) !important;
  outline: none !important;
}

body:not(.admin):not([class*="admin"]) input:focus,
body:not(.admin):not([class*="admin"]) textarea:focus,
body:not(.admin):not([class*="admin"]) select:focus {
  border-color: rgba(177, 138, 109, .7) !important;
  box-shadow: 0 0 0 5px rgba(177, 138, 109, .13) !important;
}

/* Плавающие контакты справа */
body:not(.admin):not([class*="admin"]) a[href*="t.me"],
body:not(.admin):not([class*="admin"]) a[href*="vk.com"],
body:not(.admin):not([class*="admin"]) a[href^="mailto:"],
body:not(.admin):not([class*="admin"]) a[href^="tel:"] {
  text-decoration: none;
}

/* Чуть компактнее огромный mockup справа */
body:not(.admin):not([class*="admin"]) #lead img,
body:not(.admin):not([class*="admin"]) #lead video {
  max-height: 620px;
  object-fit: contain;
}

/* Мобильная версия */
@media (max-width: 1100px) {
  body:not(.admin):not([class*="admin"]) .services-grid,
  body:not(.admin):not([class*="admin"]) .service-grid,
  body:not(.admin):not([class*="admin"]) [class*="services-grid"],
  body:not(.admin):not([class*="admin"]) [class*="service-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.admin):not([class*="admin"]) .portfolio-grid,
  body:not(.admin):not([class*="admin"]) .projects-grid,
  body:not(.admin):not([class*="admin"]) [class*="portfolio-grid"],
  body:not(.admin):not([class*="admin"]) [class*="projects-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  body:not(.admin):not([class*="admin"]) section {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  body:not(.admin):not([class*="admin"]) #lead,
  body:not(.admin):not([class*="admin"]) .hero,
  body:not(.admin):not([class*="admin"]) .lead,
  body:not(.admin):not([class*="admin"]) [class*="hero"] {
    padding-top: 42px !important;
    padding-bottom: 44px !important;
  }

  body:not(.admin):not([class*="admin"]) h1 {
    font-size: clamp(38px, 11vw, 56px) !important;
    max-width: 100%;
  }

  body:not(.admin):not([class*="admin"]) h2 {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  body:not(.admin):not([class*="admin"]) .services-grid,
  body:not(.admin):not([class*="admin"]) .service-grid,
  body:not(.admin):not([class*="admin"]) [class*="services-grid"],
  body:not(.admin):not([class*="admin"]) [class*="service-grid"],
  body:not(.admin):not([class*="admin"]) .portfolio-grid,
  body:not(.admin):not([class*="admin"]) .projects-grid,
  body:not(.admin):not([class*="admin"]) [class*="portfolio-grid"],
  body:not(.admin):not([class*="admin"]) [class*="projects-grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body:not(.admin):not([class*="admin"]) .card,
  body:not(.admin):not([class*="admin"]) .service,
  body:not(.admin):not([class*="admin"]) .services-card,
  body:not(.admin):not([class*="admin"]) .portfolio-card,
  body:not(.admin):not([class*="admin"]) .project-card,
  body:not(.admin):not([class*="admin"]) .price-card,
  body:not(.admin):not([class*="admin"]) .pricing-card,
  body:not(.admin):not([class*="admin"]) .review,
  body:not(.admin):not([class*="admin"]) .faq-item,
  body:not(.admin):not([class*="admin"]) article {
    border-radius: 20px;
  }
}

/* === UL STUDIO FIX AFTER CODEX: делаем сайт живым, а не гигантским === */

/* Первый экран компактнее */
.hero {
  min-height: auto !important;
}

.hero-layout {
  min-height: calc(100vh - 82px) !important;
  padding: 34px 0 34px !important;
  grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1fr) !important;
  gap: 30px !important;
}

/* Заголовок меньше, чтобы он не ел экран */
.hero h1,
h1 {
  max-width: 620px !important;
  font-size: clamp(3rem, 4.4vw, 4.9rem) !important;
  line-height: 0.98 !important;
}

/* Подзаголовок ближе к заголовку */
.hero-text {
  max-width: 560px !important;
  margin-top: 20px !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

/* Кнопки не должны падать в подвал */
.hero-actions {
  margin-top: 26px !important;
}

/* Плашки преимуществ, если есть, делаем ближе и компактнее */
.hero-benefits {
  margin-top: 28px !important;
  gap: 10px !important;
}

/* Правый планшет меньше */
.hero-visual {
  min-height: 500px !important;
}

.tablet {
  width: clamp(430px, 42vw, 650px) !important;
  right: 0 !important;
}

.tablet-screen {
  --tablet-screen-height: clamp(300px, 24vw, 370px) !important;
}

/* Липкая плашка "листайте вниз" аккуратнее */
.scroll-cue {
  top: -12px !important;
  right: 24px !important;
  transform: scale(0.94) !important;
}

/* Секции чуть компактнее */
.section {
  padding: 64px 0 !important;
}

/* Карточки услуг легче */
.service-grid {
  gap: 16px !important;
}

.service-card {
  min-height: 300px !important;
  padding: 20px !important;
}

.service-preview {
  height: 104px !important;
  margin-bottom: 18px !important;
}

.service-card h3 {
  font-size: 1.12rem !important;
}

/* Портфолио не такое монументальное */
.portfolio-card {
  min-height: 500px !important;
}

.portfolio-media {
  min-height: 170px !important;
}

.portfolio-body {
  padding: 20px !important;
}

/* Пакеты не делаем башнями */
.package-card {
  min-height: 440px !important;
}

/* На ноутбуках делаем hero ещё спокойнее */
@media (max-width: 1280px) {
  .hero-layout {
    grid-template-columns: minmax(330px, 0.78fr) minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .hero h1,
  h1 {
    font-size: clamp(2.7rem, 4vw, 4.25rem) !important;
  }

  .tablet {
    width: clamp(390px, 43vw, 600px) !important;
  }

  .tablet-screen {
    --tablet-screen-height: clamp(285px, 23vw, 345px) !important;
  }
}

/* Планшеты */
@media (max-width: 1100px) {
  .hero-layout {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 42px 0 52px !important;
  }

  .hero-visual {
    min-height: 420px !important;
  }

  .tablet {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: min(100%, 640px) !important;
    margin: 20px auto 0 !important;
    transform: rotateZ(-1deg) !important;
  }

  .service-grid,
  .feature-grid,
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Телефон */
@media (max-width: 720px) {
  .header-inner {
    min-height: 72px !important;
  }

  .hero-layout {
    padding: 30px 0 42px !important;
  }

  .hero h1,
  h1 {
    font-size: clamp(2.45rem, 12vw, 3.6rem) !important;
    line-height: 1.02 !important;
  }

  .hero-text {
    font-size: 0.96rem !important;
  }

  .hero-actions {
    gap: 12px !important;
  }

  .button {
    width: 100% !important;
    min-height: 50px !important;
  }

  .hero-visual {
    min-height: 330px !important;
  }

  .tablet {
    width: 100% !important;
  }

  .tablet-screen {
    --tablet-screen-height: 280px !important;
  }

  .service-grid,
  .feature-grid,
  .portfolio-grid,
  .package-grid,
  .review-grid {
    grid-template-columns: 1fr !important;
  }

  .section {
    padding: 48px 0 !important;
  }
}