/* ═══════════════════════════════════════════════════════════════════
   VectorMATRIX — AI Integrations
   Shared stylesheet for:
     · the homepage section  (#ai-integrations on index.html / de/index.html)
     · the dedicated pages   (/ai-integrations.html, /de/ai-integrations.html)
   Design tokens (--bg, --bg2, --card, --line, --txt, --muted,
   --accent, --accent2, --grad) are defined in site.css — this file
   intentionally does NOT redefine :root and adds NO global img{} rule
   (site.css already handles responsive images).
   ═══════════════════════════════════════════════════════════════════ */

/* AI integrations — homepage section */
/* Three-card grid: image on top (16:9-ish), title + body below. */
.aii-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.aii-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.aii-card:hover{border-color:rgba(34,211,238,.35);transform:translateY(-3px)}
.aii-card picture{display:block}
.aii-card img{width:100%;height:auto;display:block}
.aii-card-body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.aii-card-body h3{font-size:1.12rem}
.aii-card-body p{color:var(--muted);font-size:.92rem}
.aii-cta-row,.aii-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
@media(max-width:900px){.aii-grid{grid-template-columns:1fr}}

/* ─────────────────────────────────────────────────────────────────
   Nav accommodation (every page that links this stylesheet)
   The added "AI Integrations"/"KI-Integrationen" nav link pushes the
   desktop nav past one row well below the 1180px container. Tighten
   desktop spacing and hand over to the hamburger menu earlier than
   site.css's 820px breakpoint so the header never wraps.
   ───────────────────────────────────────────────────────────────── */
@media(min-width:1025px){
  .nav-menu{margin-left:28px;gap:14px}
  .nav-links{gap:18px;font-size:.88rem;white-space:nowrap}
  .nav-cta{padding:10px 16px;white-space:nowrap}
}
@media(min-width:821px) and (max-width:1024px){
  .nav-menu{display:none;position:fixed;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin-left:0;background:rgba(7,9,15,.98);border-bottom:1px solid var(--line);padding:12px 24px 22px}
  .nav-menu.open{display:flex}
  .nav-menu .nav-links{display:flex;flex-direction:column;gap:0}
  .nav-menu .nav-links a{padding:11px 2px;border-bottom:1px solid var(--line);color:var(--txt);white-space:normal}
  .nav-menu .nav-right{margin-top:14px;justify-content:space-between;flex-wrap:wrap;gap:12px}
  .nav-toggle{display:flex}
}

/* ─────────────────────────────────────────────────────────────────
   AI integrations — dedicated page
   ───────────────────────────────────────────────────────────────── */

