/* ===== Base ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--text);
  background: #fff;
  overflow-x: hidden;
  line-height: 1.65
}

img {
  max-width: 100%;
  display: block
}

a {
  text-decoration: none;
  color: inherit
}

ul {
  list-style: none
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .03em;
  transition: .28s;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 14px 32px -8px rgba(0, 55, 145, .55);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 42px -10px rgba(0, 55, 145, .65)
}

.btn-ghost {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .35)
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #fff;
  transform: translateY(-2px)
}

.btn-outline {
  background: #fff;
  color: var(--blue-brand);
  border: 1.5px solid var(--blue-brand);
  padding: 14px 28px
}

.btn-outline:hover {
  background: var(--blue-brand);
  color: #fff;
  transform: translateY(-2px)
}

.btn svg {
  width: 18px;
  height: 18px
}

/* ===== Topbar ===== */
.topbar {
  position: relative;
  z-index: 250;
  background: var(--ink);
  color: #c5d2e5;
  font-size: 13px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(0, 55, 145, .18)
}

.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap
}

.topbar .tb-info {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap
}

.topbar .tb-info span {
  display: inline-flex;
  align-items: center;
  gap: 7px
}

.topbar .tb-info svg {
  width: 15px;
  height: 15px;
  color: var(--accent-on-dark)
}

.tb-lang {
  position: relative;
  display: inline-block
}

.tb-lang-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 4px;
  cursor: pointer;
  color: #e2ecf9;
  transition: .2s;
  user-select: none;
  font-size: 13px;
}

.tb-lang-current:hover {
  border-color: var(--accent-on-dark);
  color: var(--accent-on-dark)
}

.tb-lang-current svg.arr {
  width: 12px;
  height: 12px;
  transition: .25s
}

.tb-lang.open .tb-lang-current svg.arr {
  transform: rotate(180deg)
}

.tb-lang-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 300;
  min-width: 180px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 40px -12px rgba(10, 30, 80, .35);
  padding: 8px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: .22s;
  border: 1px solid var(--line);
}

.tb-lang.open .tb-lang-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto
}

.tb-lang-panel button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 13.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  transition: .18s;
}

.tb-lang-panel button:hover {
  background: var(--blue-sky);
  color: var(--blue-brand)
}

.tb-lang-panel button.active {
  background: var(--blue-soft);
  color: var(--blue-1);
  font-weight: 600
}

.tb-lang-panel button .flag {
  font-size: 17px;
  line-height: 1
}

