/* The reference's compact introduction: equal columns, quiet controls and contacts. */
.hero {
  grid-column: span 6;
  min-height: 420px;
  padding: 24px;
  gap: 28px;
}
.hero-side {
  grid-column: span 6;
  min-height: 420px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
}
.hero-topline { align-items: flex-start; }
.hero .portrait.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.hero .hero-tools { gap: 8px; }
.hero-tools .lang-btn,
.hero-tools .icon-btn {
  position: relative;
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: var(--card2);
  font-size: 11px;
  font-weight: 600;
}
/* Retain a forgiving pointer target around each compact visible control. */
.hero-tools .lang-btn::after,
.hero-tools .icon-btn::after { content: ''; position: absolute; inset: -6px; }
.hero-tools .icon-btn svg { width: 17px; height: 17px; }
.hero .hero-main { width: 100%; margin-top: auto; }
.hero h1 {
  max-width: none;
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.04;
  text-wrap: balance;
}
/* The current phrase owns its natural height; the motion controller bridges changes. */
.hero h1 button { display: grid; width: 100%; border-radius: 4px; }
.hero h1 span { text-wrap: balance; }
.hero h1 #headlineText { grid-area: 1 / 1; align-self: start; }
/* The text controller sequences blur-out and blur-in, including interrupted clicks. */
.hero h1 #headlineText { opacity: 1; filter: blur(0px); transform: none; transition: none; }
.hero h1 button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.hero .intro {
  max-width: 43ch;
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.4;
  text-wrap: pretty;
}
.hero .hint { margin: 12px 0 0; font-size: 11px; line-height: 1.4; }
.hero .actions { gap: 6px; margin-top: 22px; }
.hero .btn {
  min-height: 37px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}
.hero-side .now-card { min-height: 0; padding: 24px; }
.now-card h2 {
  max-width: 30ch;
  margin-top: 6px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
.now-card .now-play { flex: none; gap: 4px; padding: 20px 0; }
.now-card .now-sticker { width: 44px; height: 44px; border-width: 2px; border-radius: 13px; }
.now-card .now-sticker .glyph { width: 22px; height: 22px; }
.now-card .now-lines { gap: 6px; }
.now-card .now-lines > div {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
}
.hero-side .top-right {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr;
  gap: 14px;
  min-height: 0;
}
.hero-side .top-mail,
.hero-side .top-cta {
  min-height: 150px;
  padding: 24px;
  gap: 24px;
  background: var(--card);
  color: var(--text);
}
.hero-side .top-mail .eyebrow,
.hero-side .top-cta .eyebrow { color: var(--muted); padding-right: 24px; }
.hero-side .top-mail strong,
.hero-side .top-cta strong {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.hero-side .top-contact-icon {
  width: 30px;
  height: 30px;
  top: 20px;
  right: 20px;
  background: var(--card2);
  color: var(--muted);
}
.hero-side .top-contact-icon .glyph { width: 16px; height: 16px; }

@media (max-width: 950px) {
  .hero { grid-column: span 12; min-height: 360px; }
  .hero-side {
    grid-column: span 12;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .hero h1 { max-width: 21ch; }
  .hero .intro { max-width: 54ch; }
  .hero-side .now-card { min-height: 240px; }
  .hero-side .top-right { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); }
  .hero-side .top-mail,
  .hero-side .top-cta { min-height: 113px; gap: 16px; }
}
@media (max-width: 640px) {
  .hero { min-height: 0; gap: 28px; }
  .hero h1 { max-width: none; font-size: clamp(30px, 8.7vw, 42px); }
  .hero .intro { font-size: 17px; }
  .hero .actions { margin-top: 20px; }
  .hero-side { display: flex; flex-direction: column; gap: 12px; }
  .hero-side .now-card { min-height: 0; flex: none; }
  .now-card h2 { font-size: 21px; }
  .hero-side .top-right { grid-template-columns: 1fr; grid-template-rows: repeat(2, auto); gap: 12px; }
  .hero-side .top-mail,
  .hero-side .top-cta { min-height: 118px; }
  .hero-side .top-mail strong,
  .hero-side .top-cta strong { font-size: 19px; }
}
@media (max-width: 520px) {
  .hero-side .top-contact-icon { top: 20px; right: 20px; }
}

/* Independent review: defeat inherited light-only chip ink and legacy hint font. */
.hero .hint { font-family: var(--site-font); }
.now-card .now-lines > div { color: var(--text); }

/* Prevent legacy six-column spans from creating implicit tracks on tablets. */
.hero-side > .now-card, .hero-side > .top-right { grid-column: auto; }

/* Three concrete reasons to get in touch, beside the main promise. */
.service-list { list-style: none; padding: 0; margin: 18px 0 0; }
.service-list > li { display: flex; align-items: flex-start; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.service-list > li:first-child { padding-top: 0; }
.service-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.service-list .service-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: var(--card2); color: var(--muted); }
.service-icon .glyph { width: 19px; height: 19px; }
.service-list h3 { font-size: 14px; font-weight: 600; line-height: 1.4; text-wrap: balance; }
.service-list p { margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
html[data-motion="off"] .hero h1 #headlineText { transition: none; opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .hero h1 #headlineText,
  html:not([data-motion="full"]) .hero h1 button { transition: none; opacity: 1; filter: none; transform: none; }
}

/* Shared contact feedback: the Telegram sweep and a small icon lift. */
body :is(.top-mail, .top-cta),
body #contact .socials a:is([href^="mailto:"], [href^="https://t.me/"]) {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
body :is(.top-mail, .top-cta)::before,
body #contact .socials a:is([href^="mailto:"], [href^="https://t.me/"])::before {
  content: '';
  position: absolute;
  inset: -80% -25%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgb(255 255 255 / .22) 49%, transparent 58%);
  transform: translateX(-125%) rotate(4deg);
  transition: transform 650ms ease-out;
  z-index: -1;
}
body .hero-side .top-contact-icon .glyph,
body #contact .socials a:is([href^="mailto:"], [href^="https://t.me/"]) .social-link-label .glyph {
  transition: transform 180ms var(--motion-ease);
  transform-origin: center;
}
@media (hover: hover) and (pointer: fine) {
  body :is(.top-mail, .top-cta):hover::before,
  body #contact .socials a:is([href^="mailto:"], [href^="https://t.me/"]):hover::before {
    transform: translateX(125%) rotate(4deg);
  }
  body .hero-side :is(.top-mail, .top-cta):hover .top-contact-icon .glyph,
  body #contact .socials a:is([href^="mailto:"], [href^="https://t.me/"]):hover .social-link-label .glyph {
    transform: translate(2px, -2px) rotate(8deg);
  }
}
html[data-motion="off"] body :is(.top-mail, .top-cta)::before,
html[data-motion="off"] body #contact .socials a:is([href^="mailto:"], [href^="https://t.me/"])::before { display: none; }
html[data-motion="off"] body .hero-side :is(.top-mail, .top-cta) .top-contact-icon .glyph,
html[data-motion="off"] body #contact .socials a:is([href^="mailto:"], [href^="https://t.me/"]) .social-link-label .glyph { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) body :is(.top-mail, .top-cta)::before,
  html:not([data-motion="full"]) body #contact .socials a:is([href^="mailto:"], [href^="https://t.me/"])::before { display: none; }
  html:not([data-motion="full"]) body .hero-side :is(.top-mail, .top-cta) .top-contact-icon .glyph,
  html:not([data-motion="full"]) body #contact .socials a:is([href^="mailto:"], [href^="https://t.me/"]) .social-link-label .glyph { transform: none; }
}