/* ═══════════════════════════════════════════
   PRIMECLEAN — SCROLL EXPERIENCE
   Core: HTML-in-Canvas + Scroll-driven Video
═══════════════════════════════════════════ */

:root {
  --blue:      #1a6cff;
  --cyan:      #00eaff;
  --white:     #ffffff;
  --dark:      #06080f;
  --glass:     rgba(255,255,255,0.06);
  --glass-b:   rgba(255,255,255,0.1);
  --rad:       20px;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--dark);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }
/* Disable double-tap zoom on all interactive elements */
a, button, [role="button"], input, select, textarea, label {
  touch-action: manipulation;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 2px; }

/* ══════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════ */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  overflow: hidden;
}
#pl-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pl-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  z-index: 1;
}
.pl-brand {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
}
.pl-num-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#pl-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(120px, 22vw, 240px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.08);
  line-height: 1;
  user-select: none;
  letter-spacing: -0.02em;
}
.pl-bottom {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pl-track {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
#pl-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width 0.1s linear;
  border-radius: 2px;
}
#pl-skip {
  color: rgba(255,255,255,0.4);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
#pl-skip:hover { color: #fff; border-color: rgba(255,255,255,0.3); }

#pl-sound {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.04);
  transition: all 0.3s ease;
  animation: pulse-sound 2s ease-in-out infinite;
}
#pl-sound:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
#pl-sound.hidden { opacity: 0; pointer-events: none; }

@keyframes pulse-sound {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

#preloader.exit {
  animation: pl-exit 0.9s var(--ease) forwards;
}
@keyframes pl-exit {
  to { opacity: 0; transform: scale(1.04); pointer-events: none; }
}

/* ══════════════════════════════════════════
   SITE
══════════════════════════════════════════ */
.off { opacity: 0; visibility: hidden; }
.on  { opacity: 1; visibility: visible; animation: site-in 0.5s ease forwards; }
@keyframes site-in { from { opacity: 0; } to { opacity: 1; } }

/* ── HEADER ── */
#hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 68px;
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
#hdr.scrolled {
  background: rgba(6,8,15,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hdr-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hdr-logo img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; }
.hdr-logo span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: var(--white);
}
.hdr-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  background: var(--blue);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(26,108,255,0.35);
}
.hdr-cta:hover { background: #2979ff; transform: translateY(-1px); box-shadow: 0 8px 28px rgba(26,108,255,0.5); }

/* ══════════════════════════════════════════
   SCROLL EXPERIENCE
══════════════════════════════════════════ */
#scroll-exp {
  /* 600vh = room for scroll; chapters control video timing */
  height: 600vh;
  position: relative;
  touch-action: pan-y; /* JS управляет анимацией — только вертикальный скролл */
}

#scroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;   /* fallback: iOS < 15.4, older Android */
  height: 100svh;  /* small viewport height — excludes browser chrome */
  overflow: hidden;
}

/* ── VIDEO ── */
#sv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: translateZ(0); /* GPU-слой для видео */
  will-change: transform;
}
.sv-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(6,8,15,0.5) 0%, rgba(6,8,15,0.1) 40%, rgba(6,8,15,0.6) 100%);
}

/* ── HTML-IN-CANVAS ── */
#fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* ── CHAPTERS ── */
#chapters {
  position: absolute;
  inset: 0;
  z-index: 2;           /* below canvas — canvas shows the processed version */
  pointer-events: none;
}

/* When HTML-in-Canvas is NOT active, chapters become pointer-events:auto
   and are shown directly (JS toggles class .no-canvas on body) */
body.no-canvas #chapters { z-index: 4; pointer-events: auto; }
body.no-canvas #fx-canvas { display: none; }

.chap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  /* CSS-driven transition for smooth appearance */
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform: translateY(16px);
  pointer-events: none;
}
.chap.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.chap-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  padding-top: 68px;
}

/* Layout variants */
.chap-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.chap-left { display: flex; align-items: flex-start; gap: 32px; }
.chap-right { display: flex; align-items: flex-start; gap: 32px; }

/* ── CHAPTER 0 — Brand ── */
.c0-logo {
  width: clamp(100px, 13vw, 170px);
  margin-bottom: 32px;
  animation: float 3s ease-in-out infinite;
  position: relative;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  padding: 18px 22px;
  box-shadow:
    0 0 0 1px rgba(26,108,255,0.15),
    0 8px 32px rgba(0,0,0,0.5),
    0 0 60px rgba(26,108,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
.c0-logo img {
  width: 100%;
  filter: brightness(1.1) drop-shadow(0 0 12px rgba(26,108,255,0.6));
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
@keyframes float-title {
  0%, 100% { transform: translateY(0px) rotate(-0.15deg); }
  30%       { transform: translateY(-7px) rotate(0.1deg); }
  60%       { transform: translateY(-4px) rotate(-0.08deg); }
}
@keyframes float-sub {
  0%, 100% { transform: translateY(0px); }
  45%       { transform: translateY(-5px); }
}
.c0-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 9vw, 9rem);
  letter-spacing: 0.04em;
  line-height: 0.9;
  color: var(--white);
  text-shadow:
    0 0 80px rgba(26,108,255,0.5),
    0 2px 20px rgba(0,0,0,0.9),
    0 4px 40px rgba(0,0,0,0.7);
  margin-bottom: 16px;
  animation: float-title 4.5s ease-in-out infinite;
  will-change: transform;
}
/* "CLEAN" part — readable semi-fill instead of pure outline */
.c0-title span {
  color: rgba(255,255,255,0.18);
  -webkit-text-stroke: 2px rgba(255,255,255,0.55);
  text-shadow:
    0 0 40px rgba(0,234,255,0.4),
    0 2px 20px rgba(0,0,0,0.8);
}
.c0-sub {
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 24px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 24px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.1);
  animation: float-sub 3.8s ease-in-out infinite;
  animation-delay: 0.6s;
  will-change: transform;
}
.c0-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 13px 28px;
  border-radius: 50px;
  background: rgba(26,108,255,0.12);
  border: 1px solid rgba(26,108,255,0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom: 36px;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
  animation: fadeUpIn 0.7s cubic-bezier(0.4,0,0.2,1) both;
  animation-delay: 0.9s;
}
.c0-phone:hover, .c0-phone:active {
  background: rgba(26,108,255,0.28);
  border-color: rgba(0,234,255,0.6);
  transform: translateY(-2px);
}
.c0-phone svg { color: var(--cyan); flex-shrink: 0; }
.c0-phone-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 7px #2ecc71;
  animation: dot-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dot-pulse {
  0%,100% { box-shadow: 0 0 5px #2ecc71; opacity: 1; }
  50%      { box-shadow: 0 0 14px #2ecc71; opacity: 0.65; }
}
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.c0-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.35);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: fadeUpDown 1.5s ease-in-out infinite;
}
.scroll-wheel {
  width: 20px;
  height: 32px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  position: relative;
}
.scroll-wheel::before {
  content: '';
  position: absolute;
  top: 5px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 6px;
  background: rgba(255,255,255,0.5);
  border-radius: 2px;
  animation: wheel-scroll 1.5s ease-in-out infinite;
}
@keyframes wheel-scroll {
  0% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}
