/*
 * ZoomApps.kz — Premium 2026 Redesign
 * Apple-inspired dark glassmorphism design system
 * Overrides legacy inline styles
 * Author: A-LUX Digital Agency
 * Date: 2026-03-29
 */

/* ============================================================
   0. FONT IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Backgrounds — Matte Titanium (lighter) */
  --bg-dark: #141416;
  --bg-dark-elevated: #1e1e21;
  --bg-light: #f5f5f0;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-footer: #0c0c0e;

  /* Text — warm titanium tones */
  --text-primary: #e8e6e3;
  --text-secondary: rgba(232, 230, 227, 0.65);
  --text-dark: #1d1d1f;
  --text-muted: #78787c;

  /* Accent — titanium + gold */
  --accent: #8e8e93;
  --accent-hover: #a1a1a6;
  --accent-gradient: linear-gradient(135deg, #636366, #8e8e93);
  --gold: #c9a84c;
  --gold-light: #e2c97e;
  --gold-dark: #8b7332;
  --gold-gradient: linear-gradient(135deg, #8b7332, #c9a84c, #e2c97e, #c9a84c);
  --gold-shimmer: linear-gradient(90deg, #8b7332, #c9a84c, #e2c97e, #c9a84c, #8b7332);
  --green: #30d158;
  --whatsapp-green: #25D366;

  /* Glass — darker, more subtle */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.09);

  /* Shadows */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(142, 142, 147, 0.15);

  /* Transitions */
  --ease-apple: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition: all 0.4s var(--ease-apple);

  /* Layout */
  --container-max: 1200px;
  --section-padding: 120px;
  --section-padding-mobile: 60px;
  --card-radius: 20px;
  --card-padding: 40px;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --fs-hero: 72px;
  --fs-section: 48px;
  --fs-subheading: 28px;
  --fs-body: 17px;
  --fs-small: 14px;
}

/* ============================================================
   2. RESET & GLOBAL
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-size: 16px !important;
}

html, body {
  background: var(--bg-dark) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-family) !important;
  font-size: var(--fs-body) !important;
  line-height: 1.6 !important;
  overflow-x: hidden !important;
}

/* Kill clearfix pseudo-elements that break CSS grid */
.clearfix::before,
.clearfix::after {
  display: none !important;
  content: none !important;
}

/* ============================================================
   LEGACY BLUE COLOR KILL — override #1987e8 / #459ccf everywhere
   ============================================================ */
li.active {
  border-top: none !important;
  border-color: transparent !important;
}

.main-menu-container .tabs-list li:hover,
.main-menu-container .tabs-list li.active {
  border-top: none !important;
  padding-top: 0 !important;
}

.about-us li .line {
  background: var(--gold-gradient) !important;
}

.about-learn {
  border-color: rgba(201,168,76,0.2) !important;
}

.border {
  color: var(--gold) !important;
  border-color: rgba(201,168,76,0.3) !important;
}

.border:hover {
  background: rgba(201,168,76,0.1) !important;
}

.block-2 ul li i.int,
.block-2 .block-2-5 ul li,
.block-2 .page-title a,
.block-2 .block-2-3 .grid_6 a,
.block-4 .price {
  color: var(--gold) !important;
}

.block-2 .block-2-3 a.border,
.block-2 .block-2-4 div.circle,
.block-3-2 .owl-item div.ico,
.block-3-2 .grid_6 > div div.ico,
.block-4 .block-4-2 > div > div .line.blue,
.block-5 h2,
.block-5 h3,
.modal_div button,
.sweet-alert.show-sweet-alert > button.confirm {
  background-color: var(--gold) !important;
  color: #1d1d1f !important;
}

body {
  min-height: 100vh;
}

/* ============================================================
   2a. GRAIN TEXTURE OVERLAY — titanium surface feel
   ============================================================ */
/* Grain + subtle geometric pattern overlay */
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  opacity: 0.025 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 256px 256px !important;
  mix-blend-mode: overlay !important;
}

/* Subtle matte pattern — thin diagonal lines like brushed titanium */
body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  pointer-events: none !important;
  opacity: 0.015 !important;
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.03) 2px,
      rgba(255, 255, 255, 0.03) 3px
    ) !important;
  background-size: 8px 8px !important;
}

/* ============================================================
   2b. HERO GRADIENT MESH — animated Apple-style background
   ============================================================ */
.hero-section {
  position: relative !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 120px 24px 80px !important;
}

/* Split hero layout */
.hero-split {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 120px 48px 80px !important;
  gap: 60px !important;
}

.hero-left {
  flex: 1 !important;
  text-align: left !important;
  z-index: 2 !important;
  max-width: 560px !important;
}

.hero-left h1 {
  text-align: left !important;
}

.hero-right {
  flex: 0 0 auto !important;
  z-index: 2 !important;
  position: relative !important;
}

.hero-canvas {
  width: 420px !important;
  height: 420px !important;
  display: block !important;
}

.hero-cta-btn {
  display: inline-block !important;
  margin-top: 32px !important;
  padding: 16px 40px !important;
  background: var(--gold-gradient) !important;
  color: #1d1d1f !important;
  font-family: 'Space Grotesk', var(--font-family) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: all 0.4s var(--ease-apple) !important;
  box-shadow: 0 4px 24px rgba(201,168,76,0.25) !important;
  position: relative !important;
}

.hero-cta-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 40px rgba(201,168,76,0.4), 0 0 0 2px rgba(201,168,76,0.2) !important;
}

/* Video background */
.hero-video-bg {
  position: absolute !important;
  inset: -20% !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.hero-video-bg iframe,
.hero-video-bg video {
  width: 140% !important;
  height: 140% !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border: none !important;
  opacity: 0.45 !important;
  filter: brightness(0.6) saturate(0.7) !important;
  pointer-events: none !important;
  object-fit: cover !important;
}

/* Gradient overlay on top of video */
.hero-gradient-mesh {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(142, 142, 147, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 30%, rgba(174, 174, 178, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 80%, rgba(201, 168, 76, 0.1) 0%, transparent 40%),
    linear-gradient(to bottom, rgba(20,20,22,0.6) 0%, rgba(20,20,22,0.9) 100%) !important;
  pointer-events: none !important;
}

@keyframes meshShift {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  25% { background-position: 30% 20%, 70% 40%, 20% 60%, 0 0; }
  50% { background-position: 60% 40%, 30% 60%, 80% 30%, 0 0; }
  75% { background-position: 40% 60%, 60% 20%, 40% 80%, 0 0; }
  100% { background-position: 100% 100%, 0% 100%, 50% 0%, 0 0; }
}

/* ============================================================
   GOLD DECORATIVE GRAPHICS — rings, dots, arcs, lines
   ============================================================ */

/* Gold ring — hero top right */
.hero-section::before {
  content: '' !important;
  position: absolute !important;
  top: 15% !important;
  right: 8% !important;
  width: 120px !important;
  height: 120px !important;
  border: 1px solid rgba(201,168,76,0.15) !important;
  border-radius: 50% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  animation: floatRing 8s ease-in-out infinite !important;
}

/* Gold ring — hero bottom left */
.hero-section::after {
  content: '' !important;
  position: absolute !important;
  bottom: 20% !important;
  left: 5% !important;
  width: 80px !important;
  height: 80px !important;
  border: 1px solid rgba(201,168,76,0.1) !important;
  border-radius: 50% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  animation: floatRing 10s ease-in-out infinite reverse !important;
}

@keyframes floatRing {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
  50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
}

/* Gold dots cluster — near stats */
.stats-section::before {
  content: '' !important;
  position: absolute !important;
  top: 20px !important;
  right: 10% !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  box-shadow:
    16px 12px 0 rgba(201,168,76,0.3),
    -8px 24px 0 rgba(201,168,76,0.15),
    28px -4px 0 rgba(201,168,76,0.2),
    40px 20px 0 rgba(201,168,76,0.1) !important;
  pointer-events: none !important;
  animation: twinkleDots 5s ease-in-out infinite !important;
}

@keyframes twinkleDots {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Gold diagonal line — portfolio section */
.portfolio::before {
  content: '' !important;
  position: absolute !important;
  top: 60px !important;
  left: 5% !important;
  width: 100px !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--gold), transparent) !important;
  transform: rotate(-30deg) !important;
  opacity: 0.25 !important;
  pointer-events: none !important;
}

.portfolio::after {
  content: '' !important;
  position: absolute !important;
  bottom: 80px !important;
  right: 8% !important;
  width: 60px !important;
  height: 60px !important;
  border: 1px solid rgba(201,168,76,0.12) !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
  animation: floatRing 12s ease-in-out infinite !important;
}

/* Gold arc — why-we section */
.inner-stages::before {
  content: '' !important;
  position: absolute !important;
  top: -40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 200px !important;
  height: 100px !important;
  border-top: 1px solid rgba(201,168,76,0.12) !important;
  border-radius: 50% 50% 0 0 !important;
  pointer-events: none !important;
}

/* Gold cross — contacts section */
.contacts::before {
  content: '+' !important;
  position: absolute !important;
  top: 40px !important;
  right: 10% !important;
  font-size: 32px !important;
  font-weight: 200 !important;
  color: rgba(201,168,76,0.15) !important;
  pointer-events: none !important;
  animation: rotateSlow 20s linear infinite !important;
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Advantage cards — gold corner accent on hover */
.about-us li::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 24px solid rgba(201,168,76,0.08) !important;
  border-left: 24px solid transparent !important;
  border-radius: 0 18px 0 0 !important;
  transition: all 0.4s ease !important;
  pointer-events: none !important;
}

.about-us li:hover::after {
  border-top-color: rgba(201,168,76,0.2) !important;
  border-top-width: 32px !important;
  border-left-width: 32px !important;
}

/* Footer gold particles overlay */
.footer-cta::before {
  content: '' !important;
  position: absolute !important;
  top: -20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  box-shadow:
    -80px 30px 0 rgba(201,168,76,0.2),
    60px -10px 0 rgba(201,168,76,0.15),
    -30px -40px 0 rgba(201,168,76,0.25),
    120px 20px 0 rgba(201,168,76,0.1),
    -120px -20px 0 rgba(201,168,76,0.18),
    200px 10px 0 rgba(201,168,76,0.08),
    -180px 40px 0 rgba(201,168,76,0.12) !important;
  pointer-events: none !important;
  animation: twinkleDots 4s ease-in-out infinite alternate !important;
}

.hero-content {
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  max-width: 900px !important;
}

.hero-content h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: var(--fs-hero) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  background: none !important;
  margin-bottom: 24px !important;
}

