/* PHH Hardware Machinery — clean industrial-product stylesheet.
   Direction: white background, big product photography, almost no decoration
   (Konecranes / Demag style). One restrained orange accent for calls to action.
   Motion is limited to a subtle reveal on scroll + image hover zoom. */

:root{
  --ink:#14181c; --mut:#5c6670; --line:#e4e7ea; --line2:#cfd5da; --soft:#f7f8f9;
  --acc:#e8590c; --acc-d:#c2450a; --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;
     font:16px/1.62 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------------------------------------------------------------- header */
header.top{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);
           transition:box-shadow .25s}
.bar{display:flex;align-items:center;gap:26px;min-height:72px}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.mark{background:var(--ink);color:#fff;font-weight:800;letter-spacing:.02em;padding:8px 9px;
      font-size:1rem;line-height:1}
.brandtext{font-size:.97rem;font-weight:700;line-height:1.15}
.brandtext small{display:block;font-weight:400;font-size:.66rem;letter-spacing:.12em;
                 text-transform:uppercase;color:var(--mut);margin-top:4px}
nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
nav a{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:#3d454d;font-weight:600;
      padding:7px 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
nav a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;
     border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:600;font-size:.86rem;
     border-radius:3px;transition:background .18s,border-color .18s,color .18s,transform .15s}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn.wa{background:var(--acc);border-color:var(--acc)}
.btn.wa:hover{background:var(--acc-d);border-color:var(--acc-d)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.small{padding:10px 16px;font-size:.76rem}
.btn.big{padding:15px 26px;font-size:.9rem}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.linkmore{font-size:.82rem;font-weight:600;color:var(--acc);border-bottom:1px solid transparent;white-space:nowrap}
.linkmore:hover{border-color:var(--acc)}

/* ---------------------------------------------------------------- hero (light split) */
.hero{background:#fff;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
           gap:48px;align-items:center;padding-top:54px;padding-bottom:58px}
.hero .eyebrow{color:#a2450c;font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;
               font-weight:700;margin:0 0 18px}
.hero h1{color:var(--ink);font-size:clamp(2.05rem,4.2vw,3.2rem);line-height:1.05;
         letter-spacing:-.028em;margin:0 0 18px;font-weight:700}
.hero .lede{color:var(--mut);font-size:1.04rem;max-width:44ch;margin:0 0 28px}
.hero-photo{position:relative}
.hero-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--soft)}
.hero-photo figcaption{position:absolute;left:0;bottom:0;background:rgba(255,255,255,.94);
                       border-top:1px solid var(--line);border-right:1px solid var(--line);
                       padding:9px 14px;font-size:.76rem;color:#3d454d;letter-spacing:.02em}

/* stat bar under the hero */
.statbar{border-bottom:1px solid var(--line);background:#fff}
.statbar ul{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0}
.statbar li{padding:22px 40px 22px 0;margin-right:40px;border-right:1px solid var(--line)}
.statbar li:last-child{border-right:0}
.statbar b{display:block;font-size:1.65rem;line-height:1;font-weight:700;letter-spacing:-.02em}
.statbar span{display:block;margin-top:6px;font-size:.72rem;letter-spacing:.11em;
              text-transform:uppercase;color:var(--mut)}

/* ---------------------------------------------------------------- sections */
.block{padding:66px 0}
.block.tight{padding-top:26px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
              border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:32px}
.section-head h2{margin:0;font-size:1.32rem;letter-spacing:-.015em;font-weight:700}
.section-head p{margin:0;font-size:.88rem;color:var(--mut)}
h1{font-size:clamp(1.7rem,2.6vw,2.15rem);letter-spacing:-.02em;line-height:1.15;margin:0 0 14px}
.lede{color:var(--mut);max-width:70ch;margin:0 0 30px}
.crumbs{font-size:.76rem;color:var(--mut);letter-spacing:.02em;padding:20px 0 0}
.crumbs a:hover{color:var(--ink)}
.crumbs span{color:#3d454d}

/* ---------------------------------------------------------------- cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:26px}
.grid.two{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:30px}
.card{display:flex;flex-direction:column;border:1px solid var(--line);background:#fff;
      transition:border-color .2s,box-shadow .28s,transform .28s}
.card img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--soft);
          transition:transform .5s cubic-bezier(.22,.68,0,1)}
.card.big img{aspect-ratio:4/3}
.card:hover{border-color:var(--line2);box-shadow:0 12px 30px rgba(20,24,28,.08)}
.card:hover img{transform:scale(1.035)}
.card .cbody{padding:16px 17px 19px;display:flex;flex-direction:column;flex:1}
.card h3{margin:0 0 10px;font-size:.95rem;font-weight:600;line-height:1.36}
.card.big h3{font-size:1.08rem}
.card .price{margin-top:auto;font-size:1.04rem;font-weight:700;letter-spacing:-.01em}
.card.big .price{font-size:1.22rem}
.card .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:9px;
            font-size:.74rem;color:var(--mut)}
.badge{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 10px;
       color:#3d454d;background:#fff;letter-spacing:.02em}
.badge.out{color:#a04040;border-color:#ecd4d4;background:#fdf7f7}
.sku{letter-spacing:.03em}

/* ---------------------------------------------------------------- categories */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:24px}
.catcard{display:block;border:1px solid var(--line);background:#fff;
         transition:border-color .2s,box-shadow .28s}
.catcard img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--soft);
             transition:transform .5s cubic-bezier(.22,.68,0,1)}
