/* ============================================================
   YAMEE CLUSTER — Homepage & Microanimation Styles
   ============================================================ */

.hero {
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%);
  position: relative;
}

/* Microanimations for cards */
.glass-card {
  position: relative;
  will-change: transform, box-shadow;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), 
              box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), 
              border-color 0.3s ease;
}

/* Perspective tilt & levitation on hover */
.glass-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 22px 60px rgba(0, 93, 255, 0.15);
  border-color: rgba(0, 93, 255, 0.3);
}

/* Liquid/Glow hover effect for primary buttons */
.btn-primary {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 140%; height: 140%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease-out;
  pointer-events: none;
  z-index: -1;
}
.btn-primary:hover::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Interactive Timeline */
.timeline-container {
  display: flex;
  gap: 3rem;
  overflow-x: auto;
  padding: 3rem 1rem;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.timeline-item {
  flex: 0 0 300px;
  position: relative;
  padding: 2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: var(--glass-1);
}
.timeline-item::before {
  content: '';
  position: absolute;
  top: -15px; left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--blue-2);
  transform: translateX(-50%);
}

/* Interconnected ecosystem diagram */
.ecosystem-svg {
  width: 100%;
  height: auto;
  max-width: 700px;
}
.ecosystem-node {
  cursor: pointer;
  transition: all 0.3s ease;
}
.ecosystem-node:hover circle {
  fill: var(--blue-1);
  filter: drop-shadow(0 0 8px rgba(0,93,255,0.5));
}
.ecosystem-link {
  stroke: rgba(0, 93, 255, 0.12);
  stroke-dasharray: 6 6;
  animation: dashMove 30s linear infinite;
}
@keyframes dashMove {
  to {
    stroke-dashoffset: -1000;
  }
}
.ecosystem-node:hover ~ .ecosystem-link {
  stroke: var(--blue-2);
  stroke-width: 1.5;
}

/* ---- RESPONSIVE HOME ---- */

/* Tablet & large phone */
@media (max-width: 1024px) {
  /* Digital architecture section */
  #digital-architecture .container > div[style*="grid-template-columns:1fr 1fr"],
  #digital-architecture .container > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  /* Stats section */
  .section > .container > div[style*="grid-template-columns:1fr 1fr"],
  .section > .container > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
}

/* Mobile */
@media (max-width: 900px) {
  /* Hero: hide right floating cards, go single col */
  #hero .container > div > div:last-child { display: none; }
  #hero .container > div {
    grid-template-columns: 1fr !important;
    padding-top: 120px !important;
    gap: 0 !important;
  }
  #hero .container > div > div:first-child { text-align: center; align-items: center; }
  #hero .container > div > div:first-child .hero-badge { margin-left: auto; margin-right: auto; }
  #hero .container > div > div:first-child div[style*="display:flex"] { justify-content: center; }
}

@media (max-width: 768px) {
  /* Hero h1 */
  #hero h1.display-1 { font-size: clamp(2rem, 9vw, 3rem) !important; }

  /* Architecture / stats / testimonials stacked inline grids */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* CTA section */
  div[style*="padding:5rem"] {
    padding: 3rem 1.5rem !important;
    border-radius: var(--radius-lg) !important;
  }

  /* Timeline container */
  .timeline-container { gap: 1.5rem; padding: 2rem 1rem; }
  .timeline-item { flex: 0 0 260px; }
}

@media (max-width: 640px) {
  #hero .container > div { padding-top: 100px !important; }
  #hero h1.display-1 { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; line-height: 1.1 !important; }
  #hero p.body-lg { font-size: 0.9rem !important; }

  /* Ecosystem SVG */
  .ecosystem-svg { max-width: 280px; }

  /* Timeline */
  .timeline-item { flex: 0 0 220px; }

  /* CTA */
  div[style*="padding:5rem"] { padding: 2.5rem 1rem !important; }
}

@media (max-width: 480px) {
  #hero .container > div { padding-top: 90px !important; }
  div[style*="display:flex;gap:1rem;flex-wrap:wrap"] { flex-direction: column; align-items: stretch; }
  div[style*="display:flex;gap:1rem;flex-wrap:wrap"] .btn { width: 100%; justify-content: center; }
}