.hero { display: flex; min-height: 100vh; min-height: 100svh; align-items: center; padding: 130px 0 118px; overflow: hidden; }
.hero-effects { position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none; }
.hero-effects .aurora { position: absolute; inset: -20%; }
.hero-grid { position: relative; z-index: 2; display: block; text-align: center; }
.hero-copy { position: relative; z-index: 4; display: flex; max-width: 940px; flex-direction: column; align-items: center; margin-inline: auto; }
.hero-copy h1 { max-width: 920px; }
.hero-copy .lead { margin: 26px auto 0; }
.hero-copy .button-row { justify-content: center; }
.light-shaft { position: absolute; top: -25%; width: 340px; height: 150%; filter: blur(46px); transform-origin: top center; }
.light-shaft-one { left: 58%; background: linear-gradient(180deg, oklch(72% 0.2 320 / 0.5), oklch(62% 0.21 300 / 0.16) 55%, transparent 85%); transform: rotate(16deg); }
.light-shaft-two { left: 70%; width: 210px; background: linear-gradient(180deg, oklch(78% 0.17 345 / 0.34), transparent 80%); transform: rotate(24deg); }
.beam-origin { position: absolute; top: -70px; left: 62%; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, oklch(88% 0.11 330 / 0.8), oklch(70% 0.18 320 / 0.25) 45%, transparent 70%); filter: blur(28px); transform: translateX(-50%); }
.liquid-stream { position: absolute; top: -4%; left: 62%; width: 560px; height: 118%; opacity: 0.92; filter: blur(8px) saturate(1.3); transform: translateX(-50%) rotate(9deg); transform-origin: top center; }
.star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: white; opacity: 0.2; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: 0.8; transform: scale(1.5); } }

.section-kicker { text-align: center; font-size: 0.77rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.marquee { overflow: hidden; margin-top: 28px; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 56px; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track, .testimonial-marquee:hover .testimonial-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-chip { display: flex; flex: none; align-items: center; gap: 10px; color: var(--color-subtle); font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; }
.logo-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--gradient-brand); box-shadow: 0 0 14px var(--color-violet); }

.use-cases { overflow: hidden; }
.slider { position: relative; height: 510px; perspective: 1400px; }
.slider-viewport { position: absolute; inset: 0; overflow: visible; touch-action: pan-y; transform-style: preserve-3d; }
.slider-track-cards { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.use-case-card { position: absolute; top: 50%; left: 50%; width: 310px; min-height: 390px; margin-left: -155px; padding: 32px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 22px; opacity: 0; background: linear-gradient(155deg, oklch(26% 0.075 300 / 0.94), oklch(18% 0.04 270 / 0.96)); box-shadow: 0 34px 90px -30px oklch(5% 0.03 280 / .95), inset 0 1px 0 oklch(100% 0 0 / .05); transform-style: preserve-3d; transition: border-color 250ms ease, box-shadow 250ms ease; will-change: transform, opacity; }
.use-case-card::before { position: absolute; inset: 0; opacity: 0; background: radial-gradient(360px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), oklch(72% .19 325 / .18), transparent 45%); pointer-events: none; transition: opacity 250ms ease; content: ""; }
.use-case-card:hover::before, .use-case-card.is-active::before { opacity: 1; }
.use-case-card.is-active { border-color: oklch(68% .19 320 / .72); box-shadow: 0 42px 100px -28px black, 0 0 54px -25px oklch(65% .22 310 / .82); }
.card-index { position: absolute; top: 28px; right: 28px; color: var(--color-subtle); font-family: var(--font-mono); font-size: 0.7rem; }
.product-glyph, .module-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 60px; border: 1px solid oklch(65% 0.17 315 / 0.45); border-radius: 13px; background: oklch(62% 0.21 300 / 0.12); color: oklch(82% 0.12 320); font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; }
.use-case-card h3 { margin-bottom: 12px; font-size: 1.35rem; }
.use-case-card p { font-size: 0.91rem; }
.slider-arrow { position: absolute; top: 48%; z-index: 120; display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: oklch(20% 0.04 285 / 0.9); box-shadow: 0 15px 40px -18px black; color: var(--color-text); cursor: pointer; transform: translateY(-50%); backdrop-filter: blur(12px); }
.slider-arrow:hover { border-color: var(--color-pink); }
.slider-prev { left: -68px; }.slider-next { right: -68px; }
.slider-dots { position: absolute; right: 0; bottom: 0; left: 0; z-index: 130; display: flex; justify-content: center; gap: 8px; }
.slider-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: oklch(100% 0 0 / 0.18); cursor: pointer; }
.slider-dots button.is-active { width: 22px; border-radius: 99px; background: var(--gradient-brand); }

