/* Nobal Sanat — animated engineering hero. Scoped under .nsc-hero. v1.0.0 */

.nsc-hero{
  --nsc-bg:#111418; --nsc-line:#E7ECF2; --nsc-dim:#5A6673;
  --nsc-acc:#FFC61E; --nsc-hud:#C3CCD6; --nsc-red:#D81E24;
  position:relative;
  overflow:hidden;
  background:var(--nsc-bg);
  color:var(--nsc-line);
  font-family:"Vazirmatn","IRANSans","Iranian Sans",Tahoma,sans-serif;
  line-height:1.7;
  isolation:isolate;
}
.nsc-hero[data-pal="blueprint"]{--nsc-bg:#0A2740;--nsc-line:#E6F0FA;--nsc-dim:#3C79A8;--nsc-acc:#FFD24D;--nsc-hud:#AECCE6}
.nsc-hero[data-pal="phosphor"]{--nsc-bg:#04120A;--nsc-line:#46FF7E;--nsc-dim:#177A3C;--nsc-acc:#D8FF4A;--nsc-hud:#5BE68C}
.nsc-hero[data-lang="en"]{font-family:"IBM Plex Sans",system-ui,sans-serif}

.nsc-hero *,.nsc-hero *::before,.nsc-hero *::after{box-sizing:border-box}

/* faint model-space rulers along the top and side edges */
.nsc-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 40px) top/100% 6px no-repeat,
    repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 40px) left/6px 100% no-repeat;
  opacity:.13;
}

/* ---------- stage + copy ---------- */
.nsc-hero__wrap{position:relative;display:grid;z-index:4}
.nsc-hero__stage{grid-area:1/1;position:relative;min-height:300px;height:var(--nsc-h,clamp(400px,60vh,620px))}
.nsc-hero__stage canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.nsc-hero__stage canvas:active{cursor:grabbing}

.nsc-hero__copy{
  grid-area:1/1;position:relative;z-index:2;
  justify-self:start;align-self:start;
  max-width:min(30rem,47%);
  padding-block:42px 0;
  padding-inline-start:clamp(16px,3vw,40px);padding-inline-end:12px;
  pointer-events:none;
}
.nsc-hero[data-lang="en"] .nsc-hero__copy{
  justify-self:end;
  padding-inline-start:12px;padding-inline-end:clamp(16px,3vw,40px);
}

.nsc-hero__eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.28em;color:var(--nsc-acc);
  display:flex;align-items:center;gap:10px;margin:0;
}
.nsc-hero__eyebrow::after{content:"";width:36px;height:1px;background:currentColor;opacity:.55}

.nsc-hero__title{
  font-family:"Noto Kufi Arabic","Vazirmatn",sans-serif;
  font-weight:900;
  font-size:clamp(30px,5.2vw,54px);
  line-height:1.24;
  margin:16px 0 0;
  padding:0;
  color:var(--nsc-line);
  text-wrap:balance;
  letter-spacing:-.005em;
}
.nsc-hero[data-lang="en"] .nsc-hero__title{
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:700;
  font-size:clamp(30px,4.2vw,50px);line-height:1.1;letter-spacing:-.022em;
}
.nsc-hero__title em{font-style:normal;color:var(--nsc-acc)}

.nsc-hero__sub{
  margin:16px 0 0;
  font-size:clamp(14px,1.55vw,16.5px);
  line-height:1.85;
  color:var(--nsc-hud);
}
.nsc-hero__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;pointer-events:auto}
.nsc-hero__btn{
  font-family:inherit;font-size:14px;font-weight:700;
  padding:12px 20px;border-radius:2px;text-decoration:none;
  border:1px solid transparent;transition:.18s ease;display:inline-block;
}
.nsc-hero__btn--a{background:var(--nsc-acc);color:#141414;border-color:var(--nsc-acc)}
.nsc-hero__btn--a:hover,.nsc-hero__btn--a:focus{filter:brightness(1.1);color:#141414}
.nsc-hero__btn--b{color:var(--nsc-line);border-color:var(--nsc-dim)}
.nsc-hero__btn--b:hover,.nsc-hero__btn--b:focus{border-color:var(--nsc-line);color:var(--nsc-line)}
.nsc-hero__btn:focus-visible{outline:2px solid var(--nsc-acc);outline-offset:3px}

.nsc-hero__chips{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:26px;padding:0;list-style:none}
.nsc-hero__chips li{
  font-size:11.5px;color:var(--nsc-hud);
  border:1px solid var(--nsc-dim);
  padding:5px 10px;border-radius:999px;line-height:1.6;
}

/* UCS icon — the CAD signature */
.nsc-hero__ucs{position:absolute;bottom:14px;left:18px;z-index:2;opacity:.5;pointer-events:none}

/* ---------- HUD bar ---------- */
.nsc-hero__hud{
  position:relative;z-index:5;
  border-top:1px solid var(--nsc-dim);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:11px clamp(16px,3vw,40px);
}
.nsc-hero__pals{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.nsc-hero__pal{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:1px solid var(--nsc-dim);
  color:var(--nsc-hud);border-radius:2px;padding:6px 11px;cursor:pointer;
  font-family:inherit;font-size:12px;line-height:1.4;transition:.18s ease;
}
.nsc-hero__pal .nsc-sw{width:9px;height:9px;border-radius:1px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.nsc-hero__pal:hover{border-color:var(--nsc-line);color:var(--nsc-line)}
.nsc-hero__pal[aria-pressed="true"]{border-color:var(--nsc-acc);color:var(--nsc-line)}
.nsc-hero__pal:focus-visible{outline:2px solid var(--nsc-acc);outline-offset:2px}

.nsc-hero__hint{font-size:11px;color:var(--nsc-dim);white-space:nowrap}
.nsc-hero[data-lang="en"] .nsc-hero__hint{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.14em;
}

.nsc-hero__rail{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nsc-hero__st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--nsc-dim);transition:color .2s ease}
.nsc-hero__st .nsc-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.nsc-hero__st.is-on{color:var(--nsc-acc)}
.nsc-hero__sep{color:var(--nsc-dim);font-size:11px;opacity:.7}
.nsc-hero__count{
  font-size:11.5px;color:var(--nsc-hud);letter-spacing:.06em;
  border-inline-start:1px solid var(--nsc-dim);
  padding-inline-start:12px;margin-inline-start:6px;
  font-variant-numeric:tabular-nums;
}

/* ---------- phone ---------- */
@media (max-width:880px){
  .nsc-hero__wrap{grid-template-rows:auto auto}
  .nsc-hero__stage{grid-area:auto;order:2;height:var(--nsc-hm,min(56vh,420px))}
  .nsc-hero__copy{
    grid-area:auto;order:1;
    max-width:none;justify-self:stretch;
    padding-block:30px 4px;padding-inline:16px;
  }
  .nsc-hero[data-lang="en"] .nsc-hero__copy{justify-self:stretch;padding-inline:16px}
  .nsc-hero__ucs,.nsc-hero__hint{display:none}
}
@media (max-width:640px){
  .nsc-hero__count{border:0;padding-inline-start:0;margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){
  .nsc-hero *{transition-duration:.01ms !important}
}