/* Landing-page art direction. Documentation retains its own reading layout. */
.home-page .hero { display: block; margin: 0; padding: 150px 0 80px; position: relative; text-align: center; isolation: isolate; }
.home-page .hero::before { content: ''; position: absolute; inset: 40px -20px 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse closest-side at 45% 42%, #8951ff22, transparent 100%), radial-gradient(ellipse closest-side at 65% 65%, #269fed18, transparent 100%); }
.home-page .hero-title { max-width: 850px; margin: 0 auto; }
.home-page .hero .release-label { margin: 0 auto 28px; }
.home-page .hero .hero-summary { margin: 24px auto 0; max-width: 610px; }
.home-page .hero .hero-buttons { justify-content: center; }
.home-page .hero-title { min-width: 0; }
.home-page .hero-title h1 { font-size: clamp(2.8rem, 5.5vw, 4.5rem); line-height: 1.2; letter-spacing: -.045em; font-weight: 600; text-wrap: balance; }
.home-page .hero-title h1 .neutral-light { font-weight: 500; }
.home-page .hero-title h1 .violet { color: var(--accent); background: linear-gradient(110deg, #bd96ff 5%, #899eff 55%, #5bd8f5); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; animation: none; }
[data-theme="light"] .home-page .hero-title h1 .violet { background-image: linear-gradient(110deg, #7d36dc, #4267dc 60%, #067dba); }
.release-label { display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: .72rem; letter-spacing: .025em; margin-bottom: 25px; }
.release-label [data-release-version] { color: var(--text-main); font-variant-numeric: tabular-nums; }
.release-dot { width: 6px; height: 6px; background: #36dcb0; border-radius: 50%; box-shadow: 0 0 12px #36dcb075; }
.hero-summary { position: relative; margin-top: 24px; max-width: 580px; }
.hero-summary p { color: var(--text-muted); line-height: 1.9; font-size: .95rem; margin: 0; }
.home-page .hero-summary p span { color: inherit; font-weight: 500; }
.hero-buttons { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.home-page .btn-primary { margin: 0; padding: 13px 27px; border-radius: 10px; font-size: .9rem; background: linear-gradient(120deg, #8350ea, #5266e8); border: 1px solid #b9adff50; box-shadow: inset 0 1px 0 #ffffff30, 0 7px 24px #7144e640; }
.home-page .btn-primary:hover { background: linear-gradient(120deg, #925cf5, #5b77f3); transform: translateY(-2px); box-shadow: inset 0 1px 0 #ffffff40, 0 10px 30px #7144e655; }
.btn-guide { font-size: .85rem; color: var(--text-muted); padding: 12px 0; border-bottom: 1px solid var(--card-border); }
.btn-guide::after { content: ' ↗'; margin-left: 10px; color: var(--accent); }
.btn-guide:hover { color: var(--text-main); }
.section-intro { display: flex; align-items: baseline; gap: 22px; margin-bottom: 32px; }
.section-index { font-size: .7rem; font-variant-numeric: tabular-nums; color: var(--accent); letter-spacing: .1em; flex-shrink: 0; }
.section-intro h2 { margin: 0; font-size: 1.8rem; font-weight: 550; letter-spacing: -.035em; }
.section-intro p { margin: 12px 0 0; color: var(--text-muted); font-size: .9rem; line-height: 1.8; }
.feature-section { border-top: 1px solid var(--card-border); padding-top: 44px; }
.home-page .features { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin: 0; }
.home-page .feature-card { grid-column: span 3; min-width: 0; max-width: none; padding: 27px; border-radius: 18px; background: linear-gradient(145deg, #8b5cf60c, transparent 60%), var(--card-bg); position: relative; box-shadow: inset 0 1px 0 #ffffff12, 0 8px 28px #030a1d12; }
.home-page .feature-card.feature-lead { grid-column: span 6; padding: 30px; }
.home-page .feature-card:hover { background: linear-gradient(145deg, #8b5cf61c, transparent 65%), var(--card-bg); border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-3px); box-shadow: inset 0 1px 0 #ffffff20, 0 14px 38px #5334ca1a; }
.home-page .feature-icon { width: 36px; height: 36px; border-radius: 10px; color: var(--accent); background: var(--accent-soft); margin-bottom: 23px; }
.home-page .feature-icon svg { width: 20px; height: 20px; }
.home-page .feature-card h3 { font-size: 1rem; font-weight: 600; margin: 0 0 12px; letter-spacing: -.015em; }
.home-page .feature-card h3, .section-intro h2 { overflow-wrap: anywhere; }
.home-page .feature-lead h3 { font-size: 1.2rem; }
.home-page .feature-card p { font-size: .84rem; color: var(--text-muted); line-height: 1.85; margin: 0; }
.feature-art { height: 150px; margin: -18px 0 26px; pointer-events: none; }
.gesture-art { display: flex; align-items: center; }
.gesture-art svg { width: 100%; height: 100%; overflow: visible; }
.gesture-guide { stroke: var(--card-border); stroke-width: 22; stroke-linecap: round; }
.gesture-line { stroke: var(--accent); filter: drop-shadow(0 0 6px #9766ff80); stroke-width: 4; stroke-linecap: round; }
.gesture-art circle { fill: var(--accent); }
.gesture-pointer { fill: var(--text-main); stroke: var(--card-bg); stroke-width: 2; stroke-linejoin: round; }
.capture-art { position: relative; max-width: 340px; margin-left: auto; margin-right: auto; }
.capture-landscape { position: absolute; inset: 5px 28px 22px; overflow: hidden; border-radius: 10px; background: linear-gradient(135deg, #62d8ff, #7869f7 70%, #a45afa); box-shadow: 0 12px 30px #655bf52b; }
.capture-landscape::before, .capture-landscape::after { content: ''; position: absolute; width: 120%; height: 150%; left: -35%; top: 32%; background: #b0c7ff; border-radius: 50%; transform: rotate(-25deg); }
.capture-landscape::after { background: #7074ec; top: 68%; left: 7%; }
.capture-landscape span { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #e6faff; box-shadow: 0 0 22px #e6faff80; right: 40px; top: 24px; }
.capture-frame { position: absolute; inset: 18px 55px 36px; border: 1px solid #fff9; }
.capture-frame i { position: absolute; width: 5px; height: 5px; background: #fff; border: 1px solid #806c9b; }
.capture-frame i:nth-child(1) { left: -3px; top: -3px; }.capture-frame i:nth-child(2) { right: -3px; top: -3px; }.capture-frame i:nth-child(3) { left: -3px; bottom: -3px; }.capture-frame i:nth-child(4) { right: -3px; bottom: -3px; }
.capture-tools { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; padding: 8px 16px; border: 1px solid var(--card-border); border-radius: 7px; font-size: .7rem; color: var(--text-main); background: var(--card-bg); box-shadow: 0 4px 12px #0002; }
.home-page .how-it-works { margin: 88px 0 0; padding: 38px; border: 1px solid var(--card-border); border-radius: 20px; background: radial-gradient(ellipse at 100% 0, #318cfa1c, transparent 65%), linear-gradient(115deg, #8b5cf622, var(--card-bg)); box-shadow: inset 0 1px 0 #ffffff12, 0 24px 65px #030d2214; text-align: left; }
.home-page .download-title { color: var(--text-main); opacity: 1; }
.home-page .download-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 0; }
.home-page .platform-card { width: auto; padding: 25px; border-radius: 12px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 18px; row-gap: 7px; background: var(--card-bg); }
.home-page .platform-icon-box { grid-row: 1 / 3; width: 44px; height: 44px; border: none; background: var(--accent-soft); border-radius: 10px; }
.home-page .platform-icon-box svg { width: 22px; height: 22px; color: var(--accent); }
.platform-name { font-size: 1rem; font-weight: 600; grid-column: 2; grid-row: 1; }
.platform-detail { font-size: .65rem; color: var(--text-muted); grid-column: 2; grid-row: 2; }
.home-page .badge-soon { grid-column: 3; grid-row: 1 / 3; margin: 0; color: var(--accent); background: var(--accent-soft); font-size: .65rem; padding: 6px 10px; white-space: nowrap; }
.home-page .platform-card.windows:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px #0000000a; }
.home-page .coming-soon { cursor: default; }
.home-page .coming-soon .platform-name { grid-row: 1 / 3; }
.home-page .coming-soon:hover, .home-page .coming-soon:active { transform: none !important; background: var(--card-bg); box-shadow: none; border-color: var(--card-border); }
.home-page .coming-soon:hover .platform-icon-box { background: var(--accent-soft); box-shadow: none; }
.home-page .coming-soon .badge-soon { color: var(--text-muted); background: transparent; border-color: var(--card-border); }
.getting-started { padding: 48px 0 0; }
.home-page .getting-started .section-title { font-size: 1.1rem; margin: 0 0 28px; font-weight: 550; letter-spacing: -.01em; }
.home-page .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; align-items: start; }
.home-page .step-item { display: flex; gap: 15px; max-width: none; }
.home-page .step-number { font-size: .7rem; color: var(--accent); font-weight: 500; margin: 5px 0 0; }
.home-page .step-content h3 { font-size: .87rem; font-weight: 550; margin: 0 0 10px; }
.home-page .step-content p { font-size: .8rem; line-height: 1.8; color: var(--text-muted); margin: 0; }
.home-page .changelog, .home-page .help-center { margin: 90px 0; max-width: none; }
.home-page .changelog .section-title, .home-page .help-center .section-title { text-align: left; font-size: 1.6rem; font-weight: 550; margin-bottom: 28px; }
.home-page .changelog-container { border-radius: 16px; padding: 30px; }
.home-page .changelog-item h3 { color: var(--accent); font-size: 1rem; font-weight: 550; }
.home-page .changelog-item li { font-size: .86rem; line-height: 1.85; }
.home-page .faq-container { gap: 0; border-top: 1px solid var(--card-border); }
.home-page .faq-item { border: 0; border-bottom: 1px solid var(--card-border); border-radius: 0; background: transparent; }
.home-page .faq-question { padding: 22px 0; font-size: .9rem; font-weight: 500; gap: 20px; list-style: none; }
.home-page .faq-question::-webkit-details-marker { display: none; }
.home-page .faq-question:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.home-page .faq-question svg { flex-shrink: 0; }
.home-page .faq-answer { padding: 0 30px 22px 0; max-height: none; font-size: .85rem; }
.home-page .faq-item[open] .faq-question svg { transform: rotate(180deg); color: var(--accent); }
.home-page footer { margin-top: 80px; padding-top: 45px; }
.home-page footer > .container { padding: 0; }
.home-page .feature-lead:first-child { background: radial-gradient(ellipse at 75% 20%, #8b5cf625, transparent 65%), var(--card-bg); }
.home-page .feature-lead:nth-child(2) { background: radial-gradient(ellipse at 75% 20%, #31a4e923, transparent 65%), var(--card-bg); }
.home-page .feature-icon { border: 1px solid #a591ff2e; box-shadow: inset 0 1px 0 #ffffff14; }
.home-page .feature-icon.emerald, .home-page .feature-icon.teal { color: #40d7cc; background: #19baaf15; border-color: #40d7cc25; }
.home-page .feature-icon.sky { color: #69bfff; background: #398fff18; border-color: #69bfff25; }
[data-theme="light"] .home-page .feature-icon.emerald, [data-theme="light"] .home-page .feature-icon.teal { color: #08867e; }
[data-theme="light"] .home-page .feature-icon.sky { color: #2374c7; }
.home-page .hero-summary p .violet { color: var(--accent); }
.home-page .release-label { width: fit-content; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 999px; background: var(--accent-soft); }

@media (min-width: 1440px) {
  .home-page .features { gap: 24px; }
  .home-page .feature-card, .home-page .feature-card.feature-lead { padding: 36px; }
  .home-page .feature-art { height: 180px; }
  .home-page .capture-art { max-width: 430px; }
  .home-page .feature-card p { max-width: 65ch; }
}
@media (max-width: 1000px) {
  .home-page .feature-card { grid-column: span 6; }
  .home-page .platform-card { grid-template-columns: 44px minmax(0, 1fr); }
  .home-page .badge-soon { grid-column: 2; grid-row: 3; justify-self: start; }
  .home-page .coming-soon .platform-name { grid-row: 1; }
  .home-page .coming-soon .badge-soon { grid-row: 2; }
}
@media (max-width: 640px) {
  .home-page .hero { padding: 150px 0 55px; }
  .home-page .hero-title h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
  .release-label { margin-bottom: 18px; }
  .hero-summary p { font-size: .88rem; }
  .section-intro { gap: 12px; margin-bottom: 24px; }
  .section-intro h2 { font-size: 1.4rem; }.section-intro p { font-size: .82rem; }
  .home-page .feature-card, .home-page .feature-card.feature-lead { grid-column: span 12; padding: 24px; }
  .feature-art { height: 130px; }
  .home-page .how-it-works { margin-top: 55px; padding: 24px 18px; }
  .home-page .download-platforms { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home-page .platform-card { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px 12px; padding: 18px 14px; }
  .home-page .badge-soon, .home-page .coming-soon .badge-soon { grid-column: 3; grid-row: 1 / 3; font-size: .6rem; }
  .home-page .coming-soon .platform-name { grid-row: 1 / 3; }
  .getting-started { padding: 32px 0 0; }
  .home-page .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-page .changelog, .home-page .help-center { margin: 55px 0; }
  .home-page .changelog-container { padding: 22px; }
}
@media (max-width: 380px) {
  .home-page .platform-card { grid-template-columns: 40px minmax(0, 1fr); }
  .home-page .badge-soon { grid-column: 2; grid-row: 3; }
  .home-page .coming-soon .badge-soon { grid-column: 2; grid-row: 2; }
  .home-page .coming-soon .platform-name { grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html, :root { scroll-behavior: auto; }
  .home-page *, .home-page *::before, .home-page *::after { animation: none !important; transition: none !important; }
  .home-page .reveal { opacity: 1; transform: none; }
}