/* ===== Nav ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 24px -10px rgba(10, 30, 80, .1)
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 24px
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  flex-shrink: 0
}

.nav-logo img {
  height: 100%;
  width: auto;
  object-fit: contain
}

.nav-logo .brand-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0
}

.nav-logo .brand-name {
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify
}

.nav-logo .brand-en {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1;
  text-align: justify;
  text-align-last: justify;
  width: 100%
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto
}

.nav-menu>li {
  position: relative
}

.nav-menu>li>a {
  display: block;
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
  position: relative;
  transition: .22s;
  border-radius: 6px;
}

.nav-menu>li>a:hover,
.nav-menu>li>a.active {
  color: var(--blue-brand)
}

.nav-menu>li>a::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2.5px;
  background: linear-gradient(90deg, var(--blue-brand), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: .3s;
  border-radius: 2px;
}

.nav-menu>li>a:hover::before {
  transform: scaleX(1)
}

.nav-menu>li.has-sub>a {
  display: inline-flex;
  align-items: center;
  gap: 5px
}

.nav-menu>li.has-sub>a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: .22s ease;
  opacity: .38;
  margin-left: 3px;
  margin-top: -2px;
  background: none;
  left: auto;
  right: auto;
  bottom: auto;
  border-radius: 0;
}

.nav-menu>li.has-sub:hover>a::after {
  transform: rotate(45deg) translateY(1px);
  opacity: .75
}

.nav-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 24px 50px -14px rgba(10, 30, 80, .28);
  border: 1px solid var(--line);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .25s cubic-bezier(.2, .8, .3, 1);
  z-index: 50;
}

.nav-menu>li.has-sub:hover>.nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.nav-dropdown a {
  display: block;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: .18s;
}

.nav-dropdown a:hover {
  background: var(--blue-sky);
  color: var(--blue-brand)
}

.nav-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  padding: 13px 24px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 24px -6px rgba(0, 55, 145, .5);
  transition: .25s;
  white-space: nowrap;
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(0, 55, 145, .6)
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px
}

.nav-toggle span {
  width: 26px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: .3s
}

/* ===== Mobile Nav ===== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 30, 80, .5);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: .3s
}

.mobile-menu.show {
  opacity: 1;
  pointer-events: auto
}

.mobile-menu-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: #fff;
  padding: 30px;
  transform: translateX(100%);
  transition: .35s;
  overflow-y: auto
}

.mobile-menu.show .mobile-menu-panel {
  transform: translateX(0)
}

.mobile-menu-panel .close {
  float: right;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1
}

.mobile-menu-panel .mm-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: auto;
  margin-bottom: 22px
}

.mobile-menu-panel .mm-logo img {
  height: 42px
}

.mobile-menu-panel .mm-logo .brand-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px
}

.mobile-menu-panel .mm-logo .brand-name {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  text-align: justify;
  text-align-last: justify
}

.mobile-menu-panel .mm-logo .brand-en {
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  text-align: justify;
  text-align-last: justify;
  width: 100%
}

.mobile-menu-panel nav {
  margin-top: 20px
}

.mobile-menu-panel nav>a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  color: var(--text);
  font-size: 15px
}

.mobile-menu-panel nav>a:hover {
  color: var(--blue-brand)
}

.mobile-menu-panel .mm-group {
  border-bottom: 1px solid var(--line)
}

.mobile-menu-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-weight: 700;
  color: var(--text);
  font-size: 15px;
  cursor: pointer
}

.mobile-menu-panel .mm-parent::after {
  content: "+";
  font-size: 20px;
  color: var(--muted);
  transition: .25s
}

.mobile-menu-panel .mm-parent.open::after {
  transform: rotate(45deg);
  color: var(--accent)
}

.mobile-menu-panel .mm-subs {
  max-height: 0;
  overflow: hidden;
  transition: .3s ease
}

.mobile-menu-panel .mm-subs.open {
  max-height: 600px
}

.mobile-menu-panel .mm-subs a {
  display: block;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: none
}

.mobile-menu-panel .mm-subs a:hover {
  color: var(--blue-brand);
  padding-left: 22px
}

/* ===== Section common ===== */
.section {
  padding: 50px 0
}

.sec-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px
}

.sec-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px
}

.sec-eyebrow::before {
  content: "◆ ";
  color: var(--accent-2)
}

/* Dark navy sections: keep the kicker readable (was bright orange before recolor) */
.why .sec-eyebrow,
.contact .sec-eyebrow,
.banner-cta .sec-eyebrow {
  color: var(--accent-on-dark)
}

/* Dark navy sections: white highlight on .sec-title .hi.
   Uses !important to override the legacy inline color:var(--orange-brand)
   still present on the 16 HTML files on the server, so the recolor takes
   effect with a CSS-only deploy (no need to re-upload those HTML files).
   Scoped to .why / .contact / .banner-cta only — light-section .hi keeps
   the global blue gradient and is untouched (no pollution). */
.why .sec-title .hi,
.contact .sec-title .hi,
.banner-cta .sec-title .hi {
  color: var(--accent-on-dark) !important;
  -webkit-text-fill-color: var(--accent-on-dark) !important;
  background: none !important
}

.sec-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.08;
  margin-bottom: 14px;
  letter-spacing: .005em
}

