@font-face {
  font-family: "Kamyab";
  src: url("fonts/Kamyab.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; }
@font-face {
  font-family: "Kamyab";
  src: url("fonts/Kamyab-Bold.woff2") format("woff2");
  font-weight: 500;
  font-style: normal; }
@font-face {
  font-family: "Kamyab";
  src: url("fonts/Kamyab-Bold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal; }

/* ============ RESET ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* ============ THEME ============ */
:root{
  --bg:#f8fafc;
  --text:#0f172a;
  --muted:rgba(15,23,42,.75);
  --card:#ffffff;
  --line:rgba(15,23,42,.10);
  --p:#2563eb;
  --p2:#6366f1;
  --c:#22d3ee;
  --v:#a855f7;
  --shadow:0 14px 40px rgba(0,0,0,.10);
}
.dark{
  --bg:#020617;
  --text:#e5e7eb;
  --muted:rgba(229,231,235,.78);
  --card:#0b1222;
  --line:rgba(255,255,255,.10);
  --shadow:0 18px 55px rgba(0,0,0,.40);
}

/* ============ BASE ============ */
.app{
  background:var(--bg);
  color:var(--text);
  font-family: Kamyab;
  transition:background .25s,color .25s;
}
a{color:inherit;text-decoration:none}
strong{font-weight:900}

/* ============ UTIL ============ */
.fade-up{opacity:0;transform:translateY(18px);transition:.7s}
.fade-up.show{opacity:1;transform:none}
.glass{
  background:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(18px);
}
.dark .glass{
  background:rgba(2,6,23,.45);
  border:1px solid rgba(255,255,255,.10);
}

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:36px;height:36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  background:linear-gradient(135deg, var(--p2), var(--c));
  color:#fff;
}
.brand-name{font-weight:900}
.nav-links{display:flex;gap:16px;opacity:.88}
.nav-links a{padding:8px 10px;border-radius:10px}
.nav-links a:hover{background:rgba(37,99,235,.08)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-link{opacity:.85}
.theme-toggle{
  border:1px solid var(--line);
  background:transparent;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.btn-mini{
  padding:10px 14px;border-radius:12px;
  background:var(--p);color:#fff;font-weight:800;
}
.nav-burger{display:none;border:1px solid var(--line);background:transparent;border-radius:12px;padding:8px 10px;cursor:pointer}
.nav-mobile{
  display:none;
  max-width:1200px;
  margin:0 auto;
  padding:10px 18px 18px;
  border-top:1px solid var(--line);
}
.nav-mobile a{display:block;padding:10px 8px;border-radius:10px}
.nav-mobile a:hover{background:rgba(37,99,235,.08)}
@media (max-width: 920px){
  .nav-links{display:none}
  .nav-burger{display:block}
  .nav-mobile.open{display:block}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:16px;
  font-weight:900;
  transition:.25s;
}
.btn.primary{
  background:linear-gradient(135deg, var(--p2), var(--p));
  color:#fff;
  box-shadow:0 16px 40px rgba(37,99,235,.30);
}
.btn.primary:hover{transform:translateY(-2px)}
.btn.glass{
  background:rgba(255,255,255,.60);
  border:1px solid rgba(255,255,255,.35);
}
.dark .btn.glass{
  background:rgba(2,6,23,.35);
  border:1px solid rgba(255,255,255,.12);
}
.btn.glass:hover{transform:translateY(-2px)}

/* ============ HERO WOW ============ */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden}
.ai-aura{
  background:
    radial-gradient(circle at 20% 20%, rgba(99,102,241,.34), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(34,211,238,.28), transparent 42%),
    radial-gradient(circle at 55% 85%, rgba(168,85,247,.30), transparent 45%),
    linear-gradient(180deg, var(--bg), var(--bg));
}
.ai-orbs{position:absolute; inset:0; pointer-events:none}
.orb{
  position:absolute; width:320px; height:320px; border-radius:50%;
  filter:blur(90px); opacity:.55; animation:float 18s infinite alternate ease-in-out;
}
.orb-1{background:var(--p2); top:8%; left:12%}
.orb-2{background:var(--c); bottom:14%; right:14%; animation-duration:22s}
.orb-3{background:var(--v); top:56%; left:58%; animation-duration:26s}
@keyframes float{from{transform:translateY(-38px)}to{transform:translateY(38px)}}

.hero-inner{position:relative; z-index:2; max-width:1100px; padding:0 18px}
.hero-badge{
  display:inline-block;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  color:var(--text);
  opacity:.92;
  margin-bottom:18px;
}
.hero-title{
  font-size:clamp(40px,6vw,74px);
  font-weight:1000;
  line-height:1.2;
  margin-bottom:22px;
}
.hero-title .w{
  display:inline-block;
  opacity:0;
  transform:translateY(18px);
  animation:wordIn .6s forwards;
}
.hero-title .w:nth-child(1){animation-delay:.10s}
.hero-title .w:nth-child(2){animation-delay:.20s}
.hero-title .w:nth-child(3){animation-delay:.30s}
.hero-title .w:nth-child(4){animation-delay:.40s}
.hero-title .w:nth-child(5){animation-delay:.50s}
.hero-title .w:nth-child(6){animation-delay:.60s}

@keyframes wordIn{to{opacity:1;transform:none}}

.hero-title .glow{
  text-shadow:0 0 24px rgba(99,102,241,.9), 0 0 60px rgba(99,102,241,.6);
  animation:pulse 3s infinite ease-in-out;
}
@keyframes pulse{0%,100%{text-shadow:0 0 20px rgba(99,102,241,.55)}50%{text-shadow:0 0 45px rgba(99,102,241,1)}}

.hero-sub{font-size:18px; line-height:2; color:var(--muted); margin-bottom:40px}
.hero-actions{display:flex; justify-content:center; gap:14px; flex-wrap:wrap}
.micro{margin-top:18px; font-size:13px; color:var(--muted)}

.hero-preview{margin-top:36px; display:flex; justify-content:center}
.preview{width:min(760px, 100%); border-radius:22px; box-shadow:var(--shadow); overflow:hidden}
.preview-top{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.dot{width:10px;height:10px;border-radius:50%; background:rgba(0,0,0,.18)}
.dark .dot{background:rgba(255,255,255,.16)}
.preview-title{margin-inline-start:8px; font-weight:900; opacity:.9}
.chat{padding:18px; text-align:right}
.msg{padding:12px 14px;border-radius:16px; display:inline-block; max-width:92%; margin:8px 0; line-height:1.9}
.msg.user{background:rgba(37,99,235,.10)}
.msg.ai{background:rgba(34,211,238,.10)}
.typing{display:flex; gap:6px; margin-top:10px; justify-content:flex-start}
.typing span{width:6px;height:6px;border-radius:50%; background:rgba(15,23,42,.35); animation:b 1.2s infinite}
.dark .typing span{background:rgba(229,231,235,.30)}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.30s}
@keyframes b{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* ============ SECTIONS ============ */
.section{max-width:1200px;margin:0 auto;padding:96px 18px}
.title{font-size:34px;font-weight:1000;text-align:center;margin-bottom:10px}
.subtitle{text-align:center;color:var(--muted);line-height:2;margin-bottom:44px}

/* grids */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
@media (max-width: 980px){.split{grid-template-columns:1fr}}

/* cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px;
  box-shadow:var(--shadow);
  transition:.25s;
  position:relative;
  overflow:hidden;
}
.card:hover{transform:translateY(-6px)}
.icon{font-size:36px;margin-bottom:12px}
.card h3{font-size:20px;font-weight:1000;margin-bottom:10px}
.card p{color:var(--muted);line-height:1.95}
.card.muted{opacity:.65}
.tag{position:absolute;top:18px;left:18px;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.55)}
.dark .tag{background:rgba(2,6,23,.35)}
.tag.ok{color:#16a34a}
.tag.soon{color:#f59e0b}

/* strip */
.strip{padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip-inner{
  max-width:1200px;margin:0 auto;padding:0 18px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
@media (max-width: 900px){.strip-inner{grid-template-columns:repeat(2,1fr)}}
.proof{padding:14px 10px;text-align:center}
.proof-num{font-size: 35px;font-weight: 400;}
.proof-txt{color:var(--muted);font-size:13px}

/* demo */
.demo .title,.demo .subtitle{text-align:right}
.left{text-align:right !important}
.steps{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:12px;align-items:flex-start}
.step-n{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:1000;background:rgba(37,99,235,.12);color:var(--p);
}
.step-t{font-weight:1000;margin-bottom:2px}
.step-d{color:var(--muted);line-height:1.85;font-size:14px}
.note{margin-top:18px;color:var(--muted);line-height:1.95;border-right:3px solid rgba(37,99,235,.35);padding-right:12px}
.mock{border-radius:22px; box-shadow:var(--shadow); overflow:hidden}
.mock-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.mock-title{font-weight:1000;opacity:.9}
.mock-body{padding:18px;display:flex;flex-direction:column;gap:10px}
.pill{padding:12px 14px;border:1px solid var(--line);border-radius:16px;color:var(--muted);line-height:1.9}

/* how cards */
.alt{background:rgba(37,99,235,.05); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.big{
  width:64px;
  height:64px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 35px;
  font-weight: 400;
  color:var(--p);
  background:rgba(37,99,235,.12);
  margin-bottom:14px;
}
.stepcard{text-align:center}

/* features */
.list{display:flex;flex-direction:column;gap:14px}
.li{display:flex;gap:10px;align-items:center;line-height:1.9;color:var(--muted)}
.check{
  width:28px;height:28px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(37,99,235,.12); color:var(--p); font-weight:1000;
}
.highlight{border-radius:22px;padding:26px;box-shadow:var(--shadow)}
.highlight h3{font-weight:1000;margin-bottom:10px}
.highlight p{color:var(--muted);line-height:2}
.highlight .mini{margin-top:12px;color:var(--muted);font-size:13px}

/* CTA */
.cta{
  padding:120px 18px;
  text-align:center;
  background:
    radial-gradient(circle at center, rgba(99,102,241,.22), rgba(34,211,238,.10), transparent 60%);
  border-top:1px solid var(--line);
}
.cta-inner{max-width:760px;margin:0 auto}
.cta-title{font-size:clamp(28px,4vw,42px);font-weight:1000;margin-bottom:14px}
.cta-sub{color:var(--muted);line-height:2;margin-bottom:32px}
.cta-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* Footer */
.footer{padding:36px 0;border-top:1px solid var(--line)}
.footer-inner{max-width:1200px;margin:0 auto;padding: 0 400px;display:grid;gap:18px}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-name{font-weight:1000}
.foot-sub{color:var(--muted);font-size:13px}
.foot-links{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted)}
.foot-links a:hover{color:var(--text)}
.foot-note{color:var(--muted);font-size:12px}
/* ===============================
   FOOTER NEO
   =============================== */

.footer-neo{
  position:relative;
  margin-top:120px;
  padding:80px 18px 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(99,102,241,.18), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.0), rgba(2,6,23,.9));
  border-top:1px solid var(--line);
  overflow:hidden;
  margin-right: -800px;
}

.footer-glow{
  position:absolute;
  top:-120px;
  left:50%;
  transform:translateX(-50%);
  width:520px;
  height:220px;
  background:radial-gradient(circle, rgba(34,211,238,.25), transparent 70%);
  filter:blur(60px);
  pointer-events:none;
}

.footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  gap:48px;
}

/* Brand */
.footer-brand{
  max-width:520px;
}
.brand-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.brand-desc{
  color:var(--muted);
  line-height:2;
  width: 120%;
}

/* Grid */
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:36px;
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  color:var(--muted);
}

.col-title{
  font-weight:900;
  color:var(--text);
  margin-bottom:6px;
}

.footer-col a{
  color:var(--muted);
}
.footer-col a:hover{
  color:var(--text);
}

/* CTA */
.footer-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:22px 24px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  width: 700px;
  margin-left: 380px;
  margin-right: 280px;
}
.footer-cta span{
  color:var(--muted);
  font-size:14px;
  margin-right: 200px;
}

/* Legal */
.footer-legal{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  opacity:.75;
}
/* =================================
   FOOTER – MOBILE HARD OVERRIDE
   ================================= */
@media (max-width: 768px){

  /* جلوگیری از اسکرول افقی */
  html, body{
    overflow-x: hidden !important;
  }

  /* خنثی‌سازی کامل هک‌های دسکتاپ */
  .footer-neo{
    margin-right: 0 !important;
    padding: 64px 16px 28px !important;
  }

  .footer-inner{
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    gap: 32px !important;
  }

  /* Brand */
  .footer-brand{
    max-width: 100% !important;
    text-align: center !important;
  }

  .brand-row{
    justify-content: center !important;
  }

  .brand-desc{
    width: 100% !important;
    text-align: center !important;
  }

  /* Grid لینک‌ها */
  .footer-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  .footer-col{
    align-items: center !important;
    text-align: center !important;
  }

  /* CTA – مهم‌ترین بخش */
  .footer-cta{
    width: 100% !important;
    margin: 0 auto !important;
    padding: 20px !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 14px !important;
  }

  .footer-cta span{
    margin-right: 0 !important;
  }

}

/* Responsive */
@media (max-width: 720px){
  .footer-cta{
    flex-direction:column;
    text-align:center;
  }
}
@media (max-width: 920px){

  /* مخفی شدن لینک‌ها و دکمه شروع */
  .nav-actions .nav-link,
  .nav-actions .btn-mini{
    display: none;
  }

  /* دکمه تغییر تم باقی بمونه */
  .nav-actions{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 150px;
  }

}