/* ==========================================================================
   Asia One Click — corporate website
   Ported from the FigmaMake export (Figma: AOC website ref. AISOFT Thailand)
   Breakpoints: mobile < 768px · tablet 768–1023px · desktop >= 1024px
   ========================================================================== */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  --navy:        #091738;
  --navy-2:      #102046;
  --slate:       #576b8a;
  --orange:      #f15a2b;
  --orange-dark: #d94d22;
  --orange-soft: #fff4f1;
  --blue:        #0857e5;
  --blue-light:  #3b82f6;
  --border-blue: #d1e5f7;
  --border-blue-2: #b9dfff;
  --line:        #c8daff;

  --bg-page:     #f7f9fb;
  --bg-hero:     #ecf9ff;
  --bg-solutions:#eff5fe;
  --bg-products: #ebf2fc;
  --bg-why:      #f4f8ff;
  --bg-footer:   #f0f5ff;

  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-sm: 16px;

  --shadow-card:  0 14px 16px rgba(20, 56, 97, .08);
  --shadow-hero:  0 14px 32px -8px rgba(20, 56, 97, .08);
  --shadow-cta:   0 10px 10px rgba(229, 10, 20, .2);

  --content: 864px;
  --header-h: 52px;

  --font-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy);
  background: var(--bg-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── Icons ───────────────────────────────────────────────────────────────── */
.ico {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.ico-12 { width: 12px; height: 12px; }
.ico-13 { width: 13px; height: 13px; }
.ico-20 { width: 20px; height: 20px; }
.ico-22 { width: 22px; height: 22px; }
.ico-blue   { color: var(--blue); }
.ico-orange { color: var(--orange); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn-primary {
  background: var(--orange);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { background: var(--orange-dark); }
.btn-outline {
  background: #fff;
  color: var(--orange);
  border: 1px solid var(--orange);
}
.btn-outline:hover { background: var(--orange-soft); }

.link-btn {
  color: var(--orange);
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
}
.link-btn:hover { text-decoration: underline; }

/* ── Shared layout ───────────────────────────────────────────────────────── */
.page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 0 48px;
}

.section {
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 16px;
}

.panel {
  background: #fff;
  border-radius: var(--radius-md);
}

.h2 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.35;
}
.h2.center { text-align: center; }
.h2.blue   { color: var(--blue); }

.lead { color: var(--slate); font-size: 14px; line-height: 1.6; }
.orange { color: var(--orange); }

/* ══ Header ══════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  transition: box-shadow .2s ease;
}
.site-header.scrolled { box-shadow: 0 4px 10px rgba(0, 0, 0, .1); }

.header-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 16px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-link { flex-shrink: 0; border-radius: 4px; }
.logo-img  { width: 142px; height: 30px; object-fit: contain; }

.nav-desktop { display: none; }

.nav-link {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--navy);
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  transition: color .18s ease;
}
.nav-link:hover,
.nav-link.active { color: var(--orange); }

.btn-header-cta { display: none; }

.hamburger {
  width: 36px; height: 36px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--navy);
  flex-shrink: 0;
}
.hamburger:hover { background: #f3f4f6; }
.hamburger .ico-close { display: none; }
.hamburger[aria-expanded="true"] .ico-menu  { display: none; }
.hamburger[aria-expanded="true"] .ico-close { display: block; }

.mobile-drawer {
  background: #fff;
  border-top: 1px solid var(--border-blue);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
}
.mobile-drawer[hidden] { display: none; }

.drawer-link {
  font-size: 16px;
  font-weight: 500;
  color: var(--navy);
  padding-bottom: 4px;
  border-bottom: 1px solid #f3f4f6;
  transition: color .18s ease;
}
.drawer-link:hover,
.drawer-link.active { color: var(--orange); }

.drawer-cta { padding: 12px 20px; font-size: 14px; }

/* ══ Hero ════════════════════════════════════════════════════════════════ */
.hero {
  background: var(--bg-hero);
  border: 1px solid var(--border-blue-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero);
  overflow: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.hero-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 29px;
  line-height: 39px;
  color: var(--navy);
  margin-bottom: 16px;
}
.hero-lead {
  font-size: 14px;
  line-height: 20px;
  color: var(--slate);
  margin-bottom: 16px;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.hero-btn {
  width: 100%;
  height: 44px;
  font-size: 12px;
  line-height: 18px;
}
.hero-art {
  width: 100%;
  height: 180px;
  object-fit: contain;
}

/* ══ How we transform ════════════════════════════════════════════════════ */
.transform-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.transform-panel {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.transform-bg { display: none; }

.transform-content { position: relative; z-index: 1; }

.transform-head { max-width: 348px; }
.transform-head .h2 { margin-bottom: 8px; }
.transform-head .lead { max-width: 440px; margin-bottom: 24px; }

/* Workflow — mobile: one column of horizontal cards with vertical connectors */
.workflow {
  display: flex;
  flex-direction: column;
}

.wf-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-blue);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 131px;
}
.wf-card + .wf-card { margin-top: 24px; }
.wf-card + .wf-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -24px;
  width: 2px;
  height: 24px;
  background: var(--line);
  transform: translateX(-50%);
}

.wf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wf-head { display: flex; align-items: center; gap: 8px; }
.wf-num {
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wf-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.35;
  color: var(--navy);
}
.wf-desc { font-size: 12px; line-height: 1.35; color: var(--navy); }
.wf-img  { width: 160px; height: 107px; object-fit: contain; flex-shrink: 0; }

/* Outcome strip — mobile 2×2 */
.outcomes {
  background: #fff;
  border: 1px solid var(--border-blue);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.outcomes li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  font-family: var(--font-body);
}
.outcomes li span { font-weight: 700; font-size: 12px; line-height: 1.25; color: var(--navy); }
.outcomes li:nth-child(-n+2) { border-bottom: 1px solid var(--border-blue); }
.outcomes li:nth-child(odd)  { border-right: 1px solid var(--border-blue); }

/* ══ Solutions ═══════════════════════════════════════════════════════════ */
.solutions-panel {
  background: var(--bg-solutions);
  padding: 36px 20px;
}
.solutions-panel .h2 { margin-bottom: 28px; }

.solutions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.sol-card {
  background: #fff;
  border: 1px solid var(--border-blue);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  height: 100%;
  transition: transform .2s ease;
}
.sol-card:hover { transform: translateY(-4px); }
.sol-card img {
  width: 56px; height: 56px;
  object-fit: contain;
  object-position: bottom;
  flex-shrink: 0;
}
.sol-card > div { flex: 1; min-width: 0; }
.sol-name { font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--navy); margin-bottom: 4px; }
.sol-desc { font-size: 12px; line-height: 1.6; color: var(--slate); }

