/* ============================================================
   H2O CleanTech — site stylesheet
   Translated from the H2O CleanTech Design System (tokens +
   components). Primary UI color is royal blue (#0050C0); navy
   (#001A38) is ink / dark surfaces. Headings: Barlow Semi
   Condensed (heavy, UPPERCASE). Body: Barlow.
   ============================================================ */

/* -------------------------------------------------------- *
 * 1. Design tokens
 * -------------------------------------------------------- */
:root {
  /* Brand blue ramp */
  --blue-700:#003C93; --blue-600:#0050C0; --blue-500:#1E63D6;
  --blue-400:#4D89E6; --blue-200:#A9C6F2; --blue-100:#E4EDFB;

  /* Brand-mark accents (logo emblem) */
  --teal-500:#158FA7; --teal-400:#2DB8C9; --cyan-200:#BCE2EE;
  --leaf-600:#318635; --leaf-400:#BCD253; --logo-navy:#002B38;

  /* Navy ramp + ink */
  --navy-900:#001A38; --navy-800:#052744; --navy-700:#0D3355;
  --navy-600:#16436B; --ink:#13284A;

  /* Neutrals */
  --white:#FFFFFF; --gray-50:#F6F8FB; --gray-100:#EEF1F6;
  --gray-200:#E4E9F0; --line:#E2E7EE; --line-strong:#CBD3DE;
  --gray-500:#6B7686; --gray-600:#4B5563; --gray-700:#33404F;

  /* Semantic aliases */
  --color-primary:var(--blue-600); --color-primary-hover:var(--blue-700);
  --color-accent:var(--blue-500);
  --text-heading:var(--ink); --text-body:var(--gray-600); --text-muted:var(--gray-500);
  --text-on-dark:var(--white); --text-on-dark-muted:#A9B7CC; --text-link:var(--blue-600);
  --surface-page:var(--white); --surface-subtle:var(--gray-50); --surface-card:var(--white);
  --surface-dark:var(--navy-900); --surface-image:var(--gray-100);
  --border-subtle:var(--line); --border-strong:var(--line-strong);
  --border-on-dark:rgba(255,255,255,0.14);
  --icon-badge-bg:var(--navy-900); --icon-badge-fg:var(--white); --icon-line-on-dark:var(--blue-400);

  /* Type */
  --font-display:'Barlow Semi Condensed','Arial Narrow',system-ui,sans-serif;
  --font-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:56px; --fs-h1:40px; --fs-h2:30px; --fs-h3:21px; --fs-h4:17px;
  --fs-body-lg:18px; --fs-body:16px; --fs-sm:14px; --fs-xs:12.5px;
  --lh-tight:1.05; --lh-heading:1.15; --lh-snug:1.35; --lh-body:1.6;
  --ls-eyebrow:0.08em; --ls-label:0.06em;

  /* Spacing / layout */
  --container-max:1200px; --section-pad-y:72px; --gutter:24px; --nav-height:72px;
  --radius-xs:3px; --radius-sm:5px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(19,40,74,0.06);
  --shadow-sm:0 2px 8px rgba(19,40,74,0.08);
  --shadow-md:0 8px 24px rgba(19,40,74,0.10);
  --shadow-lg:0 18px 48px rgba(0,26,56,0.18);
  --focus-ring:0 0 0 3px rgba(0,80,192,0.30);
}

/* -------------------------------------------------------- *
 * 2. Base
 * -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font-body); font-size:var(--fs-body);
  line-height:var(--lh-body); color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display); color:var(--text-heading); line-height:var(--lh-heading); margin:0;}
p{margin:0;}
img{max-width:100%; display:block;}
a{color:var(--text-link); text-decoration:none; transition:color 120ms ease;}
a:hover{color:var(--color-primary-hover);}
ul{margin:0; padding:0; list-style:none;}
:focus-visible{outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-xs);}

/* -------------------------------------------------------- *
 * 3. Layout primitives
 * -------------------------------------------------------- */