/* Gradient text helper (site.css scopes .grad to the homepage hero) */
.aii-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Alternating section background (same rhythm as .industries in site.css) */
.aii-alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Block 1 — hero with image */
.aii-hero{padding:170px 0 80px;position:relative;overflow:hidden;overflow:clip}
.aii-hero::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:600px;background:radial-gradient(closest-side,rgba(34,211,238,.14),transparent);pointer-events:none}
.aii-hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.aii-hero-inner>*{min-width:0}
.aii-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1;font-weight:700;margin-bottom:22px}
.aii-lede{max-width:560px;color:var(--muted);font-size:1.08rem;margin-bottom:34px}
.aii-hero-media picture{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.aii-hero-media img{width:100%;height:auto;display:block}
@media(max-width:900px){.aii-hero-inner{grid-template-columns:1fr;gap:40px}}

/* Block 2 — three-column deployment-model overview strip */
.aii-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.aii-ov-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 26px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .2s}
.aii-ov-card:hover{border-color:rgba(34,211,238,.35);transform:translateY(-3px)}
.aii-ov-tag{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
.aii-ov-card h3{font-size:1.12rem}
.aii-ov-card p{color:var(--muted);font-size:.92rem;flex:1}
.aii-jump{color:var(--accent);font-size:.88rem;font-weight:600}
.aii-jump:hover{text-decoration:underline}
@media(max-width:900px){.aii-overview{grid-template-columns:1fr}}

/* Blocks 3–5 — alternating two-column image/text blocks */
.aii-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.aii-split>*{min-width:0}
.aii-media picture{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.aii-media img{width:100%;height:auto;display:block}
.aii-cap{color:var(--muted);font-size:.82rem;margin-top:12px}
.aii-h{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:16px}
.aii-copy p{color:var(--muted)}
.aii-points{list-style:none;margin-top:20px}
.aii-points li{color:var(--muted);font-size:.92rem;padding:8px 0;border-top:1px solid var(--line)}
.aii-points li::before{content:'✓';color:var(--accent2);margin-right:10px;font-weight:700}
.aii-points li b{color:var(--txt)}
@media(max-width:900px){.aii-split{grid-template-columns:1fr;gap:36px}}

/* Block 6 — security checklist grid */
.aii-sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.aii-sec-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;font-size:.9rem;color:var(--muted);display:flex;gap:12px;align-items:flex-start}
.aii-sec-item .aii-check{color:var(--accent2);font-weight:700;flex:none}
@media(max-width:1000px){.aii-sec-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.aii-sec-grid{grid-template-columns:1fr}}

/* Block 7 — use-case matrix table (horizontal scroll wrapper on mobile) */
.aii-matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.aii-matrix{width:100%;min-width:640px;border-collapse:collapse;font-size:.92rem}
.aii-matrix th{font-family:'Space Grotesk',sans-serif;text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);color:var(--txt);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.aii-matrix td{padding:16px 20px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.aii-matrix tr:last-child td{border-bottom:none}
.aii-matrix td:first-child{color:var(--txt);font-weight:600;white-space:nowrap}
.aii-rec{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap}
.aii-rec-self{background:rgba(163,230,53,.12);color:var(--accent2);border:1px solid rgba(163,230,53,.3)}
.aii-rec-hybrid{background:rgba(34,211,238,.12);color:var(--accent);border:1px solid rgba(34,211,238,.3)}
.aii-rec-cloud{background:rgba(255,255,255,.06);color:var(--txt);border:1px solid var(--line)}

/* Block 8 — 4-step implementation flow (numbered) */
.aii-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:aii-step}
.aii-step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.aii-step-num{font-family:'Space Grotesk',sans-serif;font-size:.85rem;color:var(--accent);margin-bottom:12px}
.aii-step h3{font-size:1.05rem;margin-bottom:8px}
.aii-step p{color:var(--muted);font-size:.9rem}
@media(max-width:1000px){.aii-flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.aii-flow{grid-template-columns:1fr}}

/* Block 9 — final CTA band */
.aii-cta{background:linear-gradient(160deg,#10141f,#0b0f1a);border:1px solid var(--line);border-radius:20px;padding:56px 40px;text-align:center}
.aii-cta h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-bottom:14px}
.aii-cta p{color:var(--muted);max-width:580px;margin:0 auto 28px}
.aii-cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){.aii-cta{padding:40px 22px}}

/* ─────────────────────────────────────────────────────────────────
   Block 10 — "Integration Flow" live simulation (#ai-flow)
   Canvas packet-flow demo on the dedicated AI Integrations pages and
   (compact variant) inside the homepage #ai-integrations section.
   Namespaced .aif-* so TwinForge (.tfx-*) and the .aii-flow steps grid
   stay fully independent. No global selectors.
   ───────────────────────────────────────────────────────────────── */
.aif-sim{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:34px}
.aif-sim-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:14px}
.aif-sim-head h3{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:600;margin:0;color:var(--txt)}
.aif-sim-head span{color:var(--muted);font-size:.82rem}

/* scenario toggle pills */
.aif-scenarios{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.aif-pill{background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--muted);padding:7px 16px;font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.aif-pill:hover{border-color:rgba(34,211,238,.4);color:var(--txt)}
.aif-pill.is-active{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.5);color:var(--accent)}

/* canvas wrap: framed panel with subtle inner glow */
.aif-canvas-wrap{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#0b0f1a,#07090f);box-shadow:inset 0 0 70px rgba(34,211,238,.05)}
.aif-canvas-wrap canvas{display:block;width:100%;height:auto}

/* stats tiles */
.aif-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
.aif-stat{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.aif-stat .aif-k{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.aif-stat .aif-v{font-family:'Space Grotesk',sans-serif;font-size:1.12rem;font-weight:700;color:var(--txt);margin-top:2px}

/* controls — TwinForge visual language, independent class names */
.aif-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.aif-btn{background:var(--grad);color:#04121a;border:0;border-radius:8px;padding:9px 20px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;letter-spacing:.03em}
.aif-btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
.aif-btn.ghost:hover{border-color:var(--accent)}

/* ticker: 6 most recent log events, newest on top */
.aif-ticker{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;color:var(--accent2)}
.aif-ticker li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2px solid rgba(163,230,53,.3);padding-left:8px}
.aif-ticker li:first-child{color:var(--accent);border-left-color:var(--accent)}

/* screen-reader-only flow summary (canvas has role="img" + aria-label) */
.aif-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* compact variant (homepage): centered ~980px, scenario pills hidden */
.aif-flow--compact{padding:0}
.aif-flow--compact .aif-sim{max-width:980px;margin-left:auto;margin-right:auto}
.aif-flow--compact .aif-scenarios{display:none}

@media(max-width:900px){
  .aif-sim{padding:16px}
  .aif-stats{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .aif-canvas-wrap{box-shadow:none}
  .aif-pill{transition:none}
}