/* ===== Feature gallery / hero -- sits above "Select your platform" ===== */
.verus-hero{position:relative;overflow:hidden;background:#0b0d10;color:#fff;font-family:"Source Sans 3","Source Sans Pro",system-ui,sans-serif;
  height:clamp(520px,80vh,max(820px,40vw))!important}
/* never so short (relative to width) that the car and the copy collide on wide, short windows */
@media (min-width:992px){.verus-hero{min-height:min(36vw,900px)}}
.verus-hero *{box-sizing:border-box}
.verus-hero .hr-slide{position:absolute;inset:0}
/* incoming photo fades in ON TOP of the outgoing one, which stays fully visible until covered (no dark dip) */
.verus-hero .hr-slide picture{z-index:0;opacity:0;transition:opacity 0s linear .9s}
.verus-hero .hr-slide.is-on picture{z-index:1;opacity:1;transition:opacity .9s ease}
.verus-hero .hr-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos-d,50% 50%);}
.verus-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  /* shade only the top band where the copy sits and the last ~10% for the blend; the car band (≈40–85%) stays untouched */
  background:linear-gradient(180deg,rgba(7,8,10,.62) 0%,rgba(7,8,10,.38) 22%,rgba(7,8,10,0) 40%,rgba(7,8,10,0) 88%,#0b0d10 100%)}
.verus-hero .hr-copy{position:absolute;z-index:3;left:0;right:0;top:9%;}
.verus-hero .hr-wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.verus-hero .hr-title{margin:0 0 20px;font-weight:900;text-transform:uppercase;line-height:1.08;letter-spacing:.01em;
  font-size:clamp(24px,2.3vw,42px);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.verus-hero .hr-title span{display:block}
.verus-hero .hr-title .hr-accent{color:#fff;opacity:.92}
.verus-hero .hr-rule{width:64px;height:3px;background:rgb(0,118,221);margin:18px 0 20px;border-radius:2px;box-shadow:0 0 18px rgba(0,118,221,.6)}
.verus-hero .hr-cta{display:inline-flex;align-items:center;gap:10px;background:rgba(13,15,18,.55);border:1px solid rgba(255,255,255,.35);color:#fff;text-decoration:none;
  font-weight:700;font-size:15px;padding:11px 20px;border-radius:.35rem;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background-color .28s ease,border-color .28s ease}
.verus-hero .hr-cta:hover{background:rgb(0,118,221);border-color:rgb(0,118,221)}
.verus-hero .hr-cta svg{width:14px;height:14px;transition:transform .28s ease}
.verus-hero .hr-cta:hover svg{transform:translateY(2px)}
.verus-hero .hr-dots{position:absolute;z-index:4;right:max(24px,calc((100% - 1320px)/2 + 24px));bottom:28px;display:flex;gap:8px}
.verus-hero .hr-dots[hidden]{display:none}
.verus-hero .hr-dot{width:28px;height:3px;border:0;padding:0;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer;position:relative}
.verus-hero .hr-dot::before{content:"";position:absolute;inset:-10px 0}
.verus-hero .hr-dot[aria-current="true"]::after{content:"";position:absolute;inset:0;background:#fff;border-radius:2px}


.verus-hero figure.hr-slide{margin:0}
/* parallax layer: the picture drifts down at 35% of scroll speed once the hero reaches the top of the screen */
.verus-hero .hr-slide picture{position:absolute;inset:0;display:block;will-change:transform}
/* photo caption: bottom-left, in the dark fade band -- never on the car (car sits right of 41% and above the fade) */
.verus-hero .hr-cap{position:absolute;z-index:3;left:max(24px,calc((100% - 1320px)/2 + 24px));bottom:22px;display:flex;align-items:center;gap:8px;
  max-width:min(560px,40%);font-size:13px;line-height:1.35;color:rgba(255,255,255,.72);letter-spacing:.01em}
.verus-hero .hr-cap b{color:#fff;font-weight:700}
/* captions: hand-off instead of cross-fade -- old caption fades out fast, new one fades in after it's gone,
   so the two lines of text are never on screen on top of each other */
.verus-hero .hr-slide .hr-cap{opacity:0;transition:opacity .3s ease}
.verus-hero .hr-slide.is-on .hr-cap{opacity:1;transition:opacity .45s ease .5s}
.verus-hero .hr-slide.is-on .hr-cap{will-change:opacity}

.verus-hero .hr-cap-dot{flex:none;width:6px;height:6px;border-radius:50%;background:rgb(0,118,221);box-shadow:0 0 8px rgba(0,118,221,.8)}
@media (max-width:575.98px){.verus-hero .hr-cap{left:16px;right:16px;bottom:12px;max-width:none;font-size:11.5px}}
@media (max-width:575.98px){
  .verus-hero{height:440px!important}
  .verus-hero .hr-wrap{padding:0 16px}
  .verus-hero .hr-copy{top:22px;bottom:auto}
  .verus-hero .hr-slide img{object-position:var(--pos-m,50% 50%)}
  .verus-hero::after{background:linear-gradient(180deg,rgba(7,8,10,.7) 0%,rgba(7,8,10,.45) 26%,rgba(7,8,10,0) 44%,rgba(7,8,10,0) 86%,#0b0d10 100%)}
  .verus-hero .hr-title{font-size:26px}
  .verus-hero .hr-title{margin-bottom:14px}
  .verus-hero .hr-cta{font-size:14px;padding:10px 16px}
  .verus-hero .hr-dots{right:16px;bottom:auto;top:auto;bottom:52px}
}
@media (prefers-reduced-motion:reduce){.verus-hero *{transition:none!important}.verus-hero .hr-dot[aria-current="true"]::after{animation:none}.verus-hero .hr-slide img{transform:none}}
.verus-hero .hr-title{position:relative}
.verus-hero .hr-stream{position:absolute;left:0;top:0;pointer-events:none;z-index:0}
.verus-hero .hr-title>span{position:relative;z-index:1}

/* FORCE WHITE: Odoo's global h1 colour (black) beat the inherited white on line 1 */
.verus-hero .hr-title,.verus-hero .hr-title>span,.verus-hero .hr-title .hr-accent{color:#fff!important;opacity:1!important}