/* ============ TOKENS ============ */
:root{
  --bg:#111316; --bg-deep:#0a0b0d; --bg-raised:#181b1f;
  --ink:#EDEEEE; --ink-dim:#9BA1A8; --ink-faint:#5C6169;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --accent:#FF5A1F; --accent-ink:#1a0800;
  --grid:rgba(255,255,255,.045);
  --ok:#2FBF71; --warn:#E8B23A; --info:#4C8DFF;
  --radius:2px;
  --font-display:'Vazirmatn',sans-serif;
  --font-body:'Vazirmatn',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
[data-theme="light"]{
  --bg:#F2F1EC; --bg-deep:#E7E5DD; --bg-raised:#FFFFFF;
  --ink:#17181A; --ink-dim:#5C6067; --ink-faint:#8A8E94;
  --line:rgba(20,20,20,.1); --line-strong:rgba(20,20,20,.18);
  --accent:#E8500F; --accent-ink:#fff;
  --grid:rgba(20,20,20,.05);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); line-height:1.65;
  font-size:16px;
  transition:background .3s ease,color .3s ease;
  max-width:100vw;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
.container{max-width:1240px; margin-inline:auto; padding-inline:28px;}
@media(prefers-reduced-motion: reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important;}}

.blueprint{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:64px 64px;
}
.corner-mark{position:absolute; width:22px; height:22px; opacity:.5;}
.corner-mark::before,.corner-mark::after{content:"";position:absolute;background:var(--ink-faint);}
.corner-mark::before{width:100%;height:1px;top:0;left:0;}
.corner-mark::after{width:1px;height:100%;top:0;left:0;}
.corner-mark.tl{top:14px;left:14px;}
.corner-mark.tr{top:14px;right:14px;transform:scaleX(-1);}
.corner-mark.bl{bottom:14px;left:14px;transform:scaleY(-1);}
.corner-mark.br{bottom:14px;right:14px;transform:scale(-1);}

/* ============ HEADER ============ */
header{
  position:sticky; top:0; z-index:1050;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:10px; flex-wrap:nowrap;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-weight:600; font-size:17px; letter-spacing:.02em; min-width:0;}
.logo .mark{width:30px;height:30px;border:1.5px solid var(--accent); position:relative; display:grid; place-items:center; transform:rotate(45deg); flex-shrink:0;}
.logo .mark span{transform:rotate(-45deg); font-size:11px; font-weight:700; color:var(--accent);}
.logo b{font-family:var(--font-display); font-weight:800; font-size:18px;}
.logo small{display:block; font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); letter-spacing:.15em; font-weight:400; white-space:nowrap;}

nav.primary{display:flex; align-items:center; gap:2px; flex-wrap:wrap;}
/* padding افقی لینک‌ها ۱۴px بود؛ با اضافه‌شدن آیتم «همکاران» ردیف منو از ۱۲۴۰px
   ظرفیت کانتینر بیرون می‌زد و روی لپ‌تاپ به دو سطر می‌شکست. */
nav.primary a{padding:10px 12px; font-size:14px; color:var(--ink-dim); position:relative; transition:color .2s;}
nav.primary a:hover{color:var(--ink);}
nav.primary a.active{color:var(--ink);}
nav.primary a.active::after{transform:scaleX(1);}
nav.primary a::after{content:"";position:absolute;bottom:6px;left:12px;right:12px;height:1px;background:var(--accent);transform:scaleX(0);transition:transform .25s;transform-origin:left;}
nav.primary a:hover::after{transform:scaleX(1);}
.nav-divider{width:1px; height:20px; background:var(--line-strong); margin:0 8px;}
.nav-auth{display:flex; align-items:center; gap:10px;}

.nav-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line); border-radius:var(--radius); color:var(--ink-dim); background:transparent; transition:.2s;}
.icon-btn:hover{border-color:var(--line-strong); color:var(--ink);}
.theme-switch{display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.theme-switch button{padding:8px 10px; font-size:11px; font-family:var(--font-mono); background:transparent; color:var(--ink-faint); border:none; border-inline-start:1px solid var(--line);}
.theme-switch button:first-child{border-inline-start:none;}
.theme-switch button.active{background:var(--accent); color:var(--accent-ink);}
.btn-primary{background:var(--accent); color:var(--accent-ink); padding:10px 20px; font-size:14px; font-weight:600; border-radius:var(--radius); border:1px solid var(--accent); transition:.2s; display:inline-block; white-space:nowrap;}
.btn-primary:hover{filter:brightness(1.1);}
.btn-ghost{padding:10px 18px; font-size:14px; border:1px solid var(--line-strong); border-radius:var(--radius); color:var(--ink); transition:.2s; display:inline-block; white-space:nowrap;}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px; background:var(--bg-raised);
  border:1px solid var(--line); border-radius:8px; cursor:pointer; z-index:1100; flex-shrink:0;
}
.hamburger span{display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .3s ease;}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; z-index:999;}
.nav-backdrop.show{opacity:1; visibility:visible;}

