/* ==========================================================================
   NETEX SECURITY — DESIGN SYSTEM
   Hand-authored. No framework dependency.
   1. Tokens          6. Header / nav      11. Forms
   2. Reset           7. Hero              12. Cards & grids
   3. Typography      8. Sections          13. Reviews
   4. Layout          9. Log rail          14. Footer
   5. Buttons        10. Tables/lists      15. Utilities & motion
   ========================================================================== */

/* ---- 1. TOKENS ---------------------------------------------------------- */
:root{
  --navy:#071324;
  --navy-2:#0B1D33;
  --navy-3:#102942;
  --blue:#0072B8;
  --blue-deep:#0A4E86;
  --electric:#00AEEF;
  --electric-soft:rgba(0,174,239,.14);
  --white:#FFFFFF;
  --grey:#F5F7FA;
  --grey-2:#EDF1F6;
  --line:#E3E9F0;
  --line-dark:rgba(255,255,255,.12);
  --ink:#10202F;
  --muted:#5A6B7D;
  --muted-dark:rgba(255,255,255,.68);

  --display:'Oswald',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1200px;
  --wrap-narrow:880px;
  --radius:14px;
  --radius-sm:9px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 22px 55px -26px rgba(7,19,36,.42);
  --shadow-lg:0 34px 80px -32px rgba(7,19,36,.5);
  --shadow-blue:0 16px 40px -16px rgba(0,174,239,.5);
}

/* ---- 2. RESET ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* Photographs and video are fluid. Inline SVG icons are NOT: they carry
   explicit width/height attributes, and applying `max-width:100%;height:auto`
   to them discards those attributes, leaving an icon with no intrinsic size
   free to expand to the width of its container. Keep the two rules apart. */
/* The browser's own [hidden] rule is display:none, but any author class rule
   with a display value beats it — .review sets display:flex, so filtered-out
   review cards stayed visible. Author-level rule so `hidden` always hides. */
[hidden]{display:none!important}
img,video{display:block;max-width:100%;height:auto}
svg{display:block;flex:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--electric);outline-offset:3px;border-radius:3px}
::selection{background:var(--electric);color:var(--navy)}
[id]{scroll-margin-top:108px}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--navy);color:#fff;padding:14px 22px;font-weight:700;
}
.skip-link:focus{left:12px;top:12px}

/* ---- 3. TYPOGRAPHY ------------------------------------------------------ */
.h1,.h2,.h3,.h4{font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:1.06;letter-spacing:.005em;color:var(--navy)}
.h1{font-size:clamp(34px,5.4vw,66px);font-weight:700;line-height:1.02;letter-spacing:-.01em}
.h2{font-size:clamp(26px,3.6vw,44px);font-weight:700;line-height:1.08}
.h3{font-size:clamp(19px,2vw,24px)}
.h4{font-size:16px;letter-spacing:.03em}
.on-dark,.on-dark .h1,.on-dark .h2,.on-dark .h3,.on-dark .h4{color:#fff}

.lead{font-size:clamp(16px,1.35vw,18.5px);line-height:1.72;color:var(--muted)}
.on-dark .lead,.lead.on-dark{color:var(--muted-dark)}
.body-text{font-size:15.5px;line-height:1.75;color:var(--muted)}
.body-text + .body-text{margin-top:16px}
.on-dark .body-text{color:var(--muted-dark)}
.small{font-size:13px;line-height:1.6;color:var(--muted)}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--electric)}
.on-dark .kicker,.kicker.on-dark{color:var(--electric)}

