@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   CAD2ERP - Design System
   White canvas · Electric-blue blocks · Tech-grade motion
   by Cadkunde
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Blue scale */
  --blue-50:  #eef4ff;
  --blue-100: #dbe7ff;
  --blue-200: #b9d0ff;
  --blue-300: #8bb0ff;
  --blue-400: #5a86ff;
  --blue-500: #1b5bff;   /* primary electric blue */
  --blue-600: #0e42d6;
  --blue-700: #0a31aa;
  --blue-800: #0a2680;
  --blue-900: #0a1f5c;

  /* Navy / ink */
  --navy-900: #050e2e;
  --navy-800: #071633;
  --navy-700: #0a1f44;
  --navy-600: #102a5c;

  /* Cyan accent */
  --cyan-300: #7bf1ff;
  --cyan-400: #2fdcff;
  --cyan-500: #00c2f5;

  /* Neutrals */
  --white: #ffffff;
  --paper: #f6f9ff;       /* faint blue-tinted off white */
  --mist:  #eef3fb;
  --line:  #e3ebf7;
  --ink-900: #0b1530;
  --ink-700: #28324d;
  --ink-500: #5a667f;
  --ink-400: #8a93a8;

  /* Functional */
  --good-400: #34e3b0;
  --good-500: #12c98c;
  --warn-500: #ff7a59;

  /* Gradients */
  --grad-blue:  linear-gradient(135deg, #2f7bff 0%, #1b56e6 100%);
  --grad-tech:  linear-gradient(120deg, #2f7bff 0%, #21d4fd 100%);
  --grad-navy:  linear-gradient(158deg, #3f8bff 0%, #1f59e0 100%);
  --grad-glow:  radial-gradient(60% 60% at 50% 0%, rgba(47,220,255,.35), transparent 70%);
  --grad-sheen: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(10,31,68,.06), 0 2px 6px rgba(10,31,68,.06);
  --sh-md: 0 10px 30px -12px rgba(10,31,68,.25);
  --sh-lg: 0 28px 60px -20px rgba(10,31,68,.35);
  --sh-blue: 0 22px 48px -16px rgba(27,91,255,.5);
  --sh-cyan: 0 0 0 1px rgba(47,220,255,.4), 0 12px 40px -8px rgba(0,194,245,.45);

  /* Radius */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1200px;
  --container-wide: 1340px;
  --nav-h: 76px;

  /* Motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }
::selection { background: var(--blue-500); color: #fff; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: var(--ink-900); }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
p  { color: var(--ink-700); }

/* ---------- 3. Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.container--wide { max-width: var(--container-wide); }
.section { position: relative; padding: clamp(60px, 7.5vw, 104px) 0; }
.section--tight { padding: clamp(44px, 5vw, 72px) 0; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.maxw-720 { max-width: 720px; }
.maxw-620 { max-width: 620px; }
.maxw-560 { max-width: 560px; }
.grid { display: grid; gap: 24px; }
.flex { display: flex; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.wrap { flex-wrap: wrap; }
.relative { position: relative; }

@media (min-width: 720px){
  .cols-2 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px){
  .cols-4 { grid-template-columns: repeat(4, 1fr); }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px,5vw,72px); }
  .split--wide-right { grid-template-columns: .9fr 1.1fr; }
  .split--wide-left  { grid-template-columns: 1.1fr .9fr; }
}

/* ---------- 4. Section eyebrow / headings ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-600);
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
}
.eyebrow--light { color: var(--cyan-300); background: rgba(47,220,255,.1); border-color: rgba(47,220,255,.25); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 4px rgba(27,91,255,.18); }
.eyebrow--light .dot { background: var(--cyan-400); box-shadow: 0 0 0 4px rgba(47,220,255,.2); }

.section-head { max-width: 760px; }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin: 18px 0 0; }
.section-head .lead { margin-top: 18px; font-size: 1.12rem; color: var(--ink-500); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink-500); line-height: 1.65; }

.text-grad { background: var(--grad-tech); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-blue { color: var(--blue-600); }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--blue-500);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  padding: 15px 26px; border-radius: var(--r-pill);
  color: #fff; background: var(--btn-bg);
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out), background .3s;
  will-change: transform; isolation: isolate; overflow: hidden;
  box-shadow: var(--sh-blue);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-sheen); transform: translateX(-120%); transition: transform .7s var(--ease-out);
}
.btn:hover { transform: translateY(-3px); }
.btn:hover::before { transform: translateX(120%); }
.btn:active { transform: translateY(-1px) scale(.99); }
.btn .arrow { transition: transform .35s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--lg { padding: 18px 34px; font-size: 1.06rem; }
.btn--tech { background: linear-gradient(120deg, #1b5bff 0%, #0e8fd6 100%); box-shadow: var(--sh-cyan); color: #fff; }
.btn--ghost {
  background: transparent; color: var(--blue-600); box-shadow: inset 0 0 0 1.5px var(--blue-200);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--blue-500); background: var(--blue-50); }
.btn--white { background: #fff; color: var(--blue-700); box-shadow: var(--sh-md); }
.btn--on-dark.btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.btn--on-dark.btn--ghost:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; color: var(--blue-600);
}
.link-arrow svg { transition: transform .3s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- 6. Navbar ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .4s, box-shadow .4s, backdrop-filter .4s;
}
.nav.scrolled {
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 0 rgba(10,31,68,.07), 0 12px 30px -22px rgba(10,31,68,.5);
}
.nav__inner { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: 24px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; color: var(--ink-900); }
.brand__mark { width: auto; height: 40px; flex: none; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(10,31,68,.22)); transition: transform .5s var(--ease-spring); }
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.06); }
.footer .brand__mark { filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
.brand b { color: var(--blue-600); }
.nav__links { display: none; align-items: center; gap: 4px; }
.nav__links a {
  position: relative; font-weight: 500; font-size: .96rem; color: var(--ink-700);
  padding: 9px 14px; border-radius: var(--r-pill); transition: color .25s, background .25s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--grad-tech); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
.nav__links a:hover { color: var(--blue-600); }
.nav__links a:hover::after,
.nav__links a.active::after { transform: scaleX(1); }
.nav__links a.active { color: var(--blue-600); }
.nav__cta { display: none; }
.nav__burger { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; border-radius: 12px; }
.nav__burger span { width: 24px; height: 2px; background: var(--ink-900); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav.open .nav__burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2){ opacity: 0; }
.nav.open .nav__burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1040px){
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__burger { display: none; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  padding: 30px 24px; display: flex; flex-direction: column; gap: 6px;
  transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
.nav.open + .drawer { opacity: 1; transform: none; pointer-events: auto; }
.drawer a:not(.btn) { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; padding: 14px 8px; border-bottom: 1px solid var(--line); color: var(--ink-900); }
.drawer .btn { justify-content: center; }
.drawer .btn { margin-top: 20px; }

/* ---------- 7. Generic cards & blue blocks ---------- */
.card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px;
  box-shadow: var(--sh-sm); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--blue-200); }

/* The signature blue block */
.block-blue {
  position: relative; overflow: hidden;
  background: var(--grad-blue); color: #fff; border-radius: var(--r-lg);
  padding: 38px; box-shadow: var(--sh-blue);
}
.block-blue h2, .block-blue h3 { color: #fff; }
.block-blue p { color: rgba(255,255,255,.84); }
.block-navy { background: var(--grad-navy); color: #fff; border-radius: var(--r-lg); }
.block-navy h2, .block-navy h3 { color: #fff; }
.block-navy p { color: rgba(228,236,255,.74); }

/* Soft luminous depth inside blue/navy blocks (replaces the old grid) */
.bp-grid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(75% 90% at 88% -12%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(60% 80% at 8% 112%, rgba(0,194,245,.22), transparent 58%);
}

/* Dark section */
.section-dark { background: var(--grad-navy); color: #fff; position: relative; overflow: hidden; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(220,230,255,.74); }
/* tint/paper sections are transparent now: the continuous body gradient shows through
   so the whole page reads as one flowing field instead of stacked blocks */
.section-tint { background: transparent; }
.section-paper { background: transparent; }

/* glow orbs */
.orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.orb--blue { background: radial-gradient(circle, rgba(27,91,255,.55), transparent 70%); }
.orb--cyan { background: radial-gradient(circle, rgba(47,220,255,.45), transparent 70%); }

/* ---------- 8. Feature cards ---------- */
.feature {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px 28px; overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .5s, border-color .5s;
}
.feature::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad-tech); opacity: 0; transition: opacity .5s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.feature:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.feature:hover::after { opacity: 1; }
.feature__icon {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-600); margin-bottom: 22px;
  transition: transform .5s var(--ease-spring), background .4s, color .4s;
}
.feature:hover .feature__icon { transform: rotate(-6deg) scale(1.06); background: var(--grad-tech); color: #fff; }
.feature h3 { font-size: 1.24rem; margin-bottom: 10px; }
.feature p { font-size: .98rem; color: var(--ink-500); }
.feature__no { position: absolute; top: 20px; right: 24px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--blue-100); }

/* ---------- 9. Stats ---------- */
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -.03em; }
.stat__num .unit { font-size: .5em; }
.stat__label { margin-top: 10px; font-size: .98rem; color: var(--ink-500); }
.block-navy .stat__label, .block-blue .stat__label, .section-dark .stat__label { color: rgba(220,230,255,.7); }

/* ---------- 10. Pipeline / flow ---------- */
.pipeline { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 900px){ .pipeline { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; } }
.pipe-node {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px;
  text-align: center; box-shadow: var(--sh-sm);
}
.pipe-node--accent { background: var(--grad-blue); color: #fff; border: none; box-shadow: var(--sh-blue); }
.pipe-arrow { display: grid; place-items: center; color: var(--blue-300); }
@media (max-width: 899px){ .pipe-arrow { transform: rotate(90deg); } }

/* ---------- 11. Steps / timeline ---------- */
.steps { display: grid; gap: 20px; counter-reset: step; }
.step {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px;
  transition: transform .4s var(--ease-out), box-shadow .4s, border-color .4s;
}
.step:hover { transform: translateX(6px); box-shadow: var(--sh-md); border-color: var(--blue-200); }
.step__num {
  counter-increment: step; width: 52px; height: 52px; flex: none; border-radius: 14px;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  background: var(--grad-blue); color: #fff; box-shadow: var(--sh-blue);
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: 1.2rem; margin-bottom: 6px; }
.step p { color: var(--ink-500); font-size: .98rem; }

/* vertical connector variant */
.steps--rail { position: relative; }
.steps--rail::before {
  content: ""; position: absolute; left: 51px; top: 30px; bottom: 30px; width: 2px;
  background: linear-gradient(var(--blue-200), var(--blue-200) 60%, transparent);
}

/* ---------- 12. Comparison table ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); border: 1px solid var(--line); }
.compare th, .compare td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--font-display); font-size: 1rem; background: var(--paper); }
.compare thead th.col-pro { background: var(--grad-blue); color: #fff; }
.compare tbody tr:last-child td { border-bottom: none; }
.compare .feat { font-weight: 600; color: var(--ink-900); }
.compare .yes { color: var(--good-500); font-weight: 700; }
.compare .no  { color: var(--ink-400); }
.compare td.col-pro { background: rgba(27,91,255,.04); }
/* horizontal-scroll safety wrapper so the table never overflows the page */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); }
/* scale the comparison table down on small screens so all columns are visible */
@media (max-width: 620px){
  .compare th, .compare td { padding: 12px 10px; font-size: .82rem; }
  .compare thead th { font-size: .82rem; }
  .compare .feat { font-size: .84rem; }
}

/* ---------- 13. Two-column "with / without" ---------- */
.vs { display: grid; gap: 24px; }
@media (min-width: 860px){ .vs { grid-template-columns: 1fr 1fr; } }
.vs__panel { border-radius: var(--r-lg); padding: 32px; }
.vs__panel--bad { background: #fff; border: 1px solid var(--line); }
.vs__panel--good { background: var(--grad-blue); color: #fff; box-shadow: var(--sh-blue); position: relative; overflow: hidden; }
.vs__panel--good h3 { color: #fff; }
.vs__panel h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.vs__list li { display: flex; align-items: flex-start; gap: 13px; padding: 11px 0; border-bottom: 1px dashed rgba(0,0,0,.08); font-size: 1rem; }
.vs__panel--good .vs__list li { border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.92); }
.vs__list li:last-child { border-bottom: none; }
/* checkmark / cross as a soft rounded "checkbox" badge */
.vs__ico { flex: none; width: 25px; height: 25px; border-radius: 8px; display: inline-grid; place-items: center;
  font-size: .82rem; font-weight: 800; line-height: 1; margin-top: 1px; transition: transform .3s var(--ease-spring); }
.vs__panel--bad .vs__ico { background: #fff1ee; color: #ff7a59; box-shadow: inset 0 0 0 1px #ffd9cf; }
.vs__panel--good .vs__ico { background: rgba(255,255,255,.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); }
.vs__list li:hover .vs__ico { transform: scale(1.12) rotate(-4deg); }

/* ---------- 14. Marquee (ERP logos) ---------- */
.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: 56px; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--ink-400); white-space: nowrap; transition: color .3s; }
.marquee__item:hover { color: var(--blue-600); }
.marquee__item .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue-300); }
@keyframes marquee { to { transform: translateX(calc(-50% - 28px)); } }

