:root{
    --wrap:1200px;
    --brand:#0f5132;
    --accent:#5aa55a;
    --muted:#6b6b6b;
    --bg:#f6f6f4;
    --card:#ffffff;
    --radius:14px;
    --shadow: 0 10px 30px rgba(18,18,18,0.06);
    --glass: rgba(255,255,255,0.7);
    --max-w:1200px;
    --dark:#0b2f1b;
  }
  
  *{box-sizing:border-box}
  html
  {
    scroll-behavior: smooth;
}
  body{
    margin:0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:var(--bg);
    color:#1e1e1e;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.55;
    overflow-x: hidden;
    font-size:16px;
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  
  /* Helpers */
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .skip{position:fixed;left:-999px;top:auto;bottom:auto}
  .skip:focus{left:12px;top:12px;background:#111;color:#fff;padding:8px 10px;border-radius:6px;z-index:9999}
  
  /* Header */
  .site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,0.7);backdrop-filter:blur(6px);border-bottom:1px solid rgba(0,0,0,0.04)}
  .header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--dark)}
  .logo-mark{font-size:20px}
  .brand-name{font-weight:700;font-size:18px}
  
  /* Nav */
  .site-header{
    position: sticky; /* Makes the element stick to the top */
    top: 0; /* Sticks it to the very top of the screen */
    width: 100%; /* Ensures it spans the full width */
    z-index: 1000; /* Keeps it on top of all other content */ 
  }
  .nav-list{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0}
  .nav-list a{color:var(--dark);text-decoration:none;padding:8px 10px;border-radius:10px;font-weight:600}
  .nav-toggle{display:none;background:transparent;border:0;font-size:20px;padding:8px}



/* HERO */
.hero {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 2rem 1rem;
    position: relative; /* Required for the overlay to work */

    /* These properties will now correctly center the .hero-content container */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* This creates a dark layer over your background image, making text more readable. */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 1; /* Places the overlay above the background image */
}

/* This container holds all your text and buttons. */
.hero-content {
    position: relative; /* Ensures this content appears on top of the overlay */
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem; /* Creates perfect spacing between heading, paragraph, and buttons */
}

.hero h1 {
    font-size: 3rem;
    line-height: 1.3;
    margin: 0;
    max-width: 90%;
}

.hero .subtitle {
    font-size: 1.25rem;
    margin: 0;
    max-width: 700px;
}

/* This is the container for your buttons */
.hero .hero-ctas {
    display: flex;
    gap: 1rem; /* Creates space between the buttons */
}

/* Your button style */
.hero .btn-primary {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    color: #fff;
    background-color: #4F7942;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.hero .btn-primary:hover {
    background-color: #8A3324;
}



  /* SECTION */
  .section{padding:64px 0}
  .section.alt{background:#fff}
  .section-title{font-size:28px;color:var(--dark);margin-bottom:10px;font-weight:800}
  .lead{color:var(--muted);font-size:17px;margin-bottom:20px}
  
  /* cards grid */
  .cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
  .card{background:var(--card);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,0.04)}
  .media-card img{width:100%;height:220px;object-fit:cover;display:block}
  .card-body{padding:18px}
  
  /* solution grid */
  .solution-grid{display:grid;grid-template-columns:420px 1fr;gap:28px;align-items:center}
  .solution-media img{width:100%;border-radius:12px;box-shadow:var(--shadow)}
  .checklist{list-style: none;padding:0;margin:12px 0}
  .checklist li{margin-bottom:8px}
  .product-variants{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
  .variant{background:linear-gradient(180deg,#fff,#fafafa);padding:12px;border-radius:10px;border:1px solid rgba(0,0,0,0.04);min-width:160px}
  
  /* metrics */
  .metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:18px}
  .metric{background:linear-gradient(180deg,#fff,#fcfcfc);padding:18px;border-radius:12px;border:1px solid rgba(0,0,0,0.04);text-align:center}
  .metric-num{font-size:22px;font-weight:800;color:var(--brand)}
  .metric-note{color:var(--muted);font-size:13px;margin-top:8px}
  
  /* timeline */
  .timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-top:18px}
  .timeline li{background:var(--card);padding:18px;border-radius:12px;border:1px solid rgba(0,0,0,0.04);box-shadow:var(--shadow);list-style:none}
  
  /* specs */
  .specs-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
  .spec-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
  .spec-table th, .spec-table td{padding:12px;border-bottom:1px solid rgba(0,0,0,0.04);text-align:left}
  .spec-table thead th{background:#fafafa;font-weight:700}
  
  /* case studies */
  .cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
  .case img{width:100%;height:200px;object-fit:cover;border-bottom-left-radius:0;border-bottom-right-radius:0}
  .case-body{padding:12px}
  
  /* testimonials */
  .testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
  blockquote{background:linear-gradient(180deg,#fff,#fbfbfb);padding:14px;border-radius:10px;border-left:4px solid var(--accent);font-style:italic}
  blockquote cite{display:block;margin-top:10px;font-style:normal;color:var(--muted);font-weight:600}
  
  /* faq accordion */
  .faq-grid{margin-top:12px}
  .accordion{background:var(--card);cursor:pointer;padding:12px;border-radius:10px;border:1px solid rgba(0,0,0,0.04);width:100%;text-align:left;font-weight:700;margin-bottom:8px}
  .panel{padding:0 12px 12px 12px;display:none;background:transparent}
  
  /* CTA / join */
  .cta-section{background:linear-gradient(180deg,#f1fbf3,#f8fff9);padding:40px 0}
  .cta-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
  .form-card{background:var(--card);padding:18px;border-radius:12px;border:1px solid rgba(0,0,0,0.04)}
  .form-card label{display:block;margin-bottom:10px}
  .form-card input,.form-card select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);background:#fff}
  .form-actions{display:flex;gap:10px;margin-top:10px}
  
  /* footer */
  .site-footer{background:#081b12;color:#cbd5cc;padding:28px 0;margin-top:30px}
  .footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:start}
  
  /* small screens */
  @media (max-width:980px){
    .hero-inner{grid-template-columns:1fr;gap:18px;padding-bottom:30px}
    .solution-grid{grid-template-columns:1fr;gap:18px}
    .specs-grid{grid-template-columns:1fr;gap:18px}
    .cta-grid{grid-template-columns:1fr;gap:18px}
    .nav-list{position:fixed;right:18px;top:72px;background:var(--card);padding:12px;border-radius:12px;box-shadow:var(--shadow);flex-direction:column;display:none}
    .nav-toggle{display:inline-flex}
    .nav-list.show{display:flex}
  }
  
  /* tiny */
  @media (max-width:480px){
    .hero-left h1{font-size:26px}
    .hero-left .subtitle{font-size:15px}
  }
  .case-full {
    display: none;
    margin-top: 15px;
    padding: 15px;
    background: #f8f8f8;
    border-radius: 8px;
    line-height: 1.6;
  }
  .case-full.open {
    display: block;
    animation: fadeIn 0.4s ease-in-out;
  }
  @keyframes fadeIn {
    from {opacity: 0; transform: translateY(10px);}
    to {opacity: 1; transform: translateY(0);}
  }
  
  .solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
  
  .section-title {
    font-size: 2rem;
    margin-bottom: 16px;
    font-weight: 700;
  }
  
  .checklist li {
    margin-bottom: 12px;
    line-height: 1.5;
  }
  
  .timeline {
    position: relative;
    padding-left: 30px;
  }
  
  .timeline::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #d6d6d6;
  }
  
  .timeline-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
  }
  
  .step-icon {
    position: absolute;
    left: -5px;
    background: #fff;
    border: 3px solid #4caf50;
    border-radius: 50%;
    font-size: 1.2rem;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .step-card {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 15px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-left: 40px;
    width: 100%;
  }
  
  .step-card h4 {
    margin: 0 0 6px;
    font-size: 1.2rem;
    font-weight: 600;
  }
  
  .step-card p {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
  }
/* Divider between sections */
.section-divider {
    height: 2px; /* thickness of the line */
    background: #ddd; /* color of the line */
    margin: 40px auto;
    width: 80%; /* makes it shorter than full width */
  }
  
  /* Center the technical specs table */
  .specs-grid {
    display: flex;
    justify-content: center; /* horizontal center */
  }
  
  .spec-table {
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    min-width: 60%; /* controls table width */
  }
  
  .spec-table th,
  .spec-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #eee;
  }
  
  .spec-table th {
    background: #f4f4f4;
    font-weight: 600;
  }

  /*
 * ===============================================
 * Waitlist Section Styles
 * ===============================================
 */

.waitlist-section {
  background-color: #f8f9fa; /* A light grey background to make the section stand out */
  padding: 60px 20px;       /* Adds space: 60px top/bottom, 20px left/right */
  text-align: center;         /* Centers all the content inside (heading, text, and button) */
}

.waitlist-section h2 {
  font-size: 2.5em; /* Makes the heading bigger */
  margin-bottom: 15px;
}

.waitlist-section p {
  font-size: 1.2em;
  color: #6c757d; /* A softer grey for the paragraph text */
  margin-bottom: 30px;
}


/*
 * ===============================================
 * Waitlist Button Styles (from Option 2 before)
 * ===============================================
 */

.waitlist-button {
  background-color: #007bff;
  color: white;
  padding: 15px 30px;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.waitlist-button:hover {
  background-color: #0056b3;
}



  /* --- Styles for Sample Request Section --- */

/* The main container for the section */
.sample-section {
  padding-top: 4rem;    /* 64px */
  padding-bottom: 4rem; /* 64px */
}

/* The content wrapper that gets centered */
.sample-wrapper {
  max-width: 42rem; /* 672px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;  /* 16px */
  padding-right: 1rem; /* 16px */
  text-align: center;
}

/* Section Header */
.sample-wrapper h2 {
  font-size: 1.875rem; /* 30px */
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #111827;
}

/* Instructional Text */
.sample-wrapper p {
  margin-top: 1.5rem;  /* 24px */
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem;/* 28px */
  color: #4B5563;
}

/* Email Address */
.sample-wrapper .email-address {
  margin-top: 1rem;    /* 16px */
  font-size: 1.25rem;  /* 20px */
  font-weight: 600;
  color: #4F46E5;
}

/* Responsive adjustments for screens wider than 640px */
@media (min-width: 640px) {
  .sample-section {
      padding-top: 6rem;    /* 96px */
      padding-bottom: 6rem; /* 96px */
  }
  .sample-wrapper h2 {
      font-size: 2.25rem; /* 36px */
  }
}
  /* ---  END of Styles for Sample Request Section --- */


  
  /* FORCE: Remove underlines for all links inside the hero */
.hero a,
.hero a:link,
.hero a:visited,
.hero a:hover,
.hero a:active,
.hero a:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important; /* in case underline is implemented as border */
  box-shadow: none !important;     /* in case it's a shadow-based underline */
}

/* Also target the button classes you use */
.hero .btn,
.hero .btn-primary,
.hero .btn-outline,
.hero .hero-ctas a,
.hero .hero-buttons a {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* If a parent has text-decoration that propagates, this will neutralize it.
   Use only if underline persists (it's broad): */
.hero,
.hero * {
  text-decoration: none !important;
}