/* ==========================================================================
   Kuant — design system
   One stylesheet. No Bootstrap. Edit tokens below to restyle the whole site.
   ========================================================================== */

:root{
  /* --- brand tokens --------------------------------------------------- */
  /* Light "technical broadsheet": warm paper ground, near-black ink, ONE
     signal colour sampled from the logo mark (#0090f0 azure / #6030f0 violet)
     so the palette is branded rather than arbitrary. The distinctiveness is
     carried by structure and type — a visible engineering grid, serif display
     headings, mono spec-sheet labels, square hairline panels — not by neon on
     navy, which is the look every infrastructure site already has. */
  /* Clarity comes from restraint: a white ground with no texture, one
     typeface, and colour used only where it carries meaning. Everything that
     was competing for attention — paper grain, an engineering grid, serif
     display type, mono labels, gradient text — has been removed. */
  --bg:        #ffffff;
  --bg-2:      #f6f7f9;
  --bg-3:      #eef1f5;
  --surface:   #ffffff;
  --surface-2: #f6f7f9;
  --line:      rgba(15,20,25,.11);
  --line-2:    rgba(15,20,25,.22);

  --ink:       #0f1419;
  --ink-2:     #5b6570;
  --ink-3:     #69717b;   /* 4.9:1 on white, 4.6:1 on --bg-2: AA at body sizes */

  --accent:    #0b5fbe;
  --accent-2:  #4b2fd0;
  --cta:       #111820;     /* near-black CTA — colour stays for meaning */
  --cyan:      var(--accent);
  --cyan-dim:  #a9c6e8;
  --orange:    #b4531a;
  --green:     #1f7a4d;
  --red:       #b3261e;
  --violet:    var(--accent-2);

  --grad: var(--accent);
  --grad-warm: var(--orange);

  --radius: 14px;
  --radius-lg: 18px;
  --shadow: none;
  --shadow-lg: 0 18px 40px -24px rgba(15,20,25,.28);

  --wrap: 1200px;
  --pad: clamp(1.1rem, 4vw, 2.5rem);

  /* Grotesk display + mono accents: numbers, tool names and labels are set
     in mono so the page reads "engineering", matching what we sell. */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", var(--font);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Dark band tokens (hero, NMS band) */
  --dark:      #0b1220;
  --dark-2:    #101a2e;
  --dark-line: rgba(255,255,255,.12);
  --dark-ink:  #e8edf5;
  --dark-ink2: #9fb0c6;

  --ease: cubic-bezier(.22,.85,.3,1);
}

/* --- reset ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
button,input,select,textarea{font:inherit;color:inherit}

/* No ambient background. The page is white and stays white. */
body::before{display:none}

/* --- typography ----------------------------------------------------- */
h1,h2,h3{font-family:var(--font-display);line-height:1.12;font-weight:600;letter-spacing:-.025em}
h4,h5{font-family:var(--font);line-height:1.25;font-weight:600;letter-spacing:0}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
h4,h5{font-size:1.05rem}
p{color:var(--ink-2)}
strong{color:var(--ink);font-weight:600}

.grad-text{color:var(--accent)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(3.75rem,8vw,7rem)}
.section--tight{padding-block:clamp(2.25rem,4.5vw,3.75rem)}

/* section heading block */
/* Centred by default. The left-aligned heading with a rule under it was
   editorial furniture; this reads as a clean break between sections. */
.shead{text-align:center;margin-inline:auto;margin-bottom:clamp(2rem,4vw,3rem);max-width:56rem}
.shead h2{max-width:24ch;margin-inline:auto}
.shead p{max-width:60ch;margin-inline:auto;font-size:1.06rem}
.shead.center{margin-inline:auto;text-align:center}
/* Small solid tag chip — the one place colour appears above a heading. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);
  background:rgba(11,95,190,.09);
  border:0;
  padding:.34rem .7rem;border-radius:6px;
  margin-bottom:1rem;
}
.eyebrow i{display:none}
.shead p{margin-top:.9rem;font-size:1.05rem}
.rule{display:none}
.shead.center .rule{margin-inline:auto}

/* --- buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-weight:600;font-size:.95rem;
  padding:.85rem 1.6rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space:nowrap;
}
.btn i{font-size:.9em;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover i{transform:translateX(3px)}
/* Press feedback: the lift collapses so the button reads as taking the click
   rather than only responding to the cursor being near it. */
