/* ============================================================
   وجبة متوازنة للرجال — неон-темный пресет M
   ============================================================ */

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

/* ---------- Реєстрація властивостей для mesh-градієнта ---------- */
@property --rp-x { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --rp-y { syntax: '<percentage>'; inherits: false; initial-value: 30%; }

/* ---------- Тематичні CSS-змінні ---------- */
:root {
  --rp-bg: #0D1117;
  --rp-deep: #080B10;
  --rp-surface: #161B26;
  --rp-surface-2: #1C2432;
  --rp-tone: #2EE6D6;
  --rp-tone-hover: #7CF5EA;
  --rp-violet: #8B7BFF;
  --rp-amber: #F5B942;
  --rp-rose: #FF6B8A;
  --rp-ink: #E6EDF3;
  --rp-muted: #A7B1C0;
  --rp-placeholder: #7F8A9B;
  --rp-line: rgba(255, 255, 255, 0.08);
  --rp-glow: rgba(46, 230, 214, 0.35);
  --rp-gradient: linear-gradient(135deg, #2EE6D6 0%, #8B7BFF 100%);
  --rp-radius: 16px;
  --rp-pill: 999px;
  --rp-shadow: 0 30px 80px -12px rgba(0, 0, 0, 0.7), 0 0 40px rgba(46, 230, 214, 0.12);
  --rp-pad: 10dvh;
  --font-display: 'Montserrat', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* ---------- Базові стилі ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--rp-bg);
  color: var(--rp-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-x: hidden;
}
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.25;
  margin: 0 0 0.6em;
  color: var(--rp-ink);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--rp-tone); }
a:hover { color: var(--rp-tone-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible, label:focus-visible {
  outline: 3px solid var(--rp-tone);
  outline-offset: 3px;
}
img { max-width: 100%; height: auto; display: block; }
ol, ul { padding-inline-start: 1.2rem; }

.rp-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.rp-skip {
  position: absolute; inset-inline-start: 1rem; top: -120px; z-index: 100;
  background: var(--rp-tone); color: var(--rp-bg);
  padding: 0.6rem 1rem; border-radius: 10px; text-decoration: none; font-weight: 700;
}
.rp-skip:focus { top: 1rem; }

.rp-wrap { width: min(1180px, 92%); margin-inline: auto; }
.rp-narrow { max-width: 820px; }
.rp-center { text-align: center; margin-inline: auto; }
.rp-kicker {
  color: var(--rp-tone); font-family: var(--font-display);
  font-size: 0.9rem; letter-spacing: 0.06em; margin: 0 0 0.5rem;
}
.rp-hl { color: var(--rp-tone); font-weight: 600; }
.rp-lead { font-size: 1.15rem; color: var(--rp-muted); max-width: 640px; }
.rp-neon {
  text-shadow: 0 0 18px var(--rp-tone), 0 0 50px rgba(46, 230, 214, 0.6);
}
.rp-neon-soft { text-shadow: 0 0 12px rgba(46, 230, 214, 0.35); }
.rp-eyebrow {
  display: inline-block; color: var(--rp-tone);
  border: 1px solid var(--rp-tone); border-radius: var(--rp-pill);
  padding: 0.3rem 0.95rem; font-size: 0.9rem; margin-bottom: 1.2rem;
}

/* ---------- Шапка ---------- */
.rp-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--rp-deep);
  border-bottom: 1px solid var(--rp-line);
}
.rp-head-inner {
  position: relative;
  width: min(1180px, 92%); margin-inline: auto;
  min-height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.rp-brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--rp-ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
}
.rp-brand:hover { color: var(--rp-ink); }
.rp-logo { color: var(--rp-tone); filter: drop-shadow(0 0 8px var(--rp-tone)); flex-shrink: 0; }
.rp-menu-check {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.rp-burger {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0.5rem; cursor: pointer; position: relative;
}
.rp-bar {
  display: block; width: 26px; height: 2px; border-radius: 2px;
  background: var(--rp-tone); box-shadow: 0 0 8px var(--rp-tone);
}
.rp-menu-check:focus-visible ~ .rp-burger { outline: 3px solid var(--rp-tone); outline-offset: 3px; }
.rp-site-nav {
  display: none;
  position: absolute; top: 100%; inset-inline: 0;
  flex-direction: column;
  background: var(--rp-deep);
  padding: 0.5rem 4% 1rem;
  border-bottom: 1px solid var(--rp-line);
}
.rp-menu-check:checked ~ .rp-site-nav { display: flex; }
.rp-site-nav a {
  color: var(--rp-ink); text-decoration: none;
  padding: 0.75rem 0; border-bottom: 1px solid var(--rp-line);
  transition: color 0.2s ease;
}
.rp-site-nav a:hover, .rp-site-nav a:focus-visible, .rp-site-nav a[aria-current="page"] { color: var(--rp-tone); }
.rp-progress {
  position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background: var(--rp-gradient);
  transform: scaleX(0); transform-origin: left center;
}
@supports (animation-timeline: scroll()) {
  .rp-progress { animation: rp-progress-grow linear both; animation-timeline: scroll(root block); }
}
@keyframes rp-progress-grow { to { transform: scaleX(1); } }

@media (min-width: 860px) {
  .rp-burger { display: none; }
  .rp-site-nav {
    display: flex; position: static; flex-direction: row; gap: 1.8rem;
    background: none; border: 0; padding: 0;
  }
  .rp-site-nav a { border: 0; padding: 0.3rem 0; }
}

/* ---------- Кнопки ---------- */
.rp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.8rem 1.7rem;
  border: 2px solid var(--rp-tone); border-radius: var(--rp-pill);
  background: transparent; color: var(--rp-tone);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.rp-btn:hover { background: var(--rp-tone); color: var(--rp-bg); box-shadow: 0 0 20px var(--rp-tone); }
.rp-btn-alt { border-color: rgba(230, 237, 243, 0.35); color: var(--rp-ink); }
.rp-btn-alt:hover { border-color: var(--rp-tone); background: var(--rp-tone); color: var(--rp-bg); }
.rp-btn-solid { background: var(--rp-tone); color: var(--rp-bg); }
.rp-btn-solid:hover { background: var(--rp-tone-hover); color: var(--rp-bg); }
.rp-btn-pulse { animation: rp-neon-pulse 3.2s ease-in-out infinite; }
@keyframes rp-neon-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(46, 230, 214, 0); }
  50% { box-shadow: 0 0 22px rgba(46, 230, 214, 0.55); }
}
.rp-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* ---------- Hero з mesh-градієнтом ---------- */
.rp-hero {
  position: relative; overflow: clip;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center;
  background: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82)), url("img/bg.webp") center / cover no-repeat;
}
.rp-mesh {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at var(--rp-x) var(--rp-y), rgba(46, 230, 214, 0.28), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(139, 123, 255, 0.25), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(46, 230, 214, 0.12), transparent 40%);
  animation: rp-mesh-drift 24s ease-in-out infinite alternate;
}
@keyframes rp-mesh-drift {
  from { --rp-x: 12%; --rp-y: 22%; }
  to { --rp-x: 72%; --rp-y: 62%; }
}
.rp-hero-inner {
  position: relative; z-index: 1;
  width: min(1180px, 92%); margin-inline: auto;
  padding-block: 14dvh 10dvh;
}
.rp-page-hero { padding-block: calc(var(--rp-pad) * 1.3) var(--rp-pad); }

