/* ==========================================================================
   MEK-iT — Design tokens
   ========================================================================== */
:root{
  --navy-950: #001433;
  --navy-900: #002554;
  --navy-800: #063a72;
  --blue-600: #0065ac;
  --blue-500: #157fc9;
  --blue-400: #3d9be9;
  --sky-200: #cfe6fb;
  --ink: #0b1c2e;
  --slate-600: #4a5c70;
  --slate-400: #7c8ba0;
  --paper: #f5f8fb;
  --paper-dim: #eaf1f7;
  --white: #ffffff;
  --line: #dbe6ef;

  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(0,37,84,0.06), 0 12px 28px -14px rgba(0,37,84,0.22);
  --shadow-pop: 0 20px 45px -18px rgba(0,37,84,0.35);
  --container: 1160px;
}

@media (prefers-color-scheme: dark){ :root{ } }

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
section[id]{ scroll-margin-top:96px; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; line-height:1.12; letter-spacing:-0.01em; color:var(--navy-900); }
p{ margin:0; }
button{ font-family:inherit; }

:focus-visible{
  outline:2px solid var(--blue-400);
  outline-offset:3px;
  border-radius:4px;
}

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

.wrap{ max-width:var(--container); margin:0 auto; padding:0 28px; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-600);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--blue-500);
  box-shadow:0 0 0 3px var(--sky-200);
}
.eyebrow.on-dark{ color:var(--blue-400); }
.eyebrow.on-dark::before{ background:var(--blue-400); box-shadow:0 0 0 3px rgba(61,155,233,0.22); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 24px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; flex:none; }
.btn-primary{
  background:linear-gradient(135deg, var(--blue-500), var(--blue-600) 70%);
  color:var(--white);
  box-shadow:0 10px 24px -10px rgba(0,101,172,0.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(0,101,172,0.6); }
.btn-ghost{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,0.35);
}
.btn-ghost:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.6); }
.btn-outline{
  background:var(--white);
  color:var(--blue-600);
  border-color:var(--line);
}
.btn-outline:hover{ border-color:var(--blue-500); transform:translateY(-2px); }

/* ==========================================================================
   Top info bar
   ========================================================================== */
.topbar{
  background:var(--navy-950);
  color:var(--sky-200);
  font-size:13px;
}
.topbar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 28px;
  gap:16px;
  flex-wrap:wrap;
}
.topbar-contact{ display:flex; gap:22px; flex-wrap:wrap; }
.topbar-contact a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--sky-200);
  opacity:.92;
}
.topbar-contact a:hover{ opacity:1; color:var(--white); }
.topbar-contact svg{ width:14px; height:14px; color:var(--blue-400); flex:none; }
.topbar-social{ display:flex; gap:14px; }
.topbar-social a{
  width:26px; height:26px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08);
  color:var(--sky-200);
}
.topbar-social a:hover{ background:var(--blue-600); color:var(--white); }
.topbar-social svg{ width:13px; height:13px; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.site-header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 8px 24px -18px rgba(0,37,84,0.35);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  gap:20px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{
  height:48px; width:auto;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
}
.brand:hover img{
  transform:scale(1.1) rotate(-3deg);
  filter:drop-shadow(0 0 10px rgba(0,101,172,0.55)) drop-shadow(0 0 2px rgba(61,155,233,0.8));
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{
  font-family:var(--font-display); font-size:19px; color:var(--navy-900); letter-spacing:-0.01em;
}
.brand-text span{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--slate-400); text-transform:uppercase; }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  padding:9px 15px;
  border-radius:999px;
  font-weight:600;
  font-size:14.5px;
  color:var(--slate-600);
  transition:background-color .18s ease, color .18s ease;
}
.nav-links a:hover{ background:var(--paper-dim); color:var(--navy-900); }
.nav-links a.active{ background:var(--navy-900); color:var(--white); }

.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none;
  width:42px; height:42px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--white);
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:2px; background:var(--navy-900);
  position:relative; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle.is-open span{ background:transparent; }
.nav-toggle.is-open span::before{ top:0; transform:rotate(45deg); }
.nav-toggle.is-open span::after{ top:0; transform:rotate(-45deg); }

@media (max-width: 880px){
  .nav-links{
    position:fixed; inset:0 0 auto auto;
    top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--navy-900);
    flex-direction:column; align-items:stretch;
    padding:96px 24px 24px;
    gap:4px;
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:60;
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ color:var(--sky-200); padding:14px 16px; font-size:16px; }
  .nav-links a:hover{ background:rgba(255,255,255,0.08); color:var(--white); }
  .nav-links a.active{ background:var(--blue-600); }
  .nav-toggle{ display:inline-flex; }
  .nav-right .btn-primary{ display:none; }
}

.nav-scrim{
  position:fixed; inset:0; background:rgba(0,20,51,0.5);
  opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:55;
}
.nav-scrim.is-open{ opacity:1; pointer-events:auto; }

/* ==========================================================================
   Circuit background (signature motif)
   ========================================================================== */
