/* ==========================================================================
   سایکو یدک — صفحه «درباره ما» / برگه هویت برند (Entity Page)
   Design concept: پلاک مشخصات فنی + دیاگرام انفجاری هویت برند
   ========================================================================== */

:root{
  /* -- رنگ‌ها -- */
--bg:        #F3F5F7;   /* زمینه اصلی - سفید مایل به آبی روشن، حس کاغذ نقشه فنی */
--surface:   #FFFFFF;   /* سطح کارت‌ها */
--surface-2: #EDF1F4;   /* سطح کارت‌های برجسته‌تر */
--line:      #DCE2E8;   /* خطوط جداکننده */
--line-soft: #E9EDF1;

--accent:     #1c61e7;  /* کهربایی صنعتی، تیره‌تر شده تا روی زمینهٔ روشن خوانا بماند */
--accent-ink: #FFFFFF;  /* متن روی زمینه کهربایی، حالا سفید */
--accent-2:   #2E6E8E;  /* آبی فولادی، کمی تیره‌تر برای کنتراست کافی */
--ok:         #2F9765;  /* سبز تاییدیه اصالت */

--text:      #1B2430;
--text-dim:  #445263;
--muted:     #7C8794;

  --radius-sm: 6px;
  --radius-md: 10px;
  /* --mono: 'Space Mono', 'Vazirmatn', ui-monospace, monospace;
  --display: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  --body: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif; */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

.saico-about{
  margin:0;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(242,169,59,.07), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--body);
  direction:rtl;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

.sa-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* -- زمینهٔ خطوط نقشهٔ فنی (blueprint grid) -- */
.sa-blueprint{
  position:relative;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:40px 40px;
  background-position:center top;
}

/* ==========================================================================
   نوار بالای صفحه: مسیر هویت
   ========================================================================== */
.sa-topbar{
  border-bottom:1px solid var(--line);
  background:rgba(18,24,31,.9);
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:40;
}
.sa-topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; font-size:13px; color:var(--muted);
}
.sa-topbar-inner strong{ color:var(--text); font-weight:700; }
.sa-topbar .sa-crumbs span:not(:last-child)::after{ content:'/'; margin:0 8px; color:var(--line); }
.sa-topbar .sa-crumbs a{ color:var(--muted); text-decoration:none; }
.sa-topbar .sa-crumbs a:hover{ color:var(--accent); }
.sa-verified-pill{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(76,175,125,.4); background:rgba(76,175,125,.08);
  color:var(--ok); font-size:12px; padding:5px 10px; border-radius:999px;
}
.sa-verified-pill svg{ width:13px; height:13px; }

/* ==========================================================================
   هیرو — پلاک مشخصات هویت برند (Entity Spec Plate)
   ========================================================================== */
.sa-hero{ padding:72px 0 56px; }
.sa-hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:stretch;
}
@media (max-width:900px){ .sa-hero-grid{ grid-template-columns:1fr; } }

.sa-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--accent); text-transform:uppercase; margin-bottom:18px;
}
.sa-eyebrow::before{ content:''; width:22px; height:2px; background:var(--accent); display:inline-block; }

.sa-hero h1{
  font-family:var(--display); font-weight:800; font-size:clamp(34px,5vw,54px);
  margin:0 0 16px; line-height:1.25; letter-spacing:-.01em;
}
.sa-hero h1 em{ color:var(--accent); font-style:normal; }
.sa-hero p.lead{ color:var(--text-dim); font-size:17px; max-width:56ch; margin:0 0 28px; }

.sa-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.sa-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:700; font-size:14px;
  padding:13px 22px; border-radius:var(--radius-sm); text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.sa-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.sa-btn-primary{ background:var(--accent); color:var(--accent-ink); }
.sa-btn-primary:hover{ transform:translateY(-1px); background:#ffb84f; }
.sa-btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.sa-btn-ghost:hover{ border-color:var(--accent-2); color:var(--accent-2); }

/* -- پلاک فلزی مشخصات (کارت هیرو سمت راست) -- */
.sa-plate{
  background:linear-gradient(155deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px 26px 22px;
  position:relative;
  box-shadow:0 20px 50px -25px rgba(0,0,0,.6);
}
.sa-plate::before{
  content:'';
  position:absolute; inset:8px;
  border:1px dashed rgba(242,169,59,.25);
  border-radius:6px; pointer-events:none;
}
.sa-plate-head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11px; color:var(--muted);
  border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:14px;
  letter-spacing:.05em;
}
.sa-plate-row{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.sa-plate-row:last-child{ border-bottom:none; }
.sa-plate-row .k{ color:var(--muted); }
.sa-plate-row .v{ font-family:var(--mono); color:var(--text); text-align:left; direction:ltr; }

/* ==========================================================================
   بخش‌ها — عنوان‌بندی مشترک
   ========================================================================== */
.sa-section{ padding:64px 0; border-top:1px solid var(--line); }
.sa-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap; }
.sa-section-code{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.08em; margin-bottom:10px; display:block; }
.sa-section-head h2{ font-family:var(--display); font-size:clamp(24px,3vw,32px); font-weight:800; margin:0; }
.sa-section-head p{ color:var(--muted); font-size:14.5px; max-width:52ch; margin:8px 0 0; }

/* ==========================================================================
   ۱. سایکو یدک چیست؟
   ========================================================================== */
.sa-about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media (max-width:900px){ .sa-about-grid{ grid-template-columns:1fr; } }
.sa-about-text p{ color:var(--text-dim); font-size:15.5px; margin:0 0 16px; }
.sa-stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.sa-stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 14px; text-align:center;   transition: border-color .15s ease, transform .15s ease;}
.sa-stat:hover{border-color: var(--accent-2);
  transform: translateY(-2px);}
