.product-section {
  background: var(--background);
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--border);
}

.feature-row-reverse {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.feature-row-reverse .feature-copy {
  order: 2;
}

.feature-tag {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--lavender-mist);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
}

.feature-copy h3 {
  margin: 0 0 16px;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.feature-copy > p {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.feature-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.feature-stat strong {
  color: var(--primary);
  font-size: clamp(36px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.feature-stat-text strong {
  font-size: clamp(28px, 2.6vw, 36px);
}

.feature-stat > span {
  max-width: 180px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.feature-copy .check-list {
  margin-bottom: 28px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.text-link::after {
  content: "→";
  transition: transform 0.16s ease;
}

.text-link:hover::after {
  transform: translateX(4px);
}

.feature-visual {
  position: relative;
  padding: 40px 0 40px 40px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(147, 181, 253, 0.28));
  overflow: hidden;
}

.feature-row-reverse .feature-visual {
  padding: 40px 40px 40px 0;
}

.feature-frame {
  width: 118%;
  padding: 6px;
  border-radius: 14px;
  box-shadow: var(--shadow-blue), var(--shadow-lg);
  transition: transform 0.5s ease;
}

.feature-row-reverse .feature-frame {
  margin-left: -18%;
}

.feature-frame img {
  border-radius: 8px;
}

.feature-visual:hover .feature-frame {
  transform: translateY(-4px);
}

.mini.feature-float {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  width: 260px;
  margin: 0;
  background: var(--surface-card);
  box-shadow: var(--shadow-card), var(--shadow-blue);
  animation: float-y 6s ease-in-out infinite;
  will-change: translate;
}

.feature-row-reverse .feature-float {
  right: auto;
  left: 24px;
}










.mini {
  margin: auto 0 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-ivory);
  font-size: 12px;
  list-style: none;
}

.dot-live {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  animation: pulse-ring 1.8s ease-out infinite;
}

.mini-schedule-head,
.mini-schedule-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.mini-schedule-head {
  margin-bottom: 8px;
  color: var(--helper);
  font-weight: 500;
  text-align: center;
}

.mini-schedule-grid i {
  height: 22px;
  border-radius: 6px;
  background: var(--primary);
}

.mini-schedule-grid i.is-off {
  background: var(--border);
  opacity: 1;
}

.is-visible .mini-schedule-grid i:not(.is-off) {
  animation: slot-fill 0.4s ease backwards;
  animation-delay: calc(var(--slot, 0) * 60ms + 200ms);
}

.mini-schedule-foot {
  display: flex;
  align-items: center;
  margin-top: 12px;
  color: var(--muted);
  font-weight: 500;
}

.mini-rotation {
  height: 132px;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}

.mini-rotation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  animation: rotate-list 8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.mini-rotation li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-bottom: 8px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-card);
  color: var(--body);
  font-weight: 500;
}

.mini-rotation li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.mini-funnel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mini-funnel div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 10px;
  color: var(--body);
  font-weight: 500;
}

.mini-funnel div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: var(--w);
  border-radius: 8px;
  background: var(--surface-wash-strong);
  transform-origin: left;
}

.is-visible .mini-funnel div::before {
  animation: bar-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.mini-funnel div:last-child::before {
  background: rgba(22, 163, 74, 0.16);
}

.mini-funnel span,
.mini-funnel b {
  position: relative;
  z-index: 1;
}

.mini-funnel b {
  font-variant-numeric: tabular-nums;
}

.mini-chart {
  padding: 12px 0 0;
  overflow: hidden;
}

.mini-chart svg {
  display: block;
  width: 100%;
  height: 84px;
}

.mini-chart-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}

.mini-chart-area {
  fill: var(--surface-wash-strong);
}

.is-visible .mini-chart-line {
  animation: draw-line 1.6s ease backwards;
}

@keyframes slot-fill {
  from {
    opacity: 0.15;
    transform: scale(0.8);
  }
}

@keyframes rotate-list {
  0%,
  18% {
    transform: translateY(0);
  }
  25%,
  43% {
    transform: translateY(-44px);
  }
  50%,
  68% {
    transform: translateY(-88px);
  }
  75%,
  93% {
    transform: translateY(-132px);
  }
  100% {
    transform: translateY(-176px);
  }
}

@keyframes bar-grow {
  from {
    transform: scaleX(0);
  }
}

@keyframes draw-line {
  from {
    stroke-dashoffset: 400;
  }
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(22, 163, 74, 0);
  }
}