:root {
    --red: #db373d;
    --red-hover: #c52d34;
    --red-dark: #a5252b;
    --ink: #17191d;
    --dark: #111318;
    --canvas: #f7f8fa;
    --paper: #ffffff;
    --line: #e5e7eb;
    --muted: #667085;
    --soft-red: #fff1f1;
    --shadow-sm: 0 10px 28px rgba(23, 25, 29, .06);
    --shadow-lg: 0 26px 70px rgba(23, 25, 29, .12);
    --radius: 18px;
    --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: -50px; left: 16px; padding: 10px 16px; color: #fff; background: var(--red); border-radius: 0 0 10px 10px; transition: top .2s ease; }
.skip-link:focus { top: 0; }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; padding: 18px 0; transition: background .25s ease, box-shadow .25s ease, padding .25s ease; }
.site-header.is-scrolled { padding: 11px 0; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 0 rgba(23, 25, 29, .07), 0 12px 35px rgba(23, 25, 29, .05); backdrop-filter: blur(16px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 46px; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { --logo-height: 36px; position: relative; display: inline-block; width: calc(var(--logo-height) * 3.7213); height: var(--logo-height); overflow: hidden; }
.brand-logo img { position: absolute; top: calc(var(--logo-height) * -2); left: calc(var(--logo-height) * -.7705); display: block; width: calc(var(--logo-height) * 5.2459); height: auto; max-width: none; }
.brand-wordmark { color: var(--red); font-size: 31px; font-weight: 850; letter-spacing: -2.2px; line-height: 1; }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 650; color: #454951; }
.site-nav > a:not(.button) { position: relative; padding: 8px 0; }
.site-nav > a:not(.button)::after { content: ""; position: absolute; right: 0; bottom: 2px; left: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .2s ease; }
.site-nav > a:not(.button):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { margin-left: 2px; }
.menu-toggle { display: none; padding: 8px 4px; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 21px; border: 1px solid transparent; border-radius: 11px; font-size: 14px; font-weight: 750; letter-spacing: -.1px; transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--red); box-shadow: 0 10px 22px rgba(219, 55, 61, .22); }
.button-primary:hover { background: var(--red-hover); box-shadow: 0 13px 28px rgba(219, 55, 61, .3); }
.button-small { min-height: 42px; padding: 0 16px; font-size: 13px; }
.button-large { min-height: 52px; padding: 0 23px; }
.button-quiet { color: var(--ink); background: rgba(255,255,255,.72); border-color: var(--line); }
.button-quiet:hover { border-color: #cdd0d5; background: #fff; }
.button-light { color: var(--dark); background: #fff; }
.button-outline-light { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; }
.button-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.hero { position: relative; min-height: max(760px, 86vh); overflow: hidden; padding: 156px 0 80px; background: linear-gradient(119deg, #fff 0%, #fff 53%, #fff8f8 100%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(transparent, rgba(247,248,250,.55)); pointer-events: none; }
.hero-orb { position: absolute; border-radius: 999px; filter: blur(1px); pointer-events: none; }
.hero-orb-one { top: 7%; right: -17%; width: 570px; height: 570px; background: radial-gradient(circle, rgba(219,55,61,.13), rgba(219,55,61,0) 68%); }
.hero-orb-two { top: 44%; left: -13%; width: 430px; height: 430px; background: radial-gradient(circle, rgba(219,55,61,.06), rgba(219,55,61,0) 68%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(520px, 1.05fr); align-items: center; gap: 48px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: 1.45px; text-transform: uppercase; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(219,55,61,.12); }
.eyebrow-light { color: #ffb4b7; }
.hero h1 { max-width: 680px; margin: 0; font-size: clamp(47px, 5.25vw, 68px); line-height: 1.055; letter-spacing: -3.2px; }
.hero-lead { max-width: 600px; margin: 27px 0 30px; color: #50545d; font-size: 18px; line-height: 1.66; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-line { display: flex; align-items: center; gap: 9px; margin: 27px 0 0; color: #656a72; font-size: 13px; font-weight: 600; }
.trust-mark { display: inline-grid; width: 18px; height: 18px; place-items: center; color: var(--red); border: 1px solid rgba(219,55,61,.25); border-radius: 50%; font-size: 11px; }

.hero-product { position: relative; min-height: 518px; }
.product-glow { position: absolute; top: 62px; right: 10px; width: 450px; height: 396px; border-radius: 50%; background: radial-gradient(circle, rgba(219,55,61,.2), rgba(219,55,61,0) 68%); filter: blur(8px); }
.product-board { position: absolute; z-index: 2; top: 41px; right: 24px; width: min(100%, 570px); overflow: hidden; background: #fff; border: 1px solid rgba(23,25,29,.09); border-radius: 17px; box-shadow: var(--shadow-lg); transform: perspective(1250px) rotateY(-5deg) rotateX(2deg); transform-origin: center right; }
.board-topbar { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 18px; color: #69707b; border-bottom: 1px solid #edf0f2; font-size: 11px; font-weight: 700; }
.board-brand, .board-live { display: flex; align-items: center; gap: 7px; }
.board-mark { display: grid; width: 21px; height: 21px; place-items: center; color: #fff; background: var(--red); border-radius: 6px; font-weight: 850; font-size: 14px; }
.board-live span { width: 6px; height: 6px; border-radius: 50%; background: #26aa74; box-shadow: 0 0 0 3px rgba(38,170,116,.12); }
.board-body { display: flex; min-height: 315px; background: #fafbfc; }
.board-sidebar { display: flex; flex-direction: column; align-items: center; width: 47px; padding-top: 22px; background: #fff; border-right: 1px solid #edf0f2; gap: 20px; }
.board-sidebar span { width: 14px; height: 14px; border: 2px solid #d4d8de; border-radius: 4px; }
.board-sidebar span:nth-child(3) { border-radius: 50%; }
.board-sidebar .side-active { border-color: var(--red); background: #fff1f1; box-shadow: 0 0 0 5px #fff4f4; }
.board-content { flex: 1; padding: 23px 24px; }
.board-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 17px; }
.board-heading strong { display: block; margin-top: 3px; color: #252932; font-size: 17px; letter-spacing: -.5px; }
.ui-overline { color: #8b929d; font-size: 8px; font-weight: 800; letter-spacing: .8px; }
.ui-pill { padding: 5px 8px; color: #11805a; background: #eaf9f2; border-radius: 20px; font-size: 9px; font-weight: 750; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric { padding: 12px; background: #fff; border: 1px solid #edf0f2; border-radius: 9px; }
.metric span { display: block; color: #8a919b; font-size: 9px; font-weight: 650; }
.metric strong { display: block; margin: 2px 0; color: #23262c; font-size: 20px; letter-spacing: -.7px; }
.metric small { color: #818792; font-size: 8px; }
.metric .positive { color: #159169; }
.order-panel { margin-top: 14px; padding: 13px; background: #fff; border: 1px solid #edf0f2; border-radius: 9px; }
.panel-title { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 10px; }
.panel-title strong { color: #343840; }.panel-title span { color: var(--red); font-weight: 700; }
.order-row { display: grid; grid-template-columns: 1fr 1.35fr 1.1fr; align-items: center; min-height: 30px; color: #767d87; border-top: 1px solid #f1f2f3; font-size: 9px; }
.order-code { color: #323640; font-weight: 750; }.status { justify-self: start; padding: 3px 6px; border-radius: 12px; font-size: 8px; font-weight: 700; }.status-route { color: #995900; background: #fff4df; }.status-paid { color: #137258; background: #e8f8f0; }.status-wait { color: #8e5360; background: #fff0f1; }
.floating-card { position: absolute; z-index: 3; display: flex; align-items: center; background: rgba(255,255,255,.96); border: 1px solid rgba(23,25,29,.09); box-shadow: 0 15px 40px rgba(23,25,29,.12); backdrop-filter: blur(12px); }
.portal-card { bottom: 25px; left: 0; width: 262px; padding: 13px; border-radius: 13px; gap: 10px; }.float-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 9px; font-size: 20px; }.coral-icon { color: var(--red); background: #fff0f1; }.portal-card span:not(.float-arrow) { display: block; color: #818791; font-size: 9px; font-weight: 700; }.portal-card strong { display: block; color: #30333a; font-size: 11px; }.float-arrow { margin-left: auto; color: var(--red); font-size: 17px; }
.tracking-card { right: 0; bottom: 41px; width: 183px; padding: 14px; border-radius: 13px; display: block; }.tracking-title { display: flex; align-items: center; gap: 6px; color: #676d77; font-size: 9px; }.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(219,55,61,.13); }.tracking-code { margin: 8px 0 7px; color: #272a30; font-size: 15px; font-weight: 800; letter-spacing: -.4px; }.tracking-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }.tracking-progress span { height: 3px; background: #e6e8ec; border-radius: 4px; }.tracking-progress span:nth-child(-n+3) { background: var(--red); }.tracking-card small { display: block; margin-top: 7px; color: #78808b; font-size: 8px; }
.payment-card { top: 3px; left: 19px; display: block; width: 184px; padding: 13px; border-radius: 13px; }.payment-top { display: flex; justify-content: space-between; color: #767d87; font-size: 9px; }.payment-top strong { color: #178763; font-size: 8px; }.payment-line { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #737983; font-size: 8px; line-height: 1.35; }.payment-line b { color: #343840; font-size: 9px; }.payment-qr { width: 32px; height: 32px; background: repeating-linear-gradient(90deg, #25282e 0 3px, transparent 3px 6px), repeating-linear-gradient(#25282e 0 3px, transparent 3px 6px); border: 3px solid #25282e; opacity: .85; }

.section { padding: 115px 0; }.operating-section { background: var(--canvas); }.section-intro { margin-bottom: 48px; }.section-intro h2, .label-copy h2, .why-head h2, .final-cta h2 { margin: 0; color: var(--ink); font-size: clamp(34px, 4vw, 46px); line-height: 1.13; letter-spacing: -2.1px; }.split-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); align-items: end; gap: 60px; }.split-intro > p { max-width: 485px; margin: 0 0 3px; color: var(--muted); font-size: 17px; line-height: 1.66; }.centered { max-width: 700px; margin-inline: auto; text-align: center; }.centered .eyebrow { justify-content: center; }.centered > p:last-child { margin: 16px auto 0; color: var(--muted); font-size: 17px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }.feature-card { min-height: 253px; padding: 25px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 0 rgba(23,25,29,.01); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }.feature-card:hover { border-color: rgba(219,55,61,.24); box-shadow: var(--shadow-sm); transform: translateY(-4px); }.feature-icon { display: grid; width: 43px; height: 43px; place-items: center; color: var(--red); background: var(--soft-red); border-radius: 12px; }.feature-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.feature-card h3 { margin: 19px 0 8px; font-size: 18px; letter-spacing: -.45px; }.feature-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }.feature-card ul { display: flex; gap: 8px; padding: 0; margin: 18px 0 0; list-style: none; }.feature-card li { padding: 4px 8px; color: #6c717a; background: #f6f7f8; border-radius: 5px; font-size: 10px; font-weight: 700; }

.pricing-section { background: #fff; }.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 17px; max-width: 960px; margin: 0 auto; }.pricing-card, .pricing-contact { padding: 27px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); }.pricing-card > span, .pricing-contact > span { color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }.pricing-card h3, .pricing-contact h3 { margin: 10px 0 20px; font-size: 23px; letter-spacing: -.7px; }.pricing-card dl { margin: 0; }.pricing-card dl div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); }.pricing-card dt { color: var(--muted); font-size: 14px; }.pricing-card dd { margin: 0; font-weight: 800; }.pricing-contact { max-width: 520px; margin: 0 auto; text-align: center; }.pricing-contact p { margin: 0; color: var(--muted); }.pricing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

.label-section { position: relative; overflow: hidden; color: #fff; background: var(--dark); }.label-section::before { content: ""; position: absolute; top: -220px; right: -180px; width: 600px; height: 600px; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.018), 0 0 0 160px rgba(255,255,255,.012); }.label-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(400px, .85fr); align-items: center; gap: 90px; }.label-copy h2, .final-cta h2 { color: #fff; }.label-copy > p:not(.eyebrow) { max-width: 540px; margin: 20px 0 31px; color: #b7bcc5; font-size: 17px; line-height: 1.68; }.label-points { display: grid; gap: 17px; }.label-points > div { display: grid; grid-template-columns: 37px 1fr; gap: 13px; align-items: start; }.label-points span { display: grid; width: 29px; height: 29px; place-items: center; color: #ffb9bc; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; font-size: 9px; font-weight: 800; }.label-points p { max-width: 385px; margin: 0; color: #aeb4bd; font-size: 13px; line-height: 1.55; }.label-points strong { display: block; margin-bottom: 2px; color: #fff; font-size: 14px; }
.brand-config { position: relative; min-height: 380px; }.config-window { position: absolute; inset: 35px 0 auto 20px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; box-shadow: 0 30px 75px rgba(0,0,0,.3); transform: rotate(2.5deg); }.config-toolbar { display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; color: #9399a3; background: #f8f9fb; border-bottom: 1px solid #edf0f2; font-size: 9px; }.config-toolbar span { width: 6px; height: 6px; background: #e2e5e9; border-radius: 50%; }.config-toolbar b { margin-left: 5px; font-weight: 650; }.config-content { padding: 24px; color: #2f333a; }.config-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 19px; border-bottom: 1px solid #ecedef; }.config-logo { display: grid; width: 40px; height: 40px; place-items: center; color: #fff; background: #db373d; border-radius: 10px; font-size: 12px; font-weight: 800; }.config-heading small { display: block; color: #959ba4; font-size: 8px; font-weight: 750; letter-spacing: .7px; }.config-heading strong { display: block; margin-top: 1px; font-size: 15px; letter-spacing: -.3px; }.config-ready { margin-left: auto; padding: 4px 7px; color: #07845b; background: #e6f8ee; border-radius: 12px; font-size: 8px; font-weight: 750; }.config-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 42px; color: #7c838d; border-bottom: 1px solid #f0f1f3; font-size: 10px; }.config-row b { color: #444851; font-size: 10px; font-weight: 700; }.swatches { display: flex; gap: 4px; }.swatches i { width: 17px; height: 17px; background: #db373d; border-radius: 5px; }.swatches i:nth-child(2) { background: #17191d; }.swatches i:nth-child(3) { background: #e9eaec; }.private-value { letter-spacing: 1px; }.config-tag { position: absolute; z-index: 2; padding: 9px 12px; color: #31353c; background: #fff; border: 1px solid rgba(23,25,29,.1); border-radius: 9px; box-shadow: 0 10px 25px rgba(0,0,0,.14); font-size: 10px; font-weight: 750; }.tag-one { top: 4px; right: -8px; }.tag-two { right: -18px; bottom: 83px; }.tag-three { bottom: 8px; left: -9px; color: #fff; background: var(--red); border-color: var(--red); }

.architecture-section { overflow: hidden; background: #fff; }.architecture { position: relative; display: flex; flex-direction: column; align-items: center; margin: 50px auto 0; padding: 16px 0 0; }.arch-node { position: relative; z-index: 1; display: grid; min-width: 154px; padding: 19px 14px; place-items: center; color: #454a53; background: #fff; border: 1px solid #e5e7eb; border-radius: 13px; box-shadow: 0 10px 24px rgba(23,25,29,.05); text-align: center; }.arch-node strong { margin-top: 7px; color: #24272d; font-size: 13px; }.arch-node small { margin-top: 2px; color: #8a9099; font-size: 9px; }.arch-icon { display: grid; width: 28px; height: 28px; place-items: center; color: var(--red); background: #fff0f1; border-radius: 8px; font-size: 14px; font-weight: 800; }.arch-website { color: #fff; background: var(--red); border-color: var(--red); }.arch-website strong, .arch-website small { color: #fff; }.arch-website small { color: #ffd7d9; }.arch-website .arch-icon { color: var(--red); background: #fff; }.arch-customer { min-width: 190px; }.arch-line { width: 1px; height: 34px; background: #d9dce1; }.arch-branches { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); width: min(100%, 820px); gap: 15px; padding-top: 31px; }.arch-branches::before { content: ""; position: absolute; top: 0; right: 11%; left: 11%; height: 1px; background: #d9dce1; }.arch-branches .arch-node::before { content: ""; position: absolute; top: -32px; left: 50%; width: 1px; height: 31px; background: #d9dce1; }

.demo-section { background: var(--canvas); }.demo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }.demo-card { display: flex; flex-direction: column; min-height: 287px; padding: 23px; border: 1px solid rgba(23,25,29,.07); border-radius: var(--radius); transition: transform .25s ease, box-shadow .25s ease; }.demo-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-4px); }.demo-customer { background: #fff; }.demo-admin { color: #fff; background: #272a31; }.demo-sale { color: #fff; background: var(--red); }.demo-tracking { background: #ffe8e9; }.demo-card-top { display: flex; align-items: center; justify-content: space-between; }.demo-label { font-size: 9px; font-weight: 800; letter-spacing: .8px; }.demo-customer .demo-label, .demo-tracking .demo-label { color: #808690; }.demo-admin .demo-label { color: #abb1ba; }.demo-sale .demo-label { color: #ffc7c9; }.demo-symbol { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; font-size: 15px; font-weight: 800; }.demo-customer .demo-symbol { color: var(--red); background: #fff1f1; }.demo-admin .demo-symbol { color: #fff; background: rgba(255,255,255,.1); }.demo-sale .demo-symbol { color: var(--red); background: #fff; }.demo-tracking .demo-symbol { color: #a5252b; background: rgba(255,255,255,.65); }.demo-card h3 { margin: auto 0 9px; font-size: 20px; letter-spacing: -.6px; }.demo-card p { margin: 0; min-height: 66px; font-size: 13px; line-height: 1.6; }.demo-customer p, .demo-tracking p { color: #69707a; }.demo-admin p { color: #c4c8ce; }.demo-sale p { color: #ffe0e1; }.demo-card a { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 15px; border-top: 1px solid currentColor; font-size: 12px; font-weight: 750; }.demo-customer a, .demo-tracking a { color: var(--red-dark); border-color: rgba(23,25,29,.12); }.demo-admin a { color: #fff; border-color: rgba(255,255,255,.18); }.demo-sale a { color: #fff; border-color: rgba(255,255,255,.28); }

.rollout-section { background: #fff; }.rollout-list { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; margin: 42px 0 0; list-style: none; border-top: 1px solid var(--line); }.rollout-list li { position: relative; min-height: 182px; padding: 26px 23px 0 0; border-right: 1px solid var(--line); }.rollout-list li:not(:first-child) { padding-left: 23px; }.rollout-list li:last-child { border-right: 0; }.rollout-list span { display: block; margin-bottom: 33px; color: var(--red); font-size: 12px; font-weight: 850; }.rollout-list h3 { margin: 0 0 7px; font-size: 17px; letter-spacing: -.4px; }.rollout-list p { max-width: 180px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.why-section { background: #efeff1; }.why-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 80px; }.why-head h2 { max-width: 490px; }.why-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 25px; }.why-list article { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 19px 0; border-top: 1px solid #d8dade; }.why-list span { color: var(--red); font-size: 10px; font-weight: 850; }.why-list p { margin: 0; color: #454a53; font-size: 14px; font-weight: 580; line-height: 1.55; }

.final-cta { position: relative; overflow: hidden; padding: 109px 0; color: #fff; background: #17191d; text-align: center; }.final-cta::before, .final-cta::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; }.final-cta::before { top: -285px; left: -175px; width: 590px; height: 590px; }.final-cta::after { right: -110px; bottom: -285px; width: 490px; height: 490px; }.final-cta-inner { position: relative; z-index: 1; max-width: 760px; }.final-cta-inner .eyebrow { justify-content: center; }.final-cta h2 { font-size: clamp(35px, 4.6vw, 53px); }.final-cta p:not(.eyebrow) { max-width: 580px; margin: 19px auto 30px; color: #b7bcc5; font-size: 17px; }.final-cta .hero-actions { justify-content: center; }

.site-footer { padding: 46px 0 20px; color: #c1c4ca; background: #111318; }.footer-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }.footer-brand .brand-wordmark { color: #fff; }.brand-logo-surface { display: inline-flex; padding: 7px 10px; background: #fff; border-radius: 7px; }.footer-brand p, .footer-contact p { margin: 11px 0 0; color: #8f949d; font-size: 13px; }.footer-links { display: grid; grid-template-columns: repeat(2, max-content); align-content: start; gap: 12px 38px; padding-top: 8px; }.footer-links a { color: #d0d3d8; font-size: 13px; font-weight: 650; }.footer-links a:hover { color: #fff; }.footer-contact { padding-top: 8px; }.footer-contact > span { color: #fff; font-size: 12px; font-weight: 750; }.footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; color: #727781; border-top: 1px solid rgba(255,255,255,.1); font-size: 11px; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
    .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr); gap: 20px; }.hero h1 { letter-spacing: -2.5px; }.hero-product { transform: scale(.9); transform-origin: right center; margin-left: -50px; }.demo-grid { grid-template-columns: repeat(2, 1fr); }.demo-card { min-height: 252px; }.label-layout { gap: 45px; }.why-layout { gap: 45px; }
}

@media (max-width: 820px) {
    .container { width: min(calc(100% - 34px), var(--container)); }.site-header { padding: 13px 0; }.site-nav { position: fixed; top: 69px; right: 17px; left: 17px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 13px; visibility: hidden; background: rgba(255,255,255,.98); border: 1px solid rgba(23,25,29,.09); border-radius: 15px; box-shadow: 0 20px 55px rgba(23,25,29,.14); opacity: 0; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }.site-nav.is-open { visibility: visible; opacity: 1; transform: translateY(0); }.site-nav > a:not(.button) { padding: 11px 10px; }.site-nav > a:not(.button)::after { display: none; }.site-nav .nav-cta { margin: 5px 0 0; }.menu-toggle { display: block; }.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }.menu-toggle.is-open span:nth-child(2) { opacity: 0; }.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }.hero { min-height: auto; padding: 132px 0 57px; }.hero-grid, .label-layout, .why-layout, .split-intro { grid-template-columns: 1fr; gap: 28px; }.hero-copy { max-width: 650px; }.hero-product { min-height: 485px; margin: 0; transform: scale(.94); transform-origin: center top; }.product-board { right: 12px; }.label-layout { gap: 12px; }.brand-config { width: min(100%, 520px); min-height: 390px; margin: 20px auto 0; }.feature-grid { grid-template-columns: repeat(2, 1fr); }.architecture { margin-top: 36px; }.arch-branches { grid-template-columns: repeat(2, 1fr); width: min(100%, 470px); gap: 20px; }.arch-branches::before { top: 0; right: 25%; left: 25%; }.arch-branches .arch-node::before { height: 32px; }.rollout-list { grid-template-columns: repeat(2, 1fr); }.rollout-list li:nth-child(2) { border-right: 0; }.rollout-list li:nth-child(n+3) { border-top: 1px solid var(--line); }.rollout-list li:nth-child(3) { padding-left: 0; }.footer-grid { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
    .brand-logo { --logo-height: 30px; }.brand-wordmark { font-size: 29px; }.hero { padding-top: 117px; }.hero h1 { font-size: clamp(39px, 11vw, 47px); letter-spacing: -2.2px; }.hero-lead { margin: 20px 0 25px; font-size: 16px; }.hero-actions { display: grid; grid-template-columns: 1fr; }.button { width: 100%; }.trust-line { align-items: flex-start; font-size: 12px; }.hero-product { min-height: 387px; transform: none; }.product-board { top: 41px; right: 0; width: 100%; transform: none; }.board-content { padding: 18px 14px; }.board-sidebar { width: 35px; }.metric { padding: 8px; }.metric strong { font-size: 16px; }.order-row { grid-template-columns: 1fr 1.2fr; font-size: 8px; }.order-row .status { display: none; }.portal-card { bottom: 0; left: -5px; width: 202px; }.tracking-card { right: -4px; bottom: 13px; width: 150px; }.payment-card { top: 0; left: -2px; transform: scale(.87); transform-origin: top left; }.section { padding: 78px 0; }.section-intro { margin-bottom: 31px; }.section-intro h2, .label-copy h2, .why-head h2 { font-size: 34px; letter-spacing: -1.5px; }.split-intro > p { font-size: 15px; }.feature-grid, .demo-grid, .why-list { grid-template-columns: 1fr; }.feature-card { min-height: auto; padding: 23px; }.label-section { padding: 83px 0; }.label-copy > p:not(.eyebrow) { font-size: 15px; }.brand-config { min-height: 319px; margin-top: 8px; transform: scale(.92); transform-origin: center top; margin-bottom: -22px; }.config-window { left: 3px; right: 3px; }.tag-two { right: -8px; }.architecture { transform: scale(.91); transform-origin: center top; margin-bottom: -20px; }.arch-node { min-width: 125px; padding: 15px 8px; }.arch-customer { min-width: 170px; }.arch-branches { gap: 12px; }.arch-branches .arch-node { min-width: 0; }.demo-card { min-height: 225px; }.rollout-list { grid-template-columns: 1fr; margin-top: 28px; }.rollout-list li, .rollout-list li:not(:first-child), .rollout-list li:nth-child(3) { display: grid; grid-template-columns: 45px 1fr; gap: 8px; min-height: auto; padding: 20px 0; border-right: 0; border-top: 1px solid var(--line); }.rollout-list li:first-child { border-top: 0; }.rollout-list span { margin: 3px 0 0; }.rollout-list h3 { font-size: 16px; }.rollout-list p { max-width: none; }.why-list { gap: 0; }.final-cta { padding: 80px 0; text-align: left; }.final-cta-inner .eyebrow, .final-cta .hero-actions { justify-content: flex-start; }.final-cta h2 { font-size: 36px; letter-spacing: -1.6px; }.final-cta p:not(.eyebrow) { margin-left: 0; font-size: 15px; }.footer-grid { grid-template-columns: 1fr; gap: 28px; }.footer-links { padding: 0; }.footer-contact { padding: 0; }.footer-bottom { display: grid; gap: 5px; }.site-header.is-scrolled { padding: 10px 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}