.sec-title .hi {
  background: linear-gradient(135deg, var(--blue-brand), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sec-desc {
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75
}

/* ===== Reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: .75s cubic-bezier(.2, .8, .3, 1)
}

.reveal.in {
  opacity: 1;
  transform: translateY(0)
}

.reveal.d1 {
  transition-delay: .08s
}

.reveal.d2 {
  transition-delay: .16s
}

.reveal.d3 {
  transition-delay: .24s
}

.reveal.d4 {
  transition-delay: .32s
}

.reveal.d5 {
  transition-delay: .4s
}

.reveal.d6 {
  transition-delay: .48s
}

/* ===== Page Banner ===== */
.page-banner {
  position: relative;
  height: 360px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(105deg, rgba(10, 45, 110, .92) 0%, rgba(13, 61, 138, .82) 60%);
}

.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(0, 55, 145, .18), transparent 55%),
    var(--bg-img, none) center/cover;
  opacity: .9;
}

.page-banner .wrap {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center
}

.pb-inner {
  max-width: 780px
}

.pb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: 18px;
  padding: 7px 18px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 40px;
  background: rgba(0, 55, 145, .1)
}

.pb-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-on-dark);
  box-shadow: 0 0 14px var(--accent-on-dark)
}

.pb-inner h1 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 14px
}

.pb-inner h1 .accent {
  color: var(--accent-on-dark);
  font-style: italic
}

.pb-inner p {
  font-size: 16px;
  color: #cfe0f7;
  max-width: 620px;
  line-height: 1.75;
  font-weight: 300
}

.breadcrumb {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: #9cb5d8;
  font-weight: 600;
  letter-spacing: .03em
}

.breadcrumb a {
  color: #c5d9f4;
  transition: .2s
}

.breadcrumb a:hover {
  color: var(--accent-on-dark)
}

.breadcrumb .sep {
  opacity: .5
}

.breadcrumb .current {
  color: #fff
}

/* ===== Footer ===== */
.footer {
  background: #061432;
  color: #7c92b1;
  border-top: 1px solid rgba(255, 255, 255, .05);
  padding: 60px 0 0
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.footer-brand .logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: auto;
  margin-bottom: 22px
}

.footer-brand .logo-wrap img {
  height: 52px;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .1))
}

.footer-brand .brand-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px
}

.footer-brand .brand-name {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #e6edf9;
  line-height: 1;
  text-align: justify;
  text-align-last: justify
}

.footer-brand .brand-en {
  font-size: 10px;
  color: #8fa3c0;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1;
  text-align: justify;
  text-align-last: justify;
  width: 100%
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.8;
  color: #677d9e;
  margin-bottom: 20px
}

.footer h5 {
  color: #e6edf9;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: .02em;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0, 55, 145, .35);
  display: inline-block
}

.footer-links li {
  margin-bottom: 12px
}

.footer-links a {
  font-size: 14px;
  color: #7c92b1;
  transition: .2s;
  display: inline-block
}

.footer-links a:hover {
  color: var(--accent-on-dark);
  padding-left: 5px
}

.footer-contact li {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #7c92b1;
  align-items: flex-start;
  line-height: 1.6
}

.footer-contact svg {
  width: 16px;
  height: 16px;
  color: var(--accent-on-dark);
  flex-shrink: 0;
  margin-top: 4px
}

.footer-bottom {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px
}

.footer-bottom p {
  font-size: 13px;
  color: #4e6383
}

.footer-bottom .links {
  display: flex;
  gap: 20px
}

.footer-bottom .links a {
  font-size: 13px;
  color: #4e6383;
  transition: .2s
}

.footer-bottom .links a:hover {
  color: var(--accent-on-dark)
}

/* ===== Floats: WhatsApp + ToTop + Cookie ===== */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 108px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  transition: z-index .1s;
  pointer-events: none
}

.wa-float.open {
  z-index: 999
}

.wa-float>* {
  pointer-events: none
}

.wa-float>.wa-toggle {
  pointer-events: auto
}

.wa-float.open>.wa-chat {
  pointer-events: auto
}

.wa-toggle {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #25d366, #128c7e);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 32px -6px rgba(37, 211, 102, .6);
  transition: .3s;
}

.wa-toggle:hover {
  transform: scale(1.08) rotate(6deg)
}

.wa-toggle svg {
  width: 34px;
  height: 34px;
  color: #fff
}

.wa-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--wa);
  z-index: -1;
  animation: waPulse 2.2s infinite
}

@keyframes waPulse {
  0% {
    transform: scale(1);
    opacity: .55
  }

  100% {
    transform: scale(1.8);
    opacity: 0
  }
}

