.home-page { overflow: hidden; color: #182033; background: #fff; }
.home-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.home-section { padding: 88px 0; scroll-margin-top: 80px; }
.home-section-tinted { background: #f5f7fc; }
.home-page h1, .home-page h2, .home-page h3 { color: #182033; letter-spacing: -.03em; }
.home-page h2 { max-width: 760px; margin: 0 auto 42px; font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.12; text-align: center; }
.home-page h3 { margin: 0 0 12px; font-size: 1.12rem; line-height: 1.3; }
.home-page p { line-height: 1.68; }
.home-eyebrow, .home-card-label { margin: 0 0 14px; color: #6d3bd1; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.home-hero { position:relative; isolation:isolate; min-height:680px; display:flex; align-items:center; overflow:hidden; padding:72px 0; color:#fff; background:#121526; }
.home-hero::after { content:''; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg, rgba(12,15,29,.98) 0%, rgba(12,15,29,.92) 34%, rgba(12,15,29,.48) 57%, rgba(12,15,29,.08) 78%); pointer-events:none; }
.home-hero-grid { position:relative; z-index:2; display:flex; align-items:center; min-height:536px; }
.home-hero-copy { width:min(620px, 56%); }
.home-hero h1 { max-width: 650px; margin: 0 0 24px; color: #fff; font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.08; }
.home-hero .home-eyebrow { color: #c4b5fd; }
.home-lead { max-width: 690px; margin: 0 0 18px; font-size: clamp(1.05rem, 2vw, 1.25rem); color: #e6e5f2; }
.home-note { margin: 0 0 28px; color: #bfc2d5; font-weight: 600; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.home-button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 12px 22px; border: 1px solid transparent; text-decoration: none; font-weight: 800; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.home-button:hover { transform: translateY(-2px); }
.home-button-primary { background: #7c3aed; color: #fff; box-shadow: 0 8px 24px rgba(124,58,237,.24); }
.home-button-primary:hover { background: #6d28d9; color: #fff; }
.home-button-secondary { border-color: #cfd5e3; background: #fff; color: #25304a; }
.home-button-secondary:hover { color: #182033; box-shadow: 0 8px 22px rgba(18,21,38,.1); }
.home-hero .home-button-primary { background: #fff; color: #1b1b38; }
.home-hero .home-button-secondary { border-color: rgba(255,255,255,.34); background: transparent; color: #fff; }
.home-microcopy { margin: 14px 0 0; color: #bfc2d5; font-size: .84rem; }
#hp-demo { position:absolute; z-index:0; inset:0; overflow:hidden; cursor:grab; touch-action:none; }
#hp-demo:active { cursor: grabbing; }
#hp-demo canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.hp-demo-placeholder { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, #343567, #1a1a2e 68%); }
.home-card-grid { display: grid; gap: 20px; }
.home-card-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-card-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-card { padding: 28px; border: 1px solid #e0e5ef; background: #fff; box-shadow: 0 8px 28px rgba(24,32,51,.06); }
.home-card p { margin: 0; color: #626b7d; }
.home-situation-card { position: relative; min-height: 220px; color: inherit; text-decoration: none; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.home-situation-card:hover { transform: translateY(-4px); border-color: #a78bfa; box-shadow: 0 15px 36px rgba(24,32,51,.11); }
.home-situation-card > span { position: absolute; right: 25px; bottom: 22px; color: #7c3aed; font-size: 1.35rem; }
.home-steps { counter-reset: steps; }
.home-step { text-align: center; padding: 10px 24px; }
.home-step-number { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 50%; color: #fff; background: #7c3aed; font-weight: 800; }
.home-step p { margin: 0; color: #626b7d; }
.home-centered-action { margin-top: 38px; text-align: center; }
.home-result-card { text-align: center; }
.home-result-symbol { position: relative; width: 88px; height: 48px; margin: 0 auto 22px; }
.home-result-symbol i { position: absolute; display: block; width: 15px; height: 15px; border-radius: 50%; background: #7c3aed; box-shadow: 0 0 0 7px #ede9fe; }
.home-result-symbol i:nth-child(1) { left: 6px; top: 20px; }
.home-result-symbol i:nth-child(2) { left: 37px; top: 5px; }
.home-result-symbol i:nth-child(3) { right: 6px; bottom: 2px; }
.home-result-symbol::before, .home-result-symbol::after { content: ''; position: absolute; height: 1px; background: #b7a5e6; transform-origin: left center; }
.home-result-symbol::before { width: 37px; left: 18px; top: 25px; transform: rotate(-24deg); }
.home-result-symbol::after { width: 35px; left: 49px; top: 16px; transform: rotate(28deg); }
.home-explanation { max-width: 810px; margin: 34px auto 0; color: #626b7d; text-align: center; }
.home-case-section { color: #ecebf7; background: #181a32; }
.home-case { max-width: 900px; }
.home-case h2 { margin-left: 0; color: #fff; text-align: left; }
.home-case .home-eyebrow { color: #c4b5fd; }
.home-case-lead { max-width: 850px; font-size: 1.08rem; }
.home-case .home-note { color: #bfc2d5; }
.home-case .home-button-secondary { border-color: rgba(255,255,255,.35); background: transparent; color: #fff; }
.home-next-card { display: flex; flex-direction: column; min-height: 330px; }
.home-next-card .home-card-label { margin-bottom: 12px; }
.home-next-card > p:not(.home-card-label) { flex: 1; }
.home-next-card > a { margin-top: 26px; color: #6d28d9; font-weight: 800; }
.home-faq-shell { max-width: 900px; }
.home-faq-list details { border-top: 1px solid #dbe0ea; background: #fff; }
.home-faq-list details:last-child { border-bottom: 1px solid #dbe0ea; }
.home-faq-list summary { padding: 20px 52px 20px 22px; cursor: pointer; color: #182033; font-weight: 800; }
.home-faq-list details p { margin: 0; padding: 0 22px 22px; color: #626b7d; }
.home-final-cta { margin-top: 72px; padding: 48px; color: #fff; background: #1a1c36; text-align: center; }
.home-final-cta h2 { margin-bottom: 28px; color: #fff; }

@media (max-width: 900px) {
  .home-hero-copy { width:min(590px, 67%); }
  .home-card-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home-shell { width: min(100% - 28px, 1120px); }
  .home-section { padding: 64px 0; }
  .home-hero { min-height:0; align-items:flex-start; padding:52px 0 280px; }
  .home-hero::after { background:linear-gradient(180deg, #121526 0%, rgba(18,21,38,.98) 38%, rgba(18,21,38,.52) 57%, rgba(18,21,38,.08) 76%, rgba(18,21,38,.3) 100%); }
  .home-hero-grid { display:block; min-height:0; }
  .home-hero-copy { width:100%; }
  .home-hero h1 { font-size: clamp(1.9rem, 9vw, 2.65rem); }
  #hp-demo { inset:auto 0 0; height:430px; }
  .home-actions { align-items: stretch; flex-direction: column; }
  .home-actions .home-button { width: 100%; }
  .home-card-grid-four, .home-card-grid-three { grid-template-columns: 1fr; }
  .home-situation-card { min-height: 0; padding-bottom: 62px; }
  .home-step { padding: 8px 4px 24px; }
  .home-final-cta { margin-top: 54px; padding: 36px 20px; }
}
