/* =========================================================
   Algomintt Infosoft — Corporate Theme
   Brand: linear-gradient(90deg, #5444D1 0%, #40388B 100%)
   Type:  'DM Sans' (weights 400-800)
   All content sections on white; separation via hairlines.
   ========================================================= */

:root{
  --brand:#5444D1;
  --brand-deep:#40388B;
  --grad:linear-gradient(90deg,#5444D1 0%,#40388B 100%);
  --grad-diag:linear-gradient(135deg,#5444D1 0%,#40388B 100%);
  --grad-rev:linear-gradient(90deg,#40388B 0%,#5444D1 100%);

  --brand-50:#F3F2FD;
  --brand-100:#E7E4FA;
  --brand-200:#C7C1F2;
  --brand-300:#A096E7;
  --brand-400:#7566DC;
  --brand-500:#5444D1;
  --brand-600:#4739AF;
  --brand-700:#40388B;
  --brand-800:#2E2864;
  --brand-900:#1A1633;

  --white:#ffffff;
  --ink:#1A1633;
  --text-mid:#4E4A66;
  --text-dim:#5F5B77;
  --border:rgba(84,68,209,0.18);
  --border-soft:rgba(84,68,209,0.11);
  --bg:#ffffff;
  --bg-alt:#ffffff;

  /* --- SPACING: 4px system -------------------------------------
     1-3px are hairlines and optical nudges; 6px is the half step.
     Everything else is a multiple of 4. Use these rather than
     inventing new values, so rhythm stays consistent site-wide. */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px;  --space-6:24px;  --space-7:28px;  --space-8:32px;
  --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;

  /* --- ELEVATION -----------------------------------------------
     Three families. `standard` for cards on light surfaces,
     `deep` for panels and mockups sitting on dark gradients (the
     stronger alpha is deliberate, not an accident), `brand` for
     accent and CTA elements that should glow rather than drop. */
  --shadow-xs:0 1px 2px rgba(26,22,51,.05);
  --shadow-sm:0 2px 6px -2px rgba(26,22,51,.10);
  --shadow-md:0 6px 14px -6px rgba(26,22,51,.16);
  --shadow-lg:0 12px 28px -12px rgba(26,22,51,.20);
  --shadow-xl:0 24px 48px -20px rgba(26,22,51,.26);
  --shadow-2xl:0 40px 80px -32px rgba(26,22,51,.32);

  --shadow-deep-md:0 8px 18px -8px rgba(26,22,51,.50);
  --shadow-deep-lg:0 16px 32px -16px rgba(26,22,51,.55);
  --shadow-deep-xl:0 28px 60px -28px rgba(26,22,51,.60);
  --shadow-deep-2xl:0 40px 88px -32px rgba(26,22,51,.65);

  --shadow-brand-sm:0 4px 12px -6px rgba(84,68,209,.60);
  --shadow-brand-md:0 8px 20px -10px rgba(84,68,209,.70);
  --shadow-brand-lg:0 14px 28px -12px rgba(84,68,209,.75);
  --shadow-brand-xl:0 24px 44px -22px rgba(84,68,209,.60);

  --shadow-card:0 1px 2px rgba(26,22,51,.05), 0 10px 26px -16px rgba(64,56,139,.28);
  --shadow-card-hover:0 2px 4px rgba(26,22,51,.06), 0 22px 48px -22px rgba(84,68,209,.42);
  --ring-brand:0 0 0 3px rgba(84,68,209,.22);
  --shadow-float:0 38px 82px -26px rgba(26,22,51,.50), 0 2px 8px rgba(26,22,51,.07);

  /* directional, for fixed elements that cast off an edge rather
     than drop downward (slide-in nav panel, pinned social rail) */
  --shadow-edge-left:-20px 0 50px -24px rgba(26,22,51,.40);
  --shadow-rail:-6px 8px 26px -14px rgba(26,22,51,.55);

  /* --- RADIUS: 4 / 8 / 12 / 16 / 20 / pill --------------------- */
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* Every in-page anchor target has to clear the fixed header, or landing on
   one hides its first 60-75px behind the bar. */
section[id],
.faq-block[id]{ scroll-margin-top:96px; }
body{
  margin:0;
  font-family:'DM Sans', system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--text-mid);
  overflow-x:hidden;
  font-size:15px;
  line-height:1.56;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{
  font-family:inherit;
  font-weight:700;
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.2;
  letter-spacing:-0.015em;
}
p{ margin:0 0 16px; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
.container{ width:100%; max-width:1240px; margin:0 auto; padding:0 24px; }

::selection{ background:var(--brand); color:var(--white); }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--brand-50); }
::-webkit-scrollbar-thumb{ background:var(--brand-300); }
::-webkit-scrollbar-thumb:hover{ background:var(--brand); }

/* =============== UTIL =============== */
.text-gradient{
  background:linear-gradient(90deg,#ffffff 0%,#C7C1F2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Same clipped-gradient trick, but with the DARK brand ramp, for use on
   light surfaces. The plain .text-gradient above runs white -> pale blue
   and is only legible on the dark hero. */
.text-gradient-ink{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.card-glass{
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}

/* section label — gradient rule + uppercase */
.section-tag{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:16px;
}
.section-tag::before{
  content:''; width:28px; height:3px; border-radius:2px; background:var(--grad); flex-shrink:0;
}
.section-tag.center{ display:flex; justify-content:center; text-align:center; }
.section-tag.center::after{
  content:''; width:28px; height:3px; border-radius:2px; background:var(--grad-rev); flex-shrink:0;
}

.section-head{ max-width:740px; margin:0 auto 40px; }
.section-head .section-title.center,
.section-sub.center{ text-align:center; display:block; }
.section-sub.center{ margin-left:auto; margin-right:auto; }
.section-title{ font-size:clamp(25px,2.9vw,37px); }
.section-sub{ color:var(--text-mid); font-size:15px; max-width:650px; }

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  border-radius:var(--radius-sm);
  font-weight:700;
  font-size:14px;
  border:1px solid transparent;
  cursor:pointer;
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
  font-family:inherit;
}
.btn-lg{ padding:12px 24px; font-size:15px; }
.btn-block{ width:100%; justify-content:center; }
.btn-glow{
  background:var(--grad);
  color:var(--white);
  box-shadow:var(--shadow-brand-md);
  /* contains the -1 overlay below so it can't slip behind an ancestor */
  isolation:isolate;
}
/* z-index:-1 keeps the hover wash above the background but UNDER the label —
   a bare text node can't be raised the way `> *` raises the icon */
.btn-glow::after{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--grad-rev);
  opacity:0; transition:opacity .35s var(--ease);
}
.btn-glow > *{ position:relative; z-index:1; }
.btn-glow:hover::after{ opacity:1; }
.btn-glow:hover{ transform:translateY(-2px); box-shadow:var(--shadow-brand-lg); }
.btn-outline{
  border-color:var(--border);
  color:var(--ink);
  background:var(--white);
}
.btn-outline:hover{ background:var(--brand-50); border-color:var(--brand-300); color:var(--brand); transform:translateY(-2px); }
.btn-light-glow{ background:var(--white); color:var(--brand-700); }
.btn-light-glow:hover{ transform:translateY(-2px); box-shadow:var(--shadow-deep-lg); }
.btn-outline-light{ border-color:rgba(255,255,255,.45); color:var(--white); background:transparent; }
.btn-outline-light:hover{ background:rgba(255,255,255,.14); border-color:var(--white); transform:translateY(-2px); }

/* reveal on scroll */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }

/* =============== PRELOADER =============== */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.preloader.loaded{ opacity:0; visibility:hidden; }
.preloader-logo{ font-size:28px; font-weight:800; color:var(--ink); letter-spacing:-0.02em; }
.preloader-logo span{ color:var(--brand); }
.preloader-bar{ width:180px; height:3px; border-radius:2px; background:var(--brand-100); overflow:hidden; }
.preloader-bar span{
  display:block; height:100%; width:40%; background:var(--grad);
  animation:barSlide 1.1s ease-in-out infinite;
}
@keyframes barSlide{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(350%); }
}

/* =============== FIXED EDGE RAILS ===============
   Contact actions sit on the left, social on the right, so the two jobs
   are not competing in one stack. Both share the cell and tooltip
   styling; only the edge they attach to and the popup direction differ. */
.social-fixed,
.contact-fixed{
  position:fixed; top:50%; transform:translateY(-50%);
  z-index:600;
  display:flex; flex-direction:column;
  background:var(--grad-diag);
  box-shadow:var(--shadow-rail);
}
.social-fixed{ right:0; border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.contact-fixed{ left:0;  border-radius:0 var(--radius-sm) var(--radius-sm) 0; }

.social-fixed a,
.contact-fixed a{
  position:relative;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:background .25s ease;
}
.social-fixed a:last-child,
.contact-fixed a:last-child{ border-bottom:none; }
.social-fixed a:hover,
.contact-fixed a:hover{ background:rgba(255,255,255,.2); }
.social-fixed a.rail-primary,
.contact-fixed a.rail-primary{ font-size:15px; }

.social-fixed a:first-child{ border-radius:var(--radius-sm) 0 0 0; }
.social-fixed a:last-child{ border-radius:0 0 0 var(--radius-sm); }
.contact-fixed a:first-child{ border-radius:0 var(--radius-sm) 0 0; }
.contact-fixed a:last-child{ border-radius:0 0 var(--radius-sm) 0; }

/* hover popup label — shared appearance */
.social-fixed a[data-label]::after,
.contact-fixed a[data-label]::after{
  content:attr(data-label);
  position:absolute; top:50%;
  padding:12px 16px;
  background:var(--white);
  color:var(--ink);
  font-size:13px; font-weight:700; letter-spacing:.01em;
  white-space:nowrap;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-deep-lg);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s var(--ease);
}
.social-fixed a[data-label]::before,
.contact-fixed a[data-label]::before{
  content:''; position:absolute; top:50%;
  width:11px; height:11px;
  background:var(--white);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s var(--ease);
}

/* right rail: popup opens leftwards */
.social-fixed a[data-label]::after{
  right:100%; margin-right:16px;
  transform:translate(10px,-50%) scale(.96); transform-origin:right center;
}
.social-fixed a[data-label]::before{
  right:100%; margin-right:8px;
  transform:translate(10px,-50%) rotate(45deg);
  border-right:1px solid var(--border-soft);
  border-top:1px solid var(--border-soft);
}
.social-fixed a[data-label]:hover::after{ opacity:1; visibility:visible; transform:translate(0,-50%) scale(1); }
.social-fixed a[data-label]:hover::before{ opacity:1; visibility:visible; transform:translate(0,-50%) rotate(45deg); }

/* left rail: popup opens rightwards, arrow mirrored */
.contact-fixed a[data-label]::after{
  left:100%; margin-left:16px;
  transform:translate(-10px,-50%) scale(.96); transform-origin:left center;
}
.contact-fixed a[data-label]::before{
  left:100%; margin-left:8px;
  transform:translate(-10px,-50%) rotate(45deg);
  border-left:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}
.contact-fixed a[data-label]:hover::after{ opacity:1; visibility:visible; transform:translate(0,-50%) scale(1); }
.contact-fixed a[data-label]:hover::before{ opacity:1; visibility:visible; transform:translate(0,-50%) rotate(45deg); }

/* the two contact actions get the brand-filled tooltip */
.social-fixed a.rail-primary[data-label]::after,
.contact-fixed a.rail-primary[data-label]::after{
  background:var(--grad); color:var(--white); border-color:transparent;
}
.social-fixed a.rail-primary[data-label]::before,
.contact-fixed a.rail-primary[data-label]::before{
  background:#4739AF; border-color:transparent;
}


/* =============== HEADER =============== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:16px 0;
  background:var(--white);
  border-bottom:1px solid var(--border-soft);
  transition:padding .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled{
  padding:12px 0;
  box-shadow:var(--shadow-deep-md);
}
.header-progress{
  position:absolute; top:0; left:0; height:3px; width:0;
  background:var(--grad);
  transition:width .1s linear;
  z-index:2;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:42px; height:42px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-diag);
  color:var(--white); font-size:16px;
  box-shadow:var(--shadow-brand-md);
  transition:transform .35s var(--ease);
}
.brand:hover .brand-mark{ transform:translateY(-2px) scale(1.04); }
.brand-text{ font-weight:800; font-size:18px; color:var(--ink); letter-spacing:-0.02em; line-height:1.1; }
.brand-text span{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-text small{
  display:block; font-weight:600; font-size:11px; letter-spacing:.24em;
  color:var(--text-dim); text-transform:uppercase; margin-top:1px;
}

.main-nav ul{ display:flex; align-items:center; gap:6px; }
.nav-link{
  position:relative;
  display:inline-block;
  padding:6px 12px;
  border-radius:4px;
  font-size:14px; font-weight:600;
  color:var(--text-mid);
  transition:color .25s ease, background .25s ease;
}
.nav-link:hover{ color:var(--brand); background:var(--brand-50); }
.nav-link.active-link{
  color:var(--white); font-weight:700;
  background:var(--grad);
  box-shadow:var(--shadow-brand-sm);
}
/* compact header CTA */
.header-actions .btn-glow{ padding:8px 16px; font-size:13px; }

/* =============== SERVICES MEGA DROPDOWN =============== */
.has-dropdown{ position:relative; }
.has-dropdown > .nav-link{ display:inline-flex; align-items:center; gap:6px; }
.has-dropdown > .nav-link .bi{ font-size:11px; transition:transform .3s var(--ease); }
.has-dropdown:hover > .nav-link .bi{ transform:rotate(180deg); }

.dropdown{
  position:absolute; top:calc(100% + 14px); left:50%;
  width:min(740px, calc(100vw - 48px)); padding:16px 16px 16px;
  background:linear-gradient(180deg,var(--white) 0%,var(--brand-50) 100%);
  border:1px solid var(--border-soft);
  border-radius:20px;
  box-shadow:var(--shadow-float);
  opacity:0; visibility:hidden;
  transform:translate(-50%,-10px) scale(.985);
  transform-origin:top center;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
  z-index:30;
  overflow:hidden;
}
/* gradient cap + invisible hover bridge so the menu doesn't flicker */
.dropdown::after{
  content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad);
}
.dropdown::before{ content:''; position:absolute; top:-18px; left:0; right:0; height:18px; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translate(-50%,0) scale(1);
}

.dropdown-head{
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim); padding:2px 6px 12px;
}
.dropdown-head i{ color:var(--brand); font-size:11px; }
/* hairline runs from the label to the panel edge */
.dropdown-head::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,var(--border) 0%,transparent 100%);
}

.main-nav .dropdown-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch; }
.main-nav .dropdown-grid li{ display:block; }
/* fifth service sits on its own full-width row rather than orphaning a column */
.main-nav .dropdown-grid li.dd-wide{ grid-column:1 / -1; }
.main-nav .dropdown-grid a{
  position:relative;
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 12px; border-radius:12px;
  background:var(--white);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-xs);
  transition:background .25s var(--ease), border-color .25s var(--ease),
             transform .25s var(--ease), box-shadow .25s var(--ease);
}
.main-nav .dropdown-grid a:hover{
  border-color:var(--brand-300);
  transform:translateY(-2px);
  box-shadow:var(--shadow-brand-lg);
}
.dd-ico{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand-100) 0%,var(--brand-50) 100%);
  border:1px solid var(--brand-200);
  color:var(--brand); font-size:15px;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.main-nav .dropdown-grid a:hover .dd-ico{
  background:var(--grad); color:var(--white); border-color:transparent;
  box-shadow:var(--shadow-brand-md);
}

