/* ===== Products Page: variables & base ===== */
:root{
  --bg-deep:#031c14;
  --bright-green:#63ff6b;
  --bright-green-2:#b3ff84;
  --text:#eaffea;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Lato", Arial, sans-serif;
  color:var(--text);
  background:#000;                 /* hero is black; whole page matches */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ===== Transparent navbar over the hero ===== */
.navbar{
  position:absolute;               /* sits on top of hero */
  top:16px; left:0; right:0;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(16px,3vw,28px);
  display:flex; justify-content:space-between; align-items:center;
  z-index:3;                        /* above loops + overlay */
  background:transparent;
}
.logo img{height:22px; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.nav-menu{
  display:flex; gap:1.2rem; align-items:center;
  padding:10px 16px; border-radius:999px;
  background:linear-gradient(90deg,var(--bright-green),var(--bright-green-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px rgba(0,0,0,.45);
}
.nav-menu a{
  color:#0b3a28; font-weight:800; text-decoration:none; font-size:.98rem; line-height:1; padding:8px 10px; border-radius:999px;
}

/* ===== Mobile nav: hamburger + sidebar (added) ===== */

/* Hamburger hidden by default (desktop) */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:26px;
  height:20px;
  background:transparent;
  border:0;
  cursor:pointer;
  z-index:10020; /* above everything clickable in hero */
}
.menu-toggle .bar{
  height:3px; width:100%;
  background-color:var(--bright-green);
  border-radius:2px;
}

/* Sidebar panel */
.sidebar{
  position:fixed;
  top:0; right:-100%;
  width:72%;
  max-width:320px;
  height:100vh;
  background:#0b1f16;            /* opaque */
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  padding:80px 28px 28px;
  box-shadow:-24px 0 60px rgba(0,0,0,.6);
  transition:right .28s cubic-bezier(.22,.61,.36,1);
  z-index:10010;                  /* above hero and navbar */
}
.sidebar a{
  color:var(--bright-green);
  text-decoration:none;
  font-weight:800;
  font-size:1.1rem;
}
.sidebar a:hover{ color:var(--bright-green-2); }
.sidebar.active{ right:0; }

/* Close button */
.close-btn{
  position:absolute;
  top:18px; right:22px;
  background:none; border:0;
  font-size:2rem; line-height:1;
  color:var(--bright-green);
  cursor:pointer;
}

/* Overlay */
.sidebar-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  z-index:10005;
}
.sidebar-overlay.active{
  opacity:1; pointer-events:auto;
}

/* Prevent background scroll & hide hamburger while open */
body.nav-open{ overflow:hidden; }
body.nav-open .menu-toggle{ display:none; }

/* Switch to mobile: hide pill menu, show hamburger */
@media (max-width: 900px){
  .nav-menu{ display:none !important; }
  .menu-toggle{ display:flex; }
}

/* Desktop safety */
@media (min-width: 901px){
  .sidebar, .sidebar-overlay{ display:none !important; }
}

/* ===== Products Hero ===== */
.products-hero{
  position:relative;
  min-height:100svh;
  background:#000;                 /* solid black hero */
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:clamp(64px, 10vh, 120px) clamp(24px, 4vw, 40px) clamp(24px, 6vh, 60px);
}

/* central darkening like the mockup (subtle; mostly black anyway) */
.products-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 35% at 50% 28%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.75) 100%);
  pointer-events:none;
  z-index:1;
}

/* Background shapes (.png now) */
.products-looper{
  position:absolute; z-index:0; pointer-events:none; height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
  opacity:.95; width:min(70vw, 820px);
}
.products-looper.left{
  left:max(-140px,-8vw); bottom:-10vh; transform:rotate(-2deg);
}
.products-looper.right{
  right:max(-140px,-8vw); bottom:-12vh; transform:rotate(3deg);
}

/* Content */
.products-hero-inner{
  position:relative; z-index:2;
  max-width:1100px; width:100%;
  text-align:center; display:grid;
  gap:clamp(16px, 2.6vw, 28px);
}

.products-title{
  font-weight:800; letter-spacing:.02em; line-height:1.05;
  font-size:clamp(2.2rem, 1.2rem + 6vw, 4.6rem);
  background:linear-gradient(180deg,#9dff9f 0%,#2b8a3e 60%,rgba(43,138,62,0.15) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 8px 24px rgba(0,0,0,.35);
}

.products-subtitle{
  max-width:900px; margin:0 auto;
  color:#e9ffe6; font-size:clamp(1rem, .7rem + 1vw, 1.25rem);
  line-height:1.6; opacity:.95;
}

/* Feature pills with CHECK ICONS */
.products-pills{
  list-style:none; padding:0; margin:clamp(6px, 1.2vw, 10px) 0 0;
  display:grid; grid-auto-flow:column; justify-content:center;
  gap:clamp(12px, 2.2vw, 24px);
}
.products-pills li{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(15,20,16,.85);
  border:1px solid rgba(160,255,160,.18);
  color:#e6ffe3; border-radius:10px;
  padding:10px 14px; font-weight:800; font-size:.98rem;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}

/* Green circular badge with white check */
.pill-check{
  width:18px; height:18px; border-radius:999px; position:relative; flex:0 0 18px;
  background:radial-gradient(circle at 60% 35%, #9dff9f, #2b8a3e);
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset, 0 2px 6px rgba(0,0,0,.35);
}
.pill-check::after{
  content:"";
  position:absolute;
  left:4px; top:5px;           /* centered nicely */
  width:7px; height:4px;
  border:2px solid #fff;
  border-top:0; border-right:0;
  transform:rotate(-45deg);
}

/* Scroll mouse indicator */
.products-scroll{
  display:inline-grid; place-items:center; gap:8px;
  margin-top:clamp(48px, 6vh, 72px);   /* placed further down */
  color:#eaffea; text-decoration:none; opacity:.9;
}
.products-scroll::before{
  content:""; width:28px; height:42px; border-radius:14px;
  border:2px solid #9dff9f; box-shadow:0 0 16px rgba(99,255,107,.28);
  position:relative; overflow:hidden; display:block;
}
.products-scroll::after{
  content:""; position:absolute; top:11px;        /* inside frame */
  width:4px; height:8px; border-radius:2px; background:#9dff9f;
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
  0%   {transform:translateY(0);opacity:1;}
  50%  {transform:translateY(14px);opacity:.3;}
  100% {transform:translateY(0);opacity:1;}
}

/* Entrance animation */
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.products-hero-inner>*{opacity:0;animation:fadeInUp .9s ease-out forwards}
.products-title{animation-delay:.1s}
.products-subtitle{animation-delay:.3s}
.products-pills{animation-delay:.5s}
.products-scroll{animation-delay:.8s}

/* ===== DEFTOOLS SUITE (section wrapper) ===== */
.suite{
  background:#000;
  color:#fff;
  min-height:100svh;           /* fills the screen, like previous sections */
  display:flex;
  align-items:center;
  padding:clamp(56px,8vh,96px) 0;
}
.suite-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(16px,3vw,32px);
  width:100%;
}

/* Section title (underline removed) */
.suite-title{
  text-align:center;
  color:var(--bright-green);
  font-weight:800;
  line-height:1.2;
  font-size:clamp(1.6rem, 1rem + 2.8vw, 2.4rem);
  margin-bottom: clamp(28px, 5vh, 56px);
}
.desktop-br{ display:inline }
@media (max-width: 780px){ .desktop-br{ display:none } }

/* Grid row */
.suite-row{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr; /* left copy / right art */
  gap: clamp(28px, 6vw, 80px);
  align-items:center;
}

/* Left column */
.suite-copy{ max-width:560px }
.suite-step{
  display:inline-grid;
  place-items:center;
  width:44px; height:44px;
  border-radius:10px;
  font-weight:800;
  color:var(--bright-green);
  background:
    radial-gradient(60% 60% at 50% 35%, #183226 0%, #0d1411 70%);
  box-shadow:
    0 8px 20px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 0 2px rgba(99,255,107,.16);
  margin-bottom: 18px;
}
.suite-product{
  color:var(--bright-green);
  font-weight:800;
  letter-spacing:.01em;
  font-size: clamp(1.6rem, .8rem + 2.6vw, 2.1rem);
  margin-bottom: 10px;
}
.suite-desc{
  color:#f1fff0;
  line-height:1.55;
  font-size: .98rem;
  opacity:.96;
}

/* CTA button — exact to mockup (more spacing from text) */
.suite-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 26px; /* distance from paragraph */
  padding: 1rem 2.2rem;
  background: linear-gradient(180deg, #8AFF70 0%, #66E75A 100%);
  border: none;
  border-radius: 999px;
  color: #163F2A;
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
  box-shadow:
    0 4px 0 #1E3927,
    0 8px 0 rgba(0, 0, 0, 0.25),
    0 12px 24px rgba(0, 120, 30, 0.2);
  transition: all 0.2s ease;
  transform: translateY(0);
}
.suite-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 0 #1E3927,
    0 10px 20px rgba(0, 255, 100, 0.3),
    0 20px 36px rgba(0, 120, 30, 0.25);
}
.suite-cta:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 3px 0 rgba(0, 0, 0, 0.3),
    0 6px 0 rgba(0, 0, 0, 0.25);
}
.suite-cta svg {
  width: 22px;
  height: 22px;
  stroke: #163F2A;
  stroke-width: 2.5;
  transition: transform 0.2s ease;
}
.suite-cta:hover svg { transform: translateY(2px); }

