:root {
  --bg-primary: #05070d;
  --bg-secondary: #0b1020;
  --bg-card: rgba(11, 16, 32, 0.68);
  --bg-card-hover: rgba(13, 20, 40, 0.82);
  --border-card: rgba(255, 255, 255, 0.10);
  --border-card-hover: rgba(120, 170, 255, 0.45);
  --text-primary: #f8fbff;
  --text-secondary: #d6def5;
  --text-muted: #9ba8c7;
  --accent-blue: #60a5fa;
  --accent-indigo: #818cf8;
  --accent-cyan: #22d3ee;
  --accent-green: #34d399;
  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 16px;
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.42);
  --shadow-hover: 0 26px 80px rgba(21, 47, 110, 0.38);
  --shadow-button: 0 16px 32px rgba(37, 99, 235, 0.28);
  --gradient-primary: linear-gradient(135deg, #ffffff 0%, #c6dcff 34%, #8ec5ff 68%, #7c9cff 100%);
  --gradient-border: linear-gradient(135deg, rgba(96, 165, 250, 0.92), rgba(129, 140, 248, 0.52), rgba(34, 211, 238, 0.54));
  --transition-fast: 0.22s ease;
  --transition-base: 0.32s ease;
  --transition-slow: 0.5s ease;
  --space-xs: 10px;
  --space-sm: 14px;
  --space-md: 20px;
  --space-lg: 28px;
  --space-xl: 40px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Space Grotesk', 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-secondary);
  background:
    radial-gradient(circle at top right, rgba(96,165,250,0.12), transparent 24%),
    radial-gradient(circle at bottom left, rgba(129,140,248,0.10), transparent 26%),
    linear-gradient(180deg, #05070d 0%, #080d18 55%, #05070d 100%);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.36;
  animation: orbFloat 20s ease-in-out infinite;
}

.orb-1 {
  width: 540px;
  height: 540px;
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.40) 0%, transparent 70%);
}

.orb-2 {
  width: 440px;
  height: 440px;
  left: -140px;
  bottom: 8%;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.32) 0%, transparent 70%);
  animation-delay: -7s;
}

.orb-3 {
  width: 360px;
  height: 360px;
  right: 12%;
  top: 38%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.20) 0%, transparent 70%);
  animation-delay: -13s;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,0.65) 0%, transparent 75%);
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(28px, -22px) scale(1.05); }
  50% { transform: translate(-18px, 20px) scale(0.96); }
  75% { transform: translate(18px, 30px) scale(1.02); }
}

.premium-container {
  position: relative;
  z-index: 1;
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 28px;
}

.smart-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "heading heading heading heading heading heading heading heading video video video video"
    "contact contact contact contact contact contact contact contact contact contact contact contact"
    "manifest manifest manifest manifest manifest manifest manifest manifest manifest manifest manifest manifest"
    "info info info info info info android android android android android android"
    "geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps"
    "videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod"
    "ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works"
    "tools tools tools tools tools tools tools tools tools tools tools tools"
    "lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet"
    "portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio"
    "geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment"
    "static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews"
    "faq faq faq faq faq faq faq faq faq faq faq faq"
    "audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews";
  gap: 22px;
  align-items: stretch;
}

.premium-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transition: transform var(--transition-base), border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.premium-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.premium-card:hover::before {
  opacity: 1;
}

.premium-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-card-hover);
  background: linear-gradient(180deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.05) 100%);
  box-shadow: var(--shadow-hover);
}

.card-glow {
  position: absolute;
  inset: -40%;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 22%, rgba(96,165,250,0.20) 0%, transparent 32%),
    radial-gradient(circle at 80% 80%, rgba(129,140,248,0.18) 0%, transparent 34%);
  transition: opacity var(--transition-base);
}

.premium-card:hover .card-glow {
  opacity: 1;
}

.card-content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 24px;
}

.card-content--portfolio {
  padding: 0;
}

.reveal-card {
  opacity: 0;
  -webkit-transform: translateY(28px) scale(0.985);
  transform: translateY(28px) scale(0.985);
  -webkit-animation: cardReveal 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation: cardReveal 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.reveal-card:nth-child(1) { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; }
.reveal-card:nth-child(2) { -webkit-animation-delay: 0.10s; animation-delay: 0.10s; }
.reveal-card:nth-child(3) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
.reveal-card:nth-child(4) { -webkit-animation-delay: 0.20s; animation-delay: 0.20s; }
.reveal-card:nth-child(5) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
.reveal-card:nth-child(6) { -webkit-animation-delay: 0.30s; animation-delay: 0.30s; }
.reveal-card:nth-child(7) { -webkit-animation-delay: 0.35s; animation-delay: 0.35s; }
.reveal-card:nth-child(8) { -webkit-animation-delay: 0.40s; animation-delay: 0.40s; }

@-webkit-keyframes cardReveal {
  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}
@keyframes cardReveal {
  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}

/* Фолбэк: если анимации отключены (энергосбережение, WebView) — контент видим */
@media (prefers-reduced-motion: reduce) {
  .reveal-card {
    opacity: 1 !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-animation: none !important;
    animation: none !important;
  }
}

.card-heading { grid-area: heading; min-height: 360px; }
.card-contact { grid-area: contact; min-height: auto; }
.card-manifest { grid-area: manifest; min-height: auto; }
.card-video { grid-area: video; min-height: 360px; padding: 12px; }
.card-info { grid-area: info; min-height: 380px; }
.card-geo-steps { grid-area: geo-steps; min-height: auto; }

/* ===== GEO-STEPS BLOCK ===== */
.geo-steps-content {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.geo-steps-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.geo-steps-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(255,107,53,0.18) 0%, rgba(255,159,67,0.10) 100%);
  color: #ff7a3d;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,107,53,0.25);
}

.geo-steps-title {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.geo-steps-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
  max-width: 600px;
  line-height: 1.5;
}

.geo-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.geo-step-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.geo-step-card:hover {
  border-color: rgba(255,107,53,0.3);
  transform: translateY(-3px);
}

/* Первый ряд — 3 карточки. Второй ряд — 2 карточки по центру */
.geo-step-card:nth-child(4) {
  grid-column: 1 / 2;
}
.geo-step-card:nth-child(5) {
  grid-column: 2 / 3;
}

.geo-step-num {
  position: absolute;
  top: -1px;
  right: 18px;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, rgba(255,107,53,0.22) 0%, rgba(255,107,53,0.04) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  pointer-events: none;
  user-select: none;
}

.geo-step-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
  padding-right: 40px;
}

.geo-step-card-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ===== GEO-STEPS RESPONSIVE ===== */
@media (max-width: 991px) {
  .geo-steps-content {
    padding: 28px 24px;
    gap: 22px;
  }
  .geo-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .geo-step-card:nth-child(4) {
    grid-column: auto;
  }
  .geo-step-card:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
  }
}

@media (max-width: 767px) {
  .geo-steps-content {
    padding: 22px 18px;
    gap: 18px;
  }
  .geo-steps-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .geo-step-card:nth-child(5) {
    grid-column: auto;
    max-width: 100%;
  }
  .geo-step-card {
    padding: 22px 18px 18px;
  }
  .geo-step-num {
    font-size: 2.8rem;
    right: 14px;
  }
  .geo-step-card-title {
    font-size: 1rem;
    padding-right: 35px;
  }
  .geo-step-card-desc {
    font-size: 0.88rem;
  }
}

@media (max-width: 480px) {
  .geo-steps-content {
    padding: 18px 14px;
    gap: 16px;
  }
  .geo-steps-title {
    font-size: 1.3rem;
  }
  .geo-steps-subtitle {
    font-size: 0.9rem;
  }
  .geo-step-card {
    padding: 20px 14px 16px;
  }
  .geo-step-num {
    font-size: 2.4rem;
    right: 12px;
  }
  .geo-step-card-title {
    font-size: 0.95rem;
    padding-right: 30px;
  }
  .geo-step-card-desc {
    font-size: 0.85rem;
  }
}

@media (max-width: 375px) {
  .geo-steps-content {
    padding: 16px 12px;
    gap: 14px;
  }
  .geo-step-card {
    padding: 18px 12px 14px;
    gap: 8px;
  }
  .geo-step-num {
    font-size: 2rem;
  }
}

.card-videoprod { grid-area: videoprod; min-height: auto; }
.card-android { grid-area: android; min-height: 480px; }
.card-ai-works { grid-area: ai-works; }
.card-tools { grid-area: tools; }
.card-lead-magnet { grid-area: lead-magnet; }
.card-portfolio { grid-area: portfolio; }
.card-reviews { margin-top: 22px; }
.card-audio-reviews { grid-area: audio-reviews; }

/* ===== ANDROID CARD ===== */
.card-android__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.android-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.android-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.20) 0%, rgba(34, 211, 238, 0.15) 100%);
  border: 1px solid rgba(52, 211, 153, 0.28);
  flex-shrink: 0;
}

.android-icon {
  width: 22px;
  height: 22px;
  color: var(--accent-green);
}

.android-badge {
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.18), rgba(34, 211, 238, 0.14));
  border: 1px solid rgba(52, 211, 153, 0.32);
  color: var(--accent-green);
}

.android-title {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.android-desc {
  font-size: 0.93rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.android-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.android-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.android-feat-icon {
  color: var(--accent-green);
  flex-shrink: 0;
  font-size: 0.9rem;
  margin-top: 2px;
}

.android-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.10) 0%, rgba(34, 211, 238, 0.08) 100%);
  border: 1px solid rgba(52, 211, 153, 0.22);
}

.android-price-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: 'Space Grotesk', sans-serif;
}

