/* ==========================================================================
   Ankai Automation — Design System
   Hand-authored. No framework, no runtime compiler.

   Palette : corporate navy + steel, sky-blue accent, red reserved for signals.
   Type    : IBM Plex Sans (UI/body) + IBM Plex Mono (technical labels).
             Plex was drawn for an engineering company; the mono cut carries
             protocol names, part codes and specs.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Navy — primary brand ramp */
  --navy-950: #061421;
  --navy-900: #0a2540;   /* primary dark, dark sections */
  --navy-800: #123a5e;
  --navy-700: #1c4e80;   /* brand blue: buttons, links */
  --navy-600: #2b66a0;
  --navy-500: #3b82c4;   /* mid blue */
  --navy-100: #d8e6f5;
  --navy-50:  #eef4fb;

  /* Sky accent. 700/600 are the text-safe steps on light backgrounds;
     400/300 are for dark backgrounds and decoration only. */
  --accent-700: #0369a1;  /* 5.7:1 on white  — links */
  --accent-600: #0284c7;
  --accent-500: #0ea5e9;
  --accent-400: #38bdf8;  /* on navy only */
  --accent-300: #7dd3fc;
  --accent-50:  #e8f6fe;

  /* Signals — used sparingly and only to mean something */
  --signal:      #ef4444;
  --signal-ok:   #10b981;
  --signal-warn: #f59e0b;

  /* Neutrals */
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;   /* 7.4:1 — body copy */
  --ink-500: #64748b;   /* 4.8:1 — smallest text that still passes AA */
  --ink-400: #94a3b8;   /* decorative only, never body text */
  --ink-300: #cbd5e1;
  --line:      #e2e8f0;
  --line-soft: #f1f5f9;
  --bg:      #f8fafc;
  --surface: #ffffff;

  /* Gradients */
  --navy-grad:   linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 100%);
  --accent-grad: linear-gradient(120deg, var(--navy-700) 0%, var(--accent-500) 55%, var(--navy-700) 100%);

  /* Elevation */
  --sh-sm: 0 1px 2px rgba(10, 37, 64, .06), 0 2px 8px rgba(10, 37, 64, .04);
  --sh-md: 0 4px 12px rgba(10, 37, 64, .07), 0 12px 32px rgba(10, 37, 64, .07);
  --sh-lg: 0 12px 28px rgba(10, 37, 64, .09), 0 32px 72px rgba(10, 37, 64, .11);
  --sh-accent: 0 12px 34px rgba(56, 189, 248, .28);

  /* Geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Rhythm */
  --shell: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.25rem, 5.5vw, 5rem);
  --nav-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --- 2. Reset & base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-600);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Faint engineering grid, replaces the old dot texture */
.blueprint {
  background-image:
    linear-gradient(rgba(10, 37, 64, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 37, 64, .028) 1px, transparent 1px);
  background-size: 46px 46px;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--line-soft); }

h1, h2, h3, h4, h5 {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--ink-900);
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  font-weight: 600;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.6vw, 4rem);    font-weight: 600; letter-spacing: -.032em; }
h2 { font-size: clamp(1.8rem, 3.9vw, 2.7rem);  font-weight: 600; letter-spacing: -.028em; }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 600; }
h4 { font-size: clamp(1.05rem, 1.8vw, 1.22rem); font-weight: 600; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }
:is(p, li) { text-wrap: pretty; }

a { color: var(--accent-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-800); }

strong { color: var(--ink-900); font-weight: 600; }

::selection { background: var(--navy-100); color: var(--navy-900); }

:focus-visible {
  outline: 3px solid var(--accent-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-900); color: #fff;
  padding: .85rem 1.4rem; border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- 3. Layout ----------------------------------------------------------- */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.shell-wide { width: min(100% - (var(--gutter) * 2), 1400px); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.section--surface { background: var(--surface); }
/* Tinted band: breaks up long runs of white so sections read as distinct
   without needing another divider rule. */
.section--tint {
  background: linear-gradient(180deg, var(--navy-50), var(--bg));
  border-block: 1px solid var(--line);
}
.section--dark { background: var(--navy-grad); color: #c8dcef; }
.section--dark :is(h1, h2, h3, h4) { color: #fff; }
.section--dark p { color: #a9c6e0; }
.section--dark a { color: var(--accent-300); }

/* auto-fill rather than auto-fit: a short final row keeps the same column
   width as the rows above instead of stretching to fill, which is what made
   5- and 7-item grids look lopsided. */
.grid { display: grid; gap: clamp(1.1rem, 2.2vw, 1.6rem); align-items: stretch; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
/* Only carries the 4-step protocol row, so it splits 2+2 on tablet rather
   than 3+1. */
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 64rem) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Explicit column counts where the item count is known and a fluid track
   would leave a ragged final row (4 items landing 3+1, 8 landing 5+3). */
.grid-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-quad,
.grid-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .grid-five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .grid-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 26rem) {
  .grid-pair, .grid-quad, .grid-five { grid-template-columns: 1fr; }
}

.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.1fr .9fr; }
}

.center { text-align: center; }

/* --- 4. Type helpers ----------------------------------------------------- */
/* Technical microcopy uses the mono cut — protocols, codes, labels. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem; font-weight: 500; letter-spacing: .17em;
  text-transform: uppercase; color: var(--accent-700);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; width: 1.6rem; height: 2px; border-radius: 2px;
  background: var(--accent-500); flex: none;
}
.eyebrow--center { justify-content: center; }
/* accent-700 is tuned for light backgrounds; on navy it drops to 2.5:1, so
   dark contexts step up to accent-300 (8.8:1). */
.section--dark .eyebrow, .hero .eyebrow { color: var(--accent-300); }
.section--dark .eyebrow::before, .hero .eyebrow::before { background: var(--accent-400); }

.lede { font-size: clamp(1.06rem, 1.5vw, 1.2rem); color: var(--ink-600); line-height: 1.75; }
.muted { color: var(--ink-600); }
.small { font-size: .9rem; }
.micro {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-500);
}

.text-accent { color: var(--accent-700); }

.ink-gradient {
  color: var(--navy-700);
}
@supports (background-clip: text) {
  .ink-gradient {
    background: linear-gradient(120deg, var(--navy-800), var(--accent-600));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

.section-head { max-width: 46rem; margin: 0 0 clamp(1.9rem, 3.2vw, 2.6rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.rule { height: 3px; width: 4rem; border-radius: 3px; background: var(--accent-500); margin: 1.4rem 0 0; }
.section-head--center .rule { margin-inline: auto; }

/* --- 5. Buttons ---------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy-700);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .9rem 1.8rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: .82rem; font-weight: 600; line-height: 1;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn--primary { box-shadow: var(--sh-md); }
.btn--primary:hover { background: var(--navy-800); box-shadow: 0 14px 32px rgba(28, 78, 128, .32); }

.btn--accent { --btn-bg: var(--accent-600); }
.btn--accent:hover { --btn-bg: var(--accent-500); box-shadow: var(--sh-accent); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--navy-700);
  border-color: var(--ink-300);
}
.btn--ghost:hover { --btn-bg: var(--navy-700); --btn-fg: #fff; border-color: var(--navy-700); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--navy-900); }
.btn--light:hover { --btn-bg: var(--accent-300); }

.btn--lg { padding: 1.1rem 2.2rem; font-size: .86rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-700); text-decoration: none;
}
.link-arrow svg { transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* --- 6. Cards ------------------------------------------------------------ */
/* Cards are flex columns filling their grid cell, so every card in a row ends
   at the same height and anything marked .card__foot sits flush at the bottom.
   That is what makes the rows read as symmetric. */
.card {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  position: relative;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
              border-color .3s ease;
}
.card__title { font-size: 1.3rem; margin-bottom: .5rem; }
.card__foot {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.card__foot--plain { border-top: 0; padding-top: 1.5rem; margin-bottom: 0; }
.card--lift:hover {
  transform: translateY(-5px);
  border-color: var(--navy-500);
  box-shadow: var(--sh-lg);
}
.card--flush { padding: 0; overflow: hidden; }
.card--accent { border-top: 3px solid var(--accent-500); }

/* One ratio for every product tile. Photography is contained rather than
   cropped — these are product shots in varying portrait and landscape
   formats, and cover would slice the tall standees in half. Contain keeps
   each product whole while every tile stays exactly the same height. */
.card__media {
  aspect-ratio: 4 / 3; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #f4f7fa, #e6edf4);
  border-bottom: 1px solid var(--line);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 1.15rem;
  background: none;
  transition: transform .6s var(--ease-out);
}
.card--lift:hover .card__media img { transform: scale(1.04); }
.card__media--glyph { color: var(--navy-700); }
.icon-xl { width: 2.6rem; height: 2.6rem; }
.card__body { padding: clamp(1.35rem, 2.3vw, 1.85rem); }

.card__icon {
  width: 2.9rem; height: 2.9rem; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--navy-50); color: var(--navy-700);
  border: 1px solid var(--navy-100);
  margin-bottom: 1.2rem;
  transition: background-color .3s ease, color .3s ease;
}
.card--lift:hover .card__icon { background: var(--navy-700); color: #fff; }

/* Spec list.
   The marker is absolutely positioned rather than a grid column: these items
   mix an inline <strong> label with a following text node, and as grid items
   those landed in separate columns, which threw the label to the right. */
.spec { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.spec li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--ink-600);
}
.spec li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-500);
}
.spec li strong { color: var(--ink-900); font-weight: 600; }

/* Chips */
.chip {
  display: inline-block;
  padding: .3rem .7rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .69rem; font-weight: 500; letter-spacing: .04em;
  color: var(--ink-600); background: var(--line-soft);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.chip--accent { background: var(--accent-50); color: var(--accent-700); border-color: #bae6fd; }
.chip--navy { background: var(--navy-700); color: #fff; border-color: transparent; }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }

/* --- 7. Navigation ------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--nav-h);
  background: rgba(248, 250, 252, .85);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--line);
  transition: height .3s var(--ease), box-shadow .3s ease, background-color .3s ease;
}
.nav.is-stuck {
  height: 62px;
  box-shadow: 0 6px 24px rgba(10, 37, 64, .08);
  background: rgba(255, 255, 255, .94);
}
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* The wordmark artwork already contains "Ankai" and "AUTOMATION" locked up and
   optically centred, so no type is set beside it — the image is the lockup. */
.brand {
  display: inline-flex; align-items: flex-start; gap: .12rem;
  text-decoration: none; flex: none;
  transition: transform .35s var(--ease);
}
.brand:hover { transform: translateY(-1px); }
/* Sized to sit at the same visual weight as the reference site's mark:
   ~50px tall, left-aligned to the container edge, vertically centred. */
.brand__logo {
  height: 50px; width: auto; background: none;
  transition: height .3s var(--ease);
}
.nav.is-stuck .brand__logo { height: 40px; }
.brand__tm {
  font-size: .6rem; font-weight: 600; line-height: 1;
  color: var(--ink-500); margin-top: .35rem;
  transition: color .25s ease;
}
.footer .brand__logo { height: 58px; }

/* Two tonal variants of the same mark. The dark one is the default; the light
   one is swapped in only while the bar is transparent over the dark hero. */
.brand__img { display: block; }
.brand__img--light { display: none; }
.nav--overlay:not(.is-stuck) .brand__img--dark { display: none; }
.nav--overlay:not(.is-stuck) .brand__img--light { display: block; }

.nav__links { display: none; align-items: center; gap: 1.7rem; }
@media (min-width: 64rem) { .nav__links { display: flex; } }

.nav__link {
  position: relative; padding: .4rem 0;
  font-size: .82rem; font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-600); text-decoration: none;
  transition: color .25s ease;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px; border-radius: 2px;
  background: var(--accent-500);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--navy-900); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after {
  transform: scaleX(1); transform-origin: left;
}

.nav__toggle {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--navy-800); cursor: pointer;
}
@media (min-width: 64rem) { .nav__toggle { display: none; } }

.nav__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: 100%; transform: scaleX(var(--progress, 0)); transform-origin: left;
  background: var(--accent-500);
}

/* --- 7b. Overlay nav ------------------------------------------------------
   On the home page the bar floats transparently over the animated hero so the
   circuit field runs edge to edge behind it, then resolves into the solid bar
   on scroll. Only applied where a dark hero actually sits underneath. */
.nav--overlay:not(.is-stuck) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav--overlay:not(.is-stuck) .nav__link { color: #b9d3ea; }
.nav--overlay:not(.is-stuck) .nav__link:hover,
.nav--overlay:not(.is-stuck) .nav__link[aria-current="page"] { color: #fff; }
.nav--overlay:not(.is-stuck) .brand__tm { color: #8fb4d4; }
.nav--overlay:not(.is-stuck) .status-pill {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
}
.nav--overlay:not(.is-stuck) .status-pill span { color: #b9d3ea; }
.nav--overlay:not(.is-stuck) .nav__toggle {
  color: #fff; border-color: rgba(255, 255, 255, .28);
}
.nav--overlay:not(.is-stuck) .btn--primary {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
  box-shadow: none;
}
.nav--overlay:not(.is-stuck) .btn--primary:hover {
  background: var(--accent-600); border-color: transparent;
}

.drawer {
  position: fixed; inset: 0; z-index: 110;
  background: var(--surface);
  display: flex; flex-direction: column; justify-content: center;
  gap: .3rem; padding: 5rem var(--gutter) 3rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .45s var(--ease), visibility .45s;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer__link {
  font-size: clamp(1.5rem, 6.5vw, 2.1rem); font-weight: 600;
  letter-spacing: -.025em;
  color: var(--ink-900); text-decoration: none;
  padding: .45rem 0; border-bottom: 1px solid var(--line-soft);
}
.drawer__link:hover, .drawer__link[aria-current="page"] { color: var(--accent-700); }
.drawer__close {
  position: absolute; top: 1.5rem; right: var(--gutter);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--ink-900); cursor: pointer;
}
.drawer__foot { margin-top: 2rem; display: grid; gap: .75rem; }

body.is-locked { overflow: hidden; }

.status-pill {
  display: none; align-items: center; gap: .55rem;
  padding: .4rem .85rem; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
}
@media (min-width: 80rem) { .status-pill { display: inline-flex; } }
.status-pill span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .6rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-500);
}
.pulse {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--signal-ok);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ==========================================================================
   8. HERO — animated circuit field
   Everything below is CSS only: no video, no canvas, no image download.
   Layers, back to front:
     .hero__field   PCB trace + node tile, slow 26s zoom/drift (Ken Burns)
     .hero__sweep   diagonal light band crossing the field = data flow
     .hero__particles  five drifting nodes
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 5.5rem));
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  background: var(--navy-grad);
  color: #c8dcef;
  isolation: isolate;
}
.hero :is(h1, h2, h3) { color: #fff; }

/* Depth glows */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(52rem 32rem at 78% -6%, rgba(56, 189, 248, .20), transparent 62%),
    radial-gradient(44rem 30rem at 2% 8%,  rgba(28, 78, 128, .55),  transparent 64%);
}

/* PCB trace field */
.hero__field {
  position: absolute; inset: -8%; z-index: -2;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%2338bdf8' stroke-width='1.1' opacity='.42'%3E%3Cpath d='M20 0v54l42 42h68l40 40v124'/%3E%3Cpath d='M0 44h72l34 34'/%3E%3Cpath d='M260 88h-74l-42 42v130'/%3E%3Cpath d='M130 0v36l64 64h66'/%3E%3Cpath d='M0 196h58l44-44'/%3E%3Cpath d='M66 260v-64l-32-32H0'/%3E%3Cpath d='M196 260v-40l30-30h34'/%3E%3C/g%3E%3Cg fill='%2338bdf8' opacity='.65'%3E%3Ccircle cx='20' cy='54' r='3'/%3E%3Ccircle cx='130' cy='96' r='3'/%3E%3Ccircle cx='170' cy='136' r='3'/%3E%3Ccircle cx='72' cy='44' r='3'/%3E%3Ccircle cx='186' cy='88' r='3'/%3E%3Ccircle cx='58' cy='196' r='3'/%3E%3Ccircle cx='194' cy='100' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px 260px;
  animation: kenBurns 26s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.5%, -1.5%, 0); }
}

