/* ==========================================================================
   SALAZAR Marketing Agency — Design System
   ========================================================================== */

:root {
  --promo-h: 42px;
  --header-h: 86px;
  --brand-blue: #1FC8FF;
  --brand-purple: #9D4EFF;
  --brand-purple-deep: #7427D6;
  --brand-pink: #FF3DCB;
  --dark-bg: #050715;
  --dark-bg-2: #0B1020;
  --light-bg: #FDFCFE;
  --light-bg-2: #FBFCFE;
  --mesh-bg: #0A0E24;
  --glass-bg: rgba(255,255,255,0.035);
  --glass-bg-hover: rgba(255,255,255,0.07);
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-on-dark: #F1F5F9;
  --text-on-dark-secondary: #94A3B8;
  --text-on-light: #160F28;
  --text-on-light-secondary: #5C5570;
  --card-on-light: #FFFFFF;
  --border-on-light: rgba(21,15,40,0.09);
  --border-light: rgba(255,255,255,0.09);
  --border-dark: rgba(255,255,255,0.09);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 50px -20px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 60px -10px rgba(157,78,255,0.4);
  --container: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --grid-img: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }

body {
  margin: 0;
  width: 100%;
  font-family: 'Golos Text', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  color: var(--text-primary);
  background: var(--dark-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Ambient fixed glow layer — sits behind all content, very subtle */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform: translateY(var(--scroll-glow-shift, 0px));
  will-change: transform;
  background:
    radial-gradient(640px circle at 12% 0%, rgba(31,200,255,0.10), transparent 60%),
    radial-gradient(680px circle at 88% 30%, rgba(157,78,255,0.10), transparent 60%),
    radial-gradient(560px circle at 30% 95%, rgba(157,78,255,0.06), transparent 60%);
}

h1, h2, h3, h4 {
  font-family: 'Manrope', 'Golos Text', sans-serif;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

p { margin: 0 0 16px; color: var(--text-secondary); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

/* Keyboard-focus visibility — distinct from mouse hover, never removed without replacement */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #C4B5FD;
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 4px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Hidden-but-functional scrollbar utility for horizontal carousels */
.scroll-clean {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scroll-clean::-webkit-scrollbar { display: none; width: 0; height: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------- Sections ---------------- */
.section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(157,78,255,0.28), 0 1px 0 rgba(0,0,0,0.4);
}
@media (max-width: 768px) {
  .section { padding: 64px 0; }
}
/* .section--dark: precise "engineered" grid texture — the signature dark-section treatment */
.section--dark {
  background:
    var(--noise-img),
    var(--grid-img),
    radial-gradient(circle at 80% 0%, rgba(157,78,255,0.18), transparent 50%),
    var(--dark-bg);
  background-size: 140px 140px, 64px 64px, 64px 64px, auto;
  color: var(--text-on-dark);
}
.section--dark p { color: var(--text-on-dark-secondary); }
.section--dark .container { position: relative; z-index: 1; }
/* Same drifting orb treatment as the hero, applied to every dark section site-wide for a
   consistent "signature" dark look. Orbs sit behind the grid/noise texture and never cross
   the readable text column, so contrast against var(--text-on-dark) stays untouched. */
.section--dark::before, .section--dark::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}
.section--dark::before {
  width: 480px; height: 480px;
  top: -10%; right: 5%;
  background: radial-gradient(circle, var(--brand-purple), transparent 70%);
  animation: orbDrift 26s ease-in-out infinite;
}
.section--dark::after {
  width: 380px; height: 380px;
  bottom: -10%; left: 0%;
  background: radial-gradient(circle, var(--brand-blue), transparent 70%);
  animation: orbDrift 32s ease-in-out infinite reverse;
}
.section--dark:nth-of-type(even)::before { right: auto; left: 5%; }
.section--dark:nth-of-type(even)::after { left: auto; right: 0%; }

/* .section--light / .section--light-alt: true white/off-white sections — the contrast beat
   against the dark grid sections. No dots, no grid lines. Depth comes purely from soft,
   vividly-colored blurred shapes (animated drift), the way a premium light-mode SaaS page
   gets depth without textures. */
.section--light, .section--light-alt {
  color: var(--text-on-light);
  box-shadow: inset 0 1px 0 rgba(21,15,40,0.08), inset 0 -1px 0 rgba(21,15,40,0.08), 0 1px 0 rgba(0,0,0,0.4);
}
.section--light p, .section--light-alt p { color: var(--text-on-light-secondary); }
.section--light h1, .section--light h2, .section--light h3, .section--light h4,
.section--light-alt h1, .section--light-alt h2, .section--light-alt h3, .section--light-alt h4 { color: var(--text-on-light); }
.section--light {
  background: var(--light-bg);
}
.section--light-alt {
  background: var(--light-bg-2);
}
/* Clean near-white sections, depth comes only from soft drifting color blobs behind the
   content — both their position AND hue shift slowly, so the wash never sits static. */
.section--light::before, .section--light::after,
.section--light-alt::before, .section--light-alt::after {
  content: '';
  position: absolute;
  border-radius: 48% 52% 55% 45% / 45% 55% 45% 55%;
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
}
.section--light::before, .section--light-alt::before {
  width: 520px; height: 520px;
  top: -180px; right: -140px;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
  animation: blobDrift 22s ease-in-out infinite, blobHue 16s ease-in-out infinite;
}
.section--light::after, .section--light-alt::after {
  width: 460px; height: 460px;
  bottom: -180px; left: -120px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
  animation: blobDrift 27s ease-in-out infinite reverse, blobHue 19s ease-in-out infinite reverse;
}
.section--light:nth-of-type(even)::before, .section--light-alt:nth-of-type(even)::before { right: auto; left: -130px; top: -170px; }
.section--light:nth-of-type(even)::after, .section--light-alt:nth-of-type(even)::after { left: auto; right: -110px; bottom: -170px; background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple)); }
.section--light .container, .section--light-alt .container { position: relative; z-index: 1; }
@keyframes blobHue {
  0%, 100% { filter: blur(90px) hue-rotate(0deg); }
  50% { filter: blur(90px) hue-rotate(35deg); }
}
@keyframes blobDrift {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(-26px, 22px) scale(1.08) rotate(8deg); }
}

/* Light variant A — "soft": calm lavender wash with a faint dot grid, distinct from the
   blob-drift default. Used for the process journey. */
.section--light-soft {
  --light-soft-bg: #f5f2fc;
  background:
    radial-gradient(900px circle at 50% -10%, rgba(157,78,255,0.10), transparent 60%),
    radial-gradient(rgba(116,39,214,0.07) 1px, transparent 1px),
    linear-gradient(180deg, #f6f3fc, #fbfaff);
  background-size: auto, 26px 26px, auto;
}
.section--light-soft::before {
  width: 560px; height: 560px; top: auto; bottom: -220px; left: 50%; right: auto;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(31,200,255,0.5), transparent 70%);
  opacity: 0.22; border-radius: 50%;
  animation: blobDrift 30s ease-in-out infinite;
}
.section--light-soft::after { display: none; }