.accent{color:var(--electric)}
.blue{color:var(--blue)}
strong,b{font-weight:700;color:var(--ink)}
.on-dark strong,.on-dark b{color:#fff}

/* ---- 4. LAYOUT ---------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;position:relative;z-index:2}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding:clamp(58px,7vw,104px) 0;position:relative}
.section-tight{padding:clamp(44px,5vw,72px) 0}
.bg-white{background:var(--white)}
.bg-grey{background:var(--grey)}
.bg-navy{background:var(--navy);color:#fff}
.bg-navy-grad{background:linear-gradient(165deg,var(--navy) 0%,var(--navy-2) 62%,var(--navy-3) 100%);color:#fff}
.sec-head{max-width:760px;margin:0 auto clamp(34px,4vw,54px);text-align:center}
.sec-head.left{text-align:left;margin-left:0}
.sec-head .h2{margin-bottom:14px}

.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,68px);align-items:center}
@media(max-width:1023px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:38px}}
@media(max-width:639px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---- 5. BUTTONS --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:800;font-size:12.5px;
  letter-spacing:.13em;text-transform:uppercase;
  padding:16px 28px;border-radius:11px;border:1.5px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .28s var(--ease),background .28s var(--ease),
             border-color .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease);
}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn-primary{background:var(--electric);color:var(--navy);box-shadow:var(--shadow-blue)}
.btn-primary:hover{background:#22c1fa;transform:translateY(-2px);box-shadow:0 22px 48px -16px rgba(0,174,239,.62)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-3);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--navy);border-color:rgba(7,19,36,.2)}
.btn-outline:hover{border-color:var(--electric);color:var(--blue);transform:translateY(-2px)}
.btn-lg{padding:19px 34px;font-size:13px}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:520px){.btn-row{flex-direction:column}.btn-row .btn{width:100%}}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-weight:800;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
}
.link-arrow svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}
.on-dark .link-arrow{color:var(--electric)}

/* ---- 6. HEADER / NAV ---------------------------------------------------- */
/* ---- 6. HEADER / NAV -----------------------------------------------------
   One white navbar: logo, navigation, direct-call block and the primary CTA
   on a single row. No second bar, no social icons — those live in the fixed
   right-edge sidebar and the footer.                                       */
.site-header{
  position:sticky;position:-webkit-sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid rgba(8,31,61,.12);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
/* Deliberately NOT position:relative — .site-header (sticky, so non-static) is
   the containing block for the mega panels, which lets them span the full
   viewport width while their inner container stays aligned and centred. */
.header-inner{
  width:min(100% - 48px,1820px);min-height:78px;margin-inline:auto;
  display:flex;align-items:center;gap:26px;
}

/* Logo: max-height governs the bar height, width follows the 2.51:1 aspect so
   the image never letterboxes. */
.header-logo{display:inline-flex;align-items:center;flex:0 0 auto}
.header-logo img{display:block;width:165px;height:auto;max-height:68px;object-fit:contain}

.nav{display:flex;align-items:center;gap:0;margin-right:auto;flex:0 1 auto;min-width:0}
.nav-item{position:static}
.nav-link{
  display:inline-flex;align-items:center;gap:5px;padding:12px 11px;
  font-size:13.2px;font-weight:700;color:var(--navy);white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav-link:hover,.nav-item:hover .nav-link,.nav-link[aria-current="page"]{color:var(--blue)}
.nav-link .chev{display:inline-flex;width:11px;height:11px;transition:transform .25s var(--ease)}
.nav-link .chev svg{width:11px;height:11px}
.nav-item.is-open .chev{transform:rotate(180deg)}
.nav-link[aria-current="page"]{position:relative}
.nav-link[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;background:var(--electric)}

/* Direct call block — compact, never a large button. */
.header-call{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:7px 0;transition:color .25s var(--ease);
}
.header-call .hc-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:50%;
  background:var(--electric-soft);border:1px solid rgba(0,174,239,.3);color:var(--blue);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.header-call .hc-icon svg{width:16px;height:16px}
.header-call .hc-text{display:flex;flex-direction:column;line-height:1.15}
.header-call .hc-label{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.header-call .hc-num{font-size:14.5px;font-weight:800;color:var(--navy);white-space:nowrap}
.header-call:hover .hc-icon{background:var(--blue);border-color:var(--blue);color:#fff}
.header-call:hover .hc-num{color:var(--blue)}

.nav-cta{flex:0 0 auto;padding:14px 20px;font-size:11.5px;letter-spacing:.09em;white-space:nowrap}

.burger{
  display:none;width:44px;height:44px;flex:0 0 auto;align-items:center;justify-content:center;
  background:var(--grey);border:1px solid var(--line);border-radius:10px;
}
.burger svg{width:22px;height:22px;color:var(--navy)}

/* Fitting the single row down the widths. */
@media(max-width:1439px){
  .header-inner{gap:20px}
  .nav-link{padding:12px 9px;font-size:12.6px}
}
@media(max-width:1299px){
  .header-inner{width:min(100% - 32px,1820px);gap:16px}
  .nav-link{padding:12px 7px;font-size:12.1px}
  .header-call .hc-label{display:none}
  .header-call .hc-icon{width:32px;height:32px}
  .nav-cta{padding:13px 15px;font-size:10.8px}
}
/* Below this the seven nav items, the number and the CTA cannot share a row
   honestly, so the nav collapses into the drawer. */
@media(max-width:1100px){
  .nav{display:none}
  .burger{display:inline-flex}
  .header-inner{gap:14px;min-height:70px;justify-content:space-between}
  .header-logo{margin-right:auto}
  .header-call .hc-text{display:none}
  .header-call .hc-icon{width:40px;height:40px;border-radius:11px}
  .header-call .hc-icon svg{width:18px;height:18px}
}
@media(max-width:700px){
  .nav-cta{display:none}
}
@media(max-width:575px){
  .header-inner{width:min(100% - 28px,1820px);min-height:64px;gap:10px}
  .header-call .hc-icon{width:38px;height:38px}
}

/* ---- MEGA MENUS ----------------------------------------------------------
   The panel is positioned against .site-header, NOT against the individual
   nav item, so it spans the full viewport width and can never hang off an
   edge. The inner container is centred and aligns with the header container.
   .nav-item stays position:static so it is not the containing block.       */
.mega{
  position:absolute;top:100%;left:0;right:0;width:100%;max-width:100vw;
  background:#fff;
  border-top:1px solid rgba(8,31,61,.10);
  box-shadow:0 18px 45px rgba(3,20,40,.14);
  z-index:1200;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease);
}
.mega[hidden]{display:none}
.nav-item.is-open > .mega{opacity:1;transform:translateY(0);pointer-events:auto}

.mega-inner{
  width:min(100% - 48px,1320px);max-width:calc(100vw - 40px);
  margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;padding:28px 0 32px;
}
.mega-col{min-width:0}
/* Hook used by the open/close script; kept static so .site-header stays the
   containing block for the panel. */
.nav-item.has-mega{position:static}
/* Services fills the full inner width; Industries has fewer, shorter entries,
   so it reads better slightly narrower. Neither uses a fixed pixel width. */
.mega-services .mega-inner{width:min(100% - 48px,1320px)}
.mega-industries .mega-inner{width:min(100% - 48px,1120px)}
@media(max-width:1199px){
  .mega-services .mega-inner,
  .mega-industries .mega-inner{width:min(100% - 32px,1080px)}
}
.mega h4{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin-bottom:12px;padding-bottom:9px;
  border-bottom:1px solid var(--line);
}
.mega a{
  display:block;max-width:100%;
  padding:7px 9px;margin-left:-9px;border-radius:7px;
  font-size:13px;line-height:1.35;color:#536174;font-weight:600;
  text-decoration:none;overflow-wrap:anywhere;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.mega a:hover{background:var(--grey);color:var(--blue)}
.mega-foot{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(8,31,61,.10);
}

/* Laptop: four narrow columns stop being readable, so drop to two. */
@media(max-width:1199px){
  .mega-inner{
    width:min(100% - 32px,1080px);
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 30px;
  }
}
/* Below 900px the desktop panel is never used — the drawer accordions are. */
@media(max-width:899px){
  .mega{display:none}
}

/* Backdrop sits below the panel and above the page, and is removed the moment
   the menu closes so nothing invisible is ever left covering content. */
.mega-backdrop{
  position:fixed;inset:var(--header-height,78px) 0 0;z-index:1100;
  background:rgba(4,18,36,.2);
  opacity:0;transition:opacity .24s var(--ease);
}
.mega-backdrop[hidden]{display:none}
.mega-backdrop.is-open{opacity:1}


.drawer{
  position:fixed;inset:0 0 0 auto;width:min(400px,88vw);z-index:120;
  background:#fff;transform:translateX(100%);transition:transform .34s var(--ease);
  overflow-y:auto;box-shadow:-14px 0 60px -20px rgba(7,19,36,.4);
}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.drawer-head img{height:38px}
.drawer-close{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:var(--grey);border:1px solid var(--line);border-radius:10px}
.drawer-close svg{width:20px;height:20px}
.drawer-body{padding:14px 20px 40px}
.drawer-body > a,.acc-trigger{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:52px;padding:12px 0;border-bottom:1px solid var(--line);
  font-size:15px;font-weight:700;color:var(--navy);background:none;border-left:0;border-right:0;border-top:0;text-align:left;
}
.acc-trigger svg{width:14px;height:14px;transition:transform .28s var(--ease);color:var(--blue)}
.acc-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .34s var(--ease)}
.acc-panel-inner{padding:10px 0 14px}
.acc-panel h5{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:12px 0 6px}
.acc-panel a{display:block;padding:9px 0 9px 14px;border-left:2px solid var(--line);font-size:13.5px;color:var(--muted);font-weight:600}
.acc-panel a:hover{border-color:var(--electric);color:var(--blue)}
.drawer-cta{margin-top:22px;display:grid;gap:10px}
.scrim{position:fixed;inset:0;z-index:110;background:rgba(7,19,36,.55);opacity:0;visibility:hidden;transition:opacity .3s}
.scrim.open{opacity:1;visibility:visible}
body.locked{overflow:hidden}

/* ---- 7. HERO ------------------------------------------------------------ */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,19,36,.97) 0%,rgba(7,19,36,.9) 42%,rgba(7,19,36,.55) 72%,rgba(7,19,36,.35) 100%);
}
.hero-grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(0,174,239,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,174,239,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(95deg,#000 0%,#000 38%,transparent 78%);
  mask-image:linear-gradient(95deg,#000 0%,#000 38%,transparent 78%);
}
.hero .wrap{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(52px,6vw,88px)}
.hero-inner{max-width:660px}
.hero h1{margin-bottom:20px}
.hero h1 .rule{display:block;color:var(--electric)}
.hero .lead{max-width:560px;margin-bottom:26px}

.offer-box{
  display:inline-block;padding:18px 24px;margin-bottom:26px;border-radius:var(--radius);
  background:linear-gradient(150deg,rgba(0,174,239,.16),rgba(0,114,184,.07));
  border:1px solid rgba(0,174,239,.4);
}
.offer-box .tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--electric);display:block;margin-bottom:8px}
.offer-box .l1{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.2vw,26px);text-transform:uppercase;line-height:1.1;color:#fff}
.offer-box .l2{font-family:var(--display);font-weight:600;font-size:clamp(15px,1.6vw,19px);text-transform:uppercase;line-height:1.15;color:var(--electric);margin-top:3px}

/* ---- HERO TRUST ROW ------------------------------------------------------
   One class name only: .trust-row / .trust-item. The icons carry explicit
   dimensions here as well as in the SVG markup, so no global rule and no
   missing selector can let them expand to fill the hero.                   */
.trust-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px;
  margin-top:32px;padding-top:26px;border-top:1px solid var(--line-dark);
  list-style:none;
}
.trust-item{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.82);white-space:nowrap;
}
.trust-item > span{display:inline-block;line-height:1.3}
.trust-row svg,
.trust-row img,
.trust-item svg,
.trust-item img{
  width:22px;height:22px;
  min-width:22px;max-width:22px;
  min-height:22px;max-height:22px;
  flex:0 0 22px;
  object-fit:contain;
  color:var(--electric);
  display:block;
}
/* Tablet: let items wrap to two per row rather than shrinking the text. */
@media(max-width:900px){
  .trust-row{gap:12px 20px}
  .trust-item{font-size:12px}
}
/* Mobile: two columns, then one. Icons stay the same size throughout. */
@media(max-width:640px){
  .trust-row{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
  .trust-item{white-space:normal;align-items:flex-start}
  .trust-item > span{line-height:1.35}
  .trust-row svg,.trust-item svg{margin-top:1px}
}
@media(max-width:420px){
  .trust-row{grid-template-columns:1fr}
}

/* Page hero (interior pages) */
.phero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:clamp(48px,6vw,86px) 0 clamp(44px,5vw,72px)}
.phero.has-media .phero-media{position:absolute;inset:0;z-index:0}
.phero.has-media .phero-media img{width:100%;height:100%;object-fit:cover}
.phero.has-media .phero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,19,36,.96) 0%,rgba(7,19,36,.86) 48%,rgba(7,19,36,.52) 100%)}
.phero-glow{position:absolute;z-index:0;width:520px;height:520px;right:-140px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(0,174,239,.2),transparent 66%);pointer-events:none}
.phero .inner{max-width:760px}
.phero h1{margin-bottom:16px}
.phero .lead{max-width:640px}
.phero .btn-row{margin-top:28px}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.crumbs a:hover{color:var(--electric)}
.crumbs .sep{opacity:.45}

