/* ==========================================================================
   ФВВС СО — Federation of Swimming, Water Polo, Synchronized Swimming, Diving
   Sakhalin Region. Aquatic deep-blue + cyan design system.
   ========================================================================== */

/* ------- 1. Tokens ------- */
:root {
  --c-deep:        #06182f;
  --c-navy:        #0a2347;
  --c-blue:        #0d4a8c;
  --c-blue-2:      #1565c0;
  --c-cyan:        #00bcd4;
  --c-cyan-2:      #4dd0e1;
  --c-aqua:        #7fe7f3;
  --c-foam:        #e8f7fb;
  --c-light:       #f3f8fc;
  --c-white:       #ffffff;
  --c-text:        #16243d;
  --c-text-2:      #3a4b6b;
  --c-muted:       #6f7f9b;
  --c-line:        #dde7f1;
  --c-gold:        #f5b53a;
  --c-coral:       #ff6b6b;
  --c-shadow:      0 12px 40px rgba(8, 32, 70, .12);
  --c-shadow-lg:   0 24px 60px rgba(8, 32, 70, .18);
  --c-shadow-sm:   0 4px 14px rgba(8, 32, 70, .08);

  --grad-deep:     linear-gradient(135deg, #06182f 0%, #0a2347 45%, #0d4a8c 100%);
  --grad-cyan:     linear-gradient(135deg, #0d4a8c 0%, #00bcd4 100%);
  --grad-aqua:     linear-gradient(135deg, #00bcd4 0%, #7fe7f3 100%);
  --grad-foam:     linear-gradient(180deg, #f3f8fc 0%, #e8f7fb 100%);

  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;

  --container: 1240px;
  --gutter: 24px;

  --t-fast:  .18s ease;
  --t-base:  .32s cubic-bezier(.2, .7, .2, 1);
  --t-slow:  .6s  cubic-bezier(.2, .7, .2, 1);

  --font-body: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ------- 2. Reset ------- */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100% }
a { color: var(--c-blue); text-decoration: none; transition: color var(--t-fast) }
a:hover { color: var(--c-cyan) }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent }
ul, ol { margin: 0; padding: 0; list-style: none }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  margin: 0 0 .6em;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--c-navy);
}
p { margin: 0 0 1em }

/* ------- 3. Layout helpers ------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: 84px 0; position: relative }
.section--tight { padding: 56px 0 }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap }
.section__title {
  font-size: clamp(28px, 3.4vw, 42px);
  margin: 0;
  position: relative;
  padding-bottom: 14px;
}
.section__title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  border-radius: 4px;
  background: var(--grad-cyan);
}
.section__lead { color: var(--c-text-2); max-width: 56ch; margin: 0 }
.section__more {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--c-blue); font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: #fff;
  transition: all var(--t-base);
}
.section__more:hover {
  color: #fff; background: var(--grad-cyan);
  border-color: transparent;
  transform: translateX(2px);
  box-shadow: var(--c-shadow-sm);
}
.section__more svg { transition: transform var(--t-base) }
.section__more:hover svg { transform: translateX(3px) }

/* ------- 4. Buttons ------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  font-weight: 600; font-size: 15px;
  letter-spacing: .01em;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
}
.btn--primary {
  color: #fff;
  background: var(--grad-cyan);
  box-shadow: 0 8px 24px rgba(0, 188, 212, .35);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 188, 212, .5);
  color: #fff;
}
.btn--ghost {
  color: var(--c-blue);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-line);
}
.btn--ghost:hover { background: #fff; color: var(--c-cyan); border-color: var(--c-cyan) }
.btn--on-dark { color: var(--c-deep); background: #fff }
.btn--on-dark:hover { color: var(--c-blue); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.2) }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.topbar {
  background: var(--c-deep);
  color: rgba(255,255,255,.7);
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar__row {
  display: flex; align-items: center; justify-content: space-between;
  height: 38px; gap: 16px;
}
.topbar__contacts { display: flex; gap: 22px; flex-wrap: wrap }
.topbar__contacts a { color: rgba(255,255,255,.78); display: inline-flex; gap: 6px; align-items: center }
.topbar__contacts a:hover { color: var(--c-aqua) }
.topbar__social { display: flex; gap: 8px }
.topbar__social a {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  transition: all var(--t-fast);
}
.topbar__social a:hover { background: var(--c-cyan); color: #fff; transform: translateY(-2px) }

.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--t-base), background var(--t-base);
}
.header.is-scrolled {
  background: rgba(255,255,255,.98);
  box-shadow: 0 6px 24px rgba(8,32,70,.08);
}
.header__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 84px;
}

/* ----- Logo ----- */
.logo {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
}
.logo__mark {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--grad-deep);
  position: relative; overflow: hidden;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(13, 74, 140, .35);
}
.logo__mark svg { width: 30px; height: 30px; color: var(--c-aqua) }
.logo__mark::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(127,231,243,.35), transparent 60%);
}
.logo__text { line-height: 1.1 }
.logo__abbr {
  font-family: var(--font-display);
  font-weight: 800; font-size: 19px;
  color: var(--c-navy);
  letter-spacing: .02em;
}
.logo__full {
  display: block;
  font-size: 11px;
  color: var(--c-muted);
  margin-top: 2px;
  max-width: 240px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ----- Main nav ----- */
.nav { display: flex; align-items: center }
.nav__list { display: flex; gap: 4px }
.nav__item { position: relative }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  font-weight: 600; font-size: 15px;
  color: var(--c-text);
  border-radius: 10px;
  transition: all var(--t-fast);
  white-space: nowrap;
  cursor: pointer;
}
.nav__link:hover, .nav__item.is-open > .nav__link {
  color: var(--c-blue); background: var(--c-foam);
}
.nav__link[aria-current='page'] { color: var(--c-cyan) }
.nav__caret {
  width: 12px; height: 12px;
  transition: transform var(--t-fast);
}
.nav__item.is-open > .nav__link .nav__caret { transform: rotate(180deg) }

/* dropdown */
.nav__sub {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--c-shadow);
  padding: 10px;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  z-index: 70;
}
.nav__item.is-open > .nav__sub {
  opacity: 1; visibility: visible;
  transform: translateY(0);
}
.nav__sub::before {
  content: ''; position: absolute; top: -6px; left: 24px;
  width: 12px; height: 12px;
  background: #fff;
  border-left: 1px solid var(--c-line);
  border-top: 1px solid var(--c-line);
  transform: rotate(45deg);
}
.nav__sub .nav__item { display: block }
.nav__sub .nav__link {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 10px 14px;
  font-size: 14px; font-weight: 500;
  border-radius: 8px;
}
.nav__sub .nav__link:hover { background: var(--c-foam); color: var(--c-blue) }
.nav__sub .nav__caret { transform: rotate(-90deg) }
.nav__sub .nav__item.is-open > .nav__link .nav__caret { transform: rotate(0deg) }