.container{max-width:var(--container-max); margin:0 auto; padding:0 40px;}
.section{padding:var(--section-pad-y) 0;}
.section--subtle{background:var(--surface-subtle);}
.section--dark{background:var(--surface-dark); color:var(--text-on-dark);}
.section--tight{padding:48px 0;}

.grid{display:grid; gap:24px;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}

.eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--color-primary);
}
.section--dark .eyebrow{color:var(--blue-400);}
.lead{font-size:15.5px; line-height:1.6; color:var(--text-body); max-width:640px;}
.subhead{font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--color-primary);}

/* -------------------------------------------------------- *
 * 4. Section heading (centered w/ blue underline accent)
 * -------------------------------------------------------- */
.sec-head{text-align:center; max-width:720px; margin:0 auto;}
.sec-head__eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--color-primary); margin-bottom:10px;
}
.sec-head__title{
  font-weight:700; font-size:var(--fs-h2); line-height:1.12; letter-spacing:-0.005em;
  text-transform:uppercase; color:var(--ink);
}
.sec-head__rule{width:52px; height:3px; border-radius:2px; background:var(--color-primary); margin:14px auto 0;}
.sec-head__sub{font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--text-body); margin-top:16px;}
.sec-head--left{text-align:left; margin-left:0; margin-right:0;}
.sec-head--left .sec-head__rule{margin-left:0; margin-right:0;}
.sec-head--dark .sec-head__title{color:#fff;}
.sec-head--dark .sec-head__eyebrow{color:var(--blue-400);}
.sec-head--dark .sec-head__sub{color:var(--text-on-dark-muted);}

/* -------------------------------------------------------- *
 * 5. Buttons
 * -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; letter-spacing:0.05em;
  text-transform:uppercase; font-size:14px; line-height:1; padding:12px 22px;
  border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer;
  white-space:nowrap; text-decoration:none;
  transition:background 130ms ease,color 130ms ease,border-color 130ms ease,box-shadow 130ms ease;
}
.btn--sm{padding:8px 16px; font-size:13px;}
.btn--lg{padding:15px 30px; font-size:15px;}
.btn--primary{background:var(--color-primary); color:#fff; border-color:var(--color-primary);}
.btn--primary:hover{background:var(--color-primary-hover); border-color:var(--color-primary-hover); color:#fff;}
.btn--secondary{background:transparent; color:var(--color-primary); border-color:var(--color-primary);}
.btn--secondary:hover{background:var(--blue-100); color:var(--color-primary);}
.btn--on-dark.btn--secondary{color:#fff; border-color:rgba(255,255,255,0.55);}
.btn--on-dark.btn--secondary:hover{background:rgba(255,255,255,0.10); color:#fff;}
.btn--link{
  background:transparent; color:var(--color-primary); text-transform:none;
  padding:0; border:0; border-radius:0; font-weight:600;
}
.btn--link:hover{color:var(--color-primary-hover);}
.btn--on-dark.btn--link{color:#fff;}
.btn--on-dark.btn--link:hover{color:var(--blue-200);}
.btn .lucide{width:17px; height:17px;}
.btn--link .lucide{width:16px; height:16px;}

/* -------------------------------------------------------- *
 * 6. Icons (Lucide)
 * -------------------------------------------------------- */
.lucide{flex:none;}

.icon-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; background:var(--icon-badge-bg); flex:none;
}
.icon-badge .lucide{width:22px; height:22px; color:var(--icon-badge-fg); stroke-width:1.9;}
.icon-badge--sm{width:46px; height:46px;}
.icon-badge--sm .lucide{width:19px; height:19px;}
.icon-badge--lg{width:54px; height:54px;}
.icon-badge--lg .lucide{width:23px; height:23px;}
/* bare blue line icon on dark panels */
.icon-line .lucide{color:var(--icon-line-on-dark); stroke-width:1.6;}

/* -------------------------------------------------------- *
 * 7. Media / image box (design-system ImgBox pattern:
 *    real photo when present, clean placeholder otherwise)
 * -------------------------------------------------------- */
