/* ===================================================================
   SHARED BASE — exact copy of nisum-base.css.
   >>> When you link nisum-base.css globally (theme or site-wide coded
   file), DELETE everything between BEGIN/END SHARED BASE below. The
   module will then use the global file. <<<
   =================================================================== */
/* ===== BEGIN SHARED BASE ===== */
/* ====================================================================
   NISUM — BASE (shared design system)
   One source of truth for tokens, fonts, buttons (pills) and the generic
   section helpers (background + alignment). Every module carries a copy of
   this block marked "SHARED"; once you attach this file globally (Design
   Manager → link to theme, or a site-wide coded file), delete the SHARED
   block from each module.css and the module will use this file instead.

   Everything is scoped under .ns-scope (the wrapper each module outputs),
   so it never collides with the surrounding theme.
   ==================================================================== */
   :root{
    /* colors — from the live nisum.com skin (v8) */
    --purple:#7B2FF7; --blue:#2B3FF0; --cta-blue:#1CA7EC; --lime:#C5EF14;
    --ink:#14161D; --grey:#5C5F6A; --line:#E4E6EE; --soft:#F5F5F7;
    --dark:#000000; --card-dark:#0D0A18;
    --hero-grad:linear-gradient(115deg,#0A0620 0%,#2A0F63 35%,#3E1E9E 55%,#2B3FF0 80%,#00CFFF 115%);
    --grad-text:linear-gradient(100deg,#7B2FF7 0%,#2B3FF0 55%,#00CFFF 110%);
    --grad-cta:linear-gradient(90deg,#1CA7EC,#2B3FF0);
    /* fonts — theme loads corbel; standalone falls back cleanly */
    --font:'corbel-regular','Lato','Segoe UI',Verdana,sans-serif;
    --font-bold:'corbel-bold','corbel-regular','Lato',Verdana,sans-serif;
    /* metrics */
    --max:1180px; --r-card:18px; --r-pill:999px;
  }
  
  .ns-scope, .ns-scope *{box-sizing:border-box;}
  .ns-scope{
    font-family:var(--font);color:var(--ink);background:#fff;
    font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  }
  .ns-scope img,.ns-scope svg{display:block;}
  .ns-scope h1,.ns-scope h2,.ns-scope h3,.ns-scope h4{font-family:var(--font-bold);font-weight:700;line-height:1.2;margin:0;}
  .ns-scope a{color:inherit;text-decoration:none;}
  .ns-scope ::selection{background:var(--lime);color:#000;}
  .ns-scope .wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
  .ns-scope .sec{padding:clamp(44px,6vw,64px) 0;}
  
  /* ---------- pills (site button system) ---------- */
  .ns-scope .pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-bold);
    font-weight:700;font-size:15px;padding:12px 28px;border-radius:var(--r-pill);cursor:pointer;
    border:0;transition:filter .15s,transform .15s,background .15s,color .15s;}
  .ns-scope .pill:hover{transform:translateY(-1px);filter:brightness(1.05);}
  .ns-scope .pill:focus-visible{outline:2px solid var(--cta-blue);outline-offset:3px;}
  .ns-scope .pill--lime{background:var(--lime);color:#000;}
  .ns-scope .pill--lime:hover{background:#000;color:#fff;filter:none;}
  .ns-scope .pill--white{background:#fff;color:var(--ink);}
  .ns-scope .pill--white:hover{background:#000;color:#fff;filter:none;}
  .ns-scope .pill--outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
  .ns-scope .pill--outline:hover{background:var(--ink);color:#fff;filter:none;}
  .ns-scope .pill--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.65);}
  .ns-scope .pill--ghost:hover{background:rgba(255,255,255,.12);filter:none;}
  .ns-scope .pill--grad{background:var(--grad-cta);color:#fff;}
  
  /* text link */
  .ns-scope .tlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-bold);
    font-weight:700;font-size:15px;color:inherit;}
  .ns-scope .tlink .arr{transition:transform .25s;}
  .ns-scope .tlink:hover .arr{transform:translateX(5px);}
  
  /* ---------- gradient text ---------- */
  .ns-scope .grad-text{color:var(--purple);}
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .ns-scope .grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
  }
  
  /* ---------- generic BACKGROUND helper ---------- */
  .ns-scope .bg-white{background:#fff;color:var(--ink);}
  .ns-scope .bg-soft{background:var(--soft);color:var(--ink);}
  .ns-scope .bg-dark{background:var(--dark);color:#fff;}
  .ns-scope .bg-grad{background:var(--hero-grad);color:#fff;}
  .ns-scope .bg-dark h1,.ns-scope .bg-dark h2,.ns-scope .bg-dark h3,
  .ns-scope .bg-grad h1,.ns-scope .bg-grad h2,.ns-scope .bg-grad h3{color:#fff;}
  .ns-scope .bg-dark .muted,.ns-scope .bg-grad .muted{color:rgba(255,255,255,.85);}
  .ns-scope .muted{color:var(--grey);}
  
  /* ---------- generic ALIGNMENT helper ---------- */
  .ns-scope .al-left{text-align:left;}
  .ns-scope .al-center{text-align:center;}
  .ns-scope .al-right{text-align:right;}
  .ns-scope .al-left  .row-cta,.ns-scope .al-left  .stats{justify-content:flex-start;}
  .ns-scope .al-center .row-cta,.ns-scope .al-center .stats{justify-content:center;}
  .ns-scope .al-right .row-cta,.ns-scope .al-right .stats{justify-content:flex-end;}
  .ns-scope .al-left  .constrain{margin-left:0;margin-right:auto;}
  .ns-scope .al-center .constrain{margin-left:auto;margin-right:auto;}
  .ns-scope .al-right .constrain{margin-left:auto;margin-right:0;}
  
  /* ---------- HERO ---------- */
  .ns-scope .hero{ margin-top: 5.25rem;position:relative;overflow:hidden;color:#fff;background:var(--hero-grad);
    min-height:clamp(340px,42vw,460px);display:flex;align-items:center;}
  .ns-scope .hero.has-img{background-size:cover;background-position:center right;background-repeat:no-repeat;}
  .ns-scope .hero__glow{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(60% 90% at 85% 25%,rgba(0,207,255,.25),transparent 60%),
               radial-gradient(50% 80% at 70% 95%,rgba(123,47,247,.30),transparent 60%);}
  .ns-scope .hero .wrap{position:relative;width:100%;}
  .ns-scope .hero__inner{max-width:680px;padding:clamp(56px,7vw,86px) 0;}
  .ns-scope .hero.al-center .hero__inner{margin-inline:auto;}
  .ns-scope .hero.al-right  .hero__inner{margin-left:auto;}
  .ns-scope .hero__eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;
    letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:22px;}
  .ns-scope .hero__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);}
  .ns-scope .hero h1{font-size:clamp(2.6rem,5.4vw,3.5rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:14px;color:#fff;}
  .ns-scope .hero__sub{font-size:clamp(1.05rem,1.7vw,1.22rem);line-height:1.7;color:rgba(255,255,255,.92);margin:0;max-width:60ch;}
  .ns-scope .hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
  .ns-scope .hero.al-center .hero__cta{justify-content:center;}
  .ns-scope .hero.al-right  .hero__cta{justify-content:flex-end;}
  
  /* ---------- STATS ---------- */
  .ns-scope .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:900px;margin-top:clamp(30px,4vw,48px);}
  .ns-scope .stat{padding:6px 22px;}
  .ns-scope .stat:not(:first-child){border-left:1px solid var(--line);}
  .ns-scope .bg-dark .stat:not(:first-child),.ns-scope .bg-grad .stat:not(:first-child){border-left-color:rgba(255,255,255,.18);}
  .ns-scope .stat b{display:block;font-family:var(--font-bold);font-size:clamp(2.1rem,4.4vw,3rem);line-height:1.15;letter-spacing:-.02em;padding-bottom:.08em;}
  .ns-scope .stat span{display:block;margin-top:10px;color:var(--grey);font-size:.98rem;line-height:1.35;}
  .ns-scope .bg-dark .stat span,.ns-scope .bg-grad .stat span{color:rgba(255,255,255,.85);}
  
  /* ---------- reveal (progressive enhancement) ---------- */
  .ns-scope .reveal{opacity:1;transform:none;}
  .ns-scope.is-js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);}
  .ns-scope.is-js .reveal.is-in{opacity:1;transform:none;}
  
  @media (max-width:620px){
    .ns-scope .stats{grid-template-columns:1fr;gap:22px;}
    .ns-scope .stat{padding:0;}
    .ns-scope .stat:not(:first-child){border-left:0;}
  }
  @media (prefers-reduced-motion:reduce){
    .ns-scope *{animation:none!important;transition:none!important;}
    .ns-scope .reveal{opacity:1!important;transform:none!important;}
  }
  
  /* ===== END SHARED BASE ===== */
  
  /* ====================================================================
     NISUM — Products/Services module | module-specific CSS
     Depends on nisum-base.css (tokens, pills, .hero, .stats, bg/align).
     Scoped under .ns-scope. Product-grid classes are prefixed .nsm- .
     ==================================================================== */
  
  /* ---- intro ---- */
  .ns-scope .nsm-intro__in{max-width:820px;}
  .ns-scope .nsm-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:20px;}
  .ns-scope .nsm-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--grad-cta);}
  .ns-scope .bg-dark .nsm-eyebrow,.ns-scope .bg-grad .nsm-eyebrow{color:rgba(255,255,255,.85);}
  .ns-scope .nsm-intro h2{font-size:clamp(1.8rem,3.4vw,2.4rem);letter-spacing:-.02em;margin-bottom:16px;}
  .ns-scope .nsm-intro__body{font-size:clamp(1.05rem,1.7vw,1.2rem);color:var(--grey);max-width:64ch;}
  .ns-scope .bg-dark .nsm-intro__body,.ns-scope .bg-grad .nsm-intro__body{color:rgba(255,255,255,.85);}
  
  /* ---- section head ---- */
  .ns-scope .nsm-sec-head{max-width:660px;margin-bottom:clamp(28px,4vw,42px);}
  .ns-scope .nsm-sec-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.02em;margin-bottom:12px;}
  .ns-scope .nsm-sec-head p{color:var(--grey);font-size:1.06rem;}
  .ns-scope .bg-dark .nsm-sec-head p,.ns-scope .bg-grad .nsm-sec-head p{color:rgba(255,255,255,.82);}
  
  /* ================= FILTER TABS — 3 selectable styles ================= */
  .ns-scope .nsm-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:clamp(26px,4vw,40px);
    --tab-accent:var(--blue);}
  .ns-scope .nsm-tabs.al-center-tabs{justify-content:center;}
  .ns-scope .nsm-chip{font-family:var(--font);font-size:14.5px;cursor:pointer;padding:9px 18px;
    border-radius:var(--r-pill);border:1px solid transparent;background:transparent;color:var(--grey);
    transition:background .2s,color .2s,border-color .2s;-webkit-tap-highlight-color:transparent;}
  .ns-scope .nsm-chip:hover{color:var(--ink);}
  .ns-scope .nsm-chip:focus-visible{outline:2px solid var(--cta-blue);outline-offset:2px;}
  
  /* Style 1 — chip */
  .ns-scope .nsm-tabs--chip .nsm-chip:hover{background:var(--soft);}
  .ns-scope .nsm-tabs--chip .nsm-chip[aria-pressed="true"]{background:#fff;color:var(--ink);
    border-color:var(--line);box-shadow:0 1px 2px rgba(20,22,29,.05);}
  
  /* Style 2 — gradient pill (Why-Nisum look) */
  .ns-scope .nsm-tabs--pill .nsm-chip{border-color:transparent;}
  .ns-scope .nsm-tabs--pill .nsm-chip:hover{background:rgba(123,47,247,.10);color:var(--ink);}
  .ns-scope .nsm-tabs--pill .nsm-chip[aria-pressed="true"]{
    background:linear-gradient(90deg,var(--purple),var(--blue));color:#fff;font-family:var(--font-bold);font-weight:700;}
  
  /* Style 3 — service-page underline tabs (#serv-sec) */
  .ns-scope .nsm-tabs--line{gap:26px;border-bottom:1px solid var(--line);padding-bottom:0;}
  .ns-scope .nsm-tabs--line .nsm-chip{border:0;border-radius:0;padding:10px 2px 16px;color:var(--grey);position:relative;}
  .ns-scope .nsm-tabs--line .nsm-chip:hover{background:transparent;color:var(--ink);}
  .ns-scope .nsm-tabs--line .nsm-chip[aria-pressed="true"]{color:var(--ink);font-family:var(--font-bold);font-weight:700;}
  .ns-scope .nsm-tabs--line .nsm-chip[aria-pressed="true"]::after{content:"";position:absolute;
    left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:var(--tab-accent);}
  
  /* ---- product grid ---- */
  .ns-scope .nsm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .ns-scope .nsm-card{position:relative;display:flex;flex-direction:column;padding:30px 28px 26px;
    border-radius:var(--r-card);background:#fff;border:1px solid var(--line);
    transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s;}
  .ns-scope .nsm-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(20,22,29,.12);border-color:transparent;}
  .ns-scope .nsm-card:focus-visible{outline:2px solid var(--cta-blue);outline-offset:3px;}
  .ns-scope .nsm-card__tag{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:26px;}
  .ns-scope .nsm-tdot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--grey);}
  .ns-scope .nsm-tdot.nsm-c-foundation{background:var(--purple);}
  .ns-scope .nsm-tdot.nsm-c-modernize{background:var(--blue);}
  .ns-scope .nsm-tdot.nsm-c-grow{background:var(--cta-blue);}
  .ns-scope .nsm-tdot.nsm-c-assure{background:#12B76A;}
  .ns-scope .nsm-card h3{font-size:1.4rem;letter-spacing:-.01em;margin-bottom:8px;}
  .ns-scope .nsm-card__desc{font-size:1rem;color:var(--grey);margin-bottom:26px;flex:1;}
  .ns-scope .nsm-card__cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-bold);
    font-weight:700;font-size:14.5px;color:var(--blue);margin-top:auto;}
  .ns-scope .nsm-card__cta .arr{transition:transform .28s cubic-bezier(.2,.7,.2,1);}
  .ns-scope .nsm-card:hover .nsm-card__cta .arr{transform:translateX(6px);}
  .ns-scope .nsm-card[hidden]{display:none;}
  
  @media (max-width:960px){ .ns-scope .nsm-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:620px){
    .ns-scope .nsm-grid{grid-template-columns:1fr;}
  }
  
  
  /* ===== v-update: tab style 4, intro split, stat cards, emphasis ===== */
  /* Style 4 — Service brand pills (blue-gradient active, black inactive) */
  .ns-scope .nsm-tabs--brand{gap:10px;}
  .ns-scope .nsm-tabs--brand .nsm-chip{border:0;border-radius:var(--r-pill);padding:12px 22px;background:#000;color:#fff;font-family:var(--font-bold);font-weight:700;}
  .ns-scope .nsm-tabs--brand .nsm-chip:hover{background:#1c1c22;color:#fff;}
  .ns-scope .nsm-tabs--brand .nsm-chip[aria-pressed="true"]{background:linear-gradient(90deg,#2B3FF0,#1CA7EC);color:#fff;}
  
  /* Intro paragraph emphasis */
  .ns-scope .nsm-intro__lead{font-family:var(--font-bold);font-weight:700;color:var(--ink);font-size:clamp(1.1rem,1.9vw,1.28rem);margin:0 0 6px;}
  .ns-scope .nsm-intro__quote{font-style:italic;color:var(--grey);font-size:1.02rem;margin:6px 0 0;}
  .ns-scope .bg-dark .nsm-intro__lead,.ns-scope .bg-grad .nsm-intro__lead{color:#fff;}
  
  /* Intro Style 2 — split (Nisum Peru) */
  .ns-scope .nsm-intro--split .nsm-intro__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;text-align:left;}
  .ns-scope .nsm-intro--split .nsm-intro__left h2{font-size:clamp(2rem,3.6vw,2.7rem);line-height:1.1;margin-bottom:24px;}
  .ns-scope .nsm-intro--split .nsm-intro__left .nsm-eyebrow{margin-bottom:16px;}
  .ns-scope .nsm-intro--split .nsm-intro__right p{margin:0;}
  .ns-scope .nsm-intro--split .nsm-intro__right p + p{margin-top:18px;}
  
  /* Stat cards (dark filled, lime numbers) */
  .ns-scope .stats--cards{gap:22px;max-width:none;margin-top:clamp(34px,5vw,54px);}
  .ns-scope .stats--cards .stat{background:var(--card-dark);border-radius:var(--r-card);padding:34px 28px;text-align:left;}
  .ns-scope .stats--cards .stat:not(:first-child){border-left:0;}
  .ns-scope .stats--cards .stat b.grad-text{background:none;-webkit-text-fill-color:var(--lime);color:var(--lime);}
  .ns-scope .stats--cards .stat span{color:rgba(255,255,255,.82);}
  
  @media (max-width:860px){
    .ns-scope .nsm-intro--split .nsm-intro__grid{grid-template-columns:1fr;gap:26px;}
  }
  @media (max-width:620px){
    .ns-scope .stats--cards{grid-template-columns:1fr;}
  }