/* ============================================================
   Simpex home hero, concept C: "products become the logo".
   Default (no JavaScript, or prefers-reduced-motion): the static end state,
   real logo + hero content over the warehouse photo.
   html.hc-js (set by a tiny script in <head>, before first paint) turns on
   the pinned, scroll-scrubbed stage driven by assets/hero-c.js.
   ============================================================ */
:root{--hc-hdr:64px}
@media(max-width:1180px){:root{--hc-hdr:118px}}
@media(max-width:640px){:root{--hc-hdr:114px}}

.hc-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- header: the real SIMPEX logo ---------- */
.hc-brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;flex:none}
.hc-brand .hc-hlogo{display:block;height:23px;width:108px;--lg-a:#020035;--lg-b:#f5a623}
.hc-brand small{font-size:8.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--text-dim);line-height:1;white-space:nowrap}
@media(max-width:440px){.hc-brand small{display:none}.hc-brand .hc-hlogo{height:21px;width:99px}}
/* footer: the real logo too */
.hc-fbrand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:7px}
.hc-fbrand .hc-flogo{display:block;height:22px;width:104px;--lg-a:#020035;--lg-b:#f5a623}
.hc-fbrand small{font-size:8.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--text-dim);line-height:1}

/* ---------- the hero, static end state ---------- */
.hc{position:relative;color:#fff;isolation:isolate}
.hc-stage{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(560px,calc(100vh - var(--hc-hdr)),860px);
  background:radial-gradient(120% 95% at 50% 40%,#173c7b 0%,#0e2557 40%,#081535 76%,#050d24 100%)}
.hc-bg{position:absolute;inset:0;z-index:0;background:#0b1c42 url('hero.jpg') 64% center/cover;transform-origin:62% 50%}
.hc-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,14,36,.95) 0%,rgba(8,20,50,.80) 34%,rgba(11,28,66,.30) 70%,rgba(11,28,66,.12) 100%),
             linear-gradient(0deg,rgba(5,12,32,.55) 0%,transparent 28%)}
.hc-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% center;display:none}
.hc-cv,.hc-beats,.hc-light,.hc-vig{display:none}