.imgbox{
  background:var(--surface-image) center/cover no-repeat;
  border-radius:var(--radius-md); overflow:hidden; position:relative;
}
.imgbox--lg{border-radius:var(--radius-lg);}
.imgbox--flat{border-radius:0;}

/* -------------------------------------------------------- *
 * 8. Capability row (♦-separated keywords)
 * -------------------------------------------------------- */
.caps{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  font-family:var(--font-display); font-weight:600; font-size:13px;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--ink);
}
.caps__sep{color:var(--color-primary); font-weight:700;}
.section--dark .caps{color:#fff;}

/* -------------------------------------------------------- *
 * 9. Cards (media-top)
 * -------------------------------------------------------- */
.card{
  display:flex; flex-direction:column; background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:box-shadow 160ms ease, transform 160ms ease;
}
.card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.card__media{aspect-ratio:16 / 10; background:var(--surface-image) center/cover no-repeat;}
.card__body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1;}
.card__eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:11.5px;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--gray-500); margin-bottom:6px;
}
.card__title{
  font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:0.01em;
  text-transform:uppercase; line-height:1.2; color:var(--color-primary); margin:0;
}
.card__text{font-size:14.5px; line-height:1.6; color:var(--text-body); margin:10px 0 0;}
.card__link{margin-top:auto; padding-top:16px;}

/* -------------------------------------------------------- *
 * 10. Feature row (icon + title + description)
 * -------------------------------------------------------- */