/* the fifth, full-width service reads as the featured row */
.main-nav .dropdown-grid li.dd-wide a{
  background:linear-gradient(115deg,var(--brand-100) 0%,var(--white) 62%);
  border-color:var(--brand-200);
}
.main-nav .dropdown-grid li.dd-wide a:hover{ border-color:var(--brand-400); }
.main-nav .dropdown-grid li.dd-wide .dd-ico{
  background:var(--grad); color:var(--white); border-color:transparent;
}
.dd-txt{ min-width:0; padding-right:16px; }
.dd-txt strong{
  display:block; font-size:14px; font-weight:700; color:var(--ink);
  line-height:1.3; margin-bottom:4px;
}
/* readable sentence, not a squashed abbreviation list */
.dd-txt small{
  display:block; font-size:12px; color:var(--text-mid);
  line-height:1.5; font-weight:400;
}
.dd-arrow{
  position:absolute; right:13px; top:18px;
  font-size:11px; color:var(--brand);
  opacity:0; transform:translateX(-5px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.main-nav .dropdown-grid a:hover .dd-arrow{ opacity:1; transform:translateX(0); }

.dropdown-foot{
  display:flex; align-items:center; gap:12px;
  margin-top:12px; padding:12px 12px;
  border-radius:12px;
  background:linear-gradient(120deg,var(--brand-800),var(--brand-700) 60%,var(--brand));
  color:var(--white);
  transition:transform .25s var(--ease);
}
.dropdown-foot:hover{ transform:translateY(-2px); }
.dd-foot-ico{
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); color:var(--brand-200); font-size:14px;
}
.dropdown-foot strong{ display:block; font-size:12px; color:var(--white); line-height:1.3; }
.dropdown-foot small{ display:block; font-size:11px; color:rgba(255,255,255,.7); line-height:1.4; margin-top:1px; }
.dropdown-foot > .bi-arrow-right{ margin-left:auto; font-size:12px; color:var(--brand-200); flex-shrink:0; }

.header-actions{ display:flex; align-items:center; gap:12px; }

.burger{
  display:none; flex-direction:column; gap:6px;
  width:40px; height:40px; border-radius:var(--radius-sm);
  background:var(--brand-50); border:1px solid var(--border);
  align-items:center; justify-content:center; cursor:pointer;
}
.burger span{ width:17px; height:2px; border-radius:2px; background:var(--brand); transition:transform .3s ease, opacity .3s ease; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =============== HERO =============== */
.hero{
  position:relative;
  /* no 100vh: it forced a full-viewport hero and made the padding values moot */
  display:flex; align-items:center;
  padding:112px 0 56px;
  overflow:hidden;
  background:linear-gradient(120deg,#2E2864 0%,#40388B 45%,#5444D1 100%);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.blob{
  position:absolute; border-radius:50%;
  filter:blur(100px);
  opacity:.5;
  animation:blobFloat 20s ease-in-out infinite;
}
.blob-1{ width:560px; height:560px; top:-180px; right:-100px; background:radial-gradient(circle,#7566DC,transparent 70%); }
.blob-2{ width:440px; height:440px; bottom:-170px; left:-90px; background:radial-gradient(circle,#40388B,transparent 70%); animation-delay:-10s; }
@keyframes blobFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(24px,-30px) scale(1.06); }
}

.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:13px; font-weight:500; letter-spacing:0.6px; text-transform:uppercase;
  color:rgba(255,255,255,.88);
  margin-bottom:16px;
}
.dot-pulse{ width:8px; height:8px; border-radius:50%; background:var(--white); position:relative; flex-shrink:0; }
.dot-pulse::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--white);
  animation:pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(3); opacity:0; }
}

.hero-title{ font-size:clamp(30px,3.4vw,33px); margin-bottom:20px; color:var(--white); letter-spacing:-0.035em; line-height:1.18; }
.hero-sub{ font-size:14px; max-width:530px; color:rgba(255,255,255,.82); margin-bottom:4px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 0; }
/* low-weight entry point for overseas visitors, no extra button */
.hero-note{
  display:flex; align-items:center; gap:8px;
  margin:20px 0 0; font-size:14px;
  color:rgba(255,255,255,.72);
}
.hero-note i{ color:var(--brand-200); font-size:14px; flex:none; }
.hero-note strong{ color:var(--white); font-weight:700; }
.hero-note a{
  color:var(--white); font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:1px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.hero-note a:hover{ color:var(--brand-200); border-bottom-color:var(--brand-200); }
.hero-cta .btn{ padding:12px 16px; font-size:13px; gap:8px; }
.hero-cta .btn i{ font-size:13px; }

.stat-num,.stat-suffix{ font-weight:800; letter-spacing:-0.03em; }

/* hero lead form */
.hero-visual{ position:relative; }
.form-glow-ring{ display:none; }
.hero-form-wrap{
  position:relative; z-index:2;
  /* 75% of the column and pushed to the outer edge, so the card reads as
     a compact panel anchored right rather than a slab filling the half */
  width:75%; margin-left:auto;
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-deep-xl);
  overflow:hidden;
}

/* browser-window chrome */
.browser-bar{
  display:flex; align-items:center; gap:12px;
  padding:8px 12px;
  background:#F3F2FD;
  border-bottom:1px solid var(--border-soft);
}
.browser-dots{ display:flex; gap:8px; flex-shrink:0; }
.browser-dots i{ width:11px; height:11px; border-radius:50%; display:block; }
.browser-dots i:nth-child(1){ background:#ff5f57; }
.browser-dots i:nth-child(2){ background:#febc2e; }
.browser-dots i:nth-child(3){ background:#28c840; }
.browser-url{
  flex:1;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:999px;
  font-size:12px; font-weight:700; color:var(--ink);
  letter-spacing:.01em;
}
.browser-url i{ color:#28a745; font-size:11px; }

.form-body{ position:relative; display:flex; flex-direction:column; padding:12px 16px 16px; }

.form-progress-bar{ height:4px; border-radius:2px; background:var(--brand-100); overflow:hidden; margin-bottom:8px; }
.form-progress-fill{
  height:100%; width:14.28%; background:var(--grad);
  transition:width .45s var(--ease);
}
.form-progress-label{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; font-weight:700; color:var(--text-dim); letter-spacing:.15em; text-transform:uppercase;
  margin-bottom:20px;
  min-height:24px; /* fixed so the greeting appearing can't resize the card */
}
.prog-greet{ color:var(--brand); text-transform:none; letter-spacing:0; font-weight:700; font-size:13px; }

.form-step{ display:none; }
.form-step.active{ display:block; animation:fadeStep .45s var(--ease); }
@keyframes fadeStep{
  from{ opacity:0; transform:translateX(12px); }
  to{ opacity:1; transform:translateX(0); }
}
.form-question{
  display:block; font-size:18px; font-weight:700; color:var(--ink);
  margin-bottom:12px; line-height:1.35; letter-spacing:-0.015em;
}
.optional-tag{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--text-dim); border:1px solid var(--border);
  padding:2px 8px; border-radius:4px; vertical-align:middle;
}
.form-step input,.form-step select,.form-step textarea{ margin-bottom:12px; }
.form-btn-row{ display:flex; gap:12px; margin-top:2px; }
.form-btn-row .btn-outline{ flex:0 0 auto; order:2; }
.form-btn-row .btn-glow{ flex:1; justify-content:center; order:1; }

/* every state locked to the tallest step, measured in JS */
#heroLeadForm{ min-height:var(--step-min-h,auto); }
.form-body.measuring .form-step.active,
.form-body.measuring .form-success{ animation:none !important; }

/* thank-you screen — fills the same box as the form */
.form-success{
  min-height:var(--step-min-h,auto);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  animation:fadeStep .5s var(--ease);
}
.form-success[hidden]{ display:none; }
.success-check{
  width:54px; height:54px; border-radius:50%; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad); color:var(--white); font-size:22px;
  box-shadow:0 0 0 8px var(--brand-50);
  animation:successPop .5s var(--ease) both;
}
@keyframes successPop{
  from{ transform:scale(.5); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}
.form-success h3{ font-size:18px; margin-bottom:6px; }
.form-success > p{ font-size:14px; line-height:1.5; color:var(--text-mid); margin-bottom:12px; max-width:330px; }
.success-meta{
  display:flex; flex-direction:column; gap:6px; margin-bottom:12px;
  padding:12px 12px; border-radius:var(--radius-sm);
  background:var(--brand-50); border:1px solid var(--border-soft);
  width:100%;
}
.success-meta span{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12px; font-weight:600; color:var(--ink);
}
.success-meta i{ color:var(--brand); font-size:12px; }
#successReset{ padding:8px 16px; font-size:13px; }

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border-radius:16px; border:2px solid rgba(255,255,255,.4);
  display:flex; justify-content:center; padding-top:8px; z-index:2;
}
.scroll-cue span{ width:3px; height:8px; border-radius:4px; background:var(--white); animation:scrollCue 1.8s ease-in-out infinite; }
@keyframes scrollCue{
  0%{ transform:translateY(0); opacity:1; }
  100%{ transform:translateY(14px); opacity:0; }
}

/* =============== MARQUEE =============== */
.marquee-strip{
  position:relative;
  background:linear-gradient(90deg,var(--brand-100) 0%,var(--white) 24%,var(--white) 76%,var(--brand-100) 100%);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  overflow:hidden;
  padding:16px 0;
  /* soften both ends so items enter and leave instead of being clipped */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.marquee-track{
  display:flex; align-items:center; gap:12px;
  width:max-content;
  animation:marqueeScroll 48s linear infinite;
}
.marquee-strip:hover .marquee-track{ animation-play-state:paused; }

/* every item is a full service-plus-region phrase, so they share one treatment */
.marquee-track .mq-item{
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:999px;
  white-space:nowrap;
  font-size:13px; font-weight:700; letter-spacing:.015em;
  color:var(--brand-700);
  background:linear-gradient(180deg,var(--white) 0%,var(--brand-50) 100%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-deep-md);
}
.marquee-track .mq-item i{
  font-size:13px; line-height:1;
  color:var(--brand); flex:none;
}
/* chips are links; the strip pauses on hover so they stay clickable */
.marquee-track a.mq-item{
  text-decoration:none;
  transition:background .28s var(--ease), border-color .28s var(--ease),
             color .28s var(--ease), box-shadow .28s var(--ease);
}
.marquee-track a.mq-item:hover{
  background:var(--grad);
  border-color:transparent;
  color:var(--white);
  box-shadow:var(--shadow-brand-lg);
}
.marquee-track a.mq-item:hover i{ color:var(--brand-200); }
@keyframes marqueeScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* =============== SECTION DIVIDER =============== */
.section-divider{
  width:100%; max-width:1240px; margin:0 auto; padding:0 24px;
}
.section-divider::before{
  content:''; display:block; height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}

/* =============== SECTION ACCENTS (purple family) ===============
   Each section themes itself via --accent / --accent-grad, so shared
   components (icons, tags, rules) pick up a different shade per section. */
.why-choose  { --accent:#5444D1; --accent-soft:#F3F2FD; --accent-grad:linear-gradient(90deg,#5444D1,#40388B); }
.services    { --accent:#40388B; --accent-soft:#EEECFA; --accent-grad:linear-gradient(90deg,#40388B,#5444D1); }
.products    { --accent:#7E4FD0; --accent-soft:#F6F5FE; --accent-grad:linear-gradient(90deg,#7E4FD0,#4739AF); }
.process     { --accent:#C7C1F2; --accent-grad:linear-gradient(90deg,#C7C1F2,#A096E7); }
.testimonials{ --accent:#4739AF; --accent-soft:#F2F1FC; --accent-grad:linear-gradient(90deg,#4739AF,#7566DC); }
.contact     { --accent:#5444D1; --accent-soft:#F3F2FD; --accent-grad:linear-gradient(90deg,#5444D1,#40388B); }

.section-tag{ color:var(--accent,var(--brand)); }
.section-tag::before,.section-tag.center::after{ background:var(--accent-grad,var(--grad)); }

/* =============== WHY CHOOSE US (split feature list) =============== */
.why-choose{ padding:48px 0; background:var(--white); }
.why-split{ display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:start; }

.why-intro{ position:sticky; top:104px; }
.why-intro > p{ font-size:14px; color:var(--text-mid); margin-bottom:20px; }
.why-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  padding:24px 0; margin-bottom:20px;
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
}
.why-stat .stat-num,.why-stat .stat-suffix{
  font-size:28px; line-height:1;
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.why-stat p{
  margin:8px 0 0; font-size:11px; font-weight:600; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.12em; line-height:1.45;
}

/* =============== REACH PANEL (about: where we work) =============== */
.reach-panel{
  position:relative; overflow:hidden;
  padding:32px;
  border-radius:20px;
  background:linear-gradient(140deg,var(--brand-900) 0%,var(--brand-700) 55%,var(--brand) 100%);
  box-shadow:var(--shadow-deep-2xl);
  color:var(--white);
}
.reach-panel > *{ position:relative; z-index:1; }
.reach-panel > .reach-dots{
  position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.13) 1.4px, transparent 1.4px);
  background-size:26px 26px; opacity:.55; pointer-events:none;
}
/* soft corner glow */
.reach-panel::after{
  content:''; position:absolute; z-index:0;
  top:-190px; left:-150px; width:560px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.13) 0%,transparent 68%);
  pointer-events:none;
}

.reach-copy{ max-width:62ch; margin-bottom:32px; }
.reach-copy h3{
  font-size:clamp(20px,2vw,25px); line-height:1.26; font-weight:800;
  letter-spacing:-.7px; margin-bottom:12px;
  color:var(--white); /* global h1-h5 rule sets --ink, unreadable on the dark panel */
}
.reach-copy p{ font-size:14px; line-height:1.58; color:rgba(255,255,255,.80); }

.reach-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.reach-card{
  padding:20px;
  border-radius:16px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(2px);
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.reach-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.11);
  border-color:rgba(199,193,242,.42);
}
.reach-ico{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:12px;
  border-radius:12px; font-size:16px; color:var(--brand-900);
  background:var(--brand-200);
}
.reach-card h4{
  font-size:15px; font-weight:700; letter-spacing:-.2px; margin-bottom:8px; color:var(--white);
}
.reach-card p{ font-size:14px; line-height:1.56; color:rgba(255,255,255,.76); }

.reach-note{
  display:flex; align-items:center; gap:8px;
  margin-top:32px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.17);
  font-size:14px; color:rgba(255,255,255,.76);
}
.reach-note i{ color:var(--brand-200); font-size:15px; }

.why-list{ display:flex; flex-direction:column; }
.why-row{
  position:relative;
  display:grid; grid-template-columns:auto auto 1fr; gap:16px; align-items:flex-start;
  padding:20px 20px 20px 16px;
  border-bottom:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.why-row:first-child{ border-top:1px solid var(--border-soft); }
.why-row::before{
  content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:2px;
  background:var(--accent-grad);
  transform:scaleY(0); transform-origin:center;
  transition:transform .35s var(--ease);
}
.why-row:hover{ background:var(--accent-soft); transform:translateX(4px); }
.why-row:hover::before{ transform:scaleY(1); }
.why-row-num{
  font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.12em; padding-top:12px;
}
.why-row-icon{
  width:46px; height:46px; border-radius:var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--border-soft);
  color:var(--accent); font-size:18px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.why-row:hover .why-row-icon{ background:var(--accent-grad); color:var(--white); border-color:transparent; }
.why-row h3{ font-size:18px; margin-bottom:4px; }
.why-row p{ font-size:14px; color:var(--text-mid); margin:0; line-height:1.52; }

/* =============== SERVICES =============== */
.services{ padding:48px 0; background:var(--accent-soft); }
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.service-card{
  padding:24px 20px;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  position:relative;
  overflow:hidden;
}
.service-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--accent-grad);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.service-card:hover{ transform:translateY(-6px); border-color:var(--brand-200); box-shadow:var(--shadow-card-hover); }
.service-card:hover::before{ transform:scaleX(1); }
.service-index{
  position:absolute; top:30px; right:26px;
  font-size:12px; font-weight:700; color:var(--accent); opacity:.55; letter-spacing:.12em;
}
.featured-service{ border-color:var(--brand-200); }
.featured-service::before{ transform:scaleX(1); }
.service-icon{
  position:relative; z-index:1;
  width:54px; height:54px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--border-soft);
  color:var(--accent); font-size:20px;
  margin-bottom:20px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.service-card:hover .service-icon{ background:var(--accent-grad); color:var(--white); border-color:transparent; }
.service-card h3{ font-size:18px; margin-bottom:12px; }
.service-card p{ font-size:14px; color:var(--text-mid); line-height:1.52; }
.service-features{ display:flex; flex-direction:column; gap:8px; margin:20px 0 24px; padding-top:20px; }
.service-features li{ display:flex; align-items:flex-start; gap:8px; font-size:14px; color:var(--text-mid); line-height:1.48; }
.service-features i{ color:var(--accent); margin-top:4px; font-size:11px; }
.service-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:var(--accent);
  transition:gap .25s ease;
}
.service-link:hover{ gap:12px; }

/* =============== PRODUCTS =============== */
.products{ padding:48px 0; background:var(--white); }
.products-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:24px; align-items:stretch; }
.product-card{
  position:relative;
  padding:24px 20px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.product-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--accent-grad);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.product-card:hover{ transform:translateY(-6px); border-color:var(--brand-200); box-shadow:var(--shadow-card-hover); }
.product-card:hover::before{ transform:scaleX(1); }

/* Each product carries a hue matched to the industry it serves, so the five
   read apart at a glance. Overriding --accent lets the existing cascade do
   the work: icon, top bar and tag all pick it up automatically. */
.product-card[data-tone="ca"]{
  --accent:#6A4FA2; --accent-grad:linear-gradient(135deg,#7C5FB5 0%,#5A3F91 100%);
  background:#F1EAFB; border-color:#D9CBF2;
}
.product-card[data-tone="build"]{
  --accent:#8E6019; --accent-grad:linear-gradient(135deg,#C98B2E 0%,#8F5F14 100%);
  background:#FDF3E0; border-color:#F0DDB8;
}
.product-card[data-tone="machine"]{
  --accent:#2F6285; --accent-grad:linear-gradient(135deg,#3F7EA8 0%,#28587A 100%);
  background:#E3EFFA; border-color:#C0D8EE;
}
.product-card[data-tone="invoice"]{
  --accent:#27714B; --accent-grad:linear-gradient(135deg,#3B9268 0%,#226643 100%);
  background:#E8F7E9; border-color:#C2E5C6;
}
.product-card[data-tone="resort"]{
  --accent:#983952; --accent-grad:linear-gradient(135deg,#C05470 0%,#8A2F47 100%);
  background:#FCE9EE; border-color:#F2CCD7;
}
.product-card[data-tone="agency"]{
  --accent:#5F5D38; --accent-grad:linear-gradient(135deg,#7E7B4C 0%,#4B4A2C 100%);
  background:#EDEBE2; border-color:#DEDBC9;
}
/* the accent bar stays visible rather than only appearing on hover */
.product-card[data-tone]::before{ transform:scaleX(1); }
/* filled tag: solid accent, not the gradient — the gradient's light end drops
   white text to 2.9:1 on the amber tone, well under AA */
.product-card[data-tone] .product-tag{
  background:var(--accent);
  color:var(--white);
  border-color:transparent;
  font-weight:800;
  padding:4px 12px;
  border-radius:4px;
  /* the featured card is a flex column, so the tag would stretch full width */
  align-self:flex-start;
  width:-moz-fit-content;
  width:fit-content;
  box-shadow:0 6px 14px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .product-card[data-tone] .product-tag{ box-shadow:var(--shadow-deep-md); }
}
.product-card[data-tone]:hover{
  border-color:var(--accent);
  box-shadow:0 26px 50px -26px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .product-card[data-tone]:hover{ box-shadow:var(--shadow-deep-xl); }
}
.product-icon{
  width:54px; height:54px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-grad); color:var(--white); font-size:20px;
  margin-bottom:16px;
  box-shadow:var(--shadow-brand-md);
}
.product-tag{
  display:inline-block;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--border);
  padding:4px 12px; border-radius:4px; margin-bottom:12px;
}
.product-card h3{ font-size:18px; margin-bottom:8px; }
.product-card p{ font-size:14px; color:var(--text-mid); margin-bottom:12px; line-height:1.52; }
.product-features{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; padding-top:16px; }
.product-features li{ display:flex; align-items:flex-start; gap:8px; font-size:14px; color:var(--text-mid); }
.product-features i{ color:var(--accent); margin-top:4px; font-size:11px; }
.product-card .service-link{ margin-top:auto; align-self:flex-start; }

