/* =====================================================
   HOMEPAGE-ONLY MODERN UI/UX REFRESH
   Loaded AFTER css/style.css, and ONLY by index.php - every rule
   here either targets a class that exists nowhere outside the
   homepage, or is written as a compound selector scoped to a
   homepage-only parent (e.g. ".hero-actions .btn-primary") so the
   shared css/style.css rules used by help/index.html,
   customers/index.php and admin/index.php are never touched.
   ===================================================== */

:root{
  --accent-2: #7c3aed;               /* violet - paired with the existing #2563eb blue for gradients */
  --accent-gradient: linear-gradient(135deg, #2563eb 0%, #4f46e5 55%, #7c3aed 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(37,99,235,.10), rgba(124,58,237,.10));
}

@media(prefers-reduced-motion:reduce){
  .hero-blobs span,
  .eyebrow-tag::before{
    animation:none !important;
  }
}

/* ---------- Eyebrow tags (small label above a heading) ---------- */
.eyebrow-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#4338ca;
  background:var(--accent-gradient-soft);
  border:1px solid rgba(99,102,241,.18);
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:16px;
}

.eyebrow-tag::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent-gradient);
  flex-shrink:0;
  animation:eyebrowPulse 2.4s ease-in-out infinite;
}

@keyframes eyebrowPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.5; transform:scale(.7); }
}

.section-header .eyebrow-tag{
  margin-left:auto;
  margin-right:auto;
}

.about-left .eyebrow-tag{
  margin-bottom:18px;
}

/* ---------- Hero: gradient mesh blobs + modern accents ---------- */
.hero{
  isolation:isolate; /* keeps the blob layer's z-index contained to the hero */
}

.hero-blobs{
  position:absolute;
  inset:0;
  z-index:-3; /* behind .hero-bg (-2) and the ::before wash (-1 by stacking order below) */
  overflow:hidden;
  pointer-events:none;
}

.hero-blobs span{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.35;
}

.hero-blobs .blob-1{
  width:420px;
  height:420px;
  top:-140px;
  left:-100px;
  background:radial-gradient(circle at 30% 30%, #60a5fa, transparent 70%);
  animation:blobFloat1 16s ease-in-out infinite;
}

.hero-blobs .blob-2{
  width:360px;
  height:360px;
  bottom:-160px;
  right:-80px;
  background:radial-gradient(circle at 60% 40%, #a78bfa, transparent 70%);
  animation:blobFloat2 18s ease-in-out infinite;
}

.hero-blobs .blob-3{
  width:220px;
  height:220px;
  top:40%;
  left:38%;
  background:radial-gradient(circle at 50% 50%, #93c5fd, transparent 70%);
  opacity:.25;
  animation:blobFloat1 20s ease-in-out infinite reverse;
}

@keyframes blobFloat1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(30px,25px) scale(1.08); }
}

@keyframes blobFloat2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-25px,-20px) scale(1.06); }
}

@media(max-width:900px){
  .hero-blobs .blob-1,
  .hero-blobs .blob-2{
    width:260px;
    height:260px;
  }
  .hero-blobs .blob-3{
    display:none;
  }
}

/* Gradient text on the hero's highlighted line */
.hero-text h1 span{
  background:var(--accent-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Modern pill badges for the 3 hero feature bullets */
.hero-features .feature{
  background:#ffffff;
  border:1px solid #e5e7eb;
  padding:8px 14px 8px 12px;
  border-radius:999px;
  box-shadow:0 4px 14px rgba(15,23,42,.05);
}

/* Modern pill CTAs, hero + contact form + bottom products CTA only */
.hero-actions .btn-primary,
.contact-form-box .btn-primary,
#products .btn-secondary{
  border-radius:999px;
}

.hero-actions .btn-primary{
  background:var(--accent-gradient);
  box-shadow:0 14px 34px rgba(79,70,229,.32);
}

.hero-actions .btn-primary:hover{
  box-shadow:0 18px 40px rgba(79,70,229,.4);
  transform:translateY(-3px);
}

.hero-actions .btn-secondary{
  border-radius:999px;
  border-color:#c7d2fe;
  background:#ffffff;
}

.hero-actions .btn-secondary:hover{
  border-color:#4f46e5;
  color:#4f46e5;
}

.contact-form-box .btn-primary{
  background:var(--accent-gradient);
}

#products .btn-secondary{
  border:1.5px solid #4f46e5;
  color:#4f46e5;
  font-weight:700;
}

#products .btn-secondary:hover{
  background:var(--accent-gradient);
  color:#fff;
  border-color:transparent;
}

/* Trust avatars: gradient ring instead of a plain white border */
.hero-trust .avatars img{
  border:2px solid #fff;
  box-shadow:0 0 0 2px #c7d2fe;
}

/* ---------- Section backgrounds: subtle dot-grid texture on light sections ---------- */
.services,
.about-inteliska{
  position:relative;
}

.services::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(37,99,235,.08) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
  pointer-events:none;
}

.services .container{
  position:relative;
}

/* ---------- Modernized cards: gradient icon chips + colored hover glow ---------- */
.service-icon,
.about-icon,
.process-card span{
  background:var(--accent-gradient);
  color:#fff;
  box-shadow:0 10px 24px rgba(79,70,229,.28);
}

.service-card,
.about-card,
.process-card,
.product-card,
.testimonial-card{
  border-radius:20px;
}

.service-card:hover,
.product-card:hover{
  box-shadow:0 20px 50px rgba(79,70,229,.14);
  border-color:#ddd6fe;
}

.process-card:hover{
  box-shadow:0 20px 50px rgba(79,70,229,.14);
}

.testimonial-card:hover{
  box-shadow:0 18px 44px rgba(79,70,229,.12);
}

/* Subtle top accent line that appears on hover, service + product cards */
.service-card,
.product-card{
  position:relative;
  overflow:hidden;
}

.service-card::before,
.product-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--accent-gradient);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s ease;
}

.service-card:hover::before,
.product-card:hover::before{
  transform:scaleX(1);
}

/* Testimonial cards: large decorative quote mark, gradient avatar */
.testimonial-card{
  padding-top:34px;
}

.testimonial-card::after{
  content:"\201C";
  position:absolute;
  top:6px;
  left:22px;
  font-size:60px;
  line-height:1;
  font-family:Georgia, serif;
  color:#e0e7ff;
  z-index:0;
}

.testimonial-card > *{
  position:relative;
  z-index:1;
}

.testimonial-user .avatar{
  background:var(--accent-gradient);
  color:#fff;
}

/* Tech stack icons: soft gradient chip instead of a bare icon */
.tech-item i{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:#f1f5f9;
  font-size:26px;
}

.tech-item:hover i{
  background:var(--accent-gradient-soft);
}

/* ---------- Contact section: soft gradient wash behind the form/info cards ---------- */
.contact-section{
  position:relative;
}

.contact-form-box,
.contact-info-box{
  border-radius:20px;
}

.contact-info-box .btn-whatsapp{
  border-radius:999px;
}

/* ---------- Footer: gradient top border ---------- */
.footer{
  position:relative;
}

.footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--accent-gradient);
}