/* ===== سامانه راهنمایی رانندگی — استایل صفحه فرود (آبی سازمانی) ===== */
:root{
  --navy-900:#071a3a; --navy-800:#0a2550; --navy-700:#0e3168; --navy-600:#134083;
  --blue-500:#1e6fd9; --blue-400:#3f8ae8; --blue-300:#7db2f2;
  --gold:#e8c25a; --gold-dark:#c9a23d;
  --ink:#eaf2ff; --muted:#a9bfe0;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:'Vazirmatn',Tahoma,sans-serif; direction:rtl;
  background:linear-gradient(180deg,var(--navy-900),var(--navy-800) 40%,var(--navy-700));
  color:var(--ink); min-height:100vh; overflow-x:hidden;
}
@supports (overflow-x:clip){body{overflow-x:clip}}
a{text-decoration:none;color:inherit}
img{max-width:100%}
img,video{height:auto}
.container{max-width:1080px;margin:0 auto;padding-inline:max(22px, env(safe-area-inset-left), env(safe-area-inset-right))}

/* هدر */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(7,26,58,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(125,178,242,.15);
}
.site .bar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand .emblem{width:46px;height:46px;display:grid;place-items:center;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.brand .emblem .logo-img{width:100%;height:100%;object-fit:contain}
.brand b{font-size:15px;display:block}
.brand span{font-size:11.5px;color:var(--muted)}
nav.top{display:flex;gap:22px;font-size:13.5px}
nav.top a{color:var(--muted);transition:.2s;display:inline-flex;align-items:center;min-height:44px;padding:4px 2px}
nav.top a:hover{color:var(--gold)}
nav.top i{font-style:normal;color:var(--blue-300);font-size:10px;margin-left:4px;opacity:.8}

/* دکمه‌ها */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:99px;font-weight:700;
  padding:13px 30px;font-size:15px;transition:.25s;cursor:pointer;border:0;font-family:inherit}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#2a2005;
  box-shadow:0 8px 26px rgba(232,194,90,.35)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(232,194,90,.5)}
.btn-ghost{border:1.5px solid rgba(125,178,242,.5);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-blue{background:linear-gradient(135deg,var(--blue-500),var(--navy-600));color:#fff;
  box-shadow:0 8px 24px rgba(30,111,217,.4)}
.btn-blue:hover{transform:translateY(-2px)}

/* هیرو */
.hero{position:relative;padding:90px 0 130px;text-align:center;
  background:
    radial-gradient(600px 300px at 70% 0%,rgba(30,111,217,.35),transparent 70%),
    radial-gradient(500px 260px at 20% 20%,rgba(232,194,90,.08),transparent 70%);}
.hero .badge{display:inline-block;background:rgba(232,194,90,.12);border:1px solid rgba(232,194,90,.4);
  color:var(--gold);border-radius:99px;padding:7px 20px;font-size:13px;margin-bottom:24px}
.hero h1{font-size:clamp(28px,5vw,46px);font-weight:900;line-height:1.5;
  background:linear-gradient(90deg,#fff,var(--blue-300));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:640px;margin:18px auto 34px;color:var(--muted);font-size:16px;line-height:2}
.hero .emblem-lg{width:120px;height:120px;margin:0 auto 22px;display:grid;place-items:center;
  filter:drop-shadow(0 12px 34px rgba(0,0,0,.5));animation:float 5s ease-in-out infinite}
.hero .emblem-lg .logo-img{width:100%;height:100%;object-fit:contain}
@keyframes float{50%{transform:translateY(-10px)}}
.hero .actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.skyline{position:absolute;bottom:0;left:0;right:0;width:100%;height:110px;opacity:.35;pointer-events:none}

/* موج بین بخش‌ها */
.wave{display:block;width:100%;height:90px;border:0}

/* بخش‌ها */
section{padding:76px 0;position:relative}
section.alt{background:linear-gradient(180deg,rgba(19,64,131,.5),rgba(10,37,80,.2))}
.kicker{color:var(--gold);font-size:13px;letter-spacing:.5px;margin-bottom:10px;display:block}
h2.sec{font-size:clamp(22px,3.4vw,32px);font-weight:900;margin-bottom:14px}
.lead{color:var(--muted);max-width:620px;line-height:2;font-size:15px}
.center{text-align:center}.center .lead{margin-inline:auto}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:44px}
.card{background:linear-gradient(160deg,rgba(30,111,217,.14),rgba(7,26,58,.5));
  border:1px solid rgba(125,178,242,.18);border-radius:var(--radius);padding:30px 24px;transition:.3s}
.card:hover{transform:translateY(-6px);border-color:rgba(232,194,90,.5)}
.card .ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:26px;margin-bottom:18px;
  background:linear-gradient(135deg,var(--blue-500),var(--navy-600));box-shadow:0 6px 20px rgba(30,111,217,.4)}
.card h3{font-size:17px;margin-bottom:10px}
.card p{color:var(--muted);font-size:14px;line-height:1.9}

/* گام‌ها */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:44px;counter-reset:step}
.step{position:relative;background:rgba(7,26,58,.55);border:1px solid rgba(125,178,242,.16);
  border-radius:var(--radius);padding:34px 20px 24px;text-align:center}