.hero-subtitle {
  font-family: 'Space Grotesk', var(--font-family) !important;
  font-size: 22px !important;
  color: var(--gold-light) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
}

/* Gold decorative elements */
.hero-content::before {
  content: '—' !important;
  display: block !important;
  color: var(--gold) !important;
  font-size: 32px !important;
  letter-spacing: 8px !important;
  margin-bottom: 24px !important;
  opacity: 0.6 !important;
}

.hero-content::after {
  content: '' !important;
  display: block !important;
  width: 60px !important;
  height: 1px !important;
  background: var(--gold-gradient) !important;
  margin: 32px auto 0 !important;
}

/* ============================================================
   2c. STATS SECTION — large animated counters
   ============================================================ */
.stats-section {
  padding: 80px 24px !important;
  background: transparent !important;
  position: relative !important;
}

.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
}

.stat-item {
  text-align: center !important;
  padding: 40px 16px !important;
  border-radius: var(--card-radius) !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  transition: var(--transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

.stat-item::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: var(--card-radius) !important;
  padding: 1px !important;
  background: linear-gradient(145deg, rgba(142,142,147,0.2), transparent 50%) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
}

.stat-item:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(201, 168, 76, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.stat-number {
  font-size: 64px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  background: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}

.stat-suffix {
  font-size: 36px !important;
  font-weight: 300 !important;
  color: var(--gold) !important;
  vertical-align: super !important;
  margin-left: 2px !important;
}

.stat-label {
  display: block !important;
  margin-top: 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

/* ============================================================
   2d. ANIMATED BORDER GRADIENT — featured cards
   ============================================================ */
@keyframes borderRotate {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* Gold rotating border — only on stat items, not about-us */
.stat-item:nth-child(1) {
  border: none !important;
  background:
    linear-gradient(var(--bg-dark), var(--bg-dark)) padding-box,
    conic-gradient(from var(--angle), transparent 25%, rgba(201,168,76,0.5) 50%, transparent 75%) border-box !important;
  border: 1px solid transparent !important;
  animation: borderRotate 6s linear infinite !important;
}

#main {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
}

::selection {
  background: var(--accent) !important;
  color: #fff !important;
}

a {
  color: var(--accent) !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
}

a:hover {
  color: var(--accent-hover) !important;
}

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

ul, ol {
  list-style: none !important;
}

/* Override old Kelly Slab font everywhere */
h1, h2, h3, h4, h5, h6,
p, span, a, li, div, td, th, input, textarea, button, label {
  font-family: var(--font-family) !important;
}

/* ============================================================
   3. CONTAINER UTILITY
   ============================================================ */
.container,
.footer-container {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* ============================================================
   4. HEADER & NAVIGATION — Transparent Matte 2026
   ============================================================ */

/* Hide top-bar completely — single header */
.top-bar { display: none !important; }

/* Scroll progress bar — gold gradient */
.scroll-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 2px !important;
  width: 0% !important;
  background: var(--gold-gradient) !important;
  z-index: 1002 !important;
  transition: width 0.1s linear !important;
}

/* ============================================================
   HEADER — Apple-premium: transparent → frosted glass on scroll
   ============================================================ */
header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  padding: 0 !important;
  height: 130px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.6s var(--ease-apple) !important;
}

.header-inner {
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Legacy layout */
.tabs-wrap {
  position: relative !important;
  padding-top: 130px !important;
}

/* Push page content below fixed header */
#main-page,
.tab.active {
  padding-top: 0 !important;
}

/* No bottom shimmer by default — appears on scroll */
header::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.6s ease !important;
}

/* Scrolled state — Apple frosted glass */
header.header-scrolled {
  background: rgba(10, 10, 12, 0.82) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 40px rgba(0,0,0,0.35) !important;
  height: 72px !important;
}

/* When scrolled, switch to single-line layout */
header.header-scrolled .zn-bar {
  flex-direction: row !important;
  padding: 0 32px !important;
  gap: 24px !important;
}

header.header-scrolled .zn-logo {
  margin-bottom: 0 !important;
}

header.header-scrolled .zn-logo img {
  max-height: 28px !important;
}

header.header-scrolled .zn-nav {
  flex: 1 !important;
}

header.header-scrolled::after {
  opacity: 1 !important;
}

header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 72px !important;
}

/* ---- LOGO — clean, minimal ---- */
.logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  height: auto !important;
  overflow: visible !important;
  text-decoration: none !important;
}

.logo img {
  max-height: 36px !important;
  width: auto !important;
  filter: brightness(1.15) drop-shadow(0 0 12px rgba(201,168,76,0.25)) !important;
  transition: all 0.4s ease !important;
  opacity: 1 !important;
}

.logo:hover img {
  filter: brightness(1.3) drop-shadow(0 0 20px rgba(201,168,76,0.4)) !important;
}

header.header-scrolled .logo img {
  max-height: 30px !important;
}

/* ---- CENTER NAVIGATION — elegant thin ---- */
.main-menu-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
}

.tabs-list {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.tabs-list li,
.main-menu-container .tabs-list li,
.main-menu-container .tabs-list-url li {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  width: auto !important;
  display: flex !important;
  float: none !important;
}

/* Underline indicator */
.tabs-list li::after {
  content: '' !important;
  position: absolute !important;
  bottom: 16px !important;
  left: 50% !important;
  width: 0 !important;
  height: 1px !important;
  background: var(--gold) !important;
  transition: all 0.4s var(--ease-apple) !important;
  transform: translateX(-50%) !important;
  opacity: 0 !important;
}

.tabs-list li.active::after {
  width: 16px !important;
  opacity: 1 !important;
}

.tabs-list li:hover::after {
  width: calc(100% - 32px) !important;
  opacity: 0.5 !important;
}

/* Nav links — Apple-premium: light, wide-tracked, elegant */
.tabs-list li a {
  position: relative !important;
  color: rgba(255,255,255,0.65) !important;
  font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 28px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.4s ease, text-shadow 0.4s ease !important;
  border: none !important;
  background: none !important;
  text-decoration: none !important;
}

.nav-chevron {
  opacity: 0.4 !important;
  transition: all 0.3s ease !important;
  margin-left: 2px !important;
}

.has-dropdown:hover .nav-chevron {
  opacity: 0.8 !important;
  transform: rotate(180deg) !important;
}

/* No glow pseudo — keep it clean */
.tabs-list li a::before {
  display: none !important;
}

.tabs-list li:hover a {
  color: #fff !important;
  text-shadow: 0 0 20px rgba(255,255,255,0.15) !important;
}

.tabs-list li.active a {
  color: var(--gold-light) !important;
  font-weight: 500 !important;
  text-shadow: 0 0 24px rgba(201,168,76,0.2) !important;
}

/* ---- DROPDOWN — glass panel ---- */
.tabs-list li ul,
.tabs-list li .dropdown-content,
.dropdown-content,
.dropdown-menu {
  display: none !important;
  position: absolute !important;
  top: calc(100% - 4px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  background: rgba(18, 18, 20, 0.95) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
  padding: 6px !important;
  min-width: 200px !important;
  z-index: 1001 !important;
  list-style: none !important;
  margin: 0 !important;
  opacity: 0 !important;
  transition: all 0.25s var(--ease-apple) !important;
}

.tabs-list li:hover > ul,
.tabs-list li:hover > .dropdown-content,
.tabs-list li:hover > .dropdown-menu,
.tabs-list li:focus-within > ul {
  display: block !important;
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

.tabs-list li ul li,
.dropdown-content li,
.dropdown-menu li {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
}

.tabs-list li ul li::after,
.dropdown-content li::after,
.dropdown-menu li::after {
  display: none !important;
}

.tabs-list li ul li a,
.dropdown-content a,
.dropdown-menu li a {
  color: rgba(255,255,255,0.6) !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  display: block !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.tabs-list li ul li a:hover,
.dropdown-content a:hover,
.dropdown-menu li a:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #fff !important;
}

/* ---- HEADER RIGHT: phone + CTA ---- */
.header-right {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-shrink: 0 !important;
}

.header-phone {
  color: rgba(255,255,255,0.45) !important;
  font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  text-decoration: none !important;
  letter-spacing: 0.08em !important;
  transition: color 0.4s ease !important;
  white-space: nowrap !important;
}

.header-phone:hover {
  color: var(--gold-light) !important;
}

/* Header CTA — premium gold pill, Apple-style */
.header-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 28px !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(201,168,76,0.03)) !important;
  border: 1px solid rgba(201, 168, 76, 0.3) !important;
  color: var(--gold-light) !important;
  font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  transition: all 0.4s var(--ease-apple) !important;
}

.header-cta-btn:hover {
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.06)) !important;
  border-color: rgba(201, 168, 76, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 0 30px rgba(201, 168, 76, 0.12), inset 0 0 20px rgba(201, 168, 76, 0.04) !important;
  transform: translateY(-1px) !important;
}

/* Header social icons */
.header-socials {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.social-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  color: #fff !important;
}

.si-instagram {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
}

.si-whatsapp {
  background: #25D366 !important;
}

.si-phone {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-secondary) !important;
}

.social-icon:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

.si-phone:hover {
  color: var(--text-primary) !important;
  border-color: rgba(142,142,147,0.3) !important;
}

/* Hamburger */
.tcon {
  display: none;
}

.tcon-menu__lines,
.tcon-menu__lines::before,
.tcon-menu__lines::after {
  background: var(--gold-light) !important;
  transition: all 0.3s ease !important;
  height: 2px !important;
  border-radius: 2px !important;
}

/* Mobile menu — HIDDEN on desktop */
.tabs-list-mob {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(10, 10, 10, 0.98) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  z-index: 999 !important;
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 80px 32px !important;
}

.tabs-list-mob li {
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 320px !important;
}

.tabs-list-mob li a {
  color: var(--text-secondary) !important;
  font-family: 'Space Grotesk', var(--font-family) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  padding: 16px 24px !important;
  display: block !important;
  text-align: center !important;
  letter-spacing: 0.05em !important;
  transition: var(--transition) !important;
  border-radius: 14px !important;
}

.tabs-list-mob li a:hover,
.tabs-list-mob li a.active {
  color: var(--gold-light) !important;
  background: rgba(201, 168, 76, 0.06) !important;
}

/* Mobile submenu */
.tabs-list-mob li ul {
  display: none !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
}

.tabs-list-mob li ul li a {
  font-size: 17px !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  padding: 10px 24px !important;
}

