/* =========================================================================
   SKEW INFOTECH — "Clear Signal" design system v4
   -------------------------------------------------------------------------
   Light-first corporate base built on the brand's sky blue, with an indigo
   partner hue and a warm coral accent. Every colour is a token, redefined
   for [data-theme="dark"], so all components and the inline SVG
   illustrations (partials/visuals.php) follow the theme.

   Contents
     01 Tokens            08 Section scaffolding     15 Tables & pricing
     02 Base / type       09 Cards                   16 Forms
     03 Bootstrap bridge  10 Lists, chips, flows     17 Footer
     04 Buttons           11 Home-only blocks        18 Illustrations (.vis)
     05 Header / nav      12 Dark bands & CTA        19 Motion & reveal
     06 Ticker            13 FAQ                     20 Responsive
     07 Heroes            14 Highlight boxes
   ========================================================================= */

/* ---------- 01 Tokens ---------- */
:root{
  --bg:            #FFFFFF;
  --bg-alt:        #F4F7FB;
  --bg-alt-2:      #EAF1F8;
  --card:          #FFFFFF;
  --card-border:   #E2E8F1;
  --ink:           #0B1A2C;
  --ink-soft:      #4A5A70;
  --ink-dim:       #6B7A90;
  --line:          #E2E8F1;
  --line-strong:   #D3DCE8;

  --brand:         #0B95DB;   /* logo blue */
  --primary:       #0973B5;   /* AA-contrast text/link blue */
  --primary2:      #1D4ED8;   /* deep cobalt partner */
  --cyan:          #22D3EE;
  --accent:        #F2643A;   /* warm coral */
  --amber:         #F5A524;
  --success:       #12A150;
  --navy:          #06111F;
  --navy-2:        #0B1C33;

  --grad-main: linear-gradient(120deg, #1D4ED8 0%, #0B8FD6 55%, #0EA5C6 100%);
  --grad-glow: linear-gradient(120deg, #3B82F6 0%, #22A9F0 50%, #22D3EE 100%);
  --grad-warm: linear-gradient(135deg, var(--accent) 0%, var(--amber) 100%);
  --grad-soft: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);

  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --radius-lg: 24px;
  --radius:    18px;
  --radius-sm: 12px;

  --shadow-xs: 0 1px 2px rgba(11,26,44,.05);
  --shadow-sm: 0 2px 8px rgba(11,26,44,.05), 0 1px 2px rgba(11,26,44,.04);
  --shadow-md: 0 12px 32px -8px rgba(11,26,44,.12), 0 2px 6px rgba(11,26,44,.04);
  --shadow-lg: 0 30px 60px -20px rgba(11,26,44,.22), 0 8px 20px -8px rgba(11,26,44,.08);
  --shadow-primary: 0 10px 28px -6px rgba(11,149,219,.45);
  --shadow-warm: 0 10px 28px -6px rgba(242,100,58,.45);

  --nav-bg: rgba(255,255,255,.82);
  --blob-a: rgba(11,149,219,.22);
  --blob-b: rgba(34,211,238,.16);
  --tint:   rgba(11,149,219,.08);
  --tint-2: rgba(29,78,216,.08);
  --map-filter: none;
  --phone: #0B1A2C;

  --ease: cubic-bezier(.16,1,.3,1);
  --container: 1240px;
}

[data-theme="dark"]{
  --bg:            #060D18;
  --bg-alt:        #0A1424;
  --bg-alt-2:      #0F1B2F;
  --card:          #0E192B;
  --card-border:   rgba(255,255,255,.08);
  --ink:           #EEF3FA;
  --ink-soft:      #A6B4C8;
  --ink-dim:       #7E8DA3;
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.14);

  --brand:         #22A9F0;
  --primary:       #4DBBF7;
  --primary2:      #3B82F6;
  --accent:        #FF8059;
  --amber:         #FFBF47;
  --success:       #34D27B;
  --navy:          #040A14;
  --navy-2:        #0A1628;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --shadow-md: 0 14px 34px -10px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 70px -20px rgba(0,0,0,.75);
  --shadow-primary: 0 10px 30px -6px rgba(34,169,240,.45);
  --shadow-warm: 0 10px 30px -6px rgba(255,128,89,.4);

  --nav-bg: rgba(6,13,24,.78);
  --blob-a: rgba(34,169,240,.22);
  --blob-b: rgba(34,211,238,.14);
  --tint:   rgba(77,187,247,.10);
  --tint-2: rgba(59,130,246,.10);
  --map-filter: grayscale(.3) invert(.92) hue-rotate(180deg) contrast(.9);
  --phone: #1C2A40;
}

/* ---------- 02 Base / type ---------- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 96px; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@supports (overflow-x: clip){ html, body{ overflow-x: clip; } }
.container{ max-width: var(--container); }
::selection{ background: var(--brand); color: #fff; }
a{ color: var(--primary); text-decoration: none; transition: color .2s ease; }
a:hover{ color: var(--primary2); }
img{ max-width: 100%; height: auto; }

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.2;
}
p{ color: var(--ink-soft); margin: 0 0 1rem; }
strong, b{ color: var(--ink); font-weight: 700; }
.accent{ color: var(--accent); }
ul, ol{ color: var(--ink-soft); }
li::marker{ color: var(--brand); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .accordion-button:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  box-shadow: none;
}

.skip-link{
  position: absolute; left: 1rem; top: -60px; z-index: 2000;
  background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: 10px; font-weight: 600;
}
.skip-link:focus{ top: 1rem; color: var(--bg); }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg-alt); }
::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 10px; border: 2px solid var(--bg-alt); }

/* Decorative page backdrop (dot grid fading out under the hero) */
.grid-backdrop{
  position: absolute; inset: 0 0 auto 0; height: 900px;
  z-index: -2; pointer-events: none;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%);
  opacity: .7;
}
.cursor-glow{ display: none; }