.circuit-bg{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.circuit-bg svg{ position:absolute; inset:0; width:100%; height:100%; }
.circuit-line{
  fill:none;
  stroke:rgba(61,155,233,0.35);
  stroke-width:1.4;
  stroke-dasharray:6 7;
}
.circuit-node{ fill:rgba(61,155,233,0.55); }
.circuit-pulse{
  fill:none;
  stroke:var(--blue-400);
  stroke-width:2.2;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(61,155,233,0.9));
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(61,155,233,0.22), transparent 60%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 78%);
  color:var(--white);
  overflow:hidden;
}
.hero-text-col{ position:relative; }
.hero-inner{
  position:relative; z-index:2;
  padding:96px 28px 108px;
  display:grid;
  grid-template-columns:1.05fr 0.85fr;
  gap:48px;
  align-items:center;
}
.hero h1{
  color:var(--white);
  font-size:clamp(34px, 4.6vw, 54px);
  margin:16px 0 20px;
}
.hero h1 em{ font-style:normal; color:var(--blue-400); }
.hero p.lead{
  color:var(--sky-200);
  font-size:17.5px;
  max-width:52ch;
  margin-bottom:32px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }
.hero-stats{
  display:flex; gap:28px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid rgba(255,255,255,0.14);
}
.hero-stats div strong{ display:block; font-family:var(--font-display); font-size:26px; color:var(--white); }
.hero-stats div span{ font-size:12.5px; color:var(--sky-200); font-family:var(--font-mono); letter-spacing:.04em; }
.type-stats > div{ cursor:default; min-width:74px; }
.type-stats > div strong{ min-height:32px; }
.type-stats > div span{ display:inline-block; min-height:16px; }
.type-stats > div.is-typing strong.is-active::after,
.type-stats > div.is-typing span.is-active::after{
  content:"\258B";
  display:inline-block;
  margin-left:2px;
  color:var(--blue-400);
  animation:cursor-blink .8s steps(1) infinite;
}
@keyframes cursor-blink{ 50%{ opacity:0; } }

.hero-art{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.hero-globe-decor{
  position:absolute;
  top:-225px; left:-200px;
  width:290px;
  opacity:0.55;
  pointer-events:none;
  z-index:0;
}
@media (max-width:980px){ .hero-globe-decor{ display:none; } }
.hero-globe-decor svg{ width:100%; height:auto; }
.hero-card{
  position:relative;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--radius-lg);
  padding:34px;
  backdrop-filter:blur(6px);
  width:100%;
  max-width:360px;
}
.hero-card .shield{
  width:74px; height:auto;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,0.35));
  margin-bottom:18px;
}
.hero-card h3{ color:var(--white); font-size:20px; margin-bottom:10px; }
.hero-card p{ color:var(--sky-200); font-size:14.5px; margin-bottom:20px; }
.hero-checklist{ display:flex; flex-direction:column; gap:11px; }
.hero-checklist li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--white); }
.hero-checklist li a{ display:flex; align-items:flex-start; gap:10px; color:inherit; text-decoration:none; transition:opacity .15s ease; }
.hero-checklist li a:hover{ opacity:.78; text-decoration:underline; }
.hero-checklist svg{ width:17px; height:17px; flex:none; margin-top:2px; color:var(--blue-400); }

@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; padding:64px 24px 72px; }
  .hero-art{ order:-1; }
  .hero-card{ max-width:100%; }
}

/* ==========================================================================
   Dashboard mockup (hero centerpiece — a real product screen, not decor)
   ========================================================================== */