/* level 2 */
.nav__sub .nav__sub {
  top: -10px; left: calc(100% + 8px);
}
.nav__sub .nav__sub::before {
  top: 18px; left: -6px;
  border-right: 0; border-bottom: 0;
  transform: rotate(-45deg);
}

/* ----- Header CTA ----- */
.header__cta { display: inline-flex; gap: 12px; align-items: center }
.search-toggle {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-blue);
  background: var(--c-foam);
  transition: all var(--t-fast);
}
.search-toggle:hover { background: var(--grad-cyan); color: #fff; transform: scale(1.05) }

/* ----- Burger ----- */
.burger {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: none;
  align-items: center; justify-content: center;
  background: var(--c-foam);
  color: var(--c-navy);
  transition: background var(--t-fast);
  z-index: 90;
  position: relative;
}
.burger__lines { width: 22px; height: 16px; position: relative }
.burger__lines span {
  position: absolute; left: 0; right: 0;
  height: 2px; background: currentColor; border-radius: 2px;
  transition: all var(--t-base);
}
.burger__lines span:nth-child(1) { top: 0 }
.burger__lines span:nth-child(2) { top: 7px }
.burger__lines span:nth-child(3) { top: 14px }
.burger.is-active { background: #fff; color: var(--c-deep) }
.burger.is-active .burger__lines span:nth-child(1) { top: 7px; transform: rotate(45deg) }
.burger.is-active .burger__lines span:nth-child(2) { opacity: 0 }
.burger.is-active .burger__lines span:nth-child(3) { top: 7px; transform: rotate(-45deg) }

/* ----- Mobile nav ----- */
.mnav {
  position: fixed; inset: 0; z-index: 80;
  background: var(--grad-deep);
  color: #fff;
  padding: 100px 24px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-slow);
}
.mnav.is-open { transform: translateX(0) }
.mnav__list { display: flex; flex-direction: column; gap: 4px }
.mnav__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-radius: 12px;
  color: #fff; font-weight: 600; font-size: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  width: 100%; text-align: left;
}
.mnav__link svg { transition: transform var(--t-base); flex: none }
.mnav__item.is-open > .mnav__link svg { transform: rotate(180deg) }
.mnav__sub {
  display: none;
  padding: 8px 8px 8px 22px;
  border-left: 2px solid var(--c-cyan);
  margin: 6px 0 6px 14px;
}
.mnav__item.is-open > .mnav__sub { display: block; animation: mnav-in .35s ease both }
.mnav__sub .mnav__link { font-size: 15px; padding: 12px 14px; background: transparent; border: 0 }
.mnav__sub .mnav__link:hover { color: var(--c-aqua) }
@keyframes mnav-in {
  from { opacity: 0; transform: translateY(-6px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* ==========================================================================
   6. ANIMATED BANNER (slim, used on home)
   ========================================================================== */
.banner {
  position: relative;
  background: var(--grad-deep);
  color: #fff;
  overflow: hidden;
  padding: 56px 0 84px;
}
.banner__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px;
}
.banner__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-aqua);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(127,231,243,.12);
  border: 1px solid rgba(127,231,243,.25);
}
.banner__eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-cyan);
  box-shadow: 0 0 0 0 rgba(0,188,212,.6);
  animation: ping 2s infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(0,188,212,.7) }
  100% { box-shadow: 0 0 0 14px rgba(0,188,212,0) }
}
.banner h1 {
  font-size: clamp(28px, 3.8vw, 46px);
  color: #fff; line-height: 1.08;
  margin: 18px 0 14px;
}
.banner h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--c-aqua), var(--c-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.banner__sub {
  color: rgba(255,255,255,.78); font-size: 17px; max-width: 56ch;
}
.banner__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px }

/* Stats */
.banner__stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.stat-card {
  position: relative;
  padding: 22px 20px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  transition: transform var(--t-base);
}
.stat-card:hover { transform: translateY(-3px) }
.stat-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(0,188,212,.3), transparent 60%);
  opacity: .6;
}
.stat-card__num {
  font-family: var(--font-display);
  font-weight: 800; font-size: 36px;
  background: linear-gradient(180deg, #fff, var(--c-aqua));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position: relative;
}
.stat-card__label {
  font-size: 13px; color: rgba(255,255,255,.7);
  text-transform: uppercase; letter-spacing: .08em;
  margin-top: 6px; position: relative;
}

/* Animated waves — tiled SVG backgrounds, seamless loop via background-position */
.banner__waves {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 110px;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.banner__waves .wave {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 100%;
  background-repeat: repeat-x;
  background-size: 600px 100%;
  background-position: 0 bottom;
  will-change: background-position;
}
.banner__waves .wave-1 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 110' preserveAspectRatio='none'><path d='M0,60 C200,80 400,40 600,60 L600,110 L0,110 Z' fill='%230a2347'/></svg>");
  opacity: .35;
  animation: wave-scroll-l 14s linear infinite;
}
.banner__waves .wave-2 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 110' preserveAspectRatio='none'><path d='M0,70 C200,90 400,50 600,70 L600,110 L0,110 Z' fill='%230d4a8c'/></svg>");
  opacity: .55;
  animation: wave-scroll-r 20s linear infinite;
}
.banner__waves .wave-3 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 110' preserveAspectRatio='none'><path d='M0,86 C200,106 400,66 600,86 L600,110 L0,110 Z' fill='%23f3f8fc'/></svg>");
  opacity: 1;
  animation: wave-scroll-l 9s linear infinite;
}
@keyframes wave-scroll-l {
  from { background-position-x: 0 }
  to   { background-position-x: -600px }
}
@keyframes wave-scroll-r {
  from { background-position-x: 0 }
  to   { background-position-x: 600px }
}

/* Floating bubbles */
.banner__bubbles {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), rgba(127,231,243,.15));
  border: 1px solid rgba(255,255,255,.15);
  animation: bubble-float linear infinite;
  opacity: .25;
}
@keyframes bubble-float {
  0%   { transform: translateY(20vh) scale(.6); opacity: 0 }
  10%  { opacity: .35 }
  90%  { opacity: .35 }
  100% { transform: translateY(-110vh) scale(1.1); opacity: 0 }
}
.banner__bubbles, .banner__waves { will-change: transform }

/* ==========================================================================
   7. PAGE HEADER (inner pages)
   ========================================================================== */
.page-head {
  position: relative;
  background: var(--grad-deep);
  color: #fff;
  padding: 56px 0 100px;
  overflow: hidden;
  isolation: isolate;
}
.page-head::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 0%, rgba(0,188,212,.3), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(127,231,243,.2), transparent 50%);
  z-index: -1;
}
.page-head__waves {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 80px;
  pointer-events: none;
  overflow: hidden;
}
.page-head__waves .wave {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 100%;
  background-repeat: repeat-x;
  background-size: 600px 100%;
  background-position: 0 bottom;
  will-change: background-position;
}
.page-head__waves .wave-1 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'><path d='M0,40 C200,60 400,20 600,40 L600,80 L0,80 Z' fill='%230d4a8c'/></svg>");
  opacity: .55;
  animation: wave-scroll-l 14s linear infinite;
}
.page-head__waves .wave-2 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'><path d='M0,56 C200,76 400,36 600,56 L600,80 L0,80 Z' fill='%23f3f8fc'/></svg>");
  opacity: 1;
  animation: wave-scroll-r 9s linear infinite;
}
.crumbs {
  display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: rgba(255,255,255,.65);
  flex-wrap: wrap;
}
.crumbs a { color: rgba(255,255,255,.85) }
.crumbs a:hover { color: var(--c-aqua) }
.crumbs__sep { opacity: .4 }
.page-head h1 {
  color: #fff;
  font-size: clamp(28px, 3.8vw, 44px);
  margin: 14px 0 6px;
  line-height: 1.1;
}
.page-head__sub { color: rgba(255,255,255,.78); max-width: 70ch; margin: 0 }

/* ==========================================================================
   8. LIGHT CONTENT BLOCK (inner pages)
   ========================================================================== */
.page-body {
  background: var(--grad-foam);
  position: relative;
  padding: 64px 0 96px;
}
.page-body::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(0,188,212,.06), transparent 50%),
    radial-gradient(circle at 5% 90%, rgba(13,74,140,.05), transparent 55%);
  pointer-events: none;
}
/* The .page-card/__inner wrappers in markup are visual no-ops — content blocks
   sit directly on the foam page-body. */
.page-card,
.page-card__inner { position: relative }

.lead {
  font-size: 19px; color: var(--c-text-2);
  margin: 0 0 32px;
  padding: 22px 26px; border-radius: var(--r-md);
  background: #fff;
  border-left: 4px solid var(--c-cyan);
  box-shadow: var(--c-shadow-sm);
}

/* ==========================================================================
   9. CARDS / GRIDS
   ========================================================================== */
.card {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--c-shadow-sm);
  border: 1px solid rgba(13, 74, 140, .06);
  transition: transform var(--t-base), box-shadow var(--t-base);
  display: flex; flex-direction: column;
  height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--c-shadow-lg);
}
.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.card__media .ph {
  display: block;
  position: absolute; inset: 0;
}
.card__body { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1 }
.card__date {
  font-size: 12px; color: var(--c-cyan);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.card__title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700;
  line-height: 1.3; color: var(--c-navy);
  margin: 0;
}
.card__title a { color: inherit }
.card__title a:hover { color: var(--c-cyan) }
.card__excerpt { color: var(--c-text-2); font-size: 14px; margin: 0 }
.card__foot {
  margin-top: auto; padding-top: 8px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--c-muted);
}
.card__tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--c-foam); color: var(--c-blue);
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}

/* ==========================================================================
   10. GALLERY SLIDER
   ========================================================================== */