/* ============================================================
   4c. HOVER GLOW — cursor-following light on cards (CSS + JS var)
   ============================================================ */
.about-us li,
.stat-item,
.portfolio-content li,
.why-we li p,
.contacts_information,
.contacts_form-container {
  --glow-x: 50%;
  --glow-y: 50%;
}

.about-us li:hover,
.stat-item:hover,
.portfolio-content li:hover,
.contacts_information:hover {
  background-image: radial-gradient(
    400px circle at var(--glow-x) var(--glow-y),
    rgba(201, 168, 76, 0.06),
    transparent 60%
  ) !important;
}

/* ============================================================
   4d. PARALLAX — scroll depth layers
   ============================================================ */
.parallax-slow {
  will-change: transform !important;
  transition: transform 0.1s linear !important;
}

.parallax-medium {
  will-change: transform !important;
  transition: transform 0.1s linear !important;
}

/* ============================================================
   5. TAB CONTENT (GLOBAL)
   ============================================================ */
.tabs-wrap {
  padding-top: 100px !important;
}

.tab {
  padding-top: 0 !important;
  background: var(--bg-dark) !important;
  min-height: 50vh;
  position: relative !important;
  z-index: 1 !important;
}

.tab h3 {
  font-size: var(--fs-section) !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  text-align: center !important;
  margin-bottom: 64px !important;
  background: linear-gradient(135deg, #e2c97e 0%, #c9a84c 40%, #e8e6e3 60%, #c9a84c 80%, #e2c97e 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: textShimmer 6s ease-in-out infinite !important;
}

/* ============================================================
   6. HERO / MAIN PAGE (#main-page)
   ============================================================ */
#main-page.tab {
  padding-top: 0 !important;
  background: var(--bg-dark) !important;
}

/* H1 on main page */
#main-page h1,
#main-page .about-learn h1 {
  font-size: var(--fs-hero) !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  background: none !important;
  max-width: 900px !important;
  margin: 0 auto 40px !important;
  padding: 0 24px !important;
  line-height: 1.1 !important;
}

/* fadein elements positioning */
.fadein {
  position: relative !important;
  z-index: 1 !important;
}

/* Advantage cards (about-us) — Premium Gold */
.about-us {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 60px 24px 40px !important;
}

.about-us li {
  background: linear-gradient(160deg, rgba(201,168,76,0.04) 0%, rgba(20,20,22,0.9) 40%, rgba(201,168,76,0.02) 100%) !important;
  border: 1px solid rgba(201,168,76,0.12) !important;
  border-radius: 18px !important;
  padding: 32px 24px 28px !important;
  text-align: center !important;
  transition: all 0.5s ease !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-height: unset !important;
  overflow: hidden !important;
  position: relative !important;
}

.about-us li::before {
  display: none !important;
}

.about-us li:hover {
  border-color: rgba(201,168,76,0.3) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 32px rgba(201,168,76,0.06) !important;
  background: linear-gradient(160deg, rgba(201,168,76,0.08) 0%, rgba(20,20,22,0.95) 40%, rgba(201,168,76,0.04) 100%) !important;
  transform: translateY(-4px) !important;
}

/* Icon container — gold circle */
.about-us li figure {
  margin: 0 auto 18px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.05)) !important;
  border: 1px solid rgba(201,168,76,0.25) !important;
  transition: all 0.4s ease !important;
}

.about-us li:hover figure {
  background: linear-gradient(135deg, rgba(201,168,76,0.25), rgba(201,168,76,0.1)) !important;
  border-color: rgba(201,168,76,0.45) !important;
  box-shadow: 0 0 24px rgba(201,168,76,0.15) !important;
}

/* Icons: SVG gold color (JS replaces PNGs with SVGs) */
.about-us li figure svg {
  width: 24px !important;
  height: 24px !important;
  color: var(--gold) !important;
  transition: all 0.4s ease !important;
}

.about-us li:hover figure svg {
  color: var(--gold-light) !important;
}

/* Fallback for old PNGs — force gold tint */
.about-us li figure img {
  max-width: 24px !important;
  height: auto !important;
  filter: brightness(0) invert(75%) sepia(60%) saturate(500%) hue-rotate(10deg) !important;
  opacity: 0.8 !important;
  transition: all 0.4s ease !important;
}

.about-us li:hover figure img {
  filter: brightness(0) invert(85%) sepia(50%) saturate(600%) hue-rotate(10deg) brightness(1.1) !important;
  opacity: 1 !important;
}

.about-us li h3 {
  font-family: 'Space Grotesk', -apple-system, 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 0 8px !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  background: none !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.about-us li .line {
  display: block !important;
  width: 24px !important;
  height: 1px !important;
  background: var(--gold-gradient) !important;
  margin: 0 auto 10px !important;
  border: none !important;
  opacity: 0.5 !important;
  transition: all 0.3s ease !important;
}

.about-us li:hover .line {
  width: 40px !important;
  opacity: 1 !important;
}

.about-us li p {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-weight: 300 !important;
}

/* Pre-footer info — fix H1 overlap */
.pre-footer-info {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 24px 80px !important;
  text-align: center !important;
  position: relative !important;
  z-index: 2 !important;
  clear: both !important;
}

.pre-footer-info.fadein {
  position: relative !important;
  z-index: 2 !important;
  clear: both !important;
  overflow: visible !important;
}

.pre-footer-info h1 {
  font-size: 36px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  background: none !important;
  margin-bottom: 24px !important;
  line-height: 1.3 !important;
  position: relative !important;
  z-index: 2 !important;
}

.pre-footer-info p {
  color: var(--text-secondary) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

/* Toggle button */
.toggle-i {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  font-size: var(--fs-small) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}

.toggle-i:hover {
  background: var(--glass-bg-strong) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* About SMI */
.about-smi {
  padding: 80px 24px !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
}

.about-smi li {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--card-radius) !important;
  padding: var(--card-padding) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  margin-bottom: 24px !important;
}

/* ============================================================
   7. ABOUT / COMPANY (#company)
   ============================================================ */
.about-company {
  background: var(--bg-dark) !important;
  padding: var(--section-padding) 24px !important;
  position: relative !important;
}

/* Decorative gold line between sections */
.about-company::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
}

.about-company h3 {
  font-size: var(--fs-section) !important;
  margin-bottom: 64px !important;
}

.company_description {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 32px !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
}

.company_description li {
  float: none !important;
  width: auto !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--card-radius) !important;
  padding: 40px 32px !important;
  transition: var(--transition) !important;
  position: relative !important;
}

.company_description li::before {
  content: '' !important;
  position: absolute !important;
  top: 32px !important;
  left: 32px !important;
  width: 3px !important;
  height: 32px !important;
  background: var(--gold-gradient) !important;
  border-radius: 2px !important;
}

.company_description li:hover {
  border-color: rgba(201, 168, 76, 0.2) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
}

.company_description li h4 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin-bottom: 12px !important;
  padding-left: 20px !important;
}

.company_description li p {
  color: var(--text-secondary) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

/* Company specifics - dark section with gold numbers */
.company_specifics {
  background: var(--bg-dark-elevated) !important;
  padding: var(--section-padding) 24px !important;
}

.company_specifics h3 {
  color: var(--gold-light) !important;
  -webkit-text-fill-color: var(--gold-light) !important;
  background: none !important;
}

.company_specifics ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 32px !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
}

.company_specifics ul li {
  background: var(--glass-bg) !important;
  border: 1px solid rgba(201, 168, 76, 0.1) !important;
  border-radius: var(--card-radius) !important;
  padding: var(--card-padding) !important;
  text-align: center !important;
  transition: var(--transition) !important;
  float: none !important;
  width: auto !important;
}

.company_specifics ul li:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-card) !important;
}

.company_specifics ul li figure img {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 16px !important;
  filter: drop-shadow(0 0 12px rgba(201, 168, 76, 0.2)) !important;
}

.company_specifics ul li span {
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
}

.company_specifics ul li div {
  width: 32px !important;
  height: 3px !important;
  background: var(--accent-gradient) !important;
  margin: 12px auto !important;
  border-radius: 2px !important;
}

/* ============================================================
   8. PORTFOLIO (#portfolio-page)
   ============================================================ */
.portfolio {
  padding: var(--section-padding) 24px !important;
  background: var(--bg-dark) !important;
  position: relative !important;
  overflow: hidden !important;
}

.portfolio h3 {
  font-size: var(--fs-section) !important;
  text-align: center !important;
  margin-bottom: 64px !important;
}

#stage.portfolio-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
}

#stage.portfolio-content li,
.portfolio-content li {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--card-radius) !important;
  background: var(--bg-dark-elevated) !important;
  transition: var(--transition) !important;
  float: none !important;
  width: auto !important;
  cursor: pointer;
}

.portfolio-content li:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(201, 168, 76, 0.15) !important;
}

.portfolio-content li figure {
  overflow: hidden !important;
  margin: 0 !important;
}

.portfolio-content li figure img {
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  object-fit: cover !important;
  transition: transform 0.6s var(--ease-apple) !important;
}

.portfolio-content li:hover figure img {
  transform: scale(1.1) !important;
}

.portfolio-content li .img-description {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 20px !important;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.portfolio-content li .img-description p {
  color: var(--text-primary) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

.portfolio-content li .img-description .platform i {
  color: var(--accent) !important;
  font-size: 20px !important;
  margin-right: 6px !important;
}

.popup-btn {
  text-decoration: none !important;
  color: inherit !important;
}

/* Portfolio popup / modal */
.product-popup {
  background: rgba(28, 28, 30, 0.95) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px !important;
  max-width: 900px !important;
  width: 90% !important;
  margin: auto !important;
  box-shadow: var(--shadow-hover) !important;
  padding: 40px !important;
  position: relative !important;
}

.product-popup .close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}

.product-popup .close:hover {
  background: var(--glass-bg-strong) !important;
}

.product-popup figure img {
  border-radius: 16px !important;
  margin-bottom: 24px !important;
}

.product-popup .popup-content h3 {
  font-size: 32px !important;
  text-align: left !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  background: none !important;
  margin-bottom: 16px !important;
}

.product-popup .popup-content p {
  color: var(--text-secondary) !important;
  line-height: 1.7 !important;
}

/* ============================================================
   9. CONTACTS (#contacts-page)
   ============================================================ */
.contacts {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: var(--section-padding) 24px !important;
  position: relative !important;
}

.contacts_information {
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--card-radius) !important;
  padding: var(--card-padding) !important;
  position: relative !important;
}

.contacts_information::after {
  content: '' !important;
  position: absolute !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.08), transparent 70%) !important;
  pointer-events: none !important;
}

.contacts_information h3 {
  font-size: 32px !important;
  text-align: left !important;
  margin-bottom: 32px !important;
}

.contacts_information span {
  color: var(--accent) !important;
  font-size: 20px !important;
}

.contacts_information ul li {
  font-size: 16px !important;
  color: var(--text-secondary) !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.contacts_information ul li:last-child {
  border-bottom: none !important;
}

/* Contact form */
.contacts_form-container {
  padding: 0 !important;
}

.contacts_form-container input[type="text"],
.contacts_form-container input[type="email"],
.contacts_form-container input[type="tel"] {
  width: 100% !important;
  background: var(--bg-dark-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  height: 56px !important;
  font-size: 16px !important;
  font-family: var(--font-family) !important;
  margin-bottom: 16px !important;
  transition: var(--transition) !important;
  outline: none !important;
}

.contacts_form-container input[type="text"]:focus,
.contacts_form-container input[type="email"]:focus,
.contacts_form-container input[type="tel"]:focus,
.contacts_form-container textarea:focus {
  border-color: rgba(201, 168, 76, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1) !important;
}

.contacts_form-container textarea {
  width: 100% !important;
  background: var(--bg-dark-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  min-height: 160px !important;
  font-size: 16px !important;
  font-family: var(--font-family) !important;
  resize: vertical !important;
  margin-bottom: 16px !important;
  transition: var(--transition) !important;
  outline: none !important;
}

.contacts_form-container button[type="submit"],
.contacts_form-container input[type="submit"] {
  background: linear-gradient(135deg, rgba(139, 115, 50, 0.3), rgba(201, 168, 76, 0.2)) !important;
  color: var(--gold-light) !important;
  border: 1px solid rgba(201, 168, 76, 0.3) !important;
  border-radius: 14px !important;
  padding: 18px 48px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: 'Space Grotesk', var(--font-family) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.contacts_form-container button[type="submit"]:hover,
.contacts_form-container input[type="submit"]:hover {
  background: linear-gradient(135deg, rgba(139, 115, 50, 0.5), rgba(201, 168, 76, 0.35)) !important;
  border-color: rgba(201, 168, 76, 0.5) !important;
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.15), 0 0 0 1px rgba(201, 168, 76, 0.1) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

.capcha {
  margin: 16px 0 !important;
}

#map-canvas {
  border-radius: var(--card-radius) !important;
  overflow: hidden !important;
  margin-top: 40px !important;
  border: 1px solid var(--glass-border) !important;
}

/* ============================================================
   10. WHY US (#why-we)
   ============================================================ */
.inner-stages {
  background: var(--bg-dark) !important;
  padding: var(--section-padding) 24px !important;
  position: relative !important;
  overflow: hidden !important;
}

.inner-stages h3 {
  font-size: var(--fs-section) !important;
  text-align: center !important;
  margin-bottom: 64px !important;
}

.why-we {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  counter-reset: why-counter !important;
}

.why-we li {
  counter-increment: why-counter !important;
  float: none !important;
  width: auto !important;
}

.why-we li p {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--card-radius) !important;
  padding: 32px 32px 32px 80px !important;
  margin-bottom: 16px !important;
  color: var(--text-secondary) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  position: relative !important;
  transition: var(--transition) !important;
}

.why-we li p::before {
  content: counter(why-counter, decimal-leading-zero) !important;
  position: absolute !important;
  left: 28px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  font-variant-numeric: tabular-nums !important;
}

.why-we li p:hover {
  border-color: rgba(201, 168, 76, 0.2) !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================================
   11. LEARN (#learn)
   ============================================================ */
.about-learn {
  background: linear-gradient(135deg, var(--bg-dark) 0%, #18181a 50%, #1e1e21 100%) !important;
  padding: var(--section-padding) 24px !important;
  text-align: center !important;
  position: relative !important;
}

.about-learn::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 10%, rgba(201, 168, 76, 0.15) 50%, transparent 90%) !important;
}

.about-learn h1,
.about-learn h3 {
  margin-bottom: 24px !important;
}

.about-learn p,
.learn-subtitle {
  color: var(--text-secondary) !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
}

/* Learn blocks */
.block-1, .block-2, .block-3, .block-4, .block-5, .block-6 {
  padding: var(--section-padding) 24px !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
}

.block-1, .block-3, .block-5 {
  background: var(--bg-dark) !important;
}

.block-2, .block-6 {
  background: var(--bg-dark-elevated) !important;
}

/* Pricing block (block-4) */
.block-4 {
  background: var(--bg-dark) !important;
}

.block-4 ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.block-4 ul li {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px !important;
  padding: 48px 32px !important;
  text-align: center !important;
  transition: var(--transition) !important;
  float: none !important;
  width: auto !important;
}

.block-4 ul li:nth-child(2) {
  transform: scale(1.05) !important;
  border-color: rgba(201, 168, 76, 0.25) !important;
  background: rgba(201, 168, 76, 0.04) !important;
}

.block-4 ul li:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-hover) !important;
}

.block-4 ul li:nth-child(2):hover {
  transform: scale(1.05) translateY(-8px) !important;
}

.block-4 .price {
  font-size: var(--fs-section) !important;
  font-family: 'Space Grotesk', var(--font-family) !important;
  font-weight: 700 !important;
  background: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin: 16px 0 !important;
  letter-spacing: -0.02em !important;
}

.block-4 h4 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 8px !important;
}

.block-4 ul li p {
  color: var(--text-secondary) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.block-4 button {
  background: linear-gradient(135deg, rgba(139, 115, 50, 0.15), rgba(201, 168, 76, 0.1)) !important;
  color: var(--gold-light) !important;
  border: 1px solid rgba(201, 168, 76, 0.2) !important;
  border-radius: 50px !important;
  padding: 14px 36px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  font-family: 'Space Grotesk', var(--font-family) !important;
  margin-top: 20px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.block-4 ul li:nth-child(2) button {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.25), rgba(226, 201, 126, 0.15)) !important;
  color: #fff !important;
  border: 1px solid rgba(201, 168, 76, 0.4) !important;
}

.block-4 button:hover {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.3), rgba(226, 201, 126, 0.2)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.15) !important;
  color: #fff !important;
}

/* ============================================================
   12. FOOTER (#footer)
   ============================================================ */
footer#footer,
footer {
  background: var(--bg-footer) !important;
  padding: 120px 0 40px !important;
  border-top: none !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ============================================================
   CREATIVE FOOTER — Mountains + Glow + Big CTA
   ============================================================ */

/* Mountains background */
.footer-mountains {
  position: absolute !important;
  bottom: 0 !important;
  left: -5% !important;
  right: -5% !important;
  height: 550px !important;
  background:
    url('https://abrakadabra.fun/uploads/posts/2022-02/1644680796_1-abrakadabra-fun-p-gori-na-temnom-fone-1.jpg')
    center bottom / cover no-repeat !important;
  opacity: 0.65 !important;
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 50%, transparent 85%) !important;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 50%, transparent 85%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: mountainsFloat 6s ease-in-out infinite !important;
}

@keyframes mountainsFloat {
  0%, 100% { transform: scale(1.05) translateY(0); filter: brightness(0.7); }
  25% { transform: scale(1.12) translateY(-16px); filter: brightness(1.1); }
  50% { transform: scale(1.08) translateY(-6px); filter: brightness(0.85); }
  75% { transform: scale(1.1) translateY(-12px); filter: brightness(1.05); }
}

/* Northern lights / aurora effect over mountains */
.footer-mountains::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 40% 30% at 25% 30%, rgba(201, 168, 76, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 35% 40% at 75% 40%, rgba(201, 168, 76, 0.06) 0%, transparent 50%) !important;
  animation: auroraPulse 5s ease-in-out infinite alternate !important;
  pointer-events: none !important;
}

@keyframes auroraPulse {
  0% { opacity: 0.3; transform: translateX(-10px); }
  50% { opacity: 1; transform: translateX(10px); }
  100% { opacity: 0.5; transform: translateX(-5px); }
}

/* Ambient glow behind CTA — gold */
.footer-glow {
  position: absolute !important;
  top: 15% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 600px !important;
  height: 600px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.06) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: glowPulse 8s ease-in-out infinite !important;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.15); }
}

/* Big CTA section */
.footer-cta {
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  padding: 0 24px 80px !important;
}

.footer-headline {
  font-size: 56px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: var(--text-primary) !important;
  margin-bottom: 20px !important;
}

.gradient-text {
  background: linear-gradient(135deg, #e2c97e 0%, #c9a84c 30%, #8b7332 50%, #c9a84c 70%, #e2c97e 100%) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: textShimmer 6s ease-in-out infinite !important;
}

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

.footer-cta-sub {
  font-size: 18px !important;
  color: var(--text-secondary) !important;
  margin-bottom: 40px !important;
  max-width: 500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.footer-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, rgba(139, 115, 50, 0.25), rgba(201, 168, 76, 0.15)) !important;
  border: 1px solid rgba(201,168,76,0.35) !important;
  color: var(--gold-light) !important;
  padding: 18px 40px !important;
  border-radius: 60px !important;
  font-family: 'Space Grotesk', var(--font-family) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.4s var(--ease-apple) !important;
  position: relative !important;
  overflow: hidden !important;
}

.footer-cta-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 60px !important;
  padding: 1px !important;
  background: conic-gradient(from var(--angle, 0deg), transparent 35%, rgba(201,168,76,0.6) 50%, transparent 65%) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  animation: borderRotate 4s linear infinite !important;
  pointer-events: none !important;
}

.footer-cta-btn:hover {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.35), rgba(226, 201, 126, 0.2)) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 40px rgba(201, 168, 76, 0.12) !important;
  color: #fff !important;
  border-color: rgba(201, 168, 76, 0.5) !important;
}

.footer-cta-btn svg {
  transition: transform 0.3s ease !important;
}

.footer-cta-btn:hover svg {
  transform: translateX(4px) !important;
}

/* Footer grid — 4 columns */
.footer-grid {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 40px !important;
  padding: 60px 0 !important;
  border-top: 1px solid rgba(201, 168, 76, 0.1) !important;
}

.footer-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.footer-logo {
  font-family: 'Playfair Display', serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  background: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 4px !important;
}

.footer-tagline {
  font-size: 14px !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}

.footer-col h4 {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--text-muted) !important;
  margin-bottom: 8px !important;
}

.footer-col a {
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: color 0.3s ease !important;
  padding: 2px 0 !important;
}

