/* =========================================================
   NASDAN — Enterprise solutions page
   Hero shares the Contact page's navy gradient + dot-grid +
   amber corner-glow treatment. Hero graphic: an isometric
   server/data-infrastructure rig (core stack + 3 satellite
   stacks), in NASDAN's navy/amber palette.
   Extends tokens.css / main.css. Section-specific styles only.
   ========================================================= */

/* =========================================================
   1. HERO — navy background (matches Contact page)
   ========================================================= */
.ent-hero {
  position: relative;
  padding-block: var(--sp-9) var(--sp-8);
  background: linear-gradient(150deg, var(--nasdan-navy) 0%, var(--nasdan-navy-700) 100%);
  overflow: hidden;
}
.ent-hero-texture {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(150deg, rgba(0,0,0,0.9) 0%, transparent 60%);
  mask-image: linear-gradient(150deg, rgba(0,0,0,0.9) 0%, transparent 60%);
}
.ent-hero-stripe {
  position: absolute; top: -10%; right: -8%; width: 46%; aspect-ratio: 1/1; left: auto; height: auto;
  background: radial-gradient(circle, rgba(255,193,7,0.28) 0%, rgba(255,193,7,0) 70%);
  filter: blur(6px);
}
.ent-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.ent-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); color: var(--nasdan-amber); }
.ent-hero-eyebrow .eyebrow-mark { background: var(--nasdan-amber); }
.ent-hero-headline {
  font-size: var(--fs-h1); font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight); color: var(--white); margin-bottom: var(--sp-4); max-width: 14ch;
}
.ent-hero-lead { font-size: var(--fs-body); max-width: 48ch; margin-bottom: var(--sp-6); color: var(--paper-300); line-height: var(--lh-relaxed); }
.ent-hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.ent-hero-actions .btn-ghost-nasdan { color: var(--white); border-color: rgba(255,255,255,0.32); }
.ent-hero-actions .btn-ghost-nasdan:hover { background: rgba(255,255,255,0.08); border-color: var(--white); }

/* Hero graphic — isometric server rig */
.ent-rig { position: relative; width: 100%; aspect-ratio: 480 / 420; max-width: 460px; margin-inline: auto; }
.ent-rig-graphic { position: absolute; inset: 0; width: 100%; height: 100%; }

/* =========================================================
   2. THE ENTERPRISE PROBLEM — tangled mesh diagram
   ========================================================= */
.ent-challenge { padding-block: var(--section-pad-y); background: var(--cloud); }
.ent-mesh { position: relative; margin-top: var(--sp-8); height: 420px; }
.ent-mesh-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ent-mesh-node {
  position: absolute; transform: translate(-50%, -50%); width: 200px;
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--ink-100); box-shadow: var(--shadow-sm);
}
.ent-mesh-node strong { font-size: 0.9375rem; font-weight: var(--fw-semibold); color: var(--ink-900); }
.ent-mesh-node span { font-size: 0.8125rem; color: var(--ink-500); line-height: var(--lh-snug); }
.ent-mesh-node--center { width: 240px; border-color: var(--nasdan-amber-700); box-shadow: var(--shadow-md); }
.ent-mesh-node--center strong { color: var(--nasdan-navy); }

/* =========================================================
   3. ENTERPRISE SOFTWARE SOLUTIONS WE OFFER — vertical rail
   (name-only, scrolls once it outgrows the panel) + a single
   large amber panel, same structural pattern as the Custom
   Software "What we build" section.
   ========================================================= */
.ent-solutions { padding-block: var(--section-pad-y); }

.ent-build-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-6); align-items: stretch; }

.ent-build-rail {
  display: flex; flex-direction: column; gap: var(--sp-1);
  max-height: 460px; overflow-y: auto; padding-right: var(--sp-2);
}
.ent-build-rail-item {
  display: flex; align-items: baseline; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md);
  border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; position: relative;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.ent-build-rail-item:hover { background: var(--cloud); }
.ent-build-rail-item.is-active { background: var(--cloud); border-color: var(--ink-100); }
.ent-build-rail-item.is-active::before { content: ""; position: absolute; left: -1px; top: var(--sp-2); bottom: var(--sp-2); width: 3px; border-radius: var(--radius-pill); background: var(--nasdan-amber); }
.ent-build-rail-index { flex: none; font-size: 0.75rem; font-weight: var(--fw-semibold); color: var(--nasdan-amber-700); letter-spacing: var(--ls-wide); transition: color var(--dur-base) var(--ease-out); }
.ent-build-rail-item.is-active .ent-build-rail-index { color: var(--nasdan-amber); }
.ent-build-rail-item span:last-child { font-size: 0.9375rem; font-weight: var(--fw-medium); color: var(--ink-900); line-height: var(--lh-snug); }
.ent-build-rail-item.is-active span:last-child { font-weight: var(--fw-semibold); }

.ent-build-panel {
  background: var(--nasdan-amber); border-radius: var(--radius-lg); padding: var(--sp-8);
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.ent-build-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(11,22,63,0.08) 1px, transparent 1px);
  background-size: 26px 26px;
}
.ent-build-panel-copy { position: relative; z-index: 1; max-width: 640px; }
.ent-build-panel-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--nasdan-navy); margin-bottom: var(--sp-3); }
.ent-build-panel-copy h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--nasdan-navy); margin-bottom: var(--sp-3); }
.ent-build-panel-copy p { color: rgba(11,22,63,0.75); line-height: var(--lh-relaxed); margin-bottom: var(--sp-5); }
.ent-build-panel-example {
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.45); border: 1px solid rgba(11,22,63,0.14);
}
.ent-build-panel-example strong { color: var(--nasdan-navy); }
.ent-build-panel-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); margin-bottom: var(--sp-6); }
.ent-build-panel-chips span { padding: 7px 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.55); border: 1px solid rgba(11,22,63,0.14); font-size: 0.8125rem; font-weight: var(--fw-medium); color: var(--nasdan-navy); }
.ent-build-panel-copy .btn-link-nasdan { color: var(--nasdan-navy); border-color: rgba(11,22,63,0.25); }
.ent-build-panel-copy .btn-link-nasdan:hover { border-color: var(--nasdan-navy); }