.android-price-value {
  font-family: 'Archivo', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.android-workflow {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.android-workflow-title {
  font-family: 'Archivo', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.android-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.android-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.android-step-num {
  font-family: 'Archivo', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-green);
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 8px;
  padding: 3px 7px;
  flex-shrink: 0;
  line-height: 1.4;
  margin-top: 2px;
}

.android-step-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.android-step-body strong {
  font-family: 'Archivo', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.android-step-body p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.status-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.status-text,
.current-date,
.tax-label,
.tax-org,
.specialty,
.info-body p,
.crm-link,
.contact-label {
  color: var(--text-secondary);
}

.status-text,
.current-date,
.tax-org {
  font-size: 0.86rem;
}

.status-label,
.info-badge {
  color: var(--accent-green);
  font-weight: 700;
}

.status-value {
  color: #8ef0cb;
  font-weight: 700;
}

.current-date {
  color: var(--text-muted);
}

.heading-wrapper h1,
.info-title,
.va-pf-pro__title,
.name,
.contact-phone {
  font-family: 'Archivo', sans-serif;
  line-height: 1.06;
}

.heading-wrapper h1 {
  margin: 0 0 14px;
  font-size: clamp(1.45rem, 2.6vw, 2.4rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.gradient-text {
  color: #f8fbff; /* фолбэк если gradient-clip не поддерживается */
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.name {
  margin: 0 0 14px;
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
}

.specialty {
  margin: 0 0 20px;
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 62ch;
}

.tax-info {
  margin-top: auto;
}

.tax-label {
  margin: 0 0 8px;
}

.tax-org {
  margin: 0;
  color: var(--text-muted);
}

.contact-header {
  margin-bottom: 22px;
}

.contact-label {
  display: block;
  margin-bottom: 10px;
  color: var(--text-muted);
}

.contact-phone {
  display: inline-block;
  text-decoration: none;
  color: var(--text-primary);
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.contact-email {
  margin-top: 10px;
}

.contact-email a {
  display: inline-block;
  text-decoration: none;
  color: var(--accent-cyan);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.contact-email a:hover {
  color: var(--accent-blue);
  text-decoration: underline;
}

.contact-email a,
.crm-link a,
.reviews-credit {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact-schedule {
  margin: 14px 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 320px;
}

.heading-wrapper,
.info-header,
.va-pf-pro__head {
  text-align: left;
}

.contact-header {
  text-align: left;
}

/* ── Contact card — двухколоночная сетка ── */
.card-contact .card-content.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  padding: 32px 36px;
}

.contact-col-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-col-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
}

/* Телефон — крупно, с акцентом */
.contact-col-left .contact-phone {
  display: block;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.15;
  transition: color 0.2s;
}

.contact-col-left .contact-phone:hover {
  color: var(--accent-cyan);
}

.contact-col-left .contact-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.contact-col-left .contact-email {
  margin-top: 0;
}

.contact-col-left .contact-schedule {
  margin-top: 0;
  max-width: none;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.contact-col-left .white-methods-highlight {
  margin-bottom: 0;
}

/* Кнопки — на всю ширину правой колонки */
.contact-col-right .cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.contact-col-right .cta-btn {
  width: 100%;
  justify-content: center;
}

.contact-col-right .contact-extra {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Avatar circle ── */
.heading-top {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 14px;
}

.heading-top h1 {
  margin: 0;
}

.avatar-circle-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.35s ease;
  /* No overflow: hidden — чтобы вращающийся бордер был виден */
}

/* Статичный градиентный бордер (анимация отключена) */
.avatar-circle-wrap::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #00f5ff 0%,
    #7b2ff7 25%,
    #ff3cac 50%,
    #00e5ff 75%,
    #00f5ff 100%
  );
  z-index: 0;
}

/* Маска — скрывает центр, оставляя только кольцо бордера */
.avatar-circle-wrap::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #0c1528; /* совпадает с фоном карточки */
  z-index: 1;
}

.avatar-circle-wrap img {
  position: relative;
  z-index: 2;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 6px; /* центрирует внутри wrapper'а */
}

/* Гло при наведении */
.avatar-circle-wrap:hover {
  transform: scale(1.08);
}
.avatar-circle-wrap:hover::before {
  filter: brightness(1.4) blur(1px);
}

.info-badge {
  margin-left: auto;
  margin-right: auto;
}

.va-pf-pro__eyebrow {
  margin-left: 0;
  margin-right: 0;
}

.specialty,
.tax-label,
.tax-org,
.info-body p,
.va-pf-pro__desc,
.va-pf-pro__text,
.contact-label {
  text-align: justify;
  text-justify: inter-word;
}

.specialty,
.va-pf-pro__desc {
  max-width: none;
}

.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  border-radius: 18px;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.cta-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -140%;
  width: 85%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.08) 36%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.08) 64%, transparent 100%);
  transform: skewX(-24deg);
  transition: left 0.68s ease;
  z-index: -1;
}

.cta-btn:hover::after {
  left: 165%;
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-button);
}

.cta-btn-telegram {
  color: #fff;
  border: 1px solid rgba(96,165,250,0.34);
  background: linear-gradient(135deg, rgba(37,99,235,0.96), rgba(59,130,246,0.84));
}

.cta-btn-max {
  color: #e5e7ff;
  border: 1px solid rgba(129,140,248,0.30);
  background: linear-gradient(135deg, rgba(99,102,241,0.30), rgba(129,140,248,0.18));
}

.cta-btn-consult {
  color: #fff;
  border: 1px solid rgba(239,68,68,0.45);
  background: linear-gradient(135deg, rgba(220,38,38,0.94), rgba(239,68,68,0.82));
  box-shadow: 0 4px 24px rgba(239,68,68,0.25), 0 0 0 1px rgba(239,68,68,0.10);
  -webkit-animation: consultPulse 2.5s ease-in-out infinite;
  animation: consultPulse 2.5s ease-in-out infinite;
}

.cta-btn-consult:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(239,68,68,0.40), 0 0 0 1px rgba(239,68,68,0.20);
  border-color: rgba(239,68,68,0.65);
}

@-webkit-keyframes consultPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(239,68,68,0.25), 0 0 0 1px rgba(239,68,68,0.10); }
  50% { box-shadow: 0 4px 32px rgba(239,68,68,0.45), 0 0 0 2px rgba(239,68,68,0.18); }
}
@keyframes consultPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(239,68,68,0.25), 0 0 0 1px rgba(239,68,68,0.10); }
  50% { box-shadow: 0 4px 32px rgba(239,68,68,0.45), 0 0 0 2px rgba(239,68,68,0.18); }
}

/* ===== AUDIO PLAYER ===== */
.audio-player {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  margin: 18px 0 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-sizing: border-box;
}

.ap-play-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,99,235,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ap-play-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37,99,235,0.5);
}

.ap-play-btn svg {
  width: 20px;
  height: 20px;
}

.ap-icon-play {
  margin-left: 2px;
}

.ap-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ap-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-progress-wrap {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  cursor: pointer;
  overflow: visible;
}

.ap-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  transition: width 0.1s linear;
}

.ap-progress-glow {
  position: absolute;
  top: -4px;
  left: 0%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 10px rgba(59,130,246,0.5);
  transform: translateX(-50%);
  opacity: 0;
  transition: left 0.1s linear, opacity 0.3s ease;
}

.ap-playing .ap-progress-glow {
  opacity: 1;
}

.ap-time {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Визуализатор — анимированные столбики */
.ap-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
  flex-shrink: 0;
}

.ap-visualizer span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3b82f6, #06b6d4);
  transition: height 0.08s linear;
  will-change: height;
}

/* Статичные высоты (пока не играет) */
.ap-visualizer span:nth-child(odd)  { height: 6px; }
.ap-visualizer span:nth-child(even) { height: 4px; }

/* Кнопка громкости */
.ap-volume-wrap {
  flex-shrink: 0;
}

.ap-vol-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s, opacity 0.2s, background 0.2s;
}

.ap-vol-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

.ap-vol-btn svg {
  width: 18px;
  height: 18px;
}

.ap-versions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.ap-version-btn {
  display: inline-block;
  padding: 5px 12px;
  font-size: 0.74rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.ap-version-btn:hover {
  border-color: rgba(59,130,246,0.4);
  color: var(--text-primary);
  background: rgba(59,130,246,0.1);
}

.ap-version-btn.ap-version-active {
  border-color: rgba(59,130,246,0.5);
  color: #fff;
  background: linear-gradient(135deg, rgba(37,99,235,0.35), rgba(59,130,246,0.20));
  box-shadow: 0 0 12px rgba(59,130,246,0.15);
}

.ap-divider {
  width: 100%;
  height: 1px;
  margin: 16px 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12) 20%, rgba(255,255,255,0.12) 80%, transparent);
}

/* === Audio player responsive === */
@media (max-width: 991px) {
  .ap-versions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ap-version-btn {
    padding: 5px 14px;
    font-size: 0.78rem;
  }
}

@media (max-width: 767px) {
  .audio-player {
    gap: 10px;
    padding: 12px 14px;
    margin: 14px 0 10px;
  }
  .ap-visualizer {
    display: none;
  }
  .ap-play-btn {
    width: 44px;
    height: 44px;
  }
  .ap-play-btn svg {
    width: 18px;
    height: 18px;
  }
  .ap-label {
    font-size: 0.82rem;
  }
  .ap-versions {
    gap: 6px;
    justify-content: center;
  }
  .ap-version-btn {
    padding: 5px 12px;
    font-size: 0.75rem;
  }
  .ap-divider {
    margin: 12px 0;
  }
}

@media (max-width: 480px) {
  .audio-player {
    padding: 10px 12px;
    gap: 8px;
    border-radius: 12px;
  }
  .ap-play-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  .ap-info {
    min-width: 0;
    flex: 1;
  }
  .ap-volume-wrap {
    display: none;
  }
  .ap-label {
    font-size: 0.76rem;
  }
  .ap-time {
    font-size: 0.68rem;
  }
  .ap-versions {
    gap: 5px;
  }
  .ap-version-btn {
    padding: 4px 10px;
    font-size: 0.72rem;
  }
}

@media (max-width: 375px) {
  .audio-player {
    padding: 8px 10px;
    gap: 6px;
    border-radius: 10px;
    margin: 10px 0 8px;
  }
  .ap-play-btn {
    width: 36px;
    height: 36px;
  }
  .ap-play-btn svg {
    width: 16px;
    height: 16px;
  }
  .ap-label {
    font-size: 0.72rem;
  }
  .ap-progress-wrap {
    height: 5px;
  }
  .ap-time {
    font-size: 0.65rem;
  }
  .ap-versions {
    gap: 4px;
  }
  .ap-version-btn {
    padding: 3px 8px;
    font-size: 0.68rem;
    border-radius: 14px;
  }
  .ap-divider {
    margin: 10px 0;
  }
}

.btn-icon,
.download-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.btn-icon svg {
  width: 18px;
  height: 18px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #11141d;
  box-shadow: 0 18px 46px rgba(0,0,0,0.42), 0 0 34px rgba(37,99,235,0.12);
  cursor: pointer;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  min-height: 336px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #11141d;
}

.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.38) 100%);
  pointer-events: none;
}

.play-btn {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 40%), linear-gradient(135deg, rgba(37,99,235,0.94), rgba(96,165,250,0.86));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 14px 38px rgba(37,99,235,0.35), 0 0 36px rgba(37,99,235,0.28);
  backdrop-filter: blur(10px);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.video-wrapper:hover .play-btn {
  transform: scale(1.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 18px 46px rgba(37,99,235,0.42), 0 0 42px rgba(37,99,235,0.34);
}

.play-btn svg {
  width: 26px;
  height: 26px;
  fill: #fff;
  margin-left: 4px;
}

.video-shine {
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.24) 48%, rgba(255,255,255,0.08) 56%, transparent 68%);
  transform: translateX(-125%) skewX(-18deg);
  animation: videoShine 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes videoShine {
  0%, 100% { transform: translateX(-130%) skewX(-18deg); }
  48%, 56% { transform: translateX(115%) skewX(-18deg); }
}

.info-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.22);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.info-title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.info-body {
  margin-bottom: 18px;
}

.info-body p {
  margin: 0 0 12px;
  color: var(--text-muted);
}

.crm-link {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.crm-link a {
  color: #9fd0ff;
  text-decoration: none;
}

.crm-link a:hover {
  text-decoration: underline;
}

/* CRM Benefits block */
.crm-benefits {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crm-benefits-text {
  font-size: 0.89rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(96, 165, 250, 0.06);
  border: 1px solid rgba(96, 165, 250, 0.13);
}

/* ===== VIDEO PRODUCTION BLOCK ===== */
.videoprod-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 36px 32px;
}

/* Header */
.vp-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.vp-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(129,140,248,0.16), rgba(96,165,250,0.12));
  border: 1px solid rgba(129,140,248,0.30);
  color: var(--accent-indigo);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.vp-title {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  line-height: 1.3;
}

.vp-subtitle {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Platform Cards */
.vp-platforms {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.vp-platform-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 24px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  min-width: 160px;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.vp-platform-card:hover {
  border-color: rgba(129,140,248,0.35);
  transform: translateY(-2px);
}

.vp-platform-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,59,48,0.12);
  color: #ff6b6b;
}