.step .num{position:absolute;top:-22px;right:50%;transform:translateX(50%);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:18px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#2a2005;box-shadow:0 6px 18px rgba(232,194,90,.4)}
.step h4{margin:10px 0 8px;font-size:16px}
.step p{color:var(--muted);font-size:13.5px;line-height:1.9}

/* فراخوان پایانی */
.cta{background:linear-gradient(135deg,var(--blue-500),var(--navy-700));border-radius:26px;
  padding:60px 30px;text-align:center;box-shadow:0 20px 60px rgba(30,111,217,.35);position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:-40%;
  background:radial-gradient(circle at 80% 20%,rgba(232,194,90,.2),transparent 45%)}
.cta h2{font-size:clamp(24px,4vw,34px);font-weight:900;margin-bottom:14px;position:relative}
.cta p{color:#d7e6ff;margin-bottom:30px;position:relative}

footer.site{border-top:1px solid rgba(125,178,242,.15);padding:34px 0;text-align:center;color:var(--muted);font-size:13px;line-height:2.2}
footer.site b{color:var(--gold)}

/* ===== دکمهٔ فهرست و واکنش‌گرایی موبایل ===== */
.nav-toggle{display:none;width:44px;height:44px;border:1px solid rgba(125,178,242,.45);border-radius:12px;
  background:rgba(7,26,58,.6);cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center;flex:none}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:.25s}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:900px){
  .site .bar{padding:10px 0}
  .nav-toggle{display:flex}
  nav.top{
    position:absolute;top:100%;right:0;left:0;display:none;flex-direction:column;gap:0;
    background:var(--navy-900);
    border-bottom:1px solid rgba(125,178,242,.2);padding:8px 0 12px;
    box-shadow:0 18px 34px rgba(0,0,0,.45);
  }
  body.nav-open nav.top{display:flex}
  nav.top a{padding:13px 24px;font-size:15px;border-top:1px solid rgba(125,178,242,.08)}
  nav.top a:hover{background:rgba(30,111,217,.12);color:var(--gold)}
  nav.top i{margin-left:10px}
  .brand span{display:none}
}

@media(max-width:640px){
  .hero{padding:56px 0 104px}
  .hero p{font-size:15px;line-height:2.1}
  .hero .actions{gap:12px}
  .hero .emblem-lg{width:92px;height:92px;margin-bottom:16px}
  section{padding:54px 0}
  .grid3,.steps{gap:16px;margin-top:34px}
  .cta{padding:40px 20px;border-radius:20px}
  .btn{padding:13px 24px;font-size:14.5px;min-height:48px}
  .skyline{height:74px}
  .wave{height:56px}
  footer.site{padding:26px 16px 26px}
}

/* صفحه‌های باریک‌تر از ۳۶۰ پیکسل و ارتفاع کم (افقی) */
@media(max-width:360px){
  .grid3,.steps{grid-template-columns:1fr}
  .brand b{font-size:13.5px}
  .card{padding:24px 18px}
}
@media(max-height:520px) and (orientation:landscape){
  .hero{padding:34px 0 70px}
  .hero .emblem-lg{width:70px;height:70px}
  section{padding:38px 0}
}

@supports (height:100svh){
  .hero{min-height:min(100svh, 820px);display:flex;align-items:center}
  .hero>.container{width:100%}
}

/* بخش ویدئوی معرفی */
.video-frame{margin:34px auto 0;max-width:860px;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  border:1px solid rgba(125,178,242,.25);background:#04122c;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.video-frame video{display:block;width:100%;height:100%;background:#04122c}
@supports not (aspect-ratio:16/9){
  .video-frame{height:0;padding-bottom:56.25%;position:relative}
  .video-frame video{position:absolute;inset:0}
}
@media(max-width:640px){.video-frame{margin-top:24px;border-radius:14px}}

/* بنر اسپانسر صفحهٔ نخست */
.landing-sponsor{margin-top:8px}
.landing-sponsor .sponsor-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.landing-sponsor .sponsor-label{font-size:12.5px;color:var(--gold);background:rgba(232,194,90,.1);
  border:1px solid rgba(232,194,90,.35);border-radius:99px;padding:5px 16px}
.landing-sponsor .sponsor-banner{display:block;max-width:640px;width:100%;border-radius:16px;overflow:hidden;
  border:1px solid rgba(125,178,242,.25);box-shadow:0 14px 36px rgba(0,0,0,.4);transition:.25s}
.landing-sponsor .sponsor-banner:hover{border-color:rgba(232,194,90,.55);transform:translateY(-3px)}
.landing-sponsor .sponsor-banner img{display:block;width:100%;height:auto}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}