/* One Stop Auto Hub — premium + futuristic layer v2 (override-only; remove this file + premium.js to revert). */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --display:'Space Grotesk','Archivo',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.9,.24,1);
}

/* ---------- Typography ---------- */
h1,h2,h3{letter-spacing:-.025em}
.hero h1{letter-spacing:-.03em}
.hl{background:linear-gradient(92deg,#00E0D2 0%,#8FF7EE 30%,#00B5AA 60%,#00E0D2 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent);animation:hlShift 6s ease-in-out infinite}
@keyframes hlShift{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* ---------- Scroll progress beam ---------- */
.scroll-beam{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;background:linear-gradient(90deg,var(--accent),#00E0D2 55%,#59d9ff);box-shadow:0 0 12px rgba(0,224,210,.55);transform-origin:left;transform:scaleX(0);pointer-events:none}

/* ---------- Header: glass glow on scroll ---------- */
header{transition:box-shadow .35s var(--ease),border-color .35s}
body.scrolled header{border-bottom-color:rgba(0,181,170,.35);box-shadow:0 10px 34px -22px rgba(0,181,170,.5)}

/* ---------- Hero: aurora + tech grid (car photo untouched; works on phone too) ---------- */
.hero::after{content:"";position:absolute;inset:-18%;z-index:1;pointer-events:none;mix-blend-mode:screen;filter:blur(14px);background:
  radial-gradient(38% 45% at 16% 24%,rgba(0,224,210,.17),transparent 62%),
  radial-gradient(28% 38% at 6% 72%,rgba(77,150,255,.10),transparent 60%),
  radial-gradient(24% 32% at 34% 8%,rgba(0,181,170,.13),transparent 60%);
  animation:aurora 17s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(3.5%,-2.5%,0) rotate(1.6deg)}100%{transform:translate3d(-3%,2%,0) rotate(-1.6deg)}}
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:
  linear-gradient(rgba(0,224,210,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,224,210,.055) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 30%,transparent 52%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 30%,transparent 52%);
  animation:gridDrift 26s linear infinite}
@keyframes gridDrift{to{background-position:44px 44px}}

/* ---------- Services ticker (injected on homepage; decorative) ---------- */
.svc-ticker{overflow:hidden;background:var(--dark);border-top:1px solid rgba(0,224,210,.16);border-bottom:1px solid rgba(0,224,210,.16);padding:13px 0;position:relative}
.svc-ticker .tk{display:flex;width:max-content;animation:tick 38s linear infinite}
.svc-ticker span{font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--onDarkMuted);white-space:nowrap;padding:0 16px}
.svc-ticker span i{font-style:normal;color:var(--accent);padding-right:32px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .25s,border-color .2s,color .2s}
.btn-primary{background:linear-gradient(135deg,var(--accent) 0%,#00c9bc 100%);box-shadow:0 6px 18px -8px rgba(0,181,170,.55);animation:ctaPulse 5s ease-in-out infinite}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px -10px rgba(0,181,170,.65);background:linear-gradient(135deg,var(--accent2) 0%,var(--accent) 100%)}
.btn-primary:active{transform:translateY(-1px) scale(.985)}
@keyframes ctaPulse{0%,86%,100%{box-shadow:0 6px 18px -8px rgba(0,181,170,.55)}93%{box-shadow:0 6px 30px -4px rgba(0,224,210,.8)}}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg);pointer-events:none}
.btn:hover::after{animation:btnShine .8s var(--ease)}
@keyframes btnShine{from{left:-80%}to{left:130%}}
.wa:hover,.call:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 22px -10px rgba(0,0,0,.35)}

/* ---------- Nav links ---------- */
.navlinks a{position:relative}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),#00E0D2);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.navlinks a:hover::after,.navlinks a.active::after{transform:scaleX(1)}

/* ---------- Cards: 3D tilt (desktop) + press feedback (phone) + spotlight ---------- */
.card{transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;position:relative}
.card:hover{border-color:rgba(0,181,170,.5);box-shadow:0 24px 48px -18px rgba(14,18,22,.2),0 0 0 1px rgba(0,181,170,.14),0 0 34px -8px rgba(0,224,210,.25)}
.card:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
  .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(0,181,170,.13),transparent 65%)}
  .card:hover::after{opacity:1}
}
@media not all and (hover:hover){.card:hover{transform:translateY(-6px)}}

/* ---------- Price plate chips (little Dubai-plate feel) ---------- */
.card .price{display:inline-block;border:1.5px solid var(--line2);border-radius:8px;padding:6px 12px;background:var(--bg2)}
.card .price::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--accent);margin-right:9px;vertical-align:1px}

.ctaband{transition:box-shadow .3s var(--ease),border-color .3s}
.ctaband:hover{border-color:rgba(0,181,170,.45);box-shadow:0 18px 44px -20px rgba(0,181,170,.4)}

/* ---------- SPA page transitions (app-like) ---------- */
.page.show{animation:pageIn .45s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- FAQ ---------- */
.faqlist details{transition:border-color .25s,background .25s}
.faqlist details[open]{border-color:rgba(0,181,170,.4)}
.faqlist details[open]>div{animation:faqIn .32s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.faqlist summary{transition:color .2s}
.faqlist summary:hover{color:var(--accent2)}

/* ---------- Floating WhatsApp (restored; also added on subpages via premium.js) ---------- */
.wa-float{transition:transform .2s var(--ease);bottom:52px!important}
.wa-float:hover{transform:scale(1.08)}
@media (max-width:760px){.wa-float{bottom:46px!important}}

/* ---------- Scroll reveal (gated on html.anim) ---------- */
html.anim .rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.anim .rv.in{opacity:1;transform:none}
html.anim .rv:nth-child(2){transition-delay:.07s}
html.anim .rv:nth-child(3){transition-delay:.14s}
html.anim .rv:nth-child(4){transition-delay:.21s}

/* ---------- Reduced motion: calm everything ---------- */
@media (prefers-reduced-motion:reduce){
  .hl,.hero::after,.hero-bg::after,.svc-ticker .tk,.btn-primary,.page.show{animation:none}
  .btn,.card,.navlinks a::after,.ctaband,header{transition:none}
  .btn:hover::after{animation:none}
  .scroll-beam{display:none}
  html.anim .rv{opacity:1;transform:none;transition:none}
}