:root{
  --bg:#073f1a;           /* deep green */
  --bg-soft:#1b6131;      /* softer green */
  --card-glass:rgba(7,63,26,0.78);
  --card-border:rgba(180,205,130,0.5);
  --text:#f4faf6;
  --muted:#c3d6c9;
  --brand:#5da374;
  --brand-soft:#b4cd82;
  --ring:
    radial-gradient(1400px 700px at 0% -20%, rgba(93,163,116,0.28), transparent 60%),
    radial-gradient(900px 500px at 110% -10%, rgba(180,205,130,0.26), transparent 65%),
    radial-gradient(1200px 600px at 50% 120%, rgba(7,63,26,0.9), transparent 70%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  /* DARKER MAIN BACKGROUND */
  background:#073f1a;
  background-image:var(--ring);
  min-height:100vh;
}

/* Generic elements */
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* Layout */
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}

/* Nav */
.nav{
  position:sticky;top:0;z-index:60;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  background:linear-gradient(120deg,rgba(7,63,26,0.93),rgba(27,97,49,0.82));
  border-bottom:1px solid rgba(180,205,130,0.35);
  box-shadow:0 18px 40px rgba(0,0,0,0.25);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex;gap:10px;align-items:center}
.brand img{
  width:50px;
  height:50px;
  border-radius:70px;
  box-shadow:0 0 24px rgba(180,205,130,0.45);
}

.brand span{font-weight:700;letter-spacing:.4px}

/* Buttons */
.cta-btn,
.ghost-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:18px;
  font-weight:600;border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
  cursor:pointer;
  text-decoration:none;
}

.cta-btn{
  background:
    linear-gradient(135deg, rgba(93,163,116,0.2), rgba(180,205,130,0.08)),
    radial-gradient(circle at top left, rgba(180,205,130,0.8), rgba(93,163,116,0.9));
  color:#072412;
  border-color:rgba(180,205,130,0.7);
  box-shadow:
    0 0 25px rgba(180,205,130,0.45),
    0 16px 40px rgba(0,0,0,0.45);
}
.cta-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 35px rgba(180,205,130,0.6),
    0 18px 44px rgba(0,0,0,0.6);
}

.ghost-btn{
  border-color:rgba(180,205,130,0.45);
  color:var(--text);
  background:linear-gradient(135deg,rgba(7,63,26,0.2),rgba(27,97,49,0.08));
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
  opacity:.9;
}
.ghost-btn:hover{
  opacity:1;
  border-color:rgba(180,205,130,0.7);
}

/* Hero */
.hero{padding:60px 0 28px}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:40px;
  align-items:center;
}
.kicker{
  display:inline-flex;gap:8px;align-items:center;
  color:var(--brand-soft);font-weight:700;
  margin-bottom:10px;font-size:13px;
  text-transform:uppercase;letter-spacing:.08em;
}
.title{
  font-size:clamp(32px, 6vw, 56px);
  line-height:1.05;
  margin:8px 0 12px;
  text-shadow:0 0 40px rgba(0,0,0,0.6);
}
.subtitle{
  color:var(--muted);
  font-size:clamp(16px, 2.2vw, 20px);
  max-width:32rem;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* Phone mock / shell */
.phone img,
.card > img {
  width:100%;
  height:auto;
  aspect-ratio:1857 / 3096;
  display:block;
  border-radius:26px;
}

/* Liquid glass shell for main mockup */
.glass-shell{
  background:radial-gradient(circle at top,#5da37426,#073f1a 60%);
  padding:12px;
  border-radius:32px;
  border:1px solid rgba(180,205,130,0.6);
  box-shadow:
    0 22px 60px rgba(0,0,0,0.75),
    0 0 60px rgba(93,163,116,0.4);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

/* Sections */
.section{padding:56px 0}
.section h2{
  font-size:clamp(26px, 3.2vw, 36px);
  margin:0 0 10px;
}
.section p.lead{
  color:var(--muted);
  margin:0 0 24px;
  max-width:32rem;
}

/* Cards & grids */
.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.card{
  border-radius:18px;
  overflow:hidden;
}

.glass{
  background:
    linear-gradient(140deg,rgba(7,63,26,0.78),rgba(27,97,49,0.65)),
    radial-gradient(circle at top left,rgba(93,163,116,0.25),transparent 55%);
  border:1px solid var(--card-border);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    0 0 40px rgba(93,163,116,0.25);
  padding:18px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.glass h3{
  margin:0 0 6px;
  font-size:18px;
}
.glass p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

/* Steps */
.hiw{counter-reset:step}
.step{
  display:flex;gap:12px;align-items:flex-start;
}
.step .num{
  counter-increment:step;
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  background:radial-gradient(circle at top,#b4cd82,#5da374);
  border:1px solid rgba(7,63,26,0.9);
  color:#073f1a;font-weight:800;
  box-shadow:0 0 30px rgba(180,205,130,0.65);
}
.step p{margin:0;color:var(--muted)}
.step strong{color:var(--text)}

/* Badges */
.badge-row{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;
}
small.muted{color:var(--muted)}

/* Footer */
.footer{
  padding:32px 0;
  color:#e0f0e5;
  border-top:1px solid rgba(180,205,130,0.45);
}
.footer .row{
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:space-between;align-items:center;
}
.footer a{color:#e8f7ec}

/* Slight glassy overlay behind footer */
.glass-footer{
  background:
    linear-gradient(180deg,rgba(7,63,26,0.95),rgba(7,63,26,1));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* FAQ */
.faq details{
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:10px;
}
.faq details.glass{
  background:
    linear-gradient(140deg,rgba(7,63,26,0.84),rgba(27,97,49,0.7));
  border:1px solid rgba(180,205,130,0.65);
}
.faq summary{
  cursor:pointer;font-weight:700;outline:none;
}
.faq p{
  color:var(--muted);
  margin:8px 0 0;
}

/* Responsive */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .glass-shell{margin-top:10px}
}
@media (max-width: 640px){
  .grid{grid-template-columns:1fr}
  .nav-inner{padding:10px 0}
  .cta-btn, .ghost-btn{padding:10px 14px}
}