/* =============== CUSTOM SOFTWARE EXPLAINER + FAQ =============== */
.explainer{
  --accent:#4739AF; --accent-soft:#F3F2FD; --accent-grad:linear-gradient(90deg,#4739AF,#7566DC);
  padding:48px 0; background:var(--white);
}
/* the guide page is split into banded sections; this sets its own background
   so it needs an explicit tinted variant rather than .page-section.tinted */
.explainer.tinted{ background:var(--brand-50); }
/* consecutive bands should not double their padding at the seam */
.explainer + .explainer{ padding-top:0; }
.explainer.tinted + .explainer,
.explainer + .explainer.tinted{ padding-top:68px; }

/* definition callout */
.def-callout{
  position:relative;
  display:flex; align-items:flex-start; gap:16px;
  max-width:940px; margin:0 auto 36px;
  padding:24px 28px 24px 24px;
  border-radius:var(--radius-lg);
  background:var(--accent-soft);
  border-left:4px solid transparent;
  background-image:linear-gradient(var(--accent-soft),var(--accent-soft)), var(--accent-grad);
  background-origin:border-box;
  background-clip:padding-box, border-box;
}
.def-mark{
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-grad); color:var(--white); font-size:18px;
}
.def-callout p{
  margin:0; font-size:15px; line-height:1.56; color:var(--ink); font-weight:500;
}
.def-callout strong{ font-weight:800; }

.explainer-narrative{ max-width:860px; margin:0 auto 44px; text-align:center; }
.explainer-narrative p{ font-size:14px; line-height:1.58; color:var(--text-mid); margin-bottom:12px; }
.explainer-narrative strong{ color:var(--ink); }

/* what we build */
.build-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:44px; }
.build-card{
  position:relative; padding:20px;
  border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  background:var(--white);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.build-card:hover{ transform:translateY(-6px); border-color:var(--brand-200); box-shadow:var(--shadow-card-hover); }
.build-ico{
  width:46px; height:46px; border-radius:12px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--border-soft);
  color:var(--accent); font-size:18px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.build-card:hover .build-ico{ background:var(--accent-grad); color:var(--white); border-color:transparent; }
.build-card h3{ font-size:15px; margin-bottom:8px; }
.build-card p{ font-size:14px; line-height:1.52; color:var(--text-mid); margin:0; }

/* head-to-head comparison */
.compare-wrap{ max-width:980px; margin:0 auto 56px; }
.compare-heading{ font-size:18px; text-align:center; margin-bottom:20px; }
.compare-duo{
  position:relative;
  display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
}
.compare-vs{
  align-self:center;
  width:52px; height:52px; border-radius:50%; margin:0 -12px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-grad); color:var(--white);
  font-size:13px; font-weight:800; letter-spacing:.06em;
  box-shadow:0 0 0 8px var(--white), 0 12px 26px -12px rgba(84,68,209,.7);
}
.compare-card{ padding:24px 20px; border-radius:var(--radius-lg); border:1px solid var(--border-soft); }
.compare-card ul{ display:flex; flex-direction:column; gap:12px; }
.compare-card li{ display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.5; }
.compare-card li i{ font-size:11px; margin-top:4px; flex-shrink:0; }
.compare-badge{
  display:inline-block; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  padding:4px 12px; border-radius:4px; margin-bottom:16px;
}
.compare-custom{
  border-color:var(--brand-200); background:var(--white);
  box-shadow:var(--shadow-card); padding-right:40px;
}
.compare-custom .compare-badge{ background:var(--accent-grad); color:var(--white); }
.compare-custom li{ color:var(--ink); font-weight:500; }
.compare-custom li i{ color:var(--accent); }
.compare-offshelf{ background:var(--bg-alt); border-color:var(--border-soft); padding-left:40px; }
.compare-offshelf .compare-badge{ background:var(--white); color:var(--text-dim); border:1px solid var(--border); }
.compare-offshelf li{ color:var(--text-dim); }
.compare-offshelf li i{ color:#C2BDD8; }
.compare-foot{
  display:flex; align-items:flex-start; justify-content:center; gap:8px;
  font-size:13px; color:var(--text-dim); margin:24px 0 0; text-align:center;
}
.compare-foot i{ color:var(--accent); margin-top:4px; flex-shrink:0; }

/* FAQ */
.faq-block{ max-width:900px; margin:0 auto; }
/* long FAQ sets split into two columns instead of one tall stack */
.faq-block.faq-wide{ max-width:1180px; }
.faq-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; align-items:start; }
.faq-col{ min-width:0; }
.faq-title{ font-size:20px; text-align:center; margin-bottom:20px; }
.faq-item{
  border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  margin-bottom:12px; background:var(--white);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item[open]{ border-color:var(--brand-200); box-shadow:var(--shadow-card); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; cursor:pointer; list-style:none;
  font-size:15px; font-weight:700; color:var(--ink); line-height:1.45;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+';
  font-size:18px; font-weight:400; line-height:1; color:var(--accent); flex-shrink:0;
  transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item summary:hover{ color:var(--accent); }
.faq-answer{ padding:0 24px 20px; }
.faq-answer p{ font-size:14px; line-height:1.56; color:var(--text-mid); margin:0; }

/* =============== PROCESS (dark connected timeline) =============== */
.process{
  position:relative; padding:52px 0; overflow:hidden;
  background:linear-gradient(120deg,#1A1633 0%,#2E2864 45%,#40388B 100%);
}
.process-dots{
  position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 45%, black 20%, transparent 85%);
}
.process .container{ position:relative; z-index:1; }
.process .section-title{ color:var(--white); }
.process .section-sub{ color:rgba(255,255,255,.72); }

.timeline{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
/* connecting line runs through the centre of the node row */
.timeline::before{
  content:''; position:absolute; top:31px; left:8%; right:8%; height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32) 12%,rgba(255,255,255,.32) 88%,transparent);
}
.tl-step{ position:relative; text-align:center; padding:0 8px; }
.tl-node{
  position:relative; z-index:2;
  width:62px; height:62px; margin:0 auto 20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#231E45;
  border:2px solid rgba(255,255,255,.35);
  color:var(--white); font-size:20px;
  box-shadow:0 0 0 8px rgba(26,22,51,.55);
  transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.tl-step:hover .tl-node{
  transform:translateY(-5px) scale(1.05);
  background:var(--white); color:var(--brand-700); border-color:var(--white);
}
.tl-num{
  display:block; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:6px;
}
.tl-phase{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--white);
  padding:4px 12px; border-radius:999px; margin-bottom:12px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
}
.tl-step h4{ color:var(--white); font-size:15px; margin-bottom:8px; }
.tl-step p{ font-size:14px; color:rgba(255,255,255,.68); margin:0; line-height:1.52; }

/* =============== TESTIMONIALS =============== */
.testimonials{ padding:48px 0; background:var(--accent-soft); overflow:hidden; }
.testimonial-slider{ position:relative; margin:0 auto; }
.testimonial-viewport{ position:relative; overflow:hidden; }
.testimonial-viewport::before,.testimonial-viewport::after{
  content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none;
}
.testimonial-viewport::before{ left:0; background:linear-gradient(90deg,var(--accent-soft),transparent); }
.testimonial-viewport::after{ right:0; background:linear-gradient(270deg,var(--accent-soft),transparent); }
.testimonial-track{
  position:relative; z-index:1; display:flex; gap:16px; width:max-content;
  animation:testiScroll 48s linear infinite;
}
.testimonial-track:hover{ animation-play-state:paused; }
@keyframes testiScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(calc(-50% - 10px)); }
}
.testimonial-card{
  flex:0 0 400px; padding:28px 24px; text-align:left;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.testimonial-card:hover{ border-color:var(--brand-300); box-shadow:var(--shadow-card); }
.stars{ margin-bottom:12px; }
.stars i{ color:var(--accent); font-size:13px; margin-right:2px; }
.testimonial-card p{ font-size:15px; color:var(--ink); font-weight:400; line-height:1.56; margin-bottom:20px; }
.testimonial-author{ display:flex; align-items:center; gap:12px; padding-top:20px; }
.author-avatar{
  width:46px; height:46px; border-radius:var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-grad); color:var(--white); font-weight:700; font-size:14px;
}
.testimonial-author div{ text-align:left; }
.testimonial-author div strong{ display:flex; align-items:center; gap:6px; color:var(--ink); font-size:14px; }
.testimonial-author div span{ font-size:12px; color:var(--text-dim); }
.verified-badge{ color:var(--accent); font-size:12px; }
.testimonials-hint{ display:none; text-align:center; font-size:12px; color:var(--text-dim); margin-top:28px; letter-spacing:.04em; }
@media (hover:hover) and (pointer:fine){ .testimonials-hint{ display:block; } }

/* =============== CTA BANNER =============== */
.cta-banner{ position:relative; padding:44px 0; overflow:hidden; text-align:center; }
.cta-bg{
  position:absolute; inset:0;
  background:linear-gradient(120deg,#2E2864 0%,#40388B 50%,#5444D1 100%);
  background-size:200% 200%;
  animation:gradientShift 14s ease infinite;
}
@keyframes gradientShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.cta-pattern{
  position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 85%);
}
.cta-inner{ position:relative; z-index:1; }
.cta-icon{
  width:60px; height:60px; margin:0 auto 24px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.28);
  color:var(--white); font-size:22px;
  animation:floatY 5s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.cta-inner h2{ color:var(--white); font-size:clamp(25px,3.1vw,36px); margin-bottom:12px; }
.cta-inner p{ color:rgba(255,255,255,.85); font-size:15px; max-width:530px; margin:0 auto 32px; }
.cta-btn-row{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:28px; }
.cta-trust-row{
  display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.2);
  max-width:640px; margin:0 auto;
}
.cta-trust-row span{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,.86); }
.cta-trust-row i{ color:var(--white); font-size:13px; }

/* =============== CONTACT =============== */
.contact{ padding:48px 0; background:var(--white); }
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; }
/* left column runs tighter so it lines up with the form card */
.contact-info .section-title{ font-size:clamp(22px,2.2vw,28px); margin-bottom:12px; }
.contact-info > p{ font-size:14px; margin-bottom:0; }
.info-list{ display:flex; flex-direction:column; margin:20px 0; }
.info-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 0; border-bottom:1px solid var(--border-soft);
}
.info-item:first-child{ padding-top:0; }
.info-item:last-child{ border-bottom:none; padding-bottom:0; }
.info-icon{
  width:40px; height:40px; border-radius:var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--border-soft);
  color:var(--accent); font-size:14px;
}
.info-item strong{ display:block; color:var(--ink); font-size:11px; margin-bottom:2px; text-transform:uppercase; letter-spacing:.14em; }
.info-item p{ margin:0; font-size:14px; line-height:1.48; color:var(--text-mid); }
.info-item a:hover{ color:var(--brand); }
.areas-served{
  padding:12px 16px; margin-bottom:16px;
  border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  border-left:3px solid transparent;
  background:linear-gradient(var(--white),var(--white)) padding-box,
             var(--grad) border-box;
}
.areas-served h3{
  font-size:11px; text-transform:uppercase; letter-spacing:.16em;
  color:var(--brand); margin-bottom:4px;
}
.areas-served > p{ font-size:14px; color:var(--text-mid); margin-bottom:12px; }
/* three delivery tiers, matching how reach is described across the site */
.areas-tier{ padding-top:12px; margin-top:12px; border-top:1px solid var(--border-soft); }
.areas-tier:first-of-type{ padding-top:0; margin-top:0; border-top:none; }
.areas-tier > strong{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; color:var(--ink); margin-bottom:8px;
}
.areas-tier > strong i{ color:var(--brand); font-size:12px; flex:none; }
.areas-tier > p{ font-size:14px; line-height:1.5; color:var(--text-mid); margin:0; }
.areas-served ul{ display:flex; flex-wrap:wrap; gap:6px; }
.areas-served li{
  font-size:14px; font-weight:600; color:var(--text-mid);
  padding:4px 12px; border-radius:4px;
  background:var(--brand-50); border:1px solid var(--border-soft);
}

