:root { --ink:#142e36; --muted:#5b6d71; --lime:#d5f36a; --paper:#f5f8f3; --line:#d8e1d8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:auto; object-fit:contain; }
header { max-width:1440px; margin:auto; padding:22px 6%; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
header>b { font-size:34px; letter-spacing:-2px; }
nav { display:flex; gap:30px; align-items:center; font-size:14px; }
.btn { display:inline-block; background:var(--ink); color:#fff; padding:17px 24px; border-radius:6px; font-weight:700; }
.btn.small { padding:12px 18px; }
.hero { text-align:center; padding:78px 5% 35px; background:radial-gradient(ellipse at 50% 80%,#dfebcf,transparent 65%); }
.kicker { font-size:11px; font-weight:800; letter-spacing:2px; margin:0 0 22px; }
.hero h1 { font-size:clamp(46px,6vw,86px); line-height:1.04; letter-spacing:-4px; margin:0; }
.hero em { font-style:normal; color:#687f58; }
.hero>p:not(.kicker) { max-width:720px; margin:27px auto 32px; font-size:18px; line-height:1.65; color:var(--muted); }
.hero>.shot-clip { max-width:1000px; margin:55px auto 0; }
.facts { max-width:1280px; margin:auto; padding:90px 6%; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.facts article { border-top:2px solid var(--ink); padding-top:24px; }
.facts i { font:12px monospace; color:#72865f; }
.facts h2 { font-size:23px; margin:22px 0 12px; }
.facts p,.title p { color:var(--muted); line-height:1.7; }
.device { background:var(--ink); color:#f6f8f3; padding:95px max(5%,calc((100vw - 1280px)/2)); display:grid; gap:60px; }
.title { max-width:740px; }
.title h2,.cta h2 { font-size:clamp(36px,4.5vw,58px); line-height:1.08; letter-spacing:-2px; margin:0; }
.device .title p { color:#c5d0d0; }
.device figure { margin:0; }
.device figure>img { max-width:1220px; margin:auto; }
.device figure:not(:first-of-type) { width:min(850px,100%); margin-left:auto; margin-right:auto; }
.device figcaption,.list figcaption { display:grid; gap:7px; margin-bottom:15px; }
.device figcaption b,.list figcaption b { font-size:21px; }
.device figcaption span { color:#c5d0d0; font-size:14px; }
.screens { max-width:1280px; margin:auto; padding:100px 6%; }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin:40px 0 60px; }
.filters button { padding:10px 17px; border:1px solid #bdcbbb; background:transparent; border-radius:30px; color:var(--ink); font:600 12px Arial; cursor:pointer; }
.filters button.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.list { display:grid; gap:85px; }
.list figure { margin:0; }
.list figure.hidden { display:none; }
.list img { box-shadow:none; }
.list .shot-clip { max-width:960px; margin:0 auto; }
.list figcaption span { font-size:14px; color:var(--muted); }
.shot-clip { aspect-ratio:4/3; overflow:hidden; background:transparent; }
.shot-clip img { width:100%; max-width:100%; height:100%; object-fit:contain; }
.reveal { opacity:0; transform:translateY(34px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity:1; transform:none; }
.facts article { transition:transform .3s ease,border-color .3s ease; }
.facts article:hover { transform:translateY(-7px); border-color:#76924f; }
.device figure,.list figure { transition:transform .35s ease; }
.device figure:hover,.list figure:hover { transform:translateY(-5px); }
.btn { transition:transform .22s ease,background .22s ease,box-shadow .22s ease; }
.btn:hover { transform:translateY(-3px); background:#24515a; box-shadow:0 10px 25px #142e3630; }
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto} .reveal,.facts article,.device figure,.list figure,.btn{transition:none!important;transform:none!important;opacity:1!important} }
.cta { text-align:center; background:var(--lime); padding:95px 6%; }
.cta p:not(.kicker) { color:#425b36; margin:25px 0; }
.cta .btn { margin-top:8px; }
footer { display:flex; justify-content:space-between; gap:20px; padding:30px 6%; border-top:1px solid var(--line); font-size:13px; }
@media(max-width:800px) { nav a:not(.btn){display:none} .facts{grid-template-columns:1fr} .hero h1{letter-spacing:-2px} }
@media(max-width:520px) { header{padding:17px 5%} header>b{font-size:28px} .hero{padding-top:55px} .hero>p:not(.kicker){font-size:16px} .facts,.screens{padding:65px 5%} .device{padding:65px 5%} footer{flex-direction:column} }