/* OrderZ — Onyx style for industry landing pages.
   Modern minimal luxury: deep ink panels, hairline grids, uppercase micro-labels,
   serif-italic accents. Scoped entirely under .onx so it never leaks into the
   rest of the site (mega-menu nav / footer stay on the standard site styles). */

.onx {
  --onyx:    #0A1E3A;
  --onyx-2:  #102C56;
  --cool:    #F6F5F2;
  --cool-2:  #EEEDE8;
  --line-d:  #DEDCD4;
  --line-l:  #24406B;
  --ink:     #1A1B1F;
  --ink-2:   #56575E;
  --ink-3:   #8A8B91;
  --clay:    #C2693E;
  --orange:  rgb(255, 113, 54);
  --orange-d:rgb(232, 94, 37);
  --navy:    rgb(16, 44, 86);
  --news:    "Newsreader", Georgia, serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background: var(--cool);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
.onx * { box-sizing: border-box; }
.onx h1, .onx h2, .onx h3, .onx h4 { margin: 0; }
.onx a { color: inherit; text-decoration: none; }
.onx img { display: block; max-width: 100%; }
.onx ::selection { background: var(--onyx); color: #fff; }
.onx .wrap { width: 100%; max-width: 1250px; margin: 0 auto;
  padding-left: 15px; padding-right: 15px;
 }
.onx section { padding: 50px 0;
 }

/* type */
.onx-klabel { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--clay); }
.onx-hd { font-weight: 600; letter-spacing: -.035em; }
.onx-hd em { font-family: var(--news); font-weight: 400; font-style: italic; letter-spacing: -.01em; }
.onx-lead { color: var(--ink-2); line-height: 1.62; }

/* buttons — square, uppercase, no radius */
.onx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 0; font-weight: 600; font-size: 13.5px; letter-spacing: .02em; padding: 17px 30px; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; font-family: var(--sans); }
.onx-btn-primary { background: #FF6025 ;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 30px; }
.onx-btn-primary:hover { background: var(--orange-d); }
.onx-btn-line { background: transparent; color: var(--ink); border-color: rgba(26,27,31,.32); }
.onx-btn-line:hover { border-color: var(--ink); }
.onx-btn-linel {     background: #FFFFFF !important;
    font-weight: 700 !important;
    color: #334155 !important;
    border-color: rgba(255, 255, 255, .34);
    border-radius: 30px !important;
}.onx .s-head {

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    text-align: center !important;}
    .onx .onx-pains .s-head .onx-hd {
  max-width: 900px !important;     /* wide enough for the first line */
  /* margin: 0 auto !important; */
  /* text-wrap: balance;     */
            /* splits lines evenly */
}
.onx-btn-linel:hover { border-color: #fff; }

/* ---------- Hero (onyx) ---------- */
.onx-hero { background: var(--onyx); color: #fff; position: relative; overflow: hidden; }
/* .onx-hero .wrap { padding: 92px 44px 0; display:flex !important; } */
.onx-hero .top { max-width: 1000px; }
.onx-hero .onx-klabel { color: var(--clay); }
.onx-hero h1 { margin-top: 22px; font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.5); text-transform: none; }
.onx-hero .hook { margin-top: 18px; font-size: 58px; max-width: 18ch; }
.onx-hero .hook em { color: var(--orange); }
.onx-hero .sub { margin-top: 28px; font-size: 18px; color: rgba(255,255,255,.7); max-width: 56ch; line-height: 1.6; }
.onx-hero .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.onx-hero .trust { margin-top: 30px; font-size: 12.5px; letter-spacing: .04em; color: rgba(255,255,255,.45); max-width: 62ch; line-height: 1.6; }

.onx-strip { margin-top: 70px; border-top: 1px solid var(--line-l); display: grid; grid-template-columns: repeat(4, 1fr); }
.onx-strip .col { padding: 26px 28px 30px; border-left: 1px solid var(--line-l); }
.onx-strip .col:first-child { border-left: 0; padding-left: 0; }
.onx-strip .t { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.onx-strip .time { margin-top: 12px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.onx-strip .who { margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.62); }
.onx-strip .svc { margin-top: 14px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--clay); }

/* ---------- Image band ---------- */
.onx-band { padding: 0 !important; height: 460px; background: var(--cool-2); overflow: hidden; }
.onx-band img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- generic section head ---------- */
.onx .s-head { display: grid; grid-template-columns: 0.42fr 1fr; gap: 40px; align-items: end; }
.onx .s-head .onx-hd { font-size: 38px;}
.onx .s-head .intro { font-size: 16.5px; color: var(--ink-2); line-height: 1.62; max-width: 46ch; }

/* ---------- Pains ---------- */
.onx-pains { background: var(--cool); }
/* .onx-pain-list { margin-top: 64px; border-top: 1px solid var(--line-d); } */
.onx-pain { display: grid;
  /* grid-template-columns: 60px 0.7fr 1.3fr; */
padding: 34px 0; border-bottom: 1px solid var(--line-d); align-items: baseline; transition: background .2s; }
.onx-pain:hover { background: var(--cool-2); }
.onx-pain .n { font-size: 13px; font-weight: 600; color: var(--clay); letter-spacing: .04em; padding-top: 4px; }
.onx-pain h3 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
.onx-pain p {
  font-size: 15px;
   color: var(--ink-2); line-height: 1.64; }
.onx-connector { margin-top: 52px; font-size: 22px; font-weight: 500; letter-spacing: -.015em; line-height: 1.4; color: var(--ink); max-width: 60ch; }
.onx-connector em { font-family: var(--news); font-style: italic; color: var(--clay); }

/* ---------- How (onyx) ---------- */
.onx-how {     background: linear-gradient(90deg, #5969ff36 20%, #ff377624 60%, #ff713630 100%); color: #fff; }
.onx-how .s-head .onx-hd { color: #fff; }
.onx-how .s-head .intro { color: rgba(255,255,255,.6); }
.onx-how-grid { margin-top: 66px; display: grid; grid-template-columns: repeat(4, 1fr);  }
.onx-hstep { padding: 36px 28px 40px;  }
.onx-hstep:first-child { border-left: 0; padding-left: 0; }
.onx-hstep .num { font-size: 13px; font-weight: 600; color: var(--clay); letter-spacing: .1em; }
.onx-hstep h3 { margin-top: 22px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: #fff; line-height: 1.22; }
.onx-hstep p { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.62); line-height: 1.62; }
.onx-how-foot { margin-top: 56px; padding-top: 36px;  display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.onx-how-foot p { font-size: 16px; color: rgba(255,255,255,.74); line-height: 1.6; max-width: 58ch; }
.onx-how-foot p b { color: #fff; font-weight: 600; }
.onx-how-foot .ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Solutions / features (hairline grid) ---------- */
.onx-sol-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); }
.onx-sol { padding: 34px 30px 38px; border-right: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
.onx-sol-grid .onx-sol:nth-child(3n) { border-right: 0; }
.onx-sol .ix { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: .08em; }
.onx-sol h3 { margin-top: 20px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.24; }
.onx-sol p { margin-top: 11px; font-size: 14px; color: var(--ink-2); line-height: 1.62; }

/* ---------- Business types ---------- */
.onx-types { background: var(--cool-2); }
.onx-tlist { margin-top: 56px; }
.onx-type { display: grid; grid-template-columns: 0.42fr 1fr; gap: 40px; padding: 26px 0; border-top: 1px solid var(--line-d); align-items: baseline; }
.onx-type:last-of-type { border-bottom: 1px solid var(--line-d); }
.onx-type h3 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.onx-type p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.onx-type .go { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--clay); }
.onx-type .go:hover { color: var(--orange); }
.onx-types-foot { margin-top: 44px; font-size: 16.5px; color: var(--ink-2); line-height: 1.64; max-width: 70ch; }
.onx-types-foot b { color: var(--ink); font-weight: 600; }

/* ---------- Outcomes (onyx) ---------- */
.onx-out { background: var(--onyx); color: #fff; }
.onx-out .s-head .onx-hd { color: #fff; }
.onx-out-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(2, 1fr);  }
.onx-ocard { padding: 38px 40px 40px;}
.onx-ocard:nth-child(odd) {  padding-left: 0; }
.onx-ocard:nth-child(even) { padding-left: 40px; }
.onx-ocard .ix { font-size: 12px; font-weight: 600; color: var(--clay); letter-spacing: .1em; }
.onx-ocard h3 { margin-top: 18px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.22; color: #fff; }
.onx-ocard p { margin-top: 12px; font-size: 14.5px; color: rgba(255,255,255,.64); line-height: 1.62; }
.onx-out-ctas { margin-top: 52px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Proof ---------- */
.onx-logos { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-d); }
.onx-logo-tile { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 104px;
   /* border-right: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); */
 }
.onx-logos .onx-logo-tile:nth-child(3n) { border-right: 0; }
.onx-logo-tile span { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.onx-logo-tile.anchor span { color: var(--clay); }
.onx-quotes { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-d); border-top: 0; }
.onx-quote { padding: 40px 38px; border-right: 1px solid var(--line-d); }
.onx-quote:last-child { border-right: 0; }
.onx-quote blockquote { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.015em; line-height: 1.46; color: var(--ink); }
.onx-quote blockquote em { font-family: var(--news); font-style: italic; color: var(--clay); }
.onx-quote .by { margin-top: 24px; font-size: 12px; letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; }
.onx-quote .by b { color: var(--ink); font-weight: 600; }
.onx-disclaimer { margin-top: 18px; font-size: 12px; color: var(--ink-3); }

/* ---------- FAQ (plus-sign accordion) ---------- */
/* ===== FAQ heading ===== */
.onx-faq .s-head {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  gap: 20px !important;
  text-align: center !important;
}
.onx-faq .s-head .onx-klabel {
  color: #F05A28 !important;
  text-transform: uppercase;
  font-weight: 700;
  font-family: Inter, sans-serif;
}
.onx-faq .s-head .onx-hd { color: #0B192C; }

/* ===== Card ===== */
.onx-faq-list .faq-item {
  border: 1px solid #e3e8f2 !important;
  border-radius: 20px;
  margin-bottom: 14px;
  overflow: hidden;
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* ===== Question row ===== */
.onx-faq-list .faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  background: transparent;
  text-align: left;
  color: #0B192C;
  cursor: pointer;
}
.onx-faq-list .faq-q:focus { outline: none; }
.onx-faq-list .faq-q .q {     color: #0A1426 !important;
    transition: color .25s ease;
    font-family: 'Cabinet Grotesk' !important;
    font-size: 18PX !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    word-spacing: 1px;
    transition: color 0.25s ease;}

/* ===== Answer ===== */
.onx-faq-list .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.onx-faq-list .faq-a-inner {padding: 0 24px 24px;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.65;
}

/* ===== Circle + arrow ===== */
.onx-faq-list .faq-q .sign {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f5f9;
  transition: background .25s ease;
}
.onx-faq-list .faq-q .sign::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s ease, border-color .25s ease;
  box-sizing: border-box;
}

/* ===== OPEN (click) ===== */
.onx-faq-list .faq-item.open {
  border-color: #ff7a2f !important;
  box-shadow: 0 8px 24px rgba(255, 122, 47, .15);
}
.onx-faq-list .faq-item.open .faq-q .q { color: #ff7a30; }
.onx-faq-list .faq-item.open .faq-q .sign { background: #ff7a30; }
.onx-faq-list .faq-item.open .faq-q .sign::after {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(2px) rotate(225deg);
}
/* Desktop hover: works at all screen sizes */
.onx-faq-list .faq-item:hover:not(.faq-closed) .faq-q .q {
  color: #ff7a30 !important;
}

/* Keep the open (in-view) item orange on desktop too, if you want that */
.onx-faq-list .faq-item.in-view:not(.faq-closed) .faq-q .q {
  color: #ff7a30 !important;
}
/* ===== HOVER (mouse devices only, skipped on a just-closed item) ===== */
@media (hover: hover), (max-width: 960px) {
    .onx-faq-list .faq-item:hover:not(.faq-closed) {
    border-color: #ff7a2f !important;
    box-shadow: 0 8px 24px rgba(255, 122, 47, .15);
  }
  .onx-faq-list .faq-item:hover:not(.faq-closed) .faq-q .q { color: #ff7a30; }
  .onx-faq-list .faq-item:hover:not(.faq-closed) .faq-q .sign { background: #ff7a30; }
  .onx-faq-list .faq-item:hover:not(.faq-closed) .faq-q .sign::after {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(2px) rotate(225deg);
  }
  .onx-faq-list .faq-item:hover:not(.faq-closed) .faq-a {
    max-height: 1000px !important;
  }
}

/* ===== MOBILE: item in the middle of the screen ===== */
@media (max-width: 960px) {
  .onx-faq-list .faq-item.in-view:not(.faq-closed) {
    border-color: #ff7a2f !important;
    box-shadow: 0 8px 24px rgba(255, 122, 47, .15) !important;
  }
  .onx-faq-list .faq-item.in-view:not(.faq-closed) .faq-q .q { color: #ff7a30 !important; }
  .onx-faq-list .faq-item.in-view:not(.faq-closed) .faq-q .sign { background: #ff7a30 !important; }
  .onx-faq-list .faq-item.in-view:not(.faq-closed) .faq-q .sign::after {
    border-right: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
    transform: translateY(2px) rotate(225deg) !important;
  }
}
@media (max-width: 960px) {
  /* reveal the answer for the centred item */
  .onx-faq-list .faq-item.in-view:not(.faq-closed) .faq-a {
    max-height: 1000px !important;
  }

}
/* ===== Trust ticks ===== */
.faq-trust-tick {
  white-space: nowrap !important;
  font-size: 12px !important;
  font-weight: 100 !important;
  color: #CBD5E1 !important;
}
.onx-final .faq-trust-tick .trust-correct {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 9999px;
  white-space: nowrap;
}

/* ===== Outcome cards ===== */
.onx-ocard:nth-child(odd),
.onx-ocard {
  border-right: none !important;
  border-bottom: none !important;
}

/* ---------- Final CTA (onyx) ---------- */
.onx-final { background: var(--onyx); color: #fff; }
.onx-final .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.onx-final .onx-hd { font-size: 42px; color: #fff; }
.onx-final .onx-hd em { color: var(--orange); }
.onx-final .sub { margin-top: 22px; font-size: 16px; color: rgba(255,255,255,.7); line-height: 1.64; max-width: 52ch; }
.onx-final .panel { border: 1px solid var(--line-l); padding: 40px; }
.onx-final .panel .ctas { display: flex; flex-direction: column; gap: 12px; }
.onx-final .panel .onx-btn { width: 100%; }
.onx-final .reassure { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line-l); font-size: 12px; letter-spacing: .03em; color: rgba(255,255,255,.55); line-height: 1.8; }

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .onx [data-reveal] { opacity: 0; transform: translateY(20px); transition: transform .7s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d, 0ms); will-change: transform; }
  .js .onx [data-reveal].in { opacity: 1; transform: none; }.onx-how-grid {
    margin-top: 16px; !important}
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .onx-hero .hook { font-size: 44px; }
  .onx-strip { grid-template-columns: 1fr 1fr; }
  .onx-strip .col:nth-child(3) { padding-left: 0; border-left: 0; }
  .onx-strip .col { border-top: 1px solid var(--line-l); }
  .onx .s-head { grid-template-columns: 1fr; gap: 16px; }
  .onx-how-grid, .onx-sol-grid, .onx-logos { grid-template-columns: 1fr 1fr; }
  .onx-out-grid, .onx-quotes, .onx-final .wrap { grid-template-columns: 1fr; }
  .onx .s-head {gap: 0px !important;}
}
@media (max-width: 600px) {
  /* .onx .wrap { padding-left: 22px; padding-right: 22px; } */
  /* .onx section { padding: 76px 0; } */
  .onx-hero .hook { font-size: 34px; }
  .onx .s-head .onx-hd { font-size: 28px; }
  .onx-strip, .onx-how-grid, .onx-sol-grid, .onx-logos { grid-template-columns: 1fr; }
  .onx-pain { grid-template-columns: 1fr; gap: 8px; }
  .onx-type { grid-template-columns: 1fr; gap: 6px; }
  .onx-sol { border-right: 0 !important; }
  .onx-ocard, .onx-ocard:nth-child(even) { padding-left: 0; padding-right: 0; }
  .onx-quote { border-right: 0; border-bottom: 1px solid var(--line-d); }
}
/* space between the heading and the first card */
.onx .onx-pains .s-head { margin-bottom: 30px !important; }

/* tighter title -> paragraph gap inside each card */
.onx .onx-pains .onx-pain h3 { margin: 0 0 6px !important; }
.onx .onx-pains .onx-pain p  { margin: 0 !important; }
/* list spacing */
.onx .onx-pains .onx-pain-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* card */
.onx .onx-pains .onx-pain {
  display: grid !important;
  grid-template-columns: 44px 1fr;
  column-gap: 24px;
  align-items: start;
  padding: 28px 32px !important;
  background: #fff !important;
  border: 1px solid #eef0f6 !important;
  border-radius: 20px;
  box-shadow: 0 4px 16px #0b192c0d;
}

/* number badge (left, spans heading + paragraph) */
.onx .onx-pains .onx-pain .n {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 16px;
  font-weight: 700;
  color: #f05a28;
  background: #ffe9dc;
  border-radius: 12px;
}
.onx-hstep{
  background:#FFFFFF !important;
  padding:20px !important;
  border-radius:20px !important;
}
.onx-hstep h3{
    color: #102C56 !important;

}
.onx-hstep p{
   color: #102C56 !important;

}
.onx-how-grid{
  gap:20px !important;
}
.onx-btn-primary {
    height: 47px;}
    .onx-btn-linel {

    height: 47px;}
    /* ===== MULTI-BRANCH HERO (spa-style animation) ===== */
.mbx-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: min(100vh, 780px);
    padding: 90px 0 80px;
    background-color: #fffaf8;
    /* light fade only on the LEFT so text is readable, right side shows the photo clearly */
    background-image:
        linear-gradient(90deg, rgba(255,252,250,.90) 0%, rgba(255,252,250,.70) 38%, rgba(255,252,250,.12) 72%, rgba(255,252,250,0) 100%),
        url('/images/sg/gto_sg/multi-branches-bg-img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.mbx-hero.mbx-anim {
    background-position: center calc(50% + var(--hp, 0) * 60px);
}
.mbx-hero .container { position: relative; z-index: 2; width: 100%; }

/* soft drifting orbs */
.mbx-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    filter: blur(70px);
    opacity: 0;
    animation: mbxOrb 15s ease-in-out infinite;
    transition: opacity 1.6s ease .2s;
}
.mbx-hero.mbx-live .mbx-orb { opacity: .45; }
.mbx-orb.o1 { width: 360px; height: 360px; left: -110px; top: -80px;
    background: radial-gradient(circle, rgba(89,105,255,.55), transparent 70%); }
.mbx-orb.o2 { width: 400px; height: 400px; right: -120px; bottom: -100px;
    background: radial-gradient(circle, rgba(255,113,54,.5), transparent 70%);
    animation-delay: -6s; }
@keyframes mbxOrb {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50%      { transform: translate3d(40px,-30px,0) scale(1.12); }
}

/* text parallax on scroll */
#mbx-text {
    translate: 0 calc(var(--hp, 0) * -40px);
    opacity: max(0, calc(1 - var(--hp, 0) * 1.25));
}

/* badge */
.mbx-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    margin-bottom: 16px;
    background: #ffffff;
    border: 1.5px solid #ff5a1f;
    border-radius: 30px;
    box-shadow: 0 6px 18px rgba(255,90,31,.14);
    font-family: 'Inter', sans-serif;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #ff5a1f;
    line-height: 1;
}
.mbx-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff5a1f;
    animation: mbxDot 2s ease-out infinite;
}
@keyframes mbxDot {
    0%   { box-shadow: 0 0 0 0 rgba(255,90,31,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(255,90,31,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,90,31,0); }
}

/* tagline */
.mbx-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 12px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #102c56;
}
.mbx-tag span { display: inline-block; }
.mbx-tag-hl { color: #ff3776; }

/* title */
.mbx-title {
    margin: 0 0 18px;
    font-family: 'Cabinet Grotesk', 'Inter', sans-serif;
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    font-weight: 850;
    line-height: 1.14;
    letter-spacing: -.025em;
}
.mbx-title span { display: block; }
.mbx-title-dark { color: #102c56; }
.mbx-title-grad {
    background: linear-gradient(90deg, #5969ff 0%, #ff3776 50%, #ff7136 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.mbx-hero.mbx-anim .mbx-title-grad {
    background-image: linear-gradient(90deg, #5969ff 0%, #ff3776 33%, #ff7136 50%, #ff3776 66%, #5969ff 100%);
    background-size: 200% 100%;
    animation: mbxSilk 9s linear infinite;
}
@keyframes mbxSilk {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}

/* subtitle + trust */
.mbx-sub {
    max-width: 540px;
    margin: 0 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #1e293b;
}
.mbx-trust {
    max-width: 500px;
    margin: 22px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(16,44,86,.12);
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    line-height: 1.6;
    color: #102c56;
}

/* buttons */
.mbx-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mbx-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 34px;
    border-radius: 40px;
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
}
.mbx-btn-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff7136 0%, #ff3776 100%);
    box-shadow: 0 12px 28px rgba(255,90,31,.34);
}
.mbx-btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg);
    animation: mbxShine 4s ease-in-out 2s infinite;
    pointer-events: none;
}
@keyframes mbxShine { 0%, 55% { left: -80%; } 100% { left: 140%; } }
.mbx-btn-light {
    color: #102c56 !important;
    background: #ffffff;
    border: 1px solid #eef0f4;
    box-shadow: 0 8px 20px rgba(16,44,86,.10);
}
.mbx-btn:hover { transform: translateY(-3px); }

/* right image */
.mbx-visual-wrap {
    translate: 0 calc(var(--hp, 0) * -50px);
    transition: translate .45s cubic-bezier(.22,1,.36,1);
}
.mbx-visual { position: relative; max-width: 600px; margin-left: auto; }
.mbx-glow {
    position: absolute;
    inset: 8% 2% -3% 8%;
    z-index: 0;
    border-radius: 40px;
    filter: blur(46px);
    opacity: 0;
    background: conic-gradient(from 140deg, rgba(89,105,255,.5), rgba(255,55,118,.45), rgba(255,113,54,.45), rgba(89,105,255,.5));
    transition: opacity 1.4s ease .6s;
}
.mbx-hero.mbx-live .mbx-glow { opacity: .5; }
.mbx-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 30px 70px rgba(16,44,86,.28);
    animation: mbxFloat 6s ease-in-out 1.8s infinite;
}
@keyframes mbxFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

/* ===== entrance state machine (only active when JS adds .mbx-anim) ===== */
.mbx-hero.mbx-anim .mbx-a {
    --x: 0px; --y: 34px; --s: .96; --r: 0deg;
    opacity: 0;
    filter: blur(8px);
    translate: var(--x) var(--y);
    scale: var(--s);
    rotate: var(--r);
    transition: opacity .25s ease, translate .25s ease, scale .25s ease,
                rotate .25s ease, filter .25s ease, clip-path .25s ease,
                transform .3s ease, box-shadow .3s ease;
}
.mbx-hero.mbx-anim .mbx-a.mbx-drop    { --y: -22px; --s: .92; }
.mbx-hero.mbx-anim .mbx-a.mbx-pop     { --y: 18px;  --s: .9; }
.mbx-hero.mbx-anim .mbx-a.mbx-blur    { --y: 12px;  --s: 1; filter: blur(10px); }
.mbx-hero.mbx-anim .mbx-a.mbx-curtain { --y: 44px;  --s: 1; clip-path: inset(0 0 100% 0); }
.mbx-hero.mbx-anim .mbx-a.mbx-right   { --x: 150px; --y: 0px; --s: .86; --r: 4deg; }

.mbx-hero.mbx-anim.mbx-live .mbx-a {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
    transition: opacity .8s ease var(--d, 0s),
                translate 1.05s cubic-bezier(.22,1,.36,1) var(--d, 0s),
                scale 1.1s cubic-bezier(.22,1,.36,1) var(--d, 0s),
                rotate 1.1s cubic-bezier(.22,1,.36,1) var(--d, 0s),
                filter .8s ease var(--d, 0s),
                clip-path 1s cubic-bezier(.22,1,.36,1) var(--d, 0s),
                transform .3s ease, box-shadow .3s ease;
}
.mbx-hero.mbx-anim.mbx-live .mbx-a.mbx-curtain { clip-path: inset(-10% -5% -10% -5%); }

/* mobile / tablet */
@media (max-width: 991px) {
    .mbx-hero {
        min-height: 0;
        padding: 70px 0 50px;
        background-image:
            linear-gradient(180deg, rgba(255,252,250,.88) 0%, rgba(255,252,250,.55) 55%, rgba(255,252,250,.15) 100%),
            url('/images/sg/gto_sg/multi-branches-bg-img.png');
    }
    .mbx-orb { width: 220px !important; height: 220px !important; }
    #mbx-text { translate: 0 calc(var(--hp, 0) * -20px); }
    .mbx-visual-wrap { translate: none; }
    .mbx-title { font-size: clamp(1.7rem, 7vw, 2.3rem); }
    .mbx-hero.mbx-anim .mbx-a.mbx-right { --x: 70px; }
    .mbx-btn { padding: 14px 22px; font-size: .78rem; }
    .mbx-ctas { flex-wrap: nowrap; }
    .mbx-ctas .mbx-btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mbx-hero *, .mbx-hero *::before, .mbx-hero *::after { animation: none !important; }
    .mbx-orb { display: none; }
}

/* THE DAILY PRESSURE (centered wipe cards) */
.dq-section{padding:100px 0;background:#fff3ea;}
.dq-section .container{max-width:1160px;}

/* heading */
.dq-head{text-align:center;max-width:780px;margin:0 auto 56px;}
.dq-section .dq-pill{display:inline-block;padding:8px 22px;border-radius:999px;background:rgba(255,90,31,.1);border:1px solid rgba(255,90,31,.3);color:#ff5a1f !important;font:700 .78rem 'Inter',sans-serif;letter-spacing:2px;text-transform:uppercase;animation:dqGlow 2s ease-in-out infinite;}
@keyframes dqGlow{
  0%,100%{box-shadow:0 0 8px rgba(255,90,31,.2),0 0 16px rgba(255,90,31,.1);}
  50%{box-shadow:0 0 18px rgba(255,90,31,.45),0 0 34px rgba(255,90,31,.22);}
}
.dq-section h2.dq-title{font-family:'Cabinet Grotesk',sans-serif !important;font-size:clamp(2rem,3.8vw,3.2rem) !important;font-weight:800 !important;color:#102C56 !important;line-height:1.15 !important;margin:20px 0 16px !important;text-align:center;}
.dq-section h2.dq-title em{font-style:normal;color:#ff5a1f !important;}
.dq-section p.dq-sub{font:400 1.05rem/1.75 'Inter',sans-serif !important;color:#5d6b7a !important;margin:0 auto !important;text-align:center;}

/* grid */
.dq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1200px;}

/* card (all same colour) */
.dq-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 28px 28px;background:#fff;border:1.5px solid #f6dccb;border-radius:26px;overflow:hidden;box-shadow:0 12px 30px rgba(255,122,48,.08);}
.dq-card:before{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;background:linear-gradient(180deg,#ff7a30,#ff5a1f);transform:translateY(101%);transition:transform .6s cubic-bezier(.2,.8,.2,1);z-index:0;border-radius:inherit;}
.dq-card:hover:before{transform:translateY(0);}
.dq-card>*{position:relative;z-index:1;}

/* icon with spinning dashed ring */
.dq-ico{position:relative;width:68px;height:68px;border-radius:50%;background:#fff3ea;color:#ff5a1f;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:20px;transform:scale(0) rotate(-30deg);transition:transform .7s cubic-bezier(.3,1.6,.5,1) .35s,background .4s ease,color .4s ease;}
.dq-ico:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px dashed rgba(255,90,31,.45);animation:dqSpin 12s linear infinite;transition:border-color .4s ease;}
@keyframes dqSpin{to{transform:rotate(360deg)}}
.dq-card.dq-in .dq-ico{transform:none;}
.dq-section .dq-ico i{color:inherit !important;}
.dq-card:hover .dq-ico{background:#fff;color:#ff5a1f;}
.dq-card:hover .dq-ico:after{border-color:rgba(255,255,255,.8);}
.dq-card.dq-in:hover .dq-ico{transform:scale(1.12) rotate(-8deg);transition-delay:0s;}

.dq-section .dq-n{font:800 .82rem 'Cabinet Grotesk',sans-serif;letter-spacing:3px;color:#ff5a1f !important;margin-bottom:10px;transition:color .4s ease;}
.dq-section .dq-card h3{font-family:'Cabinet Grotesk',sans-serif !important;font-size:1.25rem !important;font-weight:800 !important;color:#102C56 !important;line-height:1.3 !important;margin:0 0 12px !important;transition:color .4s ease;}
.dq-section .dq-card p{font:400 .92rem/1.72 'Inter',sans-serif !important;color:#5d6b7a !important;margin:0 0 22px !important;transition:color .4s ease;}

.dq-section .dq-stat{margin-top:auto;display:inline-block;padding:8px 16px;border-radius:30px;background:#fff3ea;border:1px solid #f6d9c4;color:#ff5a1f !important;font:700 .8rem 'Inter',sans-serif;transition:all .4s ease;}

/* hover text → white */
.dq-section .dq-card:hover .dq-n,
.dq-section .dq-card:hover h3,
.dq-section .dq-card:hover p{color:#fff !important;}
.dq-section .dq-card:hover .dq-stat{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#fff !important;}

/* scroll animation (repeats up & down) */
.dq-rv{opacity:0;transition:opacity .6s ease,transform .9s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;}
.dq-up{transform:translateY(40px);}
.dq-tilt{transform:translateY(80px) rotateX(-28deg);transform-origin:center top;}
.dq-rv.dq-in{opacity:1;transform:none;transition-delay:var(--d,0s);}
.dq-card.dq-in:hover{transform:translateY(-10px);border-color:#ff5a1f;box-shadow:0 26px 50px rgba(255,90,31,.28);transition-delay:0s;}

@media(max-width:991px){
  .dq-section{padding:70px 0;}
  .dq-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .dq-grid{grid-template-columns:1fr;}
  .dq-tilt{transform:translateY(50px);}
}
@media(prefers-reduced-motion:reduce){
  .dq-rv{opacity:1;transform:none;transition:none;}
  .dq-pill,.dq-ico:after{animation:none;}
}

/* ===== HOW IT WORKS: VISUAL CARDS (spa) ===== */
.hc-section{padding:70px 0 80px;background:linear-gradient(180deg,#fff 0%,#fff8f5 100%);overflow:hidden;font-family:'Inter',sans-serif}
.hc-head{margin-bottom:46px}
.hc-section .hc-h2{font:850 clamp(2rem,3.6vw,2.8rem)/1.2 'Cabinet Grotesk','Inter',sans-serif !important;letter-spacing:-.025em;color:#102c56 !important;margin:0 0 14px !important;max-width:none !important}
.hc-section .hc-grad{background:linear-gradient(90deg,#FF7136,#FF3776) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;color:transparent !important}
.hc-section .hc-sub{font:400 1rem/1.65 Inter,sans-serif !important;color:#64748b !important;max-width:660px;margin:0 auto !important}

.hc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:1040px;margin:0 auto 40px;align-items:stretch}
.hc-card{display:flex;flex-direction:column;background:#fff;border:1px solid #f1e4dc;border-radius:30px;padding:14px 14px 26px;
  box-shadow:0 14px 40px rgba(16,44,86,.07);opacity:0;transform:translateY(90px) scale(.94);
  transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;transition-delay:calc(var(--i)*.12s)}
.hc-card.hc-in{opacity:1;transform:none}
.hc-card.hc-in:hover{transform:translateY(-8px);border-color:rgba(255,55,118,.35);box-shadow:0 24px 50px rgba(255,55,118,.16);transition-delay:0s}

.hc-vis{position:relative;height:220px;flex-shrink:0;border-radius:22px;overflow:hidden;padding:18px;
  background:radial-gradient(circle,rgba(255,113,54,.16) 1px,transparent 1.5px) 0 0/16px 16px,linear-gradient(135deg,#fff3ec 0%,#ffe4ec 100%)}
.hc-pill{position:absolute;top:14px;right:14px;z-index:5;display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:99px;padding:7px 14px;
  font:700 11.5px Inter,sans-serif;color:#334155;box-shadow:0 6px 16px rgba(16,44,86,.1);animation:hcFloat 4s ease-in-out infinite}
.hc-pd{width:7px;height:7px;border-radius:50%;background:#FF3776;box-shadow:0 0 0 3px rgba(255,55,118,.2)}
@keyframes hcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hc-scene{position:absolute;left:18px;right:18px;bottom:16px;top:54px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;font:600 12px Inter,sans-serif;color:#334155}

.hc-body{display:flex;flex-direction:column;flex:1;padding:22px 14px 0}
.hc-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hc-num{width:30px;height:30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#FF7136,#FF3776);color:#fff;font:900 12px 'Cabinet Grotesk','Inter',sans-serif;box-shadow:0 6px 14px rgba(255,55,118,.3)}
.hc-tag{font:800 10.5px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#FF3776}
.hc-section .hc-title{font:850 1.25rem/1.3 'Cabinet Grotesk','Inter',sans-serif !important;color:#102c56 !important;margin:0 0 8px !important}
.hc-section .hc-desc{font:400 .88rem/1.7 Inter,sans-serif !important;color:#64748b !important;margin:0 0 18px !important}
.hc-stat{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:99px;background:linear-gradient(135deg,#fff4ee,#ffeef3);border:1px solid #ffd9c6}
.hc-stat b{font:900 1.1rem 'Cabinet Grotesk','Inter',sans-serif;background:linear-gradient(90deg,#FF7136,#FF3776);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hc-stat span{font:600 11.5px Inter,sans-serif;color:#9a3d12}

/* scene 1: room + therapist */
.bk{display:flex;align-items:center;gap:10px;background:#fff;border-radius:13px;padding:7px 10px;box-shadow:0 6px 16px rgba(16,44,86,.08);opacity:0}
.bk-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#FF7136,#FF3776);color:#fff;font:800 11px Inter,sans-serif}
.bk-av.b{background:linear-gradient(135deg,#5969FF,#7c8cff)}
.bk-nm{white-space:nowrap;color:#102c56;font-weight:700}
.bk-sl{margin-left:auto;display:flex;gap:6px}
.bk-sl i{font:700 10.5px Inter,sans-serif;font-style:normal;padding:5px 9px;border-radius:99px;background:#f1f5f9;color:#64748b;white-space:nowrap}
.bk-ok{align-self:flex-end;display:inline-flex;align-items:center;gap:7px;background:#102c56;color:#fff;border-radius:99px;padding:8px 14px;font-size:11.5px;opacity:0;box-shadow:0 8px 18px rgba(16,44,86,.25)}
.bk-ok svg{width:15px;height:15px;padding:2px;border-radius:50%;background:#22C55E;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.hc-in .bk{animation:hcRow 7s cubic-bezier(.22,1,.36,1) infinite}
.hc-in .bk.r2{animation-delay:.25s}
.hc-in .bk-sl i.pick{animation:bkPick 7s ease infinite}
.hc-in .bk-ok{animation:hcTot 7s ease infinite}
@keyframes bkPick{0%,22%{background:#f1f5f9;color:#64748b;transform:scale(1)}30%{transform:scale(1.12)}36%,88%{background:linear-gradient(135deg,#FF7136,#FF3776);color:#fff;transform:scale(1)}100%{background:#f1f5f9;color:#64748b}}
@keyframes hcRow{0%{opacity:0;transform:translateX(-40px)}10%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes hcTot{0%,38%{opacity:0;transform:scale(.7)}48%,88%{opacity:1;transform:none}96%,100%{opacity:0}}

/* scene 2: package */
.pk-row{display:flex;gap:10px}
.pk-row i{width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font:800 12px Inter,sans-serif;font-style:normal;color:#94a3b8;box-shadow:0 6px 14px rgba(16,44,86,.1)}
.pk-row i svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.pk-row i.dash{border:2px dashed #FF3776;color:#FF3776;box-shadow:none;background:rgba(255,255,255,.5)}
.hc-in .pk-row i:not(.dash){animation:hcTick 7s ease infinite}
.hc-in .pk-row i:not(.dash) svg{animation:hcIcon 7s ease infinite}
.hc-in .pk-row i:nth-child(2),.hc-in .pk-row i:nth-child(2) svg{animation-delay:.4s}
.hc-in .pk-row i:nth-child(3),.hc-in .pk-row i:nth-child(3) svg{animation-delay:.8s}
.hc-in .pk-row i:nth-child(4),.hc-in .pk-row i:nth-child(4) svg{animation-delay:1.2s}
@keyframes hcTick{0%{background:#fff;transform:scale(1)}8%{transform:scale(1.18)}14%,88%{background:linear-gradient(135deg,#22C55E,#14b8a6);transform:scale(1)}100%{background:#fff}}
@keyframes hcIcon{0%,8%{opacity:0}14%,88%{opacity:1}100%{opacity:0}}
.pk-card{background:#fff;border-radius:14px;padding:11px 14px;box-shadow:0 6px 16px rgba(16,44,86,.08)}
.pk-t{display:flex;justify-content:space-between;margin-bottom:8px;color:#334155}
.pk-t b{color:#16a34a;font-weight:800;font-size:11px}
.pk-bar{height:8px;background:#e8edf3;border-radius:9px;overflow:hidden}
.pk-bar em{display:block;height:100%;width:0;background:linear-gradient(90deg,#22C55E,#14b8a6);border-radius:9px}
.hc-in .pk-bar em{animation:hcBar 7s ease infinite}
@keyframes hcBar{0%{width:0}35%,88%{width:80%}100%{width:0}}

/* scene 3: WhatsApp reminder */
.wa-head{display:flex;align-items:center;gap:9px;opacity:0}
.wa-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#25D366,#128C7E)}
.wa-nm{display:flex;flex-direction:column;font:800 11.5px/1.2 Inter,sans-serif;color:#102c56}
.wa-nm small{font:500 9.5px Inter,sans-serif;color:#94a3b8}
.wa-b1,.wa-b2{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:9px 13px;box-shadow:0 6px 16px rgba(16,44,86,.08);opacity:0;width:fit-content;max-width:94%}
.wa-b1{border-top-left-radius:4px}
.wa-b2{align-self:flex-end;background:#e7f9ee;color:#166534;font-weight:700;border-bottom-right-radius:4px}
.hc-in .wa-head{animation:hcA 7s ease infinite}
.hc-in .wa-b1{animation:hcA 7s ease .3s infinite}
.hc-in .wa-b2{animation:hcB 7s ease infinite}
@keyframes hcA{0%{opacity:0;transform:translateY(14px) scale(.92)}8%,90%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes hcB{0%,28%{opacity:0;transform:translateX(24px) scale(.9)}38%,90%{opacity:1;transform:none}98%,100%{opacity:0}}

/* scene 4: lapsed clients */
.lp{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border-radius:13px;padding:7px 12px 7px 8px;box-shadow:0 6px 16px rgba(16,44,86,.08);opacity:0;width:88%}
.lp-l{display:flex;align-items:center;gap:9px;color:#102c56;font-weight:700}
.lp-l em{font:700 10px Inter,sans-serif;font-style:normal;color:#FF3776;background:#fff0f4;padding:2px 8px;border-radius:99px}
.lp b{font:800 10.5px Inter,sans-serif;padding:5px 10px;border-radius:99px;background:#fff0f4;color:#FF3776}
.lp.r2{margin-left:12%}
.hc-in .lp{animation:hcRow 7s cubic-bezier(.22,1,.36,1) infinite}
.hc-in .lp.r2{animation-delay:.25s}
.hc-in .lp b{animation:lpChip 7s ease infinite}
.hc-in .lp.r2 b{animation-delay:.25s}
@keyframes lpChip{0%,30%{background:#fff0f4;color:#FF3776}38%,88%{background:#e7f9ee;color:#166534}100%{background:#fff0f4;color:#FF3776}}

@media(max-width:767px){
  .hc-section{padding:50px 0 60px !important}
  .hc-grid{grid-template-columns:1fr;gap:20px}
  .hc-vis{height:215px}
  .hc-section .hc-title{font-size:1.12rem !important}
  .hc-cta{flex-wrap:nowrap;gap:10px}
  .hc-cta a{flex:1 1 0;padding:13px 8px !important;font-size:12.5px !important}
  .bk-nm{font-size:11px}.bk-sl i{padding:5px 7px;font-size:10px}
  .pk-row{gap:7px}.pk-row i{width:32px;height:32px}
}
.hc-cta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){
  .hc-card{opacity:1;transform:none}
  .hc-vis *{animation:none!important;opacity:1!important}
  .pk-bar em{width:80%}
}