/* =========================================================
   SB Global Solution — Global — design tokens, reset, base typography, layout (.container), icons (.ic), buttons, section headings, dividers. Loaded on every page.
   Same rules as html-work/css/style.css.
   ========================================================= */
/* =========================================================
   SB Global Solution — Header & Footer
   ========================================================= */
:root {
  --navy-950: #0E1440;
  --navy-900: #141C55;
  --navy-800: #1E2A78;
  --blue-600: #3B4FD8;
  --blue-50:  #EEF1FD;
  --orange-500: #FF7A1A;
  --orange-600: #E8650A;
  --orange-50:  #FFF1E6;

  --ink:  #0F172A;
  --text: #475569;
  --muted: #64748B;
  --line: #E5E9F2;
  --white: #fff;

  --font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* One spacing system for every section */
  --sec-pad: 72px;           /* top/bottom of each section */
  --head-gap: 40px;          /* section heading -> content */
}
@media (max-width: 1100px) {
  :root { --sec-pad: 60px; --head-gap: 34px; }
}
@media (max-width: 767px) {
  :root { --sec-pad: 46px; --head-gap: 28px; }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--text); background: #FFFFFF; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic--xs { width: 14px; height: 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: 14.5px; white-space: nowrap;
  transition: background .2s, transform .2s;
}
.btn--primary { background: var(--orange-500); color: #fff; }
.btn--primary:hover { background: var(--orange-600); transform: translateY(-1px); }
@keyframes panelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* =========================================================
   Hero slider
   ========================================================= */
.btn-group { display: flex; flex-wrap: wrap; gap: 14px; }
.btn--outline-light { border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--navy-800); transform: translateY(-1px); }
.btn--whatsapp { background: #25D366; color: #fff; }
.btn--whatsapp:hover { background: #1EBE5A; transform: translateY(-1px); }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sec-head { text-align: center; max-width: 1040px; margin: 0 auto var(--head-gap); }
/* tabs sit between heading and cards */
/* Wave divider between two sections:
   --from = colour of the section above, --to = colour of the section below */
.divider { display: block; line-height: 0; background: var(--to); margin-top: -1px; }
.divider svg { display: block; width: 100%; height: 54px; fill: var(--from); }
.divider--flip svg { transform: scaleX(-1); }
@media (max-width: 767px) {
  .divider svg { height: 28px; }
}
/* Eyebrow label: soft orange pill */
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 7px 16px; border-radius: 999px;
  background: var(--orange-50); border: 1px solid rgba(255,122,26,.18);
  font-family: var(--font-head); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-600);
}
.sec-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); }
.sec-eyebrow::after { display: none; }
.sec-title { margin: 0; font-family: var(--font-head); font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; letter-spacing: -.025em; color: var(--ink); line-height: 1.15; }
/* Even line breaks for headings and card titles (no single word left on the last line) */
main h1, main h2, main h3 { text-wrap: balance; }
.sec-sub { margin: 16px auto 0; max-width: 680px; font-size: 17.5px; line-height: 1.7; color: var(--text); }
@keyframes svcIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 15.5px; color: var(--orange-600); }
.link-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(4px); }
/* offsets the arrows row so the text centres on the cards */
.sec-eyebrow--left::after { display: none; }
.text-accent { color: var(--orange-500); }
/* =========================================================
   FAQ + Quick Links
   ========================================================= */
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--dark { background: var(--navy-800); color: #fff; }
.btn--dark:hover { background: var(--navy-900); transform: translateY(-1px); }
.btn--light { background: #fff; color: var(--navy-800); border: 1px solid var(--line); }
.btn--light:hover { border-color: var(--navy-800); transform: translateY(-1px); }
@media (max-width: 600px) {
  .container { padding-inline: 16px; }
}
/* =========================================================
   DEPTH LAYER (refresh step 3)
   Layered soft shadows, glass, gradient borders, 3D icon boxes.
   Kept in one place so it is easy to tune or remove.
   ========================================================= */
:root {
  /* two-layer shadows: one tight + one wide and soft */
  --shadow-1: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px -12px rgba(30,42,120,.18);
  --shadow-2: 0 2px 6px rgba(15,23,42,.05), 0 22px 44px -22px rgba(30,42,120,.32);
  --shadow-3: 0 4px 10px rgba(15,23,42,.06), 0 40px 80px -36px rgba(30,42,120,.45);
  --grad-brand: linear-gradient(135deg, #3B4FD8 0%, #7C5CFF 45%, #FF7A1A 100%);
}
/* ---- Buttons: soft glow ---- */
.btn--primary { box-shadow: 0 10px 22px -10px rgba(255,106,26,.75), inset 0 1px 0 rgba(255,255,255,.25); }
.btn--primary:hover { box-shadow: 0 14px 28px -10px rgba(255,106,26,.85), inset 0 1px 0 rgba(255,255,255,.25); }
@keyframes techScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }