/* VEVL homepage responsive composition v67.
   Keeps the approved desktop hero intact, but composes tablet/mobile as a
   single cinematic scene instead of dropping the artwork into a card below. */

/* Structure after separating CTA/proof from the copy block. */
@media (min-width:1101px){
  body.home-vevl .home-actions,
  body.home-vevl .home-proof{width:min(590px,41vw)!important;max-width:590px!important}
  body.home-vevl .home-actions{margin-top:27px!important}
  body.home-vevl .home-proof{margin-top:27px!important}
}

/* Shared compact header treatment used by tablet and phone. */
@media (max-width:1100px){
  body.home-vevl .site-header[data-global-header="v190"]{
    position:relative!important;
    top:0!important;
    width:calc(100% - 20px)!important;
    height:108px!important;
    min-height:108px!important;
    margin:10px auto 0!important;
    border:1px solid rgba(115,160,211,.24)!important;
    border-radius:20px!important;
    overflow:visible!important;
    background:linear-gradient(180deg,rgba(3,10,21,.98),rgba(2,8,17,.96))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 16px 40px rgba(0,0,0,.24)!important;
  }
  body.home-vevl .site-header[data-global-header="v190"] .header-inner{
    width:calc(100% - 48px)!important;
    height:106px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  body.home-vevl .site-header[data-global-header="v190"] .brand img{
    width:190px!important;
    height:auto!important;
    max-height:88px!important;
  }
  body.home-vevl .site-header[data-global-header="v190"] .menu-toggle{
    width:58px!important;
    height:58px!important;
    border-radius:15px!important;
    border:1px solid rgba(95,151,210,.42)!important;
    background:linear-gradient(180deg,rgba(8,25,44,.94),rgba(4,15,29,.94))!important;
    box-shadow:inset 0 0 18px rgba(52,128,205,.08)!important;
  }

  body.home-vevl .vevl-home-hero{
    min-height:0!important;
    overflow:hidden!important;
    background:
      radial-gradient(780px 600px at 72% 52%,rgba(8,66,135,.18),transparent 74%),
      linear-gradient(180deg,#01050c 0%,#020916 84%,#030b17 100%)!important;
  }
  body.home-vevl .vevl-home-hero::before{display:none!important}
  body.home-vevl .vevl-home-hero::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:1!important;
    inset:0!important;
    background:
      linear-gradient(90deg,rgba(0,3,9,.94) 0%,rgba(0,4,11,.72) 44%,rgba(0,4,11,.12) 74%,transparent 100%),
      linear-gradient(180deg,rgba(0,3,9,.24) 0%,transparent 35%,transparent 74%,rgba(2,8,17,.62) 100%)!important;
    pointer-events:none!important;
  }
  body.home-vevl .vevl-home-hero__inner{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    padding:0!important;
  }
  body.home-vevl .home-copy,
  body.home-vevl .home-actions,
  body.home-vevl .home-proof{position:relative!important;z-index:3!important}
  body.home-vevl .home-product{
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }
  body.home-vevl .home-product img{
    display:block!important;
    position:static!important;
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    object-fit:contain!important;
    transform:none!important;
    filter:none!important;
  }
  body.home-vevl .home-product figcaption,
  body.home-vevl .home-product__halo{display:none!important}
}

/* Tablet: same composition as desktop, condensed. Artwork stays in the hero. */
@media (min-width:641px) and (max-width:1100px){
  body.home-vevl .vevl-home-hero{height:1180px!important}
  body.home-vevl .vevl-home-hero__inner{height:1180px!important}
  body.home-vevl .home-copy{
    width:56%!important;
    max-width:520px!important;
    margin:0!important;
    padding:104px 0 0 50px!important;
  }
  body.home-vevl .home-kicker{
    margin:0 0 28px!important;
    font-size:12px!important;
    letter-spacing:.17em!important;
  }
  body.home-vevl .home-copy h1{
    max-width:500px!important;
    font-size:clamp(62px,8.3vw,78px)!important;
    line-height:.94!important;
  }
  body.home-vevl .home-title-accent{margin-top:8px!important}
  body.home-vevl .home-intro{
    width:100%!important;
    max-width:500px!important;
    margin-top:28px!important;
    font-size:15px!important;
    line-height:1.72!important;
  }
  body.home-vevl .home-assurances{
    grid-template-columns:1fr!important;
    gap:14px!important;
    width:360px!important;
    margin-top:28px!important;
    font-size:14px!important;
  }
  body.home-vevl .home-assurances li{gap:14px!important}
  body.home-vevl .assurance-icon{width:48px!important;height:48px!important}

  body.home-vevl .home-product{
    left:28px!important;
    top:250px!important;
    width:1070px!important;
  }

  body.home-vevl .home-actions{
    position:absolute!important;
    left:50px!important;
    top:820px!important;
    display:flex!important;
    gap:16px!important;
    width:560px!important;
    margin:0!important;
  }
  body.home-vevl .home-primary{min-width:272px!important;min-height:64px!important;font-size:15px!important}
  body.home-vevl .home-watch{min-width:240px!important;min-height:64px!important;font-size:15px!important;justify-content:center!important}

  body.home-vevl .home-proof{
    position:absolute!important;
    left:50px!important;
    right:50px!important;
    bottom:62px!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:22px 18px!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    border-radius:18px!important;
    background:linear-gradient(180deg,rgba(2,12,26,.88),rgba(1,8,18,.90))!important;
    backdrop-filter:blur(14px)!important;
  }
  body.home-vevl .home-proof>div{padding:3px 20px!important;min-height:88px!important}
  body.home-vevl .home-proof strong{font-size:18px!important}
  body.home-vevl .home-proof span{font-size:12px!important;line-height:1.55!important}
}

/* Phone: preserve the same story and visual hierarchy in one continuous scene. */
@media (max-width:640px){
  body.home-vevl .site-header[data-global-header="v190"]{
    width:calc(100% - 12px)!important;
    height:112px!important;
    min-height:112px!important;
    margin:6px auto 0!important;
    border-radius:18px!important;
  }
  body.home-vevl .site-header[data-global-header="v190"] .header-inner{
    width:calc(100% - 30px)!important;
    height:110px!important;
  }
  body.home-vevl .site-header[data-global-header="v190"] .brand img{
    width:178px!important;
    max-height:88px!important;
  }
  body.home-vevl .site-header[data-global-header="v190"] .menu-toggle{
    width:54px!important;
    height:54px!important;
    border-radius:14px!important;
  }

  body.home-vevl .vevl-home-hero{height:1460px!important}
  body.home-vevl .vevl-home-hero__inner{height:1460px!important}
  body.home-vevl .vevl-home-hero::after{
    background:
      linear-gradient(180deg,rgba(0,3,9,.96) 0%,rgba(0,4,11,.83) 39%,rgba(0,4,11,.18) 62%,rgba(1,7,16,.56) 78%,rgba(2,8,17,.90) 100%)!important;
  }
  body.home-vevl .home-copy{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:72px 22px 0!important;
  }
  body.home-vevl .home-kicker{
    margin:0 0 26px!important;
    font-size:10px!important;
    letter-spacing:.16em!important;
    white-space:nowrap!important;
  }
  body.home-vevl .home-kicker::after{width:118px!important;margin-top:13px!important}
  body.home-vevl .home-copy h1{
    max-width:100%!important;
    font-size:clamp(50px,14.5vw,62px)!important;
    line-height:.94!important;
    letter-spacing:-.052em!important;
  }
  body.home-vevl .home-title-accent{margin-top:8px!important}
  body.home-vevl .home-intro{
    max-width:100%!important;
    margin-top:27px!important;
    font-size:15px!important;
    line-height:1.65!important;
  }
  body.home-vevl .home-assurances{
    width:230px!important;
    max-width:62%!important;
    grid-template-columns:1fr!important;
    gap:13px!important;
    margin-top:28px!important;
    font-size:14px!important;
    line-height:1.35!important;
  }
  body.home-vevl .home-assurances li{gap:13px!important}
  body.home-vevl .assurance-icon{width:46px!important;height:46px!important}

  body.home-vevl .home-product{
    left:-94px!important;
    top:565px!important;
    width:650px!important;
  }

  body.home-vevl .home-actions{
    position:absolute!important;
    z-index:4!important;
    left:22px!important;
    right:22px!important;
    top:1000px!important;
    display:grid!important;
    grid-template-columns:1.08fr .92fr!important;
    gap:10px!important;
    width:auto!important;
    margin:0!important;
  }
  body.home-vevl .home-primary,
  body.home-vevl .home-watch{
    width:100%!important;
    min-width:0!important;
    min-height:62px!important;
    padding:0 13px!important;
    border-radius:14px!important;
    font-size:13px!important;
    white-space:nowrap!important;
    justify-content:center!important;
  }
  body.home-vevl .home-primary{justify-content:space-between!important;padding-left:18px!important}
  body.home-vevl .watch-circle{width:38px!important;height:38px!important}

  body.home-vevl .home-proof{
    position:absolute!important;
    z-index:4!important;
    left:22px!important;
    right:22px!important;
    top:1090px!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:16px 15px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    border-radius:17px!important;
    background:linear-gradient(180deg,rgba(2,13,28,.93),rgba(1,8,18,.94))!important;
    backdrop-filter:blur(14px)!important;
  }
  body.home-vevl .home-proof>div{
    min-height:116px!important;
    padding:10px 14px!important;
    border-right:1px solid rgba(112,153,197,.18)!important;
    border-bottom:1px solid rgba(112,153,197,.18)!important;
  }
  body.home-vevl .home-proof>div:nth-child(2n){border-right:0!important}
  body.home-vevl .home-proof>div:nth-last-child(-n+2){border-bottom:0!important}
  body.home-vevl .home-proof strong{font-size:17px!important;line-height:1.25!important}
  body.home-vevl .home-proof span{font-size:11px!important;line-height:1.50!important}
}

@media (max-width:380px){
  body.home-vevl .home-copy{padding-left:18px!important;padding-right:18px!important}
  body.home-vevl .home-copy h1{font-size:50px!important}
  body.home-vevl .home-product{left:-105px!important;width:635px!important}
  body.home-vevl .home-actions,
  body.home-vevl .home-proof{left:18px!important;right:18px!important}
}

/* Proof icon presentation. Hidden on wide desktop to keep the approved desktop density. */
body.home-vevl .proof-icon{display:none}
body.home-vevl .proof-copy{display:flex;flex-direction:column;min-width:0}
@media(max-width:1100px){
  body.home-vevl .home-proof>div{display:flex!important;align-items:flex-start!important;gap:13px!important}
  body.home-vevl .proof-icon{
    display:grid!important;place-items:center!important;flex:0 0 auto!important;
    width:38px!important;height:38px!important;border-radius:50%!important;
    color:#58b5ff!important;
  }
  body.home-vevl .proof-icon svg{width:32px!important;height:32px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.45!important;stroke-linecap:round!important;stroke-linejoin:round!important}
}

/* Optical pass 2 against the approved tablet/mobile compositions. */
@media (min-width:641px) and (max-width:1100px){
  body.home-vevl .home-product{left:108px!important;top:258px!important;width:990px!important}
  body.home-vevl .home-product img{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 96%,transparent 100%)!important;
    mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 96%,transparent 100%)!important;
  }
  body.home-vevl .home-copy{width:55%!important;max-width:500px!important}
  body.home-vevl .home-actions{top:814px!important}
  body.home-vevl .home-proof{bottom:56px!important}
  body.home-vevl .home-proof>div{gap:11px!important;padding-left:15px!important;padding-right:15px!important}
  body.home-vevl .proof-icon{width:34px!important;height:34px!important}
  body.home-vevl .proof-icon svg{width:29px!important;height:29px!important}
}

