@font-face {
  font-family:Plus Jakarta Sans;
  src:url('/fonts/plus-jakarta-sans-700-latin.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
}
@font-face {
  font-family:Plus Jakarta Sans;
  src:url('/fonts/plus-jakarta-sans-700-vietnamese.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family:Be Vietnam Pro;
  src:url('/fonts/be-vietnam-pro-400-vietnamese.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family:Be Vietnam Pro;
  src:url('/fonts/be-vietnam-pro-400-latin.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:Be Vietnam Pro;
  src:url('/fonts/be-vietnam-pro-700-vietnamese.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family:Be Vietnam Pro;
  src:url('/fonts/be-vietnam-pro-700-latin.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
}
:root {
  --blue:#0666e8;
  --blue-dark:#004cb7;
  --ink:#142b46;
  --muted:#586b7e;
  --line:#e1e8ef;
  --wash:#f3f7fc;
  --white:#fff;
  --green:#087966;
  --radius:24px;
  --shadow:0 16px 48px #17355e0d;
  --shadow-soft:0 8px 28px #17355e0a;
  --motion-ease:cubic-bezier(.2,.75,.25,1);
  --motion-fast:180ms;
  --motion-reveal:600ms;
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--white);
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}
body {
  margin:0;
  -webkit-font-smoothing:antialiased;
}
a {
  color:inherit;
  text-decoration:none;
}
button,select {
  font:inherit;
}
img {
  max-width:100%;
  height:auto;
  display:block;
}
h1,h2,h3,.brand>span {
  font-family:"Plus Jakarta Sans","Be Vietnam Pro",system-ui,sans-serif;
}
h1,h2,h3,p,figure {
  margin:0;
}
p {
  line-height:1.8;
  color:var(--muted);
}
h2 {
  font-size:clamp(28px,3vw,40px);
  line-height:1.4;
  letter-spacing:-1.4px;
}
h3 {
  font-size:20px;
  line-height:1.5;
  letter-spacing:-.4px;
}
.container {
  width:min(1248px,calc(100% - 96px));
  margin-inline:auto;
}
.section {
  padding-block:96px;
}
.icon {
  width:24px;
  height:24px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.blue,.text-link {
  color:var(--blue);
}
.eyebrow {
  font-size:11px;
  letter-spacing:1.5px;
  font-weight:700;
  color:var(--blue);
  line-height:1.8;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:20;
  padding:12px 20px;
  background:var(--white);
  border:2px solid var(--blue);
  border-radius:8px;
}
.skip-link:focus {
  top:12px;
}
:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px;
}
a,summary,select {
  touch-action:manipulation;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:56px;
  padding:16px 24px;
  background:var(--blue);
  color:var(--white);
  font-size:14px;
  line-height:1.5;
  font-weight:700;
  border-radius:12px;
  transition:background .2s,transform .2s;
  text-align:center;
}
.button:hover {
  background:var(--blue-dark);
  transform:translateY(-2px);
}
.button-small {
  min-height:44px;
  padding:12px 18px;
  font-size:12px;
}
.text-link {
  display:inline-flex;
  gap:12px;
  align-items:center;
  font-size:14px;
  font-weight:700;
  line-height:1.7;
}
.text-link:hover {
  color:var(--blue-dark);
  text-decoration:underline;
  text-underline-offset:5px;
}
.status-dot {
  width:7px;
  height:7px;
  display:inline-block;
  border-radius:50%;
  background:var(--green);
  flex-shrink:0;
}
.site-header {
  position:sticky;
  top:0;
  z-index:10;
  background:#fffffff2;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner {
  min-height:88px;
  display:flex;
  align-items:center;
  gap:40px;
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  flex-shrink:0;
}
.brand>span {
  font-size:25px;
  font-weight:700;
  letter-spacing:-1px;
}
.brand img, .screen-top img {
  border-radius:22%;
}
.brand-dot {
  color:var(--blue);
}
.main-nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:13px;
  font-weight:700;
}
.main-nav a,.login-link {
  padding-block:12px;
}
.main-nav a:hover,.login-link:hover {
  color:var(--blue);
}
.mobile-nav {
  display:none;
}
.mobile-nav-toggle {
  cursor:pointer;
  border:0;
  font:inherit;
}
.mobile-nav-panel {
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:20;
  display:grid;
  gap:4px;
  width:min(220px,calc(100vw - 32px));
  padding:8px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--white);
  box-shadow:0 16px 40px #17355e1c;
}
.mobile-nav-panel[hidden] {
  display:none;
}
.mobile-nav-panel a {
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
}
.mobile-nav-panel a:hover {
  color:var(--blue);
  background:var(--wash);
}
.header-actions {
  margin-left:auto;
  display:flex;
  gap:20px;
  align-items:center;
}
.language-control {
  display:flex;
  align-items:center;
  gap:5px;
}
.language-control select {
  max-width:108px;
  min-height:44px;
  font-size:12px;
  border:0;
  color:var(--muted);
  background:transparent;
  cursor:pointer;
}
.login-link {
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.hero {
  background:linear-gradient(130deg,#eef5ff 0%,#f6faff 60%,#eff8f4 100%);
  overflow-x:clip;
  padding-top:64px;
  position:relative;
  margin-bottom:56px;
}
.hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  padding-bottom:80px;
}
.hero-copy .eyebrow {
  display:flex;
  gap:9px;
  align-items:center;
  letter-spacing:1.2px;
}
h1 {
  font-size:clamp(40px,3.65vw,54px);
  letter-spacing:-2px;
  line-height:1.32;
  font-weight:700;
  margin-top:20px;
}
h1>span {
  display:block;
}
.hero-description {
  font-size:16px;
  margin-top:24px;
  max-width:530px;
  line-height:1.9;
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:center;
  margin-top:32px;
}
.explore-link {
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size:13px;
  font-weight:700;
}
.explore-link:hover {
  color:var(--blue);
}
.play-icon {
  width:36px;
  height:36px;
  border:1px solid #c6d9f1;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--blue);
  font-size:11px;
}
.hero-note {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:11px;
  margin-top:32px;
}
.hero-note .icon {
  width:17px;
  height:17px;
  color:var(--blue);
}
.hero-visual {
  position:relative;
  padding:12px 0 44px 20px;
  min-width:0;
  isolation:isolate;
}
.hero-photo {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border:6px solid var(--white);
  border-radius:32px;
  box-shadow:0 24px 64px #17355e12;
}
.sync-badge {
  display:flex;
  gap:12px;
  align-items:center;
  position:absolute;
  right:-16px;
  top:-12px;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:14px;
  padding:14px 18px;
  max-width:92%;
}
.sync-badge strong {
  font-size:11px;
  display:block;
  line-height:1.6;
}
.sync-badge div>span {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:2px;
}
.sync-icon {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e7f6ef;
  color:var(--green);
  flex-shrink:0;
}
.sync-icon .icon {
  width:20px;
  height:20px;
}
.hero-visual figcaption {
  text-align:right;
  font-size:9px;
  line-height:1.6;
  color:var(--muted);
  padding-top:10px;
}
.benefits {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:32px;
  position:relative;
  margin-bottom:-56px;
  transform:translateY(0);
}
.benefit {
  display:flex;
  align-items:flex-start;
  gap:15px;
}
.benefit+.benefit {
  border-left:1px solid var(--line);
  padding-left:28px;
}
.benefit-icon {
  color:var(--blue);
  background:#eff5ff;
  padding:10px;
  border-radius:12px;
  display:grid;
  place-items:center;
}
.benefit h2 {
  font-size:14px;
  line-height:1.6;
  letter-spacing:0;
  margin-bottom:6px;
}
.benefit p {
  font-size:13px;
  line-height:1.8;
}
.section-heading {
  text-align:center;
  max-width:720px;
  margin:0 auto 40px;
}
.section-heading h2 {
  margin-top:12px;
}
.section-heading>p:last-child {
  font-size:15px;
  margin-top:16px;
}
.solution-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.solution-card {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:28px;
  padding:0;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.solution-icon {
  position:absolute;
  left:20px;
  bottom:16px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid #ffffff80;
  border-radius:14px;
  background:#fffffff2;
  color:var(--blue);
  box-shadow:0 4px 16px #142b4610;
}
.solution-icon .icon {
  width:24px;
  height:24px;
}
.solution-number {
  position:absolute;
  top:28px;
  right:24px;
  font-size:11px;
  letter-spacing:1px;
  color:var(--muted);
}
.solution-card p {
  font-size:14px;
  margin:12px 0 20px;
}
.solution-card a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  font-weight:700;
  color:var(--blue);
  margin-top:auto;
  min-height:44px;
}
.solution-card a:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}
.cafe {
  background:var(--white);
}
.cafe .solution-icon {
  background:#fffffff2;
  color:var(--green);
}
.cafe a {
  color:var(--green);
}
.buffet {
  background:var(--white);
}
.buffet .solution-icon {
  background:#fffffff2;
  color:#a54e0b;
}
.buffet a {
  color:#a54e0b;
}
.workflow-section {
  padding-block:80px;
  background:linear-gradient(180deg,var(--wash),#f8fbff);
}
.workflow-grid {
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:32px 64px;
  align-items:center;
}
.workflow-intro h2 {
  margin:8px 0 0;
  font-size:clamp(28px,2.7vw,36px);
  line-height:1.25;
  letter-spacing:-1.1px;
  text-wrap:balance;
}
.workflow-summary>p {
  font-size:14px;
  line-height:1.65;
}
.workflow-intro .text-link {
  margin-top:14px;
}
.workflow-footnote {
  margin-top:12px;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:12px;
}
.workflow-steps {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.workflow-steps li {
  min-width:0;
}
.workflow-step {
  display:flex;
  gap:18px;
  align-items:center;
  width:100%;
  padding:16px;
  border:1px solid transparent;
  border-radius:18px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast);
}
.workflow-step:hover {
  background:#ffffffb8;
  border-color:var(--line);
}
.workflow-step.is-active {
  background:var(--white);
  border-color:#c9dcf6;
  box-shadow:0 12px 32px #17355e0d;
}
.workflow-step:focus-visible {
  outline:3px solid #7eb5ff;
  outline-offset:2px;
}
.step-number {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex-shrink:0;
  border-radius:50%;
  color:var(--blue);
  background:#eef5ff;
  font-size:12px;
  font-weight:700;
  transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast);
}
.workflow-step.is-active .step-number {
  color:var(--white);
  background:var(--blue);
  transform:scale(1.06);
}
.workflow-step-copy {
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:6px;
}
.workflow-step-title {
  color:var(--ink);
  font-size:17px;
  font-weight:700;
  line-height:1.4;
}
.workflow-step-description {
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.workflow-step>.icon {
  color:var(--blue);
  margin-left:auto;
  width:22px;
  height:22px;
  flex-shrink:0;
  transition:transform var(--motion-fast);
}
.workflow-step.is-active>.icon {
  transform:translateX(3px);
}
.workflow-stage {
  position:relative;
  aspect-ratio:1.3;
  overflow:hidden;
  border:6px solid var(--white);
  border-radius:32px;
  background:#e8f0f8;
  box-shadow:var(--shadow);
}
.workflow-scene {
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(10px) scale(1.015);
  transition:opacity 700ms var(--motion-ease),transform 900ms var(--motion-ease);
}
.workflow-scene.is-active {
  opacity:1;
  transform:none;
}
.workflow-scene>img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.workflow-scene-badge {
  position:absolute;
  left:20px;
  bottom:20px;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:calc(100% - 40px);
  padding:12px 14px;
  border:1px solid #ffffffb3;
  border-radius:18px;
  background:#fffffff2;
  box-shadow:0 16px 48px #17355e1a;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.workflow-scene-badge .app-icon {
  width:40px;
  height:40px;
  border-radius:12px;
}
.workflow-scene-badge strong {
  display:block;
  color:var(--ink);
  font-size:12px;
  line-height:1.6;
}
.workflow-scene-badge p {
  margin:2px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.6;
}
.workflow-scene-badge .status-dot {
  margin-left:4px;
}
.app-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.app-link {
  display:flex;
  align-items:center;
  gap:18px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:16px;
  transition:border-color .2s,background .2s;
}
.app-link:hover {
  border-color:var(--blue);
  background:#f7faff;
}
.app-icon {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  background:#eef5ff;
  color:var(--blue);
  border-radius:14px;
  flex-shrink:0;
}
.app-link h3 {
  font-size:16px;
  letter-spacing:0;
}
.app-link p {
  font-size:12px;
  margin-top:5px;
}
.app-link .arrow {
  margin-left:auto;
  color:var(--blue);
  width:20px;
}
.faq-section {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:96px;
  border-top:1px solid var(--line);
  padding-top:72px;
}
.faq-section h2 {
  font-size:32px;
  margin:14px 0 24px;
}
.faq-list details {
  border-bottom:1px solid var(--line);
}
.faq-list details:first-child {
  border-top:1px solid var(--line);
}
summary {
  cursor:pointer;
  padding:22px 24px 22px 0;
  font-size:14px;
  font-weight:700;
  line-height:1.7;
  position:relative;
  list-style:none;
}
summary::-webkit-details-marker {
  display:none;
}
summary::after {
  content:'+';
  position:absolute;
  right:0;
  top:22px;
  color:var(--blue);
  font-size:20px;
  line-height:1.2;
}
details[open] summary::after {
  content:'−';
}
.faq-list p {
  font-size:13px;
  padding:0 24px 24px 0;
}
.contact-section {
  background:var(--blue);
  color:var(--white);
  padding-block:64px;
  overflow:hidden;
}
.contact-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.contact-inner>div:first-child {
  max-width:720px;
}
.contact-section .eyebrow {
  color:#d4e5ff;
}
.contact-section h2 {
  font-size:clamp(30px,3.2vw,44px);
  margin:14px 0 16px;
  letter-spacing:-1px;
}
.contact-section p:not(.eyebrow) {
  color:#e0edff;
  font-size:14px;
}
.button-white {
  background:var(--white);
  color:var(--blue);
  margin-top:28px;
}
.button-white:hover {
  background:#eaf2ff;
}
.contact-brand {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding-right:40px;
}
.contact-brand img {
  width:108px;
  transform:rotate(-8deg);
  border-radius:28px;
  box-shadow:0 0 0 24px #ffffff0d,0 0 0 48px #ffffff08;
}
.contact-brand span {
  font-size:24px;
  font-weight:700;
  letter-spacing:-1px;
  margin-top:18px;
}
.site-footer {
  padding-block:40px 28px;
}
.footer-top {
  display:flex;
  align-items:center;
  gap:24px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
}
.footer-top .brand>span {
  font-size:22px;
}
.footer-top p {
  font-size:12px;
}
.footer-top>.text-link {
  margin-left:auto;
  font-size:12px;
}
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:24px;
  font-size:11px;
  color:var(--muted);
}
.footer-bottom nav {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.footer-bottom a {
  padding-block:10px;
}
.footer-bottom a:hover {
  color:var(--blue);
}

.hero-visual::before {
  content:"";
  position:absolute;
  inset:0 -16px 24px 0;
  z-index:-1;
  border-radius:48% 52% 44% 56%;
  background:linear-gradient(150deg,#d3e9ff,#dff3ed);
  transform:rotate(5deg);
}
.hero-visual::after {
  content:"";
  position:absolute;
  left:-12px;
  bottom:40px;
  width:88px;
  height:88px;
  z-index:-1;
  background-image:radial-gradient(#8db8e9 1.5px,transparent 1.5px);
  background-size:12px 12px;
}
.solution-media {
  position:relative;
  aspect-ratio:1.6;
  overflow:hidden;
  background:var(--wash);
}
.solution-media>img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.solution-content {
  position:relative;
  display:flex;
  flex:1;
  flex-direction:column;
  padding:24px;
}
.solution-content h3 {
  padding-right:24px;
  font-size:20px;
}
.workflow-intro {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;
  column-gap:clamp(24px,4vw,56px);
  grid-column:1/-1;
  max-width:none;
  margin:0;
  text-align:left;
}
.workflow-visual {
  position:relative;
  min-width:0;
}
.kitchen-tickets {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:14px;
}
.kitchen-tickets>div {
  padding:10px;
  border:1px solid var(--line);
  border-top:3px solid #7db2ef;
  border-radius:8px;
  background:var(--white);
}
.kitchen-tickets>div:nth-child(2) {
  border-top-color:#e6b366;
}
.kitchen-tickets>div:nth-child(3) {
  border-top-color:#73bea8;
}
.kitchen-tickets b {
  display:block;
  font-size:10px;
}
.kitchen-tickets i {
  display:block;
  height:4px;
  margin-top:8px;
  border-radius:4px;
  background:var(--line);
}
.kitchen-tickets i+i {
  width:65%;
  margin-top:4px;
}
.kitchen-tickets span {
  display:block;
  height:12px;
  margin-top:12px;
  border-radius:3px;
  background:#e3f0ff;
  color:var(--green);
  font-size:9px;
  line-height:12px;
  text-align:center;
}
.kitchen-tickets>div:last-child span {
  background:#e0f3eb;
}
.button:active {
  transform:scale(.98);
}
.button .icon,.text-link .icon,.app-link>.arrow {
  transition:transform var(--motion-fast) var(--motion-ease);
}
.button:hover .icon,.text-link:hover .icon,.app-link:hover>.arrow {
  transform:translateX(4px);
}
@media (hover:hover) and (pointer:fine) {
  .solution-card {
    transition:transform 300ms var(--motion-ease),box-shadow 300ms var(--motion-ease),border-color 300ms;
  }
  .solution-media>img {
    transition:transform 650ms var(--motion-ease);
  }
  .solution-card:hover {
    transform:translateY(-6px);
    border-color:#c3d6ec;
    box-shadow:0 20px 48px #17355e14;
  }
  .solution-card:hover .solution-media>img {
    transform:scale(1.045);
  }
  .app-link:hover {
    box-shadow:var(--shadow-soft);
  }
}
@media (prefers-reduced-motion:no-preference) {
  .hero-copy {
    animation:hero-enter 700ms var(--motion-ease) both;
  }
  .hero-visual {
    animation:hero-enter 900ms 100ms var(--motion-ease) both;
  }
  .scroll-reveal {
    transition:opacity var(--motion-reveal) var(--motion-ease),transform var(--motion-reveal) var(--motion-ease);
    transition-delay:var(--reveal-delay,0ms);
  }
  .reveal-pending {
    opacity:0;
    transform:translateY(24px);
  }
  .scroll-reveal:focus-within {
    opacity:1;
    transform:none;
    transition:none;
  }
  .solution-card:nth-child(2),.workflow-steps li:nth-child(2),.app-link:nth-child(2) {
    --reveal-delay:50ms;
  }
  .solution-card:nth-child(3),.workflow-steps li:nth-child(3),.app-link:nth-child(3) {
    --reveal-delay:100ms;
  }
  .workflow-steps li:nth-child(4),.app-link:nth-child(4) {
    --reveal-delay:150ms;
  }
}
@keyframes hero-enter {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}

@media(min-width:1500px) {
  .hero-grid {
    gap:80px;
  }
  .hero {
    padding-top:96px;
  }
}
@media(max-width:1199px) {
  .container {
    width:calc(100% - 64px);
  }
  .header-inner {
    gap:24px;
  }
  .main-nav {
    gap:18px;
    font-size:12px;
  }
  .header-actions {
    gap:14px;
  }
  .header-actions>.button {
    display:none;
  }
  .hero-grid {
    gap:32px;
  }
  h1 {
    font-size:42px;
  }
  .hero-actions {
    gap:16px;
  }
  .hero-actions .button {
    font-size:12px;
    padding:14px 18px;
  }
  .explore-link {
    font-size:12px;
  }
  .hero-note {
    font-size:10px;
  }
  .sync-badge {
    right:-8px;
  }
  .benefits {
    padding:28px;
    gap:18px;
  }
  .benefit+.benefit {
    padding-left:18px;
  }
  .benefit {
    gap:12px;
  }
  .benefit-icon {
    padding:8px;
  }
  .benefit h2 {
    font-size:13px;
  }
  .workflow-grid,.faq-section {
    gap:48px;
  }
  .workflow-grid {
    gap:28px 40px;
  }
  .solution-card {
    padding:0;
  }
  .solution-card h3 {
    font-size:18px;
  }
}
@media(max-width:767px) {
  html {
    scroll-padding-top:140px;
  }
  .container {
    width:calc(100% - 40px);
  }
  .site-header .container {
    width:calc(100% - 32px);
  }
  .header-inner {
    min-height:100px;
    flex-wrap:wrap;
    gap:0 16px;
    padding-top:10px;
  }
  .brand>span {
    font-size:23px;
  }
  .brand img {
    width:32px;
    height:32px;
  }
  .main-nav {
    order:3;
    flex:0 0 100%;
    gap:24px;
    justify-content:center;
    font-size:11px;
    min-height:44px;
  }
  .header-actions {
    gap:14px;
  }
  .language-control select {
    font-size:11px;
    max-width:98px;
  }
  .login-link {
    font-size:11px;
  }
  .hero {
    padding-top:40px;
    margin-bottom:0;
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:48px;
    padding-bottom:32px;
  }
  .hero-copy .eyebrow {
    font-size:9px;
    letter-spacing:1px;
  }
  h1 {
    font-size:clamp(34px,6.8vw,46px);
    letter-spacing:-1.5px;
    margin-top:16px;
  }
  .hero-description {
    font-size:14px;
    margin-top:20px;
  }
  .hero-actions {
    margin-top:24px;
    gap:20px;
  }
  .hero-actions .button {
    font-size:12px;
    min-height:52px;
  }
  .hero-note {
    margin-top:24px;
    font-size:10px;
  }
  .hero-visual {
    width:100%;
    max-width:560px;
    margin:auto;
    padding:0 0 40px 16px;
  }
  .hero-photo {
    border-radius:24px 24px 60px 24px;
  }
  .sync-badge {
    top:-20px;
    right:-4px;
    padding:10px 12px;
    gap:10px;
  }
  .sync-badge strong {
    font-size:10px;
  }
  .sync-badge div>span {
    font-size:9px;
  }
  .hero-visual figcaption {
    font-size:8px;
  }
  .benefits {
    grid-template-columns:1fr;
    padding:24px;
    border-radius:20px;
    gap:20px;
    margin-bottom:0;
    box-shadow:none;
  }
  .benefit+.benefit {
    padding:20px 0 0;
    border-left:0;
    border-top:1px solid var(--line);
  }
  .benefit h2 {
    font-size:14px;
  }
  .benefit p {
    font-size:12px;
  }
  .section {
    padding-block:64px;
  }
  .section-heading {
    margin-bottom:28px;
  }
  .section-heading h2 {
    letter-spacing:-.8px;
    font-size:28px;
  }
  .section-heading>p:last-child {
    font-size:13px;
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1px;
  }
  .solution-grid {
    grid-template-columns:1fr;
    gap:16px;
  }
  .solution-card {
    padding:0;
  }
  .solution-icon {
    width:44px;
    height:44px;
  }
  .solution-card h3 {
    font-size:20px;
  }
  .solution-card p {
    margin-bottom:16px;
  }
  .workflow-section {
    padding-block:56px;
  }
  .workflow-grid {
    grid-template-columns:1fr;
    gap:32px;
  }
  .workflow-intro h2 {
    font-size:28px;
    letter-spacing:-.8px;
    line-height:1.25;
    margin:8px 0 0;
    text-wrap:balance;
  }
  .workflow-intro {
    display:block;
    text-align:left;
  }
  .workflow-intro .text-link {
    margin-top:16px;
  }
  .workflow-footnote {
    justify-content:flex-start;
    margin-top:12px;
  }
  .workflow-step {
    padding:16px;
    gap:12px;
  }
  .workflow-step>.icon {
    display:none;
  }
  .workflow-step-title {
    font-size:14px;
  }
  .workflow-step-description {
    font-size:12px;
  }
  .app-grid {
    grid-template-columns:1fr;
    gap:12px;
  }
  .app-link {
    padding:20px;
    gap:14px;
  }
  .app-link h3 {
    font-size:15px;
  }
  .app-link p {
    font-size:11px;
  }
  .app-icon {
    width:44px;
    height:44px;
    border-radius:12px;
  }
  .faq-section {
    grid-template-columns:1fr;
    gap:24px;
    padding-top:48px;
  }
  .faq-section h2 {
    font-size:28px;
  }
  .faq-list summary {
    font-size:13px;
  }
  .contact-section {
    padding-block:48px;
  }
  .contact-brand {
    display:none;
  }
  .contact-section h2 {
    font-size:30px;
  }
  .contact-section p:not(.eyebrow) {
    font-size:13px;
  }
  .contact-inner {
    display:block;
  }
  .footer-top {
    flex-wrap:wrap;
    gap:16px;
  }
  .footer-top p {
    font-size:11px;
  }
  .footer-top>.text-link {
    margin-left:0;
    flex-basis:100%;
  }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .footer-bottom nav {
    gap:8px 20px;
  }
  .footer-bottom a {
    display:inline-block;
  }
  .hero {
    padding-bottom:32px;
  }
}
@media(max-width:359px) {
  .header-actions {
    gap:8px;
  }
  .brand>span {
    font-size:20px;
  }
  .language-control select {
    max-width:86px;
  }
  .hero-actions {
    gap:16px;
  }
  .explore-link {
    font-size:11px;
  }
  .hero-actions .button {
    padding-inline:14px;
  }
  .sync-badge {
    max-width:96%;
  }
  .container {
    width:calc(100% - 32px);
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
  }
}

@media(max-width:767px) {
  .hero-photo { border-radius:28px; }
  .hero-description { font-size:16px; line-height:1.8; }
  .solution-content { padding:24px; }
  .solution-card p,.workflow-summary>p,.workflow-step-description,.faq-list p { font-size:16px; }
  .workflow-summary>p { line-height:1.65; }
  .workflow-grid { gap:28px; }
  .workflow-intro { margin-bottom:0; }
  .workflow-step { gap:14px; padding:16px 12px; }
  .workflow-step-title { font-size:16px; }
  .workflow-stage { aspect-ratio:1.25; border-radius:28px; }
  .workflow-scene-badge { left:12px; bottom:12px; gap:10px; max-width:calc(100% - 24px); padding:10px; }
  .workflow-scene-badge .app-icon { width:36px; height:36px; }
  .hero-visual::before { inset:0 -8px 40px 8px; }
  .hero-visual::after { left:0; bottom:48px; width:60px; height:60px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; }
  .reveal-pending { opacity:1; transform:none; }
}

/* The first scene remains readable without JavaScript or automatic playback. */
.hero-visual {
  padding-bottom:44px;
}
.hero-stage {
  position:relative;
  width:100%;
  aspect-ratio:4/3;
}
.hero-scene {
  position:absolute;
  inset:0;
  opacity:0;
  transform:translate3d(22px,10px,0) scale(.975);
  filter:blur(4px);
  pointer-events:none;
  transition:opacity 900ms ease-in-out,transform 1150ms var(--motion-ease),filter 900ms ease-in-out;
}
.hero-scene.is-active {
  opacity:1;
  transform:none;
  filter:none;
}
.hero-stage .hero-photo {
  width:100%;
  height:100%;
}
.hero-app-screen {
  position:absolute;
  z-index:1;
  bottom:-20px;
  left:-16px;
  width:min(56%,340px);
  filter:drop-shadow(0 18px 26px #15345240);
  transform:rotate(-3deg);
}
@media(prefers-reduced-motion:no-preference) {
  .hero-scene.is-active .hero-app-screen {
    animation:hero-device-enter 1300ms var(--motion-ease) both;
  }
}
@keyframes hero-device-enter {
  from { opacity:.4; transform:translateY(18px) rotate(-6deg); }
  to { opacity:1; transform:translateY(0) rotate(-3deg); }
}
@media(max-width:767px) {
  .hero-visual { padding-bottom:24px; }
  .hero-app-screen { bottom:-10px; left:0; width:44%; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-scene { transition:none; transform:none; filter:none; }
}

.site-header {
  padding:8px 0;
  background:transparent;
  border:0;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.header-inner {
  min-height:68px;
  padding:8px 18px;
  border:1px solid #e1e8efcc;
  border-radius:999px;
  background:#ffffffed;
  box-shadow:0 10px 34px #17355e0d;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  transition:box-shadow 220ms var(--motion-ease),border-color 220ms var(--motion-ease);
}
.header-inner:focus-within,.site-header:hover .header-inner {
  border-color:#cbdcf1;
  box-shadow:0 14px 40px #17355e14;
}
.main-nav {
  gap:3px;
  padding:4px;
  border-radius:999px;
  background:#f3f7fc;
}
.main-nav a {
  padding:9px 13px;
  border-radius:999px;
  transition:background 180ms,color 180ms,box-shadow 180ms;
}
.main-nav a:hover {
  color:var(--blue);
  background:var(--white);
  box-shadow:0 2px 8px #17355e0a;
}
.header-actions {
  gap:10px;
}
.language-control {
  min-height:40px;
  padding:0 9px;
  border-radius:999px;
  transition:background 180ms;
}
.language-control:hover {
  background:#f3f7fc;
}
.login-link {
  padding:10px 12px;
  border-radius:999px;
  transition:background 180ms,color 180ms;
}
.login-link:hover {
  background:#f1f6ff;
}
.button-small {
  border-radius:999px;
  box-shadow:0 6px 16px #0666e826;
}

.hero-copy .eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 13px 7px 10px;
  border:1px solid #dce8f8;
  border-radius:999px;
  background:#ffffffb8;
  letter-spacing:1px;
}
.hero-copy .eyebrow .status-dot {
  box-shadow:0 0 0 4px #e4f3ed;
}
.benefits {
  gap:14px;
  padding:22px;
}
.benefit {
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:18px;
  transition:background 220ms var(--motion-ease),transform 220ms var(--motion-ease);
}
.benefit+.benefit {
  padding-left:14px;
  border:0;
}
.benefit:hover {
  transform:translateY(-2px);
  background:linear-gradient(135deg,#f6f9ff,#fbfdfc);
}
.benefit-illustration {
  display:grid;
  place-items:center;
  flex:0 0 72px;
  width:72px;
  height:72px;
  border-radius:20px;
  background:linear-gradient(145deg,#eef4fd,#f8fbff 70%);
  transition:transform 240ms var(--motion-ease),background 240ms;
}
.benefit-illustration img {
  width:72px;
  height:72px;
  object-fit:contain;
  transition:transform 300ms var(--motion-ease);
}
.benefit:hover .benefit-illustration {
  transform:rotate(-3deg);
  background:linear-gradient(145deg,#e7f0fc,#f7fbff 70%);
}
.benefit:hover .benefit-illustration img {
  transform:scale(1.06);
}

.section-heading .eyebrow {
  display:inline-flex;
  padding:5px 10px;
  border:1px solid #e1eafb;
  border-radius:999px;
  background:#f4f8ff;
}
.app-grid {
  gap:14px;
}
.app-link {
  position:relative;
  min-height:112px;
  gap:16px;
  padding:18px 20px;
  overflow:hidden;
  border-color:#e3eaf2;
  border-radius:20px;
  background:linear-gradient(135deg,#fff 20%,#fbfdff 100%);
  box-shadow:0 6px 22px #17355e08;
  transition:transform 220ms var(--motion-ease),border-color 220ms,background 220ms,box-shadow 220ms;
}
.app-link::before {
  position:absolute;
  z-index:0;
  top:-52px;
  right:-46px;
  width:138px;
  height:138px;
  border-radius:50%;
  background:radial-gradient(circle,#edf4ff 0%,#f7faff80 55%,transparent 72%);
  content:"";
  transition:transform 320ms var(--motion-ease),opacity 220ms;
}
.app-link>* {
  position:relative;
  z-index:1;
}
.app-link:hover {
  transform:translateY(-3px);
  border-color:#cbdcf1;
  background:#fff;
  box-shadow:0 16px 36px #17355e12;
}
.app-link:hover::before {
  transform:scale(1.25);
}
.app-link:active {
  transform:translateY(-1px) scale(.995);
}
.app-illustration {
  display:grid;
  place-items:center;
  flex:0 0 68px;
  width:68px;
  height:68px;
  border-radius:20px;
  transition:transform 240ms var(--motion-ease);
}
.app-illustration img {
  width:68px;
  height:68px;
  object-fit:contain;
  transition:transform 280ms var(--motion-ease);
}
.app-link:hover .app-illustration img {
  transform:translateY(-2px) rotate(-3deg) scale(1.04);
}
.app-link h3 {
  transition:color 180ms;
}
.app-link:hover h3 {
  color:var(--blue-dark);
}
.app-link .arrow {
  transition:transform 200ms var(--motion-ease),color 200ms;
}
.app-link:hover .arrow {
  transform:translateX(4px);
  color:var(--blue-dark);
}

@media(max-width:767px) {
  .site-header {
    padding:6px 0;
    z-index:30;
  }
  .header-inner {
    position:relative;
    min-height:0;
    flex-wrap:nowrap;
    gap:8px;
    padding:8px 10px;
    border-radius:22px;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .brand {
    gap:7px;
  }
  .brand>span {
    font-size:21px;
  }
  .brand img {
    width:30px;
    height:30px;
  }
  .header-actions {
    display:none;
  }
  .main-nav {
    display:none;
  }
  .mobile-nav {
    position:static;
    display:block;
    order:2;
    flex-shrink:0;
    margin-left:auto;
  }
  .mobile-nav-toggle {
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    padding:0;
    border-radius:15px;
    background:transparent;
    color:var(--ink);
    transition:background 180ms,color 180ms;
  }
  .mobile-nav-toggle .icon {
    width:22px;
    height:22px;
  }
  .menu-close-icon {
    display:none;
  }
  .mobile-nav.is-open>.mobile-nav-toggle {
    background:#eaf2ff;
    color:var(--blue);
  }
  .mobile-nav.is-open .menu-open-icon {
    display:none;
  }
  .mobile-nav.is-open .menu-close-icon {
    display:block;
  }
  .mobile-nav-panel {
    position:fixed;
    inset:74px 0 0;
    z-index:31;
    display:flex;
    flex-direction:column;
    gap:0;
    width:auto;
    max-height:none;
    padding:14px 24px calc(24px + env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
    border:0;
    border-radius:0;
    background:linear-gradient(180deg,#f6f9ff 0%,#fff 58%,#fffaf8 100%);
    box-shadow:none;
  }
  .mobile-nav-links {
    display:grid;
    flex:0 0 auto;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:20px;
    background:#fff;
    box-shadow:0 12px 32px #17355e0b;
  }
  .mobile-nav-panel .mobile-nav-links a {
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 20px;
    gap:14px;
    min-height:70px;
    padding:11px 16px;
    border-bottom:1px solid #e9eef5;
    border-radius:0;
    text-align:left;
    font-size:15px;
    line-height:1.4;
  }
  .mobile-nav-links a:last-child {
    border-bottom:0;
  }
  .mobile-nav-icon {
    display:grid;
    width:42px;
    height:42px;
    place-items:center;
    border-radius:14px;
    background:#edf4ff;
    color:var(--blue);
  }
  .mobile-nav-icon .icon {
    width:21px;
    height:21px;
  }
  .mobile-nav-arrow {
    width:18px;
    height:18px;
    color:#8795a6;
  }
  .mobile-language {
    min-height:48px;
    margin:22px 0 12px;
    padding:0 14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
  }
  .mobile-language select {
    width:100%;
    max-width:none;
    min-height:46px;
    font-size:13px;
  }
  .mobile-nav-actions {
    display:grid;
    gap:8px;
    margin-top:auto;
    padding:10px;
    border:1px solid #e4eaf3;
    border-radius:22px;
    background:rgba(255,255,255,.88);
    box-shadow:0 14px 36px #17355e10;
  }
  .mobile-nav-login {
    display:grid;
    min-height:48px;
    place-items:center;
    border:1px solid #e4eaf3;
    border-radius:15px;
    background:#f5f8fc;
    color:var(--ink);
    font-size:14px;
    font-weight:700;
    transition:background .2s,border-color .2s,color .2s;
  }
  .mobile-nav-login:hover {
    border-color:#d6e5ff;
    background:#edf4ff;
    color:var(--blue);
  }
  .mobile-nav-contact {
    display:flex;
    width:100%;
    min-height:50px;
    justify-content:center;
    border-radius:15px;
    box-shadow:0 9px 20px #0865e82b;
  }
  .mobile-nav.is-open>.mobile-nav-panel {
    animation:mobile-nav-in 180ms var(--motion-ease) both;
  }
  @keyframes mobile-nav-in {
    from { opacity:0; transform:translateY(-8px); }
    to { opacity:1; transform:translateY(0); }
  }
  @media(prefers-reduced-motion:reduce) {
    .mobile-nav.is-open>.mobile-nav-panel { animation:none; }
  }
  .benefits {
    gap:5px;
    padding:12px;
  }
  .benefit,.benefit+.benefit {
    gap:12px;
    padding:10px 8px;
    border:0;
  }
  .benefit-illustration,.benefit-illustration img {
    width:64px;
    height:64px;
  }
  .benefit-illustration {
    flex-basis:64px;
    border-radius:18px;
  }
  .app-link {
    min-height:98px;
    padding:14px;
    gap:12px;
  }
  .app-illustration,.app-illustration img {
    width:60px;
    height:60px;
  }
  .app-illustration {
    flex-basis:60px;
    border-radius:17px;
  }
}

@media(max-width:400px) {
  .mobile-nav-toggle {
    width:44px;
    height:44px;
  }
}

@media(max-width:374px) {
  .header-inner {
    padding-inline:8px;
  }
  .brand>span {
    display:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .benefit:hover,.app-link:hover,.app-link:active { transform:none; }
  .benefit-illustration,.benefit-illustration img,.app-illustration img { transform:none; }
}

.quick-actions {
  position:fixed;
  right:max(24px,calc((100vw - 1248px)/2));
  bottom:24px;
  z-index:24;
  display:flex;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity 180ms var(--motion-ease),transform 180ms var(--motion-ease),visibility 180ms;
}
.quick-actions.is-visible {
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.quick-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:50px;
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 12px 28px #17355e20;
  transition:transform 180ms var(--motion-ease),background 180ms,box-shadow 180ms;
}
.quick-action:hover {
  transform:translateY(-2px);
  box-shadow:0 16px 32px #17355e26;
}
.quick-action .icon { width:19px; height:19px; }
.quick-action-top {
  width:50px;
  height:50px;
  padding:0;
  cursor:pointer;
  background:#ffffffed;
  color:var(--ink);
}
@media(max-width:767px) {
  .quick-actions { right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); }
  .quick-action { min-height:48px; }
  .quick-action-top { width:48px; height:48px; }
}
@media(prefers-reduced-motion:reduce) {
  .quick-actions,.quick-action { transition:none; }
  .quick-action:hover { transform:none; }
}