/* ==========================================================================
   VASUNDHARA ENGINEERING WORKS
   theme.css — visual refresh ("Industrial Aurora")
   --------------------------------------------------------------------------
   Loaded LAST on every page, so it only restyles: colour, radius, shadow,
   gradients and hover polish. No layout, markup or script is touched.
   To go back to the previous look, remove the <link> to this file.

   Palette is pulled from the logo flame: green > teal > blue, on deep navy.
   ========================================================================== */

:root {
  --navy-950: #060d22;
  --navy-900: #0a1430;
  --navy-800: #0e1d45;
  --brand-green: #4ba900;
  --brand-teal:  #10a683;
  --brand-blue:  #2e9ce2;

  --grad-brand:  linear-gradient(110deg, #1257c4 0%, #2e9ce2 55%, #10a683 100%);
  --grad-brand-soft: linear-gradient(110deg, rgba(18,87,196,.10), rgba(16,166,131,.10));
  --grad-navy:   linear-gradient(160deg, #0a1430 0%, #0e1d45 60%, #0b2a5c 100%);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  --shadow-card: 0 1px 2px rgba(10,20,48,.05), 0 10px 30px -12px rgba(18,87,196,.18);
  --shadow-lift: 0 4px 8px rgba(10,20,48,.06), 0 28px 56px -16px rgba(18,87,196,.30);
  --ring-glow:   0 0 0 1px rgba(46,156,226,.45), 0 18px 44px -14px rgba(46,156,226,.45);
}

body { background: #fff; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { letter-spacing: -0.028em; }

.eyebrow {
  padding: .4rem .85rem .4rem .75rem;
  border-radius: 999px;
  background: var(--grad-brand-soft);
  border: 1px solid rgba(18,87,196,.16);
  letter-spacing: .16em;
}
.eyebrow::before {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--grad-brand);
}
.eyebrow--light {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  color: #8cc4ff;
}

/* gradient accent on the key phrase of big headings */
.oem-title__accent,
.hero__title .accent {
  background: linear-gradient(90deg, #4aa8ff, #34d3a6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Header ---------- */
.header.is-scrolled {
  background: rgba(6,10,22,.88);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 34px -14px rgba(0,0,0,.6);
}
.header .header__cta,
.header__cta {
  border-radius: 999px;
  padding: .65rem 1.3rem;
}
.header .header__cta:hover,
.header__cta:hover {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(18,87,196,.6);
}
.header__progress {
  height: 3px;
  background: var(--grad-brand);
}
.nav__link::after { height: 2px; border-radius: 2px; background: var(--grad-brand); }

/* ---------- Buttons ---------- */
.btn {
  border-radius: 999px;
  padding: 1rem 1.9rem;
  font-weight: 600;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: var(--grad-navy);
  box-shadow: 0 10px 26px -12px rgba(10,20,48,.7);
}
.btn--primary::before { background: var(--grad-brand); }
.btn--primary:hover { box-shadow: 0 16px 32px -12px rgba(18,87,196,.7); }
.btn--accent {
  background: var(--grad-brand);
  box-shadow: 0 12px 28px -12px rgba(18,87,196,.7);
}
.btn--accent::before { background: var(--navy-900); }
.btn--accent:hover { box-shadow: 0 18px 36px -12px rgba(18,87,196,.75); }
.btn--outline { border-color: rgba(18,87,196,.3); color: var(--navy-900); background: #fff; }
.btn--outline:hover { border-color: var(--c-accent); color: var(--c-accent); }
.hero .btn--outline,
.page-hero .btn--outline,
.section--dark .btn--outline,
.cta .btn--outline {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.4);
  color: #fff;
  backdrop-filter: blur(6px);
}
.hero .btn--outline:hover,
.page-hero .btn--outline:hover,
.section--dark .btn--outline:hover,
.cta .btn--outline:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.btn--outline-light { border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* ---------- Hero ---------- */
.hero-overlay,
.hero::after {
  background-image: linear-gradient(100deg, rgba(6,13,34,.88) 0%, rgba(10,20,48,.62) 48%, rgba(10,20,48,.25) 100%);
}
.page-hero { background: var(--grad-navy); }
.hero .hero__tag,
.hero .hero__strip { border-color: rgba(255,255,255,.14); }

/* ---------- Section surfaces ---------- */
.section--gray {
  background:
    radial-gradient(48rem 24rem at 100% 0%, rgba(46,156,226,.10), transparent 65%),
    linear-gradient(180deg, #f3f8ff 0%, #eaf2fd 100%);
}
.section--dark,
.stats.section--dark,
.stats {
  background:
    radial-gradient(44rem 22rem at 90% -10%, rgba(46,156,226,.22), transparent 62%),
    radial-gradient(34rem 20rem at -5% 110%, rgba(16,166,131,.16), transparent 60%),
    var(--grad-navy);
}
.section--dark .lead { color: #a9b9d6; }

/* ---------- Cards ---------- */
.spv-card,
.client-card,
.industry-tag,
.process-card,
.mat-card,
.spec-card {
  border-radius: var(--r-lg);
}
.spv-card {
  border: 1px solid rgba(18,87,196,.12);
  box-shadow: var(--shadow-card);
  background: #fff;
}
.spv-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--ring-glow);
}
.spv-icon {
  border-radius: 16px;
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(18,87,196,.7);
}
.spv-card:hover .spv-icon { transform: rotate(-6deg) scale(1.06); }
.spv-label { color: var(--brand-teal); }

/* Why-choose-us grid: soft cards instead of hairline cells */
.why__grid,
.grid--hairline {
  gap: 1.1rem !important;
  background: transparent !important;
  border: 0 !important;
}
.why__card,
.grid--hairline > * {
  background: #fff;
  border: 1px solid rgba(18,87,196,.12);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}
.why__card:hover {
  background: var(--grad-navy);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}
.why__card svg {
  width: 2.75rem;
  height: 2.75rem;
  padding: .7rem;
  border-radius: 14px;
  background: var(--grad-brand-soft);
  color: var(--c-accent);
}
.why__card:hover svg { background: rgba(255,255,255,.1); color: #8cc4ff; }
.why__quote {
  border-radius: var(--r-lg);
  background: var(--grad-brand) !important;
  color: #fff;
}
.section--dark .grid--hairline > * { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }

/* Services list rows */
.svc-row { border-radius: var(--r-md); }
.svc-row:hover { background: #fff; box-shadow: var(--shadow-card); }
.svc-row__num { color: var(--brand-teal); }

/* Machines */
.machine-card { border-radius: var(--r-lg); }
.machine-card__media,
.machine-card .media { border-radius: var(--r-lg); overflow: hidden; }
.machine-card:hover .machine-card__media { box-shadow: var(--ring-glow); }
.section--dark .machine-card__cat,
.machine-card__cat { color: #5fd9b6; }

/* Photos & media frames */
.media { border-radius: var(--r-lg); overflow: hidden; }
.media img { border-radius: inherit; }
.media__mark { display: none; }
.intro__media .media,
.about__media .media { box-shadow: var(--shadow-lift); }

/* hero / dark-band eyebrows */
.hero .eyebrow,
.page-hero .eyebrow,
.section--dark .eyebrow,
.cta .eyebrow {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  color: #8cc4ff;
}

/* ---------- Stats ---------- */
.stats__grid { gap: 1rem !important; background: transparent !important; border: 0 !important; }
.stat {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-lg);
  backdrop-filter: blur(6px);
}
.stat__num {
  background: linear-gradient(90deg, #ffffff, #8cc4ff 70%, #5fd9b6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat__num span { -webkit-text-fill-color: transparent; }
.stat__label { color: #9fb3d6; }

/* ---------- Timeline (process) ---------- */
.timeline__item.is-active .timeline__dot {
  background: var(--grad-brand);
  border-color: transparent;
}
.timeline__fill { background: var(--grad-brand) !important; }

/* ---------- Quote block on intro ---------- */
.intro__note,
.callout,
blockquote {
  border-left-width: 4px;
  border-image: linear-gradient(180deg, #1257c4, #10a683) 1;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ---------- CTA band ---------- */
.cta {
  background:
    radial-gradient(40rem 20rem at 85% 0%, rgba(16,166,131,.35), transparent 60%),
    radial-gradient(40rem 22rem at 0% 100%, rgba(46,156,226,.40), transparent 60%),
    linear-gradient(135deg, #060d22 0%, #0d2b6b 55%, #1257c4 100%);
}

/* ---------- Footer ---------- */
.footer {
  background:
    radial-gradient(40rem 18rem at 100% 0%, rgba(46,156,226,.16), transparent 60%),
    var(--navy-950);
}
.footer__title { color: #8cc4ff; }
.footer__list a:hover,
.footer__contact a:hover { color: #5fd9b6; }

/* ---------- Forms ---------- */
input, textarea, select {
  border-radius: var(--r-sm);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid rgba(46,156,226,.55);
  outline-offset: 2px;
  border-color: var(--c-accent);
}

/* ---------- Selection & scrollbar ---------- */
::selection { background: var(--c-accent); color: #fff; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: #2e7be8 #eef5ff; }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .spv-card:hover, .why__card:hover { transform: none; }
}

/* ---------- Machine cards on dark bands: keep text readable ---------- */
.section--dark .machine-card__title { color: #fff; }
.section--dark .machine-card__spec { border-color: rgba(255,255,255,.14); }
.section--dark .machine-card__spec-value,
.section--dark .machine-card__desc { color: #b4c3de; }
.section--dark .machine-card__spec-label { color: #7f93b8; }

/* ---------- About: OEM milestone cards (light cards on the dark band) ---------- */
.section--oem .timeline__row {
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.2);
}
.section--oem .timeline__title { color: var(--navy-900) !important; }
.section--oem .timeline__desc { color: var(--c-steel-600); }

/* ---------- Manufacturing process (home) — dark band ---------- */
.section--process .timeline__title { color: #fff; }
.section--process .timeline__desc { color: #a9b9d6; }
.section--process .timeline__step { color: #5fd9b6; }
.section--process .timeline__spine { background: rgba(255,255,255,.14); }
.section--process .timeline__dot { background: var(--navy-900); border-color: rgba(255,255,255,.35); }
.section--process .timeline__item.is-active .timeline__dot { background: var(--grad-brand); border-color: transparent; }

/* ---------- Services page: detail rows & OEM chips ---------- */
.svc-detail__media .media {
  box-shadow: var(--shadow-lift);
}
.svc-detail__index {
  color: var(--brand-teal);
  letter-spacing: 0.14em;
  font-weight: 600;
}
.svc-detail__machine {
  border-radius: var(--r-md);
  border: 1px solid rgba(18,87,196,.14);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.svc-detail__machine-label {
  color: var(--brand-teal);
}
.product-cell::before,
.oem-item::before {
  display: none !important;
}
.section--dark .oem-item:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-2px);
  box-shadow: var(--ring-glow);
}
.section--dark .oem-item:hover span,
.oem-item:hover span {
  color: #ffffff !important;
}
.section--dark .oem-item:hover svg,
.oem-item:hover svg {
  color: #5fd9b6 !important;
}

/* ---------- Manufactured products cards (capabilities.html) ---------- */
.product-photo-card {
  border-radius: var(--r-lg);
  border: 1px solid rgba(18, 87, 196, 0.12);
  box-shadow: var(--shadow-card);
}
.product-photo-card:hover {
  box-shadow: var(--shadow-lift);
  border-color: rgba(46, 156, 226, 0.45);
}
.product-photo-card__tag {
  color: var(--brand-teal);
}
.product-photo-card__title {
  color: var(--navy-900);
}

/* ---------- Manufactured products showcase cards (Industrial Aurora) ---------- */
.product-card {
  border-radius: var(--r-lg);
  border: 1px solid rgba(18, 87, 196, 0.12);
  box-shadow: var(--shadow-card);
  background: #ffffff;
}
.product-card:hover {
  border-color: rgba(46, 156, 226, 0.45);
  box-shadow: var(--ring-glow);
}