:root{
    --ink:#14181d;
    --steel-900:#181f27;
    --steel-800:#212a34;
    --steel-700:#333f4c;
    --steel-600:#576474;
    --steel-500:#7c8998;
    --paper:#ffffff;
    --paper-2:#ffffff;
    --line:#e3e3e0;
    --amber:#f0b90d;
    --amber-2:#ffd23f;
    --sync:#4f9b6e;
    --white:#ffffff;
    --sans:'Vazirmatn', system-ui, sans-serif;
    --mono:'Vazirmatn', system-ui, sans-serif;
    --max:1180px;
  }
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; overflow-x:hidden; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }
  body{
    margin:0;
    font-family:var(--sans);
    background:var(--paper);
    color:var(--ink);
    line-height:1.7;
    font-size:16px;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:var(--sans);
    font-weight:700;
    line-height:1.35;
    margin:0 0 .5em;
    letter-spacing:-0.01em;
  }
  p{ margin:0 0 1em; color:var(--steel-700); }
  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; max-width:100%; }
  .mono{ font-family:var(--mono); direction:ltr; unicode-bidi:isolate; }
  .container{ max-width:var(--max); margin:0 auto; padding:0 28px; }
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--amber-2);
    outline-offset:3px;
    border-radius:2px;
  }

  /* ---------- HEADER ---------- */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:var(--steel-900);
    border-bottom:1px solid var(--steel-700);
  }
  .header-inner{
    max-width:var(--max); margin:0 auto; padding:0 28px;
    height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  }
  .logo{ display:flex; align-items:center; gap:10px; }
  .logo-mark{ width:34px; height:34px; flex:none; object-fit:contain; }
  .logo-text{ color:var(--paper); font-weight:700; font-size:1.02rem; white-space:nowrap; }
  .site-nav{ display:flex; gap:30px; }
  .site-nav a{
    color:var(--steel-500); font-size:.92rem; font-weight:500;
    padding:6px 0; border-bottom:1px solid transparent;
    transition:color .15s ease, border-color .15s ease;
  }
  .site-nav a:hover{ color:var(--paper); border-color:var(--amber-2); }
  .header-actions{ display:flex; align-items:center; gap:16px; }
  .nav-cta{
    background:var(--amber); color:var(--steel-900); font-weight:600; font-size:.88rem;
    padding:10px 18px; border-radius:3px; white-space:nowrap;
    transition:background .15s ease;
  }
  .nav-cta:hover{ background:var(--amber-2); }
  .menu-toggle{
    display:none; background:none; border:1px solid var(--steel-700); color:var(--paper);
    width:40px; height:40px; border-radius:3px; cursor:pointer; flex:none;
  }
  .menu-toggle span{
    display:block; width:18px; height:2px; background:var(--paper); margin:4px auto;
  }

  /* ---------- HERO ---------- */
  .hero{ background:var(--steel-900); color:var(--paper); overflow:hidden; }
  .hero-inner{
    max-width:var(--max); margin:0 auto; padding:76px 28px 64px;
    display:grid; grid-template-columns:.82fr 1.18fr; gap:36px; align-items:center;
  }
  .hero-label{
    color:var(--amber-2); font-weight:600; font-size:.95rem; margin:0 0 18px;
  }
  .hero h1{
    color:var(--white); font-size:clamp(1.7rem, 2.8vw, 2.5rem); max-width:12ch;
  }
  .hero-sub{ color:var(--steel-500); font-size:1rem; max-width:38ch; margin-bottom:28px; }
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 26px; border-radius:3px; font-weight:600; font-size:.95rem;
    border:1px solid transparent; transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn-primary{ background:var(--amber); color:var(--steel-900); }
  .btn-primary:hover{ background:var(--amber-2); }
  .btn-ghost{ border-color:var(--steel-600); color:var(--paper); }
  .btn-ghost:hover{ border-color:var(--paper); }
  .btn-large{ padding:16px 34px; font-size:1rem; }

  .project-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
  }
  .project-card{
    position:relative; border-radius:4px; overflow:hidden; aspect-ratio:4/3;
    border:1px solid var(--steel-700); background:var(--steel-800);
  }
  .icon-panel{
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    color:var(--paper);
  }
  .icon-panel svg{ width:50%; height:50%; }
  .project-card::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(20,24,29,.9) 0%, rgba(20,24,29,0) 60%);
  }
  .project-card span{
    position:absolute; right:14px; bottom:13px; left:14px; z-index:1;
    color:var(--paper); font-size:.88rem; font-weight:600;
  }

  /* ---------- STATS ---------- */
  .stats{
    background:var(--steel-800); border-top:1px solid var(--steel-700);
    border-bottom:1px solid var(--steel-700);
  }
  .stats-inner{
    max-width:var(--max); margin:0 auto; padding:26px 28px;
    display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .stat{ display:flex; align-items:baseline; gap:10px; }
  .stat-num{
    font-family:var(--mono); color:var(--amber-2); font-size:1.4rem; font-weight:600;
    direction:ltr;
  }
  .stat-label{ color:var(--steel-500); font-size:.88rem; }

  /* ---------- SECTION HEAD ---------- */
  .section-head{ max-width:56ch; margin-bottom:44px; }
  .section-head-row{
    max-width:none; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  }
  .section-head-row .section-head-text{ max-width:56ch; margin-bottom:0; }
  .section-head h2{ font-size:clamp(1.5rem, 2.4vw, 2rem); }
  .section-head p{ font-size:1.02rem; }
  section{ padding:80px 0; }

  /* ---------- SERVICES ---------- */
  .services{ background:var(--paper); border-top:1px solid var(--line); }
  .service-list{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
  }
  .service{
    border:1px solid var(--line); border-radius:3px; overflow:hidden;
    display:flex; flex-direction:column; background:var(--paper-2);
  }
  .service-photo{
    position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--steel-800);
  }
  .service-photo .icon-panel svg{ width:38%; height:38%; }
  .service-body{ padding:22px 20px 22px; }
  .pill{
    display:inline-block; background:var(--paper-2); border:1px solid var(--line);
    color:var(--steel-700); font-size:.76rem; font-weight:600; padding:4px 10px;
    border-radius:20px; margin-bottom:12px;
  }
  .portfolio{ background:var(--paper); border-top:1px solid var(--line); }

  /* ---------- CLIENTS MARQUEE ---------- */
  .clients-showcase{
    background:var(--steel-800); padding:52px 0; overflow:hidden;
  }
  .clients-showcase .section-head{ margin-bottom:24px; }
  .clients-showcase .section-head h2{ color:var(--white); }
  .clients-showcase .section-head p{ color:var(--steel-500); }
  .marquee-wrap{
    overflow:hidden; width:100%; margin-top:6px;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
  .marquee-track{
    display:flex; gap:22px; width:max-content;
    animation:marquee-right 30s linear infinite;
  }
  .marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
  @keyframes marquee-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0%); } }
  .client-badge{
    display:flex; align-items:center; gap:16px; white-space:nowrap;
    background:var(--steel-700); border:1px solid var(--steel-600); border-radius:8px; padding:18px 28px;
    transition:background .18s ease, border-color .18s ease;
  }
  .client-badge:hover{ background:var(--amber); border-color:var(--amber); }
  .client-badge .mono-logo{
    width:60px; height:60px; border-radius:8px; flex:none;
    background:var(--steel-900); color:var(--amber-2);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:.86rem; transition:background .18s ease, color .18s ease;
  }
  .client-badge .client-name{ font-weight:600; color:var(--paper); font-size:1.05rem; transition:color .18s ease; }
  .client-badge:hover .client-name{ color:var(--steel-900); }
  .service-icon{ width:44px; height:44px; color:var(--steel-700); margin-bottom:18px; }
  .service-cta{
    display:inline-block; margin-top:16px; font-size:.9rem; font-weight:600;
    color:var(--steel-900); border-bottom:1px solid var(--amber); padding-bottom:2px;
    transition:color .15s ease, border-color .15s ease;
  }
  .service-cta:hover{ color:var(--amber); }
  .service h3{ font-size:1.1rem; margin-bottom:10px; }
  .service p{ font-size:.96rem; margin-bottom:0; }

  /* ---------- SHOP ---------- */
  .shop{ background:var(--paper); border-top:1px solid var(--line); }
  .shop-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
  }
  .product{
    border:1px solid var(--line); border-radius:3px; overflow:hidden;
    display:flex; flex-direction:column; background:var(--white);
  }
  .product-photo{ aspect-ratio:4/3; overflow:hidden; background:var(--steel-800); }
  .product-photo .icon-panel svg{ width:50%; height:50%; transition:transform .3s ease; }
  .product:hover .product-photo .icon-panel svg{ transform:scale(1.05); }
  .product-body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
  .product-body h3{ font-size:1rem; margin-bottom:6px; }
  .product-spec{ color:var(--steel-600); font-size:.85rem; margin-bottom:14px; }
  .product-spec .mono{ color:var(--steel-700); }
  .product-foot{
    margin-top:auto; display:flex; align-items:center; justify-content:space-between;
    padding-top:14px; border-top:1px solid var(--line);
  }
  .product-price{ font-size:.85rem; color:var(--steel-600); border-bottom:1px dashed var(--steel-600); }
  .product-price:hover{ color:var(--amber); border-color:var(--amber); }
  .product-link{
    font-size:.88rem; font-weight:600; color:var(--steel-900);
    border-bottom:1px solid var(--amber); padding-bottom:1px;
  }
  .product-link:hover{ color:var(--amber); }
  .shop-note{ color:var(--steel-600); font-size:.9rem; margin-top:28px; }

  /* ---------- ABOUT ---------- */
  .about{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .about-inner{
    max-width:var(--max); margin:0 auto; padding:0 28px;
    display:grid; grid-template-columns:3fr 2fr; gap:48px; align-items:start;
  }
  .about-text h2{ font-size:clamp(1.5rem, 2.4vw, 2rem); }
  .about-text p{ font-size:1.02rem; }

  /* ---------- MINI CONTACT FORM ---------- */
  .mini-form{
    background:var(--white); border:1px solid var(--line); border-radius:8px;
    padding:26px 24px; box-shadow:0 1px 2px rgba(20,24,29,.04);
  }
  .mini-form h3{ font-size:1.05rem; margin-bottom:4px; }
  .mini-form .mini-form-sub{ color:var(--steel-600); font-size:.88rem; margin-bottom:18px; }
  .mini-form label{ display:block; font-size:.86rem; color:var(--steel-700); font-weight:600; margin-bottom:6px; }
  .mini-form .field{ margin-bottom:14px; }
  .mini-form input, .mini-form textarea{
    width:100%; border:1px solid var(--line); border-radius:6px; padding:11px 13px;
    font-family:var(--sans); font-size:.94rem; color:var(--ink); background:var(--paper-2);
    transition:border-color .15s ease, background .15s ease;
  }
  .mini-form input:focus, .mini-form textarea:focus{
    outline:none; border-color:var(--amber); background:var(--white);
  }
  .mini-form textarea{ resize:vertical; min-height:70px; }
  .mini-form button{
    width:100%; border:none; cursor:pointer; background:var(--amber); color:var(--steel-900);
    font-family:var(--sans); font-weight:700; font-size:.96rem; padding:13px; border-radius:6px;
    transition:background .15s ease;
  }
  .mini-form button:hover{ background:var(--amber-2); }
  .mini-form .mini-form-note{ color:var(--steel-500); font-size:.78rem; margin:10px 0 0; text-align:center; }
  .mini-form .form-status{
    display:none; margin-top:14px; padding:11px 13px; border-radius:6px;
    font-size:.88rem; font-weight:600; text-align:center;
  }
  .mini-form .form-status.show{ display:block; }
  .mini-form .form-status.success{ background:#eaf4ee; color:var(--sync); }
  .mini-form .form-status.error{ background:#fbeaea; color:#c0392b; }
  .mini-form button[disabled]{ opacity:.6; cursor:not-allowed; }

  /* ---------- BRANDS ---------- */
  .brands{ background:var(--steel-900); padding:44px 0; }
  .brands-inner{
    max-width:var(--max); margin:0 auto; padding:0 28px;
    display:flex; align-items:center; gap:36px; flex-wrap:wrap;
    justify-content:space-between;
  }
  .brands-label{ color:var(--steel-500); font-size:.92rem; margin:0; white-space:nowrap; }
  .brand-list{ display:flex; gap:36px; flex-wrap:wrap; }
  .brand-list span{
    color:var(--paper); font-family:var(--mono); font-size:.95rem; letter-spacing:.02em;
  }

  /* ---------- CONTACT ---------- */
  .contact{ background:var(--steel-900); color:var(--paper); border-top:1px solid var(--steel-700); }
  .contact-inner{
    max-width:var(--max); margin:0 auto; padding:0 28px;
    display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:start;
  }
  .contact-text h2{ color:var(--white); font-size:clamp(1.5rem, 2.4vw, 2rem); }
  .contact-text > p{ color:var(--steel-500); font-size:1.02rem; max-width:44ch; }
  .contact-list{ list-style:none; margin:28px 0 0; padding:0; border-top:1px solid var(--steel-700); }
  .contact-list li{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:16px 0; border-bottom:1px solid var(--steel-700);
  }
  .contact-list .label{ color:var(--steel-500); font-size:.9rem; }
  .contact-list a, .contact-list span.value{
    font-family:var(--mono); color:var(--paper); font-size:.98rem; direction:ltr; text-align:left;
  }
  .contact-list a:hover{ color:var(--amber-2); }
  .contact-cta{
    background:var(--steel-800); border:1px solid var(--steel-700); border-radius:4px;
    padding:32px; text-align:center;
  }
  .contact-cta p{ color:var(--steel-500); margin-bottom:20px; font-size:.94rem; }

  /* ---------- FOOTER ---------- */
  .site-footer{
    background:var(--steel-900); border-top:1px solid var(--steel-700);
    padding:22px 0; text-align:center;
  }
  .site-footer p{ color:var(--steel-600); font-size:.85rem; margin:0; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:900px){
    .hero-inner{ grid-template-columns:1fr; padding-top:52px; }
    .hero-visual{ order:-1; }
    .hero h1{ max-width:none; }
    .about-inner{ grid-template-columns:1fr; }
    .contact-inner{ grid-template-columns:1fr; }
    .service-list{ grid-template-columns:repeat(2, 1fr); }
    .shop-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:520px){
    .service-list{ grid-template-columns:1fr; }
    .shop-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:780px){
    .site-nav{
      position:fixed; inset:72px 0 auto 0; background:var(--steel-900);
      flex-direction:column; gap:0; padding:8px 28px 18px;
      border-bottom:1px solid var(--steel-700);
      transform:translateY(-8px); opacity:0; pointer-events:none;
      transition:opacity .15s ease, transform .15s ease;
    }
    .site-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
    .site-nav a{ padding:14px 0; border-bottom:1px solid var(--steel-800); width:100%; }
    .menu-toggle{ display:block; }
    .nav-cta{ display:none; }
    section{ padding:56px 0; }
    .stats-inner{ justify-content:flex-start; }
    .marquee-wrap{
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      -webkit-mask-image:none; mask-image:none;
      scroll-snap-type:x proximity; padding-bottom:6px;
    }
    .marquee-track{ animation:none; width:max-content; }
    .marquee-track .client-badge[aria-hidden="true"]{ display:none; }
    .client-badge{ scroll-snap-align:start; }
  }
  
  /* =========================================================
   Navigation Dropdowns
   ========================================================= */

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-nav > a,
.nav-link-wrapper > a {
  text-decoration: none;
}


/* ---------- Dropdown Parent ---------- */

.nav-item {
  position: relative;
}

.nav-link-wrapper {
  display: flex;
  align-items: center;
  gap: 2px;
}


/* ---------- Dropdown Toggle ---------- */

.dropdown-toggle,
.submenu-toggle {
  border: 0;
  background: transparent;
  padding: 5px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}


/* ---------- Main Dropdown ---------- */

.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  min-width: 270px;

  background: #fff;

  border-radius: 12px;

  padding: 8px;

  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.12);

  border: 1px solid rgba(0, 0, 0, 0.06);

  opacity: 0;
  visibility: hidden;

  transform: translateY(8px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;

  z-index: 1000;
}


/* Desktop hover */

@media (min-width: 769px) {

  .has-dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

}


/* ---------- Dropdown Links ---------- */

.dropdown-menu > a,
.dropdown-group > .submenu-link-wrapper > a,
.submenu > a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding: 10px 12px;

  border-radius: 8px;

  color: inherit;

  text-decoration: none;

  font-size: 14px;

  line-height: 1.7;

  transition:
    background-color 0.2s ease,
    padding-right 0.2s ease;
}


.dropdown-menu > a:hover,
.dropdown-group > .submenu-link-wrapper > a:hover,
.submenu > a:hover {

  background: rgba(0, 0, 0, 0.05);

  padding-right: 16px;
}


/* ---------- Nested Submenu ---------- */

.dropdown-group {
  position: relative;
}


.submenu-link-wrapper {
  display: flex;
  align-items: center;
}


.submenu-link-wrapper > a {
  flex: 1;
}


.submenu-toggle {
  flex-shrink: 0;
}


.submenu {
  position: absolute;

  top: -8px;

  right: calc(100% + 8px);

  min-width: 280px;

  background: #fff;

  border-radius: 12px;

  padding: 8px;

  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.12);

  border: 1px solid rgba(0, 0, 0, 0.06);

  opacity: 0;

  visibility: hidden;

  transform: translateX(8px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;

  z-index: 1001;
}


@media (min-width: 769px) {

  .has-submenu:hover > .submenu-link-wrapper + .submenu,
  .has-submenu:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

}


/* ---------- Third Level ---------- */

.submenu-group {
  position: relative;
}


.submenu-group > .submenu {
  right: calc(100% + 8px);
}


/* =========================================================
   Mobile Navigation
   ========================================================= */

@media (max-width: 768px) {

  .site-nav {
    display: none;

    position: absolute;

    top: 100%;

    right: 0;
    left: 0;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding: 12px;

    background: #fff;

    box-shadow:
      0 15px 30px rgba(0, 0, 0, 0.1);

    max-height: calc(100vh - 80px);

    overflow-y: auto;

    z-index: 999;
  }


  .site-nav.open {
    display: flex;
  }


  .site-nav > a,
  .nav-link-wrapper > a {

    padding: 12px;

    display: block;

    width: 100%;
  }


  .nav-item {
    width: 100%;
  }


  .nav-link-wrapper {
    width: 100%;

    justify-content: space-between;
  }


  .dropdown-toggle,
  .submenu-toggle {
    padding: 10px 14px;
  }


  /* Main dropdown on mobile */

  .dropdown-menu {

    position: static;

    display: none;

    min-width: 0;

    width: 100%;

    padding: 4px 8px;

    margin-top: 2px;

    border: 0;

    border-radius: 8px;

    box-shadow: none;

    opacity: 1;

    visibility: visible;

    transform: none;

    background: rgba(0, 0, 0, 0.025);
  }


  .has-dropdown.open > .dropdown-menu {
    display: block;
  }


  /* Nested submenu */

  .submenu {

    position: static;

    display: none;

    min-width: 0;

    width: 100%;

    padding: 4px 8px;

    margin-top: 2px;

    border: 0;

    border-radius: 8px;

    box-shadow: none;

    opacity: 1;

    visibility: visible;

    transform: none;

    background: rgba(0, 0, 0, 0.025);
  }


  .has-submenu.open > .submenu {
    display: block;
  }


  .dropdown-menu > a,
  .dropdown-group > .submenu-link-wrapper > a,
  .submenu > a {

    padding: 10px;

    font-size: 13px;
  }


  .header-actions {
    margin-right: auto;
  }

}

/* =========================================================
   Dropdown Text Visibility Fix
   ========================================================= */

.site-nav .dropdown-menu,
.site-nav .submenu {
  color: #222;
}

.site-nav .dropdown-menu a,
.site-nav .dropdown-menu a:visited,
.site-nav .submenu a,
.site-nav .submenu a:visited {
  color: #222;
  text-decoration: none;
}

.site-nav .dropdown-menu a:hover,
.site-nav .submenu a:hover {
  color: #111;
  background: rgba(0, 0, 0, 0.06);
}


/* متن گزینه‌هایی که دارای زیرمنو هستند */

.site-nav .submenu-link-wrapper > a,
.site-nav .submenu-link-wrapper > a:visited {
  color: #222;
}


/* فلش‌های Dropdown */

.site-nav .dropdown-toggle,
.site-nav .submenu-toggle {
  color: #222;
}


/* جلوگیری از سفید شدن متن در حالت‌های مختلف */

.site-nav .dropdown-menu *,
.site-nav .submenu * {
  color: inherit;
}

/* فاصله مناسب لینک‌های ساده منو */

.site-nav > a {
  padding: 10px 14px;
}

.site-nav > a + a {
  margin-right: 6px;
}

/* =========================================================
   Internal Pages
   ========================================================= */

.container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}


/* ---------- Page Hero ---------- */

.page-hero {
  padding: 100px 0 70px;
  text-align: center;
}


.page-hero .section-eyebrow,
.section-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
}


.page-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.35;
}


.page-hero p {
  max-width: 720px;
  margin: 0 auto;
  line-height: 2;
}


/* ---------- Section Heading ---------- */

.section-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}


.section-heading h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 4vw, 38px);
}


.section-heading p {
  line-height: 2;
}


/* ---------- Portfolio ---------- */

.portfolio-page {
  padding: 70px 0 100px;
}


.portfolio-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 28px;
}


.portfolio-card {
  overflow: hidden;

  border-radius: 18px;

  background: #fff;

  border: 1px solid rgba(0, 0, 0, 0.07);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.portfolio-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.1);
}


.portfolio-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}


.portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  display: block;

  transition:
    transform 0.35s ease;
}


.portfolio-card:hover .portfolio-image img {
  transform: scale(1.04);
}


.portfolio-content {
  padding: 24px;
}


.portfolio-category {
  font-size: 13px;
  font-weight: 700;
}


.portfolio-content h3 {
  margin: 8px 0 12px;
  font-size: 20px;
}


.portfolio-content p {
  margin: 0;
  line-height: 2;
  font-size: 14px;
}


/* ---------- Page CTA ---------- */

.page-cta {
  padding: 80px 20px;

  text-align: center;
}


.page-cta h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 4vw, 38px);
}


.page-cta p {
  max-width: 650px;
  margin: 0 auto 28px;
  line-height: 2;
}


.page-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 13px 25px;

  border-radius: 10px;

  text-decoration: none;
}


/* ---------- Contact Page ---------- */

.contact-page {
  padding: 70px 0 100px;
}


.contact-page-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  gap: 60px;

  align-items: start;
}


.contact-info h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 4vw, 40px);
}


.contact-info > p {
  line-height: 2;
  margin-bottom: 35px;
}


.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.contact-info-item {
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 16px;

  border-radius: 12px;

  text-decoration: none;

  border: 1px solid rgba(0, 0, 0, 0.07);
}


.contact-info-item > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.contact-info-item strong {
  font-size: 15px;
}


.contact-info-item small {
  font-size: 13px;
}


.contact-info-icon {
  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 18px;
}


/* ---------- Contact Form ---------- */

.contact-form-wrapper {
  padding: 32px;

  border-radius: 20px;

  border: 1px solid rgba(0, 0, 0, 0.07);

  background: #fff;
}


.contact-form-header {
  margin-bottom: 28px;
}


.contact-form-header h2 {
  margin: 0 0 12px;
}


.contact-form-header p {
  margin: 0;
  line-height: 1.9;
  font-size: 14px;
}


#contactForm {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.form-group label {
  font-size: 14px;
  font-weight: 600;
}


.form-group input,
.form-group textarea {
  width: 100%;

  box-sizing: border-box;

  padding: 13px 14px;

  border: 1px solid rgba(0, 0, 0, 0.15);

  border-radius: 10px;

  font-family: inherit;

  font-size: 14px;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.form-group input:focus,
.form-group textarea:focus {
  border-color: currentColor;

  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.05);
}


.form-group textarea {
  resize: vertical;
}


#mf-submit {
  width: 100%;

  padding: 14px 20px;

  border: 0;

  border-radius: 10px;

  font-family: inherit;

  font-size: 15px;

  font-weight: 700;

  cursor: pointer;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}


#mf-submit:hover {
  opacity: 0.9;
}


#mf-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


.form-status {
  display: none;

  padding: 12px;

  border-radius: 8px;

  font-size: 14px;

  line-height: 1.8;
}


.form-status.show {
  display: block;
}


.form-status.success {
  background: #eaf7ed;
}


.form-status.error {
  background: #fdecec;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 768px) {

  .container {
    width: min(100% - 28px, 1180px);
  }


  .page-hero {
    padding: 70px 0 45px;
  }


  .portfolio-page,
  .contact-page {
    padding: 50px 0 70px;
  }


  .portfolio-grid {
    grid-template-columns: 1fr;
  }


  .contact-page-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }


  .contact-form-wrapper {
    padding: 22px;
  }


  .page-cta {
    padding: 60px 20px;
  }

}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  margin-top: 80px;
  background: #151c24;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}


