
/* =========================================================
   NATIONAL RECOVERY SERVICE DUBAI — PREMIUM ENHANCEMENT
   Add this AFTER the existing style.css
   ========================================================= */

:root{
  --premium-navy:#061321;
  --premium-navy-2:#0b2036;
  --premium-gold:#c9a45d;
  --premium-gold-light:#efd79f;
  --premium-ivory:#f5f2eb;
  --premium-white:#fff;
  --premium-muted:#687487;
  --premium-line:rgba(6,19,33,.11);
  --premium-shadow:0 28px 80px rgba(6,19,33,.12);
  --premium-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Global polish ---------- */
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  background:
    radial-gradient(circle at 8% 0%,rgba(201,164,93,.045),transparent 28%),
    var(--ivory);
  color:#17202c;
}
::selection{background:var(--premium-gold);color:var(--premium-navy)}
.container{max-width:1320px}

/* subtle luxury texture */
.section{position:relative}
.section:not(.section-dark)::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:linear-gradient(rgba(6,19,33,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(6,19,33,.025) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);
}

/* ---------- Header ---------- */
header{
  transition:
    background .55s var(--premium-ease),
    box-shadow .55s var(--premium-ease),
    transform .55s var(--premium-ease),
    padding .55s var(--premium-ease);
}
header.scrolled{
  box-shadow:0 15px 55px rgba(6,19,33,.14);
  border-bottom-color:rgba(201,164,93,.25);
}
.brand{
  transition:transform .4s var(--premium-ease);
}
.brand:hover{transform:translateY(-1px)}
.brand img{
  filter:drop-shadow(0 8px 18px rgba(6,19,33,.15));
  transition:filter .4s var(--premium-ease),transform .4s var(--premium-ease);
}
.brand:hover img{
  transform:scale(1.025);
  filter:drop-shadow(0 10px 22px rgba(201,164,93,.18));
}
.navlinks a{
  transition:color .3s ease,transform .3s var(--premium-ease);
}
.navlinks a:hover{transform:translateY(-1px)}
.navlinks a:after{
  height:1px;
  bottom:20px;
  background:linear-gradient(90deg,var(--premium-gold),var(--premium-gold-light));
}
.nav-actions .btn{
  box-shadow:0 10px 28px rgba(6,19,33,.09);
}
.btn{
  min-height:46px;
  position:relative;
  overflow:hidden;
  letter-spacing:.02em;
}
.btn:before{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:40px;
  left:-70px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);
  transition:left .65s var(--premium-ease);
}
.btn:hover:before{left:120%}
.btn:hover{box-shadow:0 16px 35px rgba(6,19,33,.14)}

/* ---------- Hero ---------- */
.hero{
  min-height:min(900px,100svh);
}
.hero-media{
  transform:scale(1.025);
  animation:heroBreath 14s ease-in-out infinite alternate;
}
@keyframes heroBreath{
  from{transform:scale(1.025)}
  to{transform:scale(1.07)}
}
.hero-overlay{
  background:
    linear-gradient(90deg,rgba(4,12,22,.985) 0%,rgba(4,12,22,.84) 42%,rgba(4,12,22,.43) 73%,rgba(4,12,22,.52) 100%),
    linear-gradient(0deg,rgba(4,12,22,.72),transparent 48%);
}
.hero-content{
  max-width:900px;
  padding-top:125px;
}
.hero h1{
  font-size:clamp(3.7rem,7vw,7.2rem);
  letter-spacing:-.055em;
  text-wrap:balance;
  text-shadow:0 18px 60px rgba(0,0,0,.28);
}
.hero h1 em{
  background:linear-gradient(105deg,#e8c87e,#fff2c7 45%,#c9a45d);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{
  max-width:720px;
  font-size:17px;
  line-height:1.8;
}
.hero-actions .btn{
  padding-left:24px;
  padding-right:24px;
}
.trust-row{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.trust{
  min-height:57px;
  display:flex;
  align-items:center;
  border-color:rgba(255,255,255,.13);
  background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px rgba(255,255,255,.09);
  transition:transform .45s var(--premium-ease),background .45s var(--premium-ease),border-color .45s ease;
}
.trust:hover{
  transform:translateY(-4px);
  background:rgba(201,164,93,.12);
  border-color:rgba(201,164,93,.35);
}

/* ---------- Emergency strip ---------- */
.emergency-bar{
  position:relative;
  box-shadow:0 12px 40px rgba(6,19,33,.12);
}
.emergency-bar:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:5px;
  background:var(--premium-navy);
}
.emergency-bar .container{
  min-height:84px;
}
.emergency-bar strong{
  letter-spacing:.02em;
}
.emergency-actions .btn-navy{
  box-shadow:0 10px 22px rgba(6,19,33,.18);
}

/* ---------- Section headings ---------- */
.section-head h2{
  letter-spacing:-.045em;
  text-wrap:balance;
}
.section-head p{max-width:650px}
.eyebrow{
  letter-spacing:.22em;
}
.eyebrow:before{
  width:34px;
  height:1px;
  box-shadow:0 0 10px rgba(201,164,93,.35);
}

/* ---------- About ---------- */
.about-grid{
  gap:90px;
}
.about-img{
  position:relative;
  border-radius:28px;
  box-shadow:var(--premium-shadow);
}
.about-img:before{
  content:"";
  position:absolute;
  z-index:2;
  inset:18px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:20px;
  pointer-events:none;
}
.about-img:after{
  content:"24/7";
  position:absolute;
  z-index:3;
  right:22px;
  bottom:22px;
  color:#fff;
  font:600 42px Georgia,serif;
  letter-spacing:-.04em;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}
.about-img img{
  transition:transform 1s var(--premium-ease);
}
.about-img:hover img{transform:scale(1.045)}
.check{
  padding:11px 0;
  border-bottom:1px solid rgba(6,19,33,.065);
}
.check:last-child{border-bottom:0}
.check i{
  box-shadow:0 5px 16px rgba(201,164,93,.14);
}

/* ---------- Featured service gallery ---------- */
.feature-grid{
  gap:10px;
}
.feature{
  min-height:210px;
  border-radius:18px;
  box-shadow:0 12px 32px rgba(6,19,33,.08);
  transition:transform .55s var(--premium-ease),box-shadow .55s var(--premium-ease);
}
.feature:hover{
  transform:translateY(-7px);
  box-shadow:0 28px 60px rgba(6,19,33,.16);
}
.feature img{
  transition:transform 1s var(--premium-ease),filter .6s ease;
}
.feature:hover img{
  transform:scale(1.08);
  filter:brightness(.64);
}
.feature div{
  padding:4px;
}
.feature strong{
  font-size:15px;
  letter-spacing:.01em;
}

/* ---------- Service cards ---------- */
.cards{
  gap:18px;
}
.card{
  position:relative;
  border-color:rgba(6,19,33,.09);
  box-shadow:0 15px 45px rgba(6,19,33,.07);
  transition:transform .5s var(--premium-ease),box-shadow .5s var(--premium-ease),border-color .4s ease;
}
.card:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 1px rgba(255,255,255,.8);
}
.card:hover{
  transform:translateY(-9px);
  box-shadow:0 32px 80px rgba(6,19,33,.14);
  border-color:rgba(201,164,93,.38);
}
.card-img{
  height:225px;
}
.card-img img{
  transition:transform 1s var(--premium-ease),filter .7s ease;
}
.card:hover .card-img img{
  transform:scale(1.065);
  filter:saturate(1.05) contrast(1.03);
}
.card-body{
  padding:26px;
}
.card-body h3{
  font-size:22px;
  letter-spacing:-.02em;
}
.card-link{
  color:var(--premium-navy);
  border-bottom:1px solid rgba(201,164,93,.55);
  padding-bottom:3px;
}

/* ---------- Fleet ---------- */
.fleet-grid{gap:14px}
.fleet{
  position:relative;
  border-color:rgba(201,164,93,.14);
  box-shadow:0 20px 55px rgba(0,0,0,.15);
  transition:transform .55s var(--premium-ease),border-color .4s ease,box-shadow .5s ease;
}
.fleet:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.07),transparent 35%);
}
.fleet:hover{
  transform:translateY(-8px);
  border-color:rgba(201,164,93,.46);
  box-shadow:0 30px 75px rgba(0,0,0,.23);
}
.fleet img{
  height:235px;
  transition:transform .9s var(--premium-ease);
}
.fleet:hover img{transform:scale(1.06)}
.fleet div{padding:25px}
.fleet h3{letter-spacing:-.015em}

/* ---------- Why choose ---------- */
.icon-grid{
  gap:1px;
  border:1px solid rgba(201,164,93,.12);
  box-shadow:0 25px 70px rgba(0,0,0,.15);
}
.icon-card{
  min-height:220px;
  padding:32px;
  position:relative;
  overflow:hidden;
  transition:background .45s ease,transform .45s var(--premium-ease);
}
.icon-card:after{
  content:"";
  position:absolute;
  width:150px;height:150px;
  right:-80px;bottom:-90px;
  border-radius:50%;
  border:1px solid rgba(201,164,93,.14);
}
.icon-card:hover{
  background:#102943;
}
.icon{
  border:1px solid rgba(201,164,93,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.15);
}