.social-row{ display:flex; gap:12px; }
.social-row a{
  width:42px; height:42px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--border);
  color:var(--brand); transition:background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.social-row a:hover{ background:var(--grad); color:var(--white); border-color:transparent; transform:translateY(-3px); }

/* sits inside .contact-split, so it carries no chrome of its own */
.contact-form{ padding:36px 32px; background:none; border:0; border-radius:0; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group{ margin-bottom:16px; }
.form-group label{
  display:block; font-size:12px; font-weight:700; color:var(--ink);
  margin-bottom:8px; text-transform:uppercase; letter-spacing:.14em;
}
.form-group input,.form-group select,.form-group textarea,
.form-step input,.form-step select,.form-step textarea{
  width:100%; padding:12px 12px; border-radius:var(--radius-sm);
  background:var(--white); border:1.5px solid var(--brand-300);
  color:var(--ink); font-family:inherit; font-size:15px; font-weight:500;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.form-group input::placeholder,.form-group textarea::placeholder,
.form-step input::placeholder,.form-step textarea::placeholder{ color:var(--text-dim); }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,
.form-step input:focus,.form-step select:focus,.form-step textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:var(--ring-brand);
}
.form-group select option,.form-step select option{ background:var(--white); color:var(--ink); }
.form-note{ text-align:center; font-size:14px; color:var(--brand); margin:16px 0 0; min-height:18px; font-weight:600; }
/* required marker */
.form-group label em{ color:#c0392b; font-style:normal; margin-left:2px; }
/* dial code sits beside the number rather than in its own row */
.phone-group{ display:grid; grid-template-columns:96px 1fr; gap:8px; }
.phone-group .dial-code{ text-align:center; }
.form-error{
  display:flex; align-items:center; gap:8px;
  margin:0 0 16px; padding:12px 12px; border-radius:8px;
  background:#fdecea; border:1px solid #f5c6c0;
  color:#a33227; font-size:12px; font-weight:600;
}
.form-error[hidden]{ display:none !important; }
.contact-form .form-success{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:6px; margin-top:20px; padding-top:24px;
  border-top:1px solid var(--border-soft);
}
.contact-form .form-success[hidden]{ display:none !important; }
.form-success-ico{
  width:54px; height:54px; border-radius:50%; margin-bottom:8px;
  display:grid; place-items:center;
  background:var(--grad); color:var(--white); font-size:20px;
  box-shadow:var(--shadow-brand-lg);
}
.contact-form .form-success strong{ font-size:15px; color:var(--ink); }
.contact-form .form-success span{ font-size:13px; line-height:1.52; color:var(--text-mid); max-width:38ch; }

/* =============== FOOTER =============== */
.site-footer{ position:relative; padding:44px 0 0; background:#1A1633; overflow:hidden; }
.footer-bg{ display:none; }
/* =============== INDUSTRIES BAND ===============
   Lifted out of the footer into its own light band so it reads as real
   content rather than footer furniture, and so it separates the page
   from the dark footer below. The list scrolls as a single inline rail
   instead of wrapping into a block of chips. */
.industries-band{
  position:relative; overflow:hidden;
  padding:48px 0 44px;
  background:
    radial-gradient(90% 120% at 50% 0%, var(--brand-50) 0%, transparent 70%),
    var(--white);
  border-top:1px solid var(--border-soft);
}
.ib-head{ max-width:740px; margin:0 auto 32px; text-align:center; }
.ib-title{
  font-size:clamp(22px,2.4vw,28px); font-weight:800; color:var(--ink);
  line-height:1.22; letter-spacing:-.03em; margin:0 0 12px;
}
.ib-sub{
  font-size:15px; line-height:1.56; color:var(--text-mid);
  margin:0; text-align:center;
}

/* the rail: two identical halves so translateX(-50%) loops seamlessly */
.ib-marquee{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.ib-track{
  display:flex; align-items:center; gap:12px;
  width:max-content;
  animation:ibScroll 44s linear infinite;
}
.ib-marquee:hover .ib-track{ animation-play-state:paused; }
@keyframes ibScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
.ib-item{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:999px;
  white-space:nowrap; flex:none;
  font-size:14px; font-weight:600; color:var(--text-mid);
  background:var(--white);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-sm);
  transition:color .28s var(--ease), border-color .28s var(--ease),
             box-shadow .28s var(--ease), transform .28s var(--ease);
}
.ib-item i{ font-size:15px; line-height:1; color:var(--brand); flex:none; }
.ib-item:hover{
  color:var(--ink); border-color:var(--brand-200);
  box-shadow:var(--shadow-md); transform:translateY(-2px);
}

@media (prefers-reduced-motion: reduce){
  .ib-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .ib-marquee{ -webkit-mask-image:none; mask-image:none; }
}
@media (max-width:860px){
  .industries-band{ padding:40px 0 36px; }
  .ib-head{ margin-bottom:24px; }
}

.footer-grid{ position:relative; display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:56px; }
.footer-brand .brand-mark{ background:var(--grad-diag); }
.footer-brand .brand-text{ color:var(--white); }
.footer-brand .brand-text span{
  background:linear-gradient(90deg,#A096E7,#C7C1F2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.footer-brand .brand-text small{ color:rgba(255,255,255,.58); }
.footer-brand p{ font-size:14px; margin:20px 0 16px; color:rgba(255,255,255,.65); line-height:1.55; }
.footer-tag{ color:var(--brand-300); font-weight:600; font-size:13px; }
.footer-col h5{
  font-size:12px; margin-bottom:20px; color:var(--white);
  text-transform:uppercase; letter-spacing:.16em;
}
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:13px; color:rgba(255,255,255,.65); transition:color .25s ease, padding-left .25s ease; }
.footer-col a:hover{ color:var(--white); padding-left:4px; }
.footer-contact li{ display:flex; gap:8px; align-items:flex-start; font-size:14px; color:rgba(255,255,255,.65); }
.footer-contact i{ color:var(--brand-300); margin-top:4px; }
.footer-contact a:hover{ color:var(--white); }
.site-footer .social-row{ margin-top:24px; }
.site-footer .social-row a{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:var(--white); }
.site-footer .social-row a:hover{ background:var(--grad); border-color:transparent; }

.footer-seo{
  font-size:12px; line-height:1.58; color:rgba(255,255,255,.4);
  padding-bottom:28px; margin:0; max-width:1000px;
}

.footer-bottom{ border-top:1px solid rgba(255,255,255,.11); padding:24px 0; }
.footer-bottom-inner{ display:flex; align-items:center; justify-content:space-between; }
.footer-bottom p{ margin:0; font-size:14px; color:rgba(255,255,255,.55); }
.back-to-top{
  width:42px; height:42px; border-radius:var(--radius-sm); cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  color:var(--white); display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.back-to-top:hover{ background:var(--grad); border-color:transparent; transform:translateY(-3px); }

/* =============== INNER PAGE HERO + BLOCKS =============== */
.page-hero{
  position:relative; overflow:hidden;
  padding:128px 0 64px;
  background:linear-gradient(120deg,#1A1633 0%,#40388B 48%,#5444D1 100%);
  color:var(--white);
}
.page-hero-dots{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(199,193,242,.22) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 70% 80% at 25% 40%, black 20%, transparent 85%);
}
.page-hero .container{ position:relative; z-index:1; }
.breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:12px; font-weight:600; color:rgba(255,255,255,.62);
  margin-bottom:16px;
}
.breadcrumb a{ color:rgba(255,255,255,.82); transition:color .25s ease; }
.breadcrumb a:hover{ color:var(--white); }
.breadcrumb .sep{ color:rgba(255,255,255,.4); }
.breadcrumb [aria-current]{ color:var(--brand-200); }
.page-hero h1{
  color:var(--white); font-size:clamp(25px,3.1vw,36px);
  max-width:840px; margin-bottom:12px; line-height:1.16;
}
.page-hero .page-lead{
  font-size:15px; line-height:1.56; color:rgba(255,255,255,.82);
  max-width:720px; margin-bottom:20px;
}
.page-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* generic content section on inner pages */
.page-section{ padding:64px 0; background:var(--white); }
.page-section.tinted{ background:var(--brand-50); }
.page-narrow{ max-width:820px; margin:0 auto; }
.page-narrow h2{ font-size:clamp(21px,2.4vw,28px); margin-bottom:12px; }
.page-narrow h3{ font-size:18px; margin:32px 0 12px; }
.page-narrow p{ font-size:14px; line-height:1.58; color:var(--text-mid); margin-bottom:12px; }
.page-narrow strong{ color:var(--ink); }
.page-narrow ul.tick{ display:flex; flex-direction:column; gap:8px; margin:20px 0 24px; }
.page-narrow ul.tick li{ display:flex; align-items:flex-start; gap:8px; font-size:14px; color:var(--text-mid); line-height:1.54; }
.page-narrow ul.tick i{ color:var(--brand); font-size:14px; margin-top:4px; flex-shrink:0; }

/* =============== ABOUT INTRO (70/30 copy + animated mark) =============== */
.about-split{ display:grid; grid-template-columns:70% 30%; gap:40px; align-items:start; }
.about-copy .section-tag{ margin-bottom:12px; }
.about-copy h2{
  font-size:clamp(22px,2.5vw,31px); line-height:1.2; letter-spacing:-1px; margin-bottom:16px;
}
.about-copy p{ font-size:14px; line-height:1.6; color:var(--text-mid); margin-bottom:12px; }
.about-copy p:last-child{ margin-bottom:0; }
.about-copy strong{ color:var(--ink); }

.about-visual{ position:sticky; top:104px; }
.av-stage{
  position:relative; overflow:hidden;
  border-radius:20px; padding:16px 12px 16px;
  background:linear-gradient(160deg,var(--brand-900) 0%,var(--brand-700) 55%,var(--brand) 100%);
  box-shadow:var(--shadow-deep-xl);
}
.av-stage svg{ display:block; width:100%; height:auto; position:relative; z-index:2; }

/* concentric rings drifting outward behind the diagram */
.av-rings{ position:absolute; inset:0; display:grid; place-items:center; z-index:1; }
.av-rings span{
  position:absolute; width:78px; height:78px; border-radius:50%;
  border:1px solid rgba(199,193,242,.42);
  animation:avRing 4.8s ease-out infinite;
}
.av-rings span:nth-child(2){ animation-delay:1.6s; }
.av-rings span:nth-child(3){ animation-delay:3.2s; }
@keyframes avRing{
  0%   { transform:scale(.55); opacity:.75; }
  100% { transform:scale(2.6);  opacity:0; }
}

/* nodes breathe, links trace themselves */
.av-nodes circle{ transform-origin:center; animation:avPulse 3.2s ease-in-out infinite; }
.av-nodes .av-n2{ animation-delay:.5s; }
.av-nodes .av-n3{ animation-delay:1s; }
.av-nodes .av-n4{ animation-delay:1.5s; }
@keyframes avPulse{
  0%,100%{ opacity:.9;  transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.09); }
}
.av-links path{
  stroke-dasharray:120; stroke-dashoffset:120;
  animation:avDraw 3.4s ease-in-out infinite alternate;
}
.av-links path:nth-child(2){ animation-delay:.3s; }
.av-links path:nth-child(3){ animation-delay:.6s; }
.av-links path:nth-child(4){ animation-delay:.9s; }
.av-links path:nth-child(5){ animation-delay:1.2s; }
@keyframes avDraw{ to{ stroke-dashoffset:0; } }

.av-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.av-stats li{
  text-align:center; padding:12px 6px; border-radius:12px;
  background:var(--brand-50); border:1px solid var(--brand-200);
}
.av-stats strong{
  display:block; font-size:18px; font-weight:800; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.av-stats span{
  display:block; margin-top:4px; font-size:11px; font-weight:700;
  letter-spacing:.06em; color:var(--text-dim); line-height:1.35;
}

@media (prefers-reduced-motion: reduce){
  .av-rings span, .av-nodes circle, .av-links path, .av-pulse{ animation:none; }
  .av-links path{ stroke-dashoffset:0; }
}

/* =============== MEDIA SPLIT (copy + 30% motion graphic) =============== */
.media-split{ display:grid; grid-template-columns:70% 30%; gap:40px; align-items:start; }
.media-split.media-left{ grid-template-columns:30% 70%; }
.media-split.media-left .mg-col{ order:-1; }
.media-copy h2{
  font-size:clamp(21px,2.4vw,29px); line-height:1.22; letter-spacing:-.9px; margin-bottom:16px;
}
.media-copy h3{ font-size:18px; margin:28px 0 12px; }
.media-copy p{ font-size:14px; line-height:1.6; color:var(--text-mid); margin-bottom:12px; }
.media-copy strong{ color:var(--ink); }
.media-copy ul.tick{ display:flex; flex-direction:column; gap:8px; margin:16px 0 0; }
.media-copy ul.tick li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:14px; line-height:1.54; color:var(--text-mid);
}
.media-copy ul.tick i{ color:var(--brand); font-size:14px; margin-top:4px; flex:none; }

.mg-col{ position:sticky; top:104px; }
.mg-stage{
  position:relative; overflow:hidden;
  border-radius:20px; padding:20px 16px;
  background:linear-gradient(160deg,var(--brand-900) 0%,var(--brand-700) 55%,var(--brand-600) 100%);
  box-shadow:var(--shadow-deep-xl);
}
.mg-stage::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.2px);
  background-size:24px 24px; opacity:.5;
}
.mg-caption{
  margin-top:12px; padding:12px 12px; border-radius:12px;
  background:var(--brand-50); border:1px solid var(--brand-200);
  font-size:12px; line-height:1.48; color:var(--text-mid); text-align:center;
}
.mg-caption strong{ display:block; color:var(--ink); font-size:12px; margin-bottom:3px; }

/* ---------- orbit: platforms circling a measured core ---------- */
.mg-orbit-wrap{ position:relative; z-index:1; aspect-ratio:1; }
.mg-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(199,193,242,.26);
  animation:mgSpin 30s linear infinite;
}
.mg-ring.inner{ inset:22%; border-color:rgba(199,193,242,.18); animation-duration:22s; animation-direction:reverse; }
@keyframes mgSpin{ to{ transform:rotate(360deg); } }

.mg-plat{
  position:absolute; top:50%; left:50%;
  width:40px; height:40px; margin:-20px 0 0 -20px;
  display:grid; place-items:center; border-radius:12px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(199,193,242,.45);
  color:var(--brand-200); font-size:14px;
  transform:rotate(calc(var(--i) * 60deg)) translateY(-88px) rotate(calc(var(--i) * -60deg));
  animation:mgCounter 30s linear infinite;
}
/* counter-rotate so glyphs stay upright while the ring turns */
@keyframes mgCounter{ to{ transform:rotate(calc(var(--i) * 60deg)) translateY(-88px) rotate(calc(var(--i) * -60deg - 360deg)); } }

.mg-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:96px; height:96px; border-radius:50%;
  display:grid; place-items:center; text-align:center;
  background:linear-gradient(140deg,var(--brand-200),var(--brand-400));
  box-shadow:var(--shadow-deep-lg);
}
.mg-core span{
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand-900);
}
.mg-core .mg-bars{ display:flex; align-items:flex-end; gap:6px; height:26px; margin-top:4px; }
.mg-core .mg-bars i{
  display:block; width:6px; border-radius:2px; background:var(--brand-900);
  transform-origin:bottom; animation:mgGrow 2.6s ease-in-out infinite alternate;
}
.mg-core .mg-bars i:nth-child(1){ height:12px; }
.mg-core .mg-bars i:nth-child(2){ height:19px; animation-delay:.3s; }
.mg-core .mg-bars i:nth-child(3){ height:26px; animation-delay:.6s; }
@keyframes mgGrow{ from{ transform:scaleY(.4); } to{ transform:scaleY(1); } }

