@font-face{
  font-family: IRANSans;
  font-style: normal;
  font-weight: 100;
  src: url("/assets/IRANSans/IRANSans-Thin.woff2") format("woff2"),
       url("/assets/IRANSans/IRANSans-Thin.woff") format("woff");
  font-display: swap;
}
@font-face{
  font-family: IRANSans;
  font-style: normal;
  font-weight: 300;
  src: url("/assets/IRANSans/IRANSans-Light.woff2") format("woff2"),
       url("/assets/IRANSans/IRANSans-Light.woff") format("woff");
  font-display: swap;
}
@font-face{
  font-family: IRANSans;
  font-style: normal;
  font-weight: 400;
  src: url("/assets/IRANSans/IRANSans.woff2") format("woff2"),
       url("/assets/IRANSans/IRANSans.woff") format("woff");
  font-display: swap;
}
@font-face{
  font-family: IRANSans;
  font-style: normal;
  font-weight: 500;
  src: url("/assets/IRANSans/IRANSans-Medium.woff2") format("woff2"),
       url("/assets/IRANSans/IRANSans-Medium.woff") format("woff");
  font-display: swap;
}
@font-face{
  font-family: IRANSans;
  font-style: normal;
  font-weight: 700;
  src: url("/assets/IRANSans/IRANSans-Bold.woff2") format("woff2"),
       url("/assets/IRANSans/IRANSans-Bold.woff") format("woff");
  font-display: swap;
}

/* =========================
   Orange + White theme (SAFE)
   فقط رنگ‌ها عوض شده، ساختار/ریسپانسیو همون نسخه سالمه
   ========================= */
:root{
  --bg: #ffffff;
  --bg2:#fff5ec;
  --card:#ffffff;
  --card2:#ffffff;
  --text:#1b1b1b;
  --muted:#666a73;
  --line: rgba(0,0,0,.08);
  --brand:#ff7a00;
  --brand2:#ff9a3d;
  --radius: 18px;
  --shadow: 0 18px 60px rgba(17,24,39,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: IRANSans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(255,122,0,.14), transparent 55%),
    radial-gradient(1200px 600px at 95% 18%, rgba(255,154,61,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  line-height:1.8;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}

.wrap{max-width:1200px; margin:0 auto; padding:0 20px}

/* ====== NAV ====== */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid var(--line);
}
.navin{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.brand span{font-size:15px}
.brand img{width:38px; height:38px; border-radius:10px; background:#fff; padding:6px; border:1px solid var(--line)}
.menu{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.menu a{color:var(--muted); font-size:14px; padding:8px 10px; border-radius:10px}
.menu a:hover{color:var(--text); background:rgba(0,0,0,.04)}

.cta{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px;
  border:1px solid rgba(255,122,0,.35);
  background:rgba(255,255,255,.70);
  color:#b44f00;
  font-weight:800; font-size:14px;
  cursor:pointer;
}
.btn:hover{background:rgba(255,122,0,.08)}
.btn.primary{
  border:none;
  color:#fff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 14px 40px rgba(255,122,0,.18);
}
.btn.primary:hover{filter:brightness(1.04)}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
}

/* Mobile nav toggle button */
.navToggle{
  display:none;
  width:42px; height:42px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  border-radius:12px;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.navToggle:hover{background:rgba(0,0,0,.04)}
.navToggle svg{width:20px;height:20px; fill:var(--text)}

/* ====== HERO / LAYOUT ====== */
.hero{padding:44px 0 26px}
.gridHero{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:stretch}
.hcard{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:26px;
  position:relative;
  overflow:hidden;
}
.hcard:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 260px at 12% 0%, rgba(255,122,0,.12), transparent 55%),
    radial-gradient(520px 260px at 92% 30%, rgba(255,154,61,.10), transparent 55%);
  pointer-events:none;
}
.hinner{position:relative}
h1{margin:10px 0 8px; font-size:34px; line-height:1.35}
.sub{color:var(--muted); font-size:15px; margin:0 0 16px}

.kpis{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.kpi{
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
  border-radius:14px;
  padding:10px 12px;
  min-width:160px;
}
.kpi b{display:block; font-size:13px}
.kpi span{color:var(--muted); font-size:12px}

.shot{
  border:1px solid var(--line);
  background:rgba(255,255,255,.70);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.mock{
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  overflow:hidden;
  background: #fff;
  height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(0,0,0,.45);
  text-align:center;
  padding:18px;
}

section{padding:26px 0}
.secTitle{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px}
.secTitle h2{margin:0; font-size:22px}
.secTitle p{margin:0; color:var(--muted); font-size:14px}

.cards{display:grid; grid-template-columns: repeat(3,1fr); gap:14px}
.card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.82);
  border-radius: var(--radius);
  padding:16px;
  transition:.2s transform, .2s background, .2s border-color;
  min-height: 160px;
}
.card:hover{transform: translateY(-2px); background: rgba(255,255,255,.92); border-color: rgba(255,122,0,.35)}
.tag{display:inline-flex; gap:6px; align-items:center; font-size:12px; color:var(--muted)}
.card h3{margin:10px 0 6px; font-size:16px}
.card p{margin:0; color:var(--muted); font-size:13px}

.split{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.panel{
  border:1px solid var(--line);
  background: rgba(255,255,255,.78);
  border-radius: var(--radius);
  padding:18px;
}
.panel h3{margin:0 0 8px}
.ul{margin:0; padding:0 18px 0 0; color:var(--muted); font-size:13px}
.ul li{margin:6px 0}

.logos{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:10px;
}
.logo{
  border:1px solid var(--line);
  background: rgba(255,255,255,.80);
  border-radius: 14px;
  padding:12px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(0,0,0,.55);
  text-align:center;
  font-size:12px;
}

footer{
  border-top:1px solid var(--line);
  padding:22px 0;
  color:var(--muted);
  font-size:13px;
  background: rgba(255,255,255,.65);
}

/* =========================
   MOBILE (hamburger + clean header)
   ========================= */
@media (max-width: 980px){
  .wrap{padding:0 14px}
  .navin{flex-wrap:wrap; padding:12px 0; gap:10px}

  .brand{order:1}
  .navToggle{display:flex; order:2; margin-right:auto}

  .cta{order:3; width:100%; justify-content:space-between; gap:10px}
  .cta .btn{flex:1; min-width:0}
  .cta .btn:first-child{flex:0 0 48px; padding:0; width:48px; height:44px}
  .cta .btn:first-child span{display:none}
  .cta .btn.primary{height:44px; white-space:nowrap}

  .menu{
    order:4;
    width:100%;
    display:none;
    flex-direction:column;
    gap:6px;
    padding:10px 0 2px;
    border-top:1px solid var(--line);
  }
  .menu a{
    display:block;
    padding:12px 10px;
    font-size:14px;
    background:rgba(255,255,255,.75);
    border:1px solid rgba(0,0,0,.08);
  }
  body.navOpen .menu{display:flex}

  .hero{padding:22px 0 14px}
  .gridHero{grid-template-columns: 1fr}
  .hcard{padding:16px}
  h1{font-size:24px}
  .sub{font-size:14px}
  .kpis{gap:8px; flex-direction:column; align-items:stretch}
  .kpi{min-width: unset; width:100%}
  .mock{height:220px}

  .secTitle{align-items:flex-start; flex-direction:column}
  .secTitle h2{font-size:18px}
  .cards{grid-template-columns: 1fr}
  .card{min-height:auto}
  .split{grid-template-columns: 1fr}
  .panel{padding:14px}
  .logos{grid-template-columns: repeat(2, 1fr)}
  .logo{height:auto; min-height:56px; padding:10px}
}

@media (max-width: 420px){
  h1{font-size:22px}
  .btn{font-size:13px}
}

/* ===== Header alignment fix (desktop) ===== */
@media (min-width: 981px){
  .navin{direction:rtl}
  .brand{order:1; flex:0 0 auto}
  .menu{order:2; flex:1; justify-content:center}
  .cta{order:3; flex:0 0 auto; justify-content:flex-start}
}