:root{
  --navy:#000000;
  --white:#FFFFFF;
  --accent:#0B8A4A;
  --accent-2:#00E676;
  --muted:#6b7280;
  --max-width:1200px;
  --radius:8px;
  --gap:1rem;
  --container-padding:1rem;
  --focus:0 0 0 3px rgba(0,230,118,0.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--navy);
  background:var(--white);
  line-height:1.5;
  font-size:16px;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-padding);
}

/* Header */
.site-header{
  background:#000000;
);
  color:var(--white);
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 1px 0 rgba(0,0,0,0.06);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.75rem 0;
}
.logo{height:70px}
.main-nav{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.nav-link{
  color:#e5e7eb;
  font-size:0.9rem;
}
.nav-link:hover{color:#fff}

/* CTAs */
.cta{
  display:inline-block;
  padding:0.5rem 0.9rem;
  border-radius:6px;
  font-weight:600;
  font-size:0.9rem;
}
.cta-primary{
  background:var(--accent);
  color:#fff;
}
.cta-outline{
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
}

/* Mega menu */
.mega-toggle{
  background:transparent;
  border:none;
  color:#fff;
  font-weight:600;
  padding:0.4rem 0.6rem;
}
.mega-menu{
  position:absolute;
  right:1rem;
  top:64px;
  background:#fff;
  color:var(--navy);
  display:none;
  gap:1.5rem;
  padding:1rem;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(11,35,64,0.12);
  min-width:320px;
}
.mega-menu[aria-hidden="false"]{display:flex}
.mega-column h4{margin:0 0 0.5rem 0}
.mega-column ul{list-style:none;margin:0;padding:0}
.mega-column li{margin-bottom:0.25rem}
.mega-column a{color:var(--navy);}

/* Hero */
.hero{
  padding:2rem 0;
  background:linear-gradient(0deg, #0B8A4A 0%, #000000 60%);
  color:#fff;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:1.5rem;
  align-items:center;
}
.hero-copy h1{
  margin:0 0 0.5rem 0;
  font-size:2rem;
}
.lead{margin-bottom:0.75rem;opacity:0.95}
.hero-ctas{display:flex;gap:0.75rem;margin-bottom:1rem}
.trust-bullets{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
}
.hero-media img{
  width:100%;
  height:auto;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}

/* Brand strip */
.brand-strip{
  display:flex;
  gap:0.75rem;
  padding:1rem 0;
}
.brand-badge{
  width:48px;
  height:48px;
  border-radius:8px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.badge-svg{width:32px;height:32px}

/* Sections */
main section{padding:2rem 0}
h2{margin-top:0}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.card{
  background:#fff;
  border-radius:8px;
  padding:1rem;
  box-shadow:0 6px 18px rgba(11,35,64,0.06);
}
.card-img{
  width:100%;
  height:auto;
  border-radius:6px;
  margin-bottom:0.75rem;
}
.section-img{
  width:100%;
  max-width:600px;
  height:auto;
  border-radius:8px;
  margin:0.75rem 0;
}
.text-link{font-size:0.9rem}

/* Footer */
.site-footer{
  background:#f9fafb;
  padding:1.5rem 0;
  color:var(--muted);
}
.footer-inner{
  display:flex;
  gap:2rem;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footer-col h4{margin-top:0}
.footer-bottom{
  border-top:1px solid #e5e7eb;
  margin-top:1rem;
  padding-top:0.75rem;
}

/* Forms */
label{
  display:block;
  margin-top:0.75rem;
  font-weight:600;
}
input,textarea,select{
  width:100%;
  padding:0.6rem;
  border-radius:6px;
  border:1px solid #e5e7eb;
  margin-top:0.25rem;
}
input:focus,textarea:focus,select:focus{
  outline:none;
  box-shadow:var(--focus);
}
.form-actions{
  margin-top:1rem;
  display:flex;
  gap:0.5rem;
}
.form-success{
  margin-top:1rem;
  padding:1rem;
  border-radius:8px;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
}
.checkbox{
  margin-top:0.75rem;
  display:flex;
  align-items:center;
  gap:0.5rem;
}

/* Layout helpers */
.contact-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:1.5rem;
}
.portal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

/* Utilities */
.hidden{display:none}

/* Responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .portal-grid{grid-template-columns:1fr}
  .main-nav{flex-wrap:wrap;justify-content:flex-end}
  .mega-menu{
    right:0;
    left:0;
    top:56px;
    border-radius:0;
  }
}

/* Global bounce-in animation for all sections */
section {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

section.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}
.cta {
  transition: background 0.3s ease, transform 0.2s ease;
}

.cta:hover {
  transform: translateY(-3px);
}
.cta {
  transition: background 0.3s ease, transform 0.2s ease;
}

.cta:hover {
  transform: translateY(-3px);
}
.card-img {
  transition: transform 0.4s ease;
}

.card:hover .card-img {
  transform: scale(1.05);
}

/* Header */
.site-header{
  background:#000000;
  color:var(--white);
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 1px 0 rgba(0,0,0,0.06);
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.product-card {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 1.5rem;
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.product-img img {
  width: 100%;
  border-radius: 10px;
}

.product-info h2 {
  margin-top: 0;
}

.product-features {
  margin-top: 1rem;
  padding-left: 1.2rem;
}

.product-features li {
  margin-bottom: 0.4rem;
}

/* Responsive */
@media (max-width: 900px) {
  .product-card {
    grid-template-columns: 1fr;
  }
}
/* About Page Grid */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.about-card {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 1.5rem;
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.about-img img {
  width: 100%;
  border-radius: 10px;
}

.about-info h2 {
  margin-top: 0;
}

.about-features {
  margin-top: 1rem;
  padding-left: 1.2rem;
}

.about-features li {
  margin-bottom: 0.4rem;
}

/* Responsive */
@media (max-width: 900px) {
  .about-card {
    grid-template-columns: 1fr;
  }
}

/* Support Page Grid */
.support-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.support-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.support-info h2 {
  margin-top: 0;
}

.support-features {
  margin-top: 1rem;
  padding-left: 1.2rem;
}

.support-features li {
  margin-bottom: 0.4rem;
}

/* Responsive */
@media (max-width: 900px) {
  .support-card {
    grid-template-columns: 1fr;
  }
}
/* Contact Page Grid */
.contact-grid-upgraded {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.contact-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.contact-info h2 {
  margin-top: 0;
}

.contact-features {
  margin-top: 1rem;
  padding-left: 1.2rem;
}

.contact-features li {
  margin-bottom: 0.4rem;
}

/* Responsive */
@media (max-width: 900px) {
  .contact-card {
    grid-template-columns: 1fr;
  }
}

#form-status {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  font-weight: 600;
}

#form-status.hidden {
  display: none;
}
#quote-status {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  font-weight: 600;
}

quote.hidden {
  display: none;
}