/* ---------- stack: layered cards drifting ---------- */
.mg-stack{ position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; }
.mg-item{
  display:flex; align-items:center; gap:8px;
  padding:12px 12px; border-radius:12px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  animation:mgBob 3.6s ease-in-out infinite;
}
.mg-item:nth-child(2){ animation-delay:.45s; }
.mg-item:nth-child(3){ animation-delay:.9s; }
.mg-item:nth-child(4){ animation-delay:1.35s; }
.mg-item:nth-child(5){ animation-delay:1.8s; }
@keyframes mgBob{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
.mg-item i{
  width:32px; height:32px; flex:none; border-radius:8px;
  display:grid; place-items:center;
  background:var(--brand-200); color:var(--brand-900); font-size:13px;
}
.mg-item span{ font-size:12px; font-weight:700; color:var(--white); line-height:1.35; }
.mg-item small{ display:block; font-weight:400; font-size:11px; color:rgba(255,255,255,.66); }

/* ---------- time-zone clocks (offshore) ---------- */
.mg-clocks{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px;
}
.mg-clock{
  text-align:center; padding:12px 4px 12px; border-radius:12px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
}
.mg-clock.ist{ background:rgba(199,193,242,.2); border-color:rgba(199,193,242,.5); }
.mg-cl-face{
  position:relative; display:block; width:34px; height:34px; margin:0 auto 8px;
  border-radius:50%; border:2px solid var(--brand-200);
}
/* the hand sweeps, so the three read as live clocks rather than icons */
.mg-cl-face i{
  position:absolute; left:50%; bottom:50%;
  width:2px; height:11px; border-radius:2px;
  background:var(--brand-200); transform-origin:bottom center;
  animation:mgHand 6s linear infinite;
}
.mg-clock:nth-child(2) .mg-cl-face i{ animation-duration:6s; animation-delay:-2s; }
.mg-clock:nth-child(3) .mg-cl-face i{ animation-duration:6s; animation-delay:-4s; }
@keyframes mgHand{ from{ transform:translateX(-50%) rotate(0deg); } to{ transform:translateX(-50%) rotate(360deg); } }
.mg-clock b{ display:block; font-size:11px; font-weight:800; color:var(--white); letter-spacing:.04em; }
.mg-clock small{ display:block; margin-top:2px; font-size:10px; line-height:1.35; color:rgba(255,255,255,.66); }

/* ---------- browser frame ---------- */
.mg-browser{
  position:relative; z-index:1; border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  margin-bottom:12px;
}
.mg-bar-top{
  display:flex; align-items:center; gap:6px; padding:8px 12px;
  background:rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.14);
}
.mg-bar-top em{ width:7px; height:7px; border-radius:50%; background:rgba(199,193,242,.6); }
.mg-bar-top b{
  margin-left:6px; font-size:10px; font-weight:600; color:rgba(255,255,255,.62);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mg-page{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.mg-page em{
  display:block; height:8px; border-radius:4px; background:rgba(199,193,242,.5);
  animation:mgFade 3.2s ease-in-out infinite;
}
.mg-page em:nth-child(1){ width:70%; height:11px; }
.mg-page em:nth-child(2){ width:100%; animation-delay:.35s; }
.mg-page em:nth-child(3){ width:88%; animation-delay:.7s; }
.mg-page em:nth-child(4){ width:52%; background:var(--brand-200); animation-delay:1.05s; }
@keyframes mgFade{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .mg-ring,.mg-plat,.mg-core .mg-bars i,.mg-item,.mg-page em,.mg-cl-face i{ animation:none; }
  .mg-plat{ transform:rotate(calc(var(--i) * 60deg)) translateY(-88px) rotate(calc(var(--i) * -60deg)); }
}

/* =============== INTRO SPLIT (argument + numbered points card) =============== */
.intro-split{
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:start;
}
.intro-copy .section-tag{ margin-bottom:12px; }
.intro-copy h2{
  font-size:clamp(24px,2.6vw,33px); line-height:1.18; letter-spacing:-1.1px;
  margin-bottom:16px;
}
.intro-copy p{
  font-size:15px; line-height:1.6; color:var(--text-mid); margin-bottom:12px;
}
.intro-copy p:last-child{ margin-bottom:0; }
.intro-copy strong{ color:var(--ink); }

/* Light card, matching .tips-panel on the contact page. The previous deep
   gradient read as a heavy slab beside plain body copy — corporate panels
   in this position work better as a quiet raised card than a dark one. */
.intro-points{
  position:relative; overflow:hidden;
  padding:28px 24px; border-radius:20px;
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(84,68,209,.08) 0%, transparent 62%),
    var(--brand-50);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-card);
  color:var(--ink);
}
.intro-points::after{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad);
}
.intro-points > *{ position:relative; z-index:1; }
.intro-points h3{
  display:flex; align-items:center; gap:12px;
  font-size:16px; font-weight:800; color:var(--ink);
  letter-spacing:-.01em; margin:0 0 20px;
}
.intro-points h3::before{
  content:''; width:4px; height:20px; border-radius:2px; flex:none;
  background:var(--grad-diag);
}

/* numbered list — white rows on the tinted card, so each point reads as
   its own item without needing a heavy background */
.pt-list{ display:flex; flex-direction:column; gap:8px; }
.pt-list li{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 12px; border-radius:12px;
  background:var(--white);
  border:1px solid var(--border-soft);
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease),
             transform .28s var(--ease);
}
.pt-list li:hover{
  border-color:var(--brand-200);
  box-shadow:var(--shadow-sm);
  transform:translateX(3px);
}
.pt-num{
  width:30px; height:30px; border-radius:10px; flex:none;
  display:grid; place-items:center;
  background:var(--grad-diag); color:var(--white);
  font-size:12px; font-weight:800;
  box-shadow:var(--shadow-brand-sm);
}
.pt-list strong{
  display:block; font-size:14px; font-weight:700; color:var(--ink);
  line-height:1.4; margin-bottom:2px;
}
.pt-txt{ display:block; font-size:13px; line-height:1.54; color:var(--text-mid); }

.intro-points ul.tick{ display:flex; flex-direction:column; gap:8px; }
.intro-points ul.tick li{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 12px; border-radius:12px;
  font-size:14px; line-height:1.52; color:var(--text-mid);
  background:var(--white);
  border:1px solid var(--border-soft);
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease),
             transform .28s var(--ease);
}
.intro-points ul.tick li:hover{
  border-color:var(--brand-200);
  box-shadow:var(--shadow-sm);
  transform:translateX(3px);
}
.intro-points ul.tick i{ color:var(--brand); font-size:14px; margin-top:3px; flex:none; }

.pt-foot{
  display:flex; align-items:flex-start; gap:12px;
  margin-top:20px; padding:12px 16px;
  border-radius:12px;
  background:rgba(84,68,209,.07);
  border:1px solid var(--border-soft);
  font-size:13px; line-height:1.5; color:var(--text-mid);
}
.pt-foot i{ color:var(--brand); font-size:15px; margin-top:1px; flex:none; }


/* three delivery tiers as cards rather than bullets */
.reach-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.reach-mini{
  padding:20px 20px; border-radius:16px;
  background:var(--white); border:1px solid var(--border-soft);
  box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.reach-mini:hover{
  transform:translateY(-4px); border-color:var(--brand-300);
  box-shadow:var(--shadow-brand-xl);
}
.rm-ico{
  width:44px; height:44px; border-radius:12px; margin-bottom:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand-100) 0%,var(--brand-50) 100%);
  border:1px solid var(--brand-200); color:var(--brand); font-size:16px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.reach-mini:hover .rm-ico{ background:var(--grad); color:var(--white); border-color:transparent; }
.reach-mini h4{ font-size:15px; font-weight:700; color:var(--ink); margin-bottom:8px; letter-spacing:-.2px; }
.reach-mini p{ font-size:14px; line-height:1.55; color:var(--text-mid); margin:0; }

/* feature grid used across service pages */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature-card{
  padding:24px 20px; border-radius:var(--radius-lg);
  border:1px solid var(--border-soft); background:var(--white);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.feature-card:hover{ transform:translateY(-6px); border-color:var(--brand-200); box-shadow:var(--shadow-card-hover); }
.feature-ico{
  width:48px; height:48px; border-radius:12px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-50); border:1px solid var(--border-soft);
  color:var(--brand); font-size:18px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.feature-card:hover .feature-ico{ background:var(--grad); color:var(--white); border-color:transparent; }
.feature-card h3{ font-size:15px; margin-bottom:8px; }
.feature-card p{ font-size:14px; line-height:1.54; color:var(--text-mid); margin:0; }

/* numbered approach steps */
.approach-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.approach-item{
  display:flex; gap:16px; align-items:flex-start;
  padding:24px; border-radius:var(--radius-lg);
  background:var(--white); border:1px solid var(--border-soft);
}
.approach-num{
  flex-shrink:0; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad); color:var(--white);
  font-size:13px; font-weight:800;
}
.approach-item h3{ font-size:15px; margin-bottom:6px; }
.approach-item p{ font-size:14px; line-height:1.52; color:var(--text-mid); margin:0; }

/* add-on modules / integrations grid */
.module-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.module-card{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px; border-radius:var(--radius-lg);
  background:var(--white); border:1px solid var(--border-soft);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.module-card:hover{ transform:translateY(-4px); border-color:var(--brand-200); box-shadow:var(--shadow-card); }
.module-ico{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-50); border:1px solid var(--border-soft);
  color:var(--brand); font-size:14px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.module-card:hover .module-ico{ background:var(--grad); color:var(--white); border-color:transparent; }
.module-card strong{ display:block; font-size:13px; color:var(--ink); margin-bottom:2px; line-height:1.35; }
.module-card small{ display:block; font-size:12px; color:var(--text-dim); line-height:1.45; }

/* Each module group carries its own tone so the four families read apart
   at a glance. Muted tints only - the cards stay secondary to the page. */
.module-grid[data-tone]{ --tone-bg:var(--brand-50); --tone-line:var(--border-soft); --tone-ink:var(--brand); }
/* deeper than the others: this group sits on the tinted brand-50 band,
   and #F0EEFB was near-identical to it */
.module-grid[data-tone="compliance"]   { --tone-bg:#E6E3F8; --tone-line:#C3BDF0; --tone-ink:#6A4FA2; }
.module-grid[data-tone="notifications"]{ --tone-bg:#E6F4F3; --tone-line:#BFDFDC; --tone-ink:#2E7A76; }
.module-grid[data-tone="payments"]     { --tone-bg:#FBF2E4; --tone-line:#EBD9BB; --tone-ink:#8E6019; }
.module-grid[data-tone="operations"]   { --tone-bg:#FBECEF; --tone-line:#EFCFD7; --tone-ink:#983952; }

.module-grid[data-tone] .module-card{
  background:var(--tone-bg);
  border-color:var(--tone-line);
}
.module-grid[data-tone] .module-card:hover{
  border-color:var(--tone-ink);
  box-shadow:var(--shadow-deep-lg);
}
.module-grid[data-tone] .module-ico{
  background:var(--white);
  border-color:var(--tone-line);
  color:var(--tone-ink);
}
.module-grid[data-tone] .module-card:hover .module-ico{
  background:var(--tone-ink); color:var(--white); border-color:transparent;
}
/* the group heading picks up the same tone as its cards */
.module-group-title{
  display:flex; align-items:center; gap:12px;
  text-align:left; font-size:16px; margin-bottom:12px;
}
.module-group-title::before{
  content:''; width:5px; height:19px; border-radius:4px;
  background:var(--tone-ink,var(--brand)); flex:none;
}
.module-group-title[data-tone="compliance"]   { --tone-ink:#6A4FA2; }
.module-group-title[data-tone="notifications"]{ --tone-ink:#2E7A76; }
.module-group-title[data-tone="payments"]     { --tone-ink:#8E6019; }
.module-group-title[data-tone="operations"]   { --tone-ink:#983952; }
.module-note{
  display:flex; align-items:flex-start; justify-content:center; gap:8px;
  font-size:14px; color:var(--text-dim); margin:28px auto 0; max-width:720px; text-align:center;
}
.module-note i{ color:var(--brand); margin-top:4px; flex-shrink:0; }

/* contact page blocks */
.contact-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:36px; }
.contact-card{
  position:relative; overflow:hidden;
  padding:24px 20px; border-radius:16px;
  background:linear-gradient(170deg,var(--brand-100) 0%,var(--brand-50) 40%,var(--white) 100%);
  border:1px solid var(--brand-200);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* gradient cap so the three cards read as deliberate, not faint boxes */
.contact-card::after{
  content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad);
}
.contact-card:hover{
  transform:translateY(-5px); border-color:var(--brand-400);
  box-shadow:var(--shadow-brand-xl);
}
.contact-card .feature-ico{
  margin-bottom:12px;
  background:var(--grad); color:var(--white); border-color:transparent;
  box-shadow:var(--shadow-brand-md);
}
.contact-card h3{
  font-size:11px; text-transform:uppercase; letter-spacing:.16em;
  color:var(--brand); font-weight:800; margin-bottom:8px;
}
.contact-card p{ font-size:15px; line-height:1.48; color:var(--ink); margin:0; font-weight:700; letter-spacing:-.2px; }
.contact-card p a{ color:var(--ink); }
.contact-card p a:hover{ color:var(--brand); }
.contact-card small{
  display:block; font-size:12px; line-height:1.5;
  color:var(--text-mid); margin-top:12px; padding-top:12px;
  border-top:1px solid var(--brand-200); font-weight:400;
}

/* =============== AREAS WE SERVE (full-width section) =============== */
.areas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.area-card{
  position:relative;
  padding:20px; border-radius:16px;
  background:var(--white); border:1px solid var(--border-soft);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.area-card:hover{
  transform:translateY(-4px); border-color:var(--brand-300);
  box-shadow:var(--shadow-brand-xl);
}
.area-ico{
  width:48px; height:48px; border-radius:12px; margin-bottom:12px;
  display:grid; place-items:center;
  background:var(--grad); color:var(--white); font-size:18px;
  box-shadow:var(--shadow-brand-lg);
}
.area-rank{
  display:inline-block; margin-bottom:8px;
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand);
}
.area-card h3{ font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.5px; margin-bottom:8px; }
.area-card > p{ font-size:14px; line-height:1.55; color:var(--text-mid); margin-bottom:12px; }

.area-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.area-chips li{
  font-size:13px; font-weight:600; color:var(--brand-700);
  padding:4px 12px; border-radius:999px;
  background:var(--brand-50); border:1px solid var(--brand-200);
}
/* dashed and unfilled, so it reads as "and nearby" rather than a
   specific named town among the others */
.area-chips li.area-chip-more{
  color:var(--text-dim); font-weight:600;
  background:none; border:1px dashed var(--border);
}
.area-points{ display:flex; flex-direction:column; gap:8px; }
.area-points li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:14px; line-height:1.5; color:var(--text-mid);
}
.area-points i{ color:var(--brand); font-size:12px; margin-top:4px; flex:none; }

.areas-note{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:36px auto 0; max-width:760px; text-align:center;
  font-size:14px; color:var(--text-mid);
}
.areas-note i{ color:var(--brand); font-size:15px; flex:none; }

/* One surface, not two cards. A soft tint bleeds across the whole panel
   so the copy side and the form side read as a continuous sheet, with a
   hairline as the only division between them. */
.contact-split{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.05fr 1fr; gap:0;
  align-items:stretch;
  border-radius:20px;
  background:
    radial-gradient(78% 120% at 0% 0%, rgba(84,68,209,.10) 0%, transparent 62%),
    radial-gradient(62% 100% at 100% 100%, rgba(199,193,242,.16) 0%, transparent 60%),
    var(--white);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-lg);
}
.contact-split::after{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad); z-index:1;
}

/* =============== TECHNOLOGY PARTNER (partner + product, one row) =============== */
.partner-feature{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:.88fr 1.12fr;
  max-width:1000px; margin:0 auto;
  border-radius:20px;
  background:linear-gradient(140deg,var(--brand-900) 0%,var(--brand-700) 55%,var(--brand) 100%);
  box-shadow:var(--shadow-deep-2xl);
}
.pf-dots{
  position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(199,193,242,.2) 1px, transparent 1px);
  background-size:20px 20px;
  mask-image:radial-gradient(ellipse 70% 80% at 25% 25%, black 20%, transparent 82%);
}

/* left — the partner */
.pf-partner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:32px 28px;
  color:var(--white);
}
.pf-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-200); background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  padding:4px 12px; border-radius:999px; margin-bottom:20px;
}
.pf-logo{
  width:66px; height:66px; border-radius:16px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
  color:var(--white); font-size:18px; font-weight:800; letter-spacing:.02em;
}
.pf-partner h3{ color:var(--white); font-size:18px; margin-bottom:12px; line-height:1.3; }
.pf-partner p{ font-size:14px; line-height:1.55; color:rgba(255,255,255,.78); margin:0 0 auto; }
.pf-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:24px; padding:12px 16px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:700; color:var(--white);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26);
  transition:background .25s ease, transform .25s ease;
}
.pf-link i{ font-size:11px; }
.pf-link:hover{ background:rgba(255,255,255,.26); transform:translateY(-2px); }