/* ---- 8. SECTIONS -------------------------------------------------------- */
.prose > * + *{margin-top:18px}
.prose h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.6vw,32px);line-height:1.1;color:var(--navy);margin-top:44px}
.prose h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:19px;color:var(--navy);margin-top:30px}
.prose p{font-size:15.5px;line-height:1.78;color:var(--muted)}
.prose ul{display:grid;gap:11px}
.prose li{position:relative;padding-left:26px;font-size:15px;line-height:1.6;color:var(--muted)}
.prose li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:2px;background:var(--electric-soft);border:1.5px solid var(--electric)}
.prose a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.checklist{display:grid;gap:0}
.checklist li{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.checklist li:last-child{border-bottom:0}
.checklist .tick{flex:0 0 auto;width:25px;height:25px;border-radius:7px;background:var(--electric-soft);color:var(--blue);display:flex;align-items:center;justify-content:center}
.checklist .tick svg{width:14px;height:14px}
.checklist b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.checklist span{display:block;font-size:13px;line-height:1.55;color:var(--muted);margin-top:2px}
.on-dark .checklist li{border-color:var(--line-dark)}
.on-dark .checklist .tick{background:rgba(0,174,239,.18);color:var(--electric)}
.on-dark .checklist b{color:#fff}
.on-dark .checklist span{color:var(--muted-dark)}

.pill-list{display:flex;flex-wrap:wrap;gap:9px}
.pill-list li{padding:8px 15px;border-radius:999px;background:var(--grey);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink)}
.on-dark .pill-list li{background:rgba(255,255,255,.06);border-color:var(--line-dark);color:#fff}

.note{
  border-left:3px solid var(--electric);background:var(--grey);
  padding:20px 24px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.note .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:7px}
.note p{font-size:14px;line-height:1.7;color:var(--muted)}
.note + .note{margin-top:14px}
.on-dark .note{background:rgba(255,255,255,.05);border-color:var(--electric)}
.on-dark .note p{color:var(--muted-dark)}
.on-dark .note .label{color:var(--electric)}

/* ---- 9. SIGNATURE: OPERATOR LOG RAIL ------------------------------------ */
/* The one memorable device. Monitoring output is a timestamped log, so the
   process sequence is set as log entries against a live rail.               */
.lograil{position:relative;padding-left:0}
.lograil::before{
  content:"";position:absolute;left:118px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(0,174,239,.5) 8%,rgba(0,174,239,.5) 92%,transparent);
}
.logentry{position:relative;display:grid;grid-template-columns:118px 1fr;gap:0 34px;padding:22px 0}
.logentry .stamp{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--blue);text-align:right;padding-right:22px;padding-top:3px;position:relative;
}
.on-dark .logentry .stamp{color:var(--electric)}
.logentry .stamp::after{
  content:"";position:absolute;right:-5px;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--white);border:2px solid var(--electric);z-index:2;
}
.on-dark .logentry .stamp::after{background:var(--navy)}
.logentry h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:19px;color:var(--navy);margin-bottom:8px;line-height:1.15}
.on-dark .logentry h3{color:#fff}
.logentry p{font-size:14.5px;line-height:1.7;color:var(--muted)}
.on-dark .logentry p{color:var(--muted-dark)}
.logentry .sub{margin-top:14px;display:grid;gap:8px}
.logentry .sub li{position:relative;padding-left:20px;font-size:13.5px;color:var(--muted)}
.logentry .sub li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:1px;background:var(--electric)}
.on-dark .logentry .sub li{color:var(--muted-dark)}
@media(max-width:700px){
  .lograil::before{left:5px}
  .logentry{grid-template-columns:1fr;gap:8px;padding-left:32px}
  .logentry .stamp{text-align:left;padding-right:0;position:static}
  .logentry .stamp::after{position:absolute;left:1px;top:26px;right:auto}
}