.slider {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-deep);
  box-shadow: var(--c-shadow-lg);
  margin-top: -54px;
  z-index: 5;
}
.slider__viewport {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.slider__track {
  display: flex;
  height: 100%;
  transition: transform var(--t-slow);
  will-change: transform;
}
.slide {
  flex: 0 0 100%;
  position: relative;
  overflow: hidden;
}
.slide__bg {
  position: absolute; inset: 0;
  transform: scale(1.06);
  transition: transform 8s ease;
}
.slide.is-active .slide__bg { transform: scale(1) }
.slide__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 24, 47, .92) 0%, rgba(6, 24, 47, .35) 50%, transparent 100%);
}
.slide__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px clamp(24px, 5vw, 60px);
  color: #fff;
  z-index: 2;
}
.slide__tag {
  display: inline-block;
  padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(0,188,212,.85);
  margin-bottom: 14px;
}
.slide__title {
  color: #fff;
  font-size: clamp(22px, 3vw, 36px);
  max-width: 26ch;
  margin: 0 0 8px;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
  line-height: 1.15;
}
.slide__meta {
  font-size: 14px; color: rgba(255,255,255,.78);
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.slide__meta span { display: inline-flex; gap: 6px; align-items: center }

.slide__content > * { opacity: 0; transform: translateY(20px); transition: opacity var(--t-slow), transform var(--t-slow) }
.slide.is-active .slide__content > * { opacity: 1; transform: translateY(0) }
.slide.is-active .slide__content > *:nth-child(1) { transition-delay: .15s }
.slide.is-active .slide__content > *:nth-child(2) { transition-delay: .25s }
.slide.is-active .slide__content > *:nth-child(3) { transition-delay: .35s }

.slider__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--c-deep);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 3;
  box-shadow: var(--c-shadow);
  transition: all var(--t-fast);
}
.slider__btn:hover { background: #fff; color: var(--c-cyan); transform: translateY(-50%) scale(1.05) }
.slider__btn--prev { left: 20px }
.slider__btn--next { right: 20px }

.slider__dots {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 3;
}
.slider__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: 2px solid rgba(255,255,255,.6);
  transition: all var(--t-base);
  cursor: pointer;
}
.slider__dot.is-active { background: var(--c-cyan); border-color: #fff; width: 28px; border-radius: 999px }

/* gallery placeholder bg variants — pure CSS art */
.gbg { width: 100%; height: 100%; position: relative; overflow: hidden }
.gbg::before, .gbg::after {
  content: ''; position: absolute; inset: 0;
}
.gbg--pool::before {
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 2px, transparent 2px 60px),
    radial-gradient(ellipse at 50% 70%, rgba(127,231,243,.5), transparent 60%),
    linear-gradient(180deg, #073e7a 0%, #0a4d9e 40%, #00bcd4 100%);
}
.gbg--pool::after {
  background:
    radial-gradient(ellipse 200px 30px at 30% 30%, rgba(255,255,255,.4), transparent 70%),
    radial-gradient(ellipse 280px 36px at 70% 50%, rgba(255,255,255,.3), transparent 70%),
    radial-gradient(ellipse 220px 28px at 50% 75%, rgba(255,255,255,.35), transparent 70%);
  filter: blur(2px);
  animation: shimmer 8s ease-in-out infinite alternate;
}
@keyframes shimmer {
  to { transform: translateY(-6px) scale(1.04) }
}
.gbg--waterpolo::before {
  background:
    radial-gradient(circle at 70% 40%, rgba(245,181,58,.5), transparent 30%),
    linear-gradient(135deg, #0a2347 0%, #1565c0 50%, #00bcd4 100%);
}
.gbg--waterpolo::after {
  background:
    repeating-radial-gradient(circle at 70% 40%, rgba(255,255,255,.12) 0 2px, transparent 2px 18px);
  mix-blend-mode: overlay;
}
.gbg--sync::before {
  background:
    conic-gradient(from 180deg at 50% 60%, #00bcd4, #4dd0e1, #7fe7f3, #0d4a8c, #00bcd4);
  filter: saturate(.9);
}
.gbg--sync::after {
  background:
    radial-gradient(circle at 50% 60%, transparent 18%, rgba(6,24,47,.6) 60%);
}
.gbg--diving::before {
  background: linear-gradient(160deg, #06182f 0%, #0d4a8c 40%, #00bcd4 100%);
}
.gbg--diving::after {
  background:
    repeating-linear-gradient(60deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 30% 25%, rgba(127,231,243,.5), transparent 25%);
}
.gbg--training::before {
  background: linear-gradient(135deg, #0a2347 0%, #0d4a8c 50%, #1565c0 100%);
}
.gbg--training::after {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 80px),
    radial-gradient(circle at 50% 80%, rgba(0,188,212,.4), transparent 60%);
}
.gbg--podium::before {
  background:
    linear-gradient(135deg, #0a2347 0%, #0d4a8c 100%);
}
.gbg--podium::after {
  background:
    radial-gradient(circle at 50% 80%, rgba(245,181,58,.4), transparent 40%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 30px);
}

/* ==========================================================================
   11. NEWS layout
   ========================================================================== */
.news-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 22px;
}
.news-grid > article:nth-child(1) { grid-row: 1 / span 2 }
.news-grid > article:nth-child(1) .card__media { aspect-ratio: 4 / 3 }
.news-grid > article:nth-child(1) .card__title { font-size: 26px }

/* ==========================================================================
   12. EVENTS
   ========================================================================== */
.events-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: start }
.events-list { display: flex; flex-direction: column; gap: 16px }
.event {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 18px 22px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--c-line);
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
  text-align: left;
}
.event::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--grad-cyan);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-base);
}
.event:hover { transform: translateX(4px); box-shadow: var(--c-shadow-sm); border-color: transparent }
.event:hover::before { transform: scaleY(1) }
.event__date {
  text-align: center;
  background: var(--grad-deep); color: #fff;
  border-radius: 12px;
  padding: 10px 4px;
}
.event__day { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1 }
.event__month { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--c-aqua); margin-top: 4px }
.event__body h3 { font-size: 17px; margin: 0 0 4px; color: var(--c-navy) }
.event__meta {
  font-size: 13px; color: var(--c-muted);
  display: flex; gap: 14px; flex-wrap: wrap;
}
.event__meta span { display: inline-flex; gap: 6px; align-items: center }
.event__icon { color: var(--c-cyan) }
.event__cta {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-foam); color: var(--c-blue);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-base);
  flex: none;
}
.event:hover .event__cta { background: var(--grad-cyan); color: #fff; transform: rotate(-45deg) }

/* Calendar widget */
.calwidget {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: var(--c-shadow-sm);
  border: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
}
.calwidget::before {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,188,212,.12), transparent 70%);
}
.calwidget__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
  position: relative;
}
.calwidget__title { margin: 0; font-size: 20px }
.calwidget__nav { display: flex; gap: 6px }
.calnav-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-foam); color: var(--c-blue);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.calnav-btn:hover { background: var(--grad-cyan); color: #fff }
.cal-mini {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  position: relative;
}
.cal-mini th {
  font-size: 11px; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; text-align: center;
  padding: 6px 0;
}
.cal-mini td {
  text-align: center;
  font-size: 14px;
  padding: 0;
}
.cal-cell {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  color: var(--c-text);
  font-weight: 500;
  cursor: default;
  transition: all var(--t-fast);
  position: relative;
}
.cal-cell--out { color: var(--c-muted); opacity: .4 }
.cal-cell--today {
  background: var(--c-foam); color: var(--c-blue); font-weight: 700;
}
.cal-cell--event {
  background: var(--grad-cyan); color: #fff; font-weight: 700;
  cursor: pointer;
}
.cal-cell--event:hover { transform: scale(1.08) }

/* Calwidget upcoming list */
.calwidget__upcoming { margin-top: 22px; display: flex; flex-direction: column; gap: 10px }
.calupcoming {
  display: grid; grid-template-columns: 50px 1fr;
  gap: 14px; align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: var(--c-foam);
  transition: all var(--t-fast);
}
.calupcoming:hover { background: var(--c-aqua); color: var(--c-deep) }
.calupcoming__date {
  text-align: center;
  background: #fff;
  border-radius: 8px;
  padding: 6px 4px;
  border: 1px solid var(--c-line);
}
.calupcoming__day { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--c-blue); line-height: 1 }
.calupcoming__month { font-size: 10px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px }
.calupcoming__title { font-size: 14px; font-weight: 600; margin: 0 0 2px; color: var(--c-navy); line-height: 1.3 }
.calupcoming__discipline { font-size: 12px; color: var(--c-muted) }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer {
  background: var(--c-deep);
  color: rgba(255,255,255,.75);
  padding: 64px 0 0;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,188,212,.5), transparent);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 48px;
}
.footer__brand .logo__abbr { color: #fff }
.footer__brand .logo__full { color: rgba(255,255,255,.6) }
.footer__about { font-size: 14px; color: rgba(255,255,255,.6); margin: 16px 0 0; max-width: 36ch }
.footer__col h4 {
  color: #fff; font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 16px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px }
.footer__col a { color: rgba(255,255,255,.7); font-size: 14px }
.footer__col a:hover { color: var(--c-aqua) }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
.footer__bottom a { color: rgba(255,255,255,.7) }

/* ==========================================================================
   14. SCROLL REVEAL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0) }
.reveal--up { transform: translateY(28px) }
.reveal--left { transform: translateX(-28px) }
.reveal--right { transform: translateX(28px) }
.reveal--scale { transform: scale(.94) }
.reveal.is-visible.reveal--up,
.reveal.is-visible.reveal--left,
.reveal.is-visible.reveal--right { transform: translate(0,0) }
.reveal.is-visible.reveal--scale { transform: scale(1) }
.reveal[data-delay='1'] { transition-delay: .08s }
.reveal[data-delay='2'] { transition-delay: .16s }
.reveal[data-delay='3'] { transition-delay: .24s }
.reveal[data-delay='4'] { transition-delay: .32s }
.reveal[data-delay='5'] { transition-delay: .4s }

body.is-locked { overflow: hidden }

/* ==========================================================================
   15. INNER PAGE COMPONENTS
   ========================================================================== */
/* Wrapper for long-form text content (charter, policies, etc.) */
.text-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 48px clamp(22px, 4vw, 56px);
  box-shadow: var(--c-shadow);
  border: 1px solid rgba(13, 74, 140, .06);
  margin: 0 auto;
}
.text-card .prose { max-width: none }

.prose { max-width: 75ch }
.prose h2 { margin-top: 1.6em; font-size: 26px }
.prose h3 { margin-top: 1.4em; font-size: 20px; color: var(--c-blue) }
.prose ul { list-style: none; padding-left: 0; margin: 0 0 1.2em }
.prose ul li {
  position: relative; padding-left: 26px; margin-bottom: 8px;
}
.prose ul li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 12px; height: 4px; border-radius: 2px;
  background: var(--grad-cyan);
}
.prose ol { padding-left: 1.6em; margin-bottom: 1.2em }
.prose ol li { margin-bottom: 6px }

.tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 24px }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  background: #fff; color: var(--c-blue);
  border-radius: 999px; border: 1px solid rgba(13, 74, 140, .15);
  transition: all var(--t-fast);
  cursor: pointer;
}
.tag-chip:hover, .tag-chip.is-active { background: var(--grad-cyan); color: #fff; border-color: transparent }

.filters {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 16px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--c-line);
  box-shadow: var(--c-shadow-sm);
  margin-bottom: 28px; align-items: center;
}
.filters select, .filters input[type='text'], .filters input[type='date'], .filters input[type='search'] {
  padding: 10px 14px;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: #fff; font: inherit;
  color: var(--c-text);
  transition: border-color var(--t-fast);
  min-width: 160px;
}
.filters select:focus, .filters input:focus { outline: 0; border-color: var(--c-cyan) }
.filters label { font-size: 13px; color: var(--c-muted); font-weight: 600 }

/* Athletes grid */
.athletes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}
.athlete {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-line);
  transition: all var(--t-base);
  position: relative;
  display: flex; flex-direction: column;
}
.athlete:hover { transform: translateY(-6px); box-shadow: var(--c-shadow-lg) }
.athlete__photo {
  aspect-ratio: 1 / 1;
  position: relative; overflow: hidden;
}
.athlete__photo .ph { position: absolute; inset: 0 }
.athlete__photo .silhouette {
  position: absolute; left: 50%; top: 60%;
  transform: translate(-50%, -50%);
  width: 65%;
  z-index: 2;
  color: rgba(255,255,255,.85);
}
.athlete__discipline {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,.92);
  color: var(--c-blue);
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  z-index: 3;
}
.athlete__body { padding: 18px 18px 22px; text-align: center }
.athlete__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--c-navy); margin: 0 0 4px }
.athlete__role { color: var(--c-muted); font-size: 13px; margin: 0 }

/* Records / Tables */
.records {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background: #fff;
  box-shadow: var(--c-shadow-sm);
  margin-bottom: 28px;
}
.records table { width: 100%; border-collapse: collapse; min-width: 760px }
.records th, .records td { padding: 14px 18px; text-align: left; font-size: 14px }
.records th {
  background: var(--c-deep); color: #fff;
  font-weight: 700; letter-spacing: .04em; font-size: 13px;
  text-transform: uppercase;
}
.records tr { transition: background var(--t-fast) }
.records tbody tr:nth-child(odd) { background: var(--c-foam) }
.records tbody tr:hover { background: rgba(0,188,212,.08) }
.records td.t-mono { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-blue) }

/* Documents list */
.docs { display: grid; gap: 12px }
.doc {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px; align-items: center;
  padding: 16px 20px;
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  transition: all var(--t-base);
}
.doc:hover { border-color: transparent; box-shadow: var(--c-shadow-sm); transform: translateX(4px) }
.doc__icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--grad-cyan);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.doc__title { font-weight: 600; color: var(--c-navy); margin: 0 0 2px }
.doc__meta { font-size: 13px; color: var(--c-muted); display: flex; gap: 14px; flex-wrap: wrap }
.doc__btn {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--c-foam); color: var(--c-blue);
  font-size: 13px; font-weight: 600;
  display: inline-flex; gap: 6px; align-items: center;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.doc:hover .doc__btn { background: var(--grad-cyan); color: #fff }

/* Contacts */
.contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-bottom: 36px;
}
.contact {
  padding: 24px;
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  text-align: center;
  transition: all var(--t-base);
}
.contact:hover { transform: translateY(-3px); box-shadow: var(--c-shadow) }
.contact__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--grad-cyan); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.contact h4 { margin: 0 0 6px; font-size: 17px }
.contact__line { color: var(--c-text-2); font-size: 14px; margin: 2px 0 }
.contact__line a { color: inherit }

/* Map placeholder */
.mapbox {
  position: relative; height: 360px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 50%, rgba(0,188,212,.2), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(13,74,140,.2), transparent 40%),
    linear-gradient(135deg, #e8f7fb, #cfe9f1);
  border: 1px solid var(--c-line);
}
.mapbox::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(13,74,140,.08) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(13,74,140,.08) 0 1px, transparent 1px 80px);
}
.mapbox__pin {
  position: absolute; left: 50%; top: 50%;
  width: 36px; height: 36px;
  border-radius: 50% 50% 50% 0;
  background: var(--grad-cyan);
  box-shadow: 0 12px 28px rgba(0,188,212,.5);
  animation: pin-bob 2.4s ease-in-out infinite;
}
.mapbox__pin::after {
  content: '';
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(45deg);
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff;
}
@keyframes pin-bob {
  0%,100% { transform: translate(-50%, -100%) rotate(-45deg) }
  50%     { transform: translate(-50%, -118%) rotate(-45deg) }
}

/* Live status pill */
.live-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(255,107,107,.1); color: var(--c-coral);
  border: 1px solid rgba(255,107,107,.25);
  border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.live-status::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-coral);
  box-shadow: 0 0 0 0 rgba(255,107,107,.7);
  animation: ping-red 1.5s infinite;
}
@keyframes ping-red {
  0% { box-shadow: 0 0 0 0 rgba(255,107,107,.7) }
  100% { box-shadow: 0 0 0 8px rgba(255,107,107,0) }
}

