/* ==========================================================
HEADWATERS INSIGHTS
Homepage Stylesheet
========================================================== */

:root{
  --navy:#1B3A57;
  --navy-light:#274B6D;
  --blue:#2A8A9C;
  --blue-dark:#1F6B7A;
  --blue-light:#4FADBF;
  --white:#ffffff;
  --offwhite:#F7FAFB;
  --light:#EEF3F8;
  --border:#DCE5EF;
  --text:#1F2937;
  --text-light:#667085;
  --success:#3CB371;
  --shadow-sm:0 5px 15px rgba(0,0,0,.05);
  --shadow:0 15px 40px rgba(15,23,42,.08);
  --shadow-lg:0 30px 70px rgba(15,23,42,.18);
  --radius:18px;
  --radius-lg:28px;
  --transition:.30s ease;
  --container:1320px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--text);
  background:white;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;}

h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  font-weight:600;
  line-height:1.15;
  color:var(--navy);
}
h1{font-size:clamp(3.3rem,7vw,5.4rem);}
h2{font-size:clamp(2.4rem,5vw,3.5rem);}
h3{font-size:1.45rem;}
p{color:var(--text-light);}

.container{width:min(var(--container),92%);margin:auto;}
section{padding:110px 0;}
.section-header{max-width:760px;margin:0 auto 70px;text-align:center;}
.section-label{
  display:inline-block;
  color:var(--blue);
  text-transform:uppercase;
  font-size:.80rem;
  letter-spacing:2px;
  font-weight:700;
  margin-bottom:18px;
}
.section-header h2{margin-bottom:22px;}
.section-header p{font-size:1.1rem;}

.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:18px 38px;
  border-radius:999px;
  font-size:17px;
  transition:var(--transition);
  cursor:pointer;
}
.btn-primary{
  background:linear-gradient(135deg,#2A8A9C,#1B3A57);
  color:white;
  border:none;
  box-shadow:0 18px 40px rgba(27,58,87,.35);
}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-4px);}
.btn-secondary{
  border:2px solid rgba(255,255,255,.35);
  color:white;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
}
.btn-secondary:hover{background:white;color:#0B233A;border-color:white;}
.btn-nav{background:var(--navy);color:white;padding:14px 26px;}
.btn-nav:hover{background:var(--blue);}

header{
  position:sticky;
  top:0;
  z-index:9999;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:32px 0;
}
@media (min-width:768px){header{padding:40px 0;}}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:16px;}
.brand-lockup{height:64px;width:auto;}
@media (min-width:768px){.brand-lockup{height:92px;}}
@media (min-width:980px){.brand-lockup{height:104px;}}
.brand-tagline{
  display:none;
  font-family:'Fraunces',serif;font-style:italic;font-weight:400;
  font-size:17px;color:var(--blue);letter-spacing:.01em;
  padding-left:16px;border-left:1px solid var(--border);
}
@media (min-width:900px){.brand-tagline{display:inline;}}
.main-nav{display:none;align-items:center;gap:32px;}
@media (min-width:980px){.main-nav{display:flex;}}
.main-nav a{font-size:16px;font-weight:600;color:var(--navy);white-space:nowrap;transition:var(--transition);}
.main-nav a:hover,.main-nav a.active{color:var(--blue);}
.header-actions{display:flex;align-items:center;gap:14px;}
.header-link{font-size:16px;color:var(--text-light);display:none;}
@media (min-width:640px){.header-link{display:inline;}}
.header-link:hover{color:var(--navy);}
.nav-cta{
  background:var(--blue);color:#fff !important;padding:12px 22px;
  border-radius:999px;font-size:15px;font-weight:600;white-space:nowrap;transition:var(--transition);
}
.nav-cta:hover{background:var(--blue-dark);color:#fff !important;}

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:7px;border:1px solid var(--border);
  background:#fff;cursor:pointer;flex-shrink:0;padding:0;
}
@media (min-width:980px){.nav-toggle{display:none;}}
.nav-toggle svg{width:20px;height:20px;display:block;}
.mobile-nav{
  display:none;flex-direction:column;width:100%;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--border);
}
.mobile-nav.open{display:flex;}
@media (min-width:980px){.mobile-nav{display:none !important;}}
.mobile-nav a{padding:13px 2px;font-size:17px;font-weight:500;color:var(--navy);border-bottom:1px solid var(--border);}
.mobile-nav a:last-child{border-bottom:none;}
.mobile-nav a.active{color:var(--blue);}

