/* Hidronic homepage sections — ported from hp-new.html mock, kept 1:1 with the mock's classnames/variables. */

:root{
  --blue:#065CAB;
  --blue-dark:#044380;
  --blue-deep:#0A2540;
  --navy:#12222F;
  --blue-wash:#EDF3FA;
  --grey:#554E50;
  --grey-mid:#7C767A;
  --grey-line:#E1E6EC;
  --bg:#FFFFFF;
  --bg-alt:#F5F7FA;
  --white:#fff;
  --maxw:1180px;
}

.hp-section{
  font-family:'Bahnschrift','DIN Alternate','Segoe UI','Helvetica Neue',Arial,sans-serif;
  color:var(--grey);
  background:var(--bg);
  line-height:1.62;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.hp-section img{max-width:100%;display:block}
.hp-section a{color:inherit}
.hp-section .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.hp-section h1,.hp-section h2,.hp-section h3,.hp-section h4{color:var(--blue-deep);line-height:1.14;letter-spacing:-.02em;font-weight:700}
.hp-section h2{font-size:38px;margin-bottom:14px}
.hp-section h3{font-size:22px}
.hp-section .eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin-bottom:14px;
}
.hp-section .lede{font-size:19px;color:var(--grey-mid);max-width:640px}

.hp-section.hp-pad{padding:88px 0}
.hp-section.alt{background:var(--bg-alt)}