.vp-platform-icon svg {
  width: 22px;
  height: 22px;
}

.vp-icon-dzen {
  background: rgba(255,204,0,0.12);
  color: #ffcc00;
}

.vp-icon-tiktok {
  background: rgba(0,242,234,0.10);
  color: #00f2ea;
}

.vp-platform-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.vp-platform-formats {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* Service Cards Grid */
.vp-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.vp-service-card {
  position: relative;
  padding: 22px 18px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.vp-service-card:hover {
  border-color: rgba(129,140,248,0.30);
  transform: translateY(-3px);
}

.vp-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
}

.vp-accent-commercial { background: linear-gradient(90deg, #60a5fa, #818cf8); }
.vp-accent-selling { background: linear-gradient(90deg, #f472b6, #fb923c); }
.vp-accent-info { background: linear-gradient(90deg, #34d399, #22d3ee); }
.vp-accent-shorts { background: linear-gradient(90deg, #a78bfa, #f472b6); }
.vp-accent-anim { background: linear-gradient(90deg, #fbbf24, #f97316); }

.vp-card-num {
  font-family: 'Archivo', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(129,140,248,0.50);
  letter-spacing: 0.1em;
}

.vp-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.vp-card-desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.vp-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}

.vp-tag {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  letter-spacing: 0.02em;
}

/* Pipeline */
.vp-pipeline {
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(129,140,248,0.06), rgba(34,211,238,0.04));
  border: 1px solid rgba(129,140,248,0.15);
}

.vp-pipeline-title {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
  text-align: center;
}

.vp-pipeline-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 80px;
}

.vp-step-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(129,140,248,0.10);
  border: 1px solid rgba(129,140,248,0.22);
  color: var(--accent-indigo);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.vp-step:hover .vp-step-icon {
  transform: scale(1.08);
  background: rgba(129,140,248,0.18);
}

.vp-step-icon svg {
  width: 20px;
  height: 20px;
}

.vp-step-final {
  background: rgba(52,211,153,0.12);
  border-color: rgba(52,211,153,0.28);
  color: var(--accent-green);
}

.vp-step-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
}

.vp-step-arrow {
  width: 28px;
  color: rgba(129,140,248,0.35);
  flex-shrink: 0;
  margin-bottom: 20px;
}

.vp-step-arrow svg {
  width: 100%;
  height: auto;
}

/* Advantage */
.vp-advantage {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(52,211,153,0.08), rgba(34,211,238,0.05));
  border: 1px solid rgba(52,211,153,0.20);
}

.vp-adv-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(52,211,153,0.14);
  color: var(--accent-green);
}

.vp-adv-icon svg {
  width: 18px;
  height: 18px;
}

.vp-adv-text {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.vp-adv-text strong {
  color: var(--text-primary);
}

/* Responsive — Video Production */
@media (max-width: 991px) {
  .videoprod-content {
    padding: 28px 22px;
    gap: 22px;
  }
  .vp-services-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .videoprod-content {
    padding: 22px 16px;
    gap: 18px;
  }
  .vp-platforms {
    flex-direction: column;
    align-items: stretch;
  }
  .vp-platform-card {
    flex-direction: row;
    min-width: 0;
    padding: 12px 16px;
    gap: 12px;
  }
  .vp-platform-card > span {
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .vp-services-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .vp-card-title {
    font-size: 1rem;
  }
  .vp-card-desc {
    font-size: 0.88rem;
  }
  .vp-tag {
    font-size: 0.72rem;
    padding: 4px 11px;
  }
  .vp-step-arrow {
    display: none;
  }
  .vp-pipeline {
    padding: 16px;
  }
  .vp-pipeline-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .vp-step {
    min-width: 0;
  }
  .vp-step-label {
    font-size: 0.76rem;
  }
}

@media (max-width: 480px) {
  .videoprod-content {
    padding: 18px 14px;
    gap: 16px;
  }
  .vp-platform-card {
    padding: 10px 14px;
    gap: 10px;
  }
  .vp-platform-name {
    font-size: 0.82rem;
  }
  .vp-platform-formats {
    font-size: 0.66rem;
  }
  .vp-pipeline {
    padding: 14px;
  }
  .vp-pipeline-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .vp-card-title {
    font-size: 0.95rem;
  }
  .vp-card-desc {
    font-size: 0.85rem;
  }
  .vp-subtitle {
    font-size: 0.88rem;
  }
}

@media (max-width: 375px) {
  .videoprod-content {
    padding: 16px 12px;
    gap: 14px;
  }
  .vp-services-grid {
    gap: 8px;
  }
  .vp-service-card {
    padding: 18px 14px 14px;
  }
  .vp-pipeline {
    padding: 12px;
  }
  .vp-pipeline-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .vp-advantage {
    padding: 14px 16px;
    gap: 12px;
  }
}

/* Banner link styles (kept for geo banner) */
.banner-link {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
}

.banner-image-wrapper {
  position: relative;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  aspect-ratio: 16 / 9;
}

.banner-image-wrapper picture {
  display: block;
  width: 100%;
  height: 100%;
}

.banner-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--transition-slow), filter var(--transition-slow);
}

.banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(5,10,22,0.08), rgba(5,10,22,0.48));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.banner-cta {
  min-width: 148px;
  padding: 12px 18px;
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
}

.banner-link:hover img {
  transform: scale(1.03);
  filter: saturate(1.05);
}

.banner-link:hover .banner-overlay {
  opacity: 1;
}

.reviews-shell {
  padding: 24px;
}

.reviews-frame-wrap {
  position: relative;
  width: 100%;
  min-height: 520px;
  height: clamp(520px, 68vh, 760px);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.reviews-frame {
  width: 100%;
  height: 100%;
  border: 0;
}

.reviews-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  padding: 0 20px;
  text-align: center;
  text-decoration: none;
  color: #b3b3b3;
  font-size: 10px;
  font-family: YS Text, sans-serif;
}

.card-ai-works .card-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ai-works-header {
  text-align: center;
}

.ai-works-title {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.video-slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}

.video-slider-track {
  display: flex;
  gap: 20px;
  transition: transform 0.3s ease;
  cursor: grab;
  width: 100%;
}

.video-slider-track:active {
  cursor: grabbing;
}

.video-slide {
  flex: 0 0 calc(25% - 15px);
  min-width: 0;
  background: #11141d;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.video-slide iframe {
  width: 100%;
  height: 315px;
  border: 0;
  display: block;
}

/* Карточка-кейс сайта в слайдере «Последние работы с ИИ» */
.site-case-card {
  display: flex;
  flex-direction: column;
  height: 315px;
  text-decoration: none;
  background: #11141d;
}

.site-case-card__head {
  display: block;
  padding: 10px 12px 8px;
}

.site-case-card__title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.site-case-card__subtitle {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--text-muted, #8b93a7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-case-card__media {
  display: block;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.site-case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.site-case-card:hover .site-case-card__media img {
  transform: scale(1.05);
}

.site-case-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: var(--gradient-primary, linear-gradient(135deg, #2f7cf6, #7b5cff));
}

.site-case-card__domain {
  opacity: 0.85;
  font-weight: 400;
}

.slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.slider-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  touch-action: manipulation;
}

.slider-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.15);
  transform: scale(1.1);
}

.slider-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.slider-btn svg {
  width: 22px;
  height: 22px;
}

.slider-dots {
  display: flex;
  gap: 8px;
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  min-width: 12px;
  min-height: 12px;
  touch-action: manipulation;
}

.slider-dot.active {
  background: var(--accent-blue);
  transform: scale(1.2);
}

.slider-dot:hover {
  background: rgba(255,255,255,0.5);
}

/* ── AI Works Conclusion ── */
.ai-works-conclusion {
  display: flex;
  gap: 32px;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(99,179,237,0.2);
  border-radius: 16px;
  padding: 28px 32px;
}

.ai-works-conclusion__text {
  flex: 1;
}

.ai-works-conclusion__summary {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.ai-works-conclusion__cta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.ai-works-conclusion__cta-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.ai-works-cta-btn {
  white-space: nowrap;
}

.fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  background: rgba(0,0,0,0.94);
  opacity: 0;
  visibility: hidden;
  overscroll-behavior: contain;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.fullscreen-overlay.active {
  opacity: 1;
  visibility: visible;
}

.fullscreen-overlay video {
  width: min(92vw, 500px);
  max-width: 100%;
  max-height: min(88vh, calc(100dvh - 120px));
  border-radius: 18px;
  background: #000;
  z-index: 1;
}

.close-btn {
  position: fixed;
  top: max(16px, calc(env(safe-area-inset-top) + 8px));
  right: max(12px, calc(env(safe-area-inset-right) + 8px));
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.close-btn:hover,
.close-btn:active {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.close-btn svg {
  width: 28px;
  height: 28px;
  pointer-events: none;
}

.close-btn::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: transparent;
  z-index: -1;
}

.swipe-indicator {
  display: none;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  z-index: 10001;
}

@media (max-width: 768px) {
  .swipe-indicator {
    display: block;
    top: max(52px, calc(env(safe-area-inset-top) + 28px));
  }

  .close-btn {
    top: max(50px, calc(env(safe-area-inset-top) + 18px));
    right: max(12px, calc(env(safe-area-inset-right) + 8px));
    width: 48px;
    height: 48px;
  }

  .close-btn svg {
    width: 24px;
    height: 24px;
  }
}

.buffering-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0,0,0,0.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 2;
}

.buffering-overlay.visible {
  opacity: 1;
}

.spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.buffering-text {
  color: #fff;
  font-size: 0.95rem;
}

.fs-buffer-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255,255,255,0.14);
  z-index: 3;
}

.fs-buffer-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
  transition: width 0.2s linear;
}

.fs-buffer-fill.complete {
  background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan));
}

.va-pf-pro {
  position: relative;
  overflow: hidden;
  padding: 34px 28px 28px;
  color: var(--text-primary);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.05), transparent 26%),
    radial-gradient(circle at bottom left, rgba(96,165,250,0.10), transparent 28%),
    linear-gradient(180deg, rgba(7,10,18,0.92) 0%, rgba(10,14,24,0.86) 100%);
}

.va-pf-pro__noise {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: .10;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, #000 35%, transparent 90%);
}

.va-pf-pro__wrap {
  position: relative;
  z-index: 1;
}

.va-pf-pro__head {
  max-width: 100%;
  margin-bottom: 24px;
  text-align: left;
}

.va-pf-pro__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  margin-bottom: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.84);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.va-pf-pro__title {
  margin: 0 0 14px;
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.va-pf-pro__desc {
  margin: 0;
  max-width: 78ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.va-pf-pro__desc--wide {
  max-width: 100%;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.72;
}

.va-pf-pro__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.va-pf-pro__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.025) 100%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
  backdrop-filter: blur(14px);
  animation: cardReveal 0.6s ease both;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.va-pf-pro__card:hover {
  transform: translateY(-4px);
  border-color: rgba(96,165,250,0.34);
  box-shadow: 0 22px 44px rgba(37,99,235,0.14);
}

.va-pf-pro__top {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin-bottom: 16px;
}

.va-pf-pro__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 16px;
  border: 1px solid rgba(96,165,250,0.18);
  background: linear-gradient(180deg, rgba(96,165,250,0.12), rgba(96,165,250,0.05));
}

.va-pf-pro__icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.va-pf-pro__meta {
  min-width: 0;
}

.va-pf-pro__name {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-primary);
  word-break: break-word;
}

.va-pf-pro__domain {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted);
  word-break: break-all;
}

.va-pf-pro__line {
  width: 100%;
  height: 1px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
}

.va-pf-pro__text {
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: 0.94rem;
}

/* Выделенная ссылка-фича для спецпроектов (UZTPA и др.) */
.va-pf-pro__feature-link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(234,179,8,0.14), rgba(249,115,22,0.10));
  border: 1px solid rgba(234,179,8,0.45);
  color: #fbbf24;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.22s, border-color 0.22s, box-shadow 0.22s, color 0.22s;
  box-shadow: 0 0 14px rgba(234,179,8,0.12);
  position: relative;
  overflow: hidden;
}

.va-pf-pro__feature-link::before {
  content: '';
  position: absolute;
  top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: featureLinkShimmer 2.8s ease-in-out infinite;
}

.va-pf-pro__feature-link:hover {
  background: linear-gradient(135deg, rgba(234,179,8,0.24), rgba(249,115,22,0.18));
  border-color: rgba(251,191,36,0.75);
  box-shadow: 0 0 22px rgba(234,179,8,0.28);
  color: #fde68a;
}

@keyframes featureLinkShimmer {
  0%   { left: -60%; }
  60%, 100% { left: 120%; }
}

.va-pf-pro__bottom {
  margin-top: auto;
}

.va-pf-pro__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  text-decoration: none;
  color: #0b0b0b;
  background: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(255,255,255,0.12);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.va-pf-pro__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(255,255,255,0.18);
}

.va-pf-pro__empty {
  padding: 24px;
  text-align: center;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.20);
  color: var(--text-muted);
  background: rgba(255,255,255,.03);
}

.bottom-row {
  display: grid;
  grid-template-columns: 67% 33%;
  gap: 22px;
  margin-top: 22px;
  align-items: stretch;
}

.bottom-row .card-reviews,
.bottom-row .card-ai {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
}

.bottom-row .card-ai {
  max-width: 100%;
}

@media (max-width: 991px) {
  .bottom-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .bottom-row .card-reviews,
  .bottom-row .card-ai {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .bottom-row {
    gap: 14px;
    margin-top: 14px;
  }
}

.card-ai {
  max-width: 100%;
}

.ai-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ai-header {
  text-align: center;
}

.ai-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 14px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(129,140,248,0.15));
  border: 1px solid rgba(96,165,250,0.3);
  color: var(--accent-blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ai-title {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.ai-tools {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: rgba(0,0,0,0.2);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
}

.ai-category {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.ai-label {
  color: var(--accent-cyan);
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.ai-items {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.ai-divider {
  width: 60%;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.4), transparent);
}

.ai-manifesto {
  text-align: center;
  padding: 10px 0;
}

.ai-quote {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--text-muted);
  font-style: italic;
}

.ai-quote--accent {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  font-style: normal;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ai-result {
  margin: 16px 0 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.ai-result strong {
  color: var(--accent-green);
  font-weight: 700;
}

@media (max-width: 1279px) {
  .premium-container {
    padding: 22px;
  }

  .smart-grid {
    grid-template-areas:
      "heading heading heading heading heading heading heading heading video video video video"
      "contact contact contact contact contact contact contact contact contact contact contact contact"
      "manifest manifest manifest manifest manifest manifest manifest manifest manifest manifest manifest manifest"
      "info info info info info info android android android android android android"
      "geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps"
      "videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod"
      "ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works"
      "tools tools tools tools tools tools tools tools tools tools tools tools"
      "lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet"
      "portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio"
      "geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment"
      "static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews"
      "faq faq faq faq faq faq faq faq faq faq faq faq"
      "audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews";
  }

  .card-heading,
  .card-contact,
  .card-video,
  .card-info,
  .card-videoprod,
  .card-android {
    min-height: 320px;
  }

  .va-pf-pro__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .video-slide {
    flex: 0 0 calc(50% - 10px);
  }

  .video-slide iframe {
    height: 280px;
  }

  .site-case-card {
    height: 280px;
  }
}

@media (max-width: 991px) {
  .premium-container {
    padding: 18px;
  }

  .smart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "heading video"
      "contact contact"
      "manifest manifest"
      "info android"
      "geo-steps geo-steps"
      "videoprod videoprod"
      "ai-works ai-works"
      "portfolio portfolio";
    gap: 18px;
  }

  .card-contact .card-content.contact-layout {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 24px;
  }

  .card-heading,
  .card-contact,
  .card-video,
  .card-info,
  .card-videoprod,
  .card-android,
  .card-portfolio {
    min-height: auto;
  }

  .card-reviews {
    margin-top: 18px;
  }

  .va-pf-pro {
    padding: 28px 22px 22px;
  }

  .va-pf-pro__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reviews-frame-wrap {
    min-height: 460px;
    height: 60vh;
  }
}

@media (max-width: 767px) {
  .premium-container {
    padding: 14px;
  }

  .card-contact .card-content.contact-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }

  .contact-col-left .contact-phone {
    font-size: clamp(1.6rem, 7vw, 2rem);
  }

  .smart-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "contact"
      "manifest"
      "video"
      "info"
      "android"
      "geo-steps"
      "videoprod"
      "ai-works"
      "portfolio";
    gap: 14px;
  }

  .premium-card,
  .card-heading,
  .card-contact,
  .card-video,
  .card-info,
  .card-videoprod,
  .card-android,
  .card-portfolio,
  .card-reviews,
  .va-pf-pro,
  .va-pf-pro__wrap,
  .va-pf-pro__grid,
  .va-pf-pro__card {
    width: 100%;
    max-width: 100%;
  }

  .card-content,
  .reviews-shell {
    padding: 18px;
  }

  .status-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .heading-wrapper h1 {
    font-size: 1.55rem;
  }

  .name {
    font-size: 1.4rem;
  }

  .contact-phone {
    font-size: clamp(1.3rem, 5vw, 1.6rem);
  }

  .cta-btn {
    min-height: 52px;
    padding: 13px 16px;
  }

  .video-wrapper video {
    min-height: 300px;
  }

  .play-btn {
    width: 68px;
    height: 68px;
  }

  .banner-image-wrapper {
    min-height: 190px;
  }

  .va-pf-pro {
    padding: 24px 18px 18px;
  }

  .va-pf-pro__head {
    margin-bottom: 18px;
  }

  .va-pf-pro__eyebrow {
    margin-bottom: 12px;
    min-height: 30px;
    font-size: 11px;
  }

  .va-pf-pro__title {
    font-size: 1.85rem;
    margin-bottom: 12px;
  }

  .va-pf-pro__desc {
    font-size: 0.95rem;
  }

  .va-pf-pro__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .va-pf-pro__card {
    padding: 16px;
  }

  .card-reviews {
    margin-top: 14px;
  }

  .reviews-frame-wrap {
    min-height: 420px;
    height: 68vh;
  }

  .video-slide {
    flex: 0 0 100%;
    padding-right: 16px;
  }

  .video-slide:last-child {
    padding-right: 0;
  }

  .video-slider-track {
    gap: 0;
  }

  .video-slide iframe {
    height: 250px;
  }

  .site-case-card {
    height: 250px;
  }

  .slider-nav {
    gap: 12px;
  }

  .slider-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .slider-btn svg {
    width: 20px;
    height: 20px;
  }

  .slider-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
  }
}

@media (max-width: 420px) {
  .premium-container {
    padding: 12px;
  }

  .card-content,
  .reviews-shell {
    padding: 16px;
  }

  .heading-wrapper h1 {
    font-size: 1.4rem;
  }

  .specialty,
  .info-body p,
  .va-pf-pro__desc {
    font-size: 0.92rem;
  }

  .banner-image-wrapper {
    min-height: 170px;
  }

  .reviews-frame-wrap {
    min-height: 380px;
    height: 64vh;
  }

  .close-btn {
    width: 44px;
    height: 44px;
  }

  .close-btn svg {
    width: 22px;
    height: 22px;
  }

  .video-slide iframe {
    height: 240px;
  }

  .site-case-card {
    height: 240px;
  }

  .contact-phone,
  .ai-items {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .slider-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}

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

/* ===== RESUME PRO BLOCK ===== */
.card-resume {
  grid-area: resume;
  min-height: auto;
}

.resume-wrapper {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px;
}

/* Header with scramble effect */
.resume-header {
  text-align: center;
  position: relative;
}

.resume-badge-wrapper {
  position: relative;
  display: inline-flex;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(96,165,250,0.5), rgba(129,140,248,0.5), rgba(34,211,238,0.5));
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.resume-badge-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shine 2s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.resume-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(11, 16, 32, 0.9);
  color: var(--accent-cyan);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.resume-title {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin: 0 0 8px;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  min-height: 1.2em;
}

.scramble-char {
  color: var(--accent-cyan);
  -webkit-text-fill-color: var(--accent-cyan);
}

.resume-subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  margin: 0 0 16px;
  font-weight: 500;
  min-height: 1.4em;
}

.resume-tagline {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.2);
}

.tagline-decode {
  color: var(--accent-blue);
  font-size: 0.95rem;
  font-weight: 600;
}

/* Timeline */
.resume-timeline {
  padding: 20px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.timeline-track {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  min-width: 600px;
  position: relative;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.timeline-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-item.highlight .timeline-year {
  color: var(--accent-cyan);
  font-weight: 700;
}

.timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo));
  box-shadow: 0 0 20px rgba(96, 165, 250, 0.4);
  position: relative;
}

.timeline-dot.pulse {
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

.timeline-connector {
  flex: 0 0 80px;
  height: 2px;
  opacity: 0.6;
}

.timeline-connector svg {
  width: 100%;
  height: 100%;
}

.timeline-content {
  text-align: center;
}

.timeline-year {
  font-family: 'Archivo', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.timeline-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.timeline-detail {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Tabs */
.resume-tabs-container {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 24px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.resume-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  position: relative;
}

.resume-tab {
  position: relative;
  flex: 1;
  min-width: 120px;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.resume-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(96, 165, 250, 0.3);
  transform: translateY(-2px);
}

.resume-tab.active {
  background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(129,140,248,0.1));
  border-color: rgba(96, 165, 250, 0.5);
  color: var(--text-primary);
  box-shadow: 0 8px 32px rgba(96, 165, 250, 0.2);
}

.tab-icon {
  font-size: 1.1em;
  opacity: 0.8;
}

.resume-tab.active .tab-icon {
  opacity: 1;
  color: var(--accent-cyan);
}

.tab-glow {
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
  opacity: 0;
  z-index: -1;
  filter: blur(12px);
  transition: opacity 0.3s ease;
}

.resume-tab.active .tab-glow {
  opacity: 0.4;
}

/* Panels */
.resume-panels {
  position: relative;
  min-height: 300px;
}

.resume-panel {
  display: none;
  animation: fadeIn 0.4s ease;
}

.resume-panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-title {
  font-family: 'Archivo', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.panel-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* Skills Grid */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.skills-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.skill-card {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
}

.skill-card:hover {
  transform: translateY(-4px);
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15);
}

.skill-glow {
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
  opacity: 0;
  z-index: -1;
  filter: blur(16px);
  transition: opacity 0.3s ease;
}

.skill-card:hover .skill-glow {
  opacity: 0.3;
}

.skill-glow.ai-glow {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
}

.skill-icon {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: var(--accent-blue);
}

.skill-card h4 {
  font-family: 'Archivo', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.skill-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 12px;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-tags span {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.1);
  color: var(--accent-blue);
  font-weight: 600;
}

/* Skill Items (compact mode) */
.skill-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s ease;
}

.skill-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.skill-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
  color: #000;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.skill-content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.skill-content p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* Management Features */
.management-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mgmt-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
}

