/* ===== Evolock 2026 Creative Responsive Experience ===== */
:root{
  --ev-blue:#2f5cff; --ev-ink:#07111f; --ev-soft:#f4f7fb;
  --ev-line:rgba(12,25,44,.10); --ev-radius:26px;
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden}
img,video,svg{max-width:100%;height:auto}
body::before{
  content:"";position:fixed;inset:-20vh -20vw;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 12% 20%,rgba(47,92,255,.12),transparent 24%),
    radial-gradient(circle at 86% 8%,rgba(103,74,255,.10),transparent 22%),
    radial-gradient(circle at 70% 78%,rgba(0,197,255,.08),transparent 24%);
  animation:evAmbient 14s ease-in-out infinite alternate
}
@keyframes evAmbient{to{transform:translate3d(2vw,2vh,0) scale(1.05)}}

.nav{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:rgba(255,255,255,.84)!important;
  border-bottom:1px solid rgba(15,23,42,.08)
}
.nav .brand img{transition:transform .35s ease}
.nav .brand:hover img{transform:scale(1.035)}
.nav nav a{position:relative}
.nav nav a::after{
  content:"";position:absolute;left:0;bottom:-7px;width:100%;height:2px;
  transform:scaleX(0);transform-origin:right;background:var(--ev-blue);
  transition:transform .3s ease
}
.nav nav a:hover::after{transform:scaleX(1);transform-origin:left}

.cinematic-hero{position:relative;isolation:isolate;overflow:hidden}
.cinematic-picture img{
  width:100%;display:block;transform:scale(1.015);
  animation:evHeroIn 1.2s cubic-bezier(.2,.75,.2,1) both
}
@keyframes evHeroIn{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:scale(1.015)}}

.section{position:relative}
.section-head h2{letter-spacing:-.045em}
.premium-pillars article,.premium-service-grid a,.premium-proof div,.faq-grid details{
  transform:translateZ(0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease
}
.premium-pillars article:hover,.premium-proof div:hover,.faq-grid details:hover{
  transform:translateY(-7px);box-shadow:0 22px 55px rgba(13,27,62,.10)
}
.premium-service-grid a{overflow:hidden;position:relative}
.premium-service-grid a::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.09),transparent);
  transform:translateX(-120%);transition:transform .7s ease
}
.premium-service-grid a:hover{transform:translateY(-5px)}
.premium-service-grid a:hover::before{transform:translateX(120%)}

.btn,.cinematic-outline{
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease
}
.btn:hover,.cinematic-outline:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(30,67,180,.20)}
.btn:active,.cinematic-outline:active{transform:translateY(0) scale(.98)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(22px)}
.reveal-stagger.is-visible>*{animation:evCardIn .65s ease forwards}
.reveal-stagger.is-visible>*:nth-child(2){animation-delay:.07s}
.reveal-stagger.is-visible>*:nth-child(3){animation-delay:.14s}
.reveal-stagger.is-visible>*:nth-child(4){animation-delay:.21s}
.reveal-stagger.is-visible>*:nth-child(5){animation-delay:.28s}
.reveal-stagger.is-visible>*:nth-child(n+6){animation-delay:.32s}
@keyframes evCardIn{to{opacity:1;transform:none}}

.ev-progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,#2f5cff,#00b7ff);z-index:3000}
.ev-menu{display:none;border:0;background:transparent;width:44px;height:44px;padding:9px;cursor:pointer}
.ev-menu span{display:block;height:2px;background:#07111f;margin:6px 0;border-radius:3px;transition:.25s}
.ev-menu.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.ev-menu.active span:nth-child(2){opacity:0}
.ev-menu.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:1024px){
  .nav{padding:14px 22px!important}
  .nav .brand{margin-right:auto}
  .ev-menu{display:block;order:3}
  .nav>.btn.small{order:2;margin-left:auto;margin-right:8px}
  .nav nav{
    position:absolute;top:100%;left:14px;right:14px;display:flex!important;
    flex-direction:column;align-items:stretch;gap:0!important;padding:12px;
    border:1px solid var(--ev-line);border-radius:20px;background:rgba(255,255,255,.97);
    box-shadow:0 24px 60px rgba(5,16,38,.16);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s
  }
  .nav nav.open{opacity:1;visibility:visible;transform:none}
  .nav nav a{padding:13px 12px;border-radius:12px}
  .nav nav a:hover{background:#f4f7fb}
  .nav nav a::after{display:none}
  .premium-pillars{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .premium-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .premium-proof{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:767px){
  .nav{padding:11px 14px!important}
  .nav .brand img{max-width:142px}
  .nav>.btn.small{display:none}
  .impact-ribbon{gap:10px!important;padding:10px 14px!important}
  .impact-ribbon>img{width:34px!important}
  .cinematic-hero{min-height:auto!important}
  .cinematic-picture img{min-height:58vw;object-fit:cover;object-position:center}
  .cinematic-mobile-cta{display:flex!important;flex-direction:column;gap:10px;padding:16px}
  .cinematic-mobile-cta>*{width:100%;text-align:center;justify-content:center}
  .section{padding-left:18px!important;padding-right:18px!important}
  .section-head{display:block!important}
  .section-head>p{margin-top:14px}
  .premium-pillars,.premium-service-grid,.premium-proof,.faq-grid{grid-template-columns:1fr!important}
  .cta{margin:20px 14px!important;padding:28px 20px!important;display:block!important}
  .cta .btn{display:inline-flex;margin-top:18px}
  footer{grid-template-columns:1fr!important;padding:32px 18px!important;gap:22px!important}
}
@media (max-width:390px){
  .nav .brand img{max-width:124px}
  h1{font-size:clamp(2rem,11vw,3rem)!important}
  h2{font-size:clamp(1.65rem,8.5vw,2.45rem)!important}
  .section{padding-left:14px!important;padding-right:14px!important}
}
@media (min-width:1600px){
  .section,.nav,footer{padding-left:max(5vw,calc((100vw - 1500px)/2))!important;padding-right:max(5vw,calc((100vw - 1500px)/2))!important}
}
@media (hover:none){
  .premium-pillars article:hover,.premium-proof div:hover,.premium-service-grid a:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important}
}