.dash-mock-wrap{ position:relative; width:100%; max-width:460px; }
.dash-mock-wrap::before{
  content:"";
  position:absolute; top:-60px; right:-40px;
  width:320px; height:320px;
  background:radial-gradient(circle, rgba(61,155,233,0.32), transparent 70%);
  filter:blur(6px);
  z-index:0;
}
.dash-mock{
  position:relative; z-index:1;
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -20px rgba(0,10,30,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  overflow:hidden;
}
.dash-mock-bar{
  display:flex; align-items:center; gap:8px;
  padding:11px 14px;
  background:var(--paper-dim);
  border-bottom:1px solid var(--line);
}
.dash-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; }
.dash-dot-r{ background:#ff6259; }
.dash-dot-y{ background:#ffbd2e; }
.dash-dot-g{ background:#28c840; }
.dash-mock-url{
  margin-left:6px;
  font-family:var(--font-mono); font-size:11px; color:var(--slate-400);
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:3px 10px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dash-mock-live{
  display:inline-flex; align-items:center; gap:5px; flex:none;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  color:#1a9c4a;
}
.dash-mock-live i{
  width:6px; height:6px; border-radius:50%; background:#28c840;
  animation:live-pulse 1.8s infinite;
}
@keyframes live-pulse{
  0%{ box-shadow:0 0 0 0 rgba(40,200,64,.55); }
  70%{ box-shadow:0 0 0 6px rgba(40,200,64,0); }
  100%{ box-shadow:0 0 0 0 rgba(40,200,64,0); }
}
.dash-mock-body{ display:flex; }
.dash-mock-rail{
  display:flex; flex-direction:column; gap:14px;
  padding:16px 11px;
  background:var(--navy-900);
}
.dash-mock-rail span{
  width:26px; height:26px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--sky-200); opacity:.5;
}
.dash-mock-rail span svg{ width:14px; height:14px; }
.dash-mock-rail span.is-active{ background:var(--blue-500); color:var(--white); opacity:1; }
.dash-mock-main{ flex:1; padding:16px 18px 18px; min-width:0; }
.dash-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.dash-kpi{ padding:10px 12px; background:var(--paper); border:1px solid var(--line); border-radius:10px; }
.dash-kpi .k-label{ display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.07em; color:var(--slate-400); text-transform:uppercase; }
.dash-kpi .k-value{ display:block; font-family:var(--font-display); font-size:19px; color:var(--navy-900); margin-top:2px; }
.dash-kpi .k-trend{ font-family:var(--font-mono); font-size:10px; }
.dash-kpi .k-trend.up{ color:#1a9c4a; }
.dash-chart{ background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 12px 6px; margin-bottom:14px; }
.dash-chart-label{ display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; color:var(--slate-400); text-transform:uppercase; margin-bottom:4px; }
.dash-chart svg{ width:100%; height:44px; display:block; }
.dash-chart-line{ fill:none; stroke:var(--blue-500); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dash-chart-area{ opacity:.45; }
.dash-status-list{ display:flex; flex-direction:column; gap:8px; }
.dash-status-list li{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--slate-600); }
.dash-status-list li strong{ color:var(--navy-900); font-weight:600; margin-right:auto; }
.dot-live{ width:7px; height:7px; border-radius:50%; background:#28c840; flex:none; animation:live-pulse 2.2s infinite; }
.status-ok{ font-family:var(--font-mono); font-size:10px; color:#1a9c4a; text-transform:uppercase; letter-spacing:.04em; }
.dash-toast{
  position:absolute; z-index:2; left:-26px; bottom:-40px;
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  background:var(--white); border-radius:12px; box-shadow:var(--shadow-pop);
  padding:10px 16px 10px 14px;
}
.dash-toast .toast-icon{
  width:30px; height:30px; border-radius:50%; flex:none;
  background:rgba(40,200,64,.14); color:#1a9c4a;
  display:flex; align-items:center; justify-content:center;
}
.dash-toast .toast-icon svg{ width:15px; height:15px; }
.dash-toast strong{ display:block; font-size:12.5px; color:var(--navy-900); }
.dash-toast span{ display:block; font-family:var(--font-mono); font-size:10px; color:var(--slate-400); }
@media (max-width:980px){ .dash-mock-wrap{ max-width:420px; margin:0 auto; } }
@media (max-width:480px){ .dash-mock-rail{ display:none; } .dash-toast{ display:none; } }

/* ==========================================================================
   Service modules (dashboard widget tiles — replaces plain icon cards)
   ========================================================================== */
.grid-modules{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .grid-modules{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .grid-modules{ grid-template-columns:1fr; } }
.svc-mod{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:22px 24px 24px; box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-mod:hover{ transform:translateY(-4px); border-color:var(--blue-400); box-shadow:var(--shadow-pop); }
.svc-mod-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.svc-mod-head .svc-icon{ width:40px; height:40px; border-radius:11px; }
.svc-mod-head .svc-icon svg{ width:20px; height:20px; }
.svc-mod-head h3{ font-size:16.5px; }
.svc-mod p{ color:var(--slate-600); font-size:14px; margin-bottom:16px; }
.svc-mod-metric .m-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.svc-mod-metric .m-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; color:var(--slate-400); text-transform:uppercase; }
.svc-mod-metric .m-value{ font-family:var(--font-display); font-size:14px; color:var(--navy-900); }
.svc-mod-metric .m-bar{ height:6px; border-radius:99px; background:var(--paper-dim); overflow:hidden; }
.svc-mod-metric .m-bar span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--blue-500), var(--blue-400)); }

/* ==========================================================================
   Activity log (proof-of-work feed — replaces static "why us" icon list)
   ========================================================================== */
.log-feed{ display:flex; flex-direction:column; border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius-md); overflow:hidden; }
.log-row{ display:flex; align-items:flex-start; gap:14px; padding:16px 20px; background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.08); }
.log-row:last-child{ border-bottom:none; }
.log-row:nth-child(even){ background:rgba(255,255,255,0.055); }
.log-time{ font-family:var(--font-mono); font-size:11.5px; color:var(--blue-400); flex:none; width:64px; padding-top:2px; }
.log-icon{ width:26px; height:26px; border-radius:50%; flex:none; background:rgba(40,200,64,.16); color:#3ddc72; display:flex; align-items:center; justify-content:center; }
.log-icon svg{ width:13px; height:13px; }
.log-body{ min-width:0; }
.log-body strong{ display:block; color:var(--white); font-size:14.5px; font-weight:600; margin-bottom:2px; }
.log-body span{ display:block; color:var(--sky-200); font-size:13px; }
@media (max-width:600px){ .log-row{ flex-wrap:wrap; } .log-time{ width:auto; order:3; padding-top:6px; } }

/* ==========================================================================
   Per-service product screens (services page split panels)
   ========================================================================== */
.split-art.pm-wrap{
  background:
    radial-gradient(420px 260px at 85% 0%, rgba(61,155,233,0.28), transparent 65%),
    linear-gradient(160deg, var(--navy-900), var(--navy-950));
  padding:34px 28px;
}
.pm{
  position:relative; z-index:2; width:100%;
  background:var(--white); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 50px -18px rgba(0,10,30,0.6);
  font-size:12.5px;
}
.pm-body{ padding:6px 16px 10px; }
.pm-cap{ display:flex; justify-content:space-between; padding:10px 0 4px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--slate-400); }
.pm-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.pm-row:last-child{ border-bottom:none; }
.pm-av{ width:26px; height:26px; border-radius:50%; flex:none; background:var(--sky-200); color:var(--navy-900); font-weight:700; font-size:10px; display:flex; align-items:center; justify-content:center; }
.pm-main{ flex:1; min-width:0; }
.pm-main strong{ display:block; color:var(--navy-900); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-main span{ display:block; font-family:var(--font-mono); font-size:10px; color:var(--slate-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pill{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:99px; flex:none; }
.pill.ok{ background:rgba(40,200,64,.14); color:#1a8a40; }
.pill.warn{ background:rgba(255,170,30,.18); color:#a86a00; }
.pill.info{ background:rgba(21,127,201,.12); color:var(--blue-600); }
.pm-track{ height:5px; border-radius:99px; background:var(--paper-dim); overflow:hidden; margin-top:5px; }
.pm-track span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue-500),var(--blue-400)); }
.pm-num{ font-family:var(--font-display); font-weight:600; color:var(--navy-900); flex:none; }
.pm-uptime{ display:flex; gap:2px; margin-top:6px; }
.pm-uptime i{ flex:1; height:16px; border-radius:2px; background:#3ddc72; }
.pm-uptime i.w{ background:#ffb020; }
.pm-sig{ display:flex; align-items:flex-end; gap:2px; height:14px; flex:none; }
.pm-sig i{ width:3px; border-radius:1px; background:var(--blue-500); }
.pm-sig i:nth-child(1){ height:4px; } .pm-sig i:nth-child(2){ height:7px; } .pm-sig i:nth-child(3){ height:10px; } .pm-sig i:nth-child(4){ height:14px; }
.pm-sig.low i:nth-child(4){ background:var(--line); }
.pm-code{ font-family:var(--font-mono); font-size:10.5px; color:var(--navy-800); background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:2px 7px; flex:none; min-width:38px; text-align:center; }
.pm-flow{ display:flex; flex-direction:column; align-items:stretch; padding:14px 0 8px; }
.pm-node{ display:flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.pm-node b{ width:24px; height:24px; border-radius:7px; background:linear-gradient(150deg,var(--blue-500),var(--navy-900)); color:#fff; font-family:var(--font-mono); font-size:10px; display:flex; align-items:center; justify-content:center; flex:none; }
.pm-node strong{ display:block; color:var(--navy-900); font-weight:600; }
.pm-node span{ font-family:var(--font-mono); font-size:10px; color:var(--slate-400); }
.pm-link{ width:2px; height:14px; background:var(--blue-400); margin:0 auto; opacity:.6; }

/* ==========================================================================
   Route bar (inner page banner header — replaces decorative circuit art)
   ========================================================================== */
.page-banner .page-banner-inner{ text-align:left; }
.page-banner .page-banner-inner p{ margin:0; }
.route-bar{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--sky-200);
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  border-radius:999px; padding:7px 14px; margin-bottom:6px;
}
.route-bar i{ font-style:normal; opacity:.5; }
.route-bar b{ color:var(--white); font-weight:500; }
.route-bar .rb-status{ display:inline-flex; align-items:center; gap:6px; margin-left:10px; padding-left:12px; border-left:1px solid rgba(255,255,255,0.18); color:#3ddc72; font-size:10.5px; }
.route-bar .rb-status::before{ content:""; width:6px; height:6px; border-radius:50%; background:#28c840; animation:live-pulse 1.8s infinite; }
@media (max-width:520px){ .route-bar .rb-status{ margin-left:0; padding-left:0; border-left:none; } }

/* ==========================================================================
   Inner page banner (Services / About)
   ========================================================================== */
.page-banner{
  position:relative;
  background:linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 85%);
  color:var(--white);
  overflow:hidden;
}
.page-banner-inner{
  position:relative; z-index:2;
  padding:52px 28px 48px;
  text-align:center;
}
.page-banner h1{ color:var(--white); font-size:clamp(30px,4vw,44px); margin:14px 0 14px; }
.page-banner p{ color:var(--sky-200); max-width:56ch; margin:0 auto; font-size:16px; }
.breadcrumb{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em;
  color:var(--sky-200); text-transform:uppercase;
}
.breadcrumb svg{ width:12px; height:12px; }

/* ==========================================================================
   Sections
   ========================================================================== */
section{ padding:88px 0; }
.section-head{ max-width:640px; margin:0 0 44px; }
.section-head.center{ margin:0 auto 52px; text-align:center; }
.section-head h2{ font-size:clamp(26px,3.2vw,36px); margin:14px 0 12px; }
.section-head p{ color:var(--slate-600); font-size:16px; }

.section-alt{ background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-navy{ background:var(--navy-900); color:var(--white); position:relative; overflow:hidden; }
.section-navy .section-head p{ color:var(--sky-200); }
.section-navy h2{ color:var(--white); }

/* ==========================================================================
   Service cards
   ========================================================================== */
.grid-services{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
@media (max-width: 900px){ .grid-services{ grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .grid-services{ grid-template-columns:1fr; } }

.svc-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px 26px;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex; flex-direction:column; gap:14px;
}
.svc-card:hover{ transform:translateY(-4px); border-color:var(--blue-400); box-shadow:var(--shadow-pop); }
.svc-icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--blue-500), var(--navy-900));
  color:var(--white);
  flex:none;
  transition:box-shadow .3s ease, transform .3s ease;
}
.svc-card:hover .svc-icon{
  box-shadow:0 0 0 4px rgba(61,155,233,0.18), 0 0 18px rgba(0,101,172,0.55);
  transform:scale(1.06);
}
.svc-icon svg{ width:26px; height:26px; }
.svc-card h3{ font-size:18.5px; }
.svc-card p{ color:var(--slate-600); font-size:14.8px; }
.svc-tag{
  margin-top:auto; padding-top:6px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  color:var(--blue-600); text-transform:uppercase;
}

/* ==========================================================================
   Why-choose checklist
   ========================================================================== */
.why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:700px){ .why-grid{ grid-template-columns:1fr; } }
.why-item{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
}
.why-item svg{ width:22px; height:22px; flex:none; color:var(--blue-400); margin-top:2px; }
.why-item h4{ color:var(--white); font-size:15.5px; margin-bottom:4px; }
.why-item p{ color:var(--sky-200); font-size:13.8px; }

/* ==========================================================================
   About page blocks
   ========================================================================== */
.about-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.about-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:30px 26px;
}
.about-card .eyebrow{ margin-bottom:14px; }
.about-card h3{ font-size:19px; margin-bottom:10px; }
.about-card p{ color:var(--slate-600); font-size:15px; }

.split{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:56px;
  align-items:center;
}
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:32px; } }
.split-art{
  position:relative;
  background:linear-gradient(160deg, var(--navy-900), var(--navy-950));
  border-radius:var(--radius-lg);
  padding:44px;
  display:flex; align-items:center; justify-content:center;
  min-height:320px;
  overflow:hidden;
}
.split-art img{ width:150px; position:relative; z-index:2; }

/* ==========================================================================
   Tag cloud (Also Skilled In)
   ========================================================================== */
.tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}
.tag-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 16px;
  border-radius:999px;
  background:var(--white);
  border:1px solid var(--line);
  font-size:13.5px;
  font-weight:600;
  color:var(--slate-600);
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.tag-pill:hover{ border-color:var(--blue-500); color:var(--blue-600); transform:translateY(-1px); }
.tag-pill svg{ width:14px; height:14px; color:var(--blue-500); flex:none; }

/* ==========================================================================
   Transparent price list (real per-item pricing)
   ========================================================================== */
.price-list-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
@media (max-width:900px){ .price-list-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .price-list-grid{ grid-template-columns:1fr; } }

.price-item{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px 24px;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.price-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-pop); border-color:var(--blue-400); }
.price-item h3{ font-size:16.5px; margin-bottom:16px; min-height:44px; }
.price-item .amount{
  font-family:var(--font-display);
  font-size:32px;
  font-weight:700;
  color:var(--blue-600);
  line-height:1;
}
.price-item .unit{
  display:block;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--slate-400);
  margin-top:9px;
}

