@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  color: #f2f3ee;
  font-family: 'Manrope', sans-serif;
  min-height: 100vh;
  position: relative;
  background: #0c0d0c;
}

.bg-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 1100px 800px at 12% 6%, rgba(198,242,74,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 1000px 800px at 90% 30%, rgba(94,234,212,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 1100px 800px at 8% 68%, rgba(94,234,212,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 1000px 800px at 92% 96%, rgba(198,242,74,0.09) 0%, transparent 55%);
}

a { color: #c6f24a; text-decoration: none; }
a:hover { color: #d9ff6e; }

img { max-width: 100%; display: block; }

button { font-family: inherit; }

button, a { transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; }
button:hover, a:hover { filter: brightness(1.1); }
button:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.35); }
button:active { transform: translateY(0) scale(0.97); box-shadow: none; }
a:active { transform: scale(0.98); }

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 64px;
  padding-right: 64px;
}

/* ===== Keyframes ===== */
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(198,242,74,0.5); } 70% { box-shadow: 0 0 0 14px rgba(198,242,74,0); } 100% { box-shadow: 0 0 0 0 rgba(198,242,74,0); } }
@keyframes fadeInOut { 0% { opacity: 0; transform: translateY(-6px); } 15% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes calcScreen { 0%, 40% { opacity: 0.5; } 50%, 90% { opacity: 1; } 100% { opacity: 0.5; } }
@keyframes calcKey { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes gradientShift { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
@keyframes beaconDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes beaconPing { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(4); opacity: 0; } }
@keyframes shineSweep { 0% { background-position: 200% 0; } 100% { background-position: -50% 0; } }
@keyframes particleDrift { 0% { background-position: 0 0; } 100% { background-position: 120px 200px; } }

/* ===== Reveal / counters ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Beacon dot ===== */
.beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c6f24a;
  display: inline-block;
  position: relative;
  animation: beaconDot 2s ease-in-out infinite;
  flex-shrink: 0;
}
.beacon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #c6f24a;
  animation: beaconPing 2s ease-out infinite;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 64px;
  background: rgba(12,13,12,0);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}