@media(max-width:1480px){
  .hamburger{display:flex;}
  header nav.primary{
    position:fixed; top:0; right:0; height:100vh; width:min(85vw,340px);
    background:var(--bg); border-inline-start:1px solid var(--line);
    padding:90px 24px 32px; display:flex; flex-direction:column; gap:8px; flex-wrap:nowrap;
    overflow-y:auto; transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
    z-index:1000; box-shadow:-8px 0 32px rgba(0,0,0,.35);
  }
  header nav.primary.open{transform:translateX(0);}
  header nav.primary > a{padding:14px 12px; border-radius:8px; font-size:1rem; color:var(--ink); text-decoration:none; transition:background .2s ease, color .2s ease;}
  header nav.primary > a:hover, header nav.primary > a:active{background:var(--bg-raised); color:var(--accent);}
  header nav.primary .nav-divider{width:auto; height:1px; background:var(--line); margin:12px 0;}
  header nav.primary .theme-switch{display:flex; gap:6px; padding:8px; background:var(--bg-raised); border-radius:10px; border:1px solid var(--line); width:100%;}
  header nav.primary .theme-switch button{flex:1; padding:8px 4px; font-size:.8rem;}
  header nav.primary .nav-auth{display:flex; flex-direction:column; gap:8px; margin-top:8px; width:100%;}
  header nav.primary .nav-auth a{text-align:center; padding:12px; border-radius:8px;}
}
body.nav-open{overflow:hidden;}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
/* ============ HERO ============ */
.hero{position:relative; padding:110px 0 90px; overflow:hidden; border-bottom:1px solid var(--line);}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; position:relative; z-index:2;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; color:var(--ink-dim);
  border:1px solid var(--line); padding:6px 12px; border-radius:99px; margin-bottom:26px; letter-spacing:.03em;
}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);}
h1.headline{
  font-family:var(--font-display); font-weight:800; font-size:clamp(38px,5.2vw,64px); line-height:1.08; letter-spacing:-.01em;
  margin-bottom:26px;
}
h1.headline em{font-style:normal; color:var(--accent); position:relative;}
.hero p.lead{font-size:18px; color:var(--ink-dim); max-width:520px; margin-bottom:38px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:46px;}
.hero-stats{display:flex; gap:0; border-top:1px solid var(--line);}
.hero-stats div{flex:1; padding:18px 0 0; border-inline-start:1px solid var(--line);}
.hero-stats div:first-child{border-inline-start:none;}
.hero-stats b{display:block; font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--ink);}
.hero-stats span{font-size:12px; color:var(--ink-faint);}

.hero-visual{position:relative; aspect-ratio:1/1; display:grid; place-items:center;}
.hero-visual svg{width:100%; height:100%;}
.toolpath{fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 3.2s ease forwards .3s;}
.toolpath-2{stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:900; stroke-dashoffset:900; animation:draw 2.6s ease forwards 1.1s;}
@keyframes draw{to{stroke-dashoffset:0;}}
.coord{font-family:var(--font-mono); font-size:9px; fill:var(--ink-faint);}

/* ============ SECTION SHELL ============ */
section{padding:96px 0; position:relative;}
section.alt{background:var(--bg-deep); border-block:1px solid var(--line);}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:52px; flex-wrap:wrap;}
.sec-side{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.view-all-btn{white-space:nowrap; padding:10px 20px; font-size:13.5px;}
.sec-label{font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.12em; margin-bottom:14px; display:block;}
h2.sec-title{font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3vw,38px); letter-spacing:-.01em; max-width:600px;}
.sec-desc{color:var(--ink-dim); max-width:420px; font-size:15px;}

/* ============ SERVICES ============ */
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.service-card{background:var(--bg); padding:32px 26px; transition:.25s; position:relative;}
.service-card:hover{background:var(--bg-raised);}
.service-card .idx{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); display:block; margin-bottom:20px;}
.service-card h3{font-size:17px; font-weight:700; margin-bottom:10px;}
.service-card p{font-size:13.5px; color:var(--ink-dim); margin-bottom:18px;}
.service-card .go{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); display:flex; align-items:center; gap:6px; transition:.2s;}
.service-card:hover .go{color:var(--accent); gap:10px;}

