/* ============================================================
   سامانه رزرو اتوبوس عراق — «تمِ حرفه‌ای/لوکس» صفحاتِ داخلی
   بازطراحیِ کاملِ زبانِ بصری (صفحهٔ اصلی دست‌نخورده).
   CSS-only، پس از style.css/extras.css و پیش از CSSِ فرم‌ها.
   نکته: روی متنِ فارسی هرگز letter-spacing نمی‌گذاریم.
   ============================================================ */

/* ---------- پس‌زمینهٔ مِش (عمق به‌جای رنگِ تخت) ---------- */
body{
  background:
    radial-gradient(1100px 520px at 100% -8%, rgba(21,92,65,.12), transparent 58%),
    radial-gradient(900px 480px at -5% 8%, rgba(201,162,39,.12), transparent 55%),
    linear-gradient(180deg, #f8f3e8 0%, var(--ivory) 32%);
  background-attachment:fixed;
}

/* ============================================================
   ۱) هیروی سینمایی
   ============================================================ */
.page-hero{
  padding:132px 20px 116px;
  background:
    radial-gradient(1000px 520px at 82% -18%, #1f8a60 0%, transparent 55%),
    radial-gradient(760px 420px at 6% 128%, #0a6047 0%, transparent 52%),
    linear-gradient(158deg, #10553f 0%, #0b3d2e 46%, #072019 100%);
  isolation:isolate;
}
/* هالهٔ متحرک + بافتِ هندسی */
.page-hero::before{
  content:''; position:absolute; inset:-20% -10% auto -10%; height:150%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(520px 520px at 22% 18%, rgba(230,200,102,.22), transparent 62%),
    radial-gradient(560px 560px at 82% 30%, rgba(46,178,120,.20), transparent 60%);
  filter:blur(6px);
  animation:proAurora 12s ease-in-out infinite alternate;
}
.page-hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='none' stroke='%23e6c866' 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;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent);
          mask-image:linear-gradient(to bottom, #000, transparent);
}
@keyframes proAurora{
  from{ transform:translate3d(-2%, -1%, 0) scale(1); opacity:.85; }
  to{   transform:translate3d(3%, 2%, 0) scale(1.12); opacity:1; }
}
.page-hero > *{ position:relative; z-index:1; }
.page-hero h1{
  color:#fff; font-weight:900; font-size:clamp(34px, 6vw, 60px); line-height:1.25;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.page-hero h1::after{
  content:''; display:block; width:96px; height:4px; margin:26px auto 0; border-radius:4px;
  background:linear-gradient(90deg, transparent, var(--gold-soft), var(--gold), transparent);
  box-shadow:0 0 24px rgba(230,200,102,.7);
}
.page-hero p{ color:#e6e0cd; font-size:clamp(15px, 2vw, 19px); max-width:660px; margin-inline:auto; margin-top:16px; }

/* ============================================================
   ۲) ریتمِ بخش‌ها + واترمارکِ هندسی
   ============================================================ */
main .section{ padding:92px 0; position:relative; overflow:hidden; }
main > section.section:nth-of-type(2n){ background:linear-gradient(180deg, #f4efe0, #f6f1e4); }
main > section.section:nth-of-type(2n)::before{
  content:''; position:absolute; inset-inline-end:-80px; top:-80px; width:340px; height:340px; z-index:0;
  pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><g fill='none' stroke='%23c9a227' stroke-opacity='0.25' stroke-width='1.5'><path d='M100 0 L200 100 L100 200 L0 100 Z'/><path d='M100 30 L170 100 L100 170 L30 100 Z'/><path d='M100 60 L140 100 L100 140 L60 100 Z'/></g></svg>");
  background-size:contain; background-repeat:no-repeat;
}
main .section > .container{ position:relative; z-index:1; }
@media(max-width:760px){ main .section{ padding:58px 0; } }

/* ============================================================
   ۳) تایپوگرافیِ محتوایی (متنِ خامِ داخلِ container)
   ============================================================ */
main h1, main h2, main h3, main h4{ letter-spacing:0; }
main .container h2{
  position:relative; font-size:clamp(24px, 3.4vw, 34px); line-height:1.4; font-weight:900;
  margin:44px 0 16px; padding-inline-start:20px;
}
main .container h2::before{
  content:''; position:absolute; inset-inline-start:0; top:.18em; width:6px; height:1em; border-radius:4px;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
}
main .container h3{
  font-size:clamp(18px, 2.2vw, 22px); color:var(--green-mid); margin:30px 0 12px; font-weight:800;
  display:flex; align-items:center; gap:10px;
}
main .container h3::before{ content:'◆'; color:var(--gold); font-size:.7em; }
main .container p{ color:#463f34; font-size:16.5px; line-height:2; margin-bottom:14px; }
main .container > .container, main .container p a:not(.btn), main li a:not(.btn){ color:var(--green-mid); font-weight:600; }
main p a:not(.btn):hover, main li a:not(.btn):hover{ text-decoration:underline; text-underline-offset:3px; }

/* لیست‌های محتوایی با نشانگرِ لوکس */
main .container ul:not(.submenu):not(.footer-grid ul){ margin:16px 0; padding:0; }
main .container ul:not(.submenu) > li{
  position:relative; padding-inline-start:30px; margin-bottom:12px; color:#463f34; font-size:16px; line-height:1.95;
}
main .container ul:not(.submenu) > li::before{
  content:''; position:absolute; inset-inline-start:0; top:.55em; width:12px; height:12px; border-radius:3px;
  background:linear-gradient(135deg, var(--gold-soft), var(--gold)); transform:rotate(45deg);
  box-shadow:0 3px 8px -3px rgba(201,162,39,.7);
}

main blockquote{
  margin:26px 0; padding:20px 24px; border-inline-start:5px solid var(--gold);
  background:linear-gradient(135deg, #fdf8e6, #f8f2df); border-radius:14px;
  color:#3d382e; font-size:16px; line-height:2; box-shadow:0 14px 34px -22px rgba(201,162,39,.6);
}

/* ============================================================
   ۴) سرتیترِ بخش (وقتی .section-head هست)
   ============================================================ */
.section-head{ margin-bottom:56px; }
.section-head .eyebrow{
  letter-spacing:0; border:1px solid rgba(21,92,65,.16);
  background:linear-gradient(135deg, #eef6f0, #ffffff); box-shadow:0 6px 16px -10px rgba(21,92,65,.4);
}
.section-head h2{ position:relative; padding-bottom:24px; font-size:clamp(26px, 3.8vw, 38px); font-weight:900; }
.section-head h2::after{
  content:''; position:absolute; inset-inline-start:50%; transform:translateX(-50%); bottom:0;
  width:72px; height:4px; border-radius:4px; background:linear-gradient(90deg, var(--gold-soft), var(--gold));
  box-shadow:0 0 18px rgba(230,200,102,.6);
}

/* ============================================================
   ۵) کارت‌های لوکس (هر جا باشند)
   ============================================================ */
.service-card, .feature-item, .office-card, .info-tile, .kg-card, .step-card, .faq-item{
  border:1px solid #e7ddc4; border-radius:20px;
  background:linear-gradient(180deg, #ffffff, #fffdf8);
  box-shadow:0 18px 44px -28px rgba(11,61,46,.5);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.service-card, .feature-item, .step-card{ position:relative; overflow:hidden; }
.service-card::after, .feature-item::after, .step-card::after{
  content:''; position:absolute; inset-inline:0; top:0; height:4px; transform:scaleX(0); transform-origin:right;
  transition:transform .35s ease; background:linear-gradient(90deg, var(--gold-soft), var(--gold));
}
.service-card:hover, .feature-item:hover, .kg-card.kg-lift:hover, .step-card:hover{
  transform:translateY(-8px); box-shadow:0 34px 60px -30px rgba(11,61,46,.55); border-color:var(--gold-soft);
}
.service-card:hover::after, .feature-item:hover::after, .step-card:hover::after{ transform:scaleX(1); }
.office-card{ border-radius:20px; }
.office-card:hover{ box-shadow:0 34px 60px -30px rgba(11,61,46,.5); }
.service-card .icon, .feature-item .f-icon{
  background:linear-gradient(145deg, var(--green-mid), var(--green-deep)); color:var(--gold-soft);
  border:none; box-shadow:0 14px 26px -12px rgba(11,61,46,.6);
}

/* ============================================================
   ۶) دکمه‌های براق
   ============================================================ */
.btn{ letter-spacing:0; font-weight:800; padding:15px 38px; position:relative; overflow:hidden; }
.btn-gold{ box-shadow:0 14px 30px -12px rgba(201,162,39,.7); }
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -12px rgba(201,162,39,.8); }
.btn::before{
  content:''; position:absolute; top:0; inset-inline-start:-140%; width:70%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg); transition:none;
}
.btn:hover::before{ animation:proShine .8s ease; }
@keyframes proShine{ to{ inset-inline-start:160%; } }
.btn-outline-dark{ border:1.5px solid #d6ccac; }
.btn-outline-dark:hover{ background:var(--green-soft); border-color:var(--green-mid); }

/* ============================================================
   ۷) جدول‌ها
   ============================================================ */
main table:not(.confirm-table){
  width:100%; border-collapse:separate; border-spacing:0; margin:24px 0; font-size:14.5px;
  border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 18px 44px -30px rgba(11,61,46,.5);
}
main table:not(.confirm-table) th{
  background:linear-gradient(135deg, var(--green-mid), var(--green-deep)); color:var(--ivory);
  font-weight:800; padding:14px 16px; text-align:right;
}
main table:not(.confirm-table) td{ padding:12px 16px; text-align:right; border-bottom:1px solid var(--line); color:#463f34; }
main table:not(.confirm-table) tbody tr:nth-child(even){ background:#faf7ee; }
main table:not(.confirm-table) tbody tr:last-child td{ border-bottom:none; }

.content-block{ max-width:860px; }
.content-block img, main .container > img{ border-radius:18px; box-shadow:0 26px 54px -28px rgba(11,61,46,.55); }

/* ============================================================
   ۸) فوتر لوکس
   ============================================================ */
footer{
  padding:72px 0 30px; border-top:3px solid transparent;
  border-image:linear-gradient(90deg, transparent, var(--gold), transparent) 1;
  background:linear-gradient(180deg, #0a2e22 0%, var(--bg-deep) 100%);
  position:relative; overflow:hidden;
}
footer::before{
  content:''; position:absolute; inset:0; opacity:.06; 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'/></g></svg>");
  background-size:110px 110px;
}
footer .container{ position:relative; z-index:1; }
.footer-grid h4{ position:relative; padding-bottom:12px; margin-bottom:16px; }
.footer-grid h4::after{ content:''; position:absolute; inset-inline-start:0; bottom:0; width:38px; height:2px; background:linear-gradient(90deg, var(--gold), transparent); }
.footer-grid ul li a{ transition:color .2s, padding-inline-start .2s; }
.footer-grid ul li a:hover{ padding-inline-start:7px; color:var(--gold-soft); }

/* ---------- ریزه‌کاری ---------- */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
::selection{ background:var(--gold-soft); color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  .page-hero::before{ animation:none; }
  .btn:hover::before{ animation:none; }
  .service-card, .feature-item, .office-card, .kg-card, .step-card{ transition:none; }
}

/* ---------- گاردِ وسط‌چینی و رندرِ یکدست (هیچ صفحه‌ای به چپ/راست نچسبد) ---------- */
main .container{ margin-inline:auto; }
main .section > .container, main .content-block{ padding-inline:18px; }
main .content-block{ margin-inline:auto; }
/* تصاویرِ داخلِ مقالات: هرگز سرریز نکنند، گرد و سایه‌دار و وسط‌چین */
main .container img, main .content-block img{ max-width:100%; height:auto; }
main figure{ margin:24px auto; text-align:center; }
main figure img{ border-radius:16px; box-shadow:0 16px 40px -18px rgba(0,0,0,.4); }
main figcaption{ font-size:12.5px; color:#77705f; margin-top:8px; }
/* جدول‌های مقالات در موبایل: اسکرولِ داخلی به‌جای بیرون‌زدن از صفحه */
main table{ max-width:100%; }
@media (max-width:640px){
  main .section > .container, main .content-block{ padding-inline:14px; }
  main{ overflow-x:hidden; }
}