/* Index marker used on service page section headings */
.idx{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--blue);display:block;margin-bottom:6px}

/* ---- 10. CARDS & GRIDS -------------------------------------------------- */
.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;overflow:hidden;height:100%;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  display:flex;flex-direction:column;
}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--electric),var(--blue));transition:width .45s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(0,174,239,.34)}
.card:hover::before{width:100%}
.card .ico{
  width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(0,174,239,.14),rgba(0,114,184,.08));
  border:1px solid rgba(0,174,239,.22);color:var(--blue);margin-bottom:20px;flex:0 0 auto;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.card:hover .ico{background:var(--electric);color:#fff}
.card .ico svg{width:24px;height:24px}
.card h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:18px;line-height:1.2;color:var(--navy);margin-bottom:10px}
.card p{font-size:14px;line-height:1.62;color:var(--muted);margin-bottom:18px}
.card .link-arrow{margin-top:auto}

.card-dark{
  background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);
}
.card-dark h3{color:#fff}
.card-dark p{color:var(--muted-dark)}
.card-dark:hover{border-color:rgba(0,174,239,.45);box-shadow:0 28px 60px -26px rgba(0,174,239,.4)}
.card-dark .ico{color:var(--electric)}

.tile{
  display:block;position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/3.1;background:var(--navy);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,19,36,0) 26%,rgba(7,19,36,.66) 66%,rgba(7,19,36,.95) 100%)}
.tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.tile:hover img{transform:scale(1.06)}
.tile-body{position:absolute;inset:auto 0 0 0;padding:24px 22px;z-index:2}
.tile-tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);background:var(--electric);padding:4px 9px;border-radius:5px;margin-bottom:11px}
.tile h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:19px;color:#fff;margin-bottom:6px;line-height:1.15}
.tile p{font-size:12.8px;line-height:1.5;color:rgba(255,255,255,.82);margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .link-arrow{color:var(--electric)}

.linkcard{
  display:flex;flex-direction:column;gap:8px;padding:22px 24px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fff;height:100%;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.linkcard:hover{border-color:rgba(0,174,239,.45);transform:translateY(-3px);box-shadow:var(--shadow)}
.linkcard b{font-size:15px;font-weight:700;color:var(--navy);line-height:1.3}
.linkcard span{font-size:13px;line-height:1.55;color:var(--muted)}

.catblock{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;height:100%;display:flex;flex-direction:column}
.catblock-head{padding:26px 26px 20px;border-bottom:1px solid var(--line);background:var(--grey)}
.catblock-head .ico{width:46px;height:46px;border-radius:12px;background:var(--navy);color:var(--electric);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.catblock-head .ico svg{width:22px;height:22px}
.catblock-head h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:18px;color:var(--navy);margin-bottom:8px;line-height:1.18}
.catblock-head p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.catblock-list{padding:16px 26px 24px;display:grid;gap:2px;flex:1}
.catblock-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line)}
.catblock-list a:last-child{border-bottom:0}
.catblock-list a:hover{color:var(--blue)}
.catblock-list a svg{width:12px;height:12px;opacity:0;transition:opacity .25s,transform .25s}
.catblock-list a:hover svg{opacity:1;transform:translateX(3px)}

