/* ─── Elliztronics shared design system ─────────────────────────────
   Clean-tech light mode. Navy text, teal accent, airy light-blue
   section backgrounds, subtle technical grid pattern, rounded cards.
   Every color lives in :root — no raw hex anywhere else in the site. */

:root {
  /* page / surface */
  --bg:          #ffffff;
  --surface:     #ffffff;
  --surface-soft:#f8fafc;   /* slate-50 */
  --tint:        #f0f9ff;   /* sky-50 — airy light-blue section bg */

  /* text */
  --fg:          #0f172a;   /* slate-900 headings */
  --fg-body:     #475569;   /* slate-600 body */
  --muted:       #64748b;   /* slate-500 */
  --faint:       #94a3b8;   /* slate-400 labels / captions */

  /* borders */
  --border:      #e2e8f0;   /* slate-200 */
  --border-soft: #f1f5f9;   /* slate-100 */

  /* accent (teal) — one accent family, used at most 2× per screen */
  --accent:      #0d9488;   /* teal-600 — primary */
  --accent-deep: #0f766e;   /* teal-700 — hover / darker */
  --accent-ink:  #115e59;   /* teal-800 — active / focus */
  --accent-soft: #f0fdfa;   /* teal-50 */
  --accent-line: #ccfbf1;   /* teal-100 */

  /* secondary cool tints (supporting, not competing accent) */
  --cyan:   #06b6d4;        /* cyan-500 */
  --sky:    #38bdf8;        /* sky-400 */
  --sky-soft: #f0f9ff;      /* sky-50 */
  --sky-ink:  #0369a1;      /* sky-700 */

  /* dark chrome (footer) */
  --ink:        #0f172a;    /* slate-900 */
  --ink-2:      #1e293b;    /* slate-800 */
  --ink-text:   #94a3b8;    /* slate-400 */
  --ink-fg:     #cbd5e1;    /* slate-300 */

  /* type — Elliztronics uses clean sans for everything,
     mono for technical specs / badges / eyebrows */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* scale */
  --fs-h1: clamp(40px, 5.4vw, 64px);
  --fs-h2: clamp(30px, 3.8vw, 44px);
  --fs-h3: 20px;
  --fs-h4: 15px;
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-meta: 13px;

  /* spacing */
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: 56px;
  --gap-2xl: 88px;
  --container: 1120px;
  --gutter: 28px;

  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}

/* ─── reset & base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; color: var(--fg); text-wrap: balance; }

/* ─── layout primitives ─────────────────────────────────────────── */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(52px, 8vw, var(--gap-2xl)); }
.section-tint { background: var(--tint); }
.section-white { background: var(--bg); }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap-md); }
.row { display: flex; align-items: center; gap: var(--gap-md); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-xl); align-items: start; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-xl); align-items: start; }
.grid-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
@media (max-width: 920px) {
  .grid-2, .grid-3, .grid-4, .grid-2-1, .grid-1-2, .grid-products { grid-template-columns: 1fr; }
}

/* ─── type ──────────────────────────────────────────────────────── */
.h1, h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; }
.h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.015em; font-weight: 600; }
.h3, h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.h4, h4 { font-family: var(--font-mono); font-size: var(--fs-h4); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-body); max-width: 60ch; margin: 0; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 var(--gap-md);
  font-weight: 600;
}
.meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ─── chrome: nav ───────────────────────────────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.topnav-inner { display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-md); padding-block: 13px; margin-inline: 0; max-width: none; }
.topnav nav { flex-wrap: nowrap; min-width: 0; margin-left: auto; }
.topnav nav > a, .topnav nav .has-menu > button { white-space: nowrap; }
.topnav .actions { flex-shrink: 0; }
.topnav .actions .btn { white-space: nowrap; }
.topnav .brand { display: inline-flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.topnav .brand, .topnav .brand-word { flex-shrink: 0; }
.topnav .brand img { flex: none; height: 34px; width: auto; object-fit: contain; }
.topnav .brand-word { display: inline-flex; align-items: center; flex: none; }
.topnav .brand-word img { flex: none; height: 18px; width: auto; object-fit: contain; }
.topnav nav { display: flex; align-items: center; gap: 4px; }
.topnav nav > a, .topnav nav .has-menu > button {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px; font-size: 14px; font-weight: 500;
  color: var(--fg-body); border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.topnav nav > a:hover, .topnav nav .has-menu > button:hover { color: var(--accent-deep); background: var(--accent-soft); }
.topnav nav > a.active, .topnav nav .has-menu > button.active {
  color: var(--accent-deep); background: var(--accent-soft); font-weight: 600;
}
.topnav .menu { position: relative; }
.topnav .menu-panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 240px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 32px -16px rgba(15,23,42,.25);
  display: none; flex-direction: column; gap: 2px;
}
/* Hover bridge — an invisible strip spanning the 8px gap between the button
   and the panel so the dropdown stays open while the pointer travels across
   it (no flicker/close on the way in). Part of .menu, so it keeps :hover. */
.topnav .menu-panel::before {
  content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}
.topnav .menu:hover .menu-panel, .topnav .menu:focus-within .menu-panel { display: flex; }
.topnav .menu-panel a { padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--fg-body); }
.topnav .menu-panel a:hover { background: var(--accent-soft); color: var(--accent-ink); }
.topnav .menu-panel a.active { color: var(--accent-ink); font-weight: 600; }
.topnav .actions { display: flex; align-items: center; gap: var(--gap-sm); }
.topnav .hamburger, .topnav .compact-menu { display: none; }

/* Three header tiers. Never let items overlap — when the full nav + both
   CTAs stop fitting, switch to a deliberate compact header (Menu dropdown +
   primary CTA) before collapsing to the mobile hamburger. */
@media (min-width: 1281px) {
  .topnav nav { display: flex; }
}
/* Tier 2 — compact: hide the inline nav row + secondary CTA, show a Menu
   dropdown with the primary Quote CTA still visible. Nothing overlaps. */
@media (max-width: 1280px) and (min-width: 1121px) {
  .topnav nav { display: none; }
  .topnav .actions .compact-menu { display: inline-flex; }
  .topnav .actions .hamburger { display: none !important; }
  .topnav .actions { margin-left: auto; }
}
/* Tier 3 — mobile: full hamburger. */
@media (max-width: 1120px) {
  .topnav nav { display: none; }
  .topnav .actions > .btn:not(.hamburger):not(.compact-menu) { display: none; }
  .topnav .hamburger { display: inline-flex; }
  .topnav .actions { margin-left: auto; }
}

/* mobile / compact dropdown — an overlay that drops below the sticky header,
   so it never pushes page content and works for both the compact Menu button
   (tier 2) and the hamburger (tier 3) without them fighting each other. */
.mobile-menu {
  display: none; flex-direction: column; gap: 2px;
  position: absolute; top: 100%; left: 0; right: 0;
  border-top: 1px solid var(--border-soft);
  padding: 10px var(--gutter) 20px; background: var(--bg);
  box-shadow: 0 24px 48px -24px rgba(15,23,42,.28);
  max-height: calc(100vh - 62px); overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu > a, .mobile-menu .sub-toggle {
  padding: 13px 6px; font-size: 16px; font-weight: 500; color: var(--fg-body);
  border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.mobile-menu .sub-toggle { width: 100%; background: none; border: 0; }
.mobile-menu .sub { display: none; flex-direction: column; padding-left: 12px; border-left: 2px solid var(--accent-line); margin-left: 6px; }
.mobile-menu .sub.open { display: flex; }
.mobile-menu .sub a { padding: 12px 10px; font-size: 15px; color: var(--fg-body); border-radius: 8px; }
.mobile-menu .sub a:hover { background: var(--accent-soft); }
.mobile-menu .divider { height: 1px; background: var(--border-soft); margin: 10px 0; }
/* Allow the dropdown overlay to open in the compact tier too (Menu button). */
@media (min-width: 1121px) {
  .mobile-menu.open { display: flex; }
}

/* ─── chrome: footer ────────────────────────────────────────────── */
.pagefoot { background: var(--ink); color: var(--ink-text); padding-block: var(--gap-xl); }
.pagefoot .brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.pagefoot .mark { height: 44px; width: auto; object-fit: contain; }
.pagefoot .brand-word img { flex: none; height: 20px; width: auto; object-fit: contain; }
.pagefoot a { color: var(--ink-fg); transition: color .15s ease; }
.pagefoot a:hover { color: var(--accent); }
.pagefoot h4 { color: var(--ink-text); }
.pagefoot ul { display: flex; flex-direction: column; gap: 12px; }
.pagefoot .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gap-xl); }
@media (max-width: 920px) { .pagefoot .foot-grid { grid-template-columns: 1fr; } }