/* ==========================================================================
   Pricing cards
   ========================================================================== */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  align-items:stretch;
}
@media (max-width: 900px){ .pricing-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }

.price-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-card);
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.price-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-pop); }
.price-card.featured{
  border-color:var(--blue-500);
  background:linear-gradient(180deg, #fff 0%, var(--paper) 100%);
}
.price-card .badge{
  position:absolute;
  top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg, var(--blue-500), var(--blue-600));
  color:#fff;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 16px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 6px 14px -4px rgba(0,101,172,0.5);
}
.price-card h3{ font-size:20px; margin-bottom:6px; }
.price-card .price-tagline{ color:var(--slate-600); font-size:14px; margin-bottom:20px; min-height:20px; }
.price-card .talk-prompt{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-display);
  font-size:19px;
  color:var(--blue-600);
  font-weight:700;
  margin-bottom:22px;
  padding-bottom:20px;
  border-bottom:1px dashed var(--line);
  flex-wrap:wrap;
}
.price-card .talk-prompt svg{ width:21px; height:21px; flex:none; }
.price-card .talk-prompt-label{ white-space:nowrap; }
.price-card .talk-prompt-sub{
  display:block;
  font-size:12.5px;
  color:var(--slate-400);
  font-weight:400;
  font-family:var(--font-body);
  margin-top:5px;
}
.price-card .price-features{
  display:flex; flex-direction:column; gap:12px;
  margin-bottom:26px;
  flex-grow:1;
}
.price-card .price-features li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14px; color:var(--ink);
}
.price-card .price-features svg{ width:17px; height:17px; flex:none; margin-top:1px; color:var(--blue-600); }
.price-card .btn{ width:100%; justify-content:center; }

