.demo-page { overflow: hidden; background: #fff; }
.section-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--color-pink-dark); font-size: .76rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.section-kicker::before { width: 24px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,var(--color-pink),var(--color-blue)); content: ""; }
.section-title { margin: 16px 0 0; color: var(--color-black); font-size: clamp(2.55rem,4.2vw,4.4rem); font-weight: 790; line-height: 1.01; letter-spacing: -.055em; }
.section-lead { max-width: 680px; margin: 20px 0 0; color: var(--color-muted); font-size: 1.06rem; line-height: 1.72; }
.page-hero { position: relative; padding: clamp(42px,5vw,68px) 0 clamp(30px,4vw,52px); background: linear-gradient(180deg,#fff 0%,#f8f9ff 68%,#fff 100%); }
.page-hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(17,103,245,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(17,103,245,.035) 1px,transparent 1px); background-size: 54px 54px; content: ""; mask-image: linear-gradient(to bottom,#000,transparent 82%); pointer-events: none; }
.page-hero__glow { position: absolute; inset: -8% -4% auto auto; width: 55vw; height: 55vw; border-radius: 50%; background: radial-gradient(circle,rgba(17,103,245,.13),rgba(239,0,184,.09) 42%,transparent 70%); filter: blur(34px); }
.page-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0,.88fr) minmax(560px,1.12fr); align-items: start; gap: clamp(24px,4vw,60px); }
.page-hero__content { position: relative; z-index: 2; }.page-hero h1 { margin: 18px 0 0; color: var(--color-black); font-size: clamp(3.55rem,4.75vw,5.35rem); font-weight: 790; line-height: .98; letter-spacing: -.064em; }.page-hero__content > p { max-width: 590px; margin: 28px 0 0; color: var(--color-muted); font-size: clamp(1.04rem,1.25vw,1.18rem); line-height: 1.72; }.page-hero__actions { margin-top: 32px; }.page-hero__visual img { display: block; width: 122%; max-width: none; margin-left: -10%; filter: drop-shadow(0 34px 56px rgba(18,24,38,.16)); }.page-hero__proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; color: #626570; font-size: .8rem; font-weight: 750; }
.title-accent { color: transparent; background: linear-gradient(96deg,#ef00b8 0%,#d70bc7 32%,#6d41e9 68%,#1167f5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.btn--shine { position: relative; isolation: isolate; overflow: hidden; }.btn--shine::after { position: absolute; top: -80%; left: -42%; width: 32%; height: 260%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent); content: ""; transform: rotate(18deg); transition: left 650ms cubic-bezier(.2,.75,.25,1); }.btn--shine:hover::after,.btn--shine:focus-visible::after { left: 118%; }
.section-header--center { max-width: 850px; margin-inline: auto; text-align: center; }.section-header--center .section-kicker { justify-content: center; }.section-header--center .section-lead { margin-inline: auto; }
.demo-benefits { padding-block: clamp(64px,7vw,92px); }.benefit-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 42px; }.benefit-card { --accent: var(--color-pink); position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); align-content: start; min-height: 220px; column-gap: 18px; overflow: hidden; padding: 28px; border: 1px solid #e3e6ed; border-radius: 26px; background: #fff; box-shadow: 0 10px 30px rgba(20,23,34,.035); transition: transform 260ms ease,border-color 260ms ease,box-shadow 260ms ease; }.benefit-card::before { position: absolute; top: 0; right: 28px; left: 28px; height: 3px; border-radius: 0 0 5px 5px; background: var(--accent); content: ""; transition: right 260ms ease,left 260ms ease; }.benefit-card:hover { border-color: color-mix(in srgb,var(--accent) 22%,#dfe2e9); box-shadow: 0 20px 48px rgba(20,23,34,.075); transform: translateY(-5px); }.benefit-card:hover::before { right: 0; left: 0; }.benefit-card > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: var(--accent); background: color-mix(in srgb,var(--accent) 10%,#fff); font-size: .75rem; font-weight: 850; }.benefit-card h3 { align-self: center; margin: 0; font-size: 1.35rem; line-height: 1.12; }.benefit-card p { grid-column: 1/-1; margin: 20px 0 0; color: var(--color-muted); line-height: 1.65; }.benefit-card--blue{--accent:var(--color-blue)}.benefit-card--green{--accent:var(--color-green)}.benefit-card--violet{--accent:#7b35e8}.benefit-card--cyan{--accent:#00a8c7}.benefit-card--orange{--accent:#f08a24}
.demo-process { padding-block: clamp(82px,9vw,126px); background: #f7f8fb; }.demo-process .section-header { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: end; }.process-timeline { position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 0; margin-top: 62px; counter-reset: step; }.process-timeline::before { position: absolute; top: 25px; right: 8%; left: 8%; height: 2px; background: linear-gradient(90deg,var(--color-pink),var(--color-blue),var(--color-green)); content: ""; opacity: .35; }.process-timeline li { position: relative; padding: 0 18px; text-align: center; }.process-timeline li > span { position: relative; z-index: 1; display: grid; width: 52px; height: 52px; margin-inline: auto; place-items: center; border: 5px solid #f7f8fb; border-radius: 50%; color: #fff; background: linear-gradient(135deg,var(--color-pink),var(--color-blue)); box-shadow: 0 10px 28px rgba(17,103,245,.18); font-size: .72rem; font-weight: 850; }.process-timeline h3 { margin: 22px 0 0; font-size: 1.05rem; }.process-timeline p { margin: 10px 0 0; color: var(--color-muted); font-size: .88rem; line-height: 1.55; }
.faq-section { padding-block: clamp(82px,9vw,126px); }.faq-layout { display: grid; grid-template-columns: minmax(280px,.82fr) minmax(520px,1.18fr); gap: clamp(44px,7vw,100px); }.faq-list { border-top: 1px solid var(--color-line); }.faq-list details { border-bottom: 1px solid var(--color-line); }.faq-list summary { position: relative; padding: 24px 48px 24px 0; color: var(--color-ink); font-size: 1.06rem; font-weight: 780; cursor: pointer; list-style: none; }.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{position:absolute;top:22px;right:4px;content:"+";color:var(--color-pink);font-size:1.45rem}.faq-list details[open] summary::after{content:"−"}.faq-list p{margin:-4px 0 24px;padding-right:36px;color:var(--color-muted);line-height:1.68}
.page-cta { padding-block: 30px 72px; }.page-cta__box { display:flex;align-items:center;justify-content:space-between;gap:44px;overflow:hidden;padding:clamp(34px,5vw,64px);border-radius:34px;color:#fff;background:radial-gradient(circle at 88% 18%,rgba(17,103,245,.4),transparent 34%),radial-gradient(circle at 22% 100%,rgba(239,0,184,.24),transparent 38%),#08090d;box-shadow:0 32px 80px rgba(11,13,21,.18)}.page-cta__box .section-kicker{color:#8fbaff}.page-cta__box h2{max-width:680px;margin:12px 0 0;color:#fff;font-size:clamp(2.2rem,4vw,4rem);line-height:1.02;letter-spacing:-.045em}.page-cta__box p{margin:16px 0 0;color:rgba(255,255,255,.68);font-size:1.05rem}.page-cta__box .btn{flex:0 0 auto}
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 650ms ease,transform 650ms ease}[data-reveal].is-visible{opacity:1;transform:none}
@media(max-width:1100px){.page-hero__inner,.faq-layout{grid-template-columns:1fr}.page-hero__content{text-align:center}.page-hero__content>p{margin-inline:auto}.page-hero__visual{width:min(800px,100%);margin-inline:auto}.page-hero__proof{justify-content:center}.benefit-grid{grid-template-columns:repeat(2,1fr)}.demo-process .section-header{grid-template-columns:1fr}.process-timeline{grid-template-columns:1fr;gap:24px}.process-timeline::before{top:0;bottom:0;left:25px;width:2px;height:auto}.process-timeline li{display:grid;grid-template-columns:52px 1fr;text-align:left;column-gap:20px;padding:0}.process-timeline li>span{grid-row:1/3;margin:0}.process-timeline h3{margin:4px 0 0}.process-timeline p{margin-top:6px}.page-cta__box{align-items:flex-start;flex-direction:column}}
@media(max-width:680px){.page-hero{padding:58px 0 50px}.page-hero h1{font-size:clamp(2.65rem,12vw,4rem)}.page-hero__visual img{width:128%;margin-left:-14%}.benefit-grid{grid-template-columns:1fr}.benefit-card{min-height:230px}.page-cta__box .btn{width:100%}}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none!important}.btn--shine::after,.benefit-card{transition:none!important}}
.demo-process,.faq-section{padding-block:clamp(64px,7vw,92px)}
.process-timeline{margin-top:42px}
.process-timeline{list-style:none}
.page-hero{padding-bottom:12px}
.demo-benefits{padding:38px 0 42px}
.demo-process{padding:48px 0 38px}
.faq-section{padding:48px 0 30px}
.page-cta{padding:10px 0 72px}
.benefit-card::after{position:absolute;inset:0;background:radial-gradient(260px circle at var(--pointer-x) var(--pointer-y),color-mix(in srgb,var(--accent) 9%,transparent),transparent 64%);opacity:0;content:"";pointer-events:none;transition:opacity 260ms ease}
.benefit-card:hover::after{opacity:1}
.benefit-card>*{position:relative;z-index:1}