/* right — their product, on a light panel for contrast */
.pf-product{
  position:relative; z-index:1;
  margin:16px 16px 16px 0;
  padding:24px 24px;
  border-radius:16px;
  background:var(--white);
  box-shadow:var(--shadow-deep-xl);
}
.pf-product-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--white); background:var(--grad);
  padding:4px 12px; border-radius:999px; margin-bottom:12px;
}
.pf-product h3{ font-size:18px; margin-bottom:8px; }
.pf-product > p{ font-size:14px; line-height:1.55; color:var(--text-mid); margin:0 0 20px; }

.pf-stats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.pf-stat{
  padding:12px 12px; border-radius:var(--radius-sm); text-align:center;
  background:var(--brand-50); border:1px solid var(--border-soft);
}
.pf-stat .stat-num{ font-size:28px; line-height:1; color:var(--ink); }
.pf-stat .stat-suffix{ font-size:28px; line-height:1; color:var(--brand); }
.pf-stat p{
  margin:8px 0 0; font-size:11px; font-weight:700; line-height:1.35;
  color:var(--text-dim); text-transform:uppercase; letter-spacing:.12em;
}

.pf-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.pf-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:700; white-space:nowrap;
  background:var(--grad); color:var(--white);
  border:1px solid transparent;
  box-shadow:var(--shadow-brand-md);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.pf-btn i{ font-size:11px; }
.pf-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-brand-lg); }
.pf-btn.ghost{
  background:var(--white); color:var(--brand); border-color:var(--border);
  box-shadow:none;
}
.pf-btn.ghost:hover{ background:var(--brand-50); border-color:var(--brand-300); }
.pf-credit{
  font-size:11px; color:var(--text-dim); margin:16px 0 0; font-style:italic; line-height:1.48;
}

.partner-note{
  display:flex; align-items:flex-start; justify-content:center; gap:8px;
  max-width:720px; margin:32px auto 0; text-align:center;
  font-size:14px; color:var(--text-dim);
}
.partner-note i{ color:var(--brand); margin-top:4px; flex-shrink:0; }

/* budget-tier pointer to the venture, kept visually secondary so it reads as
   a lower tier rather than an alternative to the main service */
.tier-note{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  max-width:1000px; margin:0 auto; padding:20px 20px;
  border-radius:var(--radius-lg);
  background:var(--brand-50);
  border:1px dashed var(--brand-300);
}
.tier-ico{
  width:42px; height:42px; border-radius:12px; flex:none;
  display:grid; place-items:center;
  background:var(--white); border:1px solid var(--brand-200);
  color:var(--brand); font-size:16px;
}
.tier-note strong{ display:block; font-size:14px; color:var(--ink); margin-bottom:4px; }
.tier-note p{ font-size:14px; line-height:1.54; color:var(--text-mid); margin:0; }
.tier-note p strong{ display:inline; font-size:inherit; }
.tier-note .btn{ white-space:nowrap; font-size:13px; padding:12px 16px; }

/* =============== OTHER PRODUCTS: AUTO-SCROLL MARQUEE =============== */
.prod-marquee{
  position:relative; overflow:hidden;
  padding:6px 0 12px;
  /* soften both ends so cards enter and leave instead of being clipped */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.prod-track{
  display:flex; align-items:stretch; gap:16px;
  width:max-content;
  animation:prodScroll 34s linear infinite;
}
.prod-marquee:hover .prod-track{ animation-play-state:paused; }
@keyframes prodScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

.prod-card{
  position:relative; overflow:hidden;
  flex:none; width:270px;
  display:flex; align-items:center; gap:12px;
  padding:16px 20px; border-radius:16px;
  border:1px solid var(--tone-line,var(--border-soft));
  background:var(--tone-bg,var(--white));
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* accent cap, same device as the product cards on the homepage */
.prod-card::after{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--tone-grad,var(--grad));
}
.prod-card:hover{
  transform:translateY(-4px);
  border-color:var(--tone-ink,var(--brand));
  box-shadow:var(--shadow-deep-xl);
}
.prod-ico{
  width:44px; height:44px; border-radius:12px; flex:none;
  display:grid; place-items:center;
  background:var(--tone-grad,var(--grad)); color:var(--white); font-size:16px;
  box-shadow:var(--shadow-deep-md);
}
.prod-txt{ min-width:0; }
.prod-txt strong{
  display:block; font-size:14px; font-weight:800; color:var(--ink);
  line-height:1.3; margin-bottom:3px; letter-spacing:-.2px;
}
.prod-txt small{
  display:block; font-size:11px; line-height:1.4; color:var(--tone-ink,var(--text-mid));
  font-weight:600;
}

/* per-product tones, matching the homepage product cards */
.prod-card[data-tone="ca"]     { --tone-bg:#F1EAFB; --tone-line:#D9CBF2; --tone-ink:#6A4FA2; --tone-grad:linear-gradient(135deg,#7C5FB5,#5A3F91); }
.prod-card[data-tone="build"]  { --tone-bg:#FDF3E0; --tone-line:#F0DDB8; --tone-ink:#8E6019; --tone-grad:linear-gradient(135deg,#C98B2E,#8F5F14); }
.prod-card[data-tone="machine"]{ --tone-bg:#E3EFFA; --tone-line:#C0D8EE; --tone-ink:#2F6285; --tone-grad:linear-gradient(135deg,#3F7EA8,#28587A); }
.prod-card[data-tone="invoice"]{ --tone-bg:#E8F7E9; --tone-line:#C2E5C6; --tone-ink:#27714B; --tone-grad:linear-gradient(135deg,#3B9268,#226643); }
.prod-card[data-tone="resort"] { --tone-bg:#FCE9EE; --tone-line:#F2CCD7; --tone-ink:#983952; --tone-grad:linear-gradient(135deg,#C05470,#8A2F47); }
.prod-card[data-tone="agency"] { --tone-bg:#EDEBE2; --tone-line:#DEDBC9; --tone-ink:#5F5D38; --tone-grad:linear-gradient(135deg,#7E7B4C,#4B4A2C); }

@media (prefers-reduced-motion: reduce){
  .prod-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
}
@media (max-width:860px){
  .prod-card{ width:240px; padding:12px 16px; }
}

/* =============== FOOTER: PRODUCT + VENTURE SITES =============== */
/* =============== OUR PRODUCTS (footer) ===============
   One list, one treatment. Nine products in a plain 3-column grid with
   an identical icon tile each — the earlier per-product colours read as
   noise at this size. Colour appears only on hover, on the tile you are
   actually pointing at, which keeps the block calm but not flat. */
.footer-sites{
  margin:0 0 28px; padding:24px 0 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.fs-list{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:4px 24px;
}
.fs-list a{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:8px 12px; border-radius:10px;
  transition:background .22s var(--ease), transform .22s var(--ease);
}
.fs-list a:hover{
  background:rgba(255,255,255,.06);
  transform:translateX(2px);
}

.fs-ico{
  width:34px; height:34px; border-radius:10px; flex:none;
  display:grid; place-items:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:var(--brand-200); font-size:14px;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.fs-list a:hover .fs-ico{
  background:var(--grad-diag);
  border-color:transparent;
  color:var(--white);
  box-shadow:0 6px 14px -8px rgba(0,0,0,.8);
}

.fs-txt{ min-width:0; }
.fs-txt strong{
  display:block; font-size:13px; font-weight:700; color:var(--white);
  line-height:1.3; margin-bottom:2px;
}
.fs-txt small{
  display:block; font-size:11.5px; line-height:1.4;
  color:rgba(255,255,255,.58);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color .22s var(--ease);
}
.fs-list a:hover .fs-txt small{ color:var(--brand-200); }

/* the external-link mark only appears on hover, so nine of them are not
   competing for attention at rest */
.fs-list a::after{
  content:'\F1C5'; font-family:'bootstrap-icons';
  margin-left:auto; padding-left:8px; font-size:11px;
  color:rgba(255,255,255,.0); transition:color .22s var(--ease);
}
.fs-list a:hover::after{ color:rgba(255,255,255,.65); }

@media (max-width:1080px){
  .fs-list{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .fs-list{ grid-template-columns:1fr; }
}



/* =============== OUR VENTURES =============== */
/* deliberately light: the Technology Partner panel is a dark gradient, and a
   venture we own should not read as another partner */
.venture-card{
  position:relative; overflow:hidden;
  max-width:1000px; margin:0 auto; padding:24px;
  border-radius:20px;
  background:linear-gradient(150deg,var(--brand-100) 0%,var(--brand-50) 45%,var(--white) 100%);
  border:1px solid var(--brand-300);
  box-shadow:var(--shadow-deep-xl);
}
/* gradient cap, same device as the contact cards, so the card reads as
   deliberate rather than a plain white box on a white section */
.venture-card::after{
  content:''; position:absolute; top:0; left:0; right:0; height:5px; background:var(--grad);
}
.venture-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px; margin-bottom:12px;
  background:var(--white); border:1px solid var(--brand-300);
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand-700);
}
.venture-badge i{ color:var(--brand); font-size:11px; }
.venture-card h3{ font-size:22px; font-weight:800; letter-spacing:-.7px; margin-bottom:8px; }
.venture-lead{ font-size:14px; line-height:1.56; color:var(--text-mid); margin-bottom:20px; }

.venture-split{
  display:grid; grid-template-columns:1fr 1fr; gap:16px 24px;
  padding:20px 20px; margin-bottom:20px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--brand-200);
}
.venture-split strong{
  display:block; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand); margin-bottom:8px;
}
.venture-split p{ font-size:14px; line-height:1.54; color:var(--text-mid); margin:0; }
.venture-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.venture-actions .btn{ font-size:13px; padding:12px 16px; }

/* =============== INDUSTRY STRIP + "ASK US" CALLOUT =============== */
.industry-strip{ margin-top:36px; text-align:center; }
.industry-strip > p{
  font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:12px;
}
.industry-chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.industry-chips span{
  padding:8px 12px; border-radius:999px;
  font-size:12px; font-weight:600; color:var(--brand-700);
  background:var(--brand-50); border:1px solid var(--border-soft);
}
/* same chip list reused inside a page section rather than the dark footer */
.industry-chips.sector-chips{ justify-content:flex-start; margin-top:4px; }
.industry-chips.sector-chips li{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  font-size:13px; font-weight:600; color:var(--brand-700);
  background:var(--white); border:1px solid var(--brand-200);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.industry-chips.sector-chips li:hover{
  border-color:var(--brand-400); transform:translateY(-2px);
  box-shadow:var(--shadow-brand-md);
}
.industry-chips.sector-chips i{ color:var(--brand); font-size:13px; flex:none; }

.industry-chips span.other{
  background:transparent; border-style:dashed; border-color:var(--brand-300);
  color:var(--text-mid); font-style:italic;
}

.build-ask{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  max-width:1000px; margin:40px auto 0; padding:20px 24px;
  border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--brand-100) 0%,var(--brand-50) 60%,var(--white) 100%);
  border:1px solid var(--brand-200);
}
.build-ask-ico{
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--grad); color:var(--white); font-size:18px;
  box-shadow:var(--shadow-brand-md);
}
.build-ask h3{ font-size:16px; font-weight:800; margin-bottom:6px; color:var(--ink); }
.build-ask p{ font-size:14px; line-height:1.55; color:var(--text-mid); margin:0; }
.build-ask .btn{ flex-shrink:0; white-space:nowrap; }

/* =============== ENQUIRY MODAL =============== */
.enq-overlay{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center;
  padding:24px;
  background:rgba(26,22,51,.62);
  backdrop-filter:blur(3px);
  overflow-y:auto;
}
.enq-overlay[hidden]{ display:none !important; }
.enq-modal{
  position:relative;
  width:min(720px,100%); max-height:calc(100vh - 48px); overflow-y:auto;
  background:var(--white); border-radius:20px;
  padding:20px 20px 24px;
  box-shadow:var(--shadow-deep-2xl);
  animation:enqPop .32s var(--ease);
}
@keyframes enqPop{ from{ opacity:0; transform:translateY(14px) scale(.985);} to{ opacity:1; transform:none; } }
.enq-close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand-50); border:1px solid var(--border-soft);
  color:var(--brand-700); font-size:13px; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.enq-close:hover{ background:var(--grad); color:var(--white); border-color:transparent; }

.enq-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:20px; padding-right:36px; }
.enq-ico{
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--grad); color:var(--white); font-size:16px;
}
.enq-head h3{ font-size:18px; font-weight:800; color:var(--ink); margin-bottom:4px; }
.enq-head p{ font-size:14px; color:var(--text-mid); margin:0; line-height:1.5; }

.enq-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.enq-field{ display:block; margin-bottom:12px; }
.enq-field > span{
  display:block; font-size:12px; font-weight:700; color:var(--ink);
  margin-bottom:6px; letter-spacing:.01em;
}
.enq-field > span em{ color:#c0392b; font-style:normal; }
.enq-field input,
.enq-field textarea{
  width:100%; padding:12px 12px;
  font-family:inherit; font-size:13px; color:var(--ink);
  background:var(--white);
  border:1px solid var(--brand-200); border-radius:8px;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.enq-field input::placeholder,
.enq-field textarea::placeholder{ color:var(--text-dim); }
.enq-field input:focus,
.enq-field textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:var(--ring-brand);
}
.enq-field textarea{ resize:vertical; min-height:96px; line-height:1.52; }
.enq-phone-group{ display:grid; grid-template-columns:88px 1fr; gap:8px; }
.enq-dial{ text-align:center; }

.enq-error{
  display:flex; align-items:center; gap:8px;
  margin:0 0 16px; padding:12px 12px; border-radius:8px;
  background:#fdecea; border:1px solid #f5c6c0;
  color:#a33227; font-size:12px; font-weight:600;
}
.enq-error[hidden]{ display:none !important; }

.enq-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:4px; }
.enq-actions .btn{ font-size:13px; padding:12px 16px; }

.enq-success{ text-align:center; padding:16px 0 8px; }
.enq-success[hidden]{ display:none !important; }
.enq-success-ico{
  width:62px; height:62px; border-radius:50%; margin:0 auto 16px;
  display:grid; place-items:center;
  background:var(--grad); color:var(--white); font-size:24px;
  box-shadow:var(--shadow-brand-lg);
}
.enq-success h3{ font-size:18px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.enq-success p{ font-size:14px; color:var(--text-mid); line-height:1.55; margin:0 auto 20px; max-width:44ch; }
body.enq-open{ overflow:hidden; }

/* =============== MISSION / VISION =============== */
.mv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.mv-card{
  position:relative; overflow:hidden;
  padding:28px 24px;
  border-radius:var(--radius-lg);
  background:linear-gradient(145deg,var(--brand-900),var(--brand-700) 58%,var(--brand));
  color:var(--white);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.mv-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-deep-xl); }
.mv-card.alt{ background:linear-gradient(145deg,var(--brand-700),var(--brand) 55%,var(--brand-400)); }
.mv-dots{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(199,193,242,.22) 1px, transparent 1px);
  background-size:20px 20px;
  mask-image:radial-gradient(ellipse 70% 80% at 80% 20%, black 20%, transparent 80%);
}
.mv-card > *{ position:relative; z-index:1; }
.mv-card > .mv-dots{ position:absolute; z-index:0; }
.mv-ico{
  width:52px; height:52px; border-radius:16px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26);
  color:var(--white); font-size:18px;
}
.mv-card h2{
  color:var(--white); font-size:20px; margin-bottom:12px;
  display:flex; align-items:center; gap:12px;
}
.mv-card p{ font-size:14px; line-height:1.58; color:rgba(255,255,255,.85); margin:0; }
.mv-tag{
  display:inline-block; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-200); margin-bottom:12px;
}

