/* =========================================================
   SECTION 2: CORE BENEFITS — FINAL, CLEAN
   ========================================================= */

.section-benefits{
  position: relative;
  background:
    radial-gradient(1200px 500px at 70% 50%, rgba(255,255,255,0.08), transparent 60%),
    #050505;
  color: #e9e9e9;
  padding: 90px 0 200px;
  overflow: hidden;
}

/* DESKTOP: hide inline benefit descriptions */
.section-benefits .benefit-desc{
  display: none;
}

/* RIGHT SIDE — SUBTLE ATMOSPHERE BALANCE */
.section-benefits::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:35%;
  height:100%;
  background: radial-gradient(
    600px 600px at 80% 30%,
    rgba(120,170,255,0.06),
    transparent 70%
  );
  pointer-events:none;
}


/* GRID */
.section-benefits .benefits-inner{
  display: grid;
  grid-template-columns: 320px minmax(440px, 1fr) 300px;  grid-template-rows:
  auto    /* image + right headline */
  auto    /* right body */
  auto    /* CTA */
  auto;   /* meta */
  column-gap: 48px;
  row-gap: 12px;
  position: relative;
}

/* -----------------------------------------
   DESKTOP — COLUMN-SPECIFIC ALIGNMENT
   ----------------------------------------- */
@media (min-width:1101px){
  /* Left column */
  .section-benefits .benefits-left{
    align-self: start;
  }

  /* Center image */
  .section-benefits .benefits-media{
    align-self: center;
  }

  /* Right column (THIS controls vertical position) */
  .section-benefits .benefits-right{
    align-self: start;
    padding-top: 112px; /* ⬅ adjust THIS number only */
  }
}


/* LEFT */
.section-benefits .benefits-left{
  grid-column: 1;
  grid-row: 1 / -1;
}

.section-benefits .benefits-title{
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f0f0f0;
  max-width: 300px;
  margin-bottom: 46px;
}
/* LEFT — BENEFITS LIST (ICON + TITLE + DESCRIPTION) */

.section-benefits .benefits-list{
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.section-benefits .benefit-item{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  opacity: 0.75;
}

.section-benefits .benefit-item.is-active{
  opacity: 1;
}

.section-benefits .benefit-icon{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
}

/* SVG ICONS — CLEAN, WHITE, CONSISTENT */
.section-benefits .benefit-icon svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: rgba(255,255,255,0.85);
}


.section-benefits .benefit-text{
  display: flex;
  align-items: center;
}

.section-benefits .benefit-text strong{
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
}

/* CENTER IMAGE */
.section-benefits .benefits-media{
  grid-column: 2;
  grid-row: 1 / 2;
  justify-self: center;
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 16 / 10;
  background: none;              /* remove blurred box */
  box-shadow: none;              /* remove container shadow */
  border-radius: 0;              /* no card edges */
  overflow: visible;             /* let image breathe */
  z-index: 1;
}

.section-benefits .benefits-media::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(
      400px 300px at 50% 55%,
      rgba(255,255,255,0.18),
      transparent 65%
    );
  filter: blur(40px);
  z-index:-1;
}


.section-benefits .benefits-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transform:scale(1.03);
  filter:brightness(1.08) contrast(1.05);
}

/* RIGHT */
.section-benefits .benefits-article-title{
  grid-column: 3;
  grid-row: 1;
  align-self: center;          /* 🔹 vertical alignment */
  margin-top: 28px;            /* 🔹 optical alignment with image */
  font-size: 18px;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  margin-bottom: 8px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* -----------------------------------------
   DESKTOP ONLY — HEADLINE OPTICAL ALIGNMENT
   ----------------------------------------- */


/* RIGHT — TEXT WIDTH CONTROL (EDITORIAL) */
.section-benefits .benefits-article-title,
.section-benefits .benefits-detail{
  max-width: 300px;
}


/* RIGHT COLUMN — STRUCTURAL ANCHOR */
.section-benefits .benefits-right{
  padding-left: 24px;
  position: relative;
}

/* RIGHT COLUMN — VERTICAL DIVIDER (CONTROLLED) */
.section-benefits .benefits-right::before{
  content:"";
  position:absolute;
  left:0;
  top:64px;              /* ← THIS moves the line DOWN */
  bottom:0;
  width:1px;
  background: rgba(255,255,255,0.06);
}

/* DESKTOP — LOWER THE VERTICAL DIVIDER */
@media (min-width:1101px){
  .section-benefits .benefits-right{
    padding-top: 48px; /* controls where the line starts */
  }
}

/* RIGHT COLUMN — RESET CHILD OFFSETS */
.section-benefits .benefits-right > *{
  margin-left: 0;
}


/* RIGHT — DETAIL POSITION (UNDER HEADLINE) */
.section-benefits .benefits-detail{
  grid-column: 3;
  grid-row: 2;
  margin-top: 18px;
  padding-left: 12px;
  border-left: none; /* ⬅ REMOVES SECOND SMALL LINE */
}

/* RIGHT — DESCRIPTION OPTICAL OFFSET */
.section-benefits .benefits-detail{
  margin-top: 18px;   /* replaces the 4px feel */
}


/* ---------------------------------------------------------
   RIGHT — BENEFIT DETAIL PANEL (APPLE / TESLA STYLE)
   --------------------------------------------------------- */

.section-benefits .benefits-detail{
  position: relative;
  min-height: 140px;
}

.section-benefits .benefit-detail{
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  max-width: 300px;
}

.section-benefits .benefit-detail.is-active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}