/* ---- 11. FORMS ---------------------------------------------------------- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow)}
.formcard h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;color:var(--navy);margin-bottom:6px}
.formcard .sub{font-size:13.5px;color:var(--muted);margin-bottom:24px}
.field{margin-bottom:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin-bottom:7px}
label .req{color:#D63A3A;margin-left:2px}
.input,select.input,textarea.input{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;
  background:#fff;font-size:14.5px;color:var(--ink);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.input::placeholder{color:#9AA8B6}
.input:focus{outline:none;border-color:var(--electric);box-shadow:0 0 0 3px rgba(0,174,239,.16)}
.input:user-invalid{border-color:#D63A3A}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7D' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}
textarea.input{min-height:110px;resize:vertical}
.consent{display:flex;gap:11px;align-items:flex-start;margin:6px 0 18px}
.consent input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--blue)}
.consent label{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.55;margin:0}
.consent a{color:var(--blue);font-weight:700;text-decoration:underline}
.privacy-note{font-size:11.5px;line-height:1.6;color:var(--muted);margin-top:14px;text-align:center}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:14px;padding:13px 16px;border-radius:10px;font-size:13.5px;font-weight:600;display:none}
.form-status.show{display:block}
.form-status.ok{background:rgba(0,174,239,.1);border:1px solid rgba(0,174,239,.4);color:var(--blue-deep)}
.form-status.err{background:rgba(214,58,58,.08);border:1px solid rgba(214,58,58,.35);color:#B32B2B}

.steps-bar{display:flex;gap:8px;margin-bottom:26px}
.steps-bar .s{flex:1;display:flex;flex-direction:column;gap:8px}
.steps-bar .s .bar{height:3px;border-radius:2px;background:var(--line)}
.steps-bar .s.active .bar,.steps-bar .s.done .bar{background:var(--electric)}
.steps-bar .s .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.steps-bar .s.active .lbl{color:var(--blue)}
.step-title{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:20px;line-height:1.2;color:var(--navy);margin-bottom:6px}
.step-panel[hidden]{display:none}

/* ---- 12. TABS / FILTERS / FAQ ------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:34px}
.filter{
  padding:9px 17px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;
  transition:all .25s var(--ease);
}
.filter:hover{border-color:rgba(0,174,239,.5);color:var(--blue)}
.filter[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

.faq{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.faq + .faq{margin-top:10px}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  padding:18px 22px;font-size:15px;font-weight:700;color:var(--navy);list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:0 0 auto;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg) translateY(-3px);transition:transform .28s var(--ease)}
.faq[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq[open] summary{border-bottom:1px solid var(--line)}
.faq .ans{padding:18px 22px 22px;font-size:14.5px;line-height:1.72;color:var(--muted)}
.faq .ans ul{margin-top:10px;display:grid;gap:8px}
.faq .ans li{padding-left:18px;position:relative;font-size:14px}
.faq .ans li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--electric)}
.faq-group{margin-top:40px}
.faq-group h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;color:var(--navy);margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--electric);display:inline-block}

/* ---- 13. REVIEWS -------------------------------------------------------- */
.review{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;display:flex;flex-direction:column;height:100%;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.review:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(0,174,239,.3)}
.review .verified{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);background:var(--electric-soft);border:1px solid rgba(0,174,239,.3);
  padding:5px 10px;border-radius:5px;margin-bottom:16px;
}
.review .verified svg{width:12px;height:12px}
.review .stars{display:flex;gap:3px;margin-bottom:14px}
.review .stars svg{width:16px;height:16px;color:#F5A623}
.review blockquote{font-size:15px;line-height:1.68;color:var(--ink);font-weight:500;flex:1;margin-bottom:22px}
.review-author{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid var(--line)}
.avatar{
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--blue-deep),var(--electric));color:#fff;
  font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.02em;
}
.review-author .nm{font-weight:800;font-size:14.5px;color:var(--navy)}
.review-author .rl{font-size:12.5px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.review-author .rl .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.6}

.swipe{display:grid;gap:22px}
@media(max-width:767px){
  .swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:14px;margin:0 -24px;padding-left:24px;padding-right:24px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .swipe::-webkit-scrollbar{display:none}
  .swipe > *{flex:0 0 84%;scroll-snap-align:center}
}

/* ---- 14. FOOTER --------------------------------------------------------- */
.footer{background:var(--navy);color:rgba(255,255,255,.66);padding-top:clamp(48px,5vw,72px)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;padding-bottom:44px}
@media(max-width:1023px){.footer-top{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr}}
.footer img.logo{height:42px;margin-bottom:18px}
.footer p{font-size:13.5px;line-height:1.72;color:rgba(255,255,255,.6);max-width:330px}
.footer h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--electric);margin-bottom:16px}
.footer ul{display:grid;gap:10px}
.footer li a{font-size:13.5px;color:rgba(255,255,255,.66);transition:color .22s}
.footer li a:hover{color:var(--electric)}
.footer-contact{display:grid;gap:12px;margin-top:20px}
.footer-contact a{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#fff}
.footer-contact a:hover{color:var(--electric)}
.footer-contact svg{width:16px;height:16px;color:var(--electric);flex:0 0 auto}
.footer-bottom{border-top:1px solid var(--line-dark);padding:22px 0 30px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.footer-bottom p{font-size:12.5px;margin:0}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 18px}
.footer-legal a{font-size:12.5px;color:rgba(255,255,255,.55)}
.footer-legal a:hover{color:var(--electric)}

/* Mobile sticky CTA */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(7,19,36,.96);backdrop-filter:blur(10px);
  border-top:1px solid rgba(0,174,239,.28);gap:9px;
}
.mobile-cta .btn{flex:1;padding:14px 12px;font-size:11.5px;letter-spacing:.08em}
.mobile-cta .icon-btn{
  width:50px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:11px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
}
.mobile-cta .icon-btn svg{width:20px;height:20px}
@media(max-width:767px){.mobile-cta{display:flex}body{padding-bottom:76px}}

