/* =========================================
   الماس پایپ - استایل صفحه تماس با ما
   ========================================= */

:root {
  --blue: #1039ec;
  --blue-dark: #0a27a8;
  --blue-soft: #eef2ff;
  --line: #dde4fb;
  --ink: #16203a;
  --muted: #5c6478;
  --bg: #f7f9ff;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(16,26,60,.05), 0 10px 28px -18px rgba(16,26,60,.28);
  --shadow-hover: 0 2px 6px rgba(16,26,60,.07), 0 18px 34px -20px rgba(16,57,236,.45);
}

*{
    font-family: "Vazirmatn";
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(900px 420px at 50% -200px, #e6edff 0%, rgba(230,237,255,0) 72%);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px 40px; }

.skip {
  position: absolute; inset-inline-start: 12px; top: -60px;
  background: var(--blue); color: #fff; padding: 8px 14px; border-radius: 10px;
  text-decoration: none; font-size: .85rem; z-index: 10; transition: top .15s ease;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 10px; }

/* header */
header.hero { text-align: center; padding: 34px 0 6px; }
.logo-box {
  display: inline-flex; align-items: center; justify-content: center;
  /* background: #fff; border: 1px solid var(--line); border-radius: 22px; */
  padding: 14px 20px; 
  /* box-shadow: var(--shadow); */
}
.logo-box img { display: block; width: clamp(150px, 44vw, 210px); height: auto; max-width: 100%; }
h1 { margin: 18px 0 2px; font-size: clamp(1.45rem, 5vw, 1.95rem); font-weight: 800; color: var(--ink); letter-spacing: 0; }
.subtitle { margin: 0; color: var(--muted); font-size: clamp(.92rem, 2.8vw, 1.02rem); }
.rule { width: 54px; height: 3px; border-radius: 4px; background: var(--blue); margin: 16px auto 0; }

/* section headings */
h2.sec {
  display: flex; align-items: center; gap: 10px;
  margin: 32px 0 12px; font-size: 1.02rem; font-weight: 800; color: var(--blue-dark);
}
h2.sec svg { width: 20px; height: 20px; color: var(--blue); flex: none; }
h2.sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), rgba(221,228,251,0)); }

.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}

/* social grid */
ul.social {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 640px) { ul.social { grid-template-columns: 1fr 1fr; gap: 14px; } }

a.tile {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; min-height: 66px; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 15px;
  box-shadow: var(--shadow); text-decoration: none; color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.tile:hover { transform: translateY(-2px); border-color: rgba(16,57,236,.45); box-shadow: var(--shadow-hover); }

.ico {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px; background: var(--blue-soft); color: var(--blue);
}
.ico svg { width: 22px; height: 22px; }
.txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.label { font-size: .93rem; font-weight: 700; color: var(--ink); line-height: 1.5; }
.val {
  font-size: .8rem; color: var(--muted); line-height: 1.5;
  overflow-wrap: anywhere; text-align: right;
  font-variant-numeric: tabular-nums;
}
.chev { flex: none; width: 17px; height: 17px; color: #b7c1dc; transition: color .16s ease; }
a.tile:hover .chev { color: var(--blue); }

/* single phone card */
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f6f8ff, #fff);
}
.panel-head .ico { width: 38px; height: 38px; }
.panel-head h3 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--blue-dark); }
.panel-head p { margin: 0; font-size: .78rem; color: var(--muted); }

ul.phones { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: 1fr; }
@media (min-width: 560px) { ul.phones { grid-template-columns: 1fr 1fr; } }
ul.phones li + li { border-top: 1px solid #eef1fb; }
@media (min-width: 560px) {
  ul.phones li + li { border-top: 0; }
  ul.phones li:nth-child(n+3) { border-top: 1px solid #eef1fb; }
}

a.prow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border-radius: 12px; text-decoration: none; color: inherit;
  transition: background-color .15s ease;
}
a.prow:hover { background: var(--blue-soft); }
a.prow:hover .pnum { color: var(--blue-dark); }
a.prow:hover .chev { color: var(--blue); }
.pnum {
  font-size: 1.02rem; font-weight: 700; letter-spacing: .5px;
  font-variant-numeric: tabular-nums; text-align: left;
}

/* address + map */
.addr {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px;
  border-bottom: 1px solid var(--line);
}
.addr p { margin: 0; font-size: .97rem; line-height: 2; color: var(--ink); }
.map-frame { position: relative; width: 100%; height: 300px; background: var(--blue-soft); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; border-top: 1px solid var(--line); background: #fbfcff;
}
a.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 12px; background: var(--blue); color: #fff;
  font-size: .9rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 18px -12px rgba(16,57,236,.9);
  transition: background-color .16s ease;
}
a.btn:hover { background: var(--blue-dark); }
a.btn svg { width: 18px; height: 18px; }

/* footer */
footer.site { text-align: center; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); }
footer.site img {
  display: block; margin: 0 auto; width: 60%; max-width: 420px; height: auto;
  
}
.copyright { margin: 16px 0 0; font-size: .8rem; color: var(--muted); }
.copyright a { color: var(--blue-dark); text-decoration: none; }
.copyright a:hover { text-decoration: underline; }

@media (max-width: 420px) {
  .wrap { padding: 0 12px 32px; }
  header.hero { padding-top: 24px; }
  .addr { padding: 14px; gap: 10px; }
  a.tile { padding: 11px 12px; min-height: 62px; }
  .map-frame { height: 250px; }
  .panel-head { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  a.tile:hover { transform: none; }
}

@media print {
  body { background: #fff; }
  .panel, a.tile, .logo-box { box-shadow: none; }
  .map-frame { display: none; }
}