.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(42,138,156,.22), transparent 35%),
    radial-gradient(circle at left, rgba(27,58,87,.35), transparent 45%),
    linear-gradient(135deg,#0F2438 0%,#1B3A57 55%,#2A8A9C 130%);
  color:white;
  padding:40px 0 70px;
  min-height:calc(100vh - 88px);
  display:flex;
  align-items:center;
}
.hero-image-layer{
  position:absolute;
  inset:0;
  background:url('../images/hero_background.png') center center / cover no-repeat;
  opacity:.42;
  z-index:2;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:36px 36px;
  opacity:.18;
  z-index:1;
}
.hero-grid{
    position:relative;
    z-index:10;
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    align-items:center;
    gap:60px;
    width:min(1280px,92%);
    margin:auto;
}
.hero-left {transform:translateY(-18px);}
.hero-left h1{
  color:white;
  font-size:clamp(2.6rem,4.4vw,4.2rem);
  line-height:1.05;
  letter-spacing:-1.5px;
  margin-bottom:14px;
}
.hero-left h1 span{color:#5FC2D6;}
.hero-left h2{
  color:rgba(255,255,255,.88);
  font-size:1.15rem;
  font-weight:400;
  margin-bottom:14px;
}
.hero-left p{
  color:rgba(255,255,255,.78);
  font-size:1rem;
  line-height:1.7;
  max-width:520px;
}
.hero-buttons{margin-top:22px;display:flex;gap:16px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:30px;margin-top:22px;flex-wrap:wrap;}
.hero-stats h3{color:white;font-size:1.3rem;margin-bottom:2px;}
.hero-stats span{color:rgba(255,255,255,.72);font-size:.82rem;}

.hero-dashboard{
  position:relative;
  z-index:11;
  max-width:760px;
  width:100% ;
  margin-left:auto;
}
.hero-dashboard{

    position:relative;

}
.hero-dashboard::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    background:#2A8A9C;
    opacity:.18;
    filter:blur(110px);
    border-radius:50%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:-1;
}
.dashboard-window{
    background:none;
    border:none;
    padding:0;
    border-radius:0;
    backdrop-filter:none;
    box-shadow:none;
}
.dashboard-image-wrap{padding:0;}
.dashboard-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:24px;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  transform:perspective(1200px) rotateY(-6deg);
}
.hero-wave{position:absolute;left:0;bottom:-2px;width:100%;line-height:0;z-index:5;}
.hero-wave svg{display:block;width:100%;height:110px;}

.wave-divider{position:relative;width:100%;line-height:0;background:white;display:block;font-size:0;}
.wave-divider svg{display:block;width:100%;height:80px;vertical-align:top;}
.wave-divider.flip{transform:rotate(180deg);}

@keyframes dashboardFloat{
  0%{transform:translateY(0px);}
  50%{transform:translateY(-14px);}
  100%{transform:translateY(0px);}
}

.problem{background:var(--offwhite);}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.card{
  background:white;
  padding:40px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  border:1px solid rgba(42,138,156,.25);
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--blue);}
.icon{
  width:72px;
  height:72px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:2rem;
  background:linear-gradient(135deg,#EDF5FF,#DDEEFF);
  border-radius:18px;
  margin-bottom:28px;
}
.card h3{margin-bottom:16px;}
.card p{font-size:1rem;}

.solutions{background:white;}
.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.solution-card{
  background:white;
  border:1px solid rgba(42,138,156,.25);
  border-radius:22px;
  padding:36px;
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}
.solution-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--blue-light);}
.solution-card h3{margin-bottom:18px;color:var(--navy);}
.solution-card p{font-size:1rem;}