.wa-toggle .wa-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e74c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff
}

.wa-toggle .wa-close-x {
  display: none;
  color: #fff
}

.wa-toggle.open .wa-icon {
  display: none
}

.wa-toggle.open .wa-close-x {
  display: block
}

.wa-toggle.open {
  background: #5a6c7b
}

.wa-toggle.open::before {
  display: none
}

.wa-chat {
  width: 350px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 28px 70px -14px rgba(10, 30, 80, .42);
  display: flex;
  flex-direction: column;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(22px) scale(.92);
  pointer-events: none;
  transition: .32s cubic-bezier(.2, .8, .3, 1);
}

.wa-chat.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto
}

.wa-head {
  background: linear-gradient(135deg, #075e54, #128c7e);
  color: #fff;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px
}

.wa-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.wa-avatar svg {
  width: 30px;
  height: 30px;
  fill: #25d366
}

.wa-head-info h4 {
  font-size: 15px;
  font-weight: 700
}

.wa-head-info .status {
  font-size: 12px;
  color: #a7d8c8;
  display: flex;
  align-items: center;
  gap: 6px
}

.wa-head-info .status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4cd964;
  box-shadow: 0 0 6px #4cd964
}

.wa-head-close {
  margin-left: auto;
  background: rgba(255, 255, 255, .14);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s
}

.wa-head-close:hover {
  background: rgba(255, 255, 255, .25)
}

.wa-head-close svg {
  width: 16px;
  height: 16px
}

.wa-body {
  background: #e5ddd5;
  padding: 18px 16px;
  flex: 1;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(0, 0, 0, .012) 12px, rgba(0, 0, 0, .012) 24px);
  max-height: 300px;
  overflow-y: auto
}

.wa-msg {
  display: flex;
  margin-bottom: 12px;
  animation: waMsgIn .4s ease;
  justify-content: flex-start
}

.wa-msg.me {
  justify-content: flex-end
}

@keyframes waMsgIn {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.wa-msg .bubble {
  padding: 10px 14px;
  font-size: 13.5px;
  color: #303030;
  max-width: 248px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  line-height: 1.55;
  border-radius: 10px 10px 10px 0;
  background: #fff
}

.wa-msg.me .bubble {
  background: #d9fdd3;
  border-radius: 10px 10px 0 10px
}

.wa-msg .bubble .time {
  display: block;
  font-size: 10px;
  color: #889;
  margin-top: 3px
}

.wa-msg.me .bubble .time {
  text-align: right
}

.wa-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px
}

.wa-quick button {
  background: #fff;
  border: 1px solid #d4dde4;
  color: var(--blue-1);
  font-size: 12.5px;
  padding: 8px 13px;
  border-radius: 18px;
  cursor: pointer;
  transition: .2s;
  font-family: inherit;
  font-weight: 600
}

.wa-quick button:hover {
  background: var(--blue-brand);
  color: #fff;
  border-color: var(--blue-brand)
}

.wa-foot {
  padding: 10px 12px;
  background: #f0f2f3;
  display: flex;
  gap: 10px;
  align-items: center
}

.wa-input {
  flex: 1;
  background: #fff;
  border: 1px solid #d4dde4;
  border-radius: 22px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-family: inherit;
  transition: .2s
}

.wa-input:focus {
  outline: none;
  border-color: var(--wa)
}

.wa-send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--wa);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
  flex-shrink: 0
}

.wa-send:hover {
  background: var(--wa-dark);
  transform: scale(1.06)
}

.wa-send svg {
  width: 20px;
  height: 20px
}

.to-top {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 998;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--blue-brand), var(--blue-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -6px rgba(0, 102, 255, .5);
  opacity: 0;
  transform: translateY(10px) scale(.9);
  pointer-events: none;
  transition: .3s
}

.to-top.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto
}

.to-top:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 36px -8px rgba(0, 102, 255, .65)
}

.to-top svg {
  width: 22px;
  height: 22px
}