/* ---------- Steps ---------- */
.steps{
  gap:12px;
}
.step{
  border-radius:20px;
  min-height:230px;
  padding:30px;
  transition:transform .5s var(--premium-ease),box-shadow .5s ease,border-color .4s ease;
}
.step:hover{
  transform:translateY(-7px);
  box-shadow:0 25px 60px rgba(6,19,33,.11);
  border-color:rgba(201,164,93,.4);
}
.step-num{
  font-size:48px;
  background:linear-gradient(145deg,rgba(201,164,93,.16),rgba(201,164,93,.04));
  width:max-content;
  min-width:64px;
  padding:8px 14px;
  border-radius:14px;
}

/* ---------- Video ---------- */
.video-box{
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 85px rgba(6,19,33,.20);
}
.video-box video{
  filter:saturate(.92);
  transition:filter .5s ease;
}
.video-box:hover video{filter:saturate(1.05)}
.video-overlay{
  transition:opacity .35s ease;
}
.video-box:has(video:playing) .video-overlay{
  opacity:0;
  pointer-events:none;
}
.play{
  width:88px;height:88px;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 15px 45px rgba(0,0,0,.25);
  transition:transform .4s var(--premium-ease),background .4s ease;
}
.play:hover{transform:scale(1.08);background:var(--premium-gold-light)}

/* ---------- Areas ---------- */
.areas{
  gap:8px;
}
.area{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(8px);
  border-color:rgba(6,19,33,.09);
  transition:transform .35s var(--premium-ease),border-color .35s ease,background .35s ease;
}
.area:hover{
  transform:translateY(-3px);
  background:#fff;
  border-color:rgba(201,164,93,.48);
}

/* ---------- International block ---------- */
.international{
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(6,19,33,.20);
}
.international:before{
  content:"";
  position:absolute;
  width:420px;height:420px;
  right:-180px;top:-180px;
  border-radius:50%;
  border:1px solid rgba(201,164,93,.18);
  box-shadow:0 0 0 35px rgba(201,164,93,.035),0 0 0 70px rgba(201,164,93,.025);
}
.international>*{position:relative;z-index:2}
.international-list{
  list-style:none;
}
.international-list div,
.international-list li{
  transition:transform .35s var(--premium-ease);
}
.international-list div:hover,
.international-list li:hover{transform:translateX(4px)}

/* ---------- Reviews ---------- */
.review-grid{gap:14px}
.review{
  position:relative;
  transition:transform .5s var(--premium-ease),box-shadow .5s ease,border-color .4s ease;
}
.review:hover{
  transform:translateY(-6px);
  box-shadow:0 25px 65px rgba(6,19,33,.11);
  border-color:rgba(201,164,93,.38);
}
.stars{
  text-shadow:0 5px 15px rgba(201,164,93,.25);
}

/* ---------- FAQ ---------- */
.faq{
  max-width:980px;
}
.faq-item{
  border-radius:16px;
  transition:box-shadow .4s ease,border-color .4s ease;
}
.faq-item:hover,
.faq-item.open{
  border-color:rgba(201,164,93,.35);
  box-shadow:0 15px 40px rgba(6,19,33,.07);
}
.faq-q{
  padding:23px 24px;
  font-size:14px;
}
.faq-q .plus{
  transition:transform .4s var(--premium-ease);
}
.faq-item.open .plus{transform:rotate(45deg)}

/* ---------- CTA ---------- */
.cta{
  position:relative;
  overflow:hidden;
}
.cta:before{
  content:"";
  position:absolute;
  width:480px;height:480px;
  right:-200px;top:-250px;
  border-radius:50%;
  border:1px solid rgba(201,164,93,.18);
}
.cta .container{position:relative;z-index:2}

/* ---------- Contact ---------- */
.contact-grid{
  gap:80px;
}
.form{
  border:1px solid rgba(6,19,33,.08);
  box-shadow:0 28px 80px rgba(6,19,33,.10);
  position:relative;
  overflow:hidden;
}
.form:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:linear-gradient(var(--premium-gold),transparent);
}
.field input,.field select,.field textarea{
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(201,164,93,.75);
  box-shadow:0 0 0 4px rgba(201,164,93,.10);
  background:#fff;
}
.map{
  box-shadow:0 20px 50px rgba(6,19,33,.09);
}