@keyframes fadeUpDown {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(4px); }
}

/* ── CHAPTERS 1–3 — Service ── */
.chap-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(5rem, 12vw, 14rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.1);
  flex-shrink: 0;
  letter-spacing: -0.02em;
  user-select: none;
  margin-top: -20px;
}
.chap-bar {
  width: 2px;
  height: 120px;
  background: linear-gradient(to bottom, var(--blue), var(--cyan));
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 8px;
}
.chap-body { flex: 1; max-width: 480px; }
.chap-body h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--white);
  text-shadow: 0 0 40px rgba(26,108,255,0.3);
  margin-bottom: 20px;
}
.chap-body p {
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 360px;
}
.chap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chap-tags span {
  padding: 6px 14px;
  background: rgba(26,108,255,0.12);
  border: 1px solid rgba(26,108,255,0.25);
  border-radius: 50px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Chapter right: image(0) → num(1) → bar(2) → text(3) */
.chap-right .chap-img-card { order: 0; }
.chap-right .chap-num      { order: 1; }
.chap-right .chap-bar      { order: 2; }
.chap-right .chap-body     { order: 3; }
.chap-right .chap-tags     { justify-content: flex-start; }

/* ── CHAPTER 4 — Stats + CTA ── */
.c4-stats {
  display: flex;
  gap: clamp(24px, 5vw, 60px);
  margin-bottom: 48px;
  flex-wrap: wrap;
  justify-content: center;
}
.c4-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  min-width: 120px;
}
.c4-stat b {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(135deg, var(--white), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.02em;
  line-height: 1;
}
.c4-stat span {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.c4-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 44px;
  background: linear-gradient(135deg, var(--blue), #2979ff);
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  box-shadow: 0 8px 40px rgba(26,108,255,0.5);
  transition: all 0.3s ease;
  pointer-events: auto;
}
.c4-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 50px rgba(26,108,255,0.65); }

/* ── PROGRESS RING ── */
#prog-ring {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ring-bg  { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 2; }
.ring-fill {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 125.66;
  stroke-dashoffset: 125.66;
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.1s linear;
}
#prog-pct {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
}

/* ── CHAPTER DOTS ── */
#chap-dots {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.c-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}
.c-dot.active {
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
  width: 6px;
  height: 18px;
  border-radius: 3px;
}

/* ══════════════════════════════════════════
   SERVICES SECTION
══════════════════════════════════════════ */
.srv-section {
  background: linear-gradient(180deg, var(--dark) 0%, #07091a 40%, #060912 100%);
  padding: 120px 0 140px;
  position: relative;
  overflow: hidden;
}
.srv-section::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(26,108,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.srv-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Section header */
.srv-head {
  text-align: center;
  margin-bottom: 80px;
}
.srv-head .sec-eyebrow {
  display: inline-block;
  padding: 6px 18px;
  background: rgba(26,108,255,0.1);
  border: 1px solid rgba(26,108,255,0.3);
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.srv-sec-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 9vw, 9rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--white);
  margin-bottom: 24px;
}
.srv-sec-title span {
  color: transparent;
  -webkit-text-stroke: 2px rgba(26,108,255,0.7);
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.srv-sec-desc {
  color: rgba(255,255,255,0.45);
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Grid */
.srv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card */
.srv-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: #07091a;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.4s var(--ease),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
  will-change: transform;
}
.srv-card:hover {
  transform: translateY(-8px);
  border-color: rgba(26,108,255,0.4);
  box-shadow:
    0 24px 60px rgba(26,108,255,0.2),
    0 8px 24px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Number badge */
.srv-num {
  position: absolute;
  top: 16px;
  left: 20px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.15);
  z-index: 10;
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.4s ease;
}
.srv-card:hover .srv-num {
  -webkit-text-stroke-color: rgba(26,108,255,0.5);
}

/* Image area */
.srv-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.srv-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
  display: block;
}
.srv-card:hover .srv-img-wrap img {
  transform: scale(1.06);
}
.srv-img-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(0deg,
    #07091a 0%,
    rgba(7,9,26,0.6) 50%,
    transparent 100%);
  pointer-events: none;
}

/* Card body */
.srv-body {
  flex: 1;
  padding: 20px 24px 16px;
  position: relative;
  z-index: 2;
}
.srv-body h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 16px;
}

/* Feature list */
.srv-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.srv-features li {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  padding-left: 18px;
  position: relative;
  line-height: 1.4;
  transition: color 0.3s ease;
}
.srv-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  flex-shrink: 0;
}
.srv-card:hover .srv-features li { color: rgba(255,255,255,0.7); }

