/* ============================================================
   Tell Equipment & Sales — 8K Premium Polish Layer
   tell-manufacturers-8k-polish-20260925.css
   Loads AFTER manufacturers-20260925.css. Purely additive:
   deepens depth, motion and typography of the shared system.
   Brand: navy #09225c | red #af1314 | blue accent #0f3fa8
   ============================================================ */

:root {
  --navy-glow: rgba(15, 63, 168, .55);
  --red-glow: rgba(175, 19, 20, .45);
  --shadow-xl: 0 34px 80px rgba(7, 26, 69, .22);
  --ease-lux: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Typography — fluid editorial scale ---------- */
body { letter-spacing: -.006em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.hero h1 { letter-spacing: -.03em; text-shadow: 0 2px 30px rgba(7,26,69,.45); }
.hero p { text-shadow: 0 1px 18px rgba(7,26,69,.4); font-weight: 300; letter-spacing: .002em; }
.sec .t, .mfg-boxes .head .t { letter-spacing: -.028em; }
.sec .t::after, .mfg-boxes .head .t::after {
  content: ""; display: block; width: 56px; height: 4px; border-radius: 2px;
  margin-top: .8rem; background: linear-gradient(90deg, var(--red), var(--blue));
}
.mfg-boxes .head .t::after { margin-left: auto; margin-right: auto; }

/* ---------- Hero with real-motion video backdrop ---------- */
.hero { isolation: isolate; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; filter: saturate(1.05) contrast(1.04);
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,26,69,.78) 0%, rgba(9,34,92,.62) 45%, rgba(7,26,69,.85) 100%),
    radial-gradient(ellipse 90% 65% at 50% 42%, transparent 30%, rgba(7,26,69,.5) 100%);
}
.hero .kicker {
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(175,19,20,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.hero .btn { backdrop-filter: blur(4px); }

/* ---------- Depth: layered card shadows + glass accents ---------- */
.mcard, .oembox, .spec { box-shadow: 0 2px 6px rgba(9,34,92,.05), 0 14px 34px rgba(9,34,92,.09); }
.mcard:hover, .oembox:hover { box-shadow: var(--shadow-xl); }
.mcard::before, .oembox::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(15,63,168,.05), transparent 38%);
  opacity: 0; transition: opacity .4s var(--ease-lux); pointer-events: none; z-index: 1;
}
.mcard:hover::before, .oembox:hover::before { opacity: 1; }
.stat { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }

/* ---------- Shine sweep on primary buttons ---------- */
.btn { position: relative; overflow: hidden; border-radius: 10px; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-20deg); transition: left .55s var(--ease-lux);
}
.btn:hover::after { left: 130%; }
.btn:hover { transform: translateY(-2px) scale(1.02); }

/* ---------- Nav micro-interactions ---------- */
.bbar nav a { position: relative; }
.bbar nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--red), #ff6b6b); transition: right .3s var(--ease-lux);
}
.bbar nav a:hover::after { right: 0; }

/* ---------- Spec tables: zebra + hover row glow ---------- */
.spec tbody tr:nth-child(even) { background: #f8fafd; }
.spec tbody tr { transition: background .2s var(--ease); }
.spec tbody tr:hover { background: #eef3fb; }
.spec th { letter-spacing: .04em; font-size: .82rem; text-transform: uppercase; }

/* ---------- Tabs: sliding pill feel ---------- */
.tab { border-color: #d7e0ee; box-shadow: 0 1px 3px rgba(9,34,92,.06); }
.tab:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.tab.active { background: linear-gradient(135deg, var(--navy), var(--blue)); border-color: transparent; }

/* ---------- Chips: soft elevation ---------- */
.chip { box-shadow: 0 1px 4px rgba(9,34,92,.08); }

/* ---------- Video frames: cinematic frame treatment ---------- */
.vframe { box-shadow: 0 2px 8px rgba(9,34,92,.08), 0 22px 54px rgba(9,34,92,.16); border-radius: 16px; }
.vframe::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -60px 80px rgba(7,26,69,.25);
}

/* ---------- CTA band: aurora accent ---------- */
.cta { position: relative; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; width: 700px; height: 700px; border-radius: 50%;
  left: 50%; top: 100%; transform: translateX(-50%);
  background: radial-gradient(circle, var(--red-glow), transparent 62%);
  filter: blur(30px); opacity: .8; animation: ctaPulse 9s ease-in-out infinite;
}
@keyframes ctaPulse { 0%,100% { opacity: .5; transform: translateX(-50%) scale(1); } 50% { opacity: .95; transform: translateX(-50%) scale(1.12); } }

/* ---------- Home boxes: richer entrance ---------- */
.oembox .info h3 { letter-spacing: -.02em; }
.oembox .info .go { box-shadow: 0 4px 14px rgba(175,19,20,.4); }
.oembox:hover .img img { transform: scale(1.09) rotate(-.4deg); }

/* ---------- Footer: subtle top divider glow ---------- */
.mfoot { position: relative; }
.mfoot::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red) 30%, var(--blue) 70%, transparent); opacity: .6;
}

/* ---------- Accessibility / mobile ---------- */
@media (max-width: 640px) {
  .hero-video { display: none; }
  .hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 55%, #123a8f 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .btn::after, .bbar nav a::after { display: none; }
}