/* ===== Анімаційний шар: міжсторінкові переходи ===== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.35s ease both vt-out; }
::view-transition-new(root) { animation: 0.45s ease both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ===== Реєстрація властивостей для mesh-градієнта ===== */
@property --mh-x1 { syntax: '<percentage>'; inherits: false; initial-value: 12%; }
@property --mh-y1 { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --mh-x2 { syntax: '<percentage>'; inherits: false; initial-value: 88%; }
@property --mh-y2 { syntax: '<percentage>'; inherits: false; initial-value: 28%; }
@property --mh-x3 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --mh-y3 { syntax: '<percentage>'; inherits: false; initial-value: 92%; }

/* ===== Тематичні змінні (тема: dark, пресет F — Corporate Gradient) ===== */
:root {
  --mh-bg: #0D1117;
  --mh-surface: #161B26;
  --mh-surface-2: #1E2633;
  --mh-tone: #22D3EE;
  --mh-tone-hover: #67E8F9;
  --mh-violet: #A78BFA;
  --mh-ink: #E6EDF3;
  --mh-muted: #A9B7C6;
  --mh-line: rgba(148, 163, 184, 0.22);
  --mh-gradient: linear-gradient(120deg, #0B2540 0%, #0E5A73 55%, #4C1D95 100%);
  --mh-gradient-soft: linear-gradient(160deg, #131A26 0%, #0B1220 100%);
  --mh-shadow-deep: 0 24px 60px -18px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--mh-line);
  --mh-radius: 16px;
  --mh-radius-lg: 20px;
  --mh-pad: 10dvh;
  --font-display: 'Montserrat', 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', Tahoma, sans-serif;
  --font-body: 'Inter', 'Noto Naskh Arabic', Tahoma, Arial, sans-serif;
}

/* ===== Базова типографіка ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mh-bg);
  color: var(--mh-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.9;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.4; margin: 0 0 0.6em; color: var(--mh-ink); }
h1 { font-size: clamp(1.9rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.3rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; color: var(--mh-muted); }
a { color: var(--mh-tone); }
img { max-width: 100%; height: auto; display: block; }
ol, ul { margin: 0; }
:focus-visible { outline: 3px solid var(--mh-tone-hover); outline-offset: 3px; }

/* ===== Header (пресет F: gradient, drop-shadow, nav справа/початок) ===== */
.mh-header-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mh-gradient);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
.mh-progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--mh-tone);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .mh-progress { animation: mh-grow linear both; animation-timeline: scroll(root); }
}
@keyframes mh-grow { to { transform: scaleX(1); } }

.mh-header-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
}
.mh-brand svg { flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }
.mh-footer .mh-brand { color: var(--mh-ink); }

.mh-nav-wrap { display: block; }
.mh-nav-list { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.mh-nav-list a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 6px 2px;
  position: relative;
}
.mh-nav-list a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -4px;
  height: 2px;
  background: var(--mh-tone);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.mh-nav-list a[aria-current="page"]::after,
.mh-nav-list a:hover::after { transform: scaleX(1); }

.mh-menu-check { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.mh-menu-btn {
  display: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.mh-menu-btn span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; }

@media (max-width: 860px) {
  .mh-menu-btn { display: flex; }
  .mh-nav-wrap {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    background: #0B2540;
    padding: 8px 20px 18px;
    box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.6);
  }
  .mh-menu-check:checked ~ .mh-nav-wrap { display: block; }
  .mh-nav-list { flex-direction: column; gap: 0; }
  .mh-nav-list a { display: block; padding: 12px 4px; }
}

/* ===== Кнопки (статичні; лише колір і scale ≤ 1.04 на hover) ===== */
.mh-btn-solid, .mh-btn-line, .mh-btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--mh-radius);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, scale 0.25s ease;
}
.mh-btn-solid {
  background: var(--mh-tone);
  color: #0B1220;
  box-shadow: 0 10px 26px -10px rgba(34, 211, 238, 0.6);
}
.mh-btn-solid:hover { background: var(--mh-tone-hover); scale: 1.03; }
.mh-btn-line {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.mh-btn-line:hover { background: rgba(255, 255, 255, 0.08); }
.mh-btn-dark {
  background: #0B1220;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.mh-btn-dark:hover { background: #111A2A; scale: 1.03; }

/* ===== Hero ===== */
.mh-hero-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  text-align: center;
  padding: var(--mh-pad) 20px;
  background:
    linear-gradient(180deg, rgba(13, 17, 23, 0.82), rgba(13, 17, 23, 0.94)),
    url("img/bg.webp") center / cover no-repeat,
    var(--mh-bg);
}
.mh-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--mh-x1) var(--mh-y1), rgba(34, 211, 238, 0.28), transparent 45%),
    radial-gradient(circle at var(--mh-x2) var(--mh-y2), rgba(167, 139, 250, 0.26), transparent 50%),
    radial-gradient(circle at var(--mh-x3) var(--mh-y3), rgba(14, 116, 144, 0.35), transparent 55%);
  animation: mh-drift 26s ease-in-out infinite alternate;
}
@keyframes mh-drift {
  from { --mh-x1: 12%; --mh-y1: 18%; --mh-x2: 88%; --mh-y2: 28%; --mh-x3: 50%; --mh-y3: 92%; }
  to { --mh-x1: 34%; --mh-y1: 46%; --mh-x2: 66%; --mh-y2: 72%; --mh-x3: 22%; --mh-y3: 58%; }
}
.mh-hero-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.mh-hero-inner h1 { color: #fff; }
.mh-hero-lead { font-size: 1.1rem; color: var(--mh-muted); max-width: 640px; margin: 0 auto 28px; }
.mh-hero-plain {
  position: relative;
  text-align: center;
  padding: calc(var(--mh-pad) * 0.7) 20px;
  background: var(--mh-gradient-soft);
  border-bottom: 1px solid var(--mh-line);
}
.mh-hero-plain .mh-hero-lead { margin-bottom: 0; }
.mh-eyebrow {
  display: inline-block;
  color: var(--mh-tone);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 10px;
  font-family: var(--font-display);
}
.mh-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.mh-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin-top: 44px;
}
.mh-trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mh-ink);
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--mh-line);
  border-radius: 999px;
  padding: 8px 16px;
}
.mh-ico-sm { width: 16px; height: 16px; color: var(--mh-tone); flex: none; }

/* ===== Секції ===== */
.mh-band {
  position: relative;
  padding: var(--mh-pad) 20px;
  overflow: clip;
  background: var(--mh-bg);
}
.mh-band-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.mh-band-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.mh-band-head p { margin-inline: auto; }
.mh-alt { background: var(--mh-gradient-soft); }
.mh-rules-band {
  background:
    linear-gradient(180deg, rgba(13, 17, 23, 0.93), rgba(13, 17, 23, 0.97)),
    url("img/bg2.webp") center / cover no-repeat,
    var(--mh-bg);
}
.mh-principles-band {
  background:
    linear-gradient(180deg, rgba(13, 17, 23, 0.92), rgba(13, 17, 23, 0.97)),
    url("img/bg2.webp") center / cover no-repeat,
    var(--mh-bg);
}
.mh-sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Scroll-driven: плавна поява секцій (лише opacity) */
@supports (animation-timeline: view()) {
  .mh-view-in {
    animation: mh-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
}
@keyframes mh-fade-in { from { opacity: 0.15; } to { opacity: 1; } }

/* ===== Картки ===== */
.mh-tile {
  position: relative;
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-lg);
  padding: 26px;
  box-shadow: var(--mh-shadow-deep);
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.3s ease;
}
.mh-tile > * { position: relative; z-index: 1; }
.mh-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(34, 211, 238, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mh-tile:hover::after { opacity: 1; }
.mh-tile h3 { margin-bottom: 8px; }
.mh-tile p { margin: 0; }

.mh-orb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mh-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px -8px rgba(34, 211, 238, 0.6);
  flex: none;
}
.mh-ico { width: 26px; height: 26px; }

.mh-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 18px;
  scrollbar-width: thin;
}
.mh-track > * { flex: 0 0 min(82%, 300px); scroll-snap-align: start; }
@media (min-width: 900px) {
  .mh-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    overflow: visible;
    padding: 0;
  }
  .mh-track > * { flex: none; }
}

.mh-pillars { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mh-pillars { grid-template-columns: repeat(2, 1fr); } }
.mh-pillar:hover {
  background: var(--mh-gradient);
  border-color: transparent;
}
.mh-pillar:hover h3,
.mh-pillar:hover p { color: #fff; }
.mh-pillar:hover .mh-orb { background: #fff; color: #0E5A73; }

.mh-cards-3 { display: grid; gap: 20px; }
@media (min-width: 860px) { .mh-cards-3 { grid-template-columns: repeat(3, 1fr); } }

.mh-num-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.mh-num-list li { display: flex; gap: 12px; align-items: center; color: var(--mh-ink); }
.mh-num-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: #0B1220;
  background: var(--mh-tone);
}
.mh-num-list li:nth-child(2n) .mh-num-badge { background: var(--mh-violet); }
.mh-num-list li:nth-child(3n) .mh-num-badge { background: #34D399; }

/* ===== Процес ===== */
.mh-steps { list-style: none; padding: 0; display: grid; gap: 26px; position: relative; }
.mh-step { position: relative; z-index: 1; text-align: center; padding: 0 10px; }
.mh-step-dot {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--mh-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 auto 14px;
  border: 3px solid var(--mh-bg);
}
@media (min-width: 800px) {
  .mh-steps { grid-template-columns: repeat(3, 1fr); }
  .mh-steps::before {
    content: "";
    position: absolute;
    top: 26px;
    inset-inline: 12%;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--mh-tone), var(--mh-violet));
    z-index: 0;
  }
}
.mh-steps:has(.mh-step:nth-child(4))::before { inset-inline: 12%; }
@media (min-width: 800px) {
  .mh-steps:has(.mh-step:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
  .mh-steps:has(.mh-step:nth-child(4))::before { inset-inline: 10%; }
}

/* ===== CTA strip ===== */
.mh-cta-strip {
  background: var(--mh-gradient);
  color: #fff;
  border-radius: var(--mh-radius-lg);
  padding: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: var(--mh-shadow-deep);
}
.mh-cta-strip h2 { color: #fff; margin: 0; max-width: 620px; }

/* ===== About: зображення + текст ===== */
.mh-split-intro { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) {
  .mh-split-intro { grid-template-columns: 2fr 3fr; }
}
.mh-figure { margin: 0; }
.mh-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--mh-radius-lg);
  box-shadow: var(--mh-shadow-deep);
}