.footer-col a:hover {
  color: var(--gold-light) !important;
}

.footer-col p {
  font-size: 14px !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
}

/* Bottom bar */
.footer-bottom {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding-top: 32px !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

.footer-dot {
  opacity: 0.3 !important;
}

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

.footer-head {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  margin-bottom: 48px !important;
}

.footer-head a {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 50px !important;
  padding: 14px 32px !important;
  color: var(--text-secondary) !important;
  font-size: var(--fs-small) !important;
  font-weight: 500 !important;
  transition: var(--transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.footer-head a::after,
.footer-head a::before {
  display: none !important;
  content: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
}

.footer-head a:hover {
  background: var(--glass-bg-strong) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.footer-contacts {
  text-align: center !important;
  padding: 40px 0 !important;
}

.footer-contacts span,
.footer-contacts span[itemprop] {
  color: var(--text-secondary) !important;
  font-size: 15px !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.copy-lang {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  margin-top: 24px !important;
}

a.sitemap {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  transition: var(--transition) !important;
}

a.sitemap:hover {
  color: var(--accent) !important;
}

.social .ft-news {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--card-radius) !important;
  padding: 24px !important;
  margin-top: 32px !important;
}

/* Hide hotlog counter */
.counter {
  display: none !important;
}

/* ============================================================
   13. WHATSAPP BUTTON
   ============================================================ */
.whatsapp {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 999 !important;
}

.whatsapp a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: var(--whatsapp-green) !important;
  color: #fff !important;
  font-size: 28px !important;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4) !important;
  transition: var(--transition) !important;
  position: relative !important;
  z-index: 2 !important;
}

.whatsapp a:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5) !important;
  color: #fff !important;
}

.circlephone {
  position: absolute !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
}

.circle-fill {
  position: absolute !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: rgba(37, 211, 102, 0.2) !important;
  animation: ripple 2s ease-out infinite !important;
  top: 0 !important;
  left: 0 !important;
}

/* ============================================================
   14. MODAL
   ============================================================ */
#modal.modal_div,
.modal_div {
  background: rgba(28, 28, 30, 0.95) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--shadow-hover) !important;
  padding: var(--card-padding) !important;
  color: var(--text-primary) !important;
}

#overlay {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.modal_close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}

.modal_close:hover {
  background: var(--glass-bg-strong) !important;
}

/* ============================================================
   15. KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

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

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

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

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes heroReveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ============================================================
   16. ANIMATION CLASSES (for JS)
   ============================================================ */
.zoom-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.zoom-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.zoom-fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.zoom-fade-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.zoom-fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.zoom-fade-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.zoom-scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.zoom-scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

.zoom-counter {
  font-variant-numeric: tabular-nums;
}

.zoom-hero-title {
  animation: heroReveal 1.2s var(--ease-apple) forwards;
}

.zoom-stagger > *:nth-child(1) { transition-delay: 0s; }
.zoom-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.zoom-stagger > *:nth-child(3) { transition-delay: 0.2s; }
.zoom-stagger > *:nth-child(4) { transition-delay: 0.3s; }
.zoom-stagger > *:nth-child(5) { transition-delay: 0.4s; }
.zoom-stagger > *:nth-child(6) { transition-delay: 0.5s; }
.zoom-stagger > *:nth-child(7) { transition-delay: 0.6s; }
.zoom-stagger > *:nth-child(8) { transition-delay: 0.7s; }
.zoom-stagger > *:nth-child(9) { transition-delay: 0.8s; }
.zoom-stagger > *:nth-child(10) { transition-delay: 0.9s; }

/* ============================================================
   17. UTILITY OVERRIDES (Legacy Style Removal)
   ============================================================ */

/* Override old green accent */
*[style*="91A8A0"],
*[style*="#91A8A0"],
*[style*="rgb(145, 168, 160)"] {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Override old font everywhere */
*[style*="Kelly Slab"],
*[style*="kelly slab"] {
  font-family: var(--font-family) !important;
}

/* Override old float layouts */
.about-us li,
.company_description li,
.why-we li,
.portfolio-content li {
  float: none !important;
}

/* Override old box borders */
.about-us li,
.tab,
.contacts_information,
.contacts_form-container {
  border: none !important;
  box-shadow: none !important;
}

/* Re-apply glass borders where needed */
.about-us li,
.contacts_information {
  border: 1px solid var(--glass-border) !important;
}

/* Force remove old backgrounds */
.tab,
#main-page,
#company,
#portfolio-page,
#contacts-page,
#why-we,
#learn {
  background: var(--bg-dark) !important;
  color: var(--text-primary) !important;
}

/* Override old link colors everywhere */
.tab a,
.about-us a,
.footer-contacts a {
  color: var(--text-secondary) !important;
  transition: color 0.3s var(--ease-apple) !important;
}

.tab a:hover,
.about-us a:hover,
.footer-contacts a:hover {
  color: var(--text-primary) !important;
}

/* Force Inter on all elements */
* {
  font-family: var(--font-family);
}

/* ============================================================
   18. SCROLLBAR (WebKit)
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Firefox scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) var(--bg-dark);
}

/* ============================================================
   19. RESPONSIVE — TABLET (769px - 1024px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --fs-hero: 56px;
    --fs-section: 40px;
    --fs-subheading: 24px;
    --section-padding: 80px;
  }

  .about-us {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  .company_description {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #stage.portfolio-content {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .block-4 ul {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .tabs-list {
    gap: 24px !important;
  }

  .tabs-list li a {
    font-size: 12px !important;
  }
}

/* ============================================================
   20. RESPONSIVE — MOBILE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --fs-hero: 36px;
    --fs-section: 28px;
    --fs-subheading: 20px;
    --section-padding: 56px;
    --card-padding: 24px;
    --card-radius: 16px;
  }

  /* Hero mobile */
  .hero-section {
    min-height: 80vh !important;
    padding: 80px 16px 48px !important;
  }

  .hero-split {
    flex-direction: column !important;
    padding: 100px 20px 48px !important;
    gap: 32px !important;
    text-align: center !important;
  }

  .hero-left {
    text-align: center !important;
  }

  .hero-left h1 {
    text-align: center !important;
  }

  .hero-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .hero-canvas {
    width: 280px !important;
    height: 280px !important;
  }

  .hero-content h1 {
    font-size: var(--fs-hero) !important;
    line-height: 1.1 !important;
  }

  .hero-subtitle {
    font-size: 17px !important;
  }

  /* Stats mobile */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .stat-item {
    padding: 24px 12px !important;
  }

  .stat-number {
    font-size: 40px !important;
  }

  .stat-suffix {
    font-size: 22px !important;
  }

  .stat-label {
    font-size: 11px !important;
    margin-top: 8px !important;
  }

  /* Header mobile */
  header {
    padding: 0 !important;
    height: 60px !important;
  }

  .zn-bar {
    flex-direction: row !important;
    padding: 0 16px !important;
    justify-content: space-between !important;
  }

  .zn-logo {
    margin-bottom: 0 !important;
  }

  .zn-logo img {
    max-height: 32px !important;
  }

  .header-inner {
    padding: 0 16px !important;
  }

  .logo img {
    max-height: 30px !important;
  }

  .logo-text {
    display: none !important;
  }

  .tab h3 {
    font-size: 28px !important;
    margin-bottom: 32px !important;
    padding: 0 16px !important;
  }

  /* Nav — hide desktop, show hamburger */
  .main-menu-container {
    display: none !important;
  }

  .header-right {
    display: none !important;
  }

  .tcon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: rgba(201, 168, 76, 0.06) !important;
    border: 1px solid rgba(201, 168, 76, 0.15) !important;
  }

  .tabs-wrap {
    padding-top: 60px !important;
  }

  .top-bar-center,
  .top-bar-left {
    display: none !important;
  }

  /* Hero H1 */
  #main-page h1 {
    font-size: var(--fs-hero) !important;
    padding: 0 16px !important;
    margin-bottom: 24px !important;
  }

  /* Platform cards */
  .about-us {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 40px 16px !important;
  }

  .about-us li {
    padding: 20px 16px !important;
    border-radius: 14px !important;
  }

  .about-us li::before {
    border-radius: 14px !important;
  }

  .adv-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
  }

  .adv-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .about-us li h3 {
    font-size: 15px !important;
    margin: 0 0 4px !important;
  }

  .about-us li p {
    font-size: 12px !important;
  }

  /* Portfolio */
  #stage.portfolio-content {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }

  .portfolio-content li {
    border-radius: var(--card-radius) !important;
  }

  /* Contacts */
  .contacts {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 48px 16px !important;
  }

  .contacts_information {
    padding: 24px !important;
    border-radius: var(--card-radius) !important;
  }

  /* Company */
  .company_description {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .company_specifics ul {
    grid-template-columns: 1fr !important;
  }

  /* Pricing */
  .block-4 ul {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .block-4 ul li:nth-child(2) {
    transform: none !important;
  }

  .block-4 ul li:nth-child(2):hover {
    transform: translateY(-4px) !important;
  }

  /* Creative Footer mobile */
  footer#footer, footer {
    padding: 80px 0 32px !important;
  }

  .footer-container {
    padding: 0 16px !important;
  }

  .footer-headline {
    font-size: 36px !important;
  }

  .footer-cta-sub {
    font-size: 15px !important;
  }

  .footer-cta-btn {
    padding: 16px 32px !important;
    font-size: 15px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
    padding: 40px 0 !important;
  }

  .footer-mountains {
    height: 250px !important;
  }

  .footer-glow {
    width: 300px !important;
    height: 300px !important;
  }

  .footer-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .footer-head a {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }

  /* Sections */
  .about-company,
  .inner-stages,
  .about-learn,
  .block-1, .block-2, .block-3, .block-4, .block-5, .block-6 {
    padding: 48px 16px !important;
  }

  /* Pre-footer */
  .pre-footer-info {
    padding: 0 16px 48px !important;
  }

  .pre-footer-info h1 {
    font-size: 24px !important;
  }

  .pre-footer-info p {
    font-size: 15px !important;
  }

  /* Why we */
  .why-we li p {
    padding: 20px 20px 20px 56px !important;
    font-size: 14px !important;
    border-radius: var(--card-radius) !important;
  }

  .why-we li p::before {
    left: 16px !important;
    font-size: 18px !important;
  }

  /* Product popup */
  .product-popup {
    width: 95% !important;
    padding: 24px !important;
    border-radius: 16px !important;
  }

  /* WhatsApp */
  .whatsapp {
    bottom: 16px !important;
    right: 16px !important;
  }

  .whatsapp a {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
  }

  .circlephone,
  .circle-fill {
    width: 48px !important;
    height: 48px !important;
  }

  /* Mobile menu items */
  .tabs-list-mob li a {
    font-size: 20px !important;
    padding: 14px 20px !important;
  }
}