/* ══ Expertise ═══════════════════════════════════════════════════════════ */
.expertise-wrap { display: flex; flex-direction: column; }

.expertise-top {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 36px 20px;
}
.expertise-title {
  font-size: 22px;
  line-height: 29px;
  margin: 0 auto 32px;
  max-width: 42rem;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 24px;
}

.why-card {
  background: var(--bg-why);
  border-radius: 6px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  height: 100%;
}
.why-ico {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-light);
}
.why-title { font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--navy); text-align: center; }
.why-desc  { font-size: 12px; line-height: 1.6; color: var(--slate); text-align: center; }

/* Experience strip — hidden on mobile, matching the Figma frame */
.experience-strip { display: none; }

.exp-item { display: flex; align-items: center; gap: 14px; }
.exp-ico  { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.exp-item p { font-size: 14px; line-height: 16px; color: var(--navy); font-weight: 500; }
.exp-item strong { font-weight: 700; }

/* ══ Products ════════════════════════════════════════════════════════════ */
.products-panel {
  background: var(--bg-products);
  padding: 36px 20px;
}
.products-title { font-size: 20px; line-height: 26px; margin-bottom: 26px; }

.products-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 770px;
  margin: 0 auto;
}

.product-card {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--border-blue);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; order: 1; }
.product-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 25px;
  line-height: 31px;
  color: var(--navy);
}
.product-desc { font-size: 13px; line-height: 18px; color: var(--slate); }