/* Light variant B — "warm aurora": faint multi-color aurora bands top + bottom. */
.section--light-aurora {
  background:
    radial-gradient(700px circle at 0% 0%, rgba(31,200,255,0.12), transparent 55%),
    radial-gradient(760px circle at 100% 100%, rgba(255,61,203,0.10), transparent 55%),
    linear-gradient(180deg, #fdfbff, #f7f9ff);
}
.section--light-aurora::before {
  width: 620px; height: 360px; top: -120px; right: -100px; left: auto;
  border-radius: 50%; background: linear-gradient(120deg, var(--brand-blue), var(--brand-purple));
  opacity: 0.18; animation: blobDrift 26s ease-in-out infinite, blobHue 18s ease-in-out infinite;
}
.section--light-aurora::after {
  width: 520px; height: 300px; bottom: -120px; left: -90px; right: auto;
  border-radius: 50%; background: linear-gradient(120deg, var(--brand-pink), var(--brand-purple));
  opacity: 0.16; animation: blobDrift 31s ease-in-out infinite reverse, blobHue 21s ease-in-out infinite;
}

/* Light variant C — "blueprint": faint engineered grid on a cool white, echoing the dark
   sections' grid texture but inverted. */
.section--light-grid {
  background:
    radial-gradient(800px circle at 85% 10%, rgba(157,78,255,0.08), transparent 55%),
    linear-gradient(rgba(116,39,214,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,39,214,0.05) 1px, transparent 1px),
    linear-gradient(180deg, #fafaff, #f4f6fd);
  background-size: auto, 48px 48px, 48px 48px, auto;
}
.section--light-grid::before {
  width: 480px; height: 480px; top: -160px; left: -120px; right: auto;
  background: radial-gradient(circle, rgba(31,200,255,0.5), transparent 70%);
  opacity: 0.2; border-radius: 50%; animation: blobDrift 28s ease-in-out infinite;
}
.section--light-grid::after {
  width: 420px; height: 420px; bottom: -160px; right: -110px; left: auto;
  background: radial-gradient(circle, rgba(157,78,255,0.5), transparent 70%);
  opacity: 0.18; border-radius: 50%; animation: blobDrift 33s ease-in-out infinite reverse;
}

/* Light variant D — "process": clean white with two soft brand corner glows (no dot grid). */
.section--process { background: linear-gradient(180deg, #ffffff, #f6f8fd); }
.section--process::before {
  width: 560px; height: 560px; top: -200px; left: -130px; right: auto;
  background: radial-gradient(circle, rgba(31,200,255,0.5), transparent 70%);
  opacity: 0.18; border-radius: 50%; animation: blobDrift 28s ease-in-out infinite;
}
.section--process::after {
  width: 520px; height: 520px; bottom: -200px; right: -120px; left: auto;
  background: radial-gradient(circle, rgba(157,78,255,0.5), transparent 70%);
  opacity: 0.16; border-radius: 50%; animation: blobDrift 33s ease-in-out infinite reverse;
}

/* ---------------- Light-section card overrides ----------------
   Every card/element inside a white section needs its own background distinct
   from the section (white-on-white is invisible) — solid white cards with a
   soft purple-tinted shadow + visible border, dark text throughout. */
.section--light .bento-card, .section--light-alt .bento-card,
.section--light .case-card, .section--light-alt .case-card,
.section--light .testimonial-card, .section--light-alt .testimonial-card,
.section--light .price-card, .section--light-alt .price-card,
.section--light .faq-item, .section--light-alt .faq-item,
.section--light .about-point, .section--light-alt .about-point,
.section--light .contact-info-item, .section--light-alt .contact-info-item,
.section--light .review-badge, .section--light-alt .review-badge,
.section--light .stats-band, .section--light-alt .stats-band {
  background: var(--card-on-light);
  border-color: var(--border-on-light);
  box-shadow: 0 20px 48px -26px rgba(80,40,150,0.22);
}
.section--light .bento-card:hover, .section--light-alt .bento-card:hover,
.section--light .case-card:hover, .section--light-alt .case-card:hover,
.section--light .testimonial-card:hover, .section--light-alt .testimonial-card:hover,
.section--light .price-card:hover, .section--light-alt .price-card:hover,
.section--light .faq-item:hover, .section--light-alt .faq-item:hover {
  background: var(--card-on-light);
  box-shadow: 0 28px 60px -24px rgba(80,40,150,0.3);
}
.section--light .price-card.featured, .section--light-alt .price-card.featured {
  background: linear-gradient(160deg, rgba(157,78,255,0.07), rgba(31,200,255,0.07));
}
.section--light h3, .section--light-alt h3,
.section--light h4, .section--light-alt h4,
.section--light .price, .section--light-alt .price,
.section--light .stat-num, .section--light-alt .stat-num,
.section--light .faq-question, .section--light-alt .faq-question,
.section--light .review-badge .top, .section--light-alt .review-badge .top,
.section--light .testimonial-author .name, .section--light-alt .testimonial-author .name,
.section--light .stats-band .stat .n, .section--light-alt .stats-band .stat .n {
  color: var(--text-on-light);
}
.section--light .faq-answer-inner, .section--light-alt .faq-answer-inner,
.section--light .testimonial-card p.quote, .section--light-alt .testimonial-card p.quote,
.section--light .price-card li, .section--light-alt .price-card li,
.section--light .case-card .period, .section--light-alt .case-card .period,
.section--light .review-badge .count, .section--light-alt .review-badge .count,
.section--light .testimonial-author .role, .section--light-alt .testimonial-author .role,
.section--light .stats-band .stat .l, .section--light-alt .stats-band .stat .l,
.section--light .contact-info-item .label, .section--light-alt .contact-info-item .label {
  color: var(--text-on-light-secondary);
}
.section--light .contact-info-item .value, .section--light-alt .contact-info-item .value {
  color: var(--text-on-light);
}
.section--light .card-link, .section--light-alt .card-link { color: var(--brand-purple); }
.section--light .card-link:hover, .section--light-alt .card-link:hover { color: var(--brand-blue); }
.section--light .price-card .price span, .section--light-alt .price-card .price span {
  color: var(--text-on-light-secondary);
}
.section--light .faq-question svg, .section--light-alt .faq-question svg { color: var(--brand-purple); }
.section--light .service-included li, .section--light-alt .service-included li {
  background: var(--card-on-light);
  border-color: var(--border-on-light);
  color: var(--text-on-light);
  box-shadow: 0 14px 30px -20px rgba(80,40,150,0.2);
}
.section--light .timeline-step .num-badge, .section--light-alt .timeline-step .num-badge {
  box-shadow: 0 0 0 6px var(--light-bg);
}
.section--light-alt .timeline-step .num-badge { box-shadow: 0 0 0 6px var(--light-bg-2); }
.section--light .timeline-step h3, .section--light-alt .timeline-step h3 { color: var(--text-on-light); }
.section--light .timeline-step p, .section--light-alt .timeline-step p { color: var(--text-on-light-secondary); }
.section--light .timeline::before, .section--light-alt .timeline::before { opacity: 0.5; }

/* Mesh-gradient accent section — used sparingly for feature/CTA moments. No line/dot overlay; the color blooms carry it. */
.section--mesh {
  background:
    var(--noise-img),
    radial-gradient(circle at 15% 20%, rgba(31,200,255,0.32), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(157,78,255,0.30), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(31,200,255,0.18), transparent 50%),
    var(--mesh-bg);
  background-size: 140px 140px, auto, auto, auto;
  color: var(--text-on-dark);
}
.section--mesh p { color: var(--text-on-dark-secondary); }
.section--mesh .container { position: relative; z-index: 1; }

/* Subtle premium grain — layered into each section's own background, no extra pseudo-element needed */
:root {
  --noise-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #C4B5FD;
  background: rgba(157,78,255,0.15);
  border: 1px solid rgba(157,78,255,0.3);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Light-purple-on-light-purple was unreadable on white/light sections — darken text + bg tint there */
.section--light .eyebrow, .section--light-alt .eyebrow,
.section--light .case-tag, .section--light-alt .case-tag {
  color: var(--brand-purple-deep);
  background: rgba(255,255,255,0.65);
  border-color: rgba(116,39,214,0.35);
}

.gradient-text {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple), var(--brand-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 300% auto;
  animation: gradientMove 5s ease infinite;
}
@keyframes gradientMove {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.gradient-bg { background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple)); }

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); }
.section-head p { font-size: 18px; }

/* ---------------- Buttons ---------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  border: none;
  isolation: isolate;
  z-index: 0;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), background 0.45s var(--ease), filter 0.45s var(--ease);
}
/* Gradient ring — the ONLY border. A single, crisp pseudo-element avoids the
   double-edge seam you get from layering a real CSS border underneath a masked one. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  padding: 1.75px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn-secondary::before { opacity: 0.6; transition: opacity 0.45s var(--ease); }
.btn-secondary:hover::before { opacity: 1; }
/* Primary already has a vivid gradient fill — a second loud gradient ring fights it.
   Use a glass-edge rim instead: bright highlight on top, soft fade to dark at the bottom. */
.btn-primary::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.12) 45%, rgba(0,0,0,0.35));
  opacity: 0.85;
  transition: opacity 0.45s var(--ease);
}
.btn-primary:hover::before { opacity: 1; }
/* shine sweep — single soft pass on hover only */
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.9s var(--ease);
  z-index: 1;
}
.btn:hover::after { left: 130%; }
.btn-primary {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(157,78,255,0.45);
}
.btn-primary span, .btn-primary svg { position: relative; z-index: 2; }
.btn-primary:hover {
  transform: translateY(-2px) scale(1.012);
  box-shadow: 0 18px 40px -14px rgba(157,78,255,0.65), 0 0 28px 3px rgba(157,78,255,0.25);
  filter: brightness(1.08);
}
.btn-secondary {
  background: rgba(255,255,255,0.03);
  color: var(--text-on-dark);
}
.btn-secondary:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 18px 36px -16px rgba(157,78,255,0.4), 0 0 22px 2px rgba(31,200,255,0.12);
}
/* On white/light sections, a near-white button is invisible — flip to dark text + tinted fill */
.section--light .btn-secondary, .section--light-alt .btn-secondary {
  background: rgba(21,15,40,0.04);
  color: var(--text-on-light);
  text-shadow: none;
}
.section--light .btn-secondary:hover, .section--light-alt .btn-secondary:hover {
  background: rgba(21,15,40,0.08);
}
.btn:active { transform: translateY(-1px) scale(0.97) !important; transition-duration: 0.12s; }
/* tap ripple */
.btn .btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transform: scale(0);
  animation: btnRipple 0.6s var(--ease);
  pointer-events: none;
  z-index: 1;
}
@keyframes btnRipple { to { transform: scale(2.6); opacity: 0; } }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------------- Header ---------------- */
/* ---------------- Promo top bar ---------------- */
.promo-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  height: var(--promo-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 46px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple), var(--brand-blue));
  background-size: 220% 100%;
  animation: promoBarShift 12s linear infinite;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
}
.promo-bar__btn {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 5px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-family: 'Space Grotesk', var(--font-ui, inherit);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.promo-bar__btn:hover { background: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.55); transform: translateY(-1px); }
.promo-bar strong { font-weight: 800; }
@keyframes promoBarShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.promo-bar__close {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.promo-bar__close:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.08); }
.promo-bar__close svg { width: 14px; height: 14px; }
body.promo-dismissed .promo-bar { display: none; }
body.promo-dismissed { --promo-h: 0px; }
.promo-bar__text-short { display: none; }
@media (max-width: 640px) {
  .promo-bar { padding: 0 38px; font-size: 12px; gap: 6px; }
  .promo-bar__text { display: none; }
  .promo-bar__text-short { display: inline; }
  .promo-bar a { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-bar { animation: none; }
}

.site-header {
  position: fixed;
  /* overlap the promo bar by 1px so no content shows through the seam while scrolling */
  top: calc(var(--promo-h) - 1px); left: 0; right: 0;
  z-index: 1000;
  background: rgba(7, 10, 24, 0.94);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  box-shadow: 0 1px 0 rgba(157,78,255,0.18), 0 12px 32px -16px rgba(0,0,0,0.6);
  isolation: isolate;
  transition: top 0.3s var(--ease);
}
/* graceful fallback where backdrop-filter isn't supported — keep it readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(7, 10, 24, 0.92); }
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157,78,255,0.6), rgba(31,200,255,0.6), transparent);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 30px;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-right: auto; transition: filter 0.3s var(--ease); }
.brand:hover { filter: drop-shadow(0 0 12px rgba(157,78,255,0.55)); }
.brand .crystal-s { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; transition: transform 0.4s var(--ease); }
.brand:hover .crystal-s { transform: rotate(-8deg) scale(1.06); }
.brand-logo { object-fit: contain; display: block; }
.brand-logo--horizontal { height: 56px; width: auto; max-width: 260px; transition: transform 0.4s var(--ease); }
.brand:hover .brand-logo--horizontal { transform: scale(1.04); }
.brand-logo--vertical { height: 156px; width: auto; }
.brand-logo--footer { height: 56px; max-width: 260px; }
.brand--footer { display: inline-flex; }
.nav-links { display: flex; gap: 22px; flex-shrink: 0; }
.nav-links a {
  position: relative;
  color: #fff;
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  padding: 6px 0;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
  transition: left 0.3s var(--ease), right 0.3s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { left: 0; right: 0; }

/* ---------------- "Услуги" mega menu (desktop hover) ---------------- */
.nav-item { position: relative; display: flex; }
/* simple dropdown: padding-top (not margin) keeps the hoverable box flush against
   the link's bottom edge, so there's no gap where the mouse "falls off" and the
   menu closes before it's reached. */
.dropdown-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 220px; padding: 10px 10px 14px;
  background: #0d1024; border: 1px solid rgba(157,78,255,0.22);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.02);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 1002;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav-item:hover .dropdown-menu, .nav-item:focus-within .dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display: block; padding: 9px 14px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.82);
  white-space: nowrap; transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.dropdown-menu a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.dropdown-menu a::after { display: none; }
/* "Цени" periodically grabs attention every 4s, on every device (desktop nav,
   tablet, and the mobile menu). Uses ends-with [href$=] so it matches the
   relative paths ("tseni/", "../tseni/", "../../tseni/") used site-wide —
   must NOT include "index.html", which no longer appears in any link. */
.nav-links a[href$="tseni/"],
.mobile-nav > a[href$="tseni/"] {
  display: inline-block;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple), var(--brand-pink), var(--brand-blue));
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: #fff;
  animation: priceAttn 4s ease-in-out infinite;
}
@keyframes priceAttn {
  0%, 80%   { -webkit-text-fill-color: #fff; transform: scale(1);    background-position: 0% center;   text-shadow: none; }
  85%       { -webkit-text-fill-color: transparent; transform: scale(1.14); background-position: 45% center; text-shadow: 0 0 16px rgba(157,78,255,0.55); }
  90%       { -webkit-text-fill-color: transparent; transform: scale(1.05); background-position: 80% center; text-shadow: 0 0 12px rgba(31,200,255,0.5); }
  95%       { -webkit-text-fill-color: transparent; transform: scale(1.10); background-position: 110% center; text-shadow: 0 0 14px rgba(255,61,203,0.5); }
  100%      { -webkit-text-fill-color: #fff; transform: scale(1);    background-position: 150% center; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a[href$="tseni/"], .mobile-nav > a[href$="tseni/"] { animation: none !important; -webkit-text-fill-color: #fff; }
}
/* Don't nag the visitor with the attention animation while they're already on
   the Цени page — the link carries class="active" there. */
.nav-links a[href$="tseni/"].active,
.mobile-nav > a[href$="tseni/"].active {
  animation: none !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.header-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header-cta .btn-primary { white-space: nowrap; }
.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  background: none; border: none; color: #fff;
  padding: 12px 9px;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  position: absolute; left: 9px; right: 9px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), top 0.35s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 30px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0;
  background: rgba(5, 7, 21, 0.86);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  clip-path: circle(0% at calc(100% - 34px) calc(var(--promo-h) + 34px));
  transition: clip-path 0.55s var(--ease);
  z-index: 999;
  /* content anchored from the top (not bottom) so an expanding services submenu
     pushes items BELOW it down the scroll area instead of shoving earlier
     items above the top edge, out of view */
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(var(--header-h) + var(--promo-h) + 24px) 22px max(26px, env(safe-area-inset-bottom));
  /* overflow-x must be explicit: with only overflow-y set, browsers auto-promote
     the x-axis from "visible" to "auto" too (CSS spec 11.1.1), which let any
     slightly-too-wide child (e.g. a long submenu label) make the whole menu
     pannable left/right. */
  overflow-y: auto; overflow-x: hidden; pointer-events: none;
  counter-reset: mnav;
  -ms-overflow-style: none; scrollbar-width: none;
}
.mobile-nav::-webkit-scrollbar { display: none; width: 0; }
.mobile-nav.is-open { clip-path: circle(150% at calc(100% - 34px) 36px); pointer-events: auto; }
.mobile-nav::before {
  content: '';
  position: absolute; inset: -10%; z-index: -1;
  background:
    radial-gradient(circle at 90% 6%, rgba(157,78,255,0.4), transparent 50%),
    radial-gradient(circle at 4% 92%, rgba(31,200,255,0.3), transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(255,61,203,0.16), transparent 55%);
  animation: mnavGlow 16s ease-in-out infinite;
}
@keyframes mnavGlow {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.12) translate(-3%, 2%); }
}
@media (prefers-reduced-motion: reduce) { .mobile-nav::before { animation: none; } }
/* small label above the links */
.mobile-nav .mobile-nav-label {
  text-align: right; font-family: 'Space Grotesk','Manrope',sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: #7c83a3; margin: 0 6px 6px 0;
  opacity: 0; transform: translateX(20px);
  transition: opacity 0.4s var(--ease) 0.05s, transform 0.4s var(--ease) 0.05s;
}
.mobile-nav.is-open .mobile-nav-label { opacity: 1; transform: translateX(0); }
.mobile-nav > a, .mobile-nav-item-row > a {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end; gap: 13px;
  padding: 13px 14px; font-size: 19px; font-weight: 800; color: #fff;
  text-align: right; line-height: 1.1; border-radius: 12px;
  border-bottom: 1px solid rgba(157,78,255,0.14);
  background-color: transparent;
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  transition: opacity 0.35s var(--ease), transform 0.42s var(--ease), color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.mobile-nav > a { opacity: 0; transform: translateX(30px); }
/* ghost index number on the left */
.mobile-nav > a::before, .mobile-nav-item-row > a::before {
  counter-increment: mnav;
  content: counter(mnav, decimal-leading-zero);
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  color: #B9AEEA; -webkit-text-stroke: 0;
  opacity: 0.92; transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
/* right-edge accent bar (a flex child) that grows in on tap/hover */
.mobile-nav > a::after, .mobile-nav-item-row > a::after {
  content: ''; flex-shrink: 0; width: 5px; height: 22px; border-radius: 4px;
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-purple));
  opacity: 0; transform: scaleY(0.35);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.mobile-nav.is-open > a { opacity: 1; transform: translateX(0); }
.mobile-nav.is-open > a:nth-of-type(1) { transition-delay: 0.06s; }
.mobile-nav.is-open > a:nth-of-type(2) { transition-delay: 0.10s; }
.mobile-nav.is-open > a:nth-of-type(3) { transition-delay: 0.14s; }
.mobile-nav.is-open > a:nth-of-type(4) { transition-delay: 0.18s; }
.mobile-nav.is-open > a:nth-of-type(5) { transition-delay: 0.22s; }
.mobile-nav.is-open > a:nth-of-type(6) { transition-delay: 0.26s; }
.mobile-nav.is-open > a:nth-of-type(7) { transition-delay: 0.30s; }
.mobile-nav.is-open > a:nth-of-type(8) { transition-delay: 0.34s; }
.mobile-nav.is-open > a:hover, .mobile-nav.is-open > a:active, .mobile-nav > a.active,
.mobile-nav-item-row > a:hover, .mobile-nav-item-row > a:active, .mobile-nav-item-row > a.active {
  color: #fff;
  background-color: rgba(157,78,255,0.13);
}
.mobile-nav.is-open > a:active { transform: translateX(-5px); }
.mobile-nav.is-open > a:hover::after, .mobile-nav.is-open > a:active::after, .mobile-nav > a.active::after,
.mobile-nav-item-row > a:hover::after, .mobile-nav-item-row > a:active::after {
  opacity: 1; transform: scaleY(1);
}
.mobile-nav.is-open > a:hover::before, .mobile-nav.is-open > a:active::before, .mobile-nav > a.active::before,
.mobile-nav-item-row > a:hover::before, .mobile-nav-item-row > a:active::before {
  opacity: 1; -webkit-text-stroke: 0; color: var(--brand-purple);
}

/* ---- "Услуги" row in mobile menu: link + expand/collapse toggle for the services submenu ---- */
.mobile-nav-item {
  opacity: 0; transform: translateX(30px);
  transition: opacity 0.35s var(--ease), transform 0.42s var(--ease);
}
.mobile-nav.is-open > .mobile-nav-item { opacity: 1; transform: translateX(0); transition-delay: 0.06s; }
.mobile-nav-item-row { display: flex; align-items: stretch; gap: 4px; }
.mobile-nav-item-row > a { flex: 1; }
.mobile-nav-subtoggle {
  flex-shrink: 0; width: 46px; border: none; border-radius: 12px;
  background-color: transparent; color: #B9AEEA; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.mobile-nav-subtoggle:hover, .mobile-nav-subtoggle:active { background-color: rgba(157,78,255,0.13); color: #fff; }
.mobile-nav-subtoggle svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.mobile-nav-item.is-open .mobile-nav-subtoggle svg { transform: rotate(180deg); }
.mobile-nav-item.is-open .mobile-nav-subtoggle { color: var(--brand-purple); }
.mobile-nav-submenu {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.mobile-nav-item.is-open .mobile-nav-submenu { max-height: 480px; }
.mobile-nav-submenu a {
  display: block; padding: 10px 20px 10px 14px; margin: 0 4px;
  font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.68);
  text-align: right; border-radius: 10px;
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.mobile-nav-submenu a:hover, .mobile-nav-submenu a:active { color: #fff; background-color: rgba(157,78,255,0.1); }
.mobile-nav .mobile-nav-cta {
  margin-top: 20px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.4s var(--ease) 0.4s, transform 0.4s var(--ease) 0.4s;
}
.mobile-nav.is-open .mobile-nav-cta { opacity: 1; transform: translateY(0); }
.mobile-nav .mobile-nav-cta .btn { width: 100%; }
.mobile-nav .mobile-nav-social {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px;
  opacity: 0; transition: opacity 0.4s var(--ease) 0.48s;
}
.mobile-nav.is-open .mobile-nav-social { opacity: 1; }

@media (max-width: 1160px) {
  .nav-links { display: none; }
  .header-cta .btn-primary { display: none; }
  .nav-toggle { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav a, .mobile-nav .mobile-nav-cta, .mobile-nav .mobile-nav-social { transition: none !important; }
}

body { padding-top: calc(var(--header-h) + var(--promo-h)); transition: padding-top 0.3s var(--ease); }

/* ---------------- Hero ---------------- */
.hero {
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 56px 0 64px;
  position: relative;
}
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-22px, 16px) scale(1.05); }
}
/* Hero ambient layer: two faint slow-drifting orbs + gently rising particles.
   Everything is near-transparent and in constant motion — alive, never busy. */
.hero.section--dark::before, .hero.section--dark::after { display: none; }
.hero-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* ambient orbs that slowly travel across the hero (real positional drift, not just pulsing) */
.hero-aurora::before, .hero-aurora::after {
  content: ''; position: absolute; width: 48vw; max-width: 580px; aspect-ratio: 1;
  border-radius: 50%; filter: blur(80px); opacity: 0.22;
  will-change: transform;
}
.hero-aurora::before { background: radial-gradient(circle, var(--brand-blue), transparent 70%); top: -12%; left: -8%; animation: heroDrift1 36s ease-in-out infinite; }
.hero-aurora::after { background: radial-gradient(circle, var(--brand-purple), transparent 70%); top: -6%; right: -10%; animation: heroDrift2 46s ease-in-out infinite; }
@keyframes heroDrift1 { 0% { transform: translate(0,0); } 50% { transform: translate(46%, 34%); } 100% { transform: translate(0,0); } }
@keyframes heroDrift2 { 0% { transform: translate(0,0); } 50% { transform: translate(-40%, 48%); } 100% { transform: translate(0,0); } }
/* ---- Twinkling stars (shared by the hero and every section) ----
   A glowing core + soft 4-point glints, blinking out of sync and drifting gently. */
.hero-aurora span, .section-fx span {
  position: absolute;
  width: var(--s, 3px); height: var(--s, 3px);
  border-radius: 50%;
  background: currentColor;
  color: #ffffff;
  box-shadow: 0 0 5px 1px currentColor;
  opacity: 0;
  will-change: transform, opacity;
  animation: starDrift var(--dr, 16s) ease-in-out infinite, starTwinkle var(--tw, 4s) ease-in-out infinite;
}
.hero-aurora span { animation-play-state: running; }
.section-fx span { animation-play-state: paused; }
.section-fx.is-fx-on span { animation-play-state: running; }
.hero-aurora span::before, .hero-aurora span::after,
.section-fx span::before, .section-fx span::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.hero-aurora span::before, .section-fx span::before { width: 1px; height: var(--glint, 13px); background: linear-gradient(to bottom, transparent, currentColor, transparent); }
.hero-aurora span::after,  .section-fx span::after  { width: var(--glint, 13px); height: 1px; background: linear-gradient(to right, transparent, currentColor, transparent); }
@keyframes starDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(var(--dx, 12px), -22px, 0); }
}
@keyframes starTwinkle {
  0%, 100% { opacity: calc(var(--o, 0.5) * 0.14); }
  25% { opacity: var(--o, 0.5); }
  46% { opacity: calc(var(--o, 0.5) * 0.32); }
  72% { opacity: var(--o, 0.5); }
}
/* mobile: gentle blink only (no drift), lower peak = more subtle, cheaper */
@keyframes starTwinkleSoft {
  0%, 100% { opacity: calc(var(--o, 0.5) * 0.06); }
  50% { opacity: calc(var(--o, 0.5) * 0.5); }
}
/* hero stars — realistic star colours (white / blue-white / warm) on the dark hero */
.hero-aurora span:nth-child(2n)   { color: #cfe0ff; }
.hero-aurora span:nth-child(3n)   { color: #d6f4ff; }
.hero-aurora span:nth-child(4n+1) { color: #ffe6c0; }
.hero-aurora span:nth-child(1)  { left: 6%;  top: 18%; --s: 3px;   --glint: 14px; --o: .95; --dx: 14px;  --dr: 17s; --tw: 3.4s; }
.hero-aurora span:nth-child(2)  { left: 15%; top: 62%; --s: 2px;   --glint: 9px;  --o: .7;  --dx: -12px; --dr: 21s; --tw: 4.8s; }
.hero-aurora span:nth-child(3)  { left: 24%; top: 34%; --s: 3.5px; --glint: 16px; --o: 1;   --dx: 16px;  --dr: 19s; --tw: 2.8s; }
.hero-aurora span:nth-child(4)  { left: 33%; top: 76%; --s: 2px;   --glint: 8px;  --o: .6;  --dx: -14px; --dr: 24s; --tw: 5.6s; }
.hero-aurora span:nth-child(5)  { left: 42%; top: 22%; --s: 3px;   --glint: 13px; --o: .9;  --dx: 10px;  --dr: 20s; --tw: 3.9s; }
.hero-aurora span:nth-child(6)  { left: 50%; top: 58%; --s: 2px;   --glint: 9px;  --o: .65; --dx: -10px; --dr: 23s; --tw: 4.4s; }
.hero-aurora span:nth-child(7)  { left: 60%; top: 30%; --s: 3.5px; --glint: 15px; --o: .95; --dx: 14px;  --dr: 18s; --tw: 3.1s; }
.hero-aurora span:nth-child(8)  { left: 69%; top: 70%; --s: 2px;   --glint: 8px;  --o: .6;  --dx: -16px; --dr: 25s; --tw: 5.2s; }
.hero-aurora span:nth-child(9)  { left: 78%; top: 26%; --s: 3px;   --glint: 13px; --o: .9;  --dx: 12px;  --dr: 21s; --tw: 3.7s; }
.hero-aurora span:nth-child(10) { left: 86%; top: 64%; --s: 2px;   --glint: 9px;  --o: .65; --dx: -12px; --dr: 26s; --tw: 4.9s; }
.hero-aurora span:nth-child(11) { left: 93%; top: 40%; --s: 3px;   --glint: 12px; --o: .85; --dx: 10px;  --dr: 19s; --tw: 3.3s; }
.hero-aurora span:nth-child(12) { left: 38%; top: 46%; --s: 4px;   --glint: 18px; --o: 1;   --dx: 18px;  --dr: 27s; --tw: 2.6s; }
@media (prefers-reduced-motion: reduce) {
  .hero-aurora::before, .hero-aurora::after { animation: none; }
  .hero-aurora span, .section-fx span { animation: none !important; opacity: calc(var(--o, 0.5) * 0.7); }
}
/* ---- Star layer injected into every section (visuals shared with .hero-aurora above) ---- */
.section-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* positions spread across width + height so even short, card-dense sections always show stars */
.section-fx span:nth-child(1)  { left: 6%;  top: 16%; --s: 3px;   --glint: 14px; --o: .85; --dx: 18px;  --dr: 14s; --tw: 3.6s; }
.section-fx span:nth-child(2)  { left: 17%; top: 52%; --s: 2px;   --glint: 9px;  --o: .6;  --dx: -16px; --dr: 17s; --tw: 4.7s; }
.section-fx span:nth-child(3)  { left: 12%; top: 82%; --s: 3px;   --glint: 13px; --o: .8;  --dx: 16px;  --dr: 15s; --tw: 3.1s; }
.section-fx span:nth-child(4)  { left: 30%; top: 24%; --s: 3.5px; --glint: 16px; --o: .9;  --dx: 20px;  --dr: 16s; --tw: 2.7s; }
.section-fx span:nth-child(5)  { left: 44%; top: 70%; --s: 2px;   --glint: 8px;  --o: .55; --dx: -18px; --dr: 19s; --tw: 5.3s; }
.section-fx span:nth-child(6)  { left: 56%; top: 18%; --s: 3px;   --glint: 14px; --o: .85; --dx: 14px;  --dr: 15s; --tw: 3.4s; }
.section-fx span:nth-child(7)  { left: 70%; top: 60%; --s: 2px;   --glint: 9px;  --o: .6;  --dx: -16px; --dr: 18s; --tw: 4.9s; }
.section-fx span:nth-child(8)  { left: 84%; top: 28%; --s: 3.5px; --glint: 15px; --o: .9;  --dx: 16px;  --dr: 14s; --tw: 2.9s; }
.section-fx span:nth-child(9)  { left: 90%; top: 74%; --s: 2px;   --glint: 8px;  --o: .58; --dx: -14px; --dr: 17s; --tw: 5.1s; }
.section-fx span:nth-child(10) { left: 95%; top: 44%; --s: 3px;   --glint: 12px; --o: .8;  --dx: 12px;  --dr: 16s; --tw: 3.7s; }
.section-fx span:nth-child(11) { left: 3%;  top: 46%; --s: 3px;   --glint: 13px; --o: .8;  --dx: 14px;  --dr: 18s; --tw: 4.2s; }
/* dark sections — light star colours (white / blue-white / warm) */
.section-fx:not(.section-fx--light) span { color: #ffffff; }
.section-fx:not(.section-fx--light) span:nth-child(2n)   { color: #cfe0ff; }
.section-fx:not(.section-fx--light) span:nth-child(3n)   { color: #d6f4ff; }
.section-fx:not(.section-fx--light) span:nth-child(4n+1) { color: #ffe6c0; }
/* light sections — dark, saturated stars so they read on white */
.section-fx--light span { color: #7c3aed; }
.section-fx--light span:nth-child(2n)   { color: #1d4ed8; }
.section-fx--light span:nth-child(3n)   { color: #db2777; }
.section-fx--light span:nth-child(4n+1) { color: #0891b2; }

.hero-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 72px; align-items: center; position: relative; z-index: 1; }

/* ---- Page-hero media grid: text + illustration side by side (reused across
   pricing, services, results, process, contact, about, reviews) ---- */
.pricing-hero-grid, .hero-media-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; position: relative; z-index: 1; margin-bottom: 56px; }
.pricing-hero-visual img, .hero-media-visual img {
  width: 100%; height: auto; display: block; border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -30px rgba(157,78,255,0.45);
}
@media (max-width: 900px) {
  .pricing-hero-grid, .hero-media-grid { grid-template-columns: 1fr; gap: 32px; }
  /* image follows the title/description on mobile (DOM order: text first, image second) */
}
.hero h1 { font-size: clamp(30px, 3.6vw, 50px); margin-bottom: 20px; }
.hero .lead { font-size: 17px; max-width: 480px; margin-bottom: 32px; }
.trust-list { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 24px 0 0; }
.trust-list li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--text-on-dark-secondary); }
.trust-list svg { width: 18px; height: 18px; color: #34D399; flex-shrink: 0; }

.hero-risk-note { margin: 14px 0 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-on-dark-secondary); }
.hero-proof { display: flex; align-items: center; gap: 14px; margin: 22px 0 4px; font-size: 13px; color: var(--text-on-dark-secondary); flex-wrap: wrap; }
.hero-proof-stars { color: #F59E0B; font-size: 14px; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
.hero-proof-stars strong { color: #fff; font-size: 14px; }

.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 400px; }
.hero-visual .crystal-s-large { width: 220px; height: 220px; object-fit: contain; border-radius: 24px; filter: drop-shadow(0 30px 70px rgba(157,78,255,0.5)); animation: floatY 6s ease-in-out infinite; position: relative; z-index: 1; }
.hero-platform {
  position: absolute;
  width: 260px; height: 70px;
  bottom: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(157,78,255,0.4), rgba(31,200,255,0.15) 55%, transparent 75%);
  filter: blur(16px);
  animation: ringPulse 4s ease-in-out infinite;
}
.hero-ring {
  position: absolute;
  width: 290px; height: 290px;
  border-radius: 50%;
  border: 1px solid rgba(157,78,255,0.35);
  animation: ringSpin 16s linear infinite, ringPulse 4s ease-in-out infinite;
}
.hero-ring::before {
  content: '';
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  border: 1px dashed rgba(31,200,255,0.3);
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes ringPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(2deg); }
}

.stat-card {
  position: absolute;
  z-index: 2;
  width: 152px;
  background: rgba(15,18,38,0.75);
  border: 1px solid var(--border-dark);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 0 20px 45px -15px rgba(0,0,0,0.55);
  animation: floatCard 5.5s ease-in-out infinite;
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(157,78,255,0.6), rgba(31,200,255,0.1), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.stat-card:nth-of-type(2) { animation-duration: 6.5s; animation-delay: 0.3s; }
.stat-card:nth-of-type(3) { animation-duration: 6s; animation-delay: 0.6s; }
.stat-card:nth-of-type(4) { animation-duration: 7s; animation-delay: 0.9s; }
.stat-card-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--text-on-dark-secondary); margin-bottom: 6px; white-space: nowrap; }
.stat-card-head svg { width: 15px; height: 15px; color: #A78BFA; flex-shrink: 0; }
.stat-card-num { font-size: 19px; font-weight: 800; color: #fff; font-family: 'Manrope', sans-serif; margin-bottom: 8px; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.stat-card-unit { font-size: 10.5px; font-weight: 600; color: var(--text-on-dark-secondary); font-family: 'Space Grotesk','Manrope',sans-serif; letter-spacing: 0.01em; }
.mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.mini-bars span { flex: 1; border-radius: 2px; background: linear-gradient(180deg, var(--brand-purple), var(--brand-blue)); opacity: 0.85; }
@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
/* wrapper is transparent on desktop so cards stay absolutely positioned around the crystal */
.hero-stats { display: contents; }
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero-proof { justify-content: center; }
  /* stack trust items left-aligned inside a centered block so the check never detaches */
  .trust-list { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 12px; width: fit-content; max-width: 100%; margin: 22px auto 0; text-align: left; }
  .trust-list li { width: auto; }
  .btn-row { justify-content: center; }
  .hero-visual { min-height: 360px; margin-top: 8px; }
  .stat-card { width: 118px; padding: 10px 12px; }
}
/* Phone & large-phone: crystal stays animated up top, the 4 metric cards become an
   animated 2x2 grid below — keeps the hero lively instead of empty. */
@media (max-width: 640px) {
  .hero-visual { flex-direction: column; min-height: auto; gap: 26px; margin-top: 28px; }
  .hero-ring, .hero-platform { display: none; }
  .hero-visual .crystal-s-large { width: 150px; height: 150px; }
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    position: relative;
    z-index: 2;
  }
  .hero-stats .stat-card {
    position: static;
    width: auto;
    text-align: left;
    animation-duration: 5s;
  }
  .stat-card-num { font-size: 22px; }
}
@media (max-width: 360px) {
  .hero-visual .crystal-s-large { width: 128px; height: 128px; }
  .hero-stats .stat-card { padding: 12px 14px; }
}

/* ---------------- Clients logo wall (two-row marquee) ---------------- */
.logowall-section {
  position: relative;
  z-index: 1;
  padding: 56px 0;
  background: var(--dark-bg-2);
  box-shadow: inset 0 1px 0 rgba(157,78,255,0.28), inset 0 -1px 0 rgba(31,200,255,0.18), 0 1px 0 rgba(0,0,0,0.4);
}
.logowall {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  /* fade edges horizontally only */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
/* vertical padding gives the lifted card + its shadow room so it is never clipped */
.logowall-row { overflow: hidden; padding: 18px 0; }
.logowall-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.logowall-row--right .logowall-track { animation: logowallRight 60s linear infinite; }
.logowall-row--left .logowall-track { animation: logowallLeft 72s linear infinite; }
/* pause (not slow-down) on hover — changing duration mid-loop causes the visible jump */
.logowall:hover .logowall-track { animation-play-state: paused; }
@keyframes logowallLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes logowallRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.logo-card {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 210px;
  height: 74px;
  padding: 0 30px;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  box-shadow: 0 10px 26px -14px rgba(0,0,0,0.6);
  text-decoration: none;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.logo-card__mark {
  width: 12px; height: 12px; flex-shrink: 0;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
  transform: rotate(45deg);
}
.logo-card__name {
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #2a2540;
}
.logo-card__img {
  max-height: 44px; max-width: 158px; width: auto; height: auto;
  object-fit: contain; display: block;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.45s var(--ease), opacity 0.45s var(--ease);
}
@media (max-width: 640px) { .logo-card__img { max-height: 38px; max-width: 126px; } }
.logo-card:hover {
  transform: translateY(-5px);
  border-color: rgba(157,78,255,0.5);
  box-shadow: 0 26px 46px -18px rgba(0,0,0,0.7), 0 0 26px -4px rgba(157,78,255,0.5);
}
.logo-card:hover .logo-card__img { filter: grayscale(0); opacity: 1; }
@media (max-width: 640px) {
  .logowall-section { padding: 48px 0; }
  .logowall { gap: 14px; }
  .logowall-track { gap: 14px; }
  .logo-card { min-width: 168px; height: 66px; padding: 0 22px; }
  .logo-card__name { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .logowall-row--right .logowall-track,
  .logowall-row--left .logowall-track { animation: none; }
  .logowall-row { overflow-x: auto; scrollbar-width: none; }
  .logowall-row::-webkit-scrollbar { display: none; }
}

/* ---------------- Logo marquee (tools / platforms) ---------------- */
.logo-strip-section {
  padding: 36px 0;
  position: relative;
  z-index: 1;
  background: var(--dark-bg-2);
  box-shadow: inset 0 1px 0 rgba(157,78,255,0.28), inset 0 -1px 0 rgba(31,200,255,0.18), 0 1px 0 rgba(0,0,0,0.4);
}
.logo-strip-label {
  text-align: center;
  font-family: 'Manrope','Golos Text',sans-serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 30px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple), var(--brand-pink), var(--brand-blue));
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientMove 6s ease infinite;
}
@media (prefers-reduced-motion: reduce) { .logo-strip-label { animation: none; } }
.real-work-note {
  text-align: center;
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--text-on-dark-secondary);
}
.real-work-note a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 2px; transition: color 0.3s var(--ease); }
.real-work-note a:hover { color: var(--brand-purple); }
.logo-strip {
  overflow: hidden;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.logo-strip::-webkit-scrollbar { display: none; height: 0; }
.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 16px;
  animation: logoScroll 36s linear infinite;
  will-change: transform;
}
.logo-strip:hover .logo-track { animation-play-state: paused; }
@keyframes logoScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.logo-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; color: var(--text-on-dark-secondary);
  white-space: nowrap;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-dark);
  background: rgba(255,255,255,0.025);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
.logo-item:hover {
  color: #fff;
  transform: translateY(-3px);
  border-color: rgba(167,139,250,0.45);
  background: rgba(167,139,250,0.1);
}
.logo-item svg { width: 18px; height: 18px; flex-shrink: 0; color: #A78BFA; transition: transform 0.4s var(--ease), color 0.4s var(--ease); }
.logo-item:hover svg { color: #C4B5FD; transform: scale(1.12); }
@media (max-width: 640px) {
  .logo-track { gap: 12px; animation-duration: 26s; }
  .logo-item { font-size: 13px; padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
  .logo-strip { overflow-x: auto; }
}

/* ---------------- Bento / Services ---------------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* A lone card left alone on the final row (e.g. 4 cards in a 3-col grid) stretches
   full-width instead of sitting flush left — applies to any *-grid using this 3-col
   pattern. Standing rule: never leave a single trailing grid item unstretched. */
.bento-grid > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), background 0.6s var(--ease);
  grid-column: span 1;
}
.bento-card:hover { transform: translateY(-8px); box-shadow: 0 36px 72px -28px rgba(31,200,255,0.32); background: var(--glass-bg-hover); }
.bento-card.span-2 { grid-column: span 2; }

/* Gradient ring border — same crisp single-pseudo technique as buttons, only on hover */
.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.bento-card:hover::before { opacity: 1; }

/* Soft top glow shared by interactive cards — no cursor tracking */
.bento-card, .case-card, .testimonial-card, .price-card {
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease), background 0.6s var(--ease);
}
.bento-card::after, .case-card::after, .testimonial-card::after, .price-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 50% -10%, rgba(157,78,255,0.14), transparent 60%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.bento-card:hover::after, .case-card:hover::after, .testimonial-card:hover::after, .price-card:hover::after { opacity: 1; }
.bento-card > *, .case-card > *, .testimonial-card > * { position: relative; z-index: 1; }

/* Floating gradient icon badge — replaces the old full-width color banner */
.service-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.service-icon svg {
  width: 25px; height: 25px;
  color: #fff;
  position: relative;
  z-index: 2;
  transition: transform 0.5s var(--ease);
}
.bento-card:hover .service-icon { transform: translateY(-3px) scale(1.06); }
.bento-card:hover .service-icon svg { transform: rotate(-6deg); }
.service-icon::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  background: inherit;
  filter: blur(11px);
  opacity: 0.45;
  z-index: 0;
  transition: opacity 0.5s var(--ease);
}
.bento-card:hover .service-icon::before { opacity: 0.7; }
/* Only 2 main brand hues site-wide (blue + purple) — every icon variant maps onto one of these two. */
.service-icon--blue, .service-icon--teal { background: linear-gradient(135deg, #4FD9FF, #1D4ED8); }
.service-icon--purple, .service-icon--pink, .service-icon--amber { background: linear-gradient(135deg, #C9A7FF, #7C3AED); }

.bento-body { padding: 28px 28px 28px; flex: 1; display: flex; flex-direction: column; }
.bento-card h3 { font-size: 19px; margin-bottom: 8px; }
.bento-card p { font-size: 14.5px; margin-bottom: 0; flex: 1; }
.card-link { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 700; color: #60A5FA; transition: gap 0.45s var(--ease), color 0.35s var(--ease); }
.card-link::after {
  content: '';
  position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px;
  background: linear-gradient(90deg, #60A5FA, var(--brand-purple));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.bento-card:hover .card-link { gap: 10px; color: #93C5FD; }
.bento-card:hover .card-link::after { transform: scaleX(1); }

@media (max-width: 920px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
  .bento-card.span-2 { grid-column: 1 / -1; }
  /* re-evaluate the lonely-last-card rule for 2-col instead of 3-col */
  .bento-grid > :last-child:nth-child(3n+1) { grid-column: auto; }
  .bento-grid > :last-child:nth-child(2n+1) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .bento-card.span-2 { grid-column: 1 / -1; }
  .service-icon { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 14px; }
  .service-icon svg { width: 20px; height: 20px; }
  .bento-body { padding: 18px 18px 20px; }
  .bento-card h3 { font-size: 15.5px; margin-bottom: 5px; }
  .bento-card p { font-size: 12.5px; line-height: 1.5; }
  .bento-card .service-included { display: none; }
  .card-link { font-size: 12.5px; margin-top: 10px; }
}
@media (max-width: 420px) {
  .bento-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------- Pricing ---------------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pricing-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pricing-grid--4 .price-card { padding: 32px 24px; }
.pricing-grid--4 .price { font-size: 34px; }
@media (max-width: 1100px) { .pricing-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pricing-grid--4 { grid-template-columns: 1fr; } }

.addon-block { margin-top: 56px; }
.addon-block-title { font-size: 18px; margin-bottom: 16px; }
.addon-list {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.addon-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px;
  font-size: 14.5px;
  color: var(--text-on-dark-secondary);
  border-bottom: 1px solid var(--border-dark);
  transition: background 0.3s var(--ease);
}
.addon-row:last-child { border-bottom: none; }
.addon-row:hover { background: rgba(255,255,255,0.04); }
.addon-row strong { color: #fff; font-weight: 700; white-space: nowrap; }
.section--light .addon-block-title, .section--light-alt .addon-block-title { color: var(--text-on-light); }
.section--light .addon-list, .section--light-alt .addon-list { background: var(--card-on-light); border-color: var(--border-on-light); }
.section--light .addon-row, .section--light-alt .addon-row { border-color: var(--border-on-light); color: var(--text-on-light-secondary); }
.section--light .addon-row strong, .section--light-alt .addon-row strong { color: var(--text-on-light); }
@media (max-width: 560px) { .addon-row { flex-direction: column; align-items: flex-start; gap: 4px; } }
.addon-hint { font-size: 12px; font-weight: 500; color: var(--text-on-dark-secondary); opacity: 0.7; margin-left: 4px; }
.section--light .addon-hint, .section--light-alt .addon-hint { color: var(--text-on-light-secondary); }

/* ---- generic inline info icon + hover tooltip (reused wherever a short clarifying note is needed) ---- */
.info-hint {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; vertical-align: middle;
  border-radius: 50%; border: 1px solid rgba(157,78,255,0.5);
  color: var(--brand-purple); cursor: default; flex-shrink: 0;
}
.info-hint svg { width: 11px; height: 11px; }
.info-hint .info-hint-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: 240px; padding: 10px 12px;
  background: #1a1030; border: 1px solid rgba(157,78,255,0.4); border-radius: 10px;
  font-size: 12px; font-weight: 400; line-height: 1.5; color: rgba(255,255,255,0.8);
  text-align: left; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s; z-index: 60; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.info-hint .info-hint-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(157,78,255,0.4);
}
.info-hint:hover .info-hint-tip, .info-hint:focus-visible .info-hint-tip { opacity: 1; visibility: visible; }
@media (max-width: 560px) { .info-hint .info-hint-tip { width: 200px; left: auto; right: -10px; transform: none; } .info-hint .info-hint-tip::after { left: auto; right: 14px; transform: none; } }
.price-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  position: relative;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease), background 0.6s var(--ease);
}
.price-card:hover {
  transform: translateY(-6px);
  border-color: rgba(157,78,255,0.45);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 30px 60px -24px rgba(157,78,255,0.35);
}
.price-card.featured:hover { transform: scale(1.04) translateY(-6px); }
.price-card.featured {
  background: linear-gradient(160deg, rgba(31,200,255,0.18), rgba(157,78,255,0.18));
  border-color: rgba(157,78,255,0.5);
  box-shadow: var(--shadow-glow);
  transform: scale(1.04);
}
.price-card .badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
  color: #fff; font-size: 12px; font-weight: 800; padding: 6px 16px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.price-card h3 {
  font-family: 'Manrope', 'Golos Text', sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-transform: none;
  line-height: 1.18;
  color: #fff;
  margin-bottom: 16px;
  padding-bottom: 16px;
  position: relative;
}
.price-card h3::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 42px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
  transition: width 0.4s var(--ease);
}
.price-card:hover h3::after { width: 64px; }
.price-card.featured h3 { font-size: 25px; }
.price-card.featured h3::after { width: 64px; }
/* dark-section price cards keep white titles; light-section override already sets dark text */
.section--light .price-card h3, .section--light-alt .price-card h3 { color: var(--text-on-light); }
.price-card .price { font-size: 44px; font-weight: 800; margin: 8px 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-card .price span { font-size: 16px; font-weight: 600; color: var(--text-on-dark-secondary); }
.price-card .price-old { font-size: 22px; font-weight: 700; color: var(--text-on-dark-secondary); text-decoration: line-through; opacity: 0.65; }
.discount-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.03em;
  color: #fff; background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
  padding: 5px 12px; border-radius: 999px; margin-bottom: 10px;
}
.section--light .price-card .price-old, .section--light-alt .price-card .price-old { color: var(--text-on-light-secondary); }
.price-card ul { margin: 28px 0; }
.price-card li { display: flex; gap: 10px; padding: 8px 0; font-size: 14.5px; color: var(--text-on-dark-secondary); }
.price-card li svg { width: 18px; height: 18px; color: #34D399; flex-shrink: 0; margin-top: 1px; }
.price-card .btn { width: 100%; justify-content: center; }
/* Setup fee chip with hover tooltip */
.setup-fee-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 7px 12px;
  background: rgba(157,78,255,0.08);
  border: 1px solid rgba(157,78,255,0.25);
  border-radius: 40px;
  font-size: 12px;
  font-weight: 600;
  color: #C4B5FD;
  cursor: default;
  transition: background 0.25s, border-color 0.25s;
  width: 100%;
  justify-content: center;
}
.setup-fee-chip:hover {
  background: rgba(157,78,255,0.16);
  border-color: rgba(157,78,255,0.5);
}
.setup-fee-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.setup-fee-chip .setup-fee-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  padding: 12px 14px;
  background: #1a1030;
  border: 1px solid rgba(157,78,255,0.4);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  line-height: 1.55;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 50;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.setup-fee-chip .setup-fee-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(157,78,255,0.4);
}
.setup-fee-chip:hover .setup-fee-tooltip {
  opacity: 1;
  visibility: visible;
}
.setup-fee-tooltip strong { color: #fff; display: block; margin-bottom: 4px; font-size: 12.5px; }
.setup-fee-extra { display: inline-block; color: #C4B5FD; font-weight: 700; border-top: 1px dashed rgba(157,78,255,0.35); padding-top: 7px; margin-top: 2px; }
/* second pill (below the setup fee) for the +6% budget note — same shape, but a quiet,
   understated neutral tone so it reads as a soft footnote, not a loud badge */
.setup-fee-chip--budget {
  margin-top: 8px;
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.setup-fee-chip--budget:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.72);
}
.setup-fee-chip--budget .setup-fee-tooltip { border-color: rgba(255,255,255,0.2); }
.setup-fee-chip--budget .setup-fee-tooltip::after { border-top-color: rgba(255,255,255,0.2); }
.pricing-risk-note { text-align: center; margin-top: 32px; font-size: 13.5px; color: var(--text-on-dark-secondary); }
.pricing-risk-note .link-accent { margin-left: 4px; }
@media (max-width: 920px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; order: -1; }
}

/* ---------------- Results: performance dashboard ---------------- */
.results-layout { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 52px; align-items: center; }
.results-intro .section-head { margin-bottom: 0; }
.results-intro h2 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 14px; }
.results-intro > p { font-size: 17px; margin-bottom: 26px; }
.track-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 28px; }
.track-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: 14px;
  background: var(--glass-bg); border: 1px solid var(--border-dark);
  font-size: 14.5px; color: var(--text-on-dark);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.track-list li:hover { transform: translateX(5px); background: var(--glass-bg-hover); border-color: rgba(157,78,255,0.4); }
.track-list strong { font-weight: 800; color: #fff; }
.track-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(31,200,255,0.18), rgba(157,78,255,0.18)); color: #C4B5FD; }
.track-ico svg { width: 19px; height: 19px; }

.dashboard {
  position: relative;
  background: linear-gradient(165deg, rgba(18,22,44,0.92), rgba(9,12,26,0.96));
  border: 1px solid rgba(157,78,255,0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -36px rgba(157,78,255,0.5);
  overflow: hidden;
}
.dashboard__bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); }
.dashboard__dots { display: inline-flex; gap: 6px; }
.dashboard__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.dashboard__dots i:first-child { background: rgba(255,61,203,0.6); }
.dashboard__dots i:nth-child(2) { background: rgba(31,200,255,0.55); }
.dashboard__title { font-family: 'Space Grotesk','Manrope',sans-serif; font-size: 13px; font-weight: 700; color: var(--text-on-dark); letter-spacing: 0.02em; }
.dashboard__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #34D399; }
.dashboard__live i { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52,211,153,0.6); animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5);} 70%{ box-shadow: 0 0 0 7px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} }
.dashboard__chart { position: relative; padding: 22px 20px 8px; }
.dashboard__chart svg { width: 100%; height: 180px; display: block; }
.dashboard__chart .grid { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.dash-area { opacity: 0; transition: opacity 0.9s var(--ease) 0.35s; }
.dash-line { stroke-dasharray: 760; stroke-dashoffset: 760; transition: stroke-dashoffset 1.5s var(--ease) 0.15s; filter: drop-shadow(0 6px 14px rgba(157,78,255,0.5)); }
.is-visible .dash-area { opacity: 1; }
.is-visible .dash-line { stroke-dashoffset: 0; }
.dashboard__axis { display: flex; justify-content: space-between; padding: 6px 4px 0; font-size: 11px; color: var(--text-on-dark-secondary); }
.dashboard__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.07); border-top: 1px solid rgba(255,255,255,0.07); }
.kpi { background: #0c1022; padding: 18px 16px; text-align: center; }
.kpi-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-on-dark-secondary); letter-spacing: 0.04em; text-transform: uppercase; }
.kpi-val { display: block; font-family: 'Space Grotesk','Manrope',sans-serif; font-size: 30px; font-weight: 800; margin: 4px 0 2px; background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi-trend { font-size: 11px; font-weight: 700; }
.kpi-trend--up { color: #34D399; }

.focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.focus-card {
  position: relative; overflow: hidden;
  background: var(--glass-bg); border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg); padding: 26px;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
}
.focus-card:hover { transform: translateY(-6px); border-color: rgba(157,78,255,0.4); background: var(--glass-bg-hover); box-shadow: 0 30px 60px -26px rgba(157,78,255,0.4); }
.focus-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.focus-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(31,200,255,0.18), rgba(157,78,255,0.18)); color: #C4B5FD; transition: transform 0.4s var(--ease); }
.focus-card:hover .focus-ico { transform: scale(1.08) rotate(-4deg); }
.focus-ico svg { width: 22px; height: 22px; }
.focus-card h3 { font-size: 18px; color: #fff; margin-bottom: 8px; }
.focus-card p { font-size: 14px; margin: 0 0 18px; }
.focus-card .spark { width: 100%; height: 30px; }
.focus-card .spark polyline { fill: none; stroke: url(#dashLine); stroke: var(--brand-blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.2s var(--ease) 0.2s; }
.is-visible .focus-card .spark polyline { stroke-dashoffset: 0; }

@media (max-width: 920px) {
  .results-layout { grid-template-columns: 1fr; gap: 36px; }
  .focus-grid { grid-template-columns: 1fr; }
}

/* ---------------- Results / metrics ---------------- */
.metrics-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
  background: var(--glass-bg); border: 1px solid var(--border-dark); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius-lg); padding: 40px;
  box-shadow: var(--shadow-soft); margin-bottom: 64px;
}
.metric-item { text-align: center; }
.metric-item .num { font-size: 34px; font-weight: 800; background: linear-gradient(90deg,var(--brand-blue),var(--brand-purple)); -webkit-background-clip:text; background-clip:text; color: transparent; }
.metric-item .label { font-size: 13.5px; color: var(--text-on-dark); font-weight: 600; }
.metric-item .sub { font-size: 12px; color: #64748B; }
@media (max-width: 920px) { .metrics-strip { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .metrics-strip { grid-template-columns: 1fr; gap: 32px; } }

.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-card { position: relative; overflow: hidden; background: var(--glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-soft); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), background 0.6s var(--ease); }
.case-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple)); transform: scaleX(0.4); transform-origin: left; opacity: 0.5; transition: transform 0.6s var(--ease), opacity 0.6s var(--ease); }
.case-card:hover { transform: translateY(-5px) scale(1.012); box-shadow: 0 28px 54px -22px rgba(31,200,255,0.3); background: var(--glass-bg-hover); }
.case-card:hover::before { transform: scaleX(1); opacity: 1; }
.case-tag { display: inline-flex; align-items: center; gap: 6px; font-family: 'Space Grotesk', 'Manrope', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: #C4B5FD; background: rgba(157,78,255,0.15); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.case-card h3 { font-size: 18px; }
.case-card .period { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }
.case-stats { display: flex; gap: 20px; margin-bottom: 16px; }
.case-stats > div { flex: 1 1 0; min-width: 0; }
.case-stats .stat-num { font-size: 22px; font-weight: 800; overflow-wrap: break-word; }
.case-stats .stat-label { font-size: 12.5px; color: var(--text-secondary); overflow-wrap: break-word; }
@media (max-width: 760px) {
  .case-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* room on every side so card shadows aren't clipped by the scroller */
    padding-top: 16px;
    padding-bottom: 46px;
    margin: 0 -24px;
    padding-left: 24px; padding-right: 24px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .case-grid::-webkit-scrollbar { display: none; height: 0; }
  .case-card { scroll-snap-align: start; }
}

/* ---------------- Process timeline ---------------- */
/* ---------------- Process: alternating journey with centered spine ---------------- */
.journey { position: relative; max-width: 920px; margin: 8px auto 0; }
.journey__spine {
  position: absolute; top: 10px; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 3px; border-radius: 3px; overflow: hidden;
  background: linear-gradient(180deg, rgba(157,78,255,0.22), rgba(31,200,255,0.22));
}
.journey__flow {
  position: absolute; left: 0; right: 0; top: 0; height: 38%;
  background: linear-gradient(180deg, transparent, var(--brand-purple), var(--brand-blue), transparent);
  animation: journeyFlow 4.5s ease-in-out infinite;
}
@keyframes journeyFlow { 0% { transform: translateY(-110%); } 100% { transform: translateY(360%); } }
@media (prefers-reduced-motion: reduce) { .journey__flow { display: none; } }

.journey-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  align-items: center;
  margin-bottom: 18px;
}
.journey-step:last-child { margin-bottom: 0; }
.journey-node {
  grid-column: 2; justify-self: center;
  width: 60px; height: 60px; border-radius: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk','Manrope',sans-serif; font-weight: 800; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
  box-shadow: 0 0 0 7px var(--light-soft-bg, #f4f1fb), 0 14px 30px -10px rgba(157,78,255,0.6);
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.journey-node--final { background: linear-gradient(135deg, var(--brand-purple), #16A34A); }
.journey-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  display: flex; align-items: flex-start; gap: 16px;
  box-shadow: 0 22px 48px -28px rgba(80,40,150,0.3);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.journey-card::after {
  content: ''; position: absolute; top: 50%; width: 26px; height: 2px;
  background: linear-gradient(90deg, rgba(157,78,255,0.5), transparent);
  transform: translateY(-50%);
}
/* spine is the 1st div child, so steps are nth-of-type 2..6 */
.journey-step:nth-of-type(2) .journey-card,
.journey-step:nth-of-type(4) .journey-card,
.journey-step:nth-of-type(6) .journey-card { grid-column: 1; flex-direction: row-reverse; text-align: right; }
.journey-step:nth-of-type(2) .journey-card::after,
.journey-step:nth-of-type(4) .journey-card::after,
.journey-step:nth-of-type(6) .journey-card::after { right: -26px; left: auto; background: linear-gradient(90deg, transparent, rgba(157,78,255,0.5)); }
.journey-step:nth-of-type(3) .journey-card,
.journey-step:nth-of-type(5) .journey-card { grid-column: 3; flex-direction: row; text-align: left; }
.journey-step:nth-of-type(3) .journey-card::after,
.journey-step:nth-of-type(5) .journey-card::after { left: -26px; right: auto; background: linear-gradient(90deg, rgba(157,78,255,0.5), transparent); }
.journey-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -26px rgba(80,40,150,0.4); }
.journey-icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(31,200,255,0.16), rgba(157,78,255,0.16));
  color: var(--brand-purple-deep);
  transition: transform 0.4s var(--ease);
}
.journey-card:hover .journey-icon { transform: scale(1.08) rotate(-4deg); }
.journey-icon svg { width: 23px; height: 23px; }
.journey-kicker { font-family: 'Space Grotesk','Manrope',sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-purple); }
.journey-body h3 { font-size: 19px; margin: 4px 0 6px; color: var(--text-on-light); }
.journey-body p { font-size: 14px; margin: 0; line-height: 1.55; color: var(--text-on-light-secondary); }
/* reveal pop for nodes */
.journey [data-stagger] { }
.journey-node { opacity: 0; transform: scale(0.5); }
.is-visible .journey-node { opacity: 1; transform: scale(1); }
.is-visible .journey-step:nth-of-type(3) .journey-node { transition-delay: 0.08s; }
.is-visible .journey-step:nth-of-type(4) .journey-node { transition-delay: 0.16s; }
.is-visible .journey-step:nth-of-type(5) .journey-node { transition-delay: 0.24s; }
.is-visible .journey-step:nth-of-type(6) .journey-node { transition-delay: 0.32s; }

/* dark-section variant of the journey */
.section--dark .journey-node { box-shadow: 0 0 0 7px var(--dark-bg), 0 14px 30px -10px rgba(157,78,255,0.7); }
.section--dark .journey-card { background: var(--glass-bg); border-color: var(--border-dark); box-shadow: 0 24px 50px -30px rgba(0,0,0,0.7); }
.section--dark .journey-card:hover { background: var(--glass-bg-hover); border-color: rgba(157,78,255,0.4); box-shadow: 0 30px 60px -26px rgba(157,78,255,0.4); }
.section--dark .journey-icon { background: linear-gradient(135deg, rgba(31,200,255,0.18), rgba(157,78,255,0.18)); color: #C4B5FD; }
.section--dark .journey-kicker { color: #C4B5FD; }
.section--dark .journey-body h3 { color: #fff; }
.section--dark .journey-body p { color: var(--text-on-dark-secondary); }

@media (max-width: 760px) {
  .journey { max-width: 100%; padding-left: 8px; }
  .journey__spine { left: 30px; transform: none; }
  .journey-step { grid-template-columns: 60px 1fr; margin-bottom: 16px; }
  .journey-node { grid-column: 1; justify-self: center; width: 52px; height: 52px; font-size: 16px; }
  .journey-card,
  .journey-step:nth-of-type(2) .journey-card, .journey-step:nth-of-type(3) .journey-card,
  .journey-step:nth-of-type(4) .journey-card, .journey-step:nth-of-type(5) .journey-card, .journey-step:nth-of-type(6) .journey-card {
    grid-column: 2; flex-direction: row; text-align: left;
  }
  .journey-card::after,
  .journey-step:nth-of-type(2) .journey-card::after, .journey-step:nth-of-type(3) .journey-card::after,
  .journey-step:nth-of-type(4) .journey-card::after, .journey-step:nth-of-type(5) .journey-card::after, .journey-step:nth-of-type(6) .journey-card::after {
    left: -18px; right: auto; width: 18px; background: linear-gradient(90deg, rgba(157,78,255,0.5), transparent);
  }
}

/* ---------------- Process: flowing numbered steps ----------------
   A single horizontal flow of numbered cards with arrow connectors on desktop;
   a swipeable scroll-snap slider on smaller screens. The last card is a filled
   brand-gradient "destination" for clear hierarchy. */
.steps {
  display: flex; gap: 16px;
  /* negative margin + matching padding lets card shadows breathe to the edges
     instead of being clipped by the scroll container's overflow */
  margin: 8px -20px 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 18px 20px 48px;
}
.steps::-webkit-scrollbar { display: none; }
.step {
  position: relative; flex: 0 0 80%; scroll-snap-align: center;
  background: #fff; border: 1px solid var(--border-on-light);
  border-radius: var(--radius-md); padding: 26px 24px 24px;
  box-shadow: 0 22px 46px -28px rgba(80,40,150,0.28);
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
}
.step:hover { transform: translateY(-8px); box-shadow: 0 26px 46px -30px rgba(80,40,150,0.42); }
.step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.step-ico {
  width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(31,200,255,0.16), rgba(157,78,255,0.16));
  color: var(--brand-purple-deep);
  transition: transform 0.4s var(--ease);
}
.step:hover .step-ico { transform: scale(1.1) rotate(-5deg); }
.step-ico svg { width: 24px; height: 24px; }
.step-no {
  font-family: 'Manrope','Golos Text',sans-serif; font-weight: 900; font-size: 44px; line-height: 1;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.6;
}
.step h3 { font-size: 18px; color: var(--text-on-light); margin-bottom: 8px; }
.step p { font-size: 13.5px; color: var(--text-on-light-secondary); margin: 0; line-height: 1.5; }
/* destination card */
.step--final { background: linear-gradient(155deg, var(--brand-blue-deep, #1273c4), var(--brand-purple-deep)); border-color: transparent; box-shadow: 0 30px 60px -22px rgba(157,78,255,0.6); }
.step--final::before { display: none; }
.step--final .step-ico { background: rgba(255,255,255,0.22); color: #fff; }
.step--final .step-no { background: none; color: rgba(255,255,255,0.72); -webkit-text-fill-color: rgba(255,255,255,0.72); opacity: 1; }
.step--final h3 { color: #fff; }
.step--final p { color: #fff; opacity: 0.96; }

@media (min-width: 680px) { .step { flex-basis: 44%; } }
@media (min-width: 1024px) {
  .steps { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; margin: 8px 0 0; padding: 18px 0 24px; }
  .step { flex: none; }
  /* arrow connector between cards */
  .step:not(:last-child)::after {
    content: ''; position: absolute; top: 48px; right: -11px; z-index: 4;
    width: 12px; height: 12px;
    border-top: 2.5px solid var(--brand-purple); border-right: 2.5px solid var(--brand-purple);
    transform: rotate(45deg);
  }
}
/* dark-section variant (used on the dedicated Процес page) */
.section--dark .step { background: var(--glass-bg); border-color: var(--border-dark); box-shadow: 0 24px 50px -30px rgba(0,0,0,0.7); }
.section--dark .step h3 { color: #fff; }
.section--dark .step p { color: var(--text-on-dark-secondary); }
.section--dark .step-ico { color: #C4B5FD; }
/* ghost numbers on dark glass need a brighter fill + more opacity to stay legible */
.section--dark .step-no { background: linear-gradient(135deg, var(--brand-blue), #C4A0FF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; opacity: 0.85; }
/* deeper gradient so the white text on the final (05) card has real contrast */
.section--dark .step--final { background: linear-gradient(155deg, #1273c4, var(--brand-purple-deep)); border-color: transparent; }
.section--dark .step--final .step-ico { color: #fff; }
.section--dark .step--final .step-no { background: none; color: rgba(255,255,255,0.78); -webkit-text-fill-color: rgba(255,255,255,0.78); opacity: 1; }
.section--dark .step--final p { color: #fff; opacity: 0.96; }

.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; margin-top: 56px; }
.timeline::before {
  content: ''; position: absolute; top: 28px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
  opacity: 0.3;
}
.timeline-step { position: relative; text-align: center; padding: 0 12px; }
.timeline-step .num-badge {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
  color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 0 0 0 6px var(--dark-bg);
  position: relative; z-index: 1;
}
.timeline-step h3 { font-size: 17px; color: #fff; }
.timeline-step p { font-size: 13.5px; }
@media (max-width: 920px) {
  .timeline { grid-template-columns: 1fr; gap: 40px; }
  .timeline::before { top: 0; bottom: 0; left: 27px; right: auto; width: 2px; height: auto; }
  .timeline-step { display: flex; text-align: left; gap: 20px; }
  .timeline-step .num-badge { margin: 0; flex-shrink: 0; }
}

/* ---------------- Problem: "without / with" comparison ----------------
   A dark "chaos" card and a bright branded "strategy" card face off across an
   animated bridge. Each card carries a mini-dashboard (bars + trend line) that
   animates in on scroll — declining for the pain side, climbing for the gain side. */
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section--problem .section-head p { margin-left: auto; margin-right: auto; }

.vs-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  margin-top: 8px;
}
.vs-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 30px 30px 28px;
  overflow: hidden;
}
.vs-card--pain {
  background: linear-gradient(165deg, #11142a, #0a0c1c);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 30px 70px -34px rgba(10,12,28,0.7);
}
.vs-card--gain {
  background: linear-gradient(165deg, #ffffff, #f1fbf5);
  border: 1px solid rgba(22,163,74,0.28);
  box-shadow: 0 36px 80px -30px rgba(22,163,74,0.45);
  z-index: 2;
}
.vs-card--gain::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #34D399, #16A34A);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.6; pointer-events: none;
}
.vs-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.vs-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
}
.vs-tag svg { width: 14px; height: 14px; }
.vs-tag--pain { color: #FF7A7A; background: rgba(239,68,68,0.14); border: 1px solid rgba(239,68,68,0.3); }
.vs-tag--gain { color: #fff; background: linear-gradient(90deg, #22C55E, #16A34A); }
.vs-trend { font-family: 'Space Grotesk','Manrope',sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.01em; }
.vs-trend--down { color: #FF7A7A; }
.vs-trend--up { color: #15803D; }

/* mini dashboard chart */
.vs-chart { position: relative; height: 96px; margin-bottom: 24px; }
.vs-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 10px; }
.vs-bars span {
  flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.8s var(--ease);
}
.vs-card--pain .vs-bars span { background: linear-gradient(180deg, rgba(239,68,68,0.78), rgba(239,68,68,0.16)); }
.vs-card--gain .vs-bars span { background: linear-gradient(180deg, #34D399, #16A34A); box-shadow: 0 8px 18px -8px rgba(22,163,74,0.5); }
.vs-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vs-line polyline {
  fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  transition: stroke-dashoffset 1.1s var(--ease) 0.2s;
}
/* trend lines use a contrasting colour so they read clearly over the bars */
.vs-chart--down polyline { stroke: #FFD23F; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55)); }
.vs-chart--up polyline { stroke: #0F2A1A; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18)); }
/* reveal: animate bars + line when section becomes visible */
.is-visible .vs-bars span { transform: scaleY(1); }
.is-visible .vs-bars span:nth-child(2) { transition-delay: 0.06s; }
.is-visible .vs-bars span:nth-child(3) { transition-delay: 0.12s; }
.is-visible .vs-bars span:nth-child(4) { transition-delay: 0.18s; }
.is-visible .vs-bars span:nth-child(5) { transition-delay: 0.24s; }
.is-visible .vs-bars span:nth-child(6) { transition-delay: 0.30s; }
.is-visible .vs-line polyline { stroke-dashoffset: 0; }

.vs-list { display: flex; flex-direction: column; gap: 15px; }
.vs-list li { display: flex; gap: 12px; align-items: flex-start; }
.vs-list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.vs-list strong { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 2px; }
.vs-list span { font-size: 13px; line-height: 1.5; }
.vs-list--pain svg { color: #FF7A7A; }
.vs-list--pain strong { color: #fff; }
.vs-list--pain span { color: #9aa0b8; }
.vs-list--gain svg { color: #16A34A; }
.vs-list--gain strong { color: var(--text-on-light); }
.vs-list--gain span { color: var(--text-on-light-secondary); }

.vs-result {
  margin-top: 22px; padding-top: 18px;
  font-family: 'Space Grotesk','Manrope',sans-serif; font-size: 13.5px; font-weight: 700;
  border-top: 1px dashed rgba(128,128,150,0.3);
}
.vs-result--pain { color: #FF9A9A; }
.vs-result--gain { color: #15803D; }

/* connector bridge — red (problem) flows into green (solution) */
.vs-bridge { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 18px; align-self: stretch; }
.vs-bridge__line { flex: 1; width: 2px; background: linear-gradient(180deg, rgba(239,68,68,0.5), rgba(22,163,74,0.5)); }
.vs-bridge__orb {
  width: 54px; height: 54px; flex-shrink: 0; margin: 6px 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: linear-gradient(120deg, var(--brand-blue), var(--brand-purple), var(--brand-pink), var(--brand-blue));
  background-size: 300% 300%;
  color: #fff; box-shadow: 0 16px 34px -12px rgba(157,78,255,0.7);
  animation: vsOrbShift 6s ease infinite, vsOrbPulse 3.2s ease-in-out infinite;
}
.vs-bridge__orb svg { width: 22px; height: 22px; }
@keyframes vsOrbShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes vsOrbPulse {
  0%, 100% { box-shadow: 0 16px 34px -12px rgba(157,78,255,0.55); transform: scale(1); }
  50% { box-shadow: 0 18px 44px -8px rgba(157,78,255,0.85); transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .vs-bridge__orb { animation: none; } }
.vs-cta-line { text-align: center; margin-top: 36px; font-size: 16px; font-weight: 600; color: var(--text-on-light); }

@media (max-width: 880px) {
  .vs-compare { grid-template-columns: 1fr; }
  .vs-bridge { flex-direction: row; padding: 16px 0; width: 100%; }
  .vs-bridge__line { width: auto; height: 2px; background: linear-gradient(90deg, rgba(239,68,68,0.5), rgba(22,163,74,0.5)); }
  .vs-bridge__orb { transform: rotate(90deg); margin: 0 8px; }
  @keyframes vsOrbPulse {
    0%, 100% { box-shadow: 0 16px 34px -12px rgba(157,78,255,0.55); transform: rotate(90deg) scale(1); }
    50% { box-shadow: 0 18px 44px -8px rgba(157,78,255,0.85); transform: rotate(90deg) scale(1.06); }
  }
  .vs-card { padding: 26px 22px; }
}
.about-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.about-point { display: flex; gap: 16px; align-items: flex-start; background: var(--glass-bg); border: 1px solid var(--border-dark); padding: 24px; border-radius: var(--radius-md); }
.about-point svg { width: 24px; height: 24px; color: #A78BFA; flex-shrink: 0; }
.about-point h4 { font-size: 16px; margin-bottom: 4px; }
.about-point p { font-size: 14px; margin: 0; }
@media (max-width: 640px) {
  .about-points { grid-template-columns: 1fr 1fr; gap: 12px; }
  .about-point { flex-direction: column; gap: 10px; padding: 16px; }
  .about-point svg { width: 20px; height: 20px; }
  .about-point h4 { font-size: 13.5px; }
  .about-point p { font-size: 12px; }
}

/* ---------------- Testimonials ---------------- */
.review-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 48px; }
.review-badge { background: var(--glass-bg); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-soft); }
.review-badge .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 800; color: #fff; }
.review-badge .stars { color: #F59E0B; font-size: 14px; }
.review-badge .count { font-size: 13px; color: var(--text-secondary); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card { position: relative; overflow: hidden; background: var(--glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-soft); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), background 0.6s var(--ease); }
.testimonial-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple)); transform: scaleX(0.4); transform-origin: left; opacity: 0.5; transition: transform 0.6s var(--ease), opacity 0.6s var(--ease); }
.testimonial-card:hover { transform: translateY(-5px) scale(1.012); box-shadow: 0 28px 54px -22px rgba(31,200,255,0.25); background: var(--glass-bg-hover); }
.testimonial-card:hover::before { transform: scaleX(1); opacity: 1; }
.testimonial-card .quote-mark { font-size: 36px; color: #A78BFA; font-family: Georgia, serif; line-height: 1; margin-bottom: 12px; }
.review-stars { color: #F59E0B; font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-card p.quote { font-size: 15px; color: var(--text-on-dark); }
.testimonial-mini-title { font-size: 18px; margin-bottom: 10px; }
.link-accent { color: var(--brand-purple); text-decoration: underline; transition: color 0.3s var(--ease); }
.link-accent:hover { color: var(--brand-blue); }
.section--light .link-accent, .section--light-alt .link-accent,
.section--light .card-link, .section--light-alt .card-link {
  color: var(--brand-purple-deep);
}
.section--light .link-accent:hover, .section--light-alt .link-accent:hover,
.section--light .card-link:hover, .section--light-alt .card-link:hover {
  color: var(--brand-blue);
}
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.testimonial-author .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--brand-blue),var(--brand-purple)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; }
.testimonial-author .name { font-weight: 700; font-size: 14px; color: #fff; }
.testimonial-author .role { font-size: 12.5px; color: var(--text-secondary); }
.result-pill { display: inline-block; margin-top: 16px; font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: rgba(52,211,153,0.12); color: #34D399; }
@media (max-width: 920px) { .review-badges { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px) {
  .testimonial-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* room on every side so card shadows aren't clipped by the scroller */
    padding-top: 16px;
    padding-bottom: 46px;
    margin: 0 -24px;
    padding-left: 24px; padding-right: 24px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .testimonial-grid::-webkit-scrollbar { display: none; height: 0; }
  .testimonial-card { scroll-snap-align: start; padding: 24px; }
}

.stats-band { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: space-between; background: var(--glass-bg); border: 1px solid var(--border-dark); border-radius: var(--radius-lg); padding: 32px; margin-top: 56px; }
.stats-band .stat { text-align: center; }
.stats-band .stat .n { font-size: 26px; font-weight: 800; color: #A78BFA; }
.stats-band .stat .l { font-size: 12.5px; color: var(--text-secondary); }

/* ---------------- FAQ ---------------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; align-items: start; }
.faq-item { background: rgba(255,255,255,0.03); border: 1px solid var(--border-dark); border-radius: var(--radius-md); overflow: hidden; transition: border-color 0.5s var(--ease), background 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.faq-item:hover { border-color: rgba(157,78,255,0.35); background: rgba(255,255,255,0.05); box-shadow: 0 16px 32px -20px rgba(157,78,255,0.3); }
.faq-item.is-open { border-color: rgba(157,78,255,0.4); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; background: none; border: none; color: #fff; font-size: 15.5px; font-weight: 700; text-align: left;
  cursor: pointer;
}
.faq-question svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.4s var(--ease), color 0.3s var(--ease); color: var(--brand-purple); }
.faq-item:hover .faq-question svg { color: #A78BFA; }
.faq-item.is-open .faq-question svg { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); }
.faq-answer-inner { padding: 0 24px 22px; font-size: 14.5px; color: var(--text-on-dark-secondary); }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------------- Contact ---------------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
.contact-info-item { display: flex; align-items: center; gap: 14px; padding: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-dark); border-radius: var(--radius-md); margin-bottom: 14px; transition: border-color 0.5s var(--ease), background 0.5s var(--ease), transform 0.5s var(--ease); }
.contact-info-item:hover { border-color: rgba(157,78,255,0.4); background: rgba(255,255,255,0.06); transform: translateX(4px); }
.contact-info-item .icon { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg,var(--brand-blue),var(--brand-purple)); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.contact-info-item:hover .icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 8px 20px -6px rgba(157,78,255,0.5); }
.contact-info-item .icon svg { width: 20px; height: 20px; color: #fff; }
.contact-info-item .label { font-size: 12.5px; color: var(--text-on-dark-secondary); }
.contact-info-item .value { font-weight: 700; color: #fff; font-size: 15px; }
.contact-hours { font-size: 13.5px; color: var(--text-on-dark-secondary); margin-top: 20px; display:flex; align-items:center; gap:8px; }

.contact-form { background: rgba(255,255,255,0.04); border: 1px solid var(--border-dark); border-radius: var(--radius-lg); padding: 36px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-field { position: relative; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm); padding: 14px 16px; color: #fff; font-size: 14.5px; font-family: inherit;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #64748B; }
/* select: dark dropdown list so options are readable (no more white-on-white) */
.form-field select { color-scheme: dark; cursor: pointer; }
.form-field select option { background: #0B1020; color: #F1F5F9; }
.form-field select option:disabled { color: #6B7689; }
.form-field select option:checked { background: #1a1233; color: #fff; }
/* keep the placeholder muted until a real service is chosen */
.form-field select:required:invalid { color: #64748B; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--brand-purple);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 4px rgba(157,78,255,0.18);
}
.form-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-on-dark-secondary); margin-top: 16px; }
.form-status { font-size: 14px; margin-top: 12px; display: none; }
.form-status.success { color: #34D399; display: block; }
.form-status.error { color: #F87171; display: block; }
.btn.is-loading { opacity: 0.75; cursor: progress; animation: btnPulse 1s ease-in-out infinite; }
@keyframes btnPulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 0.95; } }
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* ---------------- Final CTA ---------------- */
.final-cta { text-align: center; }
.final-cta .crystal-s-large { width: 140px; height: 140px; object-fit: contain; border-radius: 20px; margin: 0 auto 12px; }
.final-cta h2 { font-size: clamp(28px, 5vw, 52px); max-width: 800px; margin: 0 auto 36px; }
.final-cta .btn-row { justify-content: center; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--dark-bg-2); color: var(--text-on-dark-secondary); padding: 72px 0 32px; border-top: 1px solid var(--border-dark); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; margin-bottom: 48px; }
.footer-brand p { font-size: 14px; max-width: 280px; }
.footer-badges { display: flex; gap: 14px; margin-top: 18px; }
.footer-badges img { height: 56px; width: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35)); transition: transform 0.35s var(--ease); }
.footer-badges img:hover { transform: translateY(-2px); }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; margin-bottom: 18px; }
.footer-col li { margin-bottom: 12px; font-size: 14px; }
.footer-col a { position: relative; display: inline-block; transition: color 0.35s var(--ease), padding-left 0.35s var(--ease); }
.footer-col a::before {
  content: '';
  position: absolute; left: -14px; top: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: var(--brand-purple);
  opacity: 0; transform: translateY(-50%) scale(0.4);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.footer-col a:hover { color: #fff; padding-left: 14px; }
.footer-col a:hover::before { opacity: 1; transform: translateY(-50%) scale(1); }
.footer-legal { font-size: 12px; line-height: 1.7; color: #475569; border-top: 1px solid var(--border-dark); padding-top: 28px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; font-size: 13px; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------------- Social / messaging CTAs ---------------- */
.contact-social-label { margin: 24px 0 10px; font-weight: 700; font-size: 14px; color: var(--text-on-dark); }
.social-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.social-cta--whatsapp svg, .social-cta--viber svg, .social-cta--messenger svg { width: 20px; height: 20px; }
/* image-based, size-normalized social icons */
.social-ico { display: block; object-fit: contain; flex-shrink: 0; }
.social-cta .social-ico { width: 22px; height: 22px; }
.header-social .social-cta .social-ico { width: 30px; height: 30px; transition: transform 0.4s var(--ease); }
.header-social .social-cta:hover .social-ico { transform: scale(1.12); }
.social-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  border: 1px solid var(--border-dark); background: var(--glass-bg); color: var(--text-on-dark);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.social-cta svg { width: 18px; height: 18px; flex-shrink: 0; }
.social-cta:hover { transform: translateY(-2px); background: var(--glass-bg-hover); }
.social-cta--whatsapp:hover { border-color: rgba(37,211,102,0.5); }
.social-cta--whatsapp svg { color: #25D366; }
.social-cta--viber:hover { border-color: rgba(124,73,237,0.5); }
.social-cta--viber svg { color: #7C4DFF; }
.social-cta--messenger:hover { border-color: rgba(0,132,255,0.5); }
.social-cta--messenger svg { color: #00B2FF; }
.header-social {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-dark);
}
.header-social .social-cta {
  width: 42px; height: 42px;
  padding: 0;
  font-size: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.header-social .social-cta svg { width: 26px; height: 26px; margin: 0; shape-rendering: geometricPrecision; transition: transform 0.4s var(--ease); }
.header-social .social-cta:hover { transform: translateY(-2px); }
.header-social .social-cta:hover svg { transform: scale(1.12); }
.header-social .social-cta--whatsapp:hover { background: rgba(37,211,102,0.16); border-color: transparent; }
.header-social .social-cta--viber:hover { background: rgba(124,77,255,0.18); border-color: transparent; }
.header-social .social-cta--messenger:hover { background: rgba(0,178,255,0.16); border-color: transparent; }
@media (max-width: 920px) { .header-social { display: none; } }

/* ---------------- Breadcrumb ---------------- */
.breadcrumb { font-size: 13.5px; color: var(--text-on-dark-secondary); margin-bottom: 24px; display: flex; gap: 8px; align-items: center; }
.breadcrumb a:hover { color: #fff; }

/* ---------------- Scroll reveal ---------------- */
[data-animate] { opacity: 0; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-animate="fade-up"] { transform: translateY(32px); }
[data-animate="scale-in"] { transform: scale(0.94); }
[data-animate].is-visible { opacity: 1; transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-stagger].is-visible > * { opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.19s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.26s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.33s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.4s; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: 0.47s; }
[data-stagger].is-visible > *:nth-child(8) { transition-delay: 0.54s; }

/* ---------------- Service detail page ---------------- */
.service-hero { padding-top: 48px; }
.service-included { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin: 32px 0; }
.service-included li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text-on-dark); background: var(--glass-bg); border: 1px solid var(--border-dark); padding: 16px; border-radius: var(--radius-md); }
.service-included svg { width: 20px; height: 20px; color: #34D399; flex-shrink: 0; margin-top: 1px; }
@media (max-width: 640px) { .service-included { grid-template-columns: 1fr; } }

/* ---------------- Sticky floating CTA ---------------- */
.sticky-cta {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 950;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sticky-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.sticky-cta .btn { box-shadow: 0 18px 40px -14px rgba(157,78,255,0.55); }
.sticky-social { display: flex; gap: 10px; }
.social-fab {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s var(--ease);
}
.social-fab .social-ico { width: 52px; height: 52px; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.45)); transition: filter 0.3s var(--ease); }
.social-fab svg { width: 30px; height: 30px; }
.social-fab:hover { transform: translateY(-3px) scale(1.07); }
.social-fab:hover .social-ico { filter: drop-shadow(0 12px 18px rgba(0,0,0,0.5)); }
.social-fab:active { transform: scale(0.95); }
@media (max-width: 640px) {
  .sticky-cta { left: 16px; right: 16px; bottom: 16px; }
  .sticky-cta .btn { width: 100%; justify-content: center; }
  .social-fab { width: 48px; height: 48px; }
  .social-fab .social-ico { width: 48px; height: 48px; }
  .social-fab svg { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* ---------- Back-to-top (mobile) ---------- */
.back-to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 1002;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
  color: #fff; cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(157,78,255,0.7);
  opacity: 0; transform: translateY(16px) scale(0.8); pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top svg { width: 21px; height: 21px; }
@media (min-width: 769px) { .back-to-top { display: none; } }
/* hide the floating contact cluster once the user reaches the footer */
.sticky-cta.hidden-at-bottom { opacity: 0 !important; transform: translateY(130%) !important; pointer-events: none !important; }

/* ============================================================
   MOBILE PERFORMANCE — smooth scrolling, no jank
   On phones, backdrop-filter blur on the fixed header and on the many
   glass cards forces a full-screen recomposite every scroll frame, and
   the infinite background orb/star animations keep repainting. Both are
   the main causes of stutter. Below we drop the blur (keeping a solid
   translucent fill so text stays readable) and calm the decorative
   motion. Visuals stay premium; the compositor stops thrashing.
   ============================================================ */
@media (max-width: 768px) {
  /* 1) Fixed header: solid fill instead of live blur (biggest win) */
  .site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(7, 10, 24, 0.97);
  }

  /* 2) Kill ALL backdrop-filter blur — it recomposites the whole screen each
        scroll frame. Keep translucent fills so cards still read as glass. */
  .case-card, .testimonial-card, .bento-card,
  .stat-card, .metrics-strip, .mobile-nav,
  .price-card, .service-card, .value-card, .faq-item {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .mobile-nav { background: rgba(5, 7, 21, 0.97); }

  /* 3) THE BIG ONE — remove the animated blur(90px) glow orbs on every section.
        Animating a 90px-blurred element per section is the #1 cause of scroll
        stutter on phones. They're purely decorative; drop them entirely. */
  .section--dark::before, .section--dark::after,
  .section--light::before, .section--light::after,
  .section--light-alt::before, .section--light-alt::after {
    display: none !important;
  }
  /* Other decorative blur filters — neutralise on mobile */
  .hero-platform, .service-icon::before { filter: none !important; }
  .hero-aurora::before, .hero-aurora::after { display: none !important; }

  /* 4) Fixed ambient glow layer that reparallaxes on every scroll frame — pin it */
  body::before { transform: none !important; will-change: auto !important; }

  /* 5) Stars: blink only, no drift, no compositor layers, thinned & no glints */
  .hero-aurora span, .section-fx span {
    animation: starTwinkleSoft var(--tw, 6s) ease-in-out infinite !important;
    will-change: auto !important;
    box-shadow: 0 0 3px 0 currentColor;
  }
  .hero-aurora span::before, .hero-aurora span::after,
  .section-fx span::before, .section-fx span::after { display: none !important; }
  /* (section star count is already reduced to 5/section in JS on mobile) */

  /* 6) Calm remaining infinite decorative loops that repaint during scroll.
        .logo-track is intentionally excluded — it's a cheap transform-only
        marquee (GPU-composited), not a scroll-jank source, and freezing it
        just made the "Инструменти и платформи" strip look broken. */
  .promo-bar { animation: none !important; }
  .journey__flow { animation: none !important; }

  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-overflow-scrolling: touch; }
}

/* Anyone who asked the OS for reduced motion: stop all infinite background loops */
@media (prefers-reduced-motion: reduce) {
  .hero-aurora span, .section-fx span,
  .hero-aurora::before, .hero-aurora::after,
  [style*="animation"], .promo-bar { animation: none !important; }
}