.feature{display:flex; gap:16px; align-items:flex-start;}
.feature__body{flex:1; min-width:0;}
.feature__title{
  font-family:var(--font-display); font-weight:700; font-size:15.5px; letter-spacing:0.03em;
  text-transform:uppercase; line-height:1.25; color:var(--ink); margin:0;
}
.feature__text{font-size:14px; line-height:1.55; color:var(--text-body); margin:6px 0 0;}
.feature__link{margin-top:10px;}
.section--dark .feature__title{color:#fff;}
.section--dark .feature__text{color:var(--text-on-dark-muted);}

/* -------------------------------------------------------- *
 * 11. Stat item (By the Numbers)
 * -------------------------------------------------------- */
.stat{display:flex; flex-direction:row; align-items:center; gap:14px;}
.stat__value{font-family:var(--font-display); font-weight:700; font-size:34px; line-height:1; color:var(--ink);}
.stat__label{
  font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; line-height:1.35; color:var(--text-muted); margin-top:5px;
}
.section--dark .stat__value{color:#fff;}
.section--dark .stat__label{color:var(--text-on-dark-muted);}

/* -------------------------------------------------------- *
 * 12. Values band
 * -------------------------------------------------------- */
.values{display:grid; gap:28px; grid-template-columns:repeat(5,1fr);}
@media (max-width:900px){ .values{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .values{grid-template-columns:repeat(2,1fr);} }
.value{text-align:center;}
.value .lucide{width:30px; height:30px; color:var(--color-primary); stroke-width:1.6; margin:0 auto;}
.value__label{
  font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--ink); margin:14px 0 6px;
}
.value__phrase{font-size:13.5px; line-height:1.5; color:var(--text-muted);}
.section--dark .value .lucide{color:var(--icon-line-on-dark);}
.section--dark .value__label{color:#fff;}
.section--dark .value__phrase{color:var(--text-on-dark-muted);}

/* -------------------------------------------------------- *
 * 13. Resource rows + filter pills + tags
 * -------------------------------------------------------- */
.res-list{border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; background:var(--white);}
.res-row{display:flex; align-items:center; gap:16px; padding:16px 18px; border-bottom:1px solid var(--border-subtle); background:transparent; transition:background 120ms ease; text-decoration:none;}
.res-row:last-child{border-bottom:0;}
.res-row:hover{background:var(--gray-50);}
.res-row__icon{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-sm); background:var(--blue-100); flex:none;}
.res-row__icon .lucide{width:20px; height:20px; color:var(--color-primary); stroke-width:1.9;}
.res-row__body{flex:1; min-width:0;}
.res-row__title{font-family:var(--font-body); font-weight:600; font-size:15.5px; color:var(--ink); line-height:1.3;}
.res-row__type{font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted); margin-top:3px;}
.res-row__arrow .lucide{width:18px; height:18px; color:var(--gray-500); stroke-width:2;}
.res-row:hover .res-row__arrow .lucide{color:var(--color-primary);}

.pills{display:flex; flex-wrap:wrap; gap:10px;}
.pill{
  font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:0.05em;
  text-transform:uppercase; padding:9px 18px; border-radius:var(--radius-sm); cursor:pointer;
  background:transparent; color:var(--ink); border:1px solid var(--border-strong);
  transition:background 120ms ease,color 120ms ease,border-color 120ms ease;
}
.pill:hover{border-color:var(--color-primary); color:var(--color-primary);}
.pill.is-active{background:var(--color-primary); color:#fff; border-color:var(--color-primary);}

.tag{
  display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:600;
  font-size:12px; letter-spacing:0.05em; text-transform:uppercase; line-height:1;
  padding:7px 13px; border-radius:var(--radius-sm);
  background:var(--blue-100); color:var(--blue-700); border:1px solid transparent;
}
.tag--solid{background:var(--color-primary); color:#fff; border-color:var(--color-primary);}
.tag--outline{background:transparent; color:var(--color-primary); border-color:var(--border-strong);}

/* -------------------------------------------------------- *
 * 14. Site navigation
 * -------------------------------------------------------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:var(--nav-height); padding:0 40px; background:var(--white);
  border-bottom:1px solid var(--border-subtle);
}
.site-nav__brand{display:inline-flex; align-items:center; gap:10px;}
.site-nav__emblem{height:40px; width:40px;}
.brand-word{font-family:var(--font-display); line-height:1; display:flex; flex-direction:column;}
.brand-word b{font-weight:800; font-size:20px; letter-spacing:0.02em; color:var(--ink); text-transform:uppercase;}
.brand-word span{font-weight:600; font-size:11px; letter-spacing:0.18em; color:var(--color-primary); text-transform:uppercase;}
.site-nav__links{display:flex; align-items:center; gap:30px;}
.site-nav__link{
  font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--ink); padding-bottom:4px;
  border-bottom:2px solid transparent; transition:color 120ms ease;
}
.site-nav__link:hover{color:var(--color-primary);}
.site-nav__link.is-active{color:var(--color-primary); border-bottom-color:var(--color-primary);}
.nav-toggle{display:none; background:transparent; border:0; cursor:pointer; padding:6px; color:var(--ink);}
.nav-toggle .lucide{width:26px; height:26px;}

/* -------------------------------------------------------- *
 * 15. Home hero + floating feature card
 * -------------------------------------------------------- */
.hero{background:var(--white); position:relative;}
.hero__grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:48px 0 56px;}
.hero__title{font-weight:800; font-size:46px; line-height:1.02; text-transform:uppercase; color:var(--ink); letter-spacing:-0.01em;}
.hero__sub{font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--color-primary); margin-top:16px;}
.hero__text{font-size:15px; line-height:1.6; color:var(--text-body); margin-top:16px; max-width:460px;}
.hero__actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap;}
.hero__media{height:380px;}
.hero-card{
  position:absolute; right:40px; top:30px; width:250px; background:var(--white);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--line);
  padding:20px; display:flex; flex-direction:column; gap:16px;
}
.hero-card__row{display:flex; gap:12px; align-items:flex-start;}
.hero-card__row .lucide{width:22px; height:22px; color:var(--color-primary); stroke-width:1.8; margin-top:1px;}
.hero-card__t{font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink);}
.hero-card__d{font-size:12.5px; line-height:1.45; color:var(--text-muted); margin-top:3px;}

/* Page hero (left-aligned title over photo w/ scrim).
   Set the photo per page with:  style="--hero-img:url('assets/images/x.jpg')" */