/* CTA link */
.srv-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 24px 24px;
  padding: 12px 20px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}
.srv-cta span {
  transition: transform 0.3s ease;
}
.srv-card:hover .srv-cta {
  border-color: rgba(26,108,255,0.5);
  color: var(--white);
  background: rgba(26,108,255,0.1);
}
.srv-card:hover .srv-cta span { transform: translateX(4px); }

/* Special card (card 6) */
.srv-card--special {
  background: rgba(26,108,255,0.04);
  border-color: rgba(26,108,255,0.15);
}
.srv-cta--accent {
  background: linear-gradient(135deg, rgba(26,108,255,0.2), rgba(0,234,255,0.1));
  border-color: rgba(26,108,255,0.4);
  color: var(--cyan) !important;
}
.srv-card--special:hover {
  border-color: rgba(0,234,255,0.5);
  box-shadow:
    0 24px 60px rgba(0,234,255,0.12),
    0 8px 24px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(0,234,255,0.1);
}
.srv-card--special:hover .srv-cta--accent {
  background: linear-gradient(135deg, rgba(26,108,255,0.35), rgba(0,234,255,0.2));
  border-color: var(--cyan);
}

/* Reveal animation */
.srv-card {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.srv-card.srv-visible {
  opacity: 1;
  transform: translateY(0);
}
.srv-card.srv-visible:hover {
  transform: translateY(-8px);
}

/* Responsive */
@media (max-width: 1024px) {
  .srv-grid { grid-template-columns: repeat(2, 1fr); }
  .srv-sec-title { font-size: clamp(3.5rem, 8vw, 7rem); }
}
@media (max-width: 640px) {
  .srv-section { padding: 80px 0 100px; }
  .srv-wrap { padding: 0 20px; }
  .srv-grid { grid-template-columns: 1fr; gap: 16px; }
  .srv-head { margin-bottom: 48px; }
  .srv-sec-title { font-size: clamp(3rem, 15vw, 5rem); }
  .srv-num { font-size: 3.5rem; }
}

/* ══════════════════════════════════════════
   CONTACT SECTION
══════════════════════════════════════════ */
.contact-section {
  background: #07090e;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 100px 0;
}
.contact-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.contact-left .sec-eyebrow {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(26,108,255,0.12);
  border: 1px solid rgba(26,108,255,0.25);
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.contact-left h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 5vw, 5rem);
  letter-spacing: 0.02em;
  line-height: 0.95;
  margin-bottom: 16px;
}
.contact-left p {
  color: rgba(255,255,255,0.5);
  font-size: 1.05rem;
  margin-bottom: 40px;
}
.c-contacts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.c-contacts a, .c-contacts span {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.c-contacts a:hover { color: var(--white); }

/* Form */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px;
  padding: 40px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-group { display: flex; flex-direction: column; gap: 8px; }
.f-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.f-group input,
.f-group select,
.f-group textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--white);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.f-group input::placeholder,
.f-group textarea::placeholder { color: rgba(255,255,255,0.2); }
.f-group input:focus,
.f-group select:focus,
.f-group textarea:focus {
  border-color: var(--blue);
  background: rgba(26,108,255,0.06);
}
.f-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.f-group select option { background: #0d1020; }
.f-group textarea { resize: vertical; min-height: 80px; }

/* Date picker — invert calendar icon for dark theme */
.f-group input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
  transition: filter .2s;
}
.f-group input[type="date"]::-webkit-calendar-picker-indicator:hover { filter: invert(1); }
.f-group input[type="date"]::-webkit-datetime-edit-text,
.f-group input[type="date"]::-webkit-datetime-edit-month-field,
.f-group input[type="date"]::-webkit-datetime-edit-day-field,
.f-group input[type="date"]::-webkit-datetime-edit-year-field { color: rgba(255,255,255,.8); }
.f-group input[type="date"]:invalid::-webkit-datetime-edit { color: rgba(255,255,255,.2); }

/* Discount badge */
.f-discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  color: #00eaff;
  background: rgba(0,234,255,.1);
  border: 1px solid rgba(0,234,255,.28);
  border-radius: 20px;
  padding: 4px 10px;
  letter-spacing: .03em;
  animation: badge-pop .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes badge-pop {
  from { opacity: 0; transform: scale(.8) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#form-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--blue), #2979ff);
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  box-shadow: 0 6px 30px rgba(26,108,255,0.4);
  transition: all 0.3s ease;
}
#form-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(26,108,255,0.55); }
#form-btn.sent { background: linear-gradient(135deg, #1a8a4a, #22c55e); }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer {
  background: #04050b;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.ft-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--white);
}

.ft-contacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ft-contact-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.5);
  padding: 6px 0;
  font-family: Inter, sans-serif;
  font-size: 0.82rem;
  text-decoration: none;
  transition: color .2s;
}
.ft-contact-link:hover { color: #00eaff; }

.ft-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.ft-socials {
  display: flex;
  gap: 8px;
}
.ft-social {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.ft-social:hover { transform: translateY(-2px); }
.ft-social--tg:hover  { background: rgba(0,136,204,.2);  border-color: rgba(0,136,204,.5);  color: #29b6f6; }
.ft-social--ig:hover  { background: rgba(225,48,108,.2); border-color: rgba(225,48,108,.5); color: #e1306c; }
.ft-social--vb:hover  { background: rgba(126,80,174,.2); border-color: rgba(126,80,174,.5); color: #9c6bc9; }
.ft-social--wa:hover  { background: rgba(37,211,102,.2); border-color: rgba(37,211,102,.5); color: #25d366; }

.ft-copy { color: rgba(255,255,255,0.5); font-size: 0.82rem; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* iOS Safari: font-size < 16px triggers viewport zoom on input focus */
  .f-group input,
  .f-group select,
  .f-group textarea,
  #agent-input {
    font-size: 16px !important;
  }

  #hdr { padding: 0 20px; height: 60px; }
  .hdr-logo img { width: 30px; height: 30px; }
  .hdr-logo span { font-size: 1.1rem; }
  .hdr-cta { padding: 8px 16px; font-size: 0.8rem; }

  .pl-overlay { padding: 24px; }
  #pl-sound { top: 24px; right: 24px; font-size: 0.7rem; }

  .chap-inner { padding: 0 20px; padding-top: 60px; }
  .chap-left, .chap-right { flex-direction: column; gap: 16px; }
  .chap-right { align-items: flex-start; }
  .chap-right .chap-num { order: 0; }
  .chap-right .chap-bar { order: 1; }
  .chap-right .chap-body { order: 2; text-align: left; }
  .chap-right .chap-tags { justify-content: flex-start; }
  .chap-num { font-size: clamp(4rem, 20vw, 8rem); }
  .chap-body h2 { font-size: clamp(2.5rem, 12vw, 5rem); }
  .chap-body p { font-size: 0.9rem; }
  .chap-bar { width: 40px; height: 2px; margin-top: 0; }

  .c0-title { font-size: clamp(2.5rem, 14vw, 6rem); }
  .c4-stats { gap: 12px; }
  .c4-stat { padding: 16px 20px; min-width: 100px; }

  #chap-dots { display: none; }
  #prog-ring { bottom: 20px; right: 20px; }
}

@media (max-width: 900px) {
  .contact-wrap { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; }
  .contact-section { padding: 72px 0; }
  .f-row { grid-template-columns: 1fr 1fr; }
  #contact-form { padding: 24px; }

  .footer { padding: 16px 20px; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .ft-contacts { align-items: center; }
  .ft-right { align-items: center; }
}

@media (max-width: 480px) {
  .f-row { grid-template-columns: 1fr; }

  .c4-cta { padding: 14px 28px; font-size: 0.9rem; }
  .c4-stats { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .c4-stat { flex: 1 1 calc(50% - 10px); min-width: 0; }
}

/* ── 320px — smallest phones ── */
@media (max-width: 360px) {
  #hdr { padding: 0 14px; height: 54px; }
  .hdr-logo span { font-size: 1rem; }
  .hdr-cta { padding: 7px 12px; font-size: 0.75rem; }

  .chap-inner { padding: 0 14px; padding-top: 54px; }
  .c0-title { font-size: clamp(2rem, 18vw, 3.5rem); }

  .srv-wrap { padding: 0 14px; }
  .srv-section { padding: 60px 0 80px; }

  .contact-section { padding: 56px 0; }
  .contact-wrap { padding: 0 14px; }
  #contact-form { padding: 20px 16px; }

  .footer { padding: 14px 16px; }

  .agent-character { width: 80px; height: 120px; }
  .agent-chat { width: calc(100vw - 100px); min-width: 160px; }
}

/* Scroll-driven parallax (Chrome 115+) */
@supports (animation-timeline: scroll()) {
  #scroll-exp {
    view-timeline: --scroll-exp block;
  }
}

/* ══════════════════════════════════════════
   CUSTOM CURSOR  (desktop only)
══════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  * { cursor: none !important; }
  input, textarea, select { cursor: text !important; }
  select { cursor: pointer !important; }

  #cur-dot {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--blue);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    left: 0; top: 0;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.3s ease;
    will-change: transform;
    mix-blend-mode: normal;
  }
  #cur-ring {
    position: fixed;
    width: 38px;
    height: 38px;
    border: 1.5px solid rgba(26,108,255,0.55);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    left: 0; top: 0;
    transform: translate(-50%, -50%);
    transition: width 0.35s ease, height 0.35s ease, border-color 0.3s ease, opacity 0.3s ease;
    will-change: transform;
  }
  #cur-dot.is-hovering {
    width: 4px;
    height: 4px;
    background: var(--white);
  }
  #cur-ring.is-hovering {
    width: 56px;
    height: 56px;
    border-color: rgba(0,234,255,0.8);
    background: rgba(26,108,255,0.06);
  }
  #cur-dot.is-clicking { transform: translate(-50%,-50%) scale(0.5); }
  #cur-ring.is-clicking { transform: translate(-50%,-50%) scale(0.85); }
}

/* ══════════════════════════════════════════
   CHAPTER IMAGE CARDS  (Higgsfield generated)
══════════════════════════════════════════ */
.chap-img-card {
  position: relative;
  flex-shrink: 0;
  width: clamp(220px, 30vw, 400px);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 50px rgba(26,108,255,0.15);
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(var(--py,0px));
  transition: box-shadow 0.4s ease;
  align-self: center;
}
.chap-img-card:hover {
  box-shadow:
    0 32px 80px rgba(0,0,0,0.6),
    0 0 60px rgba(26,108,255,0.3);
}
.chap-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.chap-img-card:hover img { transform: scale(1.03); }

/* Shine overlay */
.chap-img-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.12) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255,255,255,0.04) 100%
  );
  z-index: 1;
  pointer-events: none;
}
/* Bottom gradient */
.chap-img-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(6,8,15,0.6), transparent);
  z-index: 2;
  pointer-events: none;
}
.img-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 3;
  padding: 5px 12px;
  background: rgba(26,108,255,0.85);
  backdrop-filter: blur(8px);
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Chapter left: text left, image right */
.chap-left .chap-img-card { margin-left: auto; }

/* Chapter right: image left, text right — handled by HTML order */
.chap-right .chap-img-card { margin-right: 0; }

/* ── Parallax variable on scroll ── */
[data-parallax] {
  will-change: transform;
}