.mgmt-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(96, 165, 250, 0.2);
  transform: translateX(4px);
}

.mgmt-icon {
  font-size: 1.5rem;
  color: var(--accent-indigo);
  line-height: 1;
}

.mgmt-text h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.mgmt-text p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* Metrics */
.resume-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.metric-card {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-4px);
}

.metric-card.wide {
  grid-column: span 1;
}

.metric-value {
  font-family: 'Archivo', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-cyan);
  line-height: 1;
  margin-bottom: 8px;
}

.metric-value.text {
  font-size: 1.5rem;
}

.highlight-text {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 12px;
}

.metric-description {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.metric-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.metric-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
  transition: width 1.5s ease;
}

.metric-card.counted .metric-fill {
  width: var(--width);
}

/* Marquee */
.resume-marquee {
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.marquee-content {
  display: flex;
  animation: marquee 20s linear infinite;
  white-space: nowrap;
}

.marquee-content:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-content span {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.marquee-content .separator {
  color: var(--accent-blue);
  opacity: 0.5;
}

/* Value Proposition */
.resume-value-prop {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(96,165,250,0.1), rgba(34,211,238,0.05));
  border: 1px solid rgba(96, 165, 250, 0.2);
}

.value-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 24px rgba(96, 165, 250, 0.3);
}

.value-icon svg {
  width: 24px;
  height: 24px;
}

.value-content h4 {
  font-family: 'Archivo', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.value-content p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Responsive for Resume Block */
@media (max-width: 991px) {
  .resume-wrapper {
    padding: 24px;
    gap: 24px;
  }

  .resume-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .metric-card.wide {
    grid-column: span 2;
  }

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

  .timeline-track {
    min-width: 100%;
    padding: 0 20px;
  }
}

@media (max-width: 767px) {
  .resume-tabs {
    flex-direction: column;
  }

  .resume-tab {
    min-width: 100%;
  }

  .resume-metrics {
    grid-template-columns: 1fr;
  }

  .metric-card.wide {
    grid-column: span 1;
  }

  .resume-value-prop {
    flex-direction: column;
    text-align: center;
  }

  .timeline-track {
    flex-direction: column;
    align-items: center;
    min-width: auto;
    gap: 24px;
  }

  .timeline-connector {
    display: none;
  }

  .timeline-item {
    width: 100%;
    max-width: 280px;
  }
}

/* Update Grid Areas for Resume + Android */
@media (min-width: 1280px) {
  .smart-grid {
    grid-template-areas:
      "heading heading heading heading heading heading heading heading video video video video"
      "contact contact contact contact contact contact contact contact contact contact contact contact"
      "manifest manifest manifest manifest manifest manifest manifest manifest manifest manifest manifest manifest"
      "info info info info info info android android android android android android"
      "geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps"
      "videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod"
      "resume resume resume resume resume resume resume resume resume resume resume resume"
      "ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works"
      "tools tools tools tools tools tools tools tools tools tools tools tools"
      "lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet"
      "portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio"
      "geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment"
      "static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews"
      "faq faq faq faq faq faq faq faq faq faq faq faq"
      "audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews";
  }
}

@media (max-width: 1279px) and (min-width: 992px) {
  .smart-grid {
    grid-template-areas:
      "heading heading heading heading heading heading heading heading video video video video"
      "contact contact contact contact contact contact contact contact contact contact contact contact"
      "manifest manifest manifest manifest manifest manifest manifest manifest manifest manifest manifest manifest"
      "info info info info info info android android android android android android"
      "geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps geo-steps"
      "videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod videoprod"
      "resume resume resume resume resume resume resume resume resume resume resume resume"
      "ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works ai-works"
      "tools tools tools tools tools tools tools tools tools tools tools tools"
      "lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet lead-magnet"
      "portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio portfolio"
      "geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment geo-experiment"
      "static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews static-reviews"
      "faq faq faq faq faq faq faq faq faq faq faq faq"
      "audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews audio-reviews";
  }
}

@media (max-width: 991px) {
  .smart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "heading video"
      "contact contact"
      "manifest manifest"
      "info android"
      "geo-steps geo-steps"
      "videoprod videoprod"
      "resume resume"
      "ai-works ai-works"
      "tools tools"
      "lead-magnet lead-magnet"
      "portfolio portfolio"
      "geo-experiment geo-experiment"
      "static-reviews static-reviews"
      "faq faq"
      "audio-reviews audio-reviews";
  }
}

@media (max-width: 767px) {
  .smart-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "video"
      "contact"
      "manifest"
      "info"
      "android"
      "geo-steps"
      "videoprod"
      "resume"
      "ai-works"
      "tools"
      "lead-magnet"
      "portfolio"
      "geo-experiment"
      "static-reviews"
      "faq"
      "audio-reviews";
  }
}


/* ===== RESUME PRO BLOCK: CONTENT UPGRADE ===== */
.timeline-track--wide {
  min-width: 1080px;
}

.resume-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.95fr);
  gap: 18px;
}

.resume-spotlight,
.resume-mini-card,
.exp-card,
.skill-column,
.profile-card,
.resume-tag-cloud-panel,
.career-card {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

.resume-spotlight {
  padding: 24px;
}

.resume-section-label,
.profile-card__label,
.mini-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,0.22);
  background: rgba(96,165,250,0.08);
  color: var(--accent-cyan);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resume-spotlight h3 {
  margin: 16px 0 12px;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.18;
  color: var(--text-primary);
}

.resume-spotlight p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text-secondary);
}

.resume-fact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.resume-fact {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(129,140,248,0.1);
  border: 1px solid rgba(129,140,248,0.18);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
}

.resume-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.resume-mini-card {
  padding: 18px;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.resume-mini-card:hover,
.exp-card:hover,
.skill-column:hover,
.profile-card:hover,
.resume-tag-cloud-panel:hover,
.career-card:hover {
  transform: translateY(-4px);
  border-color: rgba(96,165,250,0.3);
  box-shadow: 0 16px 42px rgba(37,99,235,0.14);
}

.resume-mini-card strong {
  display: block;
  margin-top: 12px;
  color: var(--text-primary);
  font-family: 'Archivo', sans-serif;
  font-size: 1.05rem;
  line-height: 1.25;
}

.resume-mini-card p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.86rem;
}

/* Spotlight: expertise + training blocks */
.spotlight-expertise {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(96, 165, 250, 0.07);
  border: 1px solid rgba(96, 165, 250, 0.15);
}

.spotlight-expertise-text {
  font-size: 0.93rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

.spotlight-expertise-text strong {
  color: var(--text-primary);
}

.spotlight-training {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.09) 0%, rgba(34, 211, 238, 0.07) 100%);
  border: 1px solid rgba(52, 211, 153, 0.20);
}