.pricing-note{
  text-align:center;
  max-width:640px;
  margin:36px auto 0;
  color:var(--slate-600);
  font-size:14.5px;
  background:var(--paper-dim);
  border:1px dashed var(--line);
  border-radius:12px;
  padding:16px 20px;
}

/* ==========================================================================
   Success stories / case studies
   ========================================================================== */
.story-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px;
  box-shadow:var(--shadow-card);
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:36px;
  align-items:center;
}
@media (max-width:860px){ .story-card{ grid-template-columns:1fr; } }
.story-card .story-meta{ display:flex; flex-direction:column; gap:14px; }
.story-card .story-client{
  font-family:var(--font-display);
  font-size:22px;
  color:var(--navy-900);
}
.story-card .story-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.story-card .story-tags span{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--blue-600);
  background:var(--sky-200);
  padding:5px 11px;
  border-radius:999px;
}
.story-body h4{ font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-400); margin:0 0 6px; font-family:var(--font-mono); }
.story-body p{ color:var(--slate-600); font-size:15px; margin-bottom:18px; }
.story-body p:last-child{ margin-bottom:0; }

.story-placeholder{
  background:var(--paper-dim);
  border:1px dashed var(--line);
  border-radius:var(--radius-lg);
  padding:40px 32px;
  text-align:center;
  color:var(--slate-400);
}
.story-placeholder svg{ width:34px; height:34px; margin:0 auto 14px; color:var(--slate-400); }
.story-placeholder h4{ color:var(--slate-600); font-size:16px; margin-bottom:6px; }
.story-placeholder p{ font-size:13.5px; }