/* ---------- 03 Bootstrap bridge (theme-aware utilities) ---------- */
.text-muted{ color: var(--ink-dim) !important; }
.text-dark, .text-body{ color: var(--ink) !important; }
.text-primary{ color: var(--primary) !important; }
.text-success{ color: var(--success) !important; }
.text-white-50{ color: rgba(255,255,255,.68) !important; }
.bg-light, .bg-body, .bg-white{ background-color: var(--card) !important; color: var(--ink); }
.section.bg-light{ background-color: var(--bg-alt) !important; }
.bg-alt{ background: var(--bg-alt) !important; }
.bg-primary-subtle{ background-color: var(--tint) !important; color: var(--primary) !important; }
.bg-primary{ background: var(--grad-main) !important; color: #fff !important; }
.border, .border-top, .border-bottom, .border-start, .border-end{ border-color: var(--line) !important; }
.badge.bg-primary, .badge.text-bg-primary{ background: var(--grad-main) !important; }
.badge{ font-family: var(--font-body); font-weight: 600; letter-spacing: .01em; border-radius: 999px; padding: .45em .8em; }
.list-group-item{ background: var(--card); color: var(--ink-soft); border-color: var(--line); }
hr{ border-color: var(--line); opacity: 1; }
.rounded-4{ border-radius: var(--radius) !important; }
.rounded-3{ border-radius: var(--radius-sm) !important; }

/* ---------- 04 Buttons ---------- */
.btn{ font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.btn-cta, .btn-cta-inverse, .btn-outline-ink, .btn-ghost-light{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px;
  padding: .85rem 1.55rem;
  min-height: 48px;
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease, color .2s ease, border-color .2s ease;
}
.btn-cta i, .btn-cta-inverse i, .btn-outline-ink i{ transition: transform .25s var(--ease); }
.btn-cta:hover i.bi-arrow-right, .btn-outline-ink:hover i.bi-arrow-right, .btn-cta-inverse:hover i.bi-arrow-right{ transform: translateX(3px); }
.btn-lg.btn-cta, .btn-lg.btn-outline-ink, .btn-lg.btn-cta-inverse{ padding: 1rem 1.8rem; font-size: 1rem; min-height: 54px; }
.btn-sm.btn-cta, .btn-sm.btn-outline-ink{ padding: .5rem 1rem; font-size: .85rem; min-height: 38px; }

.btn-cta{
  background: var(--grad-main);
  color: #fff;
  border: 0;
  box-shadow: var(--shadow-primary);
}
.btn-cta::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.3) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.btn-cta:hover, .btn-cta:focus-visible{ color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(11,149,219,.6); }
.btn-cta:hover::before{ transform: translateX(120%); }
.btn-cta:active{ transform: translateY(0); }

.btn-cta-inverse{ background: var(--grad-warm); color: #fff; border: 0; box-shadow: var(--shadow-warm); }
.btn-cta-inverse:hover{ color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(242,100,58,.6); }

.btn-outline-ink{
  background: var(--card);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.btn-outline-ink:hover, .btn-outline-ink:focus-visible{ border-color: var(--brand); color: var(--primary); background: var(--card); transform: translateY(-2px); box-shadow: var(--shadow-md); }

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

.link-arrow{ display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--primary); }
.link-arrow i{ transition: transform .25s var(--ease); }
.link-arrow:hover i{ transform: translateX(4px); }

/* ---------- 05 Header / nav ---------- */
.top-bar{
  background: var(--navy);
  color: #A9B7CB;
  font-size: .8rem;
  position: relative; z-index: 1031;
}
.top-bar-inner{ display: flex; align-items: center; gap: 2rem; padding: .55rem 0; }
.top-bar-item{ display: flex; align-items: center; gap: .45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-bar-item:first-child{ flex: 1 1 auto; min-width: 0; }
.top-bar-item i{ color: var(--brand); }
.top-bar a{ color: #DCE6F2; }
.top-bar a:hover{ color: #fff; }

.main-nav{
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid transparent;
  padding: .95rem 0;
  transition: padding .3s var(--ease), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.main-nav.shrink{ padding: .55rem 0; box-shadow: 0 8px 30px -12px rgba(11,26,44,.18); border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); }
.navbar-brand{ display: flex; align-items: center; padding: 0; margin-right: 1.5rem; }
.brand-mark{ height: 40px; width: auto; max-width: 190px; object-fit: contain; display: block; }
.main-nav.shrink .brand-mark{ height: 36px; }

.navbar-nav .nav-link{
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: .6rem 1rem !important;
  border-radius: 999px;
  position: relative;
  transition: color .2s ease, background .2s ease;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus-visible{ color: var(--ink); background: var(--bg-alt); }
.navbar-nav .nav-link.active{ color: var(--primary); background: var(--tint); }
.navbar-nav .nav-link.active::after{ content: none; }

.navbar-toggler{
  border: 1px solid var(--line-strong); padding: .55rem .65rem; border-radius: 12px; background: var(--card);
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
}
.navbar-toggler:focus{ box-shadow: none; }
.toggler-line{ display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s ease; }
.navbar-toggler[aria-expanded="true"] .toggler-line:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .toggler-line:nth-child(2){ opacity: 0; }
.navbar-toggler[aria-expanded="true"] .toggler-line:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Services mega dropdown */
.navbar-nav .dropdown{ position: relative; }
.dropdown-toggle::after{ border: 0; content: "\F282"; font-family: "bootstrap-icons"; font-size: .7rem; vertical-align: 0; margin-left: .35rem; transition: transform .25s ease; display: inline-block; }
.dropdown.show > .dropdown-toggle::after{ transform: rotate(180deg); }
.navbar-nav .dropdown-menu{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .6rem;
  margin-top: 0;
}
.navbar-nav .dropdown-menu.mega{ width: 640px; }
.mega-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.navbar-nav .dropdown-item{
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .75rem .8rem; border-radius: 12px; color: var(--ink);
  white-space: normal; font-weight: 600; font-size: .93rem; line-height: 1.3;
  transition: background .2s ease, color .2s ease;
}
.dropdown-item .mi{
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--primary); font-size: 1.05rem;
  transition: background .25s ease, color .25s ease, transform .25s var(--ease);
}
.dropdown-item small{ display: block; font-weight: 500; color: var(--ink-dim); font-size: .8rem; margin-top: .15rem; }
.navbar-nav .dropdown-item:hover, .navbar-nav .dropdown-item:focus{ background: var(--bg-alt); color: var(--ink); }
.navbar-nav .dropdown-item:hover .mi{ background: var(--grad-main); color: #fff; transform: scale(1.05); }
.navbar-nav .dropdown-item.active, .navbar-nav .dropdown-item.active:hover{ background: var(--tint); color: var(--primary); }
.navbar-nav .dropdown-item.active .mi{ background: var(--grad-main); color: #fff; }
.mega-foot{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .5rem; padding: .85rem 1rem; border-radius: 12px; background: var(--bg-alt);
  font-size: .88rem; color: var(--ink-soft);
}
.mega-foot a{ font-weight: 600; }

@media (min-width: 992px){
  .navbar-nav .dropdown-menu{
    position: absolute; top: calc(100% + .7rem); left: 50%;
    display: block; opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity .22s ease, transform .3s var(--ease), visibility .22s;
    z-index: 1050;
  }
  .navbar-nav .dropdown-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -.8rem; height: .8rem; }
  .navbar-nav .dropdown:hover > .dropdown-menu,
  .navbar-nav .dropdown:focus-within > .dropdown-menu,
  .navbar-nav .dropdown.show > .dropdown-menu{
    opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  }
}

.nav-actions{ display: flex; align-items: center; gap: .6rem; }
.theme-toggle{
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
  cursor: pointer; flex-shrink: 0;
  transition: transform .3s var(--ease), border-color .2s ease, color .2s ease;
}
.theme-toggle:hover{ transform: rotate(18deg); border-color: var(--brand); color: var(--primary); }
.theme-toggle .bi-sun-fill{ display: none; }
[data-theme="dark"] .theme-toggle .bi-sun-fill{ display: inline-block; color: var(--amber); }
[data-theme="dark"] .theme-toggle .bi-moon-stars-fill{ display: none; }

/* ---------- 06 Ticker ---------- */
.ticker-wrap{
  background: var(--navy);
  overflow: hidden;
  padding: 1rem 0;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track{ display: flex; width: max-content; animation: ticker-scroll 36s linear infinite; }
.ticker-wrap:hover .ticker-track{ animation-play-state: paused; }
.ticker-track span{
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; letter-spacing: -.01em;
  color: #DCE6F2; padding: 0 1.8rem; white-space: nowrap;
  display: flex; align-items: center; gap: 1.1rem;
}
.ticker-track span i{ color: var(--brand); font-size: .7rem; }
@keyframes ticker-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- 07 Heroes ---------- */
.hero, .page-hero{ position: relative; isolation: isolate; overflow: hidden; }
.hero::before, .hero::after, .page-hero::before, .page-hero::after{
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; pointer-events: none;
}
.hero::before, .page-hero::before{ width: 560px; height: 560px; background: var(--blob-a); top: -220px; right: -120px; }
.hero::after, .page-hero::after{ width: 460px; height: 460px; background: var(--blob-b); bottom: -260px; left: -160px; }

.hero{ padding: 5.5rem 0 5rem; }
.eyebrow, .section-eyebrow{
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 700;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.1rem;
}
.eyebrow{
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  padding: .45rem .95rem .45rem .7rem; border-radius: 999px; color: var(--ink-soft);
  font-size: .74rem;
}
.eyebrow .dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 4px rgba(18,161,80,.18); animation: pulse-dot 2.4s infinite;
}
@keyframes pulse-dot{ 0%,100%{ box-shadow: 0 0 0 4px rgba(18,161,80,.18); } 50%{ box-shadow: 0 0 0 8px rgba(18,161,80,.04); } }
.section-eyebrow::before{ content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad-main); }
.text-center .section-eyebrow, .section-head.text-center .section-eyebrow{ justify-content: center; }

.hero-title{
  font-size: clamp(2.5rem, 4.6vw, 3.9rem);
  line-height: 1.04; letter-spacing: -.035em; font-weight: 700;
  margin-bottom: 1.4rem;
}
.grad-word, .underline-swipe, .text-grad{
  background: var(--grad-main);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-lead{ max-width: 54ch; font-size: 1.13rem; color: var(--ink-soft); line-height: 1.75; }

.hero-stats{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 2.6rem; max-width: 520px; }
.hero-stats .stat{ padding-left: 1rem; border-left: 2px solid var(--line-strong); }
.hero-stats .stat-num{ font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -.02em; }
.hero-stats .stat-label{ font-size: .8rem; color: var(--ink-dim); margin-top: .3rem; line-height: 1.35; }

.hero-visual{ position: relative; max-width: 600px; margin-left: auto; }
.hero-visual::before{
  content: ""; position: absolute; inset: 8% 6%; border-radius: 40px;
  background: var(--grad-main); opacity: .14; filter: blur(40px); z-index: -1;
}

/* Inner page hero */
.page-hero{ padding: 4.2rem 0 4.4rem; border-bottom: 1px solid var(--line); background: var(--grad-soft); }
.page-hero .container > .row{ --bs-gutter-y: 2.5rem; }
.breadcrumb-trail{
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem;
  font-size: .84rem; font-weight: 500; color: var(--ink-dim); margin-bottom: 1.2rem;
}
.breadcrumb-trail a{ color: var(--ink-dim); }
.breadcrumb-trail a:hover{ color: var(--primary); }
.breadcrumb-trail .sep{ margin: 0 .45rem; color: var(--line-strong); font-size: 0; }
.breadcrumb-trail .sep::before{ content: "\F285"; font-family: "bootstrap-icons"; font-size: .7rem; color: var(--ink-dim); }
.breadcrumb-trail .current{ color: var(--ink); font-weight: 600; }

.tag-pill{
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary);
  background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: 999px;
  padding: .42rem .95rem;
  margin-bottom: 1.2rem;
}
.tag-pill i{ font-size: .85rem; }
.page-hero .breadcrumb-trail + .tag-pill{ margin-left: 0; }
.page-title{ font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 1.2rem; max-width: 22ch; font-weight: 700; }
.page-lead{ max-width: 60ch; font-size: 1.1rem; line-height: 1.75; }
.page-hero .lead-copy{ font-size: 1rem; }
.page-visual{ position: relative; max-width: 560px; margin: 0 auto; }
.page-visual::before{
  content: ""; position: absolute; inset: 10% 8%; border-radius: 40px;
  background: var(--grad-main); opacity: .12; filter: blur(44px); z-index: -1;
}
.hero-points{ display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; list-style: none; padding: 0; margin: 1.6rem 0 0; }
.hero-points li{ display: flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 600; color: var(--ink); }
.hero-points i{ color: var(--success); }

/* "Read more" collapse used to tame long hero introductions */
.more-copy{ position: relative; }
.more-toggle{
  background: none; border: 0; padding: 0; margin-top: .25rem;
  color: var(--primary); font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: .35rem;
}
.more-toggle i{ transition: transform .25s ease; }
.more-toggle[aria-expanded="true"] i{ transform: rotate(180deg); }

/* ---------- 08 Section scaffolding ---------- */
.section{ padding: 6.5rem 0; position: relative; }
.section.pt-0{ padding-top: 0; }
.section-head{ max-width: 720px; margin-bottom: 3.2rem; }
.section-head.text-center, .section-head.mx-auto{ margin-left: auto; margin-right: auto; }
.section-title{ font-size: clamp(1.85rem, 3vw, 2.7rem); line-height: 1.15; letter-spacing: -.025em; margin-bottom: 1rem; font-weight: 700; }
.section-sub{ color: var(--ink-soft); font-size: 1.07rem; line-height: 1.75; }
.lead-copy{ font-size: 1.04rem; line-height: 1.8; color: var(--ink-soft); }
.text-white .section-eyebrow{ color: #9ED8FA; }
.text-white .section-title, .section-title.text-white{ color: #fff; }

/* Alternating tinted sections (the pages set these inline with var(--bg-alt)) */
.section[style*="--bg-alt"], .services-section, .quote-section{ background: var(--bg-alt) !important; border-color: var(--line) !important; }
.section[style*="--bg-alt"]::before, .services-section::before{
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 35%);
  mask-image: linear-gradient(180deg, #000, transparent 35%);
}
.section > .container{ position: relative; }

/* Content column used by long-form pages (terms) */
.simple-section{ max-width: 860px; }
.simple-section h3{ font-size: 1.35rem; margin: 2.6rem 0 1rem; color: var(--ink); display: flex; gap: .75rem; align-items: baseline; }
.simple-section h3:first-child{ margin-top: 0; }
.simple-section ul{ color: var(--ink-soft); padding-left: 1.2rem; }
.simple-section li{ margin-bottom: .5rem; }
.simple-section p{ line-height: 1.85; }

/* ---------- 09 Cards ---------- */
.mini-card, .service-card, .process-card{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  height: 100%;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s ease, border-color .3s ease;
}
.mini-card{ padding: 1.8rem; }
.mini-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.mini-card > i:first-child, .mini-card > .bi:first-child{
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem; color: var(--primary); background: var(--tint);
  margin-bottom: 1.1rem;
  transition: background .3s ease, color .3s ease, transform .4s var(--ease);
}
.mini-card:hover > i:first-child{ background: var(--grad-main); color: #fff; transform: rotate(-6deg) scale(1.05); }
.mini-card h6, .mini-card h5, .mini-card h4, .mini-card h3{ font-size: 1.1rem; margin-bottom: .5rem; color: var(--ink); line-height: 1.3; }
.mini-card p{ font-size: .95rem; margin: 0; line-height: 1.7; }
.mini-card ul{ font-size: .95rem; padding-left: 1.1rem; margin: .5rem 0 0; }

.service-card{
  display: block; padding: 2rem 1.8rem; text-decoration: none; color: inherit; overflow: hidden;
}
.service-card::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,0%), var(--tint), transparent 65%);
  opacity: 0; transition: opacity .35s ease;
}
.service-card::after{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-main); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.service-card:hover::before{ opacity: 1; }
.service-card:hover::after{ transform: scaleX(1); }
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; color: inherit; }
.service-card > *{ position: relative; }
.service-code{ font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--ink-dim); margin-bottom: 1.2rem; text-transform: uppercase; }
.service-icon{
  width: 56px; height: 56px; border-radius: 16px;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff; background: var(--grad-main);
  box-shadow: var(--shadow-primary);
  margin-bottom: 1.3rem;
  transition: transform .5s var(--ease);
}
.service-card:hover .service-icon{ transform: rotate(-8deg) scale(1.06); }
.service-card h5, .service-card h4, .service-card h3{ font-size: 1.18rem; margin-bottom: .6rem; color: var(--ink); line-height: 1.3; }
.service-card p{ font-size: .95rem; margin: 0 0 .8rem; line-height: 1.7; }
.service-card p:last-child{ margin-bottom: 0; }
.service-card ul{ font-size: .93rem; padding-left: 1.1rem; margin-bottom: .5rem; }
a.service-card h5::after{
  content: "\F138"; font-family: "bootstrap-icons"; font-size: .95rem; margin-left: .45rem;
  color: var(--primary); opacity: 0; display: inline-block; transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s var(--ease);
}
a.service-card:hover h5::after{ opacity: 1; transform: translateX(0); }

.process-card{ padding: 2rem 1.8rem; overflow: hidden; }
.process-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.process-num{
  font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  background: var(--grad-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 1rem; opacity: .95;
}
.process-card h5, .process-card h4, .process-card h3{ font-size: 1.12rem; margin-bottom: .5rem; color: var(--ink); }
.process-card p{ font-size: .95rem; margin: 0; }

/* Process cards that sit in a row read as a connected timeline on desktop */
@media (min-width: 992px){
  .row:has(> [class*="col"] > .process-card) > [class*="col"]{ position: relative; }
}

/* ---------- 10 Lists, chips, flows ---------- */
.connect-chip{
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-body); font-size: .84rem; font-weight: 600; line-height: 1.3;
  border: 1px solid var(--line); border-radius: 999px; padding: .45rem .9rem;
  color: var(--ink-soft); background: var(--bg-alt);
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.connect-chip i{ color: var(--primary); }
a.connect-chip:hover, .connect-chip:hover{ border-color: var(--brand); color: var(--primary); background: var(--tint); }
a.connect-chip:hover{ transform: translateY(-2px); }

.industry-chip{
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .95rem; font-weight: 600;
  padding: .75rem 1.25rem; border-radius: 999px;
  background: var(--card); border: 1px solid var(--card-border); color: var(--ink);
  box-shadow: var(--shadow-xs);
  transition: transform .3s var(--ease), border-color .2s ease, color .2s ease, box-shadow .3s ease;
}
.industry-chip:hover{ transform: translateY(-3px); border-color: var(--brand); color: var(--primary); box-shadow: var(--shadow-md); }
.industry-chip i{ color: var(--primary); font-size: 1.05rem; }

.benefit-item{ display: flex; gap: 1.1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.benefit-item:last-child{ border-bottom: 0; }
.benefit-num{
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: #fff; background: var(--grad-main); box-shadow: var(--shadow-primary);
}
.benefit-item h6, .benefit-item h5{ margin-bottom: .35rem; color: var(--ink); font-size: 1.05rem; }
.benefit-item p{ margin: 0; font-size: .95rem; }

.schematic-panel{
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); padding: 2rem;
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.schematic-panel::before{
  content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: var(--blob-a); filter: blur(60px); top: -140px; right: -100px; pointer-events: none; opacity: .7;
}
.schematic-panel > *{ position: relative; }
.schematic-panel .flow-row{ display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.flow-step{
  font-size: .9rem; font-weight: 600;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 12px; padding: .85rem 1rem; color: var(--ink);
  flex: 1 1 auto; text-align: center; min-width: 110px;
  transition: border-color .25s ease, background .25s ease, transform .3s var(--ease);
}
.flow-step:hover{ border-color: var(--brand); background: var(--tint); transform: translateY(-2px); }
.flow-step:first-child{ background: var(--grad-main); color: #fff; border-color: transparent; }
.flow-arrow{ color: var(--brand); font-size: 1.1rem; }
.schematic-caption{ font-size: .86rem; color: var(--ink-dim); margin-top: 1.2rem; }
.schematic-panel h6{ font-size: 1.05rem; }
.schematic-panel ul{ padding-left: 1.1rem; }

.check-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.check-list li{ display: flex; gap: .65rem; align-items: flex-start; color: var(--ink-soft); }
.check-list li i{ color: var(--success); margin-top: .2rem; }

/* Icons the pages already use in lists */
.bi-check-circle-fill, .bi-check2-circle, .bi-check2{ color: var(--success); }

/* ---------- 11 Home-only blocks ---------- */
.trust-row{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 2rem; font-size: .88rem; color: var(--ink-dim); }
.trust-row span{ display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ink-soft); }
.trust-row i{ color: var(--success); }

/* Service bento (home) */
.svc-card{
  display: flex; flex-direction: column; height: 100%;
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; position: relative;
  transition: transform .45s var(--ease), box-shadow .45s ease, border-color .3s ease;
}
.svc-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-media{ background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 1.6rem 1.6rem 0; position: relative; overflow: hidden; }
.svc-media::before{ content: ""; position: absolute; inset: auto -20% -60% -20%; height: 80%; background: var(--grad-main); opacity: .1; filter: blur(40px); }
.svc-media .vis{ max-height: 300px; margin: 0 auto; transition: transform .6s var(--ease); }
.svc-card:hover .svc-media .vis{ transform: translateY(-6px) scale(1.02); }
.svc-body{ padding: 1.8rem; display: flex; flex-direction: column; flex: 1; }
.svc-body .svc-top{ display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.svc-ico{
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-main); color: #fff; font-size: 1.25rem; box-shadow: var(--shadow-primary);
  transition: transform .5s var(--ease);
}
.svc-card:hover .svc-ico{ transform: rotate(-8deg) scale(1.06); }
.svc-card h3{ font-size: 1.25rem; line-height: 1.25; }
.svc-card p{ font-size: .96rem; }
.svc-label{ font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin: .4rem 0 .7rem; }
.svc-chips{ display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }
.svc-chips .connect-chip{ font-size: .8rem; padding: .35rem .75rem; }
.svc-foot{ margin-top: auto; padding-top: .4rem; }
.svc-card.wide .svc-body{ padding: 2.2rem; }

/* Timeline (process) */
.timeline{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 1rem; position: relative; counter-reset: step; }
.timeline::before{ content: ""; position: absolute; top: 27px; left: 4%; right: 4%; height: 2px; background: linear-gradient(90deg, var(--brand), var(--primary2)); opacity: .35; }
.timeline li{ position: relative; text-align: center; padding: 0 .3rem; }
.tl-dot{
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1.1rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 2px solid var(--line-strong); color: var(--primary);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  position: relative; z-index: 1;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .4s var(--ease);
}
.timeline li:hover .tl-dot{ background: var(--grad-main); color: #fff; border-color: transparent; transform: scale(1.08); }
.tl-dot i{ font-size: 1.3rem; }
.timeline h3{ font-size: 1.02rem; margin-bottom: .4rem; }
.timeline p{ font-size: .88rem; margin: 0; line-height: 1.6; }

/* Tech stack */
.tech-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.tech-item{
  display: flex; align-items: center; gap: .9rem;
  padding: 1.05rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--bg-alt); border: 1px solid var(--line);
  font-weight: 600; color: var(--ink); font-size: .95rem;
  transition: border-color .2s ease, transform .3s var(--ease), background .2s ease;
}
.tech-item i{ width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--card); color: var(--primary); font-size: 1.15rem; box-shadow: var(--shadow-xs); }
.tech-item:hover{ border-color: var(--brand); transform: translateY(-3px); background: var(--card); }

.tech-grid.t2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px){ .timeline.t3{ grid-template-columns: repeat(3, minmax(0,1fr)); } .timeline.t3::before{ display: block; left: 16%; right: 16%; } }

/* Services page hero mosaic */
.svc-mosaic{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; max-width: 480px; }
.svc-mosaic span{
  aspect-ratio: 1; border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow-md);
  font-weight: 700; font-size: .9rem; color: var(--ink); text-align: center; padding: .5rem;
  animation: v-float 7s ease-in-out infinite;
}
.svc-mosaic span:nth-child(even){ animation-delay: -3s; }
.svc-mosaic span i{ width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--tint); color: var(--primary); font-size: 1.3rem; }
.svc-mosaic span:nth-child(3n+1) i{ background: color-mix(in srgb, var(--primary2) 12%, transparent); color: var(--primary2); }
.svc-mosaic .core{ background: var(--grad-main); color: #fff; border: 0; box-shadow: var(--shadow-primary); }
.svc-mosaic .core img{ width: 46px; height: 46px; border-radius: 50%; background: #fff; padding: 4px; }

/* Statement / quote panel */
.statement{
  border-radius: var(--radius-lg); padding: 2.4rem; position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow-md);
}
.statement::before{ content: "\F6B0"; font-family: "bootstrap-icons"; position: absolute; right: 1.6rem; top: 1rem; font-size: 4.5rem; line-height: 1; color: var(--brand); opacity: .12; }
.statement .who{ display: flex; gap: .9rem; align-items: center; margin-top: 1.4rem; }
.statement .who-ico{ width: 46px; height: 46px; border-radius: 50%; background: var(--grad-main); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }

/* Stats band */
.stat-band{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; }
.stat-band > div{ padding: 1.7rem 1.5rem; border-right: 1px solid var(--line); }
.stat-band > div:last-child{ border-right: 0; }
.stat-band .num{ font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.stat-band .num em{ font-style: normal; background: var(--grad-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-band .lbl{ font-size: .88rem; color: var(--ink-dim); margin-top: .5rem; }

/* Contact info cards */
.info-card{
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; box-shadow: var(--shadow-xs); color: var(--ink-soft);
  transition: transform .3s var(--ease), box-shadow .3s ease, border-color .2s ease;
}
a.info-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); color: var(--ink-soft); }
.info-card .ic{ flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px; background: var(--tint); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.info-card strong{ display: block; color: var(--ink); font-size: .98rem; margin-bottom: .1rem; }
.info-card span{ font-size: .92rem; line-height: 1.55; }

/* ---------- 12 Dark bands & CTA ---------- */
.erp-section, .dark-band{
  background:
    radial-gradient(ellipse 55% 60% at 0% 0%, rgba(11,149,219,.32), transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(14,165,198,.3), transparent 60%),
    var(--navy) !important;
  color: #fff; position: relative; overflow: hidden;
}
.erp-section::before, .dark-band::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.erp-section p, .dark-band p{ color: #B5C3D6; }
.erp-section h3, .dark-band h3, .erp-section strong, .dark-band strong{ color: #fff; }
.erp-section .section-eyebrow, .dark-band .section-eyebrow{ color: #8FD3FA; }
.erp-item{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem;
  color: #fff; height: 100%;
  display: flex; align-items: flex-start; gap: 1rem;
  position: relative; z-index: 1;
  transition: background .3s ease, border-color .3s ease, transform .4s var(--ease);
}
.erp-item:hover{ background: rgba(255,255,255,.08); border-color: rgba(34,169,240,.55); transform: translateY(-3px); }
.erp-index{
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  color: #fff; background: linear-gradient(135deg, rgba(34,169,240,.4), rgba(34,211,238,.4));
  border: 1px solid rgba(255,255,255,.18);
}
.erp-item strong{ font-family: var(--font-display); font-size: 1.04rem; letter-spacing: -.01em; }

.cta-band{
  background:
    radial-gradient(ellipse 60% 120% at 0% 0%, rgba(11,149,219,.5), transparent 60%),
    radial-gradient(ellipse 60% 120% at 100% 100%, rgba(14,165,198,.45), transparent 60%),
    var(--navy);
  border-radius: 32px;
  padding: 4rem 2.5rem;
  color: #fff; text-align: center; position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta-band::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
}
.cta-band::after{
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08); right: -90px; top: -120px;
  box-shadow: 0 0 0 50px rgba(255,255,255,.025), 0 0 0 100px rgba(255,255,255,.02);
}
.cta-band > *{ position: relative; z-index: 1; }
.cta-band h2, .cta-band h3{ color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: .9rem; letter-spacing: -.025em; }
.cta-band p{ color: #B9C6D8; max-width: 60ch; margin: 0 auto 2rem; font-size: 1.05rem; }
.cta-band strong, .cta-band h4, .cta-band h5, .cta-band h6{ color: #fff; }
.cta-band .btn-outline-ink{ background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.25); color: #fff; }
.cta-band .btn-outline-ink:hover{ background: rgba(255,255,255,.16) !important; color: #fff; border-color: rgba(255,255,255,.5); }
.cta-band .mini-card, .cta-band .service-card{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); box-shadow: none; }
.cta-band .mini-card p, .cta-band .service-card p{ color: #B9C6D8; }
.cta-band .text-muted{ color: #9FB0C6 !important; }

/* ---------- 13 FAQ ---------- */
.faq-accordion .accordion-item{
  background: var(--card);
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: .85rem;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)){ border-color: color-mix(in srgb, var(--brand) 40%, transparent) !important; box-shadow: var(--shadow-md); }
.faq-accordion .accordion-header{ margin: 0; font-size: inherit; }
.faq-accordion .accordion-button{
  background: transparent; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.4;
  padding: 1.3rem 1.5rem; box-shadow: none !important; gap: 1rem;
}
.faq-accordion .accordion-button:not(.collapsed){ background: transparent; color: var(--ink); }
.faq-accordion .accordion-button::after{
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--tint); background-image: none;
  font-family: "bootstrap-icons"; content: "\F64D"; font-size: 1rem; color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s var(--ease), background .3s ease, color .3s ease;
}
.faq-accordion .accordion-button:not(.collapsed)::after{ transform: rotate(45deg); background: var(--grad-main); color: #fff; }
.faq-accordion .accordion-body{ padding: 0 1.5rem 1.4rem; color: var(--ink-soft); font-size: .98rem; line-height: 1.8; }
.faq-accordion .accordion-body ul{ margin: .5rem 0 0; }

/* ---------- 14 Highlight boxes ---------- */
.aeo-highlight-box{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2.4rem 2.4rem 2.6rem;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.aeo-highlight-box::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-main); }
.aeo-highlight-box::after{ content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: var(--blob-a); filter: blur(70px); right: -120px; top: -140px; opacity: .6; pointer-events: none; }
.aeo-highlight-box > *{ position: relative; z-index: 1; }
.aeo-badge{
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: .35rem .85rem; border-radius: 999px; margin-bottom: 1rem;
}
.info-callout{
  background: var(--tint); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  border-radius: var(--radius-sm); padding: 1.2rem 1.5rem; font-size: .97rem; color: var(--ink-soft);
}

/* ---------- 15 Tables & pricing ---------- */
.table-responsive{
  border-radius: var(--radius); border: 1px solid var(--card-border);
  box-shadow: var(--shadow-sm); background: var(--card);
}
.table-responsive > .table{ margin: 0; }
.table{
  --bs-table-bg: var(--card);
  --bs-table-color: var(--ink-soft);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: var(--bg-alt);
  --bs-table-hover-bg: var(--tint);
  --bs-table-hover-color: var(--ink);
  color: var(--ink-soft);
  border-color: var(--line) !important;
  font-size: .95rem;
}
.table > :not(caption) > * > *{ background-color: var(--card); color: var(--ink-soft); border-color: var(--line); }
.table.table-bordered{ border-style: hidden; }
.table thead th, .table thead td, .table > thead > tr > *{
  background: var(--bg-alt) !important; color: var(--ink) !important;
  font-family: var(--font-display); font-weight: 600; font-size: .92rem; letter-spacing: -.005em;
  border-bottom: 1px solid var(--line-strong);
}
.table tbody tr{ transition: background .2s ease; }
.table tbody tr:hover > *{ background-color: var(--tint); }
.table td.fw-semibold, .table td.fw-bold, .table th[scope="row"]{ color: var(--ink); }
.table tbody tr > *:first-child{ color: var(--ink); font-weight: 600; }

.pricing-table-container{ background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.seo-pricing-table{ width: 100%; margin-bottom: 0; color: var(--ink); border-collapse: collapse; }
.seo-pricing-table th, .seo-pricing-table td{ padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.seo-pricing-table th{ background: var(--bg-alt); font-family: var(--font-display); font-weight: 700; }
.seo-pricing-table tr:last-child td{ border-bottom: 0; }
.seo-pricing-table tbody tr:hover{ background: var(--tint); }
.plan-header-cell{ text-align: center; }
.plan-title{ font-size: 1.15rem; font-weight: 700; margin-bottom: .3rem; color: var(--ink); }
.plan-price{ font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; background: var(--grad-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.plan-price-sub{ font-size: .74rem; font-weight: 600; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .06em; }
.plan-popular-badge{ display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--grad-warm); color: #fff; padding: .25rem .7rem; border-radius: 999px; margin-bottom: .5rem; }
.text-center-cell{ text-align: center; }
.check-icon{ color: var(--success); font-size: 1.2rem; }
.dash-icon{ color: var(--ink-dim); font-size: 1.1rem; }

/* ---------- 16 Forms ---------- */
.quote-form{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.quote-form::before{ content: ""; position: absolute; left: 2.4rem; right: 2.4rem; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--grad-main); }
.quote-form .form-label{ font-size: .86rem; font-weight: 600; color: var(--ink); margin-bottom: .45rem; }
.quote-form .form-control, .quote-form .form-select{
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: .8rem 1rem;
  min-height: 50px;
  font-size: .97rem;
  background-color: var(--bg-alt);
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.quote-form .form-select{ background-position: right 1rem center; }
[data-theme="dark"] .quote-form .form-select{ --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A6B4C8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.quote-form .form-select option{ background: var(--card); color: var(--ink); }
.quote-form textarea.form-control{ min-height: 130px; resize: vertical; }
.quote-form .form-control::placeholder{ color: var(--ink-dim); }
.quote-form .form-control:focus, .quote-form .form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--tint);
  background-color: var(--card);
  color: var(--ink);
}
.quote-form .btn-cta{ min-height: 50px; }
.quote-form.was-validated .form-control:invalid, .quote-form.was-validated .form-select:invalid{ border-color: #E0433D; }
.form-note{ font-size: .9rem; min-height: 1.4em; }
.form-note.success{ color: var(--success); }
.form-note.error{ color: #E0433D; font-weight: 600; }
.form-head{ margin-bottom: 1.6rem; }
.form-head h3{ font-size: 1.35rem; margin-bottom: .3rem; }
.form-head p{ margin: 0; font-size: .95rem; }
.form-assure{ display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 1.2rem; font-size: .84rem; color: var(--ink-dim); }
.form-assure span{ display: inline-flex; gap: .35rem; align-items: center; }
.form-assure i{ color: var(--success); }

.contact-list{ list-style: none; padding: 0; margin: 0; }
.contact-list li{ display: flex; gap: .75rem; align-items: flex-start; color: var(--ink-soft); font-size: .95rem; margin-bottom: .9rem; line-height: 1.6; }
.contact-list li > a{ display: flex; gap: .75rem; align-items: flex-start; color: var(--ink-soft); }
.contact-list li > a:hover{ color: var(--primary); }
.contact-list i{ color: var(--primary); margin-top: .2rem; }

.social-row{ display: flex; flex-wrap: wrap; gap: .6rem; }
.social-row a{
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--card);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-size: 1rem;
  transition: background .25s ease, color .25s ease, transform .3s var(--ease), border-color .25s ease;
}
.social-row a:hover{ background: var(--grad-main); border-color: transparent; color: #fff; transform: translateY(-3px); }

.map-frame{ border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); filter: var(--map-filter); line-height: 0; }
.map-frame iframe{ display: block; width: 100%; }

/* ---------- 17 Footer ---------- */
.site-footer{ background: var(--navy); color: #9FB0C6; padding-top: 5rem; position: relative; overflow: hidden; }
.site-footer::before{
  content: ""; position: absolute; width: 700px; height: 400px; border-radius: 50%;
  background: rgba(11,149,219,.12); filter: blur(90px); left: -200px; bottom: -200px; pointer-events: none;
}
.site-footer > .container{ position: relative; }
.site-footer p{ color: #9FB0C6; }
.footer-brand img{ height: 42px; width: auto; }
.footer-heading{ font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 1.2rem; letter-spacing: -.01em; }
.footer-links{ list-style: none; padding: 0; margin: 0; }
.footer-links li{ margin-bottom: .7rem; font-size: .93rem; color: #9FB0C6; }
.footer-links a{ color: #9FB0C6; display: inline-flex; align-items: center; gap: .4rem; transition: color .2s ease, transform .2s ease; }
.footer-links a:hover{ color: #fff; transform: translateX(3px); }
.footer-links.contact-list li{ display: flex; gap: .7rem; color: #9FB0C6; }
.footer-links.contact-list a{ color: #C9D5E4; }
.footer-links.contact-list a:hover{ transform: none; color: #fff; }
.footer-links i{ color: var(--brand); }
.site-footer .social-row a{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #C9D5E4; }
.site-footer .social-row a:hover{ background: var(--grad-main); color: #fff; }
.footer-rule{ border-color: rgba(255,255,255,.1); margin-top: 3rem; opacity: 1; }
.footer-bottom{ font-size: .88rem; color: #8293AA; }
.footer-bottom a{ color: #A9B7CB; }
.footer-bottom a:hover{ color: #fff; }
.back-to-top{ display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: #A9B7CB; font-weight: 600; }
.back-to-top:hover{ color: #fff; }

/* Floating action buttons (WhatsApp + back to top) */
.fab-stack{ position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1040; display: flex; flex-direction: column; gap: .7rem; align-items: flex-end; }
.fab{
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; color: #fff; box-shadow: var(--shadow-lg);
  transition: transform .3s var(--ease), opacity .3s ease, visibility .3s;
}
.fab:hover{ color: #fff; transform: translateY(-3px) scale(1.04); }
.fab-wa{ background: #1FAF55; }
.fab-top{ background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); font-size: 1.1rem; width: 46px; height: 46px; opacity: 0; visibility: hidden; transform: translateY(10px); }
.fab-top:hover{ color: var(--primary); }
.fab-top.show{ opacity: 1; visibility: visible; transform: none; }

/* ---------- 18 Illustrations (.vis) ---------- */
.vis{ width: 100%; height: auto; display: block; overflow: visible; }
.vis text{ font-family: var(--font-body); }
.vis .disp{ font-family: var(--font-display); letter-spacing: -.03em; }
.vis .s1{ stop-color: var(--brand); }
.vis .s2{ stop-color: var(--primary2); }
.vis .s3{ stop-color: var(--accent); }
.vis .s4{ stop-color: var(--amber); }
.vis .p{ fill: var(--card); stroke: var(--card-border); stroke-width: 1; }
.vis .p2{ fill: var(--bg-alt); }
.vis .sh{ filter: drop-shadow(0 14px 22px rgba(11,26,44,.12)) drop-shadow(0 2px 4px rgba(11,26,44,.05)); }
[data-theme="dark"] .vis .sh{ filter: drop-shadow(0 14px 24px rgba(0,0,0,.55)); }
.vis .cd1{ fill: #FF6B6B; } .vis .cd2{ fill: #FFC145; } .vis .cd3{ fill: #34C38F; }
.vis .dv{ fill: var(--line); }
.vis .ln{ fill: var(--line-strong); }
.vis .ln2{ fill: var(--line); }
.vis .lnb{ fill: var(--brand); }
.vis .ink{ fill: var(--ink); opacity: .85; }
.vis .hl{ fill: var(--tint); stroke: color-mix(in srgb, var(--brand) 30%, transparent); }
.vis .t{ fill: var(--ink); font-weight: 700; }
.vis .ts{ fill: var(--ink-dim); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; }
.vis .ts2{ fill: var(--ink-soft); font-size: 12px; font-weight: 500; }
.vis .tw{ fill: #fff; }
.vis .tp{ fill: var(--primary); }
.vis .up, .vis .okt{ fill: var(--success); font-size: 10.5px; font-weight: 700; }
.vis .act{ fill: var(--accent); font-weight: 700; }
.vis .ok, .vis .okf{ fill: var(--success); }
.vis .acf{ fill: var(--accent); }
.vis .ck{ fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vis .stk{ fill: none; stroke: var(--ink-soft); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vis .stk2{ fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vis .dotp{ fill: var(--card); stroke: var(--brand); stroke-width: 3; }
.vis .bar2{ opacity: .45; }
.vis .ring{ fill: none; stroke: var(--bg-alt-2); stroke-width: 12; }
.vis .ring2{ stroke: var(--brand); stroke-width: 3; }
.vis .ring3{ stroke: var(--card); stroke-width: 3; }
.vis .ring4{ fill: none; stroke: var(--primary2); stroke-width: 3; opacity: .6; }
.vis .phone{ fill: var(--phone); }
.vis .wf{ fill: #fff; opacity: .14; }
.vis .wf2{ fill: #fff; opacity: .85; }
.vis .wbtn{ fill: #fff; }
.vis .o6{ opacity: .6; } .vis .o7{ opacity: .7; } .vis .o8{ opacity: .85; }
.vis .stamp{ fill: none; stroke: var(--success); stroke-width: 2.5; }
.vis .edge{ fill: none; stroke: var(--line-strong); stroke-width: 2; }
.vis .dash{ stroke-dasharray: 5 6; }
.vis .leaf{ fill: var(--bg-alt-2); stroke: var(--line-strong); }
.vis .cursor{ fill: var(--ink); stroke: var(--card); stroke-width: 1.5; }
.vis .c1{ fill: var(--brand); } .vis .c2{ fill: var(--primary2); } .vis .c3{ fill: var(--accent); } .vis .c4{ fill: var(--amber); }
.vis .chip{ fill: var(--card); stroke: var(--card-border); }
.vis .code{ fill: #0B1626; }
[data-theme="dark"] .vis .code{ fill: #050B15; stroke: rgba(255,255,255,.08); }
.vis .ctab{ fill: #16243A; }
.vis .ctx{ fill: #9FB3CC; font-size: 10px; font-family: var(--font-mono); }
.vis .cln{ fill: #3D5070; font-size: 9px; font-family: var(--font-mono); }
.vis .ck1{ fill: #C792EA; } .vis .ck2{ fill: #82AAFF; } .vis .ck3{ fill: #C3E88D; } .vis .ck4{ fill: #6E83A3; } .vis .ck5{ fill: #FFCB6B; }
.vis .pill-ok{ fill: color-mix(in srgb, var(--success) 14%, transparent); }
.vis .pill-ac{ fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.vis .typing{ fill: var(--ink-dim); animation: typing 1.2s infinite ease-in-out; }
.vis .typing.t2{ animation-delay: .15s; } .vis .typing.t3{ animation-delay: .3s; }
@keyframes typing{ 0%,60%,100%{ opacity: .3; } 30%{ opacity: 1; } }
.vis .orbit{ fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 8; }
.vis .float{ animation: v-float 7s ease-in-out infinite; }
.vis .float.d2{ animation-delay: -2.3s; animation-duration: 8s; }
.vis .float.d3{ animation-delay: -4.6s; animation-duration: 9s; }
@keyframes v-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }

/* ---------- 19 Motion & reveal ---------- */
.reveal{ opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--reveal-delay, 0s); }
.reveal.is-visible{ opacity: 1; transform: none; }
.no-js .reveal{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal{ opacity: 1; transform: none; }
  .ticker-track{ animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ---------- 20 Responsive ---------- */
@media (max-width: 1199.98px){
  .timeline{ grid-template-columns: repeat(4, minmax(0,1fr)); row-gap: 2.4rem; }
  .timeline::before{ display: none; }
  .navbar-nav .nav-link{ padding: .6rem .8rem !important; }
}

@media (max-width: 991.98px){
  .section{ padding: 4.5rem 0; }
  .hero{ padding: 3rem 0 3.5rem; }
  .page-hero{ padding: 2.8rem 0 3.2rem; }
  .hero-visual, .page-visual{ max-width: 520px; margin: 0 auto; }
  .tech-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-band{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-band > div:nth-child(2){ border-right: 0; }
  .stat-band > div:nth-child(-n+2){ border-bottom: 1px solid var(--line); }

  /* Mobile navigation drawer */
  .main-nav .navbar-collapse{
    margin-top: .8rem; padding: .8rem; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 110px); overflow-y: auto;
  }
  .navbar-nav .nav-link{ padding: .85rem 1rem !important; font-size: 1rem; border-radius: 12px; }
  .navbar-nav .dropdown-menu{ position: static; display: none; box-shadow: none; border: 0; background: var(--bg-alt); padding: .4rem; margin: .2rem 0 .5rem; }
  .navbar-nav .dropdown-menu.show{ display: block; }
  .navbar-nav .dropdown-menu.mega{ width: auto; }
  .mega-grid{ grid-template-columns: 1fr; }
  .mega-foot{ background: transparent; padding: .5rem .8rem; margin-top: 0; }
  .mega-foot > span{ display: none; }
  .dropdown-item small{ display: none; }
  .dropdown-item .mi{ flex-basis: 32px; width: 32px; height: 32px; font-size: .95rem; }
  .navbar-nav .dropdown-item{ align-items: center; padding: .6rem; }
  .nav-actions{ padding: .8rem .2rem .2rem; border-top: 1px solid var(--line); margin-top: .6rem; }
  .nav-actions .btn-cta{ flex: 1; }

  .footer-cta .cta-band{ padding: 2.4rem 1.8rem; }
}

@media (max-width: 767.98px){
  body{ font-size: 15.5px; }
  .row.g-5, .row.gx-5{ --bs-gutter-x: 1.5rem; }
  .eyebrow{ letter-spacing: .06em; font-size: .7rem; }
  .section{ padding: 3.75rem 0; }
  .section-head{ margin-bottom: 2.2rem; }
  .hero-title{ font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .page-title{ font-size: clamp(1.85rem, 7.5vw, 2.4rem); }
  .hero-lead, .page-lead{ font-size: 1.02rem; }
  .hero-stats{ gap: .6rem; }
  .hero-stats .stat{ padding-left: .7rem; }
  .timeline{ grid-template-columns: 1fr; row-gap: 0; }
  .timeline li{ display: grid; grid-template-columns: 56px 1fr; gap: 0 1rem; text-align: left; padding: 0 0 1.6rem; }
  .timeline li::before{ content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: var(--line-strong); }
  .timeline li:last-child::before{ display: none; }
  .tl-dot{ margin: 0; grid-row: span 2; }
  .tech-grid, .tech-grid.t2{ grid-template-columns: 1fr; }
  .svc-mosaic{ gap: .6rem; }
  .svc-mosaic span{ border-radius: 16px; font-size: .78rem; }
  .svc-mosaic span i{ width: 38px; height: 38px; font-size: 1.05rem; }
  .quote-form{ padding: 1.6rem 1.25rem; border-radius: var(--radius); }
  .quote-form::before{ left: 1.25rem; right: 1.25rem; }
  .cta-band{ padding: 2.8rem 1.4rem; border-radius: 24px; }
  .footer-cta .cta-band{ text-align: center; justify-content: center; }
  .footer-cta .cta-actions{ justify-content: center; width: 100%; }
  .footer-cta .cta-actions .btn{ flex: 1 1 100%; }
  .aeo-highlight-box{ padding: 1.8rem 1.4rem 1.8rem 1.7rem; }
  .schematic-panel{ padding: 1.5rem; }
  .mini-card, .service-card, .process-card{ padding: 1.5rem; }
  .svc-body, .svc-card.wide .svc-body{ padding: 1.4rem; }
  .svc-media{ padding: 1rem 1rem 0; }
  .faq-accordion .accordion-button{ padding: 1.1rem 1.1rem; font-size: 1rem; }
  .faq-accordion .accordion-body{ padding: 0 1.1rem 1.2rem; }
  .table{ font-size: .88rem; }
  .table > :not(caption) > * > *{ padding: .75rem .9rem !important; }
  .flow-arrow{ transform: rotate(90deg); flex-basis: 100%; text-align: center; }
  .schematic-panel .flow-row{ flex-direction: column; align-items: stretch; }
  .fab{ width: 50px; height: 50px; }
  .fab-stack{ right: .9rem; bottom: .9rem; }
}

@media (max-width: 575.98px){
  .btn-lg.btn-cta, .btn-lg.btn-outline-ink, .btn-lg.btn-cta-inverse{ width: 100%; }
  .stat-band{ grid-template-columns: 1fr 1fr; }
  .stat-band > div{ padding: 1.2rem 1rem; }
  .hero-stats .stat-label{ font-size: .74rem; }
}

/* Smooth theme switch */
body{ transition: background-color .35s ease, color .35s ease; }

/* =========================================================================
   v5 — "Signal" layer: immersive hero, digital ecosystem, photo bento,
   collage, photo bands, page media. Motion lives in js/motion.js.
   ========================================================================= */

h1,h2,h3,h4,h5,h6{ font-weight: 600; letter-spacing: -.025em; }
.section-title{ font-weight: 600; letter-spacing: -.035em; line-height: 1.08; font-size: clamp(2rem, 3.6vw, 3.1rem); }
.page-title{ font-weight: 600; letter-spacing: -.04em; }
body{ font-size: 16.5px; }

/* Word-split helpers (headings animated by motion.js) */
.w{ display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.wi{ display: inline-block; will-change: transform; }

/* Shared glass surface (light by default, dark inside dark contexts) */
.glass{
  background: rgba(255,255,255,.78); color: var(--ink);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 18px 40px -16px rgba(6,17,31,.35);
}
.hero-dark .glass, .photo-band .glass, .tech-panel .glass, .quote-media .glass, [data-theme="dark"] .glass{
  background: rgba(8,22,42,.55); color: #fff; border-color: rgba(255,255,255,.16);
}

/* Image helpers */
.img-zoom{ overflow: hidden; }
.img-zoom img{ transition: transform 1.2s var(--ease); }
.img-zoom:hover img, .bcard:hover .img-zoom img{ transform: scale(1.06); }

/* ---------- Immersive dark hero ---------- */
.hero-dark{ background: var(--navy); color: #fff; padding: 6rem 0 7rem; }
.hero-dark::before, .hero-dark::after{ display: none; }
.hero-bg{ position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-bg::after{
  content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hb-grid{
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%);
}
.hb-orb{ position: absolute; border-radius: 50%; filter: blur(80px); animation: orb-drift 18s ease-in-out infinite alternate; }
.hb-orb.o1{ width: 720px; height: 720px; right: -180px; top: -260px; background: radial-gradient(circle, rgba(34,169,240,.55), transparent 65%); }
.hb-orb.o2{ width: 560px; height: 560px; left: -220px; bottom: -280px; background: radial-gradient(circle, rgba(34,211,238,.32), transparent 65%); animation-delay: -6s; }
.hb-beam{
  position: absolute; width: 140%; height: 2px; left: -20%; top: 62%;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.55), transparent);
  transform: rotate(-12deg); filter: blur(1px); opacity: .5; animation: beam-sweep 9s ease-in-out infinite;
}
@keyframes orb-drift{ to{ transform: translate(-60px, 50px) scale(1.12); } }
@keyframes beam-sweep{ 0%,100%{ transform: translateY(0) rotate(-12deg); opacity: .15; } 50%{ transform: translateY(-120px) rotate(-12deg); opacity: .55; } }

.hero-dark .eyebrow{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #CFE3F7; box-shadow: none; }
.hero-dark .hero-title{ color: #fff; font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; }
.hero-dark .grad-word{ background: var(--grad-glow); -webkit-background-clip: text; background-clip: text; }
.hero-dark .hero-lead{ color: #B4C3D6; }
.hero-dark .hero-stats .stat{ border-left-color: rgba(255,255,255,.16); }
.hero-dark .hero-stats .stat-num{ color: #fff; }
.hero-dark .hero-stats .stat-label{ color: #8EA2BA; }

.hero-media{ position: relative; aspect-ratio: 1 / .9; max-width: 640px; margin-left: auto; transition: transform .5s var(--ease); }
.hm-photo{ position: absolute; inset: 0 0 16% 16%; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.hm-photo img{ width: 100%; height: 100%; object-fit: cover; }
.hm-shade{ position: absolute; inset: 0; background: linear-gradient(200deg, rgba(6,17,31,0) 40%, rgba(6,17,31,.65)), linear-gradient(0deg, rgba(11,149,219,.18), rgba(11,149,219,0)); }
.hm-dash{ position: absolute; left: -2%; bottom: -4%; width: 64%; }
.hm-chip{ position: absolute; display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.05rem; border-radius: 999px; font-weight: 600; font-size: .88rem; white-space: nowrap; }
.hm-chip i{ color: var(--cyan); }
.hm-chip.c1{ left: 4%; top: 4%; }
.hm-chip.c2{ right: -3%; bottom: 22%; }
.hm-dash, .hm-chip, .pm-visual, .pm-chip, .cl-a, .cl-b, .cl-badge, .hm-photo, .pm-photo{ transition: translate .5s var(--ease); }

/* ---------- Digital ecosystem ---------- */
@property --sweep{ syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.eco{
  position: relative; aspect-ratio: 1 / .9; max-width: 720px; margin-left: auto;
  border-radius: 32px; overflow: hidden; isolation: isolate; perspective: 1100px;
  background: radial-gradient(120% 90% at 50% 42%, #0C2546 0%, #071629 52%, #040B16 100%);
  box-shadow: 0 50px 100px -40px rgba(6,17,31,.6), inset 0 0 0 1px rgba(255,255,255,.07);
}
.eco-glow{ position: absolute; inset: 0; background: radial-gradient(38% 34% at 50% 50%, rgba(34,169,240,.38), transparent 70%); animation: eco-breathe 6s ease-in-out infinite; }
@keyframes eco-breathe{ 50%{ opacity: .55; transform: scale(1.08); } }
.eco-floor{
  position: absolute; left: -40%; right: -40%; bottom: -30%; height: 75%;
  background-image: linear-gradient(rgba(34,211,238,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.2) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(520px) rotateX(66deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 55%, transparent 100%);
  animation: floor-run 5s linear infinite;
}
@keyframes floor-run{ to{ background-position: 0 54px; } }
.eco-canvas{ position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.eco-scene{ position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; will-change: transform; }
.eco-ring{ position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(34,211,238,.14); }
.eco-ring.r1{ width: 78%; height: 62%; }
.eco-ring.r2{ width: 54%; height: 42%; border-style: dashed; border-color: rgba(34,211,238,.18); }
.eco-ring.r3{ width: 30%; height: 24%; border-color: rgba(34,169,240,.3); }
.eco-ring span{
  position: absolute; inset: -1px; border-radius: 50%;
  background: conic-gradient(from var(--sweep), transparent 0 72%, rgba(34,211,238,0) 74%, rgba(34,211,238,.9) 96%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: ring-sweep 7s linear infinite;
}
.eco-ring.r2 span{ animation-duration: 5s; animation-direction: reverse; }
.eco-ring.r3 span{ animation-duration: 3.6s; }
@keyframes ring-sweep{ to{ --sweep: 360deg; } }

.eco-core{ position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; z-index: 10; transition: transform 1.4s var(--ease), opacity 1s ease; }
.eco:not(.is-in) .eco-core{ transform: scale(.3); opacity: 0; }
.eco-orb{
  position: absolute; inset: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 28%, #9BE3FF 0%, #22A9F0 26%, #0B5FB0 58%, #062246 100%);
  box-shadow: 0 0 50px rgba(34,169,240,.7), 0 0 120px rgba(34,169,240,.35), inset -10px -14px 30px rgba(2,10,24,.6), inset 6px 8px 18px rgba(255,255,255,.35);
  animation: orb-float 6s ease-in-out infinite;
}
.eco-orb::before{
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  background: conic-gradient(from var(--sweep), transparent 0 60%, rgba(34,211,238,.9) 90%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: ring-sweep 2.8s linear infinite;
}
.eco-orb img{ width: 46px; height: 46px; border-radius: 50%; background: #fff; padding: 5px; box-shadow: 0 6px 18px rgba(0,0,0,.3); position: relative; }
.eco-halo{ position: absolute; inset: 14px; border-radius: 50%; border: 1px solid rgba(34,211,238,.55); animation: halo 3.2s ease-out infinite; }
.eco-halo.h2{ animation-delay: 1.6s; }
@keyframes halo{ from{ transform: scale(1); opacity: .8; } to{ transform: scale(2.3); opacity: 0; } }
@keyframes orb-float{ 50%{ transform: translateY(-6px); } }

/* Nodes: static wrap without JS, live 3D orbit once motion.js runs */
.eco-nodes{ list-style: none; margin: 0; padding: 0; position: absolute; left: 1rem; right: 1rem; bottom: 3.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; z-index: 15; }
.eco.eco-live .eco-nodes{ inset: 0; display: block; }
.eco.eco-live .eco-node{ position: absolute; left: 0; top: 0; will-change: transform, opacity; transform-origin: 50% 50%; }
.eco-card{
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .9rem .55rem .55rem; border-radius: 16px;
  background: rgba(13,31,56,.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12); color: #fff; white-space: nowrap;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.6);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, filter .4s ease;
}
.eco-card:hover, .eco-card:focus-visible{ color: #fff; border-color: rgba(34,211,238,.75); background: rgba(12,42,78,.92); box-shadow: 0 0 0 4px rgba(34,211,238,.14), 0 20px 44px -12px rgba(0,0,0,.7); }
.eco-ico{ width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--grad-glow); color: #04111F; font-size: 1.05rem; }
.eco-txt b{ display: block; font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.2; color: #fff; }
.eco-txt small{ display: block; font-size: .74rem; color: #93A9C3; line-height: 1.3; }
.eco-node.is-back .eco-card{ filter: blur(.7px) saturate(.75); }
.eco.is-hover .eco-node:not(:hover) .eco-card{ filter: saturate(.6) brightness(.8); }
.eco-label{
  position: absolute; left: 50%; top: 1.1rem; transform: translateX(-50%); z-index: 30;
  display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap;
  padding: .5rem 1rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #CFE3F7;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.eco:not(.eco-live) .eco-label{ display: none; }
.eco-label .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse-dot 2.4s infinite; }

/* ---------- Photo bento (services) ---------- */
.bento{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 1.4rem; }
.b-7{ grid-column: span 7; } .b-5{ grid-column: span 5; } .b-6{ grid-column: span 6; } .b-4{ grid-column: span 4; }
.bcard{
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 28px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s ease;
}
.bcard:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.bcard-media{ position: relative; aspect-ratio: 16 / 8.5; overflow: hidden; background: var(--bg-alt); }
.b-4 .bcard-media{ aspect-ratio: 4 / 2.8; }
.bcard-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,17,31,.28)); pointer-events: none; }
.bcard-body{ padding: 1.6rem 1.75rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.bcard-body .svc-top{ margin-bottom: .9rem; }
.bcard h3{ font-size: 1.28rem; line-height: 1.2; }
.bcard p{ font-size: .96rem; }
.bcard .link-arrow{ margin-top: auto; padding-top: .3rem; }
.bcard-side{ flex-direction: row; }
.bcard-side .bcard-media{ flex: 0 0 38%; aspect-ratio: auto; }
.bcard-dark{ background: linear-gradient(165deg, #0C2140 0%, #06111F 100%); border-color: rgba(255,255,255,.08); color: #fff; }
.bcard-dark h3, .bcard-dark strong{ color: #fff; }
.bcard-dark p{ color: #A9B9CD; }
.bcard-dark .svc-label{ color: #8DA2BB; }
.bcard-dark .connect-chip{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #D5E1EE; }
.bcard-dark .link-arrow{ color: #7DD3FC; }
.bcard-vis{ aspect-ratio: auto; background: radial-gradient(80% 90% at 50% 20%, rgba(34,169,240,.25), transparent 70%); padding: 1.6rem 1.6rem .4rem; }
.bcard-vis::after{ display: none; }
.bcard-vis .vis{ max-height: 260px; margin: 0 auto; }

/* ERP band photo */
.erp-vis{ margin-top: 1.8rem; border-radius: 22px; overflow: hidden; height: 220px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.1); }
.erp-vis img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }

/* ---------- Collage (why us) ---------- */
.collage{ position: relative; aspect-ratio: 1 / 1.08; max-width: 540px; transition: transform .5s var(--ease); }
.collage::before{
  content: ""; position: absolute; right: 6%; top: -4%; width: 46%; height: 40%; border-radius: 24px;
  background-image: radial-gradient(var(--brand) 1.4px, transparent 1.6px); background-size: 16px 16px; opacity: .35;
}
.cl-a{ position: absolute; inset: 0 16% 16% 0; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-lg); }
.cl-b{ position: absolute; right: 0; bottom: 0; width: 54%; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; border: 6px solid var(--bg); box-shadow: var(--shadow-lg); }
.cl-a img, .cl-b img{ width: 100%; height: 100%; object-fit: cover; }
.cl-badge{ position: absolute; left: -3%; bottom: 10%; display: flex; flex-direction: column; padding: 1rem 1.25rem; border-radius: 20px; max-width: 200px; font-size: .82rem; font-weight: 600; line-height: 1.35; }
.cl-badge .num{ font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; background: var(--grad-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: .25rem; }

.feat-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.feat{
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border-radius: 20px;
  background: var(--card); border: 1px solid var(--card-border);
  transition: transform .4s var(--ease), box-shadow .4s ease, border-color .3s ease;
}
.feat:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.feat > i{ flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--tint); color: var(--primary); font-size: 1.2rem; transition: background .3s ease, color .3s ease; }
.feat:hover > i{ background: var(--grad-main); color: #fff; }
.feat h3{ font-size: 1.04rem; margin-bottom: .3rem; }
.feat p{ font-size: .9rem; margin: 0; line-height: 1.6; }

/* ---------- Full-bleed photo band (process) ---------- */
.photo-band{ background: var(--navy) !important; color: #fff; overflow: hidden; isolation: isolate; }
.photo-band::before{ display: none; }
.pb-media{ position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pb-img{ position: absolute; inset: -12% 0; }
.pb-img img{ width: 100%; height: 100%; object-fit: cover; }
.pb-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,17,31,.86), rgba(6,17,31,.93)), radial-gradient(60% 60% at 50% 0%, rgba(34,169,240,.3), transparent 70%); }
.photo-band .section-sub{ color: #B4C3D6; }
.photo-band .section-eyebrow{ color: #7DD3FC; }
.timeline-dark::before{ opacity: .6; background: linear-gradient(90deg, var(--brand), var(--cyan)); }
.timeline-dark .tl-dot{ background: rgba(8,22,42,.7); border-color: rgba(125,211,252,.35); color: #7DD3FC; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.timeline-dark h3{ color: #fff; }
.timeline-dark p{ color: #A3B4C9; }

/* Big statement */
.statement-big p{ font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; color: var(--ink); font-weight: 400; letter-spacing: -.01em; }

/* ---------- Technology panel ---------- */
.tech-panel{ position: relative; border-radius: 32px; overflow: hidden; background: var(--navy); padding: 3.6rem; color: #fff; isolation: isolate; box-shadow: var(--shadow-lg); }
.tp-media{ position: absolute; inset: 0 50% 0 0; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent); }
.tp-img{ position: absolute; inset: -10% 0; }
.tp-img img{ width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.tech-panel p{ color: #B4C3D6; }
.tech-panel .section-eyebrow{ color: #7DD3FC; }
.tech-panel .tech-item{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tech-panel .tech-item i{ background: rgba(255,255,255,.07); color: #7DD3FC; box-shadow: none; }
.tech-panel .tech-item:hover{ background: rgba(255,255,255,.1); border-color: rgba(125,211,252,.5); }

/* ---------- Quote media ---------- */
.quote-media{ position: relative; border-radius: 28px; overflow: hidden; margin-top: 1.6rem; aspect-ratio: 4 / 3.1; box-shadow: var(--shadow-lg); }
.quote-media > img{ width: 100%; height: 100%; object-fit: cover; }
.quote-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(6,17,31,.75)); pointer-events: none; }
.qm-cards{ position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; display: grid; grid-template-columns: 1fr; gap: .6rem; }
.quote-media > img{ object-position: 50% 25%; }
.info-card.glass{ border-radius: 16px; padding: .85rem .9rem; }
.info-card.glass strong{ color: #fff; }
.info-card.glass span{ color: #CFDAE7; font-size: .84rem; word-break: break-word; }
.info-card.glass .ic{ background: rgba(255,255,255,.12); color: #7DD3FC; flex-basis: 40px; width: 40px; height: 40px; }
a.info-card.glass:hover{ border-color: rgba(125,211,252,.6); color: #fff; }

/* ---------- Inner page media composition ---------- */
.pm{ position: relative; aspect-ratio: 1 / .92; max-width: 580px; margin-left: auto; transition: transform .5s var(--ease); }
.pm-photo{ position: absolute; inset: 0 0 18% 14%; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-lg); }
.pm-photo img{ width: 100%; height: 100%; object-fit: cover; }
.pm-photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 45%, rgba(6,17,31,.45)); }
.pm-visual{ position: absolute; left: -2%; bottom: -2%; width: 66%; }
.pm-chip{ position: absolute; right: -2%; top: 7%; display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.05rem; border-radius: 999px; font-weight: 600; font-size: .86rem; white-space: nowrap; }
.pm-chip i{ color: var(--primary); }
[data-theme="dark"] .pm-chip i{ color: var(--cyan); }

/* ---------- v5 responsive ---------- */
@media (max-width: 1199.98px){
}
@media (max-width: 991.98px){
  .hero-dark{ padding: 3.5rem 0 4.5rem; }
  .hero-media, .pm{ margin: 0 auto; max-width: 560px; }
  .eco{ margin: 0 auto; }
  .bento{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .b-7, .b-5, .b-6{ grid-column: span 2; }
  .b-4{ grid-column: span 1; }
  .collage{ margin: 0 auto; max-width: 460px; }
  .tech-panel{ padding: 2.4rem 1.8rem; }
  .tp-media{ inset: 0; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
}
@media (max-width: 767.98px){
  .bento{ grid-template-columns: 1fr; gap: 1rem; }
  .b-4{ grid-column: span 1; }
  .bcard-side{ flex-direction: column; }
  .bcard-side .bcard-media{ aspect-ratio: 16 / 9; }
  .bcard-body{ padding: 1.3rem 1.3rem 1.5rem; }
  .feat-grid{ grid-template-columns: 1fr; }
  .eco{ aspect-ratio: 1 / 1.1; border-radius: 24px; }
  .eco-card{ padding: .4rem .6rem .4rem .4rem; gap: .45rem; border-radius: 12px; }
  .eco-ico{ width: 30px; height: 30px; flex-basis: 30px; font-size: .9rem; border-radius: 9px; }
  .eco-txt b{ font-size: .8rem; }
  .eco-txt small{ display: none; }
  .eco-core{ width: 96px; height: 96px; margin: -48px 0 0 -48px; }
  .eco-orb img{ width: 34px; height: 34px; }
  .eco-label{ font-size: .7rem; top: .8rem; }
  .hm-dash{ width: 70%; }
  .hm-chip, .pm-chip{ font-size: .74rem; padding: .5rem .75rem; }
  .hm-chip.c2{ right: 0; }
  .pm-chip{ right: 0; }
  .qm-cards{ grid-template-columns: 1fr; }
  .cl-badge{ left: 0; padding: .8rem 1rem; }
  .cl-badge .num{ font-size: 1.7rem; }
  .timeline-dark li::before{ background: rgba(255,255,255,.15); }
}
@media (prefers-reduced-motion: reduce){
  .hb-orb, .hb-beam, .eco-floor, .eco-glow, .eco-ring span, .eco-orb, .eco-orb::before, .eco-halo{ animation: none !important; }
}

/* CTA band photo backdrop (inner pages) */
.cta-band > .cta-photo{ position: absolute; inset: 0; z-index: 0; }
.cta-photo img{ width: 100%; height: 100%; object-fit: cover; opacity: .2; filter: grayscale(.3); }
.cta-photo::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(6,17,31,.2), rgba(6,17,31,.75)); }