.hero { --ambient-x: 50%; --ambient-y: 25%; position: relative; padding: 92px 0 72px; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fafbff 68%, #fff 100%); }
.hero::before { content: ""; position: absolute; z-index: -2; width: 860px; height: 860px; left: 50%; top: -570px; transform: translateX(-50%); border: 1px solid rgba(244,63,94,.13); border-radius: 50%; box-shadow: 0 0 0 120px rgba(124,58,237,.023),0 0 0 240px rgba(255,107,53,.018); animation: heroOrbit 13s ease-in-out infinite; }
.hero__glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .3; translate: var(--glow-x, 0px) var(--glow-y, 0px); pointer-events: none; will-change: translate; }
.hero__glow--one { width: 360px; height: 360px; left: -180px; top: 140px; background: #ffc3aa; }
.hero__glow--two { width: 340px; height: 340px; right: -180px; top: 260px; background: #d8b9ff; }
.hero__ambient { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.hero__ambient-video { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; filter: saturate(.9) contrast(.88) brightness(1.12); transform: scale(1.025); transition: opacity 1.2s var(--ease-soft); }
.hero__ambient-video.is-loaded { opacity: .72; }
.hero__ambient-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(249,250,255,.5) 54%, rgba(255,255,255,.8) 100%); }
.hero__ambient-grid { position: absolute; z-index: 3; inset: -10%; background-image: linear-gradient(rgba(76,97,211,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(76,97,211,.045) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(ellipse 70% 58% at 50% 27%, #000 8%, transparent 76%); animation: ambientGridDrift 22s linear infinite alternate; will-change: transform; }
.hero__ambient-blob { position: absolute; z-index: 2; border-radius: 50%; filter: blur(76px); opacity: .24; will-change: transform; }
.hero__ambient-blob--one { width: 590px; height: 590px; left: -16%; top: 2%; background: rgba(255,107,53,.24); animation: ambientFloatOne 15s ease-in-out infinite; }
.hero__ambient-blob--two { width: 630px; height: 630px; right: -18%; top: 6%; background: rgba(124,58,237,.22); animation: ambientFloatTwo 18s ease-in-out infinite; }
.hero__ambient-blob--three { width: 490px; height: 490px; left: 35%; top: 27%; background: rgba(244,63,94,.13); animation: ambientFloatThree 20s ease-in-out infinite; }
.hero__ambient-cursor { position: absolute; z-index: 3; width: 620px; height: 620px; left: var(--ambient-x); top: var(--ambient-y); border-radius: 50%; background: radial-gradient(circle,rgba(255,107,53,.12) 0%,rgba(244,63,94,.07) 31%,rgba(124,58,237,.035) 48%,transparent 69%); opacity: .55; transform: translate(-50%,-50%); transition: opacity .45s ease; will-change: left, top; }
.hero__content { position: relative; z-index: 1; text-align: center; max-width: 980px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid #dfe3f4; border-radius: 999px; background: rgba(255,255,255,.75); color: #344061; font-size: 13px; font-weight: 600; box-shadow: 0 5px 18px rgba(29,44,98,.05); }
.eyebrow__icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e8eaff; color: var(--violet); }
.hero h1 { max-width: 940px; margin: 25px auto 24px; font-family: "Manrope", sans-serif; font-size: clamp(54px, 7vw, 92px); line-height: .99; letter-spacing: -5.5px; font-weight: 700; }
.hero h1 span, h2 em { color: var(--blue); font-style: normal; }
.hero h1 span { background: linear-gradient(105deg,#ff6b35 5%,#f43f5e 38%,#7c3aed 53%,#f43f5e 70%,#ff6b35 100%); background-size: 240% auto; background-position: 100% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: headlineShimmer 7s ease-in-out 1.2s infinite; }
.hero__lead { max-width: 700px; margin: 0 auto; color: var(--ink-soft); font-size: 19px; line-height: 1.65; }
.hero__actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; }
.hero__proof { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 23px; color: #66708a; font-size: 13px; }
.hero__proof span { display: flex; gap: 7px; align-items: center; }
.hero__proof i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e8f9f1; color: var(--green); font-size: 10px; font-style: normal; font-weight: 700; }

.hero-visual { --visual-rx: 0deg; --visual-ry: 0deg; --hero-scroll-y: 0px; position: relative; margin-top: 76px; min-height: 595px; border: 1px solid #ead7e6; border-radius: 36px; background: linear-gradient(135deg,#fff0e8 0%,#faecf3 47%,#f1ebff 100%); box-shadow: 0 36px 90px rgba(119,56,105,.16); overflow: hidden; perspective: 1400px; transform: perspective(1400px) translate3d(0, var(--hero-scroll-y), 0) rotateX(var(--visual-rx)) rotateY(var(--visual-ry)); transform-style: preserve-3d; transition: transform .7s var(--ease-out), box-shadow .45s ease; will-change: transform; }
.hero-visual:hover { box-shadow: 0 45px 110px rgba(55,66,160,.23); }
.hero-visual::before, .hero-visual::after { content: ""; position: absolute; border: 1px solid rgba(91,78,206,.2); border-radius: 50%; }
.hero-visual::before { width: 540px; height: 540px; left: -300px; top: 80px; box-shadow: 0 0 0 70px rgba(255,255,255,.12); }
.hero-visual::after { width: 380px; height: 380px; right: -200px; top: -120px; box-shadow: 0 0 0 60px rgba(255,255,255,.13); }
.hero-visual__grid, .integration-map__grid, .contact-card__pattern { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(84,79,189,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(84,79,189,.11) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 85%, transparent 100%); }
.dashboard { --dash-x: 0px; --dash-y: 0px; position: absolute; z-index: 2; width: 86%; height: 530px; left: 7%; top: 58px; border: 1px solid rgba(19,31,78,.15); border-radius: 17px 17px 0 0; background: #fff; box-shadow: 0 28px 60px rgba(45,42,107,.21); transform: translate3d(var(--dash-x), var(--dash-y), 36px) rotateX(2deg); transition: transform .65s var(--ease-out); overflow: hidden; }
.dashboard__topbar { height: 43px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 15px; border-bottom: 1px solid #e8eaf1; background: #fafbfe; }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ff6b60; }
.window-dots i:nth-child(2) { background: #ffbd44; }
.window-dots i:nth-child(3) { background: #33c249; }
.dashboard__address { min-width: 260px; padding: 7px 20px; border: 1px solid #e5e7ef; border-radius: 7px; background: #fff; color: #8b92a5; text-align: center; font-size: 9px; }
.lock { margin-right: 7px; color: #64aa8d; font-size: 7px; }
.avatar { justify-self: end; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #dfe4ff; color: #4e5b96; font-size: 8px; font-weight: 700; }
.dashboard__body { height: calc(100% - 43px); display: grid; grid-template-columns: 66px 1fr; }
.dashboard__side { display: flex; align-items: center; flex-direction: column; padding: 17px 0; border-right: 1px solid #eaecf3; background: #f8f9fc; }
.side-logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--blue); color: #fff; font-family: "Manrope"; font-weight: 800; font-size: 12px; }
.side-icons { display: flex; flex-direction: column; gap: 11px; margin-top: 35px; }
.side-icons i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; }
.side-icons i.active { background: #e8ecff; }
.side-icons svg { width: 14px; height: 14px; fill: none; stroke: #9298ab; stroke-width: 1.6; }
.side-icons i:first-child svg { fill: var(--blue); stroke: none; }
.side-user { display: grid; place-items: center; width: 28px; height: 28px; margin-top: auto; border: 2px solid #fff; border-radius: 50%; background: #1b2752; color: white; font-size: 8px; }
.dashboard__main { min-width: 0; padding: 28px 31px; background: #fbfbfd; }
.dashboard__heading { display: flex; justify-content: space-between; align-items: flex-start; padding-left: 52px; }
.dashboard__heading small { color: #969cac; font-size: 8px; letter-spacing: .13em; }
.dashboard__heading h2 { margin: 6px 0 0; font-family: "Manrope"; font-size: 20px; letter-spacing: -.8px; }
.dashboard__heading button { padding: 9px 13px; border: 0; border-radius: 7px; background: var(--blue); color: white; font-size: 9px; }
.dashboard__grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 13px; margin-top: 22px; }
.dash-card { position: relative; min-height: 177px; padding: 17px; border: 1px solid #e6e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
.dash-card__title { display: flex; align-items: center; justify-content: space-between; color: #28314a; font-size: 10px; font-weight: 600; }
.dash-card__title small { color: #24a87b; font-size: 7px; letter-spacing: .1em; }
.dash-card__title a { color: var(--blue); font-size: 8px; }
.activity-number { margin-top: 17px; font-family: "Manrope"; font-size: 27px; font-weight: 700; letter-spacing: -1.3px; }
.activity-number span { margin-left: 6px; padding: 3px 6px; border-radius: 20px; background: #e7f9f1; color: var(--green); font: 600 7px "DM Sans"; }
.dash-card p { color: #9299aa; font-size: 8px; line-height: 1.5; }
.chart { position: absolute; left: 17px; right: 17px; bottom: 26px; height: 54px; display: flex; align-items: flex-end; gap: 7px; border-bottom: 1px solid #e8eaf2; }
.chart span { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(#f25354,#ffd9cf); transform-origin: bottom; transition: transform .9s var(--ease-out); }
.chart-labels { position: absolute; left: 17px; right: 17px; bottom: 10px; display: flex; justify-content: space-between; color: #a4a9b8; font-size: 6px; }
.dash-card--agent { min-height: 248px; grid-row: span 2; text-align: center; background: radial-gradient(circle at 50% 25%, #f3f0ff 0, #fff 45%); }
.dash-card--agent > strong { display: block; margin-top: 11px; font-size: 11px; }
.dash-card--agent > p { width: 80%; margin: 5px auto; }
.status-dot { display: block; width: 7px; height: 7px; border: 2px solid #d9f8ec; border-radius: 50%; background: #1eb982; }
.agent-orb { position: relative; width: 86px; height: 86px; margin: 24px auto 0; display: grid; place-items: center; }
.agent-orb::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: conic-gradient(from 50deg,#ff6b35,#f43f5e,#7c3aed,#ff6b35); box-shadow: 0 10px 28px rgba(224,66,81,.25); animation: spin 7s linear infinite; }
.agent-orb span { position: absolute; inset: 0; border: 1px dashed #a99ff2; border-radius: 50%; animation: spin 11s linear infinite reverse; }
.agent-orb i { position: relative; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.agent-orb b { position: absolute; color: #fff; font: 700 13px "Manrope"; }
.agent-input { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; padding: 10px 11px; border: 1px solid #e5e7ef; border-radius: 8px; color: #a2a8b6; font-size: 8px; text-align: left; }
.agent-input b { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 5px; background: var(--blue); color: #fff; font-size: 10px; }
.app-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #edf0f4; }
.app-row:last-child { border: 0; }
.app-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; font-style: normal; font-size: 8px; font-weight: 700; }
.app-icon--blue { background: #e4ecff; color: #3462e5; }
.app-icon--violet { background: #efe7ff; color: #8151e3; }
.app-icon--orange { background: #fff0e8; color: #e47842; }
.app-icon--green { background: #e1f7ed; color: #159363; }
.app-row div { display: flex; flex-direction: column; gap: 1px; }
.app-row strong { color: #303850; font-size: 8px; }
.app-row small { color: #9ba1b0; font-size: 6px; }
.app-row > i { color: #1ab276; font-size: 8px; font-style: normal; }
.dash-card--status { display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 13px; padding-top: 43px; }
.dash-card--status .dash-card__title { position: absolute; top: 17px; left: 17px; right: 17px; }
.status-ring { position: relative; width: 65px; height: 65px; border-radius: 50%; background: conic-gradient(var(--blue) 0 98%, #e9ebf3 98%); display: grid; place-items: center; }
.status-ring::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: white; }
.status-ring span { position: relative; z-index: 1; font: 700 15px "Manrope"; }
.status-ring small { font-size: 8px; }
.dash-card--status div:last-child strong { font-size: 9px; }
.dash-card--status div:last-child p { margin: 5px 0 0; }
.floating-chip { --float-x: 0px; --float-y: 0px; position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; min-width: 188px; padding: 11px 13px; border: 1px solid rgba(91,88,175,.16); border-radius: 12px; background: rgba(255,255,255,.9); box-shadow: 0 17px 40px rgba(41,45,112,.17); backdrop-filter: blur(10px); transform: translate3d(var(--float-x), var(--float-y), 58px); transition: transform .55s var(--ease-out); }
.floating-chip--left { left: 2.5%; top: 147px; }
.floating-chip--right { right: 2.2%; bottom: 68px; }
.floating-chip > span:nth-child(2) { display: flex; flex-direction: column; }
.floating-chip small { color: #8a91a5; font-size: 8px; }
.floating-chip strong { margin-top: 2px; font-size: 11px; }
.floating-chip .status-dot { margin-left: auto; }
.mini-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-size: 15px; font-weight: 700; }
.mini-icon--orange { color: #e67143; background: #fff0e7; }
.mini-icon--green { color: #148e64; background: #e2f7ed; }
.visual-badge { position: absolute; z-index: 4; right: 4.5%; top: 23px; padding: 9px 12px; border: 1px solid rgba(73,68,164,.14); border-radius: 9px; background: rgba(255,255,255,.75); color: #59617b; font-size: 8px; line-height: 1.5; box-shadow: 0 8px 22px rgba(51,52,117,.1); }
.visual-badge span { float: left; margin: 3px 7px 0 0; color: var(--purple); font-size: 16px; }

/* 30-second promotional showcase */
.hero-visual--promo { min-height: 620px; border-color: rgba(103,123,229,.25); background: #07111f; box-shadow: 0 38px 100px rgba(19,34,86,.25); }
.hero-visual--promo::before, .hero-visual--promo::after, .hero-visual--promo > .hero-visual__grid { display: none; }
.promo-stage { position: absolute; inset: 0; border-radius: inherit; color: #fff; background: radial-gradient(circle at 74% 24%, rgba(23,107,255,.2), transparent 31%), radial-gradient(circle at 14% 88%, rgba(112,75,246,.17), transparent 32%), #07111f; overflow: hidden; isolation: isolate; }
.promo-stage::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(130,160,210,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(130,160,210,.055) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at 50% 50%, #000, transparent 82%); }
.promo-stage::after { content: ""; position: absolute; z-index: 90; inset: 0; border-radius: inherit; box-shadow: inset 0 0 85px rgba(0,0,0,.27), inset 0 0 0 1px rgba(255,255,255,.06); pointer-events: none; }
.promo-stage:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.promo-stage:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; }
.promo-ambient { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.promo-ambient i { position: absolute; width: 36vw; height: 36vw; border-radius: 50%; filter: blur(90px); opacity: .18; animation: promoAmbient 12s ease-in-out infinite; }
.promo-ambient i:nth-child(1) { left: -15%; top: -20%; background: #176bff; }
.promo-ambient i:nth-child(2) { right: -17%; bottom: -28%; background: #8956ff; animation-delay: -4s; }
.promo-ambient i:nth-child(3) { left: 38%; top: 35%; width: 22vw; height: 22vw; background: #2bceff; animation-delay: -8s; }
.promo-particles { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.promo-particles i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #88baff; box-shadow: 0 0 10px #4d8fff; opacity: .35; animation: promoParticle 7s ease-in-out infinite; }
.promo-particles i:nth-child(1) { left: 8%; top: 18%; }.promo-particles i:nth-child(2) { left: 19%; top: 72%; animation-delay: -1s; }.promo-particles i:nth-child(3) { left: 34%; top: 28%; animation-delay: -2s; }.promo-particles i:nth-child(4) { left: 48%; top: 81%; animation-delay: -3s; }.promo-particles i:nth-child(5) { left: 61%; top: 17%; animation-delay: -4s; }.promo-particles i:nth-child(6) { left: 73%; top: 66%; animation-delay: -5s; }.promo-particles i:nth-child(7) { left: 87%; top: 31%; animation-delay: -6s; }.promo-particles i:nth-child(8) { left: 94%; top: 82%; animation-delay: -2.5s; }
.promo-scene { position: absolute; z-index: 2; inset: 0; visibility: hidden; opacity: 0; overflow: hidden; transform-style: preserve-3d; }
.promo-scene-copy { position: absolute; z-index: 8; left: 6%; top: 12%; display: flex; flex-direction: column; gap: 8px; }
.promo-scene-copy span, .promo-automation-copy > span { color: #78a7ff; font-size: clamp(8px, .8vw, 11px); font-weight: 700; letter-spacing: .18em; }
.promo-scene-copy strong { font: 700 clamp(28px, 4.2vw, 58px)/.95 "Manrope"; letter-spacing: -.055em; }
.promo-scene-copy > small { max-width: 390px; color: #aebbd3; font-size: clamp(7px,.8vw,11px); line-height: 1.55; }
.promo-scene-copy--left { top: 37%; }
.promo-scene-copy--right { left: auto; right: 7%; top: 38%; text-align: right; }
.promo-scene--transform .promo-scene-copy { left: 4%; top: 27%; width: 31%; }
.promo-scene--transform .promo-scene-copy strong { max-width: 100%; font-size: clamp(28px, 3.1vw, 43px); text-shadow: 0 8px 28px rgba(0,0,0,.48); }
.promo-scene--websites .promo-scene-copy--left { top: 7%; width: 48%; }
.promo-scene--websites .promo-scene-copy strong { font-size: clamp(27px, 3.5vw, 46px); }
.promo-scene--apps .promo-scene-copy--right { top: 21%; width: 35%; }
.promo-scene--apps .promo-scene-copy strong { font-size: clamp(26px, 3.35vw, 45px); }

.promo-hook-title { position: absolute; left: 50%; top: 7%; width: 90%; display: flex; align-items: center; justify-content: center; gap: clamp(11px, 2vw, 27px); margin: 0; font: 800 clamp(31px, 5.8vw, 76px)/.92 "Manrope"; letter-spacing: -.06em; white-space: nowrap; transform: translateX(-50%); perspective: 900px; }
.promo-hook-title span { display: inline-block; }
.promo-hook-title .is-muted { color: #566174; }
.promo-hook-title .is-blue { color: #3b7dff; text-shadow: 0 0 32px rgba(23,107,255,.42); }
.promo-kicker { position: absolute; left: 50%; top: 5%; color: #7f90aa; font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transform: translateX(-50%); }
.promo-cursor { position: absolute; left: 50%; top: 49%; width: 2px; height: 34px; background: #64a0ff; box-shadow: 0 0 18px #176bff; transform: translate(-50%,-50%); animation: promoBlink .8s steps(1) infinite; }
.promo-boring-browser, .promo-modern-browser { position: absolute; left: 50%; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: #f7f7f7; color: #27303e; box-shadow: 0 26px 65px rgba(0,0,0,.35); overflow: hidden; transform: translateX(-50%); }
.promo-boring-browser { bottom: 5%; width: min(560px, 52%); aspect-ratio: 1.64; filter: saturate(.72) contrast(.96); }
.promo-browser-bar { height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid #d8dce3; background: #eceef1; }
.promo-browser-bar > i { width: 6px; height: 6px; border-radius: 50%; background: #aab0b8; }
.promo-browser-bar > span { min-width: 46%; margin-left: auto; margin-right: auto; padding: 4px 10px; border-radius: 4px; background: #fff; color: #9ca2aa; text-align: center; font-size: 6px; }
.bad-site-frame { height: calc(100% - 28px); background: #f2f2f2; overflow: hidden; }
.bad-site-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.promo-hook-line { position: absolute; z-index: 3; left: 50%; top: 28%; width: 94%; margin: 0; color: #f8faff; font: 800 clamp(34px, 3.7vw, 52px)/1.02 "Manrope"; letter-spacing: -.05em; text-align: center; text-shadow: 0 10px 32px rgba(0,0,0,.5); transform: translateX(-50%); }
.promo-hook-line span { color: #f0523f; background: linear-gradient(100deg,#ff7a3d 8%,#f43f5e 50%,#8b43df 96%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 15px rgba(244,63,94,.28)); }

.promo-modern-browser { right: 3%; left: auto; top: 8%; width: 67%; height: 84%; border-color: rgba(125,151,210,.38); transform: none; color: var(--ink); background: #f4f8ff; box-shadow: 0 34px 90px rgba(0,24,72,.3), 0 0 55px rgba(67,126,255,.14); }
.promo-modern-browser .promo-browser-bar { position: relative; z-index: 8; border-color: rgba(53,78,131,.12); background: rgba(249,252,255,.92); backdrop-filter: blur(12px); }
.promo-modern-browser .promo-browser-bar > i:nth-child(1) { background: #ff6d83; }.promo-modern-browser .promo-browser-bar > i:nth-child(2) { background: #ffd267; }.promo-modern-browser .promo-browser-bar > i:nth-child(3) { background: #50e5a8; }
.promo-modern-browser .promo-browser-bar > span { color: #74809b; background: rgba(255,255,255,.78); box-shadow: inset 0 0 0 1px rgba(66,91,145,.09); }
.modern-nav { position: relative; z-index: 5; height: 45px; display: flex; align-items: center; gap: 24px; padding: 0 19px; border-bottom: 1px solid rgba(255,255,255,.08); color: #abb5d2; background: rgba(11,16,39,.78); backdrop-filter: blur(15px); font-size: 8px; }
.modern-nav b { display: flex; align-items: center; gap: 6px; margin-right: auto; color: #fff; font: 800 12px "Manrope"; }.modern-nav b i { width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(135deg,#55c9ff,#7b5cff); box-shadow: 0 0 15px #576eff; }
.modern-nav em { padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; color: #fff; background: linear-gradient(110deg,rgba(67,143,255,.75),rgba(126,76,241,.72)); box-shadow: 0 7px 22px rgba(71,86,255,.22); font-style: normal; }
.modern-hero { position: relative; height: calc(100% - 28px); padding: 0; background: #eef4ff; overflow: hidden; }
.modern-showcase-video { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; object-position: center; opacity: 0; filter: saturate(1.08) contrast(1.02) brightness(1.04); transform: scale(1.06); transition: opacity .9s ease; pointer-events: none; }
.modern-showcase-video.is-ready { opacity: 1; }
.modern-video-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(250,246,236,.92) 0%,rgba(247,245,238,.78) 42%,rgba(244,246,242,.3) 64%,rgba(239,246,255,.04) 83%), linear-gradient(180deg,rgba(255,255,255,.08),rgba(226,238,248,.12)); pointer-events: none; }
.modern-hero::before { content: ""; position: absolute; z-index: 2; inset: 0; background-image: linear-gradient(rgba(42,76,135,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(42,76,135,.035) 1px,transparent 1px); background-size: 27px 27px; mask-image: linear-gradient(145deg,#000,transparent 78%); pointer-events: none; }
.modern-hero::after { content: ""; position: absolute; z-index: 2; left: -22%; top: -52%; width: 65%; height: 170%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); transform: rotate(24deg); animation: glassSweep 4.8s ease-in-out infinite; pointer-events: none; }
.modern-hero > small, .modern-hero > h3, .modern-hero > p, .modern-hero > button { position: relative; z-index: 4; }
.modern-hero > small { display: flex; align-items: center; gap: 6px; color: #9cc8ff; font-size: 7px; font-weight: 700; letter-spacing: .14em; }.modern-hero > small i { width: 5px; height: 5px; border-radius: 50%; background: #55e8b5; box-shadow: 0 0 10px #55e8b5; }
.modern-hero h3 { margin: 10px 0 7px; color: #f9fbff; font: 700 clamp(23px,3vw,41px)/.96 "Manrope"; letter-spacing: -.055em; text-shadow: 0 12px 30px rgba(0,0,0,.28); }
.modern-hero h3 b { color: #f0523f; background: linear-gradient(100deg,#ff7838,#f43f5e 55%,#8c43df); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.modern-hero > p { max-width: 50%; margin-bottom: 14px; color: #9aa7c5; font-size: 8px; line-height: 1.5; }
.modern-hero > button { padding: 9px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; color: #fff; background: linear-gradient(110deg,#258eff,#7655ed); box-shadow: 0 10px 27px rgba(58,94,242,.3); font-size: 7px; }.modern-hero > button i { margin-left: 6px; font-style: normal; }
.modern-aurora { position: absolute; z-index: 1; width: 190px; height: 190px; border-radius: 50%; filter: blur(48px); opacity: .28; animation: modernAurora 5.5s ease-in-out infinite; }.modern-aurora--one { right: 2%; top: -18%; background: #7a52ff; }.modern-aurora--two { left: 30%; bottom: -45%; background: #24bfff; animation-delay: -2.7s; }
.modern-orb { position: absolute; z-index: 3; right: 8%; top: 9%; width: 112px; height: 112px; display: grid; place-items: center; border: 1px solid rgba(176,195,255,.2); border-radius: 50%; background: rgba(255,255,255,.025); box-shadow: inset 0 0 30px rgba(86,108,255,.08); backdrop-filter: blur(8px); }
.modern-orb::before, .modern-orb::after { content: ""; position: absolute; border: 1px solid rgba(178,196,255,.19); border-radius: 50%; }.modern-orb::before { inset: 15px; }.modern-orb::after { inset: 32px; background: linear-gradient(145deg,rgba(57,187,255,.9),rgba(122,76,239,.95)); box-shadow: 0 14px 32px rgba(65,82,255,.4),inset 0 1px 1px rgba(255,255,255,.55); }
.modern-orb span { position: relative; z-index: 2; color: #fff; font-size: 20px; }
.modern-orb i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #5bd6ff; box-shadow: 0 0 13px #39b9ff; }.modern-orb i:first-child { left: 10px; top: 24px; }.modern-orb i:nth-child(2) { right: 0; bottom: 30px; background: #9f72ff; }
.modern-glass-card { position: absolute; z-index: 3; right: 6%; bottom: 7%; width: 38%; padding: 13px; border: 1px solid rgba(255,255,255,.17); border-radius: 14px; background: linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.045)); box-shadow: 0 18px 42px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.15); backdrop-filter: blur(16px); overflow: hidden; }
.modern-glass-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg,transparent 28%,rgba(255,255,255,.09),transparent 64%); transform: translateX(-120%); animation: glassCardShine 3.8s ease-in-out infinite; }
.modern-glass-card > div:first-child { display: flex; align-items: center; justify-content: space-between; color: #93a3c7; font-size: 5px; }.modern-glass-card > div:first-child span { display: flex; align-items: center; gap: 4px; }.modern-glass-card > div:first-child i { width: 4px; height: 4px; border-radius: 50%; background: #51e0ad; box-shadow: 0 0 8px #51e0ad; }.modern-glass-card > div:first-child em { font-style: normal; }
.modern-glass-card > strong { display: block; margin-top: 7px; font: 700 18px "Manrope"; }.modern-glass-card > strong small { margin-left: 4px; color: #64e2b2; font-size: 7px; }.modern-glass-card > p { margin: 1px 0 0; color: #8d9abb; font-size: 5px; }
.glass-chart { height: 39px; display: flex; align-items: flex-end; gap: 4px; margin-top: 8px; }.glass-chart i { flex: 1; height: 30%; border-radius: 3px 3px 1px 1px; background: linear-gradient(#50caff,#755cff); box-shadow: 0 0 8px rgba(70,143,255,.22); transform-origin: bottom; }.glass-chart i:nth-child(2) { height: 45%; }.glass-chart i:nth-child(3) { height: 39%; }.glass-chart i:nth-child(4) { height: 62%; }.glass-chart i:nth-child(5) { height: 55%; }.glass-chart i:nth-child(6) { height: 78%; }.glass-chart i:nth-child(7) { height: 95%; }
.modern-mini-card { position: absolute; z-index: 5; display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; color: #fff; background: rgba(19,27,61,.64); box-shadow: 0 13px 35px rgba(0,0,0,.24); backdrop-filter: blur(14px); animation: modernFloat 3.6s ease-in-out infinite; }.modern-mini-card--one { left: 38%; bottom: 11%; }.modern-mini-card--two { right: 3%; top: 40%; display: block; min-width: 78px; animation-delay: -1.8s; }
.modern-mini-card--one > i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #c8d8ff; background: linear-gradient(145deg,#277fdc,#7a55e9); font-style: normal; }.modern-mini-card--one > span { display: flex; flex-direction: column; }.modern-mini-card--one strong { font-size: 7px; }.modern-mini-card--one small { color: #8f9abb; font-size: 5px; }.modern-mini-card--one > b { margin-left: 5px; color: #58e2af; font-size: 5px; }
.modern-mini-card--two > span { color: #8998bb; font-size: 5px; }.modern-mini-card--two > strong { display: block; margin-top: 3px; font: 700 12px "Manrope"; }.modern-mini-card--two > strong i { color: #5ce0b1; font-style: normal; }
.modern-stats { height: 60px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(90deg,rgba(11,17,40,.98),rgba(19,17,48,.98)); }
.modern-stats span { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; border-right: 1px solid rgba(255,255,255,.08); }.modern-stats span:last-child { border: 0; }.modern-stats b { color: #f5f8ff; font: 700 15px "Manrope"; }.modern-stats small { color: #8794b2; font-size: 6px; }
.modern-site-nav { position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 47px; display: flex; align-items: center; gap: 18px; padding: 0 16px; border-bottom: 1px solid rgba(41,64,106,.1); color: #34415b; background: rgba(250,247,239,.68); box-shadow: 0 8px 24px rgba(32,53,93,.06); backdrop-filter: blur(14px) saturate(1.12); }
.modern-site-brand { flex: 0 0 116px; width: 116px; height: 28px; margin-right: auto; }
.modern-site-brand img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.modern-site-links { display: flex; align-items: center; gap: 14px; font-size: 6px; font-weight: 700; }
.modern-site-nav > button { padding: 8px 10px; border: 0; border-radius: 7px; color: #fff; background: linear-gradient(110deg,#ff6b35,#f43f5e 60%,#7c3aed 125%); box-shadow: 0 8px 20px rgba(240,82,63,.22); font-size: 6px; font-weight: 700; }
.modern-site-nav > button i { margin-left: 5px; font-style: normal; }
.modern-video-panel { position: absolute; z-index: 5; left: 4.5%; top: 25%; width: 64%; padding: 0; color: #101b3c; background: transparent; }
.modern-video-panel::after { display: none; }
.modern-video-panel > * { position: relative; z-index: 1; }
.modern-video-panel > small { display: flex; align-items: center; width: fit-content; gap: 6px; padding: 6px 8px; border: 1px solid rgba(41,86,142,.14); color: #3c5572; background: rgba(255,255,255,.45); font-size: 6px; font-weight: 800; letter-spacing: .11em; }
.modern-video-panel > small i { width: 5px; height: 5px; border-radius: 50%; background: #25b987; box-shadow: 0 0 0 4px rgba(37,185,135,.1); }
.modern-video-panel h3 { margin: 13px 0 9px; color: #101824; font: 750 clamp(24px,3.15vw,43px)/.98 "Manrope"; letter-spacing: -.055em; text-shadow: 0 1px rgba(255,255,255,.35); }
.modern-video-panel h3 b { color: #e9533f; background: linear-gradient(100deg,#e86b36,#f43f5e 62%,#7c3aed); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.modern-video-panel > p { max-width: 82%; margin: 0 0 15px; color: #46566b; font-size: 8px; line-height: 1.55; }
.modern-video-panel > button { padding: 9px 13px; border: 1px solid rgba(255,255,255,.7); border-radius: 8px; color: #fff; background: linear-gradient(110deg,#258eff,#7655ed); box-shadow: 0 10px 27px rgba(58,94,242,.26); font-size: 7px; }
.modern-video-panel > button i { margin-left: 6px; font-style: normal; }
.modern-video-actions { display: flex; gap: 7px; }
.modern-video-actions button { padding: 9px 12px; border: 1px solid transparent; border-radius: 2px; color: #fff; background: linear-gradient(110deg,#ff6b35,#f43f5e 64%,#7c3aed 130%); box-shadow: 0 10px 24px rgba(240,82,63,.2); font-size: 7px; font-weight: 700; }
.modern-video-actions button:last-child { border-color: rgba(42,67,108,.14); color: #25344a; background: rgba(255,255,255,.66); box-shadow: none; }
.modern-video-actions i { margin-left: 6px; font-style: normal; }
.modern-video-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.modern-video-pills span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border: 1px solid rgba(52,83,143,.12); border-radius: 999px; color: #455575; background: rgba(255,255,255,.52); font-size: 5px; font-weight: 700; }
.modern-video-pills span::before { content: "✓"; color: #159669; font-size: 5px; }
.modern-video-note { position: absolute; z-index: 5; right: 4%; bottom: 6%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.82); border-radius: 12px; color: #172445; background: rgba(255,255,255,.74); box-shadow: 0 18px 40px rgba(25,52,105,.16); backdrop-filter: blur(12px); animation: modernFloat 3.6s ease-in-out infinite; }
.modern-video-note > i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: #fff; background: linear-gradient(145deg,#ff6b35,#f43f5e 55%,#7c3aed); font-style: normal; }
.modern-video-note > span { display: flex; flex-direction: column; gap: 2px; }
.modern-video-note strong { font-size: 7px; }
.modern-video-note small { color: #64728e; font-size: 5px; }
.promo-ui-fragments i { position: absolute; z-index: 10; width: 60px; height: 40px; border: 1px solid rgba(111,153,255,.3); border-radius: 9px; background: rgba(24,46,91,.7); box-shadow: 0 15px 30px rgba(0,0,0,.25); }.promo-ui-fragments i:nth-child(1) { left: 15%; top: 22%; }.promo-ui-fragments i:nth-child(2) { left: 27%; top: 63%; width: 88px; }.promo-ui-fragments i:nth-child(3) { right: 23%; top: 15%; }.promo-ui-fragments i:nth-child(4) { right: 8%; bottom: 18%; width: 95px; }.promo-ui-fragments i:nth-child(5) { left: 45%; bottom: 7%; }

.promo-site-stack { position: absolute; inset: 0; perspective: 1200px; }
.promo-site-card { position: absolute; width: 43%; height: 62%; padding: 44px 25px 22px; border: 1px solid rgba(176,196,232,.22); border-radius: 18px; color: #fff; box-shadow: 0 28px 65px rgba(3,15,38,.28); overflow: hidden; transform-style: preserve-3d; }
.promo-site-card > div { position: absolute; left: 0; right: 0; top: 0; height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 11px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.07); backdrop-filter: blur(9px); }.promo-site-card > div i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.48); }.promo-site-card > div i:first-child { background: #ff8d83; }.promo-site-card > div i:nth-child(2) { background: #ffd06a; }.promo-site-card > div i:last-child { background: #64dba2; }
.promo-site-card > span { font-size: 7px; font-weight: 800; letter-spacing: .14em; opacity: .7; }.promo-site-card > strong { display: block; max-width: 67%; margin-top: 12px; font: 700 clamp(19px,2.55vw,34px)/1 "Manrope"; letter-spacing: -.045em; }.promo-site-card > p { max-width: 58%; margin: 9px 0 0; font-size: 7px; line-height: 1.45; opacity: .68; }.promo-site-card button, .promo-site-card em { display: inline-flex; margin-top: 14px; padding: 8px 11px; border: 0; border-radius: 7px; background: #fff; color: #16213c; box-shadow: 0 9px 24px rgba(4,18,45,.12); font-size: 7px; font-style: normal; font-weight: 700; }
.promo-site-card--saas { left: 30%; top: 29%; height: 57%; background: radial-gradient(circle at 82% 72%,rgba(84,141,238,.38),transparent 26%),linear-gradient(145deg,#142845,#20395f); }.promo-site-card--saas > b { position: absolute; right: 7%; bottom: 8%; width: 32%; height: 39%; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: linear-gradient(145deg,rgba(186,213,255,.2),rgba(255,255,255,.04)); box-shadow: inset 0 1px rgba(255,255,255,.12); }.promo-site-card--saas > b::before { content: ""; position: absolute; left: 13%; right: 13%; bottom: 17%; height: 48%; background: linear-gradient(90deg,rgba(94,151,255,.35) 15%,transparent 15% 20%,rgba(94,151,255,.55) 20% 38%,transparent 38% 43%,rgba(133,102,240,.68) 43% 66%,transparent 66% 71%,#62a7ff 71%); clip-path: polygon(0 72%,15% 62%,33% 69%,51% 35%,68% 45%,84% 16%,100% 0,100% 100%,0 100%); }
.promo-site-card--shop { left: 7%; top: 32%; height: 54%; color: #172745; background: radial-gradient(circle at 78% 30%,rgba(111,132,226,.17),transparent 28%),linear-gradient(135deg,#f5f8ff,#e7edfb); }.promo-site-card--shop > div { border-bottom-color: rgba(40,63,107,.07); background: rgba(255,255,255,.38); }.promo-site-card--shop > div i { opacity: .7; }.promo-site-card--shop > b { position: absolute; right: 8%; top: 25%; width: 30%; aspect-ratio: .8; border-radius: 48% 48% 16% 16%; background: linear-gradient(145deg,#b8c8ed,#8299d7); box-shadow: -16px 16px 0 rgba(255,255,255,.55),0 18px 35px rgba(70,91,142,.16); }.promo-site-card--shop em { color: #fff; background: #294e97; }
.promo-site-card--food { right: 6%; top: 32%; height: 54%; color: #2d2630; background: radial-gradient(circle at 77% 51%,#ef8b6b 0 12%,transparent 13%),radial-gradient(circle at 77% 51%,#f7c9b7 0 23%,transparent 24%),linear-gradient(145deg,#fff8f4,#f6e5e4); }.promo-site-card--food > div { border-bottom-color: rgba(76,45,47,.07); background: rgba(255,255,255,.34); }.promo-site-card--food > b { position: absolute; right: 9%; top: 32%; display: grid; place-items: center; width: 86px; height: 86px; border: 1px solid rgba(98,64,73,.12); border-radius: 50%; color: #a84938; font: 800 11px "Manrope"; letter-spacing: .1em; }.promo-site-card--food em { color: #fff; background: #c85d4b; }

.promo-phone-stack { position: absolute; inset: 0; perspective: 1200px; }
.promo-phone { position: absolute; top: 10%; width: 23%; height: 79%; padding: 7px; border: 2px solid #30405c; border-radius: 31px; background: #0a111d; box-shadow: 0 35px 70px rgba(0,0,0,.45); overflow: hidden; transform-style: preserve-3d; }
.promo-phone--main { left: 26%; z-index: 3; }.promo-phone--left { left: 8%; top: 17%; z-index: 1; transform: rotateY(16deg) scale(.88); }.promo-phone--right { left: 45%; top: 17%; z-index: 1; transform: rotateY(-16deg) scale(.88); }
.phone-speaker { position: absolute; z-index: 5; left: 50%; top: 10px; width: 25%; height: 5px; border-radius: 5px; background: #101927; transform: translateX(-50%); }
.phone-screen { position: relative; width: 100%; height: 100%; padding: 35px 15px 15px; border-radius: 23px; color: #15223b; background: #f7f9ff; overflow: hidden; }
.phone-screen > small { color: #6d79a0; font-size: 6px; font-weight: 700; letter-spacing: .13em; }.phone-screen > strong { display: block; margin: 9px 0 5px; font: 700 clamp(14px,1.6vw,22px)/1.05 "Manrope"; }.phone-screen > span { color: #8791a7; font-size: 7px; }.phone-screen > b { display: block; margin-top: 19px; color: #176bff; font: 700 27px "Manrope"; }.phone-screen > button { position: absolute; left: 15px; right: 15px; bottom: 15px; padding: 9px; border: 0; border-radius: 8px; background: #176bff; color: #fff; font-size: 7px; }
.phone-screen--analytics { color: #fff; background: linear-gradient(160deg,#162b66,#07111f); }.phone-screen--analytics > span { color: #8fa2ca; }.phone-screen--analytics > strong { font-size: clamp(18px,2vw,29px); }.phone-chart { height: 95px; display: flex; align-items: flex-end; gap: 6px; margin-top: 30px; }.phone-chart i { flex: 1; height: 35%; border-radius: 4px 4px 0 0; background: linear-gradient(#4f89ff,#6f59f0); }.phone-chart i:nth-child(2) { height: 49%; }.phone-chart i:nth-child(3) { height: 43%; }.phone-chart i:nth-child(4) { height: 71%; }.phone-chart i:nth-child(5) { height: 91%; }
.phone-notification { position: absolute; left: 10px; right: 10px; bottom: 15px; display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.09); backdrop-filter: blur(7px); }.phone-notification > b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #25bf82; font-size: 8px; }.phone-notification > span { display: flex; flex-direction: column; color: #fff; font-size: 7px; }.phone-notification small { margin-top: 2px; color: #8fa2ca; font-size: 5px; }
.phone-screen--order { text-align: center; background: #fff8ec; }.food-disc { width: 75px; height: 75px; display: grid; place-items: center; margin: 27px auto 17px; border-radius: 50%; color: #fff; background: radial-gradient(circle,#ff8d42 0 15%,#293f2f 16% 42%,#edd49c 43% 65%,#fff 66%); box-shadow: 0 14px 25px rgba(58,43,22,.14); font-weight: 800; }

.promo-automation-copy { position: absolute; z-index: 8; left: 50%; top: 5%; width: 90%; text-align: center; transform: translateX(-50%); }.promo-automation-copy h2 { margin: 7px 0 2px; font: 800 clamp(25px,4vw,53px)/1 "Manrope"; letter-spacing: -.055em; }.promo-automation-copy p { margin: 0; color: #9aa8ba; font-size: clamp(8px,1vw,12px); }
.promo-chat-phone { position: absolute; z-index: 5; left: 5%; top: 27%; width: 24%; height: 60%; padding: 10px; border: 2px solid #2b3a51; border-radius: 25px; background: #0c1524; box-shadow: 0 30px 60px rgba(0,0,0,.38); }
.chat-head { height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: 14px 14px 4px 4px; background: #142238; }.chat-head > i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #24b881; font-style: normal; font-size: 8px; font-weight: 700; }.chat-head > span { display: flex; flex-direction: column; }.chat-head strong { font-size: 8px; }.chat-head small { color: #55d6a8; font-size: 6px; }
.chat-body { position: relative; height: calc(100% - 44px); padding: 12px 8px; border-radius: 4px 4px 14px 14px; background: linear-gradient(155deg,#eef4ec,#e5eee9); overflow: hidden; }.chat-message { max-width: 86%; margin: 0 0 7px; padding: 7px 9px; border-radius: 9px 9px 9px 2px; color: #303b46; background: #fff; font-size: 7.2px; line-height: 1.35; box-shadow: 0 5px 12px rgba(22,42,35,.08); }.chat-message--ai { margin-left: auto; border-radius: 9px 9px 2px 9px; background: #c9f4dd; }.chat-typing { display: flex; width: fit-content; gap: 3px; padding: 7px 9px; border-radius: 9px; background: #fff; }.chat-typing i { width: 4px; height: 4px; border-radius: 50%; background: #92a099; animation: promoTyping 1s ease-in-out infinite; }.chat-typing i:nth-child(2) { animation-delay: .15s; }.chat-typing i:nth-child(3) { animation-delay: .3s; }
.promo-ai-core { position: absolute; z-index: 6; left: 47%; top: 57%; width: 105px; height: 105px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; border: 1px solid rgba(125,159,255,.35); border-radius: 29px; background: linear-gradient(145deg,rgba(28,66,157,.95),rgba(77,48,166,.95)); box-shadow: 0 0 0 12px rgba(58,104,255,.06),0 0 55px rgba(41,102,255,.36); transform: translate(-50%,-50%); }.promo-ai-core::before { content: ""; position: absolute; inset: -14px; border: 1px dashed rgba(111,151,255,.28); border-radius: 39px; animation: spin 13s linear infinite; }.promo-ai-core > i { font-size: 23px; font-style: normal; }.promo-ai-core strong { font: 700 11px "Manrope"; }.promo-ai-core small { color: #9db8ef; font-size: 6px; }
.promo-workflow-lines { position: absolute; z-index: 2; inset: 16% 3% 8%; width: 94%; height: 76%; overflow: visible; }.promo-workflow-lines path { fill: none; stroke: #4385ff; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 5px #176bff); stroke-dasharray: 900; stroke-dashoffset: 900; }
.workflow-node { position: absolute; z-index: 5; right: 5%; width: 19%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgba(121,156,232,.22); border-radius: 10px; background: rgba(13,29,55,.88); box-shadow: 0 13px 28px rgba(0,0,0,.23); backdrop-filter: blur(8px); }.workflow-node > i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #8eb4ff; background: rgba(48,100,216,.2); font-style: normal; font-size: 8px; font-weight: 700; }.workflow-node > span { display: flex; flex-direction: column; gap: 2px; }.workflow-node strong { font-size: 8px; }.workflow-node small { color: #8594ad; font-size: 6px; }.workflow-node > b { color: #3bd69d; font-size: 8px; }.workflow-node--crm { top: 22%; }.workflow-node--booking { top: 39%; right: 3%; }.workflow-node--orders { top: 57%; }.workflow-node--notify { top: 74%; right: 8%; }
.workflow-particle { position: absolute; z-index: 4; left: 49%; top: 57%; width: 7px; height: 7px; border-radius: 50%; background: #92c1ff; box-shadow: 0 0 17px #2d7bff; }

.promo-result-dashboard { position: absolute; left: 50%; top: 48%; width: 66%; height: 74%; padding: 27px; border: 1px solid rgba(255,255,255,.15); border-radius: 19px; background: linear-gradient(145deg,rgba(20,37,68,.92),rgba(10,22,42,.95)); box-shadow: 0 35px 70px rgba(0,0,0,.38); transform: translate(-50%,-50%); overflow: hidden; }.promo-result-dashboard > span { color: #74a3ff; font-size: 7px; font-weight: 700; letter-spacing: .15em; }.promo-result-dashboard > strong { display: block; margin-top: 8px; font: 700 clamp(19px,2.5vw,32px) "Manrope"; }.result-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; }.result-metrics article { position: relative; min-height: 69px; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.045); }.result-metrics small { display: block; color: #8190aa; font-size: 6px; }.result-metrics b { display: block; margin-top: 6px; font: 700 17px "Manrope"; }.result-metrics i { position: absolute; right: 10px; top: 12px; color: #45d4a0; font-style: normal; }.promo-result-dashboard svg { position: absolute; left: 27px; right: 27px; bottom: 20px; width: calc(100% - 54px); height: 34%; }.result-area { fill: rgba(42,108,255,.12); }.result-line { fill: none; stroke: #4d91ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; filter: drop-shadow(0 0 8px #176bff); }
.promo-result-words { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; pointer-events: none; }.promo-result-words strong { position: absolute; width: 90%; font: 800 clamp(34px,6vw,79px)/.95 "Manrope"; letter-spacing: -.06em; text-align: center; text-shadow: 0 10px 40px rgba(0,0,0,.55),0 0 28px rgba(23,107,255,.25); }

.promo-brand-lockup { position: absolute; z-index: 8; left: 50%; top: 48%; display: flex; align-items: center; flex-direction: column; width: 88%; text-align: center; transform: translate(-50%,-50%); }.promo-brand-lockup p { margin: 5px 0 17px; color: #9aa8ba; font-size: clamp(7px,.9vw,11px); letter-spacing: .08em; }.promo-brand-lockup > strong { font: 800 clamp(25px,4vw,52px)/.96 "Manrope"; letter-spacing: -.055em; }.promo-brand-lockup > strong em { color: #4a86ff; font-style: normal; }.promo-brand-lockup > a { display: inline-flex; align-items: center; gap: 13px; margin-top: 17px; padding: 11px 17px; border-radius: 8px; background: #176bff; box-shadow: 0 15px 34px rgba(23,107,255,.28); font-size: 9px; font-weight: 700; pointer-events: auto; }.promo-brand-lockup > a i { font-style: normal; }.promo-brand-lockup > small { margin-top: 9px; color: #70819d; font-size: 7px; letter-spacing: .08em; }
.promo-brand-logo { width: 310px; height: 78px; margin-bottom: 9px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.48); border-radius: 13px; background: rgba(255,255,255,.97); box-shadow: 0 20px 55px rgba(0,0,0,.28), 0 0 38px rgba(255,116,24,.14); }
.promo-brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.promo-orbit-item { position: absolute; z-index: 3; display: grid; place-items: center; width: 64px; height: 45px; border: 1px solid rgba(117,152,225,.22); border-radius: 11px; color: #8caaff; background: rgba(20,39,74,.72); box-shadow: 0 16px 35px rgba(0,0,0,.25); font: 700 8px "Manrope"; }.promo-orbit-item--browser { left: 17%; top: 25%; width: 86px; }.promo-orbit-item--phone { right: 18%; top: 21%; width: 38px; height: 67px; border-radius: 13px; }.promo-orbit-item--ai { left: 21%; bottom: 20%; width: 53px; height: 53px; border-radius: 17px; }.promo-orbit-item--flow { right: 20%; bottom: 24%; border-radius: 50%; width: 48px; height: 48px; }

.promo-controls { position: absolute; z-index: 100; left: 16px; right: 16px; bottom: 13px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }.promo-control { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; color: #aab8ce; background: rgba(6,16,31,.6); font-size: 7px; cursor: pointer; backdrop-filter: blur(8px); pointer-events: auto; transition: color .25s ease, border-color .25s ease, background .25s ease; }.promo-control:hover { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(26,50,91,.75); }.promo-time { color: #74849d; font: 600 7px "Manrope"; letter-spacing: .08em; }.promo-progress { position: absolute; z-index: 101; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); }.promo-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#176bff,#7558f3,#42c5ff); box-shadow: 0 0 12px rgba(23,107,255,.6); transform: scaleX(0); transform-origin: left; }
.promo-stage.is-complete .promo-replay { color: #fff; border-color: rgba(89,145,255,.6); background: rgba(23,107,255,.3); animation: replayPulse 1.8s ease-in-out infinite; }
.promo-stage.is-fallback .promo-scene--brand { visibility: visible; opacity: 1; }.promo-stage.is-fallback .promo-orbit-item { opacity: .6; }

@keyframes promoAmbient { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(8%,6%,0) scale(1.1); } }
@keyframes promoParticle { 0%,100% { transform: translateY(0); opacity: .18; } 50% { transform: translateY(-22px); opacity: .65; } }
@keyframes promoBlink { 0%,48% { opacity: 1; } 49%,100% { opacity: 0; } }
@keyframes promoTyping { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes replayPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(23,107,255,.25); } 50% { box-shadow: 0 0 0 6px rgba(23,107,255,0); } }
@keyframes glassSweep { 0%,18% { transform: translateX(-28%) rotate(24deg); opacity: 0; } 45% { opacity: 1; } 72%,100% { transform: translateX(245%) rotate(24deg); opacity: 0; } }
@keyframes glassCardShine { 0%,30% { transform: translateX(-120%); } 70%,100% { transform: translateX(120%); } }
@keyframes modernAurora { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(15px,-9px,0) scale(1.14); } }
@keyframes modernFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }


.js:not(.is-ready) .hero .eyebrow,
.js:not(.is-ready) .hero h1,
.js:not(.is-ready) .hero__lead,
.js:not(.is-ready) .hero__actions,
.js:not(.is-ready) .hero__proof { opacity: 0; transform: translateY(34px); filter: blur(10px); }
.js .hero .eyebrow,
.js .hero h1,
.js .hero__lead,
.js .hero__actions,
.js .hero__proof { transition: opacity .95s var(--ease-out), transform .95s var(--ease-out), filter .95s var(--ease-out); }
.js .hero h1 { transition-delay: 80ms; }
.js .hero__lead { transition-delay: 170ms; }
.js .hero__actions { transition-delay: 250ms; }
.js .hero__proof { transition-delay: 330ms; }
.js:not(.is-ready) .hero-visual { opacity: 0; transform: perspective(1400px) translate3d(0, 70px, 0) rotateX(7deg) scale(.95); }
.js .hero-visual { transition: opacity 1.15s var(--ease-out) 360ms, transform 1.15s var(--ease-out) 360ms, box-shadow .45s ease; }
.js.is-ready .hero-visual.motion-live { transition: transform .16s linear, box-shadow .45s ease; }
.js:not(.is-ready) .chart span { transform: scaleY(0); }
.js.is-ready .chart span:nth-child(1) { transition-delay: 520ms; }
.js.is-ready .chart span:nth-child(2) { transition-delay: 565ms; }
.js.is-ready .chart span:nth-child(3) { transition-delay: 610ms; }
.js.is-ready .chart span:nth-child(4) { transition-delay: 655ms; }
.js.is-ready .chart span:nth-child(5) { transition-delay: 700ms; }
.js.is-ready .chart span:nth-child(6) { transition-delay: 745ms; }
.js.is-ready .chart span:nth-child(7) { transition-delay: 790ms; }
.js.is-ready .chart span:nth-child(8) { transition-delay: 835ms; }
.js.is-ready .chart span:nth-child(9) { transition-delay: 880ms; }
.js.is-ready .chart span:nth-child(10) { transition-delay: 925ms; }

@keyframes heroOrbit { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.035); } }
@keyframes headlineShimmer { 0%, 25%, 100% { background-position: 100% 50%; } 55%, 70% { background-position: 0 50%; } }
@keyframes ambientGridDrift { from { transform: translate3d(-18px,-12px,0); } to { transform: translate3d(24px,20px,0); } }
@keyframes ambientFloatOne { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 35% { transform: translate3d(12vw,5vh,0) scale(1.08); } 70% { transform: translate3d(5vw,14vh,0) scale(.94); } }
@keyframes ambientFloatTwo { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 38% { transform: translate3d(-11vw,10vh,0) scale(.95); } 72% { transform: translate3d(-4vw,-3vh,0) scale(1.09); } }
@keyframes ambientFloatThree { 0%, 100% { transform: translate3d(0,0,0) scale(.92); } 45% { transform: translate3d(-8vw,8vh,0) scale(1.08); } 76% { transform: translate3d(10vw,-4vh,0) scale(1); } }