/* ==========================================================================
   Technology partners strip (scrolling marquee)
   ========================================================================== */
.partner-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  -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%);
}
.partner-track{
  display:flex;
  align-items:stretch;
  gap:18px;
  width:max-content;
  animation:partner-scroll 30s linear infinite;
}
.partner-marquee:hover .partner-track{ animation-play-state:paused; }
@keyframes partner-scroll{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0%); }
}
.partner-tile{
  flex:0 0 170px;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.partner-tile:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-card);
  border-color:var(--blue-400);
}
.partner-tile img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:grayscale(100%) opacity(0.62);
  transition:filter .2s ease;
}
.partner-tile:hover img{ filter:grayscale(0%) opacity(1); }

/* Placeholder tiles shown until real logo files are supplied */
.partner-tile.is-placeholder{
  background:var(--paper-dim);
  border-style:dashed;
}
.partner-tile.is-placeholder span{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.03em;
  color:var(--slate-400);
  text-align:center;
}
.partner-tile.is-placeholder:hover{ transform:none; box-shadow:none; border-color:var(--line); }

/* ==========================================================================
   Contact form
   ========================================================================== */
.contact-form{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--radius-lg);
  padding:34px;
  backdrop-filter:blur(6px);
}
.contact-form .form-row{
  margin-bottom:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.contact-form .form-row.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:0;
}
.contact-form .form-row.two-col > div{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.contact-form label{
  font-size:13px;
  font-weight:600;
  color:var(--sky-200);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.06);
  color:var(--white);
  font-family:var(--font-body);
  font-size:14.5px;
  transition:border-color .18s ease, background-color .18s ease;
}
.contact-form select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d9be9' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
  padding-right:36px;
}
.contact-form select option{ color:var(--ink); }
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:rgba(255,255,255,0.4); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--blue-400);
  background:rgba(255,255,255,0.1);
}
.contact-form textarea{ resize:vertical; min-height:100px; }
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}
.form-note{
  font-size:12.5px;
  color:var(--sky-200);
  opacity:.75;
  margin-top:12px;
  text-align:center;
}
.consent-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:4px 0 18px;
}
.consent-row input[type="checkbox"]{
  width:17px;
  height:17px;
  margin-top:2px;
  flex:none;
  accent-color:var(--blue-500);
}
.consent-row label{
  font-size:12.5px;
  font-weight:400;
  color:var(--sky-200);
  line-height:1.5;
}
.consent-row label a{ color:var(--blue-400); text-decoration:underline; }

/* ==========================================================================
   Contact channels, assessment scope, steps, form extras
   ========================================================================== */