/* ============================================================
   21. RESPONSIVE — SMALL MOBILE (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --fs-hero: 28px;
    --fs-section: 24px;
    --card-padding: 20px;
    --card-radius: 14px;
  }

  body {
    padding: 0 !important;
  }

  /* Hero 480 */
  .hero-section {
    min-height: 70vh !important;
    padding: 64px 12px 40px !important;
  }

  .hero-content h1 {
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  .hero-subtitle {
    font-size: 15px !important;
  }

  /* Stats 480 */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .stat-item {
    padding: 20px 8px !important;
    border-radius: 12px !important;
  }

  .stat-number {
    font-size: 32px !important;
  }

  .stat-suffix {
    font-size: 18px !important;
  }

  .stat-label {
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
  }

  .stats-section {
    padding: 40px 12px !important;
  }

  header {
    padding: 0 !important;
    height: 48px !important;
  }

  .header-inner {
    padding: 0 12px !important;
  }

  .logo img {
    max-height: 26px !important;
  }

  .logo-text {
    display: none !important;
  }

  .tab h3 {
    font-size: 24px !important;
    margin-bottom: 28px !important;
  }

  #main-page h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
    padding: 0 12px !important;
  }

  .tabs-wrap {
    padding-top: 48px !important;
  }

  .about-us {
    padding: 40px 12px !important;
    gap: 12px !important;
  }

  .about-us li {
    padding: 24px 20px !important;
    border-radius: var(--card-radius) !important;
  }

  .contacts {
    padding: 40px 12px !important;
  }

  .contacts_information {
    padding: 20px !important;
    border-radius: var(--card-radius) !important;
  }

  .contacts_form-container input[type="text"],
  .contacts_form-container input[type="email"],
  .contacts_form-container input[type="tel"] {
    height: 48px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }

  .contacts_form-container textarea {
    padding: 12px 16px !important;
    min-height: 120px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  .contacts_form-container button[type="submit"],
  .contacts_form-container input[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  #stage.portfolio-content {
    gap: 12px !important;
    padding: 0 12px !important;
  }

  .portfolio-content li {
    border-radius: var(--card-radius) !important;
  }

  .footer-head a {
    padding: 10px 20px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  .tabs-list-mob li a {
    font-size: 18px !important;
    padding: 12px 16px !important;
  }

  .pre-footer-info {
    padding: 0 12px 40px !important;
  }

  .pre-footer-info h1 {
    font-size: 22px !important;
  }

  .pre-footer-info p {
    font-size: 14px !important;
  }

  /* Sections */
  .about-company,
  .inner-stages,
  .about-learn,
  .block-1, .block-2, .block-3, .block-4, .block-5, .block-6 {
    padding: 40px 12px !important;
  }

  .why-we li p {
    padding: 16px 16px 16px 48px !important;
    font-size: 13px !important;
  }

  .why-we li p::before {
    left: 12px !important;
    font-size: 16px !important;
  }
}

/* ============================================================
   21b. MOBILE CTA BUTTON + CONTACT POPUP
   ============================================================ */

/* Mobile CTA — hidden on desktop */
.mobile-cta-btn {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    background: var(--gold-gradient) !important;
    border: none !important;
    color: #1d1d1f !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 12px rgba(201,168,76,0.3) !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
  }

  .mobile-cta-btn:active {
    transform: scale(0.95) !important;
    box-shadow: 0 1px 6px rgba(201,168,76,0.2) !important;
  }
}

/* Contact Popup Overlay */
.contact-popup-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.contact-popup-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.contact-popup {
  background: #1a1a1c !important;
  border: 1px solid rgba(201,168,76,0.15) !important;
  border-radius: 24px 24px 0 0 !important;
  padding: 28px 24px 32px !important;
  width: 100% !important;
  max-width: 480px !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  transform: translateY(100%) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

.contact-popup-overlay.active .contact-popup {
  transform: translateY(0) !important;
}

.contact-popup-close {
  position: absolute !important;
  top: 16px !important;
  right: 20px !important;
  background: none !important;
  border: none !important;
  color: var(--text-secondary) !important;
  font-size: 28px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 4px !important;
  transition: color 0.2s ease !important;
}

.contact-popup-close:hover {
  color: var(--text-primary) !important;
}

.contact-popup h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin-bottom: 20px !important;
}