/* CTA + META (BASE STYLE) */
.section-benefits .benefits-link{
  display: inline-flex;
  margin-top: 20px;          /* ⬅ closer to text */
  align-self: flex-start;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* CTA + META — RIGHT COLUMN, CLEAN */
.section-benefits .benefits-link{
  display: inline-flex;
  margin-top: 28px;
}

.section-benefits .benefits-meta{
  display: flex;
  gap: 18px;
  margin-top: 12px;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}


.section-benefits .benefits-meta{
  display:flex;
  gap:18px;
  margin-top: 10px;          /* ⬅ pulls it closer to button */
  font-size:10px;
  color:rgba(255,255,255,0.35);
}

/* ---------------------------------------------------------
   DESKTOP RE-LAYOUT — CENTER CTA + META UNDER IMAGE
   --------------------------------------------------------- */
/* CTA + META — CENTERED STACK (FINAL) */


/* -----------------------------------------
   DESKTOP ONLY — OPTICAL IMAGE ALIGNMENT
   ----------------------------------------- */
@media (min-width:1101px){
  .section-benefits .benefits-media{
    transform: translateY(100px);
  }
}

/* -----------------------------------------
   DESKTOP ONLY — DESCRIPTION OPTICAL ALIGNMENT
   ----------------------------------------- */
/* =========================================================
   CORE BENEFITS → HOW IT WORKS TRANSITION
   Matches hero geometry + next section color
   ========================================================= */

.section-benefits{
  position: relative;
}

/* Base transition */
.section-benefits .benefits-transition{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 140px;
  background: #f4f4f2; /* how-it-works background */
  clip-path: polygon(
    0 40%,
    65% 40%,
    78% 0,
    100% 0,
    100% 100%,
    0 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Tablet */
@media (max-width:1100px){
  .section-benefits .benefits-transition{
    height: 120px;
    clip-path: polygon(
      0 45%,
      60% 45%,
      75% 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
}

/* Mobile */
@media (max-width:560px){
  .section-benefits .benefits-transition{
    height: 100px;
    clip-path: polygon(
      0 50%,
      55% 50%,
      70% 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }

  /* Tablet + Mobile: center titles AND descriptions */
.section-benefits .benefit-item{
  text-align: center;
}

.section-benefits .benefit-desc{
  text-align: center;
}

}

/* TABLET + DOWN */
@media (max-width:1100px){

    /* Reduce section height on tablet + mobile */
  .section-benefits{
    padding-bottom: 130px;
  }

  /* 1. Disable desktop hover panel completely */
  .section-benefits .benefits-detail{
    display: none;
  }

  /* 2. Show inline descriptions under titles */
  .section-benefits .benefit-desc{
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.55);
    max-width: 320px;
  }

  /* 3. Stack icon → title → description */
  .section-benefits .benefit-item{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }

  /* 4. Slightly tighten title */
  .section-benefits .benefit-text strong{
    font-size: 15px;
  }

  /* 5. Hide vertical divider */
  .section-benefits .benefits-right::before{
    display: none;
  }


  .section-benefits .benefits-inner{
    grid-template-columns:1fr;
    gap:22px;
  }

  @supports (display: contents){
  .section-benefits .benefits-right{
    display: contents;
  }

    .section-benefits *{
      grid-column:auto !important;
      grid-row:auto !important;
    }
  }
  /* -----------------------------------------
     TABLET + MOBILE — CENTERED, CLEAN LAYOUT
     ----------------------------------------- */

  .section-benefits .benefits-left{
    text-align: center;
    margin: 0 auto;
  }

  .section-benefits .benefits-title{
    max-width: none;
    margin: 0 auto 32px;
  }

  .section-benefits .benefits-list{
    align-items: center;
  }

  .section-benefits .benefit-item{
    justify-content: center;
    text-align: left; /* keep copy readable */
    max-width: 420px;
  }

  .section-benefits .benefits-article-title,
  .section-benefits .benefits-article-body{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .section-benefits .benefits-link{
    margin-left: auto;
    margin-right: auto;
  }

  .section-benefits .benefits-meta{
    justify-content: center;
    text-align: center;
  }

    /* -----------------------------------------
     MOBILE / TABLET FALLBACK — STACK DETAIL TEXT
     ----------------------------------------- */

}

/* MOBILE */
@media (max-width:560px){
  .section-benefits{
  padding-top: 62px;
  padding-bottom: 110px;
}


  .section-benefits .benefits-media{
    aspect-ratio:4 / 3;
  }
  .section-benefits .benefits-title{
  font-size: 32px;
  line-height: 1.12;
}

.section-benefits .benefit-item{
  max-width: 360px;
}

.section-benefits .benefits-meta{
  flex-direction: column;
  gap: 6px;
}
}