.featured-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 26px; align-items: stretch; }
.featured-list { display: grid; gap: 12px; }
.featured-item { overflow: hidden; border-radius: 18px; background: oklch(21% 0.045 290 / 0.74); transition: background 250ms ease, border-color 250ms ease; }
.featured-item.is-active { border-color: oklch(65% 0.17 315 / 0.62); background: oklch(24% 0.06 294 / 0.9); }
.featured-item > button { display: grid; width: 100%; grid-template-columns: 42px 1fr auto; align-items: center; padding: 21px 22px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.plugin-number { color: var(--color-subtle); font-family: var(--font-mono); font-size: 0.68rem; }
.plugin-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 650; }
.plugin-price { color: var(--color-muted); font-family: var(--font-mono); font-size: 0.75rem; }
.featured-details { max-height: 0; padding: 0 22px; overflow: hidden; opacity: 0; transition: max-height 400ms ease, opacity 250ms ease, padding 400ms ease; }
.featured-item.is-active .featured-details { max-height: 360px; padding: 0 22px 24px 64px; opacity: 1; }
.featured-details > p { font-size: 0.9rem; }
.featured-details ul { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 18px 0; color: var(--color-muted); font-size: 0.78rem; }
.featured-details li::before { margin-right: 8px; color: var(--color-pink); content: "✓"; }
.featured-details .button { min-height: 42px; }
.preview-panel { display: flex; flex-direction: column; padding: 26px; border-radius: 22px; background: linear-gradient(145deg, oklch(24% 0.065 295 / 0.82), oklch(18% 0.03 265 / 0.94)); }
.product-badge { align-self: flex-start; padding: 5px 10px; border: 1px solid oklch(70% 0.18 345 / 0.45); border-radius: 999px; color: oklch(82% 0.13 335); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; }
.dashboard-preview { position: relative; display: grid; min-height: 310px; grid-template-columns: 25% 1fr; margin: 22px 0; overflow: hidden; border: 1px solid oklch(55% 0.08 300 / 0.3); border-radius: 14px; background: oklch(14% 0.03 275); }
.dashboard-sidebar { display: flex; flex-direction: column; gap: 16px; padding: 30px 15px; border-right: 1px solid oklch(55% 0.08 300 / 0.2); }
.dashboard-sidebar i { height: 7px; border-radius: 4px; background: oklch(50% 0.08 300 / 0.35); }.dashboard-sidebar i:first-child { background: var(--gradient-brand); }
.dashboard-content { padding: 40px 24px; }.dashboard-content span { display: block; width: 42%; height: 11px; margin-bottom: 35px; border-radius: 5px; background: oklch(78% 0.04 290 / 0.55); }.dashboard-content b { display: block; height: 8px; margin: 12px 0; border-radius: 4px; background: oklch(50% 0.06 290 / 0.24); }.dashboard-content div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 34px; }.dashboard-content div i { height: 70px; border-radius: 7px; background: linear-gradient(145deg, oklch(35% 0.11 300 / 0.55), oklch(22% 0.04 270)); }
.preview-label { position: absolute; right: 14px; bottom: 12px; color: oklch(80% 0.03 290 / 0.5); font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; }
.preview-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: auto; font-size: 0.8rem; }.preview-footer span { color: var(--color-subtle); font-family: var(--font-mono); font-size: 0.68rem; }