/* Mobile: hide image cards, show text only */
@media (max-width: 900px) {
  .chap-img-card { display: none; }
  .chap-left, .chap-right { flex-wrap: nowrap; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1ms !important;
  }
  .c0-logo, .c0-title, .c0-sub,
  .c0-scroll-hint, .scroll-wheel::before,
  .agent-online i, #pl-sound { animation: none !important; }
}

/* Low-perf mode: disable expensive effects */
body[data-perf="low"] .chap-tags span { backdrop-filter: none; }
body[data-perf="low"] .c4-stat        { backdrop-filter: none; }
body[data-perf="low"] #pl-sound       { backdrop-filter: none; }

/* ═══════════════════════════════════════════
   AI AGENT WIDGET
═══════════════════════════════════════════ */
.agent-widget {
  position: fixed;
  bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  right: max(24px, calc(env(safe-area-inset-right, 0px) + 24px));
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.agent-widget.agent-hidden {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none !important;
}
.agent-widget.agent-hidden * { pointer-events: none !important; }
.agent-widget > * { pointer-events: all; }

/* ── Minimize button (top-left of character) ── */
.agent-minimize-btn {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 10;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(6,8,15,.75);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .25s ease, background .2s ease, color .2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
}
.agent-character:hover .agent-minimize-btn,
.agent-character:focus-within .agent-minimize-btn { opacity: 1; pointer-events: all; }
.agent-minimize-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.agent-minimize-btn:active { transform: scale(.92); }

/* On mobile — always show minimize btn */
@media (max-width: 768px) {
  .agent-minimize-btn { opacity: 0.7; pointer-events: all; }
}

/* ── Avatar button (shown when widget minimized by user) ── */
.agent-avatar-btn {
  position: fixed;
  bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  right: max(24px, calc(env(safe-area-inset-right, 0px) + 24px));
  z-index: 9001;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(6,8,15,.9);
  border: 2px solid rgba(0,234,255,.45);
  box-shadow: 0 4px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(0,234,255,.15);
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  animation: avatar-btn-in .35s cubic-bezier(.34,1.56,.64,1) both;
  transition: transform .2s ease, box-shadow .2s ease;
}
.agent-avatar-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 32px rgba(0,0,0,.7), 0 0 0 2px rgba(0,234,255,.4);
}
.agent-avatar-btn:active { transform: scale(.95); }
.agent-avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-avatar-btn-dot {
  position: absolute;
  bottom: 3px; right: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #00eaff;
  border: 2px solid rgba(6,8,15,.9);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes avatar-btn-in {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Widget minimize states ── */
.agent-widget.agent-minimizing {
  opacity: 0;
  transform: translateY(20px) scale(0.88);
  pointer-events: none;
  transition: opacity .32s ease, transform .32s cubic-bezier(.4,0,.2,1);
}
.agent-widget.agent-minimized {
  display: none !important;
}

/* ── Character ── */
.agent-character {
  position: relative;
  width: 180px;
  height: 270px;  /* фиксированная высота = размер idle видео */
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Видео-контейнер — overflow:hidden только здесь, не на всём персонаже */
.agent-videos {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}

/* Общие свойства всех состояний */
.agent-state {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: transparent;
  transition: opacity .4s ease;
  pointer-events: none;
}
.agent-state.is-active { opacity: 1; }

/* Idle — object-fit: contain, показывает полный портрет */
#agent-s-idle {
  object-fit: contain;
  object-position: bottom center;
  -webkit-mask-image: radial-gradient(
    ellipse 80% 78% at 50% 52%,
    black 42%,
    rgba(0,0,0,.55) 68%,
    rgba(0,0,0,0) 92%
  );
  mask-image: radial-gradient(
    ellipse 80% 78% at 50% 52%,
    black 42%,
    rgba(0,0,0,.55) 68%,
    rgba(0,0,0,0) 92%
  );
}

/* Greeting и Talking — object-fit: cover заполняет контейнер,
   персонаж остаётся того же визуального размера */
#agent-s-greet,
#agent-s-talk {
  object-fit: cover;
  object-position: center 10%;  /* подтягиваем верх персонажа */
  /* мягкое размытие краёв — частицы плавно растворяются */
  -webkit-mask-image: radial-gradient(
    ellipse 78% 82% at 50% 48%,
    black 38%,
    rgba(0,0,0,.6) 62%,
    rgba(0,0,0,0) 90%
  );
  mask-image: radial-gradient(
    ellipse 78% 82% at 50% 48%,
    black 38%,
    rgba(0,0,0,.6) 62%,
    rgba(0,0,0,0) 90%
  );
}

/* ── Greeting bubble ── */
@keyframes greet-bubble-in {
  0%   { opacity: 0; transform: scale(.8) translateY(16px); }
  65%  { opacity: 1; transform: scale(1.04) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes greet-bubble-out {
  0%   { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(.9) translateY(-10px); }
}

.agent-greet-bubble {
  position: absolute;
  bottom: calc(100% + 62px);   /* выше .agent-intro (~52px) + зазор */
  right: 0;
  min-width: 200px;
  max-width: 250px;
  background: rgba(6,8,15,.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,234,255,.38);
  border-radius: 18px 18px 4px 18px;
  padding: 12px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04),
              0 0 24px rgba(0,234,255,.14);
  opacity: 0;
  transform: scale(.8) translateY(16px);
  pointer-events: none;
  z-index: 4;
}
.agent-greet-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 18px;
  border: 7px solid transparent;
  border-top-color: rgba(0,234,255,.38);
  border-bottom: none;
}
.agent-greet-bubble strong {
  display: block;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  letter-spacing: .01em;
  margin-bottom: 4px;
}
.agent-greet-bubble span {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: rgba(0,234,255,.85);
  line-height: 1.4;
}
.agent-greet-bubble.show {
  animation: greet-bubble-in .55s cubic-bezier(.34,1.56,.64,1) forwards;
}
.agent-greet-bubble.hide {
  animation: greet-bubble-out .35s ease forwards;
}

/* Текстовое представление над персонажем */
.agent-intro {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;                    /* прижато к правому краю персонажа — не уходит за экран */
  transform: none;
  background: rgba(6,8,15,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0,234,255,.25);
  border-radius: 16px;
  padding: 8px 14px;
  white-space: nowrap;
  text-align: right;
  box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  transition: opacity .4s ease, transform .4s ease;
  z-index: 2;
}
.agent-intro-name {
  display: block;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  letter-spacing: .02em;
}
.agent-intro-role {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 11px;
  color: rgba(0,234,255,.8);
  margin-top: 1px;
  transition: opacity .3s ease;
}
.agent-intro::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 22px;                 /* стрелка под правой частью плашки */
  border: 6px solid transparent;
  border-top-color: rgba(0,234,255,.25);
  border-bottom: none;
}
/* Скрывается когда чат открыт */
.agent-widget.chat-open .agent-intro {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* Idle float — теперь движение в webm, CSS анимация убрана */
@keyframes agent-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
/* Glow ring следует за движением видео */
.agent-glow-ring {
  animation: agent-float 3s ease-in-out infinite;
}

/* Rare idle pulse (class toggled by JS) */
@keyframes agent-pulse-idle {
  0%   { filter: drop-shadow(0 0 0px #00eaff00); }
  40%  { filter: drop-shadow(0 0 18px #00eaff88); }
  100% { filter: drop-shadow(0 0 0px #00eaff00); }
}
.agent-character.idle-pulse #agent-s-idle {
  animation: agent-float 4s ease-in-out infinite,
             agent-pulse-idle 1.8s ease forwards;
}

/* Glow ring — убран по запросу пользователя */
.agent-glow-ring { display: none; }

/* Hint — теперь встроен в .agent-intro, отдельный элемент не нужен */
.agent-hint { display: none; }

/* mix-blend-mode:screen removes black bg on dark surface — all platforms */
.agent-state { mix-blend-mode: screen; }

/* Safari/iOS canvas renderer — video elements are opacity:0, canvas displays frames */
#agent-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ── Chat panel ── */
.agent-chat {
  width: 320px;
  background: rgba(6, 8, 15, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 234, 255, 0.2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 8px 40px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  max-height: 480px;
  opacity: 0;
  transform: translateX(20px) scale(.96);
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.34,1.56,.64,1),
              transform .35s cubic-bezier(.34,1.56,.64,1);
  transform-origin: bottom right;
}
.agent-chat.is-open {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: all;
}

/* Header */
.agent-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  flex-shrink: 0;
}
.agent-avatar-mini {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0,234,255,.08);
  border: 1px solid rgba(0,234,255,.25);
  flex-shrink: 0;
}
.agent-avatar-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transform: scale(1.3) translateY(4px);
}
.agent-chat-info { flex: 1; }
.agent-chat-name {
  display: block;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}
.agent-online {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.45);
}
.agent-online i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00eaff;
  box-shadow: 0 0 6px #00eaff;
  animation: online-pulse 2s ease infinite;
}
@keyframes online-pulse {
  0%,100% { opacity:1; } 50% { opacity:.4; }
}
.agent-chat-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  transition: color .2s;
}
.agent-chat-close:hover { color: #fff; }

/* Messages */
.agent-messages {
  flex: 1;
  min-height: 0;        /* критично — без этого flex-item не сжимается и налезает на инпут */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
  padding: 16px;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,234,255,.2) transparent;
}
.agent-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  animation: msg-in .25s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes msg-in {
  from { opacity:0; transform: translateY(8px) scale(.96); }
  to   { opacity:1; transform: none; }
}
.agent-msg.from-agent {
  background: rgba(0,234,255,.08);
  border: 1px solid rgba(0,234,255,.15);
  color: rgba(255,255,255,.9);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
@keyframes tw-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.agent-msg.from-agent.is-typing::after {
  content: '▋';
  display: inline-block;
  margin-left: 2px;
  font-size: 11px;
  color: rgba(0,234,255,.75);
  animation: tw-cursor .65s step-end infinite;
  vertical-align: middle;
}
.agent-msg.from-user {
  background: rgba(26,108,255,.25);
  border: 1px solid rgba(26,108,255,.3);
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

/* Form-ready message */
.agent-msg--form-ready {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  background: rgba(0,234,255,.12) !important;
  border-color: rgba(0,234,255,.4) !important;
}
.agent-goto-form {
  align-self: flex-start;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.agent-goto-form:hover { opacity: .85; transform: translateX(3px); }

/* Вспышка на секции после заполнения */
@keyframes form-prefill-glow {
  0%,100% { box-shadow: none; }
  40%      { box-shadow: 0 0 0 4px rgba(0,234,255,.35); }
}
.contact-section.form-prefilled {
  animation: form-prefill-glow 1s ease 2;
  border-radius: 8px;
}

/* Typing dots */
.agent-typing {
  padding: 8px 16px 0;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.agent-typing.hidden { display: none; }
.agent-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(0,234,255,.6);
  animation: typing-dot .9s ease infinite;
}
.agent-typing span:nth-child(2) { animation-delay: .15s; }
.agent-typing span:nth-child(3) { animation-delay: .30s; }
@keyframes typing-dot {
  0%,60%,100% { transform: translateY(0); opacity:.4; }
  30%          { transform: translateY(-5px); opacity:1; }
}

/* Input */
.agent-input-row {
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

/* Единая карточка ввода */
.agent-input-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 8px 8px 8px 12px;
  transition: border-color .25s;
}
.agent-input-inner:focus-within {
  border-color: rgba(0,234,255,.4);
  box-shadow: 0 0 0 3px rgba(0,234,255,.06);
}

#agent-input {
  flex: 1 1 0;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  resize: none;
  overflow: hidden;
  min-height: 20px;
  max-height: 96px;
  padding: 2px 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,234,255,.2) transparent;
}
#agent-input::-webkit-scrollbar { width: 3px; }
#agent-input::-webkit-scrollbar-thumb { background: rgba(0,234,255,.25); border-radius: 2px; }
#agent-input::placeholder { color: rgba(255,255,255,.28); }

/* Кнопки справа — горизонтально */
.agent-input-btns {
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex-shrink: 0;
}

.agent-mic-btn {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
  flex-shrink: 0;
}
.agent-mic-btn:hover {
  background: rgba(0,234,255,.12);
  border-color: rgba(0,234,255,.35);
  color: #00eaff;
}
@keyframes mic-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,60,60,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(255,60,60,0); }
}
.agent-mic-btn.is-recording {
  background: rgba(255,60,60,.18);
  border-color: rgba(255,60,60,.45);
  color: #ff5555;
  animation: mic-pulse 1s ease infinite;
}
.agent-mic-btn.no-speech { display: none; }

