/* =========================================
   ARNOREX HOME PAGE
   Premium Marketplace Experience
========================================= */

/* =========================================
   HERO SECTION
========================================= */

.hero-section {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 100vh;

  overflow: hidden;

  background:
    radial-gradient(
      circle at top left,
      rgba(196,0,0,0.16),
      transparent 35%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(0,31,122,0.22),
      transparent 40%
    ),

    linear-gradient(
      180deg,
      #050505 0%,
      #0d0d0d 100%
    );
}

/* =========================================
   HERO OVERLAY GRID
========================================= */

.hero-section::before {
  content: '';

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.02) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 1px,
      transparent 1px
    );

  background-size:
    60px 60px;

  mask-image:
    radial-gradient(circle, black 30%, transparent 90%);

  pointer-events: none;
}

/* =========================================
   HERO CONTENT
========================================= */

.hero-content {
  position: relative;

  z-index: 2;

  max-width: 760px;
}

.hero-title {
  margin-bottom: 28px;

  line-height: 1.02;
}

.hero-description {
  max-width: 620px;

  margin-bottom: 42px;

  color:
    var(--text-secondary);

  font-size: 1.1rem;

  line-height: 1.9;
}

/* =========================================
   HERO CTA GROUP
========================================= */

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;

  gap: 18px;
}

/* =========================================
   PREMIUM FLOATING ORBS
========================================= */

.hero-orb {
  position: absolute;

  border-radius: 50%;

  filter:
    blur(10px);

  opacity: 0.7;

  pointer-events: none;
}

.hero-orb-red {
  top: 12%;
  left: 8%;

  width: 120px;
  height: 120px;

  background:
    rgba(196,0,0,0.28);

  animation:
    floatSlow 10s ease-in-out infinite;
}

.hero-orb-blue {
  right: 12%;
  top: 22%;

  width: 180px;
  height: 180px;

  background:
    rgba(0,31,122,0.22);

  animation:
    float 7s ease-in-out infinite;
}

.hero-orb-gold {
  bottom: 12%;
  left: 40%;

  width: 140px;
  height: 140px;

  background:
    rgba(255,184,0,0.14);

  animation:
    pulseGlow 5s ease-in-out infinite;
}

/* =========================================
   SECTION STYLING
========================================= */

.section {
  position: relative;
}

.section::before {
  content: '';

  position: absolute;

  top: 0;
  left: 50%;

  transform:
    translateX(-50%);

  width: 92%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.06),
      transparent
    );
}

/* =========================================
   SECTION HEADER
========================================= */

.section-header {
  margin-bottom: 50px;
}

.section-title {
  position: relative;

  display: inline-block;
}

/* =========================================
   PRODUCT GRID ENHANCEMENT
========================================= */

.product-grid {
  position: relative;
}

.product-grid::before {
  content: '';

  position: absolute;

  inset: -80px;

  background:
    radial-gradient(
      circle,
      rgba(255,184,0,0.05),
      transparent 70%
    );

  pointer-events: none;

  z-index: -1;
}

/* =========================================
   PREMIUM CATEGORY TAG
========================================= */

.category-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding:
    10px 18px;

  margin-bottom: 24px;

  border-radius:
    var(--radius-pill);

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);

  color:
    var(--color-gold-primary);

  font-size: 0.8rem;
  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  box-shadow:
    0 8px 30px rgba(0,0,0,0.22);
}

/* =========================================
   CATEGORY DOT
========================================= */

.category-label::before {
  content: '';

  width: 10px;
  height: 10px;

  border-radius:
    50%;

  background:
    var(--color-gold-primary);

  box-shadow:
    0 0 15px rgba(255,184,0,0.7);
}

/* =========================================
   FEATURED SECTION
========================================= */

.featured-banner {
  position: relative;

  overflow: hidden;

  border-radius:
    var(--radius-2xl);

  padding:
    70px;

  background:
    linear-gradient(
      135deg,
      rgba(255,184,0,0.12),
      rgba(0,31,122,0.18)
    );

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:
    0 25px 60px rgba(0,0,0,0.3);
}

/* =========================================
   FEATURED GLOW
========================================= */

.featured-banner::before {
  content: '';

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at top right,
      rgba(255,255,255,0.18),
      transparent 40%
    );

  pointer-events: none;
}

/* =========================================
   FEATURED TITLE
========================================= */

.featured-title {
  font-size: clamp(2rem, 4vw, 4rem);

  line-height: 1.05;

  margin-bottom: 22px;
}

/* =========================================
   FEATURED TEXT
========================================= */

.featured-text {
  max-width: 700px;

  color:
    var(--text-secondary);

  line-height: 1.9;

  margin-bottom: 34px;
}

/* =========================================
   PREMIUM DIVIDER
========================================= */

.premium-divider {
  width: 100%;
  height: 1px;

  margin-block: 90px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,184,0,0.4),
      transparent
    );
}

/* =========================================
   TRUST BADGES
========================================= */

.trust-badges {
  display: flex;
  flex-wrap: wrap;

  gap: 20px;

  margin-top: 42px;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 12px;

  padding:
    14px 20px;

  border-radius:
    var(--radius-pill);

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.08);

  color:
    var(--text-secondary);

  font-weight: 600;

  backdrop-filter:
    blur(14px);
}

/* =========================================
   HOVER EFFECT
========================================= */

.trust-badge:hover {
  border:
    1px solid rgba(255,184,0,0.24);

  transform:
    translateY(-4px);

  transition:
    all var(--transition-normal);
}

/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 992px) {

  .featured-banner {
    padding:
      50px;
  }

}

@media (max-width: 768px) {

  .hero-section {
    padding-top: 120px;
    padding-bottom: 100px;
  }

  .hero-description {
    font-size:
      1rem;

    line-height:
      1.8;
  }

  .featured-banner {
    padding:
      36px;
  }

  .premium-divider {
    margin-block:
      70px;
  }

}

@media (max-width: 540px) {

  .hero-title {
    line-height:
      1.08;
  }

  .hero-cta-group {
    flex-direction:
      column;
  }

  .trust-badges {
    flex-direction:
      column;
  }

  .featured-banner {
    padding:
      28px;
  }

}