.hc-content{position:relative;z-index:3;width:100%;padding:64px 0}
.hc-content>.wrap{width:100%}
.hc-in{max-width:640px}
.hc-lock{display:block;width:clamp(210px,22vw,320px);height:auto;aspect-ratio:4447/945;overflow:visible;--lg-a:#fff;--lg-b:url(#hcY)}
.hc-in .eyebrow{margin-top:26px}
.hc h1{font-size:clamp(34px,4.3vw,60px);line-height:1.03;letter-spacing:-.034em;font-weight:900;margin:16px 0 0;text-wrap:balance}
.hc h1 .hl{color:var(--yellow)}
.hc .lead{font-size:clamp(15px,1.3vw,18px);line-height:1.55;color:rgba(255,255,255,.80);max-width:54ch;margin-top:16px}
.hc .hero-cta{margin-top:26px}
.hc .stats{margin-top:30px}

/* skip link (keyboard, first in the page): jumps straight to the end state */
.hc-skip{position:fixed;left:16px;top:12px;z-index:60;padding:9px 14px;border-radius:10px;background:#fff;color:var(--navy-ink);
  font-size:13px;font-weight:800;transform:translateY(-160%);transition:transform .2s}
.hc-skip:focus{transform:none;outline:3px solid var(--yellow);outline-offset:2px}
html:not(.hc-js) .hc-skip{display:none}

/* ---------- animated mode ---------- */
.hc-js .hc{height:330vh}
.hc-js .hc-stage{position:sticky;top:var(--hc-hdr);height:calc(100vh - var(--hc-hdr));min-height:0;display:block}
.hc-js .hc-bg{opacity:0;will-change:opacity,transform}
.hc-js .hc-bg:not(.hc-ld){background-image:none}
.hc-js .hc-vid{display:block}
.hc-js .hc-light{display:block;position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  background:radial-gradient(48% 40% at 50% 42%,rgba(92,140,232,.34) 0%,rgba(40,80,170,.12) 55%,transparent 78%)}
.hc-js .hc-cv{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hc-js .hc-vig{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(125% 100% at 50% 45%,transparent 52%,rgba(3,9,26,.6) 100%)}
.hc-js .hc-beats{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.hc-js .hc-content{position:absolute;inset:0;display:flex;align-items:center;padding:0;pointer-events:none}
@supports (height:100svh){.hc-js .hc-content{padding-bottom:calc(100vh - 100svh)}}
.hc-js .hc.hc-live .hc-content{pointer-events:auto}
.hc-js .hc-in>*{opacity:0}
.hc-js .hc-in>:not(.hc-lock){will-change:opacity,transform}

/* scroll beats: big type, one idea at a time */
.hc-beat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 28px;opacity:0;will-change:opacity,transform}
.hc-beat::before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,96vw);height:min(560px,70%);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(5,13,36,.62),rgba(5,13,36,.28) 55%,transparent);z-index:-1}
.hc-a{opacity:1}
.hc-b::before{background:radial-gradient(closest-side,rgba(5,13,36,.76),rgba(5,13,36,.38) 55%,transparent)}
.hc-eye{font-size:13px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);margin-bottom:22px}
.hc-big{font-size:clamp(42px,7.4vw,118px);font-weight:800;letter-spacing:-.048em;line-height:.98;max-width:13ch;text-wrap:balance;
  color:#fff;background:linear-gradient(180deg,#ffffff 35%,#c4d3f3 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hc-c{bottom:auto;justify-content:flex-start;height:auto;opacity:1}
.hc-c::before{display:none}
.hc-mid{font-size:clamp(30px,4.3vw,66px);font-weight:800;letter-spacing:-.042em;line-height:1.06}
.hc-c1,.hc-c2{display:block;width:max-content;margin:0 auto;will-change:opacity,transform;opacity:0}
.hc-c2{background:linear-gradient(100deg,#ffe08a 0%,#f7c948 45%,#f5a623 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hc-js .hc-a .hc-bi{animation:hcRise 1.3s cubic-bezier(.16,1,.3,1) .12s both}
@keyframes hcRise{from{opacity:0;transform:translateY(28px) scale(.985)}}

.hc-cue{position:absolute;left:0;right:0;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.hc-cue i{display:block;width:1px;height:40px;position:relative;overflow:hidden;background:rgba(255,255,255,.18)}
.hc-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:45%;transform:translateY(-100%);will-change:transform;background:linear-gradient(transparent,#fff);
  animation:hcCue 1.9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes hcCue{to{transform:translateY(223%)}}   /* transform only: animating top forced a page layout every frame */

/* ---------- phones ---------- */
@media(max-width:767px){
  .hc-js .hc{height:200vh}
  .hc-bg{background-position:58% center}
  .hc-bg::after{background:linear-gradient(180deg,rgba(6,14,36,.80) 0%,rgba(8,20,50,.86) 45%,rgba(6,14,36,.95) 100%)}
  .hc-content{padding:44px 0 48px}
  .hc-lock{width:200px}
  .hc-in .eyebrow{margin-top:20px}
  .hc h1{font-size:clamp(29px,8.2vw,40px);margin-top:13px}
  .hc .lead{font-size:14.5px;margin-top:12px}
  .hc .hero-cta{margin-top:20px;gap:10px}
  .hc .stats{margin-top:22px;gap:22px}
  .hc .stat b{font-size:26px}
  .hc-eye{font-size:11.5px;margin-bottom:16px}
  .hc-cue{bottom:calc(18px + (100vh - 100svh))}
}
@media(max-width:767px) and (max-height:700px){
  .hc-js .hc .lead{font-size:13.5px;line-height:1.45}
  .hc-js .hc h1{font-size:28px}
  .hc-js .hc .stats{margin-top:16px}
}
@supports not (height:100svh){@media(max-width:767px){.hc-cue{bottom:18px}}}