/* ============================================================
   CIPC — Corporate / Business solutions page.
   Extends the AI design system (cipc-ai.css). The page wrapper
   carries `.ai-page` so every token and base component (hero,
   sections, spec cards, partner grid, CTA, light zones) is
   inherited verbatim. This file only adds the few components
   unique to the corporate page: the hero credentials panel,
   2/4-column card grids and the consultative process steps.
   Everything stays scoped under `.ai-page` to avoid collisions.
   ============================================================ */

/* ---------- hero credentials panel ---------- */
.ai-page .creds {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px;
  background: oklch(0.20 0.025 258 / 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glow);
}
.ai-page .creds-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-bright);
  margin-bottom: 4px;
}
.ai-page .cred {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: transform .2s, border-color .2s;
}
.ai-page .cred:hover { transform: translateX(4px); border-color: var(--line-2); }
.ai-page .cred-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ai-page .cred-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.ai-page .cred-role { font-size: 13px; color: var(--ink-2); }
.ai-page .cred-tag {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: oklch(0.64 0.17 252 / 0.14);
  border: 1px solid oklch(0.64 0.17 252 / 0.3);
  padding: 6px 12px;
  border-radius: 999px;
}
.ai-page .cred-tag.gold {
  color: oklch(0.30 0.05 90);
  background: linear-gradient(135deg, oklch(0.86 0.13 90), oklch(0.78 0.15 80));
  border-color: oklch(0.72 0.14 82);
}

/* ---------- light-gray zone (bare .lz sections need their own bg) ----------
   The base `.lz` class only swaps tokens; intro/panel/marques supply the
   background on the AI page. A standalone light section uses `.soft`. */
.ai-page .section.lz.soft { background: var(--l-panel); }

/* ---------- grid modifiers (base spec-grid is 3-up) ---------- */
.ai-page .spec-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ai-page .spec-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- consultative process steps ---------- */
.ai-page .process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.ai-page .step {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 30px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.ai-page .lz .step { box-shadow: 0 1px 2px oklch(0.27 0.03 258 / 0.04); }
.ai-page .step:hover { transform: translateY(-4px); border-color: var(--line-2); }
.ai-page .lz .step:hover { box-shadow: 0 18px 40px -22px oklch(0.40 0.10 258 / 0.45); }
.ai-page .step-num {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(140deg, var(--blue), var(--blue-deep));
  box-shadow: 0 10px 24px -10px oklch(0.64 0.17 252 / 0.7);
}
.ai-page .step-num::before { content: counter(step); }
.ai-page .step h3 { font-size: 21px; margin-bottom: 10px; color: var(--ink); }
.ai-page .step p { color: var(--ink-2); font-size: 15px; margin: 0; }

/* ---------- contained CTA glow ----------
   The shared CTA glow extends 160px above its section to straddle the seam.
   On the corporate page that bleeds onto the light process steps, so we clip
   it to the CTA — the content above stays clean over the blur. */
.ai-page.corp .cta { overflow: hidden; }
.ai-page.corp .cta::before { top: 0; bottom: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .ai-page .spec-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .ai-page .spec-grid.cols-2 { grid-template-columns: 1fr; }
  .ai-page .process { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ai-page .spec-grid.cols-4 { grid-template-columns: 1fr; }
  .ai-page .creds { padding: 22px; }
  .ai-page .cred { flex-wrap: wrap; gap: 10px; }
}