/* =========================================================
   4. PLATFORMS & ECOSYSTEMS WE WORK WITH
   ========================================================= */
.ent-platforms { padding-block: var(--section-pad-y); background: var(--cloud); }
.ent-platform-grid { margin-top: var(--sp-8); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
.ent-platform-card {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--ink-100);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ent-platform-card:hover { border-color: var(--ink-200); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.ent-platform-icon {
  flex: none; width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--cloud); border: 1px solid var(--ink-100);
  display: flex; align-items: center; justify-content: center;
}
.ent-platform-icon svg { width: 24px; height: 24px; }
.ent-platform-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ent-platform-name { font-size: 0.9375rem; font-weight: var(--fw-medium); color: var(--ink-900); line-height: var(--lh-snug); }
.ent-platform-category { font-size: 0.75rem; color: var(--ink-400); }

/* =========================================================
   5. WHY CHOOSE NASDAN — numbered card grid
   ========================================================= */
.ent-why { padding-block: var(--section-pad-y); }
.ent-why-cards { margin-top: var(--sp-8); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-100); border: 1px solid var(--ink-100); border-radius: var(--radius-md); overflow: hidden; }
.ent-why-card { background: var(--white); padding: var(--sp-6); transition: background-color var(--dur-base) var(--ease-out); }
.ent-why-card:hover { background: var(--cloud); }
.ent-why-num { display: block; font-size: 0.75rem; font-weight: var(--fw-semibold); color: var(--nasdan-amber); letter-spacing: var(--ls-wider); margin-bottom: var(--sp-3); }
.ent-why-card h3 { font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--ink-900); margin: 0 0 var(--sp-2); }
.ent-why-card p { font-size: 0.875rem; color: var(--ink-500); line-height: var(--lh-relaxed); margin: 0; }

/* =========================================================
   6. HOW YOU CAN WORK WITH US — navy, horizontal scroll cards,
   ported from the "How We Work" page's engagement-models section
   ========================================================= */
.hwb-engage { position: relative; overflow: hidden; padding-block: var(--section-pad-y-lg); background: var(--nasdan-navy); }
.hwb-engage-texture {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 80% 20%, rgba(0,0,0,0.8) 0%, transparent 60%);
  mask-image: radial-gradient(circle at 80% 20%, rgba(0,0,0,0.8) 0%, transparent 60%);
}
.hwb-engage .container-nasdan { position: relative; z-index: 1; }
.hwb-engage-scroll {
  display: flex; gap: var(--sp-5); margin-top: var(--sp-8);
  overflow-x: auto; padding-bottom: var(--sp-5); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.hwb-engage-scroll::-webkit-scrollbar { height: 6px; }
.hwb-engage-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 99px; }
.hwb-engage-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 99px; }
.hwb-engage-card {
  flex: 0 0 270px; scroll-snap-align: start;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.hwb-engage-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,193,7,0.35); }
.hwb-engage-index { display: block; font-size: 0.75rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--nasdan-amber); margin-bottom: var(--sp-4); }
.hwb-engage-card h3 { font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--white); margin-bottom: var(--sp-3); }
.hwb-engage-card p { font-size: 0.875rem; color: var(--paper-300); margin-bottom: var(--sp-5); line-height: var(--lh-relaxed); }
.hwb-engage-best { font-size: 0.8125rem; color: var(--paper-500); padding-top: var(--sp-3); border-top: 1px solid rgba(255,255,255,0.1); }
.hwb-engage-best strong { color: var(--nasdan-amber); font-weight: var(--fw-medium); }

/* =========================================================
   7. FINAL CTA
   ========================================================= */
.ent-final-panel { }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
  .ent-hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .ent-rig { max-width: 400px; }
  .ent-platform-grid { grid-template-columns: repeat(3, 1fr); }
  .ent-why-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
  .ent-hero { padding-block: var(--sp-8) var(--sp-6); }
  .ent-hero-headline { max-width: 100%; font-size: clamp(1.75rem, 1.5rem + 2.2vw, 2.25rem); }
  .ent-hero-actions { flex-direction: column; align-items: stretch; }
  .ent-hero-actions .btn-nasdan { white-space: normal; text-align: center; }
  .ent-rig { max-width: 320px; }

  .ent-mesh { height: auto; position: static; display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
  .ent-mesh-lines { display: none; }
  .ent-mesh-node { position: static; transform: none; width: 100%; }
  .ent-mesh-node--center { width: 100%; }

  .ent-build-layout { grid-template-columns: 1fr; }
  .ent-build-rail { max-height: 260px; }
  .ent-build-panel { padding: var(--sp-6); }

  .ent-platform-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .ent-platform-card { padding: var(--sp-4); }

  .ent-why-cards { grid-template-columns: 1fr; }

  .hwb-engage-card { flex-basis: 240px; }
}

@media (max-width: 430.98px) {
  .ent-platform-grid { grid-template-columns: 1fr; }
  .ent-offer-item { min-width: 200px; }
}