/* ============================================================
   Delangge Medical — shared tech-blue theme layer (inner pages)
   Load order: inline :root tokens → assets/site.css → THIS file
   → page-specific <style>.
   Extracted from index.html so every screen shares one system:
   brand-blue fields, glass chrome, light product plates,
   deep-navy footer with a darker copyright bar, scroll progress.
   Pure token usage — no raw hex outside the page's :root block.
   ============================================================ */

/* ── utility bar: brand-blue field ───────────────────────── */
.utilbar {
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 70%, var(--deep)));
  border-bottom: 0;
  color: color-mix(in oklab, var(--accent-on) 78%, transparent);
}
.utilbar a { color: var(--accent-on); }
.utilbar a:hover { color: var(--accent-on); opacity: 0.85; }

/* ── nav on a crisp glass plate ──────────────────────────── */
.topnav {
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: color-mix(in oklab, var(--accent) 20%, var(--border));
}
.topnav .logo-chip { background: var(--surface); border: 1px solid var(--border); }
.mainnav a.is-active { color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
@media (max-width: 920px) { .mainnav a.is-active { box-shadow: none; } }

/* ── page hero: blue command band with grid + glow ───────── */
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 62% 120% at 88% -10%, color-mix(in oklab, var(--glow) 34%, transparent), transparent 60%),
    linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 62%, var(--deep)) 100%);
  border-bottom: 0;
  color: var(--accent-on);
  padding-block: clamp(52px, 6.5vw, 96px);
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in oklab, var(--accent-on) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--accent-on) 8%, transparent) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(180deg, transparent, black 40%, black 70%, transparent);
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 {
  color: var(--accent-on);
  letter-spacing: var(--tracking-display);
  max-width: 20ch;
}
.page-hero .lead { color: color-mix(in oklab, var(--accent-on) 82%, transparent); max-width: 62ch; }
.page-hero .crumb { color: color-mix(in oklab, var(--accent-on) 66%, transparent); position: relative; z-index: 1; }
.page-hero .crumb a { color: color-mix(in oklab, var(--accent-on) 82%, transparent); }
.page-hero .crumb a:hover { color: var(--accent-on); }
.page-hero .crumb .sep { opacity: 0.5; }
.page-hero .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.page-hero .btn-primary {
  background: var(--accent-on);
  color: var(--accent);
  border-color: var(--accent-on);
  box-shadow: 0 14px 36px color-mix(in oklab, var(--deep) 32%, transparent);
}
.page-hero .btn-primary:hover {
  background: color-mix(in oklab, var(--accent-on) 90%, var(--glow));
  border-color: color-mix(in oklab, var(--accent-on) 90%, var(--glow));
  color: var(--accent);
}
.page-hero .btn-secondary {
  color: var(--accent-on);
  border-color: color-mix(in oklab, var(--accent-on) 46%, transparent);
}
.page-hero .btn-secondary:hover {
  border-color: var(--accent-on);
  background: color-mix(in oklab, var(--accent-on) 12%, transparent);
  color: var(--accent-on);
}
.page-hero .proof-row {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in oklab, var(--accent-on) 22%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent-on) 78%, transparent);
}
.page-hero .proof-row span { display: inline-flex; align-items: center; gap: 8px; }
.page-hero .proof-row span::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 10px color-mix(in oklab, var(--glow) 70%, transparent);
}

/* ── section canvases: white / blue-wash / tinted / deep ─── */
.section + .section { border-top: 1px solid color-mix(in oklab, var(--accent) 10%, var(--border-soft)); }
.canvas-white { background: var(--surface); }
.canvas-wash {
  background:
    radial-gradient(ellipse 56% 48% at 100% 100%, color-mix(in oklab, var(--accent) 7%, transparent), transparent),
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 5%, var(--bg)), var(--bg));
}
.canvas-tint { background: var(--surface-warm); }
.canvas-bg { background: var(--bg); }
.band-deep {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 58% 50% at 90% 6%, color-mix(in oklab, var(--glow) 16%, transparent), transparent),
    linear-gradient(180deg, var(--deep) 0%, var(--deep-2) 100%);
  color: var(--deep-text);
  border-top: 1px solid var(--deep-border) !important;
}
.band-deep .eyebrow { color: var(--glow); }
.band-deep h2, .band-deep h3 { color: var(--deep-text); }
.band-deep p { color: var(--deep-muted); }
.band-deep .tag { background: color-mix(in oklab, var(--accent-on) 8%, transparent); border-color: var(--deep-border); color: var(--deep-text); }
.band-deep .tag strong { color: var(--glow); }
.band-deep .muted { color: var(--deep-muted); }
.band-deep .btn-secondary { color: var(--accent-on); border-color: color-mix(in oklab, var(--accent-on) 42%, transparent); }
.band-deep .btn-secondary:hover { border-color: var(--accent-on); background: color-mix(in oklab, var(--accent-on) 10%, transparent); }

/* ── section header rhythm ───────────────────────────────── */
.section-head { max-width: 68ch; }
.section-head h2 { margin-bottom: var(--space-3); }
.section-head .lead { color: var(--muted); }

/* ── product cards: white on wash, blue plate, no gray edge ─ */
.canvas-wash .product-card,
.canvas-bg .product-card {
  border: 0;
  box-shadow: 0 10px 30px color-mix(in oklab, var(--deep) 8%, transparent);
}
.product-card { transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 54px color-mix(in oklab, var(--accent) 22%, transparent);
}
.pc-media {
  background:
    radial-gradient(ellipse 70% 46% at 50% 0%, color-mix(in oklab, var(--glow) 16%, transparent), transparent),
    linear-gradient(180deg, var(--surface) 0%, color-mix(in oklab, var(--accent) 7%, var(--bg)) 100%);
}
.pc-media img { transition: transform 520ms var(--ease-standard); }
.product-card:hover .pc-media img { transform: scale(1.06); }
.pc-link { color: var(--accent); }
.product-card:hover .pc-link { text-decoration: underline; }

/* ── category cards: blue glass ──────────────────────────── */
.cat-card {
  background: color-mix(in oklab, var(--surface) 92%, var(--accent));
  border-color: color-mix(in oklab, var(--accent) 16%, var(--border-soft));
}
.cat-card:hover {
  border-color: var(--accent);
  transform: translateY(-7px);
  box-shadow: 0 18px 40px color-mix(in oklab, var(--accent) 18%, transparent);
}
.cat-card .cat-idx { color: var(--meta); }

/* ── tabs: brand-blue active state ───────────────────────── */
.tabs { border-bottom-color: color-mix(in oklab, var(--accent) 14%, var(--border)); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab:hover { color: var(--accent); }

/* ── news rows: blue hairline, title shift, arrow reveal ─── */
.log-row {
  border-top-color: color-mix(in oklab, var(--accent) 10%, var(--border-soft));
  padding-inline: var(--space-4);
  margin-inline: calc(var(--space-4) * -1);
  transition: background var(--motion-base) var(--ease-standard);
}
.log-row:hover { background: color-mix(in oklab, var(--surface) 78%, var(--accent)); }
.log-row a { display: block; }
.log-row a h3 { transition: color var(--motion-fast) var(--ease-standard), transform 320ms var(--ease-standard); }
.log-row a:hover h3 { color: var(--accent); transform: translateX(6px); }
.log-row .log-cat { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.log-row .log-arrow {
  font-family: var(--font-mono);
  color: var(--accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}
.log-row:hover .log-arrow { opacity: 1; transform: none; }
@media (max-width: 760px) { .log-row .log-cat { justify-content: flex-start; } }

/* ── spec table + gallery on light plates ────────────────── */
.table-scroll { border-color: color-mix(in oklab, var(--accent) 18%, var(--border)); background: var(--surface); }
.ds-table th { background: color-mix(in oklab, var(--accent) 7%, var(--surface)); color: var(--meta); }
.ds-table tbody tr:hover td { background: color-mix(in oklab, var(--accent) 6%, transparent); }
.gallery-main, .gthumb {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in oklab, var(--glow) 14%, transparent), transparent),
    linear-gradient(180deg, var(--surface) 0%, color-mix(in oklab, var(--accent) 7%, var(--bg)) 100%);
  border-color: color-mix(in oklab, var(--accent) 14%, var(--border-soft));
}
.gthumb:hover { border-color: var(--accent); }
.gthumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.article-figure img { border-color: color-mix(in oklab, var(--accent) 16%, var(--border-soft)); }

/* ── forms: brand-blue focus ─────────────────────────────── */
.field input:focus, .field textarea:focus, .field select:focus,
.input:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}
.form-success { border-color: color-mix(in oklab, var(--success) 40%, var(--border)); background: color-mix(in oklab, var(--success) 8%, var(--surface)); color: var(--fg); }

/* ── empty states: blue-tinted, honest ───────────────────── */
.empty {
  background: color-mix(in oklab, var(--surface) 88%, var(--accent));
  border-color: color-mix(in oklab, var(--accent) 34%, transparent);
}
.empty strong { color: var(--accent); }

/* ── info rows + tags ────────────────────────────────────── */
.info-row { border-top-color: color-mix(in oklab, var(--accent) 10%, var(--border-soft)); }
.info-row:last-child { border-bottom: 1px solid color-mix(in oklab, var(--accent) 10%, var(--border-soft)); }
.info-row .info-k { color: var(--meta); }
.tag { background: color-mix(in oklab, var(--accent) 6%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 22%, var(--border)); }
.tag strong { color: var(--accent); }

/* ── buttons: motion + brand-blue hover lift ─────────────── */
.btn { transition: transform var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { box-shadow: 0 10px 26px color-mix(in oklab, var(--accent) 26%, transparent); }
.btn-primary:hover { box-shadow: 0 16px 34px color-mix(in oklab, var(--accent) 34%, transparent); }
.btn:focus-visible { box-shadow: var(--focus-ring); }

/* ── CTA strip: brand-blue field + one light sweep ───────── */
.cta-strip {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 120% at 50% -20%, color-mix(in oklab, var(--glow) 42%, transparent), transparent 55%),
    linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 70%, var(--deep)) 100%);
  color: var(--accent-on);
  border-top: 0;
  text-align: center;
}
.cta-strip h2 { color: var(--accent-on); }
.cta-strip .lead { color: color-mix(in oklab, var(--accent-on) 82%, transparent); }
.cta-strip .btn-primary {
  background: var(--accent-on);
  color: var(--accent);
  border-color: var(--accent-on);
  box-shadow: 0 12px 34px color-mix(in oklab, var(--deep) 35%, transparent);
  position: relative;
  overflow: hidden;
}
.cta-strip .btn-primary:hover {
  background: color-mix(in oklab, var(--accent-on) 90%, var(--glow));
  border-color: color-mix(in oklab, var(--accent-on) 90%, var(--glow));
  color: var(--accent);
}
.cta-strip .btn-primary::after {
  content: "";
  position: absolute; top: -20%; bottom: -20%; left: -65%;
  width: 48%;
  background: linear-gradient(100deg, transparent, color-mix(in oklab, var(--accent) 34%, transparent), transparent);
  transform: skewX(-18deg);
  transition: left 560ms var(--ease-standard);
  pointer-events: none;
}
.cta-strip .btn-primary:hover::after { left: 125%; }
.cta-strip .btn-secondary { color: var(--accent-on); border-color: color-mix(in oklab, var(--accent-on) 46%, transparent); }
.cta-strip .btn-secondary:hover { border-color: var(--accent-on); background: color-mix(in oklab, var(--accent-on) 12%, transparent); color: var(--accent-on); }

/* ── scroll progress — brand line pinned under viewport top ─ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  background: linear-gradient(90deg, var(--accent), var(--glow));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ── footer: deep navy + darker copyright bar ────────────── */
.pagefoot {
  background: linear-gradient(180deg, var(--deep-2) 0%, var(--deep) 100%);
  border-top: 3px solid var(--accent);
  padding-block: var(--space-12) 0;
  color: var(--deep-muted);
  font-size: var(--text-sm);
}
.pagefoot .foot-grid h4 { color: var(--deep-text); }
.pagefoot .foot-grid a { color: var(--deep-muted); }
.pagefoot .foot-grid a:hover { color: var(--accent-on); }
.pagefoot .logo-chip { background: var(--accent-on); border: 1px solid var(--deep-border); }
.pagefoot .foot-brand p { color: var(--deep-muted); }
.pagefoot .foot-contact-line { color: var(--deep-muted); }
.pagefoot .foot-contact-line a:hover { color: var(--accent-on); }
.pagefoot .foot-bottom {
  border-top: 1px solid var(--deep-border);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--deep) 74%, black);
  color: color-mix(in oklab, var(--deep-muted) 92%, transparent);
}

/* ── parallax wrappers: compose with any other transform ─── */
[data-px] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* ── responsive collapse guards (match homepage cadence) ─── */
@media (max-width: 920px) {
  .page-hero h1 { font-size: clamp(30px, 8vw, 44px); }
}
@media (max-width: 560px) {
  .page-hero .proof-row { gap: var(--space-3); flex-direction: column; }
  .log-row { padding-inline: var(--space-2); margin-inline: calc(var(--space-2) * -1); }
}