:root {
  --paper: #eff1f5;
  --ink: #12161f;
  --ink-muted: #45506a;
  --line-faint: #d6dbe4;
  --line-strong: #aeb6c4;
  --signal: #1e43d6;
  --signal-deep: #16309e;
  --brass: #a9814b;

  --font-display: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1320px;
  --spine-w: 104px;

  /* Type scale. Every heading and body size on the site comes from one of
     these steps — nothing should set a one-off font-size. */
  --fs-h1: clamp(2rem, 4.4vw, 3.3rem);
  --fs-h2: 1.7rem;
  --fs-h3: 1.25rem;
  --fs-h4: 1.05rem;
  --fs-lead: 1.08rem;
  --fs-body: 0.98rem;
  --fs-body-sm: 0.95rem;
  --fs-meta: 0.85rem;
  --fs-micro: 0.72rem;
}

* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--line-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

p {
  margin: 0;
  color: var(--ink-muted);
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

/* Section grid: spine + content */

.section-grid {
  position: relative;
  border-bottom: 1px solid var(--line-faint);
}

.section-grid::before,
.section-grid::after {
  content: "";
  position: absolute;
  top: 18px;
  width: 9px;
  height: 9px;
  z-index: 1;
}

.section-grid::before {
  left: 32px;
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
}

.section-grid::after {
  right: 32px;
  border-right: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
}

.section-grid-inner {
  display: grid;
  grid-template-columns: var(--spine-w) 1fr;
  gap: 56px;
  align-items: start;
}

.spine {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 40px 16px 40px 0;
  border-right: 1px solid var(--line-strong);
  min-height: 220px;
}

.spine::after {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  right: -1px;
  width: 8px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--line-strong) 0,
    var(--line-strong) 1px,
    transparent 1px,
    transparent 16px
  );
}

.spine-index {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--signal);
}

.spine-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(239, 241, 245, 0.88);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line-faint);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Every nav item shares one type size. The CTA keeps its own horizontal
   padding, so its gap is reduced by that padding to keep the optical spacing
   between labels even across the whole nav. */
.site-nav {
  --nav-gap: 30px;
  --nav-cta-pad: 18px;
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.site-nav a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
}

.site-nav a:not(.btn) {
  color: var(--ink-muted);
  transition: color 0.15s ease;
}

.site-nav a:not(.btn):hover {
  color: var(--ink);
}

.site-nav .btn {
  margin-left: calc(var(--nav-cta-pad) * -1);
  padding: 10px var(--nav-cta-pad);
}

.logo,
.footer-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  color: var(--signal);
}

.logo {
  gap: 3px;
}

.footer-brand {
  gap: 5px;
  margin-bottom: 12px;
}

/* Meddon is the signature face. The fallbacks are script faces that ship with
   Windows/macOS, so if Google Fonts is blocked or slow the wordmark still
   reads as handwriting rather than dropping to the body or display font. */
.logo-text {
  font-family: "Meddon", "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
  font-weight: 400;
  line-height: 1;
}

.logo .logo-text {
  font-size: 1.65rem;
}

.footer-brand .logo-text {
  font-size: 2.6rem;
}

.logo-underline {
  display: block;
  overflow: visible;
}

.logo-underline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.logo .logo-underline {
  width: 68px;
  height: 9px;
}

.footer-brand .logo-underline {
  width: 100px;
  height: 13px;
}

/* Buttons */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--signal);
  color: var(--paper);
}

.btn-primary:hover {
  background: var(--signal-deep);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn-ghost:hover {
  border-color: var(--ink);
}

.btn-small {
  padding: 9px 16px;
  font-size: 0.85rem;
}

.btn-large {
  padding: 16px 32px;
  font-size: 1.05rem;
  font-family: var(--font-display);
}

/* Hero */

.hero-inner {
  padding: 96px 0 80px;
  max-width: 900px;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.hero-sub {
  font-size: 1.08rem;
  max-width: 680px;
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Signature measurement moment */

.measure {
  margin-top: 48px;
  max-width: 520px;
}

/* Sized by aspect-ratio from the viewBox (640x24) rather than a fixed height,
   so the drawing always scales uniformly. Every stroke is non-scaling, so
   line weight stays a true hairline at any width and can never thicken into
   a filled-looking shape. */
.measure-svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
}

.measure-line,
.measure-tick {
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0.55;
}

.measure-arrow {
  fill: var(--ink);
  stroke: none;
  opacity: 0.55;
}

.measure-line-open {
  stroke: var(--brass);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}

.measure-point {
  fill: var(--brass);
  stroke: none;
}

/* Why section */

.why-inner {
  padding: 80px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.why-text h2,
.section-head h2,
.contact-inner h2 {
  font-size: 1.7rem;
  margin-bottom: 16px;
}

.tick-rule {
  display: block;
  width: 56px;
  height: 9px;
  margin-bottom: 20px;
  overflow: visible;
}

.tick-rule line {
  stroke: var(--signal);
  stroke-width: 1;
}

.why-text p {
  margin-bottom: 16px;
}

.why-text p:last-child {
  margin-bottom: 0;
}

.why-points,
.process-steps,
.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.why-points li,
.process-steps li,
.faq-list li {
  display: flex;
  gap: 16px;
}

.point-num {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--signal);
  font-size: 0.85rem;
  padding-top: 3px;
  padding-left: 14px;
  flex-shrink: 0;
}

.point-num::before,
.service-num::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--signal);
  transform: translateY(-50%);
}

.why-points h3,
.process-steps h3,
.faq-list h3,
.service-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.why-points p,
.process-steps p,
.faq-list p {
  font-size: 0.95rem;
}

.process-inner,
.faq-inner {
  grid-template-columns: 1fr;
  max-width: 780px;
}

.process-diagram {
  margin-bottom: 48px;
}

.why-diagram {
  grid-column: 1 / -1;
  margin-top: 48px;
}

/* Technical diagrams (why-diagram, process-diagram) */

.diagram-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.diagram-block {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
}

.diagram-block-gap {
  stroke: var(--signal);
  stroke-dasharray: 4 4;
}

.diagram-block-label {
  font-family: var(--font-display);
  font-size: 11px;
  fill: var(--ink-muted);
  text-anchor: middle;
  letter-spacing: 0.04em;
}

.diagram-connector {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.diagram-leader {
  stroke: var(--signal);
  stroke-width: 1;
  opacity: 0.7;
}

.diagram-callout {
  font-family: var(--font-display);
  font-size: 11px;
  fill: var(--ink);
  text-anchor: middle;
  letter-spacing: 0.03em;
}

.diagram-callout-signal {
  fill: var(--signal);
}

.diagram-node {
  fill: var(--paper);
  stroke: var(--signal);
  stroke-width: 1.5;
}

.diagram-dim {
  stroke: var(--signal);
  stroke-width: 1;
}

/* Services */

.services-inner {
  padding: 80px 0;
}

.section-head {
  max-width: 640px;
  margin-bottom: 44px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-faint);
  border: 1px solid var(--line-faint);
}

.service-card {
  background: var(--paper);
  padding: 32px 30px;
  transition: background-color 0.15s ease;
}

.service-card:last-child {
  grid-column: 1 / -1;
}

.service-card:hover {
  background: rgba(30, 67, 214, 0.045);
}

.service-num {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--signal);
  font-size: 0.8rem;
  margin-bottom: 14px;
  padding-left: 14px;
  width: fit-content;
}

.service-card p {
  font-size: 0.95rem;
}

.page-links {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-link {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--signal);
  width: fit-content;
}

.page-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--signal);
}

.page-link-inline {
  color: var(--signal);
  font-family: var(--font-display);
  font-size: inherit;
}

.page-link-inline:hover {
  text-decoration: underline;
  text-decoration-color: var(--signal);
}

/* Contact */

.contact-inner {
  padding: 80px 0;
  max-width: 640px;
}

.contact-inner > p:first-of-type {
  margin-bottom: 32px;
  font-size: 1.08rem;
}

.contact-note {
  margin-top: 22px;
  font-size: 0.85rem;
}

/* Footer */

.site-footer {
  padding: 40px 0;
}

.footer-inner {
  text-align: left;
}

.footer-note {
  max-width: 560px;
  font-size: 0.85rem;
  margin-bottom: 14px;
}

.footer-copy {
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-family: var(--font-display);
}

.footer-sep {
  margin: 0 8px;
  opacity: 0.6;
}

.footer-link {
  color: var(--signal);
}

.footer-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--signal);
}

/* ==========================================================================
   Examples page
   The three mockups inside .browser-view deliberately leave Atelo's own
   blueprint language behind — each imitates the product it represents, to
   show range. Everything in that departure is scoped under .mock-* so it
   cannot leak into the surrounding site.
   ========================================================================== */

.examples-inner {
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Columns align at the top, not centre — centring left the text block
   floating against the taller mockup with no shared baseline. */
.example {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: start;
}

.example + .example {
  border-top: 1px solid var(--line-faint);
  padding-top: 64px;
}

.example-body {
  display: flex;
  flex-direction: column;
}

.example-body h3 {
  font-size: var(--fs-h3);
  margin-bottom: 12px;
}

.example-body > p {
  font-size: var(--fs-body);
  margin-bottom: 28px;
}

/* Statistic block — the loudest element on the card, with the source
   always rendered directly beneath it. */

.stat {
  margin-top: auto;
  border-top: 1px solid var(--line-strong);
  padding-top: 20px;
}

.stat-figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.8vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--signal);
  margin-bottom: 12px;
}

.stat-claim {
  font-size: var(--fs-body-sm);
  color: var(--ink);
  margin-bottom: 12px;
  max-width: 46ch;
}

.stat-source {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

/* Browser chrome */

.browser {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 22, 31, 0.04), 0 8px 24px rgba(18, 22, 31, 0.06);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: #e8eaef;
  border-bottom: 1px solid var(--line-strong);
}

.browser-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c3c8d2;
  flex-shrink: 0;
}

.browser-url {
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 3px;
  background: #f5f6f9;
  font-family: var(--font-display);
  font-size: 0.62rem;
  color: #6b7385;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A browser window is wider than it is tall, so 16:10 reads as a real one.
   `min-height` is a deliberate guard: if `aspect-ratio` is unsupported or
   ignored, the frame still has real height instead of collapsing to nothing
   and rendering the card as text only. */
.browser-view {
  aspect-ratio: 16 / 10;
  min-height: 300px;
  overflow: hidden;
  position: relative;
}

/* Diagram panel — used by the two backend cards (integrations, ML pipeline)
   instead of browser chrome. These concepts have no screen to show, so they
   stay inside Atelo's own drafting language: a title block rather than a
   window bar. */

.diagram-panel {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
}

.diagram-panel-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-strong);
  background: rgba(174, 182, 196, 0.16);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.diagram-panel-id {
  font-weight: 600;
  color: var(--signal);
}

.diagram-panel-title {
  color: var(--ink-muted);
}

.diagram-panel-view {
  aspect-ratio: 16 / 10;
  min-height: 300px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagram-panel-view .diagram-svg {
  width: 100%;
  height: 100%;
}

.diagram-block-hub {
  stroke: var(--signal);
}

.diagram-label-hub {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  fill: var(--signal);
  text-anchor: middle;
  letter-spacing: 0.06em;
}

.diagram-flow {
  stroke: var(--signal);
  stroke-width: 1;
  opacity: 0.85;
}

.diagram-arrowhead {
  fill: var(--signal);
}

.diagram-item {
  fill: rgba(30, 67, 214, 0.09);
  stroke: var(--line-strong);
  stroke-width: 1;
}

/* --- Mockup 1: cafe website (warm, editorial) --- */

.mock-cafe {
  background: #f6f1e8;
  font-family: "Fraunces", Georgia, serif;
  color: #3a2b20;
  display: flex;
  flex-direction: column;
}

.cafe-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #e3d8c7;
}

.cafe-logo {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.cafe-links {
  display: flex;
  gap: 7px;
}

.cafe-links i {
  display: block;
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background: #c8b49a;
}

.cafe-hero {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 14px;
  padding: 16px;
  flex: 1;
  align-items: center;
}

.cafe-kicker {
  font-family: var(--font-body);
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  color: #9c7f5f;
  margin-bottom: 8px;
}

.cafe-title {
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.15;
  color: #4a3626;
  margin-bottom: 12px;
}

.cafe-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
  color: #f6f1e8;
  background: #6b4a2f;
  padding: 6px 12px;
  border-radius: 999px;
}

.cafe-hero-img {
  height: 100%;
  min-height: 84px;
  border-radius: 4px;
  background:
    radial-gradient(circle at 62% 38%, #b98d5f 0 18%, transparent 19%),
    linear-gradient(160deg, #8a6242 0%, #6b4a2f 60%, #513526 100%);
}

.cafe-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 16px 16px;
}

.cafe-tile {
  height: 40px;
  border-radius: 3px;
}

.cafe-tile:nth-child(1) { background: linear-gradient(150deg, #c8a273, #a97f52); }
.cafe-tile:nth-child(2) { background: linear-gradient(150deg, #9db08a, #74886a); }
.cafe-tile:nth-child(3) { background: linear-gradient(150deg, #d9c3a5, #bfa17c); }

/* --- Mockup 2: dashboard (clean, product UI) --- */

.mock-dash {
  background: #f7f8fa;
  font-family: "Public Sans", system-ui, sans-serif;
  display: flex;
}

.dash-side {
  width: 38px;
  background: #16213a;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.dash-side-mark {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #4d7cff;
  margin-bottom: 4px;
}

.dash-side i {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: #33405e;
}

.dash-side i.on { background: #7f9cff; }

.dash-main {
  flex: 1;
  padding: 12px 14px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dash-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: #16213a;
}

.dash-chip {
  font-size: 0.52rem;
  color: #5b6478;
  background: #eceff5;
  border-radius: 999px;
  padding: 3px 8px;
}

.dash-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}

.dash-tile {
  background: #fff;
  border: 1px solid #e4e8f0;
  border-radius: 5px;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dash-k {
  font-size: 0.5rem;
  color: #737d92;
}

.dash-v {
  font-size: 0.8rem;
  font-weight: 600;
  color: #16213a;
  font-variant-numeric: tabular-nums;
}

.dash-d {
  font-size: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.dash-d.up { color: #1c8b5a; }
.dash-d.down { color: #b4462f; }

.dash-chart {
  background: #fff;
  border: 1px solid #e4e8f0;
  border-radius: 5px;
  padding: 8px;
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dash-chart svg {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.dash-chart polyline {
  fill: none;
  stroke: #4d7cff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
  margin-top: 8px;
  flex-shrink: 0;
}

.dash-bars i {
  flex: 1;
  background: #dbe3f6;
  border-radius: 2px 2px 0 0;
}

/* --- Mockup 3: chat widget (friendly, conversational) --- */

.mock-chat {
  background: #fbfbfc;
  font-family: "Public Sans", system-ui, sans-serif;
  position: relative;
}

.chat-page {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.chat-ph {
  height: 8px;
  border-radius: 3px;
  background: #e7e9ee;
}

.chat-ph.w90 { width: 90%; }
.chat-ph.w75 { width: 75%; }
.chat-ph.w60 { width: 60%; height: 13px; background: #d8dbe3; }
.chat-ph.w40 { width: 40%; }

.chat-widget {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 62%;
  max-width: 220px;
  background: #fff;
  border: 1px solid #e2e5ec;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(20, 24, 35, 0.13);
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  background: #7048d8;
  color: #fff;
}

.chat-avatar {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #b79dff;
  flex-shrink: 0;
}

.chat-name {
  font-size: 0.58rem;
  font-weight: 600;
}

.chat-status {
  margin-left: auto;
  font-size: 0.46rem;
  opacity: 0.85;
}

.chat-log {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #f7f6fb;
}

.bubble {
  font-size: 0.54rem;
  line-height: 1.45;
  padding: 5px 7px;
  border-radius: 9px;
  max-width: 88%;
}

.bubble.in {
  align-self: flex-start;
  background: #eceaf3;
  color: #2f2a3d;
  border-bottom-left-radius: 3px;
}

.bubble.out {
  align-self: flex-end;
  background: #7048d8;
  color: #fff;
  border-bottom-right-radius: 3px;
}

.bubble.typing {
  display: flex;
  gap: 3px;
  padding: 7px;
}

.bubble.typing i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

.chat-input {
  padding: 6px 9px;
  border-top: 1px solid #ececf2;
  font-size: 0.52rem;
  color: #9aa0ae;
}

/* ==========================================================================
   Work page
   Each preview hints at a demo's own visual identity without reproducing it
   in full — the real thing lives at /demos/*.html, deliberately outside this
   stylesheet, so it can look like nothing else on the Atelo site.
   ========================================================================== */

.work-inner {
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.work-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: start;
}

.work-card + .work-card {
  border-top: 1px solid var(--line-faint);
  padding-top: 64px;
}

.work-body {
  display: flex;
  flex-direction: column;
}

.work-body h3 {
  font-size: var(--fs-h3);
  margin-bottom: 12px;
}

.work-body > p {
  font-size: var(--fs-body);
  margin-bottom: 24px;
}

.work-link {
  width: fit-content;
}

.work-preview {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 16 / 10;
  min-height: 300px;
  border-radius: 8px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(18, 22, 31, 0.06), 0 8px 24px rgba(18, 22, 31, 0.08);
}

.work-preview:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(18, 22, 31, 0.1), 0 14px 32px rgba(18, 22, 31, 0.12);
}

.work-preview-tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(2px);
}

.work-preview-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.work-preview-open {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  width: fit-content;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.work-preview-cafe {
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.14) 0 1%, transparent 2%),
    linear-gradient(155deg, #c8a273 0%, #a9622f 55%, #6b4a2f 100%);
}

.work-preview-dash {
  background:
    linear-gradient(0deg, rgba(53, 224, 176, 0.14), transparent 55%),
    linear-gradient(155deg, #1b2338 0%, #0b0f17 70%);
}

.work-preview-chat {
  background: linear-gradient(150deg, #fb7185 0%, #8b5cf6 100%);
}

.work-preview-api {
  background:
    linear-gradient(0deg, rgba(56, 189, 248, 0.16), transparent 55%),
    linear-gradient(155deg, #142433 0%, #0a1420 70%);
}

.work-preview-ml {
  background:
    linear-gradient(0deg, rgba(251, 191, 36, 0.14), transparent 55%),
    linear-gradient(155deg, #241a33 0%, #150e21 70%);
}

/* Scroll reveals — quiet, instrument-language only. Progressive enhancement:
   only active once .js is present on <html>, so content is never hidden
   without JavaScript. */

.js [data-reveal] {
  opacity: 0;
  transition: opacity 0.4s ease-out 0.08s;
}

.js [data-reveal].is-visible {
  opacity: 1;
}

.js [data-reveal] line[pathLength],
.js [data-reveal] path[pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s ease-out;
}

.js [data-reveal].is-visible line[pathLength],
.js [data-reveal].is-visible path[pathLength] {
  stroke-dashoffset: 0;
}

.js .point-num::before,
.js .service-num::before {
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease-out;
}

.js [data-reveal].is-visible .point-num::before,
.js [data-reveal].is-visible .service-num::before {
  transform: translateY(-50%) scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transition: none;
  }

  .js [data-reveal] line[pathLength],
  .js [data-reveal] path[pathLength] {
    stroke-dashoffset: 0;
    transition: none;
  }

  .js .point-num::before,
  .js .service-num::before {
    transform: translateY(-50%) scaleX(1);
    transition: none;
  }
}

/* Responsive: spine collapses to a horizontal strip */

@media (max-width: 760px) {
  .header-inner {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .site-nav {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    row-gap: 12px;
  }

  /* The corner registration marks sit in the same band as the collapsed
     spine strip at this width and collide with its labels. The horizontal
     spine rule already carries the drafting language here. */
  .section-grid::before,
  .section-grid::after {
    display: none;
  }

  .section-grid-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .spine {
    position: relative;
    /* Must reset the sticky offset from the desktop rule, otherwise
       `top: 84px` still applies under `position: relative` and pushes the
       spine down over the section content. */
    top: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 0;
    margin-bottom: 8px;
    padding: 16px 0;
    border-right: none;
    border-bottom: 1px solid var(--line-strong);
  }

  .spine::after {
    top: auto;
    bottom: -1px;
    left: 0;
    right: 0;
    width: auto;
    height: 8px;
    background-image: repeating-linear-gradient(
      to right,
      var(--line-strong) 0,
      var(--line-strong) 1px,
      transparent 1px,
      transparent 16px
    );
  }

  .why-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 56px 0;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .examples-inner {
    padding: 56px 0;
    gap: 56px;
  }

  .example {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Narrower frames need more vertical room, otherwise the mockup content
     (which is laid out in flow, not scaled) is cropped by the fixed ratio. */
  .browser-view {
    aspect-ratio: 1 / 1;
    min-height: 320px;
  }

  /* Diagrams keep their wider ratio at every width — their content is drawn
     to a viewBox and scales, so it never needs the extra vertical room the
     flow-laid-out app mockups do. */
  .diagram-panel-view {
    aspect-ratio: 4 / 3;
    min-height: 240px;
    padding: 12px;
  }

  .example + .example {
    padding-top: 48px;
  }

  .work-inner {
    padding: 56px 0;
    gap: 56px;
  }

  .work-card {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .work-card + .work-card {
    padding-top: 48px;
  }

  .hero-inner {
    padding: 64px 0 56px;
  }

  .services-inner {
    padding: 56px 0;
  }

  .contact-inner {
    padding: 56px 0;
  }

  .measure-svg {
    max-width: 280px;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}