/* =====================================================================
   Premium / cinematic layer (home page). Additive: loads after main.css.
   Animations use transform + opacity only, and stop under reduced motion.
   ===================================================================== */
:root {
  --pm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pm-radius: 20px;
  --pm-shadow: 0 10px 30px rgba(11, 11, 35, 0.10);
  --pm-shadow-hover: 0 24px 50px rgba(11, 11, 35, 0.18);
  --pm-glow: #a78bfa;
}

.index-page { overflow-x: clip; }

/* ---------- Scroll progress bar ---------- */
.pm-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
  background: linear-gradient(90deg, #f80083, #9b25ff);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ---------- Spacing & hierarchy ---------- */
.index-page .section { padding: clamp(64px, 8vw, 112px) 0; }
.index-page #hero.section { padding: clamp(56px, 7vw, 96px) 0; }

.index-page .section-title { padding-bottom: clamp(40px, 5vw, 64px); }
.index-page .section-title h2,
.index-page .section-title h3 {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.index-page .section-title p {
  max-width: 680px; margin: 0 auto; line-height: 1.7; opacity: 0.85;
}
.index-page .section-title h2::after,
.index-page .section-title h3::after {
  content: ""; display: block; width: 56px; height: 4px; margin: 18px auto 0;
  border-radius: 4px; background: linear-gradient(90deg, #f80083, #9b25ff);
}

/* Soft hairline between sections so the page reads as one continuous story */
.index-page .section + .section { position: relative; }
.index-page .section + .section::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(80%, 900px); height: 1px;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.55), transparent);
}

/* ---------- Cards: one radius, one shadow system ---------- */
.index-page .service-card,
.index-page .feature-card,
.index-page .method-card,
.index-page .portfolio-item {
  border-radius: var(--pm-radius);
  transition: transform 0.45s var(--pm-ease), box-shadow 0.45s var(--pm-ease), border-color 0.3s ease;
}
.index-page .service-card { padding: clamp(24px, 2.6vw, 36px); box-shadow: var(--pm-shadow); height: 100%; }
.index-page .service-card:hover { box-shadow: var(--pm-shadow-hover); }
.index-page .service-card p { line-height: 1.65; }

/* ---------- Icons: higher contrast, consistent, animated ---------- */
.index-page .service-icon,
.index-page .icon-wrapper {
  box-shadow: 0 8px 22px rgba(155, 37, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.45s var(--pm-ease), box-shadow 0.45s var(--pm-ease);
}
.index-page .service-icon i,
.index-page .icon-wrapper i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
  transition: transform 0.45s var(--pm-ease);
}
.index-page .service-card:hover .service-icon,
.index-page .feature-card:hover .icon-wrapper {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 14px 30px rgba(155, 37, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.index-page .service-card:hover .service-icon i,
.index-page .feature-card:hover .icon-wrapper i { transform: rotate(-6deg) scale(1.08); }

/* Small list icons (why-us) were pale purple on pale purple */
.index-page .why-us .feature-icon {
  background: linear-gradient(135deg, #7c3aed, #9b25ff) !important;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
}
.index-page .why-us .feature-icon i { color: #fff !important; }

/* Check-mark and arrow icons */
.index-page .bi-check-circle-fill { color: #22c55e; }
.index-page a .bi-arrow-right { display: inline-block; transition: transform 0.3s var(--pm-ease); }
.index-page a:hover .bi-arrow-right { transform: translateX(5px); }

/* Social icons */
.index-page .social-links a i { font-size: 1.15rem; }
.index-page .social-links a { transition: transform 0.3s var(--pm-ease), background-color 0.3s ease; }
.index-page .social-links a:hover { transform: translateY(-3px); }

/* ---------- Buttons ---------- */
.index-page .btn { transition: transform 0.3s var(--pm-ease), box-shadow 0.3s var(--pm-ease), background-color 0.3s ease; }
.index-page .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(155, 37, 255, 0.35); }
.index-page .btn:active { transform: translateY(0); }
.index-page :focus-visible { outline: 3px solid var(--pm-glow); outline-offset: 3px; }

/* ---------- Images: subtle zoom on hover ---------- */
.index-page .portfolio-item { overflow: hidden; }
.index-page .portfolio-item > a:first-child { display: block; overflow: hidden; border-radius: var(--pm-radius); }
.index-page .portfolio-img { transition: transform 0.9s var(--pm-ease); will-change: transform; }
.index-page .portfolio-item:hover .portfolio-img { transform: scale(1.06); }
.index-page .portfolio-item:hover { transform: translateY(-4px); }

/* Hero: parallax hook (value set by premium.js) */
.index-page .hero-visual { transform: translate3d(0, var(--pm-py, 0px), 0); will-change: transform; }
.index-page .hero-image img { animation: pm-float 7s ease-in-out infinite; }
@keyframes pm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Hero entrance: text rises in on load (transform/opacity only, no layout shift) */
.index-page .hero-content > * { animation: pm-rise 0.9s var(--pm-ease) both; }
.index-page .hero-content > *:nth-child(2) { animation-delay: 0.12s; }
.index-page .hero-content > *:nth-child(3) { animation-delay: 0.24s; }
.index-page .hero-content > *:nth-child(4) { animation-delay: 0.36s; }
@keyframes pm-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Image reveal: a mask wipes away as the image scrolls in */
.csx-reveal-ready [data-reveal="image"] {
  opacity: 0; transform: scale(1.04); clip-path: inset(0 0 12% 0 round 20px);
  transition: opacity 0.9s var(--pm-ease), transform 1.2s var(--pm-ease), clip-path 1.1s var(--pm-ease);
}
.csx-reveal-ready [data-reveal="image"].is-visible { opacity: 1; transform: none; clip-path: inset(0 round 20px); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .index-page .hero-visual { transform: none; }
}
@media (max-width: 575px) {
  .index-page .section { padding: 56px 0; }
  .index-page .service-card { padding: 24px 20px; }
  .index-page .service-icon, .index-page .icon-wrapper { width: 68px; height: 68px; }
  .index-page .service-icon i, .index-page .icon-wrapper i { font-size: 30px; }
  .index-page .btn { min-height: 46px; }
}

/* ---------- Accessibility: no motion when the visitor asks for none ---------- */
@media (prefers-reduced-motion: reduce) {
  .pm-progress { display: none; }
  .index-page *, .index-page *::before, .index-page *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  .index-page .hero-visual { transform: none !important; }
  .csx-reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}