:root{
  --navy:#122c4a;--navy2:#1d4776;--navy3:#2c6097;--navy-soft:#eef3f8;
  --bg:#f3f6fa;--paper:#fff;--ink:#111827;--muted:#66758b;--line:#dce4ed;--line2:#edf1f5;
  --shadow:0 18px 55px rgba(20,41,69,.09);--radius:22px;--mx:50%;--my:50%;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
radial-gradient(circle at 6% 18%,rgba(18,44,74,.06),transparent 24%),
radial-gradient(circle at 94% 38%,rgba(44,96,151,.05),transparent 25%),
linear-gradient(180deg,#f8fafc 0,#f2f5f9 52%,#eef3f8 100%);
color:var(--ink);font-family:"Vazirmatn",Tahoma,sans-serif;line-height:1.85;overflow-x:hidden}
html[dir=ltr] body{font-family:"Inter",Arial,sans-serif;line-height:1.72}
a{color:inherit;text-decoration:none}button{font:inherit}
.container{width:min(1080px,calc(100% - 30px));margin:auto}
.section-card{position:relative;background:rgba(255,255,255,.975);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 48px rgba(18,44,74,.07);overflow:hidden}
.section-card:after{content:"";position:absolute;top:0;right:26px;left:26px;height:2px;background:linear-gradient(90deg,transparent,var(--navy3),transparent);opacity:.52}
.interactive-card{position:relative;overflow:hidden}
.interactive-card:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(44,96,151,.10),transparent 64%)}
.interactive-card:hover:before{opacity:1}
.reveal{opacity:0;transform:translateY(16px);transition:.55s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}

/* Header — intentionally close in rhythm to the supplied reference, but independently coded */
.topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--line2)}
.topbar-inner{height:72px;display:flex;align-items:center;gap:19px}
.brand{font-weight:900;white-space:nowrap;font-size:15px}.brand b{color:var(--navy3)}
.nav{display:flex;align-items:center;gap:1px;flex:1;overflow:auto;scrollbar-width:none}
.nav a{white-space:nowrap;padding:9px 10px;border-radius:12px;color:#61718a;font-size:14px;font-weight:600;transition:.2s}
.nav a:hover,.nav a.active{background:var(--navy-soft);color:var(--navy)}
.header-actions{display:flex;align-items:center;gap:7px;margin-inline-start:auto}
.mode-mini{display:flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:#fafbfd}
.mode-mini a,.mode-mini button{border:0;background:transparent;color:#65758d;padding:7px 11px;border-radius:999px;cursor:pointer;font-size:11px;font-weight:800}
.mode-mini .active{background:var(--navy);color:white;box-shadow:0 5px 16px rgba(18,44,74,.18)}
.lang-link,.contact-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;cursor:pointer;font-weight:800;font-size:11px;color:var(--navy);transition:.2s}
.contact-btn{background:var(--navy);color:#fff;border-color:var(--navy)}.lang-link:hover,.contact-btn:hover{transform:translateY(-1px)}

/* Hero */
.hero-zone{position:relative;padding:58px 0 28px}
.hero-orb{position:absolute;pointer-events:none;border-radius:50%;opacity:.14;animation:floatOrb 10s ease-in-out infinite}
.hero-orb.one{width:230px;height:230px;right:2%;top:8%;background:radial-gradient(circle at 35% 30%,#d9e7f7,var(--navy3) 45%,transparent 72%)}
.hero-orb.two{width:160px;height:160px;left:4%;bottom:2%;background:radial-gradient(circle at 40% 30%,#e8eef7,#6687aa 44%,transparent 72%);animation-delay:-4s}
@keyframes floatOrb{50%{transform:translateY(-12px) scale(1.03)}}
.hero-card{padding:50px 52px 36px;text-align:center}.hero-card:after{right:38px;left:38px}
.photo-stage{position:relative;width:178px;height:178px;margin:0 auto 26px;display:grid;place-items:center}
.photo-stage:before,.photo-stage:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(18,44,74,.22);animation:spin 18s linear infinite}
.photo-stage:before{inset:-10px;border-style:dashed}.photo-stage:after{inset:-18px;border-color:rgba(44,96,151,.10);animation-direction:reverse;animation-duration:24s}
@keyframes spin{to{transform:rotate(360deg)}}
.portrait{width:172px;height:172px;object-fit:cover;object-position:50% 34%;border-radius:50%;border:6px solid #fff;outline:4px solid var(--navy);box-shadow:0 14px 38px rgba(18,44,74,.18);position:relative;z-index:2}
.hero-name{font-size:clamp(2.8rem,6vw,4.9rem);line-height:1.08;letter-spacing:-2px;margin:0 0 8px;font-weight:900}.hero-name .accent{color:var(--navy3)}
.hero-title{font-size:clamp(1.05rem,2.4vw,1.45rem);font-weight:700;color:#607189}.location{display:flex;justify-content:center;align-items:center;gap:6px;color:#78869a;font-size:12px;margin-top:8px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:min(720px,100%);margin:26px auto 0}.stat{border:1px solid var(--line);border-radius:16px;padding:13px 10px;background:linear-gradient(180deg,#fff,#fbfcfd);transition:.2s}.stat:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(18,44,74,.09)}.stat strong{display:block;color:var(--navy3);font-size:17px}.stat span{font-size:9.5px;color:#748398;letter-spacing:.04em}
.hero-lead{max-width:850px;margin:24px auto 0;color:#64748b;font-size:13.7px}
.mode-chooser{margin-top:30px;border:1px solid #cfdae6;border-radius:19px;padding:18px;background:linear-gradient(135deg,#f9fbfd,#eef3f8);text-align:start}
.mode-chooser-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:13px}.mode-chooser-title strong{font-size:16px;color:var(--navy)}.mode-chooser-title span{font-size:10px;color:#718198}
.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mode-option{display:block;border:1px solid var(--line);background:#fff;border-radius:16px;padding:15px;text-align:start;transition:.22s;color:var(--ink)}.mode-option:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(18,44,74,.08)}.mode-option.active{border-color:var(--navy3);box-shadow:inset 0 0 0 1px var(--navy3);background:#f7faff}.mode-badge{display:inline-flex;padding:4px 8px;border-radius:999px;background:var(--navy-soft);color:var(--navy);font-size:9px;font-weight:900}.mode-option h3{margin:8px 0 3px;font-size:14px}.mode-option p{margin:0;color:#6e7d92;font-size:10.7px}
.hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:11px;font-weight:850;transition:.2s;cursor:pointer}.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(18,44,74,.10)}

/* Content cards */
.section{margin:28px auto}.section-inner{padding:40px 48px}.section-heading{display:flex;align-items:center;gap:14px;margin-bottom:26px}.section-heading h2{font-size:20px;color:var(--navy3);margin:0;white-space:nowrap}.section-heading:after{content:"";height:1px;background:linear-gradient(90deg,#dbe3ec,transparent);flex:1}html[dir=rtl] .section-heading:after{background:linear-gradient(270deg,#dbe3ec,transparent)}
.section-intro{font-size:13.5px;color:#65758c;margin:-8px 0 22px;max-width:900px}
.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.summary-item{border:1px solid var(--line);border-radius:16px;padding:17px;background:linear-gradient(135deg,#fff,#fbfcfd);display:grid;grid-template-columns:33px 1fr;gap:11px;align-items:start;transition:.22s}.summary-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.summary-icon{width:32px;height:32px;border-radius:10px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:14px}.summary-item h3{font-size:13px;margin:0 0 4px}.summary-item p{font-size:11.5px;color:#6c7b90;margin:0}
.thesis-box{margin-top:14px;padding:23px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#132d4a,#1f4a77);color:#fff}.thesis-box h3{font-size:18px;margin:0 0 8px}.thesis-box>p{color:#dbe6f2;font-size:12.5px;margin:0}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:19px;direction:rtl}.flow-step{position:relative;border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:13px;background:rgba(255,255,255,.07);font-size:10.5px}.flow-step:not(:last-child):after{content:"←";position:absolute;left:-21px;top:50%;transform:translateY(-50%);font-size:18px;color:#d7e5f4}.flow-step b{display:block;font-size:11.5px;margin-bottom:2px}html[dir=ltr] .flow{direction:ltr}html[dir=ltr] .flow-step:not(:last-child):after{content:"→";left:auto;right:-21px}

/* Journey */
.journey-row{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;direction:rtl;align-items:start}.journey-step{text-align:center;position:relative}.journey-step:not(:last-child):after{content:"←";position:absolute;left:-20px;top:28px;color:var(--navy3);font-size:18px}.journey-icon{width:58px;height:58px;margin:auto;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;border:5px solid #edf2f7;box-shadow:0 0 0 1px var(--line);font-size:18px;animation:microFloat 5s ease-in-out infinite}.journey-step:nth-child(even) .journey-icon{animation-delay:-2.5s}.journey-step b{display:block;font-size:11.5px;margin-top:8px}.journey-step small{display:block;color:#748398;font-size:9.5px}html[dir=ltr] .journey-row{direction:ltr}html[dir=ltr] .journey-step:not(:last-child):after{content:"→";left:auto;right:-20px}@keyframes microFloat{50%{transform:translateY(-4px)}}

/* Experience */
.timeline{position:relative}.timeline:before{content:"";position:absolute;right:13px;top:15px;bottom:15px;width:2px;background:linear-gradient(var(--navy),#94abc2)}.timeline-job{position:relative;padding:20px 54px 20px 20px;border-bottom:1px solid var(--line2);display:grid;grid-template-columns:145px 1fr;gap:20px}.timeline-marker{position:absolute;right:0;top:24px;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;border:5px solid #eef3f8;display:grid;place-items:center;font-size:7px;font-weight:900;box-shadow:0 0 0 1px #bdcad8}.job-date{font-size:10.5px;color:#738298;padding-top:3px}.job-main h3{margin:0;font-size:16px}.job-org{color:var(--navy3);font-weight:750;font-size:11px;margin:2px 0 7px}.job-main>p{font-size:11.8px;color:#68778d;margin:0}.job-detail{margin-top:12px;padding:12px 14px;border-radius:12px;background:#f5f8fb;border:1px dashed #cfd9e4}.detail-label{font-size:9.5px;color:var(--navy3);font-weight:900}.job-detail ul{margin:7px 0 0;padding-inline-start:18px}.job-detail li{font-size:10.8px;color:#66758a;margin:4px 0}html[dir=ltr] .timeline:before{right:auto;left:13px}html[dir=ltr] .timeline-job{padding:20px 20px 20px 54px}html[dir=ltr] .timeline-marker{right:auto;left:0}

/* Leadership */
.leadership-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.lead-card{border:1px solid var(--line);border-radius:16px;padding:18px;background:#fff;transition:.22s}.lead-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.lead-card small{color:var(--navy3);font-weight:900;font-size:9px}.lead-card h3{font-size:13px;margin:5px 0}.lead-card p{font-size:11.5px;color:#6b7a90;margin:0}.leadership-note{margin-top:13px;border-inline-start:4px solid var(--navy);padding:15px 18px;background:#f2f6fa;border-radius:14px;font-size:12px;color:#596a81}.leadership-note strong{color:var(--navy)}

/* AI */
.ai-panel{position:relative;overflow:hidden;border-radius:18px;padding:24px;background:linear-gradient(135deg,#112a46,#1d4d7d);color:#fff}.ai-panel:after{content:"AI";position:absolute;left:20px;bottom:-58px;font:900 150px/1 Inter,sans-serif;opacity:.045}.ai-panel>h3,.ai-panel>p,.ai-flow,.ai-benefits,.ai-tools{position:relative;z-index:2}.ai-panel h3{font-size:20px;margin:0 0 7px}.ai-panel>p{font-size:12px;color:#dbe6f2;max-width:900px}.ai-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:18px}.ai-phase{padding:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);border-radius:12px;font-size:10px}.ai-phase b{display:block;font-size:11px;margin-bottom:2px}.ai-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:11px}.ai-benefit{padding:13px;border-radius:12px;background:rgba(255,255,255,.08);font-size:10.5px;color:#dce7f2}.ai-benefit b{display:block;color:#fff;margin-bottom:3px}.ai-tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.ai-tool{border:1px solid rgba(255,255,255,.17);border-radius:999px;padding:6px 9px;font-size:9px;color:#e7eff7}

/* Systems */
.system-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.system-card{border:1px solid var(--line);border-radius:18px;padding:20px;background:#fff;transition:.22s;min-height:240px}.system-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.system-icon{width:40px;height:40px;border-radius:12px;background:var(--navy-soft);color:var(--navy);display:grid;place-items:center;font-size:18px}.system-tag{margin-top:10px;color:var(--navy3);font-size:8.5px;font-weight:900;letter-spacing:.05em}.system-card h3{font-size:14px;margin:5px 0 6px}.system-summary{font-size:11px;color:#6a788c;margin:0}.system-value{margin-top:11px;padding-top:10px;border-top:1px solid var(--line2);font-size:10px;font-weight:750;color:#394b61}.technical{margin-top:11px;padding:11px 12px;background:#f4f7fa;border-radius:11px}.technical-title{font-size:9px;font-weight:900;color:var(--navy3)}.technical p{font-size:10.2px;color:#68768a;margin:4px 0 0}

/* Impact / skills / foundation */
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.impact-card{border:1px solid var(--line);border-radius:16px;padding:17px;background:#fff;transition:.22s}.impact-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.impact-card small{color:var(--navy3);font-size:8px;font-weight:900}.impact-card strong{display:block;font-size:12.5px;margin:6px 0}.impact-card p{font-size:10.5px;color:#6d7b90;margin:0}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.skill-box{border:1px solid var(--line);border-radius:16px;padding:19px;background:#fff}.skill-box small{color:var(--navy3);font-size:9px;font-weight:900}.skill-box h3{font-size:13px;margin:5px 0 10px}.skill-list{display:flex;flex-wrap:wrap;gap:7px}.skill-pill{border:1px solid #d9e1ea;border-radius:999px;padding:6px 9px;font-size:9.5px;color:#50627a;background:#fbfcfd}.skill-pill.major{background:var(--navy);border-color:var(--navy);color:#fff}
.foundation-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.foundation-card{border:1px solid var(--line);border-radius:16px;padding:19px;background:#fff}.foundation-card small{color:var(--navy3);font-weight:900;font-size:9px}.foundation-card h3{font-size:14px;margin:6px 0}.foundation-card p{font-size:11px;color:#69788d;margin:0}
.future-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.future-card{min-height:130px;border:1px dashed #b8c6d5;border-radius:16px;padding:17px;background:linear-gradient(135deg,#fff,#f5f8fb)}.future-card b{display:block;color:var(--navy);font-size:12px;margin-bottom:5px}.future-card p{font-size:10.5px;color:#708096;margin:0}.future-badge{display:inline-flex;margin-top:9px;padding:4px 7px;border-radius:999px;background:var(--navy-soft);color:var(--navy3);font-size:8px;font-weight:900}
.quote{padding:26px 30px;text-align:center;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#f8fafc,#edf3f8);font-size:17px;font-weight:800;color:var(--navy)}.quote span{display:block;font-size:9.5px;color:#738196;margin-top:8px;font-weight:600}
.footer{padding:38px 0 55px;color:#718096;font-size:9.5px;display:flex;justify-content:space-between;gap:20px}

/* HR / Extended */
.extended-only{display:block}body.mode-hr .extended-only{display:none!important}

/* Contact */
.contact-fab{position:fixed;left:18px;bottom:18px;z-index:55;border:0;border-radius:999px;background:var(--navy);color:#fff;padding:11px 14px;box-shadow:0 12px 34px rgba(18,44,74,.24);font-weight:850;font-size:10.5px;cursor:pointer}
html[dir=ltr] .contact-fab{left:auto;right:18px}
.contact-overlay{position:fixed;inset:0;z-index:90;background:rgba(7,18,31,.44);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.25s}
.contact-overlay.open{opacity:1;visibility:visible}
.contact-panel{position:absolute;top:0;bottom:0;left:0;width:min(390px,92vw);background:#fff;padding:28px;box-shadow:20px 0 55px rgba(0,0,0,.16);transform:translateX(-100%);transition:.28s;overflow:auto}
html[dir=ltr] .contact-panel{left:auto;right:0;transform:translateX(100%);box-shadow:-20px 0 55px rgba(0,0,0,.16)}
.contact-overlay.open .contact-panel{transform:none}.contact-close{border:1px solid var(--line);background:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer}.contact-panel h2{font-size:24px;margin:28px 0 5px;color:var(--navy)}.contact-panel>p{color:#6b7b91;font-size:11.5px}.contact-link{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line2);font-size:11px}.contact-link b{color:var(--navy)}.contact-placeholder{color:#9aa6b5}.contact-note{margin-top:18px;padding:12px;background:#f3f6f9;border-radius:12px;color:#708096;font-size:9.5px}

/* Responsive */
@media(max-width:980px){
 .nav{display:none}.topbar-inner{height:64px}.hero-card{padding:40px 28px 30px}.stats{grid-template-columns:repeat(2,1fr)}
 .summary-grid,.leadership-grid,.system-grid,.foundation-grid{grid-template-columns:1fr}.impact-grid{grid-template-columns:repeat(2,1fr)}.skills-grid{grid-template-columns:1fr}
 .journey-row{grid-template-columns:repeat(5,140px);overflow:auto;padding-bottom:8px}.timeline-job{grid-template-columns:1fr;gap:5px}
 .ai-flow{grid-template-columns:repeat(2,1fr)}.ai-benefits{grid-template-columns:1fr}.future-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
 .container{width:min(100% - 18px,1080px)}.brand{font-size:13px}.mode-mini{display:none}.hero-zone{padding-top:25px}.hero-card{padding:32px 16px 24px}
 .photo-stage{width:148px;height:148px}.portrait{width:142px;height:142px}.hero-name{letter-spacing:-1px}.stats{grid-template-columns:1fr 1fr;gap:8px}
 .mode-options{grid-template-columns:1fr}.section-inner{padding:30px 18px}.summary-grid{grid-template-columns:1fr}.flow{grid-template-columns:1fr;gap:8px}.flow-step:after{display:none}
 .impact-grid{grid-template-columns:1fr}.footer{display:block;text-align:center}.contact-fab{left:10px;bottom:10px}html[dir=ltr] .contact-fab{right:10px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
@media print{.topbar,.contact-fab,.contact-overlay,.mode-chooser,.hero-actions{display:none!important}body{background:#fff}.section-card{box-shadow:none}.reveal{opacity:1;transform:none}body.mode-hr .extended-only{display:none!important}}


/* =========================================================
   TYPOGRAPHY TUNING — V1
   Requested change: larger readable copy while preserving
   the approved layout, spacing language and visual identity.
   ========================================================= */
.stat span{font-size:10.8px}
.hero-lead{font-size:15px}
.mode-chooser-title span{font-size:11px}
.mode-badge{font-size:10px}
.mode-option h3{font-size:15px}
.mode-option p{font-size:12px}
.btn{font-size:12.5px}

.section-intro{font-size:14.5px}
.summary-item h3{font-size:14.5px}
.summary-item p{font-size:13px}
.thesis-box>p{font-size:13.5px}
.flow-step{font-size:11.5px}
.flow-step b{font-size:12.5px}

.journey-step b{font-size:12.5px}
.journey-step small{font-size:10.5px}

.job-date{font-size:11.5px}
.job-org{font-size:12px}
.job-main>p{font-size:13px}
.detail-label{font-size:10.5px}
.job-detail li{font-size:12px}

.lead-card small{font-size:10px}
.lead-card h3{font-size:14.5px}
.lead-card p{font-size:13px}
.leadership-note{font-size:13px}

.ai-panel>p{font-size:13px}
.ai-phase{font-size:11px}
.ai-phase b{font-size:12px}
.ai-benefit{font-size:11.5px}
.ai-tool{font-size:10px}

.system-tag{font-size:9.5px}
.system-card h3{font-size:15.5px}
.system-summary{font-size:12.5px}
.system-value{font-size:11.5px}
.technical-title{font-size:10px}
.technical p{font-size:11.5px}

.impact-card small{font-size:9px}
.impact-card strong{font-size:13.5px}
.impact-card p{font-size:12px}

.skill-box small{font-size:10px}
.skill-box h3{font-size:14.5px}
.skill-pill{font-size:10.5px}

.foundation-card small{font-size:10px}
.foundation-card h3{font-size:15px}
.foundation-card p{font-size:12px}

.future-card b{font-size:13px}
.future-card p{font-size:11.5px}
.future-badge{font-size:9px}

.quote span{font-size:10.5px}
.footer{font-size:10.5px}

.contact-fab{font-size:11.5px}
.contact-panel>p{font-size:12.5px}
.contact-link{font-size:12px}
.contact-note{font-size:10.5px}

@media(max-width:620px){
  .hero-lead{font-size:14px}
  .section-intro{font-size:13.5px}
  .summary-item p,.job-main>p,.lead-card p,.system-summary{font-size:12.5px}
}

/* === FM PATCH: HERO TITLE + EXTENDED ATTENTION START === */

/* 1) Smaller hero name only */
.hero-name{
  font-size:clamp(2.35rem,5vw,4rem);
}

/* 2) Make the Extended option more noticeable, without changing layout */
#heroExt{
  position:relative;
  overflow:hidden;
  border-color:#aebfd1;
  background:linear-gradient(135deg,#ffffff 0%,#f2f6fa 58%,#eaf1f7 100%);
  box-shadow:0 9px 26px rgba(18,44,74,.09);
}

#heroExt .mode-badge{
  background:var(--navy);
  color:#fff;
}

#heroExt::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-55%;
  width:34%;
  height:190%;
  pointer-events:none;
  opacity:.42;
  transform:rotate(13deg);
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.12) 20%,
    rgba(255,255,255,.86) 50%,
    rgba(255,255,255,.12) 80%,
    transparent 100%
  );
  animation:fmExtendedSheen 5.8s ease-in-out infinite;
}

@keyframes fmExtendedSheen{
  0%,58%   { left:-55%; opacity:0; }
  64%      { opacity:.42; }
  86%      { left:122%; opacity:.36; }
  100%     { left:122%; opacity:0; }
}

@media(prefers-reduced-motion:reduce){
  #heroExt::after{animation:none;opacity:0}
}

/* === FM PATCH: HERO TITLE + EXTENDED ATTENTION END === */

/* === FM PATCH: MEDIA / EVENTS / CONTACT START === */
.media-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:12px}
.media-card{position:relative;border:1px solid var(--line);border-radius:18px;padding:21px;background:linear-gradient(145deg,#fff,#f8fafc);transition:.24s;min-height:245px}
.media-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#b9c8d8}
.media-card.media-feature{grid-row:span 2;background:linear-gradient(145deg,#fff 0%,#f4f8fb 68%,#edf3f8 100%)}
.media-card.exhibition-card{background:linear-gradient(135deg,#f8fbfd,#edf3f8)}
.media-icon{width:42px;height:42px;border-radius:13px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:19px;box-shadow:0 8px 22px rgba(18,44,74,.14)}
.media-tag{margin-top:11px;color:var(--navy3);font-size:9.5px;font-weight:900;letter-spacing:.05em}
.media-card h3{font-size:15.5px;line-height:1.65;margin:6px 0}
.media-card p{font-size:12.5px;color:#68778d;margin:0}
.media-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.media-link{display:inline-flex;align-items:center;padding:7px 10px;border-radius:10px;border:1px solid #cfd9e4;background:#fff;color:var(--navy);font-size:10.5px;font-weight:850;transition:.2s}
.media-link.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.media-link:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(18,44,74,.10)}
.media-proof{margin-top:13px;padding:11px 12px;border-radius:11px;background:#eef3f8;color:#617289;font-size:11px;border:1px solid #dbe4ed}
@media(max-width:820px){.media-grid{grid-template-columns:1fr}.media-card.media-feature{grid-row:auto}}
/* === FM PATCH: MEDIA / EVENTS / CONTACT END === */

/* === FM PATCH: CONTACT RTL + EXTENDED ATTENTION V2 START === */

.contact-ltr{
  direction:ltr !important;
  unicode-bidi:isolate !important;
  text-align:left;
  white-space:nowrap;
}

#heroExt{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:#9fb3c8;
  background:linear-gradient(135deg,#ffffff 0%,#f2f6fa 55%,#e8f0f7 100%);
  box-shadow:
    0 10px 30px rgba(18,44,74,.10),
    inset 0 0 0 1px rgba(44,96,151,.08);
  animation:fmExtendedBreath 5.4s ease-in-out infinite;
}

#heroExt .mode-badge{
  background:var(--navy);
  color:#fff;
  box-shadow:0 5px 14px rgba(18,44,74,.14);
}

#heroExt h3{
  color:var(--navy);
}

#heroExt::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(119,154,190,.18) 48%,
    rgba(255,255,255,.82) 52%,
    rgba(119,154,190,.18) 56%,
    transparent 66%,
    transparent 100%
  );
  background-size:260% 100%;
  background-position:180% 0;
  animation:fmExtendedSweep 6.6s ease-in-out infinite;
}

#heroExt::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:12px;
  pointer-events:none;
  border:1px solid rgba(44,96,151,.10);
  opacity:.65;
}

#heroExt:hover{
  transform:translateY(-4px);
  border-color:#7595b5;
  box-shadow:
    0 15px 38px rgba(18,44,74,.15),
    0 0 0 4px rgba(44,96,151,.06);
}

@keyframes fmExtendedBreath{
  0%,72%,100%{
    box-shadow:
      0 10px 30px rgba(18,44,74,.10),
      0 0 0 0 rgba(44,96,151,0),
      inset 0 0 0 1px rgba(44,96,151,.08);
  }
  82%{
    box-shadow:
      0 12px 34px rgba(18,44,74,.13),
      0 0 0 4px rgba(44,96,151,.055),
      inset 0 0 0 1px rgba(44,96,151,.12);
  }
}

@keyframes fmExtendedSweep{
  0%,62%{background-position:180% 0;opacity:0}
  68%{opacity:.70}
  86%{background-position:-80% 0;opacity:.55}
  100%{background-position:-80% 0;opacity:0}
}

@media(prefers-reduced-motion:reduce){
  #heroExt{animation:none}
  #heroExt::before{animation:none;opacity:0}
}

/* === FM PATCH: CONTACT RTL + EXTENDED ATTENTION V2 END === */

/* === FM PATCH: PDF + EXTENDED GLOW + CONTACT ICONS START === */
.pdf-download-btn{
  border-color:#c8d5e2;
  background:linear-gradient(180deg,#fff,#f8fafc);
}
.pdf-download-btn:hover{
  border-color:#9eb4ca;
  color:var(--navy);
}

#heroExt{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid #9fb4c9;
  background:linear-gradient(135deg,#ffffff 0%,#f4f8fc 48%,#edf4fa 100%);
  box-shadow:0 10px 30px rgba(18,44,74,.10),0 0 0 1px rgba(44,96,151,.035),inset 0 0 28px rgba(44,96,151,.025);
  animation:fmExtSoftPulse 7s ease-in-out infinite;
}
#heroExt .mode-badge{
  position:relative;
  z-index:3;
  background:linear-gradient(135deg,var(--navy),var(--navy2));
  color:#fff;
  box-shadow:0 6px 16px rgba(18,44,74,.16);
}
#heroExt .mode-badge::before{content:"✦";margin-inline-end:5px;opacity:.86}
#heroExt h3,#heroExt p{position:relative;z-index:3}
#heroExt::before{
  content:"";
  position:absolute;
  z-index:1;
  top:-70%;
  left:-52%;
  width:34%;
  height:250%;
  pointer-events:none;
  transform:rotate(14deg);
  background:linear-gradient(90deg,transparent 0%,rgba(153,183,212,.05) 24%,rgba(255,255,255,.78) 50%,rgba(117,154,190,.10) 72%,transparent 100%);
  filter:blur(.2px);
  animation:fmExtLightSweep 6.8s ease-in-out infinite;
}
#heroExt::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:6px;
  border-radius:12px;
  pointer-events:none;
  border:1px solid rgba(44,96,151,.10);
  box-shadow:inset 0 0 16px rgba(44,96,151,.035);
}
#heroExt:hover{
  transform:translateY(-4px);
  border-color:#7899b9;
  box-shadow:0 15px 38px rgba(18,44,74,.15),0 0 0 4px rgba(44,96,151,.055),inset 0 0 28px rgba(44,96,151,.04);
}
@keyframes fmExtLightSweep{
  0%,58%{left:-52%;opacity:0}
  64%{opacity:.68}
  84%{left:120%;opacity:.48}
  100%{left:120%;opacity:0}
}
@keyframes fmExtSoftPulse{
  0%,72%,100%{box-shadow:0 10px 30px rgba(18,44,74,.10),0 0 0 1px rgba(44,96,151,.035),inset 0 0 28px rgba(44,96,151,.025)}
  82%{box-shadow:0 12px 34px rgba(18,44,74,.13),0 0 0 5px rgba(44,96,151,.045),inset 0 0 30px rgba(44,96,151,.045)}
}

.contact-label{display:inline-flex;align-items:center;gap:9px;color:var(--navy);font-weight:800}
.contact-icon{
  width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:inline-grid;place-items:center;color:#fff;
  font:800 15px/1 Arial,sans-serif;border:1px solid rgba(255,255,255,.62);
  box-shadow:0 7px 15px rgba(18,44,74,.16),inset 0 1px 1px rgba(255,255,255,.45),inset 0 -4px 9px rgba(0,0,0,.10);
  text-shadow:0 1px 2px rgba(0,0,0,.14);transition:transform .2s,box-shadow .2s;
}
.contact-link:hover .contact-icon{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 20px rgba(18,44,74,.19),inset 0 1px 1px rgba(255,255,255,.52),inset 0 -4px 9px rgba(0,0,0,.08)}
.email-icon{background:linear-gradient(145deg,#4e6f92,#183b60)}
.phone-icon{background:linear-gradient(145deg,#55b98c,#237454)}
.linkedin-icon{background:linear-gradient(145deg,#1685ca,#075a9c);font-size:14px}
.telegram-icon{background:linear-gradient(145deg,#52bfe9,#1889bf);font-size:17px}
.contact-ltr{direction:ltr!important;unicode-bidi:isolate!important;text-align:left;white-space:nowrap}

@media(prefers-reduced-motion:reduce){#heroExt{animation:none}#heroExt::before{animation:none;opacity:0}}
/* === FM PATCH: PDF + EXTENDED GLOW + CONTACT ICONS END === */

/* === FM PATCH: EXTENDED CARD SIGNATURE V3 START === */

/* Stronger visual identity for the Extended card only */
#heroExt{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;

  border:1.5px solid rgba(31,71,118,.72) !important;
  background:
    radial-gradient(circle at 86% 15%, rgba(44,96,151,.10), transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#f3f7fb 48%,#e9f1f8 100%) !important;

  box-shadow:
    0 12px 34px rgba(18,44,74,.12),
    0 0 0 1px rgba(44,96,151,.05) inset !important;

  transform:translateY(-1px);
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    box-shadow .28s ease,
    border-color .28s ease !important;

  animation:fmExtCardPulse 5.8s ease-in-out infinite !important;
}

/* Keep all real content above the animated layers */
#heroExt > *{
  position:relative;
  z-index:3;
}

/* Animated light travelling around/through the card */
#heroExt::before{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  inset:-45% -20% !important;
  pointer-events:none !important;

  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 250deg,
      rgba(83,130,179,.00) 280deg,
      rgba(83,130,179,.30) 312deg,
      rgba(255,255,255,.95) 326deg,
      rgba(83,130,179,.25) 340deg,
      transparent 360deg
    ) !important;

  filter:blur(2px);
  opacity:.78;
  animation:fmExtOrbit 7.2s linear infinite !important;
}

/* Inner moving soft glow */
#heroExt::after{
  content:"" !important;
  position:absolute !important;
  z-index:2 !important;
  width:210px !important;
  height:210px !important;
  border-radius:50% !important;
  top:-90px !important;
  left:-100px !important;
  right:auto !important;
  bottom:auto !important;
  pointer-events:none !important;

  border:0 !important;
  background:radial-gradient(
    circle,
    rgba(61,111,164,.18) 0%,
    rgba(61,111,164,.08) 38%,
    transparent 72%
  ) !important;

  filter:blur(7px);
  opacity:.82 !important;
  animation:fmExtGlowTravel 6.8s ease-in-out infinite !important;
}

/* Make the label itself feel premium and intentional */
#heroExt .mode-badge{
  background:linear-gradient(135deg,#122c4a,#24598d) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 7px 18px rgba(18,44,74,.18) !important;
}

/* Headline gets a slightly stronger hierarchy */
#heroExt h3{
  color:#122c4a !important;
  font-weight:900 !important;
}

/* Hover = unmistakable, but still restrained */
#heroExt:hover{
  transform:translateY(-5px) scale(1.012) !important;
  border-color:#2c6097 !important;
  box-shadow:
    0 20px 46px rgba(18,44,74,.18),
    0 0 0 5px rgba(44,96,151,.07) !important;
}

/* The animation pauses slightly on hover, making the card feel controlled */
#heroExt:hover::before{
  animation-duration:4.4s !important;
  opacity:.95 !important;
}

@keyframes fmExtOrbit{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@keyframes fmExtGlowTravel{
  0%,100%{
    transform:translate(0,0) scale(.92);
    opacity:.45;
  }
  45%{
    transform:translate(390px,135px) scale(1.08);
    opacity:.86;
  }
  72%{
    transform:translate(610px,45px) scale(.98);
    opacity:.58;
  }
}

@keyframes fmExtCardPulse{
  0%,70%,100%{
    box-shadow:
      0 12px 34px rgba(18,44,74,.12),
      0 0 0 1px rgba(44,96,151,.05) inset;
  }
  82%{
    box-shadow:
      0 14px 38px rgba(18,44,74,.15),
      0 0 0 4px rgba(44,96,151,.06),
      0 0 0 1px rgba(44,96,151,.09) inset;
  }
}

@media(max-width:620px){
  #heroExt:hover{
    transform:translateY(-3px) !important;
  }
  #heroExt::after{
    width:170px !important;
    height:170px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #heroExt,
  #heroExt::before,
  #heroExt::after{
    animation:none !important;
  }
}

/* === FM PATCH: EXTENDED CARD SIGNATURE V3 END === */

/* === FM PATCH: EXTENDED PREMIUM SIGNATURE V4 START === */

/*
  This block intentionally targets ONLY the Extended portfolio card.
  It gives it a visible premium identity even when HR mode is selected.
*/
#heroExt.extended-premium-card{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;

  border:1.6px solid rgba(39,84,129,.82) !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(69,119,169,.13) 0%, transparent 33%),
    radial-gradient(circle at 12% 92%, rgba(127,165,202,.10) 0%, transparent 38%),
    linear-gradient(135deg,#ffffff 0%,#f4f8fc 44%,#e8f1f9 100%) !important;

  box-shadow:
    0 13px 35px rgba(18,44,74,.13),
    inset 0 0 0 1px rgba(255,255,255,.86),
    0 0 0 3px rgba(44,96,151,.035) !important;

  transform:translateY(-2px);
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    box-shadow .28s ease,
    border-color .28s ease !important;
}

/* Make sure textual content sits above the light layers. */
#heroExt.extended-premium-card > :not(.ext-live-glow):not(.ext-live-sheen):not(.ext-attention-dot){
  position:relative;
  z-index:5;
}

/* Soft blue ambient light that travels inside the card. */
#heroExt .ext-live-glow{
  position:absolute;
  z-index:1;
  pointer-events:none;
  width:260px;
  height:260px;
  border-radius:50%;
  top:-145px;
  left:-150px;
  background:radial-gradient(
    circle,
    rgba(47,100,155,.25) 0%,
    rgba(71,126,181,.14) 34%,
    rgba(108,154,199,.055) 58%,
    transparent 74%
  );
  filter:blur(10px);
  opacity:.80;
  animation:fmExtGlowPath 7.4s cubic-bezier(.4,0,.2,1) infinite;
}

/* Narrow, elegant light sweep every few seconds. */
#heroExt .ext-live-sheen{
  position:absolute;
  z-index:2;
  pointer-events:none;
  top:-35%;
  bottom:-35%;
  left:-42%;
  width:19%;
  opacity:0;
  transform:rotate(11deg);
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.10) 16%,
    rgba(255,255,255,.86) 48%,
    rgba(111,159,204,.23) 66%,
    transparent 100%
  );
  filter:blur(1px);
  animation:fmExtSheenPass 6.2s ease-in-out infinite;
}

/* Tiny living signal beside the card, very subtle. */
#heroExt .ext-attention-dot{
  position:absolute;
  z-index:6;
  top:16px;
  left:17px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2f659c;
  box-shadow:
    0 0 0 0 rgba(47,101,156,.20),
    0 0 13px rgba(47,101,156,.38);
  animation:fmExtDotPulse 3.4s ease-out infinite;
}

html[dir="ltr"] #heroExt .ext-attention-dot{
  left:auto;
  right:17px;
}

/* Premium badge, no longer visually identical to HR. */
#heroExt .mode-badge{
  background:linear-gradient(135deg,#102a47,#285e93) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 7px 18px rgba(18,44,74,.18) !important;
}

#heroExt h3{
  color:#102d4d !important;
  font-weight:900 !important;
}

/* This text gives the viewer an unmistakable action cue. */
#heroExt .ext-mini-cta{
  display:flex;
  align-items:center;
  gap:7px;
  width:max-content;
  margin-top:13px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(45,96,148,.18);
  background:rgba(255,255,255,.58);
  color:#234f7b;
  font-size:10.5px;
  font-weight:900;
  backdrop-filter:blur(5px);
  transition:.22s ease;
}

#heroExt .ext-mini-cta span{
  display:inline-block;
  transition:transform .22s ease;
}

#heroExt:hover{
  transform:translateY(-6px) scale(1.014) !important;
  border-color:#245b91 !important;
  box-shadow:
    0 22px 50px rgba(18,44,74,.19),
    0 0 0 5px rgba(44,96,151,.065),
    inset 0 0 0 1px rgba(255,255,255,.92) !important;
}

#heroExt:hover .ext-mini-cta{
  background:#183c62;
  color:#fff;
  border-color:#183c62;
  box-shadow:0 8px 20px rgba(18,44,74,.15);
}

html[dir="rtl"] #heroExt:hover .ext-mini-cta span{
  transform:translateX(-4px);
}
html[dir="ltr"] #heroExt:hover .ext-mini-cta span{
  transform:translateX(4px);
}

@keyframes fmExtGlowPath{
  0%,100%{
    transform:translate(0,0) scale(.92);
    opacity:.55;
  }
  38%{
    transform:translate(360px,145px) scale(1.06);
    opacity:.90;
  }
  70%{
    transform:translate(610px,58px) scale(.98);
    opacity:.62;
  }
}

@keyframes fmExtSheenPass{
  0%,56%{
    left:-42%;
    opacity:0;
  }
  62%{
    opacity:.72;
  }
  83%{
    left:124%;
    opacity:.48;
  }
  100%{
    left:124%;
    opacity:0;
  }
}

@keyframes fmExtDotPulse{
  0%{
    box-shadow:
      0 0 0 0 rgba(47,101,156,.24),
      0 0 11px rgba(47,101,156,.34);
  }
  55%,100%{
    box-shadow:
      0 0 0 9px rgba(47,101,156,0),
      0 0 15px rgba(47,101,156,.16);
  }
}

@media(max-width:620px){
  #heroExt .ext-live-glow{
    width:200px;
    height:200px;
  }
  #heroExt:hover{
    transform:translateY(-4px) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #heroExt .ext-live-glow,
  #heroExt .ext-live-sheen,
  #heroExt .ext-attention-dot{
    animation:none !important;
  }
}

/* === FM PATCH: EXTENDED PREMIUM SIGNATURE V4 END === */

/* === FM EXTENDED V5 START === */

/* Only the Extended card is affected */
#heroExt{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;

  border:2px solid #2c6097 !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(65,116,168,.18), transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#f2f7fb 52%,#e4eef7 100%) !important;

  box-shadow:
    0 14px 34px rgba(18,44,74,.15),
    0 0 0 4px rgba(44,96,151,.045) !important;

  transform:translateY(-2px) !important;
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease !important;

  animation:fmExtBreathV5 4.8s ease-in-out infinite !important;
}

/* Make all real text stay above the animation */
#heroExt > *{
  position:relative;
  z-index:3;
}

/* Moving light sweep */
#heroExt::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  top:-30% !important;
  bottom:-30% !important;
  left:-45% !important;
  width:22% !important;

  border:0 !important;
  border-radius:0 !important;

  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.06) 15%,
    rgba(255,255,255,.90) 48%,
    rgba(114,159,203,.26) 68%,
    transparent 100%
  ) !important;

  transform:rotate(12deg) !important;
  filter:blur(1px);
  opacity:0;
  pointer-events:none !important;

  animation:fmExtSweepV5 5.6s ease-in-out infinite !important;
}

/* Soft inner glow */
#heroExt::before{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  width:220px !important;
  height:220px !important;
  border-radius:50% !important;
  right:-120px !important;
  bottom:-120px !important;

  background:radial-gradient(
    circle,
    rgba(44,96,151,.22) 0%,
    rgba(44,96,151,.10) 42%,
    transparent 72%
  ) !important;

  pointer-events:none !important;
  animation:fmExtGlowV5 6.8s ease-in-out infinite !important;
}

/* Strong visual identity for the badge */
#heroExt .mode-badge{
  background:linear-gradient(135deg,#122c4a,#2c6097) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 7px 18px rgba(18,44,74,.18) !important;
}

#heroExt h3{
  color:#122c4a !important;
  font-weight:900 !important;
}

/* Public-facing cue: clearly tells the visitor there is more depth here */
html[lang="fa"] #heroExt h3::after{
  content:"برای مشاهده جزئیات کامل کلیک کنید" !important;
}
html[lang="en"] #heroExt h3::after{
  content:"Click to explore the full portfolio" !important;
}

#heroExt h3::after{
  display:block !important;
  width:max-content;
  max-width:100%;
  margin-top:8px;
  padding:5px 9px;

  border-radius:999px;
  border:1px solid rgba(44,96,151,.20);
  background:rgba(255,255,255,.72);

  color:#2c6097;
  font-size:10.5px;
  font-weight:850;
  line-height:1.5;

  box-shadow:0 5px 14px rgba(18,44,74,.06);
}

/* Hover must feel clearly different from HR card */
#heroExt:hover{
  transform:translateY(-7px) scale(1.015) !important;
  border-color:#173f69 !important;

  box-shadow:
    0 22px 48px rgba(18,44,74,.21),
    0 0 0 6px rgba(44,96,151,.075) !important;
}

#heroExt:hover .mode-badge{
  box-shadow:
    0 9px 22px rgba(18,44,74,.24),
    0 0 0 4px rgba(44,96,151,.07) !important;
}

@keyframes fmExtBreathV5{
  0%,68%,100%{
    box-shadow:
      0 14px 34px rgba(18,44,74,.15),
      0 0 0 4px rgba(44,96,151,.045);
  }
  82%{
    box-shadow:
      0 17px 40px rgba(18,44,74,.19),
      0 0 0 7px rgba(44,96,151,.075);
  }
}

@keyframes fmExtSweepV5{
  0%,52%{
    left:-45%;
    opacity:0;
  }
  60%{
    opacity:.72;
  }
  84%{
    left:125%;
    opacity:.50;
  }
  100%{
    left:125%;
    opacity:0;
  }
}

@keyframes fmExtGlowV5{
  0%,100%{
    transform:translate(0,0) scale(.95);
    opacity:.55;
  }
  50%{
    transform:translate(-380px,-95px) scale(1.08);
    opacity:.90;
  }
}

@media(max-width:620px){
  #heroExt:hover{
    transform:translateY(-4px) !important;
  }
  #heroExt h3::after{
    font-size:9.5px;
  }
}

@media(prefers-reduced-motion:reduce){
  #heroExt,
  #heroExt::before,
  #heroExt::after{
    animation:none !important;
  }
}

/* === FM EXTENDED V5 END === */

/* === FM EXTENDED REAL SELECTOR V6 START === */

.mode-option[data-mode="extended"]{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  border:2px solid #2c6097 !important;
  background:
    radial-gradient(circle at 84% 16%, rgba(68,119,170,.18) 0%, rgba(68,119,170,.08) 24%, transparent 42%),
    radial-gradient(circle at 10% 92%, rgba(115,158,199,.12) 0%, transparent 38%),
    linear-gradient(135deg,#ffffff 0%,#f5f9fc 42%,#e6f0f8 100%) !important;
  box-shadow:
    0 14px 36px rgba(18,44,74,.14),
    0 0 0 4px rgba(44,96,151,.045),
    inset 0 0 0 1px rgba(255,255,255,.90) !important;
  transform:translateY(-2px);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s ease,box-shadow .28s ease !important;
  animation:fmExtBreathReal 5.2s ease-in-out infinite !important;
}

.mode-option[data-mode="extended"] > *{
  position:relative;
  z-index:4;
}

.mode-option[data-mode="extended"]::before{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  width:280px !important;
  height:280px !important;
  border-radius:50% !important;
  top:-165px !important;
  left:-170px !important;
  background:radial-gradient(circle,rgba(38,91,145,.30) 0%,rgba(58,113,167,.16) 32%,rgba(89,138,185,.07) 55%,transparent 74%) !important;
  filter:blur(9px);
  pointer-events:none !important;
  animation:fmExtGlowReal 7.1s cubic-bezier(.4,0,.2,1) infinite !important;
}

.mode-option[data-mode="extended"]::after{
  content:"" !important;
  position:absolute !important;
  z-index:2 !important;
  top:-38% !important;
  bottom:-38% !important;
  left:-38% !important;
  width:18% !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 12%,rgba(255,255,255,.88) 48%,rgba(86,139,190,.30) 67%,transparent 100%) !important;
  transform:rotate(12deg);
  filter:blur(.6px);
  opacity:0;
  pointer-events:none !important;
  animation:fmExtSweepReal 6s ease-in-out infinite !important;
}

.mode-option[data-mode="extended"] .mode-badge{
  background:linear-gradient(135deg,#102a47,#2c6097) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 8px 20px rgba(18,44,74,.20),inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.mode-option[data-mode="extended"] h3{
  color:#102d4d !important;
  font-weight:900 !important;
}

html[lang="fa"] .mode-option[data-mode="extended"] h3::after{
  content:"مشاهده رزومه کامل و جزئیات بیشتر  ←";
}

html[lang="en"] .mode-option[data-mode="extended"] h3::after{
  content:"Explore the full portfolio  →";
}

.mode-option[data-mode="extended"] h3::after{
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:10px;
  padding:6px 10px;
  border:1px solid rgba(44,96,151,.22);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#245687;
  box-shadow:0 5px 16px rgba(18,44,74,.07);
  font-size:10.5px;
  font-weight:850;
  line-height:1.5;
}

.mode-option[data-mode="extended"]:hover{
  transform:translateY(-7px) scale(1.015) !important;
  border-color:#163e68 !important;
  box-shadow:
    0 24px 52px rgba(18,44,74,.21),
    0 0 0 7px rgba(44,96,151,.075),
    inset 0 0 0 1px rgba(255,255,255,.94) !important;
}

@keyframes fmExtBreathReal{
  0%,68%,100%{
    box-shadow:
      0 14px 36px rgba(18,44,74,.14),
      0 0 0 4px rgba(44,96,151,.045),
      inset 0 0 0 1px rgba(255,255,255,.90);
  }
  82%{
    box-shadow:
      0 17px 42px rgba(18,44,74,.19),
      0 0 0 8px rgba(44,96,151,.075),
      inset 0 0 0 1px rgba(255,255,255,.94);
  }
}

@keyframes fmExtGlowReal{
  0%,100%{
    transform:translate(0,0) scale(.92);
    opacity:.55;
  }
  40%{
    transform:translate(360px,150px) scale(1.07);
    opacity:.96;
  }
  72%{
    transform:translate(610px,55px) scale(.98);
    opacity:.63;
  }
}

@keyframes fmExtSweepReal{
  0%,54%{
    left:-38%;
    opacity:0;
  }
  61%{
    opacity:.76;
  }
  84%{
    left:122%;
    opacity:.48;
  }
  100%{
    left:122%;
    opacity:0;
  }
}

@media(max-width:620px){
  .mode-option[data-mode="extended"]:hover{
    transform:translateY(-4px) !important;
  }
  .mode-option[data-mode="extended"] h3::after{
    font-size:9.5px;
  }
}

@media(prefers-reduced-motion:reduce){
  .mode-option[data-mode="extended"],
  .mode-option[data-mode="extended"]::before,
  .mode-option[data-mode="extended"]::after{
    animation:none !important;
  }
}

/* === FM EXTENDED REAL SELECTOR V6 END === */

/* === FM PATCH: VOICE TITLE + FOOTER START === */

.voice-definition{
  width:min(780px,100%);
  margin:12px auto 0;
  color:#65758c;
  font-size:12.6px;
  line-height:1.95;
}

.footer-signature{
  justify-content:center !important;
  align-items:center;
  text-align:center;
  padding-top:34px;
  padding-bottom:46px;
}

.footer-signature .footer-line{
  color:#5f6f83;
  font-size:11px;
  font-weight:700;
  letter-spacing:.025em;
}

/* === FM PATCH: VOICE TITLE + FOOTER END === */

/* === FM PATCH: HERO CARDS + VOICE + FOOTER RTL START === */

/* Hero cards keep the approved layout; only typography adapts to the new content. */
.stat strong{
  font-size:13.5px;
  line-height:1.45;
}

.stat span{
  display:block;
  margin-top:4px;
  line-height:1.65;
}

/* Voice of User explanation now lives only inside Extended mode. */
.voice-concept-card{
  margin:0 0 16px;
  padding:18px 20px;
  border:1px solid #cfdae6;
  border-inline-start:4px solid var(--navy);
  border-radius:15px;
  background:linear-gradient(135deg,#f9fbfd,#eef4f9);
}

.voice-concept-kicker{
  color:var(--navy3);
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.06em;
}

.voice-concept-card h3{
  margin:5px 0 7px;
  color:var(--navy);
  font-size:14.5px;
}

.voice-concept-card p{
  margin:0;
  color:#64758b;
  font-size:12.5px;
  line-height:1.95;
}

/* Force the English footer sentence to behave as real LTR text,
   even on the Persian RTL page. */
.footer-signature,
.footer-signature .footer-line{
  direction:ltr !important;
  unicode-bidi:isolate !important;
}

.footer-signature .footer-line{
  display:block;
  width:100%;
  text-align:center !important;
}

/* === FM PATCH: HERO CARDS + VOICE + FOOTER RTL END === */

/* === FM PATCH: PORTRAIT SIGNATURE + BACK TO TOP START === */

/* Portrait: restrained executive halo, not a decorative gimmick */
.photo-stage{
  isolation:isolate;
}

.photo-stage .portrait{
  transition:box-shadow .35s ease, transform .35s ease;
}

.portrait-halo{
  position:absolute;
  z-index:0;
  inset:-17px;
  border-radius:47% 53% 51% 49% / 52% 46% 54% 48%;
  pointer-events:none;

  background:
    conic-gradient(
      from 30deg,
      rgba(44,96,151,0) 0deg,
      rgba(44,96,151,.10) 44deg,
      rgba(102,151,199,.34) 82deg,
      rgba(255,255,255,.76) 101deg,
      rgba(44,96,151,.13) 125deg,
      rgba(44,96,151,0) 164deg,
      rgba(44,96,151,0) 248deg,
      rgba(86,137,187,.20) 296deg,
      rgba(44,96,151,0) 360deg
    );

  filter:blur(.3px);
  opacity:.82;
  animation:fmPortraitHaloTurn 18s linear infinite;
}

.portrait-halo::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:inherit;
  background:var(--card,#fff);
}

/* Only three very small moving points of light */
.portrait-spark{
  position:absolute;
  z-index:4;
  width:5px;
  height:5px;
  border-radius:50%;
  pointer-events:none;
  background:#8bb8e2;
  box-shadow:
    0 0 0 3px rgba(111,161,208,.06),
    0 0 10px rgba(73,128,181,.42);
}

.spark-one{
  top:3px;
  right:13px;
  animation:fmSparkOne 8.4s ease-in-out infinite;
}

.spark-two{
  bottom:16px;
  left:0;
  width:4px;
  height:4px;
  opacity:.72;
  animation:fmSparkTwo 10.6s ease-in-out infinite;
}

.spark-three{
  top:48%;
  right:-17px;
  width:3px;
  height:3px;
  opacity:.58;
  animation:fmSparkThree 12.2s ease-in-out infinite;
}

.photo-stage:hover .portrait{
  transform:scale(1.012);
  box-shadow:
    0 17px 44px rgba(18,44,74,.22),
    0 0 0 7px rgba(44,96,151,.045);
}

.photo-stage:hover .portrait-halo{
  opacity:1;
}

@keyframes fmPortraitHaloTurn{
  to{transform:rotate(360deg)}
}

@keyframes fmSparkOne{
  0%,100%{transform:translate(0,0) scale(.82);opacity:.38}
  45%{transform:translate(-13px,9px) scale(1.15);opacity:.92}
  72%{transform:translate(-4px,18px) scale(.95);opacity:.58}
}

@keyframes fmSparkTwo{
  0%,100%{transform:translate(0,0);opacity:.30}
  50%{transform:translate(12px,-13px);opacity:.80}
}

@keyframes fmSparkThree{
  0%,100%{transform:translate(0,-7px);opacity:.22}
  48%{transform:translate(-9px,9px);opacity:.72}
}

/* Back to top: opposite side of the existing Contact FAB */
.back-to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:54;

  width:43px;
  height:43px;
  padding:0;

  display:grid;
  place-items:center;

  border:1px solid rgba(18,44,74,.14);
  border-radius:50%;

  background:rgba(255,255,255,.92);
  color:var(--navy);

  box-shadow:0 10px 28px rgba(18,44,74,.16);
  backdrop-filter:blur(8px);

  font-size:20px;
  font-weight:800;
  line-height:1;

  cursor:pointer;

  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(.92);

  transition:
    opacity .24s ease,
    visibility .24s ease,
    transform .24s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

html[dir="ltr"] .back-to-top{
  right:auto;
  left:18px;
}

.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.back-to-top:hover{
  background:var(--navy);
  color:#fff;
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 14px 34px rgba(18,44,74,.23);
}

.back-to-top:focus-visible{
  outline:3px solid rgba(44,96,151,.20);
  outline-offset:3px;
}

@media(max-width:620px){
  .portrait-halo{inset:-14px}
  .back-to-top{
    right:10px;
    bottom:64px;
    width:40px;
    height:40px;
  }
  html[dir="ltr"] .back-to-top{
    right:auto;
    left:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .portrait-halo,
  .portrait-spark{
    animation:none !important;
  }

  html{
    scroll-behavior:auto !important;
  }
}

@media print{
  .back-to-top{
    display:none !important;
  }
}

/* === FM PATCH: PORTRAIT SIGNATURE + BACK TO TOP END === */

/* === FM PATCH: BACK TO TOP V2 START === */

.contact-fab.back-to-top-fab{
  position:fixed;
  left:18px;
  right:auto;
  bottom:18px;
  z-index:55;
  width:46px;
  height:46px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(18,44,74,.16);
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:var(--navy);
  box-shadow:
    0 12px 32px rgba(18,44,74,.18),
    inset 0 0 0 1px rgba(255,255,255,.72);
  backdrop-filter:blur(8px);
  font-size:22px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(.9);
  transition:
    opacity .24s ease,
    visibility .24s ease,
    transform .24s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

html[dir="ltr"] .contact-fab.back-to-top-fab{
  left:auto;
  right:18px;
}

.contact-fab.back-to-top-fab.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.contact-fab.back-to-top-fab:hover{
  background:var(--navy);
  color:#fff;
  transform:translateY(-4px) scale(1.04);
  box-shadow:
    0 16px 38px rgba(18,44,74,.25),
    0 0 0 5px rgba(44,96,151,.07);
}

.contact-fab.back-to-top-fab span{
  display:block;
  transform:translateY(-1px);
}

.contact-fab.back-to-top-fab:focus-visible{
  outline:3px solid rgba(44,96,151,.20);
  outline-offset:3px;
}

@media(max-width:620px){
  .contact-fab.back-to-top-fab{
    left:10px;
    bottom:10px;
    width:42px;
    height:42px;
    font-size:20px;
  }

  html[dir="ltr"] .contact-fab.back-to-top-fab{
    left:auto;
    right:10px;
  }
}

@media print{
  .contact-fab.back-to-top-fab{
    display:none !important;
  }
}

/* === FM PATCH: BACK TO TOP V2 END === */

/* === FM PATCH: SCROLLED HEADER START === */

/* Keep the original header at the top of the page */
.topbar{
  transition:
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

/* Only after scrolling: a subtle visual separation from page body */
.topbar.is-scrolled{
  background:rgba(244,248,252,.95) !important;
  border-bottom-color:rgba(44,96,151,.16) !important;
  box-shadow:
    0 10px 28px rgba(18,44,74,.065),
    0 1px 0 rgba(255,255,255,.82) inset;
}

/* Very soft luminous edge under the sticky header */
.topbar.is-scrolled::after{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  bottom:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(72,121,168,.12) 18%,
    rgba(72,121,168,.30) 50%,
    rgba(72,121,168,.12) 82%,
    transparent 100%
  );
  opacity:.78;
}

/* Menu stays minimal; only hover gets a restrained light pill */
.topbar.is-scrolled .nav a{
  border-radius:10px;
  transition:
    background .20s ease,
    box-shadow .20s ease,
    color .20s ease,
    transform .20s ease;
}

.topbar.is-scrolled .nav a:hover{
  background:rgba(255,255,255,.72);
  box-shadow:
    0 5px 16px rgba(18,44,74,.07),
    inset 0 0 0 1px rgba(44,96,151,.055);
  color:var(--navy);
  transform:translateY(-1px);
}

/* === FM PATCH: SCROLLED HEADER END === */

/* === FM PATCH: BORNA CONTACT + FAVICON START === */

/* Borna uses the exact same 34px contact-icon footprint as the other channels. */
.contact-icon.borna-icon{
  overflow:hidden;
  padding:2px;
  background:linear-gradient(145deg,#ffffff,#f4effb);
  border-color:rgba(111,83,146,.18);
}

.contact-icon.borna-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:8px;
}

.contact-link.borna-contact:hover .borna-icon{
  box-shadow:
    0 10px 20px rgba(77,45,116,.18),
    0 0 0 4px rgba(159,92,228,.055);
}

/* === FM PATCH: BORNA CONTACT + FAVICON END === */

/* === FM PATCH: HEADER CONTACT CTA START === */

/* Header contact becomes a clear primary CTA without changing the menu layout */
.topbar .contact-btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  min-height:44px;
  padding:10px 18px !important;

  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:999px !important;

  background:linear-gradient(135deg,#102b49 0%,#1d4776 56%,#2c6097 100%) !important;
  color:#fff !important;

  font-size:12.5px !important;
  font-weight:900 !important;
  letter-spacing:.01em;

  box-shadow:
    0 9px 24px rgba(18,44,74,.22),
    inset 0 1px 0 rgba(255,255,255,.13) !important;

  transform:translateY(0);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease !important;
}

/* Very subtle light pass to keep the CTA noticeable */
.topbar .contact-btn::after{
  content:"";
  position:absolute;
  top:-35%;
  bottom:-35%;
  left:-45%;
  width:24%;
  pointer-events:none;

  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.08) 16%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.10) 78%,
    transparent 100%
  );

  transform:rotate(12deg);
  opacity:0;
  animation:fmHeaderContactSweep 6.2s ease-in-out infinite;
}

.topbar .contact-btn:hover{
  transform:translateY(-2px) scale(1.035) !important;
  filter:saturate(1.06);

  box-shadow:
    0 14px 32px rgba(18,44,74,.28),
    0 0 0 5px rgba(44,96,151,.07),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.topbar .contact-btn:active{
  transform:translateY(0) scale(.99) !important;
}

.topbar .contact-btn:focus-visible{
  outline:3px solid rgba(44,96,151,.20);
  outline-offset:3px;
}

@keyframes fmHeaderContactSweep{
  0%,58%{
    left:-45%;
    opacity:0;
  }
  65%{
    opacity:.60;
  }
  84%{
    left:125%;
    opacity:.38;
  }
  100%{
    left:125%;
    opacity:0;
  }
}

@media(max-width:620px){
  .topbar .contact-btn{
    min-height:40px;
    padding:8px 14px !important;
    font-size:11.5px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .topbar .contact-btn::after{
    animation:none !important;
  }
}

/* === FM PATCH: HEADER CONTACT CTA END === */

/* === FM PATCH: HEADER CONTACT CTA V2 START === */

/*
  Signature CTA:
  - wider pill, same header height
  - continuous 360-degree luminous perimeter
  - always visible, not dependent on delayed sheen
*/
.topbar .contact-btn{
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;

  width:auto !important;
  min-width:116px !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 20px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:0 !important;
  border-radius:999px !important;

  background:
    linear-gradient(135deg,#102b49 0%,#183f69 54%,#285e93 100%) !important;
  color:#fff !important;

  font-size:12.5px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;

  box-shadow:
    0 10px 25px rgba(18,44,74,.24),
    inset 0 1px 0 rgba(255,255,255,.14) !important;

  transform:translateY(0);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease !important;
}

/* Continuous rotating luminous ring */
.topbar .contact-btn::before{
  content:"" !important;
  position:absolute !important;
  z-index:-2 !important;
  inset:-2px !important;
  border-radius:inherit !important;
  pointer-events:none !important;

  background:conic-gradient(
    from 0deg,
    rgba(104,164,220,.24) 0deg,
    rgba(255,255,255,.96) 34deg,
    rgba(94,151,207,.48) 74deg,
    rgba(44,96,151,.16) 125deg,
    rgba(44,96,151,.08) 210deg,
    rgba(117,174,226,.42) 286deg,
    rgba(255,255,255,.92) 326deg,
    rgba(104,164,220,.24) 360deg
  ) !important;

  animation:fmContactOrbitV2 4.2s linear infinite !important;
}

/* Inner mask leaves only the moving ring visible */
.topbar .contact-btn::after{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:1.5px !important;
  border-radius:inherit !important;
  pointer-events:none !important;

  background:linear-gradient(135deg,#102b49 0%,#183f69 54%,#285e93 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.06);
}

/* Text stays crisp above both layers */
.topbar .contact-btn .contact-btn-label{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:7px;
}

html[lang="fa"] .topbar .contact-btn .contact-btn-label::before{
  content:"✦";
  font-size:10px;
  color:#cfe5f8;
  text-shadow:0 0 9px rgba(173,214,248,.65);
}

html[lang="en"] .topbar .contact-btn .contact-btn-label::after{
  content:"✦";
  font-size:10px;
  color:#cfe5f8;
  text-shadow:0 0 9px rgba(173,214,248,.65);
}

/* A constant, very light breathing glow makes it easy to find immediately */
.topbar .contact-btn{
  animation:fmContactBreathV2 3.2s ease-in-out infinite !important;
}

.topbar .contact-btn:hover{
  transform:translateY(-2px) scale(1.045) !important;
  filter:saturate(1.08) brightness(1.02);

  box-shadow:
    0 15px 34px rgba(18,44,74,.30),
    0 0 0 6px rgba(44,96,151,.075),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.topbar .contact-btn:hover::before{
  animation-duration:2.4s !important;
}

.topbar .contact-btn:active{
  transform:translateY(0) scale(.99) !important;
}

.topbar .contact-btn:focus-visible{
  outline:3px solid rgba(44,96,151,.22) !important;
  outline-offset:4px !important;
}

@keyframes fmContactOrbitV2{
  to{transform:rotate(360deg)}
}

@keyframes fmContactBreathV2{
  0%,100%{
    box-shadow:
      0 10px 25px rgba(18,44,74,.24),
      0 0 0 0 rgba(76,132,187,0),
      inset 0 1px 0 rgba(255,255,255,.14);
  }
  50%{
    box-shadow:
      0 12px 29px rgba(18,44,74,.28),
      0 0 0 4px rgba(76,132,187,.055),
      inset 0 1px 0 rgba(255,255,255,.16);
  }
}

@media(max-width:620px){
  .topbar .contact-btn{
    min-width:102px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 15px !important;
    font-size:11.5px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .topbar .contact-btn,
  .topbar .contact-btn::before{
    animation:none !important;
  }

  .topbar .contact-btn::before{
    background:linear-gradient(135deg,#6da4d5,#d8ebfb,#477fb3) !important;
  }
}

/* === FM PATCH: HEADER CONTACT CTA V2 END === */

/* === FM PATCH: HEADER CONTACT CTA V3 START === */

/*
  Contact CTA V3
  - keeps current pill size and "تماس با من"
  - restores the elegant passing sheen
  - replaces the full rotating ring with ONE luminous moving highlight
*/
.topbar .contact-btn{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;

  min-width:116px !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 20px !important;

  border:1px solid rgba(124,174,218,.30) !important;
  border-radius:999px !important;

  background:linear-gradient(135deg,#102b49 0%,#183f69 54%,#285e93 100%) !important;
  color:#fff !important;

  box-shadow:
    0 10px 25px rgba(18,44,74,.24),
    inset 0 1px 0 rgba(255,255,255,.14) !important;

  animation:fmContactBreathV3 3.8s ease-in-out infinite !important;
}

/* Moving luminous point / short gradient trail around the perimeter */
.topbar .contact-btn::before{
  content:"" !important;
  position:absolute !important;
  z-index:4 !important;
  inset:-2px !important;
  padding:2px !important;
  border-radius:999px !important;
  pointer-events:none !important;

  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 332deg,
    rgba(115,174,226,.04) 340deg,
    rgba(136,193,241,.20) 346deg,
    rgba(205,234,255,.72) 352deg,
    rgba(255,255,255,1) 356deg,
    rgba(174,218,255,.60) 359deg,
    transparent 360deg
  ) !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;

  filter:
    drop-shadow(0 0 3px rgba(171,215,251,.68))
    drop-shadow(0 0 7px rgba(82,145,201,.34));

  animation:fmContactDotOrbitV3 4.6s linear infinite !important;
}

/* The glossy sweep inside the button — right to left */
.topbar .contact-btn::after{
  content:"" !important;
  position:absolute !important;
  z-index:2 !important;

  top:-38% !important;
  bottom:-38% !important;
  left:125% !important;
  width:22% !important;
  inset-inline:auto !important;

  border:0 !important;
  border-radius:0 !important;
  pointer-events:none !important;

  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.05) 14%,
    rgba(255,255,255,.78) 50%,
    rgba(172,213,247,.18) 70%,
    transparent 100%
  ) !important;

  transform:rotate(12deg) !important;
  filter:blur(.5px);
  opacity:0;

  animation:fmContactSheenV3 4.9s ease-in-out infinite !important;
}

.topbar .contact-btn .contact-btn-label{
  position:relative !important;
  z-index:6 !important;
}

/* Keep the little signature sparkle from the good V2 version */
html[lang="fa"] .topbar .contact-btn .contact-btn-label::before{
  content:"✦";
  font-size:10px;
  color:#cfe5f8;
  text-shadow:0 0 9px rgba(173,214,248,.65);
}

html[lang="en"] .topbar .contact-btn .contact-btn-label::after{
  content:"✦";
  font-size:10px;
  color:#cfe5f8;
  text-shadow:0 0 9px rgba(173,214,248,.65);
}

.topbar .contact-btn:hover{
  transform:translateY(-2px) scale(1.045) !important;
  filter:saturate(1.07) brightness(1.02);

  box-shadow:
    0 15px 34px rgba(18,44,74,.30),
    0 0 0 5px rgba(44,96,151,.07),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.topbar .contact-btn:hover::before{
  animation-duration:3s !important;
}

.topbar .contact-btn:hover::after{
  animation-duration:3.8s !important;
}

@keyframes fmContactDotOrbitV3{
  to{transform:rotate(360deg)}
}

@keyframes fmContactSheenV3{
  0%,48%{
    left:125%;
    opacity:0;
  }
  56%{
    opacity:.62;
  }
  79%{
    left:-42%;
    opacity:.40;
  }
  100%{
    left:-42%;
    opacity:0;
  }
}

@keyframes fmContactBreathV3{
  0%,100%{
    box-shadow:
      0 10px 25px rgba(18,44,74,.24),
      0 0 0 0 rgba(76,132,187,0),
      inset 0 1px 0 rgba(255,255,255,.14);
  }

  50%{
    box-shadow:
      0 12px 29px rgba(18,44,74,.27),
      0 0 0 3px rgba(76,132,187,.04),
      inset 0 1px 0 rgba(255,255,255,.16);
  }
}

@media(max-width:620px){
  .topbar .contact-btn{
    min-width:102px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 15px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .topbar .contact-btn,
  .topbar .contact-btn::before,
  .topbar .contact-btn::after{
    animation:none !important;
  }

  .topbar .contact-btn::before{
    background:none !important;
  }
}

/* === FM PATCH: HEADER CONTACT CTA V3 END === */

/* === FM PATCH: HEADER CONTACT CTA V4 START === */

/*
  Only two changes from V3:
  1) remove the internal sheen completely
  2) move the luminous orbit farther OUTSIDE the pill
*/

/* Allow the outer light point to travel beyond the button edge */
.topbar .contact-btn{
  overflow:visible !important;
}

/* Larger-radius luminous point with a very short gradient tail */
.topbar .contact-btn::before{
  content:"" !important;
  position:absolute !important;
  z-index:4 !important;

  /* The key change: orbit sits clearly outside the button */
  inset:-8px !important;
  padding:2px !important;
  border-radius:999px !important;
  pointer-events:none !important;

  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 345deg,
    rgba(90,151,207,.00) 348deg,
    rgba(109,174,229,.10) 351deg,
    rgba(145,201,246,.30) 354deg,
    rgba(207,235,255,.78) 356deg,
    rgba(255,255,255,1) 358deg,
    rgba(190,226,255,.70) 359deg,
    transparent 360deg
  ) !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;

  filter:
    drop-shadow(0 0 4px rgba(183,222,253,.85))
    drop-shadow(0 0 9px rgba(78,139,195,.45)) !important;

  opacity:.98 !important;
  animation:fmContactDotOrbitV4 4.6s linear infinite !important;
}

/* Remove the periodic bright line through the middle */
.topbar .contact-btn::after{
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
}

/* Keep text safely above the moving light */
.topbar .contact-btn .contact-btn-label{
  position:relative !important;
  z-index:6 !important;
}

.topbar .contact-btn:hover::before{
  animation-duration:3.2s !important;
  filter:
    drop-shadow(0 0 5px rgba(197,230,255,.95))
    drop-shadow(0 0 11px rgba(77,139,196,.55)) !important;
}

@keyframes fmContactDotOrbitV4{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@media(max-width:620px){
  .topbar .contact-btn::before{
    inset:-6px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .topbar .contact-btn::before{
    animation:none !important;
  }
}

/* === FM PATCH: HEADER CONTACT CTA V4 END === */

/* === FM PATCH: SECTION TRANSITIONS V1 START === */

/* Section entrance cue: makes each chapter feel distinct while scrolling */
.fm-section-enhanced{
  position:relative;
  scroll-margin-top:108px;
}

.fm-section-enhanced .fm-section-cue{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 16px;
  padding:0 2px;
  direction:rtl;
}

html[lang="en"] .fm-section-enhanced .fm-section-cue{
  direction:ltr;
}

.fm-section-enhanced .fm-section-icon{
  position:relative;
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:22px;

  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.96), rgba(255,255,255,.42) 28%, transparent 42%),
    linear-gradient(145deg, #f8fbff 0%, #eaf2fb 55%, #dde9f7 100%);
  border:1px solid rgba(160,184,209,.55);
  box-shadow:
    0 10px 20px rgba(30,52,78,.08),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -8px 16px rgba(76,117,165,.08);
  overflow:hidden;
}

.fm-section-enhanced .fm-section-icon::before{
  content:"";
  position:absolute;
  inset:-20%;
  border-radius:inherit;
  background:
    conic-gradient(from 0deg,
      transparent 0 68%,
      rgba(95,147,198,.00) 68.5%,
      rgba(118,177,231,.34) 73%,
      rgba(244,250,255,.95) 76%,
      rgba(118,177,231,.24) 79%,
      transparent 84% 100%);
  animation:fmSectionSpin 7.6s linear infinite;
  opacity:.90;
}

.fm-section-enhanced .fm-section-icon::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.45);
  pointer-events:none;
}

.fm-section-enhanced .fm-section-icon > span{
  position:relative;
  z-index:2;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.55));
}

.fm-section-enhanced .fm-section-meta{
  min-width:0;
  flex:1 1 auto;
}

.fm-section-enhanced .fm-section-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 5px;
  color:#6b819d;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.fm-section-enhanced .fm-section-label::after{
  content:"";
  height:1px;
  flex:1 1 auto;
  min-width:64px;
  background:linear-gradient(90deg, rgba(154,180,210,.55), rgba(154,180,210,.16));
}

html[lang="en"] .fm-section-enhanced .fm-section-label::after{
  background:linear-gradient(90deg, rgba(154,180,210,.16), rgba(154,180,210,.55));
}

.fm-section-enhanced .fm-section-subline{
  position:relative;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(90deg, rgba(221,232,244,.35), rgba(171,195,220,.18), rgba(221,232,244,.35));
  box-shadow: inset 0 0 0 1px rgba(191,209,228,.25);
}

.fm-section-enhanced .fm-section-subline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:24%;
  left:-28%;
  border-radius:inherit;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.88) 40%,
    rgba(125,182,230,.30) 62%,
    transparent 100%);
  filter:blur(.4px);
  animation:fmSectionSweep 5.6s ease-in-out infinite;
}

.fm-section-enhanced .fm-section-heading{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.fm-section-enhanced .fm-section-heading::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,#9fd1ff,#3d76b3);
  box-shadow:0 0 0 5px rgba(86,133,181,.09), 0 0 16px rgba(86,133,181,.12);
  flex:0 0 auto;
}

/* Slight distinction for each section card start */
.fm-section-enhanced::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:-6px;
  height:1px;
  background:linear-gradient(90deg,
    rgba(188,207,228,0) 0%,
    rgba(188,207,228,.55) 20%,
    rgba(90,129,168,.24) 50%,
    rgba(188,207,228,.55) 80%,
    rgba(188,207,228,0) 100%);
  opacity:.65;
}

@keyframes fmSectionSpin{
  to{ transform:rotate(360deg); }
}

@keyframes fmSectionSweep{
  0%,48%{ left:-28%; opacity:0; }
  56%{ opacity:.82; }
  82%{ left:108%; opacity:.44; }
  100%{ left:108%; opacity:0; }
}

@media (max-width: 768px){
  .fm-section-enhanced .fm-section-cue{
    gap:10px;
    margin-bottom:12px;
  }

  .fm-section-enhanced .fm-section-icon{
    width:38px;
    height:38px;
    border-radius:14px;
    font-size:18px;
  }

  .fm-section-enhanced .fm-section-label{
    font-size:11px;
  }
}

@media (prefers-reduced-motion: reduce){
  .fm-section-enhanced .fm-section-icon::before,
  .fm-section-enhanced .fm-section-subline::before{
    animation:none !important;
  }
}

/* === FM PATCH: SECTION TRANSITIONS V1 END === */





/* === FM PATCH: MOBILE TITLES WRAP START === */

@media(max-width:620px){

  /* Prevent long section titles from escaping the viewport */
  .section-heading{
    align-items:flex-start;
  }

  .section-heading h2{
    white-space:normal !important;
    max-width:calc(100% - 18px);
    min-width:0;
    flex:0 1 auto;
    line-height:1.55;
    overflow-wrap:anywhere;
  }

  .section-heading::after{
    min-width:26px;
    margin-top:14px;
  }
}

/* === FM PATCH: MOBILE TITLES WRAP END === */

/* === FM PATCH: STATIC WHITE PORTRAIT START === */
.photo-stage .portrait,
.photo-stage:hover .portrait{
  transform:none !important;
}
/* === FM PATCH: STATIC WHITE PORTRAIT END === */

/* === FM PATCH: MOBILE FA HEADING WRAP FIX START === */

@media(max-width:620px){

  html[lang="fa"] .section-heading h2,
  html[lang="fa"] h2.fm-section-heading,
  html[lang="fa"] .fm-section-enhanced .fm-section-heading{
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  html[lang="fa"] .section-heading h2{
    flex:1 1 auto !important;
    line-height:1.65 !important;
  }

  html[lang="fa"] .section-heading::after{
    flex:0 0 34px !important;
    min-width:34px !important;
  }

  html[lang="fa"] h2.fm-section-heading{
    display:block !important;
  }

  html[lang="fa"] h2.fm-section-heading::before{
    display:inline-block !important;
    vertical-align:middle !important;
    margin-inline-end:7px !important;
  }
}

/* === FM PATCH: MOBILE FA HEADING WRAP FIX END === */

/* === FM PATCH: EN TITLES + FULL RESUME ACCESS START === */

/* English section cue/title stability */
html[lang="en"] .fm-section-enhanced .fm-section-cue{
  flex:0 1 300px;
  min-width:220px;
  max-width:340px;
}

html[lang="en"] .fm-section-enhanced .fm-section-meta{
  min-width:185px;
}

html[lang="en"] .fm-section-enhanced .fm-section-label{
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
  letter-spacing:.035em !important;
  line-height:1.4;
}

html[lang="en"] .section-heading h2.fm-section-heading{
  min-width:0;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

@media(max-width:720px){
  html[lang="en"] .section-heading{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  html[lang="en"] .fm-section-enhanced .fm-section-cue{
    flex:1 1 100%;
    width:100%;
    max-width:none;
    min-width:0;
  }

  html[lang="en"] .fm-section-enhanced .fm-section-meta{
    min-width:0;
  }

  html[lang="en"] .fm-section-enhanced .fm-section-label{
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    max-width:100%;
  }

  html[lang="en"] .section-heading h2.fm-section-heading{
    flex:1 1 calc(100% - 50px);
    max-width:100%;
  }
}

/* Full Resume item in existing desktop nav */
.nav a.nav-full-resume{
  position:relative;
  overflow:hidden;
  margin-inline-start:5px;
  padding:8px 12px;
  border:1px solid rgba(44,96,151,.20);
  border-radius:999px;
  background:linear-gradient(135deg,#edf4fa,#e4eef8);
  color:#173d65;
  font-weight:900;
  box-shadow:
    0 5px 14px rgba(18,44,74,.07),
    inset 0 1px 0 rgba(255,255,255,.90);
}

.nav a.nav-full-resume::before{
  content:"✦";
  margin-inline-end:5px;
  color:#2c6097;
  text-shadow:0 0 8px rgba(75,132,186,.25);
}

.nav a.nav-full-resume:hover,
.nav a.nav-full-resume.active{
  background:linear-gradient(135deg,#173a60,#285e93);
  color:#fff;
  box-shadow:
    0 8px 20px rgba(18,44,74,.18),
    0 0 0 4px rgba(44,96,151,.055);
  transform:translateY(-1px);
}

.nav a.nav-full-resume:hover::before,
.nav a.nav-full-resume.active::before{
  color:#d9ecfc;
}

/* Floating Full Resume CTA near Back-to-Top */
.full-resume-fab{
  position:fixed;
  left:18px;
  bottom:76px;
  z-index:54;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid rgba(44,96,151,.20);
  border-radius:999px;
  background:rgba(255,255,255,.95);
  color:#173d65;
  box-shadow:
    0 10px 28px rgba(18,44,74,.15),
    inset 0 1px 0 rgba(255,255,255,.90);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  font-size:10.8px;
  font-weight:900;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px) scale(.96);
  transition:
    opacity .24s ease,
    visibility .24s ease,
    transform .24s ease,
    background .20s ease,
    color .20s ease,
    box-shadow .20s ease;
}

html[dir="ltr"] .full-resume-fab{
  left:auto;
  right:18px;
}

body.mode-hr .full-resume-fab.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

body.mode-extended .full-resume-fab{
  display:none !important;
}

.full-resume-fab-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#3d78b2;
  box-shadow:
    0 0 0 0 rgba(61,120,178,.20),
    0 0 11px rgba(61,120,178,.30);
  animation:fmFullResumeDot 3.2s ease-out infinite;
}

.full-resume-fab b{
  color:#2c6097;
  font-size:10px;
}

.full-resume-fab:hover{
  background:linear-gradient(135deg,#173a60,#285e93);
  color:#fff;
  transform:translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 14px 34px rgba(18,44,74,.23),
    0 0 0 5px rgba(44,96,151,.06);
}

.full-resume-fab:hover b{
  color:#d9ecfc;
}

.full-resume-fab:hover .full-resume-fab-dot{
  background:#d9ecfc;
}

@keyframes fmFullResumeDot{
  0%{
    box-shadow:
      0 0 0 0 rgba(61,120,178,.22),
      0 0 11px rgba(61,120,178,.32);
  }
  60%,100%{
    box-shadow:
      0 0 0 8px rgba(61,120,178,0),
      0 0 14px rgba(61,120,178,.12);
  }
}

@media(max-width:620px){
  .full-resume-fab{
    left:10px;
    bottom:62px;
    min-height:36px;
    padding:7px 10px;
    font-size:10px;
  }

  html[dir="ltr"] .full-resume-fab{
    left:auto;
    right:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .full-resume-fab-dot{
    animation:none !important;
  }
}

@media print{
  .full-resume-fab{
    display:none !important;
  }
}

/* === FM PATCH: EN TITLES + FULL RESUME ACCESS END === */

/* === FM PATCH: UI STABILITY FIX START === */

/* ----------------------------------------------------------
   Prevent animated decorative elements from creating
   horizontal page movement on phones.
   ---------------------------------------------------------- */
html,
body{
  max-width:100%;
  overflow-x:clip;
}

@supports not (overflow:clip){
  html,
  body{
    overflow-x:hidden;
  }
}


/* ----------------------------------------------------------
   1) Stable HR / Full switch
   No pseudo-element, no width/position animation.
   Only color + shadow pulse on the deeper option.
   ---------------------------------------------------------- */

.mode-mini{
  overflow:visible !important;
}

.mode-mini::before,
.mode-mini::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}

body.mode-hr .mode-mini [data-mode="extended"]:not(.active){
  animation:fmSafeFullModeHint 2.4s ease-in-out infinite !important;
}

body.mode-extended .mode-mini [data-mode="extended"].active,
body.mode-hr .mode-mini [data-mode="hr"].active{
  animation:none !important;
}

@keyframes fmSafeFullModeHint{
  0%,100%{
    color:#65758d;
    background:transparent;
    box-shadow:0 0 0 0 rgba(44,96,151,0);
  }

  50%{
    color:#214f7c;
    background:rgba(228,239,248,.75);
    box-shadow:
      0 0 0 3px rgba(44,96,151,.055),
      0 5px 14px rgba(18,44,74,.06);
  }
}


/* ----------------------------------------------------------
   2) Contact button
   Disable ALL legacy pseudo-orbits and use one small
   real DOM track that rotates around the pill.
   ---------------------------------------------------------- */

.topbar .contact-btn{
  position:relative !important;
  overflow:visible !important;
  isolation:isolate !important;
}

.topbar .contact-btn::before,
.topbar .contact-btn::after{
  content:none !important;
  display:none !important;
  background:none !important;
  animation:none !important;
  -webkit-mask:none !important;
  mask:none !important;
}

.topbar .contact-btn .contact-btn-label{
  position:relative;
  z-index:4;
}

.contact-orbit-track{
  position:absolute;
  z-index:5;

  inset:-4px;
  border-radius:999px;

  pointer-events:none;
  transform-origin:center;

  animation:fmContactTrackOrbit 3.2s linear infinite;
}

.contact-orbit-track i{
  position:absolute;

  width:7px;
  height:7px;

  top:-2px;
  left:50%;
  transform:translateX(-50%);

  border-radius:50%;

  background:#fff;

  box-shadow:
    0 0 0 2px rgba(172,215,250,.16),
    0 0 6px rgba(216,239,255,.95),
    0 0 12px rgba(81,145,202,.62);
}

.topbar .contact-btn:hover .contact-orbit-track{
  animation-duration:2.35s;
}

@keyframes fmContactTrackOrbit{
  to{transform:rotate(360deg)}
}


/* ----------------------------------------------------------
   3) Floating Resume CTA
   Always available after scroll:
   HR => Full Resume
   Extended => HR / Summary view
   ---------------------------------------------------------- */

.full-resume-fab{
  position:fixed !important;
  overflow:hidden !important;

  min-height:44px !important;
  padding:9px 15px !important;

  border:1px solid rgba(44,96,151,.30) !important;
  border-radius:999px !important;

  background:
    linear-gradient(135deg,#ffffff 0%,#f0f6fb 55%,#e3eef8 100%) !important;

  color:#153b63 !important;

  font-size:11.5px !important;
  font-weight:900 !important;

  box-shadow:
    0 13px 30px rgba(18,44,74,.18),
    0 0 0 3px rgba(44,96,151,.04),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  animation:fmResumeFabPulse 3s ease-in-out infinite !important;
}

/* Override the old "hide in extended" rule. */
body.mode-extended .full-resume-fab{
  display:inline-flex !important;
}

body.mode-hr .full-resume-fab.is-visible,
body.mode-extended .full-resume-fab.is-visible{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) scale(1) !important;
}

/* Safe shine is clipped INSIDE the pill, so it cannot move the page. */
.full-resume-fab::after{
  content:"" !important;

  position:absolute;
  z-index:1;

  top:-40%;
  bottom:-40%;
  left:-30%;
  width:18%;

  pointer-events:none;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.90),
    rgba(101,162,216,.18),
    transparent
  );

  transform:rotate(10deg);
  opacity:0;

  animation:fmResumeFabShine 3.3s ease-in-out infinite;
}

.full-resume-fab > *{
  position:relative;
  z-index:2;
}

.full-resume-fab-dot{
  width:8px !important;
  height:8px !important;
  flex:0 0 8px !important;

  background:#3478b6 !important;

  box-shadow:
    0 0 0 0 rgba(52,120,182,.25),
    0 0 11px rgba(52,120,182,.42) !important;

  animation:fmResumeFabDot 2.4s ease-out infinite !important;
}

.full-resume-fab:hover{
  background:linear-gradient(135deg,#173c64,#2c6097) !important;
  color:#fff !important;

  transform:translateY(-3px) scale(1.025) !important;

  box-shadow:
    0 16px 36px rgba(18,44,74,.24),
    0 0 0 5px rgba(44,96,151,.055) !important;
}

@keyframes fmResumeFabPulse{
  0%,100%{
    box-shadow:
      0 13px 30px rgba(18,44,74,.18),
      0 0 0 3px rgba(44,96,151,.04),
      inset 0 1px 0 rgba(255,255,255,.96);
  }

  50%{
    box-shadow:
      0 15px 34px rgba(18,44,74,.21),
      0 0 0 6px rgba(44,96,151,.06),
      inset 0 1px 0 rgba(255,255,255,.98);
  }
}

@keyframes fmResumeFabShine{
  0%,52%{
    left:-30%;
    opacity:0;
  }

  60%{opacity:.68}

  82%{
    left:115%;
    opacity:.35;
  }

  100%{
    left:115%;
    opacity:0;
  }
}

@keyframes fmResumeFabDot{
  0%{
    box-shadow:
      0 0 0 0 rgba(52,120,182,.28),
      0 0 11px rgba(52,120,182,.42);
  }

  65%,100%{
    box-shadow:
      0 0 0 8px rgba(52,120,182,0),
      0 0 14px rgba(52,120,182,.10);
  }
}


/* ----------------------------------------------------------
   4) Mobile stability
   ---------------------------------------------------------- */

@media(max-width:620px){

  /* Existing design intentionally hides the mode-mini on phones. */
  .mode-mini{
    display:none !important;
  }

  .topbar .contact-btn{
    overflow:visible !important;
  }

  .contact-orbit-track{
    inset:-3px;
  }

  .full-resume-fab{
    left:10px !important;
    right:auto !important;
    bottom:62px !important;

    max-width:calc(100vw - 20px);

    min-height:40px !important;
    padding:8px 12px !important;

    font-size:10.5px !important;
  }

  html[dir="ltr"] .full-resume-fab{
    left:auto !important;
    right:10px !important;
  }
}


/* Keep movement subtle when OS asks for reduced motion. */
@media(prefers-reduced-motion:reduce){

  body.mode-hr .mode-mini [data-mode="extended"]:not(.active){
    animation-duration:6s !important;
  }

  .contact-orbit-track{
    animation-duration:8s !important;
  }

  .full-resume-fab,
  .full-resume-fab::after,
  .full-resume-fab-dot{
    animation-duration:7s !important;
  }
}

/* === FM PATCH: UI STABILITY FIX END === */

/* === FM PATCH: CONTACT ORBIT REFINE START === */

/*
  Refined orbit:
  - smaller light point
  - wider horizontal pill-shaped route
  - path follows the Contact button proportion instead of a large circle
*/
.contact-orbit-track{
  position:absolute !important;
  z-index:5 !important;

  /* Wider than the button, but still close to its real perimeter */
  width:calc(100% + 18px) !important;
  height:calc(100% + 12px) !important;

  inset:auto !important;
  top:50% !important;
  left:50% !important;

  transform:translate(-50%,-50%) !important;

  border-radius:999px !important;
  pointer-events:none !important;

  /* The track itself no longer rotates */
  animation:none !important;
}

.contact-orbit-track i{
  position:absolute !important;

  width:4px !important;
  height:4px !important;

  /* Start from the top-center of the pill path */
  top:0 !important;
  left:0 !important;

  border-radius:50% !important;
  background:#ffffff !important;

  box-shadow:
    0 0 0 1.5px rgba(173,216,250,.13),
    0 0 4px rgba(220,241,255,.92),
    0 0 8px rgba(79,142,198,.48) !important;

  /*
    Motion-path makes the light follow a rounded-rectangle / pill route
    instead of rotating on a circular radius.
  */
  offset-path:inset(0 round 999px);
  offset-distance:0%;
  offset-rotate:0deg;

  animation:fmContactPillOrbit 3.25s linear infinite !important;
}

.topbar .contact-btn:hover .contact-orbit-track i{
  animation-duration:2.45s !important;
}

@keyframes fmContactPillOrbit{
  from{ offset-distance:0%; }
  to{ offset-distance:100%; }
}

/* Fallback for browsers without CSS motion-path support */
@supports not (offset-path: inset(0 round 999px)){
  .contact-orbit-track{
    width:128% !important;
    height:152% !important;
    transform:translate(-50%,-50%) scaleY(.52) !important;
    animation:fmContactOrbitFallback 3.25s linear infinite !important;
  }

  .contact-orbit-track i{
    top:-2px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    offset-path:none !important;
    animation:none !important;
  }

  @keyframes fmContactOrbitFallback{
    to{
      transform:translate(-50%,-50%) scaleY(.52) rotate(360deg);
    }
  }
}

@media(max-width:620px){
  .contact-orbit-track{
    width:calc(100% + 14px) !important;
    height:calc(100% + 10px) !important;
  }

  .contact-orbit-track i{
    width:3.5px !important;
    height:3.5px !important;
  }
}

/* === FM PATCH: CONTACT ORBIT REFINE END === */

/* === FM PATCH: DESKTOP MOTION + INNER CONTACT ORBIT START === */

/* ----------------------------------------------------------
   1) Contact Me — tiny light INSIDE the navy pill
   ---------------------------------------------------------- */

.contact-orbit-track{
  position:absolute !important;
  z-index:5 !important;

  /* Stay inside the button instead of outside it */
  width:calc(100% - 8px) !important;
  height:calc(100% - 8px) !important;

  inset:auto !important;
  top:50% !important;
  left:50% !important;

  transform:translate(-50%,-50%) !important;

  border-radius:999px !important;
  pointer-events:none !important;
  animation:none !important;
}

.contact-orbit-track i{
  position:absolute !important;

  width:3px !important;
  height:3px !important;

  top:0 !important;
  left:0 !important;

  border-radius:50% !important;
  background:#ffffff !important;

  box-shadow:
    0 0 3px rgba(231,246,255,.95),
    0 0 6px rgba(118,181,233,.62) !important;

  offset-path:inset(0 round 999px) !important;
  offset-distance:0%;
  offset-rotate:0deg;

  animation:fmContactInnerPillOrbit 3.15s linear infinite !important;
}

.topbar .contact-btn:hover .contact-orbit-track i{
  animation-duration:2.45s !important;
}

@keyframes fmContactInnerPillOrbit{
  from{offset-distance:0%}
  to{offset-distance:100%}
}

/* Fallback: still stays inside the button */
@supports not (offset-path: inset(0 round 999px)){
  .contact-orbit-track{
    width:92% !important;
    height:78% !important;
    transform:translate(-50%,-50%) !important;
    animation:fmContactInnerFallback 3.15s linear infinite !important;
  }

  .contact-orbit-track i{
    top:-1px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    offset-path:none !important;
    animation:none !important;
  }

  @keyframes fmContactInnerFallback{
    to{
      transform:translate(-50%,-50%) rotate(360deg);
    }
  }
}


/* ----------------------------------------------------------
   2) Desktop/Windows:
   Re-enable ONLY the intentional subtle site animations when
   Windows reports "Reduce motion".
   General page transitions remain disabled.
   ---------------------------------------------------------- */

@media (min-width:621px) and (prefers-reduced-motion:reduce){

  /* Portrait halo + three tiny sparks */
  .portrait-halo{
    animation:fmPortraitHaloTurn 18s linear infinite !important;
  }

  .spark-one{
    animation:fmSparkOne 8.4s ease-in-out infinite !important;
  }

  .spark-two{
    animation:fmSparkTwo 10.6s ease-in-out infinite !important;
  }

  .spark-three{
    animation:fmSparkThree 12.2s ease-in-out infinite !important;
  }

  /* Extended / Full Portfolio hero card attention */
  #heroExt{
    animation:fmExtSoftPulse 7s ease-in-out infinite !important;
  }

  #heroExt::before{
    animation:fmExtLightSweep 6.8s ease-in-out infinite !important;
    opacity:1 !important;
  }

  .mode-option[data-mode="extended"]{
    animation:fmExtBreathReal 7s ease-in-out infinite !important;
  }

  .mode-option[data-mode="extended"]::before{
    animation:fmExtGlowReal 8s ease-in-out infinite !important;
  }

  .mode-option[data-mode="extended"]::after{
    animation:fmExtSweepReal 6.8s ease-in-out infinite !important;
  }

  /* Section entrance cues */
  .fm-section-enhanced .fm-section-icon::before{
    animation:fmSectionSpin 8s linear infinite !important;
  }

  .fm-section-enhanced .fm-section-subline::before{
    animation:fmSectionSweep 6s ease-in-out infinite !important;
  }

  /* HR/Full hint and floating resume CTA */
  body.mode-hr .mode-mini [data-mode="extended"]:not(.active){
    animation:fmSafeFullModeHint 3.4s ease-in-out infinite !important;
  }

  .full-resume-fab{
    animation:fmResumeFabPulse 4.8s ease-in-out infinite !important;
  }

  .full-resume-fab::after{
    animation:fmResumeFabShine 5.2s ease-in-out infinite !important;
  }

  .full-resume-fab-dot{
    animation:fmResumeFabDot 4.2s ease-out infinite !important;
  }

  /* Contact orbit remains active but slow and subtle */
  .contact-orbit-track i{
    animation:fmContactInnerPillOrbit 4.4s linear infinite !important;
  }
}


/* Mobile stays exactly as it currently behaves */
@media(max-width:620px){
  .contact-orbit-track{
    width:calc(100% - 7px) !important;
    height:calc(100% - 7px) !important;
  }

  .contact-orbit-track i{
    width:2.8px !important;
    height:2.8px !important;
  }
}

/* === FM PATCH: DESKTOP MOTION + INNER CONTACT ORBIT END === */

/* === FM PATCH: NAV FULL RESUME CLIP FIX START === */

/*
  The extra Full Resume link can be partially clipped when the sticky
  header has insufficient horizontal room. In that width range the
  HR/Full switch already provides the same action, so hide only this
  redundant nav item rather than showing a blue sliver.
*/
@media (max-width:1450px){
  .nav .nav-full-resume{
    display:none !important;
  }
}

/* If there is enough room, show the item normally and never let it shrink. */
@media (min-width:1451px){
  .nav .nav-full-resume{
    display:inline-flex !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }
}

/* Prevent any clipped active pill fragment at the left edge of the nav. */
.nav{
  overflow-x:auto;
  overflow-y:hidden;
}

/* === FM PATCH: NAV FULL RESUME CLIP FIX END === */

/* === FM PATCH: NAV FULL RESUME FINAL HIDE START === */

/*
  Permanent removal of the redundant Full Resume item from the
  scrollable top navigation. The خلاصه/کامل switch and floating CTA
  remain the intended access points.
*/
.nav .nav-full-resume{
  display:none !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
  visibility:hidden !important;
}

/* === FM PATCH: NAV FULL RESUME FINAL HIDE END === */