#agent-send {
  width: 34px; height: 34px;
  min-width: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #1a6cff, #00eaff);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, box-shadow .15s;
}
#agent-send:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(0,234,255,.4);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .agent-widget {
    bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    right: max(10px, calc(env(safe-area-inset-right, 0px) + 10px));
    gap: 6px;
    align-items: flex-end;
  }
  .agent-character { width: 130px; height: 195px; }
  /* Softer masks — bigger visible zone for smaller container */
  #agent-s-idle {
    -webkit-mask-image: radial-gradient(ellipse 95% 92% at 50% 54%, black 58%, rgba(0,0,0,.45) 82%, rgba(0,0,0,0) 100%);
    mask-image:         radial-gradient(ellipse 95% 92% at 50% 54%, black 58%, rgba(0,0,0,.45) 82%, rgba(0,0,0,0) 100%);
  }
  #agent-s-greet, #agent-s-talk {
    -webkit-mask-image: radial-gradient(ellipse 95% 96% at 50% 50%, black 54%, rgba(0,0,0,.45) 80%, rgba(0,0,0,0) 100%);
    mask-image:         radial-gradient(ellipse 95% 96% at 50% 50%, black 54%, rgba(0,0,0,.45) 80%, rgba(0,0,0,0) 100%);
  }
  .agent-greet-bubble { min-width: 160px; max-width: 200px; font-size: 11px; bottom: calc(100% + 52px); }
  .agent-chat {
    width: calc(100vw - 155px);
    min-width: 200px;
    max-height: 60vh;
    border-radius: 16px;
  }
  .agent-messages { max-height: calc(60vh - 130px); }
}

