/* ==========================================================================
   VBM India — shared stylesheet for catalog + guide pages
   Replicates the homepage design tokens (colors, fonts, container, buttons,
   header, footer) and adds components for catalog grids, category pages,
   spec tables, article typography and breadcrumbs.
   The homepage keeps its own inline CSS; this file is NOT loaded there.
   ========================================================================== */

:root{
  --dark:#0f1923;
  --dark2:#1a2736;
  --dark3:#13202c;
  --teal:#439a86;
  --teal-bright:#54b9a2;
  --gold:#d4a853;
  --gold-bright:#e6bd6b;
  --amber:#e8a83a;
  --ink:#0b131b;
  --paper:#f4f1ea;
  --muted:#9fb0bd;
  --line:rgba(212,168,83,.18);
  --maxw:1200px;
  --r:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#e7edf2;
  background:var(--dark);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.wm{font-family:"Montserrat",system-ui,sans-serif;font-weight:800;line-height:1.12;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
p{margin:0 0 1rem}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{
  font-family:"Montserrat",sans-serif;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;font-size:.72rem;color:var(--gold);margin:0 0 14px
}
.section{padding:80px 0;position:relative}
.section--gray{background:linear-gradient(180deg,var(--dark2),var(--dark3))}
.section-head{max-width:720px;margin:0 0 44px}
.section-head h2{font-size:clamp(1.6rem,3.4vw,2.5rem);margin:0 0 14px;color:#fff}
.section-head p{color:var(--muted);font-size:1.06rem;margin:0}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
.cat-card:focus-visible,.prod-card:focus-visible{
  outline:3px solid var(--gold-bright);outline-offset:3px;border-radius:6px
}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);
  padding:12px 18px;z-index:200;font-weight:700;border-radius:0 0 8px 0
}
.skip:focus{left:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:14px 26px;border-radius:999px;cursor:pointer;border:2px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s,color .25s;
  will-change:transform
}
.btn svg{width:18px;height:18px}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--amber));color:#1a1206;box-shadow:0 10px 26px -10px rgba(212,168,83,.7)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 34px -12px rgba(212,168,83,.8)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.22);color:#eef3f7}
.btn-ghost:hover{border-color:var(--teal-bright);color:#fff;transform:translateY(-3px);background:rgba(67,154,134,.12)}

/* ---------- HEADER ---------- */
header.site{
  position:sticky;top:0;z-index:100;
  background:rgba(15,25,35,.72);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s,box-shadow .3s
}
header.site.scrolled{background:rgba(11,19,27,.95);box-shadow:0 8px 30px -16px rgba(0,0,0,.8)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.wordmark{display:flex;align-items:center;gap:11px}
.wordmark .wm{font-size:1.42rem;font-weight:900;letter-spacing:.03em;color:#fff}
.wordmark .wm span{color:var(--gold)}
.brand-sub{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600;display:block;margin-top:2px}
nav.links{display:flex;align-items:center;gap:4px}
nav.links a{
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:.9rem;color:#c7d4de;
  padding:9px 13px;border-radius:8px;transition:color .2s,background .2s;position:relative
}
nav.links a:hover{color:#fff;background:rgba(255,255,255,.05)}
nav.links a[aria-current="page"]{color:#fff;background:rgba(212,168,83,.12)}
nav.links a.cta{background:linear-gradient(135deg,var(--gold),var(--amber));color:#1a1206;margin-left:8px}
nav.links a.cta:hover{background:linear-gradient(135deg,var(--gold-bright),var(--amber))}

/* dropdown (Products) */
.has-drop{position:relative}
.drop-toggle{display:inline-flex;align-items:center;gap:5px}
.drop-toggle svg{width:13px;height:13px;transition:transform .2s}
.has-drop:hover .drop-toggle svg,.has-drop:focus-within .drop-toggle svg{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:calc(100% + 8px);left:0;min-width:248px;
  background:rgba(13,21,29,.98);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:0 24px 48px -22px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s;z-index:120
}
.has-drop:hover .dropdown,.has-drop:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:10px 13px;border-radius:8px;font-size:.88rem;color:#c7d4de}
.dropdown a:hover{background:rgba(67,154,134,.14);color:#fff}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.18);border-radius:10px;width:46px;height:44px;cursor:pointer;color:#fff;padding:0}
.menu-btn svg{width:24px;height:24px;margin:auto}

/* ---------- BREADCRUMBS ---------- */
/* .breadcrumb is an alias of .crumbs (some pages use the longer class name) */
.crumbs,.breadcrumb{background:var(--dark3);border-bottom:1px solid rgba(255,255,255,.05)}
.crumbs ol,.breadcrumb ol{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0;padding:14px 0;font-size:.84rem;font-family:"Montserrat",sans-serif;font-weight:600
}
.crumbs li,.breadcrumb li{display:flex;align-items:center;gap:8px;color:var(--muted)}
.crumbs a,.breadcrumb a{color:#b9c7d2}
.crumbs a:hover,.breadcrumb a:hover{color:var(--gold-bright)}
.crumbs li[aria-current="page"],.breadcrumb li[aria-current="page"]{color:#fff}
.crumbs .sep{color:rgba(255,255,255,.3)}
/* .breadcrumb markup has no explicit .sep spans — generate separators automatically */
.breadcrumb li + li::before{content:"/";color:rgba(255,255,255,.3);margin-right:0}

/* ---------- PAGE HEAD / HERO BANNER ---------- */
.page-hero{
  position:relative;overflow:hidden;
  background:radial-gradient(70% 90% at 80% 10%,rgba(67,154,134,.18),transparent 60%),linear-gradient(160deg,var(--dark),var(--dark3));
  border-bottom:1px solid rgba(255,255,255,.06)
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 85% 20%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 85% 20%,#000 30%,transparent 78%)
}
.page-hero .wrap{position:relative;z-index:2;padding-top:64px;padding-bottom:64px}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.2rem);margin:0 0 18px;color:#fff;font-weight:900;max-width:18ch}
.page-hero h1 .accent{
  background:linear-gradient(120deg,var(--gold-bright),var(--teal-bright));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.page-hero .lead{font-size:clamp(1.02rem,1.7vw,1.2rem);color:#cdd9e2;max-width:760px;margin:0 0 8px}
.page-hero .sub{color:var(--muted);max-width:720px;margin:0 0 24px;font-size:1rem}
.page-hero .hero-ctas{display:flex;flex-wrap:wrap;gap:13px;margin-top:8px}
.tag-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.tag{
  font-size:.78rem;padding:6px 13px;border-radius:999px;border:1px solid var(--line);
  color:#d9c79a;background:rgba(212,168,83,.06);font-weight:600;font-family:"Montserrat",sans-serif
}

/* ---------- CATALOG GRID (6 categories) ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.07);border-radius:var(--r);padding:28px 26px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;overflow:hidden
}
.cat-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--teal));transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)
}
.cat-card:hover,.cat-card:focus-within{transform:translateY(-8px);border-color:rgba(212,168,83,.4);box-shadow:0 26px 46px -24px rgba(0,0,0,.8)}
.cat-card:hover::before,.cat-card:focus-within::before{transform:scaleX(1)}
.cat-card .ico{
  width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 25%,rgba(212,168,83,.22),rgba(67,154,134,.12));
  border:1px solid var(--line);margin-bottom:18px;flex:none
}
.cat-card .ico svg{width:30px;height:30px;color:var(--gold-bright)}
.cat-card h2,.cat-card h3{font-size:1.18rem;margin:0 0 10px;color:#fff}
.cat-card p{color:var(--muted);font-size:.95rem;margin:0 0 16px}
.cat-card .more{
  margin-top:auto;font-family:"Montserrat",sans-serif;font-weight:700;font-size:.85rem;
  color:var(--gold-bright);display:inline-flex;align-items:center;gap:7px
}
.cat-card .more svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.cat-card:hover .more svg{transform:translateX(4px)}
.cat-card .spec{margin-top:12px;font-family:"Montserrat",sans-serif;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-bright);font-weight:700}

/* ---------- PRODUCT SERIES CARDS ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prod-card{
  position:relative;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:26px 24px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;overflow:hidden
}
.prod-card:hover{transform:translateY(-6px);border-color:rgba(212,168,83,.35);box-shadow:0 22px 42px -24px rgba(0,0,0,.8)}
.prod-card .badge{
  display:inline-block;font-family:"Montserrat",sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.08em;
  color:#1a1206;background:linear-gradient(135deg,var(--gold),var(--amber));
  padding:5px 11px;border-radius:7px;margin-bottom:13px
}
.prod-card h3{font-size:1.1rem;margin:0 0 10px;color:#fff}
.prod-card p{color:#c4d1db;font-size:.93rem;margin:0 0 15px}
.prod-card .specs,.prod-card .spec-list{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:7px}
.prod-card .specs li,.prod-card .spec-list li{font-size:.85rem;color:var(--muted)}
.prod-card .specs li strong{color:#dfe7ee;font-weight:600}
/* .spec-list variant uses <li><span>Label</span> value</li> markup */
.prod-card .spec-list li span{display:inline-block;min-width:7.5em;color:#dfe7ee;font-weight:600;font-family:"Montserrat",sans-serif;font-size:.72rem;letter-spacing:.02em;text-transform:uppercase;margin-right:.4em}

/* ---------- SPEC / COMPARISON TABLES ---------- */
.table-wrap{overflow-x:auto;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02)}
table.spec{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px}
table.spec caption{text-align:left;padding:0 0 14px;color:var(--muted);font-size:.95rem}
table.spec th,table.spec td{padding:13px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
table.spec thead th{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);background:rgba(212,168,83,.06);position:sticky;top:0
}
table.spec tbody tr:hover{background:rgba(67,154,134,.06)}
table.spec tbody tr:last-child td{border-bottom:none}
table.spec td:first-child,table.spec th:first-child{font-weight:600;color:#eef3f7}

/* ---------- INFO / APPLICATION CARD GRIDS ---------- */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.info-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:24px}
.info-card h3{font-size:1.05rem;margin:0 0 9px;color:#fff}
.info-card p{font-size:.93rem;color:var(--muted);margin:0}

/* ---------- LONG-FORM / SEO TEXT ---------- */
.prose{max-width:760px}
.prose h2{font-size:clamp(1.4rem,2.8vw,1.9rem);margin:2.4rem 0 1rem;color:#fff}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.2rem;margin:2rem 0 .8rem;color:#fff}
.prose p{color:#c4d1db;font-size:1.04rem;margin:0 0 1.15rem}
.prose ul,.prose ol{color:#c4d1db;font-size:1.04rem;margin:0 0 1.3rem;padding-left:1.3rem}
.prose li{margin-bottom:.5rem}
.prose strong{color:#eef3f7}
.prose a{color:var(--gold-bright);font-weight:600;border-bottom:1px solid rgba(230,189,107,.3)}
.prose a:hover{border-color:var(--gold-bright)}
.prose blockquote{
  margin:1.6rem 0;padding:16px 22px;border-left:3px solid var(--teal-bright);
  background:rgba(67,154,134,.08);border-radius:0 10px 10px 0;color:#dfe7ee
}
.prose .table-wrap{margin:1.6rem 0}

/* ---------- ARTICLE LAYOUT ---------- */
.article-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0 0;color:var(--muted);font-size:.85rem;font-family:"Montserrat",sans-serif;font-weight:600}
.article-meta span{display:flex;align-items:center;gap:7px}
.article-meta svg{width:15px;height:15px;color:var(--teal-bright)}
.article-body{padding:64px 0}
.toc{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;
  padding:22px 26px;margin:0 0 40px
}
.toc h2{font-family:"Montserrat",sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.toc ol{margin:0;padding-left:1.2rem;color:#c4d1db}
.toc li{margin-bottom:7px}
.toc a{color:#c7d4de}
.toc a:hover{color:var(--gold-bright)}

/* ---------- RELATED / CROSS-LINK CARDS ---------- */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.related-card{
  display:flex;flex-direction:column;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:22px;
  transition:transform .3s var(--ease),border-color .3s
}
.related-card:hover{transform:translateY(-5px);border-color:rgba(212,168,83,.35)}
.related-card .k{font-family:"Montserrat",sans-serif;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-bright);font-weight:700;margin-bottom:9px}
.related-card h3{font-size:1.02rem;margin:0 0 8px;color:#fff}
.related-card p{font-size:.9rem;color:var(--muted);margin:0 0 14px}
.related-card .more{margin-top:auto;font-family:"Montserrat",sans-serif;font-weight:700;font-size:.82rem;color:var(--gold-bright)}

/* ---------- QUOTE / CONTACT ---------- */
#quote{background:linear-gradient(180deg,var(--dark),var(--ink))}
.quote-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:start}
.quote-aside h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0 0 16px;color:#fff}
.quote-aside p{color:#c4d1db}
.contact-pills{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.cpill{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.cpill .ci{width:42px;height:42px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(212,168,83,.12);border:1px solid var(--line)}
.cpill .ci svg{width:22px;height:22px;color:var(--gold-bright)}
.cpill .ct b{display:block;font-family:"Montserrat",sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cpill .ct a,.cpill .ct span{color:#fff;font-weight:600}
.cpill .ct a:hover{color:var(--gold-bright)}
form.quote{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:34px;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.8)
}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-family:"Montserrat",sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.04em;color:#cdd9e2;margin-bottom:7px}
.field label .req{color:var(--gold)}
.field input,.field textarea{
  width:100%;background:rgba(8,14,20,.7);border:1px solid rgba(255,255,255,.12);border-radius:10px;
  color:#fff;font:inherit;font-size:.98rem;padding:13px 15px;transition:border-color .2s,box-shadow .2s
}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:#7f8f9b}
.field input:focus,.field textarea:focus{border-color:var(--teal-bright);box-shadow:0 0 0 3px rgba(67,154,134,.2);outline:none}
form.quote .btn-primary{width:100%;justify-content:center;margin-top:6px;font-size:1.02rem;padding:16px}
.formnote{font-size:.8rem;color:var(--muted);margin:14px 0 0;text-align:center}

/* ---------- CTA BAND ---------- */
.cta-band{background:linear-gradient(120deg,var(--ink),var(--dark2));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-band .inner{text-align:center;max-width:680px;margin:0 auto}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:0 0 12px;color:#fff}
.cta-band p{color:#c4d1db;margin:0 0 24px}

/* ---------- FOOTER ---------- */
footer.site{background:var(--ink);border-top:1px solid rgba(255,255,255,.07);padding:54px 0 30px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.07)}
.foot-brand .wm{font-size:1.3rem;font-weight:900;color:#fff;font-family:"Montserrat",sans-serif}
.foot-brand .wm span{color:var(--gold)}
.foot-brand p{color:var(--muted);font-size:.92rem;margin:14px 0 0;max-width:320px}
.foot-brand .auth{margin-top:14px;font-size:.86rem;color:#cdd9e2}
.foot-brand .auth a{color:var(--gold-bright);font-weight:600}
.foot-col h5{font-family:"Montserrat",sans-serif;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 16px;font-weight:700}
.foot-col a,.foot-col span{display:block;color:#b9c7d2;font-size:.94rem;margin-bottom:10px}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;color:var(--muted);font-size:.85rem}
.foot-bottom a{color:var(--muted)}
.foot-bottom a:hover{color:#fff}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .cat-grid,.prod-grid,.related-grid{grid-template-columns:repeat(2,1fr)}
  .quote-grid{grid-template-columns:1fr;gap:40px}
  .foot-top{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:720px){
  nav.links{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:4px;
    background:rgba(11,19,27,.98);border-bottom:1px solid rgba(255,255,255,.08);padding:16px 22px 24px;
    transform:translateY(-130%);transition:transform .35s var(--ease);box-shadow:0 20px 40px -20px rgba(0,0,0,.8);
    max-height:calc(100vh - 74px);overflow-y:auto
  }
  nav.links.open{transform:translateY(0)}
  nav.links a{padding:13px 12px;font-size:1rem;border-radius:10px}
  nav.links a.cta{margin-left:0;text-align:center;margin-top:6px}
  .menu-btn{display:flex}
  .has-drop{display:flex;flex-direction:column}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;border:none;border-left:2px solid var(--line);border-radius:0;margin:4px 0 4px 12px;padding:0 0 0 6px;min-width:0}
  .has-drop .drop-toggle svg{display:none}
}
@media(max-width:560px){
  body{font-size:16px}
  .section{padding:56px 0}
  .cat-grid,.prod-grid,.info-grid,.related-grid{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:26px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}