/* ============================================================
   AIx DESIGN SYSTEM — "Collage" (v4)
   The canonical AI Explorer design language.
   Surreal B&W cut-out collage imagery (selective teal) +
   the teal "signal" highlight block on emphasis words & CTAs.

   Link from any page:
   <link rel="stylesheet" href="/css/aix-collage.css" />
   ============================================================ */

:root{
  /* --- Surfaces --- */
  --bg:#ffffff;
  --bg-2:#f6f7fb;            /* soft grey */
  --bg-3:#e8e8f5;            /* lavender-grey */
  --bg-warm:#f7f5f1;         /* warm neutral — takes the clinical edge off white */
  --navy:#0A1222;            /* deep navy — high-stakes sections, footers, inverted bands */

  /* --- Ink --- */
  --ink:#16233E;             /* deep blue-slate — headings/body (warmer than black) */
  --ink-2:#475569;
  --muted:#94a3b8;

  /* --- Teal: the single signal colour --- */
  --teal:#0B6B63;            /* accent-primary — highlights + CTAs */
  --teal-2:#33D6C2;          /* accent-secondary — bright pops on navy */
  --teal-deep:#084e48;

  /* --- Lines --- */
  --line:#e6e2da;            /* warm hairline (cards/frames) */
  --line-cool:#e2e8f0;       /* cool hairline (dividers on grey) */
  --line-2:#cbd5e1;

  /* --- Type --- */
  --font:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* --- Radius / shadow --- */
  --r-md:14px;
  --r-lg:20px;
  --r-xl:24px;
  --shadow:0 1px 2px rgba(15,17,23,0.04),0 12px 32px -16px rgba(15,17,23,0.18);
  --shadow-frame:0 1px 2px rgba(16,35,62,.05),0 22px 46px -26px rgba(16,35,62,.30);
}

/* ============================================================
   TYPE HELPERS
   ============================================================ */
.font-display{font-weight:800;letter-spacing:-0.03em;line-height:1.02;}
.label-mono{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);}
.eyebrow-row{display:flex;align-items:center;gap:.7rem;}
.eyebrow-row::before{content:"";width:26px;height:2px;background:var(--teal);}

/* Teal gradient text — secondary emphasis only (never on body copy) */
.ink-grad{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}

/* ============================================================
   THE SIGNAL — teal highlight block (the signature device)
   Wraps the single most important word in a headline / CTA.
   ============================================================ */
.signal{
  display:inline-block;background:var(--teal);color:#fff;
  padding:.04em .3em;border-radius:.18em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.signal.bright{background:var(--teal-2);color:var(--navy);}

/* ============================================================
   BUTTONS — the signal block, made clickable
   ============================================================ */
/* Self-contained by default (inline-flex + padding) so a plain <a class="btn-signal">
   looks right without extra utilities. moda imports that add their own !px/!py
   Tailwind utilities still override these. */
.btn-signal{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;font-weight:600;
  background:var(--teal);color:#fff;border:none;cursor:pointer;border-radius:var(--r-md);
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;}
.btn-signal:hover{background:#095a53;transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(11,107,99,.55);}
.btn-signal.bright{background:var(--teal-2);color:var(--navy);}
.btn-signal.bright:hover{background:#2bc3b0;}
/* alias kept for pages that use rounded-full pills inline */
.btn-teal{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;font-weight:600;
  background:var(--teal);color:#fff;border:none;cursor:pointer;border-radius:var(--r-md);
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;}
.btn-teal:hover{background:#095a53;transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(11,107,99,.55);}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;font-weight:600;
  background:transparent;border:1.5px solid var(--line-2);color:var(--ink);cursor:pointer;transition:all .18s ease;}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);}

/* ============================================================
   IMAGERY — collage art + clearly-rounded white frame
   The soft shadow makes the rounded corners read on white.
   ============================================================ */
.collage{display:block;width:100%;height:auto;object-fit:contain;}
.photo-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-frame);}

/* Optional unified teal duotone treatment for full-bleed photos */
.duotone{position:relative;isolation:isolate;}
.duotone img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);}
.duotone::after{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;
  background:linear-gradient(150deg,#0b6b63 0%,#103a4a 55%,#0A1222 100%);opacity:.72;}
.duotone::before{content:"";position:absolute;inset:0;z-index:2;mix-blend-mode:screen;
  background:linear-gradient(150deg,rgba(51,214,194,.35),transparent 60%);}
.duotone.is-soft::after{opacity:.5;}

/* ============================================================
   SURFACES & ATOMS
   ============================================================ */
.card-shadow{box-shadow:var(--shadow);}
.teal-soft{background:linear-gradient(135deg,rgba(11,107,99,0.08),rgba(51,214,194,0.10));}
.calm-glow,.hero-glow{
  background:
    radial-gradient(60% 60% at 85% 8%,rgba(51,214,194,0.16),transparent 60%),
    radial-gradient(55% 55% at 4% 92%,rgba(11,107,99,0.10),transparent 60%);
}
.noise-field{
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.5px);
  background-size:6px 6px;
}

/* ============================================================
   MOTION — progressive enhancement only (visible without JS)
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1 !important;transform:none !important;}}

/* ============================================================
   SECTION BANDS — full-width background helpers
   (Added for the moda homepage import. Uses the tokens above so
   it stays consistent with the canonical design system.)
   ============================================================ */
.band-warm{background:var(--bg-warm);}
.band-soft{background:var(--bg-2);}
.band-navy{background:var(--navy);color:#E5EDF6;}
.rule{border:none;height:1px;background:var(--line);}

/* Eyebrow + mono label when placed on a navy band */
.eyebrow-row.on-navy::before{background:var(--teal-2);}
.eyebrow-row.on-navy .label-mono{color:var(--teal-2);}

/* Ghost button on a navy band (light text/border for contrast) */
.btn-ghost.on-navy{color:#fff;border-color:rgba(255,255,255,.4);}
.btn-ghost.on-navy:hover{border-color:var(--teal-2);color:var(--teal-2);}