@media (max-width: 420px) {
  .agent-character { width: 110px; height: 165px; flex-shrink: 0; }
  .agent-greet-bubble { min-width: 140px; max-width: 170px; bottom: calc(100% + 46px); }
  .agent-chat {
    width: calc(100vw - 135px);
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .agent-character { width: 90px; height: 135px; }
  .agent-chat { width: calc(100vw - 110px); }
}

/* ══════════════════════════════════════════
   FORM SUCCESS OVERLAY
══════════════════════════════════════════ */
.fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(6,8,15,.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fs-overlay[hidden] { display: none; }

.fs-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

@keyframes fs-card-in {
  0%   { opacity: 0; transform: scale(.88) translateY(24px); }
  65%  { opacity: 1; transform: scale(1.02) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.fs-card {
  position: relative;
  z-index: 1;
  background: rgba(6,8,15,.92);
  border: 1px solid rgba(0,234,255,.22);
  border-radius: 28px;
  padding: 44px 40px 36px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04),
              0 0 60px rgba(0,234,255,.08);
  animation: fs-card-in .55s cubic-bezier(.34,1.56,.64,1) both;
}

/* Checkmark */
.fs-check-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}
.fs-check-svg {
  width: 64px; height: 64px;
  overflow: visible;
}
.fs-circle {
  fill: none;
  stroke: rgba(0,234,255,.25);
  stroke-width: 2;
  stroke-dasharray: 164;
  stroke-dashoffset: 164;
  animation: fs-circle-draw .6s ease .2s forwards;
}
.fs-tick {
  fill: none;
  stroke: #00eaff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: fs-tick-draw .4s ease .75s forwards;
  filter: drop-shadow(0 0 8px rgba(0,234,255,.8));
}
@keyframes fs-circle-draw { to { stroke-dashoffset: 0; } }
@keyframes fs-tick-draw    { to { stroke-dashoffset: 0; } }

.fs-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem;
  letter-spacing: .06em;
  color: #fff;
  margin: 0 0 8px;
}
.fs-sub {
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.55);
  margin: 0 0 28px;
  line-height: 1.5;
}

/* Steps */
.fs-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  text-align: left;
}
.fs-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.75);
  opacity: 0;
  transform: translateX(-12px);
  animation: fs-step-in .4s ease forwards;
}
.fs-step:nth-child(1) { animation-delay: 1s; }
.fs-step:nth-child(2) { animation-delay: 1.15s; }
.fs-step:nth-child(3) { animation-delay: 1.3s; }
.fs-step:nth-child(4) { animation-delay: 1.45s; }
@keyframes fs-step-in {
  to { opacity: 1; transform: translateX(0); }
}
.fs-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  margin-top: 1px;
}

