:root {
  --ink:#10252c;
  --deep:#082b33;
  --deep-2:#0c4248;
  --green:#26a044;
  --leaf:#72c84b;
  --lime:#b7df55;
  --mist:#f1f7f4;
  --cloud:#e2eeea;
  --line:#cbdcd5;
  --muted:#526b6e;
  --white:#fff;
  --orange:#f47c20;
  --radius:20px;
  --wrap:min(1180px, calc(100% - 48px));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:var(--wrap);margin:0 auto}
.skip{position:absolute;left:-999px;top:auto}.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.7rem;border-radius:6px}

.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(203,220,213,.9);backdrop-filter:blur(12px)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.brand img{width:158px;height:54px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:1.15rem;font-size:.88rem;font-weight:760}
.nav-links a:hover{color:var(--green)}
.button{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:.7rem 1rem;border-radius:10px;background:var(--green);border:1px solid var(--green);color:#fff;font-weight:800;transition:.18s ease}
.button:hover{background:#198639;transform:translateY(-2px)}
.button.secondary{background:transparent;border-color:#b7ccc5;color:var(--deep)}
.button.secondary:hover{background:#e7f1ed}
.button.on-dark.secondary{border-color:rgba(255,255,255,.5);color:#fff}
.button.on-dark.secondary:hover{background:rgba(255,255,255,.12)}

.breadcrumbs{padding:1rem 0;color:#627a7c;font-size:.82rem;font-weight:700}
.breadcrumbs a{color:var(--green)}
.product-hero{position:relative;overflow:hidden;background:linear-gradient(122deg,var(--deep),#0d5154);color:#fff}
.product-hero::after{content:"";position:absolute;width:680px;height:680px;border:1px solid rgba(183,223,85,.24);border-radius:50%;right:-250px;bottom:-430px}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2.2rem,6vw,5rem);align-items:center;padding:clamp(4rem,8vw,7rem) 0}
.eyebrow{margin:0 0 .75rem;color:var(--green);font-size:.74rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.product-hero .eyebrow{color:var(--lime)}
h1{max-width:12ch;margin:0;font-size:clamp(2.7rem,6vw,5.5rem);line-height:.98;letter-spacing:-.06em}
.hero-copy>p:not(.eyebrow){max-width:42rem;margin:1.2rem 0 0;color:#d9ece8;font-size:1.08rem}
.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.7rem}
.hero-visual{margin:0;background:#f8fbf8;border:1px solid rgba(255,255,255,.35);border-radius:24px;padding:1rem;box-shadow:18px 20px 0 rgba(0,0,0,.18)}
.hero-visual img{width:100%;height:460px;object-fit:contain;border-radius:15px;background:#fff}
.hero-visual.wide img{height:auto;aspect-ratio:16/9;object-fit:cover}
.hero-visual figcaption{padding:.7rem .25rem 0;color:#456164;font-size:.77rem;font-weight:700}

.quick-specs{background:#edf6f1;border-bottom:1px solid var(--line)}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.quick-spec{padding:1.2rem;border-right:1px solid var(--line)}
.quick-spec:first-child{border-left:1px solid var(--line)}
.quick-spec b{display:block;color:var(--deep);font-size:1.18rem;letter-spacing:-.02em}
.quick-spec span{display:block;margin-top:.18rem;color:var(--muted);font-size:.78rem}

section.content{padding:clamp(4.5rem,8vw,7rem) 0}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end}
h2{margin:0;font-size:clamp(2rem,4vw,3.6rem);line-height:1.05;letter-spacing:-.05em}
.lead{margin:1rem 0 0;color:var(--muted);font-size:1.05rem;max-width:46rem}
.section-head .lead{margin:0}
.overview-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}
.prose p{color:var(--muted)}
.prose strong{color:var(--ink)}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feature{border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;background:#fff}
.feature span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#dcf0d7;color:var(--green);font-weight:900}
.feature h3{margin:.9rem 0 .35rem;font-size:1rem}
.feature p{margin:0;color:var(--muted);font-size:.9rem}

.tint{background:var(--mist)}
.dark{background:var(--deep);color:#fff}
.dark .eyebrow{color:var(--lime)}
.dark .lead{color:#d2e5e0}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-top:2.4rem}
.flow article{position:relative;border-top:3px solid var(--green);padding:1rem .2rem .2rem}
.flow article:not(:last-child)::after{content:"→";position:absolute;right:-.65rem;top:.65rem;color:#86a79f;font-weight:900}
.flow b{font-size:1.7rem;color:#aac5bd}
.flow h3{margin:.45rem 0;font-size:1rem}
.flow p{margin:0;color:var(--muted);font-size:.87rem}
.dark .flow p{color:#cee1dc}

.table-wrap{margin-top:2.2rem;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:720px;font-size:.9rem}
th,td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid #dce8e3;vertical-align:top}
th{background:#0b474a;color:#fff;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#f6faf7}
td:first-child{font-weight:820;color:var(--deep)}
.note{margin:1rem 0 0;color:var(--muted);font-size:.8rem}

.media-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;margin-top:2.4rem}
.media-grid.three{grid-template-columns:1.2fr .8fr .8fr}
.media-card{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.media-card img{width:100%;height:360px;object-fit:contain;background:#f7faf8}
.media-card.scene img{object-fit:cover}
.media-card figcaption{padding:.8rem 1rem;color:var(--muted);font-size:.8rem;font-weight:700}

.application-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.4rem}
.application{border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;background:#fff}
.application h3{margin:0 0 .45rem;font-size:1rem}
.application p{margin:0;color:var(--muted);font-size:.88rem}
.application .tag{display:inline-flex;margin-bottom:.8rem;border-radius:999px;background:#dff1db;padding:.25rem .55rem;color:#287340;font-size:.7rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}

.faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:3rem;align-items:start}
.faq-list{display:grid;gap:.65rem}
details{border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 1rem}
summary{cursor:pointer;padding:1rem 0;font-weight:820}
details p{margin:0 0 1rem;color:var(--muted);font-size:.9rem}

.cta{background:linear-gradient(125deg,#0a3036,#0e5558);color:#fff}
.cta-grid{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.cta .lead{color:#d4eae4}

footer{background:#061d22;color:#cadbd6;padding:2.6rem 0}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:2rem}
.footer-logo{width:160px;background:#fff;border-radius:8px;padding:.35rem;margin-bottom:.8rem}
.footer-grid h3{color:#fff;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .6rem}
.footer-grid p,.footer-grid a{display:block;margin:.3rem 0;font-size:.84rem}
.footer-grid a:hover{color:var(--lime)}
.legal{border-top:1px solid rgba(255,255,255,.15);margin-top:1.7rem;padding-top:1.1rem;color:#91aaa3;font-size:.74rem}

@media(max-width:900px){
  .nav-links a:not(.button){display:none}
  .hero-grid,.overview-grid,.section-head,.faq{grid-template-columns:1fr}
  .hero-visual{max-width:700px}
  .quick-grid{grid-template-columns:1fr 1fr}
  .quick-spec:nth-child(3){border-left:1px solid var(--line)}
  .flow{grid-template-columns:repeat(3,1fr)}
  .flow article::after{display:none}
  .application-grid{grid-template-columns:1fr 1fr}
  .media-grid,.media-grid.three{grid-template-columns:1fr 1fr}
  .media-grid .media-card:first-child{grid-column:1/-1}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
}

@media(max-width:560px){
  :root{--wrap:min(100% - 30px,1180px)}
  .brand img{width:142px}
  .nav-links .button{padding:.6rem .75rem;font-size:.8rem}
  h1{font-size:3rem}
  .hero-visual img{height:340px}
  .quick-grid,.feature-grid,.application-grid,.media-grid,.media-grid.three,.footer-grid,.cta-grid{grid-template-columns:1fr}
  .quick-spec,.quick-spec:nth-child(3){border-left:1px solid var(--line)}
  .media-grid .media-card:first-child,.footer-grid>div:first-child{grid-column:auto}
  .flow{grid-template-columns:1fr 1fr}
  .media-card img{height:300px}
}