/* Inventiff AI pages — a dark, "systems" layer on top of the tech template.
   Extends the AI visual language already used by the header promo card
   (navy radial + amber glow + #aeb8d4 body) into full page sections.
   All type/colour comes from the base tokens; only the dark surfaces are new. */

:root {
  --ai-bg: #040b22; /* deepest surface */
  --ai-bg-2: #0a1436; /* raised surface */
  --ai-glow: rgba(255,189,14,0.55);
  --ai-line: rgba(255,255,255,0.10);
  --ai-line-soft: rgba(255,255,255,0.06);
  --ai-panel: rgba(255,255,255,0.035);
  --ai-body: #aeb8d4; /* same muted blue-grey as the menu promo */
  --ai-dim: #7f8cb2;
}

/* ── dark section shell ───────────────────────────────────────────────────── */
/* Flat base on purpose: giving every dark section its own radial gradient made each
   one restart the ramp, so a light seam appeared at every section boundary. Only the
   hero carries the gradient; the rest continue from it. */
.ai-dark {
  position: relative;
  overflow: hidden;
  background: var(--ai-bg);
  color: var(--ai-body);
}
.ai-hero {
  background: radial-gradient(120% 90% at 80% -10%, #12235a 0%, var(--navy) 46%, var(--ai-bg) 100%);
}
.ai-dark h1, .ai-dark h2, .ai-dark h3 { color: #fff; }
.ai-dark p { color: var(--ai-body); }
.ai-dark .sec-head p { color: var(--ai-body); }
.ai-dark .wrap { position: relative; z-index: 2; }

/* hairline rules that fade at both ends — reads as a system boundary, not a border */
.ai-rule { height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--ai-line) 18%, var(--ai-line) 82%, transparent); }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.ai-hero { padding: var(--hero-pt) 0 var(--hero-pb); min-height: var(--hero-min); display: flex; flex-direction: column; justify-content: center; text-align: center; }
.ai-hero .wrap { max-width: 1080px; }
/* the mesh canvas sits behind everything and is masked out toward the copy */
.ai-mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 78% at 50% 34%, transparent 0%, #000 62%);
  mask-image: radial-gradient(120% 78% at 50% 34%, transparent 0%, #000 62%); }
.ai-hero h1 { font-size: var(--fs-h1-hero); line-height: var(--lh-h1-hero); font-weight: 400; margin-bottom: 24px; }
.ai-hero h1 .hl { font-weight: 700; }
.ai-hero .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ai-body);
  max-width: 660px; margin: 0 auto 32px; }
.ai-hero .lede-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* the site's .hero-pill, repainted for dark */
.ai-dark .hero-pill { background: rgba(255,255,255,0.07); color: #fff;
  border: 1px solid var(--ai-line); box-shadow: none; }

/* ── glass cards ──────────────────────────────────────────────────────────── */
.ai-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ai-card { position: relative; overflow: hidden; padding: 32px 32px 32px; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1px solid var(--ai-line);
  transition: border-color var(--dur) ease, transform var(--dur) ease, background var(--dur) ease; }
/* a soft amber wash that tracks the pointer, so the grid feels lit rather than flat */
.ai-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 0%), rgba(255,189,14,0.13), transparent 70%);
  opacity: 0; transition: opacity var(--dur) ease; }
.ai-card:hover { border-color: rgba(255,189,14,0.34);
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)); }
.ai-card:hover::after { opacity: 1; }
.ai-card .ic { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center;
  margin-bottom: 16px; color: var(--navy); background: var(--amber); flex-shrink: 0; }
.ai-card h3 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: 500; margin-bottom: 8px; }
.ai-card p { font-size: var(--fs-p-small); line-height: 1.65; color: var(--ai-body); }

/* ── integration diagram ──────────────────────────────────────────────────── */
/* no column gap — the wire column IS the gap, so the rail reaches both panels */
.ai-flow { display: grid; grid-template-columns: 1fr auto 1.15fr auto 1fr; gap: 0; align-items: stretch; }
.ai-node { padding: 24px 24px; border-radius: var(--r); border: 1px solid var(--ai-line);
  background: var(--ai-panel); display: flex; flex-direction: column; }
.ai-node.is-core { border-color: rgba(255,189,14,0.40);
  background: linear-gradient(180deg, rgba(255,189,14,0.09), rgba(255,189,14,0.02)); }
.ai-node .nlabel { font-size: var(--fs-p-smallest); font-weight: 600;
  text-transform: uppercase; color: var(--ai-dim); margin-bottom: 16px; }
.ai-node.is-core .nlabel { color: var(--amber); }
.ai-node h3 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: 500; margin-bottom: 16px; }
.ai-node ul { list-style: none; margin: 0; padding: 0; }
.ai-node li { position: relative; padding-left: 16px; margin-bottom: 8px;
  font-size: var(--fs-descriptor); line-height: 1.5; color: var(--ai-body); }
.ai-node li::before { content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--ai-dim); }
.ai-node.is-core li::before { background: var(--amber); }

