/* ==========================================================================
   Hero — Full Viewport Hero Section + Particle Canvas for Dcodz Theme
   ========================================================================== */

/* -----------------------------------------------------------------------
   Hero Section
   ----------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  padding-block-start: var(--header-height);
  padding-inline: var(--container-padding);
  background: var(--gradient-hero);
  overflow: hidden;
  color: var(--color-white);
}

/* -----------------------------------------------------------------------
   Particle Canvas (Background)
   ----------------------------------------------------------------------- */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
}

.hero__particles canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* -----------------------------------------------------------------------
   Animated Floating Blobs
   ----------------------------------------------------------------------- */
.hero__blob {
  position: absolute;
  z-index: var(--z-base);
  opacity: 0.12;
  filter: blur(40px);
  pointer-events: none;
}

.hero__blob--1 {
  inline-size: clamp(300px, 40vw, 600px);
  block-size: clamp(300px, 40vw, 600px);
  background: var(--color-purple-light);
  inset-block-start: -10%;
  inset-inline-end: -5%;
  clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 95% 65%, 75% 90%, 40% 100%, 10% 80%, 0% 50%, 15% 20%);
  animation: morphBlob 20s ease-in-out infinite alternate;
}

.hero__blob--2 {
  inline-size: clamp(250px, 35vw, 500px);
  block-size: clamp(250px, 35vw, 500px);
  background: var(--color-blue-light);
  inset-block-end: -5%;
  inset-inline-start: -5%;
  clip-path: polygon(30% 0%, 70% 5%, 100% 30%, 90% 70%, 65% 100%, 20% 90%, 0% 60%, 10% 25%);
  animation: morphBlob 20s ease-in-out infinite alternate-reverse;
}

.hero__blob--3 {
  inline-size: clamp(200px, 25vw, 400px);
  block-size: clamp(200px, 25vw, 400px);
  background: var(--color-yellow);
  inset-block-start: 40%;
  inset-inline-end: 20%;
  opacity: 0.06;
  clip-path: polygon(45% 0%, 85% 15%, 100% 50%, 80% 85%, 45% 100%, 10% 80%, 0% 45%, 20% 10%);
  animation: morphBlob 25s ease-in-out infinite alternate;
}

/* Float animation for blobs */
.hero__blob--1 { animation: morphBlob 20s ease-in-out infinite alternate, float 8s ease-in-out infinite; }
.hero__blob--2 { animation: morphBlob 20s ease-in-out infinite alternate-reverse, float 10s ease-in-out infinite reverse; }
.hero__blob--3 { animation: morphBlob 25s ease-in-out infinite alternate, float 12s ease-in-out infinite; }

/* -----------------------------------------------------------------------
   Hero Content
   ----------------------------------------------------------------------- */
.hero__content {
  position: relative;
  z-index: var(--z-raised);
  max-inline-size: 800px;
  inline-size: 100%;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--space-16);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-white);
  margin-block-end: var(--space-6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero__badge-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-yellow);
  animation: pulse 2s ease-in-out infinite;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  color: var(--color-white);
  line-height: var(--leading-tight);
  margin-block-end: var(--space-6);
}

.hero__title-highlight {
  color: var(--color-yellow);
  position: relative;
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--leading-relaxed);
  max-inline-size: 600px;
  margin-inline: auto;
  margin-block-end: var(--space-8);
}

/* -----------------------------------------------------------------------
   Typed.js Cursor
   ----------------------------------------------------------------------- */
.typed-cursor {
  display: inline-block;
  font-size: inherit;
  color: var(--color-yellow);
  animation: typewriterCursor 0.8s ease-in-out infinite;
}

.typed-cursor--blink {
  animation: typewriterCursor 0.8s ease-in-out infinite;
}

/* -----------------------------------------------------------------------
   Dual CTA Buttons
   ----------------------------------------------------------------------- */
.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  inline-size: 100%;
  margin-block-end: var(--space-10);
}

.hero__cta .btn {
  min-inline-size: 220px;
}

.hero__cta .btn-primary {
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-8);
}

.hero__cta .btn-outline-white {
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-6);
}

/* -----------------------------------------------------------------------
   Trust Stamps / Social Proof
   ----------------------------------------------------------------------- */
.hero__trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.hero__trust-label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-medium);
}

.hero__trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.hero__trust-logo {
  block-size: 28px;
  inline-size: auto;
  opacity: 0.5;
  filter: brightness(0) invert(1);
  transition: opacity var(--transition-fast);
}

.hero__trust-logo:hover {
  opacity: 0.8;
}

.hero__trust-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-block-start: var(--space-4);
  margin-inline: auto;
}

.hero__trust-stat {
  text-align: center;
}

.hero__trust-stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-yellow);
}

.hero__trust-stat-label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* -----------------------------------------------------------------------
   Trust Stamps (200+ Projects, 98% Satisfaction, 8+ Years)
   ----------------------------------------------------------------------- */
.hero__trust-stamps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  inline-size: 100%;
  margin-inline: auto;
}

.hero__trust-item {
  text-align: center;
}

.hero__trust-number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-yellow);
}

/* -----------------------------------------------------------------------
   Scroll Indicator
   ----------------------------------------------------------------------- */
.hero__scroll {
  position: absolute;
  inset-block-end: var(--space-8);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  animation: bounce 2s ease-in-out infinite;
}

.hero__scroll-line {
  inline-size: 1px;
  block-size: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
}