/* znaika-tih.ru — buttons + details polish v2
   Keep concept (sunny + telegram blue + warm). Make details shine. */

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 17px !important;
  line-height: 1.6 !important;
}

main, article, section {
  font-size: 17px;
}

main p {
  font-size: 17px !important;
  line-height: 1.65 !important;
}

main li {
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-size: clamp(36px, 5.5vw, 60px) !important;
}

h2 {
  font-weight: 600;
  letter-spacing: -0.018em;
  font-size: clamp(26px, 3.5vw, 38px) !important;
}

h3 {
  font-size: clamp(19px, 2vw, 22px) !important;
}

/* Eyebrow / kicker small text — bump from ~12-13px to 14px */
.eyebrow,
[class*="eyebrow"],
[class*="kicker"],
[class*="label"] {
  font-size: 14px !important;
  letter-spacing: 0.08em;
}

/* Hero description */
.hero-description,
[class*="hero"] p:not([class*="contact"]),
[class*="lead"] {
  font-size: 19px !important;
  line-height: 1.6 !important;
}

footer, [class*="footer"] {
  font-size: 15px;
}

::selection {
  background: rgba(245, 158, 11, 0.25);
  color: inherit;
}

/* =========================================================
   BUTTONS — primary CTA
   ========================================================= */
a[class*="button"][href*="tel:"],
a[class*="button"][class*="sun"],
a[class*="button"][class*="call"],
.button--sun, .button--call {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease,
              filter 0.25s ease !important;
  will-change: transform;
  border-radius: 999px !important;
}

a[class*="button"][href*="tel:"]:hover,
a[class*="button"][class*="sun"]:hover,
a[class*="button"][class*="call"]:hover,
.button--sun:hover, .button--call:hover {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.05) saturate(1.08);
}

a[class*="button"][href*="tel:"]:active,
a[class*="button"][class*="sun"]:active,
a[class*="button"][class*="call"]:active,
.button--sun:active, .button--call:active {
  transform: translateY(0) scale(0.98) !important;
  filter: brightness(0.96);
  transition-duration: 0.08s !important;
}

/* =========================================================
   DIRECTION CARDS — soft hover lift
   ========================================================= */
.direction-card,
[class*="direction-card"] {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease !important;
  will-change: transform;
}

.direction-card:hover,
[class*="direction-card"]:hover {
  transform: translateY(-6px) rotate(-0.3deg);
}

/* =========================================================
   TEXT LINKS — Telegram / Instagram
   ========================================================= */
a[href*="t.me"],
a[href*="instagram.com"],
a[href*="telegram"],
.text-link {
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  border-radius: 6px;
}

a[href*="t.me"]:hover,
a[href*="instagram.com"]:hover,
a[href*="telegram"]:hover,
.text-link:hover {
  opacity: 0.75;
  transform: translateX(2px);
}

/* =========================================================
   ALL BUTTONS — modern feel
   ========================================================= */
main a[class*="button"]:not(.button--sun):not(.button--call),
main button:not([class*="menu"]):not([class*="burger"]) {
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease !important;
}

main a[class*="button"]:active,
main button:not([class*="menu"]):not([class*="burger"]):active {
  transform: scale(0.98);
}

/* =========================================================
   INPUTS
   ========================================================= */
input, textarea, select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  border-radius: 14px !important;
}

input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15) !important;
}

/* =========================================================
   FOCUS
   ========================================================= */
*:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 3px;
  border-radius: 8px;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.25);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.5);
  background-clip: padding-box;
}

/* =========================================================
   SMOOTH SCROLL
   ========================================================= */
html {
  scroll-behavior: smooth;
}

/* =========================================================
   MASCOT CARD — gentle pulse
   ========================================================= */
.hero-mascot-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-mascot-card:hover {
  transform: rotate(-2deg) scale(1.03);
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 768px) {
  main a[class*="button"],
  main button:not([class*="menu"]):not([class*="burger"]) {
    min-height: 48px !important;
  }
  body { font-size: 17px !important; }
  main p { font-size: 17px !important; }
  h1 { font-size: clamp(30px, 9vw, 44px) !important; }
  h2 { font-size: clamp(24px, 6vw, 32px) !important; }
  .hero-description { font-size: 18px !important; }
  a[href^="tel:"] {
    padding: 8px 4px !important;
    display: inline-block;
  }
}

/* =========================================================
   PRINT
   ========================================================= */
@media print {
  [class*="hero-mascot"], [class*="FloatingCTA"], nav { display: none !important; }
  body { font-size: 12pt; color: #000; background: white; }
}