/* ---------- 15. Calculator ---------- */
.calc { display: grid; gap: 28px; }
@media (min-width: 900px){ .calc { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.calc__controls { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px; box-shadow: var(--sh-md); }
.calc__row { margin-bottom: 26px; }
.calc__row:last-child { margin-bottom: 0; }
.calc__label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-weight: 600; margin-bottom: 14px; }
.calc__value { color: var(--blue-600); font-size: 1.2rem; }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: var(--mist); outline: none; }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--blue-500); box-shadow: var(--sh-md); cursor: pointer; transition: transform .2s; }
.calc input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.calc input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--blue-500); cursor: pointer; }
.calc__result { position: relative; overflow: hidden; background: var(--grad-navy); color: #fff; border-radius: var(--r-lg); padding: 38px; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--sh-lg); }
.calc__result .big { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem,6vw,4rem); line-height: 1; background: var(--grad-tech); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc__chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.calc__chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill); padding: 9px 16px; font-size: .9rem; }
.calc__chip svg { flex: none; opacity: .9; }
/* compact chip row that keeps the three lifecycle pills evenly on one line */
.lc-chips { gap: 7px !important; }
.lc-chips .calc__chip { font-size: .76rem; padding: 7px 11px; white-space: nowrap; }
@media (max-width: 460px){ .lc-chips { gap: 6px !important; } .lc-chips .calc__chip { font-size: .66rem; padding: 6px 8px; } }

