@import url("tokens.css");
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--pcb-black);background:#fff;line-height:1.6;font-size:17px;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:800}
h2{font-size:clamp(30px,4vw,48px)}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--hpc-green);margin-bottom:14px}
.lead{color:var(--ink-2);max-width:56ch;margin-top:16px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--hpc-green);color:#fff;font:800 16px var(--font);padding:15px 26px;border:0;border-radius:12px;text-decoration:none;cursor:pointer;box-shadow:0 10px 30px rgba(18,156,84,.3);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(18,156,84,.4)}
.btn.ghost{background:transparent;color:var(--pcb-black);box-shadow:inset 0 0 0 2px var(--pcb-black)}
:focus-visible{outline:3px solid var(--hpc-green-bright);outline-offset:3px}
/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-weight:800;display:flex;gap:10px;align-items:center;text-decoration:none}
.brand img{height:36px;width:auto;display:block}.brand span{padding-left:12px;border-left:1px solid var(--line);color:var(--ink-2);font-weight:600}
.nav ul{display:flex;gap:28px;list-style:none;font-weight:600;font-size:15px}
.nav ul a{text-decoration:none;color:var(--ink-2)}.nav ul a:hover{color:var(--pcb-black)}
.nav .btn{padding:10px 20px;font-size:15px}
/* hero */
.hero{background:radial-gradient(1000px 600px at 78% 40%,#fff 0,var(--glass) 70%);overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:20px;min-height:calc(100vh - 68px);max-height:860px;padding:48px 0}
.hero h1{font-size:clamp(44px,5.6vw,80px)}
.hero h1 span{display:block;color:var(--hpc-green)}
.hero .cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero .pills{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap;font-weight:600;font-size:14px;color:var(--ink-2)}
.hero .pills span{border:1px solid var(--line);background:#fff;padding:6px 14px;border-radius:10px}
.spin{position:relative;aspect-ratio:1;width:100%;cursor:grab;touch-action:pan-y;user-select:none}
.spin:active{cursor:grabbing}
.spin img{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;opacity:0;transition:opacity .6s;filter:drop-shadow(0 40px 40px rgba(11,15,13,.18));pointer-events:none}
.spin img.on{opacity:1}
.spin::before{content:"";position:absolute;left:-8%;right:-30%;top:56%;height:2px;background:var(--hpc-green-bright);box-shadow:var(--glow);opacity:.7}
.dots{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:flex;gap:8px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:#b8c2bd;cursor:pointer;padding:0}
.dots button[aria-current=true]{background:var(--hpc-green);width:26px;border-radius:6px}
/* pain */
.pain{background:var(--pcb-black);color:#fff;padding:110px 0;position:relative;overflow:hidden}
.pain::before{content:"";position:absolute;inset:0;background:url(../img/bg-dark-circuit.webp) center/cover;opacity:.35}
.pain .wrap{position:relative}
.pain .eyebrow{color:var(--hpc-green-bright)}
.pain-list{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px;margin-top:52px}
.pain-item{border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);padding:32px;background:rgba(255,255,255,.04);backdrop-filter:blur(4px)}
.pain-item:first-child{padding:44px 36px}
.pain-item h3{font-size:22px;margin-bottom:12px}
.pain-item:first-child h3{font-size:30px}
.pain-item p{color:#b8c6be}
.pain-item .mark{display:block;width:36px;height:4px;background:var(--signal-red);border-radius:2px;margin-bottom:20px}
/* how */
.how{padding:120px 0;background:var(--glass)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:60px;position:relative}
.steps::before{content:"";position:absolute;left:8%;right:8%;top:34px;height:2px;background:var(--hpc-green);box-shadow:var(--glow);opacity:.8}
.step{padding:0 24px;position:relative}
.step b{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#fff;border:2px solid var(--hpc-green);color:var(--hpc-green);font-size:26px;box-shadow:var(--glow);margin-bottom:26px;position:relative}
.step h3{font-size:24px;margin-bottom:8px}.step p{color:var(--ink-2)}
.how .note{margin-top:48px;background:#fff;border-radius:var(--radius);padding:20px 26px;font-weight:600;display:inline-block;border:1px solid var(--line)}
/* features */
.features{padding:120px 0}
.fgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:56px}
.fcard{grid-column:span 2;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;background:#fff}
.fcard h3{font-size:21px;margin-bottom:8px}.fcard p{color:var(--ink-2);font-size:16px}
.fcard .ic{width:44px;height:44px;border-radius:12px;background:var(--hpc-green-soft);margin-bottom:20px;display:grid;place-items:center;color:var(--hpc-green);font-weight:800}
.fcard.big{grid-column:span 4;background:var(--pcb-black);color:#fff;padding:0;overflow:hidden;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center}
.fcard.big .t{padding:36px}.fcard.big p{color:#b8c6be}.fcard.big .ic{background:rgba(46,224,122,.14);color:var(--hpc-green-bright)}
.fcard.big img{width:100%;height:100%;object-fit:cover;object-position:left top}
.fcard.wide{grid-column:span 3}
.fcard.shot{grid-column:span 3;padding:0;overflow:hidden;background:var(--glass)}
.fcard.shot .t{padding:30px 30px 18px}.fcard.shot img{border-top:1px solid var(--line)}
/* x-ray */
.xray{background:linear-gradient(180deg,#fff,var(--glass));padding:120px 0}
.xray .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.xray figure{aspect-ratio:1;position:relative}
.xray figure img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 40px 50px rgba(11,15,13,.18))}
.xray dl{margin-top:32px;display:grid;gap:18px}
.xray dt{font-weight:800;display:flex;gap:12px;align-items:center}
.xray dt::before{content:"";width:28px;height:2px;background:var(--hpc-green-bright);box-shadow:var(--glow)}
.xray dd{color:var(--ink-2);margin-left:40px}
/* industries */
.ind{padding:120px 0}
.igrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px;margin-top:56px}
.icard{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
.icard .ph{aspect-ratio:3/2;background:var(--glass)}
.icard .ph img{width:100%;height:100%;object-fit:cover}
.icard .t{padding:26px}.icard h3{font-size:22px;margin-bottom:8px}.icard p{color:var(--ink-2);font-size:16px}
.icard .k{display:inline-block;background:var(--hpc-green-soft);color:#0c7a41;font-weight:800;font-size:13px;padding:3px 12px;border-radius:8px;margin-bottom:12px}
/* compare */
.cmp{background:var(--pcb-black);color:#fff;padding:120px 0}
.cmp .eyebrow{color:var(--hpc-green-bright)}
.table{margin-top:48px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,.16)}
.table table{width:100%;border-collapse:collapse}
.table th,.table td{padding:20px 26px;text-align:left;vertical-align:top}
.table thead th{font-size:15px;background:rgba(255,255,255,.06);color:#b8c6be}
.table thead th:last-child{color:var(--hpc-green-bright)}
.table tbody tr{border-top:1px solid rgba(255,255,255,.12)}
.table td:first-child{font-weight:800;width:24%}
.table td:nth-child(2){color:#9fb0a7}
.table td:last-child{background:rgba(46,224,122,.08);font-weight:600}
.price{margin-top:28px;border:1px dashed rgba(255,255,255,.3);border-radius:var(--radius);padding:24px}
/* faq */
.faq{padding:120px 0}
.faq .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{font-weight:800;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";color:var(--hpc-green);font-size:26px;line-height:1}
details[open] summary::after{content:"−"}
details p{color:var(--ink-2);margin-top:12px}
form{background:var(--glass);border-radius:var(--radius-lg);padding:36px;position:sticky;top:96px}
form h3{font-size:26px;margin-bottom:6px}
label{display:block;font-weight:600;font-size:14px;margin-top:18px}
input,select,textarea{width:100%;margin-top:6px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;font:400 16px var(--font);background:#fff}
input:focus,select:focus{outline:3px solid var(--hpc-green-bright);border-color:var(--hpc-green)}
form .btn{width:100%;justify-content:center;margin-top:24px}
form small{display:block;margin-top:14px;color:var(--ink-2);font-size:13px}
footer{background:var(--pcb-black);color:#8fa59a;padding:36px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}.spin img{transition:none}html{scroll-behavior:auto}}
@media(max-width:900px){
 body{font-size:16px}
 .nav ul{display:none}
 .hero .wrap{grid-template-columns:1fr;min-height:0;padding:32px 0 56px;max-height:none}
 .hero .cta .btn{flex:1;justify-content:center}
 .pain,.how,.features,.xray,.ind,.cmp,.faq{padding:72px 0}
 .pain-list,.igrid,.xray .wrap,.faq .wrap{grid-template-columns:1fr}
 .steps{grid-template-columns:1fr;gap:36px}.steps::before{left:33px;right:auto;top:0;bottom:0;width:2px;height:auto}
 .step{padding:0 0 0 90px}.step b{position:absolute;left:0;top:0;margin:0}
 .fgrid{grid-template-columns:1fr}.fcard,.fcard.big,.fcard.wide,.fcard.shot{grid-column:auto}
 .fcard.big{grid-template-columns:1fr}
 .table{overflow-x:auto}.table table{min-width:560px}
 .table th,.table td{padding:14px 16px}
 form{position:static;padding:26px}
}

.nw{white-space:nowrap;display:inline!important}
.btn{white-space:nowrap}
.hero h1 .nw{color:inherit}
.flogo{display:inline-flex;align-items:center;gap:10px}.flogo img{height:28px;width:auto}