/* Calendar (full page month) */
.calendar-month {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--c-shadow-sm);
  border: 1px solid var(--c-line);
  margin-bottom: 22px;
}
.calendar-month h3 {
  margin: 0 0 16px; padding-bottom: 12px;
  border-bottom: 2px solid var(--c-foam);
  display: flex; gap: 10px; align-items: center;
  font-size: 22px;
}
.calendar-month h3 .dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--grad-cyan);
}
.cal-events { display: flex; flex-direction: column; gap: 10px }
.cal-events .event { background: var(--c-foam); border-color: transparent }
.cal-events .event:hover { background: #fff; border-color: var(--c-line) }

/* Pills */
.pills {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.pill {
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--c-line);
  font-size: 14px; font-weight: 600;
  color: var(--c-text-2);
  transition: all var(--t-fast);
  cursor: pointer;
}
.pill:hover { color: var(--c-blue); border-color: var(--c-cyan) }
.pill.is-active {
  background: var(--grad-cyan); color: #fff; border-color: transparent;
  box-shadow: var(--c-shadow-sm);
}

/* Judges grid (compact) */
.judges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.judge {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px; align-items: center;
  padding: 16px;
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  transition: all var(--t-base);
}
.judge:hover { border-color: transparent; box-shadow: var(--c-shadow-sm); transform: translateY(-2px) }
.judge__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-cyan); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 18px; letter-spacing: .02em;
  flex: none;
}
.judge__name { font-weight: 700; color: var(--c-navy); margin: 0 0 2px; font-size: 15px }
.judge__cat { font-size: 12px; color: var(--c-muted); display: flex; gap: 8px; flex-wrap: wrap }
.judge__cat .badge { background: var(--c-foam); color: var(--c-blue); padding: 2px 8px; border-radius: 999px; font-weight: 600 }

/* Result block (online results) */
.result-block {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  margin-bottom: 22px;
  overflow: hidden;
}
.result-block__head {
  background: var(--grad-deep); color: #fff;
  padding: 18px 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.result-block__head h3 { color: #fff; margin: 0; font-size: 18px }
.result-block__meta { color: rgba(255,255,255,.7); font-size: 13px }

/* Bio */
.bio-grid {
  display: grid; grid-template-columns: 1fr 2fr; gap: 36px;
  margin-bottom: 28px;
}
.bio-photo {
  aspect-ratio: 1/1;
  border-radius: var(--r-lg);
  position: relative; overflow: hidden;
}

/* ==========================================================================
   15a. RESULTS — протоколы SPLASH Meet Manager
   (онлайн-результаты, протоколы соревнования, итоги, архив, главная, рекорды)
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.btn--sm { padding: 9px 18px; font-size: 13px; gap: 8px }
.btn.is-off { opacity: .55; cursor: default; box-shadow: none }
.btn.is-off:hover { transform: none }

.meet-loading {
  margin: 0;
  padding: 22px 26px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px dashed var(--c-line);
  color: var(--c-text-2);
}

/* Статусы соревнования: на тёмном фоне и спокойные «завершено» / «скоро» */
.live-status--on-dark {
  color: #ffb1b1;
  background: rgba(255,107,107,.16);
  border-color: rgba(255,107,107,.42);
}
.meet-state {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-blue);
  background: rgba(0,188,212,.1);
  border: 1px solid rgba(0,188,212,.3);
}
.meet-state--upcoming { color: #7a5200; background: rgba(245,181,58,.16); border-color: rgba(245,181,58,.45) }
.meet-state--on-dark { color: var(--c-aqua); background: rgba(127,231,243,.12); border-color: rgba(127,231,243,.3) }
.meet-state--upcoming.meet-state--on-dark { color: var(--c-gold); background: rgba(245,181,58,.12); border-color: rgba(245,181,58,.35) }

/* Карточка соревнования */
.meet-card {
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--c-shadow);
  border: 1px solid rgba(13, 74, 140, .06);
  overflow: hidden;
  margin-bottom: 28px;
}
.meet-card__head {
  position: relative;
  padding: 30px clamp(22px, 4vw, 40px) 28px;
  background: var(--grad-deep);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.meet-card__head::before,
.live-meet::before,
.rec-current::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 0%, rgba(0,188,212,.32), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(127,231,243,.16), transparent 50%);
  z-index: -1;
}
.meet-card__badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px }
.meet-card__src {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-aqua);
  background: rgba(127,231,243,.12);
  border: 1px solid rgba(127,231,243,.25);
}
.meet-card__title { color: #fff; font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 20px; max-width: 60ch }
.meet-card__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.meet-card__facts div {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.meet-card__facts dt {
  margin-bottom: 4px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.meet-card__facts dd { margin: 0; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.35 }
.meet-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 28px;
  align-items: center;
  padding: 22px clamp(22px, 4vw, 40px) 24px;
}
.meet-card__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end }

.meet-progress { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.meet-progress__num { font-size: 14px; color: var(--c-text-2) }
.meet-progress__num b { font-family: var(--font-display); font-size: 18px; color: var(--c-navy) }
.meet-progress__bar {
  -webkit-appearance: none; appearance: none;
  display: block;
  width: 100%; height: 10px;
  border: 0; border-radius: 999px;
  background: var(--c-foam);
  color: var(--c-cyan);
  overflow: hidden;
}
.meet-progress__bar::-webkit-progress-bar { background: var(--c-foam); border-radius: 999px }
.meet-progress__bar::-webkit-progress-value { background: var(--grad-cyan); border-radius: 999px }
.meet-progress__bar::-moz-progress-bar { background: var(--grad-cyan); border-radius: 999px }
.meet-progress--dark .meet-progress__num { color: rgba(255,255,255,.78) }
.meet-progress--dark .meet-progress__num b { color: #fff }
.meet-progress--dark .meet-progress__bar,
.meet-progress--dark .meet-progress__bar::-webkit-progress-bar { background: rgba(255,255,255,.12) }
.meet-progress--dark .meet-progress__bar::-webkit-progress-value { background: var(--grad-aqua) }
.meet-progress--dark .meet-progress__bar::-moz-progress-bar { background: var(--grad-aqua) }

.meet-sync {
  grid-column: 1 / -1;
  display: flex; gap: 10px; align-items: baseline;
  margin: 0; padding-top: 14px;
  border-top: 1px solid var(--c-line);
  font-size: 13px; color: var(--c-muted);
}
.meet-sync::before {
  content: ''; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-blue);
}
.meet-sync--live::before { background: var(--c-cyan); animation: ping 2s infinite }
.meet-sync--demo::before { background: var(--c-gold) }

/* Вкладки представлений и фильтры */
.meet-tabs { margin-bottom: 18px }
.pill:focus-visible,
.tag-chip:focus-visible,
.meet-day:focus-visible,
.pdf-btn:focus-visible { outline: 3px solid rgba(0,188,212,.55); outline-offset: 2px }
.meet-filters__group { display: flex; gap: 6px; flex-wrap: wrap; margin-right: 6px }
.filters .tag-chip { padding: 8px 14px }
.filters input[type='search'] { flex: 1 1 200px }
.meet-filters__count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--c-muted); white-space: nowrap }

/* Дни соревнования */
.meet-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.meet-days[hidden] { display: none }
.meet-day {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--c-line);
  text-align: left;
  color: var(--c-text);
  transition: all var(--t-base);
}
.meet-day:hover { border-color: var(--c-cyan); transform: translateY(-2px); box-shadow: var(--c-shadow-sm) }
.meet-day__name { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--c-navy) }
.meet-day__date { font-size: 14px; color: var(--c-text-2) }
.meet-day__meta { margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted) }
.meet-day.is-active {
  background: var(--grad-deep);
  border-color: transparent;
  box-shadow: var(--c-shadow-sm);
}
.meet-day.is-active .meet-day__name { color: #fff }
.meet-day.is-active .meet-day__date { color: rgba(255,255,255,.82) }
.meet-day.is-active .meet-day__meta { color: var(--c-aqua) }
.meet-day--now::after {
  content: ''; position: absolute; top: 18px; right: 18px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-coral);
  animation: ping-red 1.5s infinite;
}

/* Сессии: шапка — .result-block__head, ниже — таблица протоколов */
.session .result-block__head h3 { font-size: 20px }
.proto-wrap { overflow-x: auto }
.proto { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums }
.proto th {
  padding: 11px 10px;
  text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-muted);
  background: var(--c-light);
  border-bottom: 1px solid var(--c-line);
}
.proto td { padding: 11px 10px; border-bottom: 1px solid var(--c-line); vertical-align: middle }
.proto th:first-child, .proto td:first-child { padding-left: 18px }
.proto th:last-child, .proto td:last-child { padding-right: 18px }
.proto tbody tr:last-child td { border-bottom: 0 }
.proto__row { transition: background var(--t-fast) }
.proto__row:hover { background: rgba(0,188,212,.06) }
.proto__n { width: 40px; font-weight: 700; color: var(--c-muted) }
.proto__time { font-weight: 700; color: var(--c-blue); white-space: nowrap }
.proto__dist { font-weight: 600; color: var(--c-navy); white-space: nowrap }
.proto__g, .proto__round { color: var(--c-text-2) }
.proto__age { color: var(--c-text-2); white-space: nowrap }
.proto__none { color: var(--c-muted) }
.proto__row--award { background: rgba(245,181,58,.06) }
.proto__row--award .proto__dist { font-weight: 500; color: var(--c-text-2) }
.proto__row--next { background: rgba(0,188,212,.09) }
.proto__row--next td:first-child { box-shadow: inset 4px 0 0 var(--c-cyan) }

.pstatus {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pstatus::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.pstatus--res { color: #00707c; background: rgba(0,188,212,.12) }
.pstatus--start { color: var(--c-blue); background: rgba(13,74,140,.08) }
.pstatus--wait { color: var(--c-muted); background: var(--c-light); box-shadow: inset 0 0 0 1px var(--c-line) }
.pstatus--award { color: #7a5200; background: rgba(245,181,58,.18) }
.next-badge {
  display: inline-block;
  margin-left: 6px; padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-aqua);
  background: var(--c-navy);
}

/* Кнопки PDF-протоколов */
.pdf-pair { display: inline-flex; gap: 6px }
.pdf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--c-foam); color: var(--c-blue);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: all var(--t-fast);
}
.pdf-btn:hover { background: var(--grad-cyan); color: #fff }
.pdf-btn svg { flex: none }
.pdf-btn.is-off { background: transparent; color: var(--c-muted); border: 1px dashed var(--c-line); cursor: default }

/* Представление «Дистанции» (блоки — .calendar-month) */
.dist-cols { display: grid; gap: 22px }
.dist-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.dist-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.dist-col__title {
  margin: 0 0 10px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-muted);
}
.dist-list { display: flex; flex-direction: column; gap: 8px }
.dist-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--c-foam);
}
.dist-item__d { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--c-navy); white-space: nowrap }
.dist-item__meta { display: flex; flex-direction: column; font-size: 12px; line-height: 1.45; color: var(--c-muted) }
.dist-col__empty { margin: 0; font-size: 14px; color: var(--c-muted) }

.results-empty {
  padding: 36px 26px;
  border-radius: var(--r-lg);
  border: 1px dashed var(--c-line);
  background: #fff;
  text-align: center;
  color: var(--c-text-2);
}
.results-empty__title { margin: 0 0 6px; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--c-navy) }
.results-empty p:last-child { margin-bottom: 0 }

/* Списки соревнований: итоги, архив, главная */
.results-block { margin-bottom: 36px }
.results-block__title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 22px }
.results-block__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 9px;
  border-radius: 999px;
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  color: var(--c-blue);
  background: var(--c-foam);
}
.results-block__note { margin: -8px 0 16px; font-size: 14px; color: var(--c-muted) }
.meet-list { display: flex; flex-direction: column; gap: 12px }
.meet-row__title { margin: 0 0 4px; font-size: 17px; color: var(--c-navy) }
.meet-row__title a { color: inherit }
.meet-row__title a:hover { color: var(--c-cyan) }
.meet-row__actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px }
.archive-panel__summary { margin: 0 0 22px; color: var(--c-text-2) }
.results-more { display: flex; justify-content: center; margin-top: 36px }

.live-strip {
  display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 16px 20px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid rgba(255,107,107,.25);
  box-shadow: var(--c-shadow-sm);
}
.live-strip[hidden] { display: none }
.live-strip__text { display: flex; flex-direction: column; flex: 1 1 320px; margin: 0; line-height: 1.4 }
.live-strip__title { font-weight: 700; color: var(--c-navy) }
.live-strip__meta { font-size: 13px; color: var(--c-muted) }

/* Главная: текущее соревнование и последние итоги */
.home-results__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: start }
.home-results__grid > .meet-loading { grid-column: 1 / -1 }
.live-meet {
  position: relative;
  padding: 30px;
  border-radius: var(--r-xl);
  background: var(--grad-deep);
  color: #fff;
  box-shadow: var(--c-shadow-lg);
  overflow: hidden;
  isolation: isolate;
}
.live-meet__head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 16px }
.live-meet__upd { font-size: 13px; color: rgba(255,255,255,.66) }
.live-meet__title { margin: 0 0 8px; font-size: 24px }
.live-meet__title a { color: #fff }
.live-meet__title a:hover { color: var(--c-aqua) }
.live-meet__meta { margin: 0 0 18px; font-size: 14px; color: rgba(255,255,255,.75) }
.live-meet__sub {
  margin: 22px 0 10px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-aqua);
}
.next-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 24px }
.next-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.next-list__time { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--c-aqua); white-space: nowrap }
.next-list__what { font-size: 14px; color: rgba(255,255,255,.86) }
.live-meet__actions { display: flex; flex-wrap: wrap; gap: 12px }
.home-results__sub { margin: 0 0 16px; font-size: 20px }
.meet-list--compact .meet-row { grid-template-columns: 76px 1fr }
.meet-list--compact .event__day { font-size: 20px }
.meet-list--compact .meet-row__actions { grid-column: 2; flex-direction: row; flex-wrap: wrap }
.home-results__more { margin-top: 18px }