/* value cards */
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.value-card{
  position:relative; padding:20px;
  border-radius:var(--radius-lg);
  background:var(--white); border:1px solid var(--border-soft);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.value-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.value-card:hover{ transform:translateY(-6px); border-color:var(--brand-200); box-shadow:var(--shadow-card-hover); }
.value-card:hover::before{ transform:scaleX(1); }
.value-num{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  color:var(--brand-500); display:block; margin-bottom:12px;
}
.value-card h3{ font-size:15px; margin-bottom:8px; }
.value-card p{ font-size:14px; line-height:1.54; color:var(--text-mid); margin:0; }

/* =============== GALLERY =============== */
.gallery-filters{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:28px;
}
.gallery-filter{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  background:var(--white); border:1px solid var(--border);
  font-family:inherit; font-size:13px; font-weight:600; color:var(--text-mid);
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.gallery-filter i{ font-size:13px; }
.gallery-filter:hover{ border-color:var(--brand-300); color:var(--brand); transform:translateY(-2px); }
.gallery-filter.active{
  background:var(--grad); color:var(--white); border-color:transparent;
  box-shadow:var(--shadow-brand-md);
}
.gallery-filter .count{
  font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px;
  background:var(--brand-50); color:var(--brand);
}
.gallery-filter.active .count{ background:rgba(255,255,255,.22); color:var(--white); }

.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.gallery-item{
  position:relative; display:block;
  border:none; padding:0; margin:0;
  border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4 / 3;
  cursor:pointer; font-family:inherit; text-align:left;
  /* branded placeholder shows until a real photo is dropped in */
  background:linear-gradient(140deg,var(--brand-800),var(--brand-700) 55%,var(--brand));
  box-shadow:var(--shadow-card);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.gallery-item.is-hidden{ display:none; }
.gallery-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card-hover); }
.gallery-item img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--ease);
}
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-ph{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:rgba(255,255,255,.5); font-size:22px;
}
.gallery-ph span{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.gallery-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:24px 12px 12px;
  background:linear-gradient(to top, rgba(16,12,36,.88), rgba(16,12,36,.55) 55%, transparent);
  color:var(--white);
  transform:translateY(6px); opacity:.92;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.gallery-item:hover .gallery-cap{ transform:translateY(0); opacity:1; }
.gallery-cap strong{ display:block; font-size:13px; line-height:1.35; }
.gallery-cap small{
  display:block; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand-200); margin-bottom:3px;
}
.gallery-zoom{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.9); color:var(--brand-700); font-size:12px;
  opacity:0; transform:scale(.8);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.gallery-item:hover .gallery-zoom{ opacity:1; transform:scale(1); }
.gallery-empty{ text-align:center; padding:28px 0; color:var(--text-dim); font-size:14px; }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:2200;
  display:flex; align-items:center; justify-content:center;
  padding:32px;
  background:rgba(14,11,32,.92);
  backdrop-filter:blur(4px);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.lightbox.show{ opacity:1; visibility:visible; }
.lightbox-inner{
  position:relative; max-width:1000px; width:100%;
  border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(140deg,var(--brand-800),var(--brand-700) 55%,var(--brand));
  aspect-ratio:4 / 3; max-height:78vh;
  transform:scale(.96); transition:transform .35s var(--ease);
}
.lightbox.show .lightbox-inner{ transform:scale(1); }
.lightbox-inner img{ width:100%; height:100%; object-fit:contain; background:#100C24; }
.lightbox-ph{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  color:rgba(255,255,255,.55); font-size:32px;
}
.lightbox-ph span{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.lightbox-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:28px 16px 16px; color:var(--white);
  background:linear-gradient(to top, rgba(14,11,32,.92), transparent);
}
.lightbox-cap strong{ display:block; font-size:15px; }
.lightbox-cap small{
  display:block; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand-200); margin-bottom:4px;
}
.lightbox-btn{
  position:absolute; z-index:5;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26);
  color:var(--white); font-size:14px; cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.lightbox-btn:hover{ background:rgba(255,255,255,.28); }
.lightbox-close{ top:20px; right:22px; }
.lightbox-close:hover{ transform:rotate(90deg); }
.lightbox-prev{ left:22px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:22px; top:50%; transform:translateY(-50%); }
.lightbox-prev:hover,.lightbox-next:hover{ transform:translateY(-50%) scale(1.08); }
.lightbox-count{
  position:absolute; top:24px; left:24px; z-index:5;
  font-size:12px; font-weight:700; color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.12); padding:6px 12px; border-radius:999px;
}

/* related services strip */
.related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.related-card{
  display:block; padding:20px; border-radius:var(--radius-lg);
  border:1px solid var(--border-soft); background:var(--white);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.related-card:hover{ transform:translateY(-5px); border-color:var(--brand-200); box-shadow:var(--shadow-card); }
.related-card i{ color:var(--brand); font-size:18px; }
.related-card strong{ display:block; font-size:14px; color:var(--ink); margin:12px 0 4px; }
.related-card span{ display:block; font-size:12px; color:var(--text-dim); line-height:1.48; }

/* =============== RESPONSIVE =============== */
/* keep content clear of the fixed right social rail */
@media (min-width:861px) and (max-width:1360px){
  .container,.section-divider{ padding-left:64px; padding-right:64px; }
}
@media (max-width:1150px){
  .nav-link{ padding:8px 12px; font-size:13px; }
}
@media (max-width:1080px){
  .faq-cols{ grid-template-columns:1fr; gap:0; }
  .build-ask{ grid-template-columns:auto 1fr; row-gap:16px; }
  .build-ask .btn{ grid-column:1 / -1; justify-content:center; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:0; max-width:520px; margin:0 auto; }
  /* the 75% inset only makes sense beside the copy column; once the hero
     stacks, the visual is already capped, so shrinking again leaves the
     inputs too narrow to use */
  .hero-form-wrap{ width:100%; margin-left:0; }
  .contact-grid{ grid-template-columns:1fr; }
  .why-split{ grid-template-columns:1fr; gap:32px; }
  .why-intro{ position:static; }
  .build-grid{ grid-template-columns:repeat(2,1fr); }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .module-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .value-grid{ grid-template-columns:repeat(2,1fr); }
  .reach-grid{ grid-template-columns:repeat(2,1fr); }
  .reach-panel{ padding:32px 24px 32px; }
  .partner-feature{ grid-template-columns:1fr; }
  .pf-product{ margin:0 16px 16px; }
  .pf-partner{ padding:20px 16px 20px; }
  .contact-cards{ grid-template-columns:1fr; }
  .contact-split{ grid-template-columns:1fr; gap:28px; }
  .related-grid{ grid-template-columns:repeat(2,1fr); }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .products-grid{ grid-template-columns:repeat(2,1fr); }
  .timeline{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .timeline::before{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
/* nav collapses to the slide-out panel well before 860px, because 8 items
   + logo + CTA need ~1030px to sit on one line without cramping */
@media (max-width:1080px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; height:100dvh; width:290px;
    background:var(--white); border-left:1px solid var(--border);
    padding:68px 16px 24px;
    transform:translateX(100%);
    z-index:999;
    box-shadow:var(--shadow-edge-left);
    /* the panel is taller than a landscape phone once the services list expands */
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    /* Hidden panels must leave the tab order — otherwise a keyboard user
       tabbing off the logo lands on 14 links sitting off-screen. visibility
       flips only after the slide-out finishes, so the animation still runs. */
    visibility:hidden;
    transition:transform .4s var(--ease), visibility 0s linear .4s;
  }
  .main-nav.open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .4s var(--ease), visibility 0s linear 0s;
  }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:6px; }
  .nav-link{ display:block; padding:12px 12px; }
  /* dropdown becomes an always-open nested list on mobile */
  .has-dropdown > .nav-link .bi{ display:none; }
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    width:auto; padding:0 0 6px 12px; margin-top:-2px;
    background:none;
    border:none; border-left:2px solid var(--brand-200);
    border-radius:0; box-shadow:none; overflow:visible;
  }
  .dropdown::after,.dropdown::before{ display:none; }
  .dropdown-head{ display:none; }
  .main-nav .dropdown-grid{ grid-template-columns:1fr; gap:6px; }
  .main-nav .dropdown-grid a{ padding:12px 12px; border-radius:8px; gap:12px; }
  .main-nav .dropdown-grid a:hover{ transform:none; }
  .dd-ico{ width:32px; height:32px; font-size:13px; border-radius:8px; }
  .dd-txt strong{ font-size:13px; }
  .dd-txt small{ display:none; }
  .dd-arrow{ display:none; }
  .dropdown-foot{ margin-top:8px; padding:12px 12px; }
  .dropdown-foot small{ display:none; }
  .burger{ display:flex; }
  /* the panel is a child of the header, so it paints over the burger unless
     the actions are lifted above it — otherwise the menu can't be closed */
  .header-actions{ position:relative; z-index:1001; }
}
@media (max-width:860px){
  /* section rhythm steps down proportionally on small screens so the
     page keeps breathing without wasting a phone's vertical space */
  .page-section{ padding:48px 0; }
  .page-hero{ padding:104px 0 48px; }
  .hero{ padding:96px 0 40px; }
  .section-head{ margin-bottom:32px; }
  .container{ padding:0 20px; }

  .services-grid{ grid-template-columns:1fr; }
  .products-grid{ grid-template-columns:1fr; }
  .why-row{ grid-template-columns:auto 1fr; gap:12px; padding:16px 12px; }
  .why-row-num{ display:none; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .social-fixed,
  .contact-fixed{ display:none; }
  .build-grid{ grid-template-columns:1fr; }
  .build-ask{ grid-template-columns:1fr; text-align:center; justify-items:center; padding:20px 16px; }
  .industry-chips span{ font-size:12px; padding:8px 12px; }
  .media-split,
  .media-split.media-left{ grid-template-columns:1fr; gap:28px; }
  .media-split.media-left .mg-col{ order:0; }
  .mg-col{ position:static; max-width:420px; }
  .about-split{ grid-template-columns:1fr; gap:28px; }
  .about-visual{ position:static; max-width:420px; }
  .intro-split{ grid-template-columns:1fr; gap:32px; }
  .reach-row{ grid-template-columns:1fr; gap:12px; margin-top:36px; }
  .areas-grid{ grid-template-columns:1fr; gap:16px; }
  .venture-card{ padding:20px 16px 20px; }
  .tier-note{ grid-template-columns:1fr; text-align:left; gap:12px; }
  .tier-note .btn{ justify-content:center; }
  .venture-split{ grid-template-columns:1fr; gap:16px; }
  .phone-group{ grid-template-columns:80px 1fr; }
  .enq-row{ grid-template-columns:1fr; gap:0; }
  .enq-modal{ padding:16px 12px 20px; }
  .enq-actions .btn{ width:100%; justify-content:center; }
  .reach-grid{ grid-template-columns:1fr; }
  .reach-panel{ padding:24px 16px 24px; border-radius:16px; }
  .reach-note{ align-items:flex-start; }
  .feature-grid{ grid-template-columns:1fr; }
  .module-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr; }
  .mv-grid{ grid-template-columns:1fr; }
  .value-grid{ grid-template-columns:1fr; }
  .lightbox{ padding:16px; }
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }
  .related-grid{ grid-template-columns:1fr; }
  .approach-list{ grid-template-columns:1fr; }
  .compare-duo{ grid-template-columns:1fr; }
  .compare-vs{ margin:-16px auto; }
  .compare-custom{ padding-right:28px; }
  .compare-offshelf{ padding-left:28px; }
  .def-callout{ flex-direction:column; gap:12px; padding:24px; }
}
@media (max-width:640px){
  .header-actions{ gap:12px; }
  .header-actions .btn-glow{ display:none; }
  .brand-text{ font-size:16px; }
  .brand-mark{ width:38px; height:38px; font-size:14px; }
}
@media (max-width:560px){
  .hero{ padding-top:88px; }
  .hero-cta .btn{ width:100%; justify-content:center; }
  .hero-cta{ flex-direction:column; }
  .hero-form-wrap{ padding:20px 20px; }
  .contact-form{ padding:28px; }
  .testimonial-card{ flex-basis:300px; padding:20px 20px; }
  .timeline{ grid-template-columns:1fr; row-gap:32px; }
  .cta-trust-row{ gap:12px; flex-direction:column; }
  .why-stats{ gap:12px; }
  .why-stat .stat-num,.why-stat .stat-suffix{ font-size:22px; }
  .why-stat p{ font-size:11px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =============== FAQ SURFACE ===============
   FAQ sections sit on white on some pages and on the tinted band on
   others, so a single flat card colour disappears on one of them.
   Closed rows take a faint lavender that reads against both; the open
   row goes white so the answer you are reading lifts off the stack. */
.faq-item{
  background:#E9E6F9;
  border-color:rgba(84,68,209,.16);
}
.faq-item summary:hover{ background:rgba(255,255,255,.45); }
.faq-item[open]{
  background:var(--white);
  border-color:var(--brand-200);
  box-shadow:var(--shadow-card);
}
.faq-answer{ border-top:1px solid var(--border-soft); padding-top:16px; margin-top:0; }

/* =============== JUSTIFIED PROSE ===============
   Declared through :where() so its specificity is zero and every
   existing text-align rule still wins. Containers that centre their
   children by inheritance are restored explicitly underneath, because
   a directly targeted <p> beats an inherited value regardless of
   specificity. hyphens:auto stops justification opening rivers. */
:where(.page-section, .explainer, .page-narrow, .faq-answer,
       .services, .products, .why-choose, .process, .testimonials) :where(p){
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;
  hyphens:auto;
}
.form-success p,
.explainer-narrative, .explainer-narrative p,
.tl-step p,
.cta-banner p,
.pf-stat p,
.industry-strip > p,
.enq-success p,
.build-ask p,
.av-stats li p,
.section-head p,
.section-sub, .section-sub.center{
  text-align:center;
  hyphens:manual;
}

/* =============== GET IN TOUCH PANEL (contact) ===============
   The left column was loose text next to a solid form card, which made
   it read as leftover copy. It is now a panel in its own right, with
   the four steps drawn as a connected timeline rather than four
   unrelated rows. */
/* the left half of the shared panel — no background or border of its
   own; the hairline on the right edge is the only division */
.gi-panel{
  position:relative;
  padding:36px 32px;
  background:none;
  border:0;
  border-right:1px solid var(--border-soft);
  border-radius:0;
  box-shadow:none;
}
.gi-title{
  font-size:clamp(24px,2.6vw,30px); font-weight:800; color:var(--ink);
  line-height:1.2; letter-spacing:-.03em; margin:0 0 12px;
}
.gi-lead{ font-size:15px; line-height:1.6; color:var(--text-mid); margin:0 0 24px; }

.gi-steps-head{
  display:flex; align-items:center; gap:12px;
  padding-top:20px; margin-bottom:16px;
  border-top:1px solid var(--border-soft);
}
.gi-steps-ico{
  width:36px; height:36px; border-radius:12px; flex:none;
  display:grid; place-items:center;
  background:var(--grad-diag); color:var(--white); font-size:16px;
  box-shadow:var(--shadow-brand-sm);
}
.gi-steps-txt{ min-width:0; }
.gi-steps-txt strong{
  display:block; font-size:15px; font-weight:800; color:var(--ink); line-height:1.3;
}
.gi-steps-txt small{
  display:block; font-size:12px; color:var(--text-dim); margin-top:2px; font-weight:500;
}

/* the connector runs behind the numbers so the four steps read as one
   sequence; it stops short of the last marker rather than dangling */
.gi-steps{ position:relative; list-style:none; margin:0; padding:0; }
.gi-steps::before{
  content:''; position:absolute; left:15px; top:14px; bottom:26px;
  width:2px; border-radius:2px;
  background:linear-gradient(180deg,var(--brand-300),rgba(160,150,231,.15));
}
.gi-steps li{
  position:relative; display:flex; gap:12px; align-items:flex-start;
  padding:0 0 16px 0;
}
.gi-steps li:last-child{ padding-bottom:0; }
.gi-steps .n{
  position:relative; z-index:1; flex:none;
  width:32px; height:32px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--white); color:var(--brand);
  border:2px solid var(--brand-300);
  font-size:13px; font-weight:800;
  box-shadow:0 2px 6px -2px rgba(26,22,51,.18);
}
.gi-step-txt{ min-width:0; padding-top:4px; }
.gi-step-txt strong{
  display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:2px;
}
.gi-step-txt small{
  display:block; font-size:13px; line-height:1.52; color:var(--text-mid);
}

.gi-assure{
  display:flex; align-items:flex-start; gap:12px;
  margin-top:24px; padding:12px 16px;
  border-radius:12px;
  /* the shell is white-based now, so a white overlay would vanish —
     a faint brand wash is what reads against it */
  background:rgba(84,68,209,.07);
  border:1px solid var(--border-soft);
  font-size:13px; line-height:1.5; color:var(--text-mid);
}
.gi-assure i{ color:var(--brand); font-size:15px; flex:none; margin-top:1px; }

/* =============== TIPS PANEL (contact) ===============
   Reuses the same numbered-timeline pattern as the Get In Touch panel
   above it — one visual language for both lists on the page — housed
   in its own light card instead of the dark gradient aside used
   elsewhere, since there is no other dark panel nearby to justify one
   here and it was reading as an unrelated patch. */
.tips-panel{
  padding:28px 28px 24px;
  background:var(--brand-50);
  border:1px solid var(--border-soft);
  border-radius:20px;
  box-shadow:var(--shadow-card);
}
.tips-panel h3{
  display:flex; align-items:center; gap:12px;
  font-size:16px; font-weight:800; color:var(--ink);
  line-height:1.35; letter-spacing:-.01em; margin:0 0 20px;
}
.tips-panel h3 i{
  width:32px; height:32px; border-radius:10px; flex:none;
  display:grid; place-items:center;
  background:var(--grad-diag); color:var(--white); font-size:14px;
  box-shadow:var(--shadow-brand-sm);
}

@media (max-width:860px){
  /* stacked: the divider moves from the right edge to the bottom */
  .contact-split{ grid-template-columns:1fr; }
  .gi-panel{
    padding:28px 20px;
    border-right:0;
    border-bottom:1px solid var(--border-soft);
  }
  .contact-form{ padding:28px 20px; }
}

/* =============== FOOTER KEYWORDS ===============
   Distinct search phrases, each pointing at the page it actually
   describes, so the block works as internal linking rather than a wall
   of repeated words. Deliberately low contrast and small: it is there
   for people scanning for a specific need, not to compete with the
   product list above it. Services and products only. */
.footer-keywords{
  display:grid; grid-template-columns:1.35fr 1fr; gap:24px 40px;
  padding:24px 0 0; margin:0 0 24px;
  border-top:1px solid rgba(255,255,255,.08);
}
.fk-label{
  display:block; margin-bottom:12px;
  font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.54);
}
.fk-list{
  display:flex; flex-wrap:wrap; gap:4px 0;
  margin:0; padding:0; list-style:none;
}
.fk-list li{ display:inline-flex; align-items:center; }
/* a middot between phrases keeps them scannable without borders or
   pills, which would re-introduce the clutter we just removed */
