/* NAQEL V16 — Production refinement layer */
:root{
  --brand-navy:#0f172a;
  --brand-blue:#1e3a8a;
  --brand-blue-2:#244aa8;
  --brand-orange:#f97316;
  --surface-warm:#f5f7fb;
  --surface-blue:#eef3fb;
  --surface-deep:#111c33;
}

/* More consistent vertical rhythm across the site */
.section{padding-block:clamp(3.75rem,5vw,5.5rem)}
.section-title{margin-bottom:clamp(1.75rem,3vw,2.75rem)}
.section-title>small,.section-title small,.eyebrow{font-weight:800;letter-spacing:.02em}
.section-title>small,.section-title small{display:inline-block;color:var(--orange);margin-bottom:.5rem}

/* App page: strong NAQEL identity without visual noise */
.app-page{background:var(--surface-warm)}
.app-page main{overflow:hidden}
.app-page .app-hero{
  position:relative;
  padding:clamp(4.5rem,8vw,7rem) 0;
  background:
    radial-gradient(circle at 14% 22%,rgba(249,115,22,.18),transparent 27%),
    radial-gradient(circle at 86% 78%,rgba(59,130,246,.16),transparent 32%),
    linear-gradient(135deg,#1e3a8a 0%,#14275d 48%,#0f172a 100%);
}
.app-page .app-hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 88%);
}
.app-page .app-hero-grid{position:relative;z-index:1}
.app-page .app-hero-copy{max-width:720px}
.app-page .app-hero-copy h1{margin:.65rem 0 1.15rem}
.app-page .app-hero-copy p{max-width:42rem;color:#dce7fb}
.app-page .app-status-pill{font-weight:800;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.app-page .app-phone-shell{
  border-color:rgba(255,255,255,.88);
  box-shadow:0 34px 90px rgba(2,6,23,.34),0 0 0 1px rgba(255,255,255,.14);
}

.app-page #availability{
  background:
    radial-gradient(circle at 82% 10%,rgba(30,58,138,.07),transparent 26%),
    linear-gradient(180deg,#f4f7fc 0%,#eef3f9 100%);
}
.app-page .app-availability{position:relative}
.app-page .app-availability .section-title{max-width:760px;margin-inline:auto;text-align:center}
.app-page .section-title>small{padding:.34rem .72rem;border-radius:999px;background:rgba(249,115,22,.10);color:#c55a0a}

.app-page .app-store-panel{
  position:relative;overflow:hidden;min-height:180px;border-color:#d9e1ed;
  box-shadow:0 16px 40px rgba(15,23,42,.07);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.app-page .app-store-panel:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-orange))}
.app-page .app-store-panel:hover{transform:translateY(-2px);border-color:#cbd6e5;box-shadow:0 20px 48px rgba(15,23,42,.1)}
.app-page .app-store-panel .store-platform{font-weight:900;color:var(--brand-blue)}

.app-page .app-feature-section{
  background:#fff;
  position:relative;
}
.app-page .app-feature-section:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 10% 50%,rgba(30,58,138,.055),transparent 24%),radial-gradient(circle at 92% 28%,rgba(249,115,22,.055),transparent 20%);
}
.app-page .app-feature-section>.container{position:relative}
.app-page .app-feature-grid article{border-color:#dfe6ef;box-shadow:0 10px 28px rgba(15,23,42,.055);border-top:3px solid transparent;transition:transform .2s ease,border-color .2s ease}
.app-page .app-feature-grid article:nth-child(odd){border-top-color:rgba(30,58,138,.8)}
.app-page .app-feature-grid article:nth-child(even){border-top-color:rgba(249,115,22,.82)}
.app-page .app-feature-grid article:hover{transform:translateY(-2px)}

.app-page .app-version-section{background:linear-gradient(180deg,#eef3f9 0%,#f7f9fc 100%)}
.app-page .app-version-card{border:1px solid #d9e2ed;box-shadow:0 20px 55px rgba(15,23,42,.07);position:relative;overflow:hidden}
.app-page .app-version-card:after{content:"";position:absolute;inset:auto -55px -75px auto;width:180px;height:180px;border-radius:50%;background:rgba(30,58,138,.05)}
.app-page .app-version-card h2{font-size:clamp(1.65rem,1.35rem + 1vw,2.2rem)}
.app-page .app-version-card dd{color:var(--brand-navy)}

/* App CTA: intentionally inset so the action never hugs the viewport edge */
.app-page .cta{background:var(--surface-warm);padding:0 0 clamp(4rem,7vw,6.5rem)}
.app-page .cta .container{width:min(100% - 48px,1120px)}
.app-page .cta-box{
  padding:clamp(1.75rem,4vw,3rem);
  border-radius:20px;
  background:linear-gradient(135deg,#152a65 0%,#0f172a 100%);
  box-shadow:0 22px 60px rgba(15,23,42,.16);
  gap:2rem;
}
.app-page .cta-box h2{color:#fff;margin-top:0}
.app-page .cta-box p{color:#dbe4f2;margin-bottom:0}
.app-page .cta-box .btn{flex:0 0 auto;min-width:150px;justify-content:center}

/* Contact actions keep both account and app destinations neat */
.account-delete-action{margin-bottom:.75rem}
.app-page-action{margin-top:0}

/* Subtle polish for modern browsers without depending on it */
@supports(text-wrap:balance){.hero-copy h1,.section-title h2,.inner-hero h1,.contact-head h1{text-wrap:balance}}

/* Tablet tuning */
@media (min-width:621px) and (max-width:1100px){
  .app-page .app-hero-grid{gap:36px}
  .app-page .app-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-page .cta .container{width:min(100% - 56px,960px)}
}

@media (max-width:900px){
  .app-page .app-hero-copy{margin-inline:auto;text-align:center}
  .app-page .cta-box{align-items:flex-start}
}

@media (max-width:620px){
  .app-page .app-hero{padding:4rem 0 4.5rem}
  .app-page .app-hero-copy p{font-size:1rem}
  .app-page .app-store-panel{min-height:160px}
  .app-page .cta .container{width:min(100% - 30px,1120px)}
  .app-page .cta-box{padding:1.5rem;gap:1.25rem}
  .app-page .cta-box .btn{width:100%}
}

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

/* V16.2 production consistency: never reserve phantom space above sticky header */
html{margin-top:0!important;padding-top:0!important}
body{margin-top:0!important;padding-top:0!important}
.site-header{top:0!important;margin-top:0!important}

/* Accessible, unobtrusive back-to-top control */
.back-to-top{
  position:fixed;
  left:max(18px,env(safe-area-inset-left));
  bottom:max(18px,calc(env(safe-area-inset-bottom) + 14px));
  z-index:950;
  min-height:46px;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(15,23,42,.94);
  color:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.22);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font:800 .94rem/1 Tajawal,Arial,sans-serif;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,background .2s ease,border-color .2s ease;
}
.back-to-top .back-to-top-arrow{font-size:1.1em;line-height:1;transform:translateY(-1px)}
.back-to-top:hover{background:var(--orange,#f97316);border-color:rgba(255,255,255,.28)}
.back-to-top:focus-visible{outline:3px solid rgba(249,115,22,.38);outline-offset:3px}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}
@media(max-width:620px){
  .back-to-top{left:max(12px,env(safe-area-inset-left));bottom:max(12px,calc(env(safe-area-inset-bottom) + 10px));min-height:44px;padding:0 13px;font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}}

/* =========================================================
   V16.3 — canonical header contract
   Keep every page visually identical regardless of page class.
   ========================================================= */
html,body{margin:0!important;padding:0!important}
body{min-height:100%;overflow-x:hidden}
.site-header{
  position:sticky!important;
  top:0!important;
  right:auto!important;
  left:auto!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  z-index:1000!important;
  background:#fff!important;
  border:0!important;
  border-bottom:1px solid rgba(226,232,240,.72)!important;
  box-shadow:0 2px 12px rgba(15,23,42,.035)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.site-header.scrolled{box-shadow:0 8px 24px rgba(15,23,42,.08)!important}
.site-header>.container.nav{
  width:min(1180px,calc(100% - 36px))!important;
  min-height:82px!important;
  height:82px!important;
  margin-inline:auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:28px!important;
  position:relative!important;
}
.site-header .brand{
  display:flex!important;
  align-items:center!important;
  min-width:146px!important;
  margin:0!important;
  padding:0!important;
  line-height:0!important;
}
.site-header .brand img{
  display:block!important;
  width:146px!important;
  max-width:146px!important;
  height:auto!important;
  margin:0!important;
}
.site-header .nav-links{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  margin:0!important;
  padding:4px 8px!important;
  background:#f1f1ef!important;
  border:0!important;
  border-radius:14px!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.site-header .nav-links a{
  display:block!important;
  position:relative!important;
  margin:0!important;
  padding:12px 14px 10px!important;
  color:#4b5563!important;
  background:transparent!important;
  border:0!important;
  border-radius:10px!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  line-height:1.35!important;
}
.site-header .nav-links a+a:before{content:none!important}
.site-header .nav-links a:after{
  content:""!important;
  position:absolute!important;
  right:14px!important;
  left:14px!important;
  bottom:4px!important;
  width:auto!important;
  height:2px!important;
  border-radius:99px!important;
  background:var(--orange,#f97316)!important;
  transform:scaleX(0)!important;
  transition:transform .2s ease!important;
}
.site-header .nav-links a:hover,
.site-header .nav-links a[aria-current="page"]{color:var(--blue,#1E3A8A)!important}
.site-header .nav-links a:hover:after,
.site-header .nav-links a[aria-current="page"]:after{transform:scaleX(1)!important}
.site-header .nav-links a[href="contact.html"]{
  color:#fff!important;
  background:var(--orange,#f97316)!important;
  padding:12px 18px 10px!important;
  border-radius:9px!important;
}
.site-header .nav-links a[href="contact.html"]:hover{background:#ea580c!important;color:#fff!important}
.site-header .nav-links a[href="contact.html"]:after{content:none!important}
.site-header .menu-btn{
  display:none!important;
  width:44px!important;
  height:44px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:10px!important;
  background:#f1f5f9!important;
  color:var(--blue,#1E3A8A)!important;
  font-size:25px!important;
  line-height:1!important;
  align-items:center!important;
  justify-content:center!important;
}
@media(max-width:980px){
  .site-header>.container.nav{
    width:min(100% - 28px,1180px)!important;
    min-height:72px!important;
    height:72px!important;
    gap:16px!important;
  }
  .site-header .brand{min-width:130px!important}
  .site-header .brand img{width:130px!important;max-width:130px!important}
  .site-header .menu-btn{display:inline-flex!important}
  .site-header .nav-links{
    display:none!important;
    position:absolute!important;
    top:72px!important;
    right:0!important;
    left:0!important;
    z-index:1002!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
    padding:10px!important;
    background:#fff!important;
    border:1px solid rgba(226,232,240,.95)!important;
    border-radius:12px!important;
    box-shadow:0 16px 38px rgba(15,23,42,.14)!important;
  }
  .menu-open .site-header .nav-links{display:flex!important}
  .site-header .nav-links a{padding:11px 12px!important;border-radius:9px!important}
  .site-header .nav-links a:after{right:12px!important;left:auto!important;width:30px!important;bottom:6px!important}
  .site-header .nav-links a[href="contact.html"]{text-align:center!important;padding:12px!important}
}
@media(max-width:420px){
  .site-header>.container.nav{width:calc(100% - 24px)!important}
  .site-header .brand{min-width:118px!important}
  .site-header .brand img{width:118px!important;max-width:118px!important}
}

/* V16.3 — back to top: mobile-friendly visibility threshold and placement */
@media(max-width:620px){
  .back-to-top{
    left:max(10px,env(safe-area-inset-left))!important;
    bottom:max(10px,calc(env(safe-area-inset-bottom) + 8px))!important;
    min-height:44px!important;
    padding:0 12px!important;
    font-size:.875rem!important;
    z-index:1200!important;
  }
}

/* V17.4: legal/resource pages use standard site shell; content styling only. */
.policy-content{background:#f8fafc;}
.policy-content>.content-section{padding:0!important;background:transparent!important;}
.policy-content>.content-section:first-of-type{padding-top:48px!important;}
.policy-content>.content-section:last-of-type{padding-bottom:48px!important;}
.policy-content .article-wrap{max-width:980px!important;background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 34px!important;margin:0 auto 18px!important;box-shadow:0 8px 24px rgba(15,23,42,.045);}
.policy-content .article-wrap h2{color:var(--blue)!important;margin:0 0 14px!important;font-weight:800!important;}
.policy-content .article-wrap h3{color:var(--ink)!important;margin:22px 0 9px!important;}
.policy-content .article-wrap p,.policy-content .article-wrap li{color:#475569!important;}
.policy-content .article-wrap p{margin:0 0 12px!important;}
.policy-content .article-wrap ul,.policy-content .article-wrap ol{margin:10px 0 0!important;padding-right:23px!important;}
.policy-content .article-wrap li+li{margin-top:7px!important;}
.policy-content .article-wrap a{color:var(--blue)!important;font-weight:700!important;text-decoration:none!important;}
.policy-content .article-wrap a:hover{color:var(--orange)!important;}
@media(max-width:700px){.policy-content .article-wrap{padding:24px 20px!important;border-radius:12px;}}


/* V17.7 — Restored inner page hero system from the proven V15 design.
   This intentionally restores only hero/visual rules, not the old site.css body spacing. */
.page-hero{
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 12% 20%,rgba(249,115,22,.14),transparent 22%),linear-gradient(135deg,#07101f,#12306f);
  color:#fff;
  padding:78px 0 66px;
}
.page-hero::after{
  content:"";
  position:absolute;
  left:-90px;
  top:-110px;
  width:310px;
  height:310px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 55px rgba(255,255,255,.018);
  pointer-events:none;
}
.page-hero h1{
  font-size:clamp(2.375rem,5.2vw,3.8125rem);
  margin:0 0 12px;
  line-height:1.16;
  max-width:900px;
  color:#fff;
}
.page-hero p{
  margin:0;
  color:#cfdaec;
  max-width:780px;
  font-size:1.125rem;
}
.inner-visual-hero{
  padding:68px 0 62px!important;
  overflow:hidden;
}
.inner-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:58px;
  align-items:center;
}
.inner-hero-copy{min-width:0;position:relative;z-index:2}
.inner-hero-copy h1{margin-top:0;color:#fff}
.inner-hero-copy p{color:#cfdaec}
.page-visual{
  min-height:280px;
  border-radius:24px;
  background:linear-gradient(145deg,#142247,#0b1428);
  border:1px solid rgba(255,255,255,.12);
  position:relative;
  display:grid;
  place-items:center;
  padding:30px;
  box-shadow:0 28px 65px rgba(0,0,0,.22);
  overflow:hidden;
}
.page-visual::before{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(249,115,22,.22),transparent 66%);
  top:-80px;
  left:-60px;
}
.page-visual-icon{
  width:140px;
  color:#fff;
  position:relative;
  z-index:2;
}
.page-visual-icon svg{width:100%;height:auto;display:block}
.page-visual-track{
  position:absolute;
  left:12%;
  right:12%;
  bottom:70px;
  height:2px;
  background:rgba(255,255,255,.12);
}
.page-visual-track span{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--orange);
  top:-4px;
}
.page-visual-track span:nth-child(1){right:0}
.page-visual-track span:nth-child(2){right:50%;transform:translateX(50%)}
.page-visual-track span:nth-child(3){left:0}
.page-visual-chips{
  position:absolute;
  left:22px;
  right:22px;
  bottom:18px;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.page-visual-chips b{
  font-size:.75rem;
  line-height:1;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  padding:7px 10px;
  border-radius:999px;
}
.page-visual-onboard .page-visual-icon{color:#fdba74}
.page-visual-guidelines .page-visual-icon,
.page-visual-terms .page-visual-icon{color:#fff}

@media(max-width:991px){
  .inner-hero-grid{grid-template-columns:1fr;gap:32px}
  .page-visual{min-height:230px;max-width:620px;width:100%;margin:auto}
}
@media(max-width:620px){
  .page-hero{padding:58px 0 48px}
  .page-hero h1{font-size:clamp(2rem,10vw,2.5rem)}
  .page-hero p{font-size:1rem}
  .inner-hero-grid{gap:24px}
  .page-visual{min-height:210px;border-radius:18px;padding:22px 22px 66px}
  .page-visual-icon{width:110px}
  .page-visual-track{bottom:58px;left:11%;right:11%}
  .page-visual-chips{bottom:12px;left:10px;right:10px;gap:5px}
  .page-visual-chips b{font-size:.6875rem;padding:6px 8px}
}


/* V17.8 CTA refinements */
.driver-hero > .container > .btn{margin-top:36px;}
@media(max-width:680px){.driver-hero > .container > .btn{margin-top:30px;}}