/* ==== Navbar ==== */
.navbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  padding:20px 0;
  transition:all var(--t-base);
}
.navbar.is-scrolled{
  padding:12px 0;
  background:rgba(10,15,10,.8);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.navbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.navbar__logo{
  font-size:24px;
  font-weight:700;
  letter-spacing:-.03em;
}
.navbar__nav{
  display:flex;
  gap:32px;
}
.navbar__nav a{
  font-size:14px;
  color:var(--text-muted);
  transition:color var(--t-fast);
  position:relative;
}
.navbar__nav a::after{
  content:'';
  position:absolute;
  bottom:-4px;left:0;
  width:0;height:1px;
  background:var(--avocado);
  transition:width var(--t-base);
}
.navbar__nav a:hover{color:var(--avocado)}
.navbar__nav a:hover::after{width:100%}

.navbar__toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:8px;
}
.navbar__toggle span{
  width:22px;height:2px;
  background:var(--text);
  transition:all var(--t-base);
  border-radius:2px;
}

/* ==== Hero ==== */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  padding:120px 0 60px;
  text-align:center;
}
.hero__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}
.hero__title{
  font-size:clamp(40px,8vw,96px);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1;
  margin-top:8px;
}
.hero__subtitle{
  font-size:clamp(15px,1.8vw,18px);
  line-height:1.7;
  color:var(--text-muted);
  max-width:540px;
  margin:0 auto;
}
.hero__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:8px;
}
.scroll-hint{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-top:48px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-muted);
  animation:bounce 2s ease-in-out infinite;
}
.scroll-hint svg{width:18px;height:18px}
@keyframes bounce{
  0%,100%{transform:translateY(0);opacity:.7}
  50%{transform:translateY(6px);opacity:1}
}

/* ==== Section base ==== */
.section{
  padding:var(--section-py) 0;
  position:relative;
  z-index:1;
}

/* ==== About ==== */
.about__grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
}
.about__text p{
  font-size:16px;
  line-height:1.8;
  color:var(--text-muted);
  margin-bottom:16px;
}
.about__text strong{color:var(--avocado);font-weight:500}
.about__stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.stat{
  padding:24px 20px;
  background:var(--avocado-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  text-align:center;
  transition:all var(--t-base);
}
.stat:hover{
  border-color:var(--avocado);
  transform:translateY(-4px);
  background:rgba(168,224,95,.12);
}
.stat__value{
  font-size:clamp(28px,3.5vw,40px);
  font-weight:700;
  color:var(--avocado);
  letter-spacing:-.02em;
  line-height:1;
  margin-bottom:8px;
}
.stat__value span{font-size:.6em;opacity:.7}
.stat__label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-muted);
}

/* ==== Features ==== */
.features__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.feature-card{
  padding:32px 28px;
  background:linear-gradient(180deg,rgba(168,224,95,.04),rgba(168,224,95,.01));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:all var(--t-base);
  position:relative;
  overflow:hidden;
}
.feature-card::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--avocado),transparent);
  opacity:0;
  transition:opacity var(--t-base);
}
.feature-card:hover{
  transform:translateY(-6px);
  border-color:rgba(168,224,95,.4);
  background:linear-gradient(180deg,rgba(168,224,95,.08),rgba(168,224,95,.02));
}
.feature-card:hover::before{opacity:1}
.feature-card__icon{
  font-size:32px;
  margin-bottom:16px;
  display:inline-block;
}
.feature-card h3{
  font-size:20px;
  font-weight:600;
  margin-bottom:10px;
  letter-spacing:-.01em;
}
.feature-card p{
  font-size:15px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ==== Timeline ==== */
.timeline{
  max-width:760px;
  margin:0 auto;
  position:relative;
  padding-left:32px;
}
.timeline::before{
  content:'';
  position:absolute;
  left:11px;top:8px;bottom:8px;
  width:2px;
  background:linear-gradient(180deg,var(--avocado),var(--avocado-dark),transparent);
  opacity:.4;
}
.timeline__item{
  position:relative;
  padding:0 0 40px 32px;
}
.timeline__item:last-child{padding-bottom:0}
.timeline__dot{
  position:absolute;
  left:-26px;top:6px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--text-muted);
  transition:all var(--t-base);
}
.timeline__item.is-done .timeline__dot{
  background:var(--avocado-dark);
  border-color:var(--avocado);
}
.timeline__item.is-active .timeline__dot{
  background:var(--avocado);
  border-color:var(--avocado);
  box-shadow:0 0 0 4px var(--avocado-glow),0 0 20px var(--avocado);
  animation:pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 4px var(--avocado-glow),0 0 20px var(--avocado)}
  50%{box-shadow:0 0 0 8px rgba(168,224,95,.15),0 0 30px var(--avocado)}
}
.timeline__date{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--avocado);
  margin-bottom:6px;
  display:block;
}
.timeline__content h3{
  font-size:20px;
  font-weight:600;
  margin-bottom:6px;
}
.timeline__content p{
  font-size:15px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ==== Contact / Form ==== */
.section--contact{text-align:center}
.subscribe-form{
  max-width:520px;
  margin:0 auto 40px;
}
.subscribe-form__field{
  display:flex;
  gap:8px;
  padding:8px;
  background:var(--avocado-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:all var(--t-base);
}
.subscribe-form__field:focus-within{
  border-color:var(--avocado);
  box-shadow:0 0 0 4px var(--avocado-glow);
}
.subscribe-form input{
  flex:1;
  padding:14px 18px;
  background:transparent;
  color:var(--text);
  font-size:15px;
  min-width:0;
}
.subscribe-form input::placeholder{color:var(--text-muted);opacity:.6}
.subscribe-form__note{
  font-size:13px;
  color:var(--text-muted);
  margin-top:12px;
  min-height:20px;
  transition:color var(--t-base);
}
.subscribe-form__note.is-success{color:var(--avocado)}
.subscribe-form__note.is-error{color:#ff7b7b}

.contact-info{
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}
.contact-info__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--text-muted);
  transition:color var(--t-fast);
}
.contact-info__item:hover{color:var(--avocado)}

/* ==== Footer ==== */
.footer{
  padding:32px 0;
  border-top:1px solid var(--border);
  position:relative;
  z-index:1;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer__brand{
  font-size:18px;
  font-weight:700;
  letter-spacing:-.02em;
}
.footer__copy{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:1px;
  color:var(--text-muted);
}
.footer__copy a{
  color:var(--avocado);
  opacity:.8;
  transition:opacity var(--t-fast);
}
.footer__copy a:hover{opacity:1}