.chan-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:1000px){ .chan-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .chan-grid{ grid-template-columns:1fr; } }
.chan{
  display:flex; flex-direction:column; gap:10px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:22px 22px 20px; box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.chan:hover{ transform:translateY(-4px); border-color:var(--blue-400); box-shadow:var(--shadow-pop); }
.chan-top{ display:flex; align-items:center; justify-content:space-between; }
.chan-top .svc-icon{ width:40px; height:40px; border-radius:11px; }
.chan-top .svc-icon svg{ width:20px; height:20px; }
.chan-state{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#1a8a40; }
.chan-state::before{ content:""; width:6px; height:6px; border-radius:50%; background:#28c840; animation:live-pulse 2s infinite; }
.chan-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--slate-400); text-transform:uppercase; }
.chan-value{ font-family:var(--font-display); font-size:19px; color:var(--navy-900); line-height:1.25; overflow-wrap:anywhere; }
.chan p{ font-size:13.5px; color:var(--slate-600); }
.chan-cta{ margin-top:auto; font-weight:600; font-size:13.5px; color:var(--blue-600); }
.map-wrap{ position:relative; min-height:300px; border-radius:var(--radius-md); overflow:hidden; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); }
.map-fallback{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px; text-align:center; color:var(--sky-200); }
.map-fallback strong{ color:var(--white); font-weight:600; }
.map-fallback span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-400); }
.map-frame{ position:absolute; inset:0; border:0; width:100%; height:100%; background:transparent; }
.pm-chat{ display:flex; flex-direction:column; gap:8px; padding:12px 0 6px; }
.bub{ max-width:82%; padding:9px 12px; border-radius:12px; font-size:12.5px; line-height:1.4; }
.bub small{ display:block; margin-top:3px; font-family:var(--font-mono); font-size:9.5px; opacity:.65; }
.bub.in{ align-self:flex-start; background:var(--paper); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:4px; }
.bub.out{ align-self:flex-end; background:linear-gradient(135deg,var(--blue-500),var(--blue-600)); color:var(--white); border-bottom-right-radius:4px; }
.doc-preview{ background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16); border-radius:12px; padding:12px 14px; margin-bottom:18px; }
.doc-head{ display:flex; justify-content:space-between; gap:10px; padding-bottom:8px; margin-bottom:4px; border-bottom:1px solid rgba(255,255,255,0.12); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; color:var(--blue-400); }
.doc-preview ol{ list-style:none; margin:0; padding:0; }
.doc-preview li{ display:flex; align-items:center; gap:9px; padding:5px 0; font-size:13px; color:var(--white); }
.doc-preview li::before{ content:""; width:12px; height:12px; flex:none; border:1.5px solid var(--blue-400); border-radius:3px; }
.area-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.area-list span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.22); color:var(--sky-200); }

.scope-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .scope-grid{ grid-template-columns:1fr; } }
.scope-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px 24px 22px; box-shadow:var(--shadow-card); }
.scope-card .scope-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.scope-card .svc-icon{ width:40px; height:40px; border-radius:11px; }
.scope-card .svc-icon svg{ width:20px; height:20px; }
.scope-card h3{ font-size:17px; }
.scope-card ul{ display:flex; flex-direction:column; gap:10px; }
.scope-card li{ display:flex; gap:10px; font-size:14px; color:var(--slate-600); }
.scope-card li svg{ width:16px; height:16px; flex:none; margin-top:3px; color:var(--blue-600); }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:step; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding:24px 24px 22px; border-radius:var(--radius-md); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); }
.step::before{ counter-increment:step; content:"0" counter(step); font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--blue-400); display:block; margin-bottom:12px; }
.step h3{ color:var(--white); font-size:18px; margin-bottom:8px; }
.step p{ color:var(--sky-200); font-size:14.5px; }

.mm-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin-bottom:22px; }
.mm-price strong{ font-family:var(--font-display); font-size:44px; line-height:1; color:var(--blue-600); }
.mm-price span{ font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--slate-400); }
.check-group{ display:flex; flex-wrap:wrap; gap:10px; }
.contact-form .check-chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.06); color:var(--white); font-size:13.5px; font-weight:500; cursor:pointer; }
.contact-form .check-chip input{ width:16px; height:16px; padding:0; accent-color:var(--blue-500); flex:none; }
.contact-form .check-chip:has(input:checked){ border-color:var(--blue-400); background:rgba(61,155,233,0.16); }
.contact-form input[type="date"]{ color-scheme:dark; }
.form-head{ display:flex; align-items:center; gap:10px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.12); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-400); }
.form-head::before{ content:""; width:7px; height:7px; border-radius:50%; background:#28c840; animation:live-pulse 2s infinite; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  position:relative;
  background:linear-gradient(135deg, var(--blue-600), var(--navy-950) 85%);
  border-radius:var(--radius-lg);
  padding:52px;
  color:var(--white);
  display:flex; align-items:center; justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  overflow:hidden;
}
.cta-band h2{ color:var(--white); font-size:clamp(24px,3vw,32px); margin-bottom:8px; }
.cta-band p{ color:var(--sky-200); font-size:15.5px; }
.cta-band .btn-primary{ background:var(--white); color:var(--blue-600); box-shadow:none; }
.cta-band .btn-primary:hover{ background:var(--sky-200); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--navy-950); color:var(--sky-200); padding:64px 0 0; }
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 0.8fr 0.8fr 1fr;
  gap:36px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img{ height:34px; }