.demo{background:linear-gradient(135deg,#EAF4F6,#DCEEF1);}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.demo h2{margin:20px 0 24px;}
.demo p{font-size:1.08rem;margin-bottom:34px;}
.demo-image{
  background:white;
  border-radius:28px;
  padding:22px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.demo-image img{border-radius:18px;}

.industries{background:var(--offwhite);}
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.industry-grid div{
  background:var(--offwhite);
  border:1px solid var(--border);
  border-radius:999px;
  padding:20px 28px;
  text-align:center;
  font-weight:600;
  color:var(--navy);
  transition:var(--transition);
}
.industry-grid div:hover{background:var(--blue);color:white;transform:translateY(-3px);}

.process{background:white;}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.step{
  background:white;
  border-radius:22px;
  padding:40px 32px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  border:1px solid rgba(42,138,156,.25);
}
.step:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--blue);}
.step span{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--blue);
  color:white;
  font-weight:700;
  font-size:1.4rem;
  margin-bottom:24px;
}
.step h3{margin-bottom:16px;}

.pricing-cta{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-light) 100%);
  text-align:center;
  color:white;
}
.pricing-cta h2{color:white;margin-bottom:24px;}
.pricing-cta p{
  max-width:760px;
  margin:0 auto 40px;
  color:rgba(255,255,255,.80);
  font-size:1.1rem;
}
.final-cta{text-align:center;}
.final-cta h2{margin-bottom:22px;}
.final-cta p{max-width:720px;margin:0 auto 36px;font-size:1.1rem;}

footer{
  background:#071728;
  color:white;
  padding:80px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:60px;
  margin-bottom:60px;
}
.footer-logo{height:56px;margin-bottom:24px;}
footer p{color:rgba(255,255,255,.72);}
footer h4{color:white;margin-bottom:22px;}
footer a{
  display:block;
  margin-bottom:14px;
  color:rgba(255,255,255,.72);
  transition:var(--transition);
}
footer a:hover{color:white;}
.copyright{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:28px;
  text-align:center;
  color:rgba(255,255,255,.55);
  font-size:.92rem;
}

@media (max-width:1100px){
  .hero-grid,.demo-grid{grid-template-columns:1fr;gap:60px;}
  .hero-content{text-align:center;}
  .hero p{margin:0 auto;}
  .hero-buttons{justify-content:center;}
  .hero-stats{justify-content:center;}
  .hero-dashboard{max-width:900px;margin:auto;transform:none;}
  .solution-grid{grid-template-columns:repeat(2,1fr);}
  .cards{grid-template-columns:repeat(2,1fr);}
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .industry-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:820px){
  section{padding:80px 0;}
  .navbar{flex-direction:column;height:auto;padding:25px 0;gap:20px;}
  .nav-links{flex-wrap:wrap;justify-content:center;gap:20px;}
  .hero{padding:70px 0 90px;}
  .hero h1{font-size:3.2rem;}
  .hero h2{font-size:1.3rem;}
  .hero-stats{flex-direction:column;gap:24px;align-items:center;}
  .cards,.solution-grid,.industry-grid,.process-grid,.footer-grid{grid-template-columns:1fr;}
  .footer-grid{text-align:center;}
  .footer-logo{margin:0 auto 24px;}
}

@media (max-width:600px){
  body{font-size:15px;}
  h1{font-size:2.6rem;}
  h2{font-size:2rem;}
  .hero-buttons{flex-direction:column;}
  .hero-buttons .btn{width:100%;}
  .btn-nav{width:100%;text-align:center;}
  .card,.solution-card,.step{padding:28px;}
  .kpi-grid,.chart-grid{grid-template-columns:1fr;}
}

.card,.solution-card,.step,.industry-grid div,.btn,.hero-dashboard{transition:transform .30s ease,box-shadow .30s ease,background .30s ease,border-color .30s ease,color .30s ease;}
.hero-content{animation:fadeUp .8s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
::selection{background:var(--blue);color:white;}
.text-center{text-align:center;}
.mt-1{margin-top:10px;}.mt-2{margin-top:20px;}.mt-3{margin-top:30px;}.mt-4{margin-top:40px;}.mt-5{margin-top:50px;}
.mb-1{margin-bottom:10px;}.mb-2{margin-bottom:20px;}.mb-3{margin-bottom:30px;}.mb-4{margin-bottom:40px;}.mb-5{margin-bottom:50px;}