/*
 * CYNRIN theme patch layer
 * Adds states that the source site controlled via React:
 *  - mobile nav panel visibility (the source injected the panel client-side)
 *  - lightbox chrome (re-implemented)
 *  - header scroll state
 * Loaded AFTER the bundled source stylesheet.
 */

/* ---- Desktop header layout: nav sits right beside the logo (left-aligned),
   while the Get-a-Quote CTA stays pinned to the far right.
   The source stylesheet pushed the whole nav right with margin-left:auto on
   .desktop-nav; move that spacer onto the CTA instead. ---- */
@media (min-width: 1101px) {
  .header-inner .desktop-nav { margin-left: 0; }
  .header-inner .header-cta { margin-left: auto; }
}

/* ---- Tablet + mobile navigation ----
   Breakpoint raised from 900px to 1100px: the desktop nav needs ~960px of
   header space; below that the logo and the Get-a-Quote button get crushed. */
.mobile-nav { display: none; }
.mobile-nav nav { display: none; }
.mobile-nav.is-open nav { display: grid; }
@media (max-width: 1100px) {
  .desktop-nav,
  .header-cta { display: none; }
  .mobile-nav { display: block; margin-left: auto; }
  .mobile-nav > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink, #0a0a0a);
    font-size: 28px;
    line-height: 1;
  }
  /* Anchored to the sticky header (top:100%) so it always drops below it,
     even when the announcement bar pushes the header down at page top. */
  .mobile-nav nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-top: 1px solid var(--line, #e5e6e8);
    /* bottom padding keeps the last CTA scrollable clear of the cookie bar */
    padding: 24px 24px 110px;
    gap: 16px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    z-index: 60;
  }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 900px) {
  .mobile-nav nav {
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
  }
}
.mobile-nav nav a { color: var(--ink, #0a0a0a); font-size: 15px; font-weight: 700; }
.mobile-nav .mnav-label {
  color: var(--muted, #65676b);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 6px;
}
.mobile-nav .mnav-sub { display: grid; gap: 12px; padding-left: 12px; border-left: 2px solid var(--soft, #f5f6f7); }
.mobile-nav.is-open > button svg { transform: rotate(90deg); }
.mobile-nav > button svg { transition: transform .2s ease; }

/* ---- Mega menu hover corridor + vertical anchor ----
   Panel is position:fixed (centred to viewport); its top must follow the
   sticky header. --mega-top is maintained by app.js; 80px is the no-JS
   fallback (header flush with viewport top + 8px gap). */
.mega-nav .mega-panel {
  top: calc(var(--mega-top, 80px) + 8px);
  /* Grace window: pointer-events/visibility only flip 200ms AFTER hover is
     lost. Without this, a single sampled frame in the gap between a trigger
     and the panel turns the open panel pass-through for the rest of the
     gesture (events then fall straight through it). */
  transition: opacity .2s ease,
              transform .24s cubic-bezier(.2, .8, .2, 1),
              visibility 0s linear .2s,
              pointer-events 0s linear .2s;
}
.mega-nav-item:hover .mega-panel,
.mega-nav-item:focus-within .mega-panel {
  pointer-events: auto;
  transition: opacity .2s ease,
              transform .24s cubic-bezier(.2, .8, .2, 1),
              visibility 0s linear 0s,
              pointer-events 0s linear 0s;
}
/* Invisible hover bridge reaches UP into the header band so the corridor
   from trigger to panel has no vertical hole (covers inter-trigger gaps). */
.mega-nav .mega-panel:before {
  height: 40px;
  transform: translateY(-32px);
}

/* ---- Contact section: 38%/62% columns + 80px gap overflowed the viewport
   between ~900px and ~1340px (56px horizontal scroll). fr tracks keep the
   same 38/62 proportion while accounting for the gap. The 1-column stack at
   <=900px stays defined in theme.css. ---- */
@media (min-width: 901px) {
  .contact-grid { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
  .contact-grid .field-row > label { min-width: 0; }
}

/* ---- Lightbox ---- */
.cynrin-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 7, 10, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 24px;
}
.cynrin-lightbox.is-open { display: flex; }
.cynrin-lightbox .clb-figure {
  margin: 0;
  max-width: min(1080px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cynrin-lightbox img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
  background: #0d0e10;
}
.cynrin-lightbox figcaption { color: #cfd2d6; font-size: 13px; text-align: center; }
.cynrin-lightbox button {
  position: absolute;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s ease;
}
.cynrin-lightbox button:hover { background: rgba(255, 255, 255, .2); }
.cynrin-lightbox .clb-close { top: 20px; right: 24px; font-size: 22px; }
.cynrin-lightbox .clb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.cynrin-lightbox .clb-next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .cynrin-lightbox .clb-prev { left: 8px; }
  .cynrin-lightbox .clb-next { right: 8px; }
}

/* ---- Announcement bar: re-skin the plugin's inline brand color (orange from
   announcement_background_color setting) to the AI indigo/violet palette.
   Plugin sets background-color:var(--background-color); a direct declaration
   of equal/later specificity wins without touching plugin files or DB. ---- */
.ae-anno-announcement-wrapper {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
}

/* ---- Announcement bar: stop 1-line/2-line rotation from shifting the whole
   header (and the open mobile menu) on small screens. ---- */
@media (max-width: 600px) {
  .ae-anno-announcement__content {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Flex ancestors (items track is max-width:1210px and flex items default to
     min-width:auto) would otherwise let the nowrap line push the bar past the
     viewport and create horizontal scroll. */
  .ae-anno-announcement-wrapper,
  .ae-anno-announcement,
  .ae-anno-announcement__items {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ---- Honeypot field ----
   The inquiry form ships a classic .form-honeypot{left:-9999px} hide, but
   on RTL pages a negative-left element becomes scrollable overflow and
   stretches the document to ~11280px. Clip it instead (zero footprint in
   either writing direction); it stays in the DOM for spam traps. */
.form-honeypot {
  position: absolute !important;
  left: auto !important;
  right: auto !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* ---- Header scroll state ---- */
.site-header { transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(10, 10, 10, .08); }

/* ---- Top bar (slim bar ABOVE the main navigation) ----
   The language switcher lives here instead of inside the nav row. The bar is
   position:sticky on its own; the sticky header parks 40px below it on
   desktop so both remain reachable after scrolling (no fixed positioning or
   margin compensation). Hidden at the mobile breakpoint, where the switcher
   is reached through the hamburger menu. */
.site-topbar {
  position: sticky;
  top: 0;
  z-index: 21;
  background: #f7f8f9;
  border-bottom: 1px solid var(--line, #e5e6e8);
}
.site-topbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 40px;
}
/* Contact links on the left of the top bar; the switcher is pushed to the
   far (inline-)end. Works in both LTR and RTL. */
.site-topbar-contact {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.site-topbar-contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #3c4043;
  font-size:13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: color .2s ease;
}
.site-topbar-contact a:hover { color: var(--orange, #4f46e5); }
.site-topbar-contact .ic-wa { color: #25d366; flex: 0 0 auto; }
.site-topbar-contact .ic-mail { color: #3c4043; flex: 0 0 auto; }
.site-topbar .lang-switch-topbar { margin-inline-start: auto; }
@media (max-width: 1280px) {
  .site-topbar-contact { gap: 14px; }
  .site-topbar-contact a { font-size: 12px; }
}
@media (min-width: 1101px) {
  .site-header { top: 40px; }
}
@media (max-width: 1100px) {
  .site-topbar { display: none; }
}

/* ---- Language switcher (official Botble language plugin partial) ----
   The plugin renders .language-wrapper > .dropdown > .dropdown-toggle +
   .dropdown-menu.language_bar_chooser and toggles it with its own jQuery.
   We only reskin the Bootstrap-flavoured markup to match CYNRIN. Selectors
   are scoped under .site-topbar/.site-header to outrank the plugin's
   bundled language-public.css (unknown load order). */
.site-header .lang-switch-mobile { display: none; }

.site-topbar .lang-switch .dropdown,
.site-header .lang-switch .dropdown { position: relative; height: auto; }

/* Prefix lists keep specificity (0,4,0) above the plugin's 0,3,0 rules. */
.site-topbar .lang-switch .dropdown-toggle,
.site-header .lang-switch .dropdown-toggle {
  /* !important is required: the plugin's language-public.css ships
     background/border/border-radius/color/font-size/height/padding on
     .language-wrapper .dropdown .btn with its own !important. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px !important;
  padding: 0 10px !important;
  margin: 0;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #3c4043 !important;
  font-size:13px !important;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}
.site-topbar .lang-switch .dropdown-toggle:hover,
.site-header .lang-switch .dropdown-toggle:hover { background: rgba(10, 10, 10, .05); }
.site-topbar .lang-switch .dropdown-toggle:focus-visible,
.site-header .lang-switch .dropdown-toggle:focus-visible { outline: 2px solid rgba(10, 10, 10, .35); outline-offset: 1px; }
.site-topbar .lang-switch .dropdown-toggle img.flag,
.site-header .lang-switch .dropdown-toggle img.flag,
.site-topbar .lang-switch .dropdown-toggle svg.flag,
.site-header .lang-switch .dropdown-toggle svg.flag,
.site-topbar .lang-switch .dropdown-toggle img,
.site-header .lang-switch .dropdown-toggle img { margin: 0; flex: 0 0 auto; }
.site-topbar .lang-switch .dropdown-toggle::after,
.site-header .lang-switch .dropdown-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .2s ease;
  margin-inline-start: 1px;
}
.site-topbar .lang-switch .dropdown-toggle.active::after,
.site-header .lang-switch .dropdown-toggle.active::after { transform: rotate(-135deg) translateY(-1px); }

.site-topbar .lang-switch .dropdown-menu.language_bar_chooser,
.site-header .lang-switch .dropdown-menu.language_bar_chooser {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  float: none;
  width: 210px;
  min-width: 0;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line, #e5e6e8);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(10, 10, 10, .14);
  line-height: 1.3;
  text-align: left;
  z-index: 70;
}
.site-topbar .lang-switch .dropdown-menu.language_bar_chooser li,
.site-header .lang-switch .dropdown-menu.language_bar_chooser li {
  display: block;
  float: none;
  width: 100%;
  margin: 0;
  border-radius: 8px;
}
.site-topbar .lang-switch .dropdown-menu.language_bar_chooser li:hover,
.site-header .lang-switch .dropdown-menu.language_bar_chooser li:hover { background: var(--soft, #f5f6f7); }
.site-topbar .lang-switch .dropdown-menu.language_bar_chooser li a,
.site-header .lang-switch .dropdown-menu.language_bar_chooser li a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  color: var(--ink, #0a0a0a);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.site-topbar .lang-switch .dropdown-menu.language_bar_chooser li a .flag,
.site-header .lang-switch .dropdown-menu.language_bar_chooser li a .flag,
.site-topbar .lang-switch .dropdown-menu.language_bar_chooser li a img,
.site-header .lang-switch .dropdown-menu.language_bar_chooser li a img,
.site-topbar .lang-switch .dropdown-menu.language_bar_chooser li a svg.flag,
.site-header .lang-switch .dropdown-menu.language_bar_chooser li a svg.flag {
  margin: 0;
  flex: 0 0 auto;
}

/* Contact links inside the mobile hamburger panel */
.mnav-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line, #e5e6e8);
}
.mnav-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink, #0a0a0a);
  font-size: 15px;
  font-weight: 500;
}
.mnav-contact a:hover { color: var(--orange, #4f46e5); }
.mnav-contact .ic-wa,
.mnav-contact svg { flex: 0 0 auto; }
.mnav-contact a:first-child svg { color: #25d366; }

@media (max-width: 1100px) {
  .site-header .lang-switch-mobile { display: block; }
  .site-header .lang-switch.lang-switch-mobile .dropdown { width: 100%; }
  .site-header .lang-switch.lang-switch-mobile .dropdown-toggle {
    width: 100%;
    justify-content: flex-start;
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    border: 1px solid var(--line, #e5e6e8) !important;
    background: #fff !important;
    border-radius: 999px !important;
    color: var(--ink, #0a0a0a) !important;
  }
  .site-header .lang-switch.lang-switch-mobile .dropdown-menu.language_bar_chooser {
    position: static;
    width: 100%;
    max-height: 260px;
    margin-top: 8px;
    border-radius: 10px;
    box-shadow: none;
  }
}

/* RTL (Arabic): mirror the dropdown alignment (contacts/switcher order
   flips automatically via flex + margin-inline-start). */
html[dir="rtl"] .site-topbar .lang-switch.lang-switch-topbar .dropdown-menu.language_bar_chooser,
html[dir="rtl"] .site-header .lang-switch.lang-switch-mobile .dropdown-menu.language_bar_chooser {
  right: auto;
  left: 0;
  text-align: right;
}
html[dir="rtl"] .site-topbar .lang-switch.lang-switch-topbar .dropdown-menu.language_bar_chooser li a,
html[dir="rtl"] .site-header .lang-switch.lang-switch-mobile .dropdown-menu.language_bar_chooser li a { justify-content: flex-start; flex-direction: row-reverse; }
@media (max-width: 1100px) {
  html[dir="rtl"] .site-header .lang-switch.lang-switch-mobile .dropdown-toggle { justify-content: flex-end; }
}



/* ---- Legal / trust pages (about, contact, privacy, terms, warranty...) ---- */
.legal-hero {
  padding: 72px 0 40px;
  background: linear-gradient(160deg, #eef2ff 0%, #ffffff 70%);
  border-bottom: 1px solid #e5e7eb;
}
.legal-hero-inner { max-width: 860px; }
.legal-eyebrow {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #4f46e5;
}
.legal-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  color: #111827;
}
.legal-intro { margin: 0; font-size: 1.08rem; color: #4b5563; max-width: 680px; }
.legal-wrap { max-width: 860px; margin: 0 auto; padding: 48px 20px 72px; }
.legal-section { margin-bottom: 36px; }
.legal-section h2 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  color: #111827;
}
.legal-section p { margin: 0 0 12px; color: #374151; line-height: 1.75; }
.legal-section ul, .legal-section ol { margin: 0 0 12px; padding-left: 22px; color: #374151; line-height: 1.8; }
.legal-section li { margin-bottom: 6px; }
.legal-section a { color: #4f46e5; }
.legal-cta { display: inline-block; margin-top: 8px; }
.legal-updated { margin-top: 40px; padding-top: 16px; border-top: 1px solid #e5e7eb; font-size: 0.85rem; color: #6b7280; }
.legal-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.legal-contact-grid > div {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}
.legal-contact-grid h2 { margin-bottom: 6px; font-size: 1rem; }
@media (max-width: 640px) {
  .legal-contact-grid { grid-template-columns: 1fr; }
}

/* Footer legal links */
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-legal a { color: #9ca3af; font-size: 0.85rem; }
.footer-legal a:hover { color: #fff; }
.copyright { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Themed 404 page */
.error-page { padding: 96px 0; text-align: center; }
.error-page-inner { max-width: 720px; margin: 0 auto; }
.error-code {
  margin: 0 0 8px;
  font-size: clamp(64px, 14vw, 128px);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #4f46e5, #0ea5e9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.error-page h1 { margin: 0 0 14px; font-size: clamp(26px, 4vw, 38px); color: #111827; }
.error-intro { margin: 0 auto 32px; max-width: 560px; color: #4b5563; font-size: 1.05rem; line-height: 1.7; }
.error-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 40px; }
.error-links { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.error-links a { color: #4f46e5; font-size: 0.92rem; font-weight: 600; }
.error-links a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .error-page { padding: 64px 0; }
  .error-actions .button { width: 100%; }
}

/* Semantic breadcrumbs + generic page hero */
.breadcrumb-nav { padding: 18px 0 0; font-size: 0.85rem; }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #6b7280;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: #c4c9d2; }
.breadcrumb a { color: #4f46e5; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #374151; }

/* Migrated product breadcrumb: flatten the injected ol into the original flex row */
.product_breadcrumb__uFlYp .breadcrumb { display: inline-flex; align-items: center; }
.product_breadcrumb__uFlYp .breadcrumb li:not(:last-child)::after { content: "/"; margin: 0 2px; }

.page-hero { padding: 40px 0 8px; }
.page-eyebrow { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; color: #4f46e5; }
.page-hero h1 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 42px); color: #111827; }
.page-hero-intro { margin: 0; max-width: 62ch; color: #4b5563; font-size: 1.05rem; line-height: 1.7; }

/* ============================================================
   Landing page system (B2B gap-fill batch): reusable sections
   for OEM / ODM / applications / commercial / RFQ / FAQ pages.
   ============================================================ */
.lp { color:#1f2937; }
/* Content container shared by every LP section (was undefined: pages rendered full-bleed) */
.lp-container { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.lp-hero-inner { max-width:1200px; margin:0 auto; padding:0 24px; }
.lp-hero { background:linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#312e81 100%); color:#f8fafc; padding:64px 0 56px; }
.lp-hero .lp-eyebrow { margin:0 0 12px; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#a5b4fc; }
.lp-hero h1 { margin:0 0 16px; font-size:clamp(28px,4vw,44px); line-height:1.15; color:#fff; max-width:20ch; }
.lp-hero p.lp-lead { margin:0 0 28px; max-width:60ch; font-size:1.08rem; line-height:1.75; color:#cbd5e1; }
.lp-hero-actions { display:flex; flex-wrap:wrap; gap:14px; }
.lp-btn { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:8px; font-weight:600; font-size:.95rem; cursor:pointer; border:1px solid transparent; text-decoration:none; transition:.18s ease; }
.lp-btn-primary { background:#4f46e5; color:#fff; }
.lp-btn-primary:hover { background:#4338ca; color:#fff; }
.lp-btn-ghost { background:transparent; color:#e2e8f0; border-color:rgba(226,232,240,.45); }
.lp-btn-ghost:hover { background:rgba(226,232,240,.12); color:#fff; }
.lp-btn-outline { background:#fff; color:#4f46e5; border-color:#c7d2fe; }
.lp-btn-outline:hover { background:#eef2ff; }
.lp-section { padding:56px 0; }
.lp-section.alt { background:#f8fafc; }
.lp-head { max-width:64ch; margin:0 auto 36px; text-align:center; }
.lp-eyebrow-dark { margin:0 0 10px; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#4f46e5; }
.lp-head h2 { margin:0 0 12px; font-size:clamp(23px,3vw,32px); color:#111827; }
.lp-head p { margin:0; color:#4b5563; line-height:1.7; }
.lp-grid { display:grid; gap:22px; }
.lp-grid-2 { grid-template-columns:repeat(2,1fr); }
.lp-grid-3 { grid-template-columns:repeat(3,1fr); }
.lp-grid-4 { grid-template-columns:repeat(4,1fr); }
.lp-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:26px; }
.alt .lp-card { background:#fff; }
.lp-card .lp-num { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:8px; background:#eef2ff; color:#4f46e5; font-weight:700; font-size:.9rem; margin-bottom:14px; }
.lp-card h3 { margin:0 0 8px; font-size:1.08rem; color:#111827; }
.lp-card p { margin:0; color:#4b5563; line-height:1.65; font-size:.95rem; }
.lp-card small { display:block; margin-top:12px; color:#6b7280; font-size:.82rem; }
.lp-card ul { margin:10px 0 0; padding-left:18px; color:#4b5563; font-size:.92rem; line-height:1.7; }
.lp-table-wrap { overflow-x:auto; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
table.lp-table { width:100%; border-collapse:collapse; min-width:560px; font-size:.93rem; }
.lp-table th { background:#f1f5f9; text-align:left; padding:14px 16px; font-weight:700; color:#0f172a; white-space:nowrap; }
.lp-table td { padding:13px 16px; border-top:1px solid #eef2f7; color:#374151; vertical-align:top; line-height:1.55; }
.lp-table tbody tr:hover { background:#f8fafc; }
.lp-table .lp-tag { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.78rem; font-weight:600; }
.lp-tag-yes { background:#dcfce7; color:#166534; }
.lp-tag-opt { background:#fef9c3; color:#854d0e; }
.lp-tag-cond { background:#e0e7ff; color:#3730a3; }
.lp-steps { list-style:none; margin:0; padding:0; counter-reset:lpstep; display:grid; gap:14px; }
.lp-steps li { position:relative; padding:18px 20px 18px 62px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; counter-increment:lpstep; }
.lp-steps li::before { content:counter(lpstep); position:absolute; left:18px; top:18px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#4f46e5; color:#fff; font-weight:700; font-size:.85rem; }
.lp-steps strong { display:block; color:#111827; margin-bottom:3px; }
.lp-steps span { color:#6b7280; font-size:.9rem; line-height:1.6; }
.lp-rich { max-width:760px; }
.lp-rich h2 { font-size:1.5rem; color:#111827; margin:0 0 14px; }
.lp-rich h3 { font-size:1.12rem; color:#111827; margin:24px 0 8px; }
.lp-rich p { color:#4b5563; line-height:1.8; margin:0 0 14px; }
.lp-rich ul { color:#4b5563; line-height:1.8; padding-left:20px; margin:0 0 14px; }
.lp-note { display:flex; gap:12px; background:#fffbeb; border:1px solid #fde68a; color:#92400e; padding:14px 18px; border-radius:10px; font-size:.9rem; line-height:1.6; margin:20px 0; }
.lp-faq { max-width:840px; margin:0 auto; }
.lp-faq details { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:0 20px; margin-bottom:12px; }
.lp-faq summary { cursor:pointer; font-weight:600; color:#111827; padding:18px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.lp-faq summary::-webkit-details-marker { display:none; }
.lp-faq summary::after { content:"+"; font-size:1.4rem; color:#4f46e5; font-weight:400; }
.lp-faq details[open] summary::after { content:"–"; }
.lp-faq details p { margin:0 0 18px; color:#4b5563; line-height:1.75; font-size:.95rem; }
.lp-cta { background:#0f172a; color:#f8fafc; border-radius:16px; padding:48px 40px; text-align:center; }
.lp-cta h2 { color:#fff; font-size:clamp(22px,3vw,30px); margin:0 0 12px; }
.lp-cta p { color:#cbd5e1; max-width:56ch; margin:0 auto 26px; line-height:1.7; }
.lp-cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.lp-crumbs { padding:16px 0 0; }
.lp-crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; font-size:.84rem; color:#6b7280; }
.lp-crumbs li { display:inline-flex; align-items:center; gap:8px; }
.lp-crumbs li:not(:last-child)::after { content:"/"; color:#cbd5e1; }
.lp-crumbs a { color:#4f46e5; text-decoration:none; }
.lp-crumbs a:hover { text-decoration:underline; }
.lp-specgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.lp-stat { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:24px; text-align:center; }
.lp-stat strong { display:block; font-size:1.7rem; color:#4f46e5; margin-bottom:6px; }
.lp-stat span { color:#6b7280; font-size:.88rem; }
.lp-productline { display:flex; flex-wrap:wrap; gap:14px; }
.lp-pick { flex:1 1 240px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:22px; }
.lp-pick h3 { margin:0 0 6px; font-size:1.05rem; }
.lp-pick .lp-model { color:#4f46e5; font-weight:700; font-size:.85rem; letter-spacing:.04em; }
.lp-pick p { color:#4b5563; font-size:.9rem; line-height:1.6; margin:8px 0 14px; }
.lp-pick a { color:#4f46e5; font-weight:600; font-size:.9rem; text-decoration:none; }
.lp-pick a:hover { text-decoration:underline; }
.lp-rfq-form { display:grid; gap:16px; max-width:760px; margin:0 auto; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:30px; }
.lp-rfq-form .field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lp-rfq-form label { display:block; font-size:.86rem; font-weight:600; color:#374151; }
.lp-rfq-form input,.lp-rfq-form select,.lp-rfq-form textarea { width:100%; margin-top:6px; padding:11px 13px; border:1px solid #d1d5db; border-radius:8px; font-size:.94rem; font-family:inherit; }
.lp-rfq-form textarea { min-height:110px; resize:vertical; }
.lp-rfq-form input:focus,.lp-rfq-form select:focus,.lp-rfq-form textarea:focus { outline:2px solid #c7d2fe; border-color:#4f46e5; }
.lp-trust { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:26px; }
.lp-trust div { background:rgba(255,255,255,.06); border:1px solid rgba(226,232,240,.18); border-radius:10px; padding:18px; }
.lp-trust b { display:block; color:#fff; font-size:.95rem; margin-bottom:4px; }
.lp-trust span { color:#aab4c3; font-size:.82rem; line-height:1.5; }
/* Anchor pills render on the white page band directly under the dark hero,
   so use a light-theme treatment (the old dark-on-white pills were unreadable). */
.lp-anchornav { display:flex; flex-wrap:wrap; gap:10px; max-width:1200px; margin:0 auto; padding:20px 24px 4px; }
.lp-anchornav a { font-size:.85rem; font-weight:600; color:#4338ca; text-decoration:none; background:#eef2ff; border:1px solid #e0e7ff; padding:7px 16px; border-radius:999px; transition:.18s ease; }
.lp-anchornav a:hover { background:#e0e7ff; border-color:#c7d2fe; color:#3730a3; }
@media (max-width:900px){
  .lp-grid-3,.lp-grid-4,.lp-specgrid,.lp-trust { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .lp-grid-2,.lp-grid-3,.lp-grid-4,.lp-specgrid,.lp-trust { grid-template-columns:1fr; }
  .lp-rfq-form .field-row { grid-template-columns:1fr; }
  .lp-section { padding:40px 0; }
  .lp-hero { padding:44px 0 40px; }
  .lp-cta { padding:36px 22px; }
}

/* ===== 2026-10-13 main navigation rebuild ===== */
.site-topbar-note{font-size:11px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-topbar-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.site-topbar-track{font-size:11px;font-weight:700;color:#374151;white-space:nowrap}
.site-topbar-track:hover{color:var(--orange)}
.mega-nav-plain{display:inline-flex;align-items:center;white-space:nowrap}
.footer-contact-row{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.footer-address{margin-top:2px}
.footer-sub{padding-top:18px;margin-top:34px;border-top:1px solid #252525}
.footer-buyterms{display:flex;flex-wrap:wrap;gap:10px 26px}
.footer-buyterms a{color:#8c8c8c;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.footer-buyterms a:hover{color:#fff}
@media (max-width:900px){
  .site-topbar-note{display:none}
}

/* ===== 2026-10-13 compact dropdowns (Manufacturing / Applications / About) =====
   Single-column panels anchored to their trigger (not the viewport-centred
   mega-panel). Reserved for short, single-theme link groups so the primary
   navigation mixes large mega panels with lean dropdowns instead of forcing
   every item into the same two-column-plus-image template. */
.nav-item-simple{height:100%;display:flex;align-items:center;position:relative}
.nav-trigger-simple{height:100%;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.nav-trigger-simple svg{font-size:12px;transition:transform .22s ease}
.nav-item-simple:focus-within .nav-trigger-simple,
.nav-item-simple:hover .nav-trigger-simple{color:var(--orange)}
.nav-item-simple:focus-within .nav-trigger-simple svg,
.nav-item-simple:hover .nav-trigger-simple svg{transform:rotate(180deg)}
.simple-panel{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,8px);
  min-width:248px;padding:8px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(229,230,232,.9);border-radius:16px;
  box-shadow:0 24px 60px rgba(19,24,32,.16),0 3px 12px rgba(19,24,32,.06);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .2s cubic-bezier(.2,.8,.2,1),visibility .18s;
  z-index:40;
}
/* hover bridge closes the vertical gap between trigger and panel */
.simple-panel:before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-item-simple:focus-within > .simple-panel,
.nav-item-simple:hover > .simple-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)
}
.simple-link{display:block;padding:9px 12px;border-radius:10px}
.simple-link span{display:block;color:#111;font-size:13px;font-weight:700;line-height:1.3}
.simple-link small{display:block;margin-top:3px;color:#74777c;font-size:10px;line-height:1.35}
.simple-link:focus-visible,.simple-link:hover{background:rgba(245,246,247,.95);outline:none}
.simple-sep{height:1px;background:#eef0f2;margin:5px 10px}
@media (max-width:1100px){
  .simple-panel{left:auto;right:0;transform:translate(10px,8px)}
  .nav-item-simple:focus-within > .simple-panel,
  .nav-item-simple:hover > .simple-panel{transform:translate(10px,0)}
}

/* ===== 2026-10-13 grouped compact panels + second-level flyout (IA consolidation) =====
   Only Products keeps a mega panel. OEM & ODM and Resources use grouped compact
   dropdowns; Manufacturing becomes a left-opening flyout under About. All panels
   stay single-column and image-free — no mega template reuse. */
.simple-group-label{
  display:block;margin:8px 12px 3px;
  color:#9aa0a7;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.simple-group-label:first-child{margin-top:4px}
/* flyout parent row: title + chevron, hosts a nested .simple-panel */
.simple-hasfly{position:relative}
.simple-hasfly > .simple-link{position:relative;padding-right:30px}
.simple-hasfly .simple-link{padding-right:30px}
a.simple-link[href]{cursor:pointer}
.simple-flylabel{
  display:block;padding:9px 30px 9px 12px;border-radius:10px;
  color:#111;font-size:13px;font-weight:700;line-height:1.3;cursor:default;position:relative;
}
.simple-flylabel small{display:block;margin-top:3px;color:#74777c;font-size:10px;font-weight:400;line-height:1.35}
.simple-flylabel:after{
  content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;
  border-right:1.6px solid #9aa0a7;border-bottom:1.6px solid #9aa0a7;
  transform:translateY(-50%) rotate(-45deg);
}
.simple-hasfly:hover .simple-flylabel,
.simple-hasfly:focus-within .simple-flylabel{background:rgba(245,246,247,.95)}
.simple-hasfly:hover .simple-flylabel:after,
.simple-hasfly:focus-within .simple-flylabel:after{border-color:var(--orange)}
.simple-hasfly > .simple-link:after{
  content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;
  border-right:1.6px solid #9aa0a7;border-bottom:1.6px solid #9aa0a7;
  transform:translateY(-50%) rotate(-45deg);
}
/* nested panel opens to the RIGHT (left edge anchors to parent's right edge) */
.simple-hasfly > .simple-panel{
  top:-9px;left:calc(100% + 6px);right:auto;
  transform:translate(-8px,0);min-width:236px;
}
.simple-hasfly > .simple-panel:before{left:-14px;right:auto;top:0;bottom:0;height:auto;width:14px}
.simple-hasfly:focus-within > .simple-panel,
.simple-hasfly:hover > .simple-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,0);
}
.simple-hasfly:focus-within > .simple-link,
.simple-hasfly:hover > .simple-link{background:rgba(245,246,247,.95)}
.simple-hasfly:focus-within > .simple-link:after,
.simple-hasfly:hover > .simple-link:after{border-color:var(--orange)}
/* narrow viewports: flyout opens LEFT so it never overflows the right edge */
@media (max-width:1100px){
  .simple-hasfly > .simple-panel{left:auto;right:calc(100% + 6px);transform:translate(8px,0)}
  .simple-hasfly > .simple-panel:before{left:auto;right:-14px}
}

/*
 * Homepage: latest blog posts + newsletter subscribe sections.
 * Added 2026-10-14; only emitted inside the homepage (.ai-home) scope.
 */
.home-section-eyebrow{
  display:block;margin-bottom:10px;color:var(--orange);
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.home-section-eyebrow--light{color:#a78bfa}

/* ---- Latest insights ---- */
.home-insights{background:#fff;border-top:1px solid var(--line)}
.home-insights__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;margin-bottom:40px;
}
.home-insights__head h2{
  font-size:34px;line-height:1.15;letter-spacing:-1.3px;margin:0 0 12px;font-weight:800;
}
.home-insights__head p{
  max-width:560px;margin:0;color:var(--muted);font-size:14px;line-height:1.75;
}
.home-insights__all{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  color:var(--orange);font-size:13px;font-weight:700;white-space:nowrap;
}
.home-insights__all svg{transition:transform .18s ease}
.home-insights__all:hover svg{transform:translateX(3px)}
.home-insights__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.home-postcard{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);transition:box-shadow .2s ease,transform .2s ease;
}
.home-postcard:hover{box-shadow:0 18px 40px rgba(19,24,32,.09);transform:translateY(-3px)}
.home-postcard__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--soft)}
.home-postcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.home-postcard:hover .home-postcard__media img{transform:scale(1.04)}
.home-postcard__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.home-postcard__meta{
  display:flex;align-items:center;gap:7px;margin-bottom:12px;
  font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
}
.home-postcard__meta a{color:var(--orange)}
.home-postcard__meta i{font-style:normal;color:var(--line)}
.home-postcard__body h3{margin:0 0 10px;font-size:17px;line-height:1.35;font-weight:700}
.home-postcard__body h3 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-postcard__body p{
  margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.home-postcard__more{
  margin-top:auto;color:var(--orange);font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;gap:7px;
}
.home-postcard__more:after{content:"→";transition:transform .18s ease}
.home-postcard__more:hover:after{transform:translateX(3px)}

/* ---- Newsletter ---- */
.home-newsletter{
  background:linear-gradient(135deg,#101018 0%,#1b1538 55%,#241847 100%);
  color:#fff;padding:74px 0;
}
.home-newsletter__inner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.home-newsletter__copy h2{margin:0 0 14px;font-size:32px;line-height:1.18;letter-spacing:-1.2px;font-weight:800;color:#fff}
.home-newsletter__copy p{margin:0;color:#b7b3c9;font-size:14px;line-height:1.8;max-width:480px}
.home-newsletter__form{display:grid;grid-template-columns:1fr auto;gap:12px}
.home-newsletter__field{display:grid;gap:8px;font-size:11px;font-weight:700;color:#b7b3c9;letter-spacing:.04em}
.home-newsletter__field input{
  width:100%;min-height:50px;padding:0 16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:4px;color:#fff;outline:none;transition:border-color .2s ease,background .2s ease;
}
.home-newsletter__field input::placeholder{color:#8b879c}
.home-newsletter__field input:focus{border-color:var(--orange);background:rgba(255,255,255,.1)}
.home-newsletter__submit{min-height:50px;padding:0 28px;border-radius:4px}
.home-newsletter__msg{
  grid-column:1/-1;margin:2px 0 0;font-size:13px;line-height:1.6;color:#c4b5fd;
}
.home-newsletter__msg.is-error{color:#fca5a5}
.home-newsletter__success{display:grid;gap:6px;justify-items:start}
.home-newsletter__success[hidden]{display:none}
.home-newsletter__success svg{color:#34d399}
.home-newsletter__success h3{margin:8px 0 0;font-size:24px;letter-spacing:-.6px;color:#fff}
.home-newsletter__success p{margin:0;color:#b7b3c9;font-size:14px;line-height:1.7}

@media (max-width:900px){
  .home-insights__head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:30px}
  .home-insights__head h2{font-size:28px}
  .home-insights__grid{grid-template-columns:1fr;gap:18px}
  .home-postcard__media{aspect-ratio:16/8}
  .home-newsletter{padding:60px 0}
  .home-newsletter__inner{grid-template-columns:1fr;gap:32px}
  .home-newsletter__copy h2{font-size:27px}
}
@media (max-width:620px){
  .home-insights__head h2,.home-newsletter__copy h2{font-size:24px}
  .home-newsletter__form{grid-template-columns:1fr}
  .home-newsletter__submit{width:100%}
}

/*
 * Homepage: buyer testimonial carousel + standalone Buyer FAQ.
 * Reworked 2026-10-14: the old 2x2 static grid became a single, large
 * auto-rotating quote (Stripe-style) with real avatars, arrows, dots and a
 * progress bar. Content stays admin-managed via the Testimonial plugin and
 * the CYNRIN_TESTIMONIALS marker in the homepage page content. Squared,
 * indigo-accented treatment matches the site's right-angle tech style.
 */
.home-testimonials{background:var(--soft,#f5f6f7);border-top:1px solid var(--line,#e5e6e8)}
.home-testimonials__head{max-width:680px;margin:0 auto 34px;text-align:center}
.home-testimonials__head h2{
  margin:0 0 12px;font-size:32px;line-height:1.18;letter-spacing:-1.2px;font-weight:800;
}
.home-testimonials__head p{margin:0;color:var(--muted,#65676b);font-size:14px;line-height:1.7}

/* Single-quote slider */
.tslider{max-width:860px;margin:0 auto;position:relative}
.tslider__viewport{overflow:hidden}
.tslider__track{
  display:flex;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.tslide{
  flex:0 0 100%;min-width:0;margin:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 4px;
}
.tslide__mark{
  font-family:Georgia,'Times New Roman',serif;font-size:64px;line-height:.6;
  height:34px;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  display:block;user-select:none;
}
.tslide__quote{
  margin:0 0 26px;max-width:780px;
  font-size:21px;line-height:1.62;letter-spacing:-.2px;font-weight:500;
  color:#202124;
}
.tslide__person{display:flex;align-items:center;gap:14px;text-align:left}
.tslide__avatar{
  flex:0 0 auto;width:54px;height:54px;border-radius:0;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
}
.tslide__avatar--img{object-fit:cover}
.tslide__avatar--init{
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  color:#fff;font-size:21px;font-weight:800;text-transform:uppercase;
}
.tslide__meta{display:grid;gap:2px;min-width:0}
.tslide__meta strong{font-size:14.5px;font-weight:700;color:var(--ink,#0a0a0a)}
.tslide__meta small{
  font-size:12.5px;line-height:1.4;color:var(--muted,#65676b);
  display:block;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Controls: arrows + dots on one row */
.tslider__nav{
  display:flex;align-items:center;justify-content:center;gap:22px;
  margin-top:30px;
}
.tslider__arrow{
  width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:#202124;border:1px solid var(--line,#d9dade);
  cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.tslider__arrow:hover{border-color:#4f46e5;color:#4f46e5}
.tslider__arrow:focus-visible{outline:2px solid #4f46e5;outline-offset:2px}
.tslider__arrow svg{display:block}
.tslider__dots{display:flex;align-items:center;gap:10px}
.tslider__dot{
  width:8px;height:8px;padding:0;border:0;cursor:pointer;background:#c7c9cf;
  transition:background .2s ease,width .3s ease;
}
.tslider__dot:focus-visible{outline:2px solid #4f46e5;outline-offset:3px}
.tslider__dot.is-active{background:#4f46e5;width:24px}

/* Thin autoplay progress bar */
.tslider__progress{
  margin:22px auto 0;max-width:160px;height:2px;background:#e3e4e8;overflow:hidden;
}
.tslider__progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#4f46e5,#7c3aed);
  animation:tslider-progress var(--tsd,6500ms) linear forwards;
  animation-play-state:paused;
}
.tslider.is-running .tslider__progress span{animation-play-state:running}
@keyframes tslider-progress{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){
  .tslider__track{transition:none}
  .tslider__progress span{animation:none}
}

/* Standalone Buyer FAQ (was the right column beside the founder card) */
.home-faq{background:#fff;border-top:1px solid var(--line,#e5e6e8)}
.home-faq__inner{max-width:820px;margin:0 auto;padding:0 8px}
.home-faq__inner>span{font-size:11px;font-weight:800;color:var(--orange,#4f46e5);letter-spacing:.1em}
.home-faq__inner>h2{font-size:36px;letter-spacing:-1.4px;margin:10px 0 22px}
.home-faq details{border-top:1px solid var(--line,#e5e6e8)}
.home-faq details:last-child{border-bottom:1px solid var(--line,#e5e6e8)}
.home-faq summary{
  display:flex;justify-content:space-between;gap:16px;
  padding:19px 4px;cursor:pointer;font-size:15px;font-weight:700;list-style:none;color:var(--ink,#0a0a0a);
}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary span{color:var(--orange,#4f46e5);font-weight:400;font-size:20px;line-height:1}
.home-faq details[open] summary span{transform:rotate(45deg)}
.home-faq summary span{transition:transform .2s ease}
.home-faq details p{
  margin:0;padding:0 32px 19px 4px;font-size:13px;line-height:1.75;color:var(--muted,#65676b);
}

@media(max-width:900px){
  .home-testimonials__head{margin-bottom:28px}
  .home-testimonials__head h2{font-size:27px;letter-spacing:-.9px}
  .tslide__quote{font-size:18.5px;line-height:1.6}
  .home-faq__inner>h2{font-size:30px}
}
@media(max-width:620px){
  .home-testimonials__head h2{font-size:23px}
  .tslide__mark{font-size:54px;height:30px}
  .tslide__quote{font-size:16.5px;line-height:1.62;margin-bottom:22px}
  .tslide__avatar{width:48px;height:48px}
  .tslide__meta small{max-width:220px;white-space:normal}
  .tslider__nav{gap:16px;margin-top:24px}
  .tslider__arrow{width:38px;height:38px}
  .tslider__progress{margin-top:18px}
}

/* ---- pv2 primary button: keep white label on gradient (override .pv2 a indigo) ---- */
.pv2 a.pv2-btn--primary,
.pv2 a.pv2-btn--primary:hover{color:#fff}

/* ---- Factory video: poster + inline play (square tech style, indigo accent) ---- */
.factory-video{position:absolute;inset:0;overflow:hidden;background:#0c0d12}
.factory-video__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ai-ease),opacity .45s ease;
}
.factory-video:hover .factory-video__poster{transform:scale(1.05)}
.factory-video__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,13,18,.12) 0%,rgba(12,13,18,.05) 45%,rgba(12,13,18,.55) 100%);
  transition:background .4s ease;
}
.factory-video:hover .factory-video__veil{
  background:linear-gradient(180deg,rgba(12,13,18,.05) 0%,rgba(12,13,18,0) 50%,rgba(12,13,18,.4) 100%);
}
.factory-video__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;padding:0;border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 14px 40px rgba(12,13,18,.45);
  transition:transform .35s var(--ai-ease),box-shadow .35s ease,border-color .35s ease;
  z-index:2;
}
.factory-video__play svg{width:26px;height:26px;margin-left:3px;fill:#fff;display:block}
.factory-video:hover .factory-video__play{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 18px 52px rgba(79,70,229,.55);
  border-color:#fff;
}
.factory-video__play:focus-visible{outline:2px solid #a5b4fc;outline-offset:3px}
.factory-video__tag{
  position:absolute;left:18px;bottom:16px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.factory-video__tag::before{
  content:"";width:18px;height:2px;background:linear-gradient(90deg,#4f46e5,#7c3aed);display:block;
}
.factory-video__duration{
  position:absolute;right:16px;bottom:14px;z-index:2;
  font-size:11px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.85);
  background:rgba(12,13,18,.55);border:1px solid rgba(255,255,255,.22);
  padding:3px 8px;
}
.factory-video__player{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:#000;border:0;display:none;z-index:3;
}
.factory-video.is-playing .factory-video__poster,
.factory-video.is-playing .factory-video__veil,
.factory-video.is-playing .factory-video__play,
.factory-video.is-playing .factory-video__tag,
.factory-video.is-playing .factory-video__duration{opacity:0;pointer-events:none}
.factory-video.is-playing .factory-video__player{display:block}
.factory-video__play,
.factory-video__veil,
.factory-video__tag,
.factory-video__duration{transition:opacity .35s ease}
@media(max-width:620px){
  .factory-video__play{width:60px;height:60px}
  .factory-video__play svg{width:22px;height:22px}
}

/* ===== Homepage link overlays (added 2026-10-14): make product images,
   application scene tiles and certification marks clickable. The anchors are
   transparent fills over existing relatively-positioned containers, so there
   is zero visual/layout change; only pointer interaction is added. ===== */
.ai-home .media-link,
.ai-home .tile-link{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  font-size:0;
  line-height:0;
  color:transparent;
}
.ai-home .tile-link{z-index:1}
.ai-home .application-grid span{z-index:2}
.ai-home .cert-marks a{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  color:inherit;
  line-height:1;
}
.ai-home .cert-marks a:hover b{color:#4f46e5}

/* Fix invisible dark headings on dark sections (added 2026-10-14):
   contact block ships with a dark background but its h2 inherited the
   global dark heading colour, so it rendered unreadable. Force light text. */
.contact-section h2{color:#fff}

/* ===== Hero title (added 2026-10-14): widen the copy so the H1 flows to two
   lines instead of three, and give the headline the VI indigo->violet identity
   with a slow animated sheen. Gradient stops lean bright (white/lavender into
   the brand indigo/violet) so the text stays legible over the dark hero scrim.
   The entrance rise animation in ai-visual.css is preserved. ===== */
.ai-home .hero-copy{
  width:min(880px,66%);
}
.ai-home .hero h1{
  color:#fff;
  font-size:clamp(46px,4.05vw,58px);
  letter-spacing:-2.5px;
  background:linear-gradient(
    100deg,
    #ffffff 0%,
    #eef0ff 22%,
    #a5b4fc 42%,
    var(--ai-indigo,#4f46e5) 56%,
    #b69dff 70%,
    var(--ai-violet,#7c3aed) 84%,
    #ffffff 100%
  );
  background-size:220% auto;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:hero-title-sheen 7s ease-in-out infinite;
}
.ai-home.is-ready .hero h1{
  animation:ai-rise .85s var(--ai-ease) .16s both,
            hero-title-sheen 7s ease-in-out 1.1s infinite;
}
@keyframes hero-title-sheen{
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .ai-home .hero h1,
  .ai-home.is-ready .hero h1{ animation-name:ai-rise; }
}
@media (max-width:1100px){
  .ai-home .hero-copy{ width:min(720px,78%); }
}
@media (max-width:900px){
  .ai-home .hero-copy{ width:100%; max-width:600px; }
  .ai-home .hero h1{ font-size:46px; letter-spacing:-2.2px; }
}
@media (min-width:621px){
  .ai-home .hero h1 .hero-br-m{ display:none; }
}
@media (max-width:620px){
  .ai-home .hero h1{ font-size:40px; letter-spacing:-1.8px; }
  .ai-home .hero h1 .hero-br-m{ display:inline; }
}

/* ===== Section scroll transitions (added 2026-10-14) =====================
   Whole-band choreography between homepage sections, layered on top of the
   existing per-element .ai-rv reveal. Light bands rise and fade as one unit;
   the full-bleed dark contact band wipes open top-to-bottom with clip-path
   (no opacity over the white page, so the black never flashes). Classes are
   injected by ai-visual.js; without JS the markup is untouched and fully
   visible. Hero is excluded (it keeps its own intro animation). ===== */
.ai-home .ai-sec{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s var(--ai-ease), transform .9s var(--ai-ease);
  will-change:opacity, transform;
}
.ai-home .ai-sec.in{
  opacity:1;
  transform:none;
}
/* Dark full-bleed band: clip curtain instead of opacity (avoids black flash) */
.ai-home .ai-sec.ai-sec--clip{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1s var(--ai-ease);
  will-change:clip-path;
}
.ai-home .ai-sec.ai-sec--clip.in{
  clip-path:inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce){
  .ai-home .ai-sec,
  .ai-home .ai-sec.ai-sec--clip{
    opacity:1;
    transform:none;
    clip-path:none;
    transition:none;
  }
}

/* v1.4.10 contrast fixes on dark surfaces.
   Header inquiry modal: the eyebrow var(--orange) bridges to indigo
   (3.07 on #0d0e10) and the h2 inherited a near-black heading color (1.03),
   making the title effectively invisible. */
.inquiry-modal-intro span { color: #a5b4fc; }
.inquiry-modal-intro h2 { color: #ffffff; }
/* Global footer legal copyright: 10px #666 on #050505 = 3.55, below AA. */
.copyright > span { color: #9aa0a6; }