@media (max-width:640px){
  body.home-vevl .home-product{left:-110px!important;top:610px!important;width:520px!important}
  body.home-vevl .home-product img{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 96%,transparent 100%)!important;
    mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 96%,transparent 100%)!important;
  }
  body.home-vevl .home-actions{top:948px!important}
  body.home-vevl .home-proof{top:1036px!important}
  body.home-vevl .home-primary,body.home-vevl .home-watch{font-size:12.5px!important}
  body.home-vevl .home-watch{padding-left:10px!important;padding-right:10px!important;gap:7px!important}
  body.home-vevl .watch-circle{width:34px!important;height:34px!important;flex:0 0 34px!important}
  body.home-vevl .home-proof>div{gap:10px!important;padding:12px 9px!important;min-height:122px!important}
  body.home-vevl .proof-icon{width:34px!important;height:34px!important}
  body.home-vevl .proof-icon svg{width:30px!important;height:30px!important}
  body.home-vevl .home-proof strong{font-size:16px!important}
  body.home-vevl .home-proof span{font-size:10.5px!important}
}
@media (min-width:641px) and (max-width:1100px){
  body.home-vevl .home-copy{width:62%!important;max-width:520px!important}
  body.home-vevl .home-copy h1{font-size:clamp(58px,7.3vw,68px)!important;max-width:520px!important}
}