/* =============================================================
   products.css — AT-EASE Products Page
   
   TABLE OF CONTENTS
   1.  Page-level tokens
   2.  Products Hero
   3.  Products List (wrapper)
   4.  Product Section — DEFAULT layout (text left | image right)
   5.  Product Section — REVERSE variant (image left | text right)
   6.  Product Tag badge
   7.  Product text content
   8.  Product Features list
   9.  Learn More button
   10. Custom Dev Section
   11. Custom Dev Steps + connector line
   12. Responsive
============================================================= */


/* ─────────────────────────────────────────────────────────────
   1. Page-level tokens
───────────────────────────────────────────────────────────── */
:root {
  --products-gap:        120px;
  --products-padding-x:   80px;
  --products-padding-y:   96px;
}


/* ─────────────────────────────────────────────────────────────
   2. Products Hero
───────────────────────────────────────────────────────────── */
.products-hero {
  position: relative;
  width: 100%;
  height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 80px; /* offset fixed navbar */
  background: #0d0505;
}

.products-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.products-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.40) 0%,
    rgba(0,0,0,0.65) 100%
  );
  z-index: 1;
}

.products-hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  width: 100%;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.products-hero__title {
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  color: #F1F5F9;
  margin: 0;
}

.text-red {
  color: #EC1313;
}

.products-hero__subtitle {
  max-width: 620px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: #94A3B8;
  margin: 0;
}

.products-hero__cta-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding-top: 12px;
  flex-wrap: wrap;
}

.btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.50);
}


/* ─────────────────────────────────────────────────────────────
   3. Products List wrapper
───────────────────────────────────────────────────────────── */
.products-list {
  width: 100%;
  background: #0A0A0A;
  padding: var(--products-padding-y) var(--products-padding-x);
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* ─────────────────────────────────────────────────────────────
   4. Product Section — DEFAULT layout
      Text LEFT  |  Image RIGHT
      
      HTML structure inside every <article> is always:
        1. <div class="product-section__content">   (text)
        2. <div class="product-section__media">     (image)
      
      Default → natural HTML order → text left, image right.
───────────────────────────────────────────────────────────── */
.product-section {
  display: flex;
  flex-direction: row;          /* text LEFT | image RIGHT */
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  padding: var(--products-gap) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}

.product-section:last-child {
  border-bottom: none;
}

/* ── Text column ── */
.product-section__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 520px;
}

/* ── Image column ── */
.product-section__media {
  flex-shrink: 0;
  width: 480px;
}

.product-section__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(236, 19, 19, 0.12),
    0 24px 48px rgba(0, 0, 0, 0.50),
    0 0 80px rgba(236, 19, 19, 0.06);
}


/* ─────────────────────────────────────────────────────────────
   5. Product Section — REVERSE variant
      Image LEFT  |  Text RIGHT
      
      We use flex `order` instead of row-reverse so the HTML
      source order stays the same for all articles — only the
      visual position changes via CSS.
───────────────────────────────────────────────────────────── */
.product-section--reverse {
  flex-direction: row; /* keep row, just swap visual order below */
}

/* Pull image to the left visually */
.product-section--reverse .product-section__media {
  order: -1; /* appears FIRST (left) */
}

/* Text stays on the right (default order: 0 > -1) */
.product-section--reverse .product-section__content {
  order: 0;
}


/* ─────────────────────────────────────────────────────────────
   6. Product Tag badge  (e.g. "LOGISTICS", "ORDERS")
───────────────────────────────────────────────────────────── */
.product-section__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(236, 19, 19, 0.10);
  border: 1px solid rgba(236, 19, 19, 0.20);
  border-radius: 9999px;
  color: #EC1313;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  width: fit-content;
}

.product-section__tag-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #EC1313;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   7. Product text content
───────────────────────────────────────────────────────────── */
.product-section__title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  color: #F1F5F9;
  margin: 0;
}

.product-section__desc {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: #94A3B8;
  margin: 0;
}


/* ─────────────────────────────────────────────────────────────
   8. Product Features list
───────────────────────────────────────────────────────────── */
.product-section__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.product-section__features li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #CBD5E1;
}