/* ---------- 16. Team ---------- */
.team-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; text-align: center; overflow: hidden; transition: transform .45s var(--ease-out), box-shadow .45s; }
.team-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.team-card__avatar { width: 104px; height: 104px; margin: 4px auto 18px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: #fff; background: var(--grad-blue); box-shadow: var(--sh-blue); position: relative; }
.team-card__avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px dashed var(--blue-200); }
.team-card h3 { font-size: 1.18rem; }
.team-card .role { color: var(--blue-600); font-weight: 600; font-size: .92rem; margin-top: 3px; }

/* ---------- 17. FAQ / accordion ---------- */
.faq { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: box-shadow .3s, border-color .3s; }
.faq + .faq { margin-top: 14px; }
.faq[open] { box-shadow: var(--sh-md); border-color: var(--blue-200); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-600); transition: transform .3s, background .3s, color .3s; }
.faq[open] summary .ico { transform: rotate(45deg); background: var(--grad-blue); color: #fff; }
.faq__body { padding: 0 26px 24px; color: var(--ink-500); }

/* ---------- 18. Contact form ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .92rem; margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink-900);
  padding: 14px 16px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: #fff;
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(27,91,255,.12); }
.field textarea { resize: vertical; min-height: 130px; }

/* ---------- 19. Footer ---------- */
.footer { position: relative; background:
    radial-gradient(60% 80% at 88% 0%, rgba(47,220,255,.12), transparent 60%),
    var(--grad-navy);
  color: rgba(255,255,255,.78); overflow: hidden; }
/* glowing accent hairline along the top edge */
.footer::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--cyan-400), var(--blue-400), transparent); opacity: .85; }
.footer::before { content: ""; position: absolute; right: -50px; bottom: -70px; width: 340px; height: 340px;
  background: url('../assets/logos/logo-256.png') no-repeat center / contain; opacity: .06;
  pointer-events: none; z-index: 0; }