.home-pro { overflow: hidden; }
.home-pro::before { position: absolute; top: 5%; left: 50%; width: 780px; height: 430px; border-radius: 50%; opacity: 0.12; background: var(--color-violet); filter: blur(120px); transform: translateX(-50%); content: ""; pointer-events: none; }
.home-pro-lead { max-width: 690px; margin: 18px auto 0; }
.home-pro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.home-pro-card { display: flex; min-height: 530px; flex-direction: column; padding: 24px; overflow: hidden; border-radius: 22px; background: linear-gradient(150deg, oklch(24% 0.065 297 / 0.86), oklch(17% 0.03 268 / 0.94)); transition: transform 230ms ease, border-color 230ms ease, box-shadow 230ms ease; }
.home-pro-card:hover { border-color: oklch(70% 0.18 330 / 0.68); box-shadow: 0 35px 100px -38px black, 0 0 60px -38px var(--color-pink); transform: translateY(-7px); }
.home-pro-card .eyebrow { margin: 26px 0 12px; font-size: 0.6rem; }
.home-pro-card h3 { margin-bottom: 12px; font-size: 1.28rem; }
.home-pro-card > p:not(.eyebrow) { font-size: 0.84rem; }
.home-pro-link { margin-top: auto; padding-top: 25px; color: oklch(82% 0.11 330); font-size: 0.72rem; font-weight: 700; }
.home-pro-visual { position: relative; height: 210px; overflow: hidden; border: 1px solid oklch(58% 0.1 305 / 0.3); border-radius: 16px; background: oklch(14% 0.03 272 / 0.78); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.04); }
.mini-segment > span { display: grid; gap: 8px; padding: 22px; }
.mini-segment > span i { display: block; height: 27px; border: 1px solid oklch(60% 0.1 305 / 0.25); border-radius: 7px; background: oklch(27% 0.065 295 / 0.68); }
.mini-segment > span i:nth-child(2) { width: 86%; }.mini-segment > span i:nth-child(3) { width: 72%; }
.mini-segment > b { position: absolute; top: 27px; right: 28px; display: grid; gap: 7px; }
.mini-segment > b i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-pink); box-shadow: 0 0 15px var(--color-pink); }
.mini-segment > strong { position: absolute; right: 20px; bottom: 17px; padding: 9px 12px; border: 1px solid oklch(70% 0.18 335 / 0.42); border-radius: 10px; background: oklch(34% 0.12 320 / 0.52); color: var(--color-pink); font-family: var(--font-display); font-size: 1.2rem; }
.mini-segment > strong small { color: var(--color-muted); font-family: var(--font-body); font-size: 0.48rem; font-weight: 500; }
.mini-form { display: grid; grid-template-columns: 38% 1fr; grid-template-rows: 36px repeat(3, 1fr); gap: 8px; padding: 18px; }
.mini-form > span { display: grid; place-items: center; border-radius: 7px; background: oklch(28% 0.07 300 / 0.62); color: var(--color-subtle); font-family: var(--font-mono); font-size: 0.5rem; }
.mini-form > span:nth-child(2) { background: oklch(38% 0.12 315 / 0.62); color: var(--color-text); }
.mini-form > i { grid-column: 2; border: 1px solid oklch(58% 0.09 300 / 0.25); border-radius: 7px; background: oklch(24% 0.045 285 / 0.72); }
.mini-form > b { position: absolute; bottom: 16px; left: 18px; display: grid; width: 40px; height: 28px; place-items: center; border: 1px solid oklch(70% 0.18 335 / 0.5); border-radius: 7px; color: var(--color-pink); font-family: var(--font-mono); font-size: 0.54rem; }
.mini-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 18px; }
.mini-media > i { position: relative; min-height: 70px; overflow: hidden; border-radius: 8px; background: linear-gradient(145deg, oklch(48% 0.15 320), oklch(22% 0.07 260)); }
.mini-media > i:nth-child(2) { background: linear-gradient(145deg, oklch(48% 0.14 245), oklch(20% 0.06 285)); }.mini-media > i:nth-child(3) { background: linear-gradient(145deg, oklch(48% 0.13 150), oklch(19% 0.06 270)); }.mini-media > i:nth-child(4) { background: linear-gradient(145deg, oklch(52% 0.13 75), oklch(22% 0.07 320)); }
.mini-media > i::after { position: absolute; right: 8px; bottom: -13px; left: 8px; height: 38px; border-radius: 50%; background: oklch(30% 0.08 280 / 0.75); content: ""; }
.mini-media > b { position: absolute; right: 16px; bottom: 15px; width: 56px; height: 56px; border: 1px dashed white; border-radius: 50%; background: oklch(70% 0.18 335 / 0.14); box-shadow: 0 10px 30px -10px black; }

