/* One motion treatment for every enabled control, including dynamic quiz buttons.
   The list covers every clickable surface on every page: menu, footer, quiz
   options, FAQ summaries and contact links, not only the hero buttons. */
:root :is(button, [role="button"], input[type="submit"], .btn, .service-link, .nav-links a, .footer-col a, .footer-brand, summary, label.quiz-option, label.quiz-choice, a[href^="mailto:"], a[href^="tel:"], .msg-widget-link, .final-channel, .channel-card):not(:disabled):not([aria-disabled="true"]) {
  transition: translate .3s cubic-bezier(.2,.8,.2,1), filter .22s ease, box-shadow .22s ease, scale .18s ease, background-color .22s ease, color .22s ease;
}
@media (hover: hover) and (pointer: fine) {
  /* Both variable names are honoured: the reference stylesheets move .btn and
     .overview-card with --pull-*, this layer uses --hover-*. */
  :root :is(button, [role="button"], input[type="submit"], .btn, .service-link, .nav-links a, .footer-col a, .footer-brand, summary, label.quiz-option, label.quiz-choice, a[href^="mailto:"], a[href^="tel:"], .msg-widget-link, .final-channel, .channel-card):not(:disabled):not([aria-disabled="true"]) {
    translate: var(--hover-x, var(--pull-x, 0px)) var(--hover-y, var(--pull-y, 0px));
  }
  :root :is(button, [role="button"], input[type="submit"], .btn, .service-link, .nav-links a, .footer-col a, .footer-brand, summary, label.quiz-option, label.quiz-choice, a[href^="mailto:"], a[href^="tel:"], .msg-widget-link, .final-channel, .channel-card):not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(1.1) saturate(1.04);
    box-shadow: inset 0 1px 0 #f0faff24, 0 6px 24px #6bd5ff12;
  }
  :root :is(.btn-primary, .nav-cta, .msg-widget-cta):not(:disabled):hover {
    box-shadow: inset 0 1px 0 #fff8d77a, 0 12px 32px #ffc24b38;
  }
}
:root :is(button, [role="button"], input[type="submit"], .btn, .service-link, .nav-links a, .footer-col a, .footer-brand, summary, label.quiz-option, label.quiz-choice, a[href^="mailto:"], a[href^="tel:"], .msg-widget-link, .final-channel, .channel-card):not(:disabled):not([aria-disabled="true"]):active { scale: .97; }
:root :is(button, [role="button"], input[type="submit"], .btn, .service-link, .nav-links a, .footer-col a, .footer-brand, summary, label.quiz-option, label.quiz-choice, a[href^="mailto:"], a[href^="tel:"], .msg-widget-link, .final-channel, .channel-card):focus-visible { outline: 2px solid #74d5f0; outline-offset: 4px; }

/* The refracting pane and its rim share a softly rounded triangular silhouette. */
/* inset/margin/padding/overflow neutralise the UA [popover] defaults: the script
   promotes this to a manual popover, and `inset: 0` + `margin: auto` would
   otherwise centre the box in the viewport and offset every translate3d. */
:root .lens-cursor {
  position: fixed; inset: auto; top: 0; left: 0;
  margin: 0; padding: 0; overflow: visible;
  width: 50px; height: 50px;
  pointer-events: none; z-index: 1000;
  border: 0; border-radius: 0;
  background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  opacity: 0; transition: opacity .18s;
  will-change: transform, width, height;
}
:root .lens-cursor::before {
  content: ''; position: absolute; inset: 0;
  clip-path: url("#cursor-shape");
  background:
    radial-gradient(ellipse 46% 30% at 27% 17%, rgba(255,255,255,.62), rgba(221,248,255,.23) 35%, transparent 76%),
    linear-gradient(145deg, rgba(239,251,255,.38), rgba(158,223,250,.12) 52%, rgba(177,229,245,.30));
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.42), inset -1px -1px 0 rgba(73,200,242,.20);
  backdrop-filter: blur(2px) saturate(170%) brightness(1.12);
  -webkit-backdrop-filter: blur(2px) saturate(170%) brightness(1.12);
}
:root .lens-cursor::after {
  content: ''; position: absolute; inset: 2px 3px 5px 4px;
  clip-path: url("#cursor-shape");
  background: linear-gradient(142deg, rgba(255,255,255,.42), rgba(255,255,255,0) 42%);
  opacity: .72; pointer-events: none;
}
.lens-cursor > svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 5px #0003); }
:root .lens-cursor.visible { opacity: .9; }
:root .lens-cursor.active { opacity: 1; }
.lens-cursor.active > svg { visibility: hidden; }
.lens-cursor.active::after { display: none; }
/* Hovering a control drops the arrow silhouette and wraps the control in a
   clear liquid-glass shell. Highlights keep the glass depth without blurring
   the button text or background beneath it. */