/* ============ ABOUT / SPLIT ============ */
.split{display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center;}
.about-frame{
  aspect-ratio:4/5; border:1px solid var(--line); position:relative; background:
    repeating-linear-gradient(135deg, transparent 0 18px, var(--grid) 18px 19px);
  display:grid; place-items:center;
}
.about-frame .tag{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint);}
.about-copy h2{margin-bottom:22px;}
.about-copy p{color:var(--ink-dim); margin-bottom:18px; font-size:15.5px;}
.value-list{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px;}
.value-list li{border-inline-start:2px solid var(--accent); padding-inline-start:14px;}
.value-list b{display:block; font-size:14.5px; margin-bottom:4px;}
.value-list span{font-size:13px; color:var(--ink-faint);}

/* ============ SEO CONTENT BLOCKS ============ */
.seo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.seo-block{border:1px solid var(--line); padding:22px; background:var(--bg-raised);}
.seo-block h3{font-family:var(--font-display); font-weight:700; font-size:15.5px; margin-bottom:10px; color:var(--accent);}
.seo-block p{font-size:13px; line-height:1.9; color:var(--ink-dim);}
@media(max-width:1000px){.seo-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.seo-grid{grid-template-columns:1fr;}}

.map-frame{border:1px solid var(--line); aspect-ratio:16/6; overflow:hidden; width:100%; max-width:100%;}
.map-frame iframe{width:100% !important; height:100% !important; max-width:100%; border:0; display:block; filter:grayscale(.15) contrast(1.05);}
@media(max-width:700px){.map-frame{aspect-ratio:4/5;}}
@media(max-width:400px){.map-frame{aspect-ratio:3/4;}}

/* ============ COURSES / EVENTS CARDS ============ */
.card-row{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.plan-card{
  border:1px solid var(--line); padding:28px; transition:.25s; background:var(--bg);
}
.plan-card:hover{border-color:var(--accent);}
.plan-card .meta{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); margin-bottom:22px;}
.plan-card .meta em{font-style:normal; color:var(--accent);}
.plan-card h3{font-size:18px; margin-bottom:12px;}
.plan-card p{font-size:13.5px; color:var(--ink-dim); margin-bottom:24px;}
.plan-card .foot{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:16px;}
.plan-card .price{font-family:var(--font-mono); font-size:14px;}
.plan-card .link-btn{font-size:12.5px; color:var(--accent); font-weight:600;}

/* ============ PROJECTS GALLERY ============ */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:230px; gap:2px;}
.gallery-item{position:relative; overflow:hidden; background:var(--bg-raised); border:1px solid var(--line);}
.gallery-item .tex{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:
  radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
  linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:auto,24px 24px,24px 24px;}
.gallery-item .info{position:absolute; inset:auto 0 0 0; padding:18px; background:linear-gradient(0deg, color-mix(in srgb, var(--bg) 92%, transparent), transparent);}
.gallery-item .info small{font-family:var(--font-mono); font-size:10.5px; color:var(--accent);}
.gallery-item .info h4{font-size:15px; margin-top:4px;}

/* ============ EQUIPMENT TABLE ============ */
.equip-table{width:100%; border-collapse:collapse; font-size:14px;}
.equip-table th{
  text-align:right; font-family:var(--font-mono); font-weight:500; font-size:11.5px; color:var(--ink-faint);
  padding:14px 10px; border-bottom:1px solid var(--line-strong); letter-spacing:.05em;
}
.equip-table td{padding:18px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
.equip-table tr:hover td{background:var(--bg-raised);}
.equip-table .status{font-family:var(--font-mono); font-size:11px; padding:4px 9px; border:1px solid var(--accent); color:var(--accent); border-radius:99px; display:inline-block;}

/* ============ FAQ ============ */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; display:flex; justify-content:space-between; align-items:center; padding:22px 4px; background:none; border:none; color:var(--ink); font-size:15.5px; font-weight:600; text-align:start;}
.faq-q .plus{font-family:var(--font-mono); color:var(--accent); transition:.25s; font-size:20px; font-weight:300;}
.faq-item[open] .plus{transform:rotate(45deg);}
.faq-a{padding:0 4px 22px; color:var(--ink-dim); font-size:14.5px; max-width:700px;}

/* ============ CTA BAND ============ */
.cta-band{
  border:1px solid var(--line); padding:64px 50px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-band h2{font-family:var(--font-display); font-size:clamp(24px,2.6vw,32px); font-weight:800; max-width:480px;}
.cta-band .id-tag{position:absolute; top:16px; left:16px; font-family:var(--font-mono); font-size:10px; color:var(--ink-faint);}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line); padding:70px 0 30px; background:var(--bg-deep); position:relative;}
.foot-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px; margin-bottom:60px;}

