:root{
  --bg:#f7fbf9;
  --surface:#ffffff;
  --surface-2:#eef7f3;
  --text:#18302a;
  --muted:#60736c;
  --line:#d9e7e1;
  --brand:#00ef67;
  --brand-strong:#00cf59;
  --brand-dark:#294f46;
  --brand-deep:#173b33;
  --accent:#f7e8e7;
  --shadow:0 18px 60px rgba(41,79,70,.12);
  --radius:22px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
a{color:inherit}
img{max-width:100%}
.container{width:min(var(--max), calc(100% - 32px)); margin-inline:auto}
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,250,247,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(220,230,222,.8);
}
.nav{
  min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:900; letter-spacing:-.03em}
.brand-mark{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--brand-dark);
  color:#fff; box-shadow:0 8px 24px rgba(41,79,70,.22);
  font-size:20px;
}
.brand-name{font-size:1.24rem}
.nav-links{display:flex; align-items:center; gap:22px}
.nav-links a{font-size:.95rem; color:var(--muted); text-decoration:none; font-weight:650}
.nav-links a:hover{color:var(--brand)}
.menu-btn{
  display:none; border:1px solid var(--line); background:#fff; border-radius:12px;
  width:44px; height:44px; font-size:22px; cursor:pointer;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 20px; border-radius:14px; text-decoration:none;
  font-weight:800; border:1px solid transparent; transition:.2s ease;
}
.btn-primary{background:var(--brand-dark); color:#fff; box-shadow:0 10px 28px rgba(41,79,70,.22)}
.btn-primary:hover{background:var(--brand-deep); transform:translateY(-1px)}
.btn-secondary{background:#fff; color:var(--brand-dark); border-color:var(--line)}
.btn-secondary:hover{border-color:#9dc9b8; transform:translateY(-1px)}
.hero{
  padding:84px 0 60px;
  background:
    radial-gradient(circle at 85% 20%, rgba(0,239,103,.12), transparent 24%),
    radial-gradient(circle at 12% 30%, rgba(41,79,70,.10), transparent 34%);
}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:52px; align-items:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border-radius:999px; background:#e9fff2; color:var(--brand-dark); font-weight:800; font-size:.86rem;
  border:1px solid #c9f2d9;
}
.hero h1{font-size:clamp(2.6rem, 6vw, 5.2rem); line-height:.98; letter-spacing:-.055em; margin:20px 0 22px}
.hero p{font-size:1.13rem; color:var(--muted); max-width:690px; margin:0 0 28px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px}
.hero-card{
  background:linear-gradient(145deg,#294f46,#173b33); color:#fff;
  padding:30px; border-radius:28px; box-shadow:var(--shadow); min-height:430px;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative;
}
.hero-card:before{
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  background:rgba(0,239,103,.16); top:-85px; right:-65px;
}
.hero-card .mini{color:#d7e5db; font-size:.95rem}
.hero-card h2{font-size:2rem; line-height:1.1; margin:10px 0 16px; letter-spacing:-.04em}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px}
.stat{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10);
  border-radius:18px; padding:18px;
}
.stat strong{display:block; font-size:1.03rem; margin-bottom:5px}
.stat span{color:#d7e5db; font-size:.88rem}
.section{padding:78px 0}
.section-alt{background:var(--surface)}
.section-title{max-width:760px; margin-bottom:34px}
.section-title h2{font-size:clamp(2rem,4vw,3.4rem); line-height:1.06; letter-spacing:-.045em; margin:0 0 14px}
.section-title p{margin:0; color:var(--muted); font-size:1.05rem}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:0 8px 30px rgba(41,79,70,.05);
}
.section-alt .card{background:var(--bg)}
.icon{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:#e9fff2; color:var(--brand-dark); font-weight:900; margin-bottom:18px;
}
.card h3{font-size:1.25rem; margin:0 0 8px}
.card p{margin:0; color:var(--muted)}
.product-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.product{
  border:1px solid var(--line); background:#fff; border-radius:26px; padding:30px;
  position:relative; overflow:hidden;
}
.product:after{
  content:""; width:160px; height:160px; border-radius:50%; position:absolute; right:-70px; bottom:-70px;
  background:rgba(0,239,103,.08);
}
.product .tag{font-size:.82rem; font-weight:850; color:var(--brand-dark); text-transform:uppercase; letter-spacing:.08em}
.product h3{font-size:2rem; letter-spacing:-.04em; line-height:1.05; margin:8px 0 12px}
.product p{color:var(--muted); margin:0 0 18px}
.checks{padding:0; margin:0; list-style:none}
.checks li{padding:7px 0 7px 28px; position:relative; color:#314037}
.checks li:before{content:"✓"; position:absolute; left:0; color:var(--brand-dark); font-weight:900}
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start}
.about-panel{
  background:var(--brand-dark); color:#fff; border-radius:28px; padding:34px; min-height:330px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.about-panel span{color:#d3e4d8}
.about-copy h2{font-size:clamp(2rem,4vw,3.2rem); line-height:1.06; letter-spacing:-.045em; margin:0 0 18px}
.about-copy p{color:var(--muted); font-size:1.05rem}
.contact-box{
  background:linear-gradient(135deg,#eafff2,#f7fbf9); border:1px solid var(--line);
  border-radius:30px; padding:38px; display:flex; align-items:center; justify-content:space-between; gap:30px;
}
.contact-box h2{font-size:clamp(2rem,4vw,3rem); line-height:1.05; margin:0 0 12px; letter-spacing:-.04em}
.contact-box p{margin:0; color:var(--muted)}
.footer{background:var(--brand-deep); color:#e9f1eb; padding:46px 0 28px}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:34px}
.footer h4{margin:0 0 12px}
.footer p,.footer a{color:#bed0c3}
.footer a{text-decoration:none}
.footer a:hover{color:#fff}
.footer-links{display:grid; gap:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.11); margin-top:30px; padding-top:20px; color:#9fb3a4; font-size:.9rem}
.page-hero{padding:58px 0 34px}
.page-hero h1{font-size:clamp(2.3rem,5vw,4.2rem); letter-spacing:-.05em; line-height:1; margin:0 0 12px}
.page-hero p{color:var(--muted); max-width:760px; font-size:1.05rem}
.legal{padding:20px 0 80px}
.legal-card{background:#fff; border:1px solid var(--line); border-radius:24px; padding:34px; max-width:900px}
.legal-card h2{margin-top:30px; letter-spacing:-.025em}
.legal-card h2:first-child{margin-top:0}
.legal-card p,.legal-card li{color:#465249}
.legal-card a{color:var(--brand-dark); font-weight:750}
.note{background:#f3f7f4; border-left:4px solid var(--brand); padding:16px 18px; border-radius:10px}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:20px 0 80px}
.contact-card{background:#fff; border:1px solid var(--line); border-radius:24px; padding:30px}
.contact-card h2{margin-top:0}
.contact-item{padding:16px 0; border-bottom:1px solid var(--line)}
.contact-item:last-child{border-bottom:0}
.contact-item small{display:block; color:var(--muted); margin-bottom:4px}
.floating-wa{
  position:fixed; right:18px; bottom:18px; z-index:40;
  background:var(--brand-dark); color:#fff; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; text-decoration:none; box-shadow:0 12px 35px rgba(41,79,70,.30);
  font-size:24px;
}
@media(max-width:900px){
  .hero-grid,.about-grid,.footer-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .product-grid,.contact-grid{grid-template-columns:1fr}
  .hero-card{min-height:350px}
  .nav-links{
    display:none; position:absolute; top:74px; left:0; right:0; background:#fff;
    padding:18px 16px 24px; border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
  }
  .nav-links.open{display:flex}
  .menu-btn{display:block}
  .contact-box{flex-direction:column; align-items:flex-start}
}
@media(max-width:560px){
  .hero{padding-top:52px}
  .hero h1{font-size:2.85rem}
  .section{padding:58px 0}
  .legal-card,.contact-card{padding:24px}
  .stat-grid{grid-template-columns:1fr}
}


.site-logo{
  display:block;
  width:190px;
  max-width:42vw;
  height:auto;
}
.footer .site-logo{
  width:220px;
  max-width:100%;
}
.brand{
  min-height:44px;
}
.brand-mark,.brand-name{
  display:none;
}
.logo-showcase{
  width:min(520px,100%);
  margin-bottom:22px;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.12));
}
.hero-card .logo-showcase{
  width:min(430px,100%);
}
@media(max-width:560px){
  .site-logo{width:155px}
}