/* Rasta Motor – navy/silver minimal theme */
:root{
  --bg:#0b2340; --card:#0f2b50; --line:#254468;
  --text:#e6ebf2; --muted:#aeb9c8; --accent:#c8d2df; --link:#6aa0ff;
}
*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0; font-family:Vazirmatn, IRANSans, system-ui, "Segoe UI", Roboto, Arial;
  background:radial-gradient(1200px 800px at 70% -10%, #10325f 10%, var(--bg) 60%);
  color:var(--text);
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:auto; padding:24px}

/* Header & Nav */
.header{position:sticky; top:0; z-index:10; background:rgba(9,26,48,.7); backdrop-filter: blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:14px; padding:10px 16px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.5px}
.brand img{width:38px; height:38px}
.nav-links{display:flex; align-items:center; gap:8px}

/* لینک‌ها و دکمهٔ «سامانه‌ها» هم‌استایل شوند */
.nav a, .menu > button{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font:inherit;
  line-height:1;
  cursor:pointer;
}
.nav a:hover, .menu > button:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--line);
}
.nav a.active{background:rgba(255,255,255,.08); border-color:var(--line)}
.menu.open > button{background:rgba(255,255,255,.08); border-color:var(--line)}
.menu > button{appearance:none; outline:none}
.menu > button:focus-visible{outline:2px solid rgba(200,210,223,.5); outline-offset:2px}

/* منوی کشویی سامانه‌ها */
.menu{position:relative}
.menu .dropdown{
  position:absolute; right:0; top:110%; min-width:220px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; display:none;
  box-shadow:0 12px 24px rgba(0,0,0,.25); overflow:hidden;
}
.menu .dropdown a{display:block; padding:10px 12px}
.menu.open .dropdown{display:block}

/* همبرگری (موبایل) */
.hamburger{display:none; flex-direction:column; gap:4px; cursor:pointer; border:1px solid var(--line); padding:8px; border-radius:10px}
.hamburger span{display:block; width:22px; height:2px; background:var(--text)}
@media (max-width:820px){
  .nav-links{display:none; position:absolute; right:16px; left:16px; top:64px; flex-direction:column; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px}
  .nav-links.show{display:flex}
  .hamburger{display:flex}
  .menu{width:100%}
  .menu .dropdown{position:static; display:none; border:none; box-shadow:none; background:transparent}
  .menu.open .dropdown{display:block}
  .nav-links .menu > button{width:100%; text-align:right}
  .nav-links .menu .dropdown a{padding:10px 12px}
}

/* Sections / Cards */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005)), var(--card);
  border:1px solid var(--line); border-radius:16px; padding:22px;
  box-shadow:0 8px 24px rgba(0,0,0,.25)
}
.center{display:flex; flex-direction:column; align-items:center; text-align:center}
.lead{font-size:1.1rem; color:var(--muted)}
.footer{margin-top:36px; padding:16px; text-align:center; opacity:.75; border-top:1px solid var(--line)}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text)}
.btn.primary{border-color:var(--accent)}
.grid{display:grid; gap:12px}
