:root{
  --navy:#0B1F3A;
  --teal:#0FA3B1;
  --white:#F7FAFC;
  --gray:#E5E7EB;
  --text:#0F172A;
  --muted:#64748B;
  --radius:18px;
  --shadow:0 10px 30px rgba(11,31,58,0.08);
}

*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1;}
h1,h2,h3,h4{font-family:Montserrat,Inter,sans-serif;}

.container{
  width:min(1100px, 92%);
  margin:0 auto;
}

.section{
  padding:80px 0;
}
.section-alt{
  background:var(--white);
}

.center{display:flex; justify-content:center; margin-top:24px;}

.btn{
  display:inline-block;
  background:var(--teal);
  color:white;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  border:2px solid var(--teal);
  transition:.2s ease;
}
.btn:hover{transform:translateY(-1px); filter:brightness(.95);}
.btn-ghost{
  background:transparent;
  color:var(--navy);
  border-color:var(--navy);
}
.btn-small{padding:8px 12px; font-size:14px;}

.tiny{font-size:13px; color:var(--muted);}

/* NAV */
.nav{
  position:sticky; top:0; z-index:100;
  background:white; border-bottom:1px solid var(--gray);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.logo{display:flex; flex-direction:column; text-decoration:none; color:var(--navy);}
.logo-mark{font-size:22px; font-weight:700; letter-spacing:1px;}
.logo-sub{font-size:12px; color:var(--muted); margin-top:-2px;}
.nav-links a{
  margin-left:18px; text-decoration:none; color:var(--text); font-weight:500;
}
.nav-toggle{
  display:none; font-size:22px; background:none; border:none; cursor:pointer;
}

/* HERO */
.hero{
  padding:90px 0 70px;
  background: radial-gradient(1200px circle at 10% -10%, #dff8fb 0%, transparent 50%),
              radial-gradient(1000px circle at 120% 20%, #e6ecff 0%, transparent 45%);
}
.hero-grid{
  display:grid; grid-template-columns:1.2fr .8fr; gap:26px; align-items:center;
}
.hero-text h1{font-size:44px; line-height:1.15; color:var(--navy);}
.hero-text p{margin-top:12px; color:var(--muted); font-size:18px;}

.hero-bullets{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-top:18px; font-weight:500;
}
.hero-cta{margin-top:20px; display:flex; gap:10px; flex-wrap:wrap;}
.trust-strip{margin-top:14px; color:var(--muted); font-size:14px;}

.hero-card{
  background:white; border:1px solid var(--gray); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px;
  display:grid; gap:12px;
}
.stat{padding:14px; background:var(--white); border-radius:14px;}
.stat h3{color:var(--navy); font-size:16px;}
.stat p{color:var(--muted); font-size:14px; margin-top:6px;}

/* SECTION HEAD */
.section-head{
  text-align:center; max-width:700px; margin:0 auto 26px;
}
.section-head h2{font-size:32px; color:var(--navy);}
.section-head p{margin-top:8px; color:var(--muted);}

/* PRODUCTS */
.product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.product-card{
  background:white; border:1px solid var(--gray); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
}
.product-card h3{color:var(--navy); font-size:19px;}
.product-card p{color:var(--muted); margin:8px 0;}
.product-card ul{margin-top:8px; padding-left:18px;}
.product-card li{margin:4px 0; color:#334155; font-size:14px;}

/* GALLERY */
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.tool-card{
  background:white; border:1px solid var(--gray); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.tool-card img{
  width:100%; height:220px; object-fit:cover; display:block;
}
.tool-card figcaption{padding:14px; display:grid; gap:6px;}
.tool-card h3{color:var(--navy); font-size:18px;}
.tool-card p{color:var(--muted); font-size:14px;}

/* WHY */
.why-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.why-card{
  background:white; padding:18px; border:1px solid var(--gray);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.why-card h3{font-size:18px; color:var(--navy);}
.why-card p{margin-top:6px; color:var(--muted);}

/* QUALITY */
.quality-grid{
  display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:start;
}
.quality-steps{margin-top:12px; padding-left:18px;}
.quality-steps li{margin:6px 0;}
.quality-box{
  background:var(--white); border:1px solid var(--gray);
  padding:18px; border-radius:var(--radius); box-shadow:var(--shadow);
}

/* QUOTE */
.quote-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;
}
.quote-points{margin-top:10px; display:grid; gap:6px; font-weight:500;}
.quote-form{
  background:white; border:1px solid var(--gray); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
  display:grid; gap:12px;
}
.quote-form label{display:grid; gap:6px; font-size:14px; font-weight:600;}
.quote-form input, .quote-form select, .quote-form textarea{
  padding:10px 12px; border:1px solid var(--gray); border-radius:12px;
  outline:none; font-size:14px;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{
  border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,163,177,0.12);
}
.formMsg{min-height:18px;}
.quote-success{
  background:white; border:1px solid var(--gray); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
  display:grid; gap:10px; align-content:start;
}
.quote-success-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(15,163,177,0.12); color:var(--teal);
  padding:6px 10px; border-radius:12px; font-weight:600; width:max-content;
}
.is-hidden{display:none !important;}

/* FAQ */
.faq{max-width:800px; margin:0 auto; display:grid; gap:10px;}
details{
  border:1px solid var(--gray); border-radius:14px; padding:12px 14px;
  background:white;
}
summary{cursor:pointer; font-weight:600; color:var(--navy);}
details p{margin-top:8px; color:var(--muted);}

/* FOOTER */
.footer{
  background:var(--navy); color:white; padding:30px 0 10px;
}
.footer-grid{
  display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:16px;
}
.footer a{color:#cfeaf0; text-decoration:none;}
.footer a:hover{text-decoration:underline;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:16px; padding-top:10px;}

.floating-message{
  position:fixed; right:16px; bottom:20px; z-index:120;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--teal); color:white; text-decoration:none;
  padding:12px 16px; border-radius:999px; font-weight:700;
  box-shadow:var(--shadow);
}
.floating-message:hover{transform:translateY(-1px); filter:brightness(.95);}
.floating-message:active{transform:translateY(0);}

/* RESPONSIVE */
@media (max-width:900px){
  .hero-grid, .product-grid, .gallery-grid, .why-grid, .quality-grid, .quote-grid, .footer-grid{
    grid-template-columns:1fr;
  }
  .hero-text h1{font-size:36px;}
}
@media (max-width:700px){
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute; right:4%; top:62px; background:white; border:1px solid var(--gray);
    border-radius:14px; padding:10px; display:none; flex-direction:column; gap:8px;
    width:220px; box-shadow:var(--shadow);
  }
  .nav-links.show{display:flex;}
  .nav-links a{margin-left:0; padding:6px;}
  .hero-bullets{grid-template-columns:1fr;}
}