/* ---- A B Mechatronics additions ---- */
.logo .mark{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#ff8a3d);color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:.95rem;letter-spacing:-.02em}
.logo small{display:block;font-family:'Inter';font-weight:500;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.logo .txt{line-height:1.1}
.btn-call::before{content:"☎"}

/* Packaging line visual */
.packline{position:relative;height:380px;max-width:480px;width:100%;margin:0 auto;border-radius:26px;border:1px solid var(--line);background:linear-gradient(170deg,var(--surface),var(--bg-2));overflow:hidden}
.packline::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 15%,rgba(255,106,26,.25),transparent 55%),radial-gradient(circle at 10% 100%,rgba(62,166,255,.15),transparent 55%)}
.hood{position:absolute;left:50%;top:60px;transform:translateX(-50%);width:200px;height:120px;border-radius:16px 16px 6px 6px;border:2px solid rgba(255,255,255,.18);background:linear-gradient(180deg,#1b2638,#121b2a)}
.hood::before{content:"FLOW-WRAP";position:absolute;top:14px;left:0;right:0;text-align:center;font-family:'Space Grotesk';font-size:.7rem;letter-spacing:.3em;color:var(--accent-2)}
.hood i{position:absolute;bottom:18px;left:22px;right:22px;height:8px;border-radius:4px;background:var(--accent);animation:jaw 1.6s ease-in-out infinite;box-shadow:0 0 18px rgba(255,106,26,.7)}
.hood b{position:absolute;top:44px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#35e08b;box-shadow:0 0 12px #35e08b;animation:blink 1.6s steps(2) infinite}
@keyframes jaw{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.88);opacity:.55}}
@keyframes blink{50%{opacity:.25}}
.belt{position:absolute;left:0;right:0;bottom:74px;height:22px;background:repeating-linear-gradient(90deg,#1a2436 0 18px,#223048 18px 36px);border-top:2px solid rgba(255,255,255,.14);border-bottom:2px solid rgba(255,255,255,.08);animation:beltmove 1s linear infinite}
@keyframes beltmove{to{background-position:36px 0}}
.rollers{position:absolute;left:0;right:0;bottom:46px;height:28px;display:flex;justify-content:space-around;padding:0 18px}
.rollers span{width:28px;height:28px;border-radius:50%;border:3px solid #2b3a55;border-top-color:var(--accent);animation:roll 1.4s linear infinite}
@keyframes roll{to{transform:rotate(360deg)}}
.pk{position:absolute;bottom:96px;width:62px;height:34px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 8px 18px -6px rgba(255,106,26,.6);left:-80px;animation:pkmove 6s linear infinite}
.pk::after{content:"";position:absolute;inset:6px 8px;border-radius:3px;border:1.5px dashed rgba(255,255,255,.55)}
.pk:nth-of-type(2){animation-delay:-2s}.pk:nth-of-type(3){animation-delay:-4s}
@keyframes pkmove{to{left:calc(100% + 20px)}}
.live{position:absolute;left:18px;top:18px;display:flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(7,11,18,.6)}
.live i{width:7px;height:7px;border-radius:50%;background:#35e08b;box-shadow:0 0 10px #35e08b}
.i4{position:absolute;right:18px;bottom:16px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);font-weight:600}

/* trust strip */
.strip{padding:0;margin-top:-40px;position:relative;z-index:2}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.strip-grid div{background:var(--surface);padding:26px 22px;display:flex;gap:14px;align-items:center}
.strip-grid b{display:block;font-family:'Space Grotesk';font-size:1.05rem}
.strip-grid span{font-size:.82rem;color:var(--muted)}
.strip-grid .ic{font-size:1.5rem;color:var(--accent);flex:none}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:.88rem;transition:.25s}
.chip:hover{border-color:var(--accent);color:var(--accent-2)}
.chip.brand{font-family:'Space Grotesk';font-weight:600;letter-spacing:.02em;border-color:rgba(255,179,71,.35);color:var(--accent-2)}
.panel-box{padding:36px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,var(--surface),var(--bg-2))}
.panel-box h3{font-size:1.4rem;margin-bottom:12px}
.panel-box p{color:var(--muted);margin-bottom:22px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tag{display:inline-block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(255,106,26,.12);color:var(--accent);margin-bottom:16px;font-weight:600}
.tag.cool{background:rgba(62,166,255,.12);color:var(--cool)}

/* updates */
.updates{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.update{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:.3s}
.update:hover{border-color:rgba(255,106,26,.45);transform:translateY(-4px)}
.update time{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cool);margin-bottom:10px}
.update h4{font-size:1.1rem}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{padding:34px 30px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--surface),var(--bg-2));position:relative}
.quote::before{content:"“";position:absolute;top:10px;right:24px;font-family:'Space Grotesk';font-size:5rem;color:rgba(255,106,26,.25);line-height:1}
.stars{color:var(--accent-2);letter-spacing:3px;margin-bottom:14px;font-size:.95rem}
.quote p{color:var(--text);margin-bottom:22px;font-size:1rem}
.quote cite{font-style:normal;color:var(--muted);font-size:.88rem;display:block}
.quote cite b{color:var(--text);font-family:'Space Grotesk';font-size:1rem;display:block}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shot{aspect-ratio:1;border-radius:16px;border:1px dashed rgba(255,255,255,.18);background:linear-gradient(160deg,var(--surface),var(--bg-2));display:grid;place-items:center;text-align:center;color:var(--muted);font-size:.8rem;padding:14px;transition:.3s;position:relative;overflow:hidden}
.shot:hover{border-color:var(--accent)}
.shot svg{width:34px;height:34px;color:var(--accent);margin:0 auto 10px;display:block}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot.wide{grid-column:span 2}

/* hours */
.hours{display:grid;gap:8px;margin-top:6px}
.hours div{display:flex;justify-content:space-between;color:var(--muted);font-size:.92rem;border-bottom:1px solid var(--line);padding-bottom:8px}
.hours div b{color:#35e08b;font-weight:600}

.feature-list{list-style:none;display:grid;gap:12px;margin:0}
.feature-list li{display:flex;gap:12px;color:var(--muted)}
.feature-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:10px}
.feature-list li b{color:var(--text)}

@media (max-width:980px){
  .strip-grid{grid-template-columns:1fr 1fr}
  .updates,.quotes{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr}
  .packline{height:340px}
}
@media (max-width:760px){
  .strip{margin-top:0;padding-top:30px}
  .strip-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.pk,.belt,.rollers span,.hood i,.hood b{animation:none!important}.pk{left:40%}}