/* Right column art */
.suite-art{
  margin:0;
  display:grid;
  place-items:center;
}
.suite-art img{
  width:min(440px, 42vw);
  height:auto;
  display:block;
  filter: drop-shadow(0 22px 50px rgba(0,0,0,.55));
}

/* ===== NGOs & Non-Profits CTA (Products page) ===== */
.ngo-cta{
  background:#000;
  padding: clamp(40px, 8vh, 72px) 0;
  display:flex;
  justify-content:center;
}

.ngo-cta-card{
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  text-align:center;
  color:#eaffea;
  padding: clamp(22px, 4vw, 36px);
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 50% 0%, #2a2e2b 0%, #1e2220 55%, #151816 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 44px rgba(0,0,0,.55);
}

/* Headline */
.ngo-cta-title{
  color: var(--bright-green);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.15;
  font-size: clamp(1.25rem, 0.9rem + 2.2vw, 1.9rem);
  margin-bottom: clamp(14px, 2vh, 18px);
}

/* Body copy */
.ngo-cta-copy{
  color:#e9ffe6;
  opacity:.95;
  line-height:1.6;
  font-size: clamp(.98rem, .6rem + .9vw, 1.05rem);
  max-width: 860px;
  margin: 0 auto;
}
.ngo-cta-copy + .ngo-cta-copy{
  margin-top: clamp(12px, 1.6vh, 16px);
}

/* Button to match mock */
.ngo-cta-btn{
  display:inline-block;
  margin-top: clamp(18px, 3vh, 26px);
  padding: clamp(12px, 1.2vw, 14px) clamp(28px, 4vw, 38px);
  border-radius: 999px;
  background: linear-gradient(180deg, #8AFF70 0%, #66E75A 100%);
  color:#163F2A;
  font-weight:800;
  font-size: clamp(1rem, .8rem + .6vw, 1.1rem);
  text-decoration:none;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),   /* top inner highlight */
    0 4px 0 #1E3927,                       /* bottom rim (pill edge) */
    0 10px 24px rgba(0,120,30,.22);        /* soft drop */
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.ngo-cta-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    0 4px 0 #1E3927,
    0 14px 32px rgba(0,200,80,.28);
  filter: brightness(1.02);
}
.ngo-cta-btn:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 3px 0 rgba(0,0,0,.18),
    0 3px 0 #1E3927,
    0 8px 18px rgba(0,120,30,.22);
}

/* ===== Footer (identical to home page) ===== */
.site-footer{
  background:#000;
  color:#fff;
  padding: clamp(40px, 7vh, 72px) 0 16px;
  font-family:"Lato", Arial, sans-serif;
}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(16px,3vw,32px);
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; /* brand + 3 columns */
  gap: clamp(24px, 4vw, 64px);
  align-items:start;
}

