:root {
  --ink: #0b1026;
  --ink-soft: #151b3b;
  --violet: #675df9;
  --violet-deep: #4d41df;
  --violet-soft: #eeeefe;
  --mint: #3ae275;
  --mint-soft: #dffce9;
  --yellow: #ffc94d;
  --coral: #ff7e72;
  --paper: #f7f7fc;
  --text: #15162b;
  --muted: #66667b;
  --line: rgba(21, 22, 43, .1);
  --shadow: 0 24px 70px rgba(24, 23, 87, .14);
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", var(--font-body);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--text); font-family: var(--font-body); line-height: 1.5; overflow-x: hidden; }
body::selection { color: var(--ink); background: var(--mint); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
.site-shell { overflow: hidden; }
.skip-link { position: fixed; z-index: 99; top: 12px; left: 16px; padding: 10px 14px; border-radius: 12px; background: var(--mint); color: var(--ink); transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; z-index: 20; top: 0; left: 50%; display: flex; width: min(1180px, calc(100% - 48px)); height: 86px; align-items: center; justify-content: space-between; transform: translateX(-50%); color: #fff; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.06em; }
.brand-mark { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 10px 12px 10px 5px; background: linear-gradient(145deg, var(--mint), #b7ffcd); color: var(--ink); box-shadow: 3px 4px 0 rgba(0,0,0,.12); transform: rotate(-5deg); }
.brand-mark span { transform: rotate(5deg); }
.brand-dot { color: var(--mint); }
.desktop-nav { display: flex; gap: 34px; margin-left: 64px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.66); }
.desktop-nav a, .text-link { transition: color .2s ease; }
.desktop-nav a:hover, .text-link:hover { color: #fff; }
.header-actions { display: flex; align-items: center; gap: 22px; font-size: 13px; font-weight: 600; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 13px; padding: 0 22px; border: 1px solid transparent; border-radius: 15px; font-size: 14px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-3px); }
.button:focus-visible, .demo-tab:focus-visible, .menu-toggle:focus-visible, .inline-link:focus-visible, a:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
.button span { font-size: 18px; line-height: 0; }
.button-small { min-height: 40px; padding: 0 16px; border-radius: 12px; font-size: 12px; }
.button-light { background: #fff; color: var(--violet-deep); box-shadow: 0 10px 24px rgba(0,0,0,.1); }
.button-light:hover { box-shadow: 0 15px 30px rgba(0,0,0,.18); }
.button-primary { background: var(--violet); color: #fff; box-shadow: 0 16px 32px rgba(103,93,249,.25); }
.button-primary:hover { background: #786fff; box-shadow: 0 20px 40px rgba(103,93,249,.34); }
.button-ghost { border-color: rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.06); }
.button-ghost:hover { background: rgba(255,255,255,.14); }
.button-dark { background: var(--ink); color: #fff; box-shadow: 0 16px 32px rgba(11,16,38,.2); }
.button-dark:hover { background: #202855; }
.play-icon { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; font-size: 8px !important; padding-left: 2px; }
.menu-toggle { display: none; width: 40px; height: 40px; padding: 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.08); cursor: pointer; }
.menu-toggle span { display: block; width: 20px; height: 2px; margin: 5px auto; background: #fff; border-radius: 2px; }
.mobile-menu { position: absolute; z-index: 19; top: 75px; right: 24px; display: grid; width: min(300px, calc(100% - 48px)); gap: 4px; padding: 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: rgba(14,19,51,.96); color: #fff; box-shadow: var(--shadow); }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: 13px 14px; border-radius: 11px; font-weight: 600; }
.mobile-menu a:hover { background: rgba(255,255,255,.1); }

.hero { position: relative; min-height: 790px; padding: 155px max(24px, calc((100vw - 1180px) / 2)) 90px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, .96fr); align-items: center; gap: 20px; background: var(--ink); color: #fff; isolation: isolate; }
.hero::before { position: absolute; z-index: -3; inset: 0; background: radial-gradient(circle at 80% 15%, rgba(103,93,249,.5), transparent 31%), radial-gradient(circle at 35% 80%, rgba(58,226,117,.12), transparent 30%), linear-gradient(135deg, #11183b 0%, #0b1026 58%, #181239 100%); content: ""; }
.hero::after { position: absolute; z-index: -2; top: -20%; right: -10%; width: 740px; height: 740px; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.02), 0 0 0 160px rgba(255,255,255,.018); content: ""; }
.hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-glow-left { bottom: -190px; left: 10%; width: 450px; height: 450px; background: rgba(58,226,117,.11); filter: blur(80px); }
.hero-glow-right { top: 210px; right: 5%; width: 300px; height: 300px; background: rgba(255,126,114,.12); filter: blur(100px); }
.hero-copy { position: relative; z-index: 3; max-width: 590px; padding-bottom: 30px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; color: var(--mint); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow-dark { color: var(--violet-deep); }
.eyebrow-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(58,226,117,.14); }
.hero h1 { max-width: 610px; margin: 0; font-family: var(--font-display); font-size: clamp(48px, 5.25vw, 76px); font-weight: 600; letter-spacing: -.075em; line-height: .99; }
h1 em, h2 em, h3 em { color: var(--mint); font-style: normal; }
.hero-lede { max-width: 465px; margin: 27px 0 0; color: rgba(255,255,255,.67); font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 42px; color: rgba(255,255,255,.5); font-size: 11px; font-weight: 600; }
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.proof-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.proof-violet { background: var(--violet); }.proof-mint { background: var(--mint); }.proof-yellow { background: var(--yellow); }.proof-coral { background: var(--coral); }

.hero-stage { position: relative; height: 575px; transform-style: preserve-3d; transition: transform .22s ease-out; }
.stage-grid { position: absolute; top: 50%; left: 50%; width: 600px; height: 480px; opacity: .32; transform: translate(-50%, -45%) perspective(600px) rotateX(62deg); background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, transparent, #000 35%, transparent); }
.stage-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(164,171,255,.28); border-radius: 50%; transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-14deg); }
.orbit-one { width: 470px; height: 205px; }.orbit-two { width: 600px; height: 270px; opacity: .45; transform: translate(-50%, -50%) rotateX(62deg) rotateZ(34deg); }
.hero-device { position: absolute; z-index: 2; top: 96px; left: 50%; width: min(410px, 80%); min-height: 322px; padding: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 26px; background: rgba(243,245,255,.96); box-shadow: 22px 35px 60px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.5); color: var(--text); transform: translateX(-50%) rotate(5deg) rotateX(2deg); }
.device-topbar { display: flex; height: 28px; align-items: center; gap: 4px; padding: 0 10px; color: rgba(21,22,43,.35); font-size: 8px; }
.device-dot { width: 5px; height: 5px; border-radius: 50%; background: #ff7e72; }.device-dot:nth-child(2) { background: var(--yellow); }.device-dot:nth-child(3) { background: var(--mint); }.device-title { margin-left: 8px; font-weight: 600; }
.device-content { padding: 17px 20px 20px; border-radius: 20px; background: #fff; }
.device-welcome { display: grid; gap: 2px; font-size: 10px; color: var(--muted); }.device-welcome strong { font-family: var(--font-display); font-size: 18px; letter-spacing: -.04em; color: var(--text); }
.device-summary { display: flex; align-items: end; justify-content: space-between; margin-top: 17px; }.device-summary div { display: grid; gap: 2px; }.device-summary small { font-size: 9px; color: var(--muted); }.device-summary strong { font-family: var(--font-display); font-size: 25px; letter-spacing: -.06em; }.summary-trend { padding: 4px 7px; border-radius: 7px; background: var(--mint-soft); color: #168f42; font-size: 9px; font-weight: 700; }
.device-chart { display: flex; height: 45px; align-items: end; gap: 8px; margin: 13px 0 18px; padding: 0 4px; border-bottom: 1px solid var(--line); }.device-chart span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(to top, var(--violet), #b2adff); }
.device-section-heading { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }.device-section-heading span { color: var(--violet-deep); font-size: 9px; font-weight: 700; }
.device-appointment { display: grid; grid-template-columns: 37px 29px 1fr 17px; align-items: center; gap: 8px; margin-top: 11px; padding: 8px; border: 1px solid rgba(21,22,43,.05); border-radius: 10px; background: #fafaff; }.appointment-time { color: var(--violet-deep); font-size: 9px; font-weight: 700; }.appointment-avatar { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: #e9e8ff; color: var(--violet-deep); font-size: 8px; font-weight: 800; }.avatar-mint { background: var(--mint-soft); color: #168f42; }.device-appointment span:nth-child(3) { display: grid; gap: 1px; }.device-appointment strong { font-size: 9px; }.device-appointment small { color: var(--muted); font-size: 8px; }.device-appointment i { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: var(--mint); color: var(--ink); font-size: 9px; font-style: normal; }
.stage-orb { position: absolute; z-index: 3; top: 302px; left: 50%; width: 155px; height: 155px; transform: translateX(-50%); filter: drop-shadow(0 22px 22px rgba(0,0,0,.2)); animation: orb-float 5s ease-in-out infinite; }.stage-orb img { width: 100%; height: 100%; object-fit: contain; }
.floating-label { position: absolute; z-index: 5; display: flex; min-width: 164px; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; background: rgba(245,246,255,.93); color: var(--text); box-shadow: 0 15px 30px rgba(0,0,0,.18); font-size: 9px; transform: translateZ(30px); }.floating-label > span:nth-child(2) { display: grid; gap: 1px; }.floating-label strong { font-size: 10px; }.floating-label small { color: var(--muted); font-size: 8px; }.floating-label b { display: grid; width: 17px; height: 17px; margin-left: auto; place-items: center; border-radius: 50%; background: var(--mint); color: var(--ink); font-size: 10px; }.mini-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; font-size: 15px; font-weight: 700; }.icon-calendar { background: #e9e8ff; color: var(--violet-deep); }.icon-sales { background: #fff2bf; color: #aa7100; }.icon-share { background: var(--mint-soft); color: #168f42; }.label-calendar { top: 135px; left: 4%; animation: label-a 4.5s ease-in-out infinite; }.label-sales { top: 255px; right: 0; animation: label-b 5s ease-in-out infinite; }.label-share { right: 6%; bottom: 78px; animation: label-c 5.5s ease-in-out infinite; }.stage-spark { position: absolute; z-index: 4; color: var(--mint); font-size: 26px; animation: spark-pulse 2.5s ease-in-out infinite; }.spark-one { top: 65px; left: 28%; }.spark-two { right: 19%; top: 166px; color: var(--yellow); font-size: 19px; animation-delay: .7s; }.spark-three { bottom: 124px; left: 20%; color: var(--coral); font-size: 30px; animation-delay: 1.1s; }
.hero-scroll-hint { position: absolute; bottom: 28px; left: max(24px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.4); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }.scroll-line { display: inline-block; width: 34px; height: 1px; background: rgba(255,255,255,.45); }
@keyframes orb-float { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-3deg); } 50% { transform: translateX(-50%) translateY(-13px) rotate(4deg); } }
@keyframes label-a { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes label-b { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(10px) rotate(0); } }
@keyframes label-c { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(-1deg); } }
@keyframes spark-pulse { 0%,100% { opacity: .45; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.12) rotate(16deg); } }

.logo-strip { display: grid; grid-template-columns: minmax(170px, .48fr) 1fr; gap: 30px; align-items: center; max-width: 1180px; min-height: 105px; margin: 0 auto; padding: 24px 24px; color: #9696a7; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.logo-strip-items { display: flex; justify-content: space-between; gap: 20px; color: #aaaab8; font-family: var(--font-display); font-size: 12px; letter-spacing: -.02em; }.logo-strip-items b:nth-child(2) { color: #b6b4f8; }.logo-strip-items b:nth-child(3) { color: #9bd8ae; }
.section { max-width: 1180px; margin: 0 auto; padding: 125px 24px; }.section-heading { max-width: 640px; }.section-heading.centered { margin: 0 auto 56px; text-align: center; }.section-heading.centered .eyebrow { justify-content: center; }.section-heading h2, .feature-intro h2, .link-copy h2, .closing-cta h2 { margin: 0; font-family: var(--font-display); font-size: clamp(38px, 4.3vw, 58px); font-weight: 600; letter-spacing: -.075em; line-height: 1.04; }.section-heading h2 em, .feature-intro h2 em, .link-copy h2 em { color: var(--violet-deep); }.section-heading > p:last-child { max-width: 510px; margin: 22px auto 0; color: var(--muted); font-size: 16px; line-height: 1.7; }

.demo-shell { display: grid; grid-template-columns: 255px 1fr; min-height: 480px; overflow: hidden; border: 1px solid rgba(103,93,249,.16); border-radius: 30px; background: #fff; box-shadow: var(--shadow); }.demo-tabs { display: flex; flex-direction: column; gap: 8px; padding: 27px 18px; background: #f0efff; }.demo-tab { display: grid; grid-template-columns: 31px 1fr 20px; align-items: center; gap: 9px; min-height: 91px; padding: 14px 12px; border: 0; border-radius: 16px; background: transparent; text-align: left; cursor: pointer; transition: background .2s ease, transform .2s ease; }.demo-tab:hover { transform: translateX(3px); background: rgba(255,255,255,.6); }.demo-tab.is-active { background: #fff; box-shadow: 0 10px 22px rgba(103,93,249,.11); }.demo-tab i { opacity: 0; color: var(--violet-deep); font-style: normal; font-size: 18px; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; }.demo-tab.is-active i { opacity: 1; transform: translateX(0); }.tab-number { align-self: start; padding-top: 2px; color: rgba(77,65,223,.45); font-family: var(--font-display); font-size: 11px; font-weight: 700; }.demo-tab strong, .demo-tab small { display: block; }.demo-tab strong { color: var(--text); font-size: 14px; }.demo-tab small { margin-top: 4px; color: var(--muted); font-size: 10px; }.demo-panels { min-width: 0; }.demo-panel { display: grid; min-height: 480px; grid-template-columns: minmax(210px, .84fr) minmax(300px, 1.16fr); align-items: center; gap: 40px; padding: 58px 62px; background: radial-gradient(circle at 80% 20%, #eeeefe, transparent 37%), #fff; }.demo-panel[hidden] { display: none; }.panel-copy { max-width: 290px; }.panel-kicker { display: inline-block; margin-bottom: 20px; color: var(--violet-deep); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.panel-copy h3 { margin: 0; font-family: var(--font-display); font-size: 38px; line-height: 1.04; letter-spacing: -.07em; }.panel-copy h3 em { color: var(--violet-deep); }.panel-copy p { margin: 17px 0 24px; color: var(--muted); font-size: 14px; line-height: 1.65; }.inline-link { display: inline-flex; align-items: center; gap: 9px; color: var(--violet-deep); font-size: 12px; font-weight: 700; }.inline-link span { font-size: 17px; transition: transform .2s ease; }.inline-link:hover span { transform: translate(3px, -3px); }.dark-link { margin-top: 26px; }
.mock-calendar, .mock-sale, .mock-profile { position: relative; justify-self: center; width: min(100%, 375px); border: 1px solid rgba(21,22,43,.08); border-radius: 20px; background: #fff; box-shadow: 0 22px 45px rgba(55,52,130,.14); }.mock-calendar { min-height: 305px; padding: 25px 23px; }.mock-calendar-head, .sale-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }.mock-calendar-head strong { font-family: var(--font-display); font-size: 16px; }.mock-calendar-head span { padding: 6px 8px; border-radius: 8px; background: #f5f4ff; color: var(--muted); font-size: 9px; }.mock-calendar-head b { margin-left: 5px; color: var(--violet-deep); }.calendar-days, .calendar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 26px; text-align: center; }.calendar-days span { color: #a7a7b9; font-size: 8px; font-weight: 700; }.calendar-grid { margin-top: 9px; }.calendar-grid span { display: grid; height: 26px; place-items: center; border-radius: 7px; color: var(--muted); font-size: 10px; }.calendar-grid .calendar-today { background: var(--violet); color: #fff; box-shadow: 0 6px 12px rgba(103,93,249,.28); }.calendar-event { position: relative; display: flex; min-height: 44px; align-items: center; gap: 10px; margin-top: 14px; padding: 7px 11px; overflow: hidden; border-radius: 10px; font-size: 10px; }.calendar-event::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--violet); content: ""; }.calendar-event b { color: var(--violet-deep); font-size: 9px; }.calendar-event span { color: var(--text); font-weight: 600; }.event-violet { background: #f0efff; }.event-mint { background: var(--mint-soft); }.event-mint::before { background: var(--mint); }.event-mint b { color: #168f42; }.calendar-now { position: absolute; top: 180px; left: 22px; display: flex; width: calc(100% - 44px); align-items: center; gap: 8px; color: var(--coral); font-size: 8px; font-weight: 700; }.calendar-now::after { flex: 1; height: 1px; background: var(--coral); content: ""; }.calendar-now i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.mock-sale { padding: 24px; }.sale-header span { color: var(--muted); font-size: 10px; }.sale-header b { padding: 5px 8px; border-radius: 8px; background: var(--mint-soft); color: #168f42; font-size: 9px; }.sale-client { display: flex; align-items: center; gap: 10px; margin-top: 25px; }.sale-avatar { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; background: #fff2bf; color: #a77100; font-size: 10px; font-weight: 800; }.sale-client strong, .sale-client small { display: block; }.sale-client strong { font-size: 12px; }.sale-client small { margin-top: 2px; color: var(--muted); font-size: 9px; }.sale-lines { margin-top: 23px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.sale-lines div { display: flex; justify-content: space-between; margin: 10px 0; color: var(--muted); font-size: 11px; }.sale-lines b { color: var(--text); }.sale-lines .sale-discount { color: #168f42; }.sale-total { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: var(--muted); font-size: 12px; }.sale-total strong { color: var(--text); font-family: var(--font-display); font-size: 25px; letter-spacing: -.05em; }.sale-total small { font-family: var(--font-body); font-size: 9px; font-weight: 500; }.sale-method { margin-top: 21px; padding: 11px 13px; border-radius: 10px; background: #fafaff; color: var(--muted); font-size: 10px; }.sale-method span { color: var(--violet); }.sale-method b { float: right; color: #168f42; }
.mock-profile { overflow: hidden; }.profile-cover { height: 112px; padding: 14px; background: linear-gradient(135deg, var(--violet-deep), #a2a0ff); }.profile-badge { display: inline-block; padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,.9); color: #3e35bb; font-size: 8px; font-weight: 700; }.profile-body { position: relative; padding: 31px 21px 20px; }.profile-body > img { position: absolute; top: -28px; left: 20px; width: 54px; height: 54px; padding: 3px; border: 3px solid #fff; border-radius: 17px; background: var(--violet); object-fit: cover; }.profile-body > div:nth-of-type(1) { display: grid; gap: 3px; }.profile-body > div:nth-of-type(1) strong { font-family: var(--font-display); font-size: 17px; }.profile-body > div:nth-of-type(1) span { color: var(--muted); font-size: 10px; }.profile-stars { margin-top: 15px; color: var(--yellow); font-size: 13px; }.profile-stars small { margin-left: 5px; color: var(--muted); font-size: 9px; }.profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 19px; }.profile-actions span { padding: 11px 5px; border-radius: 9px; background: #f0efff; color: var(--violet-deep); text-align: center; font-size: 9px; font-weight: 700; }.profile-actions span:last-child { background: var(--violet); color: #fff; }

.feature-section { display: grid; grid-template-columns: 33% 1fr; gap: 60px; align-items: start; }.feature-intro { position: sticky; top: 40px; }.feature-intro h2 { font-size: clamp(37px, 4vw, 52px); }.feature-intro > p:not(.eyebrow) { max-width: 320px; margin: 23px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }.feature-grid { display: grid; grid-template-columns: 1.07fr .93fr; gap: 15px; }.feature-card { position: relative; min-height: 280px; padding: 26px; overflow: hidden; border-radius: 26px; }.feature-card-large { grid-row: span 2; min-height: 575px; }.feature-card-wide { grid-column: span 2; display: flex; min-height: 228px; align-items: center; justify-content: space-between; }.card-index { display: block; color: currentColor; opacity: .52; font-size: 9px; font-weight: 700; letter-spacing: .1em; }.feature-card h3 { position: relative; z-index: 2; margin: 24px 0 0; font-family: var(--font-display); font-size: 30px; line-height: 1; letter-spacing: -.07em; }.feature-card h3 em { color: currentColor; opacity: .55; }.feature-card p { position: relative; z-index: 2; max-width: 180px; margin: 14px 0 0; font-size: 11px; line-height: 1.6; opacity: .68; }.card-purple { background: var(--violet); color: #fff; box-shadow: 0 20px 40px rgba(103,93,249,.21); }.card-yellow { background: #fff1b9; color: #9d6b00; }.card-yellow h3, .card-mint h3 { color: var(--ink); }.card-yellow h3 em { color: #aa7100; }.card-mint { background: var(--mint); color: #167b3b; }.card-mint h3 em { color: #168f42; }.card-ink { background: var(--ink); color: #fff; }.card-ink h3 em { color: var(--mint); opacity: 1; }.feature-card > img { position: absolute; right: -10px; top: 18px; width: 150px; height: 150px; object-fit: contain; transform: rotate(10deg); filter: drop-shadow(0 20px 17px rgba(117,82,0,.17)); }.art-calendar { position: absolute; right: 26px; bottom: 28px; left: 26px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); transform: rotate(-3deg); }.art-calendar-top { display: flex; align-items: center; justify-content: space-between; font-size: 8px; font-weight: 700; }.art-calendar-top b { padding: 4px 6px; border-radius: 5px; background: var(--mint); color: var(--ink); font-size: 7px; }.art-time-row { display: grid; grid-template-columns: 40px 1fr 19px; gap: 5px; align-items: center; margin-top: 12px; padding: 9px 8px; border-radius: 8px; background: rgba(255,255,255,.1); font-size: 8px; }.art-time-row span { opacity: .6; }.art-time-row b { font-size: 9px; }.art-time-row i { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.15); font-style: normal; }.art-time-row.selected { background: #fff; color: var(--ink); box-shadow: 0 8px 16px rgba(0,0,0,.1); }.art-time-row.selected i { background: var(--mint); }.customer-stack { display: flex; align-items: center; height: 45px; margin-top: 25px; }.customer-stack span, .customer-stack b { display: grid; width: 41px; height: 41px; place-items: center; margin-left: -8px; border: 3px solid var(--mint); border-radius: 50%; background: #fff; color: var(--violet-deep); font-size: 9px; font-weight: 800; }.customer-stack span:first-child { margin-left: 0; background: #fff1b9; }.customer-stack span:nth-child(2) { background: #f0efff; }.customer-stack span:nth-child(3) { background: #ffded9; }.customer-stack b { width: 43px; height: 43px; background: var(--ink); color: var(--mint); }.qr-art { position: relative; width: 135px; height: 135px; margin-right: 35px; border-radius: 23px; background: #fff; transform: rotate(9deg); box-shadow: 16px 18px 0 rgba(58,226,117,.8); }.qr-dot { position: absolute; width: 30px; height: 30px; border: 6px solid var(--ink); border-radius: 7px; }.qr-dot-a { top: 17px; left: 17px; }.qr-dot-b { top: 17px; right: 17px; }.qr-dot-c { bottom: 17px; left: 17px; }.qr-dot-d { right: 25px; bottom: 25px; width: 16px; height: 16px; border: 0; border-radius: 3px; background: var(--ink); box-shadow: -26px 0 0 var(--ink), 0 -25px 0 var(--ink); }.qr-center { position: absolute; top: 50%; left: 50%; display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: var(--violet); color: #fff; font-family: var(--font-display); font-size: 16px; font-weight: 700; transform: translate(-50%, -50%) rotate(-9deg); }

.industries-section { padding-top: 92px; }.industry-marquee { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }.industry-card { position: relative; display: flex; min-height: 245px; flex-direction: column; justify-content: end; padding: 18px; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 14px 30px rgba(24,23,87,.08); transition: transform .25s ease, box-shadow .25s ease; }.industry-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 24px 40px rgba(24,23,87,.15); }.industry-card:nth-child(2) { background: #e9e8ff; }.industry-card:nth-child(3) { background: #fff1b9; }.industry-card:nth-child(4) { background: var(--mint-soft); }.industry-card:nth-child(5) { background: #ffded9; }.industry-card img { position: absolute; top: 5px; left: 50%; width: 185px; height: 185px; object-fit: contain; transform: translateX(-50%); transition: transform .3s ease; }.industry-card:hover img { transform: translateX(-50%) scale(1.08) rotate(4deg); }.industry-card span { position: relative; z-index: 2; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -.04em; }.industry-card b { position: absolute; right: 17px; bottom: 17px; color: var(--violet-deep); font-size: 16px; }

.link-section { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; padding-top: 115px; padding-bottom: 145px; }.link-visual { position: relative; min-height: 430px; }.link-blob { position: absolute; top: 30px; left: 40px; width: 370px; height: 320px; border-radius: 48% 52% 45% 55% / 50% 42% 58% 50%; background: #e9e8ff; transform: rotate(-7deg); }.link-card { position: absolute; z-index: 2; top: 65px; left: 32px; width: min(390px, 88%); overflow: hidden; border: 8px solid #fff; border-radius: 24px; background: #fff; box-shadow: 0 28px 50px rgba(55,52,130,.2); transform: rotate(4deg); }.link-card-top { display: flex; height: 37px; align-items: center; gap: 7px; padding: 0 11px; color: var(--muted); font-size: 8px; }.link-card-top b { margin-left: auto; }.link-logo { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 6px; background: var(--violet); color: #fff; font-family: var(--font-display); font-size: 10px; font-weight: 700; }.link-card-cover { height: 152px; background: linear-gradient(135deg, #564bdc 0%, #a9a6ff 100%); }.link-card-body { position: relative; padding: 22px 19px 18px; }.link-card-body::before { position: absolute; top: -24px; left: 18px; width: 48px; height: 48px; border: 4px solid #fff; border-radius: 14px; background: var(--mint); content: "G"; color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 40px; text-align: center; }.link-card-body strong, .link-card-body span { display: block; }.link-card-body strong { font-family: var(--font-display); font-size: 20px; letter-spacing: -.06em; }.link-card-body > span { margin-top: 3px; color: var(--muted); font-size: 10px; }.link-card-body > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 18px; }.link-card-body b { padding: 10px 5px; border-radius: 8px; background: #f0efff; color: var(--violet-deep); text-align: center; font-size: 9px; }.link-card-body b:last-child { background: var(--violet); color: #fff; }.link-float { position: absolute; z-index: 3; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; background: var(--mint); color: var(--ink); font-size: 22px; box-shadow: 0 12px 23px rgba(58,226,117,.25); transform: rotate(-12deg); animation: label-a 4s ease-in-out infinite; }.link-float-one { top: 35px; right: 20px; }.link-float-two { bottom: 52px; left: 3px; background: var(--yellow); animation-delay: .7s; }.link-copy h2 { font-size: clamp(39px, 4.6vw, 62px); }.link-copy > p:not(.eyebrow) { max-width: 450px; margin: 24px 0; color: var(--muted); font-size: 16px; line-height: 1.7; }.link-checks { display: grid; gap: 10px; margin-bottom: 29px; color: #3d3e55; font-size: 12px; font-weight: 600; }.link-checks span::first-letter { color: #168f42; }

.closing-cta { position: relative; max-width: 1180px; min-height: 400px; margin: 0 auto 85px; padding: 78px 30px; overflow: hidden; border-radius: 34px; background: var(--mint); color: var(--ink); text-align: center; isolation: isolate; }.closing-cta::before { position: absolute; z-index: -1; top: -150px; left: 50%; width: 600px; height: 600px; border: 1px solid rgba(11,16,38,.15); border-radius: 50%; box-shadow: 0 0 0 65px rgba(11,16,38,.04), 0 0 0 130px rgba(11,16,38,.035); content: ""; transform: translateX(-50%); }.closing-cta .eyebrow { justify-content: center; color: #168f42; }.closing-cta h2 { font-size: clamp(40px, 5vw, 67px); }.closing-cta h2 em { color: #168f42; }.closing-cta > p:not(.eyebrow) { max-width: 450px; margin: 19px auto 28px; color: rgba(11,16,38,.68); font-size: 15px; }.closing-sparkle { position: absolute; color: rgba(11,16,38,.35); font-size: 40px; }.sparkle-left { top: 65px; left: 14%; transform: rotate(-18deg); }.sparkle-right { right: 15%; bottom: 62px; transform: rotate(14deg); }.site-footer { display: flex; max-width: 1180px; min-height: 105px; align-items: center; justify-content: space-between; gap: 20px; margin: 0 auto; padding: 25px 24px; border-top: 1px solid var(--line); color: #88889c; font-size: 11px; }.brand-footer { color: var(--text); font-size: 18px; }.brand-footer .brand-mark { width: 25px; height: 25px; border-radius: 8px 9px 8px 4px; }.brand-footer .brand-mark span { font-size: 14px; }.site-footer > div { display: flex; gap: 19px; }.site-footer a:hover { color: var(--violet-deep); }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1); }.hero [data-reveal] { transition-duration: .9s; }.is-visible[data-reveal] { opacity: 1; transform: translateY(0); }.is-visible[data-reveal-delay="80"] { transition-delay: 80ms; }.is-visible[data-reveal-delay="100"] { transition-delay: 100ms; }.is-visible[data-reveal-delay="120"] { transition-delay: 120ms; }.is-visible[data-reveal-delay="140"] { transition-delay: 140ms; }.is-visible[data-reveal-delay="150"] { transition-delay: 150ms; }.is-visible[data-reveal-delay="200"] { transition-delay: 200ms; }.is-visible[data-reveal-delay="260"] { transition-delay: 260ms; }

@media (max-width: 920px) {
  .desktop-nav { gap: 18px; margin-left: 20px; }.hero { grid-template-columns: 1fr; padding-top: 138px; }.hero-copy { max-width: 700px; }.hero-stage { width: min(650px, 100%); margin: -25px auto -20px; }.hero-scroll-hint { display: none; }.feature-section { grid-template-columns: 1fr; gap: 38px; }.feature-intro { position: static; max-width: 600px; }.industry-marquee { grid-template-columns: repeat(3, 1fr); }.industry-card:nth-child(4), .industry-card:nth-child(5) { display: none; }.link-section { gap: 45px; }
}
@media (max-width: 700px) {
  .site-header { width: calc(100% - 32px); height: 72px; }.desktop-nav, .header-actions { display: none; }.menu-toggle { display: block; }.mobile-menu { top: 65px; right: 16px; }.hero { min-height: 900px; padding: 120px 20px 55px; }.hero h1 { font-size: clamp(43px, 13vw, 63px); }.hero-lede { font-size: 15px; }.hero-proof { gap: 10px 14px; margin-top: 30px; }.hero-stage { height: 495px; margin-top: 5px; transform: translateY(22px) scale(.93); transform-origin: top center; }.hero-stage.is-visible[data-reveal] { transform: scale(.93); }.hero-device { top: 82px; width: min(385px, 88%); }.stage-orbit { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-14deg) scale(.85); }.orbit-two { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(34deg) scale(.85); }.stage-grid { transform: translate(-50%, -45%) perspective(600px) rotateX(62deg) scale(.83); }.label-calendar { left: 0; }.label-sales { right: -3%; }.label-share { right: 2%; bottom: 44px; }.logo-strip { display: block; padding: 30px 20px; text-align: center; }.logo-strip-items { flex-wrap: wrap; justify-content: center; margin-top: 18px; font-size: 10px; }.section { padding: 88px 20px; }.section-heading.centered { margin-bottom: 40px; }.section-heading h2, .feature-intro h2 { font-size: 43px; }.section-heading > p:last-child { font-size: 14px; }.demo-shell { display: block; border-radius: 23px; }.demo-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 10px; }.demo-tab { display: block; min-height: 91px; padding: 11px 9px; }.demo-tab i { display: none; }.demo-tab .tab-number { display: block; margin-bottom: 11px; }.demo-tab strong { font-size: 11px; }.demo-tab small { font-size: 9px; }.demo-panel { display: block; min-height: 650px; padding: 40px 25px; }.panel-copy { max-width: 100%; }.panel-copy h3 { font-size: 36px; }.mock-calendar, .mock-sale, .mock-profile { margin-top: 36px; }.feature-grid { grid-template-columns: 1fr 1fr; }.feature-card { min-height: 245px; padding: 20px; border-radius: 20px; }.feature-card-large { grid-column: span 2; grid-row: auto; min-height: 430px; }.feature-card-wide { grid-column: span 2; min-height: 220px; }.feature-card h3 { font-size: 25px; }.feature-card > img { width: 112px; height: 112px; }.art-calendar { right: 18px; bottom: 20px; left: 18px; }.qr-art { width: 105px; height: 105px; margin-right: 7px; }.qr-dot { width: 24px; height: 24px; border-width: 5px; }.qr-dot-a { top: 13px; left: 13px; }.qr-dot-b { top: 13px; right: 13px; }.qr-dot-c { bottom: 13px; left: 13px; }.qr-center { width: 26px; height: 26px; font-size: 13px; }.industry-marquee { grid-template-columns: repeat(2, 1fr); }.industry-card { min-height: 210px; }.industry-card:nth-child(4) { display: flex; }.industry-card:nth-child(5) { display: none; }.industry-card img { width: 155px; height: 155px; }.link-section { display: flex; flex-direction: column; gap: 25px; padding-top: 78px; }.link-visual { width: 100%; min-height: 360px; }.link-blob { left: 6%; width: 86%; height: 270px; }.link-card { top: 40px; left: 5%; width: 90%; }.link-card-cover { height: 130px; }.link-copy h2 { font-size: 42px; }.closing-cta { margin: 0 16px 55px; padding: 65px 21px; border-radius: 25px; }.closing-cta h2 { font-size: 43px; }.site-footer { flex-wrap: wrap; justify-content: center; padding: 25px 20px; text-align: center; }.site-footer > span { order: 3; width: 100%; }.site-footer > div { gap: 12px; }
}
@media (max-width: 430px) {
  .hero { min-height: 850px; }.hero-stage { height: 445px; transform: translateY(22px) scale(.82); margin: -20px -35px -50px; width: calc(100% + 70px); }.hero-stage.is-visible[data-reveal] { transform: scale(.82); }.hero-proof span { font-size: 10px; }.section-heading h2, .feature-intro h2 { font-size: 38px; }.demo-tabs { padding: 7px; }.demo-tab { min-height: 83px; padding: 9px 7px; }.demo-tab strong { font-size: 10px; }.demo-tab small { font-size: 8px; }.demo-panel { min-height: 630px; padding-right: 18px; padding-left: 18px; }.panel-copy h3 { font-size: 33px; }.mock-calendar, .mock-sale, .mock-profile { transform: scale(.94); transform-origin: top center; }.feature-card { min-height: 225px; padding: 17px; }.feature-card-large { min-height: 405px; }.feature-card h3 { font-size: 22px; }.feature-card p { font-size: 10px; }.customer-stack span, .customer-stack b { width: 34px; height: 34px; font-size: 8px; }.qr-art { width: 90px; height: 90px; }.qr-dot { width: 20px; height: 20px; border-width: 4px; }.qr-dot-a { top: 11px; left: 11px; }.qr-dot-b { top: 11px; right: 11px; }.qr-dot-c { bottom: 11px; left: 11px; }.qr-dot-d { right: 18px; bottom: 18px; width: 12px; height: 12px; box-shadow: -20px 0 0 var(--ink), 0 -19px 0 var(--ink); }.link-copy h2 { font-size: 37px; }.closing-cta h2 { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}