.btn:active{transform:translateY(0) scale(.985)}
.btn--primary{background:var(--cta);color:#fff}
.btn--primary:hover{background:#000}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{background:rgba(15,20,25,.05);border-color:var(--cyan)}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
/* --- utility bar ------------------------------------------------------ */
/* Both reference sites lead with a contact strip above the nav: the phone
   number and address are the first thing on the page rather than a footer
   afterthought. Scrolls away; the nav below it stays sticky. */
.utility{background:var(--dark-2);color:#b8c2ce;font-size:.82rem;border-bottom:1px solid var(--dark-line)}
.utility__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:40px;flex-wrap:wrap;
}
.utility__contact{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.utility a,.utility span{display:inline-flex;align-items:center;gap:.45rem;min-height:24px}
.utility a{transition:color .2s}
.utility a:hover{color:#fff}
.utility i{opacity:.65;font-size:.9em}
.utility__social{display:flex;gap:1rem}
@media (max-width:640px){
  .utility{font-size:.76rem}
  .utility__loc,.utility__social{display:none}
  .utility__contact{gap:1rem}
}

/* Estuary-style dark chrome: the nav shares the hero's navy so the top of
   the page reads as one continuous dark band instead of a white bar
   sandwiched between the utility strip and the dark hero. */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(11,18,32,.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.site-header.scrolled{border-bottom-color:var(--dark-line);background:rgba(11,18,32,.96);
  box-shadow:0 12px 32px -20px rgba(0,0,0,.6)}
/* The 1200px content measure is right for prose but not for a 7-item nav
   with four dropdown carets — labels wrapped to two lines, which is what
   threw the row out of alignment. The header gets its own wider measure. */
.site-header > .wrap{max-width:1340px}
.nav{display:flex;align-items:center;gap:1rem;height:72px}
.nav__brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
/* On paper the mark needs no chip behind it — the white plate the dark theme
   required now reads as a sticker stuck to the page. */
.nav__brand img{height:34px;width:auto}
.nav__brand span{font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;color:#fff}

.nav__menu{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.nav__link{
  position:relative;display:flex;align-items:center;
  padding:.5rem .62rem;border-radius:4px;
  font-size:.9rem;font-weight:500;color:var(--dark-ink2);
  white-space:nowrap;            /* a wrapped label is what broke the row */
  transition:color .2s, background .2s;
}
.nav__link:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav__item.active > .nav__link{color:#6ea8ff}
.nav__item{position:relative;display:flex;align-items:center}
/* The active underline used to own .nav__link::after, so the dropdown caret
   had to sit BEFORE the label to avoid colliding with it. Moving the underline
   onto the list item frees ::after for the caret, which now trails the label
   as it conventionally should — and an item can be active AND have children. */
.nav__item.active::after{
  content:"";position:absolute;left:.62rem;right:.62rem;bottom:.5rem;height:2px;
  border-radius:2px;background:#6ea8ff;
}
.nav__item--has-children > .nav__link::after{
  content:"\f282";font-family:"bootstrap-icons";font-size:.62em;
  margin-left:.32rem;opacity:.5;line-height:1;
  display:inline-block;transition:transform .2s var(--ease);
}
.nav__item--has-children:hover > .nav__link::after,
.nav__item--has-children.open > .nav__link::after{transform:rotate(180deg);opacity:.8}
/* Invisible bridge across the gap below the link, so a diagonal mouse path
   into the dropdown can never fall through and close it. */
.nav__item--has-children:hover::before{
  content:"";position:absolute;top:100%;left:0;right:0;height:.55rem;
}
.nav__sub{
  position:absolute;top:calc(100% + .4rem);left:0;min-width:230px;
  background:rgba(16,26,46,.97);border:1px solid var(--dark-line);border-radius:14px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:.4rem;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  transition-delay:.08s;   /* forgiveness on the way OUT only */
}
.nav__item--has-children:hover .nav__sub,
.nav__item--has-children:focus-within .nav__sub,
.nav__item--has-children.open .nav__sub{
  opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.nav__sub a{display:block;padding:.6rem .85rem;border-radius:9px;font-size:.9rem;color:var(--dark-ink2)}
.nav__sub a:hover{background:rgba(110,168,255,.14);color:#fff}
.nav__sub a.active{color:#6ea8ff;background:rgba(110,168,255,.10)}

/* Keyboard users get the same affordance mouse users get */
.nav__link:focus-visible,.nav__sub a:focus-visible,.nav__toggle:focus-visible,
.site-header .btn:focus-visible{outline:2px solid #6ea8ff;outline-offset:2px}

.nav__cta{margin-left:.5rem}
/* The global primary button is near-black; on the navy header the CTA takes
   the accent fill instead so it stays visible. */
.site-header .btn--primary{background:var(--accent)}
.site-header .btn--primary:hover{background:#0d6fdc}
.nav__toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--dark-line);
  border-radius:10px;width:42px;height:42px;font-size:1.2rem;cursor:pointer;color:#fff;
}

@media (max-width:1180px){
  .nav__toggle{display:grid;place-items:center}
  .nav__menu{
    position:fixed;inset:72px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:.2rem;
    background:var(--dark);border-bottom:1px solid var(--dark-line);
    box-shadow:0 28px 48px -20px rgba(0,0,0,.65);
    padding:1rem var(--pad) 1.6rem;margin:0;
    max-height:calc(100dvh - 72px);overflow-y:auto;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    /* The sub-lists below re-declare visibility:visible, which would keep
       them hit-testable while the closed menu is invisible: an unseen band
       of links over the page swallowing taps. Gate the whole panel. */
    pointer-events:none;
  }
  .nav__menu.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
  /* Stack link above its sub-list; the desktop row layout would put them
     side by side. Hairlines separate the groups. */
  .nav__item{flex-direction:column;align-items:stretch;
    border-bottom:1px solid rgba(255,255,255,.07)}
  .nav__item:last-of-type{border-bottom:none}
  .nav__link{padding:.8rem .6rem;font-size:1rem}
  .nav__item--has-children:hover::before{display:none}
  .nav__item.active::after{display:none}
  .nav__sub{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:none;box-shadow:none;
    padding:0 0 .3rem 1rem;border-left:2px solid var(--dark-line);margin-left:.6rem;
    margin-bottom:.5rem;
  }
  .nav__cta{margin:.8rem 0 0}
  .nav__cta .btn{width:100%;justify-content:center}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:min(88vh,760px);display:grid;isolation:isolate;overflow:hidden}
.hero__slide{
  grid-area:1/1;position:relative;display:grid;align-items:center;
  opacity:0;visibility:hidden;transition:opacity .9s var(--ease), visibility .9s;
}
.hero__slide.active{opacity:1;visibility:visible}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__slide::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 42%, rgba(255,255,255,.40) 100%);
}
.hero__inner{padding-block:clamp(4rem,10vw,7rem);max-width:52rem}
.hero h1{margin-bottom:1.2rem}
.hero h1,.hero .hero__h{font-size:clamp(2.3rem,5.2vw,3.9rem);margin-bottom:1.2rem}
.hero h1 span,.hero .hero__h span{display:block;color:var(--accent)}
.hero p{font-size:clamp(1rem,1.6vw,1.2rem);max-width:46ch;color:var(--ink-2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

.hero__dots{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.55rem;z-index:5;
}
.hero__dots button{
  width:34px;height:4px;border-radius:99px;border:none;cursor:pointer;
  background:rgba(15,20,25,.16);transition:background .3s, width .3s;
}
.hero__dots button.active{background:var(--grad);width:52px}

/* ==========================================================================
   STATS STRIP
   ========================================================================== */
.stats{border-block:1px solid var(--line);background:var(--bg-2)}
.stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line)}
.stat{background:var(--bg-2);padding:2.4rem 1.5rem;text-align:center}
.stat__v{font-family:var(--font-display);font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:600;color:var(--ink)}
.stat__l{font-size:.86rem;color:var(--ink-3);margin-top:.35rem}

/* ==========================================================================
   SOLUTION CATEGORIES (home: between the hero and the stats strip)
   ========================================================================== */
/* Nine cells sharing hairlines, not nine floating cards. It reuses the 1px-gap
   device the stats strip below is built from, so the two bands read as one run
   of structure rather than two unrelated grids — and it stays clearly distinct
   from the icon cards further down the page, which do a different job. */
.solutions{padding-block:clamp(3rem,6vw,4.75rem)}
.solutions .shead h2 span{color:var(--accent)}

.solutions__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
}
/* Not a link: these categories have no page of their own yet, so the cell
   stays inert. The hover response is kept so the grid still feels alive
   under the cursor, but nothing here promises navigation. */
.soln{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);padding:1.65rem 1.5rem 1.7rem;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.soln:hover{background:var(--bg-2)}

.soln__n{
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.08em;color:var(--accent);
}
/* The rule under the ordinal is the only moving part: it extends on hover,
   which reads as "this goes somewhere" without a shadow or a second colour. */
.soln__n::after{
  content:"";display:block;width:18px;height:2px;margin-top:.5rem;
  background:var(--accent);opacity:.35;
  transition:width .25s var(--ease),opacity .25s var(--ease);
}
.soln:hover .soln__n::after{width:34px;opacity:1}

.soln h3{
  font-family:var(--font-display);font-size:1.03rem;font-weight:600;
  line-height:1.32;margin-top:.95rem;color:var(--ink);
}
.soln p{margin-top:.45rem;font-size:.89rem;line-height:1.55;color:var(--ink-3)}
.solutions__foot{
  display:flex;flex-direction:column;align-items:center;
  gap:.45rem;margin-top:1.35rem;text-align:center;
}
.solutions__note{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.92rem;color:var(--ink-2);
}
.solutions__note::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.solutions__fn{font-size:.8rem;color:var(--ink-3)}

@media (max-width:980px){.solutions__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.solutions__grid{grid-template-columns:1fr}}

/* ==========================================================================
   CARDS (generic)
   ========================================================================== */
/* An auto-fit grid holds its column count no matter how many cards land in the
   final row, so any set that is not a clean multiple ends ragged: cloud-storage
   showed "Highlights" as 3 cards + 1 orphan with two empty cells, "Why Choose"
   as 3 + 2, and "Where this applies" the same. It reads as an unfinished
   section rather than a deliberate one.

   So the cards sit on a 12-track grid and an incomplete last row widens to
   fill it. The track maths is exact — a span of 4 in 12 tracks is the same
   width as a column of a true 3-column grid, gaps included — so card sizes at
   full rows are unchanged; only the trailing row moves. Counts that tile
   perfectly (1, 2, 4) get their own layout instead of a stretched orphan. */
.grid{display:grid;gap:1.5rem;grid-template-columns:repeat(12,1fr)}
.grid > *{height:100%;grid-column:span 12}

/* 2-up. Ranges are mutually exclusive rather than layered, because the
   last-row selectors outrank a bare `.grid--3 > *` and would otherwise leak
   past their breakpoint and stretch the wrong card. */
@media (min-width:700px) and (max-width:999.98px){
  .grid--2 > *,.grid--3 > *{grid-column:span 6}
  .grid--2 > :last-child:nth-child(odd),
  .grid--3 > :last-child:nth-child(odd){grid-column:span 12}
}
@media (min-width:700px) and (max-width:1099.98px){
  .grid--4 > *{grid-column:span 6}
  .grid--4 > :last-child:nth-child(odd){grid-column:span 12}
}

/* 3-up */
@media (min-width:1000px){
  .grid--2 > *,.grid--3 > *{grid-column:span 4}
  .grid--2 > :last-child:nth-child(3n+1),
  .grid--3 > :last-child:nth-child(3n+1){grid-column:span 12}
  .grid--2 > :nth-last-child(2):nth-child(3n+1),
  .grid--2 > :nth-last-child(2):nth-child(3n+1) ~ *,
  .grid--3 > :nth-last-child(2):nth-child(3n+1),
  .grid--3 > :nth-last-child(2):nth-child(3n+1) ~ *{grid-column:span 6}
  /* Exact counts that tile: 4 is a 2x2 block, not 3 + a full-width straggler.
     Must come last — same specificity as the last-row rules above. */
  .grid--2 > :first-child:nth-last-child(4),
  .grid--2 > :first-child:nth-last-child(4) ~ *,
  .grid--3 > :first-child:nth-last-child(4),
  .grid--3 > :first-child:nth-last-child(4) ~ *{grid-column:span 6}
}

/* 4-up */
@media (min-width:1100px){
  .grid--4 > *{grid-column:span 3}
  .grid--4 > :last-child:nth-child(4n+1){grid-column:span 12}
  .grid--4 > :nth-last-child(2):nth-child(4n+1),
  .grid--4 > :nth-last-child(2):nth-child(4n+1) ~ *{grid-column:span 6}
  .grid--4 > :nth-last-child(3):nth-child(4n+1),
  .grid--4 > :nth-last-child(3):nth-child(4n+1) ~ *{grid-column:span 4}
}

/* Flat white, hairline border, no shadow, and a lot of air inside. The card
   does no decorating — the space around the words is what makes it readable. */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem 1.9rem 2.1rem;
  transition:border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.card__icon{
  width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  font-size:1.15rem;margin-bottom:1.5rem;
  background:rgba(11,95,190,.08);color:var(--accent);border:0;
}
.card--orange .card__icon{background:rgba(15,20,25,.05);color:var(--orange)}
.card--green  .card__icon{background:rgba(15,20,25,.05);color:var(--green)}
.card--red    .card__icon{background:rgba(15,20,25,.05);color:var(--red)}
.card--violet .card__icon{background:rgba(15,20,25,.05);color:var(--violet)}
.card h3{margin-bottom:.7rem;font-size:1.22rem}
.card p{font-size:.97rem;line-height:1.6}
.card__sub{
  display:block;font-family:var(--font-mono);font-size:.8rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  margin:1.25rem 0 .6rem;
}
.ticks{display:grid;gap:.55rem;margin-top:1.1rem}
.ticks li{position:relative;padding-left:1.6rem;font-size:.92rem;color:var(--ink-2)}
/* Was a bootstrap check-circle — the same glyph every services site uses, and
   it appeared in four separate components here. A short accent rule reads as
   a spec-sheet tally instead, costs no icon font, and stays legible at 12px. */
.ticks li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:11px;height:2px;background:var(--accent);
}
.card--orange .ticks li::before{background:var(--orange)}
.card--green  .ticks li::before{background:var(--green)}
.card--red    .ticks li::before{background:var(--red);height:6px;width:6px;top:.5em;border-radius:50%}

.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.15rem}
.chip{
  font-size:.76rem;font-weight:600;font-family:var(--font-mono);
  padding:.32rem .75rem;border-radius:999px;
  background:transparent;border:1px solid var(--line-2);color:var(--ink-2);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.chip:hover{border-color:var(--line-2);color:var(--ink);background:var(--bg-2)}

/* --- service cards (home) ------------------------------------------- */
.scard{
  display:flex;flex-direction:column;overflow:hidden;padding:0;
}
.scard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-3)}
.scard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.scard:hover .scard__media img{transform:scale(1.06)}
.scard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(255,255,255,.94))}
.scard__tag{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--cyan);
}
.scard__body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.scard__body h3{margin-bottom:.55rem}
.scard__body > p{font-size:.93rem;flex:0}
.scard .ticks{flex:1}
.scard__more{
  margin-top:1.4rem;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-mono);font-weight:600;font-size:.9rem;color:var(--cyan);
}
.scard__more i{transition:transform .25s var(--ease)}
.scard:hover .scard__more i{transform:translateX(4px)}

/* ==========================================================================
   PAGE HERO (service pages)
   ========================================================================== */
.phero{position:relative;padding-block:clamp(3.5rem,8vw,6rem) clamp(2.5rem,5vw,4rem);overflow:hidden}
.phero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(45rem 24rem at 15% 0%, rgba(11,95,190,.13), transparent 65%);
}
.phero__grid{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.phero h1{margin-bottom:1rem}
.phero h1 span{color:var(--accent)}
.phero p{font-size:1.08rem;max-width:54ch}
/* Image sits over an offset accent block rather than floating on white —
   the device that gives the reference heroes their weight. */
.phero__media{position:relative}
.phero__media::before{
  content:"";position:absolute;z-index:0;
  top:-1.6rem;right:-1.6rem;width:60%;height:76%;
  background:var(--accent);border-radius:var(--radius-lg);
}
.phero__media img{
  position:relative;z-index:1;
  border-radius:var(--radius-lg);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
@media (max-width:900px){.phero__grid{grid-template-columns:1fr}.phero__media{display:none}}

/* breadcrumb */
.crumb{display:flex;gap:.5rem;align-items:center;font-size:.84rem;color:var(--ink-3);margin-bottom:1.4rem}
.crumb a{display:inline-flex;align-items:center;min-height:24px}
.crumb a:hover{color:var(--cyan)}
.crumb i{font-size:.7em}

/* ==========================================================================
   STEPS
   ========================================================================== */
.steps{display:grid;gap:1rem;counter-reset:step}
.step{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.75rem;transition:border-color .25s;
}
.step:hover{border-color:var(--line-2)}
.step__n{
  counter-increment:step;
  width:40px;height:40px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:700;font-size:.95rem;
  background:rgba(11,95,190,.08);border:0;color:var(--accent);
}
.step__n::before{content:counter(step,decimal-leading-zero)}
.step h4{margin-bottom:.25rem}
.step p{font-size:.93rem}

/* ==========================================================================
   TILES / FRAMEWORKS
   ========================================================================== */
.tile{
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem;
  transition:border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.tile:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.tile__t{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--ink);margin-bottom:.4rem}
.tile p{font-size:.92rem}

/* ==========================================================================
   USE CASES — problem above, solution below, full-width text
   ========================================================================== */
/* Tag chip, headline, one short paragraph — nothing else. The two tinted
   problem/solution blocks and the connector line were carrying more structure
   than the content needed. */
.uc{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem 1.9rem 2.1rem;height:100%;
  transition:border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.uc:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.uc__tag{
  align-self:flex-start;
  font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);background:rgba(11,95,190,.09);
  padding:.3rem .6rem;border-radius:6px;margin-bottom:1.4rem;
}
.uc h4{margin:0 0 .7rem;font-size:1.18rem;line-height:1.3;letter-spacing:-.015em}
.uc > p{font-size:.97rem;line-height:1.6;color:var(--ink-2);margin:0}
.uc__more{
  margin-top:auto;padding-top:1.5rem;display:inline-flex;align-items:center;gap:.4rem;
  font-weight:600;font-size:.88rem;color:var(--accent);
}
.uc__more i{transition:transform .25s var(--ease)}
.uc:hover .uc__more i{transform:translateX(4px)}

/* ==========================================================================
   TABLE
   ========================================================================== */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table.t{width:100%;border-collapse:collapse;min-width:620px}
table.t th{
  text-align:left;font-family:var(--font-mono);font-size:.75rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  padding:1rem 1.25rem;background:rgba(11,95,190,.06);border-bottom:1px solid var(--line);
}
table.t td{padding:1rem 1.25rem;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--ink-2);vertical-align:top}
table.t tr:last-child td{border-bottom:none}
table.t tbody tr{transition:background .2s}
table.t tbody tr:hover{background:var(--surface-2)}
table.t td:first-child{color:var(--ink);font-weight:500}
.badge{
  display:inline-block;font-size:.76rem;font-weight:600;padding:.28rem .65rem;border-radius:999px;
  background:rgba(75,47,208,.12);color:var(--violet);border:1px solid rgba(75,47,208,.25);white-space:nowrap;
}

/* ==========================================================================
   TOOL STACK
   ========================================================================== */
.tgroup{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;margin-bottom:1.1rem;
}
.tgroup > h4{margin-bottom:.5rem;color:var(--ink)}
.tgroup > p{font-size:.93rem;margin-bottom:1.2rem}
.tool{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  padding:.9rem 0;border-top:1px solid var(--line);
}
.tool__d{width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-top:.55rem;box-shadow:0 0 0 4px rgba(11,95,190,.12)}
.tool__n{font-family:var(--font-mono);font-weight:600;color:var(--ink);display:block;margin-bottom:.15rem}
.tool p{font-size:.9rem;margin:0}

/* chips group */
.cgroup{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.cgroup h4{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.9rem}

/* --- skill matrix --------------------------------------------------- */
.mx{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;transition:border-color .3s, transform .3s var(--ease);
}
.mx:hover{border-color:var(--line-2)}
.mx h4{margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.mx h4::before{content:"";width:6px;height:22px;border-radius:3px;background:var(--grad);flex-shrink:0}
.mx__skills{display:grid;gap:.45rem;margin-bottom:1rem}
.mx__skills li{font-size:.9rem;color:var(--ink-2);padding-left:1.1rem;position:relative}
.mx__skills li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--cyan-dim)}

/* --- gallery -------------------------------------------------------- */
.gal figure{
  margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);
  transition:transform .35s var(--ease), border-color .35s;cursor:zoom-in;
}
.gal figure:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.gal img{aspect-ratio:16/10;object-fit:cover;width:100%}
.gal figcaption{padding:.7rem .9rem;font-size:.82rem;color:var(--ink-3)}

