:root{
  --bg:#0e0f12;
  --surface:#17181b;
  --muted:#9aa0a6;
  --accent:#4f8cff;
  --accent-2:#6ee7b7;
  --text:#e6eef8;
  --glass: rgba(255,255,255,0.03);
  --nav-h:80px;
  --radius:14px;
  --gap:12px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font-size:16px; line-height:1.45;
}
.app-shell{ min-height:100vh; padding-bottom: calc(var(--nav-h) + 18px); }

.app-header{ position:sticky; top:0; z-index:20; padding:14px; backdrop-filter: blur(8px); background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border-bottom:1px solid rgba(255,255,255,0.02); }
.brand{ display:flex; gap:10px; align-items:center; }
.brand-logo{ width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,var(--accent), #2e6fe8); padding:2px; box-shadow: 0 6px 18px rgba(0,0,0,0.7); }
.brand-title{ margin:0; font-size:18px; }
.brand-sub{ margin:0; color:var(--muted); font-size:12px }

.app-main{ padding:14px; display:block; }
.page{ display:none; opacity:0; transform: translateY(8px); transition: opacity .28s ease, transform .28s ease; }
.page.active{ display:block; opacity:1; transform: translateY(0); }

/* ========================================================= */
/*  🔵 H2 — خط انیمیشنی + نقطه متحرک                      */
/* ========================================================= */

.page-title{
  margin:0 0 20px 0;
  font-size:16px;
  position:relative;
  padding-bottom:14px;
}

/* خط */
.page-title::after{
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  width:100%;
  height:3px;
  border-radius:20px;
  background: linear-gradient(90deg, var(--accent), rgba(79,140,255,0));
  opacity:.75;
  animation: lineFade 3.2s infinite ease-in-out;
}

/* نقطه */
.page-title::before{
  content:"";
  position:absolute;
  bottom:-2px;
  right:0;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent);
  animation: dotMove 3.2s infinite ease-in-out;
}

/* انیمیشن حرکت نقطه */
@keyframes dotMove{
  0% { transform: translateX(0); opacity:1; }
  40% { transform: translateX(-90%); opacity:1; }
  60% { opacity:.6; }
  100% { transform: translateX(0); opacity:1; }
}

/* انیمیشن محو و ظاهر شدن خط */
@keyframes lineFade{
  0% { opacity:1; }
  50% { opacity:.3; }
  100% { opacity:1; }
}

/* ========================================================= */
/* کارت‌ها */
/* ========================================================= */

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 22px rgba(2,6,23,0.6);
  text-align: center;
}

.card-img {
  width: 60px;
  height: 60px;
  margin-bottom: 12px;
}

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  margin: 4px 0;
}

.card-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  margin: 0;
  color: var(--muted);
}

/* ========================================================= */
/* آکاردئون */
/* ========================================================= */

.accordion{ margin-top:8px; }
.accordion-item{ background:var(--surface); border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.03); margin-bottom:10px; }
.accordion-toggle{ width:100%; background:transparent; border:0; padding:12px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:var(--text); font-size:14px; }
.accordion-toggle:focus{ outline:2px solid rgba(79,140,255,0.14); }
.accordion-panel{ max-height:0; padding:0 12px; overflow:hidden; transition: max-height .32s cubic-bezier(.2,.8,.2,1), padding .28s; color:var(--muted); }
.accordion-panel.open{ padding:12px; }

/* ========================================================= */
/* تماس */
/* ========================================================= */

.contact-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
  justify-items:center;
  align-items:center;
}
.contact-btn{
  background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--text);
  border-radius:12px; padding:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:100px; height:100px; cursor:pointer;
  transition: transform .12s ease, background .14s ease;
}
.contact-btn:hover{ background: rgba(255,255,255,0.02); transform: translateY(-4px); }
.contact-btn:active{ transform:scale(.98); }
.contact-ic{ width:48px; height:48px; }
.contact-txt{ font-size:14px; text-align:center; color:var(--text) }

.contact-actions {
  display: grid; /* از گرید استفاده می‌کنیم برای دو ردیف */
  grid-template-columns: repeat(2, 1fr); /* دو ستون مساوی */
  gap: 10px; /* فاصله بین دکمه‌ها */
  margin-top: 12px;
  max-width: 500px; /* می‌تونی بر اساس نیاز تغییر بدی */
  margin-left: auto;
  margin-right: auto; /* وسط چین کردن */
}
.cta{ flex:1; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,0.06); background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); color:var(--text); font-weight:700; cursor:pointer; }
.cta.primary {
  display: inline-block;
  width: 100%; /* دکمه‌ها یکسان عرض باشند */
  text-align: center;
  padding: 12px 20px;
  background: linear-gradient(180deg, var(--accent), #2e6fe8);
  box-shadow: 0 10px 26px rgba(79,140,255,0.12);
  color: white;
  text-decoration: none; /* حذف خط زیر لینک */
  border-radius: 6px;
  font-weight: bold;
  transition: transform 0.2s;
}

.cta.primary:hover {
  transform: translateY(-2px);
}

/* ========================================================= */
/* ناوبری پایین */
/* ========================================================= */

.bottom-nav{
  position:fixed; left:12px; right:12px; bottom:12px; height:var(--nav-h); display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:10px; border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  box-shadow: 0 18px 60px rgba(0,0,0,0.65); border:1px solid rgba(255,255,255,0.03); z-index:40; backdrop-filter: blur(6px);
}
.nav-item{ flex:1; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; border-radius:14px; padding:8px; background:transparent; border:0; color:var(--muted); font-size:14px; cursor:pointer; transition: transform .14s ease, color .14s ease, background .14s ease; }
.nav-item .nav-ic{ width:28px; height:28px; filter:grayscale(0) contrast(1); }
.nav-item .nav-t{ font-size:14px; font-weight:600; }
.nav-item.active{ color:var(--accent); transform: translateY(-4px); background: linear-gradient(180deg, rgba(79,140,255,0.08), rgba(79,140,255,0.04)); box-shadow: 0 8px 22px rgba(79,140,255,0.06); }
.nav-item:focus{ outline:2px solid rgba(79,140,255,0.12); }

@media(min-width:720px){
  .contact-grid{ grid-template-columns: repeat(6,1fr); }
  .cards{ max-width:720px; margin-inline:auto; gap:16px; }
  .bottom-nav{ width:720px; left:50%; transform:translateX(-50%); }
}

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