/* ============================================================
   کربلا گشت — سیستم طراحی سایت
   ============================================================ */
:root{
  --bg-deep:#0b1310;
  --bg-deep-2:#0f1d17;
  --green-deep:#0b3d2e;
  --green-mid:#155c41;
  --green-soft:#eef6f0;
  --gold:#c9a227;
  --gold-soft:#e6c866;
  --gold-dim:#8a7328;
  --maroon:#6f1d24;
  --ivory:#f7f2e7;
  --ink:#1b211d;
  --muted:#6b6459;
  --line:#e4dcc4;
  --shadow-sm: 0 6px 18px -8px rgba(11,61,46,.18);
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.35);
  --radius: 18px;
  --radius-sm: 12px;
  --container: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Vazirmatn', sans-serif;
  background:var(--ivory);
  color:var(--ink);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--gold-soft); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-weight:800; color:var(--green-deep); }
p{ margin:0; }
button{ font-family:inherit; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:80px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.eyebrow{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.5px;
  color:var(--green-mid); background:var(--green-soft); padding:6px 18px;
  border-radius:30px; margin-bottom:14px;
}
.section-head h2{ font-size:clamp(24px,3.4vw,34px); margin-bottom:12px; }
.section-head p{ color:var(--muted); font-size:16px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 32px; border-radius:30px; font-weight:700; font-size:15.5px;
  cursor:pointer; border:none; transition:.25s all;
}
.btn-gold{
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  color:#1b1508; box-shadow:0 12px 26px -10px rgba(201,162,39,.55);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -8px rgba(201,162,39,.65); }
.btn-outline{
  background:transparent; color:var(--ivory); border:1.5px solid rgba(247,242,231,.5);
}
.btn-outline:hover{ background:rgba(247,242,231,.12); border-color:var(--ivory); }
.btn-outline-dark{
  background:transparent; color:var(--green-deep); border:1.5px solid var(--line);
}
.btn-outline-dark:hover{ background:var(--green-soft); border-color:var(--green-mid); }

/* ============================================================
   Header
   ============================================================ */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,19,16,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(230,200,102,.15);
}
nav{
  max-width:var(--container); margin:0 auto; padding:16px 24px;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
}
.logo{ display:flex; align-items:center; gap:10px; color:var(--gold-soft); font-size:1.35rem; font-weight:800; white-space:nowrap; }
.logo .lantern{ font-size:1.4rem; }
.logo img{ width:38px; height:38px; }
nav ul{ display:flex; gap:4px; align-items:center; flex-wrap:nowrap; min-width:0; }
nav ul li a{
  color:#e7e2d3; font-size:14px; font-weight:600; padding:9px 12px; border-radius:10px;
  transition:.2s all; white-space:nowrap;
}
nav ul li a:hover, nav ul li a.active{ color:var(--gold-soft); background:rgba(230,200,102,.08); }
.nav-cta{
  background:var(--gold-soft) !important; color:#1b1508 !important; padding:10px 22px !important;
  border-radius:30px !important; font-weight:800 !important;
}
.nav-toggle{ display:none; background:none; border:none; color:var(--gold-soft); font-size:26px; cursor:pointer; }

@media(max-width:1250px){
  nav ul{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch;
    background:#0b1310; padding:12px 20px 20px; gap:2px; border-bottom:1px solid rgba(230,200,102,.15);
    transform:translateY(-130%); transition:.3s transform; box-shadow:var(--shadow-lg);
  }
  nav ul.open{ transform:translateY(0); }
  nav ul li a{ display:block; padding:14px 16px; }
  .nav-toggle{ display:block; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative; overflow:hidden; text-align:center; color:var(--ivory);
  background:radial-gradient(ellipse at 50% -10%, var(--green-mid) 0%, var(--green-deep) 45%, var(--bg-deep-2) 78%, var(--bg-deep) 100%);
  padding:100px 20px 160px;
}
.hero::before{
  content:''; position:absolute; inset:0; opacity:.12; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='none' stroke='%23c9a227' stroke-width='1'><path d='M60 0 L120 60 L60 120 L0 60 Z'/><path d='M60 0 L60 120 M0 60 L120 60'/></g></svg>");
  background-size:120px 120px;
}
.hero::after{
  content:''; position:absolute; inset-inline-start:50%; top:-140px; width:560px; height:560px;
  transform:translateX(50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(230,200,102,.22) 0%, rgba(230,200,102,.07) 40%, transparent 70%);
  animation:heroGlow 7s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  from{ opacity:.65; transform:translateX(50%) scale(1); }
  to{ opacity:1; transform:translateX(50%) scale(1.15); }
}
.hero-inner{ position:relative; max-width:760px; margin:0 auto; }
.hero-inner > *{ animation:fadeUp .8s cubic-bezier(.16,1,.3,1) both; }
.hero-inner > *:nth-child(2){ animation-delay:.12s; }
.hero-inner > *:nth-child(3){ animation-delay:.22s; }
.hero-inner > *:nth-child(4){ animation-delay:.32s; }
.hero-inner > *:nth-child(5){ animation-delay:.45s; }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero .eyebrow-ar{
  font-family:'Amiri', serif; font-style:italic; color:var(--gold-soft);
  font-size:clamp(20px,3vw,26px); display:block; margin-bottom:14px;
}
.hero h1{ color:var(--ivory); font-size:clamp(32px,5.2vw,52px); margin-bottom:18px; }
.hero p.sub{ color:#d7d0bd; font-size:clamp(15px,2vw,18px); max-width:600px; margin:0 auto 34px; }
.hero .cta-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero .divider{ width:110px; height:2px; margin:24px auto; background:linear-gradient(90deg, transparent, var(--gold), transparent); }

/* stat strip */
.stat-strip{
  max-width:var(--container); margin:-38px auto 0; position:relative; z-index:5; padding:0 24px;
}
.stat-card{
  background:var(--ivory); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  border-top:5px solid var(--gold); display:grid; grid-template-columns:repeat(4,1fr);
  padding:34px 20px;
}
.stat-card .stat{ text-align:center; border-inline-end:1px solid var(--line); }
.stat-card .stat:last-child{ border-inline-end:none; }
.stat-card .num{ font-size:clamp(22px,3vw,32px); font-weight:900; color:var(--green-deep); }
.stat-card .lbl{ font-size:13.5px; color:var(--muted); margin-top:4px; }
@media(max-width:760px){
  .stat-card{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .stat-card .stat{ border-inline-end:none; border-bottom:1px solid var(--line); padding-bottom:16px; }
}

/* ============================================================
   Services grid
   ============================================================ */
.services-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:24px;
}
.service-card{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:30px 24px; transition:.25s all; text-align:center;
}
.service-card:hover{ border-color:var(--green-mid); box-shadow:var(--shadow-sm); transform:translateY(-4px); }
.service-card .icon{
  width:56px; height:56px; border-radius:16px; background:var(--green-soft); color:var(--green-deep);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:26px;
}
.service-card h3{ font-size:17px; margin-bottom:10px; }
.service-card p{ font-size:14px; color:var(--muted); }

/* ============================================================
   Offices / Contact cards
   ============================================================ */
.offices-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:22px; }
.office-card{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:.25s box-shadow, .25s transform;
}
.office-card:hover{ box-shadow:0 20px 40px -18px rgba(11,61,46,.25); transform:translateY(-2px); }
.office-card .map{ width:100%; height:160px; border:none; display:block; filter:saturate(.9); }
.office-card .body{ padding:18px 20px 20px; }
.office-card address{ font-style:normal; color:var(--ink); font-weight:600; font-size:14px; line-height:1.8; display:flex; gap:8px; }
.office-card address::before{ content:'📍'; flex:none; }
.office-card .phones{ margin-top:12px; display:flex; flex-direction:column; gap:5px; padding-top:12px; border-top:1px dashed var(--line); }
.office-card .phones a{ font-size:13.5px; color:var(--green-deep); font-weight:700; display:flex; align-items:center; gap:8px; }

/* contact quick info */
.contact-info-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-bottom:50px; }
.info-tile{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:22px;
  display:flex; gap:14px; align-items:flex-start;
}
.info-tile .icon{
  width:44px; height:44px; border-radius:12px; background:var(--green-deep); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex:none;
}
.info-tile h4{ font-size:15px; color:var(--ink); margin-bottom:6px; }
.info-tile p, .info-tile a{ font-size:14px; color:var(--muted); display:block; }
.info-tile a:hover{ color:var(--green-mid); }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{
  background:linear-gradient(135deg, var(--green-deep), var(--bg-deep-2));
  color:var(--ivory); text-align:center; padding:70px 20px; border-radius:var(--radius);
  position:relative; overflow:hidden;
}
.cta-band h2{ color:var(--ivory); font-size:clamp(22px,3vw,30px); margin-bottom:14px; }
.cta-band p{ color:#d7d0bd; margin-bottom:28px; }

/* ============================================================
   Footer
   ============================================================ */
footer{ background:var(--bg-deep); color:#b9b096; padding:60px 0 26px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px; }
.footer-grid h4{ color:var(--gold-soft); font-size:15.5px; margin-bottom:16px; }
.footer-grid p{ font-size:13.5px; color:#a79f86; line-height:1.9; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid ul li a{ font-size:13.5px; color:#c9c2a8; transition:.2s color; }
.footer-grid ul li a:hover{ color:var(--gold-soft); }
.footer-logo{ display:flex; align-items:center; gap:10px; color:var(--gold-soft); font-size:1.4rem; font-weight:800; margin-bottom:12px; }
.footer-logo img{ width:32px; height:32px; }
.footer-bottom{
  border-top:1px solid rgba(230,200,102,.12); padding-top:22px; text-align:center;
  font-size:13px; color:#8a8368;
}
@media(max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ============================================================
   Inner page hero (about/services/contact)
   ============================================================ */
.page-hero{
  background:radial-gradient(ellipse at 50% -10%, var(--green-mid) 0%, var(--green-deep) 45%, var(--bg-deep-2) 78%, var(--bg-deep) 100%);
  color:var(--ivory); text-align:center; padding:70px 20px 90px; position:relative; overflow:hidden;
}
.page-hero h1{ color:var(--ivory); font-size:clamp(26px,4vw,40px); }
.page-hero p{ color:#d7d0bd; margin-top:12px; max-width:560px; margin-inline:auto; }

/* generic content block */
.content-block{ max-width:820px; margin:0 auto; }
.content-block h2{ font-size:22px; margin:34px 0 14px; }
.content-block p{ color:var(--muted); font-size:15.5px; margin-bottom:14px; }
.content-block ul{ margin:14px 0; }
.content-block ul li{
  position:relative; padding-inline-start:26px; margin-bottom:10px; color:var(--muted); font-size:15px;
}
.content-block ul li::before{
  content:'✓'; position:absolute; inline-size:20px; inset-inline-start:0; color:var(--green-mid); font-weight:800;
}

/* ============================================================
   Editable content affordance
   ============================================================ */
[data-edit][contenteditable="true"]{
  outline:2px dashed var(--gold-dim); outline-offset:4px; border-radius:6px;
  background:rgba(230,200,102,.06); cursor:text;
}
[data-edit][contenteditable="true"]:focus{ outline-color:var(--green-mid); background:rgba(21,92,65,.06); }

/* ============================================================
   نمایان‌شدن هنگام اسکرول (reveal)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.visible{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform:translateY(26px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal-stagger.visible > *{ opacity:1; transform:none; }
.reveal-stagger.visible > *:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.visible > *:nth-child(3){ transition-delay:.16s; }
.reveal-stagger.visible > *:nth-child(4){ transition-delay:.24s; }
.reveal-stagger.visible > *:nth-child(5){ transition-delay:.32s; }
.reveal-stagger.visible > *:nth-child(6){ transition-delay:.4s; }
.reveal-stagger.visible > *:nth-child(7){ transition-delay:.48s; }
.reveal-stagger.visible > *:nth-child(8){ transition-delay:.56s; }
.reveal-stagger.visible > *:nth-child(9){ transition-delay:.64s; }

/* ============================================================
   چرا کربلا گشت — ویژگی‌ها
   ============================================================ */
.features-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; }
.feature-item{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:28px 22px; text-align:center; position:relative; overflow:hidden;
  transition:.25s transform, .25s box-shadow, .25s border-color;
}
.feature-item::before{
  content:''; position:absolute; inset-inline:0; top:0; height:4px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0; transition:.25s opacity;
}
.feature-item:hover{ transform:translateY(-5px); box-shadow:var(--shadow-sm); border-color:var(--gold-soft); }
.feature-item:hover::before{ opacity:1; }
.feature-item .f-icon{
  width:62px; height:62px; margin:0 auto 16px; border-radius:18px; font-size:28px;
  background:linear-gradient(145deg, var(--green-soft), #fff); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.feature-item h3{ font-size:16.5px; margin-bottom:8px; }
.feature-item p{ font-size:13.5px; color:var(--muted); }

/* ============================================================
   کارت‌های مرز / مسیرهای پرتردد
   ============================================================ */
.routes-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.route-card{
  position:relative; border-radius:var(--radius); overflow:hidden; color:var(--ivory);
  background:linear-gradient(150deg, var(--green-deep) 0%, var(--bg-deep-2) 90%);
  padding:30px 26px; border:1px solid rgba(230,200,102,.25);
  transition:.28s transform, .28s box-shadow;
}
.route-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -18px rgba(11,61,46,.5); }
.route-card::before{
  content:''; position:absolute; inset:0; opacity:.1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><g fill='none' stroke='%23e6c866' stroke-width='1'><path d='M45 0 L90 45 L45 90 L0 45 Z'/></g></svg>");
  background-size:90px 90px;
}
.route-card .r-flag{ font-size:30px; margin-bottom:12px; }
.route-card h3{ color:var(--gold-soft); font-size:20px; margin-bottom:8px; }
.route-card p{ color:#d7d0bd; font-size:13.5px; margin-bottom:18px; }
.route-card .r-meta{ display:flex; flex-direction:column; gap:7px; margin-bottom:22px; }
.route-card .r-meta span{ font-size:13px; color:#c9c2a8; display:flex; align-items:center; gap:8px; }
.route-card .r-meta span::before{ content:'◆'; color:var(--gold); font-size:9px; }
.route-card .btn{ padding:11px 26px; font-size:14px; position:relative; }

/* ============================================================
   مراحل ثبت درخواست
   ============================================================ */
.steps-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px; counter-reset:step; }
.step-item{ text-align:center; position:relative; padding:0 10px; }
.step-item .s-circle{
  width:66px; height:66px; margin:0 auto 16px; border-radius:50%; font-size:26px;
  background:linear-gradient(145deg, var(--green-deep), var(--green-mid)); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 26px -10px rgba(11,61,46,.45);
  position:relative;
}
.step-item .s-circle::after{
  counter-increment:step; content:counter(step);
  position:absolute; top:-6px; inset-inline-end:-6px; width:26px; height:26px; border-radius:50%;
  background:var(--gold); color:#1b1508; font-size:13px; font-weight:900;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--ivory);
}
.step-item h3{ font-size:16px; margin-bottom:8px; }
.step-item p{ font-size:13.5px; color:var(--muted); }

/* ============================================================
   سوالات متداول
   ============================================================ */
.faq-list{ max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; transition:.25s border-color, .25s box-shadow;
}
.faq-item.open{ border-color:var(--gold-soft); box-shadow:var(--shadow-sm); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 22px; cursor:pointer; font-weight:700; font-size:15px; color:var(--green-deep);
  user-select:none;
}
.faq-q .faq-arrow{
  flex:none; width:28px; height:28px; border-radius:50%; background:var(--green-soft);
  color:var(--green-mid); display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:.3s transform, .3s background;
}
.faq-item.open .faq-arrow{ transform:rotate(180deg); background:var(--gold-soft); color:#1b1508; }
.faq-a{
  max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease;
  padding:0 22px; color:var(--muted); font-size:14px; line-height:1.9;
}
.faq-item.open .faq-a{ max-height:280px; padding:0 22px 20px; }

/* ============================================================
   جزئیات ظریف
   ============================================================ */
header.scrolled{ box-shadow:0 10px 30px -12px rgba(0,0,0,.5); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
.section-link{ text-align:center; margin-top:38px; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; }
}