/* ---------- Footer ---------- */
footer{
  position:relative;
  overflow:hidden;
}
footer:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,164,93,.55),transparent);
}
footer .footer-brand img{
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.3));
}
.footer-bottom{
  border-top-color:rgba(201,164,93,.13);
}

/* ---------- Page heroes ---------- */
.breadcrumb{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
}
.page-hero{
  position:relative;
  overflow:hidden;
  padding:115px 0 105px;
  background:
    radial-gradient(circle at 82% 15%,rgba(201,164,93,.16),transparent 26%),
    linear-gradient(135deg,#061321,#0b2036);
}
.page-hero:after{
  content:"";
  position:absolute;
  width:550px;height:550px;
  right:-230px;top:-310px;
  border:1px solid rgba(201,164,93,.13);
  border-radius:50%;
  box-shadow:0 0 0 50px rgba(201,164,93,.025),0 0 0 100px rgba(201,164,93,.018);
}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{
  max-width:950px;
  letter-spacing:-.05em;
}
.page-hero p{
  font-size:17px;
  line-height:1.75;
}

/* ---------- Services detail page ---------- */
.service-detail{
  border-radius:24px;
  border-color:rgba(6,19,33,.09);
  box-shadow:0 18px 55px rgba(6,19,33,.07);
  transition:transform .5s var(--premium-ease),box-shadow .5s ease,border-color .4s ease;
}
.service-detail:hover{
  transform:translateY(-5px);
  box-shadow:0 30px 80px rgba(6,19,33,.12);
  border-color:rgba(201,164,93,.33);
}
.service-detail img{
  transition:transform 1s var(--premium-ease),filter .6s ease;
}
.service-detail:hover img{
  transform:scale(1.045);
  filter:saturate(1.04);
}
.service-detail-content h2{
  letter-spacing:-.035em;
}
.notice{
  border-radius:0 12px 12px 0;
  border-left-width:3px;
}

/* ---------- Reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(25px) scale(.99);
  transition:opacity .8s var(--premium-ease),transform .8s var(--premium-ease);
}
.reveal.in{
  opacity:1;
  transform:none;
}
.reveal:nth-child(2){transition-delay:.05s}
.reveal:nth-child(3){transition-delay:.1s}
.reveal:nth-child(4){transition-delay:.15s}

/* ---------- Floating actions ---------- */
.floating{
  transition:transform .35s var(--premium-ease),box-shadow .35s ease;
}
.floating:hover{
  transform:translateY(-5px) scale(1.05);
}
.float-wa{
  box-shadow:0 15px 35px rgba(37,211,102,.25);
}
.float-call{
  box-shadow:0 15px 35px rgba(6,19,33,.25);
}

/* ---------- Premium cursor glow on desktop ---------- */
@media (pointer:fine){
  body:after{
    content:"";
    position:fixed;
    width:280px;height:280px;
    left:var(--mx,-400px);
    top:var(--my,-400px);
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:9999;
    background:radial-gradient(circle,rgba(201,164,93,.06),transparent 65%);
    transition:left .12s ease,top .12s ease;
  }
}

/* ---------- Responsive refinement ---------- */
@media(max-width:1100px){
  .navlinks{gap:12px}
  .trust-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  header{position:sticky}
  .hero{
    min-height:760px;
  }
  .hero-content{
    padding-top:95px;
  }
  .hero h1{
    font-size:clamp(3.3rem,12vw,5.7rem);
  }
  .trust{
    min-height:50px;
  }
  .about-grid{gap:42px}
  .about-img:before{inset:12px}
  .about-img:after{font-size:32px}
  .feature{min-height:190px}
  .service-detail:hover{
    transform:none;
  }
}
@media(max-width:560px){
  body{padding-bottom:58px}
  .hero{
    min-height:760px;
  }
  .hero-content{
    padding:75px 0 100px;
  }
  .hero h1{
    font-size:clamp(3rem,15vw,4.6rem);
  }
  .hero p{font-size:15px}
  .trust-row{
    grid-template-columns:1fr 1fr;
  }
  .trust{
    font-size:11px;
  }
  .emergency-bar{
    padding:16px 0;
  }
  .emergency-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .emergency-actions .btn{
    min-width:0;
    padding-left:10px;
    padding-right:10px;
  }
  .page-hero{
    padding:75px 0 70px;
  }
  .page-hero h1{
    font-size:clamp(2.7rem,12vw,4rem);
  }
  .floating{display:none}
  .section{overflow:hidden}
}

/* respect reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
}