/* Data-flow sweep */
.hero__sweep {
  position: absolute; inset: -40% -60%; z-index: -2;
  background: linear-gradient(104deg,
    transparent 38%,
    rgba(125, 211, 252, .10) 47%,
    rgba(186, 230, 253, .17) 50%,
    rgba(125, 211, 252, .10) 53%,
    transparent 62%);
  animation: sweep 11s linear infinite;
}
@keyframes sweep {
  from { transform: translate3d(-32%, 0, 0); }
  to   { transform: translate3d(32%, 0, 0); }
}

/* Drifting nodes */
.hero__particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__particles span {
  position: absolute; display: block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-300);
  box-shadow: 0 0 12px 2px rgba(56, 189, 248, .55);
  opacity: .55;
  animation: float 8s ease-in-out infinite;
}
.hero__particles span:nth-child(1) { top: 18%; left: 12%; animation-duration: 7s;  animation-delay: 0s; }
.hero__particles span:nth-child(2) { top: 68%; left: 22%; animation-duration: 9s;  animation-delay: 1.2s; }
.hero__particles span:nth-child(3) { top: 32%; left: 68%; animation-duration: 6.5s; animation-delay: 2.4s; }
.hero__particles span:nth-child(4) { top: 78%; left: 78%; animation-duration: 10s; animation-delay: .6s; }
.hero__particles span:nth-child(5) { top: 12%; left: 86%; animation-duration: 8.5s; animation-delay: 3s; }
@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0)      rotate(0deg); }
  33%      { transform: translate3d(6px, -16px, 0) rotate(2deg); }
  66%      { transform: translate3d(-5px, 11px, 0) rotate(-1deg); }
}