/* ---------- BUTTON ---------- */
.hp-section .btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;
  text-decoration:none;font-weight:700;font-size:15.5px;letter-spacing:.02em;
  padding:14px 26px;border:none;border-radius:4px;cursor:pointer;font-family:inherit;
  transition:background .16s ease,transform .16s ease;
}
.hp-section .btn:hover{background:var(--blue-dark);transform:translateY(-1px)}
.hp-section .btn.lg{padding:17px 34px;font-size:17px}
.hp-section .btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.hp-section .btn.ghost:hover{background:rgba(255,255,255,.12)}
.hp-section .btn.outline{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.hp-section .btn.outline:hover{background:var(--blue-wash)}

/* ---------- HERO ---------- */
.hp-hero{
  position:relative;color:#fff;padding:0;overflow:hidden;background:var(--blue-deep);
}
.hp-hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.hp-hero .hero-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,37,64,.94) 0%,rgba(10,37,64,.72) 48%,rgba(6,92,171,.42) 100%)}
.hp-hero .wrap{position:relative;z-index:2;padding-top:104px;padding-bottom:104px}
.hp-hero h1{color:#fff;font-size:54px;max-width:16ch;margin-bottom:24px}
.hp-hero p{font-size:20px;color:rgba(255,255,255,.86);max-width:60ch;margin-bottom:34px}
.hp-hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hp-hero .eyebrow{color:#7FB6EE}

/* ---------- TRUST BAR ---------- */
.hp-trust{background:var(--navy);color:rgba(255,255,255,.85);padding:0}
.hp-trust .wrap{display:flex;flex-wrap:wrap;gap:0;}
.hp-trust .wrap>div{
  flex:1 1 200px;padding:26px 24px;font-size:15px;
  border-right:1px solid rgba(255,255,255,.12);
}
.hp-trust .wrap>div:last-child{border-right:none}
.hp-trust b{display:block;color:#fff;font-size:26px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.hp-trust span{color:rgba(255,255,255,.6);font-size:14px}

/* ---------- INTENT CARDS ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.intent{
  background:#fff;border:1px solid var(--grey-line);border-left:3px solid var(--blue);
  border-radius:3px;padding:26px 24px 24px;text-decoration:none;display:block;
  transition:box-shadow .18s ease,transform .18s ease;
}
.intent:hover{box-shadow:0 10px 30px rgba(10,37,64,.09);transform:translateY(-3px)}
.intent h3{font-size:18.5px;margin-bottom:9px;line-height:1.3}
.intent p{font-size:15.5px;color:var(--grey-mid);line-height:1.6}
.intent .go{display:inline-block;margin-top:14px;color:var(--blue);font-weight:700;font-size:14px;letter-spacing:.02em}

/* ---------- PROCESS ---------- */
.steps{margin-top:46px;border-top:1px solid var(--grey-line)}
.step{display:grid;grid-template-columns:82px 240px 1fr;gap:28px;padding:28px 0;border-bottom:1px solid var(--grey-line);align-items:start}
.step-n{font-size:15px;font-weight:800;color:var(--blue);letter-spacing:.14em;padding-top:4px}
.step h3{font-size:21px}
.step p{font-size:16.5px;color:var(--grey-mid)}

/* ---------- PRODUCTS ---------- */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px}
.prod{background:#fff;border:1px solid var(--grey-line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.prod-img{height:172px;background:var(--blue-deep);overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.prod:hover .prod-img img{transform:scale(1.05)}
.prod-body{padding:24px 22px 26px;flex:1;display:flex;flex-direction:column}
.prod h3{font-size:19px;margin-bottom:10px}
.prod p{font-size:15.5px;color:var(--grey-mid);flex:1}
.prod .go{margin-top:16px;color:var(--blue);font-weight:700;font-size:14px;text-decoration:none;letter-spacing:.02em}
.prod .go:hover{text-decoration:underline}

/* ---------- AUTOMATION (dark) ---------- */
.hp-section.dark{background:var(--blue-deep);color:rgba(255,255,255,.82)}
.hp-section.dark h2,.hp-section.dark h3{color:#fff}
.hp-section.dark .eyebrow{color:#7FB6EE}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hp-section.dark ul{list-style:none;margin:26px 0 0}
.hp-section.dark li{padding:11px 0 11px 28px;position:relative;border-bottom:1px solid rgba(255,255,255,.12);font-size:16.5px}
.hp-section.dark li::before{content:'';position:absolute;left:0;top:20px;width:10px;height:2px;background:#7FB6EE}
.hp-section.dark .note{margin-top:26px;font-size:16px;color:rgba(255,255,255,.7);border-left:3px solid var(--blue);padding-left:18px}
.shot img{border-radius:3px;width:100%;height:420px;object-fit:cover}

/* ---------- AUDIENCE ---------- */
.aud{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:44px;border-top:1px solid var(--grey-line)}
.aud div{padding:24px 30px 24px 0;border-bottom:1px solid var(--grey-line)}
.aud div:nth-child(odd){border-right:1px solid var(--grey-line);padding-right:44px}
.aud div:nth-child(even){padding-left:44px}
.aud h3{font-size:18px;margin-bottom:6px}
.aud p{font-size:16px;color:var(--grey-mid)}

/* ---------- PRODUCTION ---------- */
.prod-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.prod-split img{width:100%;height:400px;object-fit:cover;border-radius:3px}
.stats{display:flex;gap:44px;margin-top:34px;flex-wrap:wrap}
.stats b{display:block;font-size:40px;color:var(--blue);font-weight:800;line-height:1;letter-spacing:-.02em}
.stats span{font-size:14.5px;color:var(--grey-mid)}

/* ---------- PARTNERS ---------- */
.hp-partners{padding:56px 0;border-top:1px solid var(--grey-line);border-bottom:1px solid var(--grey-line)}
.plogos{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;margin-top:26px}
.plogos img{height:36px;width:auto;object-fit:contain;opacity:.62;filter:grayscale(1);transition:opacity .2s ease,filter .2s ease}
.plogos img:hover{opacity:1;filter:none}

/* ---------- FAQ ---------- */
.faq{margin-top:42px;max-width:860px}
.faq details{border-bottom:1px solid var(--grey-line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-size:18.5px;font-weight:700;color:var(--blue-deep);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:6px;top:19px;font-size:26px;font-weight:400;
  color:var(--blue);transition:transform .2s ease;line-height:1;
}
.faq details[open] summary::after{content:'–'}
.faq .a{padding:0 60px 24px 0;font-size:16.5px;color:var(--grey-mid);margin-top:-4px}

/* ---------- CTA ---------- */
.hp-cta{background:var(--blue);color:#fff;padding:84px 0}
.hp-cta h2{color:#fff;font-size:38px;margin-bottom:14px}
.hp-cta p{font-size:19px;color:rgba(255,255,255,.88);max-width:56ch;margin-bottom:30px}
.hp-cta .row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hp-cta .btn{background:#fff;color:var(--blue)}
.hp-cta .btn:hover{background:#EAF2FB}
.hp-cta .tag{margin-top:30px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:700}

/* ---------- RESPONSIVE ---------- */
@media (max-width:940px){
  .grid3,.prods{grid-template-columns:repeat(2,1fr)}
  .split,.prod-split{grid-template-columns:1fr;gap:34px}
  .step{grid-template-columns:60px 1fr;gap:16px}
  .step p{grid-column:2}
}
@media (max-width:640px){
  .hp-section.hp-pad{padding:60px 0}
  .hp-section h2{font-size:29px}
  .hp-hero h1{font-size:35px}
  .hp-hero p{font-size:17.5px}
  .hp-hero .wrap{padding-top:66px;padding-bottom:66px}
  .grid3,.prods{grid-template-columns:1fr}
  .aud{grid-template-columns:1fr}
  .aud div:nth-child(odd){border-right:none;padding-right:0}
  .aud div:nth-child(even){padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  .hp-section *{transition:none !important;animation:none !important}
}