.product-visual {
  order: 2;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(115, 173, 250, .86);
  box-shadow: var(--shadow-card);
  border-radius: 8px;
  overflow: hidden;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 232px;
}
.product-visual img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
  object-position: top center;
}
.product-visual--contain img { object-fit: contain; }
.product-visual--flightapi { height: auto; }
.product-visual--flightapi img { height: auto; }
.product-visual--travelai {
  height: auto;
  width: min(100%, 464px);
  margin-inline: auto;
}
.product-visual--travelai img { height: auto; }

/* ══ Partners ════════════════════════════════════════════════════════════ */
.partners-panel { padding: 36px 20px; }
.partners-title { margin: 0 auto 28px; max-width: 42rem; color: var(--navy-2); }

.partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.partner-cell {
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  height: 64px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.partner-cell:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: 0 12px 22px rgba(8, 87, 229, .12);
}
.partner-cell:active { transform: translateY(0) scale(.98); }
.partner-cell img { transition: transform .3s ease; }
.partner-cell:hover img { transform: scale(1.04); }

.partner-img       { height: 32px; width: auto; object-fit: contain; }
.partner-img--sm   { height: 28px; }
.partner-img--xs   { height: 24px; }

/* ══ Final CTA ═══════════════════════════════════════════════════════════ */
.cta-panel {
  position: relative;
  overflow: hidden;
  background: var(--bg-hero);
  border: 1px solid var(--border-blue);
  border-radius: var(--radius-md);
  min-height: 300px;
}
.cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 18% center;
  opacity: .8;
  pointer-events: none;
  user-select: none;
}
.cta-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.88) 100%);
}
.cta-body {
  position: relative;
  z-index: 1;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  padding: 40px 28px;
}
.cta-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.16;
  color: var(--navy);
  margin-bottom: 12px;
}
.cta-lead { max-width: 390px; font-size: 12px; line-height: 1.5; color: var(--slate); }
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.cta-btn {
  height: 44px;
  width: 268px;
  max-width: 100%;
  padding: 0 20px;
  font-size: 13px;
}

/* ══ Customers marquee ═══════════════════════════════════════════════════ */
.customers {
  width: 100%;
  overflow-x: hidden;
  padding: 28px 0 20px;
}
.customers-head {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 16px;
}
.customers-head .h2 { color: var(--navy-2); margin-bottom: 8px; }

.marquee {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: 68px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 44s linear infinite;
  will-change: transform;
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 0 24px;
}
.marquee-group img {
  height: 46px;
  width: auto;
  max-width: none;
  object-fit: contain;
  flex-shrink: 0;
}
.marquee-pause:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

/* ══ Footer ══════════════════════════════════════════════════════════════ */
.site-footer {
  width: 100%;
  background: var(--bg-footer);
  border-top: 1px solid var(--border-blue);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 16px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border-blue);
}