/* ============ اینماد (فوتر) ============ */
.enamad-box{
  position:absolute; left:24px; top:50%; transform:translateY(-50%);
  z-index:5; display:block; line-height:0; transition:transform .2s ease;
}
.enamad-box img{height:120px; width:auto; max-width:100%; display:block; cursor:pointer;}
.enamad-box:hover{transform:translateY(-50%) scale(1.05);}
@media(max-width:1200px){.enamad-box{left:20px;} .enamad-box img{height:100px;}}
@media(max-width:900px){.enamad-box{left:16px;} .enamad-box img{height:90px;}}
@media(max-width:600px){
  .enamad-box{position:static; left:auto; top:auto; transform:none; margin:24px auto 0; width:100%; display:flex; justify-content:center; align-items:center;}
  .enamad-box img{height:110px;}
  .enamad-box:hover{transform:scale(1.05);}
}
@media(max-width:400px){.enamad-box img{height:90px;}}
.foot-col h5{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); letter-spacing:.1em; margin-bottom:18px;}
.foot-col a,.foot-col p{display:block; font-size:13.5px; color:var(--ink-dim); margin-bottom:11px;}
.foot-col a:hover{color:var(--accent);}
.foot-bottom{display:flex; justify-content:space-between; padding-top:26px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-faint); flex-wrap:wrap; gap:10px;}