.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.module-card { padding: 28px; border-radius: 18px; background: oklch(21% 0.04 285 / 0.68); transition: transform 200ms ease, border-color 200ms ease; }
.module-card:hover { border-color: oklch(62% 0.21 300 / 0.56); transform: translateY(-5px); }
.module-card .module-icon { margin-bottom: 32px; }
.module-card h3 { margin-bottom: 10px; }.module-card p { font-size: 0.88rem; }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.benefit-card { min-height: 270px; padding: 28px; border-radius: 18px; background: oklch(20% 0.035 278 / 0.67); }
.benefit-card > span { display: block; margin-bottom: 70px; color: oklch(70% 0.18 345 / 0.75); font-family: var(--font-mono); font-size: 0.72rem; }
.benefit-card h3 { margin-bottom: 11px; }.benefit-card p { font-size: 0.86rem; }
.stats-section { padding-block: 54px; }
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border-radius: 20px; background: linear-gradient(120deg, oklch(24% 0.065 300 / 0.86), oklch(18% 0.03 260 / 0.9)); }
.stat { padding: 38px 24px; text-align: center; }.stat + .stat { border-left: 1px solid var(--color-border); }.stat strong { display: block; color: transparent; background: var(--gradient-brand); background-clip: text; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.45rem); }.stat span { color: var(--color-muted); font-size: 0.75rem; }
.testimonials { overflow: hidden; }
.testimonial-marquee { mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.testimonial-track { display: flex; width: max-content; gap: 20px; animation: testimonial-scroll 52s linear infinite; }
@keyframes testimonial-scroll { to { transform: translateX(-50%); } }
.testimonial-card { display: flex; width: 400px; min-height: 270px; flex-direction: column; justify-content: space-between; margin: 0; padding: 28px; border-radius: 18px; background: oklch(20% 0.04 285 / 0.74); }
.testimonial-card blockquote { margin: 0; color: var(--color-text); font-family: var(--font-display); font-size: 1.04rem; line-height: 1.55; }
.testimonial-card figcaption { display: flex; align-items: center; gap: 13px; }.avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--gradient-brand); color: oklch(15% 0.02 260); font-weight: 700; }.testimonial-card figcaption > span:last-child { display: grid; }.testimonial-card figcaption strong { font-size: 0.78rem; }.testimonial-card figcaption small { color: var(--color-subtle); font-size: 0.67rem; }

@media (max-width: 1120px) { .slider-prev { left: 8px; }.slider-next { right: 8px; }.slider-arrow { top: 44%; }.benefit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .hero { min-height: 100vh; min-height: 100svh; padding-top: 104px; }.hero-copy { max-width: 700px; }.featured-grid { grid-template-columns: 1fr; }.home-pro-grid { grid-template-columns: 1fr 1fr; }.home-pro-card:last-child { grid-column: 1 / -1; }.module-grid { grid-template-columns: 1fr 1fr; }.slider { height: 480px; }.use-case-card { width: 280px; min-height: 360px; margin-left: -140px; } }
@media (max-width: 680px) { .hero { min-height: 100vh; min-height: 100svh; padding: 86px 0 78px; }.hero-effects { opacity: 0.82; }.marquee-track { gap: 38px; }.slider { height: 450px; }.use-case-card { width: min(270px, calc(100vw - 72px)); min-height: 345px; margin-left: min(-135px, calc((72px - 100vw) / 2)); }.slider-prev { left: -7px; }.slider-next { right: -7px; }.featured-item > button { grid-template-columns: 34px 1fr; }.plugin-price { display: none; }.featured-item.is-active .featured-details { padding-left: 56px; }.featured-details ul { grid-template-columns: 1fr; }.preview-panel { display: none; }.home-pro-grid { grid-template-columns: 1fr; }.home-pro-card:last-child { grid-column: auto; }.home-pro-card { min-height: 500px; }.module-grid, .benefit-grid, .stats-band { grid-template-columns: 1fr; }.stat + .stat { border-top: 1px solid var(--color-border); border-left: 0; }.testimonial-card { width: min(340px, calc(100vw - 48px)); }.light-shaft, .liquid-stream { left: 80%; } }