:root{--ink:#17201d;--muted:#66716b;--paper:#f7f4ed;--panel:#fffdf8;--pink:#f4c7d3;--pink-deep:#d95478;--yellow:#ffe26f;--mint:#c6eadc;--blue:#d9e7f4;--line:#17201d;--shadow:8px 8px 0 var(--line);--radius:28px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}a{color:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--pink-deep);outline-offset:4px}.shell{max-width:1240px;margin:0 auto;padding:24px 32px 72px}.nav{position:sticky;top:12px;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:12px 14px;background:rgba(247,244,237,.9);border:1px solid rgba(23,32,29,.12);border-radius:22px;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:9px;font-size:26px;font-weight:950;letter-spacing:-.08em;text-decoration:none;white-space:nowrap}.brand img{width:34px;height:34px;object-fit:contain}.brand i{font-style:normal;color:var(--pink-deep)}nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap}nav a{text-decoration:none;font-size:14px;font-weight:800}.nav-link{color:var(--muted)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:2px solid var(--line);border-radius:999px;padding:12px 20px;text-decoration:none;font-weight:900;background:var(--yellow);box-shadow:4px 4px 0 var(--line);transition:transform .18s ease,box-shadow .18s ease}.button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}.button.alt{background:var(--panel)}.button.text{border:0;background:transparent;box-shadow:none;padding-left:0;padding-right:0;color:var(--pink-deep)}.hero{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr);gap:76px;align-items:center;padding:108px 0 96px}.eyebrow{font-size:12px;font-weight:950;letter-spacing:.16em;color:var(--pink-deep);text-transform:uppercase}.hero h1,.page h1{font-size:clamp(52px,8vw,104px);line-height:.96;letter-spacing:-.085em;margin:20px 0 26px;max-width:850px}.lead{font-size:20px;line-height:1.65;color:var(--muted);max-width:650px}.actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px}.hero-note{display:flex;gap:10px;align-items:center;margin-top:24px;color:var(--muted);font-size:13px}.hero-note span{width:8px;height:8px;background:var(--pink-deep);border-radius:50%}.hero-visual{position:relative;min-height:500px}.visual-card{position:absolute;border:2px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}.visual-card.main{inset:28px 0 18px 24px;padding:28px;background:var(--pink);transform:rotate(2deg);display:flex;flex-direction:column;justify-content:space-between}.visual-card.main strong{font-size:clamp(42px,5vw,72px);line-height:.94;letter-spacing:-.08em;max-width:470px}.visual-card.main small{font-weight:900;letter-spacing:.08em}.visual-card.note{left:0;bottom:0;width:210px;padding:20px;background:var(--yellow);transform:rotate(-6deg)}.visual-card.note strong{display:block;font-size:28px;line-height:1.08;margin:12px 0}.visual-card.progress{right:-16px;top:0;width:230px;padding:20px;background:var(--panel);transform:rotate(6deg)}.progress-bar{height:10px;border:2px solid var(--line);border-radius:99px;margin-top:14px;overflow:hidden}.progress-bar i{display:block;width:72%;height:100%;background:var(--mint)}.section{padding:82px 0}.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}.section h2{font-size:clamp(34px,5vw,62px);line-height:1.02;letter-spacing:-.07em;margin:12px 0 0;max-width:650px}.section-intro{max-width:390px;color:var(--muted)}.cards,.facts,.suite{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card,.fact,.suite-card{border:2px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--panel);min-height:210px;text-decoration:none}.card:hover,.suite-card:hover{transform:translateY(-4px)}.card:nth-child(2),.fact:nth-child(2),.suite-card:nth-child(2){background:var(--yellow)}.card:nth-child(3),.fact:nth-child(3),.suite-card:nth-child(3){background:var(--mint)}.card strong,.fact h2,.suite-card h3{display:block;font-size:24px;line-height:1.14;letter-spacing:-.04em;margin:0 0 42px}.card span,.fact p,.suite-card p{color:var(--muted);line-height:1.65}.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.step{border-top:3px solid var(--line);padding:18px 6px 0}.step b{font-size:13px;color:var(--pink-deep)}.step h3{font-size:22px;line-height:1.15;letter-spacing:-.04em;margin:12px 0 8px}.step p{color:var(--muted);margin:0;line-height:1.6}.trust{border:2px solid var(--line);border-radius:var(--radius);padding:34px;background:var(--blue);display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}.trust h2{margin:0;font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.07em}.trust p{color:var(--muted);max-width:520px;line-height:1.7}.download-banner{border:2px solid var(--line);border-radius:var(--radius);padding:34px;background:var(--ink);color:var(--panel);display:flex;align-items:center;justify-content:space-between;gap:28px}.download-banner h2{font-size:clamp(34px,4vw,54px);line-height:1.02;letter-spacing:-.07em;margin:0;max-width:620px}.download-banner p{color:#c8d0cb;max-width:550px}.footer{border-top:1px solid #c9c3b7;margin-top:74px;padding-top:30px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;color:var(--muted);font-size:14px}.footer h3{color:var(--ink);font-size:16px;margin:0 0 12px}.footer a{text-decoration:none;display:block;margin:7px 0}.footer-brand{font-size:24px;font-weight:950;color:var(--ink)}.footer-download{border:2px solid var(--line);border-radius:18px;padding:14px;background:var(--yellow);color:var(--ink)}.footer-download strong{display:block}.footer-download small{display:block;margin-top:4px;color:var(--muted)}.platform-tabs{border:2px solid var(--line);border-radius:var(--radius);padding:24px;background:var(--panel)}.tab-list{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}.tab-button{border:2px solid var(--line);border-radius:999px;padding:10px 16px;background:transparent;font:inherit;font-weight:900;cursor:pointer}.tab-button.is-active{background:var(--yellow);box-shadow:3px 3px 0 var(--line)}[data-platform-panel]{display:none;min-height:150px}[data-platform-panel].is-active{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}.phone-visual{border:2px solid var(--line);border-radius:22px;padding:18px;background:var(--mint);max-width:240px;justify-self:end;transform:rotate(3deg)}.phone-screen{border:2px solid var(--line);border-radius:13px;background:var(--panel);padding:14px}.phone-screen b{display:block;font-size:24px;line-height:1.05;margin:25px 0}.phone-line{height:8px;background:var(--pink);border-radius:8px;margin:8px 0}.phone-line.short{width:62%}[data-reveal]{opacity:0;transform:translateY(20px);will-change:opacity,transform;transition:opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)}[data-reveal].is-visible{opacity:1;transform:translateY(0)}

/* Memo commercial footer refinement: compact actions and continuous product transition. */
body:has(main.page.product-page) {
  background: var(--panel);
}

.footer {
  gap: 18px;
  margin-top: 0;
  padding-top: 24px;
}

.footer-links {
  gap: 4px;
}

.footer-start-links {
  gap: 8px;
}

.footer-start-links .footer-download {
  padding: 11px 14px;
}

.footer-start-links .footer-download small {
  display: none;
}

@media (max-width: 700px) {
  .footer {
    gap: 16px;
  }

  .footer-start-links {
    gap: 6px;
  }

  .footer-download {
    max-width: none;
  }
}
/* About page: final CTA background matches preceding section (var(--blue)) with 132px bottom padding. */
.section.about-final-cta,
.about-page .about-final-cta {
  background: var(--blue) !important;
  padding-bottom: 132px !important;
}

.section.about-final-cta + .footer {
  margin-top: 0;
}
.page.product-page > section.product-start-section {
  padding-bottom: 110px;
}
/* Keep the home entry section's bottom rhythm aligned with the approved desktop layout. */
.page.home-page > section.home-entry-section {
  padding-bottom: 166px !important;
}

.page.extension-page > section:nth-last-child(2) {
  padding-bottom: 116px !important;
}

/* Remove all borders and subpixel gap lines between sections across all pages */
section,
.section,
.page > section {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
}

.page > section + section,
.section + .section,
.section + section,
section + .section,
section + section {
  border-top: 0 !important;
  margin-top: -1px !important;
}

/* Force left alignment for all page eyebrows/titles across desktop and mobile */
.eyebrow,
.page > section > .eyebrow,
.utility-page > .eyebrow,
.route-hero > .eyebrow,
.section-head .eyebrow {
  display: inline-flex !important;
  align-self: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
}

.page > section:first-child,
.route-hero,
.utility-page {
  align-items: flex-start !important;
  text-align: left !important;
}

/* Mobile responsive typography and layout optimization */
@media (max-width: 700px) {
  .page h1,
  .hero h1,
  .utility-page > h1 {
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 1.05 !important;
    margin: 14px 0 16px !important;
    max-width: 100% !important;
  }

  .section h2,
  .trust h2,
  .download-banner h2,
  .section-head h2 {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.1 !important;
    margin: 8px 0 12px !important;
    max-width: 100% !important;
  }

  .lead,
  .section-intro {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .cards,
  .facts,
  .suite,
  .step-grid,
  .extension-feature-grid,
  .product-flow,
  .suite-demos {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .card,
  .fact,
  .suite-card {
    padding: 20px !important;
    min-height: 0 !important;
  }

  .extension-feature {
    min-height: 0 !important;
  }

  .extension-feature .feature-copy {
    padding: 20px !important;
  }

  .card strong,
  .fact h2,
  .suite-card h3,
  .extension-feature .feature-copy h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
    word-break: break-word;
  }

  .extension-feature .feature-illustration {
    height: 180px !important;
    min-height: 180px !important;
  }

  /* Stack section heads and banners vertically on mobile (top-to-bottom) */
  .section-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
  }

  .section-head > div,
  .section-head > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section-head h2 {
    max-width: 100% !important;
  }

  .section-intro {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 2px !important;
  }

  .trust {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 24px !important;
  }

  .download-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 24px !important;
  }

  .platform-tabs [data-platform-panel].is-active {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Mobile footer layout: 2-column side-by-side for Sản phẩm & Thông tin, Bắt đầu underneath */
  .footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: start !important;
    gap: 32px 24px !important;
    padding: 52px 20px 42px !important;
  }

  .footer-identity {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    max-width: 100% !important;
    margin-bottom: 4px !important;
  }

  .footer > div:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .footer > div:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .footer-start-links {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 8px !important;
  }

  .footer-start-links h3 {
    margin-bottom: 6px !important;
  }

  .footer-start-links .footer-download {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
    border: 1px solid rgba(255, 254, 250, 0.2) !important;
    border-radius: 14px !important;
    background: rgba(255, 254, 250, 0.06) !important;
    color: #e2e8e4 !important;
    text-decoration: none !important;
  }

  .footer-start-links .footer-download strong {
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  .footer-start-links .footer-download::after {
    content: "↗";
    font-weight: 900;
    color: var(--yellow);
    font-size: 14px;
  }
}

/* Tractor car, real smoke puff effect and Drag me hint badge */
.process-road { --process-progress: 0%; --process-facing: 1; position: relative; }
.process-road-car {
  position: absolute !important;
  z-index: 5 !important;
  top: 5px !important;
  left: var(--process-progress) !important;
  transform: translate(-50%, -100%) !important;
  width: 72px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  filter: drop-shadow(2px 3px 0 rgba(21,26,24,.18)) !important;
}

.process-road-car:active { cursor: grabbing; }
.process-road-car:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 4px; border-radius: 7px; }

.process-road-car-body {
  position: relative;
  width: 64px;
  height: 38px;
  transform: scaleX(var(--process-facing, 1));
  transition: transform 0.15s ease;
}

.process-road-car-body svg { display: block; width: 100%; height: 100%; overflow: visible; }

.car-hint-badge {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--ink);
  pointer-events: none;
  animation: carHintBounce 1.8s ease-in-out infinite;
}

@keyframes carHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

.smoke-container {
  position: absolute;
  z-index: 4;
  top: 4px;
  left: 19px;
  width: 0;
  height: 0;
  pointer-events: none;
}

.smoke-puff {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(21, 26, 24, 0.35);
  box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  animation: realSmokePuff 0.85s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

@keyframes realSmokePuff {
  0% {
    opacity: 0.95;
    transform: translate(0, 0) scale(0.35);
  }
  50% {
    opacity: 0.65;
    transform: translate(var(--puff-dx, -14px), -14px) scale(1.25);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--puff-dx, -14px) * 1.8), -28px) scale(2);
  }
}