
/*
  TECHNOGEN PRODUCT LANDING PAGE — PREMIUM PRESENTATION OVERLAY
  Loaded after site.css and technogen-final-fixes.css.
  Scope: Product Landing Page only.
*/

/* ---------- Global product section rhythm ---------- */
.product-masthead + .product-anchor-nav + .section,
.product-anchor-nav ~ .section{
  scroll-margin-top:120px;
}

.product-anchor-nav{
  background:#fff;
  border-top:1px solid #e0e7ea;
  border-bottom:1px solid #d8e2e6;
  box-shadow:0 5px 18px rgba(14,54,70,.035);
}
.product-anchor-nav .container{
  gap:0!important;
}
.product-anchor-nav a{
  border-right:1px solid #dde5e8;
  border-bottom:2px solid transparent;
  background:#fff!important;
  padding:16px 18px!important;
  font-size:13px!important;
  font-weight:750!important;
  color:#314954!important;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.product-anchor-nav a:first-child{
  border-left:1px solid #dde5e8;
}
.product-anchor-nav a:hover{
  background:#f4f8f9!important;
  color:#0d5d76!important;
  border-bottom-color:#d79520!important;
}

/* ---------- One-line section heading system ---------- */
.product-section-heading{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:14px!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 28px!important;
}

.product-section-heading>span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  flex:0 0 42px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #d1dde1!important;
  background:#fff!important;
  color:#c88718!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  white-space:nowrap!important;
}

.product-section-heading h2{
  display:block!important;
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  font-size:clamp(27px,2.3vw,36px)!important;
  line-height:1.12!important;
  font-weight:700!important;
  letter-spacing:-.025em!important;
  color:#102d3b!important;
  white-space:normal!important;
}

.product-section-heading::after{
  content:""!important;
  display:block!important;
  flex:1 1 auto!important;
  min-width:40px!important;
  height:1px!important;
  margin-left:10px!important;
  background:linear-gradient(90deg,#cad9de,rgba(202,217,222,0))!important;
}

/* Overview keeps heading aligned and copy readable. */
.product-overview-copy .product-section-heading{
  margin-bottom:22px!important;
}
.product-overview-copy > p:not(.eyebrow),
.product-overview-copy > div p,
.product-overview-copy blockquote{
  text-align:justify!important;
  text-justify:inter-word!important;
  hyphens:none!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
.product-overview-copy p{
  line-height:1.72!important;
}

/* ---------- Applications: compact premium 4-column grid ---------- */
.applications-band{
  background:
    linear-gradient(180deg,rgba(239,245,247,.82),rgba(247,249,250,.9))!important;
  border-top:1px solid #e0e8eb;
  border-bottom:1px solid #e0e8eb;
}

.applications-band .container{
  width:min(1180px,calc(100% - 40px))!important;
}

.refined-app-grid,
.application-card-grid.refined-app-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}

.application-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  min-width:0!important;
  min-height:122px!important;
  margin:0!important;
  padding:20px 20px 18px 22px!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid #d7e2e6!important;
  border-left:3px solid #156981!important;
  box-shadow:0 7px 18px rgba(17,54,70,.035)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.application-card::after{
  content:""!important;
  position:absolute!important;
  right:-28px!important;
  bottom:-32px!important;
  width:88px!important;
  height:88px!important;
  border:1px solid rgba(18,103,129,.09)!important;
  border-radius:50%!important;
}
.application-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 13px 28px rgba(17,54,70,.08)!important;
  border-left-color:#d79520!important;
}
.application-card>span{
  display:block!important;
  margin:0 0 18px!important;
  color:#c88718!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.11em!important;
}
.application-card>strong{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  color:#102f3e!important;
  font-size:16px!important;
  line-height:1.38!important;
  font-weight:700!important;
}

/* ---------- Operating principle ---------- */
.operating-principle-card{
  border:1px solid #d6e1e5!important;
  border-top:3px solid #d79520!important;
  background:#fff!important;
  box-shadow:0 12px 30px rgba(17,54,70,.045)!important;
  padding:30px 32px!important;
}
.operating-principle-card .rich-content{
  max-width:1000px!important;
  color:#334e5a!important;
}
.operating-principle-card .rich-content p{
  line-height:1.72!important;
}
.operating-principle-card .rich-content strong{
  color:#153847!important;
}

/* ---------- Features / Interlocks ---------- */
.refined-feature-grid,
.feature-list-grid.refined-feature-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0 30px!important;
  width:100%!important;
  padding:24px 28px!important;
  border:1px solid #d8e2e6!important;
  border-left:4px solid #156981!important;
  background:#fff!important;
  box-shadow:0 10px 24px rgba(21,25,29,.045)!important;
}
.refined-feature-grid>div,
.feature-list-grid.refined-feature-grid>div{
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr)!important;
  align-items:start!important;
  gap:12px!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:15px 0!important;
  border:0!important;
  border-bottom:1px solid #e0e7ea!important;
  background:transparent!important;
}
.refined-feature-grid>div>span,
.feature-list-grid.refined-feature-grid>div>span{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  display:block!important;
  width:16px!important;
  height:16px!important;
  margin:4px 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.refined-feature-grid>div>span::before,
.refined-feature-grid>div>span::after{
  content:""!important;
  position:absolute!important;
  top:2px!important;
  width:7px!important;
  height:7px!important;
  border:0!important;
  border-top:2px solid #d79520!important;
  border-right:2px solid #d79520!important;
  border-radius:0!important;
  background:transparent!important;
  transform:rotate(45deg)!important;
}
.refined-feature-grid>div>span::before{left:0!important;}
.refined-feature-grid>div>span::after{left:6px!important;}
.refined-feature-grid p,
.feature-list-grid.refined-feature-grid p{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  color:#304353!important;
  font-size:15px!important;
  font-weight:500!important;
  line-height:1.6!important;
  text-align:left!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}
.refined-feature-grid>div:nth-last-child(-n+2){border-bottom:0!important;}
#interlocks .refined-feature-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0 24px!important;
}
#interlocks .refined-feature-grid>div{
  border-bottom:0!important;
}