:root .lens-cursor.active::before {
  clip-path: none;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .20);
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255, 255, 255, .26),
      rgba(255, 255, 255, .06) 30%,
      rgba(73, 200, 242, .05) 55%,
      transparent 72%);
  box-shadow:
    inset 1px 0 0 rgba(73, 200, 242, .18),
    inset -1px 0 0 rgba(255, 216, 74, .14),
    0 12px 30px rgba(0, 0, 0, .18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Match the website-development page's reveal: content rises softly while a
   six-pixel blur clears. Page scripts already add the state classes as each
   block enters the viewport; this last-loaded layer keeps every route in sync. */
:root :is(.scroll-fade, .ig-reveal) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(6px);
  transition:
    opacity .75s cubic-bezier(.2, .75, .25, 1) var(--reveal-delay, 0ms),
    transform .75s cubic-bezier(.2, .75, .25, 1) var(--reveal-delay, 0ms),
    filter .75s ease var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
:root :is(.scroll-fade.is-visible, .ig-reveal.is-visible) {
  opacity: 1;
  transform: none;
  filter: none;
}
:root .ig-reveal[data-delay="1"] { --reveal-delay: 80ms; }
:root .ig-reveal[data-delay="2"] { --reveal-delay: 160ms; }
:root .ig-reveal[data-delay="3"] { --reveal-delay: 240ms; }

/* Shared senior section translations switch with the global document language. */
.senior-lang { display: none; }
html[lang^="ru"] .senior-lang.ru,
html[lang^="uk"] .senior-lang.uk,
html[lang^="en"] .senior-lang.en { display: contents; }

/* Fixed return control shared by both site layouts. Doubling the class keeps
   these transitions above the generic button motion rule earlier in the file. */
:root button.back-to-top.back-to-top {
  position: fixed;
  left: clamp(16px, 2.2vw, 34px);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(210, 240, 255, .25);
  border-radius: 50%;
  color: #dcf6ff;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .24), transparent 38%),
    linear-gradient(145deg, rgba(184, 232, 250, .13), rgba(8, 28, 43, .07));
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .30),
    inset -1px -1px 0 rgba(76, 201, 239, .16),
    0 12px 32px rgba(0, 0, 0, .22);
  backdrop-filter: blur(9px) saturate(145%);
  -webkit-backdrop-filter: blur(9px) saturate(145%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 14px, 0) scale(.88);
  transition:
    opacity .24s ease,
    transform .34s cubic-bezier(.2, .8, .2, 1),
    visibility 0s linear .34s,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}
:root button.back-to-top.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
:root button.back-to-top.back-to-top svg {
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  :root button.back-to-top.back-to-top:hover {
    color: #fff;
    border-color: rgba(222, 247, 255, .48);
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .30), transparent 40%),
      linear-gradient(145deg, rgba(184, 232, 250, .17), rgba(8, 28, 43, .09));
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, .38),
      inset -1px -1px 0 rgba(76, 201, 239, .22),
      0 14px 36px rgba(38, 176, 220, .14);
  }
}

/* Floating messenger widget, mirrored to the opposite corner from back-to-top.
   One glass shell morphs from a circular toggle into a rectangular bar; the
   toggle is the last flex child so it stays anchored to the right edge while the body's
   max-width animates open. Hover drives the desktop reveal, a JS-toggled
   .is-open class covers touch, keyboard uses :focus-within. */