/* Contacts */
.fs-contacts {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.fs-contact-link {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: rgba(0,234,255,.85);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid rgba(0,234,255,.25);
  border-radius: 20px;
  transition: background .2s, border-color .2s;
}
.fs-contact-link:hover {
  background: rgba(0,234,255,.1);
  border-color: rgba(0,234,255,.5);
}

/* Close button */
.fs-close-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  color: rgba(255,255,255,.45);
  font-family: Inter, sans-serif;
  font-size: 13px;
  padding: 10px 28px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.fs-close-btn:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.fs-tap-hint {
  font-size: 11px;
  color: rgba(255,255,255,.2);
  margin-top: 10px;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════
   PERFORMANCE LITE MODE
   Applied via document.body.dataset.perf = 'low' | 'medium' | 'high'
   and @media prefers-reduced-motion
══════════════════════════════════════════ */

/* ── prefers-reduced-motion: kill all non-essential animations ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .c0-title,
  .c0-sub,
  .c0-phone,
  .c0-phone-dot,
  .c0-scroll-hint,
  .scroll-wheel::before { animation: none !important; }
  #fx-canvas { display: none !important; }
  .agent-glow-ring { display: none !important; }
}

/* ── LOW perf: максимальная экономия ── */
[data-perf="low"] #fx-canvas { display: none; }
[data-perf="low"] #cur-dot,
[data-perf="low"] #cur-ring { display: none; }
[data-perf="low"] .c0-title { animation: none; }
[data-perf="low"] .c0-sub   { animation: none; }
[data-perf="low"] .scroll-wheel::before { animation: none; }
[data-perf="low"] .c0-scroll-hint { animation: none; }
[data-perf="low"] .agent-glow-ring { display: none; }
[data-perf="low"] .chap-tags span { backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-perf="low"] .c4-stat { backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-perf="low"] .srv-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-perf="low"] #hdr.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6,8,15,0.96); }
[data-perf="low"] .agent-chat { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6,8,15,0.97); }
[data-perf="low"] .agent-intro { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6,8,15,0.97); }

/* ── MEDIUM perf: убираем WebGL, оставляем CSS анимации ── */
[data-perf="medium"] #fx-canvas { opacity: 0.6; }
[data-perf="medium"] .chap-tags span { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ── will-change + GPU compositing ── */
.chap { will-change: opacity, transform; } /* translateZ убран — JS-параллакс перезапишет transform */
.hdr-cta { will-change: transform; }
.c4-cta  { will-change: transform, box-shadow; }
.srv-card { will-change: transform, opacity; }
.agent-chat { will-change: opacity, transform; }
.agent-character { will-change: transform; }
#ring-fill { will-change: stroke-dashoffset; }
#fx-canvas { transform: translateZ(0); will-change: transform; }
#agent-canvas { transform: translateZ(0); }

/* ── contain: ускоряем layout recalc ── */
.srv-card { contain: layout style; }
.chap     { contain: layout; }
.agent-msg { contain: content; }

/* ── Landscape on mobile: shrink agent to not eat half the screen ── */
@media (max-height: 500px) and (max-width: 900px) {
  .agent-character { width: 90px; height: 135px; }
  .agent-chat { max-height: 85vh; }
  .agent-messages { max-height: calc(85vh - 130px); }
  .agent-greet-bubble { display: none; }
}

/* ── Agent hidden when keyboard is open (JS adds .keyboard-open to body) ── */
body.keyboard-open .agent-widget {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

/* ═══════════════════════════════════════════════════
   SERVICE MODAL
═══════════════════════════════════════════════════ */
.svm-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility .32s ease;
}
.svm-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.svm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 14, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}
.svm-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: rgba(10, 13, 24, 0.95);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 26px;
  overflow: hidden;
  box-shadow:
    0 32px 80px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.06);
  transform: scale(.92) translateY(24px);
  transition: transform .38s cubic-bezier(.34,1.56,.64,1);
  max-height: 92svh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.svm-overlay.is-open .svm-card {
  transform: scale(1) translateY(0);
}

/* Close button */
.svm-close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(6,8,15,.7);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, transform .15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.svm-close:hover { background: rgba(255,255,255,.12); color: #fff; transform: scale(1.08); }
.svm-close:active { transform: scale(.94); }

/* Image */
.svm-img-wrap {
  position: relative;
  height: 230px;
  overflow: hidden;
  flex-shrink: 0;
}
.svm-img-wrap picture { display: block; height: 100%; }
.svm-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.svm-overlay.is-open .svm-img-wrap img { transform: scale(1.04); }
.svm-img-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6,8,15,0) 30%, rgba(6,8,15,.95) 100%);
}
.svm-num {
  position: absolute;
  bottom: 18px; left: 24px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  color: rgba(255,255,255,.07);
  line-height: 1;
  letter-spacing: -.02em;
  user-select: none;
  pointer-events: none;
}

/* Body */
.svm-body {
  padding: 24px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.svm-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 5vw, 38px);
  letter-spacing: .04em;
  color: #fff;
  line-height: 1.05;
}
.svm-desc {
  font-size: 14px;
  font-family: Inter, sans-serif;
  color: rgba(255,255,255,.48);
  line-height: 1.6;
  margin: -4px 0;
}
.svm-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svm-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-family: Inter, sans-serif;
  color: rgba(255,255,255,.78);
}
.svm-features li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0,234,255,.5);
}
.svm-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(26,108,255,.08);
  border: 1px solid rgba(26,108,255,.2);
  border-radius: 14px;
}
.svm-price-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.svm-price-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svm-price-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: #fff;
  letter-spacing: .04em;
  line-height: 1;
}
.svm-price-note {
  font-size: 11px;
  font-family: Inter, sans-serif;
  color: rgba(255,255,255,.35);
  letter-spacing: .02em;
}
.svm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  background: linear-gradient(135deg, #1a6cff 0%, #00eaff 100%);
  border-radius: 14px;
  font-size: 15px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
  transition: opacity .2s ease, transform .15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  margin-top: 4px;
}
.svm-cta:hover { opacity: .88; transform: translateY(-1px); }
.svm-cta:active { transform: scale(.98); }
.svm-cta span { font-size: 18px; line-height: 1; }

/* Cursor hint on cards */
.srv-card { cursor: pointer; }

/* Mobile */
@media (max-width: 480px) {
  .svm-card { border-radius: 20px; }
  .svm-img-wrap { height: 190px; }
  .svm-body { padding: 20px 22px 28px; }
}