/* ==========================================================================
   Atlas Pay — shared foundation
   Tokens, reset, typography, layout, nav, footer, buttons, section chrome,
   accordions, reveal animations, utilities, responsive.
   Class names intentionally mirror the reference site so page CSS can be
   cross-checked against it.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --page-bg: #fbfbfb;
  --white: #ffffff;
  --transparent: transparent;
  --dark-green: #172554;
  --dark-green-2: #101c44;
  --primary-color: #2563eb;
  --green-light: #3b82f6;
  --paste-color: #dbeafe;
  --green-dark: #93a8c8;
  --gray-color: #404040;
  --gray-light: #a6a6a6;
  --bg-color: #f4f4f4;
  --off-white: #e6e6e6;
  --stroke-color: #d4d4d4;
  /* Untitled UI button system */
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-400: #60a5fa;
  --btn-radius: 12px;
  --btn-text: #404040;
  --btn-text-muted: #525252;
  --shadow-skeu: 0 1px 2px rgba(0,0,0,.05), inset 0 -2px 0 rgba(0,0,0,.05), inset 0 0 0 1px rgba(0,0,0,.18);
  --shadow-skeu-soft: 0 1px 2px rgba(0,0,0,.05), inset 0 -2px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.08);
  --card-bg: #f7f7f7;
  --pink-tag: #ffe3e3;

  --font-primary: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: 140px;
  --fs-h1: 86px;
  --fs-h2: 64px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 20px;
  --fs-h6: 18px;
  --fs-p-large: 18px;
  --fs-p: 16px;
  --fs-p-small: 14px;

  --lh-default: 100%;
  --lh-medium: 120%;
  --lh-large: 130%;
  --lh-x-large: 140%;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;

  --ls-large: -0.02em;
  --ls-small: -0.01em;

  --space-xlarge: 140px;
  --space-large: 120px;
  --space-medium: 100px;
  --space-small: 70px;
  --nav-height: 96px;
  --banner-margin: 136px;

  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --nav-height: 78px;
}

@media (max-width: 991px) {
  :root {
    --fs-h1: 60px; --fs-h2: 56px; --fs-h3: 26px;
    --space-xlarge: 100px; --space-large: 100px; --space-medium: 90px; --space-small: 66px; --banner-margin: 124px;
  }
}
@media (max-width: 767px) {
  :root {
    --fs-h1: 48px; --fs-h2: 44px; --fs-h3: 24px;
    --space-xlarge: 80px; --space-large: 80px; --space-medium: 70px; --space-small: 56px; --banner-margin: 124px;
  }
}
@media (max-width: 479px) {
  :root {
    --fs-h1: 38px; --fs-h2: 34px; --fs-h3: 22px; --fs-h4: 18px; --fs-p-large: 16px;
    --space-xlarge: 56px; --space-large: 52px; --space-medium: 48px; --space-small: 44px;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--page-bg);
  color: var(--gray-color);
  font-family: var(--font-primary);
  font-size: var(--fs-p);
  line-height: var(--lh-x-large);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-medium); color: inherit; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--green-light); outline-offset: 2px; border-radius: 4px; }

/* ---------- Typography ---------- */
.heading-display { font-size: var(--fs-display); line-height: var(--lh-default); letter-spacing: var(--ls-large); font-weight: var(--fw-medium); }
h1, .heading-01 { font-size: var(--fs-h1); line-height: var(--lh-default); letter-spacing: var(--ls-large); font-weight: var(--fw-medium); }
h2, .heading-02 { font-size: var(--fs-h2); line-height: var(--lh-default); letter-spacing: var(--ls-large); font-weight: var(--fw-medium); }
h3, .heading-03 { font-size: var(--fs-h3); line-height: var(--lh-large); letter-spacing: var(--ls-small); font-weight: var(--fw-medium); }
h4, .heading-04 { font-size: var(--fs-h4); line-height: var(--lh-x-large); font-weight: var(--fw-semi-bold); }
.heading-04.medium { font-weight: var(--fw-medium); line-height: var(--lh-large); }
h5, .heading-05 { font-size: var(--fs-h5); line-height: var(--lh-large); font-weight: var(--fw-medium); }
h6, .heading-06 { font-size: var(--fs-h6); line-height: var(--lh-x-large); font-weight: var(--fw-semi-bold); }
.paragraph-large, .text-lg { font-size: var(--fs-p-large); line-height: var(--lh-x-large); }
.paragraph-small, .text-sm { font-size: var(--fs-p-small); line-height: var(--lh-x-large); }
.medium { font-weight: var(--fw-medium); }
.semi-bold { font-weight: var(--fw-semi-bold); }
.bold { font-weight: var(--fw-bold); }
.text-center { text-align: center; }
.text-left { text-align: left; }

