/* =============================================
   Easy-Edit LP - Dedicated Styles
   ============================================= */

/* --- Hero Centered Layout (unused currently but kept for reference) --- */
.hero--centered {
  min-height: auto;
  padding-bottom: 48px;
}

.hero__inner--stacked {
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 64px;
  padding-bottom: 0;
}

.hero__inner--stacked .hero__content--center {
  text-align: center;
  max-width: 720px;
}

.hero__inner--stacked .hero__title {
  font-size: 2.8rem;
}

.hero__content--center .hero__badge {
  justify-content: center;
}

.hero__content--center .hero__subtitle {
  margin-bottom: 0;
}

.hero__visual--wide {
  width: 100%;
  max-width: 640px;
  flex: none;
}

.hero__visual--wide .hero__screen-wrap {
  width: 100%;
}

.hero__cta-group--bottom {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.ai-intro__card-icon--design {
  background: linear-gradient(135deg, #E8EAF6, #C5CAE9);
  color: #3F51B5;
}

.ai-intro__card-icon--assistant {
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  color: #F57C00;
}

/* =============================================
   Background Floating Icons
   ============================================= */

/* --- Shared icon layer base --- */
.page-easy-edit .features::before,
.page-easy-edit .features::after,
.page-easy-edit .comparison::before,
.page-easy-edit .comparison::after,
.page-easy-edit .new-features::before,
.page-easy-edit .new-features::after,
.page-easy-edit .demo::before,
.page-easy-edit .demo::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
}

.page-easy-edit .features,
.page-easy-edit .comparison,
.page-easy-edit .new-features,
.page-easy-edit .demo {
  position: relative;
  overflow: hidden;
}

/* --- FEATURES section icons --- */
.page-easy-edit .features::before {
  /* envelope icon */
  width: 120px;
  height: 120px;
  top: 60px;
  right: 5%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23F5A623'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(15deg);
}

.page-easy-edit .features::after {
  /* star icon */
  width: 80px;
  height: 80px;
  bottom: 100px;
  left: 3%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%23F5A623'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.2 329 542.4 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381 150.3 316.9 18z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(-10deg);
}

/* --- COMPARISON section icons --- */
.page-easy-edit .comparison::before {
  /* chart-bar icon */
  width: 100px;
  height: 100px;
  top: 40px;
  left: 4%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23F5A623'%3E%3Cpath d='M32 32c17.7 0 32 14.3 32 32V400c0 8.8 7.2 16 16 16H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H80c-44.2 0-80-35.8-80-80V64C0 46.3 14.3 32 32 32zm96 96c0-17.7 14.3-32 32-32l192 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-192 0c-17.7 0-32-14.3-32-32zm32 64H288c17.7 0 32 14.3 32 32s-14.3 32-32 32H160c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 96H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H160c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(-8deg);
}

.page-easy-edit .comparison::after {
  /* circle-check icon */
  width: 70px;
  height: 70px;
  bottom: 50px;
  right: 6%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23F5A623'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(12deg);
}

/* --- AND MORE section icons --- */
.page-easy-edit .new-features::before {
  /* puzzle-piece icon */
  width: 110px;
  height: 110px;
  top: 50px;
  right: 4%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23F5A623'%3E%3Cpath d='M192 104.8c0-9.2-5.8-17.3-13.2-22.8C167.2 73.3 160 61.3 160 48c0-26.5 28.7-48 64-48s64 21.5 64 48c0 13.3-7.2 25.3-18.8 34c-7.4 5.5-13.2 13.6-13.2 22.8V160H384c35.3 0 64 28.7 64 64v64h55.2c9.2 0 17.3-5.8 22.8-13.2C534.7 263.2 546.7 256 560 256c26.5 0 48 28.7 48 64s-21.5 64-48 64c-13.3 0-25.3-7.2-34-18.8c-5.5-7.4-13.6-13.2-22.8-13.2H448v64c0 35.3-28.7 64-64 64H256V407.2c0-9.2 5.8-17.3 13.2-22.8c11.6-8.7 18.8-20.7 18.8-34c0-26.5-28.7-48-64-48s-64 21.5-64 48c0 13.3 7.2 25.3 18.8 34c7.4 5.5 13.2 13.6 13.2 22.8V480H64c-35.3 0-64-28.7-64-64V288H104.8c9.2 0 17.3 5.8 22.8 13.2C136.3 312.8 148.3 320 161.6 320c26.5 0 48-28.7 48-64s-21.5-64-48-64c-13.3 0-25.3 7.2-34 18.8C122.1 218.2 114 224 104.8 224H0V160c0-35.3 28.7-64 64-64H192V104.8z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(20deg);
}

.page-easy-edit .new-features::after {
  /* gear icon */
  width: 90px;
  height: 90px;
  bottom: 80px;
  left: 5%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23F5A623'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(-15deg);
}

/* --- MOVIE section icons --- */
.page-easy-edit .demo::before {
  /* play icon */
  width: 90px;
  height: 90px;
  top: 50px;
  left: 6%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23F5A623'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9V168c0-8.7 4.7-16.7 12.3-20.9z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(-5deg);
}

.page-easy-edit .demo::after {
  /* wand-magic-sparkles icon */
  width: 80px;
  height: 80px;
  bottom: 60px;
  right: 5%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%23F5A623'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(10deg);
}

/* Ensure content stays above decoration */
.page-easy-edit .features > .container,
.page-easy-edit .comparison > .container,
.page-easy-edit .new-features > .container,
.page-easy-edit .demo > .container {
  position: relative;
  z-index: 1;
}

/* Hide icons on small screens to avoid clutter */
@media (max-width: 767px) {
  .page-easy-edit .features::before,
  .page-easy-edit .features::after,
  .page-easy-edit .comparison::before,
  .page-easy-edit .comparison::after,
  .page-easy-edit .new-features::before,
  .page-easy-edit .new-features::after,
  .page-easy-edit .demo::before,
  .page-easy-edit .demo::after {
    display: none;
  }
}

/* --- Responsive overrides --- */
@media (max-width: 1024px) {
  .hero__visual--wide {
    max-width: 700px;
  }

  .hero__inner--stacked {
    padding-top: 60px;
  }
}

/* Arrow visible for easy-edit comparison too (旧→新 evolution) */

/* =============================================
   Design System Decorative Tune
   ============================================= */
.ai-intro__card-icon--design {
  background: linear-gradient(135deg, rgba(74, 178, 255, 0.18), rgba(92, 183, 204, 0.2));
  color: #0071BC;
}

.ai-intro__card-icon--assistant {
  background: linear-gradient(135deg, rgba(232, 77, 66, 0.14), rgba(250, 186, 36, 0.22));
  color: #E84D42;
}

.page-easy-edit .features::before,
.page-easy-edit .features::after,
.page-easy-edit .comparison::before,
.page-easy-edit .comparison::after,
.page-easy-edit .new-features::before,
.page-easy-edit .new-features::after,
.page-easy-edit .demo::before,
.page-easy-edit .demo::after {
  opacity: 0.05;
}