/* ---------- Секції ---------- */
.rp-band { position: relative; padding-block: var(--rp-pad); overflow: clip; }
.rp-band-deep { background: var(--rp-deep); }
.rp-heading { margin-bottom: 2.4rem; max-width: 720px; }
.rp-bg3-band {
  background: linear-gradient(rgba(8, 11, 16, 0.88), rgba(8, 11, 16, 0.93)), url("img/bg3.webp") center / cover no-repeat;
}
.rp-bg2-band {
  background: linear-gradient(rgba(8, 11, 16, 0.9), rgba(8, 11, 16, 0.94)), url("img/bg2.webp") center / cover no-repeat;
}
.rp-split {
  display: grid; gap: 2.5rem; align-items: center;
}
@media (min-width: 860px) { .rp-split { grid-template-columns: 1fr 1fr; } }
.rp-figure {
  margin: 0; border-radius: var(--rp-radius); overflow: hidden;
  box-shadow: 0 0 40px rgba(46, 230, 214, 0.35);
}
.rp-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Clip-reveal зображень (тільки якщо підтримується view timeline) */
@supports (animation-timeline: view()) {
  .rp-clip-img {
    animation: rp-clip-open linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
  }
}
@keyframes rp-clip-open {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Плавна поява форми один раз (лише opacity, без зсувів) */
@supports (animation-timeline: view()) {
  .rp-fade-once {
    animation: rp-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}
@keyframes rp-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Картки та плитки ---------- */
.rp-tiles { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rp-tile, .rp-info, .rp-principle {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--rp-radius);
  padding: 1.6rem;
  transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.rp-tile:hover { border-color: var(--rp-tone); box-shadow: 0 0 25px rgba(46, 230, 214, 0.3); }
.rp-tile p, .rp-info p, .rp-principle p { color: var(--rp-muted); margin: 0; }
.rp-info { background: var(--rp-surface); display: grid; gap: 0.9rem; align-content: start; }
.rp-info:hover { border-color: var(--rp-tone); box-shadow: 0 0 25px rgba(46, 230, 214, 0.25); }
.rp-icon {
  width: 46px; height: 46px; margin-bottom: 0.9rem;
  color: var(--rp-tone); fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.rp-numlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.rp-numlist li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--rp-muted); }
.rp-badge {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  color: var(--rp-bg);
}
.rp-b1 { background: var(--rp-tone); }
.rp-b2 { background: var(--rp-violet); }
.rp-b3 { background: var(--rp-amber); }
.rp-b4 { background: var(--rp-rose); }

/* Стан появи для JS-анімації (лише за наявності класу .js) */
.js .rp-stagger:not(.is-in) { opacity: 0; transform: translateY(24px); }

/* Принципи без цифр */
.rp-principles { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rp-principle {
  background: rgba(255, 255, 255, 0.03);
  border-inline-start: 3px solid var(--rp-tone);
  border-radius: var(--rp-radius);
}

/* ---------- Timeline з неон-кружками ---------- */
.rp-timeline {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.4rem; max-width: 760px;
}
.rp-step { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.rp-step h3 { margin-bottom: 0.3rem; }
.rp-step p { color: var(--rp-muted); margin: 0; }
.rp-dot {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rp-bg); border: 2px solid var(--rp-tone); color: var(--rp-tone);
  font-family: var(--font-display); font-weight: 700;
  box-shadow: 0 0 15px var(--rp-tone);
}

/* ---------- CTA strip ---------- */
.rp-cta-strip { background: var(--rp-bg); text-align: center; }
.rp-cta-inner { display: grid; justify-items: center; gap: 1rem; }
.rp-cta-inner h2 { text-shadow: 0 0 18px rgba(46, 230, 214, 0.4); }
.rp-cta-inner p { color: var(--rp-muted); max-width: 560px; }
.rp-thanks { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; }

/* ---------- FAQ (CSS only accordion) ---------- */
.rp-faq {
  background: var(--rp-surface); border: 1px solid var(--rp-line);
  border-radius: var(--rp-radius); padding: 1rem 1.3rem; margin-bottom: 0.8rem;
}
.rp-faq summary {
  cursor: pointer; font-weight: 700; color: var(--rp-ink);
  list-style: none; font-family: var(--font-display);
}
.rp-faq summary::-webkit-details-marker { display: none; }
.rp-faq summary::after { content: "+"; float: inline-end; color: var(--rp-tone); font-size: 1.2rem; line-height: 1.2; }
.rp-faq[open] summary::after { content: "–"; }
.rp-faq p { color: var(--rp-muted); margin: 0.7rem 0 0; }

/* ---------- Форма ---------- */
.rp-form-card {
  max-width: 600px; margin-inline: auto;
  background: var(--rp-surface); border: 1px solid var(--rp-line);
  border-radius: var(--rp-radius);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  box-shadow: var(--rp-shadow);
}
.rp-field { display: grid; gap: 0.5rem; margin-bottom: 1.4rem; }
.rp-field label { font-weight: 600; color: var(--rp-ink); }
.rp-field input, .rp-field textarea {
  width: 100%; font: inherit; color: var(--rp-ink);
  background: var(--rp-deep); border: 0;
  border-bottom: 2px solid var(--rp-line);
  border-radius: 10px 10px 0 0;
  padding: 0.85rem 1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.rp-field textarea { resize: vertical; min-height: 120px; }
.rp-field input:focus, .rp-field textarea:focus {
  outline: none; border-bottom-color: var(--rp-tone);
  box-shadow: 0 2px 14px -2px var(--rp-glow);
}
.rp-field ::placeholder { color: var(--rp-placeholder); opacity: 1; }
.rp-consent { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0.5rem 0 1.6rem; }
.rp-consent input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 0.35rem; flex-shrink: 0;
  accent-color: var(--rp-tone);
}
.rp-consent label { color: var(--rp-muted); }
.rp-consent a { color: var(--rp-tone); }

/* ---------- Документи (privacy / terms) ---------- */
.rp-doc {
  min-height: 100vh; min-height: 100dvh;
  padding-block: calc(var(--rp-pad) * 1.3) var(--rp-pad);
}
.rp-doc .rp-wrap { max-width: 820px; }
.rp-doc p { color: var(--rp-muted); }
.rp-doc h2 { margin-top: 2.4rem; color: var(--rp-ink); }
.rp-doc section { scroll-margin-top: 90px; }

/* ---------- Футер ---------- */
.rp-foot {
  background: var(--rp-deep); border-top: 1px solid var(--rp-line);
  padding: 3.5rem 0 2rem;
}
.rp-foot-inner {
  width: min(1180px, 92%); margin-inline: auto;
  display: grid; gap: 1.2rem; justify-items: start;
}
.rp-foot-links { display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; }
.rp-foot-links a { color: var(--rp-ink); text-decoration: none; }
.rp-foot-links a:hover { color: var(--rp-tone); }
.rp-disclaimer { color: var(--rp-muted); font-size: 0.95rem; margin: 0; max-width: 70ch; }
.rp-copy { color: var(--rp-muted); font-size: 0.9rem; margin: 0; }

/* ---------- Cookie-банер ---------- */
.rp-cookie {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 9999;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1.1rem 5%;
  background: var(--rp-surface-2);
  border-top: 1px solid var(--rp-tone);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}
.rp-cookie p { margin: 0; max-width: 60ch; color: var(--rp-ink); }
.rp-cookie-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.rp-cookie .rp-btn { min-height: 44px; padding: 0.6rem 1.2rem; }

/* ---------- Адаптивність ---------- */
@media (max-width: 480px) {
  body { font-size: 1rem; }
  .rp-actions .rp-btn { width: 100%; }
  .rp-cookie { padding: 1rem 4%; }
  .rp-cookie-actions .rp-btn { flex: 1 1 auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html { view-transition-name: none; }
}