/* ---- 15. UTILITIES & MOTION --------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}
.mt-0{margin-top:0}.mt-2{margin-top:18px}.mt-3{margin-top:26px}.mt-4{margin-top:36px}
.mb-2{margin-bottom:18px}.mb-3{margin-bottom:26px}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(0,174,239,.35),transparent);border:0;margin:0}
.media-frame{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(0,174,239,.22);box-shadow:var(--shadow-lg)}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(7,19,36,.5));pointer-events:none}
.corner{position:absolute;width:20px;height:20px;border:2px solid var(--electric);z-index:2}
.corner.tl{top:12px;left:12px;border-right:0;border-bottom:0}
.corner.br{bottom:12px;right:12px;border-left:0;border-top:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media print{
  .site-header,.footer,.mobile-cta,.drawer,.scrim,.floating-social-sidebar,.whatsapp-fab{display:none}
  body{color:#000}
}

/* ==========================================================================
   16. SERVICE CARD SIDE ANIMATION
   Left rail grows bottom-to-top, content shifts right, spotlight sweeps.
   ========================================================================== */
.card.card-anim{padding-left:30px;transition:transform .42s var(--ease),box-shadow .42s var(--ease),border-color .42s var(--ease)}
.card.card-anim::before{display:none}
.card.card-anim .rail{
  position:absolute;left:0;bottom:0;width:3px;height:0;border-radius:0 3px 3px 0;
  background:linear-gradient(0deg,var(--blue),var(--electric));
  transition:height .46s var(--ease);
}
.card.card-anim .sweep{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 32%,rgba(0,174,239,.11) 50%,transparent 68%);
  transform:translateX(-38%);
  transition:opacity .42s var(--ease),transform .62s var(--ease);
}
.card.card-anim .card-inner{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;transition:transform .42s var(--ease)}
.card.card-anim .link-arrow svg{transition:transform .42s var(--ease)}
.card.card-anim:hover,.card.card-anim:focus-within{transform:translateY(-4px);border-color:rgba(0,174,239,.42);box-shadow:var(--shadow)}
.card.card-anim:hover .rail,.card.card-anim:focus-within .rail{height:100%}
.card.card-anim:hover .card-inner,.card.card-anim:focus-within .card-inner{transform:translateX(7px)}
.card.card-anim:hover .sweep,.card.card-anim:focus-within .sweep{opacity:1;transform:translateX(38%)}
.card.card-anim:hover .link-arrow svg,.card.card-anim:focus-within .link-arrow svg{transform:translateX(5px)}
.card.card-anim .ico{transition:background .42s var(--ease),color .42s var(--ease),transform .42s var(--ease)}
.card.card-anim:hover .ico,.card.card-anim:focus-within .ico{background:var(--electric);color:#fff}

/* ==========================================================================
   17. TRUST STRIP
   ========================================================================== */
.trust-strip{background:var(--navy-2);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.trust-strip .row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.07)}
.trust-strip .item{
  background:var(--navy-2);display:flex;align-items:center;gap:13px;
  padding:26px 24px;transition:background .4s var(--ease);
}
.trust-strip .item:hover{background:var(--navy-3)}
.trust-strip .item svg{width:20px;height:20px;color:var(--electric);flex:none}
.trust-strip .item b{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:14px;color:#fff;line-height:1.25}
@media (max-width:900px){.trust-strip .row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.trust-strip .row{grid-template-columns:1fr}.trust-strip .item{padding:18px 20px}}

/* ==========================================================================
   18. TESTIMONIAL CARD + CAROUSEL
   ========================================================================== */
.review{position:relative;overflow:hidden;padding-left:30px;border-radius:19px}
.review::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(0deg,var(--blue),var(--electric));
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.review::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 34%,rgba(0,174,239,.10) 50%,transparent 66%);
  transform:translateX(-40%);
  transition:opacity .45s var(--ease),transform .65s var(--ease);
}
.review>*{position:relative;z-index:2;transition:transform .45s var(--ease)}
.review .qmark{
  position:absolute;top:22px;right:24px;z-index:1;
  color:var(--electric);opacity:.16;
  transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.review .qmark svg{width:38px;height:38px}
.review:hover,.review:focus-within,.review.is-active{
  transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(0,174,239,.34);
}
.review:hover::before,.review:focus-within::before,.review.is-active::before{transform:scaleY(1)}
.review:hover::after,.review:focus-within::after{opacity:1;transform:translateX(40%)}
.review:hover .qmark,.review:focus-within .qmark,.review.is-active .qmark{transform:translateY(-5px);opacity:.26}
.review:hover blockquote,.review:hover .review-author,
.review:focus-within blockquote,.review:focus-within .review-author,
.review.is-active blockquote,.review.is-active .review-author{transform:translateX(5px)}
.review:hover .verified,.review:focus-within .verified,.review.is-active .verified{
  background:var(--electric);color:var(--navy);border-color:var(--electric);transform:translateX(5px);
}
.review .verified{transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)}
.review-author .avatar{position:relative}
.review-author .avatar::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--electric);opacity:0;transform:scale(.86);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.review:hover .avatar::after,.review:focus-within .avatar::after,.review.is-active .avatar::after{opacity:.7;transform:scale(1)}

