/* ============================================================================
   ENHANCEMENT LAYER
   Loaded last on every page, after main.css and any page stylesheet, so it can
   restyle shared primitives without editing them in place.

   The brief: keep SCIKIQ's identity (indigo accent, Literata display face) and
   borrow the structural devices that give openinnovation.ai its rhythm --
   full-bleed dark bands, a light panel floating inside one, numbered index
   badges, label|divider|arrow buttons, and separated cards that lift on hover.

   Everything here is additive. Deleting this file and the two lines build.py
   injects returns the site to its previous appearance.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens --
   A dark band re-scopes --bg/--fg/--line/--accent so every descendant recolors
   itself. The panel that floats inside a band has to undo that, and it cannot
   read the values it just overwrote -- so the page surface is mirrored into a
   second set of names that no band ever touches. */
:root{
  --m-bg:#FFFFFF; --m-paper:#F4F5F7; --m-paper-2:#ECEEF1;
  --m-fg:#101317; --m-fg-dim:#676C78; --m-fg-faint:#5F646E;
  --m-line:rgba(16,19,23,.12); --m-line-soft:rgba(16,19,23,.07); --m-line-strong:rgba(16,19,23,.3);
  --m-accent:#2D26D6; --m-accent-ink:#1F1AA8; --m-accent-wash:rgba(45,38,214,.05);
  --m-shadow:0 1px 2px rgba(16,19,23,.04), 0 12px 32px -16px rgba(16,19,23,.16);

  --ink:#0B0D11;                 /* the band ground */
  --band-pad:clamp(64px,7.5vw,120px);
  --r-lg:24px; --r-md:14px; --r-sm:10px;
  --lift:cubic-bezier(.2,.7,.3,1);

  /* one arrow, masked by currentColor, so it inherits button and link colour */
  --arrow-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}
:root[data-theme="dark"]{
  --m-bg:#0D0F13; --m-paper:#15181E; --m-paper-2:#1C2028;
  --m-fg:#F0F1F4; --m-fg-dim:#969CA8; --m-fg-faint:#868D99;
  --m-line:rgba(255,255,255,.13); --m-line-soft:rgba(255,255,255,.07); --m-line-strong:rgba(255,255,255,.3);
  --m-accent:#7B74FF; --m-accent-ink:#A9A4FF; --m-accent-wash:rgba(123,116,255,.1);
  --m-shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 36px -16px rgba(0,0,0,.8);
  --ink:#05070A;                 /* darker than the page, so it still reads as a band */
}

/* ------------------------------------------------------------ page rhythm --
   OI's pages breathe more than ours did. Sections get roughly a third more
   vertical room, and the hairline between them is dropped where a band already
   supplies the separation. */
section{padding-block:clamp(60px,7vw,104px)}
.hb-sec{padding:0 0 clamp(72px,8vw,116px)}

/* ================================================================== bands ==
   Full-bleed dark slab. Re-scoping the tokens rather than restating colours
   means cards, rules, chips and links inside adapt without their own rules. */
section[data-band="dark"]{
  --bg:var(--ink); --paper:#14171D; --paper-2:#1B1F27;
  --fg:#F2F3F6; --fg-dim:#9BA1AD; --fg-faint:#8A909C;
  --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.34);
  --accent:#9089FF; --accent-ink:#B6B1FF; --accent-wash:rgba(144,137,255,.13);
  --signal:#2FD9C3; --amber:#E9A144; --critical:#F2837B;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 22px 52px -24px rgba(0,0,0,.9);
  background:var(--ink); color:var(--fg);
  border-top:0;
  padding-block:var(--band-pad);
  /* native selects and inputs inside a band still painted their light UA skin */
  color-scheme:dark;
}
section[data-band="dark"][data-panel] > .wrap{color-scheme:light}
:root[data-theme="dark"] section[data-band="dark"][data-panel] > .wrap{color-scheme:dark}
section[data-band="dark"].hb-sec{padding-block:var(--band-pad)}
/* the rule under a band would draw a hairline on the slab itself */
section[data-band="dark"] + section{border-top:0}

