:root{
  --bg-top:#08140d;
  --bg-mid:#0f2a1b;
  --bg-bot:#1c140e;
  --card:#0b2016cc;
  --card-solid:#0b2016;
  --text:#eef7f0;
  --muted:#b9d4c2;
  --brand:#62c97b;
  --brand2:#2ea964;
  --bark:#5b3a2a;
  --soil:#2a1b12;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --round:18px;
  --max:1140px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Liberation Sans",sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 50% -60%, rgba(98,201,123,.35), transparent 55%),
    linear-gradient(180deg,var(--bg-top),var(--bg-mid) 45%,var(--bg-bot));
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.95}

/* Topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 18px;
  background:linear-gradient(180deg, rgba(8,20,13,.92), rgba(8,20,13,.65));
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex;align-items:center;gap:12px;min-width:240px}
.brand__logo{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__name{font-weight:800;letter-spacing:.3px}
.brand__tagline{font-size:12px;color:var(--muted)}

.nav{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.nav__link{font-size:14px;color:var(--muted);padding:8px 10px;border-radius:999px}
.nav__link:hover{background:rgba(255,255,255,.06);color:var(--text)}
.nav__link.is-active{background:rgba(98,201,123,.14);border:1px solid rgba(98,201,123,.25);color:var(--text)}

.topbar__cta{display:flex;gap:10px;align-items:center}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  color:#052112;
  font-weight:800;
  box-shadow:0 10px 30px rgba(98,201,123,.22);
  border:1px solid rgba(255,255,255,.12);
}
.btn--ghost{
  background:rgba(255,255,255,.06);
  color:var(--text);
  box-shadow:none;
  border:1px solid rgba(255,255,255,.12);
}
.btn:active{transform:translateY(1px)}

/* Layout helpers */
.page{max-width:var(--max);margin:0 auto;padding:26px 18px 80px}
.page--home{max-width:none;padding:0}
.stack{display:flex;flex-direction:column;gap:10px}
.stack--row{flex-direction:row;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}
.small{font-size:12px}

.h1{font-size:42px;line-height:1.02;margin:0 0 10px}
.h2{font-size:26px;margin:0 0 10px}
.h3{font-size:16px;margin:18px 0 8px}
.lead{font-size:18px;color:rgba(238,247,240,.9);max-width:60ch}
.kicker{color:rgba(185,212,194,.95);letter-spacing:.18em;text-transform:uppercase;font-size:12px;margin:0 0 10px}

.card{
  background:rgba(11,32,22,.70);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--round);
  padding:18px;
  box-shadow:var(--shadow);
}
.card__h{margin:0 0 8px;font-size:18px}

.list{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:8px}
.list a{color:var(--text)}

.grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(12, 1fr);
}
.grid > *{grid-column:span 12}

/* Photo placeholders */
.photo-slot{
  margin-top:14px;
  border-radius:16px;
  min-height:160px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  overflow:hidden;
}
.photo-slot--tall{min-height:320px}
.photo-slot::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.45));
}
.photo-slot__label{
  position:absolute;
  bottom:10px;
  left:12px;
  z-index:1;
  font-size:12px;
  color:rgba(238,247,240,.95);
  background:rgba(0,0,0,.28);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
}

/* HERO */
.hero{padding:42px 18px 26px; position:relative; overflow:hidden}
.hero::before{
  content:"";
  position:absolute;
  inset:-120px -40px auto -40px;
  height:420px;
  background:radial-gradient(600px 240px at 50% 50%, rgba(98,201,123,.22), transparent 60%);
  pointer-events:none;
}
.hero__inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.2fr .9fr;gap:24px;align-items:center}
.hero__art{display:flex;justify-content:center}

.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:10px 12px;display:flex;gap:10px;align-items:baseline}
.stat__big{font-weight:900;font-size:18px;color:rgba(98,201,123,.95)}
.stat__small{font-size:12px;color:var(--muted)}

.tree-hero{
  width:min(420px, 90vw);
  aspect-ratio: 6/5;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.tree-hero__svg{width:100%;height:100%}
.tree-hero__badge{
  position:absolute;
  top:14px;
  left:14px;
  font-weight:900;
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.12);
  padding:8px 12px;
  border-radius:999px;
}

.tree-line{
  fill:none;
  stroke:url(#bark);
  stroke-width:16;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation: draw 1.8s ease forwards;
}
.tree-line:nth-child(2){animation-delay:.05s}
.tree-line:nth-child(3){animation-delay:.12s}
.tree-line:nth-child(4){animation-delay:.18s}
.tree-line:nth-child(5){animation-delay:.24s}
.tree-line:nth-child(6){animation-delay:.30s}

.leaf{fill:rgba(98,201,123,.92);filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));opacity:0;transform-origin:center;animation: leafIn 1s ease forwards}
.leaf-cluster .leaf:nth-child(1){animation-delay:1.25s}
.leaf-cluster .leaf:nth-child(2){animation-delay:1.28s}
.leaf-cluster .leaf:nth-child(3){animation-delay:1.32s}
.leaf-cluster .leaf:nth-child(4){animation-delay:1.35s}
.leaf-cluster .leaf:nth-child(5){animation-delay:1.38s}
.leaf-cluster .leaf:nth-child(6){animation-delay:1.42s}
.leaf-cluster .leaf:nth-child(7){animation-delay:1.46s}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes leafIn{to{opacity:1;transform:scale(1)}}
.leaf{transform:scale(.85)}

