:root{
  --white:#FFFFFF;
  --bg-soft:#F6F7F5;
  --bg-soft-2:#EFF2EF;
  --graphite:#181D1B;
  --graphite-2:#222926;
  --text:#1D2320;
  --text-muted:#5B645E;
  --text-on-dark:#EDEFEC;
  --text-on-dark-muted:#9CA6A0;
  --green:#2F8F5C;
  --green-deep:#1E6B44;
  --green-bright:#3FAE74;
  --green-soft:#E4F3EA;
  --border:#E3E6E1;
  --border-dark:#333B37;
  --shadow-sm: 0 2px 10px rgba(24,29,27,.05);
  --shadow-md: 0 12px 32px rgba(24,29,27,.09);
  --shadow-lg: 0 24px 60px rgba(24,29,27,.14);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --font-display:'Unbounded', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --container: 1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;}
p{margin:0;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--green); outline-offset:3px;}

.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-deep); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{content:""; width:16px; height:2px; background:var(--green); display:inline-block;}
section{padding:80px 0;}
@media (max-width:640px){ section{padding:56px 0;} }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:100px; font-weight:600; font-size:15px;
  border:1px solid transparent; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--green); color:#fff; box-shadow:0 8px 20px rgba(47,143,92,.28);}
.btn-primary:hover{background:var(--green-deep); transform:translateY(-2px); box-shadow:0 12px 26px rgba(47,143,92,.34);}
.btn-ghost{background:transparent; color:var(--graphite); border-color:var(--border-dark);}
.btn-ghost:hover{border-color:var(--graphite); transform:translateY(-2px);}
.btn-on-dark.btn-ghost{color:var(--text-on-dark); border-color:var(--border-dark);}
.btn-on-dark.btn-ghost:hover{border-color:var(--text-on-dark);}
.btn-sm{padding:11px 20px; font-size:13.5px;}
.btn-block{width:100%;}

/* Header */
header{position:sticky; top:0; z-index:600; background:rgba(255,255,255,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--border);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.logo{display:flex; align-items:center; gap:10px;}
.logo-mark{width:38px; height:38px; border-radius:10px; background:var(--graphite); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.logo-word{font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.01em; color:var(--graphite);}
.logo-word span{color:var(--green);}
.nav-links{display:flex; align-items:center; gap:22px; flex-wrap:nowrap;}
.nav-links a{font-size:14px; font-weight:500; color:var(--text); position:relative; padding:6px 0; white-space:nowrap; flex-shrink:0;}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-right{display:flex; align-items:center; gap:16px; flex-shrink:0;}
.nav-phone{font-family:var(--font-mono); font-weight:600; font-size:14px; color:var(--graphite); white-space:nowrap;}
header .container{max-width:1360px;}
.burger{display:none; width:40px; height:40px; border-radius:8px; border:1px solid var(--border); background:none; align-items:center; justify-content:center;}
.burger span, .burger span::before, .burger span::after{content:""; display:block; width:18px; height:2px; background:var(--graphite); position:relative; transition:.25s;}
.burger span::before{position:absolute; top:-6px;}
.burger span::after{position:absolute; top:6px;}
@media (max-width:1240px){
  .nav-links{position:fixed; inset:69px 0 0 0; background:var(--white); flex-direction:column; align-items:flex-start; padding:32px 24px; gap:22px; transform:translateX(100%); transition:transform .35s ease; overflow-y:auto;}
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:19px;}
  .nav-phone{display:none;}
  .burger{display:flex;}
}

/* Reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}
.stagger .reveal:nth-child(2){transition-delay:.08s;}
.stagger .reveal:nth-child(3){transition-delay:.16s;}
.stagger .reveal:nth-child(4){transition-delay:.24s;}
.stagger .reveal:nth-child(5){transition-delay:.32s;}

/* Breadcrumb */
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); padding:22px 0 0;}
.breadcrumb a:hover{color:var(--green-deep);}

/* Product hero */
.product-hero{padding:36px 0 70px;}
.product-hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.product-hero h1{font-size:clamp(30px,4vw,44px); line-height:1.1; color:var(--graphite);}
.product-hero .lead{margin-top:18px; font-size:17px; color:var(--text-muted); max-width:480px; line-height:1.6;}
.product-hero-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.product-stage{
  border-radius:var(--radius-lg); background:linear-gradient(155deg,#232B28 4%, #181D1B 100%);
  padding:40px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.product-stage::before{content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 25% 20%, rgba(63,174,116,.2), transparent 55%);}
.product-stage svg{position:relative; z-index:1; width:100%; height:auto; max-width:340px;}
@media (max-width:900px){ .product-hero-grid{grid-template-columns:1fr;} .product-stage{order:-1;} }

/* Spec table */
.spec-table{width:100%; border-collapse:collapse; margin-top:6px;}
.spec-table tr{border-bottom:1px solid var(--border);}
.spec-table td{padding:16px 4px; font-size:14.5px; vertical-align:top;}
.spec-table td:first-child{color:var(--text-muted); width:46%; padding-right:20px;}
.spec-table td:last-child{font-weight:600; font-family:var(--font-mono); font-size:13.5px;}

/* Feature grid (reused benefit-card style) */
.benefits-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.benefit-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px 24px; transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;}
.benefit-card:hover{box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:transparent;}
.benefit-icon{width:44px; height:44px; border-radius:12px; background:var(--green-soft); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.benefit-card h3{font-size:16.5px; font-family:var(--font-body); font-weight:700; margin-bottom:7px;}
.benefit-card p{font-size:14px; color:var(--text-muted); line-height:1.55;}
@media (max-width:820px){ .benefits-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .benefits-grid{grid-template-columns:1fr;} }

/* CTA band */
.cta-band{background:var(--graphite); border-radius:var(--radius-lg); padding:52px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.cta-band h2{color:#fff; font-size:clamp(22px,3vw,30px); max-width:480px;}
.cta-band p{color:var(--text-on-dark-muted); margin-top:10px; font-size:15px; max-width:480px;}

/* Related */
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.related-card{border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; transition:box-shadow .3s ease, transform .3s ease;}
.related-card:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
.related-card h3{font-size:16px; margin-bottom:8px;}
.related-card p{font-size:13.5px; color:var(--text-muted); margin-bottom:16px;}
@media (max-width:820px){ .related-grid{grid-template-columns:1fr;} }

/* Footer */
footer{background:var(--graphite); color:var(--text-on-dark-muted); padding:56px 0 30px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap; padding-bottom:38px; border-bottom:1px solid var(--border-dark);}
.footer-links{display:flex; gap:36px; flex-wrap:wrap;}
.footer-links a{font-size:14px; color:var(--text-on-dark-muted); transition:color .2s ease;}
.footer-links a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; flex-wrap:wrap; gap:12px; font-size:12.5px;}
.footer-bottom a{color:var(--text-on-dark-muted);}
.footer-bottom a:hover{color:#fff;}