/* =========================================================
   NASDAN — Finance solutions page
   Dominant visual metaphor: Financial Infrastructure /
   Transaction Flow (bank + money hero graphic, icon pipeline,
   tabbed solutions panels, security spine, integrations grid)
   Extends tokens.css / main.css. Section-specific styles only.
   ========================================================= */

/* =========================================================
   1. HERO — navy background (Contact page treatment) + bank &
   money illustration
   ========================================================= */
.fin-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;
}
.fin-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%);
}
.fin-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);
}
.fin-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.fin-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); color: var(--nasdan-amber); }
.fin-hero-eyebrow .eyebrow-mark { background: var(--nasdan-amber); }
.fin-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;
}
.fin-hero-lead { font-size: var(--fs-body); max-width: 46ch; margin-bottom: var(--sp-6); color: var(--paper-300); line-height: var(--lh-relaxed); }
.fin-hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.fin-hero-actions .btn-ghost-nasdan { color: var(--white); border-color: rgba(255,255,255,0.32); }
.fin-hero-actions .btn-ghost-nasdan:hover { background: rgba(255,255,255,0.08); border-color: var(--white); }

.fin-hero-visual { position: relative; width: 100%; max-width: 460px; margin-inline: auto; }
.fin-hero-graphic { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 34px rgba(0,0,0,0.32)); }

/* =========================================================
   2. THE DIGITAL FINANCIAL INFRASTRUCTURE — five-stage icon
   pipeline connected by an animated flow line
   ========================================================= */
.fin-infra { padding-block: var(--section-pad-y); }

.fin-infra-pipeline { display: flex; align-items: flex-start; margin-top: var(--sp-8); }
.fin-infra-node { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); max-width: 180px; }
.fin-infra-step { font-size: 0.6875rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--ink-400); text-transform: uppercase; }
.fin-infra-icon {
  flex: none; width: 72px; height: 72px; border-radius: 20px; margin-bottom: var(--sp-1);
  background: var(--nasdan-navy); color: var(--nasdan-amber);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
}
.fin-infra-icon svg { width: 30px; height: 30px; }
.fin-infra-node--amber .fin-infra-icon { background: var(--nasdan-amber); color: var(--nasdan-navy); }
.fin-infra-node h3 { font-size: 0.9375rem; font-weight: var(--fw-medium); color: var(--ink-900); margin: 0; }
.fin-infra-node p { font-size: 0.8125rem; color: var(--ink-500); line-height: var(--lh-relaxed); margin: 0; }

.fin-infra-connector { flex: 1; height: 2px; max-width: 90px; margin-top: 47px; border-radius: 2px; background: var(--ink-100); position: relative; overflow: hidden; }
.fin-infra-connector span {
  position: absolute; top: 50%; left: -12%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: var(--nasdan-amber); box-shadow: 0 0 10px rgba(255,193,7,0.65); animation: finFlowMove 3s linear infinite;
}
@keyframes finFlowMove {
  0% { left: -12%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 108%; opacity: 0; }
}

/* =========================================================
   3. FINANCIAL SOLUTIONS — tabbed panels (pattern adopted from
   the AI page's "Where AI creates value" section), navy background
   ========================================================= */
.fin-solutions { padding-block: var(--section-pad-y-lg); background: var(--nasdan-navy); }

.fin-sol-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-8); border-bottom: 1px solid rgba(255,255,255,0.14); }
.fin-sol-tab {
  font-family: var(--font-sans); font-size: 0.9375rem; font-weight: var(--fw-medium); color: var(--paper-300);
  background: none; border: none; padding: var(--sp-3) var(--sp-4); cursor: pointer; position: relative;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-base) var(--ease-out);
}
.fin-sol-tab:hover { color: var(--white); }
.fin-sol-tab.is-active { color: var(--white); border-bottom-color: var(--nasdan-amber); }