.spotlight-training-icon {
  color: var(--accent-green);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.spotlight-training-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.spotlight-training-body strong {
  font-family: 'Archivo', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.spotlight-training-body p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* 5th mini-card: advantage */
.resume-mini-card--advantage {
  background:
    radial-gradient(circle at top right, rgba(129, 140, 248, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  border-color: rgba(129, 140, 248, 0.22) !important;
}

.resume-mini-card--advantage .mini-label {
  border-color: rgba(129, 140, 248, 0.28);
  background: rgba(129, 140, 248, 0.10);
  color: var(--accent-indigo);
}

.resume-mini-card--salary {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at top right, rgba(34,211,238,0.16), transparent 32%),
    radial-gradient(circle at bottom left, rgba(96,165,250,0.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
}

.salary-main {
  font-size: clamp(1.6rem, 2.8vw, 2.3rem) !important;
  line-height: 1.05;
  letter-spacing: -0.03em;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.salary-sub {
  font-size: 1rem !important;
  color: var(--text-secondary) !important;
}

.salary-sub b {
  color: var(--text-primary);
}

.career-showcase {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-header--career {
  margin-bottom: 0;
}

.career-slider {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 4px 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.career-slider::before,
.career-slider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.career-slider::before {
  left: 0;
  background: linear-gradient(90deg, rgba(5,7,13,0.92), rgba(5,7,13,0));
}

.career-slider::after {
  right: 0;
  background: linear-gradient(270deg, rgba(5,7,13,0.92), rgba(5,7,13,0));
}

.career-track {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.career-card {
  width: 320px;
  max-width: calc(100vw - 96px);
  padding: 20px;
  flex: 0 0 auto;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.career-card--featured {
  background: linear-gradient(180deg, rgba(96,165,250,0.12) 0%, rgba(255,255,255,0.03) 100%);
}

.career-card--future {
  background: linear-gradient(180deg, rgba(34,211,238,0.12) 0%, rgba(255,255,255,0.03) 100%);
}

.career-card__year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--accent-cyan);
  font-family: 'Archivo', sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.career-card h4,
.exp-head h4,
.skill-column h4,
.profile-card h4 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  color: var(--text-primary);
  font-size: 1.02rem;
  line-height: 1.3;
}

.career-card__role,
.exp-role {
  margin: 6px 0 0;
  color: var(--accent-cyan);
  font-size: 0.85rem;
  font-weight: 600;
}

.career-card__note,
.exp-note,
.profile-list,
.value-list {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.62;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.resume-experience-grid,
.resume-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.exp-card,
.profile-card,
.skill-column,
.resume-tag-cloud-panel {
  padding: 20px;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.exp-card.featured {
  background: linear-gradient(180deg, rgba(96,165,250,0.10) 0%, rgba(255,255,255,0.03) 100%);
}

.exp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.exp-period {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
}

.resume-skill-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.skill-column h4 {
  margin-bottom: 14px;
}

.chip-cloud,
.dynamic-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip-cloud span,
.dynamic-tag {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
}

.chip-cloud span {
  background: rgba(34,211,238,0.08);
  border: 1px solid rgba(34,211,238,0.16);
}

.resume-tag-cloud-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.resume-tag-cloud-panel .panel-header {
  margin-bottom: 0;
}

.dynamic-tag {
  background: rgba(129,140,248,0.12);
  border: 1px solid rgba(129,140,248,0.18);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  animation: tagFadeIn 0.45s ease both;
  animation-delay: var(--tag-delay, 0s);
}

.dynamic-tag:hover {
  transform: translateY(-2px);
  border-color: rgba(96,165,250,0.36);
  background: rgba(96,165,250,0.14);
  box-shadow: 0 10px 24px rgba(37,99,235,0.14);
}

.dynamic-tag--loading,
.tag-cloud-error {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
}

@keyframes tagFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.profile-card__label {
  margin-bottom: 14px;
}

.profile-card h4 {
  margin-bottom: 12px;
}

.profile-list,
.value-list {
  padding-left: 18px;
}

.profile-list li + li,
.value-list li + li {
  margin-top: 8px;
}

.resume-metrics--expanded {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.resume-value-prop--detailed {
  align-items: flex-start;
}

@media (max-width: 991px) {
  .resume-top-grid,
  .resume-skill-columns,
  .resume-experience-grid,
  .resume-profile-grid {
    grid-template-columns: 1fr;
  }

  .resume-mini-grid,
  .resume-metrics--expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .career-card {
    width: 300px;
  }
}

@media (max-width: 767px) {
  .resume-mini-grid,
  .resume-metrics--expanded {
    grid-template-columns: 1fr;
  }

  .resume-spotlight,
  .resume-mini-card,
  .exp-card,
  .skill-column,
  .profile-card,
  .resume-tag-cloud-panel,
  .career-card {
    padding: 18px;
  }

  .exp-head {
    flex-direction: column;
  }

  .resume-fact-list,
  .chip-cloud,
  .dynamic-tag-cloud {
    gap: 8px;
  }

  .resume-fact,
  .chip-cloud span,
  .dynamic-tag {
    min-height: 34px;
    font-size: 0.8rem;
  }

  .career-card {
    width: min(280px, calc(100vw - 72px));
  }

  .career-slider::before,
  .career-slider::after {
    width: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .career-track {
    transform: none !important;
  }
}

/* ===== TOOLS BLOCK ===== */
.card-tools__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tools-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tools-badge {
  align-self: flex-start;
  margin: 0;
  background: rgba(96,165,250,0.10);
  border-color: rgba(96,165,250,0.25);
  color: var(--accent-blue);
}

.tools-title {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0;
}

.tools-subtitle {
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 70ch;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.tools-category {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.tools-cat-title {
  font-family: 'Archivo', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tools-cat-icon {
  color: var(--accent-blue);
}

.tools-items {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tool-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: 'Space Grotesk', sans-serif;
  background: rgba(96,165,250,0.10);
  border: 1px solid rgba(96,165,250,0.18);
  color: var(--text-secondary);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  cursor: default;
}

.tool-chip:hover {
  background: rgba(96,165,250,0.18);
  border-color: rgba(96,165,250,0.38);
  color: var(--text-primary);
}

.tool-chip--ai {
  background: rgba(52,211,153,0.09);
  border-color: rgba(52,211,153,0.20);
}

.tool-chip--ai:hover {
  background: rgba(52,211,153,0.18);
  border-color: rgba(52,211,153,0.38);
}

.tool-chip--video {
  background: rgba(129,140,248,0.10);
  border-color: rgba(129,140,248,0.22);
}

.tool-chip--video:hover {
  background: rgba(129,140,248,0.20);
  border-color: rgba(129,140,248,0.40);
}

.tool-chip--dev {
  background: rgba(34,211,238,0.09);
  border-color: rgba(34,211,238,0.20);
}

.tool-chip--dev:hover {
  background: rgba(34,211,238,0.18);
  border-color: rgba(34,211,238,0.38);
}

@media (max-width: 991px) {
  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== FLOATING BUTTONS: Telegram + MAX + Status ===== */
.float-buttons {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* Статус "Я Online" */
.float-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(11, 16, 32, 0.85);
  border: 1px solid rgba(52, 211, 153, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: statusPulse 3s ease-in-out infinite;
}

.float-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.60);
  animation: dotBlink 2s ease-in-out infinite;
}

.float-status-text {
  font-size: 0.72rem;
  font-weight: 700;
  color: #34d399;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@keyframes dotBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(52,211,153,0.60); }
  50% { opacity: 0.5; box-shadow: 0 0 4px rgba(52,211,153,0.30); }
}

@keyframes statusPulse {
  0%, 100% { border-color: rgba(52, 211, 153, 0.25); }
  50% { border-color: rgba(52, 211, 153, 0.45); }
}

/* Кнопки Telegram и MAX */
.float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.float-btn:hover {
  transform: translateY(-3px) scale(1.08);
}

.float-btn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Telegram */
.float-btn--tg {
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
  box-shadow: 0 8px 28px rgba(42, 171, 238, 0.40);
}

.float-btn--tg:hover {
  box-shadow: 0 12px 36px rgba(42, 171, 238, 0.55);
}

/* MAX */
.float-btn--max {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.40);
}

.float-btn--max:hover {
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.55);
}

/* Мобильная адаптация */
@media (max-width: 580px) {
  .float-buttons {
    bottom: 18px;
    right: 14px;
    gap: 10px;
  }
  .float-btn {
    width: 46px;
    height: 46px;
  }
  .float-btn-icon {
    width: 21px;
    height: 21px;
  }
  .float-status {
    padding: 5px 11px;
  }
  .float-status-text {
    font-size: 0.66rem;
  }
  .float-status-dot {
    width: 7px;
    height: 7px;
  }
}

@media (max-width: 375px) {
  .float-buttons {
    bottom: 14px;
    right: 10px;
    gap: 8px;
  }
  .float-btn {
    width: 42px;
    height: 42px;
  }
  .float-btn-icon {
    width: 19px;
    height: 19px;
  }
  .float-status-text {
    display: none;
  }
  .float-status {
    padding: 5px 8px;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .float-status-dot {
    width: 8px;
    height: 8px;
  }
}

@media (max-width: 340px) {
  .float-buttons {
    bottom: 12px;
    right: 8px;
    gap: 6px;
  }
  .float-btn {
    width: 38px;
    height: 38px;
  }
  .float-btn-icon {
    width: 17px;
    height: 17px;
  }
  .float-status {
    width: 24px;
    height: 24px;
  }
  .float-status-dot {
    width: 7px;
    height: 7px;
  }
}

/* ===== BURGER NAVIGATION ===== */
.burger-nav {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.burger-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(11,16,32,0.88);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  padding: 0;
  transition: background 0.22s, border-color 0.22s, transform 0.22s;
}

.burger-toggle:hover {
  background: rgba(37,99,235,0.25);
  border-color: rgba(96,165,250,0.40);
  transform: scale(1.05);
}

.burger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: #f8fbff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}

.burger-toggle.is-active .burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger-toggle.is-active .burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.burger-toggle.is-active .burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.burger-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: min(280px, 85vw);
  height: 100vh;
  background: rgba(8,13,24,0.97);
  border-left: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 80px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateX(110%);
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
  z-index: 999;
  overflow-y: auto;
}

.burger-menu.is-open {
  transform: translateX(0);
}

.burger-menu-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.burger-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.burger-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-family: 'Archivo', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.18s, color 0.18s;
}

.burger-link:hover {
  background: rgba(96,165,250,0.10);
  color: var(--text-primary);
}

.burger-link-icon {
  color: var(--accent-blue);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.burger-cta {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 20px;
  padding: 12px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37,99,235,0.30), rgba(96,165,250,0.20));
  border: 1px solid rgba(96,165,250,0.30);
  color: var(--accent-blue);
  text-decoration: none;
  font-family: 'Archivo', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}

.burger-cta:hover {
  background: linear-gradient(135deg, rgba(37,99,235,0.50), rgba(96,165,250,0.35));
  color: #fff;
}

.burger-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease;
}

.burger-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

@media (max-width: 767px) {
  .ai-works-conclusion {
    flex-direction: column;
    padding: 22px 18px;
    gap: 20px;
  }
  .ai-works-conclusion__cta {
    width: 100%;
  }
  .ai-works-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════
   SLOT TIMER — Обратный отсчёт
══════════════════════════════════════════ */
.slot-timer-block {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(16,185,129,0.08));
  border: 1px solid rgba(96,165,250,0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slot-timer-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slot-timer-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 6px var(--accent-green);
  animation: pulse-dot 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.slot-timer-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.slot-timer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
}

.timer-num {
  font-family: 'Archivo', monospace;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.timer-sub {
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.timer-sep {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent-blue);
  opacity: 0.5;
  margin-bottom: 12px;
  line-height: 1;
}

/* ══════════════════════════════════════════
   TAX INFO BLOCK — Самозанятый
══════════════════════════════════════════ */
.tax-info-block {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tax-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tax-icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.tax-label {
  margin: 0 0 3px;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.tax-org {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.tax-entities {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.55;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* ══════════════════════════════════════════
   CRM DEMO BLOCK
══════════════════════════════════════════ */
.crm-demo-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(16,185,129,0.07);
  border: 1px solid rgba(16,185,129,0.2);
}

.crm-demo-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-demo-icon {
  width: 16px;
  height: 16px;
  color: var(--accent-green);
  flex-shrink: 0;
}

.crm-demo-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-green);
}

.crm-demo-creds {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.crm-demo-link {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-green);
  text-decoration: none;
  transition: opacity 0.2s;
}

.crm-demo-link:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* ══════════════════════════════════════════
   SALARY METHODS
══════════════════════════════════════════ */
.salary-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.salary-method-chip {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ══════════════════════════════════════════
   LEAD MAGNET BLOCK
══════════════════════════════════════════ */
.card-lead-magnet__content {
  padding: 36px 40px;
}

.lm-inner {
  display: flex;
  gap: 48px;
  align-items: center;
}

.lm-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lm-badge {
  background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(16,185,129,0.08));
  border: 1px solid rgba(16,185,129,0.35);
  color: var(--accent-green);
  align-self: flex-start;
}

.lm-title {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.lm-desc {
  margin: 0;
  font-size: 0.97rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.lm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lm-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.lm-icon {
  color: var(--accent-green);
  flex-shrink: 0;
  margin-top: 1px;
}

.lm-cta-wrap {
  flex: 0 0 280px;
}

.lm-cta-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.lm-cta-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lm-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.lm-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.lm-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.lm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #16a34a);
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
  width: 100%;
}

.lm-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.lm-disclaimer {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

@media (max-width: 1100px) {
  .lm-inner {
    gap: 32px;
  }
  .lm-cta-wrap {
    flex: 0 0 240px;
  }
}

@media (max-width: 767px) {
  .card-lead-magnet__content {
    padding: 24px 18px;
  }
  .lm-inner {
    flex-direction: column;
    gap: 24px;
  }
  .lm-cta-wrap {
    flex: none;
    width: 100%;
  }
}

/* ── SEO: h1 subtitle keyword styling ──────────────────────────────────── */
.h1-subtitle {
  font-size: 0.62em;
  font-weight: 500;
  opacity: 0.72;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .h1-subtitle {
    display: block;
    font-size: 0.55em;
    margin-top: 2px;
  }
}

/* ── SEO: prevent CLS on images with explicit aspect ratio ─────────────── */
.avatar-circle-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* banner img styles moved to main section above */

/* ═══════════════════════════════════════════════════
   БЛОК АУДИО ОТЗЫВОВ — Отзывы реальных клиентов
   ═══════════════════════════════════════════════════ */

.audio-reviews-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}

.audio-reviews-title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  margin: 6px 0 0;
  line-height: 1.2;
}

.audio-reviews-subtitle {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0;
}

/* Loading state */
.audio-reviews-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 20px 0;
}

.audio-reviews-loading-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-blue);
  animation: arDotPulse 1s ease-in-out infinite;
}

@keyframes arDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* 4-column grid */
.audio-reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Audio Review Card */
.ar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
  background: linear-gradient(160deg, rgba(96,165,250,0.06) 0%, rgba(129,140,248,0.04) 100%);
  transition: border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
  overflow: hidden;
  text-align: center;
}

.ar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.ar-card:hover::before,
.ar-card.is-playing::before {
  opacity: 1;
}

.ar-card:hover {
  border-color: var(--border-card-hover);
  transform: translateY(-3px);
  background: linear-gradient(160deg, rgba(96,165,250,0.10) 0%, rgba(129,140,248,0.07) 100%);
}

.ar-card.is-playing {
  border-color: var(--accent-blue);
  background: linear-gradient(160deg, rgba(96,165,250,0.14) 0%, rgba(129,140,248,0.10) 100%);
  box-shadow: 0 0 24px rgba(96,165,250,0.18);
}

/* Card icon */
.ar-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(96,165,250,0.18) 0%, rgba(129,140,248,0.12) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ar-card__icon svg {
  width: 22px;
  height: 22px;
  color: var(--accent-blue);
}

.ar-card.is-playing .ar-card__icon {
  background: linear-gradient(135deg, rgba(96,165,250,0.32) 0%, rgba(129,140,248,0.22) 100%);
  animation: arIconPulse 1.8s ease-in-out infinite;
}

@keyframes arIconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96,165,250,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(96,165,250,0); }
}

/* Card info */
.ar-card__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.ar-card__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
  word-break: break-word;
}

.ar-card__format {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Progress bar */
.ar-card__progress-wrap {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.ar-card__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-indigo));
  border-radius: 2px;
  transition: width 0.25s linear;
}

/* Controls */
.ar-card__controls {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.ar-play-btn,
.ar-stop-btn {
  flex: 1;
  padding: 8px 6px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
  line-height: 1;
}

.ar-play-btn {
  border-color: rgba(96,165,250,0.45);
  background: rgba(96,165,250,0.10);
  color: var(--accent-blue);
}

.ar-play-btn:hover {
  background: rgba(96,165,250,0.22);
  border-color: var(--accent-blue);
}

.ar-play-btn.is-playing {
  background: linear-gradient(135deg, rgba(96,165,250,0.25) 0%, rgba(129,140,248,0.18) 100%);
  border-color: var(--accent-indigo);
  color: #fff;
}

.ar-stop-btn {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
}

.ar-stop-btn:hover {
  background: rgba(255,100,100,0.12);
  border-color: rgba(255,100,100,0.4);
  color: #fc8181;
}

/* Responsive for audio-reviews grid */
@media (max-width: 991px) {
  .audio-reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .audio-reviews-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ar-card {
    padding: 14px 12px;
    gap: 10px;
  }

  .ar-card__label {
    font-size: 0.82rem;
  }

  .ar-play-btn,
  .ar-stop-btn {
    font-size: 0.7rem;
    padding: 7px 4px;
  }
}


/* ═══════════════════════════════════════════════════════
   ИСПРАВЛЕНИЯ ПО SEO-АУДИТУ 2026-03-20
   ═══════════════════════════════════════════════════════ */

/* ─── CLS fix: резервируем место под динамический контент ─── */
#videoSlider        { min-height: 400px; }
#dynamicTagCloud    { min-height: 80px; }
#audioReviewsGrid   { min-height: 300px; }

/* Iframe отзывов Яндекс Карт */
.reviews-frame {
  width: 100%;
  height: 400px;
  border: none;
  border-radius: var(--radius-md);
}

/* ─── Grid areas для новых блоков ──────────────────────── */
.card-static-reviews  { grid-area: static-reviews; }
.card-faq             { grid-area: faq; }
.card-geo-experiment  { grid-area: geo-experiment; }

/* ═══════════════════════════════════════════════════════
   СТАТИЧЕСКИЕ ОТЗЫВЫ КЛИЕНТОВ
   ═══════════════════════════════════════════════════════ */

.static-reviews-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}

.static-reviews-title {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  margin: 4px 0 0;
}

.static-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.static-review-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
  background: linear-gradient(160deg, rgba(96,165,250,0.05) 0%, rgba(129,140,248,0.03) 100%);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.static-review-card:hover {
  border-color: var(--border-card-hover);
  transform: translateY(-3px);
}

.static-review-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-secondary);
  font-style: italic;
  border-left: 3px solid var(--accent-blue);
  padding-left: 14px;
}

.static-review-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.review-company {
  font-size: 0.78rem;
  color: var(--text-muted);
}

@media (max-width: 991px) {
  .static-reviews-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════
   FAQ АККОРДЕОН
   ═══════════════════════════════════════════════════════ */

.faq-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}

.faq-title {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  margin: 4px 0 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq-item.is-open {
  border-color: rgba(96,165,250,0.4);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: inherit;
  gap: 12px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.faq-question:hover {
  background: rgba(255,255,255,0.04);
  color: var(--accent-blue);
}

.faq-item.is-open .faq-question {
  color: var(--accent-blue);
  background: rgba(96,165,250,0.06);
}

.faq-chevron {
  flex-shrink: 0;
  font-size: 1.1rem;
  transition: transform var(--transition-fast);
  color: var(--text-muted);
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
  color: var(--accent-blue);
}

.faq-answer {
  display: none;
  padding: 0 20px 16px;
}

.faq-answer.is-open {
  display: block;
}

.faq-answer p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ── Категории-аккордеоны внутри FAQ ── */
.faq-category {
  border: 1px solid rgba(52,211,153,0.18);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.faq-category.is-open {
  border-color: rgba(52,211,153,0.45);
}

.faq-category-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(52,211,153,0.06), rgba(16,163,127,0.04));
  border: none;
  cursor: pointer;
  gap: 14px;
  transition: background var(--transition-fast);
  font-family: inherit;
}
.faq-category-toggle:hover {
  background: linear-gradient(135deg, rgba(52,211,153,0.12), rgba(16,163,127,0.08));
}
.faq-category.is-open .faq-category-toggle {
  background: linear-gradient(135deg, rgba(52,211,153,0.14), rgba(16,163,127,0.10));
}

.faq-category-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(52,211,153,0.12);
  font-size: 1.2rem;
}

.faq-category-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  flex: 1;
  min-width: 0;
}
.faq-category-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #6ee7b7;
  line-height: 1.3;
}
.faq-category-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.faq-category-chevron {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: #34d399;
  transition: transform var(--transition-fast);
}
.faq-category.is-open .faq-category-chevron {
  transform: rotate(180deg);
}

.faq-category-body {
  display: none;
  padding: 4px 12px 12px;
}
.faq-category-body .faq-item {
  border-color: rgba(255,255,255,0.06);
}
.faq-category.is-open .faq-category-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 767px) {
  .faq-category-toggle { padding: 14px 14px; gap: 10px; }
  .faq-category-icon { width: 36px; height: 36px; font-size: 1rem; }
  .faq-category-title { font-size: 0.88rem; }
  .faq-category-sub { font-size: 0.7rem; }
  .faq-category-body { padding: 4px 6px 8px; }
}

