
/* =========================================================
   V42 — AI Innovation + Solution Flow targeted redesign
   Scoped changes only. Header, footer, banner and final CTA
   intentionally inherit the existing production design.
   ========================================================= */

/* ---------- AI Innovation: editorial signal field ---------- */
.ai42-main { overflow: clip; }
.ai42-section { position: relative; padding: 112px 0; }
.ai42-kicker { margin: 0 0 14px; color: #60a9ff; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ai42-title { margin: 0; color: #fff; font-size: clamp(34px, 4vw, 58px); line-height: 1.02; letter-spacing: -.035em; }
.ai42-copy { color: #999eaf; font-size: 17px; line-height: 1.7; }

.ai42-signal { padding-top: 132px; }
.ai42-signal-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr); gap: 72px; align-items: center; }
.ai42-signal-copy { max-width: 570px; }
.ai42-signal-copy .ai42-copy { margin: 26px 0 0; max-width: 540px; }
.ai42-signal-stage { position: relative; min-height: 540px; display: grid; place-items: center; isolation: isolate; }
.ai42-signal-stage::before { content:""; position:absolute; inset: 6% 2%; background: radial-gradient(circle at 50% 52%, rgba(0,119,255,.18), transparent 34%), linear-gradient(rgba(0,119,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,119,255,.07) 1px, transparent 1px); background-size:auto, 42px 42px, 42px 42px; mask-image: radial-gradient(ellipse at center,#000 22%,transparent 72%); opacity:.9; z-index:-2; }
.ai42-signal-core { width: 250px; aspect-ratio:1; border-radius: 38% 62% 55% 45% / 48% 42% 58% 52%; background: radial-gradient(circle at 35% 28%, rgba(38,163,255,.38), rgba(4,31,68,.95) 44%, rgba(2,13,29,.98) 72%); border: 1px solid rgba(0,119,255,.65); box-shadow: 0 0 90px rgba(0,119,255,.18), inset 0 0 42px rgba(0,119,255,.12); position:relative; animation: ai42Morph 7s ease-in-out infinite alternate; }
.ai42-signal-core::before,.ai42-signal-core::after { content:""; position:absolute; inset:18%; border:1px solid rgba(102,180,255,.36); border-radius:inherit; transform:rotate(18deg); }
.ai42-signal-core::after { inset:32%; transform:rotate(-24deg); border-color:rgba(255,255,255,.18); }
.ai42-signal-core span { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:600; letter-spacing:.16em; font-size:18px; }
.ai42-signal-note { position:absolute; width:190px; color:#c8d7ea; font-size:13px; line-height:1.45; }
.ai42-signal-note strong { display:block; color:#fff; margin-bottom:5px; font-size:14px; }
.ai42-note-a { left:0; top:15%; text-align:right; }
.ai42-note-b { right:0; top:28%; }
.ai42-note-c { left:3%; bottom:15%; text-align:right; }
.ai42-note-d { right:4%; bottom:11%; }
.ai42-signal-note::after { content:""; position:absolute; top:12px; width:70px; height:1px; background:linear-gradient(90deg,transparent,#0077ff); }
.ai42-note-a::after,.ai42-note-c::after { left:calc(100% + 12px); }
.ai42-note-b::after,.ai42-note-d::after { right:calc(100% + 12px); transform:scaleX(-1); }
@keyframes ai42Morph { to { border-radius: 58% 42% 37% 63% / 41% 61% 39% 59%; transform: translateY(-8px) rotate(3deg); } }

/* ---------- AI Innovation: intelligence modes, no card-grid reuse ---------- */
.ai42-modes { background: linear-gradient(180deg,rgba(0,26,58,.52),rgba(0,0,0,0)); }
.ai42-modes-head { display:flex; justify-content:space-between; gap:56px; align-items:end; margin-bottom:58px; }
.ai42-modes-head .ai42-copy { max-width:510px; margin:0; }
.ai42-mode-stack { border-top:1px solid rgba(0,119,255,.34); }
.ai42-mode-row { display:grid; grid-template-columns: 88px minmax(220px,.7fr) minmax(0,1.3fr) 130px; gap:28px; align-items:center; min-height:150px; border-bottom:1px solid rgba(0,119,255,.24); position:relative; overflow:hidden; }
.ai42-mode-row::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,119,255,.10),transparent 45%); transform:translateX(-102%); transition:transform .6s ease; }
.ai42-mode-row:hover::before,.ai42-mode-row.is-active::before { transform:translateX(0); }
.ai42-mode-num { color:#177ee9; font-size:16px; font-weight:600; letter-spacing:.1em; }
.ai42-mode-row h3 { margin:0; color:#fff; font-size:25px; line-height:1.08; }
.ai42-mode-row p { margin:0; color:#999eaf; line-height:1.65; }
.ai42-mode-meter { height:6px; border-radius:999px; background:#06192f; overflow:hidden; border:1px solid rgba(0,119,255,.28); }
.ai42-mode-meter span { display:block; height:100%; width:28%; background:linear-gradient(90deg,#0077ff,#70c8ff); border-radius:inherit; animation: ai42Meter 4.8s ease-in-out infinite; }
.ai42-mode-row:nth-child(2) .ai42-mode-meter span { animation-delay:.8s; }
.ai42-mode-row:nth-child(3) .ai42-mode-meter span { animation-delay:1.6s; }
@keyframes ai42Meter { 0%,100%{width:28%} 50%{width:88%} }

/* ---------- AI Innovation: decision theatre ---------- */
.ai42-decision-wrap { display:grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); gap:72px; align-items:center; }
.ai42-decision-copy .ai42-copy { margin:24px 0 0; }
.ai42-decision-theatre { position:relative; min-height:520px; background: radial-gradient(circle at 50% 48%,rgba(0,119,255,.13),transparent 38%); display:grid; place-items:center; }
.ai42-decision-screen { width:min(100%,720px); min-height:390px; border:1px solid rgba(0,119,255,.38); border-radius:24px; background:linear-gradient(145deg,#03152b,#020a14 70%); box-shadow:0 28px 80px rgba(0,0,0,.28); padding:28px; position:relative; transform:perspective(1200px) rotateY(-4deg) rotateX(2deg); transition:transform .6s ease; }
.ai42-decision-screen:hover { transform:perspective(1200px) rotateY(0) rotateX(0); }
.ai42-screen-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.ai42-screen-head strong { color:#fff; font-size:18px; }
.ai42-live { color:#7ec1ff; font-size:12px; display:flex; align-items:center; gap:8px; }
.ai42-live::before { content:""; width:7px; height:7px; border-radius:50%; background:#1b8cff; box-shadow:0 0 12px #1b8cff; animation:ai42Pulse 1.5s ease-in-out infinite; }
.ai42-decision-list { display:grid; gap:12px; }
.ai42-decision-item { display:grid; grid-template-columns: 42px 1fr auto; gap:16px; align-items:center; padding:17px 18px; border-radius:15px; background:rgba(4,31,64,.72); border:1px solid rgba(0,119,255,.18); }
.ai42-decision-item b { color:#fff; font-size:14px; }
.ai42-decision-item small { color:#7f8ea3; }
.ai42-decision-item em { color:#69b7ff; font-size:12px; font-style:normal; }
.ai42-decision-icon { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; border:1px solid #0077ff; background:linear-gradient(145deg,#0874cf,#043767); }
@keyframes ai42Pulse { 50%{opacity:.35; transform:scale(.75)} }

/* ---------- AI Innovation: governance field ---------- */
.ai42-governance { padding-bottom:128px; }
.ai42-governance-shell { position:relative; padding:70px 0 18px; border-top:1px solid rgba(0,119,255,.28); border-bottom:1px solid rgba(0,119,255,.28); }
.ai42-governance-head { max-width:760px; margin:0 auto 52px; text-align:center; }
.ai42-governance-head .ai42-copy { margin:22px auto 0; max-width:650px; }
.ai42-governance-spectrum { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.ai42-spectrum-item { min-height:230px; padding:30px 28px; border-left:1px solid rgba(0,119,255,.22); position:relative; }
.ai42-spectrum-item:last-child { border-right:1px solid rgba(0,119,255,.22); }
.ai42-spectrum-item span { color:#2594ff; font-size:12px; letter-spacing:.12em; }
.ai42-spectrum-item h3 { color:#fff; margin:36px 0 12px; font-size:21px; }
.ai42-spectrum-item p { color:#999eaf; margin:0; line-height:1.6; }
.ai42-spectrum-item::after { content:""; position:absolute; top:0; left:0; width:1px; height:0; background:#2395ff; box-shadow:0 0 18px rgba(35,149,255,.9); animation:ai42Sweep 4s ease-in-out infinite; }
.ai42-spectrum-item:nth-child(2)::after{animation-delay:.5s}.ai42-spectrum-item:nth-child(3)::after{animation-delay:1s}.ai42-spectrum-item:nth-child(4)::after{animation-delay:1.5s}
@keyframes ai42Sweep { 0%,100%{height:0;top:0} 50%{height:100%;top:0} 51%{height:100%;top:0} 99%{height:0;top:100%} }

/* ---------- Solution V42: one-stage command deck ---------- */
.features-flow-v42 { padding:112px 0; position:relative; overflow:hidden; background:radial-gradient(circle at 50% 52%,rgba(0,119,255,.08),transparent 34%); }
.flow42-head { text-align:center; max-width:770px; margin:0 auto 46px; }
.flow42-head .v6-sub { margin:16px auto 0; max-width:650px; }
.flow42-tabs { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.flow42-tab { border:1px solid rgba(0,119,255,.25); background:#020c18; color:#8190a6; border-radius:999px; padding:10px 17px; font:inherit; cursor:pointer; transition:.28s ease; }
.flow42-tab:hover,.flow42-tab.is-active { color:#fff; border-color:#0077ff; background:rgba(0,119,255,.12); box-shadow:inset 0 0 20px rgba(0,119,255,.06); }
.flow42-stage { max-width:1120px; margin:0 auto; min-height:430px; display:grid; grid-template-columns:minmax(270px,.68fr) minmax(0,1.32fr); position:relative; border-top:1px solid rgba(0,119,255,.32); border-bottom:1px solid rgba(0,119,255,.32); }
.flow42-primary { padding:54px 44px 54px 0; display:flex; flex-direction:column; justify-content:center; }
.flow42-step-num { font-size:13px; color:#2a95ff; letter-spacing:.14em; margin-bottom:28px; }
.flow42-primary h3 { margin:0 0 18px; color:#fff; font-size:clamp(34px,4vw,54px); line-height:.98; letter-spacing:-.04em; }
.flow42-primary p { margin:0; color:#999eaf; line-height:1.7; font-size:16px; max-width:430px; }
.flow42-viewport { position:relative; min-height:430px; border-left:1px solid rgba(0,119,255,.22); display:grid; place-items:center; overflow:hidden; }
.flow42-viewport::before { content:""; position:absolute; width:62%; aspect-ratio:1; border-radius:44% 56% 64% 36% / 40% 42% 58% 60%; background:radial-gradient(circle at 35% 30%,rgba(27,140,255,.33),rgba(3,27,58,.72) 52%,transparent 72%); filter:blur(2px); animation:flow42Blob 7s ease-in-out infinite alternate; }
@keyframes flow42Blob { to { transform:translate(34px,-18px) rotate(12deg) scale(1.08); border-radius:62% 38% 35% 65% / 54% 62% 38% 46%; } }
.flow42-readout { position:relative; z-index:2; width:min(82%,620px); display:grid; gap:12px; }
.flow42-readout-row { display:grid; grid-template-columns:36px 1fr auto; gap:14px; align-items:center; padding:15px 16px; background:rgba(1,12,26,.78); backdrop-filter:blur(10px); border-bottom:1px solid rgba(0,119,255,.26); transform:translateX(12px); opacity:.55; transition:.45s ease; }
.flow42-readout-row.is-hot { opacity:1; transform:translateX(0); border-bottom-color:#188dff; }
.flow42-readout-row span:first-child { color:#168cff; font-weight:600; }
.flow42-readout-row b { color:#fff; font-size:14px; }
.flow42-readout-row em { color:#7e8da1; font-size:12px; font-style:normal; }

@media (max-width: 980px) {
  .ai42-signal-grid,.ai42-decision-wrap { grid-template-columns:1fr; gap:48px; }
  .ai42-signal-copy,.ai42-decision-copy { max-width:760px; }
  .ai42-modes-head { display:block; }
  .ai42-modes-head .ai42-copy { margin-top:20px; }
  .ai42-mode-row { grid-template-columns:60px minmax(180px,.65fr) 1fr; }
  .ai42-mode-meter { grid-column:2 / -1; margin-bottom:22px; }
  .ai42-governance-spectrum { grid-template-columns:1fr 1fr; }
  .ai42-spectrum-item:nth-child(2){border-right:1px solid rgba(0,119,255,.22)}
  .flow42-stage { grid-template-columns:1fr; }
  .flow42-primary { padding:38px 18px 34px; text-align:center; align-items:center; }
  .flow42-viewport { border-left:0; border-top:1px solid rgba(0,119,255,.22); min-height:340px; }
}
@media (max-width: 680px) {
  .ai42-section,.features-flow-v42 { padding:78px 0; }
  .ai42-signal-stage { min-height:420px; }
  .ai42-signal-core { width:190px; }
  .ai42-signal-note { width:135px; font-size:11px; }
  .ai42-signal-note::after { width:34px; }
  .ai42-mode-row { grid-template-columns:46px 1fr; gap:16px; padding:22px 0; }
  .ai42-mode-row p,.ai42-mode-meter { grid-column:2; }
  .ai42-governance-spectrum { grid-template-columns:1fr; }
  .ai42-spectrum-item,.ai42-spectrum-item:nth-child(2) { border-right:1px solid rgba(0,119,255,.22); }
  .ai42-decision-screen { padding:18px; min-height:360px; }
  .ai42-decision-item { grid-template-columns:34px 1fr; }
  .ai42-decision-item em { grid-column:2; }
  .flow42-tabs { justify-content:flex-start; overflow:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .flow42-tab { white-space:nowrap; }
  .flow42-readout { width:90%; }
  .flow42-readout-row { grid-template-columns:30px 1fr; }
  .flow42-readout-row em { grid-column:2; }
}
@media (prefers-reduced-motion: reduce) {
  .ai42-signal-core,.ai42-mode-meter span,.ai42-live::before,.ai42-spectrum-item::after,.flow42-viewport::before { animation:none !important; }
}