.fin-sol-panels { margin-top: var(--sp-8); }
.fin-sol-panel { display: none; }
.fin-sol-panel.is-active { display: block; animation: finSolPanelFade 0.35s var(--ease-out); }
@keyframes finSolPanelFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.fin-sol-panel-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: var(--sp-9); align-items: start; }
.fin-sol-panel-copy h3 { font-size: 1.6rem; font-weight: var(--fw-light); letter-spacing: var(--ls-tight); color: var(--white); margin-bottom: var(--sp-3); max-width: 20ch; }
.fin-sol-panel-copy p { color: var(--paper-300); line-height: var(--lh-relaxed); }

.fin-sol-chip-list { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--sp-3); }
.fin-sol-chip {
  font-size: 0.875rem; font-weight: var(--fw-medium); color: var(--white);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-pill);
  padding: 0.6rem 1.1rem; transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.fin-sol-chip:hover { background: rgba(255,193,7,0.12); border-color: rgba(255,193,7,0.4); color: var(--nasdan-amber); }

/* =========================================================
   4. SECURITY AT THE CORE — vertical layered spine
   ========================================================= */
.fin-security { padding-block: var(--section-pad-y); }
.fin-security-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-8); align-items: center; }
.fin-spine { position: relative; padding-left: var(--sp-6); }
.fin-spine-track { position: absolute; top: 8px; bottom: 8px; left: 5px; width: 1px; background: var(--ink-200); }
.fin-spine-item { position: relative; padding-bottom: var(--sp-6); }
.fin-spine-item:last-child { padding-bottom: 0; }
.fin-spine-dot { position: absolute; top: 4px; left: calc(-1 * var(--sp-6) + 1px); width: 11px; height: 11px; border-radius: 50%; background: var(--white); border: 2px solid var(--nasdan-navy); }
.fin-spine-item--amber .fin-spine-dot { border-color: var(--nasdan-amber-700); background: var(--nasdan-amber); }
.fin-spine-item strong { display: block; font-size: 1rem; font-weight: var(--fw-medium); color: var(--ink-900); margin-bottom: 2px; }
.fin-spine-item span { font-size: 0.875rem; color: var(--ink-500); }

/* =========================================================
   5. INTEGRATIONS — categorized logo/chip grid
   ========================================================= */
.fin-integrations { padding-block: var(--section-pad-y); background: var(--cloud); }
.fin-int-grid { margin-top: var(--sp-8); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: stretch; }
.fin-int-card {
  background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-lg);
  padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.fin-int-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fin-int-label { font-size: 0.75rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--ink-400); }
.fin-int-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fin-int-chip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.8438rem; font-weight: var(--fw-medium); color: var(--ink-900);
  background: var(--cloud); border: 1px solid var(--ink-100); border-radius: var(--radius-pill);
  padding: 0.5rem 0.9rem 0.5rem 0.6rem;
}
.fin-int-chip--text { padding-left: 0.9rem; color: var(--ink-500); }
.fin-int-chip-icon { flex: none; width: 17px; height: 17px; }

/* =========================================================
   6. FINAL CTA
   ========================================================= */
.fin-final-panel { }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
  .fin-hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .fin-hero-visual { max-width: 380px; }
  .fin-security-grid { grid-template-columns: 1fr; }
  .fin-sol-panel-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .fin-int-grid { grid-template-columns: repeat(2, 1fr); }

  .fin-infra-pipeline { flex-wrap: wrap; gap: var(--sp-6) var(--sp-5); }
  .fin-infra-node { flex: 1 1 150px; max-width: 220px; }
  .fin-infra-connector { display: none; }
}

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

  .fin-infra-node { flex: 1 1 100%; max-width: none; flex-direction: row; text-align: left; gap: var(--sp-4); }
  .fin-infra-icon { margin-bottom: 0; }

  .fin-sol-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .fin-sol-tab { white-space: nowrap; }

  .fin-int-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .fin-hero-visual { max-width: 280px; }
}