.hero__scroll{max-width:var(--max);margin:18px auto 0;display:flex;gap:10px;align-items:center;justify-content:center;color:rgba(185,212,194,.92)}
.mouse{width:18px;height:28px;border:2px solid rgba(185,212,194,.85);border-radius:999px;position:relative}
.mouse::after{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);width:3px;height:6px;border-radius:999px;background:rgba(185,212,194,.85);animation: wheel 1.3s infinite}
@keyframes wheel{0%{opacity:.2;transform:translate(-50%,0)} 60%{opacity:1} 100%{opacity:.2;transform:translate(-50%,9px)}}
.hero__scrolltext{font-size:12px;letter-spacing:.06em}

/* Scroll tree */
.tree-page{position:relative; padding:18px 0 80px;}
.tree-backbone{
  position:sticky;
  top:74px;
  height:calc(100vh - 74px);
  width:100%;
  pointer-events:none;
}
.trunk{
  position:absolute;
  left:50%;
  top:10px;
  transform:translateX(-50%);
  width:48px;
  height:calc(100% - 40px);
  border-radius:999px;
  background:linear-gradient(180deg, #6a4331, #3b241a);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.trunk::before{
  content:"";
  position:absolute;
  inset:10px 8px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  opacity:.35;
}

.tree-content{max-width:var(--max);margin:0 auto; padding:0 18px;}
.branch{position:relative; padding:64px 0;}
.branch__card{
  width:min(520px, 100%);
  background:rgba(11,32,22,.76);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:18px;
  box-shadow:var(--shadow);
}
.branch--left .branch__card{margin-right:auto}
.branch--right .branch__card{margin-left:auto}

/* Branch connector line */
.branch::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:38vw;
  max-width:420px;
  height:4px;
  background:linear-gradient(90deg, rgba(90,60,45,.0), rgba(90,60,45,.75), rgba(90,60,45,.0));
  transform:translateY(-50%);
  border-radius:999px;
  opacity:.9;
}
.branch--left::before{transform:translate(-100%,-50%)}
.branch--right::before{transform:translate(0,-50%)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.chip{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:var(--muted)}

.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Quote */
.quote{margin:12px 0 14px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22)}
.quote p{margin:0 0 8px;font-size:16px}
.quote footer{color:var(--muted);font-size:12px}

/* Roots */
.roots{padding:70px 18px 0;max-width:var(--max);margin:0 auto;position:relative}
.roots__card{max-width:660px;margin:0 auto;background:rgba(11,32,22,.78);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.soil{margin-top:34px;height:200px;background:linear-gradient(180deg, rgba(42,27,18,.0), rgba(42,27,18,.95));border-top:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.root-lines{position:absolute;inset:0;background-image:
  radial-gradient(circle at 50% 10%, rgba(255,255,255,.10), transparent 40%),
  repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px);
  opacity:.35;transform:skewX(-10deg)}

/* Before/After slider */
.ba{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.10);aspect-ratio: 16/10;background:rgba(255,255,255,.04)}
.ba__img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.08)}
.ba__after{position:absolute;inset:0;background-size:cover;background-position:center;clip-path:inset(0 0 0 50%)}
.ba__range{position:absolute;inset:auto 10px 10px 10px;width:calc(100% - 20px)}
.ba__labels{position:absolute;inset:10px 12px auto 12px;display:flex;justify-content:space-between;font-size:12px;color:rgba(238,247,240,.9);text-shadow:0 6px 18px rgba(0,0,0,.55)}

/* Page hero */
.page-hero{padding:20px 0 10px}

/* CTA */
.cta{margin-top:26px}
.cta__inner{max-width:720px;margin:0 auto;text-align:center;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:22px;box-shadow:var(--shadow)}

/* Split layout */
.split{display:grid;gap:16px;grid-template-columns:1fr 1fr}

/* Form */
.form{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.field input,.field textarea{
  background:rgba(0,0,0,.25);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
.field input:focus,.field textarea:focus{border-color:rgba(98,201,123,.6);box-shadow:0 0 0 4px rgba(98,201,123,.15)}

.alert{margin:10px 0 0;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12)}
.alert--ok{background:rgba(98,201,123,.16)}
.alert--bad{background:rgba(255,120,120,.12)}

/* Footer */
.footer{max-width:var(--max);margin:0 auto;padding:36px 18px 44px;border-top:1px solid rgba(255,255,255,.10)}
.footer__grid{display:grid;gap:16px;grid-template-columns:2fr 1fr 1fr}
.footer__h{margin:0 0 8px;font-size:16px}
.footer__fineprint{margin:16px 0 0;color:rgba(185,212,194,.85);font-size:12px}

/* Falling leaves layer */
.leaf-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:40;
  overflow:hidden;
}
.leaf-fall{
  position:absolute;
  top:-60px;
  width:18px;
  height:18px;
  background:radial-gradient(circle at 30% 30%, rgba(98,201,123,.95), rgba(46,169,100,.75));
  border-radius: 100% 0 100% 0;
  transform:rotate(30deg);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
  opacity:.85;
  will-change:transform, top, left, opacity;
}

/* Responsive */
@media (min-width: 760px){
  .grid > *{grid-column:span 6}
}
@media (min-width: 1020px){
  .grid > *{grid-column:span 4}
}
@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr;}
  .topbar{flex-wrap:wrap;justify-content:center}
  .brand{min-width:auto}
  .topbar__cta{width:100%;justify-content:center}
  .tree-backbone{display:none}
  .branch::before{display:none}
}
@media (max-width: 760px){
  .h1{font-size:34px}
  .split{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .photo-grid{grid-template-columns:1fr}
}