.hyhero{background:linear-gradient(120deg,var(--hero-a),var(--hero-b));color:var(--hero-ink);padding-block:56px 64px;position:relative;overflow:hidden}
.hyhero::after{content:"";position:absolute;left:-140px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,196,61,.35),transparent 70%)}
.hyhero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.crumb{font-size:13.5px;color:#b9c5e0;margin-bottom:14px}.crumb a{color:#fff;text-decoration:none}.crumb a:hover{text-decoration:underline}
.hyhero .kicker{color:#ffc43d}.hyhero .kicker::before{background:#ffc43d}
.hyhero h1{font-size:clamp(32px,4.6vw,54px);font-weight:800;margin-top:12px}
.hyhero h1 span{color:#ffc43d}
.hyhero p{max-width:58ch;margin-top:16px;color:#d5def2;font-size:17.5px}
.hy-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hy-photo{position:relative}
.hy-photo img{width:100%;height:auto;max-width:440px;display:block;margin-left:auto;border-radius:26px;box-shadow:0 30px 60px rgba(0,0,0,.35);animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-10px)}}
.hb{position:absolute;background:#fff;color:#14203a;font-weight:800;font-size:14px;border-radius:14px;padding:10px 14px;box-shadow:0 12px 26px rgba(0,0,0,.25);display:inline-flex;align-items:center;gap:8px}
.hb i{width:9px;height:9px;border-radius:50%;background:#1fa855}
.hb1{left:0;top:18%}.hb2{right:-6px;bottom:12%}
@media(max-width:980px){.hy-photo img{margin:0 auto}.hb1{left:4px}.hb2{right:4px}}
.hy-art{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:26px;padding:18px}
.hy-art svg{width:100%;height:auto;display:block}
.flow-dot{animation:flow 2.4s linear infinite}
@keyframes flow{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,196,61,.14);color:#ffd77a;border:1px solid rgba(255,196,61,.35);border-radius:999px;padding:6px 14px;font-weight:800;font-size:13.5px}
.sec-head{max-width:760px;margin-bottom:30px}
.sec-head .lead{margin-top:12px}
.what{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.what ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.what li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.what li i{width:34px;height:34px;border-radius:10px;background:var(--tint);display:grid;place-items:center;font-style:normal}
.what li svg{width:18px;height:18px;fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.what li b{display:block}
.what li span{color:var(--muted);font-size:15px}
.diagram{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.diagram svg{width:100%;height:auto;display:block}
.ben{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.range{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:12px;transition:transform .3s,border-color .3s,box-shadow .3s;position:relative;overflow:hidden}
.rcard::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--red),#ffc43d)}
.rcard:hover{transform:translateY(-6px);border-color:var(--navy);box-shadow:var(--shadow)}
.rcard .cap{font-family:var(--f-display);font-weight:800;font-size:30px;color:var(--navy)}
.rcard .use{font-weight:800;color:var(--red);font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.rcard ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;color:var(--muted);font-size:15px}
.rcard li{display:flex;gap:8px}.rcard li::before{content:"";flex:0 0 7px;height:7px;margin-top:9px;border-radius:50%;background:var(--red)}
.rcard .btn{margin-top:auto;padding:12px 18px;font-size:14.5px}
.hyprod{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hp-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s}
.hp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--navy)}
.hp-pic{background:#fff;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hp-pic img{width:100%;height:100%;object-fit:contain;transition:transform .5s}
.hp-card:hover .hp-pic img{transform:scale(1.05)}
.hp-b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.hp-b .tag{align-self:flex-start;background:var(--tint);color:var(--red);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 12px}
.hp-b ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;color:var(--muted);font-size:15px}
.hp-b li{display:flex;gap:8px}.hp-b li::before{content:"";flex:0 0 7px;height:7px;margin-top:9px;border-radius:50%;background:var(--red)}
.hp-act{display:flex;gap:10px;margin-top:auto;padding-top:8px}.hp-act .btn{flex:1;padding:11px 14px;font-size:14px}
@media(max-width:980px){.hyprod{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.hyprod{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gitem{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 40%,var(--tint-b),var(--surface));border:1px solid var(--line)}
.gitem img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.gitem:hover img{transform:scale(1.06)}
.gitem .ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;color:var(--muted);font-weight:700;font-size:14px;text-align:center;padding:12px}
.gitem .ph svg{width:58%;max-width:190px;height:auto}
.gitem img+.ph{display:none}
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.app{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;text-align:center;transition:transform .3s,border-color .3s}
.app:hover{transform:translateY(-5px);border-color:var(--red)}
.app .ic{width:56px;height:56px;border-radius:16px;margin:0 auto 12px;display:grid;place-items:center;background:var(--tint)}
.app .ic svg{width:28px;height:28px;fill:none;stroke:var(--red);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.app p{color:var(--muted);font-size:14.5px;margin-top:6px}
.kit{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kit div{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:18px}
.kit b{display:block;font-family:var(--f-display);font-size:17px}
.kit span{color:var(--muted);font-size:14.5px}
.faq{display:grid;gap:12px;max-width:860px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:4px 20px}
.faq summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--red);font-size:22px;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding-bottom:16px}
.ctaband{background:linear-gradient(120deg,var(--red),#e8584a);color:#fff;border-radius:26px;padding:40px;display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.ctaband h2{color:#fff}
.ctaband p{color:#ffe3e5;margin-top:8px;max-width:56ch}
.ctaband .btn-white{background:#fff;color:var(--red)}
.ctaband .acts{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:980px){.hyhero .wrap,.what{grid-template-columns:1fr}.ben,.range{grid-template-columns:1fr 1fr}.apps,.kit{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ben,.range,.gallery{grid-template-columns:1fr}.ctaband{padding:28px}}
@media(max-width:420px){.apps,.kit{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.flow-dot,.hy-photo img{animation:none}}