/* PointOne "Why Choose Us" — all rules scoped to .pointone-why */
.pointone-why {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 110px) 20px;
  color: var(--color-text);
  background:
    radial-gradient(45% 50% at 0% 40%, rgba(8, 127, 255, 0.28), transparent 70%),
    radial-gradient(45% 50% at 100% 30%, rgba(134, 101, 255, 0.28), transparent 70%),
    radial-gradient(50% 30% at 50% 100%, rgba(50, 197, 255, 0.10), transparent 70%),
    var(--color-background);
}

.pointone-why__bg { position: absolute; inset: 0; pointer-events: none; }

.pointone-why__arc {
  position: absolute;
  top: 0;
  width: min(42vw, 620px);
  height: 100%;
}
.pointone-why__arc--left { left: 0; }
.pointone-why__arc--right { right: 0; }

.pointone-why__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}

.pointone-why__header { max-width: 760px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }

.pointone-why__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cyan);
  background: rgba(8, 127, 255, 0.14);
  border: 1px solid rgba(50, 197, 255, 0.28);
  border-radius: 999px;
}

.pointone-why__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-cyan);
  box-shadow: 0 0 10px var(--color-cyan);
}

.pointone-why__title {
  margin: 0 0 20px;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.pointone-why__title .pointone-why__gradient { display: block; }

.pointone-why__gradient {
  background: linear-gradient(90deg, var(--color-cyan), var(--color-primary) 50%, var(--color-violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pointone-why__gradient--short { background-image: linear-gradient(90deg, var(--color-cyan), var(--color-violet)); }

.pointone-why__description {
  max-width: 600px;
  margin: 0 auto;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.65;
  color: var(--color-text-muted);
}

.pointone-why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.pointone-why__card {
  --accent: var(--color-cyan);
  --accent-rgb: 50, 197, 255;
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(22px, 3vw, 36px);
  background: linear-gradient(145deg, rgba(16, 36, 62, 0.75), rgba(8, 22, 41, 0.85));
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), inset 0 0 40px rgba(var(--accent-rgb), 0.06);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.pointone-why__card--violet {
  --accent: var(--color-violet);
  --accent-rgb: 134, 101, 255;
}

.pointone-why__card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--accent-rgb), 0.85);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35), 0 0 28px rgba(var(--accent-rgb), 0.25), inset 0 0 40px rgba(var(--accent-rgb), 0.08);
}

.pointone-why__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(56px, 6vw, 72px);
  height: clamp(56px, 6vw, 72px);
  font-size: clamp(28px, 3vw, 36px);
  color: #fff;
  background: linear-gradient(145deg, var(--color-primary), rgba(var(--accent-rgb), 0.85));
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.35);
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}

.pointone-why__card--violet .pointone-why__icon {
  background: linear-gradient(145deg, #6a4bef, var(--color-violet));
}

.pointone-why__card:hover .pointone-why__icon {
  filter: brightness(1.15);
  box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.55);
}

.pointone-why__body { min-width: 0; }

.pointone-why__card-title {
  margin: 0 0 8px;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}

.pointone-why__card-description {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.pointone-why__accent {
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.pointone-why__commitment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 32px);
  margin-top: clamp(20px, 2.5vw, 32px);
  padding: clamp(22px, 3vw, 32px) clamp(20px, 4vw, 48px);
  background: linear-gradient(90deg, rgba(8, 127, 255, 0.1), rgba(16, 36, 62, 0.7) 50%, rgba(134, 101, 255, 0.1));
  border: 1px solid rgba(8, 127, 255, 0.55);
  border-radius: 20px;
  box-shadow: 0 0 36px rgba(8, 127, 255, 0.15);
}

.pointone-why__commitment-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  font-size: 32px;
  color: var(--color-cyan);
  background: linear-gradient(145deg, rgba(8, 127, 255, 0.35), rgba(16, 36, 62, 0.9));
  border: 1px solid rgba(50, 197, 255, 0.3);
  border-radius: 14px;
}

.pointone-why__divider { flex: none; align-self: stretch; width: 1px; background: var(--color-border); }

.pointone-why__commitment-title { margin: 0 0 4px; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); font-weight: 700; color: var(--color-text); }
.pointone-why__commitment-text p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--color-text-muted); }

@media (max-width: 767px) {
  .pointone-why { padding-left: 16px; padding-right: 16px; }
  .pointone-why__grid { grid-template-columns: minmax(0, 1fr); }
  .pointone-why__card { flex-direction: column; }
  .pointone-why__commitment { flex-direction: column; text-align: center; }
  .pointone-why__divider { align-self: center; width: 56px; height: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .pointone-why__card,
  .pointone-why__icon { transition: none; }
  .pointone-why__card:hover { transform: none; }
}
