/* foire. — светлая страница: Frutiger Aero, стекло, вода, переливы как на краях стеклянного диска */
.r-foire { --ink: #13202B; --soft: #5D6C78; --aqua: #4FC3D9; --mint: #8FDCB8; --lilac: #B7A6F0;
  background: #EEF3F6; color: var(--ink); }
.r-foire ::selection { background: #BFEAF2; color: var(--ink); }
.r-foire a:hover { opacity: .65; }

/* стекло */
.fo-glass {
  position: relative; background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.38));
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.85); border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -18px 40px rgba(120,190,210,.12), 0 24px 60px rgba(40,80,110,.14), 0 2px 6px rgba(40,80,110,.06);
}

.fo-top { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding-top: 18px; padding-bottom: 18px; }
.fo-nav { display: flex; gap: 24px; color: var(--soft); }
.fo-nav a { min-height: var(--tap); display: inline-flex; align-items: center; }

/* ── герой: слово под водой, капля-линза */
.fo-hero { position: relative; height: clamp(540px, 88svh, 860px); margin-top: -80px; overflow: hidden; touch-action: pan-y; }
.fo-scene { position: absolute; inset: 0; }
.fo-sky {
  position: absolute; inset: -10%;
  background:
    radial-gradient(40% 50% at 22% 30%, rgba(143, 220, 184, .55), transparent 70%),
    radial-gradient(38% 46% at 78% 26%, rgba(183, 166, 240, .55), transparent 70%),
    radial-gradient(50% 60% at 60% 80%, rgba(79, 195, 217, .45), transparent 70%),
    radial-gradient(30% 30% at 40% 60%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(180deg, #F7FAFB, #E6F0F4);
  animation: fo-drift 26s ease-in-out infinite alternate;
}
@keyframes fo-drift { to { transform: translate(3%, -2%) rotate(2deg) scale(1.05); } }
.fo-word {
  position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%); text-align: center;
  font-weight: 200; font-size: clamp(110px, 24vw, 420px); line-height: 1; letter-spacing: -.06em; color: #16232E;
}
.fo-lens {
  position: absolute; left: 0; top: 0; z-index: 2; width: var(--d, 300px); height: var(--d, 300px); border-radius: 50%; overflow: hidden;
  /* Safari не обрезает по border-radius содержимое с transform — режем кругом явно */
  clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); isolation: isolate;
  transform: translate(var(--x, -999px), var(--y, -999px)) scale(var(--sx, 1), var(--sy, 1)); will-change: transform;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 0 18px 2px rgba(255,255,255,.45), inset 0 -10px 22px rgba(30, 90, 120, .16), 0 30px 60px rgba(30, 70, 100, .1);
}
.fo-lens-in { position: absolute; left: 0; top: 0; width: var(--hw); height: var(--hh); transform-origin: 0 0; will-change: transform; }
.fo-lens-in .fo-word { text-shadow: -3px 0 0 rgba(0, 170, 220, .45), 3px 0 0 rgba(200, 80, 220, .35); }
.fo-lens-in .fo-sky { filter: saturate(1.25); }
.fo-rim { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 200deg, rgba(143,220,184,.0), rgba(143,220,184,.55), rgba(79,195,217,.5), rgba(183,166,240,.55), rgba(255,170,210,.35), rgba(143,220,184,.0) 70%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 72%); mask: radial-gradient(circle, transparent 60%, #000 72%); mix-blend-mode: screen; opacity: .9; }
.fo-shine { position: absolute; left: 16%; top: 8%; width: 34%; height: 16%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)); transform: rotate(-28deg); }
.fo-shadow { position: absolute; left: 0; top: 0; z-index: 1; width: var(--d, 300px); height: var(--d, 300px); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(40, 70, 90, .22), rgba(40, 70, 90, .08) 60%, transparent);
  transform: translate(calc(var(--x, -999px) + var(--d, 300px) * .16), calc(var(--y, -999px) + var(--d, 300px) * .2)) scale(1.04, .98); filter: blur(10px); }