:root .msg-widget {
  position: fixed;
  right: clamp(16px, 2.2vw, 34px);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 91;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 16px, 0);
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}
:root .msg-widget.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition: opacity .24s ease, transform .24s ease;
}
:root .msg-widget-toggle {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(210, 240, 255, .25);
  border-radius: 50%;
  color: #dcf6ff;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .24), transparent 38%),
    linear-gradient(145deg, rgba(184, 232, 250, .13), rgba(8, 28, 43, .07));
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .30),
    inset -1px -1px 0 rgba(76, 201, 239, .16),
    0 12px 32px rgba(0, 0, 0, .22);
  backdrop-filter: blur(9px) saturate(145%);
  -webkit-backdrop-filter: blur(9px) saturate(145%);
  transition: border-color .22s ease, color .22s ease, box-shadow .22s ease;
}
:root .msg-widget-toggle svg { width: 24px; height: 24px; fill: currentColor; }
:root .msg-widget-body {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: -28px;
  padding: 9px 18px 9px 9px;
  max-width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid rgba(210, 240, 255, .25);
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .18), transparent 42%),
    linear-gradient(145deg, rgba(184, 232, 250, .12), rgba(8, 28, 43, .34));
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .22),
    inset -1px -1px 0 rgba(76, 201, 239, .14),
    0 16px 36px rgba(0, 0, 0, .30);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition:
    max-width .4s cubic-bezier(.2, .8, .2, 1),
    margin-right .4s cubic-bezier(.2, .8, .2, 1),
    opacity .22s ease,
    visibility 0s linear .32s;
}
:root .msg-widget.is-open .msg-widget-body,
:root .msg-widget:focus-within .msg-widget-body {
  max-width: min(760px, calc(100vw - 120px));
  opacity: 1;
  visibility: visible;
  margin-right: 14px;
  transition:
    max-width .4s cubic-bezier(.2, .8, .2, 1),
    margin-right .4s cubic-bezier(.2, .8, .2, 1),
    opacity .3s ease .05s,
    visibility 0s linear 0s;
}
@media (hover: hover) and (pointer: fine) {
  :root .msg-widget:hover .msg-widget-body {
    max-width: min(760px, calc(100vw - 120px));
    opacity: 1;
    visibility: visible;
    margin-right: 14px;
    transition:
      max-width .4s cubic-bezier(.2, .8, .2, 1),
      margin-right .4s cubic-bezier(.2, .8, .2, 1),
      opacity .3s ease .05s,
      visibility 0s linear 0s;
  }
  :root .msg-widget-toggle:hover {
    color: #fff;
    border-color: rgba(222, 247, 255, .48);
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, .38),
      inset -1px -1px 0 rgba(76, 201, 239, .22),
      0 14px 36px rgba(38, 176, 220, .14);
  }
}
/* The photo sits under a glass lens rather than a drawn outline: the rim catches
   a highlight top-left and a cool refraction bottom-right, the same optics the
   cursor shell uses. The overlay needs a wrapper because a replaced <img>
   renders no pseudo-elements of its own. */
