:root{
  --bg:#0b0c0b;          /* near-black */
  --panel:#111311;
  --panel-2:#151a15;
  --text:#f2f5f2;
  --muted:#b9c3b9;
  --accent:#41b43a;      /* your green */
  --accent-2:#2e8f28;    /* darker green for contrast */
  --border:rgba(255,255,255,0.08);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --max:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;backdrop-filter:saturate(140%) blur(8px);background:linear-gradient(180deg,rgba(11,12,11,.9),rgba(11,12,11,.6) 60%,transparent);border-bottom:1px solid var(--border);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{width:28px;height:28px}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{opacity:.9}
.nav-links a.active,.nav-links a:hover{opacity:1}
.nav-links .btn{margin-left:6px}
.hamburger{display:none;background:none;border:0;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);padding:10px 14px;border-radius:12px;transition:.15s;gap:8px}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:0;color:#061006;font-weight:700}
.btn-ghost{background:transparent}
.link-strong{font-weight:700;color:var(--accent)}

/* Hero */
.hero{padding:64px 0 40px;background:
 radial-gradient(1200px 600px at 20% -10%, rgba(65,180,58,.15), transparent 40%),
 radial-gradient(1000px 500px at 90% 10%, rgba(65,180,58,.10), transparent 40%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero-left h1{font-size:42px;line-height:1.1;margin:0 0 12px}
.lead{color:var(--muted);max-width:680px}
.cta-row{display:flex;gap:12px;margin:18px 0 12px}
.ticks{list-style:none;padding:0;margin:6px 0 0;display:flex;gap:14px;flex-wrap:wrap}
.ticks li{position:relative;padding-left:22px;color:#dfe6df}
.ticks li:before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:var(--accent)}

.hero-right{min-height:320px}
.img-drop{height:100%;min-height:360px;border:2px dashed rgba(65,180,58,.35);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#d9e6d9;gap:8px;padding:16px}
.img-drop code{opacity:.8}
.hero-image{width:100%;border-radius:24px;box-shadow:var(--shadow)}

/* Sections */
.section{padding:60px 0;border-top:1px solid var(--border)}
.section-title{font-size:28px;margin:0 0 18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.panel{margin-top:18px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.bullets{list-style:disc;margin-left:20px}
.fine{color:#c6d3c6;font-size:13px;margin-top:10px}

/* =============================
   FEATURES GRID (flex-based)
   ============================= */
.features-grid{ /* replaces old .grid-4 layout */
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:flex-start;  /* <- add this */
}
.features-grid .feature-card{
  flex:1 1 calc(25% - 18px);  /* 4 across on desktop */
  min-width:240px;            /* prevents cards from getting too narrow */
}

.feature-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  cursor:pointer;
  transition:transform .15s, border-color .15s, box-shadow .15s;
  outline:0;
}
.feature-card:hover{ transform:translateY(-2px); border-color:rgba(65,180,58,.35); box-shadow:var(--shadow); }
.feature-card:focus-visible{ box-shadow:0 0 0 2px var(--accent); }

.feature-head{ display:flex; align-items:center; gap:10px; position:relative; }
.feature-head h3{ margin:0; }
.chev{ margin-left:auto; opacity:.7; transition:transform .2s ease; }

/* Icons (using your SVG files) */
.icon img{ width:28px; height:28px; display:block; }

/* Summary + expandable details */
.benefit{ color:var(--muted); margin:8px 0 6px; text-align:left; }

.feature-card .details{
  max-height:0; overflow:hidden;
  opacity:0; transform:translateY(-4px);
  transition:max-height .3s ease, opacity .25s ease, transform .25s ease;
}
.feature-card[aria-expanded="true"] .details{
  max-height:420px; /* large enough for content */
  opacity:1; transform:none; margin-top:6px;
}
.feature-card[aria-expanded="true"] .chev{ transform:rotate(180deg); }

/* Bullets inside expanded details: readable & left aligned */
.feature-card .bullets{
  margin:6px 0 0 18px; /* left indent */
  padding-left:14px;   /* bullet spacing */
  text-align:left;
}

/* Steps */
.steps{display:flex;gap:14px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 14px}
.steps li{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:10px 12px}
.steps span{background:var(--accent);color:#061006;border-radius:10px;padding:2px 8px;margin-right:8px;font-weight:800}

/* Support */
.support-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.faq details{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:600}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:28px 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;padding-bottom:10px}
.foot-links{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.foot-links a{display:block;color:#d0dfd0;margin:6px 0}
.foot-bottom{border-top:1px solid var(--border);padding-top:14px;display:flex;justify-content:space-between;align-items:center}
.small{color:#c9d6c9;font-size:13px}

/* Legal pages */
.page-hero.small{padding:40px 0;background:
 radial-gradient(800px 300px at 0% 0%, rgba(65,180,58,.18), transparent 40%),
 radial-gradient(600px 260px at 100% 0%, rgba(65,180,58,.12), transparent 40%)}
.legal h2{margin-top:18px}
.legal p, .legal li{color:#e7f0e7}

/* Responsive */
@media (max-width: 1200px){
  .features-grid .feature-card{ flex-basis: calc(50% - 18px); } /* 2 across */
}
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .support-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .hamburger{display:block}
}
@media (max-width: 700px){
  .features-grid .feature-card{ flex-basis: 100%; } /* 1 across */
}