*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --green:#00C853;
  --green-dark:#00a344;
  --dark:#0D1117;
  --dark-light:#161B22;
  --dark-card:#1C2128;
  --gray:#8B949E;
  --gray-light:#C9D1D9;
  --white:#FFFFFF;
  --radius:8px;
  --max-w:1140px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);background:var(--dark);color:var(--gray-light);line-height:1.6}
a{color:var(--green);text-decoration:none;transition:color .2s}
a:hover{color:var(--green-dark)}
img{max-width:100%;display:block}
ul{list-style:none}

.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 24px}

/* ===== HEADER ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(13,17,23,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid #21262d;
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.logo{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:700;color:var(--white)}
.logo svg{flex-shrink:0}
.nav-list{display:flex;gap:28px}
.nav-list a{color:var(--gray-light);font-size:.9375rem;font-weight:500;transition:color .2s}
.nav-list a:hover,.nav-list a.active{color:var(--green)}

.burger{display:none;background:none;border:none;cursor:pointer;padding:4px}
.burger span{display:block;width:24px;height:2px;background:var(--gray-light);margin:5px 0;border-radius:2px;transition:transform .3s,opacity .3s}

/* ===== HERO ===== */
.hero{
  padding:100px 0 80px;
  text-align:center;
  background:linear-gradient(180deg,rgba(0,200,83,.06) 0%,transparent 70%);
}
.hero h1{font-size:2.75rem;font-weight:800;color:var(--white);margin-bottom:16px;line-height:1.15}
.hero h1 span{color:var(--green)}
.hero p{font-size:1.2rem;max-width:640px;margin:0 auto 36px;color:var(--gray)}
.hero-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 36px;border-radius:var(--radius);
  background:var(--green);color:var(--dark);
  font-weight:700;font-size:1rem;
  transition:background .2s;
}
.hero-cta:hover{background:var(--green-dark);color:var(--dark)}

/* ===== SECTIONS ===== */
section{padding:80px 0}
section:nth-child(even){background:var(--dark-light)}
.section-title{text-align:center;font-size:2rem;font-weight:700;color:var(--white);margin-bottom:12px}
.section-sub{text-align:center;color:var(--gray);max-width:640px;margin:0 auto 48px;font-size:1.05rem}

/* ===== FEATURES ===== */
.features-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.feature-card{
  background:var(--dark-card);
  border:1px solid #21262d;
  border-radius:var(--radius);
  padding:32px 28px;
  transition:border-color .25s,transform .25s;
}
.feature-card:hover{border-color:var(--green);transform:translateY(-4px)}
.feature-icon{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,200,83,.1);border-radius:var(--radius);
  margin-bottom:18px;color:var(--green);
}
.feature-card h3{color:var(--white);font-size:1.125rem;margin-bottom:8px}
.feature-card p{font-size:.9375rem;color:var(--gray)}

/* ===== HOW IT WORKS ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:step}
.step{text-align:center;position:relative}
.step::before{
  counter-increment:step;content:counter(step);
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;margin:0 auto 20px;
  border-radius:50%;border:2px solid var(--green);
  font-size:1.5rem;font-weight:700;color:var(--green);
}
.step h3{color:var(--white);margin-bottom:8px}
.step p{color:var(--gray);font-size:.9375rem}

/* ===== STATS ===== */
.stats-row{display:flex;justify-content:center;gap:64px;flex-wrap:wrap;text-align:center}
.stat-item strong{display:block;font-size:2.5rem;color:var(--green);line-height:1.1}
.stat-item span{color:var(--gray);font-size:.9375rem}

/* ===== COMPARISON TABLE ===== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:600px}
thead{background:var(--dark-card)}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid #21262d;font-size:.9375rem}
th{color:var(--white);font-weight:600}
td{color:var(--gray-light)}
tbody tr:hover{background:rgba(0,200,83,.04)}
.highlight-col{color:var(--green);font-weight:600}

/* ===== FAQ ===== */
.faq-list{max-width:780px;margin:0 auto}
.faq-item{border-bottom:1px solid #21262d}
.faq-question{
  width:100%;background:none;border:none;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 0;cursor:pointer;
  font-size:1.0625rem;font-weight:600;color:var(--white);
  font-family:var(--font);text-align:left;
}
.faq-question::after{
  content:"+";font-size:1.5rem;color:var(--green);
  transition:transform .3s;flex-shrink:0;margin-left:16px;
}
.faq-item.open .faq-question::after{content:"−"}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease,padding .35s ease;
}
.faq-answer-inner{padding:0 0 22px;color:var(--gray);font-size:.9375rem;line-height:1.7}

/* ===== ABOUT ===== */
.about-block{max-width:780px;margin:0 auto}
.about-block h2{color:var(--white);font-size:1.5rem;margin:40px 0 12px}
.about-block h2:first-child{margin-top:0}
.about-block p{margin-bottom:16px;color:var(--gray-light);line-height:1.75}
.about-block ul{margin:0 0 16px 20px;list-style:disc}
.about-block ul li{margin-bottom:6px;color:var(--gray-light)}

.timeline{position:relative;padding-left:32px;margin:24px 0 32px}
.timeline::before{
  content:"";position:absolute;left:8px;top:0;bottom:0;
  width:2px;background:#21262d;
}
.timeline-item{position:relative;margin-bottom:28px}
.timeline-item::before{
  content:"";position:absolute;left:-28px;top:6px;
  width:12px;height:12px;border-radius:50%;
  background:var(--green);border:2px solid var(--dark);
}
.timeline-item h3{color:var(--white);font-size:1rem;margin-bottom:4px}
.timeline-item p{color:var(--gray);font-size:.9375rem}

/* ===== PAGE HERO (inner pages) ===== */
.page-hero{
  padding:80px 0 48px;
  text-align:center;
  background:linear-gradient(180deg,rgba(0,200,83,.06) 0%,transparent 70%);
}
.page-hero h1{font-size:2.25rem;font-weight:800;color:var(--white);margin-bottom:12px}
.page-hero p{color:var(--gray);max-width:560px;margin:0 auto;font-size:1.1rem}

/* ===== FOOTER ===== */
.site-footer{
  background:var(--dark-light);
  border-top:1px solid #21262d;
  padding:48px 0 32px;
}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px}
.footer-col h4{color:var(--white);margin-bottom:14px;font-size:.9375rem}
.footer-col ul li{margin-bottom:8px}
.footer-col ul a{color:var(--gray);font-size:.875rem}
.footer-col ul a:hover{color:var(--green)}
.footer-bottom{
  margin-top:40px;padding-top:24px;border-top:1px solid #21262d;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  color:var(--gray);font-size:.8125rem;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .features-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .stats-row{gap:40px}
}

@media(max-width:640px){
  .hero{padding:64px 0 48px}
  .hero h1{font-size:1.85rem}
  section{padding:56px 0}
  .section-title{font-size:1.5rem}
  .features-grid,.steps{grid-template-columns:1fr}
  .stats-row{gap:32px}

  .nav-list{
    position:fixed;top:64px;left:0;right:0;bottom:0;
    background:rgba(13,17,23,.98);
    flex-direction:column;align-items:center;justify-content:center;
    gap:32px;
    transform:translateX(100%);transition:transform .3s;
  }
  .nav-list.open{transform:translateX(0)}
  .nav-list a{font-size:1.25rem}
  .burger{display:block}

  .footer-grid{flex-direction:column;gap:28px}
  .footer-bottom{flex-direction:column;text-align:center}
}