/* ---------- Technical specifications ---------- */
.specification-section{
  width:min(1180px,calc(100% - 40px))!important;
}
.specification-section .product-section-heading{
  margin-bottom:12px!important;
}
.specification-note{
  max-width:920px!important;
  margin:0 0 24px!important;
  color:#657780!important;
  line-height:1.65!important;
}
.specification-table-wrap{
  width:100%!important;
  max-width:none!important;
  overflow-x:auto!important;
  border:1px solid #d7e2e6!important;
  background:#fff!important;
  box-shadow:0 10px 26px rgba(17,54,70,.035)!important;
}
.specification-table-wrap table{
  width:100%!important;
  min-width:780px!important;
}
.specification-table-wrap th,
.specification-table-wrap td{
  vertical-align:top!important;
  line-height:1.5!important;
}

/* ---------- Applicable Industries: strong visual cards ---------- */
#industries{
  background:
    radial-gradient(circle at 88% 14%,rgba(21,105,129,.055),transparent 26%),
    linear-gradient(180deg,#f5f8f9,#eef4f6)!important;
  border-top:1px solid #dee8eb;
  border-bottom:1px solid #dee8eb;
}

#industries .container{
  width:min(1180px,calc(100% - 40px))!important;
}

.applicable-industry-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
}

.applicable-industry-card{
  position:relative!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  min-width:0!important;
  min-height:96px!important;
  margin:0!important;
  padding:18px 18px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid #d5e1e5!important;
  box-shadow:0 8px 22px rgba(16,54,70,.04)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.applicable-industry-card::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  bottom:0!important;
  width:100%!important;
  height:3px!important;
  background:linear-gradient(90deg,#156981,#d79520)!important;
  opacity:.68!important;
}
.applicable-industry-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 14px 28px rgba(16,54,70,.085)!important;
  border-color:#c7d8de!important;
}
.applicable-industry-card>span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:44px!important;
  height:44px!important;
  margin:0!important;
  border:1px solid #c9dce2!important;
  border-radius:50%!important;
  background:#f5fafb!important;
  color:#c88718!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
}
.applicable-industry-card>strong{
  display:block!important;
  margin:0!important;
  color:#123443!important;
  font-size:16px!important;
  line-height:1.35!important;
  font-weight:700!important;
}

/* ---------- Add-ons ---------- */
.addon-card-grid{
  gap:14px!important;
}
.addon-card{
  border:1px solid #d8e3e7!important;
  background:#fff!important;
  box-shadow:0 7px 18px rgba(17,54,70,.035)!important;
}
.addon-card>span{
  color:#c88718!important;
  font-weight:900!important;
}

/* ---------- FAQ ---------- */
.faq-section{
  width:min(1180px,calc(100% - 40px))!important;
}
.faq-section .product-section-heading{
  margin-bottom:24px!important;
}
.faq-list{
  width:100%!important;
  max-width:none!important;
}
.faq-item{
  border:1px solid #d9e3e7!important;
  background:#fff!important;
  margin-bottom:10px!important;
  box-shadow:0 5px 16px rgba(17,54,70,.025)!important;
}
.faq-item summary{
  padding:17px 18px!important;
  color:#173847!important;
  font-weight:700!important;
  line-height:1.45!important;
}
.faq-item>div{
  padding:0 18px 18px!important;
  color:#5c7079!important;
  line-height:1.68!important;
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .refined-app-grid,
  .application-card-grid.refined-app-grid,
  .applicable-industry-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(max-width:820px){
  .refined-app-grid,
  .application-card-grid.refined-app-grid,
  .applicable-industry-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .specification-layout>div:first-child{
    position:static!important;
  }

  .refined-feature-grid,
  .feature-list-grid.refined-feature-grid,
  #interlocks .refined-feature-grid{
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  .refined-feature-grid>div,
  #interlocks .refined-feature-grid>div{
    border-bottom:1px solid #e0e7ea!important;
  }
  .refined-feature-grid>div:last-child,
  #interlocks .refined-feature-grid>div:last-child{
    border-bottom:0!important;
  }
}
@media(max-width:620px){
  .product-section-heading{
    gap:10px!important;
    margin-bottom:20px!important;
  }
  .product-section-heading>span{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    flex-basis:36px!important;
  }
  .product-section-heading h2{
    font-size:25px!important;
  }
  .product-section-heading::after{
    display:none!important;
  }
  .refined-app-grid,
  .application-card-grid.refined-app-grid,
  .applicable-industry-grid{
    grid-template-columns:1fr!important;
  }
  .application-card{
    min-height:100px!important;
  }
  .applicable-industry-card{
    min-height:82px!important;
  }
  .operating-principle-card{
    padding:24px 20px!important;
  }
}
