
:root{
  --bg:#eef8ef;
  --panel:#ffffff;
  --panel-2:#f4fbf4;
  --soft:#e3f3e4;
  --text:#17331f;
  --muted:#5f7b66;
  --line:rgba(28,84,45,.12);
  --brand:#3fa66b;
  --brand-2:#79c98e;
  --accent:#1f8a5b;
  --gold:#d7b85c;
  --primary:#3fa66b;
  --shadow:0 18px 45px rgba(31,85,44,.10);
  --radius:22px;
  --radius-sm:14px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(121,201,142,.22), transparent 30%),
    radial-gradient(circle at top right, rgba(63,166,107,.12), transparent 22%),
    linear-gradient(180deg,#f5fcf5 0%, #eef8ef 45%, #e5f3e6 100%);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 2rem)); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(18px);
  background:rgba(242,251,242,.9);
  border-bottom:1px solid var(--line);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:80px;
}
.brand{display:flex; align-items:center; gap:.95rem}
.brand-mark{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.brand-mark:before,.brand-mark:after{
  content:""; position:absolute; inset:auto;
  border-radius:999px;
}
.brand-mark:before{width:70px;height:70px; background:rgba(255,255,255,.18); top:-28px; right:-18px}
.brand-mark:after{width:24px;height:24px; background:rgba(255,255,255,.25); left:6px; bottom:6px}
.brand-text h1,.brand-text strong{font-size:1rem;margin:0;display:block;letter-spacing:.02em}
.brand-text span{font-size:.78rem;color:var(--muted)}
.menu{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center}
.menu a{
  padding:.7rem .95rem; border-radius:999px; color:var(--muted); font-weight:600; font-size:.94rem;
}
.menu a:hover,.menu a.active{color:var(--text)fff; background:linear-gradient(135deg, var(--brand), var(--brand-2))}
.menu-toggle{display:none}

.hero{
  position:relative;
  min-height:540px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero .overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(19,51,31,.52), rgba(19,51,31,.18)),
    linear-gradient(90deg, rgba(23,51,31,.68) 0%, rgba(23,51,31,.34) 48%, rgba(23,51,31,.12) 100%);
}
.slider{
  position:absolute; inset:0;
}
.slide{
  position:absolute; inset:0; opacity:0; transition:opacity 900ms ease;
  background-size:cover; background-position:center center;
  transform:scale(1.02);
}
.slide.active{opacity:1}
.hero-content{
  position:relative; z-index:2; padding:6rem 0 4.5rem;
  min-height:540px; display:grid; align-items:end;
}
.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem .85rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  font-size:.85rem; color:#f6fff7;
}
.kicker .dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--gold),#fff2bb)}
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:end;
}
.hero h2{
  font-size:clamp(2.2rem, 5vw, 4.45rem); line-height:1.05; letter-spacing:-.03em; margin:.8rem 0 1rem;
  max-width:12ch;
}
.hero p.lead{font-size:1.08rem; max-width:62ch; color:#d2ddf0}
.hero-actions{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.6rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 1.1rem; border-radius:999px; font-weight:700;
  border:1px solid transparent;
}
.btn-primary{background:linear-gradient(135deg,var(--brand), var(--brand-2)); color:var(--text)fff}
.btn-secondary{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14)}
.hero-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,250,242,.96));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:28px;
  padding:1.25rem;
}
.hero-panel h3{margin:.25rem 0 .8rem; font-size:1rem}
.metric-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem;
}
.metric{
  padding:1rem; border-radius:18px; background:rgba(63,166,107,.06); border:1px solid rgba(28,84,45,.10)
}
.metric strong{display:block;font-size:1.35rem}
.metric span{display:block;color:var(--muted);font-size:.88rem}
.slider-dots{display:flex; gap:.55rem; margin-top:1rem}
.slider-dots button{
  width:10px; height:10px; border-radius:999px; border:0; background:rgba(255,255,255,.35); cursor:pointer
}
.slider-dots button.active{width:30px; background:linear-gradient(90deg,var(--brand),var(--brand-2))}
section{padding:4.8rem 0}
.section-head{display:flex; justify-content:space-between; gap:1rem; align-items:end; margin-bottom:1.4rem}
.section-head h3{font-size:clamp(1.6rem,3vw,2.45rem); line-height:1.1; margin:0; letter-spacing:-.02em}
.section-head p{margin:.4rem 0 0; color:var(--muted); max-width:60ch}
.grid{display:grid; gap:1.15rem}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,251,244,.98));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.3rem;
  box-shadow:var(--shadow);
}
.card h4{margin:.2rem 0 .65rem; font-size:1.1rem}
.card p{margin:0 0 .85rem; color:var(--muted)}
.card ul{padding-left:1rem; margin:.2rem 0 0}
.card li{margin:.35rem 0; color:#274331}
.tag{
  display:inline-flex; padding:.3rem .65rem; border-radius:999px;
  background:rgba(63,166,107,.08); color:#215230; font-size:.8rem; margin-bottom:.7rem
}
.split{
  display:grid; grid-template-columns:1.04fr .96fr; gap:1.4rem; align-items:start
}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,250,243,.98));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.35rem;
}
.panel h4{margin-top:0}
.panel p,.panel li{color:var(--muted)}
.timeline{display:grid; gap:.9rem}
.timeline .item{
  display:grid; grid-template-columns:44px 1fr; gap:.9rem; align-items:start
}
.timeline .num{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  color:var(--text)fff; font-weight:800
}
.cta{
  background:
    linear-gradient(135deg, rgba(121,201,142,.18), rgba(63,166,107,.12)),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,248,240,.98));
  border:1px solid var(--line);
  border-radius:30px;
  padding:2rem;
  box-shadow:var(--shadow);
}
.cta-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1.2rem;align-items:center}
.list-clean{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.list-clean li{
  padding:.9rem 1rem; border-radius:16px; background:rgba(63,166,107,.06); border:1px solid rgba(28,84,45,.10)
}
.kpi-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem
}
.kpi-strip .mini{
  padding:1rem;border:1px solid var(--line);border-radius:18px;background:rgba(63,166,107,.05)
}
.kpi-strip strong{display:block;font-size:1.1rem}
.table-wrap{overflow:auto}
table{
  width:100%; border-collapse:collapse; border-spacing:0; min-width:720px;
  border:1px solid var(--line); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.85)
}
th,td{padding:1rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{background:rgba(63,166,107,.08); color:#17331f}
td{color:#284333}
.quote{
  padding:1.5rem; border-left:4px solid var(--brand); background:rgba(63,166,107,.05); border-radius:0 18px 18px 0
}
footer{
  border-top:1px solid var(--line);
  background:rgba(228,244,229,.88);
  padding:3rem 0 1.4rem
}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr .9fr;gap:1rem}
.footer-grid h5{margin:0 0 .75rem;font-size:1rem}
.footer-grid p,.footer-grid li,.footer-grid a{color:var(--muted)}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.footnote{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.35rem}
input,select,textarea{
  width:100%; border:1px solid rgba(28,84,45,.14); background:rgba(255,255,255,.92); color:var(--text);
  border-radius:14px; padding:.9rem 1rem; font:inherit
}
textarea{min-height:150px; resize:vertical}
input::placeholder,textarea::placeholder{color:#a9b8cf}
.breadcrumb{margin:1rem 0 0;color:#c9d6ea}
.breadcrumb a{color:#c9d6ea}
.callout{
  padding:1rem 1.1rem; border-radius:18px;
  background:linear-gradient(135deg, rgba(63,166,107,.12), rgba(121,201,142,.10));
  border:1px solid rgba(255,255,255,.09)
}
.notice{
  font-size:.92rem; color:var(--muted); margin-top:.75rem
}
@media (max-width: 980px){
  .hero-grid,.split,.cta-grid,.footer-grid,.grid-4,.grid-3,.grid-2,.form-grid{grid-template-columns:1fr}
  .kpi-strip{grid-template-columns:repeat(2, minmax(0,1fr))}
  .menu{
    display:none; position:absolute; top:80px; left:1rem; right:1rem;
    padding:1rem; background:rgba(250,255,250,.98); border:1px solid var(--line); border-radius:20px;
  }
  .menu.show{display:grid}
  .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.65); color:var(--text)
  }
}


.footer-grid-5{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}
.team-grid .team-card{position:relative;overflow:hidden}
.team-card .avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--accent));color:var(--text);margin-bottom:1rem}
.team-card.featured{border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 50px rgba(0,0,0,.18)}
.muted{color:var(--muted)}
.logo-wall li{padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-weight:600;font-size:.95rem}
.field input,.field select,.field textarea{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:.95rem 1rem;color:var(--text);font:inherit}
.field input::placeholder,.field textarea::placeholder{color:rgba(232,240,255,.5)}
.field-full{grid-column:1/-1}
.case-card p{margin:.6rem 0}
.download-card a{font-weight:700}
@media (max-width: 980px){
  .footer-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .footer-grid-5{grid-template-columns:1fr}
}


.hero-panel h3,.metric strong,.section-head h3,.card h4,.panel h4,.footer-grid h5{color:var(--text)}
.hero p.lead,.metric span,.panel p,.panel li,.footer-grid p,.footer-grid li,.footer-grid a,.footnote,.notice{color:var(--muted)}
.hero-panel,.card,.panel,.cta,table,.list-clean li,.kpi-strip .mini,.metric,.quote{backdrop-filter: blur(6px)}