/* the connector between nodes — a rail with a pulse travelling along it */
.ai-wire { position: relative; align-self: center; width: 84px; height: 2px;
  background: var(--ai-line); overflow: hidden; }
.ai-wire i { position: absolute; top: 0; left: 0; width: 26px; height: 100%;
  background: linear-gradient(90deg, transparent, var(--amber));
  animation: ai-wire 2.6s linear infinite; }
.ai-wire.rev i { animation-direction: reverse; animation-delay: .9s; }
@keyframes ai-wire { from { transform: translateX(-28px); } to { transform: translateX(86px); } }

/* ── scroll-pinned process rail (tech component, dark repaint) ────────────── */
/* Only colour is overridden — the pin/track geometry and its JS stay shared with
   the tech and agency templates, so the scroll behaviour cannot drift apart. */
.ai-process .proc-sticky { background: var(--ai-bg); }
.ai-process .proc-rail::before { background: var(--ai-line); }
.ai-process .tl .stem { background: var(--ai-line); }
/* the dot's outer ring is white on the light templates — it has to become the
   page surface here or it reads as a hole punched in the rail */
.ai-process .tl .dot {
  /* see the note on .tl .dot in tech.css — the jagged edge was worst here, where
     the amber meets the dark panel at full contrast */
  background: var(--ai-bg);
  box-shadow: 0 0 18px rgba(255,189,14,0.35);
  color: var(--navy);
}
/* The dark process keeps its own marker: a dark disc with the amber drawn inside it
   rather than the light page's filled amber one. tech.css used to carry that inner
   disc for both and no longer does — Tech Master draws a full amber circle — so the
   declaration lives here now, where it is the only thing standing between a navy
   numeral and a navy panel. */
.ai-process .tl .dot { isolation: isolate; }
.ai-process .tl .dot::before { content: ""; position: absolute; z-index: -1;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 5.5px rgba(255,189,14,0.30); }
.ai-process .tl-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border-color: var(--ai-line);
  transition: border-color var(--dur) ease, background var(--dur) ease;
}
.ai-process .tl-card:hover {
  border-color: rgba(255,189,14,0.30);
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
}
.ai-process .tl-card h3 { color: #fff; }
.ai-process .tl-card p { color: var(--ai-body); }

/* ── selected work ────────────────────────────────────────────────────────── */
/* Client marks are dark artwork drawn for light backgrounds, so they are knocked
   out to flat white here — that also stops a wall of mismatched brand colours
   from fighting the page. */
.ai-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--ai-line); border-left: 1px solid var(--ai-line); }
.ai-logos .lg { display: grid; place-items: center; min-height: 118px; padding: 24px 24px;
  border-right: 1px solid var(--ai-line); border-bottom: 1px solid var(--ai-line); }
.ai-logos img { max-width: 82%; max-height: 46px; width: auto; height: auto; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0.52; transition: opacity var(--dur) ease, transform var(--dur) ease; }
.ai-logos .lg:hover img { opacity: 0.85; transform: scale(1.04); }

.ai-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.ai-case { display: flex; flex-direction: column; padding: 32px 24px 32px; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018));
  border: 1px solid var(--ai-line); transition: border-color var(--dur) ease, background var(--dur) ease; }
.ai-case:hover { border-color: rgba(255,189,14,0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.024)); }
.ai-case .mark { height: 34px; margin-bottom: 24px; display: flex; align-items: center; }
.ai-case .mark img { max-height: 34px; max-width: 148px; width: auto; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0.9; }
.ai-case .mark span { font-size: var(--fs-h5); font-weight: 500; color: #fff; }
.ai-case .tag { font-size: var(--fs-p-smallest); font-weight: 600;
  text-transform: uppercase; color: var(--amber); margin-bottom: 8px; }
.ai-case h3 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: 500; margin-bottom: 8px; }
.ai-case p { font-size: var(--fs-p-small); line-height: 1.6; color: var(--ai-body); }
.ai-case .did { margin-top: auto; padding-top: 24px; font-size: var(--fs-descriptor);
  line-height: 1.5; color: var(--ai-dim); border-top: 1px solid var(--ai-line); }

/* ── accordion (tech component, dark repaint) ────────────────────────────── */
.ai-dark .acc { max-width: 900px; margin: 0 auto; }
.ai-dark .acc-item { border-bottom: 1px solid var(--ai-line); }
.ai-dark .acc-item:first-child { border-top: 1px solid var(--ai-line); }
.ai-dark .acc-head { color: #fff; }
.ai-dark .acc-head i::before, .ai-dark .acc-head i::after { background: var(--amber); }
.ai-dark .acc-body p { color: var(--ai-body); }

/* ── stack, as a spec sheet ───────────────────────────────────────────────── */
/* Deliberately not a row of pills: a wrapping chip cloud carries no hierarchy and
   says nothing about *why* a piece gets picked. Hairline rows in the same language
   as .more-grid, with the deciding factor stated next to each layer. */
.ai-spec-row .k { font-size: var(--fs-p-smallest); font-weight: 600;
  text-transform: uppercase; color: var(--amber); }
.ai-spec-row .v { font-size: var(--fs-p); line-height: 1.5; color: #fff; }
.ai-spec-row .reason { font-size: var(--fs-descriptor); line-height: 1.5; color: var(--ai-dim); }

/* ── dark stat band ───────────────────────────────────────────────────────── */
.ai-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ai-stat { text-align: center; }
.ai-stat b { display: block; font-variant-numeric: tabular-nums;
  font-size: var(--fs-h2-big); line-height: 1; font-weight: 500; color: #fff; }
.ai-stat span { display: block; margin-top: 8px; font-size: var(--fs-p-small);
  line-height: 1.45; color: var(--ai-dim); }

/* ── pull quote on dark ───────────────────────────────────────────────────── */
.ai-quote { max-width: 900px; margin: 0 auto; text-align: center; }
.ai-quote p { font-size: var(--fs-h4); line-height: 1.4; color: #fff; font-weight: 400; margin-bottom: 24px; }
.ai-quote .who { font-size: var(--fs-p-small); color: var(--ai-dim); }
.ai-quote .who b { color: #fff; font-weight: 600; }
.ai-quote .src { display: block; margin-top: 16px; font-size: var(--fs-descriptor); color: var(--ai-dim);
  text-decoration: underline; text-underline-offset: 4px; transition: color var(--dur-fast); }
.ai-quote .src:hover { color: var(--amber); }

/* buttons on dark: the ghost variant needs to read against navy, not white */
.ai-dark .btn-book { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.32); }
.ai-dark .btn-book:hover { background: #fff; color: var(--navy); border-color: #fff; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .ai-wire i { animation: none; }
}

@media (max-width: 1100px) {
  .ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the five-across flow can't hold three panels plus wires — stack it */
  .ai-flow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ai-wire { width: 2px; height: 34px; justify-self: center; }
  .ai-wire i { width: 100%; height: 18px;
    background: linear-gradient(180deg, transparent, var(--amber));
    animation-name: ai-wire-v; }
  @keyframes ai-wire-v { from { transform: translateY(-20px); } to { transform: translateY(36px); } }
}
@media (max-width: 940px) {
  .ai-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .ai-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ai-cases { grid-template-columns: minmax(0, 1fr); }
  .ai-spec-row .k { margin-bottom: 2px; }
}
@media (max-width: 680px) {
  .ai-hero { padding: 120px 0 64px; min-height: 0; }
  .ai-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .ai-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-logos .lg { min-height: 96px; }
}

/* ── contact: form + booking, side by side ───────────────────────────────── */
/* The AI pages used to offer only a Calendly link — the highest-commitment
   action there is. The form is the low-friction path; the call stays for
   whoever is already decided. */
/* ── The two shared bands, in the dark layer ──────────────────────────────────
   §17 keeps a dark section on its own palette, so the contact band and the FAQ
   that every page shares get an AI-layer variant rather than a light seam at the
   foot of a dark page. Only the surfaces and the type tones change — the markup,
   the fields, the opt-in and the consent line are the same component.

   The white form card is deliberate: it is the one thing on these pages that has
   to read as an input surface, and .ai-dark's own rule already made it white. Its
   inner copy has to be taken back out of the dark palette, though — .ai-dark p
   would paint the consent line #AEB8D4 on white. */
.cta-lightbulb.ai-dark { background: var(--ai-bg); }
.cta-lightbulb.ai-dark .contact-left h3 { color: var(--ai-body); }
.cta-lightbulb.ai-dark .contact-alt .ca-reply { color: var(--ai-dim); }
.cta-lightbulb.ai-dark .contact-alt .ca-lead { color: #fff; }
.cta-lightbulb.ai-dark .ca-link { color: #fff; }
.cta-lightbulb.ai-dark .form-card { background: #fff; }
.cta-lightbulb.ai-dark .form-card p { color: var(--text-dim); }
.cta-lightbulb.ai-dark .form-card p a { color: var(--ink); }

.qa-sec.ai-dark .qa-item + .qa-item { border-top-color: var(--ai-line); }
.qa-sec.ai-dark .qa-q { color: #fff; }
.qa-sec.ai-dark .qa-ic { color: var(--ai-dim); }

/* "More services" sits between the contact band and the FAQ on every service page,
   so on these seven it has to be in the layer too — otherwise the tail of the page
   alternates dark, light, dark before the footer. */
.ai-dark .more-link { color: #fff; border-bottom-color: var(--ai-line); }
.ai-dark .more-link:first-child, .ai-dark .more-grid > *:nth-child(-n+3) { border-top-color: var(--ai-line); }
.ai-dark .more-link:hover { color: var(--amber); }

@media (max-width: 940px) {
}

/* Touch targets: these draw at the size the design file specifies, which reads
   well under a mouse and falls short of the 44px a finger needs. A minimum
   height leaves the padding, the rhythm and the look exactly as designed. */
@media (hover: none) and (pointer: coarse) {
  .ai-quote .src { min-height: 44px; align-items: center; }
}

.ai-hero > .wrap { width: 100%; }