/* image viewer */
/* The screenshots are wider than the frames they sit in, so every content
   image opens full-screen on a double click and can then be zoomed to its
   own pixels. The stage owns the scaling, hence the max-width/height reset
   on the image and touch-action:none so a drag pans instead of scrolling. */
.is-zoomable{cursor:zoom-in}
html.viewer-open{overflow:hidden}

.viewer{
  position:fixed;inset:0;z-index:700;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:rgba(6,10,16,.97);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .22s, visibility .22s;
}
.viewer.open{opacity:1;visibility:visible}

.viewer__bar{
  display:flex;align-items:center;gap:1.2rem;
  padding:.8rem clamp(.8rem,3vw,1.6rem);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.viewer__cap{
  margin:0;max-width:78ch;color:#e9edf3;font-size:.9rem;line-height:1.5;
}
.viewer__cap[hidden]{display:none}
.viewer__tools{display:flex;align-items:center;gap:.4rem;margin-left:auto;flex:none}
.viewer__btn{
  display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 .55rem;
  border:1px solid rgba(255,255,255,.18);border-radius:10px;
  background:rgba(255,255,255,.06);color:#e9edf3;
  font:inherit;font-size:.95rem;line-height:1;cursor:pointer;text-decoration:none;
  transition:background .15s, border-color .15s, color .15s;
}
.viewer__btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.36);color:#fff}
.viewer__btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.viewer__pct{
  min-width:64px;font-family:var(--font-mono);font-size:.76rem;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}

