/* ============================================================
   VOLUMETRIC MACHINERY — OEM LIGHT THEME
   ============================================================ */

:root {
  --accent: #2f7dff;
  --accent-soft: rgba(47, 125, 255, 0.14);

  --text-main: #1a1a1a;
  --text-strong: #0f172a;
  --text-muted: #4b5563;

  --panel: #f5f7fa;
  --panel-strong: #eceff4;
  --panel-soft: #ffffff;

  --border: #d1d5db;
  --border-strong: #c3c8d0;

  --max-width: 1120px;
  --header-height: 72px;

  /* Spacing scale (tuned tighter to reduce vertical gaps) */
  --space-xxs: 6px;
  --space-xs: 10px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 32px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: #e6e9ef; /* ensure behind body when content shorter than viewport */
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Use a single solid color matching the top of the previous gradient */
  background-color: #e6e9ef;
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

html, body {
  height: 100%;
}

body {
  overflow-y: auto;
}

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

/* ============================================================
   HEADER
   ============================================================ */
header {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Keep header above the mobile panel so the panel appears to pull out
     from underneath the header. Use a very high z-index to avoid stacking
     context surprises across browsers. */
  z-index: 9999;
  overflow: visible;
  transition: box-shadow 220ms cubic-bezier(.2,.8,.2,1),
              -webkit-backdrop-filter 220ms cubic-bezier(.2,.8,.2,1),
              backdrop-filter 220ms cubic-bezier(.2,.8,.2,1),
              transform 320ms cubic-bezier(.2,.8,.2,1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Compact / scrolled state */
header.is-sticky {
  box-shadow: 0 12px 40px rgba(2,6,23,0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* subtle, smooth reduction in size rather than a bounce */
  transform: translateY(-2px) scaleY(0.995);
}

/* Smoothly animate the nav padding so the header shrinks fluidly */
header .nav {
  transition: padding 260ms cubic-bezier(.2,.8,.2,1);
}

header.is-sticky .nav {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Ensure main content is not hidden behind fixed header; a script will set an appropriate padding, but this provides a safe default. */
main {
  padding-top: var(--header-height);
}

.nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  height: 48px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  color: #2c2c2c;
  font-size: 14px;
  font-weight: 500;
}

.nav-links a:hover {
  color: #000000;
}

.btn {
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transition: all 0.18s ease-out;
}

.btn-outline {
  border-color: var(--border);
  color: #333333;
  background: transparent;
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(47, 125, 255, 0.08);
}

.btn-primary {
  background: linear-gradient(135deg, #2f7dff, #4fb3ff);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(47, 125, 255, 0.4), 0 14px 30px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  padding: var(--space-xl) 20px;
}

/* Ensure alternate sections use the same page background (no panel fill) */
.section.section-alt {
  /* Let the body gradient show through so the entire page matches the top area. */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Also ensure the inner container isn't given a panel background elsewhere */
.section.section-alt .section-inner {
  background: transparent !important;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Even vertical rhythm inside sections: apply a consistent gap between direct children
   (headings, paragraphs, cards, etc.). This ensures equal spacing between paragraphs
   and the card components that follow them. */
.section-inner > * {
  margin-top: 0;
  margin-bottom: 0;
}
.section-inner > * + * {
  margin-top: var(--space-md);
}

.section-heading {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--text-strong);
}

.section-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 640px;
  margin-bottom: 28px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  /* Use transparent so the body gradient is visible across the whole page */
  background: transparent;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.hero-title {
  font-size: clamp(36px, 4.6vw, 48px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  color: var(--text-strong);
}

.hero-subtitle {
  font-size: 17px;
  color: #475569;
  line-height: 1.55;
  margin-bottom: 26px;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--text-main);
}

.neotek-logo-wrap {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f3f6fa 60%, #e9eef5 100%);
  /* Stronger, more pronounced drop shadow for the NEOTEK badge */
  box-shadow: 0 16px 36px rgba(2,6,23,0.14), 0 6px 18px rgba(0,0,0,0.06) inset,
              0 10px 28px rgba(47,125,255,0.16), 0 0 14px 4px rgba(47,125,255,0.10);
  margin-bottom: 24px;
}
/* Animated blue outer shadow so the glow reads as part of the card shadow */
.neotek-logo-wrap {
  position: relative;
  z-index: 0;
  transition: box-shadow 520ms ease, transform 420ms ease;
}


@keyframes neotek-box-glow {
  0% {
    box-shadow: 0 16px 36px rgba(2,6,23,0.14), 0 6px 18px rgba(0,0,0,0.06) inset,
                0 10px 28px rgba(47,125,255,0.16), 0 0 14px 4px rgba(47,125,255,0.10);
    opacity: 1;
  }
  50% {
    box-shadow: 0 18px 44px rgba(2,6,23,0.15), 0 6px 18px rgba(0,0,0,0.06) inset,
                0 14px 36px rgba(47,125,255,0.26), 0 0 20px 8px rgba(47,125,255,0.16);
    opacity: 1;
  }
  100% {
    box-shadow: 0 16px 36px rgba(2,6,23,0.14), 0 6px 18px rgba(0,0,0,0.06) inset,
                0 10px 28px rgba(47,125,255,0.16), 0 0 14px 4px rgba(47,125,255,0.10);
    opacity: 1;
  }
}

/* Apply the slow pulsing outer shadow when `.pulse` is present; no transform so the card stays stationary */
.neotek-logo-wrap.pulse {
  animation: neotek-box-glow 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .neotek-logo-wrap { animation: none !important; transition: none; }
}

.machine-hero {
  display: block;
  width: 100%;
  max-width: 620px;
  margin: 0 auto 32px auto;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.hero-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

.hero-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.hero-card-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.hero-card-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

.hero-card-main h2 {
  font-size: 18px;
  margin-bottom: 6px;
  color: var(--text-strong);
}

.hero-card-main p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.hero-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.hero-stat {
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.hero-stat-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}

.hero-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 11px;
}

.pill {
  background: #ffffff;
  border: 1px solid #d6d9df;
  color: #374151;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* ============================================================
   CARDS
   ============================================================ */
.card,
.spec-card,
.contact-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

/* Adapter chart images used on Spindles page */
.card img.adapter-img {
  border-radius: 12px;
}

.card-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-strong);
}

.card-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.55;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  border-top: 1px solid var(--border);
  padding: 18px 20px 22px;
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  /* Mobile: center footer content vertically/horizontally for compact screens (hamburger layout) */
  footer {
    padding: 28px 16px;
  }
  .footer-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
  }
}

@media (max-width: 600px) {
  .section {
    padding: 40px 16px;
  }
}

#contact .section-inner {
  margin-bottom: 10px;
}

/* HERO LOGO */
.neotek-logo {
  height: 60px;
  width: auto;
}

/* HERO DIFFERENTIATOR BOX */
.hero-differentiator {
  margin: 32px 0 36px 0;
  padding: 28px 32px;
  background: rgba(47,125,255,0.14);
  border-left: 6px solid #2f7dff;
  border-radius: 12px;
  font-size: 1.25rem;
  line-height: 1.55;
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.hero-diff-strong {
  font-size: 1.35rem;
  font-weight: 700;
}

/* HERO CTA ROW */
.hero-cta-row {
  margin-bottom: var(--space-md);
  display: flex;
  gap: 16px;
}

/* Stronger shadows for hero CTA buttons */
.hero-cta-row .btn {
  box-shadow: 0 24px 80px rgba(2,6,23,0.28);
  transition: box-shadow 0.2s ease, transform 0.18s ease;
}
.hero-cta-row .btn:hover {
  box-shadow: 0 48px 120px rgba(2,6,23,0.34);
}

/* VALUE CARDS WRAPPER */
.value-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ============================================================
   SHIMMER
   ============================================================ */
.shimmer-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.shimmer-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.shimmer-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  animation: shimmer-sweep var(--shimmer-speed, 4s) linear infinite;
  animation-delay: var(--shimmer-delay, 0s);
  pointer-events: none;
}

@keyframes shimmer-sweep {
  0%   { left: -130%; }
  50%  { left: 130%; }
  100% { left: 130%; }
}

/* ============================================================
   OUTLINE BUTTON — FINAL VERSION
   ============================================================ */
.btn.btn-outline.shimmer-btn {
  background: rgba(15,23,42,0.62);
  border: 1px solid rgba(255,255,255,0.55);
  color: #e8eeff;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  box-shadow: 0 10px 28px rgba(0,0,0,0.32);

  transition: background 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease,
              box-shadow 0.25s ease,
              transform 0.25s ease;
}

.btn.btn-outline.shimmer-btn:hover {
  background: rgba(15,23,42,0.78);
  border-color: rgba(255,255,255,0.85);
  color: #ffffff;

  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.38);
}

/* ============================================================
   RIPPLE
   ============================================================ */
.ripple-btn {
  position: relative;
  overflow: hidden;
}

.ripple-circle {
  position: absolute;
  border-radius: 999px;
  transform: scale(0);
  background: rgba(255,255,255,0.55);
  animation: ripple-expand 0.55s ease-out;
  pointer-events: none;
}

@keyframes ripple-expand {
  to {
    transform: scale(3.5);
    opacity: 0;
  }
}

/* ============================================================
   CONTACT PAGE COLUMN LAYOUT
   ============================================================ */
.contact-column {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* CONTACT PAGE CTA SPACING */
.contact-cta {
  margin-top: 32px;
  display: flex;
}

/* Apply the same stronger shadows we used for hero CTAs */
.contact-cta .btn {
  box-shadow: 0 24px 80px rgba(2,6,23,0.28);
  transition: box-shadow 0.2s ease, transform 0.18s ease;
}
.contact-cta .btn:hover {
  box-shadow: 0 48px 120px rgba(2,6,23,0.34);
}

/* Contact page specific small utilities (moved from inline styles) */
.contact-note {
  margin-top: 16px;
}

/* Honeypot fields hidden off-screen to trap bots; visible to assistive tech via aria-hidden on container */
.hp-fields {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Header CTA: keep blue primary styling but apply the stronger shadows used elsewhere */
.nav-cta .btn {
  /* preserve the primary ring while adding a stronger drop shadow */
  box-shadow: 0 0 0 1px rgba(47,125,255,0.4), 0 36px 100px rgba(2,6,23,0.28);
  transition: box-shadow 0.2s ease, transform 0.18s ease, filter 0.18s ease;
}
.nav-cta .btn:hover {
  /* Darken more on hover while keeping the blue ring.
     Use an explicit, slightly darker gradient so white text remains unchanged. */
  background: linear-gradient(135deg, #256bd4, #3aa0e6);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(47,125,255,0.5), 0 56px 140px rgba(2,6,23,0.36);
  transform: translateY(-3px);
}

/* ------------------------------------------------------------------
   Force consistent vertical rhythm inside section-inner (override
   any conflicting rules declared earlier). Placed at the end so it
   wins in cascade. Adjust `--space-md` to tune spacing site-wide.
   ------------------------------------------------------------------ */
.section-inner > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.section-inner > * + * {
  margin-top: var(--space-md) !important;
}

/* Normalize flow inside hero grid columns so the many nested elements
   (logo, title, differentiator, CTAs, meta) use the same vertical rhythm
   as the rest of the site. This targets immediate children of each
   column inside `.hero-grid`. */
.hero-grid > div > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.hero-grid > div > * + * {
  margin-top: var(--space-md) !important;
}

/* Tighter rhythm inside compact card components: use a slightly
   smaller gap within cards so headings and paragraphs feel grouped. */
.hero-card > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.hero-card > * + * {
  margin-top: var(--space-sm) !important;
}

/* Remove element-specific margins that conflicted with the flow rules */
.hero-differentiator { margin: 0 !important; }
.hero-card-main p { margin: 0 !important; }
.section-subtitle { margin: 0 !important; }

/* Header / hamburger styles moved from partials/header.html */
.nav-toggle { display: none; background: transparent; border: none; padding: 8px; margin-left: 12px; cursor: pointer; -webkit-appearance: none; appearance: none; width: 44px; height: 44px; align-items: center; justify-content: center; position: relative; }
.nav-toggle .hamburger { display: inline-block; width: 22px; height: 16px; position: relative; }
.nav-toggle .hamburger span { display: block; height: 2px; background: #0f172a; border-radius: 2px; position: absolute; left: 0; right: 0; transition: transform 160ms ease, opacity 120ms ease; }
.nav-toggle .hamburger span:nth-child(1) { top: 0; }
.nav-toggle .hamburger span:nth-child(2) { top: 7px; }
.nav-toggle .hamburger span:nth-child(3) { top: 14px; }
header.nav-open .nav-toggle .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.nav-open .nav-toggle .hamburger span:nth-child(2) { opacity: 0; }
header.nav-open .nav-toggle .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle, .nav-toggle:active, .nav-toggle:focus { background: transparent; border: none; }

header .nav-links { transition: none; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex !important; align-items: center; }

  .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 12px;
    left: 12px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.12);
    padding: 12px 16px;
    gap: 16px;
    z-index: 1190; /* header must be higher (see css/style.css) */
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transform-origin: top center;
  }

  @keyframes pullDownFromUnder {
    0% { transform: translateY(-100%); opacity: 0; }
    65% { transform: translateY(28px) scaleY(1.03); opacity: 1; }
    100% { transform: translateY(0) scaleY(1); opacity: 1; }
  }

  header.nav-open .nav-links,
  body.nav-open .nav-links {
    animation: pullDownFromUnder 1100ms cubic-bezier(.2,.8,.2,1) 60ms both;
    pointer-events: auto;
    will-change: transform, opacity;
  }
  .nav-links a:not(.btn) { display: block; padding: 14px 12px; border-radius: 8px; font-size: 16px; line-height: 1.2; text-align: center; }
  .nav-links a:active, .nav-links a:focus { background: rgba(3,102,214,0.06); outline: none; }
  .nav > .nav-cta { display: none !important; }
  .nav-links > .nav-cta { display: block; margin: 12px; }
  .nav-links > .nav-cta .btn {
    display: inline-flex;
    width: 100%;
    box-sizing: border-box;
    max-width: none;
    padding: 10px 20px;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(47,125,255,0.4), 0 36px 100px rgba(2,6,23,0.28);
    justify-content: center;
    margin: 0 auto;
    white-space: nowrap; /* keep text on one line */
    letter-spacing: 0.12em; /* slightly reduce spacing for narrow widths */
    font-size: 14px;
  }
  header.nav-open .nav-cta,
  body.nav-open .nav-cta { /* fallback for older browsers */ display: block; margin: 12px; }

  body > .nav-links {
    position: fixed;
    top: calc(var(--header-height, 64px) + 20px);
    right: 12px;
    left: 12px;
    /* ensure the first menu item clears the header */
    padding-top: 10px;
    padding-bottom: 12px;
    max-height: calc(100vh - var(--header-height, 64px) - 40px);
    overflow: auto;
  }
}

@media (min-width: 901px) {
  .nav-toggle { display: none !important; }
}

/* Page-specific rules moved from machine-models.html to avoid inline styles */
body.models-page header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Keep the same high stacking context as the main header so mobile nav sits beneath it. */
  z-index: 9999;
}
body.models-page {
  /* match default header offset used site-wide */
  padding-top: var(--header-height);
}

/* Reduce vertical gap at the top of the first section on the models page
   so the heading aligns with other content pages (spindles/accessories/contact). */
/* Reduce top padding for the first section so the heading aligns with other pages (spindles/accessories/contact). */
body.models-page .section:first-of-type {
  padding-top: 12px !important; /* small breathing room to match models-page spacing */
}

/* Strong override to counter the inline `main` padding set by the include loader.
   This reduces the computed top offset on the models page so spacing matches other pages. */
body.models-page main {
  padding-top: calc(var(--header-height) - 18px) !important;
}

/* Stacked single-column cards used on machine-models.html */
.stacked-cards {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.model-highlight {
  background: rgba(47,125,255,0.14);
  border-left: 4px solid #2f7dff;
  padding: 10px 14px;
  margin: 10px 0 14px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.footprint-card {
  margin-top: 16px;
}