/* ---------- Reset & tokens ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #ffffff;
  --bg-alt: #f3f5f8;
  --fg: #0f1b33;
  --navy: #071c4d;
  --muted: #5b6472;
  --border: #e6e9f0;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-2: #38bdf8;
  --radius: 16px;
  --shadow: 0 4px 24px rgba(15, 27, 51, 0.06);
  --shadow-lg: 0 12px 40px rgba(15, 27, 51, 0.1);
}

html { scroll-behavior: smooth; }

/* Lenis (script.js) drives its own scroll easing via requestAnimationFrame -
   once it's active (html.lenis-smooth, set by Lenis itself) the browser's
   native CSS smooth-scroll has to step aside, or the two fight over the
   same scroll position and the result feels janky/stuttery instead of
   smooth. This is Lenis's own documented companion CSS. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--accent); color: #fff; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.text-gradient {
  background: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.muted { color: var(--muted); }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--navy); }
h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
h3 { font-size: 1.125rem; font-weight: 700; }
p { color: var(--muted); }

/* ---------- Logo ---------- */
.logo-mark {
  flex-shrink: 0;
  display: block;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 800; font-size: 1.1rem; color: var(--navy); }
.brand__tagline { font-size: 0.65rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.brand--sm .brand__name { font-size: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn--solid { background: var(--accent); color: #fff; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28); }
.btn--solid:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn__arrow { display: inline-block; transition: transform 0.25s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--ghost { border-color: var(--border); color: var(--navy); background: #fff; }
.btn--ghost:hover { background: var(--surface-2); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 16px rgba(15, 27, 51, 0.04);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__links { display: flex; gap: 32px; }
.nav__links a { font-size: 0.9rem; font-weight: 600; color: var(--fg); transition: color 0.2s ease; }
.nav__links a:hover { color: var(--accent); }
.nav__cta { display: inline-flex; }
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav__toggle span {
  width: 22px; height: 2px; background: var(--navy); border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
  transform-origin: center;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 24px;
    gap: 20px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.28s;
  }
  .nav__links a {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
  }
  .nav__links.is-open a { opacity: 1; transform: translateY(0); }
  .nav__links.is-open a:nth-child(1) { transition-delay: 0.06s; }
  .nav__links.is-open a:nth-child(2) { transition-delay: 0.11s; }
  .nav__links.is-open a:nth-child(3) { transition-delay: 0.16s; }
  .nav__links.is-open a:nth-child(4) { transition-delay: 0.21s; }
  .nav__links.is-open a:nth-child(5) { transition-delay: 0.26s; }
  .nav__links.is-open a:nth-child(6) { transition-delay: 0.31s; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__toggle span { transition: opacity 0.15s ease; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1),
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: none; }
  .nav__links, .nav__links a {
    transition: opacity 0.15s ease !important;
    transform: none !important;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 168px 0 112px;
  background: var(--bg-alt);
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
}
.hero__glow--1 {
  width: 800px; height: 500px;
  top: -14%; left: 50%; transform: translateX(-50%);
  background: rgba(37, 99, 235, 0.14);
}
.hero__glow--2 {
  width: 320px; height: 320px;
  top: 15%; right: -8%;
  background: rgba(56, 189, 248, 0.14);
}
.hero__grid {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image:
    linear-gradient(to right, #071c4d 1px, transparent 1px),
    linear-gradient(to bottom, #071c4d 1px, transparent 1px);
  background-size: 56px 56px;
}
.hero__noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- Hero tech visual layer ---------- */
.hero__tech {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
@media (min-width: 1100px) {
  .hero__tech { display: block; }
}
.hero__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* .hero__link-path is shared with .page-hero__links on every inner page,
   so it lives here unscoped rather than nested under .hero__tech. */
.hero__link-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
  opacity: 0.16;
  animation: dash-march 3.5s linear infinite;
}
@keyframes dash-march {
  to { stroke-dashoffset: -28; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__link-path { animation: none; }
}
.tech-chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
.tech-chip svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.tech-chip {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.tech-chip.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16), var(--shadow-lg);
  color: var(--accent);
}
.tech-chip.is-active svg { color: var(--accent); }

.hero__terminal {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 250px;
  border-radius: 12px;
  background: var(--navy);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero__terminal-head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.06);
}
.hero__terminal-head span:not(.hero__terminal-title) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}
.hero__terminal-title {
  margin-left: auto;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  font-family: var(--font-mono, "SFMono-Regular", Menlo, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: none;
}
.hero__terminal-body {
  padding: 12px 14px 16px;
  font-family: var(--font-mono, "SFMono-Regular", Menlo, monospace);
  font-size: 0.72rem;
  line-height: 1.7;
  min-height: 5.4em;
}
.term-line { color: #e8ecf5; word-break: break-word; }
.term-line--result { color: #7ee8a8; }
.hero__terminal-cursor {
  animation: blink 1s step-end infinite;
  color: #7ee8a8;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- Hero 3D scene ---------- */
/* Three layered "screens" (code editor, browser, phone) rotated in real
   3D space via perspective + preserve-3d, not flat icons pretending to
   float. Sits in normal flow below the hero copy (not layered behind it),
   so it never has to compete with the headline for the same space at any
   viewport width or text length. .hero__stage carries a fixed resting
   angle plus a mouse-driven offset (--mouse-rx/--mouse-ry, set in
   script.js) added in the same transform, so pointer input nudges one
   rigid object instead of re-rotating from scratch. */
.hero__scene {
  display: none;
  justify-content: center;
  margin-top: 64px;
  perspective: 1600px;
}
@media (min-width: 1100px) {
  .hero__scene { display: flex; }
}
/* Real WebGL "V" mark (script.js, Three.js) - occupies the same slot as
   .hero__scene above and is hidden by default. script.js reveals this and
   hides the CSS panel stack only once the Three.js scene has actually
   built successfully, so a CDN hiccup silently leaves the CSS version on
   screen instead of an empty gap. */
.hero__three {
  display: none;
  justify-content: center;
  align-items: center;
  width: 420px;
  height: 340px;
  margin: 64px auto 0;
}
.hero__three canvas { display: block; }
@media (min-width: 1100px) {
  .hero__three.is-ready { display: flex; }
}
.hero__stage {
  --mouse-rx: 0deg;
  --mouse-ry: 0deg;
  position: relative;
  width: 420px;
  height: 340px;
  transform-style: preserve-3d;
  transform: rotateX(calc(10deg + var(--mouse-rx))) rotateY(calc(-22deg + var(--mouse-ry)));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* .hero__panel itself only ever holds translateZ (static 3D depth) plus
   whatever script.js's scroll-parallax adds to its y - the idle bob lives
   one level down on .hero__panel-inner instead, so the two motions land
   on different elements and never fight over the same transform. */
.hero__panel {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
}
.hero__panel-inner {
  height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: inherit;
  box-shadow: 0 30px 60px -20px rgba(15, 27, 51, 0.35), 0 2px 8px rgba(15, 27, 51, 0.06);
  animation: panel-float 6s ease-in-out infinite;
}
.hero__panel--code {
  left: -30px; top: 40px;
  width: 320px; height: 200px;
  transform: translateZ(-60px);
}
.hero__panel--code .hero__panel-inner { background: var(--navy); animation-delay: 0s; }
.hero__panel--browser {
  left: 40px; top: 130px;
  width: 340px; height: 220px;
  transform: translateZ(10px);
}
.hero__panel--browser .hero__panel-inner { animation-delay: 0.6s; }
.hero__panel--phone {
  left: 230px; top: 40px;
  width: 150px; height: 300px;
  border-radius: 24px;
  transform: translateZ(80px);
}
.hero__panel--phone .hero__panel-inner { animation-delay: 1.2s; }
@keyframes panel-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero__panel-head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.hero__panel-head span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.hero__panel-head--dark { background: rgba(255, 255, 255, 0.06); border-bottom-color: rgba(255, 255, 255, 0.08); }
.hero__panel-head--dark span { background: rgba(255, 255, 255, 0.2); }
.hero__panel-url {
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--muted);
}
.hero__panel-body { padding: 14px 16px; }
.code-line {
  height: 7px;
  margin-bottom: 9px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
}
.code-line--accent { background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: 0.8; }
.ui-block { height: 9px; margin-bottom: 10px; border-radius: 4px; background: var(--bg-alt); }
.ui-block--title { height: 12px; background: var(--border); }
.ui-row { display: flex; gap: 6px; margin-top: 4px; }
.ui-chip { flex: 1; height: 22px; border-radius: 6px; background: var(--bg-alt); border: 1px solid var(--border); }
.hero__phone-notch {
  width: 46px; height: 5px;
  margin: 10px auto 6px;
  border-radius: 3px;
  background: var(--border);
}
.hero__panel--phone .hero__panel-body { padding: 6px 14px 14px; }
.ui-card { height: 46px; margin-bottom: 10px; border-radius: 10px; background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(56,189,248,0.1)); }
@media (prefers-reduced-motion: reduce) {
  .hero__stage { transition: none; }
  .hero__panel-inner { animation: none; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  box-shadow: var(--shadow);
  margin-bottom: 32px;
}
.pill__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}
.pill__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  animation: pill-pulse 2s ease-out infinite;
}
@keyframes pill-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pill__dot::after { animation: none; }
}
.hero-title {
  max-width: 820px;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero-title .line-inner { display: block; will-change: transform; }
.hero-anim { will-change: transform, opacity; }
.hero__lead {
  max-width: 620px;
  margin: 24px auto 0;
  font-size: 1.125rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin-top: 36px;
}
.hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.hero__trust svg {
  width: 15px;
  height: 15px;
  color: #22c55e;
  flex-shrink: 0;
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 1;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.hero__scroll:hover { opacity: 1; }
.hero__scroll-mouse {
  display: block;
  width: 24px;
  height: 38px;
  border: 2px solid var(--muted);
  border-radius: 14px;
  position: relative;
}
.hero__scroll-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  animation: scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot {
  0% { opacity: 1; transform: translate(-50%, 0); }
  70% { opacity: 0; transform: translate(-50%, 12px); }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}
@media (max-width: 700px) {
  .hero__scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-dot { animation: none; }
}

/* ---------- Inner page hero ---------- */
.page-hero {
  position: relative;
  padding: 168px 0 80px;
  background: var(--bg-alt);
  text-align: center;
  overflow: hidden;
}
.page-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}
.page-hero__glow--1 {
  width: 700px; height: 400px;
  top: -20%; left: 50%; transform: translateX(-50%);
  background: rgba(37, 99, 235, 0.14);
}
.page-hero__glow--2 {
  width: 300px; height: 300px;
  top: 10%; right: -6%;
  background: rgba(56, 189, 248, 0.14);
}
.page-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.035;
  background-image:
    linear-gradient(to right, #071c4d 1px, transparent 1px),
    linear-gradient(to bottom, #071c4d 1px, transparent 1px);
  background-size: 56px 56px;
}
.page-hero__links {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
/* Aurora glow: slow-drifting blended radial gradients, pure CSS - replaces
   an earlier WebGL network-mesh effect that read as busy/technical rather
   than premium. inset:-20% so the drift/rotate/scale never reveals a hard
   edge at the container boundary. */
.page-hero__vanta {
  position: absolute;
  inset: -20%;
  z-index: 0;
  opacity: 0.65;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(37, 99, 235, 0.4), transparent 55%),
    radial-gradient(ellipse at 75% 25%, rgba(56, 189, 248, 0.35), transparent 55%),
    radial-gradient(ellipse at 50% 85%, rgba(29, 78, 216, 0.3), transparent 60%);
  filter: blur(50px) saturate(1.15);
  animation: aurora-drift 13s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes aurora-drift {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(-2%, 3%) scale(1.06) rotate(2deg); }
  100% { transform: translate(3%, -2%) scale(1.04) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__vanta { animation: none; }
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}
.page-hero__lead {
  max-width: 620px;
  margin: 20px auto 0;
  font-size: 1.1rem;
}
.page-hero__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(56,189,248,0.14));
  color: var(--accent);
}
.page-hero__icon svg { width: 28px; height: 28px; }

/* ---------- Hero browser-preview demo ---------- */
.browser-demo {
  position: relative;
  max-width: 460px;
  margin: 48px auto 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.browser-demo__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.browser-demo__chrome span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}
.browser-demo__url {
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}
.browser-demo__viewport {
  position: relative;
  height: 220px;
  padding: 22px 20px;
  overflow: hidden;
}
.browser-demo__loadbar {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.browser-demo__content { opacity: 0; }
.browser-demo__line {
  height: 10px;
  border-radius: 5px;
  background: var(--border);
  margin-bottom: 10px;
  width: 90%;
}
.browser-demo__line--title { height: 16px; width: 55%; background: var(--navy); opacity: 0.85; margin-bottom: 16px; }
.browser-demo__blocks { display: flex; gap: 10px; margin-top: 18px; }
.browser-demo__blocks span {
  flex: 1;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(56,189,248,0.12));
}
.browser-demo__badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
  opacity: 0;
  transform: scale(0.6);
  white-space: nowrap;
}
.browser-demo__badge svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.browser-demo__badge--speed { top: 26px; right: 16px; }
.browser-demo__badge--seo { bottom: 26px; left: 16px; }
@media (max-width: 560px) {
  .browser-demo { margin-top: 36px; }
  .browser-demo__viewport { height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .browser-demo__content { opacity: 1; }
  .browser-demo__loadbar { width: 100%; }
  .browser-demo__badge { opacity: 1; transform: scale(1); }
}

/* ---------- Phone demo (mobile-app service pages) ---------- */
/* Same looping story as .browser-demo (load bar fills, content appears,
   feature badges pop in, hold, reset) in a phone frame instead of a
   browser window - reuses the .ui-block/.ui-card/.ui-chip mockup pieces
   built for the old hero panels rather than duplicating that CSS. */
.phone-demo {
  position: relative;
  width: 220px;
  margin: 48px auto 0;
  padding: 14px 14px 20px;
  border-radius: 34px;
  background: var(--navy);
  box-shadow: var(--shadow-lg);
}
.phone-demo__notch {
  width: 70px;
  height: 18px;
  margin: 0 auto 8px;
  border-radius: 0 0 12px 12px;
  background: #050f2b;
}
.phone-demo__screen {
  position: relative;
  height: 360px;
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
  padding: 26px 16px 16px;
}
.phone-demo__loadbar {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.phone-demo__content { opacity: 0; }
.phone-demo__badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--navy);
  opacity: 0;
  transform: scale(0.6);
  white-space: nowrap;
}
.phone-demo__badge svg { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; }
.phone-demo__badge--a { top: 96px; right: 12px; }
.phone-demo__badge--b { bottom: 60px; left: 12px; }
@media (max-width: 560px) {
  .phone-demo { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-demo__content { opacity: 1; }
  .phone-demo__loadbar { width: 100%; }
  .phone-demo__badge { opacity: 1; transform: scale(1); }
}

/* ---------- "Why this matters" story chapter (service pages) ---------- */
/* Two small device mockups side by side - a slow/outdated one and a fast/
   modern one - so the stakes are shown, not just claimed in a sentence. */
.story-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.story-compare__card {
  width: 260px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.story-compare__tag {
  display: block;
  padding: 10px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.story-compare__card--bad .story-compare__tag { background: #fef2f2; color: #b91c1c; }
.story-compare__card--good .story-compare__tag { background: #eff6ff; color: var(--accent-dark); }
.story-compare__mock { padding: 16px; }
.story-compare__bar {
  height: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.story-compare__card--bad .story-compare__bar { background: #e2e2e2; }
.story-compare__card--good .story-compare__bar { background: var(--bg-alt); }
.story-compare__card--good .story-compare__bar--accent {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.story-compare__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 10px 16px 16px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
.story-compare__card--bad .story-compare__badge { background: #fef2f2; color: #b91c1c; }
.story-compare__card--good .story-compare__badge { background: #f0fdf4; color: #15803d; }
.story-compare__spinner {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  border-top-color: #b91c1c;
  animation: story-spin 1.1s linear infinite;
}
@keyframes story-spin { to { transform: rotate(360deg); } }
.story-compare__list { padding: 0 16px 18px; font-size: 0.82rem; }
.story-compare__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  color: var(--muted);
}
.story-compare__card--bad .story-compare__list li::before {
  content: "✕"; position: absolute; left: 0; color: #dc2626; font-size: 0.75rem; font-weight: 700;
}
.story-compare__card--good .story-compare__list li::before {
  content: "✓"; position: absolute; left: 0; color: #16a34a; font-size: 0.75rem; font-weight: 700;
}
.story-compare__arrow {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
}
.story-compare__arrow svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .story-compare__spinner { animation: none; }
}

.story-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 56px auto 0;
  text-align: center;
}
.story-stat__num {
  font-size: clamp(2.2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.story-stat__suffix {
  font-size: clamp(2.2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--accent);
}
.story-stat p { margin-top: 4px; font-size: 0.85rem; }

/* ---------- Capabilities grid (service pages) ---------- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.cap-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cap-card:hover { border-color: rgba(37, 99, 235, 0.35); transform: translateY(-2px); box-shadow: var(--shadow); }
.cap-card__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(56,189,248,0.12));
  color: var(--accent);
}
.cap-card__icon svg { width: 18px; height: 18px; }
.cap-card p { font-size: 0.9rem; margin: 0; }

/* ---------- Highlights strip ("what you get") ---------- */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.highlight-card {
  text-align: center;
  padding: 8px;
}
.highlight-card__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(56,189,248,0.12));
  color: var(--accent);
}
.highlight-card__icon svg { width: 24px; height: 24px; }
.highlight-card h3 { font-size: 1rem; margin-bottom: 6px; }
.highlight-card p { font-size: 0.85rem; }

/* ---------- Card link affordance ---------- */
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}
.nav__links a.is-active { color: var(--accent); }

/* ---------- Sections ---------- */
.section { padding: 112px 0; }
.section--tight { padding: 80px 0; }
.section--border { border-top: 1px solid var(--border); }
.section--alt { background: var(--bg-alt); }
.section__head { max-width: 640px; margin-bottom: 56px; }
.section__head p { margin-top: 16px; }
.section__head h2, .grid--2 h2 { margin-bottom: 0; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: 1fr; gap: 48px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.grid--align-center { align-items: center; }
@media (min-width: 860px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { border-color: rgba(37, 99, 235, 0.35); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card__number {
  position: absolute;
  top: 24px; right: 28px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--border);
}
.card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(56,189,248,0.12));
  color: var(--accent);
  margin-bottom: 20px;
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.9rem; }

/* ---------- Process ---------- */
.steps-wrap { position: relative; }
.steps-line {
  display: none;
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.steps-line__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
@media (min-width: 860px) {
  .steps-line { display: block; }
}
.step__number {
  font-size: 2.25rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step h3 { margin-top: 16px; margin-bottom: 8px; }
.step p { font-size: 0.9rem; }

/* ---------- Tech marquee ---------- */
.tech__label { text-align: center; font-size: 0.9rem; font-weight: 600; color: var(--muted); margin-bottom: 32px; }
.tech__marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.tech__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding-right: 12px;
  animation: marquee 28s linear infinite;
}
.tech__marquee:hover .tech__track { animation-play-state: paused; }
.tech__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.tech__track span,
.tech__list span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.tech__track span svg,
.tech__list span svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .tech__track { animation: none; }
}

/* ---------- Trusted by (homepage, real clients) ---------- */
.trusted__label {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}
.trusted__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}
.trusted__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  width: 200px;
  padding: 16px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.trusted__logo:hover {
  border-color: rgba(37, 99, 235, 0.35);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.trusted__logo img { max-height: 48px; max-width: 100%; width: auto; object-fit: contain; }

/* ---------- Why us ---------- */
.why-list { gap: 24px; }
.why { display: flex; gap: 12px; }
.why__check {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  margin-top: 2px;
}
.why__check svg { width: 14px; height: 14px; }
.why h3 { margin-bottom: 4px; }
.why p { font-size: 0.9rem; }

/* ---------- Projects ---------- */
.project {
  display: block;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.project:hover { border-color: rgba(37, 99, 235, 0.35); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.project__cover {
  height: 176px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}
.project__cover--1 { background: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(56,189,248,0.08)); }
.project__cover--2 { background: linear-gradient(135deg, rgba(56,189,248,0.16), rgba(37,99,235,0.08)); }
.project__cover--3 { background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(56,189,248,0.16)); }
.project__body { padding: 24px; }
.project__body .eyebrow { font-size: 0.75rem; margin-bottom: 8px; }
.project__body h3 { margin-bottom: 4px; }
.project__body p { font-size: 0.9rem; }

/* ---------- CTA ---------- */
.cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(135deg, var(--navy) 0%, #14275e 55%, var(--accent) 150%);
  border-radius: 24px;
  padding: 72px 32px;
}
.cta__glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; height: 300px;
  background: rgba(37, 99, 235, 0.35);
  filter: blur(100px);
  pointer-events: none;
}
.cta h2 { position: relative; margin-bottom: 16px; color: #fff; }
.cta p { position: relative; max-width: 480px; margin: 0 auto 32px; color: rgba(255,255,255,0.75); }
.cta .btn { position: relative; }
.cta .btn--solid { background: #fff; color: var(--accent); box-shadow: none; }
.cta .btn--solid:hover { background: #f3f3f3; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: 14px; font-size: 0.92rem; }

/* ---------- Contact ---------- */
.contact__details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}
.contact__row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  transition: color 0.2s ease;
}
a.contact__row:hover { color: var(--accent); }
.contact__row svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.map-embed {
  position: relative;
  display: block;
  margin-top: 28px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  height: 220px;
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.map-embed__badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: #fff;
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.form {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.form__row { margin-bottom: 20px; }
.form__row label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.form__row input,
.form__row textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--fg);
  font-family: inherit;
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.form__row input:focus,
.form__row textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.form__submit { width: 100%; justify-content: center; }
.form__note { margin-top: 12px; font-size: 0.85rem; font-weight: 600; color: var(--accent); min-height: 1.2em; }

/* ---------- Footer ---------- */
.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.65);
  padding: 72px 0 0;
}
.footer .brand__name { color: #fff; }
.footer .brand__tagline { color: rgba(255, 255, 255, 0.5); }
.footer p { color: rgba(255, 255, 255, 0.55); }
.footer a { color: rgba(255, 255, 255, 0.65); transition: color 0.2s ease; }
.footer a:hover { color: #fff; }

.footer__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}
.footer__about p { margin-top: 16px; font-size: 0.9rem; max-width: 280px; }
.footer__social { display: flex; gap: 12px; margin-top: 20px; }
.footer__social a {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.footer__social a:hover { background: var(--accent); }
.footer__social svg { width: 16px; height: 16px; }

.footer__heading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 20px;
}
.footer__links { display: flex; flex-direction: column; gap: 12px; font-size: 0.9rem; }
.footer__contact { display: flex; flex-direction: column; gap: 14px; font-size: 0.9rem; }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  padding: 24px 0 32px;
  font-size: 0.85rem;
}
@media (min-width: 640px) {
  .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer__legal { display: flex; gap: 24px; }

/* ---------- Idea Board ---------- */
.board-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.board-field { margin-bottom: 24px; }
.board-field:last-of-type { margin-bottom: 28px; }
.board-field > label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.board-field select {
  width: 100%;
  max-width: 420px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--fg);
  outline: none;
}
.board-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.toggle-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.toggle-chip input {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: #fff;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.toggle-chip input::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.15s ease;
}
.toggle-chip input:checked::after { transform: scale(1); }
.toggle-chip:has(input:checked) {
  border-color: var(--accent);
  background: rgba(37, 99, 235, 0.06);
  color: var(--accent);
}

.canvas-wrap {
  position: relative;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 420px;
  touch-action: none;
  cursor: crosshair;
}
.canvas-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: 0.9rem;
  color: var(--muted);
  pointer-events: none;
}

.board-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.tool-btn svg { width: 15px; height: 15px; }
.tool-btn.is-active { border-color: var(--accent); background: rgba(37, 99, 235, 0.08); color: var(--accent); }
.tool-btn:hover { border-color: var(--accent); }
.tool-colors { display: flex; align-items: center; gap: 6px; margin-left: 4px; }
.color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.color-swatch.is-active { border-color: var(--navy); box-shadow: 0 0 0 2px #fff inset; }

.board-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.board-form__actions .btn--ghost { flex-shrink: 0; }

/* ---------- Service delivery pipeline (compact grid) ---------- */
.pipeline-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
/* Traveling dot that hops from the active step's icon to the next one,
   visualizing the data actually moving through the pipeline. Position is
   set in JS from each card's real layout, so it holds up in any grid
   wrap (1, 2, 3 or 6 columns). */
.pipeline-flow {
  position: absolute;
  z-index: 6;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--accent) 60%);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16), 0 0 14px 2px rgba(37, 99, 235, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: left 1.05s cubic-bezier(0.65, 0, 0.35, 1), top 1.05s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .pipeline-flow { display: none; }
}
.pipeline-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.pipeline-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.pipeline-card.is-active::after {
  width: 100%;
  transition: width 1.45s linear;
}
.pipeline-card__num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--border);
}
.pipeline-card__icon {
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(56,189,248,0.12));
  color: var(--accent);
}
.pipeline-card__icon svg { width: 18px; height: 18px; }
.pipeline-card .eyebrow { display: block; margin-bottom: 4px; font-size: 0.68rem; }
.pipeline-card h3 { font-size: 0.95rem; margin-bottom: 6px; }
.pipeline-card p { font-size: 0.82rem; margin: 0; }
.pipeline-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), var(--shadow-lg);
  transform: translateY(-2px);
  animation: pipeline-card-pulse 1.5s ease-in-out infinite;
}
.pipeline-card.is-active .pipeline-card__icon {
  background: var(--accent);
  color: #fff;
}
@keyframes pipeline-card-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), var(--shadow-lg); }
  50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.06), var(--shadow-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .pipeline-card.is-active { animation: none; }
  .pipeline-card::after { transition: none; }
}

/* ---------- Terms page ---------- */
.legal {
  padding: 168px 0 96px;
  max-width: 760px;
  margin: 0 auto;
}
.legal h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 12px; }
.legal .updated { font-size: 0.85rem; color: var(--muted); margin-bottom: 48px; }
.legal h2 { font-size: 1.35rem; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--muted); font-size: 0.95rem; margin-bottom: 12px; }
.legal ul { padding-left: 20px; list-style: disc; }
.legal a.back { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 0.9rem; margin-bottom: 32px; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1.is-visible { transition-delay: 0.08s; }
.reveal--delay-2.is-visible { transition-delay: 0.16s; }
.reveal--delay-3.is-visible { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 3D tilt + sheen (cards, added via script.js) ---------- */
/* .tilt sits alongside a card's own class (.card / .cap-card / .project),
   so this block is intentionally last: on the equal-specificity ":hover"
   tie with those base rules, source order lets this one win and layer the
   rotation + lift on top instead of replacing it. */
.tilt {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --sheen-x: 50%;
  --sheen-y: 50%;
  --shadow-x: 0px;
  --shadow-y: 14px;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.tilt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(circle at var(--sheen-x) var(--sheen-y), rgba(255, 255, 255, 0.4), transparent 45%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.tilt:hover::before { opacity: 1; }
.tilt:hover {
  transition: transform 0.08s linear, box-shadow 0.08s linear;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-6px) translateZ(20px) scale(1.015);
  box-shadow: var(--shadow-x) var(--shadow-y) 34px -10px rgba(15, 27, 51, 0.28), 0 2px 8px rgba(15, 27, 51, 0.08);
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  .tilt { transition: none; }
  .tilt::before { display: none; }
  .tilt:hover { transform: none; box-shadow: none; }
}