/* Brand block */
.footer-logo img{
  height:24px;
  width:auto;
  display:block;
  margin-bottom:14px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.footer-address a{
  color:#cfead0;
  font-size:.95rem;
  text-decoration:underline;
}
.footer-address{ margin:12px 0 20px }
.footer-kicker{
  color:var(--bright-green);
  font-weight:800;
  margin-bottom:8px;
}
.footer-email{
  color:#e9ffe6;
  text-decoration:none;
  display:inline-block;
  margin-bottom:12px;
}
.footer-email:hover{ text-decoration:underline }

/* Social icon */
.footer-social{ display:flex; gap:10px }
.social-linkedin svg{ width:26px; height:26px; display:block }
.social-linkedin rect{ fill:var(--bright-green) }
.social-linkedin path{ fill:#052a17 }
.social-linkedin:hover rect{ filter:brightness(1.05) }

/* Columns */
.footer-columns{ display:contents } /* let .footer-col participate in grid */
.footer-col h3{
  color:var(--bright-green);
  font-size:1.05rem;
  margin:2px 0 10px;
  font-weight:800;
}
.footer-col ul{ list-style:none; padding:0; margin:0 }
.footer-col li + li{ margin-top:10px }
.footer-col a{
  color:#f1fff0;
  text-decoration:none;
  font-weight:600;
}
.footer-col a:hover{ text-decoration:underline }

/* Bottom line */
.footer-bottom{
  max-width:1200px;
  margin: 18px auto 0;
  padding: 0 clamp(16px,3vw,32px);
  display:flex;
  justify-content:flex-end;
  color:#c8e9c9;
  font-size:.9rem;
}

/* Footer link spacing fix (same as home) */
.site-footer .footer-col ul{
  display:grid;
  gap: clamp(8px, 0.7rem, 12px);
}
.site-footer .footer-col li + li{ margin-top:0 !important }
.site-footer .footer-col a{
  line-height:1.55;
  padding-block:2px;
}

/* Responsive (same as home) */
@media (max-width:980px){
  .footer-inner{ grid-template-columns: 1fr 1fr }
}
@media (max-width:680px){
  .footer-inner{ grid-template-columns: 1fr }
  .footer-bottom{ justify-content:center; text-align:center }
}

/* Entrance animation (subtle) */
@keyframes suiteFadeUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
.suite-row{ opacity:0; animation: suiteFadeUp .9s ease-out .1s forwards }

/* Mirror layout for alternating rows (DEFCOM etc.) */
.suite-row--reverse{
  grid-template-columns: 0.95fr 1.05fr; /* art / copy */
}
.suite-row--reverse .suite-art{ order: 1; }
.suite-row--reverse .suite-copy{ order: 2; }
.suite-row--reverse{
  opacity: 0;
  animation: suiteFadeUp .9s ease-out .2s forwards; /* slight stagger */
}

/* Mobile: stack and center each product */
@media (max-width: 980px){
  .suite-row{
    grid-template-columns: 1fr;     /* stack copy & image */
    gap: 32px;
    place-items: center;            /* center both columns */
    text-align: center;             /* center text */
  }

  /* Keep the copy nicely centered and readable */
  .suite-copy{
    max-width: 680px;
    margin: 0 auto;                 /* center block */
  }

  /* Center the step badge */
  .suite-step{
    margin-left: auto;
    margin-right: auto;
  }

  /* Center button under the text */
  .suite-cta{
    align-self: center;
  }

  /* Center the art and its image */
  .suite-art{
    margin: 0;
    display: grid;
    place-items: center;
  }
  .suite-art img{
    width: min(520px, 70vw);
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* Keep reverse rows stacking the same way, but centered too */
  .suite-row--reverse{
    grid-template-columns: 1fr;
  }
  .suite-row--reverse .suite-art{ order: 2; }
  .suite-row--reverse .suite-copy{ order: 1; }
}


/* ===== Responsiveness for hero shapes ===== */
@media (max-width:960px){
  .products-pills{grid-auto-flow:row; grid-template-columns:1fr}
  .products-pills li{justify-content:center}
  .products-looper{width:min(90vw,760px)}
}
@media (max-width:700px){
  .products-looper.left{left:-35vw; bottom:-16vh; transform:rotate(-4deg)}
  .products-looper.right{right:-35vw; bottom:-18vh; transform:rotate(5deg)}
}

/* ===== Smooth Scroll ===== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* prevents nav overlap for anchored sections */
  }
}