/* ===== Topbar promise badge ===== */
.tb-promise {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 40px;
  background: linear-gradient(90deg, rgba(0, 55, 145, .18), rgba(0, 55, 145, .08));
  border: 1px solid rgba(0, 55, 145, .4);
  color: #cfe0f7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap
}

.tb-promise svg {
  width: 13px;
  height: 13px;
  color: var(--accent-on-dark)
}

.tb-promise .sep {
  color: rgba(207, 224, 247, .4);
  margin: 0 2px
}

/* ===== Product/App card actions row ===== */
.prod-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap
}

.prod-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-brand);
  letter-spacing: .02em;
  transition: .2s
}

.prod-link svg {
  width: 14px;
  height: 14px
}

.prod-card:hover .prod-link {
  color: var(--accent)
}

.app-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap
}

.app-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-brand);
  letter-spacing: .02em;
  transition: .2s
}

.app-link svg {
  width: 14px;
  height: 14px
}

.app-card:hover .app-link {
  color: var(--accent)
}

/* ===== Inline inquire button (cards) ===== */
.inquire-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 18px -6px rgba(0, 55, 145, .5);
  transition: .25s;
  white-space: nowrap
}

.inquire-btn svg {
  width: 14px;
  height: 14px
}

.inquire-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -8px rgba(0, 55, 145, .62);
  color: #fff
}

.inquire-btn.btn-sm {
  padding: 7px 14px;
  font-size: 12px
}

.inquire-btn.btn-block {
  display: flex;
  width: 100%
}

.inquire-btn.btn-outline {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  box-shadow: none
}

.inquire-btn.btn-outline:hover {
  background: var(--accent);
  color: #fff
}

/* ===== Multi-channel float (left side) ===== */
.channel-float {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%) translateX(-80px);
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, transform .35s ease, visibility .35s ease
}

.channel-float.show {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  visibility: visible
}

.channel-float>* {
  pointer-events: auto
}

.ch-item {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(10, 30, 80, .35);
  transition: .28s;
  text-decoration: none
}

.ch-item:hover {
  transform: scale(1.12) translateX(4px)
}

.ch-item svg {
  width: 22px;
  height: 22px;
  color: #fff
}

.ch-item .ch-tip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: .22s;
  box-shadow: 0 10px 22px -8px rgba(10, 30, 80, .4)
}

.ch-item .ch-tip::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--ink)
}

.ch-item:hover .ch-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(2px)
}

.ch-wa {
  background: linear-gradient(135deg, #25d366, #128c7e)
}

.ch-wechat {
  background: linear-gradient(135deg, #07c160, #069414)
}

.ch-skype {
  background: linear-gradient(135deg, #00aff0, #0078d4)
}

.ch-email {
  background: linear-gradient(135deg, var(--blue-brand), var(--blue-2))
}

.ch-alibaba {
  background: linear-gradient(135deg, #002f7a, #0050b3)
}

/* ===== Mobile sticky CTA bar ===== */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: rgba(6, 20, 50, .98);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0, 55, 145, .35);
  display: none;
  padding: 9px 12px;
  gap: 8px;
  align-items: center
}

.mobile-cta.show {
  display: none
}

/* Homepage-only: force hidden on desktop (already covered by global rule above), visible on mobile via @media(max-width:1024px) */
body.page-home .mobile-cta,
body.page-home .mobile-cta.show {
  display: none
}

.mobile-cta .mc-call {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #c5d2e5;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  gap: 3px
}

.mobile-cta .mc-call svg {
  width: 18px;
  height: 18px;
  color: var(--accent-on-dark)
}

.mobile-cta .mc-quote {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 14px -4px rgba(0, 55, 145, .5)
}

.mobile-cta .mc-quote svg {
  width: 16px;
  height: 16px
}

.mobile-cta .mc-wa {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #128c7e);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none
}

.mobile-cta .mc-wa svg {
  width: 22px;
  height: 22px
}

/* ===== Trust badges strip (footer) ===== */
.trust-strip {
  background: rgba(255, 255, 255, .04);
  border-top: 1px solid rgba(255, 255, 255, .05);
  padding: 18px 0
}

.trust-strip .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  background: rgba(255, 255, 255, .03);
  color: #a9bedb;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: .25s
}

.trust-badge:hover {
  border-color: rgba(0, 55, 145, .5);
  color: #fff;
  background: rgba(0, 55, 145, .08)
}

.trust-badge svg {
  width: 18px;
  height: 18px;
  color: var(--accent-on-dark)
}

/* ===== Newsletter subscribe (footer) ===== */
.newsletter {
  margin-top: 20px;
  max-width: 380px
}

.newsletter form {
  display: flex;
  gap: 8px;
  margin-top: 10px
}

.newsletter input {
  flex: 1;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 6px;
  padding: 11px 14px;
  color: #e6edf9;
  font-size: 13.5px;
  font-family: inherit;
  transition: .2s
}

.newsletter input::placeholder {
  color: #677d9e
}

.newsletter input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, .1)
}