/* Headline shimmer — a light band travelling across the accent words */
.shimmer { color: var(--accent-300); }
@supports (background-clip: text) {
  .shimmer {
    background: linear-gradient(100deg,
      #7dd3fc 18%, #ffffff 42%, #bae6fd 52%, #7dd3fc 76%);
    background-size: 240% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: shimmer 6s ease-in-out infinite;
  }
}
@keyframes shimmer {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

.hero__title { margin-bottom: 1.4rem; }
.hero__lede {
  max-width: 34rem; font-size: clamp(1.03rem, 1.5vw, 1.18rem);
  color: #a9c6e0; line-height: 1.75;
  border-left: 2px solid var(--accent-500); padding-left: 1.3rem;
  margin-bottom: 2.2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.hero .link-arrow { color: var(--accent-300); }

.trust {
  display: flex; flex-wrap: wrap; gap: 1rem 2.2rem;
  align-items: center; margin-top: 2.8rem;
  padding-top: 1.8rem; border-top: 1px solid rgba(125, 211, 252, .2);
}
.trust__item { display: flex; align-items: center; gap: .6rem; }
.trust__item svg { color: var(--accent-400); flex: none; }
.trust__item span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: #a9c6e0;
}

/* Staggered entrance for hero copy (bkec-style fade-up on load) */
.hero-in { opacity: 0; transform: translateY(18px); animation: heroIn .9s var(--ease-out) forwards; }
.hero-in:nth-child(1) { animation-delay: .05s; }
.hero-in:nth-child(2) { animation-delay: .18s; }
.hero-in:nth-child(3) { animation-delay: .31s; }
.hero-in:nth-child(4) { animation-delay: .44s; }
.hero-in:nth-child(5) { animation-delay: .57s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* Scroll cue */
.scroll-cue {
  display: none; margin: 3rem auto 0; width: max-content;
  color: #7d9fc0; text-align: center;
}
@media (min-width: 62rem) { .scroll-cue { display: block; } }
.scroll-cue span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  display: block; margin-bottom: .5rem;
}
.scroll-cue svg { margin-inline: auto; animation: bounce 2.2s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Instrument panel visual, right of the hero copy */
.core { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
@media (max-width: 62rem) { .core { display: none; } }
.core__ring {
  position: absolute; border-radius: 50%;
  animation: spin var(--dur, 28s) linear infinite;
}
.core__ring:nth-child(1) { inset: 2%;  border: 1px dashed rgba(125, 211, 252, .35); --dur: 40s; }
.core__ring:nth-child(2) { inset: 16%; border: 1px solid rgba(56, 189, 248, .22);  --dur: 26s; animation-direction: reverse; }
.core__ring:nth-child(3) { inset: 30%; border: 1px solid rgba(125, 211, 252, .45); --dur: 18s; }
@keyframes spin { to { transform: rotate(360deg); } }

.core__glow {
  position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, .45), transparent 68%);
  filter: blur(30px); animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: .5; }
  50%      { transform: scale(1.3);  opacity: .85; }
}
.core__chip {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  width: clamp(6.5rem, 12vw, 9rem); aspect-ratio: 1;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(125, 211, 252, .4);
  border-radius: var(--r-xl);
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  color: var(--accent-300);
  transition: transform .5s var(--ease);
}
.core:hover .core__chip { transform: scale(1.06); }
.core__node {
  position: absolute; display: grid; place-items: center;
  width: 3rem; height: 3rem;
  background: rgba(10, 37, 64, .72);
  border: 1px solid rgba(125, 211, 252, .35);
  border-radius: var(--r-md);
  backdrop-filter: blur(6px);
  color: var(--accent-300);
  animation: float 7s ease-in-out infinite;
}
.core__node:nth-of-type(1) { top: 4%;    left: 8%;  animation-delay: 0s; }
.core__node:nth-of-type(2) { bottom: 12%; right: 3%; animation-delay: 1.6s; }
.core__node:nth-of-type(3) { top: 20%;   right: 6%;  animation-delay: 3.2s; }
.core__node:nth-of-type(4) { bottom: 3%;  left: 20%; animation-delay: 4.8s; }

/* --- 9. Stats ------------------------------------------------------------ */
.stats {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__value {
  font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 600;
  letter-spacing: -.035em; color: var(--ink-900); margin: 0 0 .45rem;
  font-variant-numeric: tabular-nums;
}
.section--dark .stat__value { color: #fff; }
.stat__label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-400); margin: 0;
}

/* --- 10. Logo marquee ---------------------------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: 3.2rem; width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee__item {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .88rem; font-weight: 500; letter-spacing: .02em;
  color: var(--ink-500); white-space: nowrap; padding-block: .5rem;
}

/* --- 11. Forms ----------------------------------------------------------- */
.field { display: grid; gap: .45rem; }
.field label, .label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .69rem; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-500);
}
.input, .select, .textarea {
  width: 100%; padding: .85rem 1rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: .97rem; font-weight: 400; line-height: 1.5; color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--ink-300); border-radius: var(--r-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent-600);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, .16);
}
.textarea { resize: vertical; min-height: 8rem; }
.select {
  appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.file-drop {
  display: grid; place-items: center; gap: .5rem;
  padding: 1.7rem; text-align: center; cursor: pointer;
  border: 1px dashed var(--ink-300); border-radius: var(--r-sm);
  background: var(--line-soft);
  transition: border-color .2s ease, background-color .2s ease;
}
.file-drop:hover { border-color: var(--accent-500); background: var(--accent-50); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.form-note { font-size: .8rem; color: var(--ink-500); }

.form-status {
  padding: .9rem 1.1rem; border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 500;
  border: 1px solid transparent;
}
.form-status[data-state="ok"]  { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.form-status[data-state="err"] { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.form-status[hidden] { display: none; }

/* --- 12. FAQ ------------------------------------------------------------- */
.faq { display: grid; gap: .7rem; }
.faq__item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq__item[open] { border-color: var(--navy-500); box-shadow: var(--sh-md); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.1rem 1.35rem; cursor: pointer; list-style: none;
  font-size: 1.02rem; font-weight: 600; line-height: 1.5;
  color: var(--ink-900); letter-spacing: -.012em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--accent-600); border-bottom: 2px solid var(--accent-600);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__a { padding: 0 1.35rem 1.3rem; color: var(--ink-600); }
.faq__a p:first-child { margin-top: 0; }

/* --- 13. Prose ----------------------------------------------------------- */
.prose { max-width: 44rem; font-size: 1.08rem; line-height: 1.8; color: var(--ink-600); }
.prose > * + * { margin-top: 1.4rem; }
.prose h2 {
  font-size: clamp(1.4rem, 2.7vw, 1.9rem); margin-top: 3rem; margin-bottom: 0;
  padding-left: 1rem; border-left: 3px solid var(--accent-500);
}
.prose h3 { font-size: clamp(1.12rem, 2vw, 1.32rem); margin-top: 2.2rem; margin-bottom: 0; color: var(--navy-800); }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: .7rem; }
.prose li::marker { color: var(--accent-600); font-weight: 600; }
.prose blockquote {
  margin: 2rem 0; padding: 1.3rem 1.5rem;
  background: var(--navy-50); border-left: 3px solid var(--navy-700);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 1.06rem; color: var(--navy-900); font-weight: 500;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.prose :is(th, td) { padding: .8rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.prose th {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .76rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy-900); background: var(--navy-50);
}
.table-scroll { overflow-x: auto; }

/* --- 14. Breadcrumbs ----------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding: 0; margin: 0 0 1.5rem; list-style: none; }
.crumbs li {
  display: flex; align-items: center; gap: .45rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .04em; color: var(--ink-500);
}
.crumbs li + li::before { content: "/"; color: var(--ink-300); }
.crumbs a { color: var(--ink-500); text-decoration: none; }
.crumbs a:hover { color: var(--accent-700); }

/* --- 15. Footer ---------------------------------------------------------- */
.footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: clamp(3.5rem, 7vw, 5rem) 2.5rem; }
.footer__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.footer__title {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-700); margin: 0 0 1.2rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.footer__list a { font-size: .92rem; color: var(--ink-600); text-decoration: none; }
.footer__list a:hover { color: var(--accent-700); }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
}
.footer__bottom p { margin: 0; font-size: .85rem; color: var(--ink-500); }

.social { display: flex; gap: .55rem; }
.social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--navy-800); background: var(--surface);
  transition: background-color .25s ease, color .25s ease, transform .25s var(--ease), border-color .25s ease;
}
.social a:hover { background: var(--navy-700); color: #fff; border-color: var(--navy-700); transform: translateY(-2px); }

.badge-iso {
  display: inline-block; padding: .38rem .8rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem; font-weight: 500; letter-spacing: .07em;
  color: #fff; background: var(--navy-700);
  border-radius: var(--r-sm);
}

.contact-line { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .95rem; }
.contact-line svg { color: var(--accent-600); flex: none; margin-top: .25rem; }
.contact-line a, .contact-line span { font-size: .93rem; color: var(--ink-600); text-decoration: none; font-style: normal; }
.contact-line a:hover { color: var(--accent-700); }

.map-frame {
  width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); filter: grayscale(1); transition: filter .5s ease;
}
.map-frame:hover { filter: grayscale(0); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- 16. Floating WhatsApp CTA ------------------------------------------- */
.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .78rem 1.1rem;
  background: #1faa53; color: #fff; text-decoration: none;
  border-radius: var(--r-pill);
  box-shadow: 0 10px 26px rgba(31, 170, 83, .36);
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 14px 32px rgba(31, 170, 83, .46); }
.wa-float span { display: none; }
@media (min-width: 30rem) { .wa-float span { display: inline; } }