/* The band's own top hairline becomes a thin accent seam instead. */
section[data-band="dark"]{position:relative; isolation:isolate}
section[data-band="dark"]::before,
section[data-band="dark"]::after{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; z-index:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.55; pointer-events:none;
}
/* in dark mode the band sits only a few points below the page, so the closing
   edge has to be drawn or the band has no visible end */
section[data-band="dark"]::after{inset:auto 0 0 0; opacity:.35}

/* ------------------------------------------------------------------ panel --
   The signature move: a light card inset into the dark band. Used on bands
   whose content carries its own colour (canvases, diagrams, logo art) and so
   cannot be recoloured by token swapping. */
section[data-band="dark"][data-panel] > .wrap{
  --bg:var(--m-bg); --paper:var(--m-paper); --paper-2:var(--m-paper-2);
  --fg:var(--m-fg); --fg-dim:var(--m-fg-dim); --fg-faint:var(--m-fg-faint);
  --line:var(--m-line); --line-soft:var(--m-line-soft); --line-strong:var(--m-line-strong);
  --accent:var(--m-accent); --accent-ink:var(--m-accent-ink); --accent-wash:var(--m-accent-wash);
  --shadow:var(--m-shadow);
  background:var(--m-bg); color:var(--m-fg);
  border-radius:var(--r-lg);
  padding:clamp(28px,4vw,64px);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.75);
}
/* two stacked .wrap children (heading block + content block) read as one card */
section[data-band="dark"][data-panel] > .wrap + .wrap{
  border-radius:0 0 var(--r-lg) var(--r-lg);
  margin-top:-1px; padding-top:0;
}
section[data-band="dark"][data-panel] > .wrap:has(+ .wrap){
  border-radius:var(--r-lg) var(--r-lg) 0 0; padding-bottom:0;
}

/* ============================================================ section head --
   The index number becomes a badge, the way OI numbers its feature cards and
   industry rows. */
.sec-title{align-items:center; gap:16px; border-top-color:var(--line-strong)}
.sec-title .idx{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:none; border-radius:50%;
  border:1px solid var(--accent); color:var(--accent);
  font-family:var(--f-mono); font-size:12px; letter-spacing:0; line-height:1;
}

/* ================================================================ buttons ==
   label | hairline | arrow. The trailing chevron some buttons already carry is
   replaced by the masked arrow so every CTA on the site matches. */
.btn{
  text-transform:uppercase; letter-spacing:.085em;
  font-size:13px; font-weight:600; min-height:54px;
  padding:10px 22px; gap:0;
  justify-content:space-between;
  transition:background .16s var(--lift), color .16s var(--lift),
             border-color .16s var(--lift), transform .16s var(--lift),
             box-shadow .16s var(--lift);
}
.btn > svg:last-child{display:none}
.btn::after{
  content:""; flex:none; width:34px; height:20px; margin-left:16px;
  border-left:1px solid color-mix(in srgb, currentColor 34%, transparent);
  background-color:currentColor;
  -webkit-mask:var(--arrow-ne) center/13px 13px no-repeat;
  mask:var(--arrow-ne) center/13px 13px no-repeat;
  transition:transform .18s var(--lift);
}
.btn:hover::after{transform:translate(2px,-2px)}
.btn.no-arrow::after{display:none}
.btn.no-arrow{justify-content:center}
.btn-p:hover{transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(0,0,0,.55)}
.btn-s:hover,.btn:not(.btn-p):not(.btn-s):not(.ghost):hover{transform:translateY(-2px)}
.nav .btn,.mnav .btn{min-height:44px; font-size:12px; padding:8px 16px}
.nav .btn::after,.mnav .btn::after{width:28px; margin-left:12px}
/* form submits and in-card buttons keep the centred label */
.demo-form .btn,.agent .btn{justify-content:center}
.demo-form .btn::after,.agent .btn::after{display:none}

/* ================================================================== cards ==
   The old grids drew one shared hairline lattice, which left a torn edge
   whenever the item count did not divide the column count (five modules in a
   three-column grid ended with a missing bottom-right border). Separated cards
   with their own radius fix that and give the page depth. */
.mods{
  margin-top:52px; border:0; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
}
.mod{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--bg); padding:26px 24px;
  transition:transform .2s var(--lift), box-shadow .2s var(--lift),
             border-color .2s var(--lift), background .2s var(--lift);
}
.mod:hover{
  background:var(--bg); border-color:var(--accent);
  transform:translateY(-4px); box-shadow:var(--shadow);
}

.cases{
  margin-top:52px; border:0; background:none; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.case{
  border:1px solid var(--line); border-radius:var(--r-md);
  transition:transform .2s var(--lift), box-shadow .2s var(--lift),
             border-color .2s var(--lift), background .2s var(--lift);
}
.case:hover{
  background:var(--bg); border-color:var(--accent);
  transform:translateY(-4px); box-shadow:var(--shadow);
}
/* a spacer that existed only to complete the old shared-hairline lattice; as a
   separated card it would draw an empty bordered box */
.case-fill{display:none}

/* interior pages share one card grid; n4/n6/n8/n5 fix the column count so the
   auto-fit rewrite would fight them -- keep their columns, change the skin */
.hb-cards{border:0; background:none; gap:16px}
.hb-card{
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  transition:transform .2s var(--lift), box-shadow .2s var(--lift),
             border-color .2s var(--lift), background .2s var(--lift);
}
.hb-card:hover{
  background:var(--bg); border-color:var(--accent);
  transform:translateY(-4px); box-shadow:var(--shadow);
}
.hb-card::before{height:3px}

/* ============================================================ logo marquee ==
   The customer wall scrolls, as OI's does. enhance.js clones the row so the
   loop is seamless; without JS or with reduced motion it stays the static
   grid it was. */
.custwall.mq{
  display:flex; flex-wrap:nowrap; overflow:hidden; gap:0;
  border:0; background:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.custwall.mq .mq-track{
  display:flex; flex:none; align-items:center; gap:clamp(38px,5vw,76px);
  padding-inline:clamp(19px,2.5vw,38px);
  animation:mq-scroll 46s linear infinite;
}
.custwall.mq:hover .mq-track{animation-play-state:paused}
.custwall.mq .cwt{
  border:0; padding:0; flex:none; display:flex; align-items:center;
  justify-content:center; min-height:52px;
}
.custwall.mq .cwt img{
  max-height:34px; width:auto; opacity:.62;
  filter:grayscale(1); transition:opacity .2s, filter .2s;
}
.custwall.mq .cwt:hover img{opacity:1; filter:none}
@keyframes mq-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ================================================================= motion ==
   Slightly longer travel, and a stagger driven by position rather than the
   flat 3-step cycle reveal.js applies. */
.rv{transform:translateY(22px)}
.rv.in{transform:none}
.mods .mod,.cases .case,.hb-cards .hb-card{transition-delay:0ms}

@media (prefers-reduced-motion: reduce){
  .custwall.mq .mq-track{animation:none}
  .mod:hover,.case:hover,.hb-card:hover,.btn:hover,.btn-p:hover{transform:none}
  .btn:hover::after{transform:none}
}

/* ================================================================== small ==
   Narrow screens lose the band padding and the panel inset, which otherwise
   eat most of a phone viewport. */
@media (max-width:700px){
  :root{--band-pad:clamp(44px,10vw,64px); --r-lg:16px}
  section[data-band="dark"][data-panel] > .wrap{padding:22px 18px}
  /* uppercase + tracking + the arrow box make a CTA ~40px wider than it was;
     at 390px that pushed the widest button past the viewport */
  .btn{min-height:50px; min-width:0; max-width:100%; font-size:12px; letter-spacing:.06em}
  .btn::after{width:24px; margin-left:10px}
}