.carousel{position:relative}
.carousel-viewport{overflow:hidden;padding:14px 0 6px;outline:none}
.carousel-viewport:focus-visible{outline:2px solid var(--electric);outline-offset:6px;border-radius:var(--radius)}
.carousel-track{display:flex;gap:24px;transition:transform .62s var(--ease);will-change:transform}
.carousel-slide{flex:0 0 calc((100% - 48px)/3);min-width:0}
.carousel-slide .review{height:100%;transition:transform .5s var(--ease),opacity .5s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.carousel-slide:not(.is-current) .review{opacity:.62;transform:scale(.965)}
.carousel-slide.is-current .review{opacity:1;transform:scale(1.03)}
.carousel-ui{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}
.carousel-btn{
  width:46px;height:46px;border-radius:50%;flex:none;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.24);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.carousel-btn svg{width:18px;height:18px;transform:rotate(90deg)}
.carousel-btn.next svg{transform:rotate(-90deg)}
.carousel-btn:hover{background:var(--electric);border-color:var(--electric);color:var(--navy)}
.carousel-btn:focus-visible{outline:2px solid var(--electric);outline-offset:3px}
.carousel-btn[disabled]{opacity:.34;cursor:default}
.carousel-btn[disabled]:hover{background:transparent;border-color:rgba(255,255,255,.24);color:#fff}
.carousel-dots{display:flex;align-items:center;gap:9px}
.carousel-dots .dot{
  width:9px;height:9px;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(255,255,255,.26);border:0;
  transition:background .35s var(--ease),width .35s var(--ease),border-radius .35s var(--ease);
}
.carousel-dots .dot[aria-selected="true"]{background:var(--electric);width:26px;border-radius:5px}
.carousel-dots .dot:focus-visible{outline:2px solid var(--electric);outline-offset:3px}
@media (max-width:1000px){
  .carousel-slide{flex:0 0 calc((100% - 24px)/2)}
}
@media (max-width:720px){
  .carousel-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-inline:20px;margin-inline:-20px}
  .carousel-viewport::-webkit-scrollbar{display:none}
  .carousel-track{transform:none!important;gap:16px}
  .carousel-slide{flex:0 0 86%;scroll-snap-align:center}
  .carousel-slide:not(.is-current) .review{opacity:1;transform:none}
  .carousel-slide.is-current .review{transform:none}
  .carousel-btn{display:none}
}

/* ==========================================================================
   19. INDUSTRY INQUIRY PANEL (75+ industries)
   ========================================================================== */
.inquiry-panel{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--navy-2),var(--navy-3));
  border:1px solid rgba(0,174,239,.24);padding:44px 42px;
}
.inquiry-panel::before{
  content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,174,239,.20),transparent 68%);
}
.inquiry-panel>*{position:relative;z-index:2}
.inquiry-panel h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(21px,2.4vw,28px);color:#fff;line-height:1.16}
.inquiry-panel p{color:var(--muted-dark);font-size:15px;line-height:1.68;margin-top:12px;max-width:62ch}
@media (max-width:620px){.inquiry-panel{padding:32px 24px}}

@media (prefers-reduced-motion:reduce){
  .carousel-track{transition:none}
  .cs-mark{transition:none}
  .cs-mark:hover{transform:none}
  .review::after,.card.card-anim .sweep{display:none}
  .review::before{transition:none}
  .carousel-slide:not(.is-current) .review,.carousel-slide.is-current .review{opacity:1;transform:none}
}









/* ==========================================================================
   21. CATEGORY LABEL ON REVIEW CARDS
   ========================================================================== */
.review-cat{
  display:inline-block;align-self:flex-start;margin-top:14px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);background:var(--electric-soft);
  border:1px solid rgba(0,174,239,.26);border-radius:6px;padding:5px 9px;
}

/* ==========================================================================
   22. CLIENT TRUST STRIP
   Text-based company marks. No logo files have been approved, so none are
   invented. A slow, pausable track — never a fast continuous marquee.
   ========================================================================== */
.clientstrip{
  border:1px solid var(--line-dark);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.03);padding:26px 28px;margin-bottom:clamp(38px,4.5vw,60px);
}
.clientstrip .cs-head{
  display:block;text-align:center;margin-bottom:20px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--electric);
}
.cs-track{
  display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;
  gap:12px;list-style:none;margin:0;padding:0;
}
.cs-mark{
  display:flex;align-items:center;gap:11px;
  padding:12px 18px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-dark);
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.cs-mark:hover{background:rgba(0,174,239,.10);border-color:rgba(0,174,239,.4);transform:translateY(-2px)}
.cs-mark img{height:30px;width:auto;max-width:132px;object-fit:contain}
.cs-init{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:9px;
  background:rgba(0,174,239,.16);border:1px solid rgba(0,174,239,.34);
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--electric);
}
.cs-name{
  font-family:var(--display);font-weight:500;text-transform:uppercase;
  font-size:13px;letter-spacing:.045em;line-height:1.2;color:#fff;white-space:nowrap;
}
@media(max-width:760px){
  .clientstrip{padding:20px 16px}
  .cs-track{gap:9px}
  .cs-mark{padding:10px 13px;gap:9px}
  .cs-name{font-size:11.5px;white-space:normal}
  .cs-init{width:30px;height:30px;font-size:12px}
}
@media(max-width:430px){
  .cs-track{display:grid;grid-template-columns:1fr 1fr}
  .cs-mark{padding:10px}
  .cs-name{font-size:10.5px;letter-spacing:.03em}
}

/* ==========================================================================
   23. FOOTER FOLLOW BLOCK
   The only place social links appear. Small icons in one horizontal row,
   inside the company column, with the WhatsApp number underneath.
   ========================================================================== */
.footer-logo{display:inline-flex;align-items:center;margin-bottom:18px}
.footer-logo img{width:112px;height:auto;max-height:45px;object-fit:contain;display:block}