.newsletter button {
  flex: 0 0 auto;
  padding: 0 18px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: .25s;
  box-shadow: 0 6px 14px -4px rgba(0, 55, 145, .5)
}

.newsletter button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -4px rgba(0, 55, 145, .65)
}

.newsletter .nl-note {
  font-size: 11.5px;
  color: #5e7290;
  margin-top: 8px;
  line-height: 1.5
}

.newsletter .nl-msg {
  font-size: 12.5px;
  color: var(--accent-on-dark);
  font-weight: 700;
  margin-top: 8px;
  display: none
}

.newsletter .nl-msg.show {
  display: block
}

/* ===== Form success panel (replaces alert) ===== */
.form-success {
  display: none;
  background: linear-gradient(135deg, rgba(37, 211, 102, .12), rgba(18, 140, 126, .08));
  border: 1.5px solid rgba(37, 211, 102, .5);
  border-radius: 10px;
  padding: 20px;
  margin-top: 14px;
  animation: fsIn .4s ease
}

.form-success.show {
  display: block
}

@keyframes fsIn {
  from {
    opacity: 0;
    transform: translateY(-8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.form-success .fs-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #0f7b3f;
  margin-bottom: 8px
}

.form-success .fs-title svg {
  width: 22px;
  height: 22px;
  color: #25d366;
  flex-shrink: 0
}

.form-success .fs-text {
  font-size: 13.5px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 14px
}

.form-success .fs-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 6px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  box-shadow: 0 8px 18px -6px rgba(37, 211, 102, .5);
  transition: .25s
}

.form-success .fs-wa:hover {
  transform: translateY(-2px);
  color: #fff
}

.form-success .fs-wa svg {
  width: 16px;
  height: 16px
}

/* ===== Product detail: meta grid + compare + std table + faq ===== */
.prod-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 24px 0
}

.prod-meta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: .2s
}

.prod-meta:hover {
  border-color: var(--blue-brand);
  background: #fff;
  box-shadow: 0 8px 18px -10px rgba(0, 102, 255, .25)
}

.prod-meta .pm-ic {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue-brand), var(--blue-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.prod-meta .pm-ic svg {
  width: 18px;
  height: 18px
}

.prod-meta .pm-body h5 {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 4px
}

.prod-meta .pm-body p {
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.5
}

.prod-meta .pm-body p small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 2px
}

.spec-download {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 6px;
  background: #fff;
  border: 1.5px solid var(--blue-brand);
  color: var(--blue-brand);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: .25s;
  box-shadow: 0 6px 14px -6px rgba(0, 102, 255, .25)
}

.spec-download:hover {
  background: var(--blue-brand);
  color: #fff;
  transform: translateY(-2px)
}

.spec-download svg {
  width: 16px;
  height: 16px
}

.compare-table,
.std-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 13.5px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 22px -12px rgba(10, 30, 80, .18)
}

.compare-table thead th,
.std-table thead th {
  background: linear-gradient(135deg, var(--blue-brand), var(--blue-2));
  color: #fff;
  padding: 13px 14px;
  text-align: left;
  font-weight: 700;
  letter-spacing: .03em;
  font-size: 13px
}

.compare-table tbody td,
.std-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top
}

.compare-table tbody tr:nth-child(even),
.std-table tbody tr:nth-child(even) {
  background: #f8fafc
}