/* ============ RESPONSIVE ============ */
.btn-full{width:100%; padding:14px; font-size:15px; font-weight:700;}
.err-box{border:1px solid #F0555A; color:#F0555A; padding:12px 16px; font-size:13.5px; margin-bottom:20px; border-radius:var(--radius);}
.ok-box{border:1px solid var(--accent); color:var(--accent); padding:12px 16px; font-size:13.5px; margin-bottom:20px; border-radius:var(--radius);}

@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1; max-width:340px; margin-inline:auto;}
  .split{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .card-row{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:34px;}
  .value-list{grid-template-columns:1fr;}
  .equip-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .equip-table{font-size:12.5px; min-width:520px;}
  .equip-table th:nth-child(1),.equip-table td:nth-child(1),.equip-table th:nth-child(4),.equip-table td:nth-child(4){display:none;}
}
@media(max-width:600px){
  .container{padding-inline:16px;}
  .services-grid{grid-template-columns:1fr;}
  .hero-stats{flex-wrap:wrap;}
  .hero-stats div{flex:1 1 50%; margin-bottom:14px;}
  .gallery{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .cta-band{padding:40px 24px; flex-direction:column; align-items:flex-start;}
  .nav-wrap{height:64px;}
  .logo{font-size:15px; gap:8px;}
  .logo .mark{width:26px; height:26px;}
  .logo b{font-size:16px;}
  header nav.primary{padding-top:78px;}
  section{padding:64px 0;}
  .sec-head{margin-bottom:34px;}
  .equip-table{min-width:0;}
  .equip-table th:nth-child(3),.equip-table td:nth-child(3){display:none;}
}
@media(max-width:380px){
  .container{padding-inline:14px;}
  .logo small{display:none;}
  .hero-ctas a{flex:1 1 100%; text-align:center;}
}

/* ============ MEDIA FRAME ============
   نمایش کامل تصویر بدون کراپ‌شدن، بدون تغییر اندازه‌ی خود کارت
   (object-fit:contain داخل یک قاب با اندازه‌ی ثابت) */
.media-frame{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.media-frame img{width:100%; height:100%; object-fit:contain; object-position:center;}
.media-frame.sq{aspect-ratio:1/1;}

/* ============ PRODUCTS ============ */
.product-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px;}
.product-tabs button{
  padding:9px 18px; font-size:13px; border:1px solid var(--line-strong); border-radius:99px;
  background:transparent; color:var(--ink-dim); font-family:var(--font-body); transition:.2s;
}
.product-tabs button:hover{border-color:var(--accent); color:var(--ink);}
.product-tabs button.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600;}
.products-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.product-card{border:1px solid var(--line); padding:18px; transition:.25s; background:var(--bg); display:flex; flex-direction:column;}
.product-card:hover{border-color:var(--accent);}
.product-card .media-frame{aspect-ratio:1/1; margin-bottom:14px;}
.product-card h3{font-size:15.5px; margin-bottom:8px;}
.product-card .p-desc{font-size:12.5px; color:var(--ink-dim); margin-bottom:14px; flex:1;}
.product-card .p-price-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.product-card .p-price{font-family:var(--font-mono); font-size:15px; color:var(--accent); font-weight:600;}
.product-card .p-compare{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); text-decoration:line-through; margin-inline-start:8px;}
.product-card .p-stock-out{font-size:11.5px; color:#F0555A; font-family:var(--font-mono);}
.add-cart-btn{width:100%; padding:10px; font-size:13px; font-weight:600; border:1px solid var(--accent); color:var(--accent); background:transparent; border-radius:var(--radius); transition:.2s;}
.add-cart-btn:hover{background:var(--accent); color:var(--accent-ink);}
.add-cart-btn:disabled{opacity:.45; cursor:default; border-color:var(--line-strong); color:var(--ink-faint);}

.cart-btn{position:relative;}
.cart-count{position:absolute; top:-6px; left:-6px; background:var(--accent); color:var(--accent-ink); font-family:var(--font-mono); font-size:10px; font-weight:700; width:17px; height:17px; border-radius:50%; display:grid; place-items:center;}
.cart-count.hide{display:none;}

#cartDrawer{position:fixed; inset:0; z-index:600; display:none;}
#cartDrawer.show{display:block;}
#cartDrawer .cart-overlay{position:absolute; inset:0; background:rgba(0,0,0,.65);}
#cartDrawer .cart-panel{
  position:absolute; top:0; bottom:0; inset-inline-end:0; width:100%; max-width:430px;
  background:var(--bg); border-inline-start:1px solid var(--line-strong); display:flex; flex-direction:column;
  transform:translateX(0); animation:cartIn .25s ease;
}
[dir="rtl"] #cartDrawer .cart-panel{animation-name:cartInRtl;}
@keyframes cartIn{from{transform:translateX(-100%);}to{transform:translateX(0);}}
@keyframes cartInRtl{from{transform:translateX(100%);}to{transform:translateX(0);}}
.cart-head{display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid var(--line);}
.cart-head h3{font-family:var(--font-display); font-weight:800; font-size:17px;}
.cart-head button{background:none; border:none; color:var(--ink-faint); font-size:18px; cursor:pointer;}
.cart-body{flex:1; overflow-y:auto; padding:14px 22px;}
.cart-row{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); align-items:center;}
.cart-row .media-frame{width:56px; height:56px; flex-shrink:0; margin-bottom:0;}
.cart-row .cr-info{flex:1; min-width:0;}
.cart-row .cr-info b{display:block; font-size:13.5px; margin-bottom:4px;}
.cart-row .cr-price{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint);}
.cart-qty{display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--radius);}
.cart-qty button{width:24px; height:24px; background:none; border:none; color:var(--ink); font-size:14px;}
.cart-qty span{width:22px; text-align:center; font-family:var(--font-mono); font-size:12px;}
.cart-remove{color:#F0555A; font-size:11.5px; background:none; border:none; margin-inline-start:6px;}
.cart-foot{border-top:1px solid var(--line); padding:18px 22px 24px;}
.cart-total-row{display:flex; justify-content:space-between; margin-bottom:16px; font-size:15px; font-weight:700;}
.cart-total-row span:last-child{font-family:var(--font-mono); color:var(--accent);}
#checkoutForm .field{margin-bottom:12px;}
#checkoutForm .field label{display:block; font-size:12px; color:var(--ink-dim); margin-bottom:6px; font-family:var(--font-mono);}
#checkoutForm .field input,#checkoutForm .field textarea{width:100%; background:var(--bg-raised); border:1px solid var(--line-strong); color:var(--ink); padding:10px 12px; font-size:13.5px; border-radius:var(--radius); font-family:var(--font-body);}
#checkoutForm .field textarea{min-height:60px; resize:vertical;}

@media(max-width:1000px){.products-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.products-grid{grid-template-columns:1fr 1fr; gap:12px;} .product-card{padding:12px;}}

/* ============ کارت «مشاهده همه» (پیش‌نمایش صفحه اصلی) ============ */
.view-all-card{
  border:1px dashed var(--line-strong); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px; min-height:220px; color:var(--ink-dim); font-weight:600; font-size:14.5px; transition:.2s;
}
.view-all-card:hover{border-color:var(--accent); color:var(--accent); background:var(--bg-raised);}

/* ============ TEAM TREE (همکاران) ============
   چیدمان درختی تیم روی بوم؛ سیم‌کشی از رأس به پایین با پالس نوری که
   در طول هر خط به سمت پایین حرکت می‌کند. */
.team-shell{position:relative;}
/* ۲۲px بالای بوم برای حلقه‌ی رأس و بلند شدن کارت در هاور جا می‌گذارد؛
   برش overflow-y از لبه‌ی padding-box انجام می‌شود، نه محتوای بوم. */
.team-scroller{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-block:22px 18px;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;}
/* نوار اسکرول پیش‌فرض روی تم تیره خیلی پرطمطراق است؛ این یکی فقط برای همین بوم نازک می‌شود. */
.team-scroller::-webkit-scrollbar{height:6px;}
.team-scroller::-webkit-scrollbar-track{background:transparent;}
.team-scroller::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:99px;}
.team-scroller:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--accent) 55%, transparent);}
.team-fit{position:relative; margin-inline:auto;}
.team-canvas{position:absolute; top:0; left:0; transform-origin:top left;}
.team-wires{position:absolute; top:0; left:0; overflow:visible; pointer-events:none;}
.team-nodes{position:relative;}
.team-beam{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1s ease .15s;
}
.is-live .team-beam{opacity:1;}

/* --- سیم‌کشی --- */
/* pathLength="100" روی همه‌ی مسیرها ست شده، پس الگوهای خط‌چین در واحد
   ۰ تا ۱۰۰ کار می‌کنند و لازم نیست طول واقعی هر یال در JS حساب شود. */
.tm-wire-shadow{fill:none; stroke:var(--line); stroke-width:6;}
.tm-wire{fill:none; stroke:var(--line-strong); stroke-width:1;}
.tm-cable{
  fill:none; stroke:var(--accent); stroke-width:1; opacity:.3;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .85s cubic-bezier(.4,0,.2,1) var(--d,0s);
}
.is-live .tm-cable{stroke-dashoffset:0;}
/* دنباله‌ی کم‌نور و سرِ پرنور با هم حرکت می‌کنند و شکل «دم ستاره» می‌سازند. */
.tm-tail{fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:12 88; stroke-dashoffset:0; opacity:0;}
.tm-pulse{fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:3 97; stroke-dashoffset:0; opacity:0;
  filter:drop-shadow(0 0 6px var(--accent));}
.is-live .tm-tail{opacity:.3; animation:tmFlow 2.6s linear var(--d,0s) infinite;}
.is-live .tm-pulse{opacity:.95; animation:tmFlow 2.6s linear var(--d,0s) infinite;}
@keyframes tmFlow{from{stroke-dashoffset:0;}to{stroke-dashoffset:-100;}}
.tm-edge.is-hot .tm-wire,.tm-edge.is-hot .tm-wire-shadow{stroke:var(--accent); opacity:.55;}
.tm-edge.is-hot .tm-cable{opacity:.8;}
.tm-edge.is-hot .tm-tail{opacity:.55;}
.tm-edge.is-hot .tm-pulse{stroke-width:3.4; filter:drop-shadow(0 0 12px var(--accent));}

/* --- گره‌ها ---
   نور از بالا می‌ریزد: گرادیان ملایم از نارنجی به پس‌زمینه و یک درپوش روشن
   دقیقاً در نقطه‌ای که سیم به سقف کارت می‌رسد. */
.tm-cell{position:absolute; width:var(--tm-w); height:var(--tm-h); transform:translate(-50%,-50%);}
.tm-card{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:15px 12px; text-align:center; overflow:hidden; background:var(--bg);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--bg)), var(--bg) 46%);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  opacity:0; transition:border-color .22s, box-shadow .22s, transform .22s, background .22s;
}
/* انیمیشن ورود از خصوصیت translate و بلند شدنِ هاور از transform استفاده می‌کند؛
   این دو مستقل از هم اعمال می‌شوند، پس «forwards» جلوی هاور را نمی‌گیرد. */
.is-live .tm-card{animation:tmRise .6s cubic-bezier(.2,.8,.2,1) var(--d,0s) forwards;}
@keyframes tmRise{from{opacity:0; translate:0 18px;}to{opacity:1; translate:0 0;}}
.tm-cell:hover .tm-card{
  border-color:color-mix(in srgb, var(--accent) 65%, transparent); background:var(--bg-raised);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--bg)), var(--bg-raised) 58%);
  transform:translateY(-4px);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 20px 42px -22px color-mix(in srgb, var(--accent) 65%, transparent);
}
.tm-cap{position:absolute; top:-1px; left:50%; width:46%; height:2px; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.45; transition:.22s;}
.is-live .tm-cap{animation:tmCap 3.4s ease-in-out var(--d,0s) infinite;}
@keyframes tmCap{0%,100%{opacity:.3;}45%{opacity:.9;}}
.tm-cell:hover .tm-cap{opacity:1; width:64%; box-shadow:0 0 14px var(--accent);}
.tm-ext{position:absolute; top:9px; inset-inline-start:10px; font-size:12px; line-height:1; color:var(--ink-faint); transition:.22s;}
.tm-cell:hover .tm-ext{color:var(--accent);}
/* برچسب تعداد فرزندان: یک قرص روی درزِ خروج سیم از کف کارت. */
.tm-kids{position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); z-index:3;
  padding:2px 9px; border-radius:99px; white-space:nowrap; font-size:9.5px; font-weight:700; line-height:1.6;
  color:var(--accent); background:var(--bg);
  border:1px solid color-mix(in srgb, var(--accent) 42%, var(--line-strong)); transition:.22s;}
.tm-cell:hover .tm-kids{background:var(--bg-raised); border-color:var(--accent);}
.tm-media{
  width:var(--tm-media,64px); height:var(--tm-media,64px); flex-shrink:0; position:relative; overflow:hidden;
  border:1px solid var(--line-strong); border-radius:var(--radius); display:grid; place-items:center;
  /* روی bg-deep نشان می‌نشیند: در تم روشن bg-raised سفید مطلق است و کاشی محو می‌شد. */
  background:radial-gradient(76% 76% at 50% 16%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%), var(--bg-deep);
}
/* دو براکت گوشه، همان زبان گوشه‌نشان‌های بلوپرینت سایت. */
.tm-media::before,.tm-media::after{content:""; position:absolute; width:9px; height:9px; z-index:2;
  border:1.5px solid var(--accent); opacity:.55; transition:.22s; pointer-events:none;}
.tm-media::before{top:3px; inset-inline-start:3px; border-inline-end:none; border-bottom:none;}
.tm-media::after{bottom:3px; inset-inline-end:3px; border-inline-start:none; border-top:none;}
.tm-cell:hover .tm-media::before,.tm-cell:hover .tm-media::after{opacity:1;}
.tm-media img{width:100%; height:100%; object-fit:cover; position:relative; z-index:1;}
.tm-initial{position:relative; z-index:1; font-family:var(--font-display); font-weight:800;
  font-size:calc(var(--tm-media,64px) * .36); color:var(--accent);}
.tm-meta{display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; min-width:0;}
/* حرف‌فاصله‌ی منفی روی فارسی نشانه‌گذاری را می‌شکند؛ اینجا عمداً ندارد. */
.tm-name{font-family:var(--font-display); font-size:var(--tm-fs-name,14px); font-weight:800; line-height:1.42;
  color:var(--ink); text-wrap:balance; max-width:100%; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.tm-cell:hover .tm-name{color:var(--accent);}
/* نقش با فونت بدنه: JetBrains Mono گلیف فارسی ندارد و «مهندسی مدار» می‌افتاد
   به فونت جایگزین و بد نمایش داده می‌شد؛ مونو فقط برای متن لاتین می‌ماند.
   نقش مهم‌تر از بیو است، پس یک‌خطی بریده نمی‌شود و تا دو خط می‌شکند. */
.tm-role{font-size:var(--tm-fs-role,11.5px); font-weight:600; line-height:1.6; color:var(--accent);
  max-width:100%; overflow:hidden; text-wrap:balance;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.tm-role::before{content:""; display:inline-block; width:9px; height:1px; vertical-align:middle;
  margin-inline-end:6px; background:currentColor; opacity:.55;}
.tm-bio{font-size:10px; font-weight:400; line-height:1.65; color:var(--ink-dim); max-width:100%;
  overflow:hidden; text-wrap:balance;
  display:-webkit-box; -webkit-line-clamp:var(--tm-bio-lines, 2); -webkit-box-orient:vertical;}
/* سه سطح درخت، همان سه آیتم راهنمای بالای بوم. */
.tm-cell[data-tier="head"] .tm-card{border-color:color-mix(in srgb, var(--accent) 34%, var(--line-strong));
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, var(--bg)), var(--bg) 52%);}
.tm-cell[data-tier="root"] .tm-card{border-color:color-mix(in srgb, var(--accent) 62%, var(--line-strong));
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--bg)), var(--bg) 58%);
  box-shadow:0 0 34px -14px color-mix(in srgb, var(--accent) 80%, transparent);}
.tm-cell[data-tier="head"] .tm-name,.tm-cell[data-tier="root"] .tm-name{color:var(--ink);}
.tm-cell[data-tier="root"] .tm-name{font-size:calc(var(--tm-fs-name,14px) + 1px);}
.tm-cell[data-tier="head"] .tm-name{font-size:calc(var(--tm-fs-name,14px) + .5px);}

/* --- منبع نور در رأس درخت ---
   یک پلاک افقی: الماس برند در یک سو و نام تیم + شمارش اعضا در سوی دیگر،
   تا رأس درخت بلند نشود و فاصله‌ی سیم‌ها تا اولین سطح کم بماند. */
.tm-source{position:absolute; transform:translate(-50%,-50%); display:grid; place-items:center;}
.tm-source-inner{position:relative; display:flex; align-items:center; gap:15px; padding:13px 21px;
  border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line-strong)); border-radius:var(--radius);
  background:var(--bg); text-align:start;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--bg)), var(--bg) 72%);
  box-shadow:0 0 46px -12px color-mix(in srgb, var(--accent) 65%, transparent);}
.tm-source-mark{width:34px; height:34px; flex-shrink:0; position:relative; border:1.5px solid var(--accent); transform:rotate(45deg); display:grid; place-items:center;}
.tm-source-mark span{transform:rotate(-45deg); font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--accent);}
/* حلقه روی خودِ الماس می‌نشیند؛ با scale بزرگ می‌شود و چون دایره است،
   چرخش ۴۵درجه‌ی والد شکلش را خراب نمی‌کند. */