.footer-brand { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.footer-logo  { width: 146px; height: 26px; object-fit: contain; }
.footer-tagline { font-size: 12px; line-height: 1.6; color: var(--slate); max-width: 320px; }

.footer-contact { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.fc-row { display: flex; align-items: center; gap: 8px; }
.fc-row:first-child { align-items: flex-start; }
.fc-pin { margin-top: 2px; }
.fc-row address, .fc-row a, .fc-row span { font-size: 13px; line-height: 1.7; color: var(--slate); }
.fc-row a { transition: color .18s ease; }
.fc-row a:hover { color: var(--blue); }

.footer-cta {
  align-self: flex-start;
  margin-top: 12px;
  padding: 10px 16px;
  font-size: 12px;
  box-shadow: 0 8px 10px rgba(229, 10, 20, .18);
}

.footer-map-frame {
  border: 1px solid var(--border-blue);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  height: 150px;
}
.footer-map-frame iframe { width: 100%; height: 100%; border: 0; }

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-bottom: 32px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-blue);
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 4px;
}
.footer-col a, .footer-col span {
  font-size: 12px;
  line-height: 1.6;
  color: var(--slate);
  text-align: left;
}
.footer-col a { transition: color .18s ease; border-radius: 4px; }
.footer-col a:hover { color: var(--orange); }

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.footer-bottom p { font-size: 12px; color: var(--slate); }