.viewer__stage{
  position:relative;overflow:hidden;
  touch-action:none;cursor:zoom-in;
}
.viewer.is-pannable .viewer__stage{cursor:grab}
.viewer.is-pannable .viewer__stage:active{cursor:grabbing}
.viewer__img{
  /* Pinned to the stage centre by the transform below, because neither
     grid centring nor auto margins centre a box that is wider than its
     container: both clamp it to the start edge and the zoom then drifts. */
  position:absolute;left:50%;top:50%;
  max-width:none;max-height:none;width:auto;height:auto;
  transform-origin:0 0;will-change:transform;
  border-radius:6px;box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
  user-select:none;-webkit-user-drag:none;
}
.viewer__hint{
  margin:0;padding:.65rem 1rem .9rem;text-align:center;
  color:rgba(233,237,243,.5);font-size:.76rem;
}
.viewer__hint kbd{
  font-family:var(--font-mono);font-size:.72rem;
  border:1px solid rgba(255,255,255,.22);border-radius:5px;padding:.05rem .3rem;
}
@media (max-width:700px){
  .viewer__cap{display:none}
  .viewer__hint{font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){
  .viewer{transition:none}
}

/* --- note / callout ------------------------------------------------- */
.note{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  background:linear-gradient(120deg,rgba(11,95,190,.08),rgba(75,47,208,.05));
  border:1px solid rgba(11,95,190,.25);border-radius:var(--radius);padding:1.5rem 1.7rem;
}
.note i{font-size:1.4rem;color:var(--cyan);margin-top:.1rem}
.note h4{margin-bottom:.35rem}
.note p{font-size:.95rem;margin:0}

/* --- prose ---------------------------------------------------------- */
/* Bare narrow text left half the row empty and read as an unfinished
   section; present it as a panel that occupies its space deliberately. */
.prose{
  display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start;
  background:linear-gradient(120deg,rgba(11,95,190,.05),transparent 65%),var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.75rem 2rem;
}
.prose__bar{width:4px;align-self:stretch;border-radius:99px;background:var(--grad);min-height:3rem}
.prose p{font-size:1rem;max-width:80ch}
.prose p + p{margin-top:.9rem}
@media (max-width:640px){
  .prose{grid-template-columns:1fr;gap:1rem;padding:1.35rem 1.4rem}
  .prose__bar{width:44px;height:4px;min-height:0}
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(125deg,rgba(11,95,190,.14),rgba(75,47,208,.10) 55%,rgba(180,83,26,.10));
  border:1px solid var(--line-2);
  padding:clamp(2.2rem,5vw,3.6rem);text-align:center;
}
.cta h2{margin-bottom:.8rem}
.cta p{max-width:56ch;margin-inline:auto}
.cta__actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}}
.cinfo{display:grid;gap:.9rem;margin-top:2rem}
.cinfo a, .cinfo div.row{display:flex;align-items:center;gap:.9rem;color:var(--ink-2);font-size:.95rem;transition:color .2s}
.cinfo a:hover{color:var(--cyan)}
.cinfo i{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(11,95,190,.09);border:1px solid rgba(11,95,190,.2);color:var(--cyan);font-size:1rem;
}
.cinfo .wa i{background:rgba(47,107,70,.09);border-color:rgba(47,107,70,.2);color:var(--green)}