/* Разделитель-заголовок внутри FAQ */
.faq-divider-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 12px;
  font-family: 'Archivo', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #34d399;
}
.faq-divider-label::before,
.faq-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,0.4), transparent);
}


/* ═══════════════════════════════════════════════════════
   COOKIE CONSENT BANNER (ФЗ-152)
   ═══════════════════════════════════════════════════════ */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(10,12,20,0.97);
  border-top: 1px solid rgba(96,165,250,0.25);
  backdrop-filter: blur(20px);
  padding: 16px 24px;
  display: none;
  align-items: center;
  justify-content: center;
}

.cookie-banner__inner {
  max-width: 900px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cookie-banner__text {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary, #aab4c8);
  min-width: 200px;
}

.cookie-banner__text a.cookie-link {
  color: var(--accent-blue, #60a5fa);
  text-decoration: underline;
}

.cookie-banner__btns {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 9px 20px;
  border-radius: 8px;
  border: 1px solid;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  white-space: nowrap;
}

.cookie-btn--accept {
  border-color: var(--accent-blue, #60a5fa);
  background: rgba(96,165,250,0.15);
  color: var(--accent-blue, #60a5fa);
}

.cookie-btn--accept:hover {
  background: rgba(96,165,250,0.28);
}

.cookie-btn--basic {
  border-color: rgba(255,255,255,0.15);
  background: transparent;
  color: var(--text-muted, #6b7280);
}

.cookie-btn--basic:hover {
  border-color: rgba(255,255,255,0.3);
  color: var(--text-secondary, #aab4c8);
}

@media (max-width: 599px) {
  .cookie-banner {
    padding: 14px 16px;
  }
  .cookie-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .cookie-banner__btns {
    width: 100%;
  }
  .cookie-btn {
    flex: 1;
    text-align: center;
  }
}


/* ══════════════════════════════════════════════════════
   GEO-EXPERIMENT CARD
   ══════════════════════════════════════════════════════ */
.geo-experiment-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  padding: 36px 40px;
}

/* Левая часть — иконка + счётчик */
.geo-exp-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 120px;
}

.geo-exp-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669, #0891b2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow:
    0 0 0 3px rgba(5,150,105,0.25),
    0 0 24px rgba(5,150,105,0.35);
  animation: geoIconPulse 3s ease-in-out infinite;
}

.geo-exp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(5,150,105,0.15);
  border: 1px solid rgba(5,150,105,0.45);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #34d399;
  white-space: nowrap;
}

.geo-exp-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  animation: geoBlink 1.4s ease-in-out infinite;
}

/* Правая часть — текст */
.geo-exp-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.geo-exp-title {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0;
}

.geo-exp-title .geo-accent {
  background: linear-gradient(90deg, #34d399, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.geo-exp-body {
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--text-secondary);
  margin: 0;
}

.geo-exp-body strong {
  color: var(--text-primary);
  font-weight: 600;
}

.geo-exp-divider {
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #34d399, #22d3ee);
  margin: 2px 0;
}

.geo-exp-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(5,150,105,0.18), rgba(8,145,178,0.18));
  border: 1px solid rgba(5,150,105,0.4);
  color: #34d399;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
  cursor: default;
}

.geo-exp-cta:hover {
  background: linear-gradient(90deg, rgba(5,150,105,0.28), rgba(8,145,178,0.28));
  border-color: rgba(52,211,153,0.7);
  box-shadow: 0 0 18px rgba(5,150,105,0.25);
}

/* Специальная тонкая зелёная рамка у карточки */
.card-geo-experiment {
  border-color: rgba(5,150,105,0.35);
  background: linear-gradient(160deg,
    rgba(5,150,105,0.10) 0%,
    rgba(8,145,178,0.07) 50%,
    rgba(255,255,255,0.04) 100%
  ) !important;
}

.card-geo-experiment::before {
  background: linear-gradient(135deg, rgba(52,211,153,0.6), rgba(34,211,238,0.4), rgba(52,211,153,0.6)) !important;
}

/* Анимации */
@keyframes geoIconPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(5,150,105,0.25), 0 0 24px rgba(5,150,105,0.35); }
  50%       { box-shadow: 0 0 0 5px rgba(5,150,105,0.15), 0 0 40px rgba(5,150,105,0.50); }
}

@keyframes geoBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Адаптив */
@media (max-width: 767px) {
  .geo-experiment-inner {
    grid-template-columns: 1fr;
    padding: 20px 16px;
    gap: 18px;
  }

  /* Левая панель: иконка + бейдж в ряд, заметка Алисы — на всю ширину снизу */
  .geo-exp-left {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-width: auto;
    gap: 10px 14px;
  }

  /* Иконка чуть меньше */
  .geo-exp-icon {
    width: 56px;
    height: 56px;
    font-size: 1.65rem;
    flex-shrink: 0;
  }

  /* Группа заметок — полная ширина, центрирована */
  .geo-exp-notes-group {
    width: 100%;
    flex-shrink: 0;
    flex-direction: row;
    gap: 10px;
  }

  /* Оба блока занимают равную ширину, центрированы */
  .geo-exp-alice-note,
  .geo-exp-chatgpt-note {
    flex: 1;
    max-width: none;
    align-items: center;
    text-align: center;
    flex-direction: column;
  }

  /* Правая панель: чуть меньше шрифты */
  .geo-exp-title {
    font-size: clamp(1.1rem, 5vw, 1.3rem);
  }

  .geo-exp-body {
    font-size: 0.875rem;
    line-height: 1.65;
  }

  /* CTA на всю ширину */
  .geo-exp-cta {
    align-self: stretch;
    justify-content: center;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════
   WHITE METHODS HIGHLIGHT BLOCK
   ══════════════════════════════════════════════════════ */
.white-methods-highlight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(16,185,129,0.08));
  border: 1.5px solid rgba(34,197,94,0.45);
  box-shadow: 0 0 18px rgba(34,197,94,0.12), inset 0 1px 0 rgba(34,197,94,0.15);
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.white-methods-highlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #22c55e, #10b981, #22c55e);
  background-size: 200% 100%;
  animation: shimmerGreen 2.5s linear infinite;
}

