/* ===== Unisol Lubricants — shared styles ===== */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, .font-display { font-family: 'Saira', sans-serif; letter-spacing: -0.01em; }

/* premium hero / cta gradient */
.hero-gradient {
  background:
    radial-gradient(1200px 600px at 82% -10%, rgba(224,168,46,0.20), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(28,154,214,0.18), transparent 55%),
    linear-gradient(160deg, #071A33 0%, #0B2545 45%, #13315C 100%);
}
.text-shadow { text-shadow: 0 2px 18px rgba(0,0,0,0.35); }

/* section eyebrow */
.eyebrow { letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; font-size: 0.78rem; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* product image framing (bottles come with their own background mat) */
.product-img { object-fit: cover; object-position: center; }

/* spec table */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: 0.7rem 1rem; border-bottom: 1px solid #E2E9F3; }
.spec-table thead th { background: #0B2545; color: #fff; font-family: 'Saira', sans-serif; font-weight: 600; }
.spec-table tbody tr:nth-child(even) { background: #F4F7FB; }

/* tab system */
.tab-panel { display: none; }
.tab-panel.active { display: grid; }

/* ===== golden scroll-progress line ("flowing lube") ===== */
#scrollProgress { position: absolute; left: 0; bottom: -2px; width: 100%; height: 4px; background: rgba(11,37,69,.06); z-index: 2; overflow: hidden; }
#scrollProgressBar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #B97E12 0%, #E0A82E 35%, #F7D27A 50%, #E0A82E 65%, #B97E12 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 6px rgba(224,168,46,.5);
  border-radius: 0 4px 4px 0;
  animation: lubeFlow 2.6s linear infinite;
  transition: width .12s ease-out;
}
@keyframes lubeFlow { to { background-position: -200% 0; } }

/* ===== interactive lift on (non-clickable) info cards ===== */
.lift, .lift-glass {
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
  will-change: transform;
}
/* cards on light sections */
.lift:hover {
  transform: translateY(-8px);
  border-color: rgba(224,168,46,.5);
  box-shadow: 0 30px 55px -20px rgba(11,37,69,.45), 0 12px 24px -14px rgba(11,37,69,.30);
}
/* glass cards on blue/dark sections */
.lift-glass:hover {
  transform: translateY(-8px);
  background-color: rgba(255,255,255,.09);
  border-color: rgba(224,168,46,.45);
  box-shadow: 0 26px 46px -22px rgba(0,0,0,.55), 0 0 24px -6px rgba(224,168,46,.32);
}
@media (prefers-reduced-motion: reduce) {
  .lift:hover, .lift-glass:hover { transform: none; }
}

/* ===== gold glow on primary (amber) buttons ===== */
a.bg-amber-500, button.bg-amber-500 {
  box-shadow: 0 6px 22px -6px rgba(224,168,46,.55);
  transition: box-shadow .3s ease, background-color .2s ease;
}
a.bg-amber-500:hover, button.bg-amber-500:hover {
  box-shadow: 0 10px 32px -6px rgba(224,168,46,.8), 0 0 0 1px rgba(240,192,74,.25);
}

/* stat numbers: no glow (kept flat for a clean look) */
.num-glow { text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  #scrollProgressBar { animation: none; }
}

/* ===== top marquee (scrolling announcement) ===== */
.marquee { overflow: hidden; }
.marquee__track { display: inline-flex; white-space: nowrap; will-change: transform; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ===== home hero banner (auto, one-screen height) ===== */
.hero-banner { position: relative; width: 100%; overflow: hidden; background: #071A33; }
.hb-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.hb-slide.active { opacity: 1; pointer-events: auto; }
.hb-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: blur(30px) brightness(.5) saturate(1.1); transform: scale(1.15); z-index: 0; }
.hb-bg, .hb-txt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.hero-banner[data-fit="cover"] .hb-bg, .hero-banner[data-fit="cover"] .hb-txt { object-fit: cover; }
.hb-bg { z-index: 1; }
.hb-txt { z-index: 2; opacity: 0; }
.hb-slide.active .hb-bg { animation: hbZoom 5s ease-out both; }
.hb-slide.active .hb-txt { animation: hbTextIn .9s cubic-bezier(.2,.7,.3,1) .45s both; }
@keyframes hbZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes hbTextIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero-pdot { width: 9px; height: 9px; border-radius: 9999px; background: rgba(255,255,255,.55); transition: background .25s, width .25s; cursor: pointer; }
.hero-pdot.active { background: #E0A82E; width: 26px; }
@media (prefers-reduced-motion: reduce) {
  .hb-slide.active .hb-bg, .hb-slide.active .hb-txt { animation: none; }
  .hb-slide.active .hb-txt { opacity: 1; }
}

/* ===== hero banner carousel ===== */
.hero-slider { position: relative; height: calc(100vh - 150px); min-height: 560px; background: #071A33; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-slide__img { width: 100%; height: 100%; }
.hero-dot { width: 10px; height: 10px; border-radius: 9999px; background: rgba(255,255,255,.45); transition: background .2s, width .2s; }
.hero-dot.active { background: #E0A82E; width: 28px; }

@media (max-width: 768px) {
  .hero-slider { height: calc(100vh - 112px); min-height: 440px; }
}

/* ===== wave divider (sits between a light section and a dark one) ===== */
.wave-divider { position: relative; height: 84px; overflow: hidden; line-height: 0; background: #F3F5F8; }
.wave-divider .wave-track { position: absolute; bottom: -1px; left: 0; }
.wave-divider .wave-track svg { height: 84px; }

/* ===== continuous flowing wave divider ===== */
.wave-top { position: absolute; left: 0; top: 0; width: 100%; line-height: 0; transform: translateY(-98%); pointer-events: none; }
.wave-track { display: flex; width: 200%; animation: waveMove 16s linear infinite; }
.wave-track svg { width: 50%; height: 70px; display: block; }
.wave-track--slow { animation-duration: 26s; opacity: .5; }
@keyframes waveMove { to { transform: translateX(-50%); } }

/* ===== Our Journey — oil-pour roadmap ===== */
.oil-rail { position: relative; max-width: 64rem; margin: 0 auto; }
.oil-bottle { position: absolute; top: 0; left: 50%; transform: translateX(calc(-50% - 2.2%)); z-index: 4; width: 178px; height: 178px;
  filter: drop-shadow(0 10px 14px rgba(11,37,69,.30)) drop-shadow(0 28px 32px rgba(11,37,69,.20)); }
.oil-track { position: absolute; left: 50%; transform: translateX(-50%); width: 8px; top: 158px; bottom: 40px;
  background: rgba(11,37,69,.10); border-radius: 8px; z-index: 1; }
.oil-fill { position: absolute; left: 0; top: -10px; width: 100%; height: 0; border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #EAB63C, #E0A82E 45%, #C58D1C);
  box-shadow: 0 0 14px rgba(224,168,46,.45); will-change: height; }
/* slim glossy highlight running down the stream */
.oil-fill::before { content: ''; position: absolute; top: 0; left: 1.5px; width: 2px; height: 100%;
  background: linear-gradient(180deg, rgba(255,240,200,.9), rgba(255,240,200,.25)); border-radius: 2px; }
.oil-drop { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); width: 19px; height: 25px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: radial-gradient(circle at 38% 30%, #FCEBB6, #E7B23E 55%, #BE8418);
  box-shadow: 0 6px 13px rgba(224,168,46,.4), inset -2px -3px 6px rgba(150,95,10,.4), inset 2px 2px 5px rgba(255,242,205,.6); }

.oil-milestones { position: relative; z-index: 2; padding-top: 178px; }
.oil-ms { position: relative; width: 50%; box-sizing: border-box; margin-bottom: 6rem;
  opacity: .38; transition: opacity .5s ease; }
.oil-ms:last-child { margin-bottom: 0; }
.oil-ms.lit-text { opacity: 1; }
.oil-ms.left { left: 0; padding-right: 4rem; text-align: right; }
.oil-ms.right { left: 50%; padding-left: 4rem; text-align: left; }
.oil-ms__dot { position: absolute; top: 18px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  border: 4px solid #DCE3EE; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease; z-index: 3; }
.oil-ms.left .oil-ms__dot { right: -13px; }
.oil-ms.right .oil-ms__dot { left: -13px; }
.oil-ms__dot.lit { background: #E0A82E; border-color: #E0A82E; transform: scale(1.12);
  box-shadow: 0 0 0 7px rgba(224,168,46,.16), 0 0 18px rgba(224,168,46,.7); }
.oil-year { font-family: 'Saira', sans-serif; font-weight: 800; line-height: .85; color: #16335C;
  font-size: clamp(3.25rem, 7vw, 5.25rem); transition: color .4s ease; }
.oil-ms.lit-text .oil-year { color: #C58D1C; }

@media (prefers-reduced-motion: reduce) {
  .oil-ms { opacity: 1; }
  .oil-fill { box-shadow: none; }
}
@media (max-width: 900px) {
  .oil-bottle { left: 32px; width: 104px; height: 104px; }
  .oil-track { left: 32px; top: 92px; bottom: 24px; }
  .oil-milestones { padding-top: 108px; }
  .oil-ms, .oil-ms.left, .oil-ms.right { width: 100%; left: 0; text-align: left; padding-left: 3.75rem; padding-right: 0; margin-bottom: 3.25rem; }
  .oil-ms.left .oil-ms__dot, .oil-ms.right .oil-ms__dot { left: 19px; right: auto; }
}

/* ===== testimonial carousel ===== */
#tdots .hero-dot { background: rgba(11,37,69,.22); }
#tdots .hero-dot.active { background: #E0A82E; }
.t-slider { position: relative; }
.t-card { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.t-card.active { position: relative; opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .hero-slide { transition: none; }
  .wave-track { animation: none; }
  .t-card { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== Product Categories — premium redesign ===== */
.cat-section { position: relative; overflow: hidden; }

.cat-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid rgba(11,37,69,.08);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(7,26,51,.04), 0 10px 26px -14px rgba(7,26,51,.16);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s cubic-bezier(.2,.7,.3,1), border-color .45s ease;
  will-change: transform;
}
.cat-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 2px 4px rgba(7,26,51,.05), 0 30px 54px -20px rgba(7,26,51,.32);
  border-color: rgba(224,168,46,.5);
}
.cat-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(224,168,46,.6), 0 30px 54px -20px rgba(7,26,51,.32);
}

.cat-card__media {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #EAF0F8 0%, #ffffff 62%);
  display: grid; place-items: center;
}
.cat-card__media img {
  height: 100%; width: auto; max-width: 100%; object-fit: contain; padding: 1.25rem;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
.cat-card:hover .cat-card__media img { transform: scale(1.07); }

/* amber accent line — reveals along the media base on hover */
.cat-card__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, #E0A82E, #f3cd73);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.cat-card:hover .cat-card__media::after { transform: scaleX(1); }

.cat-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.cat-card__cta svg { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.cat-card:hover .cat-card__cta svg { transform: translateX(5px); }

.cat-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #B07B12; background: rgba(224,168,46,.12);
  border: 1px solid rgba(224,168,46,.32);
  padding: .3rem .7rem; border-radius: 9999px;
}

/* staggered scroll reveal */
.cat-reveal { opacity: 0; transform: translateY(40px); transition: opacity .6s ease-out, transform .6s ease-out; }
.cat-reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cat-card, .cat-card__media img, .cat-card__cta svg, .cat-reveal { transition: none !important; }
  .cat-card__media::after { transition: none !important; }
  .cat-reveal { opacity: 1; transform: none; }
}

/* ===== Home "Our Products" image cards ===== */
.prod-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0B2545; }
.prod-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.prod-card:hover .prod-card__media img { transform: scale(1.05); }
.prod-card__body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.prod-card__cta {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1rem;
  color: #C58D1C; font-weight: 600; font-size: .9rem;
}
.prod-card__cta svg { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.prod-card:hover .prod-card__cta svg { transform: translateX(5px); }

/* designed fallback media (used until a real promo banner is supplied):
   category title on the left, product bottle on the right, navy gradient. */
.prod-fallback {
  display: flex; align-items: center;
  background:
    radial-gradient(120% 140% at 100% 50%, rgba(224,168,46,.16), transparent 55%),
    linear-gradient(120deg, #0B2545 0%, #13315C 60%, #071A33 100%);
}
.prod-fallback::before {
  content: ""; position: absolute; left: 1.4rem; top: 1.4rem; width: 30px; height: 3px;
  background: linear-gradient(90deg, #E0A82E, #f3cd73); border-radius: 2px; z-index: 2;
}
.prod-fallback__title {
  position: relative; z-index: 2; flex: 1; min-width: 0;
  padding: 0 0 0 1.4rem;
  color: #fff; font-family: 'Saira', sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(1.15rem, 2.1vw, 1.6rem); line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.prod-fallback__mark {
  position: absolute; right: -6%; bottom: -14%; z-index: 1;
  width: 54%; height: auto;
  color: rgba(224,168,46,.16);
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.prod-card:hover .prod-fallback__mark { transform: scale(1.07) rotate(-4deg); }

/* ===== Social feed — scrolling "train" marquee ===== */
.social-marquee { position: relative; width: 100%; overflow: hidden; }
.social-track {
  display: flex; gap: 1.25rem; width: max-content;
  will-change: transform;
  animation: socialScroll 60s linear infinite;
}
.social-marquee:hover .social-track { animation-play-state: paused; }
@keyframes socialScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* soft fade edges so cards glide in/out instead of hard-cutting */
.social-marquee__fade { position: absolute; top: 0; bottom: 0; width: 9%; z-index: 2; pointer-events: none; }
.social-marquee__fade--l { left: 0;  background: linear-gradient(to right, #F3F5F8, transparent); }
.social-marquee__fade--r { right: 0; background: linear-gradient(to left,  #F3F5F8, transparent); }

.social-card {
  flex: 0 0 auto; width: 300px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(11,37,69,.08); border-radius: 20px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(7,26,51,.04), 0 10px 26px -14px rgba(7,26,51,.16);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.social-card:hover {
  transform: translateY(-6px);
  border-color: rgba(224,168,46,.5);
  box-shadow: 0 2px 4px rgba(7,26,51,.05), 0 28px 50px -20px rgba(7,26,51,.32);
}
.social-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(165deg, #EAF0F8, #fff 62%); }
.social-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.social-card:hover .social-card__media img { transform: scale(1.06); }
.social-card__badge {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 30px; height: 30px; border-radius: 9999px; display: grid; place-items: center;
  color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.social-card__badge svg { width: 17px; height: 17px; }
.social-card__badge.is-ig { background: linear-gradient(45deg, #f09433, #e6683c 35%, #dc2743 55%, #cc2366 75%, #bc1888); }
.social-card__badge.is-fb { background: #1877F2; }
.social-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.social-card__caption {
  color: #2A3A52; font-size: .92rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.social-card__cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; color: #C58D1C; font-weight: 600; font-size: .82rem; }
.social-card__cta svg { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.social-card:hover .social-card__cta svg { transform: translateX(4px); }

/* follow buttons */
.social-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.3rem; border-radius: .65rem; font-weight: 600; color: #fff;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.social-btn svg { width: 19px; height: 19px; }
.social-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(11,37,69,.4); }
.social-btn--ig { background: linear-gradient(45deg, #f09433, #e6683c 30%, #dc2743 55%, #cc2366 75%, #bc1888); }
.social-btn--fb { background: #1877F2; }

@media (max-width: 640px) { .social-card { width: 250px; } }
@media (prefers-reduced-motion: reduce) {
  .social-track { animation: none; flex-wrap: nowrap; overflow-x: auto; }
  .social-card, .social-card__media img, .social-card__cta svg, .social-btn { transition: none !important; }
}