.compare-table tbody tr:hover,
.std-table tbody tr:hover {
  background: #eef4ff
}

.compare-table .row-label,
.std-table .row-label {
  font-weight: 700;
  color: var(--ink);
  background: #f1f5fb
}

.compare-table .hi-col,
.std-table .hi-col {
  background: rgba(0, 55, 145, .08);
  font-weight: 700;
  color: var(--accent)
}

.faq-list {
  margin-top: 8px
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 10px;
  background: #fff;
  transition: .25s;
  overflow: hidden
}

.faq-item:hover {
  border-color: var(--blue-brand)
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  font-size: 14.5px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit
}

.faq-q::after {
  content: "+";
  font-size: 22px;
  color: var(--accent);
  font-weight: 300;
  transition: .25s;
  line-height: 1
}

.faq-item.open .faq-q::after {
  transform: rotate(45deg)
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: .35s ease;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7
}

.faq-item.open .faq-a {
  max-height: 300px;
  padding: 0 18px 16px
}

/* ===== Track record section ===== */
.track-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px
}

.track-num {
  font-family: 'Oswald', sans-serif;
  font-size: 42px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1
}

.track-num .plus {
  font-size: .55em
}

.track-label {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: .03em
}

.export-map {
  margin-top: 50px;
  padding: 36px;
  background: linear-gradient(135deg, #0a1e38, #102e6e);
  border-radius: 14px;
  color: #fff;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: center
}

.export-map .em-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.export-map .em-stat {
  padding: 14px 0;
  border-left: 2px solid var(--accent);
  padding-left: 16px
}

.export-map .em-stat .num {
  font-family: 'Oswald', sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  line-height: 1
}

.export-map .em-stat .lbl {
  font-size: 12px;
  color: #a9bedb;
  margin-top: 5px;
  letter-spacing: .04em
}

.export-map .em-list h4 {
  font-size: 14px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 12px
}

.export-map .em-list ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  font-size: 13.5px;
  color: #c5d2e5
}

.export-map .em-list li {
  display: flex;
  align-items: center;
  gap: 8px
}

.export-map .em-list li::before {
  content: "▸";
  color: var(--accent)
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px
}

.testimonial {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 24px;
  box-shadow: 0 12px 28px -16px rgba(10, 30, 80, .18);
  transition: .3s;
  position: relative
}

.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -18px rgba(10, 30, 80, .28);
  border-color: transparent
}

.testimonial .t-quote {
  font-size: 54px;
  color: rgba(0, 102, 255, .15);
  font-family: Georgia, serif;
  line-height: 1;
  position: absolute;
  top: 14px;
  right: 22px
}

.testimonial .t-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 18px;
  position: relative
}

.testimonial .t-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line)
}

.testimonial .t-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-brand), var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  font-family: 'Oswald', sans-serif;
  flex-shrink: 0
}

.testimonial .t-info h5 {
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 2px
}

.testimonial .t-info p {
  font-size: 12px;
  color: var(--muted)
}

.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 997;
  background: rgba(6, 20, 50, .97);
  backdrop-filter: blur(10px);
  color: #c5d2e5;
  padding: 18px 0;
  border-top: 2px solid var(--accent);
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.2, .8, .3, 1);
  display: flex;
  align-items: center
}

.cookie-bar.show {
  transform: translateY(0)
}

.cookie-bar .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-right: 40px;
  position: relative
}

.cookie-close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #7e92b3;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  transition: color .2s;
  z-index: 5
}

.cookie-close:hover {
  color: #fff
}

.cookie-text {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.65;
  color: #a9bedb;
  min-width: 280px
}

.cookie-text strong {
  color: #e6edf9
}

.cookie-text a {
  color: var(--accent-on-dark);
  text-decoration: underline
}

.cookie-text a:hover {
  color: #E3EEFF
}

.cookie-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0
}

.cookie-actions button {
  padding: 11px 26px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: .25s;
  white-space: nowrap
}

.cookie-btn-accept {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(0, 55, 145, .5)
}

.cookie-btn-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(0, 55, 145, .65)
}

