/* ==========================================================
   products.html — Prana Air inspired deep product pages
   ========================================================== */

/* ---------- Products hero ---------- */
.products-hero{
  padding:80px 0 50px;
  background:
    radial-gradient(80% 80% at 80% 20%, rgba(0,154,154,.08), transparent 70%),
    linear-gradient(180deg,#f3fafb 0%,#ffffff 100%);
  border-bottom:1px solid var(--line);
}
.products-hero .container{display:flex;flex-direction:column;gap:14px;max-width:880px}
.products-hero h1{
  font-family:'Space Grotesk', sans-serif;font-weight:800;
  font-size:clamp(2.1rem, 4.2vw, 3.3rem);line-height:1.1;color:var(--teal-dark);
  margin:6px 0 0;
}
.products-hero .lead{font-size:1.05rem;color:#41495d;max-width:760px;margin-top:8px}

/* ---------- Sticky product nav ---------- */
.product-nav{
  position:sticky;top:78px;z-index:50;
  background:linear-gradient(180deg,#ffffff 0%,#fafdfe 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 12px rgba(12,50,70,.04);
}
.product-nav-grid{
  display:flex;justify-content:center;gap:4px;overflow-x:auto;padding:8px 28px;
  scrollbar-width:none;scroll-behavior:smooth;
}
.product-nav-grid::-webkit-scrollbar{display:none}
.product-nav-grid a{
  flex-shrink:0;padding:10px 16px;font-size:.86rem;font-weight:600;
  color:#3a4d59;border-radius:8px;
  border:1px solid transparent;transition:all .2s ease;white-space:nowrap;
  position:relative;
}
.product-nav-grid a:hover{
  color:var(--teal-2);background:rgba(0,154,154,.08);
}
/* clean dot separator between items (replaces the awkward in-between bar) */
.product-nav-grid a:not(:last-child)::after{
  content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
  background:#cfdde2;margin-left:14px;vertical-align:middle;
}
.product-nav-grid a:not(:last-child):hover::after{background:#cfdde2}

@media (max-width:1100px){
  .product-nav-grid{justify-content:flex-start}
}
@media (max-width:880px){
  .product-nav-grid a:not(:last-child)::after{display:none}
}

/* ---------- Government outcomes (top of products page) ---------- */
.government-outcomes{
  padding:70px 0;background:#fff;border-bottom:1px solid var(--line);
  scroll-margin-top:140px;
}
.section-heading{display:flex;flex-direction:column;gap:6px;max-width:760px;margin-bottom:22px}
.section-heading.center{margin-left:auto;margin-right:auto;text-align:center;align-items:center}
.section-heading h2{font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.15}
.outcome-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.outcome-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px 22px;box-shadow:var(--shadow-sm);
  border-top:3px solid #009a9a;
  transition:transform .25s ease,box-shadow .25s ease;
}
.outcome-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.outcome-card span{
  display:inline-block;font-family:"JetBrains Mono",monospace;
  font-size:.7rem;font-weight:700;color:#d7a72f;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:8px;
}
.outcome-card h3{font-size:1.05rem;color:#06364a;margin:2px 0 8px;font-weight:700;line-height:1.25}
.outcome-card p{font-size:.9rem;color:#3a4d59;line-height:1.5;margin:0}

/* ---------- Deep detail sections ---------- */
.detail-section{
  padding:0 0 56px;background:#fff;
  scroll-margin-top:140px;
}
.detail-section + .detail-section{padding-top:0}
.detail-section .container{padding-top:48px}
.detail-section.soft{
  background:#f3fafb;
}
.detail-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:flex-start;
}
.detail-grid.reverse .detail-copy{order:2}
.detail-grid.reverse .visual-card{order:1}

.detail-copy{display:flex;flex-direction:column;gap:14px}
.section-kicker{
  display:inline-block;font-family:"JetBrains Mono",monospace;
  font-size:.74rem;font-weight:800;color:#009a9a;letter-spacing:.18em;
  text-transform:uppercase;padding:5px 12px;border-radius:6px;
  background:rgba(0,154,154,.08);border:1px solid rgba(0,154,154,.18);
  width:max-content;
}
.detail-copy h2{
  font-family:'Space Grotesk', sans-serif;font-weight:800;
  font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;color:var(--teal-dark);
  margin:6px 0 0;
}
.detail-lead{font-size:1.02rem;color:#3a4d59;line-height:1.6;margin:8px 0 0}
.detail-lead strong{color:#06364a;font-weight:700}

/* tag pills row */
.tag-list{
  list-style:none;padding:0;margin:6px 0 0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.tag-list li{
  font-size:.78rem;font-weight:600;color:#06364a;
  background:rgba(0,154,154,.10);border:1px solid rgba(0,154,154,.20);
  padding:5px 11px;border-radius:6px;
}

/* feature list with check icons */
.feature-list{
  list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px;
}
.feature-list li{
  font-size:.95rem;color:#3a4d59;line-height:1.5;
  padding-left:30px;position:relative;
}
.feature-list li::before{
  content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6l3 3 5-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    linear-gradient(135deg,#009a9a,#005d8f);
  background-size:60% 60%, cover;background-position:center;background-repeat:no-repeat;
}

/* spec grid */
.spec-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-top:18px;
}
.spec{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;box-shadow:var(--shadow-sm);
}
.spec span{
  display:block;font-family:"JetBrains Mono",monospace;font-size:.7rem;
  font-weight:700;color:#7d8aa3;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:4px;
}
.spec strong{
  display:block;font-size:.92rem;font-weight:600;color:#06364a;line-height:1.35;
}

.detail-cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}

/* visual card (right/left figure) */
.visual-card{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow-card);
}
.visual-card img{
  width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;background:#eef1f6;
}
.visual-card figcaption{
  padding:14px 18px 16px;font-size:.85rem;color:#5c6b73;line-height:1.45;
  border-top:1px solid var(--line);background:#fcfdfe;
}

/* ---------- Connectivity section (Mobile / Web / Control Room) ---------- */
.connectivity-section{
  padding:72px 0;background:#fcfdfe;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.connectivity-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.conn-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:28px 24px;text-align:center;box-shadow:var(--shadow-sm);
  border-top:3px solid #009a9a;
  transition:transform .25s ease,box-shadow .25s ease;
}
.conn-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.conn-icon{font-size:2rem;margin-bottom:10px}
.conn-card h3{font-size:1.1rem;color:#06364a;margin:0 0 8px;font-weight:700}
.conn-card p{font-size:.92rem;color:#3a4d59;line-height:1.5;margin:0}

/* ---------- CTA band ---------- */
.cta-band{
  padding:54px 0;
  background:linear-gradient(120deg,#06364a 0%,#005d8f 65%,#009a9a 100%);
  color:#fff;
}
.cta-layout{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-band h2{color:#fff;font-size:clamp(1.4rem,2.4vw,2rem);margin:0 0 6px;line-height:1.2}
.cta-band p{color:#d4ecef;font-size:1rem;max-width:580px;margin:0}
.cta-band .btn-warm{box-shadow:0 14px 28px rgba(243,200,75,.30)}

/* ==========================================================
   Single-product dedicated pages (pump.html, tank.html, etc.)
   ========================================================== */

/* breadcrumb */
.breadcrumb{
  background:#fcfdfe;border-bottom:1px solid var(--line);
}
.breadcrumb .container{
  padding:14px 28px;font-size:.84rem;color:#5c6b73;
}
.breadcrumb a{color:#5c6b73;text-decoration:none;transition:color .15s ease}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb span{margin:0 8px;color:#a4b0b6}
.breadcrumb strong{color:#06364a;font-weight:600}

/* single product hero */
.single-product-hero{
  padding:36px 0 72px;
  background:
    radial-gradient(80% 80% at 80% 20%, rgba(0,154,154,.08), transparent 70%),
    linear-gradient(180deg,#f3fafb 0%,#ffffff 100%);
  border-bottom:1px solid var(--line);
}
.single-product-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center;
}
.sp-copy{display:flex;flex-direction:column;gap:14px}
.sp-copy h1{
  font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.1;color:var(--teal-dark);
  margin:6px 0 0;
}
.sp-subtitle{
  font-size:1.06rem;color:#3a4d59;font-weight:600;line-height:1.4;
  margin:4px 0 0;
}
.sp-lead{
  font-size:.98rem;color:#3a4d59;line-height:1.6;margin:8px 0 0;
}
.sp-lead strong{color:#06364a;font-weight:700}
.sp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.sp-visual{margin:0;align-self:start}

/* key features section */
.sp-features{padding:36px 0 64px;background:linear-gradient(180deg,#f3fafb 0%,#ffffff 100%)}
.sp-feature-list{grid-template-columns:1fr 1fr;column-gap:32px;row-gap:8px}

/* specs section */
.sp-specs{padding:36px 0 64px;background:#fff;border-top:1px solid var(--line)}
.sp-spec-grid{grid-template-columns:1fr 1fr 1fr 1fr}

/* deep-dive blocks */
.deep-block{padding:32px 0 56px;background:#fff;border-top:1px solid var(--line)}
.deep-block:nth-of-type(even){background:linear-gradient(180deg,#f3fafb 0%,#ffffff 100%)}
.deep-wrap{max-width:840px}
.deep-wrap h3{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(1.3rem,2vw,1.7rem);color:#06364a;margin:0 0 12px;
}
.deep-wrap p{font-size:1rem;color:#3a4d59;line-height:1.7;margin:0}

/* related products grid */
.related-products{
  padding:64px 0;background:#fcfdfe;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.related-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:18px;display:flex;flex-direction:column;gap:8px;
  color:inherit;text-decoration:none;box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease;
}
.related-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:rgba(0,154,154,.30);
}
.related-img{
  width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#eef1f6;
}
.related-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;
}
.related-card:hover .related-img img{transform:scale(1.04)}
.related-kicker{
  display:inline-block;font-family:"JetBrains Mono",monospace;
  font-size:.68rem;font-weight:800;color:#009a9a;letter-spacing:.16em;text-transform:uppercase;
  margin-top:4px;
}
.related-card h3{
  font-size:1.05rem;color:#06364a;margin:2px 0 0;font-weight:700;line-height:1.25;
}
.related-cta{
  color:var(--teal-2);font-size:.85rem;font-weight:700;margin-top:6px;
  transition:color .2s ease;
}
.related-card:hover .related-cta{color:var(--teal)}

@media (max-width:1100px){
  .single-product-grid{grid-template-columns:1fr;gap:32px}
  .sp-visual{order:-1}
  .sp-feature-list{grid-template-columns:1fr}
  .sp-spec-grid{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .single-product-hero{padding:36px 0 48px}
  .sp-features,.sp-specs,.related-products,.deep-block{padding:42px 0}
  .sp-spec-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .breadcrumb .container{padding:12px 20px;font-size:.78rem}
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .detail-grid{grid-template-columns:1fr;gap:36px}
  .detail-grid.reverse .detail-copy{order:1}
  .detail-grid.reverse .visual-card{order:2}
  .outcome-grid{grid-template-columns:1fr 1fr}
  .connectivity-grid{grid-template-columns:1fr}
}
@media (max-width:880px){
  .products-hero{padding:54px 0 38px}
  .product-nav{top:64px}
  .government-outcomes{padding:48px 0}
  .detail-section{padding:0 0 36px}
  .detail-section .container{padding-top:32px}
  .spec-grid{grid-template-columns:1fr}
  .cta-band{padding:40px 0}
  .cta-layout{flex-direction:column;align-items:flex-start;text-align:left}
}
@media (max-width:560px){
  .outcome-grid{grid-template-columns:1fr}
}