/* Рекорды: протокол «Побитые рекорды по дистанциям» текущего старта */
.rec-current {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px;
  margin: 0 0 32px; padding: 24px 28px;
  border-radius: var(--r-lg);
  background: var(--grad-deep);
  color: #fff;
  box-shadow: var(--c-shadow);
  overflow: hidden;
  isolation: isolate;
}
.rec-current__body { flex: 1 1 420px }
.rec-current__title { margin: 10px 0 4px; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: #fff }
.rec-current__text { max-width: 72ch; margin: 0; font-size: 14px; color: rgba(255,255,255,.76) }
.rec-current__actions { display: flex; flex-wrap: wrap; gap: 10px }
.rec-heading--spaced { margin-top: 40px }
.rec-note { margin-top: 28px; font-size: 14px; color: var(--c-muted) }

.calendar-month--anchor { scroll-margin-top: 110px }

/* Уведомление о неопубликованном протоколе */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 200;
  max-width: min(520px, calc(100% - 32px));
  padding: 14px 20px;
  border-radius: var(--r-md);
  border-left: 4px solid var(--c-cyan);
  background: var(--c-navy);
  color: #fff;
  font-size: 14px;
  box-shadow: var(--c-shadow-lg);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0) }

@media (min-width: 1300px) {
  .proto__round { white-space: nowrap }
}

@media (max-width: 1150px) {
  .meet-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .dist-cols--3 { grid-template-columns: 1fr }
  .home-results__grid { grid-template-columns: 1fr }

  /* строки протоколов → карточки */
  .proto thead { display: none }
  .proto, .proto tbody, .proto tr, .proto td { display: block }
  .proto .proto__row {
    display: grid;
    grid-template-columns: 34px auto minmax(0, 1fr) auto;
    gap: 4px 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-line);
  }
  .proto tbody tr:last-child { border-bottom: 0 }
  .proto td,
  .proto td:first-child,
  .proto td:last-child { padding: 0; border: 0 }
  .proto__n { grid-column: 1; grid-row: 1 / span 2; width: auto }
  .proto__dist { grid-column: 2 / 4; grid-row: 1; white-space: normal }
  .proto__time { grid-column: 4; grid-row: 1; text-align: right }
  .proto__g { grid-column: 2; grid-row: 2; font-size: 13px }
  .proto__round { grid-column: 3; grid-row: 2; font-size: 13px }
  .proto__round::before { content: '· ' }
  .proto__age { grid-column: 4; grid-row: 2; font-size: 13px; text-align: right }
  .proto__status { grid-column: 2 / -1; grid-row: 3; margin-top: 4px }
  .proto__files { grid-column: 2 / -1; grid-row: 4; margin-top: 6px }
  .proto__files:has(.proto__none) { display: none }
  .proto__row--next td:first-child { box-shadow: none }
  .proto__row--next { box-shadow: inset 4px 0 0 var(--c-cyan) }
}

@media (max-width: 760px) {
  .meet-card__head { padding: 24px 20px 22px }
  .meet-card__body { grid-template-columns: 1fr; padding: 20px }
  .meet-card__actions { justify-content: flex-start }
  .meet-filters__count { margin-left: 0; width: 100% }
  .meet-days { grid-template-columns: 1fr; gap: 8px }
  .meet-day { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 40px 12px 16px }
  .meet-day__meta { width: 100%; margin-top: 0 }
  .meet-day--now::after { top: 50%; margin-top: -4px }

  .proto__files .pdf-pair { display: grid; grid-template-columns: 1fr 1fr; width: 100% }
  .proto__files .pdf-btn { padding: 9px 12px }

  .dist-cols--2,
  .dist-cols--3 { grid-template-columns: 1fr }
  .dist-item { grid-template-columns: 56px minmax(0, 1fr) }
  .dist-item .pdf-pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr }

  .meet-row,
  .meet-list--compact .meet-row { grid-template-columns: 74px 1fr }
  .meet-row .meet-row__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap }
  .meet-row .event__day { font-size: 18px }
  .meet-row .event__meta { gap: 2px 12px }
  .results-block__title { font-size: 19px }
  .live-meet { padding: 22px 20px }
  .live-meet__title { font-size: 20px }
  .rec-current { padding: 22px 20px }
}

@media (max-width: 480px) {
  .meet-card__facts { grid-template-columns: 1fr }
}

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .nav { display: none }
  .burger { display: inline-flex }
  .header__row { height: 76px }
  .news-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto }
  .news-grid > article:nth-child(1) { grid-row: auto; grid-column: 1 / -1 }
  .news-grid > article:nth-child(1) .card__media { aspect-ratio: 16/9 }
  .events-row { grid-template-columns: 1fr }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 28px }
  .bio-grid { grid-template-columns: 1fr; gap: 22px }
}

@media (max-width: 760px) {
  .section { padding: 64px 0 }
  .topbar__contacts { gap: 14px; font-size: 12px }
  .banner { padding: 40px 0 76px }
  .banner__inner { grid-template-columns: 1fr; gap: 28px }
  .banner__stats { grid-template-columns: 1fr 1fr }
  .news-grid { grid-template-columns: 1fr }
  .slider__viewport { aspect-ratio: 4/3 }
  .slider__btn { width: 42px; height: 42px }
  .slider__btn--prev { left: 10px }
  .slider__btn--next { right: 10px }
  .slide__content { padding: 22px }
  .footer__top { grid-template-columns: 1fr; gap: 22px }
  .page-body { padding: 40px 0 64px }
  .event { grid-template-columns: 64px 1fr; gap: 14px; padding: 14px }
  .event__cta { display: none }
  .logo__full { display: none }
  .filters select, .filters input { min-width: 0; width: 100% }
}

@media (max-width: 480px) {
  .topbar__row { height: auto; padding: 8px 0; flex-direction: column; align-items: flex-start; gap: 6px }
  .header__cta .search-toggle { display: none }
  .banner__stats { grid-template-columns: 1fr }
}

/* Print */
@media print {
  .header, .footer, .topbar, .banner, .page-head, .slider, .burger { display: none }
  body { background: #fff }
  .page-card { box-shadow: none; border: 0; margin: 0; padding: 0 }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}