/* =====================================================================
   ZOHO PUVI — brand typeface (matches Quanto Retail). Loaded first.
   Files live in ../fonts/puvi/ (relative to this stylesheet).
   ===================================================================== */
@font-face{font-family:'Zoho Puvi';src:url('../fonts/puvi/ZohoPuvi-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Zoho Puvi';src:url('../fonts/puvi/ZohoPuvi-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Zoho Puvi';src:url('../fonts/puvi/ZohoPuvi-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Zoho Puvi';src:url('../fonts/puvi/ZohoPuvi-Semibold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Zoho Puvi';src:url('../fonts/puvi/ZohoPuvi-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Zoho Puvi';src:url('../fonts/puvi/ZohoPuvi-Extrabold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Zoho Puvi';src:url('../fonts/puvi/ZohoPuvi-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}

/* =====================================================================
   ACCRUE RETAIL — 2026 PREMIUM REDESIGN  (v2, bold/enterprise)
   Loaded LAST. Overrides the legacy template via shared class names.
   Backend untouched: no form names / ids / actions affected.
   Brand colors preserved from logo: cyan #00aeef (+ ink / gray).
   Aesthetic: dark dramatic heroes + clean premium light content,
   gradient borders, glow, glass, tasteful motion. Mobile-first.
   ===================================================================== */

/* ----------------------------- Tokens ----------------------------- */
:root {
  /* Brand (unchanged — from logo) */
  --brand:      #00aeef;          /* logo cyan */
  --brand-2:    #2a5298;          /* electric blue (gradient partner) */
  --brand-600:  #0094cf;
  --brand-700:  #006d96;

  /* Signature gradients */
  --grad:       linear-gradient(120deg, #00aeef 0%, #2a5298 100%);
  --grad-soft:  linear-gradient(120deg, #E8F7FE 0%, #ECF1FF 100%);
  --grad-text:  linear-gradient(120deg, #38c2f5 0%, #00aeef 100%);

  /* Dark canvas */
  --ink-900:    #070D17;
  --ink-850:    #0A1220;
  --ink-800:    #0E1A2B;
  --ink-700:    #14253C;
  --hairline-d: rgba(255,255,255,.10);

  /* Light surfaces & text */
  --ink:        #0B1524;
  --slate:      #3A4860;
  --muted:      #5C6B82;
  --line:       #E6ECF3;
  --surface:    #F6F9FC;
  --surface-2:  #EEF3F9;
  --white:      #fff;

  /* Effects */
  --radius:     22px;
  --radius-sm:  14px;
  --radius-pill:999px;
  --container:  1180px;
  --glow:       0 0 0 1px rgba(0,174,239,.18), 0 18px 50px -12px rgba(0,174,239,.45);
  --shadow-sm:  0 2px 10px rgba(11,21,36,.06);
  --shadow:     0 18px 48px -16px rgba(11,21,36,.22);
  --shadow-lg:  0 40px 90px -30px rgba(11,21,36,.42);
  --ring:       0 0 0 3px rgba(0,174,239,.5);

  --font-body:  'Zoho Puvi', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head:  'Zoho Puvi', var(--font-body);
}

/* ----------------------------- Base ------------------------------- */
html { scroll-behavior: smooth; }
body, body.boxed_wrapper, .boxed_wrapper {
  font-family: var(--font-body) !important;
  color: var(--slate);
  font-size: 15.5px;
  line-height: 1.65;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6,
.sec-title h2,.sec-title-nine h2 {
  font-family: var(--font-head) !important;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.08;
  font-weight: 800;
}
p { color: var(--muted); }
a { transition: color .2s ease, opacity .2s ease; }
img { max-width: 100%; height: auto; }
.auto-container {
  max-width: var(--container) !important;
  width: 100%;
  padding-left: 22px; padding-right: 22px;
  margin: 0 auto;
}

/* Strip dated template noise + custom cursor */
#mouse-pointer,
.banner-one > .shape, .banner-one > .pattern-layer,
.process-one > .pattern-layer,
.contact-three > .shape,
.footer-one > .pattern-layer { display: none !important; }

/* Reliability: never let JS-gated content stay hidden */
.wow { visibility: visible !important; }

/* ------------------------- Accessibility -------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, .theme-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--ring) !important;
  border-radius: 10px;
}
.sr-only {
  position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
}

/* --------------------------- Keyframes ---------------------------- */
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes floatY2{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(14px)} }
@keyframes orbDrift{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-24px) scale(1.08)} }
@keyframes shimmer { 0%{transform:translateX(-130%) skewX(-18deg)} 100%{transform:translateX(230%) skewX(-18deg)} }
@keyframes gradPan { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* --------------------------- Header / Nav ------------------------- */
.main-header, .header-lower {
  position: sticky !important; top: 0; left: 0; width: 100%; z-index: 1000;
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(11,21,36,.06);
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
body.is-scrolled .header-lower {
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 30px -16px rgba(11,21,36,.35);
}
.header-lower .outer-box {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 82px; transition: min-height .3s ease;
}
body.is-scrolled .header-lower .outer-box { min-height: 68px; }
.logo-box .logo img { max-height: 48px; width: auto; transition: max-height .3s ease; }
body.is-scrolled .logo-box .logo img { max-height: 42px; }

.main-menu .navigation > li { margin: 0 3px; }
.main-menu .navigation > li > a {
  position: relative;
  font-family: var(--font-head) !important; font-weight: 600;
  font-size: 15.5px; color: var(--ink) !important;
  padding: 10px 14px !important; border-radius: var(--radius-pill);
}
.main-menu .navigation > li > a::after {
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background: var(--grad); border-radius:2px;
  transform: scaleX(0); transform-origin:left; transition: transform .28s ease;
}
.main-menu .navigation > li > a:hover::after,
.main-menu .navigation > li.current > a::after { transform: scaleX(1); }
.main-menu .navigation > li > a:hover,
.main-menu .navigation > li.current > a { color: var(--brand-700) !important; }

.main-menu .navigation > li > ul {
  border-radius: 16px !important; box-shadow: var(--shadow) !important;
  border: 1px solid var(--line); padding: 8px !important; overflow: hidden;
  background:#fff;
}
.main-menu .navigation > li > ul > li > a {
  border-radius: 10px; padding: 10px 14px !important; font-weight: 500;
}
.main-menu .navigation > li > ul > li > a:hover {
  background: var(--grad-soft) !important; color: var(--brand-700) !important;
}

.nav-cta {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad); background-size: 200% 100%;
  color:#fff !important; font-family: var(--font-head); font-weight: 700;
  font-size: 15px; padding: 13px 26px; border-radius: var(--radius-pill);
  box-shadow: 0 10px 26px -6px rgba(0,174,239,.6);
  white-space: nowrap; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, background-position .5s ease;
}
.nav-cta:hover {
  color:#fff !important; transform: translateY(-2px); background-position: 100% 50%;
  box-shadow: 0 16px 34px -6px rgba(42,82,152,.7);
}
/* Demo button lives inside the nav <li>, so beat the generic nav-link rule:
   keep it a solid gradient pill with white text (matches the mobile menu CTA). */
.main-menu .navigation > li > a.nav-cta,
.main-menu .navigation > li > a.nav-cta:hover {
  color:#fff !important; padding: 13px 26px !important; border-radius: var(--radius-pill) !important;
}
.main-menu .navigation > li > a.nav-cta::after { display: none !important; }

/* --------------------------- Buttons ------------------------------ */
.theme-btn, .theme-btn-one, .theme-btn-two, .theme-btn-eight {
  position: relative; overflow: hidden;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head) !important; font-weight: 700 !important;
  font-size: 16px !important; line-height: 1 !important;
  padding: 17px 32px !important; border-radius: var(--radius-pill) !important;
  border: 0 !important; cursor: pointer; text-transform: none !important;
  background: var(--grad) !important; background-size: 200% 100% !important; color:#fff !important;
  box-shadow: 0 12px 30px -8px rgba(0,174,239,.55) !important;
  transition: transform .22s ease, box-shadow .25s ease, background-position .5s ease !important;
}
.theme-btn::before { display:none !important; }
.theme-btn::after {
  content:""; position:absolute; top:0; bottom:0; width:40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-130%) skewX(-18deg); pointer-events:none;
}
.theme-btn:hover, .theme-btn-one:hover, .theme-btn-eight:hover {
  color:#fff !important; transform: translateY(-3px); background-position:100% 50% !important;
  box-shadow: 0 22px 44px -10px rgba(42,82,152,.7) !important;
}
.theme-btn:hover::after { animation: shimmer .9s ease; }
.theme-btn i { transition: transform .25s ease; }
.theme-btn:hover i { transform: translateX(4px); }

/* Secondary / glass */
.theme-btn-two {
  background: rgba(255,255,255,.06) !important; color:#fff !important;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4) !important;
  backdrop-filter: blur(6px);
}
.theme-btn-two:hover { background: rgba(255,255,255,.16) !important; color:#fff !important; transform: translateY(-3px); }

/* ----------------------------- HERO (dark) ------------------------ */
.banner-one {
  --mx: 50%; --my: 30%;
  position: relative; isolation: isolate;
  padding: clamp(80px,12vw,140px) 0 clamp(90px,13vw,150px) !important;
  background-color: var(--ink-850);
  background-image:
    radial-gradient(400px 400px at var(--mx) var(--my), rgba(255,159,77,.18), transparent 70%),
    radial-gradient(60% 120% at 12% 8%, rgba(0,174,239,.30), transparent 60%),
    radial-gradient(55% 110% at 92% 95%, rgba(42,82,152,.28), transparent 62%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, auto, auto, 46px 46px, 46px 46px;
  overflow: hidden;
}
/* floating orbs */
.banner-one::before, .banner-one::after {
  content:""; position:absolute; border-radius:50%; filter: blur(30px); z-index:-1; pointer-events:none;
}
.banner-one::before {
  width: 360px; height: 360px; top:-90px; right:6%;
  background: radial-gradient(circle, rgba(0,174,239,.55), transparent 65%);
  animation: orbDrift 14s ease-in-out infinite;
}
.banner-one::after {
  width: 300px; height: 300px; bottom:-80px; left:-40px;
  background: radial-gradient(circle, rgba(42,82,152,.45), transparent 65%);
  animation: orbDrift 18s ease-in-out infinite reverse;
}
.banner-one .content-box h2 {
  color:#fff !important; font-weight: 800 !important;
  font-size: clamp(2.8rem, 5.6vw, 4.8rem) !important; line-height: 1.02 !important;
  letter-spacing: -0.03em; margin-bottom: 24px !important;
}
.banner-one .content-box h2 .animation_text_word,
.banner-one .content-box h2 br + span {
  background: var(--grad-text); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradPan 6s linear infinite alternate;
}
.banner-one .content-box p {
  color: rgba(226,236,247,.82) !important; font-size: 1.18rem !important;
  line-height: 1.75 !important; max-width: 560px; margin-bottom: 34px !important;
}
.hero-cta { display:flex; flex-wrap:wrap; gap:16px; }
/* illustration lifted into a glass panel */
.banner-one .image-box {
  position: relative; border-radius: 28px; padding: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(0,174,239,.15);
  backdrop-filter: blur(8px); animation: floatY 7s ease-in-out infinite;
}
.banner-one .image-box::before {
  content:""; position:absolute; inset:-2px; border-radius:30px; z-index:-1;
  background: var(--grad); filter: blur(26px); opacity:.5;
}
.banner-one .image-box img { border-radius: 16px; display:block; width:100%; }

/* --------------------- Section titles / eyebrows ------------------ */
.service-15, .process-one, .contactinfo-one, .contact-three, .news-one, .service-details {
  padding-top: clamp(64px, 9vw, 110px) !important;
  padding-bottom: clamp(64px, 9vw, 110px) !important;
}
.sec-title-nine h2, .sec-title h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.2rem) !important; font-weight: 800 !important;
  margin-bottom: 16px !important;
}
.sec-title .sub-title, .sec-title-nine h6, .contactinfo-one h5 {
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-head) !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px !important;
  color: var(--brand-700) !important; background: rgba(0,174,239,.10) !important;
  border: 1px solid rgba(0,174,239,.22);
  padding: 8px 16px !important; border-radius: var(--radius-pill); margin-bottom: 20px !important;
  /* neutralize the template's gradient-text clip so the pill + text show normally */
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}
img[src*="ARM.png"], .service-page-4 img[src*="ARM.png"] {
  width:100% !important; max-width: 680px !important; height:auto !important;
  filter: drop-shadow(0 30px 60px rgba(11,21,36,.18));
}

/* Product ecosystem orbit (replaces the legacy ARM.png diagram) */
@keyframes orbitSpin { to { transform: rotate(360deg); } }

.arm-orbit {
  position: relative; width: min(620px, 92vw); aspect-ratio: 1 / 1;
  margin: clamp(24px,4vw,40px) auto 0;
}
.arm-orbit__ring {
  position: absolute; inset: 13%; border-radius: 50%;
  border: 1.5px dashed rgba(0,174,239,.4);
  animation: orbitSpin 10s linear infinite;
}
.arm-orbit__ring::before {
  content:""; position:absolute; inset:-13%; border-radius:50%;
  background: radial-gradient(closest-side, rgba(0,174,239,.12), rgba(42,82,152,.05) 55%, transparent 72%);
}
.arm-orbit__ring::after {
  content:""; position:absolute; top:-7px; left:50%; width:12px; height:12px; margin-left:-6px;
  border-radius:50%; background: var(--grad);
  box-shadow: 0 0 16px 3px rgba(0,174,239,.7);
}
.arm-orbit__core {
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 33%; aspect-ratio:1; border-radius:50%; background:#fff; z-index:2;
  display:flex; align-items:center; justify-content:center; padding: 6%;
  box-shadow: 0 30px 70px -24px rgba(11,21,36,.32), 0 0 0 1px rgba(0,174,239,.16);
}
.arm-orbit__core img { width:100%; height:auto; }
.arm-orbit__nodes { list-style:none; margin:0; padding:0; }
.arm-orbit__nodes li {
  position:absolute; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding: 18px 26px; min-width: 152px; border-radius: 18px;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(160deg, rgba(0,174,239,.55), rgba(42,82,152,.2) 70%, #E6ECF3) border-box;
  box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.n-top    { top:0;    left:50%; transform: translate(-50%, 0); }
.n-bottom { bottom:0; left:50%; transform: translate(-50%, 0); }
.n-left   { left:0;   top:50%;  transform: translate(0, -50%); }
.n-right  { right:0;  top:50%;  transform: translate(0, -50%); }
.n-top:hover, .n-bottom:hover { transform: translate(-50%, -7px); box-shadow: 0 34px 66px -26px rgba(0,174,239,.6); }
.n-left:hover, .n-right:hover { transform: translate(0, calc(-50% - 7px)); box-shadow: 0 34px 66px -26px rgba(0,174,239,.6); }
.ae-name { font-family: var(--font-head); font-weight:700; color: var(--ink); font-size: 1.08rem; }
.ae-tag {
  font-size: 11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background: var(--grad); padding: 5px 13px; border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px -6px rgba(0,174,239,.6);
}
/* Collapse the orbit to a clean stack on smaller screens */
@media (max-width: 860px) {
  .arm-orbit { width:100%; aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; gap:30px; }
  .arm-orbit__ring { display:none; }
  .arm-orbit__core { position:static; transform:none; width:150px; padding:0; box-shadow:none; }
  .arm-orbit__core::after { content:""; }
  .arm-orbit__nodes { position:static; display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
  .arm-orbit__nodes li { position:static !important; transform:none !important; top:auto; left:auto; right:auto; bottom:auto; }
  .arm-orbit__nodes li:hover { transform: translateY(-6px) !important; }
}

/* --------------------------- Service cards ------------------------ */
.service-block-12 .inner-box {
  position: relative; height:100%; border-radius: var(--radius) !important; overflow:hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(160deg, rgba(0,174,239,.4), rgba(42,82,152,.12) 45%, rgba(230,236,243,1) 75%) border-box;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease;
}
.service-block-12 .inner-box::after {
  content:""; position:absolute; inset:0; border-radius: var(--radius); pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.service-block-12 .inner-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 80px -28px rgba(0,174,239,.5) !important;
}
.service-block-12 .image-box { overflow:hidden; }
.service-block-12 .image-box img {
  width:100%; aspect-ratio: 16/10; object-fit:cover; transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.service-block-12 .inner-box:hover .image-box img { transform: scale(1.08); }
.service-block-12 .lower-content { padding: 32px !important; }
.service-block-12 h3 a { color: var(--ink) !important; font-weight:700 !important; font-size:1.32rem !important; }
.service-block-12 h3 a:hover { color: var(--brand-700) !important; }
.service-block-12 .btn-box .theme-btn { padding: 12px 22px !important; font-size:14.5px !important; }

/* gradient icon tiles (shared) */
.icon-box, .service-block-12 .icon-box, .info-block-one .icon-box {
  background: var(--grad) !important; color:#fff !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 30px -8px rgba(0,174,239,.6) !important;
  transition: transform .32s ease;
}
.service-block-12 .inner-box:hover .icon-box,
.info-block-one .inner-box:hover .icon-box { transform: translateY(-4px) rotate(-6deg); }
.icon-box .icon i, .icon-box i { color:#fff !important; }

/* --------------------------- Process (dark band) ----------------- */
.process-one {
  position: relative; isolation:isolate;
  background-color: var(--ink-850) !important;
  background-image:
    radial-gradient(50% 120% at 80% 0%, rgba(42,82,152,.25), transparent 60%),
    radial-gradient(45% 100% at 5% 100%, rgba(0,174,239,.22), transparent 60%);
}
.process-one .sec-title .sub-title {
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  background: rgba(0,174,239,.28) !important;
  border: 1px solid rgba(255,159,77,.6) !important;
}
.process-one .sec-title h2 { color:#fff !important; }
.process-one .processing-block-one .inner-box { padding: 14px; }
.process-one .processing-block-one .icon-box {
  width: 128px !important; height:128px !important; line-height:128px !important;
  border-radius: 30px !important; margin: 0 auto 26px !important;
}
.process-one h4 { color:#fff !important; font-size:1.4rem !important; }
.process-one p { color: rgba(226,236,247,.72) !important; }
.process-one .processing-block-one .count-box {
  background:#fff !important; color: var(--ink) !important; border: 2px solid var(--brand);
}
.process-one .processing-block-one .shape { opacity:.18; }

/* --------------------------- Page-title hero --------------------- */
.page-title {
  position: relative; isolation:isolate;
  background-color: #eef3f8 !important;
  background-image:
    radial-gradient(55% 130% at 15% 0%, rgba(0,174,239,.14), transparent 60%),
    radial-gradient(50% 120% at 90% 100%, rgba(42,82,152,.12), transparent 62%) !important;
  padding: clamp(70px,9vw,108px) 0 !important; overflow:hidden;
}
.page-title .bg-layer { opacity:.06 !important; mix-blend-mode: luminosity; }
.page-title h1 {
  color: var(--ink) !important; font-size: clamp(2.1rem,4vw,3.2rem) !important; font-weight:800 !important;
  letter-spacing:-.03em;
}
.page-title .bread-crumb li, .page-title .bread-crumb li a { color: var(--muted) !important; }
.page-title .bread-crumb li.current { color: var(--brand-700) !important; }

/* --------------------- Long-form service detail ------------------ */
.service-details-content .text { max-width: 880px; margin: 0 auto; }
.service-details .text h2, .service-details .text h3 {
  font-size: clamp(1.7rem,3vw,2.3rem) !important; line-height:1.16 !important; margin-top: 40px !important;
  color: var(--ink) !important;
}
.service-details .text p { font-size: 1.06rem !important; line-height: 1.9 !important; color: var(--slate) !important; }
.service-details .text .list li {
  list-style:none; position:relative; padding-left: 34px !important; margin-bottom: 14px !important; color: var(--slate) !important;
}
.service-details .text .list li:not(:has(img))::before {
  content:""; position:absolute; left:0; top:5px; width:18px; height:18px; border-radius:6px;
  background: var(--grad); box-shadow: 0 6px 14px -4px rgba(0,174,239,.7);
}
.service-details .text .list li img { vertical-align:-3px; margin-right:8px; }
.content-img img { max-width:170px; display:block; margin: 0 0 20px; }

/* Retail Vue feature cards */
.news-one .inner-container > h2 {
  font-size: clamp(1.5rem,2.8vw,2.1rem) !important; text-align:center; max-width:920px; margin:0 auto 40px !important;
}
.news-block-one .inner-box {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius) !important; overflow:hidden;
  box-shadow: var(--shadow-sm) !important; height:100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.news-block-one .inner-box:hover { transform: translateY(-8px); box-shadow: 0 36px 72px -28px rgba(0,174,239,.45) !important; }
.news-block-one .image img { width:100%; aspect-ratio:4/3; object-fit:cover; transition: transform .6s ease; }
.news-block-one .inner-box:hover .image img { transform: scale(1.07); }
.news-block-one .lower-content { padding: 18px 22px 22px !important; }
.news-block-one h4 { color: var(--ink) !important; font-size:1.18rem !important; margin:0 !important; }

/* --------------------- Contact info cards ------------------------ */
.contactinfo-one { background:#fff !important; }
.contactinfo-one .bg-color { display:none !important; }
.info-block-one .inner-box {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important; padding: 40px 32px !important; text-align:center; height:100%;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.info-block-one .inner-box:hover {
  transform: translateY(-8px); border-color: transparent;
  box-shadow: 0 36px 72px -28px rgba(0,174,239,.45) !important;
}
.info-block-one .icon-box { margin: 0 auto 24px !important; }
.info-block-one h4 { color: var(--ink) !important; }
.info-block-one a { color: var(--muted) !important; }
.info-block-one a:hover { color: var(--brand-700) !important; }

/* ----------------------------- Forms ------------------------------ */
.contact-three { background: var(--surface) !important; }
.contact-three .content-box { padding-left: 0 !important; }
.form-inner, .contact-three .form-inner {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(24px,4vw,44px) !important; margin: 0 !important;
}
.form-inner input, .form-inner textarea, .form-inner select,
.contact-three input, .contact-three textarea, .contact-three select {
  width:100%; background: var(--surface) !important;
  border:1.5px solid var(--line) !important; border-radius: var(--radius-sm) !important;
  padding: 15px 18px !important; font-size: 16px !important; color: var(--ink) !important;
  box-shadow:none !important; margin-bottom: 18px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-inner input::placeholder, .form-inner textarea::placeholder,
.contact-three input::placeholder, .contact-three textarea::placeholder { color:#8a98aa !important; }
.form-inner input:focus, .form-inner textarea:focus, .form-inner select:focus,
.contact-three input:focus, .contact-three textarea:focus, .contact-three select:focus {
  border-color: var(--brand) !important; background:#fff !important; box-shadow: var(--ring) !important; outline:none !important;
}
.form-inner textarea { min-height: 150px; resize: vertical; }
.contact-three form h4 {
  color: var(--ink) !important; font-weight:700; font-size:1.2rem; margin: 6px 0 20px;
  padding-bottom: 12px; border-bottom: 2px solid var(--line);
}
.contact-three label { display:block; font-weight:600; color: var(--ink); font-size:13.5px; margin-bottom:6px; }
.g-recaptcha { margin: 8px 0 20px; }
.form-intro { color: var(--muted); max-width: 640px; margin-bottom: 4px; }
.contact-three .text h3 { color: var(--ink) !important; }

/* ----------------------------- CTA band --------------------------- */
.cta-band {
  position: relative; isolation:isolate; overflow:hidden; text-align:center;
  border-radius: clamp(24px,4vw,36px);
  padding: clamp(48px,7vw,88px) clamp(28px,5vw,72px);
  background-color: var(--ink-850);
  background-image:
    radial-gradient(60% 130% at 12% 0%, rgba(0,174,239,.35), transparent 60%),
    radial-gradient(55% 120% at 92% 100%, rgba(42,82,152,.32), transparent 62%);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--hairline-d);
}
.cta-band::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  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: 42px 42px; mask: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.cta-band h2 { color:#fff !important; font-size: clamp(2rem,3.8vw,3rem) !important; margin-bottom: 16px; }
.cta-band p { color: rgba(226,236,247,.82) !important; margin-bottom: 30px; font-size:1.1rem; }
.cta-band .theme-btn { background:#fff !important; color: var(--brand-700) !important; box-shadow: 0 18px 40px -12px rgba(0,0,0,.5) !important; }
.cta-band .theme-btn:hover { background:#fff !important; transform: translateY(-3px); }

/* ----------------------------- Footer ----------------------------- */
.footer-one {
  position: relative; background-color: var(--ink-900) !important;
  background-image:
    radial-gradient(50% 120% at 10% 0%, rgba(0,174,239,.18), transparent 55%),
    radial-gradient(45% 100% at 95% 100%, rgba(42,82,152,.16), transparent 58%);
}
.footer-one::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--grad);
}
.footer-one, .footer-one p, .footer-one li, .footer-one a { color: rgba(226,236,247,.72) !important; }
.footer-one .widget-title h4 { color:#fff !important; font-weight:700; margin-bottom:18px; }
.footer-one .links-list a, .footer-one .info-list a { transition: color .2s ease, padding-left .2s ease; }
.footer-one .links-list a:hover { color: var(--brand) !important; padding-left:6px; }
.footer-one .info-list a:hover { color: var(--brand) !important; }
.footer-one .footer-logo img { max-height: 50px; width:auto; }
.footer-bottom { border-top: 1px solid var(--hairline-d); background: rgba(0,0,0,.28) !important; }
.footer-bottom .copyright p, .footer-bottom .footer-nav a { color: rgba(226,236,247,.62) !important; }
.footer-bottom .copyright span { opacity:.45; font-size:12px; }
.footer-bottom .footer-nav a:hover { color: var(--brand) !important; }

/* --------------------------- Scroll-to-top ------------------------ */
.scroll-to-top, .scroll-to-top .scroll-top-inner { color: var(--brand) !important; }

/* ----------------------------- Responsive ------------------------- */
@media (max-width: 991px) {
  .header-lower .outer-box { min-height: 66px; }
  .banner-one { padding: 64px 0 72px !important; }
  .banner-one .image-box { margin-top: 40px; }
  .nav-cta { padding: 10px 18px; font-size: 14px; }
}
@media (max-width: 767px) {
  body, .boxed_wrapper { font-size: 16px; }
  .banner-one .content-box h2 { font-size: clamp(2.3rem, 9vw, 3rem) !important; }
  .banner-one .content-box p { font-size: 1.05rem !important; }
  .hero-cta { gap: 12px; }
  .hero-cta .theme-btn { width: 100%; }
  .service-block-12 .lower-content { padding: 26px !important; }
  .page-title { padding: 70px 0 !important; }
  .main-menu .navigation > li > a,
  .footer-one a, .info-list a { min-height: 44px; display:inline-flex; align-items:center; }
}

/* =====================================================================
   THEME: LIGHT — logo palette (blue / grey / black)
   Re-skins the whole site to light mode using the Accrue Mobilitics logo
   colours: blue #00aeef, grey #808285, near-black ink. Content untouched.
   ===================================================================== */
:root {
  /* Brand accent (from logo blue) */
  --brand:      #00aeef;
  --brand-2:    #2a5298;                 /* deep blue partner */
  --brand-600:  #0094cf;
  --brand-700:  #0379a6;                 /* darker blue for accent TEXT on light */
  --grad:       linear-gradient(120deg, #00aeef 0%, #2a5298 100%);
  --grad-hover: linear-gradient(120deg, #2a5298 0%, #00aeef 100%);
  --grad-soft:  linear-gradient(120deg, rgba(0,174,239,.12), rgba(42,82,152,.10));
  --grad-text:  linear-gradient(120deg, #00aeef, #0379a6 58%, #2a5298);
  --grad-deep:  linear-gradient(140deg, #0b1f3a 0%, #1e3c72 55%, #2a5298 130%);

  /* Dark-on-light text */
  --ink:      #14181c;                    /* near-black headings */
  --slate:    #46505c;                    /* body text */
  --muted:    #808285;                    /* logo grey — muted text */
  --line:     rgba(16,24,32,.12);
  --surface:  #ffffff;
  --surface-2:#eef2f6;
  --ink-900:  #0f1318;                    /* footer / preloader near-black */
  --ink-850:  #1b2430;                    /* dark button fill */

  /* Type system */
  --font-display: 'Zoho Puvi', 'Fraunces', Georgia, serif;
  --font-head:    'Zoho Puvi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Zoho Puvi', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Canvas + ambient light wash */
body, body.boxed_wrapper, .boxed_wrapper { background: #f6f8fa !important; color: var(--slate); }
.boxed_wrapper {
  background-image:
    radial-gradient(55% 45% at 100% 0%, rgba(0,174,239,.07), transparent 60%),
    radial-gradient(45% 38% at 0% 16%, rgba(42,82,152,.05), transparent 60%) !important;
  background-attachment: fixed;
}

/* Editorial serif for the big headings; grotesk for the rest */
.boxed_wrapper h1, .boxed_wrapper h2,
.banner-one .content-box h2, .page-title h1,
.sec-title h2, .sec-title-nine h2, .cta-band h2 {
  font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -0.015em !important;
}
.boxed_wrapper h3, .boxed_wrapper h4, .boxed_wrapper h5, .boxed_wrapper h6 { font-family: var(--font-head) !important; }

/* Header -> light glass */
.main-header, .header-lower {
  background: rgba(255,255,255,.72) !important; border-bottom: 1px solid rgba(16,24,32,.08);
}
body.is-scrolled .header-lower { background: rgba(255,255,255,.92) !important; box-shadow: 0 12px 30px -16px rgba(16,24,32,.18); }
.main-menu .navigation > li > ul { background: #ffffff !important; border-color: rgba(16,24,32,.1); box-shadow: 0 26px 60px -30px rgba(16,24,32,.4); }
.main-menu .navigation > li > ul > li > a { color: var(--slate) !important; }
.main-menu .navigation > li > ul > li > a:hover { background: rgba(0,174,239,.10) !important; color: var(--brand-700) !important; }

/* CSS wordmark logo (replaces the raster logo) */
.brand-mark { display:inline-flex; flex-direction:column; line-height:1; text-decoration:none; }
.brand-mark__name {
  font-family: var(--font-display); font-weight:700; font-size:30px; letter-spacing:.01em;
  background: var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.brand-mark__sub {
  font-family: var(--font-head); font-size:8.5px; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; color: var(--muted); margin-top:5px;
}
body.is-scrolled .brand-mark__name { font-size:26px; }

/* Content cards -> white with hairline border + soft shadow */
.service-block-12 .inner-box,
.info-block-one .inner-box,
.news-block-one .inner-box,
.form-inner,
.arm-orbit__nodes li {
  background: #ffffff !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  box-shadow: 0 18px 48px -28px rgba(16,24,32,.30) !important;
}
.contactinfo-one, .contact-three { background: transparent !important; }
.service-block-12 .inner-box:hover,
.info-block-one .inner-box:hover,
.news-block-one .inner-box:hover {
  box-shadow: 0 30px 64px -30px rgba(0,174,239,.40), 0 0 0 1px rgba(0,174,239,.3) !important;
}
.service-block-12 h3 a, .info-block-one h4, .news-block-one h4 { color: var(--ink) !important; }
.service-block-12 .inner-box p, .info-block-one .inner-box p { color: var(--slate) !important; }

/* Orbit core stays a glowing light disc so the mark reads on it */
.arm-orbit__core {
  background: #eef8fe !important;
  box-shadow: 0 30px 80px -20px rgba(0,174,239,.55), 0 0 0 1px rgba(255,255,255,.15) !important;
}

/* Forms on light */
.form-inner input, .form-inner textarea, .form-inner select,
.contact-three input, .contact-three textarea, .contact-three select {
  background: #f3f6f9 !important; color: var(--ink) !important;
  border: 1.5px solid rgba(16,24,32,.14) !important;
}
.form-inner input::placeholder, .contact-three input::placeholder,
.form-inner textarea::placeholder, .contact-three textarea::placeholder { color:#8a939e !important; }
.form-inner input:focus, .contact-three input:focus,
.form-inner textarea:focus, .contact-three select:focus {
  background: #ffffff !important; border-color: var(--brand) !important;
}
.contact-three form h4, .contact-three label, .contact-three .text h3 { color: var(--ink) !important; }
.contact-three form h4 { border-bottom-color: rgba(16,24,32,.12) !important; }

/* CTA band button keeps dark text on its light fill */
.cta-band .theme-btn { color: #14181c !important; }

/* Footer -> near-black (logo black) with light text */
.footer-one { background-color: #14181c !important; }

/* Long-form (legal / product detail) text on dark */
.service-details .text h2, .service-details .text h3 { color: var(--ink) !important; }
.service-details .text p, .service-details .text li { color: var(--slate) !important; }

/* =====================================================================
   Legacy accent neutralizer — retarget the old template's magenta/red
   gradient-text fills (.g_color*) and the scroll widget to Quanto orange.
   ===================================================================== */
.g_color, .g_color_2, .g_color_3 {
  background: var(--grad) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.scroll-to-top, .scroll-to-top .scroll-bar-text { color: var(--brand) !important; }
.scroll-to-top .scroll-bar .bar-inner { background-color: var(--brand) !important; }
.scroll-to-top .scroll-bar-text {
  background: none !important; -webkit-text-fill-color: var(--brand) !important; color: var(--brand) !important;
}

/* =====================================================================
   Brand logo image (replaces the CSS wordmark) — header, mobile, footer
   ===================================================================== */
.brand-logo { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo img { display: block; height: 44px; width: auto; }
body.is-scrolled .header-lower .brand-logo img { height: 38px; }
.nav-logo .brand-logo img { height: 42px; }
.footer-one .footer-logo .brand-logo img { height: 48px; }
@media (max-width: 767px) { .brand-logo img { height: 38px; } }

/* =====================================================================
   Preloader — was magenta/red; now the brand warm-dark + orange palette
   ===================================================================== */
.handle-preloader {
  background:
    radial-gradient(60% 80% at 50% 42%, rgba(0,174,239,.12), transparent 70%),
    linear-gradient(140deg, #ffffff 0%, #f4f7fa 55%, #eef3f8 130%) !important;
}
.handle-preloader .animation-preloader .spinner {
  border-color: rgba(16,24,32,.14) !important;
  border-top-color: #00aeef !important;   /* blue spinning arc */
}
.handle-preloader .animation-preloader .txt-loading .letters-loading {
  -webkit-text-stroke-color: rgba(16,24,32,.30) !important;
}
.handle-preloader .animation-preloader .txt-loading .letters-loading:before {
  color: #00aeef !important;               /* letters fill in blue */
}
.preloader-close { color: #00aeef !important; }