.contact-popup-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.contact-popup-form input,
.contact-popup-form textarea {
  width: 100% !important;
  padding: 12px 16px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

.contact-popup-form input:focus,
.contact-popup-form textarea:focus {
  border-color: var(--gold) !important;
}

.contact-popup-form input::placeholder,
.contact-popup-form textarea::placeholder {
  color: var(--text-muted) !important;
}

.contact-popup-form button[type="submit"] {
  width: 100% !important;
  padding: 14px !important;
  background: var(--gold-gradient) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #1d1d1f !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  margin-top: 4px !important;
}

.contact-popup-form button[type="submit"]:active {
  transform: scale(0.98) !important;
}

.contact-popup-links {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.contact-popup-link {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.contact-popup-link:hover,
.contact-popup-link:active {
  background: rgba(255,255,255,0.1) !important;
  color: var(--text-primary) !important;
}

/* Desktop: center popup instead of bottom sheet */
@media (min-width: 769px) {
  .contact-popup-overlay {
    align-items: center !important;
  }

  .contact-popup {
    border-radius: 24px !important;
    max-width: 440px !important;
    transform: translateY(30px) !important;
  }

  .contact-popup-overlay.active .contact-popup {
    transform: translateY(0) !important;
  }
}

/* ============================================================
   22. PRINT STYLES
   ============================================================ */
@media print {
  * {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  header,
  .whatsapp,
  .counter,
  .tcon {
    display: none !important;
  }

  .tab {
    padding-top: 0 !important;
  }
}

/* ============================================================
   23. ACCESSIBILITY — Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .zoom-fade-up,
  .zoom-fade-left,
  .zoom-fade-right,
  .zoom-scale-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   24. HIGH CONTRAST / FORCED COLORS
   ============================================================ */
@media (forced-colors: active) {
  :root {
    --glass-border: CanvasText;
    --accent: LinkText;
  }
}

/* ============================================================
   25. PREMIUM NAV — zn- prefix, zero legacy conflicts
   Built entirely by JS (initPremiumHeader), styled here
   ============================================================ */

/* Hide legacy nav (JS also hides it) */
.main-menu-container,
.tabs-list-mob {
  display: none !important;
}

/* --- Header bar layout — logo on top, nav below --- */
.zn-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 12px 32px 0 !important;
  height: 100% !important;
  gap: 2px !important;
}

/* --- Logo — large, above nav --- */
.zn-logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  margin-bottom: 2px !important;
}

.zn-logo img {
  max-height: 70px !important;
  width: auto !important;
  filter: brightness(1.15) drop-shadow(0 0 16px rgba(201,168,76,0.3)) !important;
}

/* --- Nav below logo --- */
.zn-nav {
  display: flex !important;
  justify-content: center !important;
}

.zn-list {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* --- Nav items --- */
.zn-item {
  position: relative !important;
}

.zn-link {
  display: block !important;
  color: rgba(255,255,255,0.55) !important;
  font-family: -apple-system, 'SF Pro Text', 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 28px 16px !important;
  transition: color 0.3s ease !important;
  white-space: nowrap !important;
}

.zn-link:hover,
.zn-item:hover > .zn-link {
  color: #fff !important;
}

.zn-active > .zn-link {
  color: var(--gold-light, #e2c97e) !important;
  font-weight: 500 !important;
}

/* Underline indicator */
.zn-item::after {
  content: '' !important;
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  width: 0 !important;
  height: 1px !important;
  background: var(--gold, #c9a84c) !important;
  transition: all 0.3s ease !important;
  transform: translateX(-50%) !important;
}

.zn-active::after {
  width: 16px !important;
}

.zn-item:hover::after {
  width: calc(100% - 32px) !important;
  opacity: 0.5 !important;
}

/* --- Dropdown --- */
.zn-dropdown {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(18,18,20,0.95) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
  padding: 6px !important;
  min-width: 180px !important;
  z-index: 1002 !important;
}

.zn-has-drop:hover .zn-dropdown {
  display: block !important;
}

.zn-dropdown a {
  display: block !important;
  padding: 10px 16px !important;
  color: rgba(255,255,255,0.6) !important;
  font-family: -apple-system, 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.zn-dropdown a:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #fff !important;
}

/* --- Phone CTA --- */
.zn-cta {
  color: rgba(255,255,255,0.4) !important;
  font-family: -apple-system, 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  transition: color 0.3s ease !important;
}

.zn-cta:hover {
  color: var(--gold-light, #e2c97e) !important;
}

/* --- Burger button (mobile) --- */
.tcon {
  display: none !important;
}

/* --- Kill legacy blue everywhere --- */
#main li.active,
#main .border,
#main .about-learn {
  border-color: transparent !important;
}

/* ============================================================
   25b. RESPONSIVE NAV
   ============================================================ */
@media (max-width: 768px) {
  .zn-nav {
    display: none !important;
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(14,14,16,0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 1000 !important;
    padding: 32px 24px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .zn-nav.zn-open {
    display: flex !important;
  }

  .zn-list {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .zn-link {
    font-size: 16px !important;
    letter-spacing: 0.08em !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }

  .zn-item::after {
    display: none !important;
  }

  .zn-cta {
    display: none !important;
  }

  .tcon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: rgba(201,168,76,0.06) !important;
    border: 1px solid rgba(201,168,76,0.15) !important;
    cursor: pointer !important;
  }

  .zn-dropdown {
    position: static !important;
    transform: none !important;
    background: none !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 0 16px !important;
    min-width: auto !important;
  }

  .zn-has-drop .zn-dropdown {
    display: block !important;
  }

  .zn-dropdown a {
    padding: 12px 0 !important;
    font-size: 14px !important;
    border-radius: 0 !important;
    color: rgba(255,255,255,0.4) !important;
  }

  .zn-bar {
    padding: 0 16px !important;
  }
}

/* ============================================================
   26. INJECTED BLOCKS — Premium 2026 Design System
   ============================================================ */

/* --- Global reset for all injected blocks --- */
[class^="zoom-"],
[class*=" zoom-"] {
  box-sizing: border-box !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  border: none !important;
  float: none !important;
  clear: both !important;
}

[class^="zoom-"] *,
[class*=" zoom-"] * {
  box-sizing: border-box !important;
  font-family: inherit !important;
}

/* Restore borders where needed */
.zoom-info-card,
.zoom-eco-item,
.zoom-media-card,
.zoom-guarantee-card,
.zoom-result-card,
.zoom-faq-item,
.zoom-cta-inner,
.zoom-eco-phone {
  border: 1px solid rgba(201,168,76,0.08) !important;
}

/* --- Section Title (shared) --- */
.zoom-section-title {
  text-align: center !important;
  margin-bottom: 64px !important;
}

.zoom-section-title h2 {
  font-family: 'Space Grotesk', var(--font-family) !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 0 16px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.zoom-section-title .gold-line {
  display: block !important;
  width: 48px !important;
  height: 2px !important;
  background: var(--gold-gradient) !important;
  margin: 0 auto 16px !important;
  border-radius: 2px !important;
}

.zoom-section-title p {
  color: var(--text-muted) !important;
  font-size: 16px !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
  font-weight: 300 !important;
}

/* --- ZOOM Services — Apple frosted glass cards --- */
.zoom-infographic {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 48px 24px 64px !important;
  position: relative !important;
}

.zoom-info-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  margin-top: 36px !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

.zoom-info-card {
  background: rgba(20,20,22,0.85) !important;
  backdrop-filter: blur(40px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
  padding: 28px 24px !important;
  transition: background 0.4s ease !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  border: none !important;
  border-radius: 0 !important;
}

.zoom-info-card:hover {
  background: rgba(201,168,76,0.04) !important;
}

.zoom-info-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 16px !important;
  font-size: 20px !important;
  border: none !important;
}

.zoom-info-card h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.01em !important;
}

.zoom-info-card p {
  font-size: 13px !important;
  color: rgba(255,255,255,0.4) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  font-weight: 400 !important;
  flex: 1 !important;
}

.zoom-info-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.3) !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  margin-top: 16px !important;
}

.zoom-info-more:hover {
  color: var(--gold, #c9a84c) !important;
  gap: 8px !important;
}

.zoom-info-more::after {
  content: '→' !important;
  font-size: 11px !important;
  transition: transform 0.3s ease !important;
}

.zoom-info-more:hover::after {
  transform: translateX(2px) !important;
}

/* --- ZOOM About Infographic --- */
.zoom-about-info {
  text-align: center !important;
  margin-bottom: 32px !important;
}

.zoom-about-headline {
  font-family: 'Space Grotesk', var(--font-family) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.01em !important;
}

.zoom-about-sub {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin: 0 0 32px !important;
}

.zoom-about-features {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

.zoom-about-feat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: center !important;
}

.zoom-about-feat-icon {
  font-size: 24px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: rgba(201,168,76,0.06) !important;
  border: 1px solid rgba(201,168,76,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.zoom-about-feat strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.zoom-about-feat span {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  line-height: 1.4 !important;
}

@media (max-width: 768px) {
  .zoom-about-features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .zoom-about-headline {
    font-size: 22px !important;
  }
}

@media (max-width: 480px) {
  .zoom-about-headline {
    font-size: 18px !important;
  }

  .zoom-about-feat-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
}

/* --- Process Block (4 steps) --- */
.zoom-process {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 100px 24px !important;
  position: relative !important;
}

.zoom-process-track {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  position: relative !important;
  margin-top: 56px !important;
}

/* Connecting line */
.zoom-process-track::before {
  content: '' !important;
  position: absolute !important;
  top: 40px !important;
  left: 12.5% !important;
  right: 12.5% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), rgba(201,168,76,0.3), transparent) !important;
}

.zoom-step {
  text-align: center !important;
  padding: 0 16px !important;
  position: relative !important;
}

.zoom-step-num {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  background: rgba(201,168,76,0.06) !important;
  border: 1px solid rgba(201,168,76,0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 24px !important;
  font-family: 'Space Grotesk', var(--font-family) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  position: relative !important;
  z-index: 2 !important;
  transition: all 0.5s var(--ease-apple) !important;
}

.zoom-step:hover .zoom-step-num {
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.06)) !important;
  box-shadow: 0 0 40px rgba(201,168,76,0.15), 0 0 0 8px rgba(201,168,76,0.04) !important;
  transform: scale(1.1) !important;
}

.zoom-step h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 0 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.zoom-step p {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-weight: 300 !important;
}

/* --- Ecosystem Block --- */
.zoom-ecosystem {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 100px 24px !important;
  position: relative !important;
}

.zoom-eco-visual {
  display: grid !important;
  grid-template-columns: 1fr 2fr 1fr !important;
  gap: 24px !important;
  align-items: center !important;
  margin-top: 56px !important;
}

.zoom-eco-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.zoom-eco-item {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(201,168,76,0.08) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  transition: all 0.4s var(--ease-apple) !important;
}

.zoom-eco-item:hover {
  border-color: rgba(201,168,76,0.25) !important;
  transform: translateX(4px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
}

.zoom-eco-side:last-child .zoom-eco-item:hover {
  transform: translateX(-4px) !important;
}

.zoom-eco-dot {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(201,168,76,0.04)) !important;
  border: 1px solid rgba(201,168,76,0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.zoom-eco-item span {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  letter-spacing: 0.02em !important;
}

/* Ecosystem Center — Phone mockup */
.zoom-eco-center {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 360px !important;
}

.zoom-eco-phone {
  width: 200px !important;
  height: 400px !important;
  border-radius: 36px !important;
  background: linear-gradient(160deg, #1e1e21 0%, #141416 100%) !important;
  border: 2px solid rgba(201,168,76,0.2) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 60px rgba(201,168,76,0.06), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  position: relative !important;
  overflow: hidden !important;
}

.zoom-eco-phone::before {
  content: 'ZOOM' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-family: 'Space Grotesk', var(--font-family) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  background: var(--gold-shimmer) !important;
  background-size: 200% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: shimmer 3s linear infinite !important;
}

.zoom-eco-phone::after {
  content: '' !important;
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60px !important;
  height: 4px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,0.1) !important;
}

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

/* Pulsing connection lines from center */
.zoom-eco-center::before,
.zoom-eco-center::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 10%, rgba(201,168,76,0.15) 30%, rgba(201,168,76,0.15) 70%, transparent 90%) !important;
}

/* --- СМИ О НАС Redesign --- */
.zoom-media-section {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 80px 24px !important;
}

.zoom-media-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin-top: 48px !important;
}

.zoom-media-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(201,168,76,0.08) !important;
  border-radius: 20px !important;
  padding: 36px !important;
  transition: all 0.5s var(--ease-apple) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  overflow: hidden !important;
}

.zoom-media-card:hover {
  border-color: rgba(201,168,76,0.2) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
}

.zoom-media-logo {
  width: 60px !important;
  height: 60px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.zoom-media-logo img {
  max-width: 40px !important;
  max-height: 40px !important;
  filter: brightness(1.2) !important;
}

.zoom-media-text h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 0 8px !important;
}

.zoom-media-text p {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
  margin: 0 0 12px !important;
}

.zoom-media-link {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.3s ease !important;
}

.zoom-media-link:hover {
  color: var(--gold-light) !important;
  gap: 10px !important;
}

/* --- Stats / Numbers Block --- */
.zoom-stats {
  padding: 80px 24px !important;
  position: relative !important;
  overflow: hidden !important;
}

.zoom-stats::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(201,168,76,0.03) 0%, transparent 50%, rgba(201,168,76,0.02) 100%) !important;
  pointer-events: none !important;
}

.zoom-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}

.zoom-stat-item {
  text-align: center !important;
  padding: 32px 16px !important;
}

.zoom-stat-num {
  font-family: 'Space Grotesk', var(--font-family) !important;
  font-size: 56px !important;
  font-weight: 700 !important;
  background: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}

.zoom-stat-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

/* --- Guarantees Block --- */
.zoom-guarantees {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 100px 24px !important;
}

.zoom-guarantees-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 56px !important;
}

.zoom-guarantee-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(201,168,76,0.08) !important;
  border-radius: 20px !important;
  padding: 36px 28px !important;
  text-align: center !important;
  transition: all 0.5s var(--ease-apple) !important;
}

.zoom-guarantee-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(201,168,76,0.2) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
}

.zoom-guarantee-icon {
  font-size: 32px !important;
  margin-bottom: 20px !important;
  display: block !important;
}

.zoom-guarantee-card h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 0 10px !important;
}

.zoom-guarantee-card p {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* --- Tech Stack Block --- */
.zoom-tech {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 80px 24px !important;
}

.zoom-tech-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  margin-top: 40px !important;
}

.zoom-tech-pill {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 50px !important;
  padding: 10px 22px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  transition: all 0.3s ease !important;
  cursor: default !important;
}

.zoom-tech-pill:hover {
  border-color: rgba(201,168,76,0.25) !important;
  color: var(--gold-light) !important;
  background: rgba(201,168,76,0.06) !important;
}

/* --- FAQ Block --- */
.zoom-faq {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 100px 24px !important;
}

.zoom-faq-list {
  margin-top: 48px !important;
}

.zoom-faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 0 !important;
}

.zoom-faq-q {
  width: 100% !important;
  background: none !important;
  border: none !important;
  color: var(--text-primary) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  font-family: var(--font-family) !important;
  text-align: left !important;
  padding: 24px 40px 24px 0 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: color 0.3s ease !important;
  display: block !important;
}

.zoom-faq-q::after {
  content: '+' !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 20px !important;
  color: var(--gold) !important;
  transition: transform 0.3s ease !important;
}

.zoom-faq-item.active .zoom-faq-q::after {
  content: '−' !important;
}

.zoom-faq-q:hover {
  color: var(--gold-light) !important;
}

.zoom-faq-a {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.4s var(--ease-apple), padding 0.4s ease !important;
  padding: 0 !important;
}

.zoom-faq-item.active .zoom-faq-a {
  max-height: 300px !important;
  padding: 0 0 24px !important;
}

.zoom-faq-a p {
  color: var(--text-muted) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* --- CTA Banner --- */
.zoom-cta {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 80px 24px !important;
}

.zoom-cta-inner {
  background: linear-gradient(135deg, rgba(201,168,76,0.08) 0%, rgba(201,168,76,0.02) 100%) !important;
  border: 1px solid rgba(201,168,76,0.15) !important;
  border-radius: 28px !important;
  padding: 64px 48px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.zoom-cta-inner::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  right: -20% !important;
  width: 400px !important;
  height: 400px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(201,168,76,0.06), transparent 70%) !important;
  pointer-events: none !important;
}

