/* ==========================================================================
   OPELOGY — Home Page Styles
   Loaded via the `extra_css` block in templates/pages/home.html.
   Builds on the design tokens and primitives in style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero Section
   The background is an interactive 3D mesh particle canvas rendered by the
   inline hero script in templates/pages/home.html. The text column lives
   on top of it (z-index 2) with the canvas pinned behind (z-index 1).
   -------------------------------------------------------------------------- */

/* Full-viewport hero: fills exactly one screen (100vh fallback, then the
   dynamic viewport unit 100dvh so it tracks mobile address-bar collapse).
   Flex centers the content inside the space left between the top/bottom
   paddings, so the headline sits in the middle of the visible region. */
.hero {
      background: radial-gradient(circle at 80% 50%, #072235 0%, #051329 45%, #020b18 100%) !important;
      background-color: #020b18;
      position: relative;
      overflow: hidden;
      /* এখানে আপডেট করা হয়েছে */
      min-height: calc(100vh - var(--nav-height, 80px));
      min-height: calc(100dvh - var(--nav-height, 80px));
      display: flex;
      align-items: center;
      box-sizing: border-box;
    }

.hero-canvas-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero-content { max-width: 580px; }

/* Eyebrow chip above the headline — fluid type, wraps on narrow screens */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0.4rem 1rem;
  font-size: clamp(0.68rem, 2.5vw, 0.8rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0, 210, 255, 0.08);
  border: 1px solid rgba(0, 210, 255, 0.3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

/* Fluid headline sizing — scales smoothly from small phones to desktop */
.hero-title {
  font-size: clamp(1.85rem, 5.5vw, 3.6rem);
  line-height: 1.08;
  margin-bottom: var(--space-6);
}

.hero-subtitle {
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 34rem;
  margin-bottom: var(--space-8);
}

/* Dual CTA row */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   2. Key services grid (3 cards)
   -------------------------------------------------------------------------- */
.services-grid { grid-template-columns: 1fr; }

.service-card { display: flex; flex-direction: column; }

.service-card h3 { margin-bottom: var(--space-3); }

.service-card p {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  flex: 1;                    /* pushes the link to the bottom */
  margin-bottom: var(--space-6);
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  transition: gap var(--transition);
}
.service-link:hover { gap: var(--space-3); }

/* --------------------------------------------------------------------------
   3. Why Choose Us grid (4 cards)
   -------------------------------------------------------------------------- */
.why-grid { grid-template-columns: 1fr; }

.why-card h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2);
}

.why-card p {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   4. Featured projects (cards reuse the portfolio.css card system)
   -------------------------------------------------------------------------- */

/* Centered CTA beneath the featured projects row */
.projects-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}
.projects-cta .btn {
  gap: var(--space-2);
}
.projects-cta .btn span { transition: transform var(--transition); }
.projects-cta .btn:hover span { transform: translateX(3px); }

/* The bottom CTA banner styles now live in the global style.css (12c),
   shared with the Services and Portfolio pages. */

/* --------------------------------------------------------------------------
   5. Responsive breakpoints
   -------------------------------------------------------------------------- */

/* Compact phones: stack CTAs full-width, oversized tap targets */
@media (max-width: 36rem) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Tablet >= 768px */
@media (min-width: 48rem) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }

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

/* Desktop >= 1024px */
@media (min-width: 64rem) {
  .why-grid { grid-template-columns: repeat(4, 1fr); }
}