/* =========================================================
   VEXO — Digital Store Landing Page
   Design tokens: Primary Blue #2563EB, Text Dark #0F172A, BG #FFFFFF
   ========================================================= */

:root{
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #EFF4FF;
  --text-dark: #0F172A;
  --text-body: #475569;
  --text-muted: #94A3B8;
  --bg: #FFFFFF;
  --bg-soft: #F5F8FF;
  --bg-soft-2: #EEF2FF;
  --border: #E5EAF3;
  --dark-navy: #0B1220;
  --dark-navy-2: #0F172A;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(15,23,42,0.06);
  --shadow-md: 0 10px 30px rgba(15,23,42,0.08);
  --shadow-lg: 0 20px 50px rgba(37,99,235,0.15);
  --font-body: 'Inter', sans-serif;
  --font-head: 'Plus Jakarta Sans', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}

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

a{ text-decoration:none; color:inherit; }

ul{ list-style:none; }

button{ font-family:inherit; cursor:pointer; border:none; background:none; }

.section-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.text-accent{ color: var(--primary); }

.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.section-heading{
  text-align:center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.section-title{
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.section-subtitle{
  color: var(--text-body);
  font-size: 16px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  transition: all .25s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37,99,235,0.28);
}
.btn-primary:hover{
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(37,99,235,0.35);
}
.btn-outline{
  background: #fff;
  color: var(--text-dark);
  border: 1.5px solid var(--border);
}
.btn-outline:hover{
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
}
.btn-lg{ padding: 15px 30px; font-size: 16px; }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.navbar.scrolled{
  background: rgba(255,255,255,0.97);
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--border);
}

.navbar-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}

.nav-logo img{
  height: 44px;
  width: auto;
  display:block;
}

.nav-menu{
  display:flex;
  align-items:center;
  gap: 36px;
}

.nav-link{
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark);
  position: relative;
  padding: 6px 2px;
  transition: color .2s ease;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  height: 2px;
  width: 0%;
  background: var(--primary);
  border-radius: 2px;
  transition: width .25s ease;
}
.nav-link:hover{ color: var(--primary); }
.nav-link:hover::after{ width: 100%; }
.nav-link.active{ color: var(--primary); }
.nav-link.active::after{ width: 100%; }

.navbar-actions{
  display:flex;
  align-items:center;
  gap: 14px;
}

.btn-nav-cta{ padding: 9px 18px; font-size: 13px; border-radius: 10px; }

.nav-toggle{
  display:none;
  font-size: 20px;
  color: var(--text-dark);
  width: 40px;
  height: 40px;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
}
.nav-toggle:hover{ background: var(--bg-soft-2); }

/* Mobile menu */
.mobile-menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 1100;
}
.mobile-menu-overlay.active{ opacity:1; visibility:visible; }

.mobile-menu{
  position: fixed;
  top:0; right:0;
  height: 100vh;
  width: min(320px, 82vw);
  background: #fff;
  z-index: 1200;
  transform: translateX(100%);
  transition: transform .3s ease;
  display:flex;
  flex-direction:column;
  padding: 22px;
  box-shadow: -10px 0 30px rgba(15,23,42,0.1);
}
.mobile-menu.active{ transform: translateX(0); }

.mobile-menu-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 30px;
}
.mobile-menu-logo{ height: 28px; }
.mobile-menu-close{
  font-size: 20px;
  width: 38px; height: 38px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 10px;
  background: var(--bg-soft-2);
}

.mobile-menu-links{
  display:flex;
  flex-direction:column;
  gap: 6px;
  flex: 1;
}
.mobile-menu-links a{
  display:flex;
  align-items:center;
  gap: 12px;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 12px;
  border-radius: 10px;
  color: var(--text-dark);
}
.mobile-menu-links a:hover,
.mobile-menu-links a.active{
  background: var(--primary-light);
  color: var(--primary);
}
.mobile-menu-links a i{ width: 20px; text-align:center; color: var(--primary); }

.mobile-menu-cta{ width: 100%; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  padding: 90px 0 60px;
  overflow: hidden;
  background: linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 70%);
}

