/* =========================================================
   WHY-US (MIRAI) — Single Section CSS (V5.1)  [ONE FILE]
   Fixes:
   - Card transparency now actually responds to --why-card-bg
     (hover no longer forces opaque white)
   - Rail is 40% thinner + softer (blur/opacity)
   - Removed the small left bar on each card (you asked to remove)
   - Badges keep always-on glow; hover adds red pulsing glow
   - Lines/rail use the “light” color from the hero highlight
   Scope: only #why-us.why-variant-split
   ========================================================= */

#why-us.why-variant-split{
  position: relative;
  overflow: hidden;
  padding-top: clamp(48px, 5vw, 84px);
  padding-bottom: clamp(56px, 6vw, 96px);

  /* Text */
  --why-ink: #0b1220;
  --why-text: rgba(10, 18, 32, 0.80);

  /* Hover pulse (red) */
  --why-red: #e85b5b;

  /* Light color (from the center highlight of your background) */
  --why-light: #ffc56c;
  --why-light-soft: rgba(255,197,108,.45);

  /* Right panel + scrim (override inline if you want) */
  --why-panel-w: min(46vw, 720px);
  --why-panel-pad: clamp(20px, 2.6vw, 40px);
  --why-panel-pr: clamp(18px, 3vw, 56px);
  --why-panel-shift: 24px;
  --why-scrim-strong: 0.76; /* slightly less white => transparency becomes visible */
  --why-scrim-mid: 0.18;

  /* Stepper geometry */
  --why-gap: 22px;
  --why-item-offset: 28px;  /* cards start after rail */
  --why-rail-x: 18px;       /* rail x position inside flow */
  --why-rail-w: 1.8px;      /* 3px -> 1.8px  (≈40% thinner) */

  /* Badge */
  --why-badge: 44px;
  --why-badge-top: 16px;

  /* Cards — THIS is the knob you tweak */
  --why-card-bg: rgba(255,255,255,.05);        /* more transparent */
  --why-card-bg-hover: rgba(255,255,255,.22);  /* still transparent on hover */
  --why-card-br: rgba(255,255,255,.22);
  --why-card-br-hover: rgba(255,255,255,.32);

  --why-card-shadow: 0 18px 46px rgba(0,0,0,.22);
  --why-card-shadow-hover: 0 34px 84px rgba(0,0,0,.18);

  /* Motion */
  --why-hover-lift: -8px;
  --why-hover-scale: 1.02;
}

/* Split container */
#why-us.why-variant-split .why-split{
  position: relative;
  min-height: clamp(520px, 52vw, 780px);
}

/* Right overlay */
#why-us.why-variant-split .why-right{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  pointer-events: none;
  padding-right: var(--why-panel-shift);
}

/* Scrim under right panel only */
#why-us.why-variant-split .why-right::before{
  content:"";
  position: absolute;
  right: var(--why-panel-shift);
  top: 0;
  height: 100%;
  width: var(--why-panel-w);
  background: linear-gradient(
    270deg,
    rgba(255,255,255,var(--why-scrim-strong)) 0%,
    rgba(255,255,255,var(--why-scrim-mid)) 55%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
}

/* List wrapper */
#why-us.why-variant-split .why-list{
  position: relative;
  width: var(--why-panel-w);
  padding: var(--why-panel-pad);
  padding-right: var(--why-panel-pr);
  pointer-events: auto;
}

/* Flow */
#why-us.why-variant-split .why-flow{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--why-gap);
}

/* Rail: thinner + softer */
#why-us.why-variant-split .why-flow::before{
  content:"";
  position: absolute;
  left: var(--why-rail-x);
  top: calc(var(--why-badge-top) + (var(--why-badge) / 2));
  bottom: calc(var(--why-badge-top) + (var(--why-badge) / 2));
  width: var(--why-rail-w);
  border-radius: 999px;

  background: linear-gradient(
    180deg,
    rgba(255,197,108,.58),
    rgba(255,197,108,.26),
    rgba(255,197,108,.08)
  );
  opacity: .78;
  filter: blur(.25px);
  box-shadow: 0 16px 34px rgba(255,197,108,.10);
  pointer-events: none;
}

/* Card */
#why-us.why-variant-split .why-item{
  position: relative;
  margin-left: var(--why-item-offset);
  padding: 18px 20px;
  border-radius: 16px;

  background: var(--why-card-bg);
  border: 1px solid var(--why-card-br);
  box-shadow: var(--why-card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transform: translateZ(0);
}

/* REMOVE left bar on cards (you asked) */
#why-us.why-variant-split .why-item::before{
  content: none !important;
}

