/* Только переменные --emax-* из @emax/design-system (CLAUDE.md). Свои цвета не задаём. */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--emax-bg);
  color: var(--emax-text);
  font-family: var(--emax-font-body);
  line-height: 1.5;
}
a { color: var(--emax-teal); }
h1, h2, .service b, .news a { font-family: var(--emax-font-display); }
h1, h2 { margin: 0; line-height: 1.15; text-wrap: balance; }
h2 { font-size: 1.5rem; }
ul { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: 1100px; margin: 0 auto; padding-inline: var(--emax-space-4); }

.hero { background: var(--emax-teal); color: var(--emax-on-accent); --drop-body: var(--emax-on-accent); --drop-face: var(--emax-teal); --drop-pupil: var(--emax-on-accent); }
.hero-row { display: flex; align-items: center; justify-content: space-between; gap: var(--emax-space-5); padding-block: var(--emax-space-6); }
.hero h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
.hero p { margin: var(--emax-space-2) 0 0; }
.hero .drop { flex: none; width: clamp(84px, 12vw, 124px); }

.drop { height: auto; display: block; }
.drop-body { fill: var(--drop-body, var(--emax-teal)); }
.drop-face { fill: var(--drop-face, var(--emax-on-accent)); }
.drop-pupil { fill: var(--drop-pupil, var(--emax-text)); }
.drop-eye { fill: var(--emax-coral); }
.drop-glyph { fill: none; stroke: var(--emax-on-accent); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.drop-mouth { fill: none; stroke: var(--drop-face, var(--emax-on-accent)); stroke-width: 6.5; stroke-linecap: round; }
.hero .drop-blink { animation: blink 4.6s linear infinite; }
@keyframes blink { 0%, 92%, 98%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) { .hero .drop-blink { animation: none; } }

.services { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--emax-space-3); padding-block: var(--emax-space-4); }
.service { display: grid; justify-items: start; gap: var(--emax-space-1); background: var(--emax-surface); border: 1px solid var(--emax-border); border-radius: var(--emax-radius-card); padding: var(--emax-space-3); color: inherit; text-decoration: none; min-width: 0; }
a.service:hover { border-color: var(--emax-teal); }
.service b { font-size: 1.05rem; }
.service span { color: var(--emax-muted); font-size: .9rem; line-height: 1.35; }
.service.soon { opacity: .62; }

.columns { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--emax-space-6); padding-block: var(--emax-space-5); }
.columns section { min-width: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--emax-space-3); margin-bottom: var(--emax-space-2); }
.section-head a { font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.news li { border-top: 1px solid var(--emax-border); padding-block: var(--emax-space-3); }
.news a { display: block; color: inherit; font-weight: 600; font-size: 1.05rem; line-height: 1.3; text-decoration: none; }
.news a:hover { color: var(--emax-teal); }
.news small, .note, .empty { color: var(--emax-muted); font-size: .85rem; }
.side { display: grid; gap: var(--emax-space-6); align-content: start; }
.rates { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rates td { border-top: 1px solid var(--emax-border); padding-block: var(--emax-space-2); }
.rates a { text-decoration: none; }
.rates span { color: var(--emax-muted); font-size: .85rem; }
.rates .num { text-align: right; padding-left: var(--emax-space-3); white-space: nowrap; color: var(--emax-muted); }
.rates td:nth-child(2) { color: var(--emax-text); }
.rates .up { color: var(--emax-teal); }
.note { margin: var(--emax-space-2) 0 0; }
.destinations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--emax-space-2); }
.destinations a { background: var(--emax-surface); border: 1px solid var(--emax-border); border-radius: var(--emax-radius-button); color: inherit; padding: var(--emax-space-3); font-weight: 600; text-align: center; text-decoration: none; }
.destinations a:hover { border-color: var(--emax-teal); }
.notfound { padding-block: var(--emax-space-16); }

:focus-visible { outline: 2px solid var(--emax-teal); outline-offset: 2px; }

@media (max-width: 760px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .columns { grid-template-columns: minmax(0, 1fr); }
}