.fo-bubbles { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.fo-bub { position: absolute; bottom: -40px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 14%, rgba(255,255,255,.25) 26%, rgba(170,225,240,.18) 60%, rgba(255,255,255,.6) 74%, rgba(255,255,255,0) 76%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); animation: fo-rise var(--t, 14s) linear forwards; }
@keyframes fo-rise { to { transform: translate(var(--wx, 20px), calc(-1 * var(--h, 900px))); opacity: 0; } }
.fo-hero-bot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 34px; }
.fo-lead { margin: 0; max-width: 460px; font-size: 17px; line-height: 1.5; color: #2E3C47; }
.fo-stats { display: flex; gap: 18px; flex-wrap: wrap; color: var(--soft); font-size: 11px; }

.fo-lead { font-weight: 200; font-size: clamp(34px, 4vw, 58px); line-height: 1; letter-spacing: -.03em; color: #16232E; }

/* ── общие заголовки секций */
.fo-sec-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; color: var(--soft); }
.fo-sec-h h2 { margin: 0; font-weight: 400; font-size: 12px; letter-spacing: .16em; }
.fo-sec-h span { font-size: 12px; letter-spacing: .12em; }

/* ── сет: 19 капель, готовые — прозрачные, остальные запотевшие */
.fo-set { padding-top: 72px; }
.fo-tube { position: relative; height: 10px; border-radius: 999px; margin-bottom: 34px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(220,234,240,.7)); box-shadow: inset 0 1px 2px rgba(30,70,100,.18), 0 1px 0 #fff; }
.fo-tube i { position: absolute; inset: 0 auto 0 0; width: calc(var(--f) * 100%); border-radius: 999px;
  background: linear-gradient(90deg, #8FDCB8, #4FC3D9 60%, #B7A6F0) 0 0 / 200% 100%; box-shadow: inset 0 2px 2px rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,60,90,.15);
  animation: fo-oil 6s linear infinite; transform-origin: 0 50%; }
html.js .fo-tube i { animation: fo-fill 1.8s var(--ease) both, fo-oil 6s linear infinite; }
@keyframes fo-fill { from { transform: scaleX(0); } }
@keyframes fo-oil { to { background-position: 200% 0; } }
/* 19 капель: ряды по центру (10 + 9 на широком экране), без одинокого «хвоста» */
.fo-drops { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 0; max-width: 1180px; }
.fd { flex: 0 0 10%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
@media (max-width: 1000px) { .fd { flex-basis: 20%; } }
@media (max-width: 600px) { .fd { flex-basis: 25%; } .fo-drops { gap: 18px 0; } }
.fd-b { position: relative; display: block; width: min(84px, 78%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(225,236,241,.9), rgba(200,218,226,.75));
  box-shadow: inset 0 1px 1px #fff, inset 0 -6px 12px rgba(30,70,100,.12), 0 8px 18px rgba(30,70,100,.08);
  filter: blur(.4px) saturate(.6); opacity: .7; }
.fd-b::after { content: ""; position: absolute; left: 20%; top: 12%; width: 34%; height: 20%; border-radius: 50%; background: rgba(255,255,255,.7); transform: rotate(-24deg); filter: blur(2px); }
.fd-on .fd-b { filter: none; opacity: 1; animation: fd-bob 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s);
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0 12%, transparent 26%),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.65), transparent 40%),
    conic-gradient(from 200deg, #CFF2EA, #A9E4F0, #D8CEFA, #FBD9EC, #D3F2E2, #CFF2EA);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), inset 0 -10px 18px rgba(30,90,120,.22), inset 0 8px 14px rgba(255,255,255,.6), 0 14px 26px rgba(30,70,100,.18); }
.fd-on .fd-b::after { display: none; }
@keyframes fd-bob { 50% { transform: translateY(-5px) scale(1.02, .98); } }
@keyframes fd-wob { 30% { transform: scale(1.12, .88); } 60% { transform: scale(.94, 1.06); } }
.fd-t { font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.fd:not(.fd-on) .fd-t { font-size: 11px; color: rgba(19,32,43,.35); }
.fd-l { font-size: 10px; letter-spacing: .1em; color: var(--soft); margin-top: -6px; }

.fo-foot { color: var(--soft); }
.r-foire .dock { background: rgba(18, 28, 36, .78); }

/* сниппеты: прозрачная капля — кнопка */
.fd-p { all: unset; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fd-p:focus-visible .fd-b { outline: 2px solid #4FC3D9; outline-offset: 4px; }
.fd-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; }
.fd-ring circle { fill: none; stroke: #2E9BB8; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 301.6; stroke-dashoffset: calc(301.6 * (1 - var(--p, 0))); opacity: 0; transition: opacity .3s; }
.fd.playing .fd-ring circle { opacity: 1; }
.fd.playing .fd-b { animation: fd-pulse .9s ease-in-out infinite; }
@keyframes fd-pulse { 50% { transform: scale(1.06, .95); } }
.fd-b::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.fd.playing .fd-b::before { animation: fd-ripple 1.2s ease-out infinite; box-shadow: 0 0 0 0 rgba(79,195,217,.5); }
@keyframes fd-ripple { to { box-shadow: 0 0 0 22px rgba(79,195,217,0); } }
.fd-on .fd-p:hover .fd-b { animation: fd-wob .7s cubic-bezier(.3,1.6,.5,1); }