.footer-follow{margin-top:22px}
.footer-follow-label{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--electric);
}
.footer-social-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:12px}
.footer-social-link{
  width:32px;height:32px;flex:0 0 32px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);color:#fff;background:rgba(255,255,255,.05);
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.footer-social-link svg{width:15px;height:15px;flex:0 0 15px}
.footer-social-link:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.footer-social-link:focus-visible{outline:2px solid var(--electric);outline-offset:3px}

.footer-whatsapp-number{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:14px;font-weight:600;color:rgba(255,255,255,.82);
  transition:color .25s ease;
}
.footer-whatsapp-number svg{width:15px;height:15px;flex:0 0 15px;color:var(--electric)}
.footer-whatsapp-number:hover{color:var(--electric)}
.footer-whatsapp-number:focus-visible{outline:2px solid var(--electric);outline-offset:3px;border-radius:5px}

@media (max-width:575px){
  .footer-social-row{gap:8px}
  .footer-social-link{width:30px;height:30px;flex:0 0 30px}
  .footer-social-link svg{width:14px;height:14px;flex:0 0 14px}
  .footer-whatsapp-number{font-size:13px}
  .footer-logo img{width:100px;max-height:40px}
}

/* ==========================================================================
   24. FLOATING SOCIAL SIDEBAR
   Fixed to the right screen edge, vertically centred, independent of the hero
   so it never scrolls with the image. White boxes, official platform colours
   on the glyphs. Hidden below 768px, where the drawer carries the links.
   ========================================================================== */
.floating-social-sidebar{
  position:fixed;top:50%;right:0;z-index:900;
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;
  transform:translateY(-50%);
}
.floating-social-toggle{
  width:32px;height:26px;flex:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.14);border-right:0;
  border-radius:9px 0 0 9px;box-shadow:0 6px 18px rgba(3,20,40,.16);
  transition:background .26s ease,transform .26s ease;
}
.floating-social-toggle svg{width:14px;height:14px;transform:rotate(-90deg);transition:transform .3s var(--ease)}
.floating-social-toggle:hover{background:var(--blue)}
.floating-social-toggle:focus-visible{outline:2px solid var(--electric);outline-offset:2px}
.floating-social-sidebar.is-collapsed .floating-social-toggle svg{transform:rotate(90deg)}

.floating-social-list{
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  transform-origin:right center;
}
.floating-social-sidebar.is-collapsed .floating-social-list{
  opacity:0;transform:translateX(105%);pointer-events:none;
}

.floating-social-link{
  width:48px;height:48px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--navy);background:#fff;
  border:1px solid rgba(8,31,61,.12);border-right:0;
  border-radius:12px 0 0 12px;
  box-shadow:0 6px 18px rgba(3,20,40,.13);
  transition:width .26s ease,color .26s ease,background .26s ease,
             border-color .26s ease,transform .26s ease;
}
.floating-social-link svg{width:23px;height:23px;flex:none;transition:transform .26s ease}
.floating-social-link:hover{width:56px;transform:translateX(-2px)}
.floating-social-link:hover svg{transform:translateX(-2px)}
.floating-social-link:focus-visible{outline:2px solid var(--electric);outline-offset:-2px}

/* Official platform colours on the glyph; the box stays white and consistent. */
.floating-social-link.is-facebook{color:#1877F2}
.floating-social-link.is-instagram{color:#E1306C}
.floating-social-link.is-twitter{color:#0F1419}
.floating-social-link.is-linkedin{color:#0A66C2}
.floating-social-link.is-whatsapp{color:#25D366}
.floating-social-link.is-facebook:hover{border-color:rgba(24,119,242,.5)}
.floating-social-link.is-instagram:hover{border-color:rgba(225,48,108,.5)}
.floating-social-link.is-twitter:hover{border-color:rgba(15,20,25,.45)}
.floating-social-link.is-linkedin:hover{border-color:rgba(10,102,194,.5)}
.floating-social-link.is-whatsapp:hover{border-color:rgba(37,211,102,.55)}

/* ---- MOBILE: sidebar off, single WhatsApp button above the CTA bar ------- */
.whatsapp-fab{display:none}
@media (max-width:767px){
  .floating-social-sidebar{display:none}
  .whatsapp-fab{
    position:fixed;right:16px;z-index:85;
    bottom:calc(84px + env(safe-area-inset-bottom));
    width:52px;height:52px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:#25D366;color:#fff;border:1px solid rgba(255,255,255,.25);
    box-shadow:0 10px 26px rgba(3,20,40,.32);
    transition:transform .26s ease,box-shadow .26s ease;
  }
  .whatsapp-fab svg{width:26px;height:26px}
  .whatsapp-fab:hover,.whatsapp-fab:focus-visible{transform:translateY(-2px)}
  .whatsapp-fab:focus-visible{outline:2px solid #fff;outline-offset:2px}
}

/* ---- DRAWER SOCIAL ROW --------------------------------------------------- */
.drawer-social{padding:22px 0 6px;border-top:1px solid var(--line);margin-top:18px}
.drawer-social-label{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:13px;
}
.drawer-social-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.drawer-social-row .footer-social-link{
  background:var(--grey);border-color:var(--line);color:var(--navy);
}
.drawer-social-row .footer-social-link:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---- CONTACT PAGE FOLLOW BLOCK ------------------------------------------ */
.contact-follow{
  padding:24px 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--grey);
}
.contact-follow .footer-follow{margin-top:0}
.contact-follow .footer-follow-label{color:var(--blue)}
.contact-follow .footer-social-link{background:#fff;border-color:var(--line);color:var(--navy)}
.contact-follow .footer-social-link:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.contact-follow .footer-whatsapp-number{color:var(--ink)}
.contact-follow .footer-whatsapp-number:hover{color:var(--blue)}

@media (prefers-reduced-motion:reduce){
  .floating-social-link,.floating-social-link svg,.floating-social-list,
  .floating-social-toggle,.whatsapp-fab{transition:none}
  .floating-social-link:hover{transform:none}
  .whatsapp-fab:hover{transform:none}
}