.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.4rem)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field.full{grid-column:1/-1}
.field label{font-size:.85rem;font-weight:500;color:var(--ink-2)}
.field label .req{color:var(--orange)}
.field input,.field select,.field textarea{
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:11px;
  padding:.8rem 1rem;font-size:.95rem;color:var(--ink);
  transition:border-color .2s, box-shadow .2s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(11,95,190,.14);
}
.field textarea{resize:vertical;min-height:130px}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2355514a'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:14px;padding-right:2.6rem;
}
.form__note{font-size:.82rem;color:var(--ink-3);margin-top:1rem}
@media (max-width:600px){.form__grid{grid-template-columns:1fr}}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2);margin-top:clamp(3rem,7vw,6rem)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-block:clamp(2.5rem,5vw,4rem)}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer__grid img.logo{height:36px;margin-bottom:1rem}
/* Headed h3 rather than h5: the outline jumped from h2 to h5 on every page.
   Every visual property is set here, so the level change is invisible. */
.footer__grid .footer__h{font-family:var(--font-mono);font-size:.8rem;font-weight:600;line-height:1.25;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.1rem}
.footer__grid .footer__h--sub{margin-top:1.6rem}
.footer__links{display:grid;gap:.6rem}
/* The row is a flex container, which drops the whitespace text node between
   the icon and the label — without an explicit gap the two collide. The fixed
   icon width also keeps the envelope, phone and pin labels on one left edge. */
.footer__links a,.footer__links span{font-size:.92rem;color:var(--ink-2);
  transition:color .2s var(--ease), padding-left .2s var(--ease);
  display:flex;align-items:center;gap:.55rem;min-height:24px}
.footer__links a > i,.footer__links span > i{flex:none;width:1em;text-align:center}
.footer__links a:hover{color:var(--cyan);padding-left:4px}
.social{display:flex;gap:.5rem;margin-top:1.1rem}
.social a{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line-2);color:var(--ink-2);
  transition:all .25s var(--ease);
}
.social a:hover{background:var(--accent);color:#fff;transform:translateY(-3px);border-color:transparent}
.footer__bottom{
  border-top:1px solid var(--line);padding-block:1.3rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.85rem;color:var(--ink-3);
}

/* --- floating whatsapp ---------------------------------------------- */
.wafab{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:90;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:#25d366;color:#053f22;font-size:1.6rem;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.6);
  transition:transform .25s var(--ease);
}
.wafab:hover{transform:scale(1.08)}

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
/* --reveal-delay is set per element by wireReveal, from its position among
   its .reveal siblings, so a row of cards arrives in order rather than all at
   once. Unset elements fall back to 0ms. */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
  transition-delay:var(--reveal-delay,0ms)}
.reveal.in{opacity:1;transform:none}

/* --- scroll progress ------------------------------------------------- */
/* Sits above the sticky header (z-index 100) and below the image viewer. */
.sprog{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:101;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;
    transition-delay:0ms !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* The first-load spinner that used to live here is now the full-page brand
   splash, inlined in the page <head> by scripts/build_pages.js so it paints
   before this stylesheet arrives. */

/* focus visibility */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:999;background:var(--surface);padding:.7rem 1.1rem;border-radius:10px;border:1px solid var(--cyan)}

/* ==========================================================================
   TOOL MATRIX — tool + licence badge
   ========================================================================== */
.tm{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.35rem 1.5rem;transition:border-color .3s, transform .3s var(--ease);
}
.tm:hover{border-color:var(--line-2)}
.tm__head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.55rem}
.tm__head h4{margin:0;font-size:1.05rem}
.tm p{font-size:.92rem;margin:0}

.lic{
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  padding:.24rem .6rem;border-radius:999px;white-space:nowrap;
}
.lic--oss {background:rgba(47,107,70,.12);color:var(--green); border:1px solid rgba(47,107,70,.3)}
.lic--core{background:rgba(180,83,26,.12);color:var(--orange);border:1px solid rgba(180,83,26,.3)}
.lic--com {background:rgba(75,47,208,.12);color:var(--violet);border:1px solid rgba(75,47,208,.3)}

/* legend under a tool-matrix heading */
.liclegend{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.5rem}

/* --- numbered bullet strip ------------------------------------------ */
/* Replaces a row of identical check-circles. A running index is honest about
   these being a list, and gives the strip the spec-sheet cadence the rest of
   the page uses (steps, use cases and the tool matrix are all numbered). */
.bullet{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;padding:1.15rem 1.25rem}
.bullet__n{
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  color:var(--accent);letter-spacing:.06em;line-height:1.7;
}
.bullet p{font-size:.9rem;color:var(--ink);margin:0}

/* ==========================================================================
   CONNECTOR CATALOG
   ========================================================================== */
/* filter input */
.cfilter{
  display:flex;align-items:center;gap:.8rem;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  padding:.55rem 1.25rem;
}
.cfilter:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(11,95,190,.14)}
.cfilter i{color:var(--ink-3);font-size:1rem}
.cfilter input{flex:1;min-width:0;border:none;background:none;font-size:.98rem;color:var(--ink)}
.cfilter input:focus{outline:none}
.cfilter input::-webkit-search-cancel-button{-webkit-appearance:none}
.cfilter__count{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--ink-3);white-space:nowrap}
.cfilter__none{margin-top:1rem;font-size:.95rem;color:var(--ink-2)}

/* category section headers */
.cathead{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:.35rem}
.cathead h2{font-size:clamp(1.35rem,2.4vw,1.75rem)}
.cathead__n{
  font-family:var(--font-mono);font-size:.74rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
}
.cathead__blurb{max-width:76ch;font-size:.97rem;margin-bottom:1.5rem}

/* connector cards */
.ccard{display:flex;flex-direction:column;padding:1.6rem 1.6rem 1.7rem}
.ccard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.55rem}
.ccard__head h3{margin:0;font-size:1.1rem}
.ccard > p{font-size:.92rem;flex:1}
.ccard__more{
  margin-top:1.2rem;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-mono);font-weight:600;font-size:.86rem;color:var(--cyan);
}
.ccard__more i{transition:transform .25s var(--ease)}
.ccard:hover .ccard__more i{transform:translateX(4px)}
/* the filter toggles [hidden]; flex display on .ccard would otherwise win */
.ccard[hidden],.csec[hidden]{display:none}

/* maturity badges: ga green, beta azure, roadmap grey */
.mat{
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  padding:.26rem .62rem;border-radius:999px;white-space:nowrap;flex-shrink:0;
}
.mat--ga  {background:rgba(31,122,77,.12); color:var(--green); border:1px solid rgba(31,122,77,.3)}
.mat--beta{background:rgba(11,95,190,.10); color:var(--accent);border:1px solid rgba(11,95,190,.3)}
.mat--road{background:rgba(15,20,25,.05);  color:var(--ink-3); border:1px solid var(--line-2)}

/* connector detail hero */
.chero{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.chero h1{margin:0}
.chero .mat{font-size:.74rem;padding:.34rem .8rem}
.chip--role{border-color:rgba(11,95,190,.35);color:var(--accent);background:rgba(11,95,190,.06)}

/* config sample: dark navy block, mono type, horizontal scroll inside */
.codewrap{
  border-radius:var(--radius);overflow:hidden;
  border:1px solid #0b1220;background:#0b1220;box-shadow:var(--shadow-lg);
}
.codewrap__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem 1.2rem;background:#101a33;border-bottom:1px solid rgba(255,255,255,.08);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.74rem;font-weight:500;color:#8fa1c2;
}
.codewrap__lang{letter-spacing:.08em;text-transform:uppercase;font-size:.66rem;color:#5f7194}
pre.code{margin:0;padding:1.3rem 1.4rem;overflow-x:auto;background:#0b1220}
pre.code code{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.85rem;line-height:1.65;color:#dbe4f5;white-space:pre;display:block;
}

/* ==========================================================================
   PRODUCT-LED HOME — hero2, NMS band, proof, groups, tiers, plans
   ========================================================================== */
.hero2{background:var(--dark);color:var(--dark-ink);
  padding-block:clamp(4.5rem,9vw,7.5rem) clamp(3.5rem,7vw,5.5rem)}
.hero2__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.hero2__copy h1{color:#fff;margin-top:.4rem}
.hero2__copy h1 span{display:block;color:#6ea8ff}
.hero2__copy p{color:var(--dark-ink2);margin-top:1.1rem;max-width:52ch;font-size:1.08rem}
.hero2 .hero__actions{margin-top:1.8rem;display:flex;gap:.8rem;flex-wrap:wrap}
.eyebrow--mono{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  color:#8fc1ff;background:rgba(110,168,255,.12)}
.section .eyebrow--mono{color:var(--accent);background:rgba(11,95,190,.09)}
.btn--ghost2{border:1px solid var(--dark-line);color:var(--dark-ink);border-radius:999px;
  padding:.8rem 1.4rem}
.btn--ghost2:hover{border-color:#6ea8ff;color:#fff}
.hero2__shot{border:1px solid var(--dark-line);border-radius:12px;overflow:hidden;
  background:#0d1526;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.hero2__shot .shot__bar{display:flex;gap:.4rem;padding:.55rem .8rem;
  border-bottom:1px solid var(--dark-line)}
.hero2__shot .shot__bar span{width:.62rem;height:.62rem;border-radius:50%;
  background:rgba(255,255,255,.18)}
.hero2__shot img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hero2__shot figcaption{font-family:var(--font-mono);font-size:.72rem;
  color:var(--dark-ink2);padding:.55rem .8rem;border-top:1px solid var(--dark-line)}
.stat__v{font-family:var(--font-mono);letter-spacing:-.02em}
.nmsband{background:var(--dark);color:var(--dark-ink)}
.nmsband__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.nmsband h2{color:#fff}
.nmsband p{color:var(--dark-ink2);margin-top:.9rem;max-width:54ch}
.nmsband .ticks li{color:var(--dark-ink)}
.nmsband .ticks li::before{color:#6ea8ff}
.nmsband .hero__actions{margin-top:1.6rem}
.pcard{border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.5rem;background:var(--surface)}
.pcard h4{font-family:var(--font-display)}
.pcard p{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-3);margin-top:.5rem}
.center-cta{text-align:center;margin-top:2.2rem}
.sgroup{margin-top:clamp(2rem,4vw,3rem);text-align:left}
.sgroup:first-of-type{margin-top:0}
.sgroup__t{font-family:var(--font-display)}
.sgroup__d{color:var(--ink-3);font-size:.95rem;margin:.3rem 0 1.2rem}
.tier{border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.6rem;background:var(--surface)}
.tier__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.tier__tag{font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  color:var(--accent);background:rgba(11,95,190,.09);padding:.3rem .6rem;border-radius:6px}
.chip,.lic,.uc__tag,.scard__tag,.badge{font-family:var(--font-mono)}
.tool__n,.tm__head h4{font-family:var(--font-display)}
.note__link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;
  font-weight:600;color:var(--accent)}
.note__link:hover{text-decoration:underline}
.form__err{color:var(--red);font-size:.9rem;margin-top:.8rem}
.section--alt{background:var(--bg-2)}
.plan{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.8rem;background:var(--surface);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.plan:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.plan__head{display:flex;align-items:center;justify-content:space-between}
.plan__head h3{font-family:var(--font-display)}
.plan__tag{font-family:var(--font-mono);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.plan__price{font-family:var(--font-mono);font-size:.85rem;color:var(--accent);
  margin:.4rem 0 1rem;font-weight:600}
.plan .ticks{flex:1}
.plan__cta{margin-top:1.4rem;justify-content:center}
.plan--featured{background:var(--dark);border-color:var(--dark);color:var(--dark-ink);
  box-shadow:0 24px 48px -28px rgba(11,18,32,.55)}
.plan--featured h3{color:#fff}
.plan--featured .plan__tag,.plan--featured .plan__price{color:#8fc1ff}
.plan--featured .ticks li{color:var(--dark-ink)}
.plan--featured .ticks li::before{color:#6ea8ff}
.plans__note{text-align:center;margin-top:1.8rem;font-size:.92rem;color:var(--ink-3)}
@media (max-width: 900px){
  .hero2__grid,.nmsband__grid{grid-template-columns:1fr}
  .hero2__shot{max-width:560px}
}

/* --- live demo recordings on home ------------------------------------ */
.democard{margin:0}
.democard .hero2__shot{box-shadow:0 24px 48px -30px rgba(11,18,32,.45)}
/* The captures are not all 16:9 — the Zabbix screenshots are far wider and
   shorter than the recordings. The shared frame forces 16:9 with
   object-fit:cover, which sliced off the right-hand column, and that is
   exactly where the analysis text is. Each capture keeps its own shape: the
   real ratio arrives as an inline style per image, which also reserves the
   right height before a lazy-loaded capture arrives, so nothing jumps. */
.democard .hero2__shot img{height:auto;object-fit:contain}
.democard figcaption{padding:1rem .2rem 0}
.democard h3{font-family:var(--font-display);font-size:1.1rem}
.democard p{font-size:.95rem;color:var(--ink-2);margin-top:.35rem;max-width:52ch}

/* Demo recordings: one large card per row, all of them on the page. These are
   the proof the section exists for, so they are not put behind a control that
   hides four of the five. */
.demos-stack{display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4rem);
  max-width:1020px;margin-inline:auto}
.demos-stack .democard{width:100%}
.demos-stack .democard figcaption{padding:1.2rem .2rem 0;text-align:left}
.demos-stack .democard h3{font-size:1.25rem}
.demos-stack .democard p{max-width:72ch;font-size:1rem}

/* ==========================================================================
   SLIDER (demo reel + galleries)
   ========================================================================== */
/* The track is a native scroll-snap scroller, so swipe, trackpad and keyboard
   all work before any script runs; the arrows, dots and timer are added on
   top by wireSliders. Vertical padding rather than a clipping wrapper, so the
   cards' drop shadows are not sheared off by the scroll container. */
.slider__stage{position:relative}
.slider__track{
  display:flex;gap:1rem;padding-block:.35rem 1rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.slider__track::-webkit-scrollbar{display:none}
.slider__slide{scroll-snap-align:start;min-width:0;margin:0}
.slider--single .slider__slide{flex:0 0 100%}
/* Three up, then two, then one. The gap is subtracted so the last card in a
   row lands flush with the track edge and the snap points stay exact. */
.slider--multi .slider__slide{flex:0 0 calc((100% - 2rem)/3)}
@media (max-width:900px){.slider--multi .slider__slide{flex:0 0 calc((100% - 1rem)/2)}}
@media (max-width:600px){.slider--multi .slider__slide{flex:0 0 100%}}

.slider__nav{
  position:absolute;top:calc(50% - 22px);z-index:2;
  width:44px;height:44px;border-radius:999px;
  display:grid;place-items:center;font-size:1.05rem;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink);
  cursor:pointer;box-shadow:var(--shadow-lg);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.slider__nav:hover{background:var(--bg-2);border-color:var(--accent);color:var(--accent)}
.slider__nav--prev{left:-22px}
.slider__nav--next{right:-22px}
/* Once the viewport stops leaving room beside the content, the arrows move
   inside the track rather than hanging off the page. */
@media (max-width:1320px){
  .slider__nav--prev{left:8px}
  .slider__nav--next{right:8px}
}

.slider__dots{display:flex;justify-content:center;gap:.45rem;margin-top:.35rem}
.slider__dot{
  width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:var(--line-2);transition:background .2s var(--ease),width .2s var(--ease);
}
.slider__dot:hover{background:var(--ink-3)}
.slider__dot.on{background:var(--accent);width:22px}

/* Everything fits in one view: nothing to navigate to. */
.slider--static .slider__nav,.slider--static .slider__dots{display:none}

/* --- case-study proof cards ------------------------------------------ */
.case{
  display:flex;flex-direction:column;gap:.65rem;position:relative;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.6rem 1.6rem 1.4rem;background:var(--surface);overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.case:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(15,20,25,.35)}
.case::before{content:"";position:absolute;inset:0 0 auto 0;height:3px}
.case--azure::before{background:linear-gradient(90deg,#0b5fbe,#6ea8ff)}
.case--violet::before{background:linear-gradient(90deg,#4b2fd0,#9d8cff)}
.case--orange::before{background:linear-gradient(90deg,#b4531a,#f0a35e)}
.case--green::before{background:linear-gradient(90deg,#1f7a4d,#3ecf8e)}
.case__head{display:flex;align-items:center;gap:.7rem}
.case__icon{
  width:2.4rem;height:2.4rem;border-radius:9px;display:grid;place-items:center;
  font-size:1rem;color:var(--accent);background:rgba(11,95,190,.09);
}
.case--violet .case__icon{color:#4b2fd0;background:rgba(75,47,208,.09)}
.case--orange .case__icon{color:#b4531a;background:rgba(180,83,26,.09)}
.case--green .case__icon{color:#1f7a4d;background:rgba(31,122,77,.09)}
.case__sector{
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}
.case h3{font-family:var(--font-display);font-size:1.14rem;line-height:1.3}
.case p{font-size:.92rem}
.case__metric{
  display:flex;align-items:baseline;gap:.6rem;margin-top:.2rem;
  padding:.7rem .9rem;border-radius:10px;background:var(--bg-2);
}
.case__value{font-family:var(--font-mono);font-weight:600;font-size:1.35rem;
  letter-spacing:-.02em;color:var(--accent)}
.case--violet .case__value{color:#4b2fd0}
.case--orange .case__value{color:#b4531a}
.case--green .case__value{color:#1f7a4d}
.case__mlabel{font-size:.8rem;color:var(--ink-2)}
.case__pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem}
.case__pill{
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  padding:.28rem .6rem;border-radius:999px;background:var(--cta);color:#fff;
}
.case__stack{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.5rem;
  border-top:1px dashed var(--line)}
.chip--link{transition:border-color .2s,color .2s}
.chip--link:hover{border-color:var(--accent);color:var(--accent)}

/* --- tools-by-layer overview ------------------------------------------ */
/* Global `a` is colour:inherit, so links in the technologies column would be
   invisible as links. Underline them on hover only: forty of them underlined
   at rest turns the cell into noise. */
.ltbl table.t td{line-height:1.7}
.ltbl table.t td a{color:var(--accent);transition:color .2s}
.ltbl table.t td a:hover{text-decoration:underline}
.ltbl__layer{color:var(--ink) !important;font-weight:600}
.ltbl table.t td:first-child{white-space:nowrap}
@media (max-width:560px){.ltbl table.t td:first-child{white-space:normal}}

/* --- connector logos ------------------------------------------------- */
.ccard__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.9rem}
.ccard__logo{
  width:3.1rem;height:3.1rem;border-radius:12px;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--line);
}
.ccard__logo img{width:1.9rem;height:1.9rem;object-fit:contain}
.ccard h3{margin-bottom:.25rem}
.ccard:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(15,20,25,.35);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.chero{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.chero__logo{
  width:4.4rem;height:4.4rem;border-radius:16px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 12px 28px -18px rgba(15,20,25,.3);
}
.chero__logo img{width:2.8rem;height:2.8rem;object-fit:contain}

/* --- Estuary-style connector hero ------------------------------------ */
.phero__grid--connector{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.herochecks{display:flex;flex-wrap:wrap;gap:1.4rem;margin:1.3rem 0 0;padding:0}
.herochecks li{display:flex;align-items:center;gap:.45rem;font-size:.95rem;color:var(--ink-2)}
.herochecks i{color:var(--green);font-size:1rem}
.herochecks b{font-family:var(--font-mono);color:var(--accent);font-weight:600}

.cdiag{padding:1rem 0}
.cdiag__row{display:flex;align-items:flex-start;justify-content:center;gap:.4rem}
.cdiag__step{display:flex;flex-direction:column;align-items:center;gap:1rem;flex:0 0 auto}
.orb{
  position:relative;width:118px;height:118px;border-radius:50%;
  display:grid;place-items:center;
}
.orb::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(11,95,190,.35);
}
.orb::after{
  content:"";position:absolute;top:4px;left:50%;width:9px;height:9px;
  border-radius:50%;background:var(--accent);transform:translateX(-50%);
}
.orb__core{
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 14px 30px -18px rgba(15,20,25,.35);
}
.orb__core img{width:44px;height:44px;object-fit:contain}
.orb__core--icon{font-size:1.9rem;color:var(--accent)}
.orb--mid{width:138px;height:138px}
.orb--mid::before{border-style:dashed}
.orb--mid .orb__core{width:100px;height:100px}
.orb--mid .orb__core img{width:58px;height:58px}
.cdiag__link{
  flex:0 0 34px;height:0;border-top:2px solid rgba(11,95,190,.35);
  margin-top:59px;position:relative;
}
.cdiag__link::after{
  content:"";position:absolute;right:-2px;top:-5px;width:8px;height:8px;
  border-radius:50%;background:var(--accent);
}
.cdiag__label{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2);text-align:center;max-width:9.5rem;
  line-height:1.5;
}
.cdiag__label b{color:var(--accent)}
@media (max-width: 980px){
  .phero__grid--connector{grid-template-columns:1fr}
  .cdiag{display:none}
}

/* --- Estuary-style connector details card ----------------------------- */
.cdetails{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);padding:clamp(1.6rem,4vw,2.6rem);
}
.cdetails__head{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.2rem}
.cdetails__logo{
  width:4rem;height:4rem;border-radius:14px;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--line);flex:0 0 auto;
}
.cdetails__logo img{width:2.4rem;height:2.4rem;object-fit:contain}
.cdetails__head h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.cdetails__rule{display:block;width:4.5rem;height:3px;border-radius:2px;
  background:var(--accent);margin-top:.5rem}
.cdetails__prose{max-width:78ch;font-size:1.02rem;line-height:1.7}
.dotlist{
  margin-top:1.4rem;border:1px solid rgba(11,95,190,.18);border-radius:12px;
  background:rgba(11,95,190,.04);padding:1.2rem 1.5rem;
}
.dotlist ul{margin:0;padding:0}
.dotlist li{
  position:relative;padding:.45rem 0 .45rem 1.4rem;color:var(--ink-2);
  font-size:.97rem;
}
.dotlist li::before{
  content:"";position:absolute;left:0;top:1em;width:8px;height:8px;
  border-radius:50%;background:var(--accent);
}
.cdetails__foot{margin-top:1.2rem;font-size:.95rem}
.cdetails__foot a{color:var(--accent);font-weight:600}
.cdetails__foot a:hover{text-decoration:underline}

/* numbered easy-step cards */
.stepcard{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);padding:1.6rem;
}
.stepcard__n{
  display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;
  font-family:var(--font-mono);font-weight:600;font-size:1.05rem;
  color:var(--accent);background:rgba(11,95,190,.1);margin-bottom:1rem;
}
.stepcard h3{font-size:1.08rem;margin-bottom:.4rem}
.stepcard p{font-size:.94rem}

/* demo recordings on connector pages */
.cvideo{
  margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--surface);
}
.cvideo img{width:100%;display:block}
.cvideo figcaption{padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.15rem}
.cvideo b{font-family:var(--font-display);font-size:.98rem}
.cvideo span{font-size:.85rem;color:var(--ink-3)}

/* ==========================================================================
   FLOW DIAGRAM, sources, agentic brain, outcomes (home)
   ========================================================================== */
/* One tinted panel so the diagram reads as a single object. The dotted
   connector lines are borders; no SVG, no images. */
.flow{
  display:grid;grid-template-columns:minmax(0,5fr) auto minmax(0,5fr);
  gap:clamp(1rem,2.5vw,1.6rem);align-items:center;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.4rem,4vw,2.6rem);
}
.flow__col{display:grid;gap:.9rem;align-content:center}
.flow__end{
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:.2rem;
}
.flow__box{
  display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.15rem;transition:border-color .25s, transform .25s var(--ease);
}
.flow__box:hover{border-color:var(--line-2);transform:translateY(-2px)}
.flow__box h4{font-size:.96rem;margin-bottom:.15rem}
.flow__box p{font-size:.84rem;color:var(--ink-3);margin:0;line-height:1.5}
.flow__icon{
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  font-size:.95rem;background:rgba(11,95,190,.08);color:var(--accent);flex-shrink:0;
}
.flow__mid{display:flex;align-items:center}
.flow__line{
  flex:0 0 clamp(1.1rem,3vw,2.6rem);height:0;
  border-top:2px dotted rgba(11,95,190,.5);
}
.flow__pill{
  display:grid;justify-items:center;gap:.15rem;text-align:center;
  background:var(--dark);color:#fff;border-radius:999px;
  padding:1.3rem 1.7rem;min-width:11.5rem;
  box-shadow:0 18px 40px -22px rgba(11,18,32,.6);
}
.flow__pill i{font-size:1.3rem;color:#8fc1ff;margin-bottom:.25rem}
.flow__pill b{font-family:var(--font-display);font-size:1rem;line-height:1.25}
.flow__pill span{
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:#8fc1ff;
}
@media (max-width:900px){
  .flow{grid-template-columns:1fr;justify-items:stretch}
  .flow__mid{flex-direction:column;justify-self:center}
  .flow__line{flex:0 0 auto;width:0;height:1.8rem;border-top:0;
    border-left:2px dotted rgba(11,95,190,.5)}
  .flow__end{text-align:center}
}

/* ==========================================================================
   PIPELINE, Detect to Record timeline with framing copy (home)
   ========================================================================== */
.pipe{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem,5vw,3.5rem);align-items:start}
.pipe__copy{position:sticky;top:96px}
.pipe__copy p{font-size:1rem;max-width:52ch}
.pipe__copy p + p{margin-top:.9rem}
.pipe__list{display:grid;margin:0;padding:0}
.pipe__list li{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;
  align-items:start;padding-bottom:1.4rem;
}
.pipe__list li:last-child{padding-bottom:0}
.pipe__list li::before{
  content:"";position:absolute;left:19px;top:44px;bottom:.3rem;
  border-left:2px dotted var(--line-2);
}
.pipe__list li:last-child::before{display:none}
.pipe__n{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:700;font-size:.82rem;
  background:var(--surface);border:1px solid rgba(11,95,190,.35);color:var(--accent);
  position:relative;z-index:1;
}
.pipe__list h4{margin-bottom:.15rem}
.pipe__list li p{font-size:.92rem;margin:0}
@media (max-width:900px){
  .pipe{grid-template-columns:1fr}
  .pipe__copy{position:static}
}

/* ==========================================================================
   TRUST BAND, dark enterprise-trust section (home)
   ========================================================================== */
.trustband{background:var(--dark);color:var(--dark-ink)}
.trustband .shead h2{color:#fff}
.trustband .shead p{color:var(--dark-ink2)}
.trustband .eyebrow{color:#8fc1ff;background:rgba(110,168,255,.12)}
.tcard{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
  background:var(--dark-2);border:1px solid var(--dark-line);
  border-radius:var(--radius);padding:1.6rem 1.7rem;
  transition:border-color .25s;
}
.tcard:hover{border-color:rgba(255,255,255,.28)}
.tcard__icon{
  width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  font-size:1.05rem;background:rgba(110,168,255,.12);color:#8fc1ff;flex-shrink:0;
}
.tcard h4{color:#fff;margin-bottom:.35rem}
.tcard p{color:var(--dark-ink2);font-size:.93rem;margin:0}
.trustband__note{
  text-align:center;margin-top:2rem;font-size:.9rem;color:var(--dark-ink2);
  max-width:64ch;margin-inline:auto;
}

/* ==========================================================================
   ASSISTANT WIDGET, floating button + chat panel (assets/js/assistant.js)
   ========================================================================== */
/* Sits above the WhatsApp button, which owns the bottom-right corner. */
.sa-fab{
  position:fixed;right:1.2rem;bottom:calc(1.2rem + 54px + .9rem);z-index:95;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--cta);color:#fff;font-size:1.35rem;border:none;cursor:pointer;
  box-shadow:0 10px 30px -8px rgba(15,20,25,.55);
  transition:transform .25s var(--ease), background .25s;
}
.sa-fab:hover{transform:scale(1.08);background:#000}
.sa-panel{
  position:fixed;right:1.2rem;bottom:calc(1.2rem + 108px + 1.8rem);z-index:96;
  width:min(370px,calc(100vw - 2.4rem));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-2);border-radius:16px;
  box-shadow:0 28px 64px -22px rgba(15,20,25,.45);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.sa-panel.open{opacity:1;visibility:visible;transform:none}
.sa-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--dark);color:#fff;padding:.85rem 1.15rem;
}
.sa-head b{font-family:var(--font-display);font-size:.98rem}
.sa-head span{
  display:block;font-family:var(--font-mono);font-size:.64rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#8fc1ff;
}
.sa-head button{
  background:none;border:none;color:#9fb0c6;cursor:pointer;font-size:1.05rem;
  padding:.2rem;line-height:1;
}
.sa-head button:hover{color:#fff}
.sa-log{
  height:min(320px,calc(100vh - 21rem));overflow-y:auto;
  padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--bg-2);
}
.sa-msg{
  max-width:90%;padding:.6rem .85rem;border-radius:12px;
  font-size:.88rem;line-height:1.55;
}
.sa-msg--bot{
  align-self:flex-start;background:var(--surface);border:1px solid var(--line);
  color:var(--ink-2);border-bottom-left-radius:4px;
}
.sa-msg--user{
  align-self:flex-end;background:var(--cta);color:#fff;
  border-bottom-right-radius:4px;
}
.sa-msg a{color:var(--accent);font-weight:600}
.sa-msg a:hover{text-decoration:underline}
.sa-msg ul{margin:.4rem 0 0;padding-left:1.05rem;list-style:disc;display:grid;gap:.2rem}
.sa-msg b{color:var(--ink)}
.sa-chips{display:flex;flex-wrap:wrap;gap:.4rem;align-self:flex-start}
.sa-chips button{
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  padding:.34rem .7rem;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);
  transition:border-color .2s, color .2s;
}
.sa-chips button:hover{border-color:var(--accent);color:var(--accent)}
.sa-form{display:flex;gap:.5rem;padding:.7rem .7rem .45rem;border-top:1px solid var(--line)}
.sa-form input{
  flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:999px;padding:.55rem 1rem;font-size:.88rem;color:var(--ink);
}
.sa-form input:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(11,95,190,.14)}
.sa-form button{
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  display:grid;place-items:center;background:var(--cta);color:#fff;font-size:.9rem;
  flex-shrink:0;transition:background .2s;
}
.sa-form button:hover{background:#000}
.sa-foot{
  padding:.35rem 1rem .7rem;font-size:.68rem;color:var(--ink-3);text-align:center;
}
@media (max-width:480px){
  .sa-panel{right:.8rem;width:calc(100vw - 1.6rem)}
}

/* --- missing media ----------------------------------------------------
   app.js stamps [data-missing] on any <img> whose file fails to load, and on
   the frame around it, so an absent asset collapses instead of showing a
   broken-image icon. */
[data-missing]{display:none !important}