.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-hero { position: relative; overflow: hidden; padding: 70px 0 30px; text-align: center; background: radial-gradient(50% 60% at 25% 40%, #c4b5fd29, #fff0 60%), radial-gradient(40% 50% at 75% 50%, #fbcfe82e, #fff0 60%), #fff; }
.wordmark { margin: 0; font-size: clamp(54px, 9.6vw, 136px); line-height: .9; font-weight: 900; letter-spacing: -.055em; color: #0f172a; }
.wordmark span { display: block; }
.home-hero h1 { margin: 26px 0 0; font-size: clamp(17px, 2.2vw, 28px); letter-spacing: .4em; text-indent: .4em; font-weight: 500; color: #64748b; line-height: 1.5; }
.pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 30px; margin: 18px 0 0; padding: 0; list-style: none; }
.pills li { position: relative; padding: 5px 16px; border-radius: 999px; background: #ffffffb3; border: 1px solid #e2e8f0; font-size: 14px; font-weight: 600; letter-spacing: .03em; color: #334155; box-shadow: 0 1px 3px #0000000a; }
.pills li + li::before { content: '×'; position: absolute; left: -20px; top: 5px; color: #cbd5e1; font-weight: 400; }
.home-lead { margin: 22px auto 0; font-size: clamp(17px, 1.9vw, 22px); font-weight: 700; line-height: 1.6; color: #0f172a; }
.home-sub { margin: 6px auto 0; max-width: 520px; color: #64748b; font-size: 14px; }
.fan { display: flex; justify-content: center; align-items: flex-start; margin-top: 46px; padding: 6px 0 64px; }
.fan a { position: relative; flex: 0 0 auto; display: grid; gap: 8px; width: 286px; margin-inline: -15px; padding: 8px 8px 11px; background: #fff; border: 1px solid #f1f5f9; border-radius: 22px; box-shadow: 0 22px 46px #0f172a1a; color: #0f172a; font-size: 14px; font-weight: 700; transform: translateY(var(--y)) rotate(var(--r)); transition: transform .25s ease; }
.fan a:hover { transform: translateY(calc(var(--y) - 10px)) rotate(var(--r)); }
.fan img { width: 100%; height: auto; border-radius: 14px; }
.fan a:nth-child(1) { --r: -9deg; --y: 58px; z-index: 1; }
.fan a:nth-child(2) { --r: -4.5deg; --y: 16px; z-index: 2; }
.fan a:nth-child(3) { --r: 0deg; --y: 0px; z-index: 3; }
.fan a:nth-child(4) { --r: 4.5deg; --y: 16px; z-index: 2; }
.fan a:nth-child(5) { --r: 9deg; --y: 58px; z-index: 1; }
.hero-close h2 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.35; letter-spacing: -.03em; color: #0f172a; }
.hero-close h2 span { display: block; color: #94a3b8; }
.hero-close .cta-row { justify-content: center; align-items: center; gap: 14px 22px; margin-top: 28px; }
.btn.pill-dark { min-height: 56px; padding: 14px 30px; border-radius: 999px; background: #0f172a; font-size: 15px; box-shadow: 0 14px 30px #0f172a33; }
.btn.pill-dark:hover { background: #1e293b; }
.pain { display: grid; grid-template-columns: 1fr minmax(260px, 390px) 1fr; gap: 30px; align-items: center; }
.pain-col { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pain-col li { --c: #64748b; display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; padding: 15px 16px; background: #fff; border: 1px solid #f1f5f9; border-radius: 16px; box-shadow: 0 4px 14px #0f172a0d; }
.pain-col .ic { grid-row: span 2; width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); }
.pain-col .t1 { --c: #d08a8a; } .pain-col .t2 { --c: #d8a848; } .pain-col .t3 { --c: #6090a8; }
.pain-col .t4 { --c: #487860; } .pain-col .t5 { --c: #90a878; } .pain-col .t6 { --c: #c07c7c; }
.pain-col strong { font-size: 15px; color: #1e293b; }
.pain-col span { color: #64748b; font-size: 13px; line-height: 1.7; }
.pain-art img { width: 100%; height: auto; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.duo article { --c: #0ea5e9; --t: #0284c7; display: grid; align-content: start; gap: 10px; padding: 34px; border: 1px solid #f1f5f9; border-radius: 40px; background: linear-gradient(135deg, #bae6fd33, #a7f3d029), #fff; box-shadow: 0 1px 3px #0000000d; }
.duo article.warm { --c: #f472b6; --t: #db2777; background: linear-gradient(135deg, #f9a8d41f, #fde68a1a), #fff; }
.duo .ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: #fff; color: var(--c); box-shadow: 0 4px 14px #0f172a12; }
.duo .tag { font-size: 13px; font-weight: 900; letter-spacing: .1em; color: var(--t); }
.duo h3 { font-size: 21px; line-height: 1.45; color: #0f172a; }
.duo p { color: #64748b; font-size: 14px; }
.duo ul { display: grid; gap: 9px; margin: 6px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid #0f172a12; font-size: 14px; font-weight: 600; color: #334155; }
.duo li::before { content: '✓'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 10px; border: 1.5px solid var(--c); border-radius: 50%; color: var(--c); font-size: 11px; }
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.why article { display: grid; grid-template-columns: 38px 1fr; gap: 3px 14px; align-content: start; padding: 20px; background: linear-gradient(to bottom right, #fff1f2, #fff7edb3, #fffbeb); border: 1px solid #ffe4e6; border-radius: 16px; box-shadow: 0 4px 14px #fb71850f; }
.why article::before { content: '✓'; grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, #fb7185, #fb923c, #fbbf24); color: #fff; font-weight: 800; box-shadow: 0 4px 10px #fb718540; }
.why h3 { font-size: 16px; color: #0f172a; }
.why p { color: #64748b; font-size: 13px; line-height: 1.75; }
.rows { display: grid; gap: 64px; }
.row-f { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.row-f:nth-child(even) .row-art { order: 2; }
.row-art { position: relative; display: grid; place-items: center; padding: 20px 0; }
.row-art::before { content: ''; position: absolute; width: min(380px, 92%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #c4b5fd38, #fbcfe81f 45%, #fff0 70%); }
.row-art img { position: relative; width: 250px; height: auto; border: 7px solid #0f172a; border-radius: 34px; background: #0f172a; box-shadow: 0 24px 50px #0f172a2e; }
.eyebrow-f { color: #8b5cf6; font-size: 14px; font-weight: 700; letter-spacing: .03em; }
.row-copy h3 { margin: 10px 0 10px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.4; font-weight: 900; color: #0f172a; }
.row-copy p { max-width: 460px; color: #64748b; font-size: 15px; line-height: 1.9; }
.steps-ill { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.steps-ill li { --c: #a78bfa; --t: #7c3aed; overflow: hidden; background: #fff; border: 1px solid #f1f5f9; border-top: 4px solid var(--c); border-radius: 20px; box-shadow: 0 4px 16px #0f172a0f; }
.steps-ill li:nth-child(2) { --c: #334155; --t: #334155; }
.steps-ill li:nth-child(3) { --c: #2dd4bf; --t: #0f766e; }
.steps-ill img { display: block; width: 100%; height: auto; background: linear-gradient(180deg, #f8fafc, #f1f5f9); border-bottom: 1px solid #f1f5f9; }
.steps-ill div { padding: 18px 20px 22px; }
.steps-ill b { color: var(--t); font-size: 12px; letter-spacing: .12em; }
.steps-ill h3 { margin: 4px 0 6px; font-size: 18px; color: #0f172a; }
.steps-ill p { color: #64748b; font-size: 14px; }
.faq { max-width: 760px; }
.faq summary { font-weight: 700; color: #0f172a; }
.faq details { border-bottom-color: #e2e8f0; }
.faq details p { padding: 0 30px 16px 0; color: #64748b; font-size: 14px; }
.home-end { margin-top: 0; padding: 84px 0 76px; background: radial-gradient(50% 70% at 30% 30%, #c4b5fd1f, #fff0 70%), radial-gradient(45% 60% at 75% 70%, #fde68a24, #fff0 70%), #fdfbf7; color: #0f172a; }
.home-end .free-mark { margin: 0; font-size: clamp(60px, 10vw, 132px); line-height: 1.05; font-weight: 900; letter-spacing: .04em; background: linear-gradient(90deg, #fb7185, #fbbf24); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-end .free-lead { margin: 18px 0 0; font-size: clamp(18px, 2vw, 24px); font-weight: 700; color: #0f172a; }
.free-points { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; padding: 0; list-style: none; }
.free-points li { padding: 7px 16px; border: 1px solid #f1f5f9; border-radius: 999px; background: #fff; color: #334155; font-size: 14px; font-weight: 600; box-shadow: 0 1px 3px #0000000a; }
.free-points li::before { content: '✓'; margin-right: 6px; color: #fb7185; font-weight: 800; }
.home-end .cta-row { justify-content: center; }
.btn.ghost-light { background: #fff; border-color: #e2e8f0; color: #0f172a; }
.btn.ghost-light:hover { background: #f8fafc; }
main:has(.home-end) + .site-footer { margin-top: 0; }
.home-hero p, .sect-head h2, .sect-head p, .duo h3, .duo p, .row-copy h3, .row-copy p, .pain-col span, .why p { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .fan a { transition: none; } }
@media (max-width: 900px) {
  .pain { grid-template-columns: 1fr 1fr; }
  .pain-art { grid-column: 1 / -1; order: -1; width: min(360px, 80%); margin-inline: auto; }
  .why { grid-template-columns: 1fr 1fr; }
  .row-f { gap: 30px; }
}
@media (max-width: 700px) {
  .home-hero { padding: 42px 0 18px; }
  .home-hero h1 { letter-spacing: .22em; text-indent: .22em; }
  .pills { gap: 8px 24px; }
  .pills li { font-size: 13px; padding: 5px 13px; }
  .pills li + li::before { left: -17px; }
  .fan { margin-top: 30px; padding-bottom: 46px; }
  .fan a { width: 196px; margin-inline: -24px; padding: 6px 6px 8px; border-radius: 16px; font-size: 12px; gap: 6px; }
  .fan img { border-radius: 10px; }
  .fan a:nth-child(1), .fan a:nth-child(5) { --y: 40px; }
  .fan a:nth-child(2), .fan a:nth-child(4) { --y: 12px; }
  .hero-close .cta-row .btn { flex: 1 1 100%; }
  .pain, .duo, .why, .steps-ill { grid-template-columns: 1fr; }
  .pain-art { width: min(300px, 86%); }
  .duo article { padding: 26px 22px; border-radius: 30px; }
  .rows { gap: 46px; }
  .row-f { grid-template-columns: 1fr; gap: 14px; }
  .row-f:nth-child(even) .row-art { order: 0; }
  .row-art img { width: 210px; }
  .home-end { padding: 60px 0 56px; }
  .free-points li { font-size: 13px; padding: 6px 13px; }
}