/* ============================================================
   GoInAuto — Landing Animations (clean, no style.css needed)
   ============================================================ */

/* ── RESET CONFLICTS FROM style.css ──────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  background-color: #070f32!important;
  color: #ffffff !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Kill style.css light backgrounds on key sections */
.middle-part,
.user-contents,
.automation-section,
.automation-curve,
.automation-content,
.bottom-part,
.last-part,
.last-part-wrapper,
.testimonials-container,
.cta-banner-modern {
  background-color: #0a0e1a !important;
}

/* ── STARFIELD ────────────────────────────────────────────── */
#page-stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.25;
}



/* ── SECTION SPACING ──────────────────────────────────────── */
.hero-row            { padding: 120px 0 80px; }
.middle-part         { padding: 80px 0; }
.last-part-wrapper   { padding: 0px 0; }
.testimonials-container { padding: 80px 0; }
.cta-banner-modern   { padding: 0; }

/* ── HERO ─────────────────────────────────────────────────── */
.hero-row {
  background: #070f32 !important;
  position: relative;
  overflow: visible;
  margin-top: 0;
}

.hero-row::after {
  content: '';
  position: absolute;
  top: -10%; right: -5%;
  width: 55%; height: 110%;
  pointer-events: none;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.hero-headline {
  font-size: 5rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.05 !important;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.hero-word {
  display: block;
  opacity: 0;
  will-change: transform, opacity;
  letter-spacing: -2px;
  color: #ffffff !important;
}

.hero-word:nth-child(2) {
  background: linear-gradient(135deg, #EFB450 0%, #f5c842 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.hero-tagline {
  color: #94a3b8 !important;
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
  margin: 24px 0 0 !important;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image {
  width: 100%;
  max-width: 560px;
  height: auto;
  object-fit: contain;
}

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

.hero-float {
  animation: heroFloat 4s ease-in-out infinite;
  will-change: transform;
  filter: drop-shadow(0 0 40px rgba(14,56,175,0.4)) !important;
  mask-image: radial-gradient(ellipse 85% 85% at 55% 50%,
    black 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 55% 50%,
    black 45%, transparent 100%);
}

.hero-cta { margin-top: 8px; }

.contact-btn-minimal {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #0E38AF 0%, #8196D1 100%) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 14px 36px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border: none !important;
  text-decoration: none !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;

}

.contact-btn-minimal:hover {

  transform: translateY(-2px) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ── AUTOMATION INTRO ─────────────────────────────────────── */
.automation-section {
  background: #0a0e1a !important;
  padding: 0px 80px !important;
  border-radius: 0 !important;
  min-height: unset !important;
  text-align: center;
}

.automation-curve {
  background: #0a0e1a !important;
  clip-path: none !important;
}

.automation-title {
  color: #ffffff !important;
  font-size: 2.8rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.automation-description p {
  color: #94a3b8 !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
}

/* Stat pills */
.auto-answers {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  justify-content: center;
}

.auto-answers h4 {
  display: inline-block !important;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 1.5px !important;
  border: 1.5px solid rgba(239,180,80,0.4) !important;
  background: rgba(239,180,80,0.08) !important;
  color: #EFB450 !important;
  opacity: 0;
  cursor: default !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.auto-answers h4:hover {
  border-color: #EFB450 !important;
  box-shadow: 0 0 20px rgba(239,180,80,0.4) !important;
}

.faster, .smarter, .time-saver, .reduce-error {
  color: #EFB450 !important;
  background: rgba(239,180,80,0.08) !important;
  background-color: unset !important;
  box-shadow: none !important;
  margin-left: 0 !important;
}

/* ── SERVICE CARDS ────────────────────────────────────────── */
.services-section {
  background: #0a0e1a !important;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.services-sticky {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  padding: 20px 40px;
  gap: 24px;
}

.services-grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  width: min(1060px, 92vw);
  height: min(520px, 62vh);
  align-items: stretch;
}

/* Scope strictly to services section to avoid conflict */
#services .service-card {
  padding: 28px 28px !important;
  height: 100% !important;
  min-height: unset !important;
  max-height: unset !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(108,99,255,0.2) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  opacity: 0;
  will-change: transform, opacity;
  overflow: hidden !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

#services .service-card:hover {
  border-color: rgba(108,99,255,0.6) !important;
  box-shadow: 0 0 30px rgba(108,99,255,0.25) !important;
}

.service-card-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow: hidden;
}

.service-icon-wrap {
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex-shrink: 0;
  background: rgba(108,99,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-icon-wrap svg {
  width: 20px;
  height: 20px;
  color: #6C63FF;
  stroke: #6C63FF;
}

.service-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  flex-shrink: 0 !important;
}

.service-desc {
  font-size: 0.82rem !important;
  color: #94a3b8 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical !important;
  flex: 1 !important;
}

.card-counter { display: none !important; }

/* .services-progress {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.4s ease;
  display:none !important;
}

.progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background 0.4s ease, transform 0.4s ease;
} */

/* ── SERVICE CARDS — BRAND COLOR REDESIGN ──────────────────── */

/* Remove old icon
.service-icon-wrap { display: none !important; }

/* Base card reset for new style */
#services .service-card {
  position: relative !important;
  border-radius: 20px !important;
  padding: 36px 32px 32px !important;
  overflow: hidden !important;
  min-height: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  height: 100% !important;
}

/* Top accent line */
#services .service-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  border-radius: 20px 20px 0 0 !important;
  z-index: 2 !important;
}

/* Oversized background number */
.card-number {
  position: absolute !important;
  top: -10px !important;
  right: 16px !important;
  font-size: 7rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -4px !important;
  opacity: 0.05 !important;
  user-select: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Card tag */
.card-tag {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  display: block !important;
  opacity: 0.8 !important;
  color: #EFB450 !important;
}

/* Card inner — sits above number */
.service-card-inner {
  position: relative !important;
  z-index: 1 !important;
}



/* ── CARD 1 — Royal Blue ── */
/* #Services .card-1 {
  background: linear-gradient(135deg,
    rgba(14,56,175,0.25) 0%,
    rgba(7,15,50,0.9) 100%) !important;
  border: 1px solid rgba(14,56,175,0.35) !important;
}
#Services .card-1::before {
  background: linear-gradient(90deg, #0E38AF, #8196D1) !important;
}
#Services .card-1 .card-number { color: #0E38AF !important; }
#Services .card-1 .card-tag { color: #8196D1 !important; }
#Services .card-1:hover {
  box-shadow: 0 20px 40px rgba(14,56,175,0.2) !important;
  border-color: rgba(14,56,175,0.6) !important;
} */

/* ── CARD 2 — Gold ── */
/* #services .card-2 {
  background: linear-gradient(135deg,
    rgba(239,180,80,0.15) 0%,
    rgba(7,15,50,0.9) 100%) !important;
  border: 1px solid rgba(239,180,80,0.25) !important;
}
#services .card-2::before {
  background: linear-gradient(90deg, #EFB450, #f5c842) !important;
}
#services .card-2 .card-number { color: #EFB450 !important; }
#services .card-2 .card-tag { color: #EFB450 !important; }
#services .card-2:hover {
  box-shadow: 0 20px 40px rgba(239,180,80,0.15) !important;
  border-color: rgba(239,180,80,0.5) !important;
} */

/* ── CARD 3 — Soft Blue ── */
/* #services .card-3 {
  background: linear-gradient(135deg,
    rgba(129,150,209,0.2) 0%,
    rgba(7,15,50,0.9) 100%) !important;
  border: 1px solid rgba(129,150,209,0.25) !important;
}
#services .card-3::before {
  background: linear-gradient(90deg, #8196D1, #0E38AF) !important;
}
#services .card-3 .card-number { color: #8196D1 !important; }
#services .card-3 .card-tag { color: #8196D1 !important; }
#services .card-3:hover {
  box-shadow: 0 20px 40px rgba(129,150,209,0.2) !important;
  border-color: rgba(129,150,209,0.5) !important;
} */

/* ── CARD 4 — Gold ── */
/* #services .card-4 {
  background: linear-gradient(135deg,
    rgba(239,180,80,0.12) 0%,
    rgba(7,15,50,0.9) 100%) !important;
  border: 1px solid rgba(239,180,80,0.2) !important;
}
#services .card-4::before {
  background: linear-gradient(90deg, #EFB450, #0E38AF) !important;
}
#services .card-4 .card-number { color: #EFB450 !important; }
#services .card-4 .card-tag { color: #EFB450 !important; }
#services .card-4:hover {
  box-shadow: 0 20px 40px rgba(239,180,80,0.12) !important;
  border-color: rgba(239,180,80,0.45) !important;
} */

/* ── CARD 5 — Royal Blue ── */
/* #services .card-5 {
  background: linear-gradient(135deg,
    rgba(14,56,175,0.2) 0%,
    rgba(7,15,50,0.9) 100%) !important;
  border: 1px solid rgba(14,56,175,0.3) !important;
}
#services .card-5::before {
  background: linear-gradient(90deg, #0E38AF, #EFB450) !important;
}
#services .card-5 .card-number { color: #0E38AF !important; }
#services .card-5 .card-tag { color: #8196D1 !important; }
#services .card-5:hover {
  box-shadow: 0 20px 40px rgba(14,56,175,0.2) !important;
  border-color: rgba(14,56,175,0.55) !important;
} */

/* ── CARD 6 — Gold + Blue mix ── */
/* #services .card-6 {
  background: linear-gradient(135deg,
    rgba(239,180,80,0.18) 0%,
    rgba(14,56,175,0.15) 50%,
    rgba(7,15,50,0.9) 100%) !important;
  border: 1px solid rgba(239,180,80,0.3) !important;
}
#services .card-6::before {
  background: linear-gradient(90deg, #EFB450, #8196D1, #0E38AF) !important;
}
#services .card-6 .card-number { color: #EFB450 !important; }
#services .card-6 .card-tag { color: #EFB450 !important; }
#services .card-6:hover {
  box-shadow: 0 20px 40px rgba(239,180,80,0.2) !important;
  border-color: rgba(239,180,80,0.55) !important;
}  */

/* ── DEMO SECTION ─────────────────────────────────────────── */
#goinauto-products {
  background: #0d1117 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 20 !important;
  border-radius: 28px 28px 0 0 !important;
  box-shadow: 0 -30px 80px rgba(0,0,0,0.7) !important;
  margin-top: -100vh !important;
}

.disclaimer-premium {
  background: linear-gradient(135deg,
    rgba(108,99,255,0.1) 0%,
    rgba(0,191,255,0.07) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

.disclaimer-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding-bottom: 40px !important;
}

.disclaimer-title { color: #ffffff !important; }
.disclaimer-paragraph-1,
.disclaimer-paragraph-2 { color: #94a3b8 !important; }

.demo-section-header {
  text-align: center !important;
  padding: 0 20px 32px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.demo-section-header h2 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.5px;
  margin: 0 0 8px !important;
  display: block !important;
}

.demo-section-header p {
  color: #94a3b8 !important;
  margin: 0 !important;
  font-size: 1rem;
  display: block !important;
}

.demo-scroll-section,
.demo-section {
  overflow: visible !important;
  position: relative;
  padding-top: 0;
}

.demo-scroll-section {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #0d1117 !important;
}

.demo-track-wrapper {
  overflow: hidden !important;
  width: 100vw !important;
}

.demo-track-wrapper::-webkit-scrollbar { display: none; }
.demo-track-wrapper:active { cursor: grabbing; }

.demo-track {
  display: flex !important;
  gap: 24px !important;
  padding: 20px 60px 40px !important;
  width: max-content !important;
  align-items: center !important;
}

.demo-card-new {
  width: 300px;
  min-height: 300px;
  border-radius: 20px;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
  color: #ffffff !important;
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.demo-card-new:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  text-decoration: none !important;
  color: #ffffff !important;
}

.demo-card-illustration {
  width: 100% !important;
  height: 160px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 20px !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 14px 14px 0 0 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  position: relative;
  z-index: 1;
}

.demo-card-illustration svg,
.demo-card-illustration img {
  width: 100% !important;
  max-height: 130px !important;
  object-fit: contain !important;
  display: block;
}

.demo-card-body {
  flex: 1;
  position: relative;
  z-index: 1;
  padding: 16px 20px 0 20px !important;
}
.demo-card-body h3 {
  font-size: 1.3rem; font-weight: 700;
  color: #ffffff !important;
  margin: 0 0 8px;
}
.demo-card-body p {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.9rem; line-height: 1.5;
  margin: 0;
}

.card-arrow-circle {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #ffffff;
  align-self: flex-end;
  position: relative; z-index: 1;
  transition: background 0.25s ease, transform 0.25s ease;
  flex-shrink: 0;
  margin: 12px 20px 20px auto !important;
}

.demo-card-new:hover .card-arrow-circle {
  background: rgba(255,255,255,0.35);
  transform: translateX(4px);
}

.demo-card-1 { background: linear-gradient(160deg, #0E38AF 0%, #1a4fd4 100%) !important; }
.demo-card-2 { background: linear-gradient(160deg, #c47a00 0%, #EFB450 100%) !important; }
.demo-card-3 { background: linear-gradient(160deg, #0E38AF 0%, #8196D1 100%) !important; }
.demo-card-4 { background: linear-gradient(160deg, #070F32 0%, #0E38AF 100%) !important; border: 1px solid rgba(129,150,209,0.2) !important; }
.demo-card-5 { background: linear-gradient(160deg, #8196D1 0%, #0E38AF 100%) !important; }
.demo-card-6 { background: linear-gradient(160deg, #EFB450 0%, #0E38AF 100%) !important; }

.demo-card-new::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent,
    rgba(255,255,255,0.08), transparent);
  transform: translateX(-100%) skewX(-15deg);
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
.demo-card-2::after { animation-delay: 0.5s; }
.demo-card-3::after { animation-delay: 1.0s; }
.demo-card-4::after { animation-delay: 1.5s; }
.demo-card-5::after { animation-delay: 2.0s; }
.demo-card-6::after { animation-delay: 2.5s; }

@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(200%) skewX(-15deg); }
}

/* ── IT SOLUTIONS + DEPLOYMENT ────────────────────────────── */
#it-solutions-block {
  background: #0a0e1a !important;
}

.last-part {
  background: #0a0e1a !important;
  padding: 80px 60px !important;
}

.service-cards-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 32px !important;
  max-width: 1300px !important;
  width: 100% !important;
}

/* Split cards — scoped to avoid touching grid cards */
.split-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  min-height: 400px !important;
  transform: none !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease !important;
  padding: 0 !important;
}

.split-card:hover {
  border-color: rgba(108,99,255,0.3) !important;
}

.split-card .service-card-content-wrapper {
  padding: 48px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: transparent !important;
}

.split-card .split-image-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  height: 100% !important;
}

.split-image {
  width: 100% !important;
  height: 100% !important;
  max-height: 320px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: block !important;
}

.split-image-it {
  filter: drop-shadow(0 0 40px rgba(108,99,255,0.5)) !important;
  box-shadow: none !important;
}

.split-image-deploy {
  filter: drop-shadow(0 0 40px rgba(0,191,255,0.5)) !important;
  box-shadow: none !important;
}

.service-card-title {
  color: #ffffff !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.5px !important;
}

.service-card-description {
  color: #94a3b8 !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  margin-bottom: 28px !important;
}

.service-card-button {
  background: linear-gradient(135deg, #0e38af 0%, #16171a 100%);
  border: none !important;
  color: #ffffff !important;
  padding: 12px 28px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  align-self: flex-start !important;
}

.service-card-button:hover {
  
  transform: translateY(-2px) !important;
}

/* ── AI RECOMMENDER ───────────────────────────────────────── */
.ai-recommender-section {
  background: linear-gradient(135deg, #080c1e 0%, #0a1240 50%, #070F32 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 100px 40px !important;
}

.ai-orb {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 400px; height: 400px;
  background: radial-gradient(circle,
    rgba(108,99,255,0.3) 0%, transparent 70%);
  filter: blur(80px);
  opacity: 0.3;
  pointer-events: none;
  animation: orbFloat 6s ease-in-out infinite;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(-50%,-50%) scale(1);   opacity: 0.3; }
  50%       { transform: translate(-50%,-50%) scale(1.2); opacity: 0.5; }
}

.ai-recommender-container {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}

.ai-recommender-heading {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
}

.ai-recommender-subtext {
  color: #94a3b8 !important;
  font-size: 1.05rem !important;
  margin-bottom: 48px !important;
}



.ai-options-row {
  display: flex !important;
  gap: 20px !important;
  justify-content: center !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  margin-bottom: 48px !important;
}

.ai-option-card {
  width: 200px !important;
  height: auto !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1.5px solid rgba(255,255,255,0.1) !important;
  border-radius: 20px !important;
  padding: 32px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  cursor: pointer !important;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  opacity: 0;
  transform: translateY(30px);
}

.ai-option-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(108,99,255,0.15) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 18px;
  pointer-events: none;
}

.ai-option-card:hover::before,
.ai-option-card.deployment-option-active::before {
  opacity: 1;
}

.ai-option-card:hover {
  border-color: #EFB450 !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 0 24px rgba(239, 180, 80, 0.2) !important;
}

.ai-option-card.deployment-option-active {
  border-color: #EFB450 !important;
  box-shadow: 0 0 24px rgba(239, 180, 80, 0.2)!important;
  transform: translateY(-4px) !important;
}

.ai-option-icon {
  width: 64px !important;
  height: 64px !important;
  background: rgba(108,99,255,0.12) !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
  position: relative !important;
  z-index: 1 !important;
  transition: background 0.3s ease !important;
}

.ai-option-card:hover .ai-option-icon,
.ai-option-card.deployment-option-active .ai-option-icon {
  background: rgba(108,99,255,0.25) !important;
}

.ai-option-card .option-label {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
}

.ai-match-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #efb450 0%, #f5a623 100%);
  color: #070f32;
  text-decoration: none !important;
  padding: 16px 40px !important;
  border-radius: 50px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  /* box-shadow: 0 0 30px rgba(108, 99, 255, 0.4) !important; */
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}




.ai-match-btn:hover {
  color: #070f32 !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
}

/* ── TRUSTED BY ───────────────────────────────────────────── */
.testimonials-container {
  background: #0a0e1a !important;
  position: relative !important;
  text-align: center !important;
  padding: 80px 40px !important;
  overflow: hidden !important;
}


.testimonials-container::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 600px !important;
  height: 200px !important;
  background: radial-gradient(ellipse,
    rgba(14,56,175,0.1) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.trusted-by-label,
.trusted-label {

  letter-spacing: 5px !important;
  color: #EFB450 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
  display: block !important;
}

.testimonials-title,
.trusted-subtitle {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 56px !important;
  letter-spacing: -0.5px !important;
}

.trusted-logo {
  display: inline-flex !important;
  align-items: center !important;
  padding: 20px 32px !important;
  border-radius: 16px !important;
  transition: border-color 0.3s ease, background 0.3s ease !important;
}


.client-logo {
  height: 48px !important;
  max-width: 160px !important;
  object-fit: contain !important;
  opacity: 0.6 !important;
  transition: opacity 0.3s ease !important;
}

.client-logo:hover { opacity: 1 !important; }

/* ── CTA ──────────────────────────────────────────────────── */
.cta-banner-modern {
  background: #0a0e1a !important;
  position: relative;
  overflow: hidden;

}

/* #cta-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
} */

/* .cta-decorative-orb {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle,
    rgba(108,99,255,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: orbPulse 5s ease-in-out infinite;
} */

@keyframes orbPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1);    opacity: 0.6; }
  50%       { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
}

.cta-banner-content {
  position: relative; z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 48px !important;
  flex-wrap: wrap !important;
}

.cta-banner-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin: 0 0 12px !important;
}

.cta-banner-title .highlight {
  background: linear-gradient(135deg,#efb450 , #f5c842)!important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.cta-banner-subtitle {
  color: #94a3b8 !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.cta-primary-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg,#efb450 , #f5c842) !important;
  color: #070F32 !important;
  padding: 18px 44px !important;
  border-radius: 50px !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: none !important;
  animation: ctaBtnGlow 2.5s ease-in-out infinite !important;
  transition: transform 0.3s ease !important;
  white-space: nowrap;
}

@keyframes ctaBtnGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(239,180,80,0.3); }
  50%       { box-shadow: 0 0 40px rgba(239,180,80,0.55),
                          0 0 70px rgba(239,180,80,0.2); }
}

.cta-primary-button:hover {
  transform: translateY(-3px) !important;
  color: #070F32 !important;
  text-decoration: none !important;
}

/* ── FOOTER ───────────────────────────────────────────────── */
.mainfooter { background: #060a14 !important; }
.mainfooter h4,
.mainfooter a,
.mainfooter p { color: #94a3b8 !important; }
.mainfooter a:hover {
  color: #6C63FF !important;
  text-decoration: none !important;
}

/* ── PREFERS REDUCED MOTION ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-float,
  .ai-orb,
  /* .cta-decorative-orb, */
  .demo-card-new::after { animation: none !important; }

  .hero-word,
  .auto-answers h4,
  #services .service-card { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET (max-width: 1024px)
══════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* HERO */
  .hero-content {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center !important;
    padding: 0 24px !important;
  }
  .hero-headline { font-size: 3.8rem !important; }
  .hero-right { justify-content: center !important; }
  .hero-image { max-width: 420px !important; }
  .hero-cta { display: flex; justify-content: center; }

  /* SERVICE CARDS */
  .services-grid-layout {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(3, auto) !important;
    width: 90vw !important;
    height: auto !important;
    gap: 12px !important;
  }

  /* IT SOLUTIONS */
  .service-cards-container {
    grid-template-columns: 1fr !important;
  }
  .split-card {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
    flex-direction: column !important;
  }
  .split-card-reverse {
    flex-direction: column-reverse !important;
  }
  .split-card .split-image-wrapper {
    min-height: 240px !important;
  }

  /* AI SECTION */
  .ai-options-row { gap: 16px !important; }
  .ai-option-card {
    width: 140px !important;
    height: auto !important;
  }

  /* CTA */
  .cta-banner-content {
    flex-direction: column !important;
    padding: 60px 40px !important;
    align-items: flex-start !important;
    gap: 32px !important;
  }
}


/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE (max-width: 768px)
══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* GENERAL */
  body { overflow-x: hidden !important; }

  /* NAVBAR */
  .navbar-mainbg .nav-link {
    font-size: 0.82rem !important;
    padding: 6px 10px !important;
  }
  .navbar-mainbg .nav-item:last-child .nav-link {
    padding: 6px 14px !important;
  }

  /* HERO */
  .hero-row { padding: 80px 0 60px !important; }
  .hero-content {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: center !important;
    padding: 0 20px !important;
  }
  .hero-headline { font-size: 3rem !important; letter-spacing: -1px !important; }
  .hero-tagline { font-size: 0.95rem !important; }
  .hero-image { max-width: 320px !important; }
  .hero-cta { display: flex !important; justify-content: center !important; }

  /* AUTOMATION SECTION */
  .automation-section { padding: 48px 20px !important; }
  .automation-title { font-size: 2rem !important; }
  .automation-content {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .auto-answers {
    justify-content: center !important;
    padding-top: 24px !important;
  }

  /* SERVICE CARDS */
  .services-sticky {
    height: auto !important;
    padding: 40px 16px !important;
    gap: 16px !important;
  }
  .services-grid-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(6, auto) !important;
    height: auto !important;
    width: 92vw !important;
    gap: 12px !important;
  }
  #services .service-card {
    opacity: 1 !important;
    transform: none !important;
    min-height: 140px !important;
  }
  .services-progress { display: none !important; }
  .card-number { font-size: 5rem !important; }

  /* DEMO SECTION */
  .demo-scroll-section {
    position: relative !important;
    height: auto !important;
    padding: 60px 0 40px !important;
  }
  #demo-spacer { display: none !important; }
  .demo-track-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100vw !important;
  }
  .demo-track {
    flex-wrap: nowrap !important;
    padding: 0 20px 20px !important;
    gap: 16px !important;
  }
  .demo-card-new {
    width: 260px !important;
    min-height: 240px !important;
  }
  .demo-card-illustration {
    height: 130px !important;
  }

  /* IT SOLUTIONS */
  .last-part { padding: 48px 20px !important; }
  .service-cards-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    max-width: 100% !important;
  }
  .split-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: unset !important;
    border-radius: 16px !important;
  }
  .split-card-reverse {
    flex-direction: column-reverse !important;
  }
  .split-card .service-card-content-wrapper {
    padding: 28px 24px !important;
  }
  .split-card .split-image-wrapper {
    min-height: 200px !important;
    padding: 0 !important;
  }
  .split-image { max-height: 200px !important; }
  .service-card-title { font-size: 1.4rem !important; }

  /* AI SECTION */
  .ai-recommender-section { padding: 60px 20px !important; }
  .ai-recommender-heading { font-size: 1.5rem !important; }
  .ai-options-row {
    gap: 12px !important;
    justify-content: center !important;
  }
  .ai-option-card {
    width: 110px !important;
    height: 110px !important;
  }
  .ai-option-icon { font-size: 1.5rem !important; height: 36px !important; }
  .ai-match-btn {
    padding: 14px 32px !important;
    font-size: 0.95rem !important;
  }

  /* TRUSTED BY */
  .testimonials-container { padding: 60px 20px !important; }
  .testimonials-title { font-size: 1.4rem !important; margin-bottom: 36px !important; }
  .trusted-logos { gap: 24px !important; }
  .trusted-logo { padding: 16px 24px !important; }
  .client-logo { height: 40px !important; }

  /* CTA */
  .cta-banner-content {
    flex-direction: column !important;
    padding: 48px 20px !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }
  .cta-banner-title { font-size: 1.6rem !important; }
  .cta-primary-button {
    padding: 14px 32px !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* FOOTER */
  .mainfooter .container {
    flex-direction: column !important;
    gap: 32px !important;
    padding: 40px 20px !important;
  }

  /* ── SERVICE CARDS — disable pin, show flat grid ── */
  .services-section { overflow: visible !important; }
  .services-sticky {
    position: relative !important;
    height: auto !important;
    padding: 40px 16px !important;
    gap: 16px !important;
  }
  .services-grid-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
    width: 92vw !important;
    gap: 12px !important;
  }
  #services .service-card {
    opacity: 1 !important;
    transform: none !important;
    scale: 1 !important;
    min-height: 140px !important;
    justify-content: flex-start !important;
  }

  /* ── DEMO SECTION — disable sticky, enable touch swipe ── */
  #goinauto-products { overflow: hidden !important; margin-top: 0 !important; }
  .demo-scroll-section {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    padding: 60px 0 40px !important;
    overflow: visible !important;
  }
  #demo-spacer { display: none !important; height: 0 !important; }
  .demo-track-wrapper {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100vw !important;
    scrollbar-width: none !important;
  }
  .demo-track-wrapper::-webkit-scrollbar { display: none !important; }
  .demo-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    padding: 0 20px 20px !important;
    gap: 16px !important;
    transform: none !important;
  }
  .demo-card-new { width: 260px !important; min-height: 260px !important; flex-shrink: 0 !important; }
  .demo-card-illustration { height: 130px !important; }
}


/* ══════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (max-width: 480px)
══════════════════════════════════════════ */
@media (max-width: 480px) {

  .hero-headline { font-size: 2.4rem !important; }
  .hero-image { max-width: 280px !important; }

  .services-grid-layout { width: 95vw !important; }

  .ai-option-card {
    width: 90px !important;
    height: 90px !important;
  }
  .ai-option-icon { font-size: 1.2rem !important; }
  .ai-option-card .option-label { font-size: 0.75rem !important; }

  .demo-card-new { width: 240px !important; }

  .cta-banner-title { font-size: 1.4rem !important; }
}