:root{
  --bg:#f6faf7;
  --card:#ffffff;
  --muted:#44554e;
  --accent:#0ec27c;
  --accent-dark:#0a7d4e;
  --glass: rgba(255,255,255,0.6);
  --radius:16px;
  --gap:24px;
  --section-pad:72px;
  --container:1100px;
  --shadow: 0 10px 30px rgba(7,18,14,0.08);
  --max-width:1120px;
  --header-height:64px;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%;}
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:#0f1e16;
  margin:0;
  padding-top:var(--header-height);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--container);margin:0 auto;padding:0 20px}

/* Skip link */
.skip-link{
  position:fixed;left:12px;top:12px;background:#08150e;color:#fff;padding:8px 12px;border-radius:8px;font-weight:700;z-index:999;transform:translateY(-120%);transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0);outline:3px solid rgba(14,194,124,0.22)}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:10px 0;background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(7,18,14,0.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{border-radius:10px}
.brand-text h1{font-family:'Montserrat',sans-serif;font-size:1.05rem;margin:0}
.brand-text small{display:block;color:var(--muted);font-size:0.78rem}

/* Navigation */
.nav-list{list-style:none;padding:0;margin:0;display:flex;gap:16px;align-items:center}
.nav-list a{padding:8px 12px;border-radius:10px;font-weight:600}
.nav-list a:hover{background:rgba(10,10,10,0.03)}
.btn-cta{background:linear-gradient(180deg,var(--accent),var(--accent-dark));color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;box-shadow:0 10px 28px rgba(14,194,124,0.18)}
.btn-outline{padding:10px 14px;border-radius:12px;border:1px solid rgba(10,10,10,0.06);font-weight:700;background:#fff}

/* -------------------------------
   Burger (Mobile) 
---------------------------------*/
.burger {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  z-index: 160;
  position: relative;
}

.burger-lines {
  display: block;
  width: 28px;
  height: 2px;
  background: #0f1e16;
  border-radius: 2px;
  position: relative;
  transition: all 0.3s ease;
}

.burger-lines::before,
.burger-lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 28px;
  height: 2px;
  background: #0f1e16;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.burger-lines::before { top: -8px; }
.burger-lines::after  { top: 8px; }

/* Burger toggle animation */
.burger.active .burger-lines {
  background: transparent;
}
.burger.active .burger-lines::before {
  transform: rotate(45deg) translate(5px, 5px);
}
.burger.active .burger-lines::after {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* -------------------------------
   Mobile Menu
---------------------------------*/
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  padding: 80px 24px 24px 24px;
  z-index: 150;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* Show mobile menu */
.mobile-menu.active {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Menu links */
.mobile-menu a {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
  color: #0f1e16;
  text-decoration: none;
  transition: background 0.25s ease;
}

.mobile-menu a:hover {
  background: rgba(14, 194, 124, 0.08);
}

.mobile-menu .mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.mobile-menu a {
  display: block;
  padding: 16px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1.1rem;
  color: #0f1e16;
  text-decoration: none;
  text-align: center;
  transition: background 0.25s ease;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.mobile-menu a:hover {
  background: rgba(14, 194, 124, 0.1);
}

.mobile-menu .btn-cta {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: #fff;
  border: none;
  box-shadow: 0 10px 28px rgba(14, 194, 124, 0.18);
}

/* Responsive: show burger only on mobile */
@media (max-width: 768px) {
  .burger { display: block; }
  .nav-list.desktop { display: none; }
}

/* HERO */
.hero{padding:100px 0 60px;display:grid;grid-template-columns:1fr 460px;gap:36px;align-items:center}
.hero-left h2{font-size:2.4rem;line-height:1.05;margin:0 0 14px;font-weight:800}
.accent{color:var(--accent);display:inline-block}
.lead{color:var(--muted);margin-bottom:18px;font-size:1.05rem}
.muted{color:var(--muted)}
.small{font-size:0.85rem}

/* Mockup */
.hero-right{position:relative}
.mockup{border-radius:22px;background:linear-gradient(180deg,#fff,#f7fff9);padding:24px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.mockup img{width:280px;max-width:100%;transform:rotate(-3deg)}
.float-blob{position:absolute;right:0;top:-40px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle, rgba(14,194,124,0.18), transparent 60%);filter:blur(28px);z-index:-1;pointer-events:none}

/* Sections */
.section{padding:var(--section-pad) 0}
.section-title{font-size:1.6rem;font-weight:700;margin-bottom:8px}
.section-desc{color:var(--muted);max-width:780px;margin-bottom:18px}

/* Grid cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);padding:18px;border-radius:14px;box-shadow:var(--shadow);border-left:6px solid rgba(0,0,0,0.03)}
.card h4{margin:0 0 8px}
.stat{font-weight:800;font-size:1.25rem;color:var(--accent)}

/* Feature list */
.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.feature{display:flex;gap:14px;align-items:flex-start}
.feature .dot{width:52px;height:52px;border-radius:12px;background:#f0fff5;display:grid;place-items:center;font-weight:700}

/* Timeline */
.timeline{display:flex;gap:12px;overflow-x:auto;padding:8px 6px}
.timeline .step{min-width:220px;background:var(--card);padding:16px;border-radius:12px;box-shadow:var(--shadow)}

/* Plans */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.plan{background:linear-gradient(180deg,#fff,#fbfff8);padding:18px;border-radius:12px;box-shadow:var(--shadow)}

/* Road & team */
.road{display:grid;grid-template-columns:1fr;gap:12px}
.road .item{background:var(--card);padding:14px;border-radius:12px;box-shadow:var(--shadow)}

.team{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.person{background:var(--card);padding:14px;border-radius:12px;text-align:center;box-shadow:var(--shadow)}

/* Extras */
.badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.badge{background:#f0fff5;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);font-weight:700}
.badge.ghost{background:transparent;border:1px solid rgba(10,10,10,0.03);font-weight:600}

.actions{display:flex;gap:14px;align-items:center;margin-top:16px;flex-wrap:wrap}
.note{background:var(--card);padding:10px 14px;border-radius:12px;box-shadow:var(--shadow)}

/* Cards row */
.cards-row{margin-top:16px}
.card:hover,.plan:hover,.person:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(7,18,14,0.10)}
.btn-cta{transition:all .22s ease}

/* Team CTA */
.team-cta{display:flex;gap:12px;align-items:center;margin-top:14px;flex-wrap:wrap}
.quote{background:linear-gradient(180deg,var(--accent),var(--accent-dark));padding:12px;border-radius:12px;color:#fff;font-weight:700}

/* Download */
.download-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.qr-card{background:var(--card);padding:18px;border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center}
#qr{width:180px;height:180px;display:block}

/* Footer */
.site-footer{padding:30px 0;background:#08150e;color:#d2e5d9;text-align:center}

/* Reveal animation */
.reveal{opacity:1;transform:none}
.js-enabled .reveal{opacity:0;transform:translateY(18px);transition:all .7s cubic-bezier(.2,.9,.3,1)}
.js-enabled .reveal.visible{opacity:1;transform:none}

/* Hover/interaction improvements */
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(14,194,124,0.28)}
.feature .dot{transition:all .3s ease}
.feature .dot:hover{transform:scale(1.06);box-shadow:0 12px 28px rgba(14,194,124,0.16)}

/* Responsive */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr 380px}
}
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .feature-list{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .wrap{padding:0 16px}
  .nav-list.desktop{display:none}
  .burger{display:block}
  .hero{grid-template-columns:1fr;gap:20px;padding-top:100px}
  .mockup{order:2}
  .grid{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .mobile-menu{right:12px;top:var(--header-height)}
}
@media (max-width:420px){
  .hero-left h2{font-size:1.6rem}
  .mockup img{width:230px}
  .brand-text h1{font-size:0.98rem}
}

/* small accessibility focus styles */
a:focus, button:focus {outline:3px solid rgba(14,194,124,0.16);outline-offset:3px}