/* ========= Theme (Green base) ========= */
:root{
  --bg-deep:#0a3b34;
  --bg-mid:#0e544a;
  --bg-lite:#0f6b5d;
  --ink:#e7fff7;
  --muted:#cfe8e1;
  --primary:#a7f3d0;
  --primary-ink:#073b33;
  --glass-bg:rgba(255,255,255,0.06);
  --glass-stroke:rgba(255,255,255,0.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg-mid),var(--bg-deep) 60%,#082d28);
  overflow-x:hidden;
}

/* Animated background blobs + grain (green only) */
.bg{ position:fixed; inset:-12vmax; z-index:-2; filter:saturate(120%); }
.blob{
  position:absolute; width:60vmax; height:60vmax; border-radius:50%;
  background:
    radial-gradient(40% 40% at 30% 30%, #fff2, #0000),
    linear-gradient(135deg, #1ea87a, #0f6b5d, #0a3b34);
  opacity:.45; filter:blur(24px);
  animation:float 30s linear infinite;
}
.b1{ top:-6vmax; left:-10vmax; animation-duration:34s; }
.b2{ top:10vmax; right:-12vmax; animation-direction:reverse; animation-duration:28s; }
.b3{ bottom:-14vmax; left:6vmax; animation-duration:36s; }
.grain{
  position:absolute; inset:0; mix-blend-mode:soft-light; opacity:.18; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.25'/></svg>");
}
@keyframes float{
  0%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); }
  33%{ transform:translate3d(5vmax,-3vmax,0) rotate(60deg) scale(1.05); }
  66%{ transform:translate3d(-4vmax,4vmax,0) rotate(125deg) scale(.98); }
  100%{ transform:translate3d(0,0,0) rotate(180deg) scale(1); }
}
@media (prefers-reduced-motion:reduce){ .blob{ animation:none; } }

/* Shell & glass */
.shell{ max-width:1160px; margin:30px auto 80px; padding:0 20px; }
.glass{
  background:linear-gradient(180deg,var(--glass-bg),rgba(255,255,255,0.04));
  border:1px solid var(--glass-stroke);
  border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 40px rgba(0,0,0,.35);
}

/* Header & Nav */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:22px; justify-content:space-between;
  padding:14px 20px;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
  backdrop-filter:blur(8px);
}
.logo{ font-weight:800; color:#fff; letter-spacing:.5px; text-decoration:none; }
.nav{ margin-left:auto; }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:20px; align-items:center; }
.nav a, .nav button{ color:#fff; text-decoration:none; font-weight:600; background:none; border:0; cursor:pointer; }

/* Mobile toggle */
.nav-toggle{ display:none; width:44px; height:44px; border:0; background:none; flex-direction:column; gap:4px; justify-content:center; }
.nav-toggle span{ display:block; height:2px; background:#fff; border-radius:2px; }
@media (max-width:860px){
  .nav-toggle{ display:flex; margin-left:auto; }
  .nav{ position:fixed; inset:64px 16px auto 16px; background:rgba(7,32,28,.92); border:1px solid rgba(255,255,255,.15); border-radius:16px; padding:12px; display:none; }
  .nav[data-open="true"]{ display:block; }
  .nav ul{ flex-direction:column; align-items:stretch; }
}

/* Dropdown (closed by default) */
.nav .dropdown{
  display:none !important; visibility:hidden; opacity:0; transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease;
  position:absolute; top:120%; left:0; min-width:220px; padding:8px;
  background:rgba(7,32,28,.92); border:1px solid rgba(255,255,255,.15);
  border-radius:14px; backdrop-filter:blur(10px); z-index:20;
}
.has-dropdown{ position:relative; display:flex; align-items:center; gap:6px; }
.has-dropdown .nav-link{ padding-right:0; }
.dropdown-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:1px solid rgba(255,255,255,.15);
  border-radius:999px; background:rgba(255,255,255,.06);
}
.dropdown-toggle .chev{
  width:8px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(45deg); transition:transform .15s ease;
}
.has-dropdown[data-open="true"] .dropdown{ display:block !important; visibility:visible; opacity:1; transform:translateY(0); }
.has-dropdown[data-open="true"] .dropdown-toggle .chev{ transform:rotate(-135deg); }
@media (hover:hover) and (pointer:fine){
  .has-dropdown:hover .dropdown{ display:block !important; visibility:visible; opacity:1; transform:translateY(0); }
}

/* Hero */
.hero{ padding:clamp(36px, 7vw, 72px); }
.hero-split{ display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center; }
.display{ font-size:clamp(34px, 7vw, 64px); line-height:1.05; margin:0 0 8px; }
.lede{ font-size:clamp(16px, 2.4vw, 22px); color:var(--muted); margin:0 0 18px; }
.btn{ display:inline-block; border-radius:14px; padding:12px 18px; font-weight:800; text-decoration:none; }
.btn-primary{ background:var(--primary); color:var(--primary-ink); box-shadow:0 10px 30px rgba(0,0,0,.35); }

.hero-media{ position:relative; display:grid; gap:14px; }
.img-ph{
  position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg,#ffffff22,#ffffff08);
  border:1px dashed #ffffff55;
}
.img-ph.framed{ border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.15); }
.img-ph span{ position:absolute; inset:auto 0 10px 0; text-align:center; font-weight:600; opacity:.9; }