.site-header.is-scrolled {
  background: rgba(12,13,12,0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Bricolage Grotesque', sans-serif;
  flex-wrap: wrap;
}
.header-logo .name {
  font-size: 20px;
  font-weight: 700;
  color: #f2f3ee;
}
.header-logo .name .accent { color: #c6f24a; }
.header-logo .subtitle {
  font-size: 14px;
  color: #8f9289;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
}
.header-contacts {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-link {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 100px;
  padding: 8px 14px;
  font-size: 14.5px;
  font-weight: 700;
}
.header-link.phone { background: rgba(198,242,74,0.1); border: 1px solid rgba(198,242,74,0.32); color: #c6f24a; }
.header-link.telegram { background: rgba(41,169,235,0.12); border: 1px solid rgba(41,169,235,0.4); color: #7fd0f7; }
.header-link.viber { background: rgba(115,96,242,0.16); border: 1px solid rgba(115,96,242,0.45); color: #b3a8ff; }
.btn-pill {
  display: inline-block;
  background: #c6f24a;
  color: #0c0d0c;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 100px;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.btn-pill:hover { background: #d9ff6e; color: #0c0d0c; }

@media (max-width: 860px) {
  .site-header { padding: 16px 24px; flex-wrap: wrap; }
  .header-contacts { order: 3; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .header-cta { display: none; }
}

/* ===== Hero ===== */
.hero {
  padding: 72px 64px 88px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}
.hero-content {
  padding-top: 12%;
  position: relative;
}
.hero-object {
  position: absolute;
  top: calc(48px + 10%);
  right: -20px;
  width: clamp(340px, 42vw, 616px);
  pointer-events: none;
  animation: heroFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.35));
  z-index: 0;
}
.hero-bg-3d {
  position: absolute;
  top: -90px;
  left: 50%;
  width: 100vw;
  max-width: none;
  transform: translateX(-50%);
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}
.hero-bg-mobile { display: none; }
.hero-row { display: none; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 15px;
  color: #c9ccc4;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.badge-highlight { color: #c6f24a; font-weight: 700; }
.hero h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  max-width: 700px;
  position: relative;
  z-index: 1;
}
.gradient-text {
  background: linear-gradient(90deg, #c6f24a, #5eead4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: 19px;
  line-height: 1.6;
  color: #9a9d95;
  max-width: 520px;
  margin: 0 0 40px;
  position: relative;
  z-index: 1;
}
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 56px;
  position: relative;
  z-index: 1;
}
.btn-shine {
  background: linear-gradient(110deg, #c6f24a 40%, #f2ffcf 50%, #c6f24a 60%);
  background-size: 250% 100%;
  animation: shineSweep 2.8s linear infinite;
  color: #0c0d0c;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 17px;
  padding: 18px 30px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  display: inline-block;
}
.btn-shine:hover { color: #0c0d0c; transform: translateY(-2px); box-shadow: none; }
.hero-cta-note { font-size: 14px; color: #8f9289; display: inline-flex; align-items: center; gap: 7px; }
.hero-cta-beacon { display: none; }

.hero-bottom {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.personal-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 24px;
  max-width: 460px;
}
.personal-card .label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #c6f24a;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.personal-card .desc {
  font-size: 15px;
  color: #c9ccc4;
  line-height: 1.55;
}
.stats-row {
  display: flex;
  gap: 40px;
  padding-top: 8px;
  flex-wrap: wrap;
}
.stat .num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 44px;
  color: #c6f24a;
}
.stat .caption {
  font-size: 14px;
  color: #8f9289;
  margin-top: 6px;
}

/* ===== Image slot placeholders ===== */
.image-slot {
  background: rgba(255,255,255,0.04);
  border: 1.5px dashed rgba(255,255,255,0.18);
  color: #6d6f68;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-align: center;
  overflow: hidden;
}
.image-slot img { width: 100%; height: 100%; object-fit: cover; }
.image-slot.filled { border: none; background: none; }
.image-slot.circle { border-radius: 50%; }
.image-slot.rounded { border-radius: 20px; }
.hero-avatar { width: 96px; height: 96px; flex-shrink: 0; }
.about-photo { height: 320px; flex: 1 1 0; min-width: 0; }

/* ===== Section heading helpers ===== */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #c6f24a;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow-muted {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8f9289;
  text-transform: uppercase;
  margin-bottom: 14px;
}
section h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.section-lead {
  font-size: 16px;
  color: #9a9d95;
  margin: 16px 0 0;
}

/* ===== Calculator intro ===== */
.calc-section { padding: 20px 64px 120px; max-width: 1400px; margin: 0 auto; }
.calc-intro { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.calc-intro .heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.calc-intro h2 { font-size: clamp(30px, 4vw, 46px); }
.calc-icon circle, .calc-icon rect.key { fill: #c6f24a; }

.calc-grid {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.calc-form {
  flex: 2 1 560px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  padding: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 28px;
}
.field label {
  font-size: 14px;
  color: #c9ccc4;
  display: block;
  margin-bottom: 10px;
}
.field input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  background: #161715;
  color: #f2f3ee;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: 'Manrope', sans-serif;
}
.field input[type="range"] {
  width: 100%;
  accent-color: #c6f24a;
  margin-top: 16px;
}
.stepper { display: flex; align-items: stretch; gap: 8px; }
.stepper input[type="number"] { flex: 1 1 auto; min-width: 0; text-align: center; }
.stepper-btn { display: none; }
.dropdown {
  position: relative;
}
.dropdown.open {
  z-index: 20;
}
.dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #161715;
  color: #f2f3ee;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  text-align: left;
}
.dropdown-chevron {
  color: #8f9289;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.dropdown.open .dropdown-chevron {
  transform: rotate(180deg);
}
.dropdown-list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #1a1b18;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.dropdown.open .dropdown-list {
  display: block;
}
.dropdown-option {
  padding: 13px 16px;
  font-size: 15px;
  font-family: 'Manrope', sans-serif;
  color: #f2f3ee;
  cursor: pointer;
}
.dropdown-option:hover {
  background: rgba(255,255,255,0.05);
}
.dropdown-option.is-active {
  color: #c6f24a;
  background: rgba(198,242,74,0.08);
}

.toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #161715;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  color: #f2f3ee;
  font-size: 15px;
  font-family: 'Manrope', sans-serif;
}
.switch {
  width: 40px;
  height: 24px;
  border-radius: 100px;
  background: rgba(255,255,255,0.15);
  position: relative;
  display: inline-block;
  transition: background 0.2s;
  flex-shrink: 0;
}
.switch.on { background: #c6f24a; }
.switch .knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f2f3ee;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left 0.2s;
}
.switch.on .knob { background: #0c0d0c; left: 19px; }
.restore-note { font-size: 13px; color: #c6f24a; margin-top: 8px; }

/* ===== Price card ===== */
.price-card {
  flex: 1 1 300px;
  position: sticky;
  top: 24px;
  background: linear-gradient(160deg, rgba(198,242,74,0.12), rgba(94,234,212,0.06));
  border: 1px solid rgba(198,242,74,0.25);
  border-radius: 28px;
  padding: 32px;
}
/* Mobile floating price bar — shown while scrolling through the
   calculator form, before the real price card scrolls into view. */
.mobile-price-bar {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 24px;
  z-index: 60;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #c6f24a;
  border: none;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  transform: translateY(120%);
  visibility: hidden;
  transition: transform 0.15s ease-in, visibility 0s linear 0.15s;
  pointer-events: none;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  text-align: left;
}
.mobile-price-bar.visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s ease-out, visibility 0s linear 0s;
  pointer-events: auto;
}
.mobile-price-bar-label { display: block; font-size: 11px; color: #0c0d0c; opacity: 0.7; }
.mobile-price-bar-value {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #0c0d0c;
}
.mobile-price-bar-cta {
  flex-shrink: 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #0c0d0c;
  background: rgba(12,13,12,0.12);
  padding: 10px 16px;
  border-radius: 100px;
}
@media (max-width: 860px) {
  .mobile-price-bar { display: flex; }
}

.delta-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 100px;
  animation: fadeInOut 1.8s ease;
  display: none;
}
.delta-badge.show { display: block; }
.delta-badge.positive {
  background: rgba(255,107,107,0.16);
  color: #ff8f8f;
  border: 1px solid rgba(255,107,107,0.35);
}
.delta-badge.negative {
  background: rgba(198,242,74,0.18);
  color: #c6f24a;
  border: 1px solid rgba(198,242,74,0.35);
}
.price-card .label { font-size: 14px; color: #c9ccc4; margin-bottom: 6px; }
.price-value {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 52px;
  color: #f2f3ee;
  line-height: 1;
  margin-bottom: 6px;
}
.price-value .unit { font-size: 20px; color: #9a9d95; font-weight: 600; }
.price-note { font-size: 12.5px; color: #8f9289; margin-bottom: 28px; }
.price-actions { display: flex; flex-direction: column; gap: 10px; }
.btn-solid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 15px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  width: 100%;
}
.or-text { text-align: center; font-size: 13px; color: #8f9289; }
.messenger-row { display: flex; gap: 10px; }
.btn-telegram { flex: 1; background: #29a9eb; color: #fff; }
.btn-viber { flex: 1; background: #7360f2; color: #fff; }
.btn-whatsapp { flex: 1; background: #25d366; color: #0c2b16; }
.price-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 13px;
  color: #8f9289;
}

/* ===== Wheel section ===== */
.wheel-section { padding: 20px 64px 100px; max-width: 1400px; margin: 0 auto; text-align: center; }
.wheel-row {
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: left;
}
.wheel-col { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.wheel-wrap { position: relative; width: 340px; height: 340px; }
.wheel-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(0deg);
  transition: transform 4s cubic-bezier(0.15,0.7,0.1,1);
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.4));
}
.spin-btn {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 32px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  background: linear-gradient(110deg, #c6f24a 40%, #f2ffcf 50%, #c6f24a 60%);
  background-size: 250% 100%;
  animation: shineSweep 2.8s linear infinite;
  color: #0c0d0c;
}
.spin-btn.spinning {
  background: rgba(255,255,255,0.1);
  animation: none;
  color: #8f9289;
  cursor: default;
}
.spin-btn:disabled,
.spin-btn.used {
  background: rgba(255,255,255,0.08);
  animation: none;
  color: #6b6e66;
  cursor: not-allowed;
}
.wheel-result-card {
  flex: 1 1 320px;
  max-width: 400px;
  background: linear-gradient(160deg, rgba(198,242,74,0.12), rgba(94,234,212,0.06));
  border: 1px solid rgba(198,242,74,0.25);
  border-radius: 28px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  min-height: 284px;
}
.particles {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.6s ease;
  background-image: radial-gradient(circle, #fff 1px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
  filter: blur(2px);
  animation: particleDrift 6s linear infinite;
  pointer-events: none;
}
.particles.hidden { opacity: 0; }
.wheel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 220px;
  text-align: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.wheel-placeholder .emoji { font-size: 40px; }
.wheel-placeholder .txt { font-size: 15px; color: #9a9d95; }
.wheel-result { position: relative; z-index: 1; display: none; }
.wheel-result.show { display: block; }
.wheel-result .label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #c6f24a;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.wheel-result .label .emoji { font-size: 28px; vertical-align: middle; margin-right: 6px; }
.wheel-result .prize {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: #f2f3ee;
  line-height: 1.2;
  margin-bottom: 24px;
}
.wheel-result .prize.prize-underline {
  display: inline-block;
  border-bottom: 3px solid #c6f24a;
  padding-bottom: 6px;
}
.wheel-result .desc { font-size: 14px; color: #9a9d95; margin-bottom: 24px; }
.wheel-result .actions { display: flex; flex-direction: column; gap: 10px; }
.btn-lime {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #c6f24a;
  color: #0c0d0c;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 15px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* ===== Pains ===== */
.pains-section { padding: 60px 64px 100px; max-width: 1400px; margin: 0 auto; }
.pains-section h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; max-width: 760px; }
.pains-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.pain-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.pain-card .num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(198,242,74,0.1);
  border: 1px solid rgba(198,242,74,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #c6f24a;
}
.pain-card .text { font-size: 16px; line-height: 1.55; color: #e8e9e4; }

/* ===== Services ===== */
.services-section { padding: 20px 64px 100px; max-width: 1400px; margin: 0 auto; }
.services-section h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 48px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; }
.service-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 40px 40px 56px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.service-card h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 24px;
}
.service-list { display: flex; flex-direction: column; gap: 14px; }
.service-list .item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15.5px;
  color: #c9ccc4;
  line-height: 1.5;
}
.service-list .item .check { color: #c6f24a; flex-shrink: 0; }
.service-price {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: #0c0d0c;
  border: 1px solid rgba(198,242,74,0.3);
  border-radius: 100px;
  padding: 10px 20px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: #c6f24a;
  white-space: nowrap;
}

/* ===== Industries ===== */
.industries-section { padding: 20px 64px 100px; max-width: 1400px; margin: 0 auto; }
.industries-section h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 32px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.tag {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 15px;
  color: #e8e9e4;
}
.tag.lime {
  background: rgba(198,242,74,0.08);
  border: 1px solid rgba(198,242,74,0.22);
  color: #c6f24a;
}
.industries-extra { display: none; }
.industries-extra.show { display: contents; }
.tag-toggle {
  background: rgba(198,242,74,0.1);
  border: 1px solid rgba(198,242,74,0.3);
  color: #c6f24a;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.tag-toggle:hover { background: rgba(198,242,74,0.18); }

/* ===== Testimonials ===== */
.testimonials-section { padding: 20px 64px 100px; max-width: 1400px; margin: 0 auto; }
.testimonials-section .kicker { font-size: 17px; color: #9a9d95; margin-bottom: 14px; }
.testimonials-section h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 40px; }
.testimonials-wrap { position: relative; }
.testimonials-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.testimonials-track::-webkit-scrollbar { display: none; }
.testimonial-card {
  flex: 0 0 320px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 30px;
}
.testimonial-card .stars { color: #c6f24a; font-size: 16px; letter-spacing: 2px; margin-bottom: 16px; }
.testimonial-card p { font-size: 15.5px; line-height: 1.6; color: #d5d7d0; margin: 0 0 24px; }
.testimonial-card .who { display: flex; align-items: center; gap: 12px; }
.testimonial-card .avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(198,242,74,0.14);
  color: #c6f24a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.testimonial-card .name { font-size: 14.5px; font-weight: 600; color: #f2f3ee; }
.testimonial-card .business { font-size: 13.5px; color: #8f9289; }
.testimonials-nav { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.nav-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #f2f3ee;
  font-size: 18px;
  cursor: pointer;
}
.review-cta { text-align: center; margin-top: 36px; }
.btn-outline {
  display: inline-block;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #f2f3ee;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 100px;
}

/* ===== About ===== */
.about-section {
  padding: 20px 64px 100px;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 56px;
  align-items: center;
}
.about-photos { display: flex; gap: 14px; }
.about-section h2 { font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 20px; }
.about-text { font-size: 17px; line-height: 1.65; color: #c9ccc4; margin: 0 0 32px; }
.about-stats { display: flex; gap: 40px; }
.about-stats .num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 32px; color: #c6f24a; }
.about-stats .caption { font-size: 14px; color: #8f9289; margin-top: 4px; }

/* ===== Final CTA ===== */
.final-cta {
  padding: 90px 64px;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}
.final-cta h2 {
  font-size: clamp(30px, 4vw, 48px);
  margin: 0 0 32px;
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.footer-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 64px 64px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 12px;
}
.footer-desc { font-size: 14.5px; color: #8f9289; line-height: 1.7; margin-bottom: 20px; }
.footer-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8f9289;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-nav { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.footer-nav a { color: #c9ccc4; }
.footer-contacts { font-size: 14.5px; color: #c9ccc4; line-height: 2; }
.footer-contacts a { color: #c9ccc4; }
.footer-messengers { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.footer-messengers .btn-pill { width: 100%; }
.footer-msg-row { display: flex; gap: 10px; }
.footer-msg-row a {
  flex: 1;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  padding: 12px 16px;
  border-radius: 100px;
}
.footer-msg-row a.whatsapp { background: #25d366; color: #0c2b16; }
.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 64px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 13px;
  color: #6d6f68;
}
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: #8f9289; }

/* ===== Legal pages (privacy / terms) ===== */
.legal-section {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 24px 100px;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #9a9d95;
  margin-bottom: 28px;
}
.legal-back:hover { color: #c6f24a; }
.legal-section h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 10px;
}
.legal-updated { font-size: 13.5px; color: #8f9289; margin-bottom: 40px; }
.legal-content h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 21px;
  color: #f2f3ee;
  margin: 40px 0 14px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p {
  font-size: 15.5px;
  line-height: 1.7;
  color: #c9ccc4;
  margin: 0 0 16px;
}
.legal-content ul {
  margin: 0 0 16px;
  padding-left: 20px;
}
.legal-content li {
  font-size: 15.5px;
  line-height: 1.7;
  color: #c9ccc4;
  margin-bottom: 8px;
}
.legal-content strong { color: #f2f3ee; }
.legal-content a { color: #c6f24a; }
.legal-contacts {
  margin-top: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px 24px;
}
.legal-contacts p { margin: 0 0 6px; }
.legal-contacts p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .legal-section { padding: 32px 24px 80px; }
  .legal-content h2 { font-size: 19px; margin: 32px 0 12px; }
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { padding: 48px 24px 32px; }
  .footer-bottom { padding: 20px 24px; }
  .hero h1 { font-size: 36px; }
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: #141513;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 36px;
  max-width: 420px;
  width: 100%;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.06);
  border: none;
  color: #f2f3ee;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
}
.modal-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #8f9289;
  margin-bottom: 16px;
}
.modal-box h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 24px;
  margin: 0 0 16px;
}
.modal-summary {
  background: rgba(198,242,74,0.08);
  border: 1px solid rgba(198,242,74,0.25);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}
#modal-overlay.hide-price .modal-summary { display: none; }
.modal-summary .summary-text { font-size: 13px; color: #9a9d95; margin-bottom: 6px; }
.modal-summary .summary-price {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: #c6f24a;
}
.modal-summary .summary-price .unit { font-size: 14px; color: #9a9d95; font-weight: 600; }
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.modal-form input[type="text"],
.modal-form input[type="tel"] {
  background: #1c1d1a;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 14px 16px;
  color: #f2f3ee;
  font-size: 15px;
  font-family: 'Manrope', sans-serif;
}
.modal-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #9a9d95;
  cursor: pointer;
}
.modal-consent input { margin-top: 2px; accent-color: #c6f24a; }
.modal-consent a { color: #c6f24a; text-decoration: underline; }
.modal-submit {
  background: #c6f24a;
  color: #0c0d0c;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 15px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  margin-top: 6px;
}
.modal-success {
  text-align: center;
  padding: 8px 0 4px;
  font-size: 15px;
  color: #c9ccc4;
}

@media (max-width: 760px) {
  .container, .hero, .calc-section, .wheel-section, .pains-section,
  .services-section, .industries-section, .testimonials-section,
  .about-section, .final-cta { padding-left: 24px; padding-right: 24px; }
  .about-stats { gap: 20px; }
  .about-stats .num { font-size: 26px; }
  .about-stats .caption { font-size: 11.5px; line-height: 1.3; white-space: nowrap; }
  .footer-grid, .footer-bottom { padding-left: 24px; padding-right: 24px; }

  /* Darker, less saturated background on mobile — the desktop blobs are
     oversized for a narrow viewport and read as a green wash. */
  .bg-decor {
    background:
      radial-gradient(ellipse 500px 380px at 15% 5%, rgba(198,242,74,0.06) 0%, transparent 60%),
      radial-gradient(ellipse 480px 380px at 88% 26%, rgba(94,234,212,0.05) 0%, transparent 55%),
      radial-gradient(ellipse 500px 380px at 10% 66%, rgba(94,234,212,0.05) 0%, transparent 55%),
      radial-gradient(ellipse 480px 380px at 90% 96%, rgba(198,242,74,0.05) 0%, transparent 55%);
  }

  /* Hero (mobile redesign): fop-bg-mobile + a text/photo row replace the
     desktop badge+h1+absolute robot image entirely. */
  .hero { padding: 24px 24px 88px; margin-top: -5%; }
  .hero-content { padding-top: 16px; padding-left: 0; }

  /* Desktop decorative layers hidden — mobile has its own */
  .hero-object { display: none; }
  .hero-bg-3d { display: none; }
  .hero-bg-mobile {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    max-width: none;
    transform: translateX(-50%);
    margin-bottom: -40px;
    opacity: 0.38;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  }

  /* Desktop badge/h1 (direct children of .hero-content) hidden — the
     mobile-only .hero-row copy below replaces them */
  .hero-content > .badge { display: none; }
  .hero-content > h1 { display: none; }
  .hero p.lead { display: none; }

  .hero-row {
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
    z-index: 2;
  }
  .hero-left { flex: 1 1 auto; min-width: 0; padding-right: 8px; position: relative; z-index: 1; }
  .hero-right {
    flex: 0 0 56%;
    margin-top: 14%;
    margin-right: calc(-8px - 2%);
    position: relative;
    z-index: 3;
  }
  .hero-right img { width: 100%; max-width: none; display: block; }

  .hero-row .badge {
    display: inline-flex;
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 200px;
    font-size: 11px;
    line-height: 1.5;
    padding: 8px 12px;
    margin-bottom: 10px;
  }
  .hero-row .badge .beacon { margin-top: 5px; }
  .badge-mobile-lines { display: inline-block; }
  .hero-h1-mobile {
    max-width: 100%;
    height: auto;
    margin: 14px 0 0;
    font-size: 29px;
    line-height: 1.1;
    text-wrap: balance;
  }

  .hero-cta-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 36px;
  }
  .hero-cta-row a { width: 100%; text-align: center; }

  /* Personal card label: drop the dash and tighten tracking so
     "Особистий супровід" fits on one line next to the avatar */
  .personal-card .label {
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: 0.03em;
  }
  .label-dash { display: none; }
  .hero-cta-beacon { display: inline-block; }

  /* Wheel of fortune: fixed 340px wheel/card widths overflowed the
     327px content area (even though clipped, this could force the real
     mobile browser to size its layout viewport off the wider content,
     same class of bug fixed earlier for hero-glow / hero-bg-mobile). */
  .wheel-wrap { width: min(340px, 100%); height: auto; aspect-ratio: 1 / 1; }
  .wheel-result-card { flex-basis: min(320px, 100%); }

  /* Hero counters: force a single row on narrow screens, centered so it
     doesn't sit flush against the left edge like a stray leftover column */
  .stats-row {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 26px;
    width: 100%;
  }
  .stat { flex: 0 0 auto; min-width: 0; text-align: center; }
  .stat .num { font-size: 26px; }
  .stat .caption { font-size: 11px; line-height: 1.3; }

  /* Footer: keep the 2-column grid (2 rows of info) instead of stacking
     all 4 blocks vertically. min-width:0 stops long words/buttons from
     forcing a column wider than its fair share (grid blowout). */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div { min-width: 0; }
  .footer-grid .btn-pill { white-space: normal; text-align: center; }
  .footer-messengers .footer-msg-row { flex-direction: column; }
  .footer-cta { display: none; }

  /* Industries tags: smaller pills fit 2-3 per row instead of leaving
     large empty trailing space on single-tag rows */
  .tag-row { gap: 8px; margin-bottom: 24px; }
  .tag { padding: 8px 14px; font-size: 13.5px; }

  /* Services: swipeable single-row carousel instead of stacked cards */
  .services-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    gap: 16px;
    padding-bottom: 28px;
    scrollbar-width: none;
  }
  .services-grid::-webkit-scrollbar { display: none; }
  .service-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  /* Compact sticky header once scrolled */
  .site-header.is-scrolled { padding: 10px 20px; }

  /* Calculator intro: the animated icon wraps onto its own line above the
     heading (no room beside it), ending up as an orphaned decoration and
     making the header heavy before the user even reaches the form. Drop it
     and tighten the spacing on mobile. */
  .calc-intro { margin: 0 auto 32px; }
  .calc-intro .eyebrow { margin-bottom: 8px; }
  .calc-icon { display: none; }
  .calc-intro h2 { font-size: clamp(26px, 6vw, 32px); }
  .calc-intro .section-lead { margin-top: 10px; }

  /* Employees field: visible +/- buttons instead of relying on the tiny
     native number-input spinner, which is fiddly to tap accurately on
     a touchscreen. Laid out horizontally: minus, input, plus. */
  .stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    background: #161715;
    color: #f2f3ee;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
  }
  .stepper-btn:active { background: rgba(198,242,74,0.14); border-color: rgba(198,242,74,0.4); }
  .stepper input[type="number"]::-webkit-inner-spin-button,
  .stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .stepper input[type="number"] { -moz-appearance: textfield; }
}

/* ===== Tablet (761px–1023px) =====
   Portrait tablets (768/810/820/834/912px) fall between the mobile
   redesign (≤760px, which replaces the hero/calc layout wholesale) and
   the desktop layout (≥1024px, where the calc form + price card and the
   two service cards have enough room to sit side by side and the hero
   robot clears the paragraph text). In that gap they inherited raw
   desktop rules sized for a much wider canvas, which collided:
   - the hero robot's fixed min width overlapped the lead paragraph
   - .calc-form + #price-card's combined flex-basis (560+300+28) needs
     ~888px of content width, more than a portrait tablet has, so the
     price card dropped onto its own full-width row below the form
   - the two .service-card's 380px minmax needed ~784px, so they
     stacked full-width instead of comparing side by side
   Desktop (≥1024px) and mobile (≤760px) are untouched — this only
   narrows the layout enough to fit a tablet's content width. */
@media (min-width: 761px) and (max-width: 1023px) {
  /* Robot width reuses the desktop rule's own 42vw growth rate (just
     with a lower floor) so it lands on the exact same value desktop
     computes at 1024px — no visible jump crossing the boundary — while
     staying small enough at 761px to clear the (also narrowed) lead
     paragraph. Positioned with the same right:-20px bleed as desktop
     for the same reason (html has overflow-x:hidden, so the bleed
     itself is never visible). */
  .hero-object {
    width: clamp(200px, 42vw, 430px);
  }
  .hero p.lead { max-width: clamp(300px, 38vw, 460px); }

  .calc-form { flex: 2 1 320px; }
  #price-card { flex: 1 1 240px; }

  .services-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}