.fk-list li:not(:last-child)::after{
  content:'\00B7'; margin:0 8px;
  color:rgba(255,255,255,.24); font-weight:700;
}
.fk-list a{
  font-size:12px; line-height:1.5; font-weight:500;
  color:rgba(255,255,255,.58);
  transition:color .2s var(--ease);
}
.fk-list a:hover{ color:var(--white); text-decoration:underline; }

@media (max-width:860px){
  .footer-keywords{ grid-template-columns:1fr; gap:20px; }
  /* stacked one-per-line, so the inline middot would dangle at the end
     of every row — drop it and let the rows speak for themselves */
  .fk-list{ flex-direction:column; align-items:flex-start; gap:8px 0; }
  .fk-list li:not(:last-child)::after{ display:none; }
}

/* =============== MOBILE NAV SCROLL LOCK ===============
   With the panel open a swipe should move the menu, not the page behind
   it. Scoped to the breakpoint where the panel actually exists, so a
   stale .nav-open class can never lock scrolling on desktop. */
@media (max-width:1080px){
  body.nav-open{ overflow:hidden; }
}

/* =============== SOCIAL BRAND COLOURS ===============
   One --sc token per platform drives both the footer icon colour and
   the hover fill in either place, so the palette lives in one spot. */
[data-social="linkedin"] { --sc:#0A66C2; --sc-lift:#3B8FE0; }
[data-social="instagram"]{ --sc:#C13584; --sc-lift:#E1548F;
  --sc-grad:linear-gradient(45deg,#F58529 0%,#DD2A7B 45%,#8134AF 75%,#515BD4 100%); }
[data-social="facebook"] { --sc:#1877F2; --sc-lift:#4A97F7; }
[data-social="youtube"]  { --sc:#FF0000; --sc-lift:#FF4D4D; }
[data-social="google"]   { --sc:#1A73E8; --sc-lift:#5A9CF2; }
[data-social="whatsapp"] { --sc:#128C4A; --sc-lift:#25D366; }

/* --sc is the true brand colour, used wherever a WHITE glyph sits on top
   of it. --sc-lift is the brightened variant, used wherever the COLOUR
   itself is the glyph on a dark surface — the raw brand blues and greens
   drop to ~2.2:1 against the footer and would be unreadable. */

/* footer: coloured glyph on the dark translucent tile */
.site-footer .social-row a[data-social]{ color:var(--sc-lift); }
.site-footer .social-row a[data-social]:hover{
  background:var(--sc-grad,var(--sc));
  border-color:transparent;
  color:var(--white);
}

/* rail: white glyph throughout; the cell fills with the true brand
   colour on hover, which white reads cleanly against */
.social-fixed a[data-social]:hover{
  background:var(--sc-grad,var(--sc));
  color:var(--white);
}

/* =============== OFFSHORE: HERO FACT CHIPS =============== */
.hero-facts{
  display:flex; flex-wrap:wrap; gap:8px 12px;
  margin:16px 0 0; padding:0; list-style:none;
}
.hero-facts li{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  font-size:13px; font-weight:600; color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
}
.hero-facts i{ font-size:14px; color:var(--brand-200); flex:none; }

/* =============== OFFSHORE: RISK / OBJECTION LIST ===============
   The three long paragraphs became four question-and-answer rows, so a
   reader scanning for their own objection finds it without reading the
   whole block. */
.media-lead{
  font-size:15px; line-height:1.6; color:var(--text-mid); margin:0 0 20px;
}
.risk-list{
  display:flex; flex-direction:column; gap:12px;
  margin:0 0 24px; padding:0; list-style:none;
}
.risk-list li{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px; border-radius:12px;
  background:var(--white);
  border:1px solid var(--border-soft);
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease),
             transform .28s var(--ease);
}
.risk-list li:hover{
  border-color:var(--brand-200);
  box-shadow:var(--shadow-sm);
  transform:translateX(3px);
}
.risk-ico{
  width:36px; height:36px; border-radius:10px; flex:none;
  display:grid; place-items:center;
  background:var(--grad-diag); color:var(--white); font-size:15px;
  box-shadow:var(--shadow-brand-sm);
}
.risk-list strong{
  display:block; font-size:14.5px; font-weight:800; color:var(--ink);
  line-height:1.35; margin-bottom:4px;
}
.risk-list span{
  display:block; font-size:13.5px; line-height:1.55; color:var(--text-mid);
}

/* honest fit / not-a-fit pair, kept side by side so neither reads as
   the small print of the other */
.fit-split{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fit-split > div{
  padding:16px; border-radius:12px;
  border:1px solid var(--border-soft);
  background:var(--white);
}
.fit-split strong{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:800; color:var(--ink);
  margin-bottom:6px;
}
.fit-split span{ display:block; font-size:13px; line-height:1.55; color:var(--text-mid); }
.fit-yes{ border-left:3px solid #27714B !important; }
.fit-yes strong i{ color:#27714B; font-size:15px; }
.fit-no{ border-left:3px solid var(--text-dim) !important; }
.fit-no strong i{ color:var(--text-dim); font-size:15px; }

/* =============== OFFSHORE: EQUAL-HEIGHT SPLIT ===============
   Only this instance stretches — the sticky graphic elsewhere on the
   site is deliberate and stays as it is. */
.media-split-equal{ align-items:stretch; }
.media-split-equal .mg-col{
  position:static; top:auto;
  display:flex; flex-direction:column;
}
.media-split-equal .mg-stage{
  flex:1;
  display:flex; flex-direction:column; justify-content:space-evenly;
}

@media (max-width:860px){
  .fit-split{ grid-template-columns:1fr; }
  .media-split-equal .mg-stage{ justify-content:flex-start; gap:16px; }
}


/* =============== HOW WE BUILD ===============
   Five other surfaces on this site are already indigo — hero, page hero,
   process, CTA and footer — so another indigo panel had nothing to
   distinguish it. This one goes deep aubergine and pairs it with warm
   gold: a hue that appears nowhere else, which is what makes it read as
   the richer, deliberate outlier rather than the sixth dark band. */
.promise-band{
  position:relative; overflow:hidden;
  padding:88px 0;
  background:
    radial-gradient(58% 110% at 6% 0%, rgba(168,85,247,.30) 0%, transparent 60%),
    radial-gradient(48% 100% at 100% 100%, rgba(240,196,106,.13) 0%, transparent 58%),
    linear-gradient(135deg,#140C26 0%,#241348 56%,#341A62 100%);
}
.promise-band::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(240,196,106,.10) 1px, transparent 1px);
  background-size:26px 26px;
}
.promise-band > *{ position:relative; z-index:1; }
.promise-band::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:2;
  background:linear-gradient(90deg,#8B5CF6,#F0C46A 50%,#8B5CF6);
}

.promise-head{ max-width:900px; margin:0 auto 40px; text-align:center; }
.promise-band .section-tag{ color:#F0C46A; justify-content:center; }
.promise-band .section-tag::before,
.promise-band .section-tag.center::after{ background:#F0C46A; }

.promise-title{
  font-size:clamp(34px,4.4vw,56px); font-weight:800; color:var(--white);
  line-height:1.12; letter-spacing:-.035em; margin:0 0 24px;
}
.pt-accent{ color:#F0C46A; }

.promise-kicker{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:0;
}
.promise-kicker span{
  font-size:17px; font-weight:700; color:var(--white);
  padding:12px 24px; border-radius:999px;
  background:rgba(168,85,247,.16);
  border:1px solid rgba(168,85,247,.40);
}

.promise-statement{ max-width:900px; margin:0 auto 32px; padding:0 16px; }
.promise-statement p{
  margin:0; font-size:clamp(18px,2vw,22px); line-height:1.56;
  color:rgba(255,255,255,.90); text-align:center;
}
.promise-statement strong{ color:#F0C46A; font-weight:800; }

/* ---- trust motion: modules assemble, then the system is sealed ---- */
.trust-motion{ text-align:center; margin:0 auto 32px; }
.trust-motion svg{ width:100%; max-width:420px; height:auto; display:block; margin:0 auto; overflow:visible; }
.tm-rail{ stroke:rgba(168,85,247,.32); stroke-width:2; stroke-linecap:round; }
.tm-mod{
  fill:rgba(168,85,247,.16); stroke:#A78BFA; stroke-width:1.5;
  transform-box:fill-box; transform-origin:center bottom;
  opacity:0; animation:tmRise 7s var(--ease) infinite;
  animation-delay:calc(var(--i) * .28s);
}
/* Each element owns its slice of the one 7s cycle rather than sharing a
   keyframe with an offset delay — that approach let the tick finish
   drawing a second before its circle had appeared. */
.tm-shell{
  fill:none; stroke:rgba(167,139,250,.60); stroke-width:2;
  stroke-dasharray:700; stroke-dashoffset:700;
  animation:tmShell 7s var(--ease) infinite;
}
.tm-seal circle{
  fill:#1B1038; stroke:#F0C46A; stroke-width:2;
  opacity:0; animation:tmSeal 7s var(--ease) infinite;
}
.tm-tick{
  fill:none; stroke:#F0C46A; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:34; stroke-dashoffset:34;
  animation:tmTick 7s var(--ease) infinite;
}
@keyframes tmRise{
  0%,2%   { opacity:0; transform:translateY(10px) scaleY(.7); }
  12%,84% { opacity:1; transform:translateY(0) scaleY(1); }
  94%,100%{ opacity:0; transform:translateY(10px) scaleY(.7); }
}
/* 22-40%: the modules become one system */
@keyframes tmShell{
  0%,22%  { stroke-dashoffset:700; }
  40%,84% { stroke-dashoffset:0; }
  94%,100%{ stroke-dashoffset:700; }
}
/* 44-50%: the seal lands */
@keyframes tmSeal{
  0%,44%  { opacity:0; }
  50%,84% { opacity:1; }
  94%,100%{ opacity:0; }
}
/* 52-60%: and only then is it ticked */
@keyframes tmTick{
  0%,52%  { stroke-dashoffset:34; }
  60%,84% { stroke-dashoffset:0; }
  94%,100%{ stroke-dashoffset:34; }
}
.tm-caption{
  display:block; margin-top:12px;
  font-size:13px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#D9C9F5;
}

/* the sequence, kept as one inline line the way it was written */
.promise-steps{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px 16px; margin:0 0 36px;
}
.promise-steps b{
  font-size:clamp(17px,1.8vw,21px); font-weight:800; color:var(--white);
  letter-spacing:-.01em;
  padding:12px 20px; border-radius:12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
}
.promise-steps i{ font-size:17px; color:#F0C46A; flex:none; }

/* the closing promise — sized to be read, not skimmed past */
.promise-foot{
  max-width:920px; margin:0 auto; text-align:center;
  font-size:clamp(20px,2.2vw,26px); font-weight:800; line-height:1.42;
  letter-spacing:-.02em; color:var(--white);
}

@media (prefers-reduced-motion: reduce){
  .tm-mod,.tm-shell,.tm-seal circle,.tm-tick{ animation:none; opacity:1; stroke-dashoffset:0; }
}
@media (max-width:760px){
  .promise-band{ padding:56px 0; }
  .promise-head{ margin-bottom:28px; }
  .promise-kicker span{ font-size:15px; padding:8px 16px; }
  .promise-steps{ gap:8px 12px; }
  .promise-steps b{ padding:8px 16px; }
  .promise-steps i{ font-size:14px; }
  .promise-foot{ font-size:18px; }
  .tm-caption{ font-size:11px; }
}