/* ─── breadcrumbs ───────────────────────────────────────────────── */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-deep); }
.crumbs .sep { color: var(--faint); }
.crumbs .here { color: var(--fg-body); font-weight: 600; }

/* ─── buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px;
  border: 1px solid transparent; font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
  min-height: 44px;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-secondary { background: transparent; color: var(--accent-deep); border-color: var(--accent-deep); }
.btn-secondary:hover { background: var(--accent-soft); border-color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--fg-body); border-color: transparent; padding-inline: 6px; }
.btn-ghost:hover { color: var(--accent-deep); }
.btn-arrow::after { content: '→'; transition: transform .15s ease; }
.btn-arrow:hover::after { transform: translateX(3px); }
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.link-quiet { font-weight: 600; color: var(--accent-deep); }
.link-quiet:hover { color: var(--accent-ink); }

/* ─── card / surface ────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.card-flat { background: transparent; border: 0; padding: 0; }
.card-rule { background: transparent; border: 0; border-top: 1px solid var(--fg); padding: 22px 0 0; border-radius: 0; }
.card-raised { transition: transform .18s ease, box-shadow .18s ease; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.card-raised:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -18px rgba(15,23,42,.3); }

/* ─── feature cell ──────────────────────────────────────────────── */
.feature { display: flex; flex-direction: column; gap: 10px; }
.feature .feature-mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 12px; color: var(--accent-deep); margin-bottom: 6px;
}
.feature .feature-mark svg { width: 22px; height: 22px; }
.feature h3 { margin-bottom: 4px; font-family: var(--font-display); font-size: 19px; }
.feature p  { margin: 0; color: var(--fg-body); font-size: 15px; }

/* ─── category card ─────────────────────────────────────────────── */
.cat-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -20px rgba(15,23,42,.3); border-color: var(--accent-line); }
.cat-card .cat-icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 12px; color: var(--accent-deep);
}
.cat-card .cat-icon svg { width: 22px; height: 22px; }
.cat-card .cat-img {
  position: relative; overflow: hidden; display: block;
  aspect-ratio: 4 / 3; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-soft), var(--sky-soft));
  border: 1px solid var(--border-soft);
}
.cat-card .cat-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cat-card h3 { font-family: var(--font-display); font-size: 20px; }
.cat-card p { color: var(--fg-body); font-size: 15px; }
.cat-card .cat-link { margin-top: auto; font-weight: 600; font-size: 14px; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 6px; }
.cat-card .cat-link:hover { color: var(--accent-ink); }

/* ─── product card ──────────────────────────────────────────────── */
.product-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -20px rgba(15,23,42,.3); }
.product-card .product-img {
  aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, var(--accent-soft), var(--sky-soft));
  border: 1px solid var(--border-soft); display: grid; place-items: center;
  color: var(--muted); font-family: var(--font-mono); font-size: 12px; text-align: center; padding: 12px;
}

/* image-upload placeholder — a real photo slot that renders as a finished
   image. The shared shell injects an <img src="photo-placeholder.jpg"> so the
   editor sees an image element (and offers "upload image", like the hero).
   Replace the asset to swap it. */
.product-img.img-upload,
.ph-img.img-upload {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-soft), var(--sky-soft));
  border: 1px solid var(--border-soft);
}
.product-img.img-upload { display: block; }
.product-img.img-upload img,
.ph-img.img-upload img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.product-img.img-upload:hover,
.ph-img.img-upload:hover { border-color: var(--border); }
.product-img.img-upload svg,
.ph-img.img-upload svg,
.product-img.img-upload span,
.ph-img.img-upload span { display: none; }
.product-card .pc-flags { display: flex; flex-wrap: wrap; gap: 8px; }
.product-card h3 { font-family: var(--font-display); font-size: 18px; }
.product-card .pc-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); }
.product-card .pc-desc { color: var(--fg-body); font-size: 14px; }
.product-card .pc-meta { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 6px; }
.product-card .pc-meta .row { font-size: 13px; color: var(--muted); }
.product-card .pc-meta .row strong { color: var(--fg-body); font-weight: 600; }
.product-card .pc-actions { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border-soft); padding-top: 14px; }

/* ─── pill / badge / tag ────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid var(--accent-line); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}
.pill-teal { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.pill-sky { background: var(--sky-soft); color: var(--sky-ink); border-color: var(--sky); }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; background: transparent; color: var(--fg-body);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
}
.tech-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; color: var(--accent-ink);
}
.tech-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ─── quote callout / testimonial ───────────────────────────────── */
.quote {
  font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35; letter-spacing: -0.01em; color: var(--fg); max-width: 46ch;
}
.quote-mark { color: var(--accent); font-family: var(--font-display); font-size: 64px; line-height: .6; margin-bottom: 14px; }
.quote-author { color: var(--muted); font-size: 14px; margin-top: var(--gap-md); }
.tcard { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
.tcard .stars { color: var(--accent); letter-spacing: 2px; font-size: 14px; }
.tcard p { color: var(--fg-body); font-size: 15px; line-height: 1.6; }
.tcard .t-author { display: flex; align-items: center; gap: 12px; }
.tcard .t-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; font-family: var(--font-mono); font-size: 14px; }
.tcard .t-name { font-weight: 600; color: var(--fg); font-size: 14px; }
.tcard .t-role { color: var(--muted); font-size: 13px; }

/* ─── data table ────────────────────────────────────────────────── */
.ds-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ds-table th, .ds-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.ds-table th { color: var(--muted); font-weight: 600; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.ds-table tbody tr:hover { background: var(--surface-soft); }
.ds-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.ds-table td strong { color: var(--fg); }

/* ─── image placeholder ─────────────────────────────────────────── */
.ph-img {
  background: linear-gradient(135deg, var(--accent-soft), var(--sky-soft)), var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10; display: grid; place-items: center; text-align: center;
  color: var(--muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; padding: 16px;
}
.ph-img.square   { aspect-ratio: 1 / 1; }
.ph-img.portrait { aspect-ratio: 3 / 4; }
.ph-img.wide     { aspect-ratio: 16 / 9; }
.ph-img.product  { aspect-ratio: 4 / 3; border-radius: 12px; }
.ph-img svg { width: 28px; height: 28px; stroke: var(--muted); margin-bottom: 8px; }

/* ─── divider ───────────────────────────────────────────────────── */
.rule  { border: 0; border-top: 1px solid var(--border); margin: 0; }
.rule-strong { border: 0; border-top: 1px solid var(--fg); margin: 0; }

/* ─── hero variants ─────────────────────────────────────────────── */
.hero { padding-block: clamp(72px, 11vw, 148px); }
.hero-center { text-align: center; max-width: 34ch; margin-inline: auto; }
.hero h1 { margin-bottom: var(--gap-md); }
.hero .lead { margin: 0 auto var(--gap-lg); }
.hero-cta { display: inline-flex; gap: var(--gap-sm); flex-wrap: wrap; }
.hero-center .hero-cta { justify-content: center; }
.hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--gap-2xl); align-items: center; }
@media (max-width: 920px) { .hero-split { grid-template-columns: 1fr; } }
.hero-copy > * + * { margin-top: var(--gap-md); }
.hero-copy .hero-cta, .hero-copy .row { margin-top: 28px; }
.hero-copy .pills { gap: 16px; flex-wrap: wrap; }
.hero-shot { margin: 0; position: relative; overflow: hidden; }
.hero-shot img { width: 100%; display: block; transform: scale(1.06); transform-origin: center; -webkit-mask-image: radial-gradient(128% 128% at 50% 40%, #000 62%, transparent 94%); mask-image: radial-gradient(128% 128% at 50% 40%, #000 62%, transparent 94%); }
.hero-shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; pointer-events: none; background: linear-gradient(to top, var(--bg) 0%, color-mix(in oklch, var(--bg) 58%, transparent) 45%, transparent 100%); }

/* technical grid bg */
.gridbg {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(13,148,136,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,148,136,.06) 1px, transparent 1px);
  background-size: 52px 52px;
}

/* ─── step list (custom printing) ───────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-lg); counter-reset: step; }
@media (max-width: 920px) { .steps { grid-template-columns: 1fr; } }
/* 5-step variant: 3 across the top, 2 across the bottom (no clipping). */
.steps.steps-5 { grid-template-columns: repeat(6, 1fr); gap: var(--gap-md) var(--gap-lg); }
.steps.steps-5 .step { grid-column: span 2; }
.steps.steps-5 .step:nth-child(4), .steps.steps-5 .step:nth-child(5) { grid-column: span 3; }
@media (max-width: 920px) {
  .steps.steps-5 { grid-template-columns: 1fr; }
  .steps.steps-5 .step, .steps.steps-5 .step:nth-child(4), .steps.steps-5 .step:nth-child(5) { grid-column: auto; }
}
.step { position: relative; padding-top: 20px; border-top: 2px solid var(--accent-line); }
.step .step-num { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent-deep); letter-spacing: .06em; }
.step h3 { margin: 8px 0 6px; font-family: var(--font-display); font-size: 18px; }
.step p { color: var(--fg-body); font-size: 14px; }

/* ─── pricing teaser (custom printing) ─────────────────────────── */
.pricing-teaser { padding-block: clamp(44px, 6vw, 72px); }
.pricing-teaser .grid-2 { align-items: center; gap: var(--gap-xl); }
.price-num {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--fg);
  margin: 4px 0 6px;
}
.price-num .cur { color: var(--accent-deep); }
.price-sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.spec-card { display: flex; flex-direction: column; gap: 18px; }
.spec-card .ph-img { aspect-ratio: 16 / 9; }
.spec-list { display: flex; flex-direction: column; margin: 0; }
.spec-list .spec { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.spec-list .spec:last-child { border-bottom: 0; }
.spec-list .spec dt { color: var(--muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.spec-list .spec dd { margin: 0; color: var(--fg); font-weight: 600; text-align: right; }
.pricing-disclaimer { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 46ch; }

/* ─── log row ───────────────────────────────────────────────────── */
.log-row { display: grid; grid-template-columns: 130px 1fr; gap: var(--gap-lg); padding: 22px 0; border-top: 1px solid var(--border); align-items: baseline; }
.log-row .meta { color: var(--muted); }
.log-row h3 { font-size: 18px; }
@media (max-width: 920px) { .log-row { grid-template-columns: 1fr; gap: 4px; } }

/* ─── form ──────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; color: var(--fg-body); font-weight: 600; }
.input, .textarea, .select {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--fg); font: inherit; font-size: 15px;
}
.input:focus, .textarea:focus, .select:focus {
  outline: 2px solid var(--accent-line); border-color: var(--accent);
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.info-note { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface-soft); font-size: 14px; color: var(--fg-body); line-height: 1.6; }

/* ─── page head (inner pages) ───────────────────────────────────── */
.page-head { padding-block: clamp(44px, 6vw, 72px) clamp(32px, 4vw, 48px); background: var(--tint); border-bottom: 1px solid var(--border); }
.page-head .container { display: flex; flex-direction: column; gap: var(--gap-md); }
.page-head h1 { max-width: 22ch; }

/* utilities */
.mt-0 { margin-top: 0; }.mt-1 { margin-top: 8px; }.mt-2 { margin-top: 16px; }.mt-3 { margin-top: 24px; }.mt-4 { margin-top: 32px; }.mt-5 { margin-top: 48px; }.mt-6 { margin-top: 64px; }
.mb-0 { margin-bottom: 0; }.mb-1 { margin-bottom: 8px; }.mb-2 { margin-bottom: 16px; }.mb-3 { margin-bottom: 24px; }.mb-4 { margin-bottom: 32px; }
.lead-block { margin-bottom: 12px; }
.text-center { text-align: center; }
.max-w-2 { max-width: 56ch; }.max-w-3 { max-width: 68ch; }
.accent-ink { color: var(--accent-deep); }
.strong { color: var(--fg); font-weight: 600; }
.basis { flex: 1; }