/* ===== Reserve: split + форма ===== */
.mh-split { display: grid; gap: 36px; }
@media (min-width: 960px) {
  .mh-split { grid-template-columns: 1fr 1.1fr; align-items: start; }
  .mh-split-side { position: sticky; top: 110px; }
}
.mh-form-panel {
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-lg);
  padding: 28px;
  box-shadow: var(--mh-shadow-deep);
}
.mh-form { display: grid; gap: 16px; }
.mh-field { display: grid; gap: 6px; }
.mh-field label { color: var(--mh-ink); font-weight: 600; }
.mh-field input,
.mh-field textarea {
  width: 100%;
  font: inherit;
  color: var(--mh-ink);
  background: #0B1220;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 13px 14px;
  min-height: 48px;
}
.mh-field textarea { min-height: 120px; resize: vertical; }
.mh-field input::placeholder,
.mh-field textarea::placeholder { color: #7C8BA0; }
.mh-field input:focus,
.mh-field textarea:focus {
  border-color: var(--mh-tone);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.25);
}
.mh-check { display: flex; gap: 10px; align-items: flex-start; color: var(--mh-muted); cursor: pointer; }
.mh-check input { width: 20px; height: 20px; margin-top: 6px; accent-color: var(--mh-tone); flex: none; }
.mh-check a { color: var(--mh-tone-hover); }
.mh-submit { width: 100%; border: 0; cursor: pointer; font-size: 1rem; }

/* ===== FAQ (усі відкриті, CSS only) ===== */
.mh-faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.mh-faq details {
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 16px 20px;
}
.mh-faq summary {
  font-weight: 700;
  color: var(--mh-ink);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
}
.mh-faq summary::-webkit-details-marker { display: none; }
.mh-faq p { margin: 10px 0 0; }

/* ===== Thank page ===== */
.mh-thank-band { background: var(--mh-gradient-soft); }
.mh-thank-box { text-align: center; display: grid; justify-items: center; gap: 4px; }
.mh-thank-fig {
  margin: 0 0 20px;
  width: 100%;
  max-width: 720px;
}
.mh-thank-fig img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--mh-radius-lg);
  box-shadow: var(--mh-shadow-deep);
}
.mh-thank-box .mh-hero-lead { margin-bottom: 24px; }

/* ===== Legal ===== */
.mh-page-min { min-height: 100vh; }
.mh-legal { max-width: 860px; margin: 0 auto; }
.mh-legal h1 { margin-bottom: 0.8em; }
.mh-legal h2 { margin-top: 1.6em; }
.mh-legal section { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--mh-line); }

/* ===== Footer ===== */
.mh-footer {
  background: #070A0F;
  color: var(--mh-muted);
  padding: 44px 20px 30px;
  border-top: 1px solid var(--mh-line);
}
.mh-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; gap: 20px; }
.mh-footer nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0; }
.mh-footer a { color: var(--mh-ink); }
.mh-disclaimer {
  font-size: 0.92rem;
  color: var(--mh-muted);
  border-inline-start: 3px solid var(--mh-tone);
  padding-inline-start: 12px;
  margin: 0;
}
.mh-copy { font-size: 0.88rem; margin: 0; color: var(--mh-muted); }

/* ===== Cookie-банер ===== */
.mh-cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9999;
  background: #0B1220;
  color: var(--mh-ink);
  border-top: 1px solid var(--mh-tone);
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}
.mh-cookie[hidden] { display: none; }
.mh-cookie p { margin: 0; color: var(--mh-ink); max-width: 720px; }
.mh-cookie a { color: var(--mh-tone-hover); }
.mh-cookie div { display: flex; gap: 10px; flex-wrap: wrap; }
.mh-cookie button {
  font: inherit;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--mh-radius);
  border: 1px solid var(--mh-tone);
  cursor: pointer;
}
#accept-cookie { background: var(--mh-tone); color: #0B1220; }
#decline-cookie { background: transparent; color: var(--mh-ink); }
#accept-cookie:hover { background: var(--mh-tone-hover); }
#decline-cookie:hover { background: rgba(255, 255, 255, 0.08); }

/* ===== Reveal (лише при наявності класу .js на html) ===== */
.js .mh-reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.6s ease, translate 0.6s ease, transform 0.3s ease, box-shadow 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}
.js .mh-reveal.is-in { opacity: 1; translate: 0 0; }

/* ===== Доступність руху ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html { view-transition-name: none; }
  .js .mh-reveal { opacity: 1; translate: none; }
}