.cookie-btn-decline {
  background: rgba(255, 255, 255, .08);
  color: #c5d2e5;
  border: 1px solid rgba(255, 255, 255, .18)
}

.cookie-btn-decline:hover {
  background: rgba(255, 255, 255, .15);
  color: #fff
}

/* ===== Responsive: layout ===== */
@media(max-width:1024px) {
  .mobile-cta .mc-quote {
    background: rgba(255, 255, 255, .15);
    box-shadow: 0 6px 14px -4px rgba(255, 255, 255, .2)
  }

  .nav-menu,
  .l-none {
    display: none
  }

  .nav-toggle {
    display: flex
  }

  .nav-cta {
    display: none
  }

  .nav .wrap {
    padding: 0 14px;
    height: 64px
  }

  .nav-logo {
    height: 46px;
    gap: 8px
  }

  .nav-logo img {
    height: 42px
  }

  .nav-logo .brand-name {
    font-size: 15px
  }

  .nav-logo .brand-en {
    font-size: 8.5px
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    padding-bottom: 0px
  }

  .channel-float {
    display: none
  }

  .mobile-cta,
  .mobile-cta.show {
    display: flex
  }

  body.page-home .mobile-cta,
  body.page-home .mobile-cta.show {
    display: flex
  }

  .to-top {
    bottom: 78px
  }

  .wa-float {
    bottom: 172px;
    right: 16px
  }

  .wa-float .wa-toggle {
    width: 48px;
    height: 48px
  }

  .wa-float .wa-toggle svg {
    width: 24px;
    height: 24px
  }

  .track-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .testimonial-grid {
    grid-template-columns: 1fr 1fr
  }

  .export-map {
    grid-template-columns: 1fr;
    padding: 24px
  }

  .tb-promise,
  .topbar {
    display: none
  }
}

@media(max-width:640px) {
  .section {
    padding: 30px 0
  }

  /* Header: the brand text is nowrap and previously forced a ~390px minimum page
     width, so phones narrower than 390px could be dragged left/right. Let it shrink. */
  .nav .wrap {
    padding: 0 12px;
    gap: 10px
  }

  .nav-logo {
    flex-shrink: 1;
    min-width: 0;
    gap: 7px
  }

  .nav-logo img {
    flex: 0 0 auto
  }

  .nav-logo .brand-block {
    flex-shrink: 1;
    min-width: 0
  }

  .nav-logo .brand-name {
    font-size: 14px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    text-align-last: left;
    line-height: 1.1;
    min-width: 0
  }

  .nav-logo .brand-en {
    font-size: 8px;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    text-align: left;
    text-align-last: left
  }

  .nav-toggle {
    flex: 0 0 auto
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .topbar .tb-info {
    gap: 14px
  }

  .wa-chat {
    width: calc(100vw - 32px)
  }

  .to-top {
    right: 18px;
    bottom: 78px
  }

  .wa-float {
    right: 18px;
    bottom: 172px
  }

  .cookie-text {
    min-width: 100%
  }

  .cookie-actions {
    width: 100%;
    flex-direction: column
  }

  .cookie-actions button {
    width: 100%;
    text-align: center
  }

  .page-banner {
    height: 300px
  }

  .track-grid {
    grid-template-columns: 1fr 1fr
  }

  .testimonial-grid {
    grid-template-columns: 1fr
  }

  .prod-meta-grid {
    grid-template-columns: 1fr
  }

  .export-map .em-stats {
    grid-template-columns: 1fr
  }

  .export-map .em-list ul {
    grid-template-columns: 1fr
  }

  .compare-wrap,
  .std-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  .compare-table,
  .std-table {
    min-width: 560px
  }

  .trust-strip .wrap {
    gap: 10px 16px
  }

  .trust-badge {
    padding: 6px 12px;
    font-size: 11.5px
  }

  .mobile-cta {
    padding: 8px
  }

  .mobile-cta .mc-quote {
    font-size: 13px;
    padding: 10px
  }

  .mobile-cta .mc-wa {
    width: 42px;
    height: 42px
  }

  .newsletter form {
    flex-direction: column
  }

  .newsletter button {
    padding: 11px
  }
}