.footer-inner {
  width: min(1140px, calc(100% - 40px));
  margin: 0 auto;

  padding: 80px 0;

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;

  gap: 70px;

  align-items: start;
}


/* ---------- Contact ---------- */

.footer-heading {
  margin-bottom: 28px;
}


.footer-heading .section-eyebrow {
  color: #7188a2;
  margin-bottom: 8px;
}


.footer-heading h2 {
  margin: 0 0 16px;

  font-size: 32px;
  line-height: 1.4;
}


.footer-heading p {
  max-width: 520px;

  margin: 0;

  color: #7188a2;

  font-size: 14px;

  line-height: 2;
}


/* ---------- Contact List ---------- */

.footer-contact-list {
  display: flex;
  flex-direction: column;
}


.footer-contact-item {
  display: grid;

  grid-template-columns: 110px 1fr;

  align-items: center;

  gap: 20px;

  padding: 17px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  text-decoration: none;

  color: #fff;
}


.footer-contact-label {
  color: #7188a2;

  font-size: 13px;
}


.footer-contact-value {
  color: #fff;

  font-size: 14px;

  font-weight: 500;

  line-height: 1.8;
}


a.footer-contact-item:hover .footer-contact-value {
  color: #f5bd00;
}


/* ---------- CTA ---------- */

.footer-cta {
  display: flex;

  justify-content: center;
}


.footer-cta-box {
  width: 100%;

  max-width: 430px;

  padding: 38px 30px;

  box-sizing: border-box;

  text-align: center;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 5px;

  background: #202b37;
}


.footer-cta-box p {
  margin: 0 0 24px;

  color: #7188a2;

  font-size: 15px;
}


.footer-cta-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 210px;

  padding: 14px 24px;

  box-sizing: border-box;

  border-radius: 4px;

  background: #f5bd00;

  color: #111;

  text-decoration: none;

  font-size: 14px;

  font-weight: 700;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}


.footer-cta-button:hover {
  opacity: 0.9;

  transform: translateY(-2px);
}


/* ---------- Bottom ---------- */

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);

  text-align: center;

  padding: 22px 20px;
}


.footer-bottom p {
  margin: 0;

  color: #5f748b;

  font-size: 12px;

  line-height: 1.8;
}


/* =========================================================
   Footer Responsive
   ========================================================= */

@media (max-width: 768px) {

  .site-footer {
    margin-top: 50px;
  }


  .footer-inner {
    width: min(100% - 28px, 1140px);

    padding: 55px 0;

    grid-template-columns: 1fr;

    gap: 40px;
  }


  .footer-heading h2 {
    font-size: 27px;
  }


  .footer-cta {
    justify-content: stretch;
  }


  .footer-cta-box {
    max-width: none;
  }


  .footer-contact-item {
    grid-template-columns: 90px 1fr;

    gap: 12px;

    padding: 15px 0;
  }


  .footer-contact-label {
    font-size: 12px;
  }


  .footer-contact-value {
    font-size: 13px;
  }

}

