/* ==========================================================================
   Neo AshOS — Commercial authority pages: hero system + page-specific visuals
   Scope: body.gc-commercial-page (clients, custom-software-development,
   global-software-development, security-engineering, engagement-models,
   case-studies). Loaded after global-commercial.css.
   Tokens come from assets/css/neo-header.css (--neo-brand-*, --neo-ink*, --neo-hairline).
   ========================================================================== */

.gc-commercial-page{background:var(--neo-surface,#F7FAFD);color:var(--neo-ink,#0B1929);overflow-x:clip}
.gc-commercial-page .wrap{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px)}

/* ---------- Hero ---------- */
.gc-commercial-page .gc-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:72px 0 64px;
  background:
    radial-gradient(880px 420px at 90% -12%,rgba(17,217,255,.12),transparent 62%),
    radial-gradient(640px 360px at -6% 112%,rgba(245,122,48,.06),transparent 62%),
    linear-gradient(180deg,#F9FBFE 0%,#F1F6FB 100%);
  border-bottom:1px solid var(--neo-hairline,#E3EAF3);
}
.gc-commercial-page .gc-hero:before,.gc-commercial-page .gc-hero:after{display:none}
.gc-commercial-page .gc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.gc-commercial-page .gc-eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--neo-hairline,#E3EAF3);box-shadow:none;
  font:700 11.5px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--neo-brand-blue,#0D4DA8);
}
.gc-commercial-page .gc-hero h1{
  font-family:Rajdhani,Inter,system-ui,sans-serif;font-weight:700;
  font-size:clamp(38px,4.6vw,60px);line-height:1.06;letter-spacing:-.015em;
  color:var(--neo-brand-navy,#041E42);margin:18px 0 18px;max-width:17em;text-wrap:balance;
}
.gc-commercial-page .gc-lead{font-size:clamp(16px,1.35vw,18px);line-height:1.65;color:var(--neo-ink-muted,#5B6B80);max-width:56ch;margin:0 0 28px}
.gc-commercial-page .gc-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 26px}
.gc-commercial-page .gc-actions .btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;
  font:600 15px/1 Inter,system-ui,sans-serif;border-radius:12px;text-decoration:none;box-shadow:none;
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease;
}
.gc-commercial-page .gc-actions .btn:hover{transform:translateY(-1px)}
.gc-commercial-page .gc-actions .btn-orange{background:linear-gradient(135deg,#F57A30,#F59A2B);color:#fff;border:0}
.gc-commercial-page .gc-actions .btn-outline{background:#fff;color:var(--neo-brand-navy,#041E42);border:1.5px solid var(--neo-brand-navy,#041E42)}
.gc-commercial-page .gc-actions .btn-outline:hover{background:#F1F6FB}
.gc-commercial-page .gc-proof{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.gc-commercial-page .gc-chip{
  display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--neo-hairline,#E3EAF3);
  font:600 13px/1 Inter,system-ui,sans-serif;color:var(--neo-brand-navy,#041E42);box-shadow:none;
}

/* ---------- Shared visual card ---------- */
.nv-card{
  background:#fff;border:1px solid var(--neo-hairline,#E3EAF3);border-radius:20px;
  box-shadow:0 16px 40px rgba(4,30,66,.08);padding:24px;min-width:0;
}
.nv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.nv-kicker{font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--neo-brand-blue,#0D4DA8)}
.nv-pill{font:600 11.5px/1 Inter,system-ui,sans-serif;color:var(--neo-ink-muted,#5B6B80);background:#F1F6FB;border-radius:999px;padding:6px 10px;white-space:nowrap}
.nv-foot{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--neo-hairline,#E3EAF3);font:500 13px/1.4 Inter,system-ui,sans-serif;color:var(--neo-ink-muted,#5B6B80)}
.nv-dot{width:8px;height:8px;border-radius:50%;background:var(--neo-brand-orange,#F57A30);flex:none}
.nv-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#EAF2FD;color:var(--neo-brand-blue,#0D4DA8);flex:none}
.nv-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nv-t{font:700 15px/1.25 Inter,system-ui,sans-serif;color:var(--neo-brand-navy,#041E42)}
.nv-s{font:400 13px/1.45 Inter,system-ui,sans-serif;color:var(--neo-ink-muted,#5B6B80)}

/* ---------- 1. Clients: industry / relationship cards ---------- */
.nv-client-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nv-client{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--neo-hairline,#E3EAF3);border-radius:14px;background:#FBFDFF}
.nv-client-logo{height:64px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;padding:6px 8px}
.nv-client-logo img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain;display:block}
.nv-client-tag{font:600 12px/1.3 Inter,system-ui,sans-serif;color:var(--neo-ink-muted,#5B6B80);text-align:center}

/* ---------- 2. Custom software: system architecture ---------- */
.nv-layers{display:flex;flex-direction:column;gap:10px}
.nv-layer{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--neo-hairline,#E3EAF3);border-radius:12px;background:#FBFDFF}
.nv-layer-name{font:700 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--neo-brand-blue,#0D4DA8)}
.nv-tags{display:flex;flex-wrap:wrap;gap:6px}
.nv-tag{padding:6px 10px;border-radius:8px;background:#fff;border:1px solid var(--neo-hairline,#E3EAF3);font:500 12.5px/1 Inter,system-ui,sans-serif;color:var(--neo-brand-navy,#041E42)}
.nv-layer.is-modules{background:var(--neo-brand-navy,#041E42);border-color:var(--neo-brand-navy,#041E42)}
.nv-layer.is-modules .nv-layer-name{color:#8DDFFF}
.nv-layer.is-modules .nv-tag{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.nv-link{height:10px;margin:-4px 0;display:flex;justify-content:center}
.nv-link:before{content:"";width:2px;background:linear-gradient(var(--neo-hairline,#E3EAF3),#C9D8EA);border-radius:2px}

/* ---------- 3. Global software: delivery network ---------- */
.nv-net{width:100%;height:auto;display:block}
.nv-net text{font:600 11px Inter,system-ui,sans-serif;fill:var(--neo-brand-navy,#041E42)}
.nv-net .hub-label{font-weight:700;font-size:12px;fill:#fff}
.nv-phases{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.nv-phase{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:#F1F6FB;font:600 12px/1 Inter,system-ui,sans-serif;color:var(--neo-brand-navy,#041E42)}
.nv-phase i{font-style:normal;color:var(--neo-brand-orange,#F57A30);font-weight:700}

/* ---------- 4. Security: layered pipeline ---------- */
.nv-steps{display:flex;flex-direction:column;gap:0;position:relative}
.nv-step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;padding:10px 0;position:relative}
.nv-step:not(:last-child):after{content:"";position:absolute;left:17px;top:48px;bottom:-10px;width:2px;background:var(--neo-hairline,#E3EAF3)}

/* ---------- 5. Engagement: lifecycle ---------- */
.nv-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;position:relative;margin:6px 0 18px}
.nv-track:before{content:"";position:absolute;left:10%;right:10%;top:17px;height:2px;background:linear-gradient(90deg,#C9D8EA,var(--neo-brand-orange,#F57A30));border-radius:2px}
.nv-node{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;position:relative}
.nv-node b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--neo-brand-blue,#0D4DA8);color:var(--neo-brand-blue,#0D4DA8);font:700 13px/1 Inter,system-ui,sans-serif}
.nv-node.is-last b{background:var(--neo-brand-orange,#F57A30);border-color:var(--neo-brand-orange,#F57A30);color:#fff}
.nv-node span{font:600 12.5px/1.25 Inter,system-ui,sans-serif;color:var(--neo-brand-navy,#041E42)}
.nv-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.nv-model{padding:12px;border:1px solid var(--neo-hairline,#E3EAF3);border-radius:12px;background:#FBFDFF}

/* ---------- 6. Case studies: challenge → outcome ---------- */
.nv-case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nv-case{padding:16px;border:1px solid var(--neo-hairline,#E3EAF3);border-radius:14px;background:#FBFDFF;display:flex;flex-direction:column;gap:6px}
.nv-case b{font:700 12px/1 Inter,system-ui,sans-serif;color:var(--neo-brand-orange,#F57A30);letter-spacing:.08em}
.nv-case.is-final{background:var(--neo-brand-navy,#041E42);border-color:var(--neo-brand-navy,#041E42)}
.nv-case.is-final .nv-t{color:#fff}.nv-case.is-final .nv-s{color:#B7C7DD}

/* ---------- Content cards on these pages ---------- */
.gc-commercial-page .gc-card{border:1px solid var(--neo-hairline,#E3EAF3);border-radius:16px;box-shadow:0 6px 18px rgba(4,30,66,.04)}
.gc-commercial-page .gc-section-head h2,.gc-commercial-page .gc-section h2{font-weight:700;letter-spacing:-.01em}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .gc-commercial-page .gc-hero{padding:56px 0 48px}
  .gc-commercial-page .gc-hero-grid{grid-template-columns:1fr;gap:36px}
  .gc-commercial-page .gc-hero h1{max-width:none}
}
@media(max-width:700px){
  .gc-commercial-page .gc-hero{padding:44px 0 40px}
  .gc-commercial-page .gc-hero h1{font-size:clamp(34px,9.4vw,42px);line-height:1.08}
  .gc-commercial-page .gc-actions{flex-direction:column;align-items:stretch}
  .gc-commercial-page .gc-actions .btn{width:100%}
  .nv-card{padding:18px;border-radius:16px}
  .nv-layer{grid-template-columns:1fr;gap:8px}
  .nv-case-grid{grid-template-columns:1fr}
  .nv-models{grid-template-columns:1fr}
  .nv-track{gap:2px}
  .nv-node span{font-size:11px}
}
@media(max-width:400px){
  .nv-client-grid{grid-template-columns:1fr}
}