/* Features */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0 8px; }
.card{ padding:22px; min-height:160px; }

/* Product grid (reverted: icon tile + text columns) */
.product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px;
}
.product-card{
  display:grid; grid-template-columns:1fr 1.2fr; gap:12px;
  padding:14px; text-decoration:none; color:inherit;
}
.img-ph.center{ display:flex; align-items:center; justify-content:center; }
.product-card .icon{ width:56px; height:56px; color:#a7f3d0; opacity:.98; }
.product-meta h3{ margin:4px 0 6px; }
.product-meta p{ margin:0 0 10px; color:var(--muted); }
.chip{ display:inline-block; padding:2px 8px; border-radius:999px; font-weight:700; font-size:12px; background:rgba(255,255,255,.14); }

/* Footer */
.site-footer{
  margin-top:60px; padding:28px 18px; text-align:center; color:#dff6ef;
  background:rgba(6,28,24,.55); border-top:1px solid rgba(255,255,255,.12);
}
.site-footer nav{ margin-top:8px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.site-footer a{ color:#caf1e7; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width:1020px){
  .hero-split{ grid-template-columns:1fr; }
  .features, .product-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .features, .product-grid{ grid-template-columns:1fr; }
}

/* More padding + nicer spacing for the hero callout box */
.feature-callout{
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: 18px;           /* soften corners a bit */
  line-height: 1.45;
}
.feature-callout h3{
  margin: 0 0 8px;
  font-size: clamp(16px, 1.4vw, 20px);
}
.feature-callout p{
  margin: 0;                     /* prevent text from pushing edges */
}

/* Slightly increase the space between the screenshot and the callout */
.hero-media{
  gap: clamp(16px, 2vw, 22px);
}

/* Extra comfort on small screens */
@media (max-width: 720px){
  .feature-callout{ padding: 22px; }
}
/* Roomier icon tile + larger, tinted icons for inline SVG */
.product-grid .img-ph.center{
  min-height: 140px;
  border-style: solid;
  border-color: rgba(255,255,255,.25);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.16), rgba(255,255,255,.06) 50%, transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
}

.product-card .icon{
  width: 88px; height: 88px;
  color: #a7f3d0;                 /* on-brand mint tint */
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.product-card:hover .icon{
  transform: translateY(-1px);
  transition: transform .15s ease;
}

/* --- Fix product card layout and icon sizing --- */
.product-card{
  display: grid;
  grid-template-columns: 152px minmax(0,1fr); /* fixed tile + flexible text */
  gap: 16px;
  align-items: center;
}

.product-grid .img-ph.center{
  width: 152px;                 /* lock tile width */
  height: 120px;                /* consistent tile height */
  padding: 0;
  justify-self: start;
}

.product-meta{ min-width: 0; }  /* allow text to wrap instead of overflow */

/* Inline SVG icons (Option A) */
.product-card .icon{
  width: 88px; height: 88px;
  color: #a7f3d0;               /* mint tint */
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.product-card:hover .icon{ transform: translateY(-1px); transition: transform .15s ease; }

/* ==== Accessibility & polish ==== */

/* Crisp focus rings (keyboard only) */
:focus-visible {
  outline: 3px solid #a7f3d0;
  outline-offset: 2px;
  border-radius: 10px;
}
a, button { border-radius: 10px; }
.nav a:focus-visible,
.dropdown-toggle:focus-visible,
.btn:focus-visible { outline-color: #a7f3d0; }

/* Hover/focus lift on interactive cards & buttons */
.btn:hover, .btn:focus-visible { transform: translateY(-1px); transition: transform .15s ease; }
.card:hover { transform: translateY(-2px); transition: transform .18s ease; }
.card:hover, .btn:hover { box-shadow: 0 12px 28px rgba(0,0,0,.28); }

/* ==== Product grid hardening ==== */
/* desktop/tablet default (matches your current grid) */
.product-card{
  display: grid;
  grid-template-columns: 152px minmax(0,1fr);
  gap: 16px;
  align-items: center;
}
.product-grid .img-ph.center{
  width: 152px;
  height: 120px;
  padding: 0;
  justify-self: start;
}
.product-meta{ min-width: 0; }

/* inline SVG icons */
.product-card .icon{
  width: 88px; height: 88px;
  color: #a7f3d0;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

/* compact layout on narrow screens */
@media (max-width: 860px){
  .product-card{
    grid-template-columns: 96px minmax(0,1fr);
    gap: 14px;
  }
  .product-grid .img-ph.center{
    width: 96px;
    height: 96px;
  }
  .product-card .icon{
    width: 64px; height: 64px;
  }
}

/* ============ NAV BASE STYLE ============ */
.site-header { position: sticky; top: 0; z-index: 50; }
.nav ul { display: flex; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; }

.nav a, .dropdown-toggle {
  padding: 10px 14px;
  color: #e7fff7;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 600;
}
.nav a:hover, .dropdown-toggle:hover,
.nav a:focus-visible, .dropdown-toggle:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

/* Chevron */
.has-dropdown .chev{
  display:inline-block; width:10px; height:10px; margin-left:6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform .18s ease;
}
.has-dropdown[data-open="true"] .chev{ transform: rotate(225deg) translateY(1px); }

/* Positioning for dropdown */
.has-dropdown { position: relative; }
.has-dropdown .dropdown{
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 240px; padding: 8px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.has-dropdown .dropdown li { list-style: none; }
.has-dropdown .dropdown a{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; color: #e7fff7; text-decoration: none;
}
.has-dropdown .dropdown a:hover,
.has-dropdown .dropdown a:focus-visible{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}

/* Show dropdown on desktop when hovering or focusing (no click needed) */
@media (hover: hover) and (pointer: fine){
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown,
  .has-dropdown[data-open="true"] .dropdown{
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }
  /* hide the small toggle button on desktop; hover handles open */
  .dropdown-toggle{ display: none; }
}

/* Mobile / touch: dropdown opens only when toggled (prevents accidental hovers) */
@media (max-width: 900px){
  .has-dropdown .dropdown{
    position: static; top: auto; right: auto;
    margin-top: 6px;
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    display: none; /* hidden until opened via JS */
    box-shadow: none;
  }
  .has-dropdown[data-open="true"] .dropdown{ display: block; }
}

.site-header.scrolled{ box-shadow: 0 10px 30px rgba(0,0,0,.25); }

• Active link styling */
.nav a[aria-current="page"]{
  background: rgba(167,243,208,.18);
  border: 1px solid rgba(167,243,208,.55);
  color: #eafff7;
}
.has-dropdown .dropdown a[aria-current="page"]{
  background: rgba(167,243,208,.18);
  border: 1px solid rgba(167,243,208,.45);
  font-weight: 700;
}

/* ==== Faster + fancier animated background ==== */
/* knobs you can tweak */
:root{
  --blob-speed-1: 16s;   /* lower = faster */
  --blob-speed-2: 18s;
  --blob-speed-3: 22s;
  --hue-speed: 48s;      /* background hue sweep speed */
  --twinkle-speed: 12s;  /* sparkle drift speed */
}

/* ensure the bg layers don't affect content */
.bg{ isolation:isolate; position: fixed; inset: 0; pointer-events: none; }

/* livelier, smoother blobs */
.bg .blob{
  position:absolute;
  width:42vmax; height:42vmax;
  border-radius: 33% 67% 59% 41% / 41% 40% 60% 59%;
  background:
    radial-gradient(35% 35% at 30% 30%, rgba(167,243,208,.70), rgba(52,211,153,.45) 46%, rgba(13,148,136,0) 65%),
    radial-gradient(40% 40% at 70% 70%, rgba(20,184,166,.35), rgba(56,189,248,0) 60%);
  filter: blur(42px) saturate(1.12);
  opacity:.34;
  will-change: transform, border-radius;
}

/* place & animate each blob differently (faster than before) */
.bg .b1{ top:-12%; left:-10%; animation: blob-move var(--blob-speed-1) cubic-bezier(.22,.61,.36,1) infinite alternate; }
.bg .b2{ bottom:-14%; right:-12%; animation: blob-move-2 var(--blob-speed-2) cubic-bezier(.22,.61,.36,1) infinite alternate; }
.bg .b3{ top:18%; right:-14%; animation: blob-move-3 var(--blob-speed-3) cubic-bezier(.22,.61,.36,1) infinite alternate; }

/* gentle global hue sweep to add life */
.bg{ animation: hue-rotate var(--hue-speed) linear infinite; }

/* soft rotating glow behind everything (no HTML change) */
.bg::before{
  content:"";
  position:absolute; inset:-25%;
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(167,243,208,.22), rgba(56,189,248,.08), rgba(167,243,208,.18), transparent 260deg);
  mix-blend-mode: soft-light;
  filter: blur(90px);
  opacity:.26;
  animation: spin 32s linear infinite;
}

/* delicate twinkle layer (subtle) */
.bg::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(1.5px 1.5px at 45% 80%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 25%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(2px 2px at 10% 75%, rgba(255,255,255,.18), transparent 60%);
  background-repeat: no-repeat;
  opacity:.12;
  animation: twinkle var(--twinkle-speed) linear infinite;
}

/* keep your existing .grain, but if you want it punchier: */
.bg .grain{
  opacity:.10;
  animation: grain-shift 8s steps(6) infinite;
}

/* ===== Keyframes ===== */
@keyframes blob-move{
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1);
         border-radius: 33% 67% 59% 41% / 41% 40% 60% 59%; }
  100% { transform: translate3d(6vmax,4vmax,0) rotate(18deg) scale(1.06);
         border-radius: 58% 42% 35% 65% / 53% 33% 67% 47%; }
}
@keyframes blob-move-2{
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1.02);
         border-radius: 62% 38% 51% 49% / 43% 61% 39% 57%; }
  100% { transform: translate3d(-7vmax,-5vmax,0) rotate(-16deg) scale(1.08);
         border-radius: 38% 62% 49% 51% / 57% 39% 61% 43%; }
}
@keyframes blob-move-3{
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(0.98);
         border-radius: 44% 56% 60% 40% / 48% 52% 48% 52%; }
  100% { transform: translate3d(-5vmax,6vmax,0) rotate(22deg) scale(1.05);
         border-radius: 66% 34% 40% 60% / 58% 42% 58% 42%; }
}