/* ---------- CTA BOX (سؤالی درباره پروژه‌تان دارید؟) ---------- */

.cta-box{
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 100%);
  border-radius: 16px;
  padding: 52px 32px;
  text-align: center;
  margin: 48px 0 64px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -14px rgba(240, 185, 13, .4);
}

.cta-box::before{
  content: "";
  position: absolute;
  top: -60px;
  left: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}

.cta-box::after{
  content: "";
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}

.cta-icon{
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}

.cta-icon svg{
  width: 28px;
  height: 28px;
  color: var(--steel-900);
  text-align: center;
}

.cta-box h2{
  position: relative;
  z-index: 1;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  color: var(--steel-900);
  margin-bottom: 10px;
  font-weight: 700;
}

.cta-box p{
  position: relative;
  z-index: 1;
  color: var(--steel-800);
  margin-bottom: 30px;
  font-size: 1rem;
  text-align: center;
}

.btn-cta{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--steel-900);
  color: var(--white);
  padding: 16px 34px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(24, 31, 39, .28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn-cta svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-cta:hover{
  background: var(--steel-800);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(24, 31, 39, .35);
}

@media (max-width: 640px){
  .cta-box{ padding: 40px 20px; }
  .btn-cta{ padding: 14px 26px; font-size: .92rem; }
}






/* =========================================================
   استایل‌های صفحه «درباره ما» و صفحات داخلی مشابه
   (این بخش را به‌جای پیشنهاد کوچک قبلی page-hero استفاده کن)
   ========================================================= */

/* ---------- PAGE HERO ---------- */
.page-hero{
  background:var(--steel-900); color:var(--paper); padding:56px 0 64px;
}
.page-hero h1{
  color:var(--white); font-size:clamp(1.7rem, 3vw, 2.4rem); max-width:18ch;
}
.page-hero p{
  color:var(--steel-500); font-size:1.05rem; max-width:52ch; margin:0;
}

/* ---------- محتوای اصلی صفحات داخلی ---------- */
main{ padding:64px 0 20px; }

.intro-grid{ display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:start; }


.quick-facts{ border:1px solid var(--line); border-radius:8px; padding:22px 24px; background:var(--paper-2); }
.quick-facts h3{ font-size:.92rem; color:var(--steel-600); margin-bottom:4px; font-weight:600; }
.qf-item{ padding:14px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.qf-item:first-of-type{ padding-top:10px; }
.qf-item:last-child{ border-bottom:none; }
.qf-num{ font-family:var(--mono); color:var(--steel-900); font-size:1.3rem; font-weight:700; direction:ltr; }
.qf-label{ color:var(--steel-600); font-size:.84rem; }

.value-list{ list-style:none; margin:24px 0 40px; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.value-list li{ border:1px solid var(--line); border-radius:4px; padding:20px; }
.value-list h3{ font-size:1rem; margin-bottom:6px; }
.value-list p{ font-size:.94rem; margin:0; }

.section-block{ margin:56px 0; }
.section-block h2{ font-size:1.35rem; margin-bottom:6px; }
.section-block .lead{ color:var(--steel-600); font-size:.96rem; max-width:60ch; margin-bottom:28px; }

/* ---------- تیم ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; }
.team-card{ border:1px solid var(--line); border-radius:8px; padding:20px 16px; text-align:center; }
.avatar{
  width:64px; height:64px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  color:var(--steel-900); font-weight:700; font-size:1.1rem; background:var(--amber);
}
.team-card h3{ font-size:.96rem; margin-bottom:4px; }
.team-role{ color:var(--steel-600); font-size:.82rem; margin-bottom:8px; min-height:2.4em; }
.team-tenure{ color:var(--steel-500); font-size:.78rem; margin-bottom:10px; }
.social-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.social-icon{
  width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--paper-2); border:1px solid var(--line); color:var(--steel-700);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.social-icon svg{ width:15px; height:15px; }
.social-icon:hover{ background:var(--amber); color:var(--steel-900); border-color:var(--amber); }

/* ---------- گالری کارگاه ---------- */
.workshop-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.workshop-tile{
  aspect-ratio:4/3; border-radius:8px; background:var(--steel-800);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--steel-500); gap:10px; position:relative; overflow:hidden;
}
.workshop-tile svg{ width:34px; height:34px; color:var(--amber-2); }
.workshop-tile span{ font-size:.85rem; color:var(--paper); font-weight:600; padding:0 12px; text-align:center; }
.workshop-note{ color:var(--steel-500); font-size:.85rem; margin-top:16px; }

/* ---------- کادر CTA + دکمه تیره (برای روی زمینه زرد) ---------- */
.cta-box{ background:var(--amber); border-radius:4px; padding:32px; text-align:center; margin:40px 0 60px; }
.cta-box h2{ font-size:1.3rem; margin-bottom:10px; }
.cta-box p{ color:var(--steel-800); margin-bottom:20px; }

.btn-dark{ background:var(--steel-900); color:var(--white); }
.btn-dark:hover{ background:var(--steel-800); }

/* ---------- ریسپانسیو صفحات داخلی ---------- */
@media (max-width:980px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .intro-grid{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .value-list{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .workshop-grid{ grid-template-columns:1fr 1fr; }
}

.shop-layout{ display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; }

  /* ---------- SIDEBAR FILTERS ---------- */
  .sidebar{ border:1px solid var(--line); border-radius:8px; padding:20px; position:sticky; top:20px; }
  .filter-group{ padding:16px 0; border-bottom:1px solid var(--line); }
  .filter-group:first-child{ padding-top:0; }
  .filter-group:last-child{ border-bottom:none; padding-bottom:0; }
  .filter-group h4{ font-size:.9rem; margin:0 0 10px; color:var(--steel-800); }
  .filter-option{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:.88rem; color:var(--steel-700); cursor:pointer; }
  .filter-option input{ accent-color:var(--amber); width:15px; height:15px; flex:none; }
  .price-inputs{ display:flex; align-items:center; gap:8px; }
  .price-inputs input{
    width:100%; border:1px solid var(--line); border-radius:5px; padding:8px 9px;
    font-family:var(--sans); font-size:.85rem; direction:ltr; text-align:left;
  }
  .price-inputs input:focus{ outline:none; border-color:var(--amber); }
  .price-hint{ color:var(--steel-500); font-size:.76rem; margin-top:6px; }
  .clear-filters{
    display:block; text-align:center; font-size:.85rem; font-weight:600; color:var(--steel-600);
    border:1px solid var(--line); border-radius:6px; padding:9px; margin-top:4px; background:none; cursor:pointer; width:100%;
  }
  .clear-filters:hover{ border-color:var(--steel-600); color:var(--steel-900); }

  /* ---------- SORT BAR ---------- */
  .sort-bar{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line);
  }
  .result-count{ color:var(--steel-600); font-size:.88rem; }
  .sort-select-wrap{ display:flex; align-items:center; gap:10px; }
  .sort-select-wrap label{ font-size:.86rem; color:var(--steel-700); font-weight:600; }
  .sort-select-wrap select{
    border:1px solid var(--line); border-radius:6px; padding:9px 14px; font-family:var(--sans);
    font-size:.88rem; background:var(--white); color:var(--ink); cursor:pointer;
  }
  .sort-select-wrap select:focus{ outline:none; border-color:var(--amber); }

  .shop-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
  .product{ border:1px solid var(--line); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; background:var(--white); }
  .product-top{ display:flex; gap:16px; padding:18px 18px 0; align-items:flex-start; }
  .product-photo{
    width:96px; height:96px; flex:none; border-radius:6px; overflow:hidden;
    background:var(--steel-800); display:flex; align-items:center; justify-content:center;
  }
  .product-photo svg{ width:60%; height:60%; color:var(--paper); }
  .product-heading h3{ font-size:1.05rem; margin-bottom:4px; }
  .product-tag-mini{
    display:inline-block; background:var(--paper-2); border:1px solid var(--line);
    color:var(--steel-700); font-size:.74rem; font-weight:600; padding:2px 9px; border-radius:20px;
  }
  .product-body{ padding:14px 18px 20px; display:flex; flex-direction:column; flex:1; }
  .mini-spec{
    display:grid; grid-template-columns:1fr 1fr; gap:8px 18px;
    margin:6px 0 14px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .mini-spec > div{ display:flex; justify-content:space-between; gap:8px; font-size:.83rem; }
  .mini-spec .k{ color:var(--steel-600); }
  .mini-spec .v{ color:var(--steel-900); font-weight:600; }
  .product-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
  .product-price{ font-size:.85rem; color:var(--steel-600); border-bottom:1px dashed var(--steel-600); }
  .product-price:hover{ color:var(--amber); border-color:var(--amber); }
  .product-link{
    font-size:.88rem; font-weight:700; color:var(--steel-900); background:var(--amber);
    padding:9px 18px; border-radius:5px;
  }
  .product-link:hover{ background:var(--amber-2); }