:root{
  --navy:#081b2f;
  --navy-2:#0d2744;
  --green:#13b981;
  --green-dark:#0b8f64;
  --white:#ffffff;
  --text:#152238;
  --muted:#607086;
  --bg:#f5f8fb;
  --line:#dfe7ef;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--white);
}
.container{width:min(1120px,92%);margin:0 auto}
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,var(--navy),var(--green));
  color:white;display:grid;place-items:center;font-weight:800;font-size:20px;
}
.brand-text{font-weight:800;font-size:23px;color:var(--navy)}
.brand-text span{color:var(--green)}
nav{display:flex;gap:24px}
nav a{color:var(--navy);text-decoration:none;font-weight:600;font-size:14px}
.hero{
  background:
    radial-gradient(circle at 85% 25%, rgba(19,185,129,.18), transparent 28%),
    linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
  color:white;padding:92px 0 84px;
}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:800;color:var(--green);margin:0 0 14px}
h1{font-size:clamp(42px,6vw,68px);line-height:1.02;margin:0 0 20px;letter-spacing:-.03em}
.sub{font-size:18px;line-height:1.7;color:#c6d2df;max-width:700px}
.search-box{
  margin-top:30px;display:flex;background:white;padding:8px;border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.search-box input{flex:1;border:0;outline:0;padding:16px;font-size:16px;border-radius:12px}
.search-box button,.price-row button{
  border:0;background:var(--green);color:white;font-weight:800;
  border-radius:12px;padding:0 22px;cursor:pointer;
}
.search-box button:hover,.price-row button:hover{background:var(--green-dark)}
.trust-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;color:#cfe3dc;font-size:14px}
.hero-card{
  min-height:330px;border-radius:28px;padding:34px;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;justify-content:center;
}
.pulse-line{
  height:90px;margin-bottom:24px;
  background:linear-gradient(90deg,transparent 0 12%,var(--green) 12% 18%,transparent 18% 25%,var(--green) 25% 34%,transparent 34% 46%,var(--green) 46% 58%,transparent 58% 70%,var(--green) 70% 82%,transparent 82%);
  clip-path:polygon(0 52%,12% 52%,16% 18%,22% 82%,29% 36%,36% 64%,44% 20%,53% 76%,61% 40%,69% 58%,77% 28%,84% 72%,90% 52%,100% 52%,100% 56%,0 56%);
  opacity:.95;
}
.hero-stat span,.hero-stat small{display:block;color:#bcd0dd}
.hero-stat strong{display:block;font-size:42px;margin:8px 0}
.section{padding:82px 0}
.muted{background:var(--bg)}
.section-head{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:34px}
.section-head h2{font-size:38px;margin:0;color:var(--navy)}
.section-head>p{max-width:460px;color:var(--muted)}
.product-card{
  border:1px solid var(--line);border-radius:24px;padding:28px;background:white;
  box-shadow:0 16px 40px rgba(8,27,47,.06);
}
.product-info{display:flex;gap:22px;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--line)}
.product-image{width:92px;height:92px;border-radius:20px;background:var(--bg);display:grid;place-items:center;font-size:46px}
.product-info h3{margin:8px 0 5px;font-size:26px}
.product-info p{margin:0;color:var(--muted)}
.pill{display:inline-block;background:#e8fbf4;color:var(--green-dark);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}
.price-list{padding-top:14px}
.price-row{display:grid;grid-template-columns:1fr auto 130px;gap:20px;align-items:center;padding:18px;border-radius:16px}
.price-row.best{background:#eefbf6}
.price-row div:first-child span{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.price{font-size:22px;font-weight:800;color:var(--navy)}
.price-row button{height:44px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature-grid article{background:white;border:1px solid var(--line);border-radius:20px;padding:26px}
.feature-grid h3{margin:16px 0 8px;color:var(--navy)}
.feature-grid p{color:var(--muted);line-height:1.6}
.icon{width:48px;height:48px;border-radius:14px;background:#e9fbf5;color:var(--green-dark);display:grid;place-items:center;font-size:22px;font-weight:900}
footer{background:var(--navy);color:white;padding:44px 0}
.footer-wrap{display:flex;justify-content:space-between;gap:20px;align-items:end}
.footer-brand .brand-text{color:white}
footer p{color:#b9c8d5}
footer small{color:#9fb0bf}
@media(max-width:800px){
  nav{display:none}
  .hero{padding:68px 0}
  .hero-grid{grid-template-columns:1fr}
  .hero-card{min-height:240px}
  .search-box{flex-direction:column}
  .search-box button{height:52px}
  .section-head{display:block}
  .feature-grid{grid-template-columns:1fr}
  .price-row{grid-template-columns:1fr auto}
  .price-row button{grid-column:1/-1}
  .footer-wrap{display:block}
}