/* ══ Product modal ═══════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(4px);
}
.modal-overlay[hidden] { display: none; }

.modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
  max-width: 672px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  outline: none;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-blue);
}
.modal-title { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--navy); }
.modal-close { color: #9ca3af; padding: 4px; border-radius: 8px; }
.modal-close:hover { color: var(--navy); }

.modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.modal-shot { width: 100%; flex-shrink: 0; }
.modal-shot img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-blue);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.modal-copy { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.modal-desc { font-size: 14px; line-height: 1.6; color: var(--slate); }
.modal-cta { align-self: flex-start; padding: 12px 24px; font-size: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   TABLET — 768px and up
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root { --header-h: 60px; }

  .page { gap: 40px; padding: 32px 0 48px; }
  .section { padding: 0 24px; }

  .h2 { font-size: 24px; }

  /* Header */
  .header-inner { padding: 0 24px; }
  .btn-header-cta {
    display: inline-flex;
    width: 199px;
    height: 36px;
    font-size: 12px;
    margin-left: auto;
  }
  .hamburger { display: none; }
  .mobile-drawer { display: none !important; }

  /* Hero */
  .hero { padding: 32px; min-height: 564px; }
  .hero-title { font-size: 34px; line-height: 39px; margin-bottom: 12px; }
  .hero-actions { flex-direction: row; gap: 18px; margin-bottom: 24px; }
  .hero-btn { width: 170px; height: 40px; }
  .hero-btn + .hero-btn { width: 166px; }
  .hero-art { height: 251px; object-fit: contain; }

  /* Transform */
  .transform-panel { padding: 32px; }
  .transform-bg {
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 428px;
    height: 201px;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }
  .transform-bg img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
  .transform-bg .fade-left {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #fff 0%, transparent 55%);
  }
  .transform-bg .fade-bottom {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, #fff 100%);
  }
  .transform-head .lead { margin-bottom: 32px; }

  /* Workflow — 2×2 grid with vertical cards */
  .workflow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 28px;
    max-width: 656px;
    margin: 0 auto;
  }
  .wf-card {
    flex-direction: column;
    align-items: stretch;
    min-height: 220px;
    padding: 20px;
    gap: 0;
  }
  .wf-card + .wf-card { margin-top: 0; }
  .wf-card + .wf-card::before { display: none; }
  .wf-text { flex: 0 0 auto; gap: 0; }
  .wf-head { margin-bottom: 8px; }
  .wf-desc { text-align: center; order: 2; max-width: 300px; margin: 0 auto; }
  .wf-img { margin: 12px auto 14px; order: 1; }
  .wf-card { display: flex; }
  .wf-card .wf-text { display: contents; }

  /* Outcomes — single row */
  .outcomes {
    display: flex;
    height: 72px;
  }
  .outcomes li {
    flex: 1;
    padding: 0 20px;
    border-bottom: 0 !important;
    border-right: 0 !important;
  }
  .outcomes li + li { border-left: 1px solid var(--border-blue) !important; }
  .outcomes li span { font-size: 14px; }

  /* Solutions */
  .solutions-panel { padding: 40px 32px; }
  .solutions-panel .h2 { margin-bottom: 36px; }
  .solutions-grid { grid-template-columns: 1fr 1fr; }
  .sol-card { flex-direction: column; align-items: center; gap: 0; padding: 20px; }
  .sol-card img { width: 64px; height: 64px; margin-bottom: 12px; }
  .sol-name, .sol-desc { text-align: center; }
  .sol-name { margin-bottom: 8px; }

  /* Expertise */
  .expertise-top {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: none;
    padding: 40px 32px;
  }
  .expertise-title { font-size: 24px; line-height: 1.35; margin-bottom: 36px; }
  .why-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .experience-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    height: 92px;
    padding: 0 32px;
    background: #fff;
    border-top: 1px solid var(--border-blue);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 -5px 8px rgba(69, 145, 193, .13);
  }

  /* Products */
  .products-panel { padding: 40px 32px; }
  .product-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
    padding: 24px;
  }
  .product-text  { order: 2; flex: 1; align-self: flex-start; gap: 12px; }
  .product-visual {
    order: 1;
    flex-shrink: 0;
    width: 447px;
    max-width: 55%;
    padding: 18px;
    height: 365px;
  }
  .product-card.reversed .product-visual { order: 2; }
  .product-card.reversed .product-text   { order: 1; }
  .product-visual--flightapi { height: 259px; }
  .product-visual--flightapi img { height: 100%; }
  .product-visual--travelai {
    width: 356px;
    height: 377px;
    margin-inline: 0;
  }
  .product-visual--travelai img { height: 100%; }

  /* Partners */
  .partners-panel { padding: 40px 32px; }
  .partners-title { margin-bottom: 36px; }
  .partners-grid { grid-template-columns: repeat(3, 1fr); }

  /* CTA */
  .cta-panel { min-height: 240px; }
  .cta-bg { object-position: 34% center; opacity: 1; }
  .cta-scrim {
    background: linear-gradient(90deg, transparent 0%, rgba(236,249,255,.25) 55%, rgba(236,249,255,.8) 100%);
  }
  .cta-body {
    min-height: 240px;
    align-items: center;
    justify-content: flex-end;
    padding: 28px 36px;
    flex-direction: row;
  }
  .cta-body > div:first-child,
  .cta-actions { }
  .cta-body {
    flex-direction: column;
    align-items: flex-end;
  }
  .cta-body > div { width: 390px; max-width: 100%; }
  .cta-title { font-size: 30px; line-height: 1.2; white-space: nowrap; }
  .cta-lead  { font-size: 16px; }
  .cta-actions { flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 12px; width: 390px; max-width: 100%; }
  .cta-btn { width: auto; }

  /* Customers */
  .customers { padding: 32px 0 24px; }
  .customers-head { padding: 0 24px; }
  .customers-head .h2 { margin-bottom: 12px; }
  .marquee { height: 72px; }
  .marquee-group img { height: 48px; }

  /* Footer */
  .footer-inner { padding: 48px 24px; }
  .footer-top { padding-bottom: 40px; margin-bottom: 40px; }
  .footer-cols { grid-template-columns: repeat(4, 1fr); gap: 32px; padding-bottom: 40px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }

  /* Modal */
  .modal-body { flex-direction: row; }
  .modal-shot { width: 55%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP — 1024px and up
   Figma desktop frame is 864 content @1280. Widened to a 1120px content
   column; every fixed dimension from the frame is expressed proportionally
   so cards, artwork and screenshots scale with it instead of stranding
   whitespace on wide monitors.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  :root { --content: 1168px; }   /* 1120 content + 24px gutters */

  .page { gap: 48px; }
  .section { padding: 0 24px; }

  /* Header — logo | nav | CTA */
  .header-inner {
    padding: 0 24px;
    display: grid;
    grid-template-columns: 172px 1fr 199px;
    align-items: center;
  }
  .logo-img { width: 172px; }
  .nav-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
  }
  .nav-link { font-size: 13px; }
  .btn-header-cta { height: 44px; margin-left: 0; justify-self: end; font-size: 13px; }

  /* Hero — copy left, artwork bleeding to the bottom-right corner */
  .hero {
    position: relative;
    display: block;
    padding: 0;
    height: auto;
    min-height: 470px;
  }
  .hero-copy {
    position: absolute;
    left: 56px;
    top: 58px;
    width: 46%;
    max-width: 500px;
  }
  .hero-title { font-size: 38px; line-height: 45px; margin-bottom: 14px; }
  .hero-lead  { font-size: 15px; line-height: 23px; margin-bottom: 20px; }
  .hero-actions { margin-bottom: 0; gap: 16px; }
  .hero-btn { width: 190px; height: 46px; font-size: 13px; }
  .hero-btn + .hero-btn { width: 186px; }
  .hero-art {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    max-width: 580px;
    height: auto;
    object-fit: contain;
  }

  /* Transform */
  .transform-panel { padding: 48px 46px 46px; }
  .transform-head { max-width: 460px; }
  .transform-head .h2 { font-size: 28px; }
  .transform-head .lead { max-width: 620px; }
  .transform-bg { width: 44%; height: 232px; }

  /* Workflow — one fluid row of four cards with connectors between them */
  .workflow {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 0;
  }
  .wf-card {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    min-height: 262px;
    padding: 14px;
    flex-direction: column;
    align-items: stretch;
  }
  .wf-card .wf-text { display: contents; }
  .wf-head  { margin-bottom: 10px; }
  .wf-title { font-size: 13px; }
  .wf-img   { width: 100%; max-width: 200px; height: 134px; margin: 0 auto 10px; order: 1; }
  .wf-desc  { order: 2; text-align: center; flex: 1; max-width: none; font-size: 13px; }

  .wf-card + .wf-card { margin-left: 28px; }
  .wf-card + .wf-card::before {
    content: "";
    display: block;
    position: absolute;
    left: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    margin-top: -1px;
    background: var(--line);
    transform: none;
  }
  .wf-card + .wf-card::after {
    content: "";
    position: absolute;
    left: -31px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--border-blue-2);
    border: 1.5px solid #fff;
    box-shadow: 34px 0 0 -1.5px #fff, 34px 0 0 0 var(--border-blue-2);
  }

  /* Outcomes */
  .outcomes { height: 80px; }
  .outcomes li span { font-size: 15px; }

  /* Solutions */
  .solutions-panel { padding: 52px 46px; }
  .solutions-panel .h2 { font-size: 28px; }
  .solutions-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .sol-card { padding: 24px 18px; }
  .sol-card img { width: 84px; height: 84px; margin-bottom: 16px; }
  .sol-name { font-size: 15px; }
  .sol-desc { font-size: 13px; }

  /* Expertise */
  .expertise-top { padding: 52px 46px; }
  .expertise-title { font-size: 26px; max-width: 780px; }
  .why-grid { gap: 24px; }
  .why-card { padding: 26px 22px; }
  .why-desc { font-size: 13px; }
  .experience-strip { height: 100px; padding: 0 46px; }

  /* Products */
  .products-panel { padding: 52px 46px; }
  .products-title { font-size: 22px; line-height: 28px; margin-bottom: 30px; }
  .products-list  { max-width: 1000px; gap: 30px; }
  /* Copy is centred against the taller screenshot so the wider column
     doesn't strand a block of empty space beside short paragraphs. */
  .product-card   { padding: 28px; gap: 32px; align-items: center; }
  .product-text   { align-self: center; }

  /* Visuals keep the Figma aspect ratios while their width scales */
  .product-visual {
    flex: 0 0 52%;
    width: auto;
    max-width: none;
    height: auto;
    aspect-ratio: 447 / 365;
    padding: 20px;
  }
  .product-visual--flightapi { aspect-ratio: 447 / 259; height: auto; }
  .product-visual--travelai  { flex-basis: 42%; aspect-ratio: 356 / 377; height: auto; width: auto; }
  .product-visual--flightapi img,
  .product-visual--travelai img { height: 100%; }

  .product-name { font-size: 28px; line-height: 36px; }
  .product-desc { font-size: 14px; line-height: 21px; }
  .link-btn     { font-size: 13px; }

  /* Partners */
  .partners-panel { padding: 52px 46px; }
  .partners-title { font-size: 28px; }
  .partners-grid  { gap: 20px; }
  .partner-cell   { height: 76px; }

  /* CTA */
  .cta-panel { min-height: 240px; }
  .cta-bg { object-position: 28% center; }
  .cta-scrim {
    background: linear-gradient(90deg, transparent 0%, rgba(236,249,255,.25) 42%, rgba(236,249,255,.78) 72%);
  }
  .cta-body { min-height: 240px; padding: 32px 46px; }
  .cta-body > div { width: 600px; }
  .cta-actions { width: 600px; gap: 16px; }
  .cta-title { font-size: 32px; }
  .cta-lead  { font-size: 13px; max-width: 520px; }
  .cta-btn { padding: 0 26px; font-size: 14px; }

  /* Customers */
  .customers { padding: 40px 0 28px; }
  .customers-head { padding: 0 64px; }
  .customers-head .h2 { font-size: 28px; }
  .marquee { height: 76px; }
  .marquee-group img { height: 50px; }

  /* Footer — inner column aligned to the same 1120px content edges */
  .footer-inner { max-width: 1216px; padding: 48px; }
  .footer-top { grid-template-columns: 1fr 460px; gap: 56px; }
  .footer-tagline { max-width: 420px; font-size: 13px; }
  .footer-map { padding-top: 86px; }
  .footer-map-frame { height: 180px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL
   Elements fade and rise as they enter the viewport, once each.

   Uses the standalone `translate` property rather than `transform` on
   purpose: cards like .sol-card and .partner-cell already use `transform`
   for their hover lift, and the two would overwrite each other. `translate`
   composes with `transform`, so reveal and hover stay independent.

   Gated behind .js-reveal, which the inline script in <head> adds before
   first paint — and only when the visitor has not asked for reduced motion.
   Without JS (or with reduced motion) nothing is ever hidden.
   ══════════════════════════════════════════════════════════════════════════ */
/* :where() keeps this rule at specificity (0,1,0) so the plain
   .js-reveal .is-revealed rule below can override it. */
.js-reveal :where(
  .hero-copy, .hero-art,
  .transform-head, .wf-card, .outcomes li,
  .solutions-panel > .h2, .sol-card,
  .expertise-title, .why-card, .exp-item,
  .products-title, .product-card,
  .partners-title, .partner-cell,
  .cta-body > *,
  .customers-head, .footer-col
) {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity   .65s cubic-bezier(.22, .61, .36, 1),
    translate .65s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal .is-revealed {
  opacity: 1;
  translate: 0 0;
}

/* ── Motion preferences ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none !important; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  /* Belt and braces: the <head> script already skips .js-reveal here, but if
     the preference changes mid-session nothing should stay stuck hidden. */
  .js-reveal :is(
    .hero-copy, .hero-art,
    .transform-head, .wf-card, .outcomes li,
    .solutions-panel > .h2, .sol-card,
    .expertise-title, .why-card, .exp-item,
    .products-title, .product-card,
    .partners-title, .partner-cell,
    .cta-body > *,
    .customers-head, .footer-col
  ) {
    opacity: 1;
    translate: none;
  }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .marquee, .modal-overlay, .footer-map { display: none !important; }
  body { background: #fff; }
}