.service-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 44px 60px; align-items: center; padding: 100px 0 28px; border-top: 1px solid #39303f; }
.service-feature::after { display: none; }
.feature-copy { position: relative; z-index: 2; }
.feature-copy h2 { font-size: 58px; line-height: 1.07; font-weight: 730; margin: 26px 0; }
.feature-copy h2 em { font-family: Georgia,serif; font-weight: 400; color: #c9a4ff; }
.feature-description { color: #c4becf; font-size: 18px; line-height: 1.75; max-width: 550px; }
.feature-highlights { list-style: none; margin: 28px 0; padding: 0; }
.feature-highlights li { position: relative; padding: 10px 0 10px 23px; border-bottom: 1px solid #302836; color: #d6cedf; font-size: 14px; line-height: 1.5; }
.feature-highlights li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 3px; height: 12px; background: #aa7bec; transform: skewX(-30deg); }
.feature-offer { margin: 28px 0; }
.feature-offer p { margin: 0 0 8px; color: #d0c7da; font-size: 15px; }
.feature-offer strong { font-size: 34px; color: white; font-weight: 680; }
.feature-offer > span { font-size: 13px; line-height: 1.6; color: #bdb1cb; display: block; }
.feature-cta { justify-content: space-between; gap: 24px; max-width: 100%; text-align: left; }
.feature-cta > span { font-size: 23px; transition: translate .2s; }
.feature-cta:hover > span { translate: 3px -3px; }
.feature-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #39303f; margin-top: 20px; padding-top: 24px; font-size: 12px; line-height: 1.7; }
.feature-bottom > span { font: 10px monospace; color: #a99bb7; }
.feature-bottom a { color: #d8bafa; text-decoration: underline; text-underline-offset: 5px; }
.feature-art { position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; --fx: 0px; --fy: 0px; }
.web-sheet { position: absolute; border-radius: 8px; width: 68%; height: 77%; left: 16%; top: 10%; border: 1px solid #ffffff40; box-shadow: 0 20px 45px #0008; transition: translate .65s ease,rotate .65s ease; }
.sheet-back { background: #7234ca; rotate: 13deg; translate: 22px -9px; }
.sheet-middle { background: #bca0dd; rotate: -10deg; translate: -18px 9px; }
.sheet-front { background: linear-gradient(130deg,#fff,#e1d9ec); color: #24152f; rotate: -2deg; display: flex; flex-direction: column; padding: 28px; overflow: hidden; translate: var(--fx) var(--fy); }
.sheet-slash { color: #7639c6; font: 60px Georgia,serif; line-height: .8; }
.sheet-word { display: flex; flex-direction: column; font-size: 92px; line-height: .66; font-weight: 850; margin: auto 0; align-self: center; }
.sheet-word > span { color: #8141d7; }
.sheet-front img { width: 104px; max-width: 65%; height: auto; margin-top: auto; }
.sheet-lines { position: absolute; right: 12%; top: 10%; bottom: 10%; width: 1px; background: #39234f22; }
.type-sample { position: absolute; z-index: 2; right: 0; bottom: 3%; width: 42%; padding: 24px; border-radius: 8px; background: #251b32; border: 1px solid #6a507e; color: #ece1fb; font: 62px Georgia,serif; rotate: 5deg; box-shadow: 0 15px 32px #0007; translate: calc(var(--fx) * -.5) calc(var(--fy) * -.5); transition: translate .65s ease; }
.type-sample > span { display: block; font: 10px monospace; margin-top: 12px; color: #bca6d4; }
.feature-apps { margin-top: 80px; }
.feature-apps .feature-art { grid-column: 1; grid-row: 1; }
.feature-apps .feature-copy { grid-column: 2; grid-row: 1; }
.module-track { position: absolute; inset: 18%; border: 1px solid #6d498f; rotate: -30deg; border-radius: 8px; }
.track-two { inset: 8%; border-color: #35293e; rotate: 15deg; }
.business-module { position: absolute; display: grid; place-items: center; width: 29%; height: 29%; background: linear-gradient(135deg,#ae7aef,#6e2fc2); border: 1px solid #c7a4f4; border-radius: 8px; rotate: -12deg; box-shadow: 8px 10px 0 #28113f,0 20px 35px #0007; transition: translate .65s ease; }
.business-module > span { font: 76px Georgia,serif; color: #efddff; }
.module-a { left: 8%; top: 9%; translate: calc(var(--fx) * -.5) calc(var(--fy) * -.5); }
.module-b { right: 5%; top: 23%; background: linear-gradient(130deg,#ede6f4,#c4b6d7); translate: calc(var(--fx) * .8) calc(var(--fy) * .8); }
.module-b > span { color: #7433c6; }
.module-c { left: 19%; bottom: 5%; translate: calc(var(--fx) * -.8) calc(var(--fy) * -.8); }
.module-main { left: 27%; top: 33%; width: 53%; height: 47%; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 18px; background: linear-gradient(130deg,#30243c,#0f0c14); border-color: #9674b6; translate: var(--fx) var(--fy); }
.module-main > span { font: 750 64px/1 system-ui,sans-serif; }
.module-main img { width: 100px; height: auto; max-width: 70%; }
.module-rule { width: 66%; height: 1px; background: #8661a4; }
@media (max-width: 1080px) {
  .service-feature { gap: 40px 32px; }
  .feature-copy h2 { font-size: 46px; }
  .sheet-word { font-size: 74px; }
  .sheet-front { padding: 22px; }
  .type-sample { font-size: 48px; padding: 20px; }
  .module-main > span { font-size: 48px; }
}
@media (max-width: 760px) {
  .service-feature { grid-template-columns: minmax(0,1fr); padding-top: 64px; gap: 32px; }
  .feature-apps { margin-top: 40px; }
  .feature-apps .feature-copy, .feature-apps .feature-art { grid-column: auto; grid-row: auto; }
  .feature-art { width: min(420px,100%); margin-inline: auto; }
  .feature-copy h2 { font-size: 42px; }
  .feature-description { font-size: 17px; }
  .feature-bottom { flex-direction: column; align-items: flex-start; margin-top: 0; }
}
@media (max-width: 400px) {
  .feature-copy h2 { font-size: 36px; }
  .sheet-word { font-size: 64px; }
  .sheet-slash { font-size: 44px; }
  .type-sample { font-size: 40px; padding: 16px; }
  .sheet-front { padding: 18px; }
  .module-main > span { font-size: 42px; }
  .feature-cta { font-size: 14px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .web-sheet, .type-sample, .business-module, .feature-cta > span { transition: none; translate: none; }
}