* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
.icon { width: 20px; height: 20px; flex: none; filter: invert(1); }
.btn:not(.btn--dark):not(.btn--ghost) .icon { filter: none; }
.header-note { font-size: 13px; color: #9298a1; }
.menu-button { display: none; }
#mobile-menu { background: #111318; padding: 24px; border-bottom: 1px solid #34373e; }
#mobile-menu:not([hidden]) { display: grid; gap: 24px; }
#mobile-menu a { text-decoration: none; font-size: 24px; }
.hero-copy { position: relative; z-index: 2; }
.st-hero { position: relative; overflow: hidden; }
.trial-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border: 1px solid #ffffff26; border-radius: 30px; font-size: 13px; color: #c9ced5; margin-bottom: 27px; background: #14161c80; }
.trial-pill span { width: 6px; height: 6px; background: #c8dacb; border-radius: 50%; }
.st-hero__demo { text-decoration: none; font-size: 13px; }
.st-hero__actions { margin-top: 26px; gap: 13px; }
.warehouse { text-align: left; margin: 56px auto 0; background: #101216; border: 1px solid #777e894f; border-radius: 14px; box-shadow: 0 0 0 7px #ffffff04, 0 30px 100px #0009; overflow: hidden; font-size: 12px; max-width: 1110px; }
.app-top { display: flex; align-items: center; gap: 16px; padding: 13px 19px; border-bottom: 1px solid var(--line); background: #16181c; }
.app-top b { font-weight: 500; }
.app-top b span { color: #626773; margin: 0 18px; }
.sync { margin-left: auto; color: #a4b9af; font-size: 11px; }
.sync::before { content: ''; display: inline-block; width: 5px; height: 5px; background: #a4b9af; border-radius: 50%; margin-right: 7px; }
.avatar { width: 27px; height: 27px; border-radius: 50%; background: #444950; display: grid; place-items: center; font-size: 10px; }
.app-layout { display: grid; grid-template-columns: 190px 1fr; }
.app-sidebar { padding: 18px 12px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line); color: #9499a2; }
.app-sidebar > div { display: flex; align-items: center; gap: 10px; padding: 9px 10px; }
.app-sidebar .icon { width: 17px; height: 17px; opacity: .6; }
.app-sidebar .selected { background: #272a31; color: #f5f6f7; border-radius: 6px; }
.app-sidebar small { margin-left: auto; font-size: 10px; }
.app-sidebar .settings { margin-top: auto; }
.app-sidebar .warehouse-label { display: block; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 16px; color: #d9dce2; }
.warehouse-label span { color: #777e8a; font-size: 10px; }
.app-main { padding: 23px; min-width: 0; }
.app-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 19px; }
.app-title h3 { font-size: 23px; font-weight: 500; }
.app-title > span { color: #b1b6bf; border: 1px solid var(--line); padding: 6px 11px; border-radius: 5px; font-size: 10px; }
.stats { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 10px; }
.stats > div { padding: 15px; background: #191c21; border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 10px; }
.stats span { color: #a3a8b1; font-size: 11px; }
.stats strong { font-size: clamp(22px, 2.5vw, 36px); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.stats small { font-size: 10px; color: #858c97; }
.stats .good { color: #a5bbac; }
.app-middle { display: grid; grid-template-columns: 1.45fr 1fr; gap: 12px; margin-top: 13px; }
.sales, .stock-alert { border: 1px solid var(--line); border-radius: 7px; padding: 16px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.panel-heading > span { color: #767f8a; font-size: 10px; }
.sales-chart { height: 157px; margin-top: 8px; --vx-chart-fill: #4a4f58; --vx-chart-accent: #e2e6ec; --vx-chart-label: #9098a2; --vx-chart-grid: #ffffff0a; --vx-chart-radius: 3px; --vx-chart-gap: 15px; --vx-chart-label-size: 9px; }
.stock-alert { background: #202126; }
.alert-label { color: #dbc8a4; font-size: 10px; }
.stock-alert strong { display: block; font-size: 27px; font-weight: 500; letter-spacing: -.03em; margin-top: 8px; }
.stock-alert p { color: #9499a1; font-size: 11px; margin-top: 5px; }
.stock-alert > div { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid #ffffff0d; font-size: 10px; }
.stock-alert b { color: #e2ceaa; font-weight: 400; }
.inventory { margin-top: 19px; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; text-align: left; font-size: 11px; }
th { color: #7d8590; font-size: 10px; font-weight: 400; }
th, td { padding: 10px 7px; border-bottom: 1px solid #ffffff09; }
td:not(:first-child) { color: #a1a8b3; }
td:last-child { color: #e0e5eb; }
td em { font-style: normal; background: #b8995c25; color: #d2bd99; padding: 2px 12px; border-radius: 4px; }
.integration-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 45px 20px 65px; color: #a9aeb8; }
.integration-strip > span { text-align: left; font-size: 12px; color: #7c848f; }
.integration-strip b { font-size: 24px; font-weight: 500; letter-spacing: -.04em; }
.section-intro { max-width: 520px; margin-top: 26px; color: var(--muted); font-size: 19px; }
.st-about { padding: 95px 0 115px; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; margin-top: 64px; }
.feature h3 { font-size: 31px; margin-top: 28px; line-height: 1.08; }
.feature p { margin-top: 16px; max-width: 44ch; color: var(--muted); }
.feature-visual { height: 285px; border: 1px solid #ffffff12; padding: 34px; border-radius: 12px; background: radial-gradient(ellipse at top right,#3a414d50,transparent),#16181d; display: flex; flex-direction: column; justify-content: center; }
.balance-visual > span { color: #a8afb9; font-size: 14px; }
.balance-visual strong { font-size: 64px; letter-spacing: -.06em; font-weight: 500; line-height: 1; margin-top: 10px; }
.balance-visual strong small { font-size: 20px; color: #7e8590; letter-spacing: -.02em; }
.balance-bar { background: #e0e4ea; height: 13px; border-radius: 3px; margin-top: 28px; }
.balance-bar i { display: block; width: 14%; height: 100%; background: #676f7d; border-right: 3px solid #16181d; }
.balance-labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: #aab1ba; }
.update-note { display: flex; gap: 8px; align-items: center; margin-top: 23px; font-size: 12px; color: #bdcfc4; }
.update-note .icon { width: 15px; height: 15px; }
.order-label { display: flex; align-items: center; justify-content: space-between; font-size: 19px; }
.order-label span { border: 1px solid #ffffff30; border-radius: 20px; padding: 4px 14px; font-size: 13px; }
.order-row { display: flex; justify-content: space-between; padding: 24px 0; font-size: 14px; color: #a0a7b2; }
.order-row b { color: #e0e4e9; font-weight: 400; }
.timeline { display: flex; justify-content: space-between; border-top: 2px solid #737d8a; margin-top: 15px; }
.timeline span { position: relative; padding-top: 15px; font-size: 12px; }
.timeline span::before { content: ''; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border: 2px solid #adb4bf; background: #282e36; border-radius: 50%; }
.timeline span:last-child::before { left: auto; right: 0; background: #e5e8ed; }
.order-note { color: #858e9c; margin-top: 28px; font-size: 12px; }
.connections { background: #e8eaed; color: #101216; padding: 120px 0; }
.connection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; align-items: center; }
.connections .lead { color: #555c67; margin-top: 25px; max-width: 39ch; }
.connection-foot { margin-top: 34px; font-size: 14px; color: #737a85; }
.connection-diagram { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; position: relative; }
.connection-diagram::before { content: ''; position: absolute; inset: 55px 65px; border: 1px solid #b4bac3; z-index: 0; }
.channel { position: relative; background: #f9fafb; padding: 20px; border-radius: 10px; font-size: 18px; box-shadow: 0 10px 20px #222b3810; }
.channel span { display: block; color: #858c94; font-size: 11px; margin-top: 7px; }
.hub { position: relative; grid-column: 1/-1; background: #15181d; border: 6px solid #d4d8df; color: #eceff2; border-radius: 16px; padding: 23px 30px; justify-self: center; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 16px; }
.hub img { grid-row: span 2; }
.hub b { font-size: 24px; font-weight: 500; }
.hub small { font-size: 11px; color: #a5adb9; }
.onboarding { padding: 115px 0 30px; }
.section-head { display: flex; justify-content: space-between; gap: 40px; align-items: end; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px; margin-top: 65px; }
.steps article { border-top: 1px solid var(--line-strong); padding-top: 22px; }
.steps article > span { font-size: 54px; color: #686e78; letter-spacing: -.06em; font-weight: 300; }
.steps h3 { font-size: 25px; margin-top: 25px; }
.steps p { color: var(--muted); margin-top: 17px; font-size: 16px; max-width: 31ch; }
.st-faq { border-top: 1px solid var(--line); padding-top: 95px; padding-bottom: 60px; }
.st-faq__list details[open] .icon { transform: rotate(45deg); }
.st-faq__list .icon { transition: transform .25s; }
.st-contact { border-top: 1px solid var(--line); }
.demo-time { display: flex; align-items: center; gap: 20px; margin-top: 35px; }
.demo-time strong { font-size: 105px; line-height: 1; letter-spacing: -.07em; font-weight: 300; }
.demo-time span { font-size: 14px; color: var(--muted); }
.closing { background: #14161b; border-top: 1px solid var(--line); overflow: hidden; padding-top: 42px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-top p, .footer-top > a:last-child { color: #9198a3; font-size: 14px; }
.footer-word { font-size: 20.4vw; letter-spacing: -.065em; font-weight: 500; line-height: 1.1; margin-top: 55px; color: #363b44; }
@media (min-width: 1500px) { .footer-word { font-size: 305px; } }
@media (max-width: 1000px) { .header-note { display: none; } .app-sidebar { display: none; } .app-layout { grid-template-columns: 1fr; } .connection-grid { gap: 35px; } }
@media (max-width: 900px) { .menu-button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ffffff26; border-radius: 50%; background: #ffffff09; } .integration-strip { flex-wrap: wrap; justify-content: center; gap: 23px; } .integration-strip > span { width: 100%; text-align: center; } .integration-strip b { font-size: 19px; } .feature-grid { gap: 26px; } .feature-visual { padding: 22px; } .connection-grid { grid-template-columns: 1fr; } .connection-diagram { max-width: 530px; width: 100%; margin: 25px auto 0; } .section-head { display: grid; gap: 24px; } .st-about { padding-top: 70px; } }
@media (max-width: 600px) { .st-hero { padding-top: 115px; } .st-hero h1 { font-size: 46px; letter-spacing: -.045em; } .trial-pill { font-size: 11px; margin-bottom: 24px; } .st-hero__sub { font-size: 16px; max-width: 340px; } .warehouse { margin-top: 38px; } .app-top { padding: 11px 12px; } .app-top b { font-size: 11px; } .app-top b span { margin: 0 7px; } .sync { display: none; } .avatar { margin-left: auto; } .app-main { padding: 16px 12px; } .app-title h3 { font-size: 21px; } .app-title > span { font-size: 9px; padding: 5px; } .stats { grid-template-columns: 1fr 1fr; gap: 8px; } .stats > div { padding: 13px 10px; } .stats > div:last-child { display: none; } .stats strong { font-size: 32px; } .app-middle { grid-template-columns: 1fr; } .stock-alert { display: none; } .sales { padding: 13px; } .sales-chart { height: 145px; --vx-chart-gap: 11px; } .inventory table th:nth-child(2), .inventory table td:nth-child(2), .inventory table th:nth-child(4), .inventory table td:nth-child(4) { display: none; } .panel-heading > span { font-size: 8px; } th, td { padding: 10px 2px; font-size: 10px; } .integration-strip { padding: 33px 0 45px; } .section-intro { font-size: 17px; } .feature-grid { grid-template-columns: 1fr; gap: 48px; margin-top: 40px; } .feature-visual { height: 265px; } .feature h3 { font-size: 29px; margin-top: 23px; } .feature p { font-size: 16px; } .st-about { padding: 40px 0 75px; } .connections { padding: 85px 0 70px; } .connection-diagram { gap: 16px; } .channel { padding: 16px 12px; font-size: 16px; } .hub { padding: 20px; } .steps { grid-template-columns: 1fr; gap: 32px; margin-top: 38px; } .steps article { display: grid; grid-template-columns: 58px 1fr; gap: 12px; } .steps article > span { grid-row: span 2; font-size: 40px; } .steps h3 { margin-top: 8px; font-size: 24px; } .steps p { margin-top: 0; } .onboarding { padding-top: 75px; } .st-pricing { padding-top: 80px; } .st-contact { padding-top: 70px; } .demo-time { margin-top: 10px; } .demo-time strong { font-size: 80px; } .footer-top { flex-wrap: wrap; } .footer-top p { width: 100%; order: 3; } .footer-top > a:last-child { font-size: 11px; } .footer-word { margin-top: 30px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }