html{-webkit-text-size-adjust:100%;}

:root {
  --ats-green: #8bf127;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text,#e6eaf2);
  background-color:#0b0d12;
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(166,217,55,.16), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(92,112,138,.14), transparent 60%);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; color-scheme:dark;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--maxw,1100px); margin-inline:auto; padding-inline:24px}
.glass{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); border-radius:var(--radius,18px); box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.35))}
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.1rem; border-radius:14px; font-weight:700; letter-spacing:.2px; border:1px solid rgba(255,255,255,.16); background: var(--ats-green); box-shadow:0 6px 18px rgba(166,217,55,.25); transition:.2s ease transform, .2s ease box-shadow}
.btn:hover { background: var(--ats-green); opacity: .95; }
.btn.secondary{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.12); box-shadow:none}
.btn:focus-visible{outline:none; box-shadow:var(--ring, 0 0 0 3px rgba(166,217,55,.35))}

header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(11,13,18,.8), rgba(11,13,18,.4));
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:20px 0}
.logo{display:flex; align-items:center; gap: 1.2rem; font-weight:800; letter-spacing:.2px}
.nav a{opacity:.9}
.nav a.active{opacity:1; border-bottom:2px solid var(--accent,#a6d937); padding-bottom:4px}
.nav-actions{display:flex; align-items:center; gap:.6rem}

.hero{padding:72px 0 48px}
.hero-grid{display:grid; gap:28px; grid-template-columns:1.2fr .8fr}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:.83rem; color:var(--muted,#98a2b3); font-weight:700; letter-spacing:.3px; text-transform:uppercase}
.eyebrow .pill{display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:999px; background:rgba(166,217,55,.18); border:1px solid rgba(166,217,55,.38); color:#f0ffd1}
h1{font-size: clamp(2rem, 3.8vw + .8rem, 3.6rem); line-height:1.05; margin:10px 0 14px}
.lead{font-size: clamp(1rem, .7vw + .7rem, 1.25rem); color:#c9d2e3; max-width:62ch}
.cta{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:20px}

.hero-card{padding:20px; overflow:hidden}
.dash{display:grid; gap:14px}
.row{display:grid; grid-template-columns:repeat(12, 1fr); gap:14px}
.kpi{grid-column: span 4; padding:16px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08)
  align-items: center;
}
.kpi b{display:block; font-size:1.6rem}
.chart{grid-column: span 12; border-radius:14px; min-height:180px; background:#0e121a; border:1px dashed rgba(255,255,255,.2); display:grid; place-items:center; color:#d7eff7; padding:0}
.chart img{width:100%; height:100%; object-fit:cover; image-rendering:auto}

.section{padding:64px 0}
.section h2{font-size: clamp(1.4rem, 2.2vw + .6rem, 2.2rem); margin:0 0 14px}
.muted{color:var(--muted,#98a2b3)}

.features{display:grid; gap:18px; grid-template-columns:repeat(3, 1fr)}
.feature{padding:18px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08)}
.feature h3{margin:.2rem 0 .4rem; font-size:1.05rem}

.gallery{display:grid; gap:14px; grid-template-columns:repeat(12, 1fr)}
.tile{grid-column:span 4; border-radius:16px; overflow:hidden; aspect-ratio: 16/10; border:1px solid rgba(255,255,255,.08); background:#0f141d}
.tile img{width:100%; height:100%; object-fit:cover}

/* Customers */
.customers-grid{display:grid; gap:22px; grid-template-columns:repeat(6, 1fr); align-items:center}
.customer{padding:24px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.10); display:grid; place-items:center; height:180px; transition: box-shadow .18s ease, transform .18s ease}
.customer img{max-height:160px; width:auto; object-fit:contain; filter: grayscale(60%) drop-shadow(0 2px 10px rgba(0,0,0,.35)); transition: filter .2s ease, transform .2s ease}
.customer.white{background:#ffffff; border-color:rgba(255,255,255,.85)}
.customer:hover{box-shadow:0 0 0 3px rgba(166,217,55,.28), 0 8px 22px rgba(166,217,55,.25); transform:translateY(-2px)}
.customer:hover img{filter: grayscale(0%) drop-shadow(0 2px 10px rgba(0,0,0,.35))}

/* === v7n: NAV SPACING & CLARITY TWEAKS === */
.logo img{height:68px; width:auto; image-rendering:auto}
.logo span{font-size:1.05rem; opacity:.9}
.nav a{padding:10px 12px; border-radius:10px; font-weight:600; letter-spacing:.2px}
.nav a:hover{background:rgba(255,255,255,.06)}
/* Remove any vestigial separators */
.nav span[aria-hidden="true"]{display:none}

/* Condense header on scroll for more breathing room */
header.scrolled .nav{padding:12px 0}
header.scrolled{background:linear-gradient(180deg, rgba(11,13,18,.92), rgba(11,13,18,.76)); border-bottom-color: rgba(255,255,255,.12)}

/* Larger containers feel less cramped on widescreen */
@media (min-width: 1200px){
  .container{--maxw: 1200px}
}

/* Slightly tighter link spacing on narrower desktops */
@media (max-width: 1100px){
  .nav a{padding:8px 10px}
  .logo img{height:60px}
}
@media (max-width: 900px){.customers-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 560px){.customers-grid{grid-template-columns:repeat(2,1fr)}}

footer{padding:34px 0; border-top:1px solid rgba(255,255,255,.08); color:#c3cad8}

/* Forms - dark */
form{display:grid; gap:12px; max-width:560px}
label{font-size:.92rem; color:#c4ccda}
input, textarea, select{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#0e121a; color:var(--text,#e6eaf2);
  outline:none; transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
input::placeholder, textarea::placeholder{color:#9aa6b2}
input:focus, textarea:focus, select:focus{
  box-shadow: var(--ring, 0 0 0 3px rgba(166,217,55,.35));
  border-color: rgba(166,217,55,.55);
  background:#101522;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  -webkit-text-fill-color: var(--text, #e6eaf2);
  -webkit-box-shadow: 0 0 0px 1000px #0e121a inset;
  transition: background-color 5000s ease-in-out 0s;
}
input, textarea{ -webkit-appearance:none; appearance:none }


/* v7d: Navbar spacing & hover underline */
header nav{display:flex; align-items:center; flex-wrap:wrap; gap:12px}
header nav a{padding-bottom:4px; position:relative}
header nav a:hover,
header nav a.active{border-bottom:2px solid var(--accent,#a6d937)}
@media (max-width: 720px){
  header nav{gap:10px}
  .nav-actions{margin-top:8px}
}



/* v7f: Gallery modes */
.gallery-tabs{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.gallery-tabs .tab{padding:.5rem .8rem; border:1px solid rgba(255,255,255,.15); border-radius:10px; cursor:pointer; user-select:none; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03))}
.gallery-tabs .tab.active{border-color:rgba(166,217,55,.6); box-shadow:0 0 0 3px rgba(166,217,55,.25) inset}
.gallery-mode{display:none}
.gallery-mode.active{display:block}

/* Grid (uniform tiles) */
.gallery-grid{display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
.gallery-grid img{width:100%; height:260px; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.1)}

/* Collage (masonry) */
.gallery-masonry{column-count:3; column-gap:14px}
.gallery-masonry figure{break-inside:avoid; margin:0 0 14px 0}
.gallery-masonry img{width:100%; height:auto; border-radius:14px; border:1px solid rgba(255,255,255,.1)}

/* Scroll strip */
.gallery-scroll{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px}
.gallery-scroll::-webkit-scrollbar{height:10px}
.gallery-scroll::-webkit-scrollbar-thumb{background:#2a3240; border-radius:999px}
.gallery-scroll img{height:220px; width:auto; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.1); scroll-snap-align:start}

@media (max-width: 980px){
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-masonry{column-count:2}
}
@media (max-width: 560px){
  .gallery-grid{grid-template-columns:1fr}
  .gallery-masonry{column-count:1}
}



/* v7g: Preview + Scroll Strip */
.preview-wrap{display:grid; gap:16px}
.preview-frame{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); background:#0f141d;
  aspect-ratio: 16/9; display:grid; place-items:center;
}
.preview-frame img{width:100%; height:100%; object-fit:cover}
.thumb-strip{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 10px}
.thumb-strip::-webkit-scrollbar{height:10px}
.thumb-strip::-webkit-scrollbar-thumb{background:#2a3240; border-radius:999px}
.thumb{flex:0 0 auto; width:220px; height:140px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.12); scroll-snap-align:start; position:relative; cursor:pointer}
.thumb img{width:100%; height:100%; object-fit:cover; filter: grayscale(25%); transition: transform .2s ease, filter .2s ease}
.thumb:hover img{transform:scale(1.02); filter:grayscale(0%)}
.thumb.active{box-shadow:0 0 0 3px rgba(166,217,55,.35)}
@media (max-width: 920px){ .thumb{width:180px; height:112px} .preview-frame{aspect-ratio: 16/10} }
@media (max-width: 560px){ .thumb{width:150px; height:94px} .preview-frame{aspect-ratio: 4/3} }



/* v7i: Homepage background image */
body.page-home{
  background-color:#0b0d12; /* fallback */
  background-image:
    linear-gradient(180deg, rgba(5,7,10,.72), rgba(11,13,18,.82)),
    url("images/8568ff_c9c8c3f5515b4ed0bf2cebef28e2b203~mv2.avif");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* Slightly deepen hero card for contrast on image */
body.page-home .hero-card.glass{
  background:linear-gradient(180deg, rgba(18,22,34,.72), rgba(18,22,34,.52));
  border-color: rgba(255,255,255,.14);
}
/* Add subtle text shadow in hero to keep headings readable */
body.page-home .hero h1, body.page-home .hero .lead{
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}



/* v7k: larger, crisper navbar logo */
.logo img{
  height:60px;            /* moderate increase */
  width:auto;
  image-rendering:auto;   /* crisp on modern browsers */
}
@media (max-width: 560px){
  .logo img{ height:48px; } /* avoid crowding on small screens */
}



/* v7l: Customers lightbox modal */
.lb-backdrop{
  position:fixed; inset:0; background:rgba(7,10,14,.78);
  display:none; align-items:center; justify-content:center; z-index:1000;
  backdrop-filter: blur(4px);
}
.lb-backdrop.open{display:flex}
.lb-frame{
  position:relative; max-width:min(90vw, 1100px); max-height:85vh;
  padding:18px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12); box-shadow:0 20px 60px rgba(0,0,0,.45);
  display:grid; place-items:center;
}
.lb-img{max-width:100%; max-height:70vh; width:auto; height:auto; object-fit:contain}
.lb-close, .lb-prev, .lb-next{
  position:absolute; top:12px; display:grid; place-items:center; width:38px; height:38px;
  border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  cursor:pointer; user-select:none;
}
.lb-close{right:12px}
.lb-prev, .lb-next{top:50%; transform:translateY(-50%)}
.lb-prev{left:10px}
.lb-next{right:10px}
.lb-prev::after{content:'‹'; font-size:22px; line-height:1}
.lb-next::after{content:'›'; font-size:22px; line-height:1}
.lb-close::after{content:'✕'; font-size:16px}

.lb-counter{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  font-size:.9rem; color:#cbd4e2; opacity:.9;
  background:rgba(0,0,0,.25); padding:.25rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.12);
}

/* Make sure logos remain tidy in grid */
.customer{cursor:pointer}
.customer img{pointer-events:none}



/* v7n-mobile: Responsive + Limegreen accents */

/* Breakpoints */
:root {
  --ats-green: #8bf127;
}

/* Fluid type */
h1{font-size:clamp(26px, 4.2vw, 44px)}
h2{font-size:clamp(20px, 3.2vw, 32px)}
.lead, p{font-size:clamp(16px, 2.4vw, 18px); line-height:1.55}

/* Mobile hamburger */
.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid rgba(255,255,255,.18);
  background:transparent; border-radius:12px; cursor:pointer; place-items:center;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--lime); margin:4px auto;}
.nav-toggle:hover{box-shadow:0 0 0 3px rgba(176,255,0,.18); border-color:rgba(176,255,0,.5)}

@media (max-width: 980px){
  .nav-toggle{display:grid}
  .nav{position:fixed; inset:64px 12px auto 12px; display:none;
       background:rgba(10,12,16,.96); border:1px solid rgba(255,255,255,.12);
       border-radius:16px; padding:14px; z-index: 999;}
  html.nav-open .nav{display:block}
  .nav a{display:block; padding:10px 12px; border-radius:10px}
  header nav{flex-wrap:wrap}
}

/* Container padding on small screens */
@media (max-width: 720px){
  .container, .section{padding:16px}
  .hero{padding-top:28px; padding-bottom:28px}
}

/* Background attachment fix for iOS */
@media (max-width: 980px){
  body.page-home{background-attachment:scroll}
}

/* Truck image card */
.chart{height:clamp(220px, 40vh, 380px)}
.chart img{object-fit:cover; width:100%; height:100%}

/* Customers grid responsiveness */
@media (max-width: 1100px){ .customers-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width: 720px){ .customers-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 560px){ .customers-grid{grid-template-columns:repeat(2,1fr)} }

/* Lightbox small-screen tweaks */
@media (max-width: 560px){
  .lb-frame{padding:12px}
  .lb-img{max-height:65vh}
}

/* Forms */
input, select, textarea{font-size:16px; width:100%}
input, select, textarea{
  background:#0f1218; color:#e7f1d1; border:1px solid rgba(255,255,255,.16);
  padding:12px 14px; border-radius:12px;
}
input::placeholder, textarea::placeholder{color:#9fb48a}

/* === v7n: Logo as standalone (not a link) & flush sizing === */
.logo{display:flex; align-items:center; margin-right: .6rem}
.logo img{height: clamp(64px, 7vw, 88px); width:auto; display:block}

/* keep nav spacing feeling open next to the logo */
.nav{gap:1.2rem}

/* balance mobile */
@media (max-width: 820px){
  .logo img{height: clamp(44px, 8vw, 60px)}
  .nav{gap:.9rem}
}

/* === v7n: Styled transition band and system intro section === */
.fade-band{
  height: 180px;
  background: linear-gradient(180deg, rgba(11,13,18,0) 0%, rgba(11,13,18,0.6) 35%, rgba(11,13,18,1) 100%);
  margin-top: 30px;
  margin-bottom: 10px;
}

.system-intro{
  padding: 26px 0 54px;
}

.system-intro h2{
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0;
}

/* === v7n: System steps grid === */
.system-steps{ padding: 12px 0 64px; }
.steps-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.step-card{
  border-radius: 16px;
  padding: 20px 18px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.10);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.step-title{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 8px 0;
  text-align: center;
  color: #c6f5a1; /* brighter green accent for titles */
}
.step-desc{
  margin: 0;
  opacity: .9;
  line-height: 1.6;
  font-weight: 500;
  text-align: center;
  color: #cdd5c3; /* softer gray-green tone for description */
}

/* subtle distinction between title and description text color */
.step-title{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 8px 0;
  text-align: center;
  color: #c6f5a1; /* brighter green accent for titles */
}
.step-desc{
  margin: 0;
  opacity: .9;
  line-height: 1.6;
  font-weight: 500;
  text-align: center;
  color: #cdd5c3; /* softer gray-green tone for description */
}

/* responsive: 2 columns on tablets, 1 on phones */
@media (max-width: 980px){
  .steps-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .steps-grid{ grid-template-columns: 1fr; }
  .step-card{ padding: 18px 16px; }
}

/* === v7n: Solid green header bar for system steps === */
.step-card {
  background: #0b0d12;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: center;
  padding: 0;
}

.step-title {
  background: var(--ats-green); /* ATS green header */
  color: #0b0d12; /* dark text for contrast */
  font-weight: 800;
  letter-spacing: .3px;
  padding: 12px 0;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  margin: 0;
}

.step-desc {
  flex: 1;
  background: #121416;
  color: #cdd5c3;
  padding: 18px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.05);
}

/* === v7n: Dual image section under system steps === */
.system-dual{ padding: 8px 0 72px; }
.dual-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.dual-item{ display:flex; flex-direction:column; gap:10px; }
.dual-title{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 900;
  letter-spacing: .3px;
  margin: 0 0 10px 0;
  text-align: center;
  color: var(--ats-green);
  padding-top: 4px;
}
.dual-imgwrap{
  background: #0b0d12;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  overflow: hidden;
}
.dual-imgwrap img{
  display: block;
  width: 100%;
  height: auto;
}

/* responsive stacking */
@media (max-width: 980px){
  .dual-grid{ grid-template-columns: 1fr; }
}

/* === Focus section (Safety headline) === */
.focus-intro{ padding: 28px 0 56px; }
.focus-title{
  text-align: left;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 900;
  letter-spacing: .3px;
  color: #ffffff;
  margin: 0 0 16px 0;
}

/* === Focus body text === */
.focus-body{
  width: 100%;
  max-width: 1100px;
  margin: 16px auto 0;
  text-align: left;
  padding: 0 40px;
  color: #f2f2f2;
  line-height: 1.7;
  font-size: clamp(1rem, 1.15vw, 1.08rem);
}
.focus-body p{ margin: 0 0 14px 0; }


/* === ATS: Sticky navbar across the site === */
header, .site-nav, .toolbar {
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: saturate(1.2) blur(6px);
}
/* Ensure a solid/blurred backdrop to keep contrast while scrolling */
header { background: rgba(6, 18, 31, 0.75); }



/* === ATS: 4-wide tiles grid for "What Makes ATS Different" === */
.differentials-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 1fr);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.differentials-grid::-webkit-scrollbar { height: 6px; }
.differentials-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 999px; }

/* Desktop: lock to 4 equal columns without wrapping */
@media (min-width: 1200px) {
  .differentials-grid {
    grid-auto-flow: initial;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: visible;
  }
}

/* Card polish + symmetry */
.diff-card {
  padding: 18px 16px;
  border-radius: 14px;
  background: var(--card, rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.09);
  min-height: 100%;
}
.diff-card h3 {
  font-weight: 800;
  margin: 0 0 6px;
}
.diff-card .tile-first-line {
  margin: 4px 0 6px;
  font-weight: 950;
  font-size: 22px;
  letter-spacing: -0.01em;
}



/* === ATS: Tile Pop (scoped to Why ATS 4-tile grid only) === */
.differentials-grid { gap: 18px; }
.diff-card {
  position: relative;
  padding: 20px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  min-height: 100%;
}
.diff-card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 12px rgba(255,136,0,0.25);
  border-color: rgba(255,136,0,0.35);
}
.diff-card h3 {
  font-weight: 900;
  font-size: 1.25rem;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  position: relative;
  display: inline-block;
}
.diff-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: #ff8800; /* amber/orange accent */
  transition: width 180ms ease;
}
.diff-card:hover h3::after { width: 100%; }

.diff-card .tile-first-line {
  margin: 8px 0 8px;
  font-weight: 950;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: #ff9800;  /* first-line accent for attention */
}
.diff-card p {
  color: rgba(255,255,255,0.88);
  line-height: 1.5;
  margin: 0 0 8px;
}
.diff-card p:last-child {
  font-weight: 800; /* strong closer */
  margin-bottom: 0;
}

/* Ensure one-row grid sticks at 4 columns on large screens, scrolls on small */
.differentials-grid {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 1200px) {
  .differentials-grid {
    grid-template-columns: repeat(4, 1fr);
    overflow-x: visible;
  }
}



/* === ATS: subtle underline hover for key headlines === */
.headline-underline {
  position: relative;
  display: inline-block;
}
.headline-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: #ff8800;
  transition: width 180ms ease;
  opacity: 0.9;
}
.headline-underline:hover::after {
  width: 100%;
}



/* === ATS: Manual vs ATS comparison (Why ATS page) === */
.manual-vs-ats { max-width: 1200px; margin: 0 auto; padding: clamp(16px, 2.5vw, 32px); }
.manual-vs-ats .mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px) {
  .manual-vs-ats .mv-grid { grid-template-columns: 1fr; }
}
.manual-vs-ats .mv-card {
  padding: 18px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.manual-vs-ats .mv-card h3 {
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.manual-vs-ats .mv-card ul {
  margin: 0;
  padding-left: 20px;
}
.manual-vs-ats .mv-card li {
  margin: 6px 0;
  color: rgba(255,255,255,0.9);
  line-height: 1.55;
}

/* Subtle differentiation: manual muted, ATS accented */
.manual-vs-ats .mv-manual { border-color: rgba(255,255,255,0.07); }
.manual-vs-ats .mv-manual h3 { color: rgba(255,255,255,0.85); }
.manual-vs-ats .mv-manual li { color: rgba(255,255,255,0.82); }

.manual-vs-ats .mv-ats {
  border-color: rgba(255,136,0,0.28);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15), 0 0 12px rgba(255,136,0,0.15);
}
.manual-vs-ats .mv-ats h3 { color: #ff8800; }
.manual-vs-ats .mv-ats li strong { color: #ff9800; }



/* === ATS: Patent number pills (bold) === */
.patent-pills {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 6px 0 4px;
}
.patent-pill {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ff8800;
  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(14px, 2.3vw, 18px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.patent-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255,136,0,0.35), 0 2px 10px rgba(0,0,0,0.25);
}



/* === ATS: Centered vertical safety stats === */
.safety-efficiency, .wrap.safety-efficiency { 
  max-width: 1000px; 
  margin: 0 auto; 
  padding: clamp(16px, 2.5vw, 36px);
  text-align: center;
}
.safety-vertical { 
  display: grid; 
  gap: 12px; 
  margin-top: 6px;
}
.sv-row { 
  display: grid; 
  grid-template-columns: 1fr; 
  justify-items: center; 
  gap: 4px; 
  padding: 10px 8px; 
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.sv-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28), 0 0 10px rgba(255,136,0,0.18);
  border-color: rgba(255,136,0,0.30);
}
.sv-big { 
  font-weight: 950; 
  font-size: clamp(22px, 3.8vw, 32px); 
  letter-spacing: -0.01em; 
  color: #ff8800;
}
.sv-sub { 
  font-weight: 750; 
  font-size: clamp(14px, 2.4vw, 18px); 
  color: rgba(255,255,255,0.92); 
}



/* === ATS: 4 side-by-side vertical stacks for Safety & Efficiency === */
.safety-efficiency { max-width: 1200px; margin: 0 auto; padding: clamp(16px, 2.5vw, 36px); }
.safety-stacks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 1100px) {
  .safety-stacks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .safety-stacks { grid-template-columns: 1fr; }
}
.safety-stack {
  text-align: center;
  padding: 18px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.safety-stack:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 12px rgba(255,136,0,0.22);
  border-color: rgba(255,136,0,0.32);
}
.safety-stack .ss-big {
  font-weight: 950;
  font-size: clamp(22px, 3.4vw, 30px);
  letter-spacing: -0.01em;
  color: #ff8800;
  margin-bottom: 6px;
}
.safety-stack .ss-sub {
  font-weight: 750;
  font-size: clamp(14px, 2.4vw, 18px);
  color: rgba(255,255,255,0.92);
}



/* === ATS: Page closer headline === */
.page-closer { 
  max-width: 1100px; 
  margin: 0 auto; 
  padding: clamp(20px, 3vw, 40px) 1rem;
}
.page-closer h2 {
  font-weight: 900; 
  letter-spacing: -0.01em;
}



/* === ATS: WHY ATS hero banner === */
.whyats-hero {
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, #000 0%, #111 20%, #ff8800 90%);
  padding: clamp(50px, 10vw, 140px) 1rem;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(255,136,0,0.25);
}
.whyats-hero h1 {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 1000;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(255,136,0,0.5);
  transition: text-shadow 200ms ease, transform 200ms ease;
}
.whyats-hero h1:hover {
  text-shadow: 0 0 35px rgba(255,136,0,0.75), 0 0 10px rgba(255,136,0,0.5);
  transform: scale(1.02);
}



/* === ATS: WHY ATS hero subtitle === */
.whyats-subtitle {
  color: rgba(255,255,255,0.92);
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 800;
  margin-top: 10px;
  text-transform: none;
  letter-spacing: -0.01em;
  text-shadow: 0 0 10px rgba(255,136,0,0.4);
}