.sa-stat b{ display:block; font-family:var(--mono); font-size:22px; color:var(--accent); }
.sa-stat span{ font-size:12px; color:var(--muted); }


/* ==========================================================================
   ۲. قطعات — گرید دسته‌بندی
   ========================================================================== */
.sa-parts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){ .sa-parts-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .sa-parts-grid{ grid-template-columns:1fr; } }
.sa-part-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:20px; transition: border-color .15s ease, transform .15s ease;
}
.sa-part-card:hover{ border-color:var(--accent-2); transform:translateY(-2px); }
.sa-part-card .ic{ width:34px; height:34px; color:var(--accent); margin-bottom:14px; }
.sa-part-card h3{ font-size:15.5px; margin:0 0 6px; font-weight:700; }
.sa-part-card p{ font-size:13px; color:var(--muted); margin:0; }


/* ==========================================================================
   ۴. نمایندگی‌ها و کدهای مربوطه — جدول کاتالوگ
   ========================================================================== */
.sa-code-table{ width:100%; border-collapse:collapse; font-size:13.5px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.sa-code-table th{
  text-align:right; background:var(--surface-2); color:var(--muted);
  font-weight:700; font-size:12px; letter-spacing:.03em; padding:14px 16px; border-bottom:1px solid var(--line);
}
.sa-code-table td{ padding:14px 16px; border-bottom:1px solid var(--line-soft); color:var(--text-dim); }
.sa-code-table tr:last-child td{ border-bottom:none; }
.sa-code-table td.code{ font-family:var(--mono); color:var(--accent); direction:ltr; text-align:right; }
.sa-code-table-wrap{ overflow-x:auto; }

/* ==========================================================================
   ۵. اصالت کالا — مهر تاییدیه (signature تکمیلی)
   ========================================================================== */
.sa-authentic{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:34px;
}
@media (max-width:900px){ .sa-authentic{ grid-template-columns:1fr; } }
.sa-seal{ display:flex; align-items:center; justify-content:center; }
.sa-seal svg{ width:150px; height:150px; }
.sa-auth-steps{ list-style:none; margin:0; padding:0; counter-reset:step; }
.sa-auth-steps li{
  counter-increment:step; position:relative; padding:0 0 18px 0; margin-bottom:16px;
  padding-right:38px; border-bottom:1px solid var(--line-soft);
}
.sa-auth-steps li:last-child{ border-bottom:none; margin-bottom:0; }
.sa-auth-steps li::before{
  content:counter(step); position:absolute; right:0; top:0;
  width:24px; height:24px; border-radius:50%; background:rgba(242,169,59,.12);
  color:var(--accent); font-family:var(--mono); font-size:12px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(242,169,59,.35);
}
.sa-auth-steps b{ display:block; font-size:14.5px; margin-bottom:4px; }
.sa-auth-steps span{ font-size:13px; color:var(--muted); }

/* ==========================================================================
   ۶. روش‌های ارسال
   ========================================================================== */
.sa-ship-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:800px){ .sa-ship-grid{ grid-template-columns:1fr; } }
.sa-ship-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; }
.sa-ship-card .ic{ width:30px; height:30px; color:var(--accent-2); margin-bottom:12px; }
.sa-ship-card h3{ font-size:15px; margin:0 0 8px; }
.sa-ship-card p{ font-size:13px; color:var(--muted); margin:0; }
.sa-ship-card .tag{ display:inline-block; margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--ok); border:1px solid rgba(76,175,125,.35); background:rgba(76,175,125,.08); padding:3px 9px; border-radius:999px; }

/* ==========================================================================
   ۷. راه‌های ارتباطی
   ========================================================================== */
.sa-contact{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:800px){ .sa-contact{ grid-template-columns:1fr; } }
.sa-contact-item{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px 20px;
}
.sa-contact-item .ic{ width:22px; height:22px; color:var(--accent); flex:none; margin-top:2px; }
.sa-contact-item h3{ margin:0 0 4px; font-size:14px; }
.sa-contact-item p, .sa-contact-item a{ margin:0; font-size:13.5px; color:var(--text-dim); text-decoration:none; direction:ltr; text-align:right; display:block; }
.sa-contact-item a:hover{ color:var(--accent); }

/* ==========================================================================
   فوتر
   ========================================================================== */
.sa-footer{ border-top:1px solid var(--line); padding:28px 0; }
.sa-footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.sa-footer-inner strong{ color:var(--text-dim); }

/* ==========================================================================
   نمایش تدریجی هنگام اسکرول
   ========================================================================== */
.sa-reveal-init{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.sa-reveal-init.is-visible{ opacity:1; transform:none; }

.sa-copy-btn{
  font-family:var(--mono); font-size:11px; color:var(--accent-2);
  background:transparent; border:1px solid var(--line); border-radius:6px;
  padding:4px 9px; cursor:pointer;
}
.sa-copy-btn:hover{ border-color:var(--accent-2); }
.sa-copy-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }