/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .container { padding: 0 28px; }
  .lp-header__nav { display: none; }
  .hamburger { display: flex; }
  /* Hero */
  .section-hero__title { font-size: clamp(26px, 5vw, 42px); }
  .section-hero__visual { max-width: 700px; margin-bottom: -100px; }
  .section-hero__image { max-width: 700px; }
  /* Service */
  .section-service__body { grid-template-columns: 1fr; }
  .service-steps { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .service-step:not(:last-child)::after { display: none; }
  /* Why Now */
  .section-why__cards { grid-template-columns: repeat(2, 1fr); }
  .why-card__illust { width: 140px; height: 110px; }
  /* Use Case / Strength */
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
  .strength-grid { grid-template-columns: repeat(2, 1fr); }
  /* Plan */
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  /* Flow */
  .flow-timeline { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .flow-step__illust { width: 120px; height: 96px; }
  /* About */
  .about-card { grid-template-columns: 200px 1fr; gap: 32px; padding: 36px; }
  .about-card__img { width: 160px; height: 160px; }
}
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .lp-header__inner { padding: 0 20px; }
  .lp-header__cta { display: none; }
  /* Hero */
  .section-hero { padding-top: var(--header-h); padding-bottom: 36px; }
  .section-hero__visual { max-width: 520px; margin-bottom: -80px; }
  .section-hero__image { max-width: 520px; }
  .section-hero__title { font-size: clamp(24px, 6.5vw, 36px); }
  .section-hero__lead { max-width: 100%; }
  .section-hero__buttons { flex-direction: column; align-items: center; }
  .section-hero__buttons .btn { width: 100%; max-width: 320px; }
  .section-hero__badges { flex-direction: column; gap: 6px; align-items: center; }
  .hero-deco-orange { width: 40px; height: 40px; }
  .hero-deco-dots, .hero-deco-purple-corner, .hero-deco-orange-ring, .hero-deco-blue-ring, .hero-deco-small-blue { display: none; }
  /* Section title sizing */
  .section-title { font-size: clamp(22px, 5vw, 32px); }
  /* Why Now */
  .section-why__cards { grid-template-columns: 1fr 1fr; }
  .why-card__illust { width: 120px; height: 95px; }
  /* Use Case / Strength */
  .usecase-grid { grid-template-columns: 1fr 1fr; }
  .strength-grid { grid-template-columns: 1fr 1fr; }
  /* Service */
  .service-step__illust { width: 100px; height: 85px; }
  /* Plan */
  .plan-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .plan-card--featured { order: -1; transform: none; }
  .plan-card--featured:hover { transform: translateY(-4px); }
  .plan-includes__inner { flex-direction: column; align-items: flex-start; }
  .plan-includes__title { border-right: none; padding-right: 0; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); width: 100%; }
  /* About */
  .about-card { grid-template-columns: 1fr; padding: 32px; text-align: center; }
  .about-card__img { width: 140px; height: 140px; }
  .about-card__text { text-align: left; }
  /* Flow */
  .flow-timeline { grid-template-columns: 1fr 1fr; }
  .flow-step__illust { width: 110px; height: 88px; }
  /* FAQ */
  .faq-item__answer-inner { padding: 0 20px 18px 48px; }
  /* CTA */
  .section-cta__buttons { flex-direction: column; align-items: center; }
  .section-cta__buttons .btn { width: 100%; max-width: 300px; }
  .section-cta__sub { flex-direction: column; gap: 12px; }
  /* Footer */
  .lp-footer__inner { flex-direction: column; text-align: center; }
  .lp-footer__links { justify-content: center; }
  /* Hide decorations on small screens */
  .deco { display: none; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .lp-header__inner { padding: 0 16px; }
  /* Hero */
  .section-hero__title { font-size: clamp(22px, 7vw, 30px); }
  .section-hero__visual { max-width: 340px; margin-bottom: -60px; }
  .section-hero__image { max-width: 340px; }
  .hero-deco-orange { display: none; }
  /* Section title sizing */
  .section-title { font-size: clamp(20px, 5.5vw, 28px); }
  .section-label { font-size: 18px; }
  /* Why Now */
  .section-why__cards { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  /* Use Case / Strength */
  .usecase-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .strength-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  /* Service */
  .service-steps { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; }
  .service-step__illust { width: 110px; height: 90px; }
  /* Flow */
  .flow-timeline { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; }
  /* About */
  .about-card { padding: 24px; }
  .about-card__img { width: 120px; height: 120px; }
  .about-card__name { font-size: 20px; }
  /* Plan */
  .plan-card__price-amount { font-size: 28px; }
  .plan-includes { padding: 20px; }
  /* FAQ */
  .faq-item__answer-inner { padding: 0 16px 16px 40px; }
  /* Buttons */
  .btn { font-size: 14px; padding: 14px 24px; }
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}