/* Red dot bullet */
.product-section__features li::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  background: #EC1313;
  border-radius: 50%;
  margin-top: 8px;
  box-shadow: 0 0 8px rgba(236, 19, 19, 0.60);
}


/* ─────────────────────────────────────────────────────────────
   9. Learn More button
───────────────────────────────────────────────────────────── */
.btn--learn-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: transparent;
  border: 1.5px solid #EC1313;
  border-radius: 12px;
  color: #EC1313;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn--learn-more:hover {
  background: #EC1313;
  color: #fff;
  box-shadow: 0 0 24px rgba(236, 19, 19, 0.40);
}

.btn__arrow {
  font-style: normal;
  font-size: 18px;
  transition: transform 0.2s ease;
}

.btn--learn-more:hover .btn__arrow {
  transform: translateX(4px);
}


/* ─────────────────────────────────────────────────────────────
   10. Custom Dev Section
───────────────────────────────────────────────────────────── */
.custom-dev {
  width: 100%;
  background: linear-gradient(180deg, #110505 0%, #1A0C0C 60%, #0A0A0A 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 96px 80px;
}

.custom-dev__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: center;
}

.custom-dev__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.custom-dev__title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  color: #F1F5F9;
  margin: 0;
}

.custom-dev__title::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  background: #EC1313;
  border-radius: 9999px;
  margin: 16px auto 0;
}

.custom-dev__subtitle {
  font-size: 17px;
  line-height: 1.65;
  color: #94A3B8;
  max-width: 560px;
  margin: 0;
  text-align: center;
}

.custom-dev__cta {
  display: flex;
  justify-content: center;
}


/* ─────────────────────────────────────────────────────────────
   11. Custom Dev Steps + connector line
───────────────────────────────────────────────────────────── */
.custom-dev__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  width: 100%;
  counter-reset: steps;
}

.custom-dev__steps::before {
  content: '';
  position: absolute;
  top: 39px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(236,19,19,0)    0%,
    rgba(236,19,19,0.40) 20%,
    rgba(236,19,19,0.40) 80%,
    rgba(236,19,19,0)    100%
  );
  z-index: 0;
}

.custom-dev__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  counter-increment: steps;
}

.custom-dev__step-icon {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #1A0808;
  border: 2px solid #EC1313;
  box-shadow:
    0 0 0 4px rgba(236,19,19,0.08),
    0 0 20px rgba(236,19,19,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.custom-dev__step-icon::after {
  content: counter(steps);
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  background: #EC1313;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.icon-placeholder {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: #EC1313;
  border-radius: 6px;
  opacity: 0.9;
}

.custom-dev__step-title {
  margin: 20px 0 0;
  font-size: 22px;
  font-weight: 700;
  color: #F1F5F9;
}

.custom-dev__step-desc {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #64748B;
  max-width: 220px;
}


/* ─────────────────────────────────────────────────────────────
   12. Responsive
───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root {
    --products-padding-x: 40px;
    --products-gap: 80px;
  }

  .product-section__media {
    width: 400px;
  }

  .products-hero__title {
    font-size: 56px;
  }

  .custom-dev {
    padding: 72px 40px;
  }
}

@media (max-width: 860px) {
  :root {
    --products-padding-x: 24px;
    --products-gap: 64px;
  }

  /* Stack ALL sections vertically */
  .product-section,
  .product-section--reverse {
    flex-direction: column;
    gap: 40px;
  }

  /* Image always on top when stacked — reset any order overrides */
  .product-section__media,
  .product-section--reverse .product-section__media {
    order: -1;
    width: 100%;
  }

  .product-section__content,
  .product-section--reverse .product-section__content {
    order: 0;
    max-width: 100%;
  }

  .products-hero {
    height: auto;
    min-height: 480px;
    padding: 100px 24px 60px;
  }

  .products-hero__title {
    font-size: 40px;
  }

  .custom-dev {
    padding: 64px 24px;
  }

  .custom-dev__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }

  .custom-dev__steps::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .products-hero__title    { font-size: 32px; }
  .products-hero__subtitle { font-size: 16px; }
  .product-section__title  { font-size: 28px; }
  .custom-dev__steps       { grid-template-columns: 1fr; }
  .custom-dev__title       { font-size: 30px; }

  :root { --products-padding-x: 16px; }
}