/* /modeling — "Modelling & analysis" showcase page (hero with a live 3D building, feature blocks, workflow). */
.mhero{position:relative;color:#fff;background:radial-gradient(1200px 600px at 80% 20%,#1f6fd133,transparent 60%),linear-gradient(135deg,#061a37 0%,#0b2e5c 55%,#123f7a 100%);overflow:hidden}
.mhero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:40px 40px;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.mhero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:center;padding-top:64px;padding-bottom:64px}
.mhero .chip{display:inline-flex;align-items:center;gap:8px;background:#ffffff1a;border:1px solid #ffffff40;border-radius:30px;padding:5px 14px;font-size:13px;font-weight:600;color:#e6f0ff;margin-bottom:18px}
.mhero .chip i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px #3ddc8433}
.mhero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.08;margin:0 0 16px;letter-spacing:-.01em}
.mhero h1 em{font-style:normal;background:linear-gradient(90deg,#7cc4ff,#3ddc84);-webkit-background-clip:text;background-clip:text;color:transparent}
.mhero p.lede{font-size:clamp(17px,1.8vw,19px);color:#d3e3f8;margin:0 0 26px;max-width:560px}
.mhero .row-btn .btn.ghost{background:#ffffff1f;border:1px solid #ffffff66}
.mstats{display:flex;flex-wrap:wrap;gap:22px 30px;margin-top:30px}
.mstats div{min-width:110px}
.mstats b{display:block;font-size:24px;line-height:1.15;font-weight:800;color:#fff}
.mstats span{color:#b9cdea;font-size:14px}
body.fa .mhero h1{letter-spacing:0;line-height:1.4}
html[dir=rtl] .mstats b{text-align:right}

/* live 3D viewer */
.mviewer{position:relative;border-radius:18px;background:linear-gradient(180deg,#0d2a52,#081f40);border:1px solid #ffffff26;box-shadow:0 20px 60px #00000059;overflow:hidden;min-width:0}
.mviewer .mv-canvas{position:relative;height:480px}
.mviewer canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.mviewer canvas:active{cursor:grabbing}
.mviewer .mv-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.mv-bar{position:absolute;top:12px;inset-inline-start:12px;inset-inline-end:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;pointer-events:none}
.mv-bar button{pointer-events:auto;display:inline-flex;align-items:center;gap:7px;border:1px solid #ffffff40;background:#061a37b3;color:#fff;border-radius:30px;padding:6px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px)}
.mv-bar button:hover{background:#123f7acc}
.mv-bar button[aria-pressed=true]{background:#1f6fd1;border-color:#1f6fd1}
.mv-bar button svg{flex:0 0 auto}
.mv-bar .mv-tag{margin-inline-start:auto;font-size:12px;color:#b9cdea;background:#061a37b3;border-radius:30px;padding:5px 11px;border:1px solid #ffffff26}
.mv-legend{position:absolute;bottom:12px;inset-inline-start:12px;background:#061a37cc;border:1px solid #ffffff26;border-radius:12px;padding:8px 12px;font-size:12px;color:#d3e3f8;backdrop-filter:blur(6px);min-width:190px}
.mv-legend b{display:block;font-size:12px;color:#fff;margin-bottom:5px;font-weight:700}
.mv-legend .grad{height:9px;border-radius:5px;background:linear-gradient(90deg,#3b82f6,#22c3a6 35%,#f5d63d 60%,#f59e0b 80%,#ef4444)}
html[dir=rtl] .mv-legend .grad{background:linear-gradient(270deg,#3b82f6,#22c3a6 35%,#f5d63d 60%,#f59e0b 80%,#ef4444)}
.mv-legend .ends{display:flex;justify-content:space-between;margin-top:3px;font-variant-numeric:tabular-nums}
.mv-legend .wind{display:flex;align-items:center;gap:6px;margin-top:6px;color:#b9cdea}
.mv-legend .wind i{display:inline-block;width:18px;height:2px;background:#9fd3ff;position:relative}
.mv-legend .wind i:after{content:"";position:absolute;inset-inline-end:-2px;top:-3px;border:4px solid transparent;border-inline-start:6px solid #9fd3ff;border-inline-end:0}
.mv-hint{position:absolute;bottom:14px;inset-inline-end:14px;font-size:12px;color:#9fb6d6;text-align:end;max-width:44%}
.mv-cap{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 16px;border-top:1px solid #ffffff1f;font-size:13px;color:#b9cdea;background:#061a3799}
.mv-cap bdi{color:#fff;font-weight:600}

/* quick tool strip */
.mtools{background:#fff;border-bottom:1px solid var(--line)}
.mtools .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-top:18px;padding-bottom:18px}
.mtools a{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fbfdff;color:var(--navy);font-weight:600;min-width:0}
.mtools a:hover{text-decoration:none;border-color:var(--blue);background:var(--sky)}
.mtools a small{display:block;color:var(--muted);font-weight:500;font-size:13px}
.mtools .ic{flex:0 0 40px;height:40px;border-radius:10px;background:var(--sky);display:grid;place-items:center;color:var(--blue)}

/* feature blocks */
.feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center;padding:34px 0}
.feat + .feat{border-top:1px solid var(--line)}
.feat.rev .feat-vis{order:2}
.feat-vis{position:relative;display:block;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#f3f7fc,#e6eef8);border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:16/10}
.feat-vis img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.feat-vis:hover img{transform:scale(1.04)}
.feat-vis .num{position:absolute;top:14px;inset-inline-start:14px;background:var(--navy);color:#fff;border-radius:30px;padding:4px 12px;font-size:13px;font-weight:700}
.feat h2{margin-bottom:10px}
.feat p.d{color:var(--muted);font-size:17px;margin:0 0 6px}
.feat .feature-list{margin:14px 0 22px}
.feat .tags{margin:0 0 18px}
.feat .row-btn .btn{display:inline-flex;align-items:center;gap:8px}

/* workflow */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:28px;counter-reset:f}
.flow > div{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px;box-shadow:var(--shadow)}
.flow > div:not(:last-child):after{content:"";position:absolute;top:44px;inset-inline-end:-14px;width:10px;height:10px;border-top:2px solid var(--blue);border-inline-end:2px solid var(--blue);transform:rotate(45deg);z-index:1}
html[dir=rtl] .flow > div:not(:last-child):after{transform:rotate(-45deg)}
.flow .ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#0b2e5c,#1f6fd1);color:#fff;display:grid;place-items:center;margin-bottom:14px}
.flow b{display:block;color:var(--navy);font-size:17px;margin-bottom:4px}
.flow b:before{counter-increment:f;content:counter(f) ". ";color:var(--blue)}
body.fa .flow b:before{content:counter(f,persian) ". "}
.flow p{margin:0;color:var(--muted);font-size:15px}

/* model -> design */
.m2d{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start}
.m2d .pipe{display:flex;flex-direction:column;gap:10px}
.m2d .pipe > div{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.m2d .pipe .ic{flex:0 0 40px;height:40px;border-radius:10px;background:var(--sky);color:var(--blue);display:grid;place-items:center}
.m2d .pipe b{color:var(--navy);display:block}
.m2d .pipe span.s{color:var(--muted);font-size:15px}
.m2d .arrow{align-self:center;color:var(--blue);line-height:0}
.dcodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dcodes > div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.dcodes h4{margin:0 0 8px;color:var(--navy);font-size:15px}
.dcodes a{display:inline-block;font-size:13px;font-weight:600;color:var(--navy);background:var(--sky);border-radius:20px;padding:3px 10px;margin:0 6px 6px 0}
.dcodes a:hover{background:#d6e6fa;text-decoration:none}
.dcodes .auto{grid-column:1/-1;background:linear-gradient(120deg,#e8f6ee,#f3fbf6);border-color:#bfe5cf}
.dcodes .auto h4{color:var(--ok)}
.dcodes .auto p{margin:0 0 8px;color:#2b4a3a;font-size:14px}

.mnotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mnotes > div{background:#fff8e6;border:1px solid #f3dfa8;border-radius:12px;padding:14px 16px;font-size:14px;color:#6b5210}
.mnotes b{display:block;color:#5a440c;margin-bottom:3px}

@media (max-width:980px){
  .mhero .wrap{grid-template-columns:1fr;gap:28px;padding-top:40px;padding-bottom:44px}
  .mtools .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow > div:nth-child(2):after{display:none}
  .m2d{grid-template-columns:1fr}
}
@media (max-width:760px){
  .feat,.feat.rev{grid-template-columns:1fr;gap:22px;padding:26px 0}
  .feat.rev .feat-vis{order:0}
  .mnotes{grid-template-columns:1fr}
  .mviewer .mv-canvas{height:380px}
  .mv-hint{display:none}
}
@media (max-width:520px){
  .mtools .wrap{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .flow > div:after{display:none}
  .dcodes{grid-template-columns:1fr}
  .mviewer .mv-canvas{height:340px}
  .mv-legend{min-width:0;width:168px;padding:6px 10px;font-size:11px}
  .mv-legend b{font-size:11px;margin-bottom:3px}
  .mv-legend .wind{display:none}
  .mv-bar button{padding:5px 10px;font-size:12px}
  .mv-bar .mv-tag{display:none}
  .mstats{gap:16px 22px}
  .mstats b{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.feat-vis img{transition:none}}