.catcard:hover{border-color:var(--line2);box-shadow:0 12px 30px rgba(20,24,28,.08)}
.catcard:hover img{transform:scale(1.035)}
.catcard .cc{padding:15px 17px 18px}
.catcard h3{margin:0 0 4px;font-size:1rem;font-weight:700;letter-spacing:-.01em}
.catcard p{margin:0 0 10px;font-size:.84rem;color:var(--mut);line-height:1.5}
.catcard .count{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#3d454d;
                font-weight:600}

/* ---------------------------------------------------------------- why-us strip */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:32px}
.why div{border-top:2px solid var(--ink);padding-top:16px}
.why h3{margin:0 0 7px;font-size:.95rem;font-weight:700}
.why p{margin:0;font-size:.88rem;color:var(--mut);line-height:1.55}

/* ---------------------------------------------------------------- band CTA */
.band{background:var(--soft);border:1px solid var(--line);padding:38px 40px;margin:0 0 8px;
      display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{margin:0 0 6px;font-size:1.28rem;letter-spacing:-.015em}
.band p{margin:0;color:var(--mut);max-width:60ch;font-size:.92rem}

/* ---------------------------------------------------------------- product page */
.pdp{display:grid;grid-template-columns:1.12fr .88fr;gap:54px;padding:22px 0 20px;align-items:start}
.gal{position:sticky;top:96px}
.gal .main{border:1px solid var(--line);background:var(--soft)}
.gal .main img{aspect-ratio:1;object-fit:contain;width:100%}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumb{width:76px;height:76px;padding:0;border:1px solid var(--line);background:#fff;cursor:pointer;
       overflow:hidden;transition:border-color .2s}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{border-color:var(--line2)}
.thumb[aria-current="true"]{border-color:var(--ink)}
.info .price.big{font-size:1.72rem;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.info .save{color:var(--acc);font-size:.86rem;margin:0 0 12px}
.info .stockline{font-size:.9rem;color:#2f6b47;margin:0 0 20px;font-weight:600}
.info .stockline.ask{color:#8a5a12}
.info .cta{margin-bottom:8px}
.specs{width:100%;border-collapse:collapse;margin:28px 0 0;font-size:.9rem}
.specs th{text-align:left;font-weight:400;color:var(--mut);padding:11px 14px 11px 0;
          border-bottom:1px solid var(--line);width:46%;vertical-align:top}
.specs td{padding:11px 0;border-bottom:1px solid var(--line);font-weight:600}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.variants ul,.desc ul{margin:0;padding-left:18px;color:#2f363d}
.desc p{margin:0 0 14px}
.desc li,.variants li{margin-bottom:6px;font-size:.92rem}
.variants h2,.desc h2{font-size:1rem;letter-spacing:.01em;margin:32px 0 12px;font-weight:700}

/* ---------------------------------------------------------------- simple pages */
.prose{max-width:820px}
.prose h2{margin:34px 0 12px;font-size:1.1rem}
.prose p{color:#2f363d}

/* ---------------------------------------------------------------- footer */
footer{background:var(--soft);border-top:1px solid var(--line);margin-top:70px;padding:54px 0 0}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:34px}
footer h4{margin:0 0 12px;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:#3d454d}
footer p,footer a{font-size:.88rem;color:var(--mut);line-height:1.75}
footer a{display:block}
footer a:hover{color:var(--ink)}
footer .muted{color:#8b939b;font-size:.82rem}
.legal{border-top:1px solid var(--line);margin-top:42px;padding:18px 24px 26px;font-size:.78rem;
       color:var(--mut);max-width:var(--maxw);margin-left:auto;margin-right:auto}

/* ---------------------------------------------------------------- motion */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero .eyebrow,.hero h1,.hero .lede,.hero .cta{animation:rise .6s cubic-bezier(.22,.68,0,1) both}
.hero h1{animation-delay:.06s}.hero .lede{animation-delay:.12s}.hero .cta{animation-delay:.18s}
.reveal{opacity:0;transform:translateY(16px);
        transition:opacity .6s cubic-bezier(.22,.68,0,1),transform .6s cubic-bezier(.22,.68,0,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------------------------------------------------------------- responsive */
@media(max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:34px;padding-top:40px;padding-bottom:44px}
  .pdp{grid-template-columns:1fr;gap:30px}
  .gal{position:static}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  nav{width:100%;gap:16px;margin:0 0 4px}
  .bar{flex-wrap:wrap;padding:12px 0}
  .statbar li{padding-right:24px;margin-right:24px}
  .band{padding:26px 22px}
  .block{padding:48px 0}
  footer .cols{grid-template-columns:1fr}
}

/* ================================================================ BRAND SKIN
   Deep steel + safety yellow, Archivo Black headings, Inter body. Applied on top of the
   clean layout: product areas stay white so the photos and prices stay readable, while
   the hero, counters, wizard and B2B bands go dark for weight. Hazard stripes are used
   only as thin 6px rules — full hazard bands read as amateur. */

:root{
  --steel:#0e1116; --steel2:#161b22; --steel3:#1d242c;
  --haz:#ffc400; --haz-d:#e0ab00;
  --acc:#e8590c;               /* text-safe accent on white */
}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     letter-spacing:-.005em}
h1,h2,h3,.display,.brandtext,.btn,.statbar b,.catcard h3,.section-head h2{
  font-family:"Archivo Black",Inter,system-ui,sans-serif;font-weight:400;letter-spacing:-.015em}
.hero h1{letter-spacing:-.03em}

/* thin hazard rules — used sparingly */
.haz{height:6px;background:repeating-linear-gradient(45deg,var(--haz) 0 11px,var(--steel) 11px 22px)}
.haz.top{height:4px}
header.top{border-bottom:0}
header.top + .haz{position:sticky;top:72px;z-index:55}

/* dark plates */
.dark{background:var(--steel);color:#eef2f6;
      background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px),
                       repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px)}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .lede,.dark p{color:#aeb8c2}
.dark .section-head{border-color:#2b333d}
.dark .section-head p{color:#8b98a5}

/* buttons: industrial push-button */
.btn{border-radius:2px;border-width:2px;border-color:var(--steel);font-family:"Archivo Black",Inter,sans-serif;
     text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;background:var(--steel);color:#fff}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn.wa{background:var(--haz);border-color:var(--haz-d);color:var(--steel)}
.btn.wa:hover{background:var(--haz-d);border-color:var(--haz-d)}
.btn.ghost{background:transparent;color:var(--steel);border-color:var(--steel)}
.btn.ghost:hover{background:var(--steel);color:#fff}
.dark .btn.ghost{color:#fff;border-color:#5b6b7c}
.dark .btn.ghost:hover{background:#fff;color:var(--steel);border-color:#fff}
.btn.big{padding:16px 26px;font-size:.84rem}
.btn:active{transform:translateY(1px)}

/* ---------------------------------------------------------------- 3D hero */
.hero{background:var(--steel);border-bottom:0;position:relative;overflow:hidden}
.hero-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:40px;
           padding-top:58px;padding-bottom:64px;align-items:center}
.hero .eyebrow{color:var(--haz)}
.hero h1{color:#fff}
.hero .lede{color:#aeb8c2}
.live{display:inline-flex;align-items:center;gap:9px;border:1px solid #3a444f;background:#161b22;
      color:#dfe6ec;padding:7px 14px;border-radius:999px;font-size:.72rem;letter-spacing:.16em;
      text-transform:uppercase;font-weight:600;margin:0 0 20px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--haz);animation:pulse 1.9s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,196,0,.55)}70%{box-shadow:0 0 0 12px rgba(255,196,0,0)}100%{box-shadow:0 0 0 0 rgba(255,196,0,0)}}

.hero-stage{position:relative;min-height:440px;border:1px solid #262e37;background:
  radial-gradient(120% 90% at 60% 10%,#1b222a 0%,#0e1116 62%);overflow:hidden;cursor:grab}
.hero-stage:active{cursor:grabbing}
.hero-stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .7s}
.hero-stage.ready canvas{opacity:1}
.hero-stage .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;
                      transition:opacity .6s}
.hero-stage.ready .fallback{opacity:0}
.stage-tag{position:absolute;left:14px;bottom:12px;color:#8b98a5;font-size:.7rem;letter-spacing:.14em;
           text-transform:uppercase;z-index:3}
.stage-btn{position:absolute;right:12px;top:12px;z-index:4;background:rgba(14,17,22,.72);border:1px solid var(--haz);
           color:var(--haz);font-family:"Archivo Black",Inter,sans-serif;text-transform:uppercase;
           font-size:.68rem;letter-spacing:.08em;padding:9px 13px;border-radius:2px;cursor:pointer}
.stage-btn:hover{background:var(--haz);color:var(--steel)}
.stage-hint{position:absolute;left:14px;top:12px;z-index:3;color:#6f7c89;font-size:.7rem;letter-spacing:.1em;
            text-transform:uppercase}
.part-label{position:absolute;z-index:3;opacity:0;transform:translateY(6px);transition:.35s;
            background:rgba(255,196,0,.95);color:var(--steel);font-size:.66rem;font-weight:700;
            letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:2px;pointer-events:none}
.part-label.on{opacity:1;transform:none}
.part-label.p1{left:6%;top:52%}
.part-label.p2{left:2%;top:40%}
.part-label.p3{left:34%;top:22%}
.part-label.p4{left:62%;top:58%}
.part-label.p5{left:44%;top:64%}
.part-label.p6{left:40%;top:12%}

/* capacity slider */
.capline{margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.capline label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8b98a5}
.capline output{font-family:"Archivo Black",Inter,sans-serif;color:var(--haz);font-size:1.1rem;min-width:64px}
input[type=range]{-webkit-appearance:none;appearance:none;width:min(340px,60vw);height:6px;border-radius:3px;
                  background:linear-gradient(90deg,var(--haz) 0 12%,#333c46 12% 100%);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:2px;
      background:var(--haz);border:2px solid var(--steel);cursor:pointer;box-shadow:0 0 0 2px var(--haz)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:2px;background:var(--haz);
      border:2px solid var(--steel);cursor:pointer}
.capnote{font-size:.78rem;color:#7c8896;margin-top:10px}

/* ---------------------------------------------------------------- dark stat strip */
.statbar.dark{border:0;border-top:1px solid #232b34}
.statbar.dark ul{color:#eef2f6}
.statbar.dark li{border-color:#2b333d}
.statbar.dark b{color:var(--haz)}
.statbar.dark span{color:#8b98a5}

/* ---------------------------------------------------------------- category tiles (3D tilt) */
.tilt{perspective:900px}
.catcard{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.22,.68,0,1),box-shadow .35s}
.tilt:hover .catcard{transform:rotateX(4deg) rotateY(-6deg) translateY(-6px);
                     box-shadow:0 26px 46px rgba(14,17,22,.28)}
.catcard .count{color:var(--acc);font-family:"Archivo Black",Inter,sans-serif;text-transform:uppercase;
                letter-spacing:.08em}

/* ---------------------------------------------------------------- find-your-hoist wizard */
.wizard{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;counter-reset:step}
.step{border:1px solid #2b333d;background:#161b22;padding:22px}
.step::before{counter-increment:step;content:"STEP " counter(step);display:block;color:var(--haz);
              font-family:"Archivo Black",Inter,sans-serif;font-size:.7rem;letter-spacing:.14em;margin-bottom:12px}
.step h3{color:#fff;font-size:1rem;margin:0 0 12px}
.step .opts{display:flex;flex-wrap:wrap;gap:8px}
.step button{background:#0e1116;border:1px solid #39424c;color:#c9d2da;padding:9px 13px;border-radius:2px;
             cursor:pointer;font-size:.8rem;transition:.2s;font-family:Inter,sans-serif}
.step button:hover{border-color:var(--haz);color:#fff}
.step button[aria-pressed="true"]{background:var(--haz);border-color:var(--haz);color:var(--steel);font-weight:700}
.wizard-out{margin-top:22px;border:1px dashed #39424c;padding:18px 20px;color:#c9d2da;font-size:.92rem}
.wizard-out b{color:var(--haz);font-family:"Archivo Black",Inter,sans-serif}

/* ---------------------------------------------------------------- counters + tilt cards */
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;text-align:left}
.counters b{display:block;font-family:"Archivo Black",Inter,sans-serif;font-size:2.4rem;color:var(--haz);
            line-height:1}
.counters span{display:block;margin-top:8px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
               color:#8b98a5}
.why div{border-top:2px solid var(--haz)}
.why h3{color:var(--steel)}
.why p{color:var(--mut)}

/* ---------------------------------------------------------------- floating whatsapp */
.floatwa{position:fixed;right:18px;bottom:18px;z-index:80;display:inline-flex;align-items:center;gap:10px;
         background:var(--haz);color:var(--steel);border:2px solid var(--haz-d);border-radius:2px;
         padding:13px 18px;font-family:"Archivo Black",Inter,sans-serif;font-size:.76rem;
         letter-spacing:.06em;text-transform:uppercase;box-shadow:0 12px 26px rgba(14,17,22,.28)}
.floatwa:hover{background:var(--haz-d)}
@media(max-width:760px){.floatwa{right:12px;bottom:12px;padding:12px 14px}}

/* ---------------------------------------------------------------- B2B / quote band */
.quote{background:var(--steel);color:#fff}
.quote .section-head{border-color:#2b333d}
.qform{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:24px}
.qform input,.qform select,.qform textarea{background:#161b22;border:1px solid #39424c;color:#eef2f6;
      padding:12px 14px;border-radius:2px;font:inherit;font-size:.88rem}
.qform input:focus,.qform select:focus,.qform textarea:focus{border-color:var(--haz);outline:none}
.qform textarea{grid-column:1/-1;min-height:96px;resize:vertical}
.qform .full{grid-column:1/-1;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.qnote{color:#8b98a5;font-size:.8rem}

/* ---------------------------------------------------------------- product areas stay clean */
.block.dark + .wrap .card, .wrap .card{border-radius:0}
.section-head h2{font-size:1.2rem}
@media(max-width:1040px){
  .hero-grid{grid-template-columns:1fr}
  .hero-stage{min-height:360px}
}

/* ---------------------------------------------------------------- logo lowered in on a chain */
.intro{position:fixed;inset:0;z-index:60;pointer-events:none;background:#0e1116;
      display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
      transition:opacity .55s ease,visibility .55s}
.intro.gone{opacity:0;visibility:hidden}
.intro .ichain{width:3px;height:0;background:linear-gradient(#6d7987,#39424c);animation:drop 1.5s cubic-bezier(.5,0,.2,1) forwards}
.intro .imark{background:var(--haz);color:var(--steel);font-family:"Archivo Black",Inter,sans-serif;
      font-size:2.6rem;letter-spacing:.04em;padding:14px 22px;transform:translateY(-140%);opacity:0;
      animation:lowered 1.5s cubic-bezier(.5,0,.2,1) forwards}
@keyframes drop{to{height:38vh}}
@keyframes lowered{to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.intro{display:none}}

/* ---------------------------------------------------------------- where our machines work */
.apps-scroll{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.apps{display:flex;gap:14px;list-style:none;margin:0;padding:0;scroll-snap-type:x mandatory}
.apps li{flex:0 0 260px;scroll-snap-align:start;background:var(--soft);border:1px solid var(--line);
      padding:18px 18px 16px}
.apps h3{font-family:"Archivo Black",Inter,sans-serif;font-size:.82rem;letter-spacing:.02em;
      text-transform:uppercase;margin:0 0 8px;color:var(--steel)}
.apps p{margin:0;font-size:.86rem;color:var(--mut);line-height:1.5}
.apps li::before{content:"";display:block;width:34px;height:4px;background:var(--haz);margin-bottom:12px}

/* ---------------------------------------------------------------- filters + comparison */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:22px 0 18px;
      border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.filters label{display:flex;flex-direction:column;gap:6px;font-size:.72rem;letter-spacing:.06em;
      text-transform:uppercase;color:var(--mut)}
.filters select{font:inherit;font-size:.88rem;padding:9px 12px;border:1px solid var(--line);
      border-radius:2px;background:#fff;color:var(--ink);min-width:170px}
.filters select:focus{border-color:var(--haz-d);outline:none}
.fcount{margin-left:auto;font-size:.8rem;color:var(--mut)}
.compare{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
.compare h2,.compare .hint{font-family:inherit}
.compare .hint{margin:4px 0 12px;font-size:.82rem;color:var(--mut)}
.scrollx{overflow-x:auto}
table.cmp{min-width:560px;font-size:.85rem}
table.cmp tr.here{background:var(--soft)}
table.cmp tr.here th,table.cmp tr.here td{font-weight:700}
.tagnow{display:inline-block;background:var(--haz);color:var(--steel);font-size:.66rem;
      letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;margin-left:6px;vertical-align:middle}

/* ---------------------------------------------------------------- micro-interactions */
.live i{animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.stage-btn.ghost.on{background:var(--haz);color:var(--steel)}
/* stage controls sit in one row; the drag hint drops to a second line so nothing overlaps */
.stage-tools{position:absolute;right:12px;top:12px;z-index:4;display:flex;gap:8px}
.stage-tools .stage-btn{position:static}
.stage-hint{left:auto;right:14px;top:54px;text-align:right}
@media(max-width:560px){.stage-hint{display:none}}
@media(min-width:900px){
  .apps-scroll{overflow:visible}
  .apps{display:grid;grid-template-columns:repeat(3,1fr)}
  .apps li{flex:none}
}
.card .ph{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph{transform:scale(1.035)}
.card:hover{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><path d='M8 3v9.5a7 7 0 0 0 7 7h1' fill='none' stroke='%230e1116' stroke-width='2.6'/><circle cx='18' cy='20' r='4' fill='none' stroke='%23e8590c' stroke-width='3'/></svg>") 8 3, pointer}
@media(prefers-reduced-motion:reduce){
  .live i{animation:none}
  .card .ph,.card:hover .ph{transition:none;transform:none}
}

/* ---------------------------------------------------------------- compare (pick up to 3) */
.cardwrap{position:relative;display:flex}
.cardwrap>.card{flex:1 1 auto;height:100%}
.cmpbtn{position:absolute;right:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:7px 11px;border:1px solid var(--steel);background:rgba(255,255,255,.94);color:var(--steel);
  font:600 .66rem/1 Inter,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  border-radius:2px;cursor:pointer;opacity:0;transform:translateY(-4px);
  transition:opacity .18s,transform .18s,background .18s,color .18s}
.cardwrap:hover .cmpbtn,.cardwrap:focus-within .cmpbtn,.cmpbtn.on,.cmpbtn:focus-visible{
  opacity:1;transform:none}
.cmpbtn:hover{background:var(--steel);color:#fff;border-color:var(--steel)}
.cmpbtn.on{background:var(--haz);border-color:var(--haz-d);color:var(--steel)}
@media(hover:none){.cmpbtn{opacity:1;transform:none}}
.cmpbtn-inline.on{background:var(--haz);border-color:var(--haz-d);color:var(--steel)}

.cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:85;background:var(--steel);color:#eef2f6;
  border-top:3px solid var(--haz);transform:translateY(115%);transition:transform .25s;
  box-shadow:0 -12px 30px rgba(0,0,0,.25)}
.cmpbar.show{transform:none}
.cmpbar-in{max-width:var(--maxw);margin:0 auto;padding:11px 24px;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap}
.cmpbar b{font-family:"Archivo Black",Inter,sans-serif;color:var(--haz);font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase}
.cmpchips{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 220px;min-width:0}
.cmpchip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);
  border:1px solid #2b333d;padding:5px 8px 5px 5px;border-radius:2px;font-size:.76rem;max-width:100%}
.cmpchip img{width:30px;height:30px;object-fit:cover;background:#1a2027}
.cmpchip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.cmpchip button{background:none;border:0;color:#8b98a5;font-size:1rem;line-height:1;cursor:pointer;padding:0 2px}
.cmpchip button:hover{color:var(--haz)}
.cmpnote{color:var(--haz);font-size:.74rem;flex:1 1 100%}
.cmpx{background:none;border:0;color:#8b98a5;font:600 .7rem/1 Inter,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;cursor:pointer;padding:6px 4px}
.cmpx:hover{color:#fff}
#cmp-go[disabled]{opacity:.45;cursor:not-allowed}
@media(max-width:760px){.cmpbar-in{padding:9px 12px;gap:8px}.cmpchip span{max-width:96px}
  table.cmptbl th[scope=row]{position:sticky;left:0;background:#fff;z-index:1;
    box-shadow:1px 0 0 var(--line)}}
body.cmp-open .floatwa{bottom:104px}

.cmpmodal{position:fixed;inset:0;z-index:95;background:rgba(14,17,22,.74);display:flex;
  align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto}
.cmpmodal[hidden]{display:none}
.cmpbox{background:#fff;color:var(--ink);width:100%;max-width:1000px;border-top:4px solid var(--haz)}
.cmphd{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.cmphd h2{margin:0;font-size:1.02rem}
.cmphd .cmpcount{font-size:.76rem;color:var(--mut)}
.cmphd .cmpclose{margin-left:auto;background:none;border:1px solid var(--line2);width:36px;height:36px;
  font-size:1.1rem;line-height:1;cursor:pointer;border-radius:2px}
.cmphd .cmpclose:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cmpbody{padding:6px 20px 4px;overflow-x:auto}
table.cmptbl{border-collapse:collapse;width:100%;min-width:540px;font-size:.86rem}
table.cmptbl th,table.cmptbl td{border-bottom:1px solid var(--line);padding:10px 12px;
  text-align:left;vertical-align:top}
table.cmptbl th[scope=row]{color:var(--mut);font-weight:600;width:158px;font-size:.72rem;
  letter-spacing:.05em;text-transform:uppercase}
table.cmptbl thead th{vertical-align:bottom}
table.cmptbl thead img{width:76px;height:76px;object-fit:cover;margin-bottom:8px;background:var(--soft)}
table.cmptbl thead a{font-weight:600;display:block;line-height:1.3}
table.cmptbl thead .rm{background:none;border:0;color:var(--mut);cursor:pointer;font-size:.74rem;
  padding:7px 0 0;text-decoration:underline}
table.cmptbl thead .rm:hover{color:var(--ink)}
.cmpfoot{padding:15px 20px 20px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--line)}
.cmpfoot p{margin:0;font-size:.76rem;color:var(--mut);flex:1 1 260px}