.white-methods-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.white-methods-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-primary);
}

.white-methods-text strong {
  color: #4ade80;
  font-weight: 700;
}

@keyframes shimmerGreen {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════
   GEO-EXPERIMENT TWO-COL ROLES
   ══════════════════════════════════════════════════════ */
.geo-exp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 4px 0;
}

.geo-exp-role-block {
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(5,150,105,0.10);
  border: 1px solid rgba(5,150,105,0.3);
}

.geo-exp-role-block--client {
  background: rgba(8,145,178,0.10);
  border-color: rgba(8,145,178,0.3);
}

.geo-exp-role-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #34d399;
  margin-bottom: 8px;
}

.geo-exp-role-label--client {
  color: #22d3ee;
}

.geo-exp-role-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.geo-exp-role-text strong {
  color: var(--text-primary);
}

/* Burger link accent style */
.burger-link--accent {
  color: #4ade80 !important;
  border-top: 1px solid rgba(74,222,128,0.15);
  margin-top: 4px;
  padding-top: 12px !important;
}

@media (max-width: 599px) {
  .geo-exp-two-col {
    grid-template-columns: 1fr;
  }
}

/* Очень маленькие экраны (≤400px) */
@media (max-width: 400px) {
  .geo-experiment-inner {
    padding: 16px 12px;
  }
  .geo-exp-badge {
    font-size: 0.65rem;
    padding: 4px 10px;
  }
  .geo-exp-icon {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }
  .geo-exp-alice-text,
  .geo-exp-chatgpt-text {
    font-size: 0.68rem;
  }

  /* На самых маленьких — два блока в столбик */
  .geo-exp-notes-group {
    flex-direction: column;
  }
  .geo-exp-role-block {
    padding: 12px 14px;
  }
  .geo-exp-role-text {
    font-size: 0.82rem;
  }
}

/* ── Группа заметок (Алиса + ChatGPT) ── */
.geo-exp-notes-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* ── Alice note ── */
.geo-exp-alice-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.14), rgba(167,139,250,0.10));
  border: 1px solid rgba(139,92,246,0.35);
  text-align: center;
  max-width: 130px;
}

.geo-exp-alice-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.geo-exp-alice-text {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #c4b5fd;
  font-weight: 500;
}

/* ── ChatGPT note ── */
.geo-exp-chatgpt-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16,163,127,0.14), rgba(52,211,153,0.08));
  border: 1px solid rgba(16,163,127,0.38);
  text-align: center;
  max-width: 130px;
}

.geo-exp-chatgpt-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.geo-exp-chatgpt-text {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #6ee7b7;
  font-weight: 500;
}

.geo-exp-chatgpt-text em {
  color: #a7f3d0;
  font-style: normal;
  opacity: 0.8;
}

/* ============================================
   МАНИФЕСТ — «Что я делаю»
   ============================================ */

.card-manifest {
  border: 1px solid rgba(96, 165, 250, 0.25);
  background: linear-gradient(180deg, rgba(96,165,250,0.06) 0%, rgba(129,140,248,0.04) 50%, rgba(255,255,255,0.04) 100%);
}

.manifest-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Заголовок */
.manifest-header {
  text-align: center;
}

.manifest-badge {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.22);
  margin-bottom: 16px;
}

.manifest-title {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.manifest-lead {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--text-secondary);
  max-width: 640px;
  margin-inline: auto;
  line-height: 1.7;
}

/* Подзаголовки секций */
.manifest-subtitle {
  margin: 0 0 18px;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---- 4 столпа (инфографика) ---- */
.manifest-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.manifest-pillar {
  position: relative;
  padding: 28px 20px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  text-align: center;
  transition: transform var(--transition-base), border-color var(--transition-base), background var(--transition-base);
  animation: pillarFloat 4s ease-in-out infinite;
}

.manifest-pillar:nth-child(1) { animation-delay: 0s; }
.manifest-pillar:nth-child(2) { animation-delay: 0.6s; }
.manifest-pillar:nth-child(3) { animation-delay: 1.2s; }
.manifest-pillar:nth-child(4) { animation-delay: 1.8s; }

@keyframes pillarFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.manifest-pillar:hover {
  border-color: rgba(96,165,250,0.4);
  background: rgba(96,165,250,0.06);
  transform: translateY(-8px) !important;
}

.manifest-pillar-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(96,165,250,0.15), rgba(129,140,248,0.12));
  border: 1px solid rgba(96,165,250,0.25);
}

.manifest-pillar-icon svg {
  width: 22px;
  height: 22px;
  color: var(--accent-blue);
}

.manifest-pillar-num {
  font-size: 2.2rem;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 10px;
  opacity: 0.25;
}

.manifest-pillar-text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ---- Разделитель-текст ---- */
.manifest-divider-text {
  text-align: center;
  padding: 24px 32px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(96,165,250,0.08), rgba(129,140,248,0.06));
  border: 1px solid rgba(96,165,250,0.18);
}

.manifest-divider-text p {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--text-primary);
  line-height: 1.7;
}

/* ---- Результаты (4 карточки) ---- */
.manifest-result-block {
  text-align: center;
}

.manifest-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.manifest-result-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(34, 211, 238, 0.15);
  background: rgba(34, 211, 238, 0.04);
  transition: transform var(--transition-base), border-color var(--transition-base);
  animation: resultPulse 3s ease-in-out infinite;
}

.manifest-result-item:nth-child(1) { animation-delay: 0s; }
.manifest-result-item:nth-child(2) { animation-delay: 0.5s; }
.manifest-result-item:nth-child(3) { animation-delay: 1s; }
.manifest-result-item:nth-child(4) { animation-delay: 1.5s; }

@keyframes resultPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
  50% { box-shadow: 0 0 20px 0 rgba(34,211,238,0.08); }
}

.manifest-result-item:hover {
  transform: translateY(-4px);
  border-color: rgba(34,211,238,0.4);
}

.manifest-result-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(34,211,238,0.1);
  border: 1px solid rgba(34,211,238,0.2);
}

.manifest-result-icon svg {
  width: 22px;
  height: 22px;
  color: var(--accent-cyan);
}

.manifest-result-item span {
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.5;
}

.manifest-no-fluff {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.manifest-no-fluff strong {
  color: var(--accent-cyan);
}

/* ---- Условия (1-2-3) ---- */
.manifest-require-block {
  text-align: center;
}

.manifest-require-intro {
  margin: 0 0 24px;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.manifest-conditions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.manifest-condition {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  transition: border-color var(--transition-base), background var(--transition-base);
}

.manifest-condition:hover {
  border-color: rgba(96,165,250,0.3);
  background: rgba(96,165,250,0.04);
}

.manifest-condition-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo));
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}

.manifest-condition-body {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
  padding-top: 8px;
}

.manifest-condition-body strong {
  color: var(--text-primary);
}

/* ---- Гарантия ---- */
.manifest-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(52,211,153,0.25);
  background: linear-gradient(135deg, rgba(52,211,153,0.08), rgba(34,211,238,0.04));
  animation: guaranteeGlow 4s ease-in-out infinite;
}

@keyframes guaranteeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
  50% { box-shadow: 0 0 30px 0 rgba(52,211,153,0.1); }
}

.manifest-guarantee-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(52,211,153,0.12);
  border: 1px solid rgba(52,211,153,0.3);
}

.manifest-guarantee-icon svg {
  width: 24px;
  height: 24px;
  color: var(--accent-green);
}

.manifest-guarantee p {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.7;
  padding-top: 8px;
}

/* ---- Честность ---- */
.manifest-honest {
  text-align: center;
}

.manifest-honest > p {
  margin: 0 0 24px;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 720px;
  margin-inline: auto;
}

.manifest-honest strong {
  color: #f87171;
}

.manifest-cta-line {
  padding: 28px 32px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(96,165,250,0.1), rgba(129,140,248,0.08), rgba(34,211,238,0.06));
  border: 1px solid rgba(96,165,250,0.25);
  position: relative;
  overflow: hidden;
}

.manifest-cta-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.08), transparent);
  animation: ctaSweep 4s ease-in-out infinite;
}

@keyframes ctaSweep {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.manifest-cta-accent {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

/* ---- Адаптив: Манифест ---- */
@media (max-width: 991px) {
  .manifest-pillars {
    grid-template-columns: repeat(2, 1fr);
  }
  .manifest-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .manifest-pillars {
    grid-template-columns: 1fr;
  }
  .manifest-results-grid {
    grid-template-columns: 1fr;
  }
  .manifest-content {
    gap: 28px;
  }
  .manifest-guarantee {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .manifest-condition {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .manifest-condition-body {
    padding-top: 0;
  }
  .manifest-cta-line {
    padding: 20px 18px;
  }
  .manifest-divider-text {
    padding: 18px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manifest-pillar,
  .manifest-result-item,
  .manifest-guarantee,
  .manifest-cta-line::before {
    animation: none !important;
  }
}

/* CTA Banner to V2 */
.cta-v2-banner {
  display: flex; align-items: center; gap: 14px; margin-top: 20px;
  padding: 16px 22px;
  background: linear-gradient(135deg, #f59e0b 0%, #eab308 50%, #f59e0b 100%);
  border-radius: 14px; text-decoration: none; color: #1a1a1a;
  font-weight: 700; font-size: 0.95rem; line-height: 1.4;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  animation: cta-v2-pulse 2.5s ease-in-out infinite;
}
.cta-v2-banner:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 32px rgba(245, 158, 11, 0.6), inset 0 1px 0 rgba(255,255,255,0.3); }
.cta-v2-banner__icon { font-size: 1.8rem; flex-shrink: 0; }
.cta-v2-banner__text { flex: 1; }
.cta-v2-banner__arrow { font-size: 1.4rem; flex-shrink: 0; transition: transform 0.3s; }
.cta-v2-banner:hover .cta-v2-banner__arrow { transform: translateX(4px); }
@keyframes cta-v2-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255,255,255,0.3); }
  50% { box-shadow: 0 4px 30px rgba(245, 158, 11, 0.7), inset 0 1px 0 rgba(255,255,255,0.3); }
}

/* V2 Header Button */
.v2-header-btn {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  background: linear-gradient(135deg, #f59e0b 0%, #eab308 100%);
  color: #1a1a1a;
  font-weight: 700; font-size: 0.78rem;
  text-decoration: none;
  border-radius: 20px;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.4);
  animation: v2btn-glow 2s ease-in-out infinite;
}
.v2-header-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.6);
}
@keyframes v2btn-glow {
  0%, 100% { box-shadow: 0 2px 12px rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 2px 18px rgba(245, 158, 11, 0.7); }
}