.hero-bg-shapes{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.blob{
  position:absolute;
  border-radius:50%;
  filter: blur(60px);
  opacity:.5;
}
.blob-1{
  width: 420px; height:420px;
  background: radial-gradient(circle, #DCE8FF, transparent 70%);
  top: -120px; left: -140px;
}
.blob-2{
  width: 380px; height:380px;
  background: radial-gradient(circle, #E4ECFF, transparent 70%);
  bottom: -160px; right: -120px;
}
.dot-grid{
  position:absolute;
  width: 120px; height: 90px;
  background-image: radial-gradient(circle, #C7D6F5 1.6px, transparent 1.6px);
  background-size: 18px 18px;
  opacity: .6;
}
.dot-grid-1{ top: 60px; left: 30px; }

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

.hero-title{
  font-family: var(--font-head);
  font-size: clamp(38px, 5.4vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 18px;
}

.hero-desc{
  font-size: 17px;
  color: var(--text-body);
  max-width: 460px;
  margin-bottom: 30px;
}

.hero-actions{ display:flex; flex-wrap:wrap; gap: 14px; margin-bottom: 30px; }

.hero-mini-features{
  display:flex;
  flex-wrap:wrap;
  gap: 22px;
}
.mini-feature{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-body);
}
.mini-feature i{ color: var(--primary); }

/* Hero Orbit — organic floating cluster (no rigid ring/grid) */
.hero-orbit{
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 480px;
  margin: 0 auto;
}

.orbit-backdrop{
  position:absolute;
  top:50%; left:50%;
  width: 420px; height:420px;
  transform:translate(-50%,-50%);
  background: radial-gradient(circle, rgba(37,99,235,0.08), transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

.orbit-center{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index: 3;
  text-align:center;
}
.orbit-x-badge{
  position: relative;
  width: 176px;
  height: 176px;
  border-radius: 44px;
  background: linear-gradient(150deg, #2a2a2a 0%, #050505 55%, #000 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.18),
    0 0 0 6px #fff,
    0 0 0 9px #DCE8FF,
    0 25px 50px rgba(15,23,42,0.28);
  animation: orbitPulse 4s ease-in-out infinite, vexoXFloat 5.8s ease-in-out infinite;
  overflow: hidden;
}
.orbit-x-badge::before{
  content:"";
  position:absolute;
  top:-40%; left:-20%;
  width: 90%; height: 90%;
  background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 65%);
  border-radius: 50%;
  pointer-events:none;
}
.orbit-x-letter{
  position: relative;
  z-index: 1;
  font-size: 68px;
  font-weight: 800;
  color: #fff;
  line-height:1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.orbit-item{
  position:absolute;
  border-radius: 22px;
  background:#fff;
  box-shadow: var(--shadow-md);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 2;
  animation: orbitFloat 6s ease-in-out infinite;
}
.orbit-item:hover{ transform: scale(1.12) !important; box-shadow: var(--shadow-lg); }
.orbit-item img{ width:62%; height:62%; object-fit:contain; }

/* size variants */
.orbit-lg{ width: 82px; height: 82px; padding: 16px; }
.orbit-md{ width: 66px; height: 66px; padding: 13px; }
.orbit-sm{ width: 52px; height: 52px; padding: 11px; border-radius: 18px; }

/* organic scattered positions around the X badge — sizes deliberately mixed,
   not grouped by ring (big/med/small interleaved at different angles/radii) */
.orbit-youtube{ top: 2%;   left: 58%; animation-delay: 0s;    --r: -4deg; }
.orbit-chatgpt{ top: 6%;   left: 2%;  animation-delay: .9s;   --r: 3deg; }
.orbit-spotify{ top: 66%;  left: 4%;  animation-delay: 1.8s;  --r: 5deg; }
.orbit-netflix{ top: 12%;  left: 80%; animation-delay: 2.7s;  --r: -3deg; }
.orbit-canva{   top: 82%;  left: 60%; animation-delay: 3.6s;  --r: -6deg; }
.orbit-gemini{  top: 46%;  left: 88%; animation-delay: 4.5s;  --r: 4deg; }
.orbit-vidio{   top: 0%;   left: 30%; animation-delay: .45s;  --r: 6deg; }
.orbit-gmail{   top: 40%;  left: 0%;  animation-delay: 1.35s; --r: -5deg; }
.orbit-iqiyi{   top: 90%;  left: 30%; animation-delay: 2.25s; --r: 3deg; }

@keyframes orbitFloat{
  0%, 100%{ transform: translateY(0) rotate(var(--r, 0deg)); }
  50%{ transform: translateY(-12px) rotate(var(--r, 0deg)); }
}
@keyframes orbitFloatRev{
  0%, 100%{ transform: translateY(-10px) rotate(var(--r, 0deg)); }
  50%{ transform: translateY(6px) rotate(var(--r, 0deg)); }
}
.orbit-item.orbit-rev{ animation-name: orbitFloatRev; }
@keyframes orbitPulse{
  0%, 100%{ box-shadow: 0 0 0 3px #DCE8FF, 0 20px 45px rgba(15,23,42,0.25); }
  50%{ box-shadow: 0 0 0 8px #DCE8FF, 0 25px 55px rgba(15,23,42,0.3); }
}
@keyframes vexoXFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-12px) rotate(-1deg); }
}

/* Hero stats */
.hero-stats{
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 64px auto 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 26px 20px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hero-stat{
  display:flex;
  align-items:center;
  gap: 12px;
  justify-content:center;
}
.hero-stat i{
  width: 44px; height:44px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size: 17px;
  flex-shrink:0;
}
.hero-stat strong{ display:block; font-size: 19px; font-family: var(--font-head); }
.hero-stat span{ font-size: 13px; color: var(--text-muted); }

/* =========================================================
   X PREMIUM (FEATURED) — flagship dark showcase card
   ========================================================= */
.x-premium{ padding: 90px 0; }

.x-premium-card{
  position: relative;
  background: linear-gradient(155deg, #0B1220 0%, #101B33 55%, #14204A 100%);
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(11,18,32,0.35);
}

.x-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter: blur(10px);
}
.x-glow-1{
  width: 460px; height:460px;
  background: radial-gradient(circle, rgba(37,99,235,0.35), transparent 70%);
  top: -180px; left: -120px;
}
.x-glow-2{
  width: 380px; height:380px;
  background: radial-gradient(circle, rgba(96,165,250,0.22), transparent 70%);
  bottom: -160px; right: -100px;
}
.x-grid-pattern{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 30% 30%, black, transparent 70%);
  mask-image: radial-gradient(circle at 30% 30%, black, transparent 70%);
  pointer-events:none;
}

.x-premium-inner{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items:center;
}

.x-premium-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 380px;
}

.x-premium-orb-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
.x-ring{
  position:absolute;
  border-radius:50%;
  border: 1px solid rgba(255,255,255,0.12);
}
.x-ring-1{ width: 340px; height:340px; animation: xRingPulse 5s ease-in-out infinite; }
.x-ring-2{ width: 400px; height:400px; border-style: dashed; border-color: rgba(255,255,255,0.08); animation: xRingSpin 40s linear infinite; }

.x-premium-orb{
  position: relative;
  z-index: 1;
  width: 260px; height:260px;
  border-radius: 64px;
  background: linear-gradient(150deg, #2f2f2f 0%, #060606 55%, #000 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 3px 4px rgba(255,255,255,0.16),
    0 0 0 8px rgba(255,255,255,0.08),
    0 0 60px rgba(37,99,235,0.4),
    0 30px 60px rgba(0,0,0,0.4);
  animation: xOrbFloat 5s ease-in-out infinite;
  overflow: hidden;
}
.x-premium-orb::before{
  content:"";
  position:absolute;
  top:-35%; left:-15%;
  width: 85%; height: 85%;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 65%);
  border-radius: 50%;
  pointer-events:none;
}
.x-premium-orb-letter{
  position: relative;
  z-index: 1;
  font-size: 84px;
  font-weight:800;
  color:#fff;
  line-height:1;
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
@keyframes xOrbFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes xRingPulse{
  0%, 100%{ transform: scale(1); opacity:.6; }
  50%{ transform: scale(1.06); opacity:1; }
}
@keyframes xRingSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.badge-pill-dark{
  background: rgba(37,99,235,0.18);
  color: #93C5FD;
  border: 1px solid rgba(96,165,250,0.35);
}

.x-premium-title{ color: #fff; }
.x-premium-title .text-accent{ color: #60A5FA; }

.x-premium-tagline{
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.x-premium-desc{
  color: #A9B7D6;
  margin-bottom: 30px;
}

.x-feature-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 34px;
}
.x-feature-item{
  display:flex;
  gap: 14px;
  padding: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-md);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.x-feature-item:hover{
  background: rgba(255,255,255,0.09);
  border-color: rgba(96,165,250,0.35);
  transform: translateY(-3px);
}
.x-feature-icon{
  width: 40px; height:40px;
  border-radius: 11px;
  background: rgba(37,99,235,0.2);
  color: #60A5FA;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size: 16px;
}
.x-feature-item strong{ display:block; font-size: 14.5px; color:#fff; margin-bottom: 3px; }
.x-feature-item p{ font-size: 12.5px; color: #94A3B8; line-height:1.5; }

.btn-outline-light{
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.25);
}
.btn-outline-light:hover{
  border-color: #60A5FA;
  color: #60A5FA;
  transform: translateY(-2px);
}

/* =========================================================
   SERVICES
   ========================================================= */
.services{ padding: 90px 0; }

.services-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}

.service-card{
  position:relative;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.service-star{
  position:absolute;
  top: 14px; right: 14px;
  width: 26px; height:26px;
  border-radius:50%;
  background: var(--primary-light);
  color: var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size: 11px;
}

.service-icon{
  width: 60px; height:60px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--bg-soft-2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding: 12px;
  flex-shrink: 0;
}
.service-icon img{ width:100%; height:100%; object-fit:contain; }
.service-icon.icon-dark{ background:#000; padding:0; }
.mini-x{ color:#fff; font-size: 26px; font-weight:800; }

.service-card h3{
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.25;
  margin-bottom: 8px;
  min-height: 43px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.service-card p{
  font-size: 13.5px;
  color: var(--text-body);
  margin-bottom: 16px;
  flex: 1;
}
.service-link{
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  display:inline-flex;
  align-items:center;
  gap: 6px;
  margin-top: auto;
}
.service-link i{ font-size: 12px; transition: transform .2s ease; }
.service-link:hover i{ transform: translateX(3px); }

/* Coming soon state */
.service-card.coming-soon{ opacity: .85; }
.service-card.coming-soon .service-icon{ filter: grayscale(60%); opacity: .7; }
.coming-soon-badge{
  position:absolute;
  top: 14px; right: 14px;
  background: var(--bg-soft-2);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 5px 10px;
  border-radius: 999px;
}
.service-link.disabled{
  color: var(--text-muted);
  cursor: default;
}
.service-link.disabled i{ display:none; }

.services-cta{ text-align:center; margin-top: 46px; }

/* =========================================================
   WHY VEXO
   ========================================================= */
.why-vexo{ padding: 90px 0; background: var(--bg-soft); }

/* Feature cards — 5 across, colorful accent per card, lift + glow on hover */
.why-features-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto 40px;
}

.why-feature-card{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 30px 22px;
  text-align:center;
  position: relative;
  overflow:hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.why-feature-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.why-feature-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(15,23,42,0.1);
  border-color: transparent;
}
.why-feature-card:hover::before{ transform: scaleX(1); }

.why-feature-icon{
  width: 58px; height:58px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size: 22px;
  transition: transform .3s ease;
}
.why-feature-card:hover .why-feature-icon{ transform: scale(1.1) rotate(-4deg); }
.why-feature-card h3{
  font-family: var(--font-head);
  font-size:16.5px;
  line-height: 1.3;
  margin-bottom:8px;
  min-height: 43px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.why-feature-card p{ font-size: 13.5px; color: var(--text-body); line-height:1.55; flex: 1; }
.why-feature-card{ display:flex; flex-direction:column; }

/* =========================================================
   HOW TO ORDER
   ========================================================= */
.how-to-order{ padding: 90px 0; }

.steps-track{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 60px;
  align-items: start;
}

.step{ text-align:center; position:relative; display:flex; flex-direction:column; height:100%; }
.step-icon{
  position:relative;
  width: 78px; height:78px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 2px solid var(--primary-light);
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 24px;
  color: var(--primary);
  flex-shrink: 0;
}
.step-number{
  position:absolute;
  top: -8px; right: -8px;
  width: 26px; height:26px;
  border-radius:50%;
  background: var(--primary);
  color:#fff;
  font-size: 11px;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.step h3{ font-family: var(--font-head); font-size: 15.5px; line-height:1.3; margin-bottom: 8px; min-height: 42px; display:flex; align-items:center; justify-content:center; }
.step p{ font-size: 13px; color: var(--text-body); flex: 1; }

.payment-divider{
  display:flex;
  align-items:center;
  gap: 16px;
  justify-content:center;
  margin-bottom: 36px;
}
.payment-divider span{ width: 60px; height:1px; background: var(--border); }
.payment-divider strong{ font-size: 12.5px; letter-spacing: .08em; color: var(--text-muted); }

.payment-methods{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.payment-card{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
  display:flex;
  flex-direction:column;
}
.payment-card-head{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-bottom: 20px;
  min-height: 44px;
}
.flag{
  width: 44px; height:44px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size: 19px;
  flex-shrink: 0;
}
.payment-card-head strong{ font-size: 16px; display:block; margin-bottom:2px; }
.payment-card-head p{ font-size: 13px; color: var(--text-body); }

.payment-icons{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.payment-icon{
  background:#fff;
  border-radius: 12px;
  padding: 18px 8px;
  text-align:center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  border: 1px solid var(--border);
  min-height: 100px;
}
.payment-icon i{
  width: 34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 16px;
}

/* Single-item payment card (International): center a proportionally larger box
   instead of a small box floating in a wide empty grid row */
.payment-icons-center{
  display:flex;
  justify-content:center;
  margin-bottom: 16px;
}
.payment-icon-lg{
  width: 100%;
  min-height: 100px;
  padding: 22px 8px;
  gap: 12px;
  font-size: 13px;
}
.payment-icon-lg i{
  width: 42px; height:42px;
  font-size: 19px;
}
.payment-note{
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 4px;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{ padding: 90px 0; background: var(--bg-soft); }

.faq-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.faq-item{
  background:#fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow:hidden;
}

.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 20px;
  text-align:left;
}
.faq-icon{
  width: 40px; height:40px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size: 15px;
}
.faq-text{ flex:1; font-weight: 700; font-size: 15px; color: var(--text-dark); }
.faq-num{ color: var(--primary); margin-right: 4px; }
.faq-chevron{ color: var(--text-muted); transition: transform .25s ease; flex-shrink:0; }

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition: max-height .3s ease;
}
.faq-answer p{
  padding: 20px 20px 20px 74px;
  font-size: 14px;
  color: var(--text-body);
}

.faq-item.open .faq-chevron{ transform: rotate(180deg); }
.faq-item.open .faq-question{ background: var(--primary-light); }
.faq-item.open .faq-icon{ background:#fff; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta{ padding: 70px 0 36px; }

.cta-card{
  position: relative;
  background: linear-gradient(155deg, #0B1220 0%, #101B33 55%, #14204A 100%);
  border-radius: var(--radius-lg);
  padding: 70px 40px;
  text-align:center;
  overflow:hidden;
  box-shadow: 0 30px 70px rgba(11,18,32,0.35);
}

.cta-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, black, transparent 72%);
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 72%);
  pointer-events:none;
}
.cta-card::after{
  content:"";
  position:absolute;
  width: 460px; height:460px;
  border-radius:50%;
  filter: blur(10px);
  background: radial-gradient(circle, rgba(37,99,235,0.35), transparent 70%);
  top: -180px; left: -120px;
  pointer-events:none;
}

.dot-grid-cta{ display:none; }

.cta-telegram-art{
  position:relative;
  z-index:1;
  margin: 0 auto 26px;
  width: 74px; height: 74px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center;
  font-size: 32px;
  color: #fff;
}

.cta-card .section-title{ max-width: 560px; margin: 0 auto 18px; color:#fff; position:relative; z-index:1; }
.cta-card .section-title .text-accent{ color:#5B8DFF; }
.cta-desc{
  max-width: 620px;
  margin: 0 auto 34px;
  color: #A9B7D6;
  font-size: 15.5px;
  position:relative; z-index:1;
}

.cta-badges{
  display:flex;
  justify-content:center;
  gap: 14px;
  flex-wrap:wrap;
  margin-bottom: 36px;
  position:relative; z-index:1;
}
.cta-badge{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display:flex;
  align-items:center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #E2E8F5;
  text-align:left;
}
.cta-badge i{
  width: 36px; height:36px;
  border-radius: 10px;
  background: rgba(37,99,235,.22);
  color: #7CA3FF;
  display:flex; align-items:center; justify-content:center;
  font-size: 15px;
  flex-shrink:0;
}
.btn-cta-final{ position:relative; z-index:1; }

.btn-cta-final{ position:relative; z-index:2; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background: var(--dark-navy);
  color: #fff;
  padding-top: 44px;
}

.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 40px;
  flex-wrap:wrap;
  padding-bottom: 32px;
}

.footer-logo{ height: 72px; margin-bottom: 14px; }
.footer-brand p{ color: #94A3B8; font-size: 16px; }

.footer-social-label{
  display:block;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 16px;
  text-align: right;
}
.footer-social-links{ display:flex; gap: 28px; }
.social-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  text-align:center;
  font-size: 12.5px;
  color: #CBD5E1;
  transition: transform .2s ease;
}
.social-link:hover{ transform: translateY(-3px); color:#fff; }
.social-link em{ font-style:normal; color: #64748B; font-size: 11.5px; }
.social-circle{
  width: 48px; height:48px;
  border-radius:50%;
  border: 1.5px solid #2A3550;
  display:flex; align-items:center; justify-content:center;
  font-size: 18px;
  color: #fff;
  transition: border-color .2s ease, background .2s ease;
}
.social-link:hover .social-circle{ border-color: var(--primary); background: rgba(37,99,235,0.15); }
.social-x-mark{ font-size: 20px; font-weight: 800; line-height:1; }

.footer-divider{ height:1px; background: #1E293B; }

.footer-bottom{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap: 16px;
  padding: 20px 24px;
}
.footer-links{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: #94A3B8;
}
.footer-links a:hover{ color:#fff; }
.footer-links span{ color: #334155; }

.footer-copy{
  padding: 14px 24px 20px;
  border-top: 1px solid #1E293B;
  margin-top: 2px;
}
.footer-copy p{ font-size: 12.5px; color: #64748B; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .services-grid{ grid-template-columns: repeat(3, 1fr); }
  .steps-track{ grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .x-premium-card{ padding: 48px 32px; }
  .x-premium-inner{ grid-template-columns: 1fr; }
  .x-premium-visual{ order:-1; margin-bottom: 20px; }
}

@media (max-width: 900px){
  .nav-menu{ display:none; }
  .btn-nav-cta{ display:none; }
  .nav-toggle{ display:flex; }

  .hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .hero-text{ order:1; }
  .hero-orbit{ order:0; margin-bottom: 20px; }
  .hero-desc{ margin: 0 auto 30px; }
  .hero-actions, .hero-mini-features{ justify-content:center; }

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

  .why-features-grid{ grid-template-columns: repeat(2, 1fr); }
  .why-trust-bar{ flex-wrap:wrap; justify-content:center; text-align:center; }
  .why-trust-sep{ display:none; }
  .why-trust-stats{ flex-wrap:wrap; justify-content:center; gap: 24px; }

  .x-feature-grid{ grid-template-columns: 1fr; }

  .faq-grid{ grid-template-columns: 1fr; }
  .payment-methods{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .steps-track{ grid-template-columns: repeat(2, 1fr); }
  .hero-stats{ grid-template-columns: 1fr 1fr; padding: 20px; }
  .x-premium-card{ padding: 40px 20px; }
  .x-premium-visual{ min-height: 300px; }
  .x-premium-orb{ width: 200px; height:200px; }
  .x-premium-orb-letter{ font-size: 60px; }
  .x-ring-1{ width: 250px; height:250px; }
  .x-ring-2{ width: 300px; height:300px; }
  .payment-icons{ grid-template-columns: repeat(2, 1fr); }
  .cta-badges{ gap:10px; }
  .cta-badge{ flex: 1 1 45%; }
  .footer-top{ flex-direction:column; }
  .footer-social-label{ text-align:left; }
  .footer-social-links{ gap: 18px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .hero-orbit{ height: 340px; max-width: 340px; }
  .orbit-backdrop{ width: 300px; height:300px; }
  .orbit-x-badge{ width:120px; height:120px; border-radius: 30px; }
  .orbit-x-letter{ font-size:44px; }
  .orbit-lg{ width: 58px; height: 58px; padding: 11px; }
  .orbit-md{ width: 48px; height: 48px; padding: 9px; }
  .orbit-sm{ width: 40px; height: 40px; padding: 8px; }

  .why-features-grid{ grid-template-columns: 1fr; }
  .why-trust-stats{ grid-template-columns: 1fr 1fr; display:grid; gap:18px; }
}

@media (max-width: 480px){
  .services-grid{ grid-template-columns: 1fr 1fr; }
  .cta-card{ padding: 44px 20px; }
  .cta-telegram-art{ width:60px; height:60px; font-size:26px; top:16px; right:16px; }
}

/* =========================================================
   VEXO — PREMIUM MOTION ENHANCEMENTS
   Built on top of the original motion system
   ========================================================= */

/* Page-load entrance: subtle, never hides content if JS fails */
@keyframes vexoHeroInLeft{
  from{ opacity:0; transform:translate3d(-24px, 8px, 0); }
  to{ opacity:1; transform:translate3d(0,0,0); }
}
@keyframes vexoHeroInRight{
  from{ opacity:0; transform:translate3d(24px, 0, 0) scale(.985); }
  to{ opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes vexoBadgeIn{
  from{ opacity:0; transform:translateY(8px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.hero-text .badge-pill{
  animation:vexoBadgeIn .55s cubic-bezier(.22,1,.36,1) both;
}
.hero-title{
  animation:vexoHeroInLeft .75s .06s cubic-bezier(.22,1,.36,1) both;
}
.hero-desc{
  animation:vexoHeroInLeft .75s .13s cubic-bezier(.22,1,.36,1) both;
}
.hero-actions{
  animation:vexoHeroInLeft .75s .20s cubic-bezier(.22,1,.36,1) both;
}
.hero-mini-features{
  animation:vexoHeroInLeft .75s .27s cubic-bezier(.22,1,.36,1) both;
}
.hero-orbit{
  animation:vexoHeroInRight .9s .08s cubic-bezier(.22,1,.36,1) both;
}
.hero-stats .hero-stat{
  animation:vexoBadgeIn .65s cubic-bezier(.22,1,.36,1) both;
}
.hero-stats .hero-stat:nth-child(1){ animation-delay:.12s; }
.hero-stats .hero-stat:nth-child(2){ animation-delay:.18s; }
.hero-stats .hero-stat:nth-child(3){ animation-delay:.24s; }
.hero-stats .hero-stat:nth-child(4){ animation-delay:.30s; }

/* Keep content immediately visible while adding a gentle scroll lift */
.motion-lift{
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.motion-lift:hover{
  transform:translateY(-5px);
}

/* Premium service-card sweep — complements the existing hover */
.service-card{
  overflow:hidden;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.7) 48%, transparent 68%);
  transform:translateX(-120%);
  transition:transform .8s ease;
  pointer-events:none;
  z-index:0;
}
.service-card:hover::before{ transform:translateX(120%); }
.service-card > *{ position:relative; z-index:1; }

/* Icon micro-motion */
.service-icon,
.why-feature-icon,
.payment-icon{
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.service-card:hover .service-icon{ transform:translateY(-2px) scale(1.06) rotate(-2deg); }
.why-feature-card:hover .why-feature-icon{ transform:translateY(-2px) scale(1.05); }
.payment-card:hover .payment-icon{ transform:translateY(-2px) scale(1.04); }

/* X Premium atmosphere: very subtle ambient drift */
@keyframes vexoGlowDrift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:.72; }
  50%{ transform:translate3d(10px,-8px,0) scale(1.04); opacity:.9; }
}
.x-glow-1{ animation:vexoGlowDrift 7s ease-in-out infinite; }
.x-glow-2{ animation:vexoGlowDrift 9s 1s ease-in-out infinite reverse; }

/* CTA art gets a slow breathing motion, separate from hover effects */
@keyframes vexoCtaFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-5px) rotate(1deg); }
}
.cta-telegram-art{ animation:vexoCtaFloat 4.5s ease-in-out infinite; }

/* FAQ hover feedback */
.faq-item{
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.faq-item:hover{ transform:translateY(-2px); }

@media (prefers-reduced-motion: reduce){
  .hero-text .badge-pill,
  .hero-title,
  .hero-desc,
  .hero-actions,
  .hero-mini-features,
  .hero-orbit,
  .hero-stats .hero-stat,
  .orbit-x-badge,
  .x-glow-1,
  .x-glow-2,
  .cta-telegram-art{
    animation:none !important;
  }
  .motion-lift:hover,
  .faq-item:hover{ transform:none; }
}


/* =========================================================
   VEXO — DEEP MOTION LAYER
   Stronger interaction while preserving original effects
   ========================================================= */
:root{ --mx:50vw; --my:50vh; }

.vexo-cursor-glow{
  position:fixed;
  z-index:2;
  left:var(--mx); top:var(--my);
  width:260px; height:260px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,.10) 0%, rgba(37,99,235,.04) 30%, transparent 68%);
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.7;
  transition:left .18s ease-out, top .18s ease-out;
}
.vexo-scroll-progress{
  position:fixed;
  inset:0 auto auto 0;
  width:0;
  height:3px;
  z-index:2000;
  background:linear-gradient(90deg,#2563EB,#60A5FA,#2563EB);
  box-shadow:0 0 14px rgba(37,99,235,.35);
}

/* Hero depth — uses custom properties so original floating animation remains intact */
.hero-orbit{
  --parallax-x:0px;
  --parallax-y:0px;
  transform:translate3d(var(--parallax-x),var(--parallax-y),0);
  will-change:transform;
}
.orbit-backdrop{
  transform:translate3d(calc(-50% + var(--parallax-x, 0px)*.25),calc(-50% + var(--parallax-y, 0px)*.25),0);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.orbit-center{ transform:translate3d(calc(-50% + var(--parallax-x, 0px)*.45),calc(-50% + var(--parallax-y, 0px)*.45),0); transition:transform .35s cubic-bezier(.22,1,.36,1); }
.orbit-item{ will-change:transform; }

/* Give the center mark a second, softer heartbeat */
.orbit-x-badge::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:inherit;
  border:1px solid rgba(37,99,235,.13);
  opacity:0;
  animation:vexoOrbitHalo 3.8s ease-out infinite;
}
@keyframes vexoOrbitHalo{
  0%{ transform:scale(.84); opacity:0; }
  18%{ opacity:.65; }
  72%,100%{ transform:scale(1.18); opacity:0; }
}

/* Buttons: subtle magnetic feel + moving light */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::after{
  content:"";
  position:absolute;
  top:0; bottom:0; left:-65%;
  width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);
  transition:left .65s ease;
  pointer-events:none;
}
.btn:hover::after{ left:125%; }
.btn-primary:hover{ box-shadow:0 15px 34px rgba(37,99,235,.38); }

/* Service cards — 3D tilt target, original lift stays */
.service-card,
.payment-card,
.why-feature-card{
  transform-style:preserve-3d;
  will-change:transform;
}
.service-card::after,
.payment-card::after,
.why-feature-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at var(--card-x,50%) var(--card-y,50%), rgba(255,255,255,.72), transparent 34%);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.service-card:hover::after,
.payment-card:hover::after,
.why-feature-card:hover::after{ opacity:1; }
.service-card > *, .payment-card > *, .why-feature-card > *{ transform:translateZ(10px); }

/* X showcase gets cursor-reactive depth and a moving sheen */
.x-premium-card{
  --rx:0deg; --ry:0deg; --shine-x:50%; --shine-y:50%;
  transform:perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .22s ease-out, box-shadow .35s ease;
  will-change:transform;
}
.x-premium-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(96,165,250,.12), transparent 34%);
  pointer-events:none;
  opacity:.9;
}
.x-premium-card:hover{ box-shadow:0 35px 90px rgba(11,18,32,.42); }

/* X feature items reveal their hierarchy on hover */
.x-feature-item{ transition:transform .35s cubic-bezier(.22,1,.36,1), background .3s ease, border-color .3s ease; }
.x-feature-item:hover{ transform:translateX(7px); }
.x-feature-item:hover .x-feature-icon{ transform:scale(1.08) rotate(-4deg); }
.x-feature-icon{ transition:transform .3s cubic-bezier(.22,1,.36,1); }

/* Step sequence: animated connector glow */
.step-icon{ transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease; }
.step:hover .step-icon{
  transform:translateY(-6px) scale(1.08);
  border-color:#BFDBFE;
  box-shadow:0 16px 30px rgba(37,99,235,.14);
}
.step-number{ transition:transform .3s ease, box-shadow .3s ease; }
.step:hover .step-number{ transform:scale(1.12) rotate(6deg); box-shadow:0 6px 14px rgba(37,99,235,.28); }

/* FAQ interaction becomes more tactile */
.faq-question{ transition:background .25s ease, padding-left .3s ease; }
.faq-item:hover .faq-question{ padding-left:23px; }
.faq-item.open .faq-icon{ transform:rotate(-5deg) scale(1.06); }
.faq-icon{ transition:transform .3s ease; }

/* CTA art has a floating aura instead of only translation */
.cta-telegram-art{ position:relative; }
.cta-telegram-art::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  animation:vexoCtaRing 3.5s ease-out infinite;
}
@keyframes vexoCtaRing{
  0%{ transform:scale(.82); opacity:0; }
  25%{ opacity:.5; }
  100%{ transform:scale(1.28); opacity:0; }
}

@media (max-width: 900px){
  .vexo-cursor-glow{ display:none; }
  .x-premium-card{ transform:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .vexo-cursor-glow,.vexo-scroll-progress,.orbit-x-badge::after,.cta-telegram-art::after{ animation:none !important; transition:none !important; }
  .x-premium-card{ transform:none !important; }
}


@keyframes vexoBob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}
.vexo-bob{ animation:vexoBob 3.8s ease-in-out infinite; animation-delay:var(--bob-delay,0ms); }
.service-card:hover .vexo-bob,
.why-feature-card:hover .vexo-bob,
.payment-card:hover .vexo-bob{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .vexo-bob{ animation:none !important; } }

/* =========================================================
   VEXO MOTION SYSTEM — DIGITAL LIGHT
   Adds richer interaction while preserving the original motion
   ========================================================= */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,50vw) var(--my,50vh), rgba(37,99,235,.07), transparent 62%);
  opacity:.65;
  transition:opacity .35s ease;
}

/* Cinematic first paint: entrance only, never controls visibility */
.hero-text .badge-pill{ animation:vexoHeroBadge .7s cubic-bezier(.22,1,.36,1) .08s both; }
.hero-title{ animation:vexoHeroTitle .9s cubic-bezier(.22,1,.36,1) .16s both; }
.hero-desc{ animation:vexoHeroDesc .75s cubic-bezier(.22,1,.36,1) .28s both; }
.hero-actions{ animation:vexoHeroActions .75s cubic-bezier(.22,1,.36,1) .38s both; }
.hero-mini-features{ animation:vexoHeroDesc .75s cubic-bezier(.22,1,.36,1) .48s both; }
.hero-orbit{ animation:vexoHeroOrbitIn 1.05s cubic-bezier(.16,1,.3,1) .12s both, vexoOrbitFloat 7s ease-in-out 1.2s infinite; }
.hero-stats .hero-stat{ animation:vexoStatIn .65s cubic-bezier(.22,1,.36,1) both; }
.hero-stats .hero-stat:nth-child(1){ animation-delay:.45s; }
.hero-stats .hero-stat:nth-child(2){ animation-delay:.53s; }
.hero-stats .hero-stat:nth-child(3){ animation-delay:.61s; }
.hero-stats .hero-stat:nth-child(4){ animation-delay:.69s; }

@keyframes vexoHeroBadge{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes vexoHeroTitle{from{opacity:0;transform:translateY(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes vexoHeroDesc{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes vexoHeroActions{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes vexoHeroOrbitIn{from{opacity:0;transform:scale(.82) translate3d(var(--parallax-x,0),var(--parallax-y,0),0)}to{opacity:1;transform:scale(1) translate3d(var(--parallax-x,0),var(--parallax-y,0),0)}}
@keyframes vexoOrbitFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes vexoStatIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Hero visual feels layered instead of flat */
.orbit-backdrop{box-shadow:0 0 0 1px rgba(37,99,235,.04), 0 30px 90px rgba(37,99,235,.10);}
.orbit-item img{transition:transform .45s cubic-bezier(.22,1,.36,1), filter .45s ease;}
.orbit-item:hover img{transform:scale(1.12) rotate(3deg);filter:drop-shadow(0 10px 20px rgba(37,99,235,.16));}

/* Magnetic-ish CTA feedback, driven by JS custom vars */
.btn[data-magnetic]{transform:translate3d(var(--mag-x,0),var(--mag-y,0),0);transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,background .3s ease,border-color .3s ease;}
.btn[data-magnetic]:hover{transform:translate3d(var(--mag-x,0),calc(var(--mag-y,0) - 2px),0) scale(1.015);}

/* Richer card sheen + depth */
.service-card,.why-feature-card,.payment-card,.x-feature-item,.faq-item{overflow:hidden;position:relative;}
.service-card::before,.why-feature-card::before,.payment-card::before,.x-feature-item::before,.faq-item::before{
  content:"";position:absolute;inset:-40%;
  background:radial-gradient(circle at var(--card-x,50%) var(--card-y,50%), rgba(96,165,250,.12), transparent 28%);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.service-card:hover::before,.why-feature-card:hover::before,.payment-card:hover::before,.x-feature-item:hover::before,.faq-item:hover::before{opacity:1;}

/* Available service cards get a tiny hover response hierarchy */
.service-card:hover .service-icon{box-shadow:0 14px 34px rgba(37,99,235,.16);}
.service-card .service-icon{will-change:transform;}

/* X flagship gets a stronger spotlight without becoming flashy */
.x-premium-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(120deg,transparent 12%,rgba(96,165,250,.42) 50%,transparent 88%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  background-size:220% 100%;animation:vexoBorderFlow 7s linear infinite;
  pointer-events:none;opacity:.45;
}
@keyframes vexoBorderFlow{from{background-position:180% 0}to{background-position:-40% 0}}
.x-premium-orb{transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;}
.x-premium-card:hover .x-premium-orb{transform:scale(1.045);box-shadow:0 0 0 10px rgba(255,255,255,.025),0 26px 70px rgba(37,99,235,.22);}

/* Scroll reveals: opacity stays enabled before JS, so content never disappears */
.motion-reveal{animation:vexoReveal .7s cubic-bezier(.22,1,.36,1) both;}
@keyframes vexoReveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Scroll velocity variable can influence decorative background only */
.hero-bg-shapes{transform:translateY(calc(var(--scroll-velocity,0) * -1px));transition:transform .45s cubic-bezier(.22,1,.36,1);}

@media (hover:none), (max-width:900px){
  body::before{display:none;}
  .btn[data-magnetic]{transform:none !important;}
}

@media (prefers-reduced-motion: reduce){
  body::before{display:none;}
  .hero-text .badge-pill,.hero-title,.hero-desc,.hero-actions,.hero-mini-features,.hero-orbit,.hero-stats .hero-stat,.x-premium-card::before{animation:none !important;}
  .motion-reveal{animation:none !important;}
}

/* =========================================================
   VEXO FINISHING MOTION — CINEMATIC LOAD + BRAND HOVER +
   CONTINUOUS SECTION TRANSITIONS
   ========================================================= */
html{scroll-padding-top:90px;}

/* 01 — Cinematic page-load sequence */
.vexo-page-loader{
  position:fixed;
  inset:0;
  z-index:5000;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#ffffff 0%,#f7faff 62%,#eef4ff 100%);
  opacity:1;
  visibility:visible;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), visibility .7s;
}
.vexo-page-loader.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.vexo-loader-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.vexo-loader-logo{
  width:min(180px,42vw);
  height:auto;
  opacity:0;
  transform:translateY(14px) scale(.96);
  filter:blur(5px);
  animation:vexoLoaderLogo .8s cubic-bezier(.22,1,.36,1) .08s forwards;
}
.vexo-loader-line{
  position:relative;
  display:block;
  width:108px;
  height:2px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(37,99,235,.10);
}
.vexo-loader-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,#2563EB,transparent);
  transform:translateX(-110%);
  animation:vexoLoaderLine 1.05s cubic-bezier(.22,1,.36,1) .22s forwards;
}
@keyframes vexoLoaderLogo{to{opacity:1;transform:none;filter:none}}
@keyframes vexoLoaderLine{to{transform:translateX(110%)}}

/* Delay the hero intro until the loader starts clearing */
.vexo-page-loader.is-done ~ .navbar .nav-logo,
.vexo-page-loader.is-done ~ main .hero .hero-text,
.vexo-page-loader.is-done ~ main .hero .hero-orbit,
.vexo-page-loader.is-done ~ main .hero .hero-stats{
  animation-play-state:running;
}

/* 02 — Brand-specific service hover environments */
.service-card[data-brand] .service-icon{
  position:relative;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background .45s ease;
}
.service-card[data-brand] .service-icon::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:inherit;
  border:1px solid var(--brand-ring,rgba(37,99,235,.16));
  opacity:0;
  transform:scale(.88);
  transition:opacity .4s ease, transform .55s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.service-card[data-brand]{
  --brand:#2563EB;
  --brand-soft:rgba(37,99,235,.08);
  --brand-ring:rgba(37,99,235,.18);
}
.service-card[data-brand="youtube"]{--brand:#FF0033;--brand-soft:rgba(255,0,51,.075);--brand-ring:rgba(255,0,51,.20)}
.service-card[data-brand="spotify"]{--brand:#1ED760;--brand-soft:rgba(30,215,96,.08);--brand-ring:rgba(30,215,96,.22)}
.service-card[data-brand="netflix"]{--brand:#E50914;--brand-soft:rgba(229,9,20,.075);--brand-ring:rgba(229,9,20,.20)}
.service-card[data-brand="vidio"]{--brand:#FF8A00;--brand-soft:rgba(255,138,0,.075);--brand-ring:rgba(255,138,0,.20)}
.service-card[data-brand="chatgpt"]{--brand:#10A37F;--brand-soft:rgba(16,163,127,.075);--brand-ring:rgba(16,163,127,.20)}
.service-card[data-brand="canva"]{--brand:#7D2AE8;--brand-soft:rgba(125,42,232,.075);--brand-ring:rgba(125,42,232,.20)}
.service-card[data-brand="gemini"]{--brand:#4285F4;--brand-soft:rgba(66,133,244,.075);--brand-ring:rgba(66,133,244,.20)}
.service-card[data-brand="iqiyi"]{--brand:#19B64A;--brand-soft:rgba(25,182,74,.075);--brand-ring:rgba(25,182,74,.20)}
.service-card[data-brand="gmail"]{--brand:#EA4335;--brand-soft:rgba(234,67,53,.075);--brand-ring:rgba(234,67,53,.20)}
.service-card[data-brand="x"]{--brand:#111827;--brand-soft:rgba(17,24,39,.06);--brand-ring:rgba(17,24,39,.16)}
.service-card[data-brand]:hover .service-icon{
  background:linear-gradient(145deg,#fff 5%,var(--brand-soft) 100%);
  box-shadow:0 18px 34px color-mix(in srgb, var(--brand) 18%, transparent);
  transform:translateY(-3px) scale(1.055);
}
.service-card[data-brand]:hover .service-icon::after{
  opacity:1;
  transform:scale(1);
}
.service-card[data-brand] .service-link{
  transition:color .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.service-card[data-brand]:hover .service-link{
  color:var(--brand);
  transform:translateX(3px);
}
.service-card[data-brand] .service-link i{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.service-card[data-brand]:hover .service-link i{transform:translateX(3px)}
@supports not (color:color-mix(in srgb, red 10%, transparent)){
  .service-card[data-brand]:hover .service-icon{box-shadow:0 18px 34px rgba(37,99,235,.16)}
}

/* 03 — Continuous section transitions: one moving light field */
main section{
  position:relative;
  isolation:isolate;
  --section-glow-x:50%;
}
main section::after{
  content:"";
  position:absolute;
  left:6%;
  right:6%;
  top:-110px;
  height:180px;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(ellipse at var(--section-glow-x) 50%,rgba(37,99,235,.055),transparent 68%);
  filter:blur(16px);
  opacity:.35;
  transform:translateY(14px) scale(.96);
  transition:opacity .9s ease,transform 1s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
main section.motion-section-active::after{
  opacity:.9;
  transform:translateY(0) scale(1);
}
main section[data-transition-color="spotify"]::after{background:radial-gradient(ellipse at var(--section-glow-x) 50%,rgba(30,215,96,.06),transparent 68%)}
main section[data-transition-color="dark"]::after{background:radial-gradient(ellipse at var(--section-glow-x) 50%,rgba(96,165,250,.08),transparent 68%)}

/* The active section gets a tiny lift in its inner canvas, not the content */
main section .section-container{
  position:relative;
}

@media (max-width:900px){
  .vexo-page-loader{display:none}
  main section::after{left:0;right:0;filter:blur(14px);opacity:.2}
}
@media (prefers-reduced-motion:reduce){
  .vexo-page-loader{transition:none}
  .vexo-loader-logo,.vexo-loader-line::after{animation:none !important;opacity:1;transform:none;filter:none}
  main section::after{transition:none}
}

/* X Premium service icon: keep the X mark crisp while the brand effect runs */
.service-card[data-brand="x"] .service-icon.icon-dark{
  position:relative;
  background:#000 !important;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 24px rgba(2,6,23,.12);
}
.service-card[data-brand="x"]:hover .service-icon.icon-dark{
  background:#000 !important;
  box-shadow:0 16px 30px rgba(2,6,23,.20), 0 0 0 1px rgba(96,165,250,.22);
  transform:translateY(-3px) scale(1.055);
}
.service-card[data-brand="x"] .service-icon.icon-dark::after{
  border-color:rgba(96,165,250,.20);
}
.service-card[data-brand="x"]:hover .service-icon.icon-dark::after{
  opacity:1;
  transform:scale(1);
}
.service-card[data-brand="x"] .mini-x{
  color:#fff !important;
  text-shadow:0 0 14px rgba(255,255,255,.12);
}
.service-star{
  top:15px;
  right:15px;
  width:28px;
  height:28px;
  background:#EFF6FF;
  border:1px solid #BFDBFE;
  box-shadow:0 5px 14px rgba(37,99,235,.10);
  z-index:4;
}
.service-star i{
  font-size:10px;
}

.x-premium-price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 24px;
  color:#CBD5E1;
  font-size:14px;
}
.x-premium-price strong{
  color:#fff;
  font-family:var(--font-head);
  font-size:16px;
  font-weight:800;
}

/* Final CTA — balanced composition (dark navy variant) */
.cta-card{
  min-height:auto;
  padding:56px 60px;
}
@media (max-width:900px){
  .cta-card{padding:48px 32px;}
}
@media (max-width:640px){
  .nav-logo img{height:38px;}
  .cta-card{padding:40px 20px 34px;}
  .cta-telegram-art{width:64px; height:64px; font-size:28px;}
}


/* === VEXO HOMEPAGE REVISION 3 — definitive overrides === */
/* 01 — Hero X: make the central X visibly float without changing the orbit layout */
.hero-orbit .orbit-center{
  z-index:4;
}
.hero-orbit .orbit-x-badge{
  animation:
    orbitPulse 4s ease-in-out infinite,
    vexoHeroXFloat 3.8s cubic-bezier(.45,.05,.55,.95) infinite !important;
  will-change:transform, box-shadow;
}
@keyframes vexoHeroXFloat{
  0%,100%{ transform:translateY(0) rotate(0deg) scale(1); }
  50%{ transform:translateY(-16px) rotate(-1.5deg) scale(1.018); }
}
.hero-orbit .orbit-x-letter{
  animation:vexoHeroXLetter 3.8s ease-in-out infinite;
  will-change:transform;
}
@keyframes vexoHeroXLetter{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-2px);}
}

/* 02 — Our Services: remove the old top badges completely */
.services .coming-soon-badge,
.services .service-star{
  display:none !important;
}

/* 03 — X card keeps its black identity while the brand interaction remains subtle */
.services .service-card[data-brand="x"] .service-icon.icon-dark{
  background:#000 !important;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 26px rgba(15,23,42,.14), inset 0 0 0 1px rgba(255,255,255,.02);
}
.services .service-card[data-brand="x"]:hover .service-icon.icon-dark{
  background:#050505 !important;
  border-color:rgba(96,165,250,.35);
  box-shadow:
    0 16px 32px rgba(15,23,42,.22),
    0 0 0 4px rgba(37,99,235,.08),
    0 0 24px rgba(96,165,250,.12);
  transform:translateY(-3px) scale(1.045) !important;
}
.services .service-card[data-brand="x"] .service-icon.icon-dark::after{
  border-color:rgba(96,165,250,.24);
}
.services .service-card[data-brand="x"] .mini-x{
  color:#fff !important;
  text-shadow:0 0 16px rgba(255,255,255,.12);
}
.services .service-card[data-brand="x"]:hover .mini-x{
  animation:vexoXMarkPulse 1.8s ease-in-out infinite;
}
@keyframes vexoXMarkPulse{
  0%,100%{transform:scale(1);text-shadow:0 0 12px rgba(255,255,255,.08);}
  50%{transform:scale(1.035);text-shadow:0 0 18px rgba(147,197,253,.28);}
}

/* 04 — keep service cards visually centered now that the top badges are gone */
.services .service-card{
  padding-top:30px;
}
.services .service-card .service-icon{
  margin-bottom:16px;
}

@media (max-width:640px){
  .hero-orbit .orbit-x-badge{animation-duration:4.3s,4.6s !important;}
  .services .service-card{padding-top:26px;}
}

@media (prefers-reduced-motion:reduce){
  .hero-orbit .orbit-x-badge,
  .hero-orbit .orbit-x-letter,
  .services .service-card[data-brand="x"]:hover .mini-x{
    animation:none !important;
  }
}
/* Footer information links */
.footer-info-grid{display:grid;grid-template-columns:repeat(2,minmax(150px,220px));justify-content:end;gap:70px;padding:28px 24px 24px}
.footer-info-grid>div{display:flex;flex-direction:column;gap:9px}
.footer-column-title{font-size:11px;letter-spacing:.1em;color:var(--primary);font-weight:800;margin-bottom:5px}
.footer-info-grid a{font-size:13px;color:#94A3B8;transition:color .2s ease}
.footer-info-grid a:hover{color:#fff}
@media(max-width:760px){.footer-info-grid{justify-content:start;gap:45px;padding-top:26px}}

/* =========================================================
   VEXO FOOTER — REFINED PREMIUM LAYOUT
   ========================================================= */
.footer{padding:52px 0 0;background:var(--dark-navy);color:#fff}
.footer-shell{display:grid;grid-template-columns:minmax(220px,.82fr) minmax(0,1.8fr);gap:72px;align-items:start;padding-bottom:42px}
.footer-brand{padding-top:2px}
.footer-logo{height:68px;margin-bottom:12px;display:block}
.footer-brand p{margin:0;color:#94A3B8;font-size:15px;letter-spacing:.01em}
.footer-right{display:grid;grid-template-columns:130px 170px minmax(360px,1fr);gap:38px;align-items:start}
.footer-nav-grid{display:contents}
.footer-nav-column{display:flex;flex-direction:column;gap:10px;min-width:0}
.footer-column-title{display:block;font-size:10.5px;letter-spacing:.12em;color:var(--primary,#2563EB);font-weight:800;margin:1px 0 9px}
.footer-nav-column a{font-size:13px;line-height:1.3;color:#94A3B8;transition:color .2s ease,transform .2s ease}
.footer-nav-column a:hover{color:#fff;transform:translateX(2px)}
.footer-social-panel{min-width:0;padding-left:8px}
.footer-social-panel > .footer-column-title{margin-bottom:16px;text-align:left}
.footer-social-list{display:flex;gap:26px;align-items:flex-start}
.footer-social-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;min-width:72px;padding:0;border:0;background:transparent;border-radius:0;text-align:center;transition:transform .2s ease}
.footer-social-item:hover{background:transparent;transform:translateY(-2px)}
.footer-social-item .social-circle{width:40px;height:40px;min-width:40px;font-size:15px;border-width:1px}
.footer-social-item .social-x-mark{font-size:17px}
.footer-social-item>span:last-child{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;min-width:0}
.footer-social-item strong{font-size:12px;font-weight:700;color:#E2E8F0;white-space:nowrap}
.footer-divider{height:1px;background:#1E293B}
.footer-copy{padding:16px 0 20px}
.footer-copy p{margin:0;color:#64748B;font-size:12px}
@media(max-width:1020px){.footer-shell{grid-template-columns:1fr;gap:34px}.footer-right{grid-template-columns:140px 160px 1fr}}
@media(max-width:760px){.footer{padding-top:42px}.footer-shell{gap:30px;padding-bottom:32px}.footer-right{grid-template-columns:1fr 1fr;gap:30px 26px}.footer-social-panel{grid-column:1/-1}.footer-social-list{justify-content:flex-start;flex-wrap:wrap;gap:22px 28px}.footer-social-item{flex:0 0 76px}.footer-copy{padding:14px 0 18px}}
@media(max-width:480px){.footer-right{grid-template-columns:1fr 1fr}.footer-logo{height:62px}.footer-social-list{display:grid;grid-template-columns:1fr}.footer-social-item{width:100%}}