.footer-brand strong{ font-family:var(--font-display); color:var(--white); font-size:18px; }
.site-footer p.desc{ font-size:14px; max-width:34ch; opacity:.85; }
.footer-col h5{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-400); margin-bottom:16px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14.5px; opacity:.88; display:inline-flex; align-items:center; gap:8px; }
.footer-col a:hover{ opacity:1; color:var(--white); }
.footer-col svg{ width:14px; height:14px; color:var(--blue-400); flex:none; }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:22px 0; font-size:13px; opacity:.7;
}
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
}
.footer-social a:hover{ background:var(--blue-600); }
.footer-social svg{ width:14px; height:14px; }

/* ==========================================================================
   Reviews / social proof
   ========================================================================== */
.reviews-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:44px;
  box-shadow:var(--shadow-card);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.reviews-card .stars{
  display:flex;
  gap:4px;
  margin-bottom:12px;
}
.reviews-card .stars svg{ width:22px; height:22px; color:#f5b400; }
.reviews-card h3{ font-size:22px; margin-bottom:8px; }
.reviews-card p{ color:var(--slate-600); font-size:15px; max-width:46ch; }
.reviews-card .google-mark{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--slate-400);
  margin-top:14px;
}
.reviews-card .google-mark svg{ width:16px; height:16px; }

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:70;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px -6px rgba(0,0,0,0.35);
  transition:transform .2s ease, box-shadow .2s ease;
  animation:wa-pulse 2.4s ease-in-out infinite;
}
.whatsapp-float:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 30px -6px rgba(0,0,0,0.4);
  animation-play-state:paused;
}
.whatsapp-float svg{ width:30px; height:30px; color:#fff; }
@keyframes wa-pulse{
  0%, 100%{ box-shadow:0 10px 24px -6px rgba(0,0,0,0.35), 0 0 0 0 rgba(37,211,102,0.5); }
  50%{ box-shadow:0 10px 24px -6px rgba(0,0,0,0.35), 0 0 0 10px rgba(37,211,102,0); }
}
@media (max-width:600px){
  .whatsapp-float{ right:16px; bottom:16px; width:52px; height:52px; }
  .whatsapp-float svg{ width:26px; height:26px; }
}

/* ==========================================================================
   Utility
   ========================================================================== */
.stack{ display:flex; flex-direction:column; }
.center{ text-align:center; }

/* ==========================================================================
   404 page — spinning wireframe globe
   ========================================================================== */
.error-page{
  min-height:78vh;
  display:flex;
  align-items:center;
  position:relative;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(61,155,233,0.22), transparent 60%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 78%);
  overflow:hidden;
}
.error-inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1fr 0.9fr;
  gap:48px;
  align-items:center;
  padding:80px 28px;
}
@media (max-width:900px){
  .error-inner{ grid-template-columns:1fr; text-align:center; padding:56px 24px; }
  .error-inner .globe-wrap{ order:-1; }
}
.error-code{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(72px,11vw,128px);
  line-height:0.9;
  background:linear-gradient(135deg, #fff, var(--blue-400));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:14px 0 6px;
}
.error-page h2{ color:#fff; font-size:clamp(20px,2.6vw,28px); margin-bottom:14px; }
.error-page p.lead{ color:var(--sky-200); font-size:16px; max-width:48ch; margin-bottom:32px; }
@media (max-width:900px){ .error-page p.lead{ margin-left:auto; margin-right:auto; } }
.error-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:900px){ .error-ctas{ justify-content:center; } }

.globe-wrap{
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.globe-wrap svg{ width:min(320px, 70vw); height:auto; filter:drop-shadow(0 20px 45px rgba(0,0,0,0.4)); }
.globe-outline{ fill:none; stroke:var(--blue-400); stroke-width:1.4; opacity:0.9; }
.globe-meridian{ fill:none; stroke:var(--blue-400); stroke-width:1.2; transform-origin:100px 100px; }
.globe-meridian-1{ animation:merid-spin 5s linear infinite; }
.globe-meridian-2{ animation:merid-spin 5s linear infinite; animation-delay:-1.667s; }
.globe-meridian-3{ animation:merid-spin 5s linear infinite; animation-delay:-3.333s; }
@keyframes merid-spin{
  0%{ rx:70; opacity:1; }
  25%{ rx:35; opacity:.65; }
  50%{ rx:1.5; opacity:.3; }
  75%{ rx:35; opacity:.65; }
  100%{ rx:70; opacity:1; }
}
.globe-lat{ fill:none; stroke:rgba(61,155,233,0.45); stroke-width:1; }
.globe-node{ fill:#fff; }
.globe-node-glow{ fill:var(--blue-400); opacity:0.9; }
@keyframes node-pulse{ 0%,100%{ opacity:.4; r:2.2; } 50%{ opacity:1; r:3.6; } }
.globe-node-glow{ animation:node-pulse 2.4s ease-in-out infinite; }
.globe-orbit{ transform-origin:100px 100px; animation:globe-orbit-spin 6s linear infinite; }
.globe-orbit-dot{ fill:#fff; filter:drop-shadow(0 0 4px rgba(255,255,255,0.9)); }
@keyframes globe-orbit-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }