/* =========================================================
   Infosion — Insursa Group | Global Stylesheet
   (navy + orange, matching infosion.in's own link colors)
   ========================================================= */

:root{
  --navy:        #0B1354;
  --navy-2:      #16247A;
  --blue:        #2E5CE6;
  --blue-light:  #E9EEFD;
  --accent:      #E08E12;
  --accent-soft: #FCF0DC;
  --paper:       #FAFAF8;
  --surface:     #FFFFFF;
  --surface-2:   #F4F4F1;
  --ink:         #14172B;
  --muted:       #5C5F72;
  --faint:       #9396A6;
  --line:        #E6E5DF;
  --line-dark:   rgba(255,255,255,.12);

  /* spacing rhythm — use these everywhere, no ad-hoc values */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;

  --shadow-sm:  0 1px 2px rgba(11,19,84,.06), 0 1px 1px rgba(11,19,84,.04);
  --shadow-md:  0 10px 28px rgba(11,19,84,.09);
  --shadow-lg:  0 26px 64px rgba(11,19,84,.16);
  --radius:     16px;
  --radius-sm:  10px;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,.68,0,1);
  --ease-2: cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4,h5{margin:0; font-weight:750; letter-spacing:-.02em; line-height:1.14; color:var(--ink);}
p{margin:0;}
button{font-family:inherit; cursor:pointer;}
section{position:relative;}

.wrap{width:min(1180px, 92%); margin:0 auto;}
.wrap-narrow{width:min(760px, 92%); margin:0 auto;}

/* ---------------- utility ---------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue);
}
.eyebrow::before{content:""; width:18px; height:2px; background:var(--blue); display:inline-block;}
.on-dark .eyebrow{color:var(--accent);}
.lede{color:var(--muted); font-size:17px; line-height:1.7; max-width:56ch;}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14.5px; font-weight:650; padding:14px 26px; border-radius:99px;
  border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{width:15px; height:15px; transition:transform .25s var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{background:var(--navy); color:#fff; box-shadow:var(--shadow-md);}
.btn-primary:hover{background:var(--blue); transform:translateY(-2px); box-shadow:0 16px 32px rgba(46,92,230,.28);}
.btn-accent{background:var(--accent); color:#fff; box-shadow:var(--shadow-md);}
.btn-accent:hover{background:#C77D08; transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--navy); transform:translateY(-2px);}
.btn-line{background:transparent; color:#fff; border-color:var(--line-dark);}
.btn-line:hover{border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px);}
.btn-light{background:#fff; color:var(--navy);}
.btn-light:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-text{display:inline-flex; align-items:center; gap:7px; padding:0; font-weight:700; font-size:13.5px; color:var(--blue);}
.btn-text svg{width:13px; height:13px; transition:transform .25s var(--ease);}
.btn-text:hover svg{transform:translateX(3px);}

/* ---------------- lead-capture modal (demo request / brochure download) ---------------- */
.lead-overlay{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(7,12,31,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s;
}
.lead-overlay.open{opacity:1; visibility:visible;}
.lead-modal{
  position:relative; width:min(520px,100%); max-height:calc(100vh - 40px); overflow-y:auto;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:var(--sp-5);
  transform:translateY(14px) scale(.98); transition:transform .28s var(--ease);
}
.lead-overlay.open .lead-modal{transform:translateY(0) scale(1);}
.lead-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--muted);
  display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s;
}
.lead-close:hover{background:var(--surface-2); color:var(--ink);}
.lead-modal h3{font-size:22px; margin-top:var(--sp-1);}
.lead-modal .lead-intro{margin-top:var(--sp-2); color:var(--muted); font-size:14.5px; line-height:1.6;}
.lead-form{display:grid; gap:var(--sp-2); margin-top:var(--sp-4);}
.lead-form label{display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px;}
.lead-form input{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff; transition:border-color .2s, box-shadow .2s;
}
.lead-form input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-light);}
.lead-form input[aria-invalid="true"]{border-color:#C4402F;}
.lead-err{display:block; font-size:12px; color:#C4402F; margin-top:5px; min-height:0;}
.lead-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.lead-form .btn{width:100%; justify-content:center; margin-top:var(--sp-1);}
/* consent row — deliberately separate from the request itself, and top-aligned
   because the opt-in wording runs to two lines */
.lead-check{display:flex; align-items:flex-start; gap:10px; margin-top:var(--sp-1);}
.lead-check input[type="checkbox"]{
  width:17px; height:17px; margin:2px 0 0; flex-shrink:0; cursor:pointer; accent-color:var(--blue);
}
.lead-check label{margin:0; font-size:12.5px; font-weight:500; color:var(--muted); cursor:pointer; line-height:1.5;}
.lead-status{margin-top:var(--sp-3); padding:12px 14px; border-radius:var(--radius-sm); font-size:13.5px; line-height:1.55; display:none;}
.lead-status.show{display:block;}
.lead-status.ok{background:#E7F5EC; color:#1C6B3C;}
.lead-status.bad{background:#FBEAE7; color:#A5341F;}
.lead-done{text-align:center; padding:var(--sp-3) 0;}
.lead-done .lead-tick{
  width:52px; height:52px; border-radius:50%; background:#E7F5EC; color:#1C6B3C;
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-3);
}
@media (max-width:560px){.lead-modal{padding:var(--sp-4);}}

/* ---------------- header ---------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:20px 0;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.solid{
  background:rgba(250,250,248,.88);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:var(--shadow-sm);
  border-color:var(--line);
  padding:13px 0;
}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo{display:flex; align-items:center; gap:2px; font-weight:800; font-size:22px; color:var(--navy); letter-spacing:-.02em;}
.logo .dot{color:var(--accent);}
.logo img{height:34px; width:auto;}
.on-dark .logo, .on-dark.solid .logo{color:#fff;}

.main-nav{display:flex; align-items:center; gap:2px;}
.main-nav > ul{display:flex; align-items:center; gap:2px;}
.main-nav a.nav-link{
  display:flex; align-items:center; gap:5px; white-space:nowrap;
  padding:10px 16px; border-radius:99px; font-size:14px; font-weight:600; color:var(--ink);
  transition:background .2s, color .2s;
}
.main-nav a.nav-link:hover{background:var(--surface-2); color:var(--navy);}
.on-dark a.nav-link, .on-dark.solid a.nav-link{color:#fff;}
.on-dark a.nav-link:hover{background:rgba(255,255,255,.1); color:#fff;}
.main-nav li{position:relative;}
.main-nav .caret{width:9px; height:9px; transition:transform .25s var(--ease); opacity:.55;}
.main-nav li.has-dd:hover .caret{transform:rotate(180deg);}

.dropdown{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px);
  width:300px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg);
  padding:10px; opacity:0; visibility:hidden; transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.main-nav li.has-dd:hover .dropdown{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.dropdown a{display:flex; flex-direction:column; gap:2px; padding:11px 14px; border-radius:10px; transition:background .18s;}
.dropdown a:hover{background:var(--surface-2);}
.dropdown a b{font-size:13.5px; font-weight:650; color:var(--ink);}
.dropdown a span{font-size:12px; color:var(--muted);}

/* ---------------- Solutions mega-menu ---------------- */
/* Solutions mega-menu — all three platforms and all twelve products visible at once.
   No tab-switching, so nothing is hidden and the panel never changes height. */
.mega-panel{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px);
  width:min(940px, calc(100vw - 40px)); background:#fff; border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden;
  opacity:0; visibility:hidden; transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
/* :focus-within lets keyboard users open it by tabbing — hover alone locked them out */
.main-nav li.has-mega:hover .mega-panel,
.main-nav li.has-mega:focus-within .mega-panel{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}

.mega-col{padding:var(--sp-4); border-right:1px solid var(--line);}
.mega-col:last-child{border-right:none;}
.mega-head{
  display:flex; align-items:center; gap:11px;
  padding-bottom:var(--sp-3); margin-bottom:var(--sp-2); border-bottom:1px solid var(--line);
}
.mega-head .mh-ic{
  width:34px; height:34px; border-radius:9px; color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:var(--navy);
  transition:transform .2s var(--ease);
}
.mega-col[data-sol="nova"]    .mh-ic{background:var(--blue);}
.mega-col[data-sol="connect"] .mh-ic{background:var(--navy);}
.mega-col[data-sol="digibiz"] .mh-ic{background:var(--accent);}
.mega-head:hover .mh-ic{transform:translateY(-1px) scale(1.06);}
.mega-head .mh-txt{display:block; min-width:0;}
.mega-head b{display:block; font-size:15px; font-weight:750; color:var(--ink); letter-spacing:-.01em;}
.mega-head .mh-sub{display:block; font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.35;}
.mega-head:hover b{color:var(--blue);}

.mega-links{display:grid; gap:1px;}
.mega-links a{display:block; padding:9px 10px; border-radius:9px; transition:background .18s, padding-left .18s var(--ease);}
.mega-links a:hover{background:var(--blue-light); padding-left:14px;}
.mega-links a b{display:block; font-size:13.5px; font-weight:700; color:var(--ink);}
.mega-links a:hover b{color:var(--blue);}
.mega-links a span{display:block; font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.45;}
/* single-column variant — used by "Who we serve", which has one flat list, not three groups */
.mega-panel.mega-narrow{width:min(320px, calc(100vw - 40px)); grid-template-columns:1fr;}
.mega-panel.mega-narrow .mega-col{padding:var(--sp-2);}
@media (max-width:1080px){.mega-panel{grid-template-columns:repeat(3,1fr);}
  .mega-panel.mega-narrow{grid-template-columns:1fr;}}

.header-cta{display:flex; align-items:center; gap:10px;}
.burger{display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center; flex-direction:column; gap:0;}
.on-dark .burger, .on-dark.solid .burger{border-color:rgba(255,255,255,.3); background:transparent;}
.burger span{display:block; width:16px; height:2px; background:var(--navy); margin:2px 0; transition:transform .25s var(--ease), opacity .25s var(--ease);}
.on-dark .burger span, .on-dark.solid .burger span{background:#fff;}
.burger.active span:nth-child(1){transform:translateY(4px) rotate(45deg);}
.burger.active span:nth-child(2){opacity:0;}
.burger.active span:nth-child(3){transform:translateY(-4px) rotate(-45deg);}

.mobile-nav{position:fixed; inset:0; z-index:1100; background:#fff; padding:100px 28px 40px; transform:translateY(-100%); transition:transform .4s var(--ease); overflow-y:auto;}
.mobile-nav.open{transform:translateY(0);}
.mobile-nav a{display:block; font-size:20px; font-weight:700; padding:14px 0; border-bottom:1px solid var(--line); color:var(--navy);}
.mobile-nav .mob-group{display:block; font-size:20px; font-weight:700; padding:14px 0; border-bottom:1px solid var(--line); color:var(--navy);}
.mobile-nav .sub-links{padding-left:16px;}
.mobile-nav .sub-links a{font-size:15px; font-weight:600; color:var(--muted); padding:10px 0; border-bottom:none;}
@media (max-width:980px){
  .main-nav, .header-cta .btn-ghost, .header-cta .btn-primary{display:none;}
  .burger{display:flex;}
}

/* ---------------- light home hero ---------------- */
.hero-cine{
  position:relative; overflow:hidden; padding:150px 0 var(--sp-6);
  background:var(--paper);
}
.hero-cine::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1000px 560px at 88% -12%, rgba(46,92,230,.10), transparent 60%),
    radial-gradient(760px 520px at -8% 86%, rgba(224,142,18,.12), transparent 60%);
}
.hero-cine .wrap{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-6); align-items:center;}
.hero-cine h1{font-size:clamp(32px,4.6vw,56px); line-height:1.1; letter-spacing:-.02em; margin:var(--sp-3) 0 var(--sp-3); max-width:16ch; color:var(--ink);}
.hero-cine h1 em{font-style:normal; color:var(--blue);}
.hero-cine .lede{color:var(--muted); font-size:17.5px; max-width:54ch;}
.hero-cine .hero-actions{display:flex; align-items:center; gap:14px; margin-top:var(--sp-4); flex-wrap:wrap;}

.pill-row{display:flex; gap:0; margin-top:var(--sp-6); flex-wrap:wrap; border-top:1px solid var(--line); padding-top:var(--sp-3);}
.hero-pill{padding:0 var(--sp-4) 0 0; margin-right:var(--sp-4); border-right:1px solid var(--line);}
.hero-pill:last-child{border-right:none; padding-right:0; margin-right:0;}
.hero-pill b{display:block; font-size:32px; font-weight:800; letter-spacing:-.02em; color:var(--navy); font-variant-numeric:tabular-nums;}
.hero-pill span{display:block; margin-top:6px; font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint);}

/* orbit / constellation product graphic */
.orbit{position:relative; aspect-ratio:1/1; width:100%; max-width:480px; margin:0 auto;}
.orbit-ring{position:absolute; border:1px solid var(--line); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%);}
.orbit-ring.r1{width:64%; height:64%;}
.orbit-ring.r2{width:100%; height:100%; border-style:dashed;}
.orbit-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:112px; height:112px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px;
  box-shadow:var(--shadow-lg); z-index:3; text-align:center;
}
.orbit-center b{font-size:15px; font-weight:800; letter-spacing:-.01em;}
.orbit-center span{font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.6);}
.orbit-node{
  position:absolute; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2;
  animation:orbitfloat 5s ease-in-out infinite;
}
.orbit-node .n-ic{
  width:64px; height:64px; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center; color:var(--navy); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.orbit-node:hover .n-ic{transform:scale(1.08); box-shadow:var(--shadow-lg); border-color:var(--blue); color:var(--blue);}
.orbit-node span{font-size:12px; font-weight:700; color:var(--ink); background:#fff; padding:3px 10px; border-radius:99px; border:1px solid var(--line); white-space:nowrap;}
.orbit-node.o1{top:2%; left:50%; transform:translateX(-50%); animation-delay:.1s;}
.orbit-node.o2{top:28%; right:0%; animation-delay:.9s;}
.orbit-node.o3{bottom:28%; right:2%; animation-delay:1.7s;}
.orbit-node.o4{bottom:2%; left:50%; transform:translateX(-50%); animation-delay:2.5s;}
@keyframes orbitfloat{0%,100%{transform:translateY(0) translateX(var(--tx,0));} 50%{transform:translateY(-10px) translateX(var(--tx,0));}}
.orbit-node.o1{--tx:-50%;}
.orbit-node.o4{--tx:-50%;}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:var(--sp-5);}
  .orbit{max-width:340px;}
}
@media (max-width:760px){
  .hero-cine{padding-top:120px;}
  .hero-pill{margin-right:var(--sp-3); padding-right:var(--sp-3);}
  .hero-pill b{font-size:24px;}
}

/* ---------------- marquee / ticker ---------------- */
.strip{padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface);}
.strip-inner{display:flex; align-items:center;}
.strip-label{flex-shrink:0; padding:20px 26px; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--blue); border-right:1px solid var(--line);}
.marquee{overflow:hidden; flex:1; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marquee-track{display:flex; gap:0; width:max-content; animation:scroll 28s linear infinite;}
.marquee-track span{
  padding:20px 30px; font-weight:650; font-size:15px; color:var(--muted); white-space:nowrap;
  display:flex; align-items:center; gap:10px; border-right:1px solid var(--line);
}
.marquee-track span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--blue);}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* client-logo variant of the marquee */
.marquee-track.logos{align-items:center;}
.marquee-track.logos .client-logo{
  padding:14px 32px; display:flex; align-items:center; justify-content:center;
  border-right:1px solid var(--line); flex-shrink:0;
  width:150px; height:64px; box-sizing:content-box;
}
.marquee-track.logos .client-logo img{height:52px; width:124px; object-fit:contain;}
/* Every logo shares one box, but object-fit:contain scales to fit — so in a wide, short
   box a square mark is height-capped and ends up far smaller than a landscape one.
   These give portrait/squarer marks more height so all read at a similar visual weight. */
.marquee-track.logos .client-logo img[src*="client-tsehay"],
.marquee-track.logos .client-logo img[src*="client-kenindia"]{height:56px;}
.marquee-track.logos .client-logo img[src*="client-lucy"],
.marquee-track.logos .client-logo img[src*="client-zsic"]{height:58px;}
.marquee-track.logos .client-logo img[src*="client-nyala"],
.marquee-track.logos .client-logo img[src*="client-tanzania"]{height:64px;}

/* ---------------- testimonials marquee ---------------- */
.testimonials{overflow:hidden;}
.testi-marquee{
  margin-top:var(--sp-6); overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.testi-track{display:flex; gap:var(--sp-4); width:max-content; animation:testiscroll 55s linear infinite;}
.testi-marquee:hover .testi-track{animation-play-state:paused;}
@keyframes testiscroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.testi-card{
  flex-shrink:0; width:400px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--sp-4); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:var(--sp-3);
  transition:box-shadow .25s ease, transform .25s ease;
}
.testi-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-4px);}
.testi-quote{width:34px; height:26px; color:var(--blue); opacity:.35;}
.testi-text{font-size:15px; line-height:1.7; color:var(--ink); flex:1;}
.testi-person{display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:var(--sp-3);}
.testi-avatar{
  flex-shrink:0; width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; letter-spacing:.02em;
}
.testi-person b{display:block; font-size:14px; font-weight:700; color:var(--ink);}
.testi-person span{display:block; font-size:12.5px; color:var(--muted); line-height:1.4; margin-top:2px;}
/* organisation + location — own line, brand colour, deliberately not bold */
.testi-person .testi-org{display:block; font-size:12.5px; font-weight:500; font-style:normal; color:var(--blue); line-height:1.4; margin-top:3px;}
@media (max-width:640px){
  .testi-card{width:300px;}
}

/* ---------------- sections ---------------- */
.section{padding:var(--sp-7) 0;}
.section-tight{padding:var(--sp-6) 0;}
.section-head{max-width:640px; margin-bottom:var(--sp-6);}
.section-head h2{font-size:clamp(26px,3.2vw,38px); margin:var(--sp-2) 0 0; text-wrap:balance;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center .eyebrow{justify-content:center;}
.bg-alt{background:var(--surface-2);}
.bg-navy{background:var(--navy); color:#fff;}

/* light stats band */
.glance{background:var(--surface-2); padding:var(--sp-7) 0; position:relative; overflow:hidden;}
.glance .wrap{position:relative; z-index:1;}
.glance-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:var(--sp-6) auto 0; max-width:920px;}
@media (max-width:700px){.glance-grid{grid-template-columns:1fr;}}
.glance-grid.cols-4{grid-template-columns:repeat(4,1fr); max-width:1120px;}
@media (max-width:940px){.glance-grid.cols-4{grid-template-columns:repeat(2,1fr); max-width:640px;}}
@media (max-width:560px){.glance-grid.cols-4{grid-template-columns:1fr;}}
.glance-stat b.no-count{font-size:26px; line-height:1.25; padding-top:6px;}
.glance-stat{background:#fff; padding:var(--sp-5) var(--sp-4); text-align:center;}
.glance-stat b{display:block; font-size:38px; font-weight:800; letter-spacing:-.02em; color:var(--navy); font-variant-numeric:tabular-nums;}
.glance-stat span{display:block; margin-top:var(--sp-1); font-size:13px; color:var(--muted); line-height:1.5;}

/* ---------------- three-platform showcase (homepage) ---------------- */
.plat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-6); align-items:stretch;}
@media (max-width:1000px){.plat-grid{grid-template-columns:1fr;}}
/* 2-up variant -- capped so a pair does not stretch to billboard width */
.plat-grid.two{grid-template-columns:repeat(2,1fr);}
@media (max-width:1000px){.plat-grid.two{grid-template-columns:1fr;}}
/* keep the dark headers ending on the same line even when the descriptions differ in length */
@supports (grid-template-rows:subgrid){
  @media (min-width:1001px){
    .plat-grid{grid-template-rows:auto auto;}
    .plat-card{grid-row:span 2; display:grid; grid-template-rows:subgrid;}
  }
}

.plat-card{
  --pl:#5FD4FF;
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.plat-card[data-plat="connect"]{--pl:#8AA4FF;}
.plat-card[data-plat="digibiz"]{--pl:#F0A93C;}
.plat-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);}

/* dark header — reuses the site's glow-art language (navy radial + grid texture) */
.plat-top{
  position:relative; padding:var(--sp-4); color:#fff; overflow:hidden;
  background:radial-gradient(circle at 26% 16%, #16295F 0%, #070C1F 76%);
}
.plat-top::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle at 30% 22%, #000 0%, transparent 76%);
}
.plat-top::after{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--pl);}
.plat-top > *{position:relative; z-index:1;}
.plat-ic{
  width:54px; height:54px; border-radius:15px; color:var(--pl);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--ease);
}
.plat-card:hover .plat-ic{transform:translateY(-2px) scale(1.05);}
.plat-top h3{color:#fff; font-size:22px; margin-top:var(--sp-3); letter-spacing:-.02em;}
.plat-top .plat-lede{margin-top:var(--sp-2); color:rgba(255,255,255,.7); font-size:13.5px; line-height:1.65;}

.plat-body{display:flex; flex-direction:column; flex:1; padding:var(--sp-4);}
.plat-label{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:var(--faint); margin-bottom:var(--sp-2);
}
.plat-products{display:grid;}
.plat-products a{
  display:flex; align-items:flex-start; gap:11px; padding:13px 0;
  border-top:1px solid var(--line); transition:padding-left .25s var(--ease);
}
.plat-products a:hover{padding-left:6px;}
.plat-products .pp-ar{
  width:16px; height:16px; margin-top:2px; flex-shrink:0; color:var(--pl);
  filter:saturate(1.5) brightness(.72);
  transition:transform .25s var(--ease);
}
.plat-products a:hover .pp-ar{transform:translateX(3px);}
.plat-products b{display:block; font-size:14.5px; font-weight:700; color:var(--ink); transition:color .2s;}
.plat-products a:hover b{color:var(--blue);}
.plat-products span{display:block; font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5;}
.plat-card .btn-text{margin-top:auto; padding-top:var(--sp-4);}

/* ---------------- feature grid / cards ---------------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3);}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-3, .grid-2{grid-template-columns:1fr;}}

/* even-column variant — for card counts that don't divide cleanly by 3 (4, 5 items) */
.grid-3.cols-2{grid-template-columns:repeat(2,1fr);}
.grid-3.cols-2 > *:last-child:nth-child(odd){grid-column:1/-1; max-width:calc(50% - var(--sp-3)/2); margin:0 auto;}
@media (max-width:640px){.grid-3.cols-2 > *:last-child:nth-child(odd){max-width:100%;}}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-4); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent;}
.card .ic{width:46px; height:46px; border-radius:12px; background:var(--blue-light); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-3);}
.card h3{font-size:17.5px; margin-bottom:var(--sp-1);}
.card p{color:var(--muted); font-size:14px; line-height:1.65;}

/* image-topped feature card */
.feat-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.feat-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.feat-card .fc-img{aspect-ratio:16/10; overflow:hidden;}
.feat-card .fc-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.feat-card:hover .fc-img img{transform:scale(1.06);}
.feat-card .fc-body{padding:var(--sp-3) var(--sp-3) var(--sp-4);}
.feat-card h3{font-size:16.5px; margin-bottom:var(--sp-1);}
.feat-card p{color:var(--muted); font-size:14px; line-height:1.6;}

/* capability card grid — icon-in-box style, 4-up */
.cap-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); margin-top:var(--sp-5);}
.cap-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:1000px){.cap-grid{grid-template-columns:repeat(2,1fr);} .cap-grid.cols-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cap-grid, .cap-grid.cols-3{grid-template-columns:1fr;}}
.cap-card{
  background:var(--blue-light); border-radius:18px; padding:var(--sp-4);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.cap-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); background:#fff; border:1px solid var(--blue-light);}
.cap-ic{
  width:56px; height:56px; border-radius:14px; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-3);
  box-shadow:0 8px 18px -6px rgba(11,19,84,.45);
}
.cap-card h3{font-size:17px; margin-bottom:var(--sp-1); line-height:1.3;}
.cap-card p{color:var(--muted); font-size:14px; line-height:1.6;}

/* capabilities beside a conversion panel — capability cards left, offer block right */
.cap-split{display:grid; grid-template-columns:1.72fr 1fr; gap:var(--sp-3); align-items:start; margin-top:var(--sp-5);}
@media (max-width:1000px){.cap-split{grid-template-columns:1fr;}}
.cap-split .cap-grid{grid-template-columns:repeat(2,1fr); margin-top:0; gap:var(--sp-2);}
@media (max-width:620px){.cap-split .cap-grid{grid-template-columns:1fr;}}
/* compact card variant — six of these must sit level with the offer panel beside them */
.cap-split .cap-card{padding:var(--sp-3);}
.cap-split .cap-ic{width:38px; height:38px; border-radius:10px; margin-bottom:12px; box-shadow:0 6px 14px -6px rgba(11,19,84,.45);}
.cap-split .cap-ic svg{width:19px; height:19px;}
.cap-split .cap-card h3{font-size:15px; margin-bottom:5px;}
.cap-split .cap-card p{font-size:12.8px; line-height:1.55;}

.offer-card{
  position:relative; overflow:hidden; border-radius:var(--radius); padding:var(--sp-4);
  color:#fff; background:radial-gradient(circle at 26% 14%, #16295F 0%, #070C1F 78%);
  box-shadow:var(--shadow-lg);
}
@media (min-width:1001px){.offer-card{position:sticky; top:100px;}}
.offer-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at 30% 20%, #000 0%, transparent 74%);
}
.offer-card::after{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent);}
.offer-card > *{position:relative; z-index:1;}
.offer-ic{
  width:50px; height:50px; border-radius:13px; color:var(--accent);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-3);
}
.offer-card .offer-eyebrow{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--accent);}
.offer-card h3{color:#fff; font-size:19px; margin:var(--sp-1) 0 var(--sp-2); line-height:1.3;}
.offer-card p{color:rgba(255,255,255,.7); font-size:13.5px; line-height:1.65;}
.offer-list{display:grid; gap:9px; margin:var(--sp-3) 0; }
.offer-list li{display:flex; gap:9px; align-items:flex-start; font-size:13px; color:rgba(255,255,255,.82); line-height:1.5;}
.offer-list svg{width:14px; height:14px; flex-shrink:0; margin-top:3px; color:var(--accent);}
.offer-card .btn{width:100%; justify-content:center;}
.offer-meta{display:block; margin-top:10px; text-align:center; font-size:11.5px; color:rgba(255,255,255,.45);}

/* "why choose" row grid — horizontal icon-left cards, 2-up. Deliberately distinct from .cap-grid so paired sections don't read identically. */
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); margin-top:var(--sp-5); counter-reset:why;}
@media (max-width:760px){.why-grid{grid-template-columns:1fr;}}
.why-row{
  counter-increment:why; position:relative; display:flex; gap:var(--sp-3); align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:var(--sp-4);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.why-row:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--blue-light);}
.why-row::before{
  content:counter(why, decimal-leading-zero); position:absolute; top:var(--sp-3); right:var(--sp-4);
  font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--line);
}
.why-ic{
  width:50px; height:50px; border-radius:50%; background:var(--blue-light); color:var(--blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.why-row h3{font-size:16.5px; margin-bottom:6px; line-height:1.3;}
.why-row p{color:var(--muted); font-size:14px; line-height:1.6;}

/* product card (bigger, homepage) */
.product-row{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-6);}
@media (max-width:900px){.product-row{grid-template-columns:1fr;}}
/* 4-up variant — steps down to 2x2 before stacking, so cards never get squeezed into ribbons */
.product-row.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1100px){.product-row.cols-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.product-row.cols-4{grid-template-columns:1fr;}}
/* 2-up variant, capped so a pair doesn't stretch to billboard width */
.product-row.cols-2{grid-template-columns:repeat(2,1fr); max-width:800px; margin-left:auto; margin-right:auto;}
@media (max-width:700px){.product-row.cols-2{grid-template-columns:1fr;}}
/* flow variant — for counts that don't divide evenly (e.g. 5), the trailing row centres
   instead of hanging left, so the block still reads as deliberate */
.product-row.flow{display:flex; flex-wrap:wrap; justify-content:center;}
.product-row.flow > .product-card{flex:1 1 280px; max-width:360px;}

/* ---------------- compact solution picker (5-up in one row) ----------------
   Image-led product cards can't fit five across without becoming unreadable.
   These drop the image for an icon so every option stays visible in one row —
   no carousel, nothing hidden behind interaction. */
.pick-row{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-2); margin-top:var(--sp-6); align-items:stretch;}
@media (max-width:1100px){.pick-row{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){.pick-row{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.pick-row{grid-template-columns:1fr;}}
.pick-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--sp-3); box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.pick-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--blue-light);}
.pick-ic{
  width:42px; height:42px; border-radius:11px; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-2);
  transition:transform .3s var(--ease);
}
.pick-card[data-accent="gold"] .pick-ic{background:var(--accent);}
.pick-card:hover .pick-ic{transform:translateY(-2px) scale(1.06);}
.pick-card h3{font-size:15px; line-height:1.3; letter-spacing:-.01em;}
.pick-card:hover h3{color:var(--blue);}
.pick-card p{margin-top:7px; font-size:12.5px; color:var(--muted); line-height:1.55; flex:1;}
.pick-more{
  margin-top:var(--sp-3); display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--blue);
}
.pick-more svg{width:12px; height:12px; transition:transform .25s var(--ease);}
.pick-card:hover .pick-more svg{transform:translateX(3px);}
/* names are deliberately broken onto two lines, so every card's body copy starts on the same baseline */
.product-card h3{min-height:2.6em;}
.product-card{background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease); display:flex; flex-direction:column;}
.product-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg);}
.product-card .ph{aspect-ratio:16/10; overflow:hidden; position:relative;}
.product-card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.product-card:hover .ph img{transform:scale(1.07);}
.product-card .pc-body{padding:var(--sp-3) var(--sp-4) var(--sp-4); flex:1; display:flex; flex-direction:column;}
.product-card .tag{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--blue);}
.product-card h3{font-size:18px; margin:var(--sp-1) 0 var(--sp-1);}
.product-card p{font-size:14px; color:var(--muted); line-height:1.6; flex:1;}
.product-card .btn-text{margin-top:var(--sp-3);}

/* ---------------- media/copy split ---------------- */
.media-copy{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:center;}
.media-copy.reverse .media{order:2;}
@media (max-width:900px){.media-copy, .media-copy.reverse{grid-template-columns:1fr;} .media-copy.reverse .media{order:0;}}
.media img{border-radius:var(--radius); box-shadow:var(--shadow-md); border:1px solid var(--line);}
.media{position:relative;}

/* ---------------- then/now split ---------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-top:var(--sp-1);}
@media (max-width:760px){.split{grid-template-columns:1fr;}}
.split .box{border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-4);}
.split .box.dim{background:var(--surface-2); border-left:3px solid var(--faint);}
.split .box.hi{background:#fff; border-left:3px solid var(--blue); box-shadow:var(--shadow-sm);}
.split .box h5{font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--muted); margin-bottom:var(--sp-3);}
.split .box ul{display:grid; gap:var(--sp-2);}
.split .box li{font-size:14.5px; line-height:1.55; padding-left:var(--sp-2); position:relative;}
.split .box li::before{content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--faint);}
.split .box.hi li::before{background:var(--blue);}

/* ---------------- checklist ---------------- */
.feat-list{display:grid; gap:var(--sp-3); margin-top:var(--sp-1);}
.feat-list li{display:flex; gap:var(--sp-2); align-items:flex-start; font-size:15px; line-height:1.6;}
.feat-list .tick{width:22px; height:22px; border-radius:50%; background:var(--blue-light); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;}
.feat-list .tick svg{width:11px; height:11px;}

/* ---------------- module list (ERP) ---------------- */
.module-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-1);}
@media (max-width:640px){.module-grid{grid-template-columns:1fr;}}
.module{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-4);}
.module .n{font-size:12px; font-weight:800; color:var(--blue); letter-spacing:.05em;}
.module h3{font-size:16.5px; margin:var(--sp-2) 0 var(--sp-1);}
.module p{color:var(--muted); font-size:14px; line-height:1.6;}

/* ---------------- values / glance grid (about) ---------------- */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-1);}
@media (max-width:760px){.value-grid{grid-template-columns:1fr;}}
.value{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-4);}
.value .vnum{font-size:12px; font-weight:800; color:var(--blue); letter-spacing:.05em;}
.value h4{font-size:16px; margin:var(--sp-2) 0 var(--sp-1);}
.value p{font-size:13.8px; color:var(--muted); line-height:1.6;}

/* ---------------- CTA band ---------------- */
.cta-band{
  background:var(--navy); border-radius:28px; padding:var(--sp-6) var(--sp-5); overflow:hidden; position:relative;
  background-image:radial-gradient(560px 260px at 90% 0%, rgba(224,142,18,.22), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(46,92,230,.32), transparent 60%);
}
.cta-band-inner{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;}
.cta-band h2{color:#fff; font-size:clamp(22px,3vw,32px); max-width:20ch;}
.cta-band p{color:rgba(255,255,255,.68); margin-top:var(--sp-1); max-width:48ch; font-size:15px;}
.cta-band .actions{display:flex; gap:var(--sp-2); flex-wrap:wrap;}

/* ---------------- contact ---------------- */
.contact-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:var(--sp-5); align-items:start;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.info-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-4); margin-bottom:var(--sp-2); display:flex; gap:14px; align-items:flex-start; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);}
.info-card:hover{border-color:var(--blue-light); box-shadow:var(--shadow-lg);}
.info-card .ic-badge{width:40px; height:40px; border-radius:11px; background:var(--blue-light); color:var(--navy); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.info-card .label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:var(--sp-1);}
.info-card .val{font-size:15px; font-weight:600; line-height:1.6;}
.info-card .val a:hover{color:var(--blue);}
.info-row{display:flex; gap:var(--sp-2); align-items:flex-start;}
.info-row .ic{width:42px; height:42px; border-radius:11px; background:var(--blue-light); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0;}

.form-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:var(--sp-5); box-shadow:var(--shadow-md);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); margin-bottom:var(--sp-2);}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.field{display:flex; flex-direction:column; gap:var(--sp-1);}
.field label{font-size:12.5px; font-weight:650; color:var(--ink);}
.field input, .field select, .field textarea{border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-family:inherit; font-size:14.5px; background:var(--surface-2); transition:border-color .2s, background .2s;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--blue); background:#fff;}
.field.full{grid-column:1/-1;}
.form-note{margin-top:var(--sp-2); font-size:12.5px; color:var(--faint);}
.map-embed{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); margin-top:var(--sp-4); filter:grayscale(.25);}

/* ---------------- footer ---------------- */
.site-footer{background:var(--navy); color:rgba(255,255,255,.72); padding:var(--sp-7) 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr .8fr .8fr .85fr .6fr 1.35fr; gap:var(--sp-4); padding-bottom:var(--sp-6); border-bottom:1px solid var(--line-dark);}
/* postal address sits in the Contact column — needs more room than a link list */
.footer-addr{font-size:13px; line-height:1.65; color:rgba(255,255,255,.55);}
@media (max-width:1200px){.footer-grid{grid-template-columns:1fr 1fr 1fr 1fr;}}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h5{color:#fff; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:var(--sp-3);}
.footer-grid ul{display:grid; gap:var(--sp-2);}
.footer-grid a{font-size:14px; transition:color .2s;}
.footer-grid a:hover{color:#fff;}
.footer-brand .logo{color:#fff;}
.footer-brand .logo img{filter:brightness(0) invert(1);}
.footer-brand p{margin-top:var(--sp-3); font-size:14px; line-height:1.7; max-width:34ch; color:rgba(255,255,255,.55);}
.social-row{display:flex; gap:10px; margin-top:var(--sp-3);}
.social-row a{width:36px; height:36px; border-radius:50%; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s, border-color .2s, transform .2s;}
.social-row a:hover{background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-2px);}
.social-row svg{width:15px; height:15px; color:inherit; flex-shrink:0;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:var(--sp-3) 0; font-size:12.5px; color:rgba(255,255,255,.5); flex-wrap:wrap;}
.foot-bottom a:hover{color:#fff;}

/* ---------------- inner page hero ---------------- */
.page-hero{
  padding:160px 0 var(--sp-6);
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(46,92,230,.12), transparent 60%),
    radial-gradient(640px 380px at -6% 30%, rgba(224,142,18,.14), transparent 60%),
    var(--paper);
  position:relative;
}
.page-hero::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--navy), var(--blue));}
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--faint); font-weight:600; margin-bottom:var(--sp-2);}
.breadcrumb a:hover{color:var(--blue);}
.page-hero h1{font-size:clamp(30px,4.2vw,48px); margin:var(--sp-2) 0 var(--sp-2); max-width:16ch;}
.page-hero .hero-actions{margin-top:var(--sp-4);}

.page-hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-6); align-items:center;}
@media (max-width:900px){.page-hero-grid{grid-template-columns:1fr;}}

/* floating tile cluster — per-product visual, replaces stock photography in hero */
.hero-tiles{position:relative; height:100%; min-height:380px; perspective:1200px;}
.hero-tiles .tile-space{
  position:absolute; inset:0; transform-style:preserve-3d; transition:transform .3s var(--ease-2);
}
.tile{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg);
  padding:14px 18px; display:flex; align-items:center; gap:12px; animation:tilefloat 5.5s ease-in-out infinite;
  transform:translateZ(0);
}
.tile .t-ic{width:42px; height:42px; border-radius:11px; background:var(--blue-light); color:var(--navy); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.tile b{font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap;}
.tile.lg{padding:18px 22px;}
.tile.lg .t-ic{width:50px; height:50px;}
.tile.lg b{font-size:15px;}
@keyframes tilefloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}

.hero-tiles .t1{top:2%; left:6%; animation-delay:.1s;}
.hero-tiles .t2{top:14%; right:2%; animation-delay:.9s;}
.hero-tiles .t3{top:42%; left:0%; animation-delay:1.7s;}
.hero-tiles .t4{top:50%; right:14%; animation-delay:.5s;}
.hero-tiles .t5{bottom:10%; left:16%; animation-delay:1.3s;}
.hero-tiles .t6{bottom:0%; right:0%; animation-delay:2.1s;}
.hero-tiles .ring{position:absolute; border:1px dashed var(--line); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none;}
.hero-tiles .ring.r1{width:70%; height:70%;}
.hero-tiles .ring.r2{width:100%; height:100%;}

@media (max-width:900px){
  .hero-tiles{min-height:300px; margin-top:var(--sp-4);}
  .tile b{font-size:12px;}
  .tile{padding:11px 14px;}
}
@media (max-width:560px){
  .hero-tiles{display:none;}
}

/* hero blob + tilted card stack — used only on About Us / Contact Us heroes, deliberately different from .hero-tiles */
.hero-stack{position:relative; height:100%; min-height:400px;}
.hero-stack .blob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76%; height:76%; max-width:340px; max-height:340px;
  background:radial-gradient(circle at 32% 30%, var(--blue-light), transparent 65%),
             radial-gradient(circle at 70% 72%, rgba(11,19,84,.1), transparent 60%);
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
  animation:blobmorph 11s ease-in-out infinite;
}
@keyframes blobmorph{
  0%,100%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;}
  50%{border-radius:58% 42% 37% 63% / 55% 60% 40% 45%;}
}
.stack-card{
  position:absolute; display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 18px;
  box-shadow:var(--shadow-lg); animation:stackfloat 6s ease-in-out infinite; z-index:2;
}
.stack-card .sc-ic{
  width:42px; height:42px; border-radius:11px; background:var(--navy); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.stack-card b{display:block; font-size:15px; font-weight:800; color:var(--ink); white-space:nowrap; letter-spacing:-.01em;}
.stack-card span{display:block; font-size:11.5px; color:var(--muted); white-space:nowrap;}
.stack-card.c1{top:4%; left:0%; transform:rotate(-5deg); animation-delay:.1s;}
.stack-card.c2{top:32%; right:0%; transform:rotate(4deg); animation-delay:1s; z-index:3;}
.stack-card.c3{bottom:16%; left:6%; transform:rotate(-3deg); animation-delay:1.8s;}
.stack-card.c4{bottom:0%; right:10%; transform:rotate(5deg); animation-delay:.6s;}
@keyframes stackfloat{0%,100%{translate:0 0;} 50%{translate:0 -12px;}}
.stack-dot{position:absolute; width:9px; height:9px; border-radius:50%; background:var(--blue); opacity:.5; animation:stackfloat 5s ease-in-out infinite;}
.stack-dot.d1{top:14%; right:22%; animation-delay:.4s;}
.stack-dot.d2{bottom:30%; left:20%; animation-delay:1.4s;}
.stack-dot.d3{top:48%; left:8%; animation-delay:2.2s; background:var(--navy); opacity:.3;}
@media (max-width:900px){.hero-stack{min-height:320px; margin-top:var(--sp-4);}}
@media (max-width:560px){.hero-stack{display:none;}}

/* ---------------- reveal-on-scroll ---------------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .85s var(--ease), transform .85s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease), transform .75s var(--ease);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.13s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.21s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.29s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.37s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.45s;}

/* ---------------- glow-art illustration (site-wide imagery) ---------------- */
.glow-art{
  position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3.1;
  background:radial-gradient(circle at 50% 38%, #0F1D45 0%, #060A1C 72%);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
}
.glow-art::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
}
.glow-art .g-particles{position:absolute; inset:0; pointer-events:none;}
.glow-art .g-particles span{
  position:absolute; width:3px; height:3px; border-radius:50%; background:#7DD3FC;
  box-shadow:0 0 8px 2px rgba(125,211,252,.9); animation:gparticle 4s ease-in-out infinite;
}
.glow-art .g-particles span:nth-child(1){top:18%; left:16%; animation-delay:0s;}
.glow-art .g-particles span:nth-child(2){top:28%; right:20%; animation-delay:.7s;}
.glow-art .g-particles span:nth-child(3){bottom:24%; left:24%; animation-delay:1.4s;}
.glow-art .g-particles span:nth-child(4){bottom:32%; right:16%; animation-delay:2.1s;}
.glow-art .g-particles span:nth-child(5){top:50%; left:10%; animation-delay:2.8s;}
@keyframes gparticle{0%,100%{opacity:.25; transform:scale(1);} 50%{opacity:1; transform:scale(1.6);}}
.glow-art .g-icon{
  position:relative; z-index:1; width:44%; max-width:190px;
  color:#5FD4FF; filter:drop-shadow(0 0 14px rgba(95,212,255,.85)) drop-shadow(0 0 34px rgba(95,212,255,.4));
  animation:gfloat 5s ease-in-out infinite;
}
.glow-art .g-icon.gold{color:var(--accent); filter:drop-shadow(0 0 14px rgba(224,142,18,.85)) drop-shadow(0 0 34px rgba(224,142,18,.4));}
@keyframes gfloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
.glow-art .g-ring{position:absolute; border:1px solid rgba(95,212,255,.18); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%);}
.glow-art .g-ring.gr1{width:56%; aspect-ratio:1;}
.glow-art .g-ring.gr2{width:80%; aspect-ratio:1; border-style:dashed;}
@media (max-width:640px){.glow-art .g-icon{width:52%;}}

/* ---------------- mock-app illustration (Connect pages) ---------------- */
.mock-app{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3.1; box-shadow:var(--shadow-lg);
  background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  display:flex; align-items:center; justify-content:center;
}
.mock-app::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(420px 260px at 82% 8%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(360px 240px at 8% 92%, rgba(224,142,18,.30), transparent 60%);
}
.mock-app .m-ring{position:absolute; border:1px solid rgba(255,255,255,.22); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;}
.mock-app .m-ring.r1{width:58%; aspect-ratio:1;}
.mock-app .m-ring.r2{width:86%; aspect-ratio:1; border-style:dashed;}
.mock-app .m-core{
  position:relative; z-index:2; width:104px; height:104px; border-radius:50%; background:#fff;
  box-shadow:0 22px 50px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center; color:var(--navy);
}
.mock-app .m-core svg{width:42px; height:42px;}
.mock-app .m-sat{
  position:absolute; z-index:2; width:52px; height:52px; border-radius:50%; background:#fff; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; justify-content:center; color:var(--navy); animation:mockfloat 4.5s ease-in-out infinite;
}
.mock-app .m-sat svg{width:22px; height:22px;}
.mock-app .m-sat.a{top:10%; left:12%;}
.mock-app .m-sat.b{top:14%; right:10%; animation-delay:.8s;}
.mock-app .m-sat.c{bottom:10%; left:16%; animation-delay:1.6s;}
.mock-app .m-sat.d{bottom:12%; right:14%; animation-delay:2.4s;}
@keyframes mockfloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}
@media (max-width:640px){
  .mock-app .m-core{width:80px; height:80px;} .mock-app .m-core svg{width:32px; height:32px;}
  .mock-app .m-sat{width:42px; height:42px;} .mock-app .m-sat svg{width:18px; height:18px;}
}

.ph.icon-tile{
  background:linear-gradient(135deg, var(--blue-light) 0%, #fff 75%);
  display:flex; align-items:center; justify-content:center;
}
.ph.icon-tile .it-ic{
  width:64px; height:64px; border-radius:16px; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--navy); box-shadow:var(--shadow-sm);
}

/* progress bar */
.progress-bar{position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,var(--navy),var(--blue)); width:0%; z-index:2000; transition:width .1s linear;}

/* magnetic button wrapper */
.magnetic{display:inline-block; will-change:transform;}

/* timeline (about) */
.timeline{margin-top:var(--sp-3); position:relative;}
.timeline::before{content:""; position:absolute; left:19px; top:6px; bottom:6px; width:2px; background:var(--line);}
.t-item{position:relative; padding:0 0 var(--sp-4) 54px;}
.t-item:last-child{padding-bottom:0;}
.t-item .dot{position:absolute; left:11px; top:2px; width:18px; height:18px; border-radius:50%; background:var(--blue-light); border:3px solid var(--paper); box-shadow:0 0 0 2px var(--blue);}
.t-item b{display:block; font-size:13px; color:var(--blue); font-weight:800; margin-bottom:4px;}
.t-item h4{font-size:16.5px; margin-bottom:6px;}
.t-item p{font-size:14px; color:var(--muted); line-height:1.6; max-width:56ch;}

::selection{background:var(--accent-soft); color:var(--ink);}

/* ==========================================================================
   WordPress theme additions
   Accents and logo shapes are chosen in wp-admin rather than baked into the
   markup, so these selectors mirror the editable settings.
   ========================================================================== */
.plat-card[data-accent="cyan"]{--pl:#5FD4FF;}
.plat-card[data-accent="indigo"]{--pl:#8AA4FF;}
.plat-card[data-accent="gold"]{--pl:#F0A93C;}

/* Client marks are not all the same shape, so each can be given the height that
   makes it read at the same visual size as the others. */
.marquee-track.logos .client-logo.h56 img{height:56px;}
.marquee-track.logos .client-logo.h58 img{height:58px;}
.marquee-track.logos .client-logo.h64 img{height:64px;}
.marquee-track.logos .client-logo.tall img{height:64px;}

/* WordPress core output */
.screen-reader-text{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.screen-reader-text:focus{position:static; width:auto; height:auto; margin:0; padding:12px 20px; clip:auto; background:#fff; color:var(--navy); z-index:9999; border-radius:0 0 var(--radius-sm) 0;}
.alignleft{float:left; margin:0 var(--sp-3) var(--sp-2) 0;}
.alignright{float:right; margin:0 0 var(--sp-2) var(--sp-3);}
.aligncenter{display:block; margin-left:auto; margin-right:auto;}
.wp-caption-text{font-size:13px; color:var(--muted); margin-top:8px;}
.entry-content{max-width:76ch; margin:0 auto;}
.entry-content h2,.entry-content h3{margin-top:var(--sp-5);}
.entry-content p,.entry-content ul,.entry-content ol{margin-top:var(--sp-3); color:var(--muted); line-height:1.75;}
.entry-content ul,.entry-content ol{padding-left:1.35em;}
.entry-content li{margin-bottom:8px;}
.entry-content a{color:var(--blue); text-decoration:underline; text-underline-offset:3px;}
/* 24x24 icons standing in for a product illustration need a thinner stroke at that scale. */
.glow-art .g-icon.scaled > *{stroke-width:1;}

/* The contact form heading is an h2 for document structure, sized like the h3 it replaced. */
.form-card .form-title{font-size:22px; margin-top:var(--sp-1);}