.footer .container { position: relative; z-index: 1; }
.footer .brand { font-size: 1.32rem; }
.footer p { color: rgba(255,255,255,.66); line-height: 1.75; }
.footer a { color: rgba(255,255,255,.74); transition: color .25s; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: 44px 32px; padding: clamp(56px, 7vw, 88px) 0 46px; grid-template-columns: 1fr; }
@media (min-width: 760px){ .footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.25fr; gap: 48px 40px; } }
.footer h4 { color: #fff; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; margin-bottom: 20px; display: inline-flex; align-items: center; gap: 9px; }
.footer h4::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: var(--cyan-400); }
.footer__links li { margin-bottom: 13px; }
.footer__links a { position: relative; display: inline-block; }
.footer__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px;
  background: var(--cyan-400); transition: width .3s var(--ease-out); }
.footer__links a:hover::after { width: 100%; }
/* contact column with icons */
.footer__contact li { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.footer__contact .fc-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--cyan-300); margin-top: 1px; }
.footer__contact a, .footer__contact span:not(.fc-ico) { padding-top: 4px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 24px 0; display: flex; flex-wrap: wrap;
  gap: 14px; justify-content: space-between; align-items: center; font-size: .86rem; color: rgba(255,255,255,.55); }

/* ---------- 20. Misc utilities ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: var(--r-pill); background: var(--blue-50); color: var(--blue-700); font-weight: 600; font-size: .9rem; border: 1px solid var(--blue-100); }
.tag--dark { background: rgba(255,255,255,.07); color: #dce6ff; border-color: rgba(255,255,255,.14); }
.divider { height: 1px; background: var(--line); border: none; }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}
.mb-0{margin-bottom:0}

.check-list li { display: flex; gap: 13px; padding: 9px 0; align-items: flex-start; }
.check-list .ck { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-600); margin-top: 1px; }
.block-blue .check-list .ck, .block-navy .check-list .ck, .section-dark .check-list .ck { background: rgba(255,255,255,.14); color: #fff; }

/* big CTA band */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(40px, 4.6vw, 60px) clamp(28px, 6vw, 80px); background: var(--grad-blue); color: #fff; box-shadow: var(--sh-blue); }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: rgba(255,255,255,.85); }

/* page hero base */
.phero { position: relative; padding: calc(var(--nav-h) + 60px) 0 70px; overflow: hidden; }
.phero--dark { background: var(--grad-navy); color: #fff; }
.phero--dark h1 { color: #fff; }
.phero__bc { display: inline-flex; gap: 8px; font-size: .88rem; color: var(--ink-400); margin-bottom: 22px; }
.phero--dark .phero__bc { color: rgba(220,230,255,.6); }
.phero__bc a:hover { color: var(--blue-500); }

/* ---------- 21. Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change: opacity, transform; }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].in { transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-stagger].in > * { opacity: 1; transform: none; }

/* progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: var(--grad-tech); box-shadow: 0 0 12px rgba(47,220,255,.7); transition: width .1s linear; }

/* floating CTA on scroll */
.float-cta { position: fixed; right: 22px; bottom: 22px; z-index: 90; transform: translateY(140%); transition: transform .5s var(--ease-spring); }
.float-cta.show { transform: none; }
/* on mobile the fixed CTA overlaps content and jitters during momentum scroll: hide it
   (the nav menu and in-page CTAs cover this) */
@media (max-width: 768px){ .float-cta { display: none !important; } }

/* ---------- 22. Keyframe animations ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes float-y2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes pulse-ring { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes dash-draw { to { stroke-dashoffset: 0; } }
@keyframes flow-dot { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes shimmer { to { background-position: 200% 0; } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

.spin-slow { animation: spin 18s linear infinite; transform-origin: center; }
.spin-slow-rev { animation: spin-rev 24s linear infinite; transform-origin: center; }
.float { animation: float-y 6s ease-in-out infinite; }
.float--2 { animation: float-y2 8s ease-in-out infinite; }

/* SVG line draw helper */
.draw path, .draw line, .draw circle, .draw rect, .draw polyline { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.draw.in path, .draw.in line, .draw.in circle, .draw.in rect, .draw.in polyline { animation: dash-draw 2.2s var(--ease-out) forwards; }

/* moving data dot along a motion path */
.flow-dot { offset-path: path(var(--path)); animation: flow-dot 2.6s linear infinite; }

/* numbered count blink while running */
.counting { animation: blink 1s ease-in-out infinite; }

/* ---------- 23. Real media: screenshots & photos ---------- */
.winframe { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-lg); }
.winbar { background: var(--grad-navy); padding: 13px 18px; display: flex; align-items: center; gap: 11px; }
.winbar .dots { display: flex; gap: 6px; }
.winbar .dots span { width: 11px; height: 11px; border-radius: 50%; }
.winbar .t { color: #fff; font-family: var(--font-display); font-size: .84rem; font-weight: 600; opacity: .88; }
.winframe__img { width: 100%; height: auto; display: block; background: #f3f6fb; }

/* Full-width app showcase (ThunderCAD) */
.showcase { position: relative; max-width: 1040px; margin-inline: auto; }
.showcase__stage { position: relative; padding: 26px clamp(14px, 4vw, 56px) 30px; }
.showcase__stage::before { content: ""; position: absolute; inset: 6% 2% -4% 2%; z-index: 0; border-radius: 40px;
  background: radial-gradient(60% 70% at 50% 30%, rgba(27,91,255,.28), transparent 70%); filter: blur(46px); }
.winframe--xl { position: relative; z-index: 1; border-radius: 16px; box-shadow: var(--sh-float); }
.showcase__card { position: absolute; z-index: 3; background: #fff; color: var(--ink-900); border-radius: 14px;
  padding: 12px 15px; box-shadow: var(--sh-lg); display: flex; gap: 11px; align-items: center; }
.showcase__card--tr { top: -8px; right: clamp(-6px, 1vw, 14px); }
.showcase__card--bl { bottom: 16px; left: clamp(-6px, 1vw, 10px); }
.showcase__card-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
@media (max-width: 640px){
  .showcase__stage { padding: 8px 4px 12px; }
  .showcase__stage::before { display: none; }
  .showcase__card { padding: 9px 12px; }
  .showcase__card--tr { top: -10px; right: 2px; transform: scale(.82); transform-origin: top right; }
  .showcase__card--bl { bottom: 6px; left: 2px; transform: scale(.82); transform-origin: bottom left; }
}

/* Floating callout cards sit inside panels that clip with overflow:hidden, so the old
   negative offsets cut them off. Pin them just inside the edges (clear of the status row
   and the chips) and hide on small screens where the panel is too narrow for them. */
.block-blue > .float, .block-navy > .float{
  top: 54px !important; right: 14px !important; left: auto !important; bottom: auto !important; }
.block-blue > .float--2, .block-navy > .float--2{
  top: auto !important; bottom: 62px !important; left: 14px !important; right: auto !important; }
@media (max-width: 700px){
  .block-blue > .float, .block-navy > .float,
  .block-blue > .float--2, .block-navy > .float--2 { display: none !important; }
}

/* ThunderCAD feature points strip */
.tc-point { display: flex; gap: 15px; align-items: flex-start; padding: 4px 6px; }
.tc-point__ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-600); box-shadow: var(--sh-sm); }
.tc-point strong { font-family: var(--font-display); font-size: 1.06rem; display: block; margin-bottom: 3px; }
.tc-point p { font-size: .94rem; color: var(--ink-500); margin: 0; }

.shot-card { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-sm); transition: transform .45s var(--ease-out), box-shadow .45s; }
.shot-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.shot-card__media { overflow: hidden; background: #eef3fb; aspect-ratio: 16 / 10; display: grid; place-items: center; }
.shot-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease-out); }
.shot-card:hover .shot-card__media img { transform: scale(1.05); }
.shot-card__cap { padding: 18px 22px; display: flex; align-items: center; gap: 12px; }
.shot-card__cap .n { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--blue-50); color: var(--blue-600); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .9rem; }

/* force a perfect circle: aspect-ratio:1 keeps it square even though the source photos
   are portrait (height:100% does not resolve under the avatar's grid layout) */
.team-card__avatar img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: top center; border-radius: 50%; display: block; }
/* keep the drifting technical glyphs off the team portraits (they read as specks on photos) */
.section--team .ambient { display: none; }
.team-card__avatar.has-photo { background: var(--mist); }

.logo-chip { height: 30px; width: auto; opacity: .85; filter: saturate(.2) brightness(.4); transition: opacity .3s, filter .3s; }
.logo-chip:hover { opacity: 1; filter: none; }

/* ============================================================
   24. NEXT-LEVEL ART DIRECTION
   Engineering-precision: technical grids, mono annotations,
   CAD-viewport framing, mesh + grain surfaces, glass, cursor.
   ============================================================ */
:root{
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --grad-mesh-blue:
     radial-gradient(120% 130% at 0% 0%, #5a96ff 0%, transparent 52%),
     radial-gradient(120% 120% at 100% 0%, #34d6fd 0%, transparent 44%),
     radial-gradient(150% 150% at 100% 110%, #1f5fe6 0%, transparent 60%),
     linear-gradient(135deg, #3380ff, #1f5fe6);
  --grad-mesh-navy:
     radial-gradient(110% 110% at 0% 0%, #86baff 0%, transparent 52%),
     radial-gradient(120% 120% at 100% 0%, #4f93ff 0%, transparent 48%),
     radial-gradient(130% 130% at 85% 120%, #2fd4fd 0%, transparent 44%),
     linear-gradient(160deg, #3173f2, #1c52dc);
  --sh-float: 0 34px 80px -28px rgba(8,22,80,.55), 0 10px 28px -14px rgba(8,22,80,.42);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* page canvas: ONE continuous flowing field across the whole page (no per-section bands) */
body{ background:
  radial-gradient(900px 620px at 88% 1%, rgba(27,91,255,.07), transparent 62%),
  radial-gradient(820px 680px at 3% 20%, rgba(0,194,245,.06), transparent 62%),
  radial-gradient(1000px 760px at 97% 52%, rgba(27,91,255,.055), transparent 60%),
  radial-gradient(880px 720px at 0% 80%, rgba(0,194,245,.05), transparent 60%),
  linear-gradient(180deg, #ffffff 0%, #f2f7ff 28%, #ffffff 50%, #f1f7ff 76%, #ffffff 100%); }
body::after{ content:""; position:fixed; inset:0; z-index:9990; pointer-events:none;
  background-image: var(--noise); background-size:180px; opacity:.05; mix-blend-mode:overlay; }

/* ---- Typography: bigger, tighter, more dramatic ---- */
h1{ font-size: clamp(3rem, 7.4vw, 5.9rem); letter-spacing:-.038em; line-height:.97; }
h2{ font-size: clamp(2.15rem, 4.6vw, 3.7rem); letter-spacing:-.032em; line-height:1.01; }
h3{ letter-spacing:-.02em; }
.lead{ color: var(--ink-700); }
.display-xl{ font-family:var(--font-display); font-weight:700; font-size: clamp(3.4rem, 12vw, 9.5rem); line-height:.9; letter-spacing:-.045em; }
.stat__num{ font-variant-numeric: tabular-nums; }

/* ---- .eyebrow becomes a technical mono chip (markup unchanged) ---- */
.eyebrow{ font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue-700); background:#fff; border:1px solid var(--line);
  border-radius:7px; padding:8px 13px; box-shadow:var(--sh-sm); gap:8px; }
.eyebrow::before{ content:"//"; color:var(--cyan-500); font-weight:700; }
.eyebrow .dot{ display:none; }
.eyebrow--light{ color:var(--cyan-300); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); }
.eyebrow--light::before{ color:var(--cyan-400); }

/* technical index marker:  <span class="tech-index">01 - Sectie</span> */
.tech-index{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-400); display:inline-flex; align-items:center; gap:12px; }
.tech-index::before{ content:""; width:38px; height:1px; background:var(--blue-300); }
.section-dark .tech-index, .block-navy .tech-index, .block-blue .tech-index{ color:rgba(220,230,255,.6); }

/* dimension annotation:  <span class="dim">80%</span> */
.dim{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.1em; color:var(--ink-400); }
.dim::before,.dim::after{ content:""; height:1px; width:24px; background:var(--blue-300); }

/* crosshair tick decoration */
.tick{ position:absolute; width:11px; height:11px; pointer-events:none; opacity:.6; }
.tick::before,.tick::after{ content:""; position:absolute; background:var(--blue-400); }
.tick::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-.5px); }
.tick::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-.5px); }

/* CAD-viewport corner brackets:  add class "frame" */
.frame::before,.frame::after{ content:""; position:absolute; width:24px; height:24px; pointer-events:none; z-index:3; }
.frame::before{ top:-1px; left:-1px; border-top:2px solid var(--cyan-400); border-left:2px solid var(--cyan-400); border-top-left-radius:10px; }
.frame::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--cyan-400); border-right:2px solid var(--cyan-400); border-bottom-right-radius:10px; }

/* light page heroes get a soft ambient bloom (no grid) */
.phero:not(.phero--dark){ position:relative; }
.phero:not(.phero--dark)::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 70% at 14% 6%, rgba(27,91,255,.08), transparent 60%),
    radial-gradient(50% 60% at 96% 18%, rgba(0,194,245,.07), transparent 62%); }
.phero .container{ position:relative; z-index:1; }

/* hero ambient backdrop (soft mesh glow, no grid) */
.tech-bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 56% at 80% 4%, rgba(0,194,245,.12), transparent 60%),
    radial-gradient(56% 64% at 4% 26%, rgba(27,91,255,.10), transparent 62%),
    radial-gradient(40% 50% at 60% 110%, rgba(47,220,255,.08), transparent 60%); }

/* glass surface (for floating elements over colour) */
.glass{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-radius:16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 22px 44px -22px rgba(0,0,0,.45); }

/* spec readout (mono stat row) */
.spec{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--sh-sm); }
.spec__cell{ flex:1 1 0; min-width:128px; padding:18px 22px; border-right:1px solid var(--line); }
.spec__cell:last-child{ border-right:0; }
.spec__k{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-400); }
.spec__v{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; letter-spacing:-.02em; color:var(--ink-900); margin-top:6px; line-height:1; }
.spec__v .u{ font-size:.55em; color:var(--blue-500); }

/* ---- Buttons: sharper, richer ---- */
.btn{ border-radius:12px; letter-spacing:-.01em; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--sh-blue); }
.btn--lg{ border-radius:14px; }
.btn--ghost{ background:#fff; color:var(--blue-700); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover{ background:#fff; box-shadow: inset 0 0 0 1.5px var(--blue-400); }
.btn--white{ box-shadow: var(--sh-lg); }
.btn--tech{ color:#fff; }
/* keep on-dark ghost transparent (v2 ghost bg would otherwise turn it white) */
.btn--on-dark.btn--ghost{ background:transparent; color:#fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32); }
.btn--on-dark.btn--ghost:hover{ background:rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }

/* ---- Cards & features: gradient hairline border + depth ---- */
.card, .feature{
  border-radius:20px; border:1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(150deg, rgba(27,91,255,.32), rgba(0,194,245,.12) 38%, var(--line) 75%) border-box;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, var(--sh-md);
}
.card:hover, .feature:hover{
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, var(--sh-float);
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(150deg, rgba(27,91,255,.7), rgba(0,194,245,.4) 45%, rgba(27,91,255,.15)) border-box;
}
.feature__icon{ border-radius:14px; }
.feature__no{ font-family:var(--font-mono); font-weight:500; color:var(--blue-200); }

/* ---- Blue / navy blocks: mesh + grain + inner highlight ---- */
.block-blue{ background: var(--grad-mesh-blue); border-radius:24px;
  box-shadow: var(--sh-float), inset 0 1px 0 rgba(255,255,255,.24); }
.block-navy, .section-dark{ background: var(--grad-mesh-navy); }
.cta-band{ background: var(--grad-mesh-blue); border-radius:30px;
  box-shadow: var(--sh-float), inset 0 1px 0 rgba(255,255,255,.24); }
.block-blue, .block-navy, .cta-band{ position:relative; overflow:hidden; }
.block-blue::after, .block-navy::after, .cta-band::after, .section-dark::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background-image: var(--noise); background-size:180px; opacity:.07; mix-blend-mode:overlay; }
.block-blue > *, .block-navy > *, .cta-band > *{ position:relative; z-index:1; }

/* marquee + tags get the mono treatment */
.marquee__item{ font-family:var(--font-mono); font-weight:500; letter-spacing:-.01em; font-size:1.15rem; }
.tag{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em; border-radius:8px; }
.tag--dark{ font-family:var(--font-mono); }

/* nicer dividers / steps */
.step{ border-radius:18px; }
.pipe-node{ border-radius:18px; padding-top:32px; }
.pipe-ico{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; margin:0 auto 14px; background:var(--blue-50); color:var(--blue-600); box-shadow:var(--sh-sm); transition: transform .4s var(--ease-spring); }
.pipe-ico--light{ background:rgba(255,255,255,.16); color:#fff; box-shadow:none; }
.pipe-node:hover .pipe-ico{ transform: translateY(-4px) scale(1.06); }
.pipe-no{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; color:var(--blue-300); }

/* ---- Custom crosshair cursor ---- */
@media (pointer:fine){
  html.cursor-on, html.cursor-on *{ cursor:none !important; }
  html.cursor-on input, html.cursor-on textarea, html.cursor-on select, html.cursor-on [contenteditable]{ cursor:text !important; }
}
.cur{ position:fixed; top:0; left:0; z-index:99999; pointer-events:none; will-change:transform; transform:translate(-50%,-50%); }
.cur-dot{ width:6px; height:6px; border-radius:50%; background:var(--blue-600); box-shadow:0 0 0 2px rgba(255,255,255,.5); }
.cur-ring{ width:30px; height:30px; border:1.5px solid rgba(27,91,255,.55); border-radius:50%;
  transition: width .22s var(--ease-out), height .22s var(--ease-out), background .22s, border-color .22s, opacity .22s; }
.cur-ring.is-hover{ width:56px; height:56px; background:rgba(47,220,255,.1); border-color:var(--cyan-400); }
.cur-ring.is-down{ width:22px; height:22px; }

/* ---- Reveal: clip-wipe variant ---- */
[data-reveal="clip"]{ opacity:1; transform:none; clip-path: inset(0 100% 0 0); transition: clip-path 1.05s var(--ease-out); }
[data-reveal="clip"].in{ clip-path: inset(0 0 0 0); }
.reveal-line{ position:relative; }

/* responsive: spec stacks */
@media (max-width:600px){ .spec__cell{ flex-basis:50%; } }

/* ============================================================
   25. MOTION & ILLUSTRATION TOOLKIT - make it alive
   ============================================================ */

/* ---- ambient keyframes ---- */
@keyframes drift-a{ 0%,100%{ transform: translate(0,0) rotate(0deg); } 50%{ transform: translate(18px,-24px) rotate(8deg); } }
@keyframes drift-b{ 0%,100%{ transform: translate(0,0) rotate(0deg); } 50%{ transform: translate(-22px,18px) rotate(-10deg); } }
@keyframes drift-c{ 0%,100%{ transform: translate(0,0) rotate(0deg); } 33%{ transform: translate(14px,16px) rotate(6deg);} 66%{ transform: translate(-12px,-14px) rotate(-5deg);} }
@keyframes sway{ 0%,100%{ transform: rotate(-7deg);} 50%{ transform: rotate(7deg);} }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-16px);} }
@keyframes blob{ 0%,100%{ transform: translate(0,0) scale(1);} 33%{ transform: translate(26px,-30px) scale(1.1);} 66%{ transform: translate(-20px,18px) scale(.93);} }
@keyframes twinkle{ 0%,100%{ opacity:.15; transform:scale(.7);} 50%{ opacity:1; transform:scale(1);} }
@keyframes gridpan{ to{ background-position: 56px 56px; } }
@keyframes pulse-soft{ 0%,100%{ opacity:.5; transform:scale(1);} 50%{ opacity:1; transform:scale(1.05);} }
@keyframes ring-emit{ 0%{ transform:scale(.4); opacity:.7;} 100%{ transform:scale(2.4); opacity:0;} }
@keyframes dash-move{ to{ stroke-dashoffset:-200; } }
@keyframes orbit-spin{ to{ transform: rotate(360deg);} }
@keyframes orbit-spin-rev{ to{ transform: rotate(-360deg);} }
@keyframes sheen{ 0%{ background-position: -150% 0; } 100%{ background-position: 250% 0; } }

/* ---- utility motion classes ---- */
.anim-drift-a{ animation: drift-a 11s ease-in-out infinite; }
.anim-drift-b{ animation: drift-b 14s ease-in-out infinite; }
.anim-drift-c{ animation: drift-c 17s ease-in-out infinite; }
.anim-sway{ animation: sway 6s ease-in-out infinite; transform-origin:center; }
.anim-bob{ animation: bob 7s ease-in-out infinite; }
.twinkle{ animation: twinkle 3.2s ease-in-out infinite; }

/* shimmering gradient headline */
.text-grad{ background-size: 220% auto; animation: sheen 7s linear infinite; }
/* on coloured blocks the blue gradient text would blend in: use white->cyan */
.section-dark .text-grad, .block-navy .text-grad, .block-blue .text-grad, .cta-band .text-grad, .phero--dark .text-grad,
.calc__result .big{
  background-image: linear-gradient(118deg, #ffffff 0%, #c4f2ff 55%, #8fe6ff 100%); }

/* lead/paragraph text on the dark page hero must be light (h1 was already overridden) */
.phero--dark p, .phero--dark .lead{ color: rgba(228,236,255,.85); }

/* living backgrounds (apply everywhere automatically) */
.orb{ animation: blob 17s ease-in-out infinite; }
.orb--cyan{ animation-duration: 23s; animation-direction: reverse; }
.tech-bg{ animation: drift-b 26s ease-in-out infinite; }
.phero:not(.phero--dark)::before{ animation: drift-a 30s ease-in-out infinite; }

/* ---- ambient illustration layer (drifting technical glyphs) ---- */
.ambient{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero > .container, .hero .container--wide{ position:relative; z-index:1; }
.amb{ position:absolute; color: var(--blue-500); opacity:.28; will-change: transform; }
.amb-move{ display:block; width:100%; height:100%; }
.amb svg{ width:100%; height:100%; display:block; }
.amb--cyan{ color: var(--cyan-500); }
.amb--soft{ opacity:.18; }
.phero--dark .amb, .section-dark .amb{ color: var(--cyan-300); opacity:.26; }
@media (max-width:760px){ .amb{ opacity:.12 !important; } .amb--hide-sm{ display:none; } .hide-sm{ display:none; } }

/* radar / emitting rings */
.emit{ position:absolute; border-radius:50%; border:1px solid currentColor; }
.emit::before,.emit::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid currentColor; animation: ring-emit 3.4s ease-out infinite; }
.emit::after{ animation-delay:1.7s; }

/* glow pulse dot */
.glow-pulse{ position:relative; }
.glow-pulse::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(47,220,255,.5); animation: pulse-soft 2.6s ease-in-out infinite; }

/* hero scene helpers */
.scene{ position:relative; width:100%; }
.scene .gear{ transform-origin:center; }
.scene .spin-a{ animation: orbit-spin 14s linear infinite; transform-box:fill-box; transform-origin:center; }
.scene .spin-b{ animation: orbit-spin-rev 9s linear infinite; transform-box:fill-box; transform-origin:center; }
.scene .spin-c{ animation: orbit-spin 22s linear infinite; transform-box:fill-box; transform-origin:center; }
.scene .flow-dash{ stroke-dasharray: 5 8; animation: dash-move 3.5s linear infinite; }
.float-card{ position:absolute; z-index:2; }

/* section decorative wave/edge */
.edge-fade{ position:relative; }

/* animated connector line that draws on reveal then flows */
[data-draw-flow]{ stroke-dasharray: 6 9; }
[data-draw-flow].in{ animation: dash-move 3s linear infinite; }

/* light sections are transparent over the continuous body field (no per-section washes,
   which used to create visible seams between blocks) */
.section:not(.section-dark){ position:relative; }
.section > .container{ position:relative; z-index:1; }
.cta-band > *, .block-blue > *, .block-navy > *{ position:relative; }
/* keep decorative orbs out of the layout flow (the rule above would otherwise force them relative,
   inflating block height). Re-assert absolute + behind content. */
.cta-band > .orb, .block-blue > .orb, .block-navy > .orb, .section-dark > .orb{ position:absolute; z-index:0; }

/* soft animated aurora glows (injected, add colour & movement to the white) */
.aura{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(72px); opacity:.5;
  animation: blob 22s ease-in-out infinite; will-change:transform; }
.aura--blue{ background: radial-gradient(circle, rgba(27,91,255,.42), transparent 68%); }
.aura--cyan{ background: radial-gradient(circle, rgba(0,194,245,.36), transparent 68%); animation-duration:28s; animation-direction:reverse; }
.section-dark .aura--blue, .phero--dark .aura--blue{ background: radial-gradient(circle, rgba(47,220,255,.28), transparent 70%); }

/* feature icon: subtle continuous life */
.feature:hover .feature__icon{ animation: sway 1.2s ease-in-out infinite; }

/* big animated number underline */
.stat__num{ position:relative; }