/* --- 17. Scroll reveal --------------------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --- 18. Misc ------------------------------------------------------------ */
.icon { width: 1.25em; height: 1.25em; stroke-width: 1.75; flex: none; }
.icon-lg { width: 1.6rem; height: 1.6rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
hr.divider { border: 0; border-top: 1px solid var(--line); margin-block: clamp(2.5rem, 5vw, 4rem); }


/* --- 21. Answer-first / AEO components ----------------------------------- */
/* Every H2 on an informational page is followed immediately by a 40-60 word
   direct answer. That is the passage shape featured snippets and generative
   engines extract, so it is a distinct style rather than a plain paragraph. */
.answer-lede {
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--ink-700);
  max-width: 46rem;
}
h1 + .answer-lede, h2 + .answer-lede { margin-top: .65rem; }

/* Table of contents — how passage-level snippets get won */
.toc {
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-radius: var(--r-md);
  padding: 1.15rem 1.4rem;
  margin-bottom: 2.25rem;
}
.toc__title {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy-800);
  margin: 0 0 .6rem;
}
.toc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.toc li { font-size: .93rem; }
.toc a { color: var(--accent-700); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Specification table. A real <table> rather than a div grid: AI extractors
   parse table markup far more reliably, and these rows are the content that
   actually gets quoted. */
.spec-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.spec-table th[scope="row"] {
  width: 38%;
  text-align: left;
  font-weight: 600;
  color: var(--ink-900);
  background: var(--line-soft);
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec-table td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-600);
  vertical-align: top;
}
.spec-table tr:last-child :is(th, td) { border-bottom: 0; }

/* Unverified value. Deliberately conspicuous: an unfilled spec must never be
   mistaken for a published figure, and the build harness blocks release while
   any of these remain. */
.pending {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .78rem;
  color: #92400e;
  background: #fef3c7;
  border: 1px dashed #f59e0b;
  border-radius: 4px;
  padding: .1rem .4rem;
  word-break: break-word;
}

/* Glossary — DefinedTermSet entries */
.glossary__item { padding-block: 1.35rem; border-bottom: 1px solid var(--line); }
.glossary__item:last-child { border-bottom: 0; }
.glossary__item h2 { font-size: 1.15rem; margin-bottom: .35rem; }
.glossary dfn, .prose dfn {
  font-style: normal;
  font-weight: 600;
  border-bottom: 2px solid var(--accent-300);
}

/* Entity co-occurrence strip. Keeps "Ankai Automation" adjacent to Pune,
   founded 2019 and ISO 9001:2015 on every page, which is how a model learns
   the entity boundary against Ankai Auto of Aurangabad. */
.entity-line {
  margin-top: 1.5rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  color: var(--ink-500);
  letter-spacing: .04em;
}
.hero .entity-line { border-top-color: rgba(125, 211, 252, .2); color: #8fb4d4; }

/* NAP block */
.nap { font-style: normal; }
.nap .contact-line span { line-height: 1.6; }

/* --- 19. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .hero-in { opacity: 1; transform: none; }
  .hero__field, .hero__sweep, .hero__particles { animation: none; }
  .shimmer { animation: none; }
}

/* --- 20. Print ----------------------------------------------------------- */
@media print {
  .nav, .drawer, .wa-float, .hero__field, .hero__sweep, .hero__particles,
  .scroll-cue, .footer__grid > :last-child { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { background: #fff; color: #000; }
  .hero :is(h1, h2, h3) { color: #000; }
  .reveal, .hero-in { opacity: 1; transform: none; }
}