:root {
  color-scheme: light dark;
  --bg-top: #eef2f7;
  --bg-bottom: #dce3ee;
  --text: #1c1c1e;
  --text-secondary: #6e6e73;
  --accent: #ff9500;
  --accent2: #ff5e3a;
  --card-bg: rgba(255, 255, 255, 0.55);
  --card-bg-strong: rgba(255, 255, 255, 0.68);
  --card-border: rgba(255, 255, 255, 0.7);
  --specular: rgba(255, 255, 255, 0.9);
  --orb-1: rgba(255, 149, 0, 0.35);
  --orb-2: rgba(88, 86, 214, 0.28);
  --orb-3: rgba(52, 199, 89, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-top: #17171a;
    --bg-bottom: #000000;
    --text: #f5f5f7;
    --text-secondary: #9a9aa0;
    --card-bg: rgba(40, 40, 45, 0.5);
    --card-bg-strong: rgba(48, 48, 54, 0.62);
    --card-border: rgba(255, 255, 255, 0.14);
    --specular: rgba(255, 255, 255, 0.22);
    --orb-1: rgba(255, 149, 0, 0.28);
    --orb-2: rgba(94, 92, 230, 0.3);
    --orb-3: rgba(48, 209, 88, 0.2);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) fixed;
  display: flex;
  justify-content: center;
  padding: clamp(28px, 8vw, 48px) clamp(14px, 5vw, 20px) 80px;
  position: relative;
  overflow-x: hidden;
}

/* Ambient blurred gradient orbs — the "liquid" behind the glass */
body::before, body::after, .orb-3 {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  z-index: -1;
  pointer-events: none;
  animation: drift 22s ease-in-out infinite alternate;
}

body::before {
  width: 46vmax;
  height: 46vmax;
  top: -18vmax;
  left: -14vmax;
  background: var(--orb-1);
}

body::after {
  width: 40vmax;
  height: 40vmax;
  bottom: -16vmax;
  right: -12vmax;
  background: var(--orb-2);
  animation-delay: -8s;
  animation-direction: alternate-reverse;
}

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(4vmax, 3vmax) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

.wrap {
  width: 100%;
  max-width: min(640px, 100%);
  position: relative;
}

.icon {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  display: block;
  object-fit: cover;
  margin: 0 auto 22px;
  box-shadow:
    0 14px 30px rgba(255, 94, 58, 0.35),
    0 2px 0 rgba(255, 255, 255, 0.35) inset;
  position: relative;
}

h1 {
  text-align: center;
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--text) 30%, var(--text-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 36px;
  padding: 0 8px;
}

/* Liquid Glass card base */
.card, .faq-group {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  backdrop-filter: blur(34px) saturate(190%);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.5) inset,
    0 20px 40px -12px rgba(20, 20, 30, 0.18),
    0 2px 8px rgba(20, 20, 30, 0.06);
  position: relative;
  isolation: isolate;
}

/* Specular top highlight — the bright edge glass catches light on */
.card::before, .faq-group::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--specular), transparent);
  opacity: 0.8;
}

.card {
  padding: clamp(20px, 5vw, 26px) clamp(18px, 5vw, 28px);
  margin-bottom: 18px;
}

.card h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card p, .card li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 10px;
}

.card p:last-child, .card li:last-child { margin-bottom: 0; }

.card ul { margin: 0; padding-left: 20px; }

.card a, .faq-body a {
  color: var(--accent2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 94, 58, 0.35);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.card a:hover, .faq-body a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.card a:visited, .faq-body a:visited {
  color: var(--accent2);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 1px var(--accent);
  display: inline-block;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, #2c2c2e, #101012);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 12px 24px -8px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 18px;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 16px 30px -8px rgba(0, 0, 0, 0.5);
}

.btn:active { transform: translateY(0); }

.footer {
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 32px;
}

.footer a { color: var(--text-secondary); }

nav.pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  row-gap: 6px;
  margin-bottom: 28px;
  font-size: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 5px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 1px 1px rgba(255,255,255,0.5) inset, 0 8px 20px rgba(20,20,30,0.1);
}

nav.pages a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

nav.pages a.active {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 4px 12px rgba(255, 94, 58, 0.35);
}

.lang-switcher {
  display: flex;
  justify-content: center;
  margin: 0 0 28px;
}

.lang-switcher select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 1px rgba(255,255,255,0.5) inset, 0 8px 20px rgba(20,20,30,0.1);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 32px 8px 16px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e73' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.app-store-badge {
  display: flex;
  justify-content: center;
  margin: 0 0 22px;
}

.app-store-badge img {
  height: 44px;
  width: auto;
  display: block;
  border-radius: 8px;
  filter: drop-shadow(0 6px 14px rgba(20, 20, 30, 0.25));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.app-store-badge:hover img {
  transform: translateY(-1px);
  filter: drop-shadow(0 8px 18px rgba(20, 20, 30, 0.32));
}

.cookie-consent {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 999;
  width: min(560px, calc(100% - 28px));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--card-bg-strong);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  box-shadow: 0 1px 1px rgba(255,255,255,0.5) inset, 0 16px 40px -10px rgba(20,20,30,0.35);
}

/* The [hidden] attribute is overridden by any author-CSS `display` rule of equal or higher
   specificity — .cookie-consent's own `display: flex` above defeats the browser's built-in
   `[hidden] { display: none }`, so toggling .hidden via JS silently does nothing without this. */
.cookie-consent[hidden] {
  display: none;
}

.cookie-consent p {
  flex: 1 1 220px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}

.cookie-consent p a {
  color: var(--accent2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 94, 58, 0.35);
}

.cookie-consent-buttons {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.cookie-consent-buttons button {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cookie-consent-buttons button:active { transform: translateY(1px); }

#cookieAccept {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 4px 12px rgba(255, 94, 58, 0.35);
}

#cookieDecline {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--card-border);
}

@media (max-width: 480px) {
  .cookie-consent { flex-direction: column; align-items: stretch; bottom: 10px; padding: 14px 16px; }
  .cookie-consent-buttons { margin-left: 0; width: 100%; }
  .cookie-consent-buttons button { flex: 1 1 0; }
}

a, .btn { word-break: break-word; overflow-wrap: break-word; }

.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 34px 6px 12px;
}

.section-title:first-of-type { margin-top: 8px; }

.faq-group {
  overflow: hidden;
  margin-bottom: 8px;
  border-radius: 20px;
}

details.faq {
  border-bottom: 1px solid var(--card-border);
}

details.faq:last-child { border-bottom: none; }

details.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 20px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background 0.15s ease;
}

details.faq summary:hover {
  background: rgba(255, 149, 0, 0.06);
}

details.faq summary::-webkit-details-marker { display: none; }

details.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-top: -4px;
}

details.faq[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

details.faq .faq-body {
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

details.faq .faq-body p { margin: 0 0 8px; }
details.faq .faq-body p:last-child { margin-bottom: 0; }

.gallery-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0 0 20px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 5px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 1px 1px rgba(255,255,255,0.5) inset, 0 8px 20px rgba(20,20,30,0.1);
}

.gallery-tabs button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.gallery-tabs button.active {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 4px 12px rgba(255, 94, 58, 0.35);
}

.gallery-panel[hidden] {
  display: none;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 14px;
  margin: 0 0 18px;
}

.gallery figure {
  margin: 0;
}

.gallery img {
  width: 100%;
  display: block;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.4) inset,
    0 10px 24px -10px rgba(20, 20, 30, 0.25);
}

.gallery figcaption {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 8px;
  padding: 0 4px;
}

@media (max-width: 480px) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .gallery figcaption { font-size: 12px; }

  /* Long translated labels (e.g. Russian "Политика конфиденциальности", French "Politique
     de confidentialité") can't shrink below their own text width in a single shared pill —
     wrapping the text or the row still spills past (or looks lopsided against) the rounded
     background. Below this width, stop trying to fit everything in one capsule and stack
     each link as its own full-width rounded button instead — clean in every language
     regardless of label length. */
  nav.pages {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
  }
  nav.pages a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
    white-space: normal;
    border-radius: 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 1px 1px rgba(255,255,255,0.5) inset, 0 8px 20px rgba(20,20,30,0.1);
  }
  .card { border-radius: 18px; }
  .card h2 { font-size: 16px; }
  .card p, .card li { font-size: 14px; }
  .btn { font-size: 15px; padding: 14px 16px; }
  details.faq summary { padding: 14px 16px; font-size: 14px; }
  details.faq .faq-body { padding: 0 16px 16px; font-size: 14px; }
  .section-title { font-size: 12px; margin: 26px 4px 10px; }
}