.tm-source-mark::after{content:""; position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid var(--accent); border-radius:50%; opacity:0;}
.is-live .tm-source-mark::after{animation:tmRing 3.2s ease-out infinite;}
@keyframes tmRing{0%{opacity:.6; transform:scale(1);}100%{opacity:0; transform:scale(3.4);}}
.tm-source-text{display:flex; flex-direction:column; gap:3px;}
.tm-source b{font-family:var(--font-display); font-weight:800; font-size:16px; line-height:1.4;}
.tm-source em{font-style:normal; font-size:11.5px; font-weight:600; color:var(--ink-dim); line-height:1.5;}
.tm-source small{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.2em; color:var(--ink-faint); white-space:nowrap;}

/* --- حالت عمودی (موبایل) ---
   همان کارت‌ها، فقط به‌جای بوم افقی به‌صورت لیست تو‌در‌تو با ریل نوری عمودی. */
.team-vertical{display:none; padding-block:4px 10px;}
.tm-v-list,.tm-v-sub{list-style:none; position:relative; padding:0; margin:0;}
.tm-v-sub{padding-inline-start:30px;}
.tm-v-sub::before{content:""; position:absolute; top:0; bottom:36px; inset-inline-start:13px; width:1px; background:var(--line-strong);}
.tm-v-item{position:relative; padding-block:8px;}
.tm-v-item::before{content:""; position:absolute; inset-inline-start:-17px; top:36px; width:17px; height:1px; background:var(--line-strong);}
.tm-v-list>.tm-v-item::before{display:none;}
.tm-v-src{display:flex; justify-content:center; margin-bottom:2px;}
.tm-v-rail{position:relative; height:56px; width:1px; margin:0 auto; background:var(--line-strong);}
.tm-v-rail::after{content:""; position:absolute; top:0; inset-inline-start:-2px; width:5px; height:5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px var(--accent); opacity:0;}
.is-live .tm-v-rail::after{animation:tmVFall 2.4s linear infinite;}
@keyframes tmVFall{0%{top:0; opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{top:100%; opacity:0;}}
.team-vertical .tm-cell{position:relative; width:auto; height:auto; transform:none;}
.team-vertical .tm-source{position:relative; transform:none;}
.team-vertical .tm-card{
  position:relative; inset:auto; flex-direction:row; align-items:flex-start; justify-content:flex-start;
  text-align:start; gap:13px; padding:13px 14px; opacity:1; animation:none;
}
.team-vertical .tm-card:hover{border-color:var(--accent); transform:none;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);}
.team-vertical .tm-meta{align-items:flex-start; gap:3px;}
.team-vertical .tm-media{width:48px; height:48px; margin-top:2px;}
.team-vertical .tm-bio{font-size:11.5px;}
.team-vertical .tm-cap,.team-vertical .tm-kids{display:none;}
.team-hint{font-size:11.5px; color:var(--ink-faint); text-align:center; margin-top:8px;}

/* --- بوم صفحه‌ی همکاران (team.html) --- */
.team-stage{padding:30px 0 64px;}
.team-stage-inner{max-width:1720px; margin-inline:auto; padding-inline:24px;}
.tm-legend{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 30px; padding-bottom:24px; margin-bottom:10px;
  border-bottom:1px dashed var(--line-strong);}
.tm-legend div{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-dim);}
.tm-legend b{color:var(--ink); font-weight:700;}
.lg-src{width:12px; height:12px; border:1.5px solid var(--accent); transform:rotate(45deg); flex-shrink:0;}
.lg-head{width:15px; height:9px; flex-shrink:0; border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line-strong));
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 32%, transparent), transparent);}
.lg-member{width:15px; height:9px; flex-shrink:0; border:1px solid var(--line-strong); background:var(--bg-raised);}
.team-empty{border:1px dashed var(--line-strong); padding:34px 22px; text-align:center; color:var(--ink-dim); font-size:14.5px;}
@media(max-width:900px){.team-stage-inner{padding-inline:16px;} .tm-legend{gap:10px 18px;}}

@media(max-width:900px){
  .team-scroller{display:none;}
  .team-hint{display:none;}
  .team-vertical{display:block;}
}
@media(prefers-reduced-motion: reduce){
  /* !important لازم است: قواعد .is-live اختصاصی‌تر از این انتخابگرها هستند. */
  .tm-pulse,.tm-tail,.is-live .tm-cap,.is-live .tm-source-mark::after,.is-live .tm-v-rail::after{animation:none !important; opacity:0 !important;}
  .tm-cable{transition:none; stroke-dashoffset:0;}
  .tm-cap{opacity:.8 !important;}
  .is-live .tm-card{animation:none; opacity:1;}
}