.page-hero{
  position:relative; min-height:300px; display:flex; align-items:center;
  background-color:#12324e;
  background-image:
    linear-gradient(90deg,rgba(0,20,40,0.86) 0%,rgba(0,20,40,0.62) 45%,rgba(0,20,40,0.30) 100%),
    var(--hero-img, none);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.page-hero__title{font-weight:800; font-size:46px; text-transform:uppercase; color:#fff; letter-spacing:-0.01em; margin:0;}
.page-hero__sub{font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--blue-400); margin-top:12px;}

/* -------------------------------------------------------- *
 * 16. Home: solutions / tech / why / featured
 * -------------------------------------------------------- */
.solution__title,.feat-sys__title{
  font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:0.03em;
  text-transform:uppercase; color:var(--ink); margin:0 0 8px;
}
.solution__text{font-size:13.5px; line-height:1.55; color:var(--text-body); margin:0 0 14px;}

.tech-band{margin-top:44px; border-top:1px solid rgba(255,255,255,0.14); padding-top:32px;
  display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center;}
.tech-band h3{font-weight:800; font-size:30px; text-transform:uppercase; color:#fff; margin:8px 0 12px;}
.tech-band p{font-size:14px; line-height:1.6; color:var(--text-on-dark-muted); max-width:520px;}

.why-list li{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink); margin-bottom:10px;}
.why-list .lucide{width:17px; height:17px; color:var(--color-primary); stroke-width:2.4;}

.feat-sys{display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; margin-bottom:16px;}
.feat-sys .imgbox{height:70px;}
.feat-sys__eyebrow{font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-primary);}
.feat-sys__title{font-size:14px; letter-spacing:0.02em; line-height:1.2; margin:0;}
.feat-sys__text{font-size:12.5px; line-height:1.5; color:var(--text-muted); margin-top:4px;}

/* Industries full-width rows */
.ind-row{display:grid; grid-template-columns:300px 1fr; gap:32px; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-sm);}
.ind-row .imgbox{height:168px;}
.ind-row__body{padding:0 28px 0 4px;}

/* -------------------------------------------------------- *
 * 17. Contact form
 * -------------------------------------------------------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start;}
.contact-info{display:flex; flex-direction:column; gap:20px;}
.contact-bit{display:flex; gap:14px; align-items:flex-start;}
.contact-bit__icon{display:inline-flex; width:40px; height:40px; border-radius:50%; background:var(--blue-100); align-items:center; justify-content:center; flex:none;}
.contact-bit__icon .lucide{width:19px; height:19px; color:var(--color-primary); stroke-width:1.9;}
.contact-bit__t{font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink);}
.contact-bit__d{font-size:13.5px; color:var(--text-muted); margin-top:3px;}

.form-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:28px;}
.field{display:block; margin-bottom:14px;}
.field__label{display:block; font-family:var(--font-display); font-weight:600; font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink); margin-bottom:8px;}
.field__req{color:var(--color-primary);}
.field input,.field select,.field textarea{
  width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:13px 15px; outline:none; transition:border-color 120ms ease, box-shadow 120ms ease;
}
.field textarea{resize:vertical; min-height:110px;}
.field select{appearance:none; -webkit-appearance:none; padding-right:40px;}
.field--select{position:relative;}
.field--select .lucide{position:absolute; right:14px; top:42px; width:18px; height:18px; color:var(--gray-500); pointer-events:none;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-primary); box-shadow:var(--focus-ring);}
.form-error{background:#fdecec; border:1px solid #f5b5b5; color:#8a1f1f; border-radius:var(--radius-sm); padding:12px 15px; font-size:14px; margin-bottom:16px;}
.form-success{text-align:center; padding:48px 20px;}
.form-success__icon{display:inline-flex; width:56px; height:56px; border-radius:50%; background:var(--blue-100); align-items:center; justify-content:center;}
.form-success__icon .lucide{width:28px; height:28px; color:var(--color-primary); stroke-width:2.4;}
.form-success h3{font-weight:700; font-size:22px; text-transform:uppercase; color:var(--ink); margin:16px 0 6px;}

.water-band{height:120px; background:linear-gradient(180deg,var(--teal-400),var(--blue-600));}

/* -------------------------------------------------------- *
 * 18. CTA strip + footer
 * -------------------------------------------------------- */
.cta-strip{background:var(--blue-600); color:#fff; padding:44px 0;}
.cta-strip__inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-strip h2{color:#fff; font-weight:800; font-size:30px; text-transform:uppercase;}
.cta-strip p{color:rgba(255,255,255,0.85); margin-top:6px;}
.cta-strip .btn--primary{background:#fff; color:var(--blue-700); border-color:#fff;}
.cta-strip .btn--primary:hover{background:var(--blue-100); border-color:var(--blue-100); color:var(--blue-700);}

.site-footer{background:var(--surface-dark); color:var(--text-on-dark);}
.site-footer__main{display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding:26px 40px;}
.site-footer__brand{display:inline-flex; align-items:center; gap:10px; flex:none;}
.site-footer__brand .brand-word b{color:#fff;}
.site-footer__tagline{font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:0.05em; text-transform:uppercase; line-height:1.35; max-width:220px; color:#fff;}
.site-footer__contact{display:flex; gap:26px; flex-wrap:wrap; flex:1;}
.site-footer__contact a{display:inline-flex; align-items:center; gap:9px; color:#fff; font-family:var(--font-body); font-size:14px;}
.site-footer__contact .lucide{width:17px; height:17px; color:var(--blue-400); stroke-width:1.8;}
.site-footer__social{display:flex; gap:10px;}
.social-btn{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-sm); background:rgba(255,255,255,0.10); color:#fff;}
.social-btn svg{width:17px; height:17px; fill:#fff;}
.social-btn .lucide{width:17px; height:17px; stroke:#fff;}
.site-footer__bar{border-top:1px solid var(--border-on-dark); padding:16px 40px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:var(--text-on-dark-muted);}
.site-footer__bar a{color:var(--text-on-dark-muted);}
.site-footer__bar a:hover{color:#fff;}

/* -------------------------------------------------------- *
 * 19. Utilities
 * -------------------------------------------------------- */
.u-mt-0{margin-top:0;} .u-mt-8{margin-top:8px;} .u-mt-16{margin-top:16px;} .u-mt-24{margin-top:24px;} .u-mt-40{margin-top:40px;}
.u-mb-40{margin-bottom:40px;}
.u-center{text-align:center;}
.stack-lg{display:flex; flex-direction:column; gap:26px;}
.stack-md{display:flex; flex-direction:column; gap:20px;}

/* -------------------------------------------------------- *
 * 20. Responsive
 * -------------------------------------------------------- */
@media (max-width:1000px){
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .tech-band{grid-template-columns:1fr; gap:28px;}
  .hero-card{display:none;}
}
@media (max-width:820px){
  .container{padding:0 24px;}
  .site-nav{padding:0 24px;}
  .site-nav__links{
    position:absolute; top:var(--nav-height); left:0; right:0; flex-direction:column;
    align-items:flex-start; gap:0; background:var(--white); border-bottom:1px solid var(--line);
    padding:8px 24px 16px; box-shadow:var(--shadow-md); display:none;
  }
  .site-nav__links.is-open{display:flex;}
  .site-nav__link{width:100%; padding:12px 0; border-bottom:1px solid var(--line);}
  .site-nav__link.is-active{border-bottom-color:var(--line);}
  .nav-toggle{display:inline-flex;}
  .site-nav__cta{display:none;}
  .hero__grid,.grid--2,.grid--3,.contact-grid{grid-template-columns:1fr;}
  .hero__title,.page-hero__title{font-size:36px;}
  .ind-row{grid-template-columns:1fr;}
  .ind-row .imgbox{height:200px;}
  .ind-row__body{padding:0 24px 24px;}
  .section{padding:52px 0;}
  .sec-head__title,.cta-strip h2,.tech-band h3{font-size:26px;}
  .site-footer__main{flex-direction:column; align-items:flex-start; gap:18px;}
}
@media (max-width:560px){
  .grid--4{grid-template-columns:1fr;}
  .feat-sys{grid-template-columns:72px 1fr;}
  .hero__actions{flex-direction:column; align-items:stretch;}
  .hero__actions .btn{width:100%;}
}