.text-color-dark-green, .dark-green { color: var(--dark-green); }
.text-color-white { color: var(--white); }
.text-color-green-dark, .green-dark { color: var(--green-dark); }
.text-color-grey-light { color: var(--gray-light); }
.text-color-primary { color: var(--primary-color); }
.text-color-green-light { color: var(--green-light); }

/* Gradient text */
.linear-01 { background-image: linear-gradient(90deg, #2563eb, #3b82f6 45%, #60a5fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.linear-02 { background-image: linear-gradient(90deg, #2563eb, #60a5fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.linear-03 { background-image: linear-gradient(90deg, #1e3a8a, #2563eb 55%, #60a5fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Section eyebrow (small gradient label) */
.section-subtitle {
  font-size: var(--fs-p-small);
  line-height: var(--lh-x-large);
  background-image: linear-gradient(90deg, #2563eb, #60a5fa);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-transform: uppercase;
  letter-spacing: 0;
  display: inline-block;
}
.section-subtitle.is-light { background-image: linear-gradient(90deg, #fff, #a6a6a6); }
.section-subtitle.is-light-red { background-image: linear-gradient(90deg, #fff, #93c5fd); }
.section-subtitle.no-upper { text-transform: none; }

/* Hero sub title chip: "World best platform" */
.sub-title {
  position: relative; display: inline-flex; padding: 2px 2px 2px 8px;
  font-size: var(--fs-p); line-height: var(--lh-x-large);
  background-image: linear-gradient(90deg, #2563eb, #60a5fa);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.sub-title-bg {
  position: absolute; inset: 0; z-index: -1;
  border-left: 1.5px solid var(--green-light);
  background-image: linear-gradient(90deg, rgba(37,99,235,.18), rgba(255,255,255,.35));
}
.sub-title-02 { display: inline-block; color: var(--white); border-radius: 30px; padding: 4px 16px; background-image: linear-gradient(90deg, #1e3a8a, #2563eb 55%, #60a5fa); font-size: var(--fs-p-small); }
.sub-title-02.premium { background-image: linear-gradient(90deg, #2563eb, #60a5fa 100%, #60a5fa); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 1222px; margin: 0 auto; padding: 0 15px; }
.container.desktop-no-padding { max-width: 1192px; padding: 0 4px; }
.container.narrow { max-width: 990px; }
.section { padding-bottom: var(--space-xlarge); }
.section.is-banner { margin-top: var(--banner-margin); padding-top: var(--space-large); }
.page-wrapper { position: relative; }
.desktop-only { display: initial; }
.mobile-only { display: none !important; }
.opacity-0 { opacity: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.nav-open { overflow: hidden; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-100 { width: 100%; }
.flex { display: flex; }
.grid { display: grid; }

/* Section title patterns */
.section-title-block { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: 60px; }
.section-title-block.is-left { align-items: flex-start; text-align: left; margin-right: auto; }
.section-title-block.is-future { max-width: 850px; margin-left: auto; margin-right: auto; }
.section-title-block.is-serve { max-width: 900px; margin-left: auto; margin-right: auto; }
.section-title-block.is-process { align-items: flex-start; text-align: left; max-width: 570px; margin-right: auto; }
.section-title-block.is-mission, .section-title-block.is-feature, .section-title-block.is-feature-02 { max-width: 680px; margin-left: auto; margin-right: auto; }
.section-title-block.is-faq { max-width: 684px; margin-left: auto; margin-right: auto; }
.section-title-block.is-review { align-items: flex-start; text-align: left; max-width: 590px; margin-right: auto; }
.section-title-left { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.section-title-left.is-blog, .section-title-left.is-value { max-width: 600px; }
.section-title-left.is-solution { max-width: 480px; }
.section-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 60px; }
.section-title-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; width: 100%; max-width: 385px; margin: 0 auto 50px; color: #191919; }

/* ---------- Section chrome: hairline borders + corner particles ---------- */
.section-border-block {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  box-shadow: inset 0 -2px 0 0 var(--page-bg), inset 0 2px 0 0 var(--page-bg);
}
.section-border-block.top-only { box-shadow: inset 0 2px 0 0 var(--page-bg); }
.section-border-block.is-process { z-index: -1; }
.section-border-particle-wrap {
  position: relative; width: 100%; max-width: 1192px; height: 100%; margin: 0 auto;
  border-left: 4px solid var(--page-bg); border-right: 4px solid var(--page-bg);
}
.left-top, .right-top, .left-bottom, .right-bottom { position: absolute; width: 100%; max-width: 160px; height: 70px; object-fit: contain; }
.left-top { top: -34.5px; left: -80px; }
.right-top { top: -34.5px; right: -80px; }
.left-bottom { bottom: -34.5px; left: -80px; }
.right-bottom { bottom: -34.5px; right: -80px; z-index: 1; }
.border-particle-wrap { position: relative; }
/* The corner particles hang 80px past each side of the 1192px wrap, so the row
   they sit in is really 1352px wide. A section clips its own particles, but a
   spacer between sections has nothing to clip against and drags the document
   sideways. Below the width where the overhang fits, clip the spacer to its own
   box; the padding/negative-margin pair keeps the vertical overhang intact. */
@media (max-width: 1360px) {
  .border-particle-wrap {
    overflow: hidden;
    padding-top: 45px; padding-bottom: 45px;
    margin-top: -45px; margin-bottom: -45px;
  }
}
.border-particle {
  position: relative; z-index: 5; width: 100%; max-width: 1192px; height: 80px; margin: 0 auto;
  border-left: 4px solid var(--page-bg); border-right: 4px solid var(--page-bg); border-radius: 20px;
}

/* ---------- Buttons — Untitled UI button system ----------
   Primary  Blue/600 fill, white label, skeuomorphic shadow
   Secondary  white fill, 1px neutral border, neutral-700 label
   Tertiary  transparent, neutral-600 label
   All sizes share a 12px radius and a 600-weight label.       */

/* Primary — the large page CTA */
.primary-button-wrapper {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 16px; border-radius: var(--btn-radius);
  background-color: var(--blue-600); color: var(--white);
  font-size: 16px; font-weight: var(--fw-semi-bold); line-height: 24px;
  box-shadow: var(--shadow-skeu);
  transition: background-color .2s ease, transform .2s ease;
}
.primary-button-wrapper:hover { background-color: var(--blue-700); }
.primary-button-wrapper:active { transform: translateY(1px); }
.primary-button-wrapper.middle { padding-top: 10px; padding-bottom: 10px; }
.primary-button-text-wrapper { display: flex; flex-direction: column; align-items: center; height: 24px; overflow: hidden; }
.primary-button-text { display: block; line-height: 24px; transition: transform .4s ease; }
.primary-button-wrapper:hover .primary-button-text { transform: translateY(-100%); }
.primary-button-icon-wrapper { display: flex; align-items: center; width: 14px; height: 15px; }
.primary-button-icon { width: 14px; filter: brightness(0) invert(1); transition: transform .4s ease; }
.primary-button-wrapper:hover .primary-button-icon { transform: rotate(-45deg); }

/* Secondary — the default button everywhere else */
.button-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 12px 14px; border-radius: var(--btn-radius);
  background-color: var(--white); color: var(--btn-text);
  border: 1px solid var(--stroke-color);
  font-size: var(--fs-p-small); font-weight: var(--fw-semi-bold); line-height: 20px;
  box-shadow: var(--shadow-skeu-soft);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.button-secondary:hover { background-color: #fafafa; border-color: #a3a3a3; }
.button-secondary:active { transform: translateY(1px); }

.button-secondary.is-primary {
  background-color: var(--blue-600); color: var(--white);
  border-color: transparent; box-shadow: var(--shadow-skeu);
}
.button-secondary.is-primary:hover { background-color: var(--blue-700); border-color: transparent; }

.button-secondary.is-white { background-color: var(--white); color: var(--btn-text); }
.button-secondary.is-white:hover { background-color: #fafafa; }

.button-secondary.is-dark {
  background-color: var(--dark-green); color: var(--white);
  border-color: transparent; box-shadow: var(--shadow-skeu);
}
.button-secondary.is-dark:hover { background-color: #0f1b3f; }

/* Tertiary — no fill, no border */
.button-secondary.is-outline {
  background: transparent; color: var(--btn-text-muted);
  border-color: transparent; box-shadow: none;
}
.button-secondary.is-outline:hover { background: #f5f5f5; border-color: transparent; }

.button-secondary.small { padding: 8px 12px; }
.button-socondary-text-wrap { height: 20px; overflow: hidden; }
.button-socondary-text { display: block; line-height: 20px; transition: transform .4s ease; }
.button-secondary:hover .button-socondary-text { transform: translateY(-100%); }
.button-secondary-icon-wrapper { display: flex; justify-content: flex-end; align-items: center; width: 12px; overflow: hidden; }
.button-secondary-icon { flex: none; width: 12px; height: auto; transition: transform .4s ease; }
.button-secondary:hover .button-secondary-icon { transform: translateX(100%); }
.button-secondary.no-icon .button-secondary-icon-wrapper { display: none; }

/* Compact pill button used in the mobile nav */
.button-04 {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--btn-radius);
  background-color: var(--blue-600); color: var(--white); box-shadow: var(--shadow-skeu);
}
.button-04:hover { background-color: var(--blue-700); }
.button-04-text-wrap { height: 20px; overflow: hidden; }
.button-04-text-group { transition: transform .4s ease; }
.button-04:hover .button-04-text-group { transform: translateY(-50%); }
.button-04-text { font-size: var(--fs-p-small); font-weight: var(--fw-semi-bold); line-height: 20px; color: var(--white); }
.button-02-arrow-group { display: inline-flex; justify-content: flex-end; align-items: flex-start; width: 20px; height: 20px; overflow: hidden; transform: rotate(-45deg); }
.button-02-arrow { flex: none; width: 20px; transform: rotate(45deg); transition: transform .4s ease; }
.button-04:hover .button-02-arrow { transform: translateX(100%) rotate(45deg); }

/* Text button with a round icon (used on the dark cards) */
.text-button { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-weight: var(--fw-semi-bold); }
.text-button.is-dark { color: var(--blue-600); }
.text-button-text { font-size: var(--fs-p-small); font-weight: var(--fw-semi-bold); }
.text-button-icon-wrap { display: flex; align-items: center; justify-content: center; padding: 9px; border-radius: 50%; background-color: var(--white); color: var(--blue-600); transition: transform .3s ease; }
.text-button.is-dark .text-button-icon-wrap { background-color: var(--blue-600); color: var(--white); }
.text-button:hover .text-button-icon-wrap { transform: translateX(4px); }
.text-button-icon { width: 10px; }

/* ---------- Navbar (Figma: brim-2, node 4258-633) ----------
   A flat bar on the page rather than a floating card: 1440 wide, 120px side
   padding, 24px tall padding, logo left, menu centred, region + portal right. */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 999; padding: 0; background-color: var(--white); }
.navbar-container {
  position: relative; z-index: 6; width: 100%; max-width: 1440px; margin: 0 auto;
  padding: 24px 120px; background-color: transparent; border-radius: 0; box-shadow: none;
}
.nav-region { display: inline-flex; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 8px; background-color: var(--white); }
.nav-region img { width: 20px; height: 20px; }
.nav-region-caret { opacity: .6; }
.nav-portal {
  display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px;
  border-radius: 12px; background-image: linear-gradient(180deg, #2563eb, #2a6af8);
  font-size: 16px; line-height: 24px; font-weight: var(--fw-medium); letter-spacing: -.01em;
  color: var(--white); transition: filter .3s ease;
}
.nav-portal:hover { filter: brightness(1.06); }

.main-navbar { position: relative; z-index: 5; display: flex; align-items: center; padding: 0 20px; }
.navbar-wrapper { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.navbar-left { display: flex; flex: 1 1 0; min-width: 0; align-items: center; gap: 32px; }
.nav-menu-wrapper { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.nav-logo-link { display: inline-flex; align-items: center; gap: 8px; height: 32px; color: var(--dark-green); }
.nav-logo-glyph { width: 20px; height: 23px; flex: none; }
.nav-logo-text { font-size: 20px; font-weight: var(--fw-regular); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; color: #000; }
.nav-logo-text b { font-weight: var(--fw-bold); }
.nav-menu { display: flex; align-items: center; gap: 23px; }
.nav-item { position: relative; }
.nav-link { display: flex; align-items: flex-start; padding: 6px 0; color: var(--gray-color); transition: color .3s; }
.nav-link:hover, .nav-link.w--current { color: var(--dark-green); }
.nav-link.w--current { font-weight: var(--fw-medium); }
.nav-para-text { line-height: 28px; }
.nav-dropdown { position: relative; padding: 0 10px; }
.nav-dropdown-toggle { display: flex; align-items: center; gap: 2px; padding: 25px 32px 25px 0; color: var(--gray-color); cursor: pointer; transition: color .3s; }
.nav-dropdown:hover .nav-dropdown-toggle, .nav-dropdown.is-open .nav-dropdown-toggle { color: var(--dark-green); }
.nav-dropdown-icon { width: 16px; height: 16px; margin-left: 2px; transition: transform .4s ease; }
.nav-dropdown:hover .nav-dropdown-icon, .nav-dropdown.is-open .nav-dropdown-icon { transform: rotate(180deg); }
.nav-dropdown-list-wrap {
  position: absolute; top: 100%; left: -201px; padding-top: 10px;
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}
.nav-dropdown:hover .nav-dropdown-list-wrap, .nav-dropdown.is-open .nav-dropdown-list-wrap { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .4s ease, transform .4s ease, visibility 0s; }
.nav-dropdown-list-body {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; min-width: 504px; padding: 24px;
  background-color: var(--white); border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.nav-dropdown-list { display: flex; flex-direction: column; padding-right: 12px; }
.nav-dropdown-list.third { padding-left: 0; }
.nav-menu-para { color: var(--dark-green); font-weight: var(--fw-medium); white-space: nowrap; }
.nav-dropdown-divider { width: 100%; height: 1px; margin-top: 20px; background-color: var(--stroke-color); }
.dropdown-page-link-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.navbar-text { color: var(--gray-color); text-align: left; white-space: nowrap; transition: color .3s; }
.navbar-text:hover, .navbar-text.w--current { color: var(--dark-green); }
.navbar-text.w--current { font-weight: var(--fw-medium); }
.navbar-right { display: flex; align-items: center; gap: 30px; }
.navbar-cart-button { position: relative; display: flex; align-items: center; color: var(--dark-green); }
.navbar-cart-icon { width: 24px; height: 24px; }
.navbar-cart-quantity {
  position: absolute; left: 11px; bottom: 12px; min-width: 14px; height: 14px; padding: 0 4px;
  border-radius: 9px; background-color: var(--green-light); color: var(--white);
  font-size: 10px; line-height: 14px; text-align: center; font-weight: var(--fw-medium);
}
.nav-button-wrapper { display: flex; align-items: center; gap: 20px; }
.mobile-menu-title { display: none; }
.menu-button { display: none; flex-direction: column; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--dark-green); }
.menu-button-line { display: block; flex: none; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .4s ease, opacity .3s ease; }
.menu-button-line + .menu-button-line { margin-top: 6px; }
.menu-button.is-open .menu-button-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-button.is-open .menu-button-line:nth-child(2) { opacity: 0; }
.menu-button.is-open .menu-button-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-menu-wrapper { display: contents; }
.nav-menu-wrap.desktop-only { display: block; }
.nav-dropdown-list-body.mobile-only { display: none; }

/* ---------- Footer ---------- */
.footer { background-color: var(--dark-green); color: var(--white); position: relative; }
.footer-main { display: flex; justify-content: space-between; gap: 40px; padding: 60px 0; }
.footer-link-widget-wapper { display: flex; justify-content: space-between; gap: 27px; width: 100%; max-width: 522px; }
.footer-link-widget-wrap { display: flex; flex-direction: column; gap: 27px; }
.footer-link-widget { display: flex; flex-direction: column; gap: 10px; max-width: 216px; color: var(--white); }
.footer-link-widget.newsletter { width: 100%; max-width: 456px; gap: 24px; }
.footer-link-title { color: var(--green-light); }
.footer-link-list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer-link { color: var(--white); transition: color .3s; }
.footer-link:hover { color: var(--green-light); }
.footer-link.w--current { border-bottom: 1px solid var(--white); padding-bottom: 2px; }
.footer-newsletter-wrap { display: flex; flex-direction: column; gap: 10px; }
.form-block { margin: 0; }
.form { position: relative; display: flex; gap: 4px; }
.text-field {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid transparent;
  background-color: rgba(255,255,255,.1); color: var(--white); outline: none;
}
.text-field::placeholder { color: var(--green-dark); }
.text-field:focus { border-color: rgba(255,255,255,.25); }
.submit-button { flex: none; padding: 10px 14px; max-height: 44px; border-radius: 8px; background-color: var(--white); color: var(--dark-green); cursor: pointer; transition: background-color .3s; }
.submit-button:hover { background-color: var(--paste-color); }
.form-message { display: none; margin-top: 10px; padding: 12px 16px; border-radius: 8px; text-align: center; }
.form-message.is-visible { display: block; }
.newsletter-success, .success-message { background-color: var(--green-light); color: var(--dark-green); }
.error-message { background-color: var(--stroke-color); color: var(--dark-green); }
.footer-bottom-block { position: sticky; bottom: 0; z-index: 6; padding: 55px 0 20px; background-color: var(--dark-green-2); }
.footer-description-block { display: flex; justify-content: space-between; gap: 80px; margin-bottom: 130px; }
.footer-logo-link { display: inline-flex; align-items: center; gap: 10px; color: var(--white); }
.footer-logo-glyph { width: 32px; height: 37px; }
.footer-logo-text b { font-weight: var(--fw-bold); }
.footer-logo-text { font-size: 36px; font-weight: var(--fw-regular); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.footer-description-wrap { display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: 460px; color: #fff; }
.footer-link-widget-wapper.contact { max-width: none; }
.copyright-block { display: flex; justify-content: space-between; align-items: center; gap: 24px; color: var(--green-light); }
.copyright-block .footer-link { color: var(--white); }
.social-link-list { display: flex; gap: 24px; width: 100%; max-width: 460px; justify-content: flex-end; }
.social-link-list-item { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--white); transition: color .3s, transform .3s; }
.social-link-list-item:hover { color: var(--green-light); transform: translateY(-2px); }

/* ---------- Accordion (FAQ) ---------- */
/* flex: none on both the accordion and its panel. .faq-accordion-wrap is a
   flex column, so by default each accordion shrinks to fit and its
   overflow:hidden clips the opening panel back to zero height. */
.accordion { flex: none; display: flex; flex-direction: column; width: 100%; padding-bottom: 4px; overflow: hidden; }
.accordion-divider { width: 100%; height: 1px; background-color: var(--dark-green); }
.accordion-title-wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; padding: 20px 0 16px; color: var(--dark-green); cursor: pointer; text-align: left; }
.accordion-title { margin: 0; font-weight: var(--fw-medium); white-space: normal; }
.accordion-icon-wrapper { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; }
.accordion-icon { width: 24px; transition: transform .3s ease; }
.accordion.is-open .accordion-icon { transform: rotate(45deg); }
/* Open/close is driven purely by .is-open. An earlier version animated an
   inline pixel height from scrollHeight; inside this flex column with
   overflow:hidden that height never took effect and answers stayed collapsed.
   The content fades in rather than sliding, which is reliable here. */
.accordion-description-wrap { flex: none; width: 100%; height: 0; overflow: hidden; }
.accordion.is-open .accordion-description-wrap { height: auto; }
.accordion-description-wrap > * { opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease; }
.accordion.is-open .accordion-description-wrap > * { opacity: 1; transform: none; }
.accordion-text-wrap { max-width: 404px; padding-bottom: 16px; }
.faq-accordion-block { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.faq-accordion-wrap { display: flex; flex-direction: column; width: 100%; max-width: 800px; margin: 0 auto; }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0; filter: blur(3px); transform: translate3d(0, 50px, 0);
  will-change: opacity, transform, filter;
}
[data-reveal].is-inview {
  opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0);
  transition: transform 1.2s var(--ease-out-quart), opacity 1.2s var(--ease-out-quart), filter .6s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; filter: none; transform: none; }
  [data-reveal].is-inview { transition: none; }
}

/* QA screenshot mode (?shot=1): no pinned/scroll-driven layout, everything visible */
.is-shot [data-reveal] { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
.is-shot .serve-section { height: auto !important; }
.is-shot .serve-sticky { position: static !important; min-height: 0 !important; }
.is-shot .serve-card-block { transform: none !important; }
.is-shot .footer-bottom-block { position: static !important; }

/* Spin when in view (process card icons) */
@keyframes spin360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.is-spinning { animation: spin360 5s linear infinite; }

/* ---------- Lottie hosts ---------- */
[data-lottie] { position: relative; }
[data-lottie] svg { display: block; width: 100%; height: 100%; }

/* ---------- Marquee ---------- */
.marquee { display: flex; overflow: hidden; width: 100%; }
.marquee-track { display: flex; flex: none; align-items: center; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------- Tags / misc shared ---------- */
.blog-tag-wrap { display: flex; gap: 4px; }
.blog-tag { display: flex; align-items: center; justify-content: center; padding: 6px 8px; border-radius: 6px; background-color: var(--pink-tag); color: var(--dark-green); font-size: var(--fs-p-small); line-height: 1.3; }
.svg { max-width: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
  .container.desktop-no-padding { padding: 0 20px; }
  .section-border-block { padding: 0 16px; }
  .border-particle-wrap { padding: 0 16px; }
  .border-particle { height: 64px; }
  .section-title-block { margin-bottom: 40px; }
  .section-title-row { margin-bottom: 40px; }
  .section-title-block.is-future { max-width: 625px; }
  .faq-accordion-block { grid-template-columns: 1fr; gap: 0; }
  .accordion-divider.mobile-hide { display: none; }
  .accordion-text-wrap { padding-right: 24px; }

  /* Navbar → mobile */
  .navbar { padding: 0; }
  .navbar-container { max-width: none; padding: 16px 24px; }
  .main-navbar { padding: 0; }
  .navbar-left { gap: 20px; }
  .menu-button { display: flex; }
  .navbar-right { gap: 16px; }
  .nav-menu-wrapper {
    display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
    max-height: calc(100vh - 110px); overflow: auto;
    background-color: var(--white); border-radius: 0 0 10px 10px; padding: 8px 16px 24px;
    box-shadow: 0 30px 40px -20px rgba(23,37,84,.15);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
  }
  .nav-menu-wrapper.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .4s ease, transform .4s ease, visibility 0s; }
  .nav-menu-wrap.desktop-only { display: block !important; }
  .mobile-menu-title { display: block; text-align: left; margin-bottom: 14px; color: var(--dark-green); font-weight: var(--fw-medium); }
  .nav-menu { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
  .nav-item { display: block; letter-spacing: -.68px; }
  .nav-link { padding: 0; }
  .nav-para-text, .nav-para-text.nav-link-text { line-height: 130%; }
  .nav-dropdown { width: 100%; padding: 0; }
  .nav-dropdown-toggle { width: 100%; padding: 0 30px 0 0; justify-content: space-between; }
  .nav-dropdown-icon { margin-left: 0; }
  .nav-dropdown-list-wrap { position: static; padding-top: 0; opacity: 1; visibility: visible; transform: none; transition: none; height: 0; overflow: hidden; transition: height .4s ease; }
  .nav-dropdown.is-open .nav-dropdown-list-wrap { height: auto; }
  .nav-dropdown-list-body { grid-template-columns: 1fr 1fr; gap: 40px 0; min-width: 0; width: 100%; padding: 16px 20px; box-shadow: none; border-radius: 0; }
  .nav-dropdown-list-body.mobile-only { display: none !important; }
  .nav-dropdown-list { padding-right: 0; }
  .nav-dropdown-divider { margin-top: 16px; }
  .nav-button-wrapper { width: 100%; margin-top: 10px; }
  .navbar-text { white-space: normal; }

  /* Footer */
  .footer-link-widget-wapper { max-width: none; }
  .social-link-list, .footer-description-wrap { max-width: 380px; }
  .footer-description-block { gap: 40px; margin-bottom: 80px; }
  .footer-link-widget.newsletter { max-width: 320px; }
  .copyright-block { gap: 12px; }
}
@media (max-width: 767px) {
  .navbar-container { padding: 14px 20px; }
  .button-secondary { padding-top: 12px; padding-bottom: 12px; }
  .primary-button-wrapper, .primary-button-wrapper.middle { padding-top: 12px; padding-bottom: 12px; }
  .button-02-arrow-group { width: 22px; height: 22px; }
  .section-title-block { margin-bottom: 32px; }
  .section-title-row { flex-direction: column; align-items: center; text-align: center; gap: 24px; margin-bottom: 32px; }
  .section-title-row .section-title-left { align-items: center; text-align: center; }
  .section-title-block.is-process, .section-title-block.is-review { align-items: center; text-align: center; margin-left: auto; margin-right: auto; max-width: 420px; }
  .section-title-block.is-mission, .section-title-block.is-feature { max-width: 490px; }
  .section-title-block.is-faq { max-width: 470px; }
  .section-title-wrap { margin-bottom: 32px; }
  .accordion-text-wrap { padding-right: 0; }
  .border-particle { height: 54px; }
  .footer-main { flex-direction: column; padding: 40px 0; }
  .footer-link-widget.newsletter { order: -1; max-width: none; }
  .footer-link-widget-wapper { flex-wrap: wrap; gap: 20px; }
  .footer-link-list { gap: 4px; }
  .footer-description-block { flex-direction: column; gap: 24px; margin-bottom: 40px; }
  .footer-description-wrap { max-width: none; gap: 16px; }
  .footer-bottom-block { position: static; padding-top: 40px; }
  .copyright-block { flex-direction: column; align-items: flex-start; }
  .social-link-list { order: -1; justify-content: flex-start; }
}
@media (max-width: 479px) {
  .navbar-container { padding: 12px 16px; }
  .button-02-arrow-group { width: 20px; height: 20px; }
  .nav-dropdown-list-body { padding: 14px 0; }
  .border-particle { height: 44px; }
  .left-top, .right-top, .left-bottom, .right-bottom { object-fit: cover; }
  .accordion-title-wrap { gap: 12px; }
  .footer-link-widget-wapper { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-link-widget-wapper.contact { display: flex; flex-direction: column; gap: 24px; }
  .footer-link-widget-wrap { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .footer-link-widget { gap: 4px; }
  .section-title-block.is-faq, .section-title-block.is-mission { max-width: 360px; }
  .section-title-block.is-feature, .section-title-block.is-review, .section-title-block.is-feature-02 { max-width: 330px; }
}

/* ---------- Artwork harmonisation ----------
   The template illustration set and lotties ship green. They are decorative
   layers with no text inside, so a hue shift lands them on the blue brand
   without redrawing anything. Add .art-blue to any further template art.
   Photographs are deliberately excluded.                                  */
.build-lottie,
.serve-card-lottie,
.lottie-animation,
.future-lottie,
.build-card-bg,
.section-border-particle-wrap img,
.border-particle img,
.feature-widget-icon,
.process-card-icon,
.accordion-icon,
.integration-bg-image,
.art-blue {
  /* The template artwork is not one colour — it mixes coral, green, blue and
     amber, so a single hue-rotate sends half of it gold. Collapse everything to
     greyscale first, then re-tint the whole thing into the brand blue, which
     gives one coherent duotone whatever the source art happened to be. */
  filter: grayscale(1) sepia(1) hue-rotate(186deg) saturate(2.6) brightness(1.03);
}

/* ---------- Closing CTA panel ----------
   Used at the foot of most pages, so it lives here rather than in a page
   stylesheet. Markup is in index.html.                                   */
.cta-section { padding: 10px; }
.cta-content-block { padding: var(--space-medium) 10px; border-radius: 16px; background-color: var(--dark-green); background-image: radial-gradient(120% 140% at 8% 100%, rgba(37,99,235,.55) 0%, rgba(23,37,84,0) 62%); }
.cta-text-block { display: flex; flex-direction: column; gap: 40px; margin-bottom: 80px; }
.cta-title-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 985px; }
.cta-info-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.cta-info-wrap { display: flex; align-items: center; gap: 12px; color: var(--paste-color); }
.cta-info-wrap .svg { flex: none; width: 24px; height: 24px; }
.cta-info-wrap p { white-space: nowrap; }
.cta-button-wrapper { display: flex; justify-content: space-between; gap: 20px; min-height: 115px; }
.cta-button-wrap { display: flex; flex-direction: column; justify-content: space-between; width: 100%; }
.cta-button-wrap .button-secondary { height: 100%; }

@media (max-width: 991px) {
  .cta-content-block { padding-left: 0; padding-right: 0; }
  .cta-button-wrapper { min-height: 80px; }
}
@media (max-width: 767px) {
  .cta-text-block { gap: 24px; margin-bottom: 40px; }
  .cta-title-wrap { max-width: 440px; }
  .cta-info-wrapper { row-gap: 16px; }
  .cta-button-wrapper { gap: 16px; min-height: 60px; }
}
@media (max-width: 639px) {
  .cta-content-block { padding-top: 40px; padding-bottom: 40px; }
  .cta-button-wrapper { flex-wrap: wrap; }
}