.zoom-cta h3 {
  font-family: 'Space Grotesk', var(--font-family) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 0 16px !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
}

.zoom-cta p {
  color: var(--text-muted) !important;
  font-size: 16px !important;
  max-width: 480px !important;
  margin: 0 auto 32px !important;
  position: relative !important;
  z-index: 1 !important;
}

.zoom-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, rgba(139,115,50,0.4), rgba(201,168,76,0.25)) !important;
  color: var(--gold-light) !important;
  border: 1px solid rgba(201,168,76,0.35) !important;
  border-radius: 14px !important;
  padding: 18px 40px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: 'Space Grotesk', var(--font-family) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  transition: all 0.4s var(--ease-apple) !important;
  position: relative !important;
  z-index: 1 !important;
  cursor: pointer !important;
}

.zoom-cta-btn:hover {
  background: linear-gradient(135deg, rgba(139,115,50,0.6), rgba(201,168,76,0.4)) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(201,168,76,0.2) !important;
}

/* --- Client Results Block --- */
.zoom-results {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 80px 24px !important;
}

.zoom-results-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  margin-top: 48px !important;
}

.zoom-result-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(201,168,76,0.08) !important;
  border-radius: 20px !important;
  padding: 36px !important;
  transition: all 0.4s ease !important;
}

.zoom-result-card:hover {
  border-color: rgba(201,168,76,0.2) !important;
  transform: translateY(-4px) !important;
}

.zoom-result-card .result-metric {
  font-family: 'Space Grotesk', var(--font-family) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  background: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 8px !important;
}

.zoom-result-card h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 0 8px !important;
}

.zoom-result-card p {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* --- Footer Lead Gen Form --- */
.zoom-footer-form {
  position: relative !important;
  z-index: 1 !important;
  max-width: 560px !important;
  margin: 48px auto 0 !important;
  padding: 0 24px !important;
}

.zoom-footer-form form {
  display: flex !important;
  gap: 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(201,168,76,0.15) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  transition: all 0.3s ease !important;
}

.zoom-footer-form form:focus-within {
  border-color: rgba(201,168,76,0.35) !important;
  box-shadow: 0 0 0 4px rgba(201,168,76,0.06) !important;
}

.zoom-footer-form input {
  flex: 1 !important;
  background: none !important;
  border: none !important;
  color: var(--text-primary) !important;
  font-size: 15px !important;
  font-family: var(--font-family) !important;
  padding: 14px 16px !important;
  outline: none !important;
}

.zoom-footer-form input::placeholder {
  color: var(--text-muted) !important;
}

.zoom-footer-form button {
  background: linear-gradient(135deg, rgba(139,115,50,0.4), rgba(201,168,76,0.3)) !important;
  color: var(--gold-light) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Space Grotesk', var(--font-family) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}

.zoom-footer-form button:hover {
  background: linear-gradient(135deg, rgba(201,168,76,0.5), rgba(226,201,126,0.35)) !important;
  color: #fff !important;
}

.zoom-footer-note {
  text-align: center !important;
  margin-top: 12px !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  opacity: 0.6 !important;
}

/* --- Floating Contact Widget (sticky CTA) --- */
.zoom-sticky-cta {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  z-index: 999 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(20,20,22,0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(201,168,76,0.2) !important;
  border-radius: 50px !important;
  padding: 12px 24px 12px 16px !important;
  cursor: pointer !important;
  transition: all 0.4s var(--ease-apple) !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
}

.zoom-sticky-cta.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.zoom-sticky-cta:hover {
  border-color: rgba(201,168,76,0.4) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 24px rgba(201,168,76,0.1) !important;
}

.zoom-sticky-cta .pulse-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  animation: pulseDot 2s ease-in-out infinite !important;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201,168,76,0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 8px rgba(201,168,76,0); }
}

.zoom-sticky-cta span {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}

/* --- Separator (gold gradient line between sections) --- */
.zoom-divider {
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

.zoom-divider::after {
  content: '' !important;
  display: block !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.15), transparent) !important;
}

/* ============================================================
   27. RESPONSIVE — INJECTED BLOCKS (Mobile)
   ============================================================ */
@media (max-width: 768px) {
  /* Nav — hide on mobile (burger handles it) */
  .tabs-wrap > .main-menu-container,
  #main .tabs-wrap > .main-menu-container {
    display: none !important;
  }

  /* Show mobile nav when burger is active */
  #main .tabs-list-mob,
  .tabs-list-mob {
    display: none !important;
  }

  .zoom-section-title h2 {
    font-size: 28px !important;
  }

  .zoom-info-grid {
    grid-template-columns: 1fr 1fr !important;
    border-radius: 16px !important;
  }

  .zoom-info-card {
    padding: 20px 16px !important;
  }

  .zoom-info-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  .zoom-info-card h4 {
    font-size: 13px !important;
  }

  .zoom-info-card p {
    font-size: 12px !important;
  }

  .zoom-info-more {
    font-size: 10px !important;
    margin-top: 12px !important;
  }

  .zoom-process-track {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 16px !important;
  }

  .zoom-process-track::before {
    display: none !important;
  }

  .zoom-step-num {
    width: 64px !important;
    height: 64px !important;
    font-size: 22px !important;
  }

  .zoom-eco-visual {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .zoom-eco-center {
    min-height: 280px !important;
    order: -1 !important;
  }

  .zoom-eco-phone {
    width: 160px !important;
    height: 320px !important;
  }

  .zoom-media-grid {
    grid-template-columns: 1fr !important;
  }

  .zoom-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .zoom-stat-num {
    font-size: 40px !important;
  }

  .zoom-guarantees-grid {
    grid-template-columns: 1fr !important;
  }

  .zoom-results-grid {
    grid-template-columns: 1fr !important;
  }

  .zoom-cta-inner {
    padding: 40px 24px !important;
  }

  .zoom-cta h3 {
    font-size: 24px !important;
  }

  .zoom-cta-btn {
    padding: 16px 32px !important;
    font-size: 13px !important;
  }

  .zoom-faq-q {
    font-size: 14px !important;
  }

  /* Improve platform cards mobile */
  .about-us {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 32px 16px !important;
  }

  .about-us li {
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    text-align: left !important;
  }

  .about-us li figure {
    margin: 0 !important;
    width: 52px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
  }

  .about-us li figure img {
    max-width: 28px !important;
  }

  .about-us li h3 {
    font-size: 14px !important;
    margin: 0 0 4px !important;
  }

  .about-us li .line {
    display: none !important;
  }

  .about-us li p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Contact form mobile */
  .contacts {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 56px 16px !important;
  }

  /* Portfolio mobile */
  #stage.portfolio-content {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }

  /* Company description mobile */
  .company_description {
    grid-template-columns: 1fr !important;
  }
}

  /* Footer form mobile */
  .zoom-footer-form form {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .zoom-footer-form input {
    text-align: center !important;
  }

  .zoom-footer-form button {
    width: 100% !important;
  }

  /* Sticky CTA mobile */
  .zoom-sticky-cta {
    bottom: 16px !important;
    left: 16px !important;
    right: auto !important;
    padding: 10px 20px 10px 14px !important;
    font-size: 12px !important;
  }

  /* Info cards mobile */
  .zoom-info-card {
    padding: 16px 14px !important;
  }

  .zoom-info-card h4 {
    font-size: 12px !important;
  }

  .zoom-info-card p {
    font-size: 11px !important;
  }

  /* Ecosystem items - compact */
  .zoom-eco-item {
    padding: 16px !important;
  }

  .zoom-eco-dot {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }

  /* Media cards mobile - stack */
  .zoom-media-card {
    padding: 24px !important;
    flex-direction: column !important;
  }

  /* Guarantee cards mobile - horizontal */
  .zoom-guarantee-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    text-align: left !important;
    padding: 24px !important;
  }

  .zoom-guarantee-icon {
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Result cards mobile */
  .zoom-result-card {
    padding: 24px !important;
  }

  .zoom-result-card .result-metric {
    font-size: 28px !important;
  }

  /* CTA block mobile */
  .zoom-cta-inner {
    padding: 36px 20px !important;
    border-radius: 20px !important;
  }

  .zoom-cta h3 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* Tech pills mobile */
  .zoom-tech-pill {
    padding: 8px 16px !important;
    font-size: 12px !important;
  }

  /* Section titles mobile */
  .zoom-section-title {
    margin-bottom: 40px !important;
  }

  .zoom-section-title h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  .zoom-section-title p {
    font-size: 14px !important;
  }

  /* Process/Ecosystem/Stats padding mobile */
  .zoom-infographic,
  .zoom-process,
  .zoom-ecosystem,
  .zoom-stats,
  .zoom-media-section,
  .zoom-guarantees,
  .zoom-tech,
  .zoom-faq,
  .zoom-cta,
  .zoom-results {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 480px) {
  .zoom-process-track {
    grid-template-columns: 1fr !important;
  }

  .zoom-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .zoom-stat-num {
    font-size: 32px !important;
  }

  .zoom-stat-label {
    font-size: 11px !important;
  }

  .zoom-section-title h2 {
    font-size: 22px !important;
  }

  .zoom-info-grid {
    grid-template-columns: 1fr !important;
    border-radius: 14px !important;
  }

  .zoom-eco-phone {
    width: 140px !important;
    height: 280px !important;
    border-radius: 28px !important;
  }

  .zoom-eco-phone::before {
    font-size: 22px !important;
  }

  .zoom-step-num {
    width: 56px !important;
    height: 56px !important;
    font-size: 20px !important;
  }

  .zoom-faq-q {
    font-size: 13px !important;
    padding: 20px 32px 20px 0 !important;
  }

  .zoom-faq-a p {
    font-size: 13px !important;
  }

  .zoom-footer-form {
    padding: 0 12px !important;
  }
}

/* ============================================================
   28. TABLET RESPONSIVE (769px - 1024px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .zoom-info-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .zoom-guarantees-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .zoom-eco-visual {
    grid-template-columns: 1fr 1.5fr 1fr !important;
  }

  .tabs-wrap > .main-menu-container {
    max-width: 600px !important;
  }

  .tabs-list li a {
    padding: 28px 12px !important;
    font-size: 11px !important;
  }
}

/* ============================================================
   END OF ZOOM-2026.CSS
   ============================================================ */