@keyframes hue-rotate { to { filter: hue-rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Slight drift + shimmer for the twinkles */
@keyframes twinkle{
  0%   { transform: translate3d(0,0,0); opacity:.10; }
  50%  { transform: translate3d(-1.5vmax, .8vmax,0); opacity:.16; }
  100% { transform: translate3d(-3vmax, 1.6vmax,0); opacity:.10; }
}

/* tiny jitter for grain (optional) */
@keyframes grain-shift{
  0%,100%{ transform: translate3d(0,0,0); }
  20%{ transform: translate3d(-1px, 0,0); }
  40%{ transform: translate3d(0, 1px,0); }
  60%{ transform: translate3d(1px, 0,0); }
  80%{ transform: translate3d(0,-1px,0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg, .bg::before, .bg::after,
  .bg .blob, .bg .grain { animation: none !important; }
}

/* real screenshots: make them fill their frames */
.img-ph.framed, .gallery .img-ph { position: relative; overflow: hidden; border-radius: 16px; }
.img-ph.framed img, .gallery .img-ph img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}
/* keep hero/media frames at a clean ratio */
.hero-media .img-ph.framed { aspect-ratio: 16/10; }
/* gallery examples: mix wide + tall */
.gallery .img-ph { aspect-ratio: 16/10; }
.gallery .img-ph.tall { aspect-ratio: 3/4; }

/* === HERO BACKGROUND (clean) ============================================ */
.hero-media{ 
  position: relative; 
  display: grid; 
  gap: clamp(16px, 2vw, 22px); /* replaces earlier gap rules */
}

/* Background-frame hero: wide banner that won't break layout */
.hero-bg{
  aspect-ratio: 21 / 9;
  border-radius: 16px;
  border: 1px solid var(--glass-stroke);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 40px rgba(0,0,0,.35);

  /* background image hook */
  background-image: var(--hero-img);
  background-size: cover;          /* polished banner feel */
  background-position: 50% 35%;    /* lift focus slightly */
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Optional: if you ever need edge-safe full image (no crop), add data-fit="contain" */
.hero-bg[data-fit="contain"]{
  background-size: contain;
  background-position: center;
  background-color: rgba(0,0,0,.15); /* subtle matte around image */
}

/* Mobile comfort: relax the ratio so text + art breathe */
@media (max-width: 860px){
  .hero-bg{
    aspect-ratio: 16 / 10;
    min-height: 240px; /* ensures presence if container gets too narrow */
  }
}

/* Tighten placeholder styles and avoid duplicate .img-ph rules */
.img-ph{ aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; }
.img-ph.framed{ border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.15); }
.img-ph span{ position:absolute; inset:auto 0 10px; text-align:center; font-weight:600; opacity:.9; }

/* === HERO ICON FEATURE (single product) === */
.hero-icons {
  display: grid;
  gap: 16px;
  align-items: center;
}
.hero-icons .icon-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--glass-bg, rgba(255,255,255,0.06));
  backdrop-filter: blur(8px);
}
.hero-icons .icon-figure {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
}
.hero-icons .icon-badge {
  width: 72px;
  height: 72px;
  display: block;
}
.hero-icons .icon-meta h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  font-size: 20px;
}
.hero-icons .icon-meta p {
  margin: 0 0 10px 0;
  opacity: .9;
  font-size: 15px;
  line-height: 1.4;
}
.hero-icons .icon-meta .chip {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--primary, #a7f3d0);
  color: var(--primary-ink, #073b33);
  font-weight: 600;
}
.hero-icons .btn.btn-secondary {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.06);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hero-icons .btn.btn-secondary:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.hero-icons .hero-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 6px 4px 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  opacity: .9;
}
.hero-icons .hero-stats li {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
/* subtle float animation */
@keyframes floatA { 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:

/* === HOMEPAGE-ONLY: eliminate the thick band above footer === */
body.home .shell{
  /* stop margin-collapsing and control the gap with padding */
  margin: 30px auto 0;          /* no bottom margin on the wrapper */
  padding-bottom: 16px;         /* small, consistent gap */
  display: flow-root;           /* prevents child margins from collapsing */
}

/* ensure the LAST block inside the main container has no extra bottom margin */
body.home .shell > *:last-child{
  margin-bottom: 0 !important;
}

/* common culprits: sections with their own bottom margins – zero them on home */
body.home .product-grid,
body.home .features{
  margin-bottom: 0 !important;
}

/* footer shouldn’t add more space on home */
body.home .site-footer{
  margin-top: 0;
}

/* === HOME: zero-gap footer (remove band completely) === */
body.home .shell{
  margin: 30px auto 0 !important;   /* no bottom margin */
  padding-bottom: 0 !important;     /* no padding */
  display: flow-root;                /* stop margin-collapsing */
}

/* make sure the last block inside .shell contributes no space */
body.home .shell > *:last-child{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* common last sections on your home */
body.home .product-grid,
body.home .features{
  margin-bottom: 0 !important;
}

/* footer adds no extra space */
body.home .site-footer{
  margin-top: 0 !important;
  /* keep the border-top; remove it too if you want literally no line:
     border-top: none !important; */
}