:root .msg-widget-avatar {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
:root .msg-widget-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:root .msg-widget-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .30), rgba(255, 255, 255, .06) 30%, transparent 58%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .40),
    inset -1px -1px 0 rgba(76, 201, 239, .24),
    inset 0 0 14px rgba(120, 210, 245, .10);
}
:root .msg-widget-copy { flex: none; display: flex; flex-direction: column; gap: 2px; }
:root .msg-widget-title { margin: 0; font-weight: 700; font-size: .92rem; line-height: 1.2; color: #F8FBFD; }
:root .msg-widget-subtitle { margin: 0; font-size: .78rem; line-height: 1.2; color: #C2CFDB; }
:root .msg-widget-actions { flex: none; display: flex; align-items: center; gap: 8px; }
:root .msg-widget-link {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid;
  backdrop-filter: blur(9px) saturate(145%);
  -webkit-backdrop-filter: blur(9px) saturate(145%);
}
:root .msg-widget-link svg { width: 20px; height: 20px; fill: currentColor; }
:root .msg-widget-link--wa {
  color: #3adc7c;
  border-color: rgba(37, 211, 102, .45);
  background: linear-gradient(145deg, rgba(37, 211, 102, .30), rgba(37, 211, 102, .08));
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .22), 0 8px 20px rgba(37, 211, 102, .18);
}
:root .msg-widget-link--tg {
  color: #4fc0f5;
  border-color: rgba(42, 171, 238, .45);
  background: linear-gradient(145deg, rgba(42, 171, 238, .30), rgba(42, 171, 238, .08));
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .22), 0 8px 20px rgba(42, 171, 238, .18);
}
:root .msg-widget-link--ig {
  color: #f26ea6;
  border-color: rgba(225, 48, 108, .45);
  background: linear-gradient(145deg, rgba(247, 119, 55, .30), rgba(188, 24, 136, .14));
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .22), 0 8px 20px rgba(225, 48, 108, .18);
}
:root .msg-widget-cta {
  flex: none;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: #111820;
  font-weight: 700;
  font-size: .82rem;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(135deg, var(--yellow), #FFC74B 48%, var(--orange));
  box-shadow: 0 10px 24px rgba(255, 159, 28, .28), inset 0 1px 0 rgba(255, 255, 255, .4);
}
@media (max-width: 640px) {
  :root .msg-widget { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  :root .msg-widget-toggle { width: 50px; height: 50px; }
  :root .msg-widget-body { flex-wrap: wrap; row-gap: 8px; white-space: normal; }
  :root .msg-widget.is-open .msg-widget-body,
  :root .msg-widget:focus-within .msg-widget-body,
  :root .msg-widget:hover .msg-widget-body {
    max-width: min(300px, calc(100vw - 84px));
  }
  :root .msg-widget-copy { flex: 1 1 150px; }
  :root .msg-widget-actions { flex: 1 1 100%; justify-content: flex-end; }
}

.star-host:not(.hero-pin) { position: relative; }
.section-stars { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; contain: strict; }
.hero-pin > .section-stars { z-index: 2; }
.star-host > .tp-shell { position: relative; z-index: 2; }
.section-star {
  position: absolute; left: var(--star-x); top: var(--star-y); width: var(--star-size); height: var(--star-size);
  border-radius: 50%; background: var(--star-color, #b6d8e8); opacity: var(--star-dim);
  box-shadow: 0 0 calc(var(--star-size) * 1.8) color-mix(in srgb, var(--star-color, #b6d8e8) 45%, transparent);
  animation: star-twinkle var(--star-duration) ease-in-out var(--star-delay) infinite;
  animation-play-state: paused; will-change: opacity, transform;
}
.section-stars.is-twinkling .section-star { animation-play-state: running; }
.section-star.is-flare::after {
  content: ''; position: absolute; inset: -9px; opacity: 0; transform: scale(.35);
  background: linear-gradient(90deg, transparent 42%, rgba(255,255,255,.35) 48%, #fff 50%, rgba(255,255,255,.35) 52%, transparent 58%), linear-gradient(transparent 42%, rgba(255,255,255,.35) 48%, #fff 50%, rgba(255,255,255,.35) 52%, transparent 58%);
  animation: star-glint var(--star-duration) ease-out var(--star-delay) infinite;
  animation-play-state: paused;
}
.section-stars.is-twinkling .section-star.is-flare::after { animation-play-state: running; }
@keyframes star-twinkle {
  0%, 100% { opacity: var(--star-dim); transform: scale(.82); }
  42% { opacity: var(--star-bright); transform: scale(1.15); }
  67% { opacity: calc(var(--star-dim) + .08); transform: scale(.95); }
}
@keyframes star-glint {
  0%, 70%, 100% { opacity: 0; transform: scale(.35) rotate(45deg); }
  74% { opacity: 0; transform: scale(.5) rotate(45deg); }
  77% { opacity: .9; transform: scale(1) rotate(45deg); }
  81% { opacity: 0; transform: scale(1.35) rotate(45deg); }
}
@media (max-width: 680px) {
  :root button.back-to-top.back-to-top { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { :root .lens-cursor { display: none !important; } }
/* Where the triangular lens cursor renders, the native OS pointer stays hidden so only the custom shape shows. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { :root, :root * { cursor: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .section-star, .section-star.is-flare::after { animation: none !important; }
  :root :is(.scroll-fade, .ig-reveal) { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  :root button.back-to-top.back-to-top { transition: none !important; }
  :root .msg-widget-body { transition: none !important; }
  :root :is(button, [role="button"], input[type="submit"], .btn, .service-link, .nav-links a, .footer-col a, .footer-brand, summary, label.quiz-option, label.quiz-choice, a[href^="mailto:"], a[href^="tel:"], .msg-widget-link, .channel-card) { transition: none !important; translate: none !important; scale: none !important; }
}