/* Badge */
#why-us.why-variant-split .why-pin{
  position: absolute;
  left: calc(var(--why-rail-x) - var(--why-item-offset));
  top: var(--why-badge-top);
  width: var(--why-badge);
  height: var(--why-badge);
  transform: translateX(-50%);
  z-index: 2;

  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  background: rgba(255,255,255,.86);
  border: 2px solid rgba(255,197,108,.55);
  box-shadow:
    0 18px 40px rgba(255,197,108,.12),
    0 0 0 1px rgba(255,255,255,.32) inset;

  overflow: visible;
}

/* Always-on aura */
#why-us.why-variant-split .why-pin::before{
  content:"";
  position: absolute;
  inset: -16px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,197,108,.26) 0%, rgba(255,197,108,0) 62%);
  opacity: .28;
  filter: blur(.2px);
  animation: whyAura 3.8s ease-in-out infinite;
  pointer-events: none;
}

/* Link from badge to card (light + soft) */
#why-us.why-variant-split .why-pin::after{
  content:"";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 14px;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(255,197,108,.62);
  filter: blur(.15px);
  box-shadow: 0 12px 26px rgba(255,197,108,.10);
  pointer-events: none;
}

/* Icon */
#why-us.why-variant-split .why-pin i{
  position: relative;
  font-size: 13px;
  color: rgba(11,18,32,.84);
  opacity: .92;
  pointer-events: none;
}

/* Step text */
#why-us.why-variant-split .why-step{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}
#why-us.why-variant-split .why-step b{
  font-size: 13px;
  font-weight: 800;
  color: rgba(11,18,32,.92);
}
#why-us.why-variant-split .why-step em{
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  opacity: .72;
  color: rgba(11,18,32,.92);
}

/* Headline */
#why-us.why-variant-split .why-item h5{
  margin: 0 0 8px 0;
  font-weight: 650;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .92rem;
  color: var(--why-ink);
}
#why-us.why-variant-split .why-item h5::after{
  content:"";
  display: block;
  width: clamp(56px, 6vw, 96px);
  height: 1px;
  border-radius: 99px;
  margin-top: 10px;
  background: linear-gradient(
    90deg,
    rgba(255,197,108,.85) 0%,
    rgba(255,197,108,.30) 35%,
    rgba(255,197,108,0) 100%
  );
  opacity: .95;
}

/* Body */
#why-us.why-variant-split .why-item p{
  margin: 0;
  max-width: 62ch;
  color: var(--why-text);
  line-height: 1.7;
  font-size: .98rem;
}

/* Hover: lift + badge red pulse */
@media (hover:hover){
  #why-us.why-variant-split .why-item{
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
  }
  #why-us.why-variant-split .why-item:hover{
    transform: translateY(var(--why-hover-lift)) scale(var(--why-hover-scale));
    border-color: var(--why-card-br-hover);
    box-shadow: var(--why-card-shadow-hover);
    background: var(--why-card-bg-hover);
  }

  #why-us.why-variant-split .why-item:hover .why-pin{
    border-color: rgba(232,91,91,.78);
    box-shadow:
      0 22px 52px rgba(232,91,91,.18),
      0 0 0 1px rgba(255,255,255,.32) inset;
  }
  #why-us.why-variant-split .why-item:hover .why-pin::before{
    background: radial-gradient(circle, rgba(232,91,91,.46) 0%, rgba(232,91,91,0) 62%);
    opacity: .62;
    animation: whyPulse 1.25s ease-out infinite;
  }
  #why-us.why-variant-split .why-item:hover .why-pin i{
    color: var(--why-red);
  }
}

/* Animations */
@keyframes whyAura{
  0%,100%{ transform: scale(.92); opacity: .22; }
  50%    { transform: scale(1.18); opacity: .34; }
}
@keyframes whyPulse{
  0%   { transform: scale(.86); opacity: .40; }
  70%  { transform: scale(1.48); opacity: .00; }
  100% { transform: scale(1.48); opacity: .00; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #why-us.why-variant-split .why-pin::before{ animation: none !important; }
  #why-us.why-variant-split .why-item{ transition: none !important; }
}

/* Mobile */
@media (max-width: 991.98px){
  #why-us.why-variant-split{
    --why-panel-w: 100%;
    --why-panel-shift: 0px;
    --why-item-offset: 0px;
    --why-rail-x: 18px;
  }

  #why-us.why-variant-split .why-right{
    position: relative;
    inset: auto;
    justify-content: center;
    align-items: stretch;
    padding-right: 0;
  }
  #why-us.why-variant-split .why-right::before{ display:none; }

  #why-us.why-variant-split .why-list{
    width: 100%;
    padding: 18px 16px 0 16px;
  }

  #why-us.why-variant-split .why-item{
    padding-left: calc(var(--why-badge) + 24px);
  }

  #why-us.why-variant-split .why-pin{
    left: var(--why-rail-x);
  }
}